chore: use monorepo organization

packages/admin-ui/src/Main.jsx

@@ -0,0 +1,83 @@
+import { useHistory, useLocation } from 'react-router-dom'
+import React, { useContext } from 'react'
+import { gql, useQuery } from '@apollo/client'
+import Slide from '@mui/material/Slide'
+import Grid from '@mui/material/Grid'
+
+import Header from './components/layout/Header.jsx'
+import Sidebar from './components/layout/Sidebar.jsx'
+import TitleSection from './components/layout/TitleSection.jsx'
+import { getParent, hasSidebar, Routes, tree } from './routing/routes.jsx'
+
+import AppContext from './AppContext.js'
+
+const GET_USER_DATA = gql`
+  query userData {
+    userData {
+      id
+      username
+      role
+      enabled
+      last_accessed
+      last_accessed_from
+      last_accessed_address
+    }
+  }
+`
+
+const Main = () => {
+  const location = useLocation()
+  const history = useHistory()
+  const { wizardTested, userData, setUserData } = useContext(AppContext)
+
+  const { loading } = useQuery(GET_USER_DATA, {
+    onCompleted: userResponse => {
+      if (!userData && userResponse?.userData)
+        setUserData(userResponse.userData)
+    }
+  })
+
+  const route = location.pathname
+
+  const sidebar = hasSidebar(route)
+  const parent = sidebar ? getParent(route) : {}
+
+  const is404 = location.pathname === '/404'
+
+  const isSelected = it => location.pathname === it.route
+
+  const onClick = it => history.push(it.route)
+
+  const contentClassName = sidebar ? 'flex-1 ml-12 pt-4' : 'w-[1200px]'
+
+  return (
+    <div className="flex flex-col w-full min-h-full">
+      {!is404 && wizardTested && userData && (
+        <Header tree={tree} user={userData} />
+      )}
+      <main className="flex flex-1 flex-col my-0 mx-auto h-full w-[1200px]">
+        {sidebar && !is404 && wizardTested && (
+          <Slide direction="left" in={true} mountOnEnter unmountOnExit>
+            <div>
+              <TitleSection title={parent.title}></TitleSection>
+            </div>
+          </Slide>
+        )}
+
+        <Grid sx={{ flex: 1, height: 1 }} container>
+          {sidebar && !is404 && wizardTested && (
+            <Sidebar
+              data={parent.children}
+              isSelected={isSelected}
+              displayName={it => it.label}
+              onClick={onClick}
+            />
+          )}
+          <div className={contentClassName}>{!loading && <Routes />}</div>
+        </Grid>
+      </main>
+    </div>
+  )
+}
+
+export default Main