nested routes for admin page #1211

src/App.tsx

@@ -1,21 +1,27 @@
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import type { Router } from '@remix-run/router';
 import {
   QueryCache,
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/react-query';
-import React from 'react';
-// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import type { Router } from '@remix-run/router';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AxiosError } from 'axios';
 import { enGB } from 'date-fns/locale/en-GB';
+import React from 'react';
 import {
   RouterProvider,
+  ScrollRestoration,
   createBrowserRouter,
   type RouteObject,
 } from 'react-router-dom';
-import AdminPage from './admin/admin.component';
+import AdminCardView from './admin/adminCardView.component';
+import AdminLayout, {
+  AdminErrorComponent,
+} from './admin/adminLayout.component';
+import Units from './admin/units/units.component';
+import UsageStatuses from './admin/usageStatuses/usageStatuses.component';
 import {
   clearFailedAuthRequestsQueue,
   retryFailedAuthRequests,
@@ -49,7 +55,9 @@ import ViewTabs from './view/viewTabs.component';
 export const paths = {
   any: '*',
   root: '/',
-  admin: '/admin-ims/*',
+  admin: '/admin-ims',
+  adminUnits: '/admin-ims/units',
+  adminUsageStatuses: '/admin-ims/usage-statuses',
   homepage: '/ims',
   catalogue: '/catalogue/*',
   systems: '/systems/*',
@@ -85,7 +93,19 @@ const routeObject: RouteObject[] = [
     children: [
       { path: paths.root, Component: HomePage },
       { path: paths.homepage, Component: HomePage },
-      { path: paths.admin, Component: AdminPage },
+      {
+        path: paths.admin,
+        Component: AdminLayout,
+        children: [
+          { index: true, Component: AdminCardView },
+          { path: paths.adminUnits, Component: Units },
+          { path: paths.adminUsageStatuses, Component: UsageStatuses },
+          {
+            path: '*',
+            Component: AdminErrorComponent,
+          },
+        ],
+      },
       { path: paths.catalogue, Component: Catalogue },
       {
         path: paths.catalogueItem,
@@ -100,11 +120,14 @@ const routeObject: RouteObject[] = [
       {
         path: paths.manufacturers,
         Component: ManufacturerLayout,
-        loader: manufacturerLayoutLoader(queryClient),
         ErrorBoundary: ManufacturerLayoutErrorComponent,
         children: [
           { index: true, Component: ManufacturerTable },
-          { path: paths.manufacturer, Component: ManufacturerLandingPage },
+          {
+            path: paths.manufacturer,
+            Component: ManufacturerLandingPage,
+            loader: manufacturerLayoutLoader(queryClient),
+          },
           {
             path: '*',
             Component: ManufacturerErrorComponent,
@@ -164,7 +187,8 @@ export function Layout() {
                 }
               >
                 <ViewTabs />
-                {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+                <ReactQueryDevtools initialIsOpen={false} />
+                <ScrollRestoration />
               </React.Suspense>
             </QueryClientProvider>
           </ConfigProvider>

src/admin/__snapshots__/adminCardView.component.test.tsx.snap

@@ -0,0 +1,86 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AdminCardView > renders admin card view correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
+  >
+    <div
+      class="MuiGrid-root MuiGrid-container css-k6wrnl-MuiGrid-root"
+    >
+      <div
+        class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 css-le9sc4-MuiGrid-root"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+        >
+          <a
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-q760su-MuiButtonBase-root-MuiButton-root"
+            href="/units"
+            tabindex="0"
+          >
+            <div
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-siqlql-MuiPaper-root-MuiCard-root"
+            >
+              <div
+                class="MuiCardContent-root css-lo1d59-MuiCardContent-root"
+              >
+                <div
+                  class="MuiGrid-root css-vj1n65-MuiGrid-root"
+                >
+                  <div
+                    class="MuiGrid-root css-13qkvwv-MuiGrid-root"
+                  >
+                    <p
+                      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+                    >
+                      Units
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </a>
+        </div>
+        <div
+          class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-1b3l6lk-MuiGrid-root"
+        >
+          <a
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-q760su-MuiButtonBase-root-MuiButton-root"
+            href="/usage-statuses"
+            tabindex="0"
+          >
+            <div
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-siqlql-MuiPaper-root-MuiCard-root"
+            >
+              <div
+                class="MuiCardContent-root css-lo1d59-MuiCardContent-root"
+              >
+                <div
+                  class="MuiGrid-root css-vj1n65-MuiGrid-root"
+                >
+                  <div
+                    class="MuiGrid-root css-13qkvwv-MuiGrid-root"
+                  >
+                    <p
+                      class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+                    >
+                      Usage Statuses
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <span
+              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;