add Corporate Context Provider

frontend/dashboard/.eslintrc

@@ -31,6 +31,7 @@
     "import/no-useless-path-segments": 1,
     "import/no-extraneous-dependencies": 0,
     "@typescript-eslint/naming-convention": 0,
+    "import/extensions": "never",
     "object-curly-spacing": [
       1,
       "always"

frontend/dashboard/src/contexts/ConfiguredCorporateContext.tsx

@@ -0,0 +1,49 @@
+import { Corporate } from '@/@types/corporates';
+import axios from '@/utils/axios';
+import { ReactNode, createContext, useState, useEffect } from 'react';
+import { useParams } from 'react-router';
+// hooks
+import useResponsive from '../hooks/useResponsive';
+
+// ----------------------------------------------------------------------
+
+export type ConfiguredCorporateContextProps = {
+  currentCorporate?: Corporate | null;
+};
+
+const initialState: ConfiguredCorporateContextProps = {
+  currentCorporate: null,
+};
+
+const ConfiguredCorporateContext = createContext(initialState);
+
+type ConfiguredCorporateProviderProps = {
+  children: ReactNode;
+};
+
+function ConfiguredCorporateProvider({ children }: ConfiguredCorporateProviderProps) {
+  const { corporate_id } = useParams();
+  const [corporate, setCorporate] = useState(null);
+
+  useEffect(() => {
+    // Load Corporate
+    console.log('calling corporate' + corporate_id);
+    
+    axios.get(`corporates/${corporate_id}`)
+    .then((res) => {
+      setCorporate(res.data)
+    })
+  }, []);
+
+  return (
+    <ConfiguredCorporateContext.Provider
+      value={{
+        currentCorporate: corporate,
+      }}
+    >
+      {children}
+    </ConfiguredCorporateContext.Provider>
+  );
+}
+
+export { ConfiguredCorporateProvider, ConfiguredCorporateContext };

frontend/dashboard/src/layouts/dashboard/index.tsx

@@ -90,6 +90,15 @@ export default function DashboardLayout() {
       sx={{
         display: { lg: 'flex' },
         minHeight: { lg: 1 },
+        
+        pl: {
+          xs: 2,
+          lg: 0
+        },
+        pr: {
+          xs: 2,
+          lg: 0
+        },
       }}
     >
       <DashboardHeader isCollapse={isCollapse} onOpenSidebar={() => setOpen(true)} />

frontend/dashboard/src/pages/Corporates/ConfigLayout.tsx

@@ -0,0 +1,19 @@
+import { Outlet } from 'react-router-dom';
+// @mui
+import { Stack } from '@mui/material';
+import { ConfiguredCorporateProvider } from '@/contexts/ConfiguredCorporateContext';
+
+export default function ConfigLayout() {
+  return (
+    <Stack
+      sx={{
+        display: { lg: 'flex' },
+        minHeight: { lg: 1 },
+      }}
+    >
+      <ConfiguredCorporateProvider>
+        <Outlet />
+      </ConfiguredCorporateProvider>
+    </Stack>
+  );
+}

frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx

@@ -80,7 +80,7 @@ export default function CorporateTabNavigations({ position }: Props) {
       allowScrollButtonsMobile
       aria-label="scrollable force tabs example"
     >
-      {mainTabItems.map((tabItem, index) => (<Tab key={index} onClick={() => { navigate("/corporates/"+corporate_id+"/"+mainTabItems[index].path) }}label={tabItem.label}/>))}
+      {mainTabItems.map((tabItem, index) => (<Tab key={index} onClick={() => { navigate("/corporate/"+corporate_id+"/"+mainTabItems[index].path) }}label={tabItem.label}/>))}
     </Tabs>
   )
 }

frontend/dashboard/src/pages/Corporates/Division/Index.tsx

@@ -1,4 +1,7 @@
+import { Corporate } from "@/@types/corporates";
+import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
 import { Card, Grid } from "@mui/material";
+import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
 import Page from "../../../components/Page";
@@ -13,6 +16,14 @@ export default function Divisions() {
 
   const { corporate_id } = useParams();
   
+  const [corporate, setCorporate] = useState<Corporate|null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext])
+
   return (
     <Page title="Division">
 
@@ -24,7 +35,7 @@ export default function Divisions() {
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
+            name: corporate?.name ?? '-',
             href: '/corporates/'+corporate_id,
           },
           {

frontend/dashboard/src/pages/Corporates/Index.tsx

@@ -333,7 +333,7 @@ export default function Corporates() {
                   Edit
                 </Button>
               </Link>
-              <Link to={'/corporates/' + row.id + ''}>
+              <Link to={'/corporate/' + row.id + ''}>
                 <Button variant="outlined" color="primary" size="small">
                   Config
                 </Button>

frontend/dashboard/src/pages/Corporates/Show.tsx

@@ -11,26 +11,25 @@ import Page from '../../components/Page';
 import axios from '../../utils/axios';
 import useAuth from '../../hooks/useAuth';
 import { Link , NavLink as RouterLink, useParams } from 'react-router-dom';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { Theme, useTheme } from '@mui/material/styles';
 import { Corporate } from '../../@types/corporates';
 import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
 import CorporateTabNavigations from './CorporateTabNavigations';
 import { fCurrency } from '../../utils/formatNumber';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
 
 export default function Corporates() {
   const { themeStretch } = useSettings();
   const { corporate_id } = useParams();
-  const [corporate, setCorporate] = useState<Corporate>();
+  const [corporate, setCorporate] = useState<Corporate|null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
 
   useEffect(() => {
-    // TODO Use Hooks
+    setCorporate(configuredCorporateContext.currentCorporate);
-    axios.get(`corporates/${corporate_id}`)
+  }, [configuredCorporateContext])
-    .then((res) => {
-      setCorporate(res.data)
-    })
-  }, [])
 
   const headStyle = {
     fontWeight: 'bold',
@@ -52,7 +51,6 @@ export default function Corporates() {
         ]}
       />
       
-
       {/* <Container maxWidth={themeStretch ? false : 'xl'}> */}
         <Card>
           <Stack spacing="3">

frontend/dashboard/src/routes/index.tsx

@@ -89,8 +89,18 @@ export default function Router() {
           element: <CorporateCreate />,
         },
         {
-          path: 'corporates/:corporate_id',
+          path: 'corporate',
-          element: <CorporateShow />,
+          element: <ConfigLayout />, // Layout that use the context
+          children: [
+            {
+              path: ':corporate_id',
+              element: <CorporateShow />,
+            },
+            {
+              path: ':corporate_id/divisions',
+              element: <CorporateDivisions />,
+            },
+          ]
         },
         {
           path: 'corporates/:corporate_id/edit',
@@ -272,6 +282,9 @@ const NotFound = Loadable(lazy(() => import('../pages/Page404')));
 const Members = Loadable(lazy(() => import('../pages/Members/Index')));
 const MedicinesCreate = Loadable(lazy(() => import('../pages/Medicines/Create')));
 
+// Corporate
+const ConfigLayout = Loadable(lazy(() => import('../pages/Corporates/ConfigLayout')));
+
 const Corporate = Loadable(lazy(() => import('../pages/Corporates/Index')));
 const CorporateCreate = Loadable(lazy(() => import('../pages/Corporates/CreateUpdate')));
 const CorporateShow = Loadable(lazy(() => import('../pages/Corporates/Show')));

frontend/dashboard/tsconfig.json

@@ -15,7 +15,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.json" }]
 }

frontend/dashboard/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import svgrPlugin from 'vite-plugin-svgr'
 import { VitePWA } from 'vite-plugin-pwa'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -20,4 +21,7 @@ export default defineConfig({
       },
     }),
   ],
+  resolve: {
+    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+  }
 })