adding components for admin config

app/client/web/src/accounts/Accounts.tsx

@@ -0,0 +1,4 @@
+export function Accounts({ openSetup }: { openSetup: ()=>void }) {
+  return <div onClick={openSetup}>ACCOUNTS</div>
+}
+

app/client/web/src/service/Service.module.css

@@ -0,0 +1,2 @@
+.service {
+}

app/client/web/src/service/Service.tsx

@@ -1,10 +1,72 @@
-import React, { useContext } from 'react'
-import { Button } from '@mantine/core'
-import { AppContext } from '../context/AppContext'
+import React, { useState } from 'react'
+import { Text, Drawer } from '@mantine/core'
+import { DisplayContext } from '../context/DisplayContext'
 import { ContextType } from '../context/ContextType'
+import classes from './Service.module.css'
+import { useService } from './useService.hook'
+import { IconAddressBook, IconSettings } from '@tabler/icons-react'
+import { Accounts } from '../accounts/Accounts'
+import { Setup } from '../setup/Setup'
+import { useDisclosure } from '@mantine/hooks'
 
 export function Service() {
-  const app = useContext(AppContext) as ContextType
+  const { state } = useService();
+  const [tab, setTab] = useState('accounts')
+  const [setup, { open: openSetup, close: closeSetup }] = useDisclosure(false)
 
-  return <Button onClick={app.actions.adminLogout}>Node Logout</Button>
+  return (
+    <div className={classes.session}>
+      {state.layout === 'small' && (
+        <>
+          <div className={classes.body}>
+            <div className={tab === 'setup' ? classes.show : classes.hide}>
+              <div className={classes.screen}>
+                <Setup />
+              </div>
+            </div>
+            <div className={tab === 'accounts' ? classes.show : classes.hide}>
+              <div className={classes.screen}>
+                <Accounts />
+              </div>
+            </div>
+          </div>
+          <div className={classes.tabs}>
+            {tab === 'accounts' && (
+              <div className={classes.activeTabItem}>
+                <IconAddressBook className={classes.tabIcon} />
+              </div>
+            )}
+            {tab !== 'accounts' && (
+              <div className={classes.idleTabItem} onClick={() => setTab('accounts')}>
+                <IconAddressBook className={classes.tabIcon} />
+              </div>
+            )}
+            <div className={classes.tabDivider} />
+            {tab === 'setup' && (
+              <div className={classes.activeTabItem}>
+                <IconSettings className={classes.tabIcon} />
+              </div>
+            )}
+            {tab !== 'setup' && (
+              <div className={classes.idleTabItem} onClick={() => setTab('setup')}>
+                <IconSettings className={classes.tabIcon} />
+              </div>
+            )}
+          </div>
+        </>
+      )}
+      {state.layout === 'large' && (
+        <div className={classes.display}>
+          <div style={classes.accounts}>
+            <Accounts openSetup={openSetup} />
+          </div>
+          <Drawer opened={setup} onClose={closeSetup} withCloseButton={false} size="sm" padding="0" position="right">
+            <div style={{ height: '100vh' }}>
+              <Setup />
+            </div>
+          </Drawer>
+        </div>
+      )}
+    </div>
+  )
 }

app/client/web/src/service/useService.hook.ts

@@ -0,0 +1,31 @@
+import {useEffect, useState, useContext, useRef} from 'react';
+import {AppContext} from '../context/AppContext';
+import {DisplayContext} from '../context/DisplayContext';
+import {ContextType} from '../context/ContextType';
+
+export function useService() {
+  const display = useContext(DisplayContext) as ContextType;
+  const app = useContext(AppContext) as ContextType;
+
+  const [state, setState] = useState({
+    layout: null,
+    strings: {},
+  });
+
+  const updateState = (value: any) => {
+    setState(s => ({...s, ...value}));
+  };
+
+  useEffect(() => {
+    const {layout, strings} = display.state;
+    updateState({layout, strings});
+  }, [display.state]);
+
+  const actions = {
+    logout: async () => {
+      await app.actions.adminLogout();
+    },
+  };
+
+  return {state, actions};
+}

app/client/web/src/setup/Setup.tsx

@@ -0,0 +1,4 @@
+export function Setup() {
+  return <div>SETUP</div>
+}
+