Address review comments #1211

- manufacturer loader in the correct location
- Add scroll restoration react router
- add dev tool for react query

src/App.tsx

@@ -1,17 +1,18 @@
+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';
@@ -119,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,
@@ -188,7 +192,8 @@ export function Layout() {
                 }
               >
                 <ViewTabs />
-                {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+                <ReactQueryDevtools initialIsOpen={false} />
+                <ScrollRestoration />
               </React.Suspense>
             </QueryClientProvider>
           </ConfigProvider>

src/admin/adminCardView.component.tsx

@@ -9,7 +9,7 @@ function AdminCardView() {
           <Grid item key={0} xs={12} sm={6}>
             <Button
               component={Link}
-              to={'units'}
+              to="units"
               fullWidth
               sx={{
                 display: 'flex',
@@ -21,7 +21,7 @@ function AdminCardView() {
             >
               <Card
                 sx={{
-                  padding: '8px',
+                  padding: 1,
                   width: '100%',
                   display: 'flex',
                   height: '100px', // Set a fixed height for all cards

src/admin/adminLayout.component.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 import { BreadcrumbsInfo } from '../api/api.types';
+import { paths } from '../App';
 import BaseLayoutHeader from '../common/baseLayoutHeader.component';
 import ErrorPage from '../common/errorPage.component';
 
@@ -18,14 +19,12 @@ export const useGetAdminPageName = (): string | null => {
   const location = useLocation();
 
   return React.useMemo(() => {
-    let adminPageName: string | null = location.pathname.replace(
-      '/admin-ims',
+    const adminPageName: string | null = location.pathname.replace(
+      paths.admin,
       ''
     );
-    adminPageName =
-      adminPageName === '' ? null : adminPageName.replace('/', '');
-    return adminPageName;
-  }, [location.pathname]);
+    return adminPageName === '' ? null : adminPageName.replace('/', '');
+  }, []);
 };
 
 const adminBreadCrumbsTrails: { [key: string]: [string, string] } = {