Merge branch 'master' into pajri

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/Benefit/Index.tsx

@@ -1,36 +1,45 @@
-import { Card, Grid } from "@mui/material";
+import { Card, Grid } from '@mui/material';
-import { useParams } from "react-router-dom";
+import { useParams } from 'react-router-dom';
-import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
-import Page from "../../../components/Page";
+import Page from '../../../components/Page';
-import useSettings from "../../../hooks/useSettings";
+import useSettings from '../../../hooks/useSettings';
-import CorporateTabNavigations from "../CorporateTabNavigations";
+import CorporateTabNavigations from '../CorporateTabNavigations';
-import DivisionsList from "./List";
+import DivisionsList from './List';
-
 
+import { useContext, useEffect, useState } from 'react';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import { Corporate } from '@/@types/corporates';
 
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
   const { corporate_id } = useParams();
 
+  const [corporate, setCorporate] = useState<Corporate | null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext]);
+
   const pageTitle = 'Benefit';
   return (
-    <Page title={ pageTitle }>
+    <Page title={pageTitle}>
-
       <HeaderBreadcrumbs
-        heading={ pageTitle }
+        heading={pageTitle}
         links={[
           {
             name: 'Corporates',
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
+            name: corporate?.name ?? '-',
-            href: '/corporates/'+corporate_id,
+            href: '/corporates/' + corporate_id,
           },
           {
             name: 'Benefit',
-            href: '/corporates/'+corporate_id+'/benefits',
+            href: '/corporates/' + corporate_id + '/benefits',
           },
         ]}
       />

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

@@ -1,21 +1,29 @@
-import { Card, Grid, Typography } from "@mui/material";
+import { Card, Grid, Typography } from '@mui/material';
-import { useParams } from "react-router-dom";
+import { useParams } from 'react-router-dom';
-import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
-import Page from "../../../components/Page";
+import Page from '../../../components/Page';
-import useSettings from "../../../hooks/useSettings";
+import useSettings from '../../../hooks/useSettings';
-import CorporateTabNavigations from "../CorporateTabNavigations";
+import CorporateTabNavigations from '../CorporateTabNavigations';
-import DivisionsList from "./List";
+import DivisionsList from './List';
-
 
+import { useContext, useEffect, useState } from 'react';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import { Corporate } from '@/@types/corporates';
 
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
   const { corporate_id } = useParams();
+  const [corporate, setCorporate] = useState<Corporate | null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext]);
 
   return (
     <Page title="Claim History">
-
       <HeaderBreadcrumbs
         heading={'Claim History'}
         links={[
@@ -24,12 +32,12 @@ export default function Divisions() {
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
+            name: corporate?.name ?? '-',
-            href: '/corporates/'+corporate_id,
+            href: '/corporates/' + corporate_id,
           },
           {
             name: 'Claim History',
-            href: '/corporates/'+corporate_id+'/claim-histories',
+            href: '/corporates/' + corporate_id + '/claim-histories',
           },
         ]}
       />

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/CorporatePlan/Index.tsx

@@ -1,21 +1,28 @@
-import { Card, Grid } from "@mui/material";
+import { Card, Grid } from '@mui/material';
-import { useParams } from "react-router-dom";
+import { useParams } from 'react-router-dom';
-import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
-import Page from "../../../components/Page";
+import Page from '../../../components/Page';
-import useSettings from "../../../hooks/useSettings";
+import useSettings from '../../../hooks/useSettings';
-import CorporateTabNavigations from "../CorporateTabNavigations";
+import CorporateTabNavigations from '../CorporateTabNavigations';
-import DivisionsList from "./List";
+import DivisionsList from './List';
-
+import { useContext, useEffect, useState } from 'react';
-
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
-
+import { Corporate } from '@/@types/corporates';
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
   const { corporate_id } = useParams();
 
+  const [corporate, setCorporate] = useState<Corporate | null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext]);
+
   return (
     <Page title="Corporate Plan">
-
       <HeaderBreadcrumbs
         heading={'Corporate Plan'}
         links={[
@@ -24,12 +31,12 @@ export default function Divisions() {
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
+            name: corporate?.name ?? '-',
-            href: '/corporates/'+corporate_id,
+            href: '/corporates/' + corporate_id,
           },
           {
             name: 'Corporate Plan',
-            href: '/corporates/'+corporate_id+'/corporate-plans',
+            href: '/corporates/' + corporate_id + '/corporate-plans',
           },
         ]}
       />
@@ -42,10 +49,7 @@ export default function Divisions() {
           </Card>
         </Grid>
         <Grid item xs={4}>
-          <Card sx={{ p: 2 }}>
+          <Card sx={{ p: 2 }}>Corporate Detail Goes Here &nbsp;</Card>
-            Corporate Detail Goes Here
-            &nbsp;
-          </Card>
         </Grid>
       </Grid>
     </Page>

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

@@ -89,7 +89,7 @@ export default function CorporateTabNavigations({ position }: Props) {
         <Tab
           key={index}
           onClick={() => {
-            navigate('/corporates/' + corporate_id + '/' + mainTabItems[index].path);
+            navigate('/corporate/' + corporate_id + '/' + mainTabItems[index].path);
           }}
           label={tabItem.label}
         />

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

@@ -1,40 +1,48 @@
-import { Card, Grid } from "@mui/material";
+import { Card, Grid } from '@mui/material';
-import { useParams } from "react-router-dom";
+import { useParams } from 'react-router-dom';
-import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
-import Page from "../../../components/Page";
+import Page from '../../../components/Page';
-import useSettings from "../../../hooks/useSettings";
+import useSettings from '../../../hooks/useSettings';
-import CorporateTabNavigations from "../CorporateTabNavigations";
+import CorporateTabNavigations from '../CorporateTabNavigations';
-import List from "./List";
+import List from './List';
-
 
+import { useContext, useEffect, useState } from 'react';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import { Corporate } from '@/@types/corporates';
 
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
   const { corporate_id } = useParams();
+  const [corporate, setCorporate] = useState<Corporate | null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext]);
 
   const pageTitle = 'Diagnosis Exclusion';
   return (
-    <Page title={ pageTitle }>
+    <Page title={pageTitle}>
-
       <HeaderBreadcrumbs
-        heading={ pageTitle }
+        heading={pageTitle}
         links={[
           {
             name: 'Corporates',
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
+            name: corporate?.name ?? '-',
-            href: '/corporates/'+corporate_id,
+            href: '/corporates/' + corporate_id,
           },
           {
             name: 'Diagnosis Exclusion',
-            href: '/corporates/'+corporate_id+'/diagnosis-exclusions',
+            href: '/corporates/' + corporate_id + '/diagnosis-exclusions',
           },
         ]}
       />
-      
+
       <Card>
         <CorporateTabNavigations position={'diagnosis-exclusions'} />
         <List />

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";
@@ -12,6 +15,14 @@ export default function Divisions() {
   const { themeStretch } = useSettings();
 
   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/Division/List.tsx

@@ -1,5 +1,32 @@
 // @mui
-import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup } from '@mui/material';
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Tab,
+  Tabs,
+  CardHeader,
+  Stack,
+  Menu,
+  ButtonGroup,
+} from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
@@ -20,39 +47,47 @@ export default function PlanList() {
   const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
-  
+
   function SearchInput(props: any) {
-     // SEARCH
+    // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState('');
 
     const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? ''
+      const newSearchText = event.target.value ?? '';
       setSearchText(newSearchText);
-    }
+    };
 
     const handleSubmit = (event: any) => {
       event.preventDefault();
       props.onSearch(searchText); // Trigger to Parent
-    }
+    };
 
-    useEffect(() =>  {
+    useEffect(() => {
       // console.log('Search Input: useEffect')
       setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams])
+    }, [searchParams]);
 
     return (
       <form onSubmit={handleSubmit} style={{ width: '100%' }}>
-        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+        <TextField
+          id="search-input"
+          ref={searchInput}
+          label="Search"
+          variant="outlined"
+          fullWidth
+          onChange={handleSearchChange}
+          value={searchText}
+        />
       </form>
     );
   }
 
   // Called on every row to map the data to the columns
-  function createData( plan: CorporatePlan ): CorporatePlan {
+  function createData(plan: CorporatePlan): CorporatePlan {
     return {
       ...plan,
-    }
+    };
   }
 
   // Generate the every row of the table
@@ -64,11 +99,7 @@ export default function PlanList() {
       <React.Fragment>
         <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
           <TableCell>
-            <IconButton
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
           </TableCell>
@@ -76,8 +107,18 @@ export default function PlanList() {
           <TableCell align="left">{row.code}</TableCell>
           <TableCell align="left">{row.name}</TableCell>
           <TableCell align="left">{row.description}</TableCell>
-          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
+          <TableCell align="right">
-          <TableCell align="right"><Link to={`/corporates/${row.corporate_id}/divisions/${row.id}/edit`}><Button variant="outlined" color="success" size="small">Edit</Button></Link></TableCell>
+            <Button variant="outlined" color="success" size="small">
+              Active
+            </Button>
+          </TableCell>
+          <TableCell align="right">
+            <Link to={`/corporate/${row.corporate_id}/divisions/${row.id}/edit`}>
+              <Button variant="outlined" color="success" size="small">
+                Edit
+              </Button>
+            </Link>
+          </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
@@ -88,37 +129,41 @@ export default function PlanList() {
                   No Extra Data
                 </Typography>
               </Box>
-            {false && <Box sx={{ margin: 1 }}>
+              {false && (
-                <Typography variant="h6" gutterBottom component="div">
+                <Box sx={{ margin: 1 }}>
-                  Rules
+                  <Typography variant="h6" gutterBottom component="div">
-                </Typography>
+                    Rules
-                <Table size="small" aria-label="purchases">
+                  </Typography>
-                  <TableHead>
+                  <Table size="small" aria-label="purchases">
-                    <TableRow>
+                    <TableHead>
-                      <TableCell>Date</TableCell>
+                      <TableRow>
-                      <TableCell>Customer</TableCell>
+                        <TableCell>Date</TableCell>
-                      <TableCell align="right">Amount</TableCell>
+                        <TableCell>Customer</TableCell>
-                      <TableCell align="right">Total price ($)</TableCell>
+                        <TableCell align="right">Amount</TableCell>
-                    </TableRow>
+                        <TableCell align="right">Total price ($)</TableCell>
-                  </TableHead>
+                      </TableRow>
-                  <TableBody>
+                    </TableHead>
-                    {/* {row.history ? row.history.map((historyRow) => ( */}
+                    <TableBody>
+                      {/* {row.history ? row.history.map((historyRow) => ( */}
                       <TableRow key={row.id}>
-                        <TableCell component="th" scope="row">{row.start} - {row.end}</TableCell>
+                        <TableCell component="th" scope="row">
+                          {row.start} - {row.end}
+                        </TableCell>
                         <TableCell>{row.start}</TableCell>
                         <TableCell align="right">{row.start}</TableCell>
                         <TableCell align="right">{row.start}</TableCell>
                       </TableRow>
-                    {/* ))
+                      {/* ))
                     : (
                       <TableRow>
                         <TableCell colSpan={8}>No Data</TableCell>
                       </TableRow>
                       )
                     } */}
-                  </TableBody>
+                    </TableBody>
-                </Table>
+                  </Table>
-              </Box>}
+                </Box>
+              )}
             </Collapse>
           </TableCell>
         </TableRow>
@@ -131,104 +176,114 @@ export default function PlanList() {
   const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
     current_page: 1,
     data: [],
-    path: "",
+    path: '',
-    first_page_url: "",
+    first_page_url: '',
     last_page: 1,
-    last_page_url: "",
+    last_page_url: '',
-    next_page_url: "",
+    next_page_url: '',
-    prev_page_url: "",
+    prev_page_url: '',
     per_page: 10,
     from: 0,
     to: 0,
-    total: 0
+    total: 0,
   });
 
-  const loadDataTableData = async (appliedFilter : any | null = null) => {
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/corporates/'+corporate_id+'/divisions', { params: filter });
+    const response = await axios.get('/corporates/' + corporate_id + '/divisions', {
+      params: filter,
+    });
     // console.log(response.data);
     setDataTableLoading(false);
 
     setDataTableData(response.data);
-  }
+  };
 
   const headStyle = {
     fontWeight: 'bold',
   };
 
   const applyFilter = async (searchFilter: any) => {
-    await loadDataTableData({ "search" : searchFilter });
+    await loadDataTableData({ search: searchFilter });
-    setSearchParams({ "search" : searchFilter });
+    setSearchParams({ search: searchFilter });
-  }
+  };
 
-  const handlePageChange = (event : ChangeEvent, value: number) => {
+  const handlePageChange = (event: ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
     loadDataTableData(filter);
     setSearchParams(filter);
-  }
+  };
-
 
   useEffect(() => {
     loadDataTableData();
-  }, [])
+  }, []);
-  
+
   return (
     <Stack>
-        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+      <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-          <SearchInput onSearch={applyFilter}/>
+        <SearchInput onSearch={applyFilter} />
-          <Link to={`/corporates/${corporate_id}/divisions/create`}>
+        <Link to={`/corporate/${corporate_id}/divisions/create`}>
-            <Button
+          <Button
-              component="button"
+            component="button"
-              id="upload-button"
+            id="upload-button"
-              variant='outlined'
+            variant="outlined"
-              startIcon={<AddIcon />} sx={{ p: 1.8 }}
+            startIcon={<AddIcon />}
-            >
+            sx={{ p: 1.8 }}
-              Create
+          >
-            </Button>
+            Create
-          </Link>
+          </Button>
-        </Stack>
+        </Link>
+      </Stack>
 
-        <Card>
+      <Card>
         {/* The Main Table */}
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
             <TableBody>
               <TableRow>
                 <TableCell style={headStyle} align="left" />
-                <TableCell style={headStyle} align="left">ID</TableCell>
+                <TableCell style={headStyle} align="left">
-                <TableCell style={headStyle} align="left">Code</TableCell>
+                  ID
-                <TableCell style={headStyle} align="left">Name</TableCell>
+                </TableCell>
-                <TableCell style={headStyle} align="left">Description</TableCell>
+                <TableCell style={headStyle} align="left">
+                  Code
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Name
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Description
+                </TableCell>
               </TableRow>
             </TableBody>
-            {dataTableIsLoading ?
+            {dataTableIsLoading ? (
-              (
+              <TableBody>
-                <TableBody>
+                <TableRow>
-                  <TableRow>
+                  <TableCell colSpan={8} align="center">
-                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                    Loading
-                  </TableRow>
+                  </TableCell>
-                </TableBody>
+                </TableRow>
-              ) : (
+              </TableBody>
-                dataTableData.data.length == 0 ? 
+            ) : dataTableData.data.length == 0 ? (
-                (
+              <TableBody>
-                  <TableBody>
+                <TableRow>
-                    <TableRow>
+                  <TableCell colSpan={8} align="center">
-                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                    No Data
-                    </TableRow>
+                  </TableCell>
-                  </TableBody>
+                </TableRow>
-                ) : (
+              </TableBody>
-                  <TableBody>
+            ) : (
-                    {dataTableData.data.map(row => (
+              <TableBody>
-                      <Row key={row.code} row={row} />
+                {dataTableData.data.map((row) => (
-                    ))}
+                  <Row key={row.code} row={row} />
-                  </TableBody>
+                ))}
-                )
+              </TableBody>
             )}
           </Table>
         </TableContainer>
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
-        </Card>
+      </Card>
     </Stack>
   );
 }

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

@@ -1,21 +1,30 @@
-import { Card, Grid } from "@mui/material";
+import { Card, Grid } from '@mui/material';
-import { useParams } from "react-router-dom";
+import { useParams } from 'react-router-dom';
-import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
-import Page from "../../../components/Page";
+import Page from '../../../components/Page';
-import useSettings from "../../../hooks/useSettings";
+import useSettings from '../../../hooks/useSettings';
-import CorporateTabNavigations from "../CorporateTabNavigations";
+import CorporateTabNavigations from '../CorporateTabNavigations';
-import List from "./List";
+import List from './List';
-
 
+import { useContext, useEffect, useState } from 'react';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import { Corporate } from '@/@types/corporates';
 
 export default function CorporateFormularium() {
   const { themeStretch } = useSettings();
 
   const { corporate_id } = useParams();
 
+  const [corporate, setCorporate] = useState<Corporate | null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext]);
+
   return (
     <Page title="Formularium">
-
       <HeaderBreadcrumbs
         heading={'Formularium'}
         links={[
@@ -24,12 +33,12 @@ export default function CorporateFormularium() {
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
+            name: corporate?.name ?? '-',
-            href: '/corporates/'+corporate_id,
+            href: '/corporates/' + corporate_id,
           },
           {
             name: 'Formularium',
-            href: '/corporates/'+corporate_id+'/formularium',
+            href: '/corporates/' + corporate_id + '/formularium',
           },
         ]}
       />

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

@@ -1,21 +1,30 @@
-import { Card, Grid, Typography } from "@mui/material";
+import { Card, Grid, Typography } from '@mui/material';
-import { useParams } from "react-router-dom";
+import { useParams } from 'react-router-dom';
-import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
-import Page from "../../../components/Page";
+import Page from '../../../components/Page';
-import useSettings from "../../../hooks/useSettings";
+import useSettings from '../../../hooks/useSettings';
-import CorporateTabNavigations from "../CorporateTabNavigations";
+import CorporateTabNavigations from '../CorporateTabNavigations';
-import DivisionsList from "./List";
+import DivisionsList from './List';
-
 
+import { useContext, useEffect, useState } from 'react';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import { Corporate } from '@/@types/corporates';
 
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
   const { corporate_id } = useParams();
 
+  const [corporate, setCorporate] = useState<Corporate | null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext]);
+
   return (
     <Page title="Hospitals">
-
       <HeaderBreadcrumbs
         heading={'Hospitals'}
         links={[
@@ -24,19 +33,19 @@ export default function Divisions() {
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
+            name: corporate?.name ?? '-',
-            href: '/corporates/'+corporate_id,
+            href: '/corporates/' + corporate_id,
           },
           {
             name: 'Hospitals',
-            href: '/corporates/'+corporate_id+'/hospitals',
+            href: '/corporates/' + corporate_id + '/hospitals',
           },
         ]}
       />
 
       <Card>
         <CorporateTabNavigations position={'hospitals'} />
-        <Typography sx={{ m:4 }}>Feature Not Implemented Yet</Typography>
+        <Typography sx={{ m: 4 }}>Feature Not Implemented Yet</Typography>
       </Card>
     </Page>
   );

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/Member/Index.tsx

@@ -1,21 +1,29 @@
-import { Card, Grid } from "@mui/material";
+import { Card, Grid } from '@mui/material';
-import { useParams } from "react-router-dom";
+import { useParams } from 'react-router-dom';
-import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
-import Page from "../../../components/Page";
+import Page from '../../../components/Page';
-import useSettings from "../../../hooks/useSettings";
+import useSettings from '../../../hooks/useSettings';
-import CorporateTabNavigations from "../CorporateTabNavigations";
+import CorporateTabNavigations from '../CorporateTabNavigations';
-import DivisionsList from "./List";
+import DivisionsList from './List';
-
 
+import { useContext, useEffect, useState } from 'react';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import { Corporate } from '@/@types/corporates';
 
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
   const { corporate_id } = useParams();
+  const [corporate, setCorporate] = useState<Corporate | null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext]);
 
   return (
     <Page title="Corporate Plan">
-
       <HeaderBreadcrumbs
         heading={'Corporate Plan'}
         links={[
@@ -24,12 +32,12 @@ export default function Divisions() {
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
+            name: corporate?.name ?? '-',
-            href: '/corporates/'+corporate_id,
+            href: '/corporates/' + corporate_id,
           },
           {
             name: 'Member',
-            href: '/corporates/'+corporate_id+'/members',
+            href: '/corporates/' + corporate_id + '/members',
           },
         ]}
       />

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

@@ -1,21 +1,28 @@
-import { Card, Grid } from "@mui/material";
+import { Card, Grid } from '@mui/material';
-import { useParams } from "react-router-dom";
+import { useParams } from 'react-router-dom';
-import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
-import Page from "../../../components/Page";
+import Page from '../../../components/Page';
-import useSettings from "../../../hooks/useSettings";
+import useSettings from '../../../hooks/useSettings';
-import CorporateTabNavigations from "../CorporateTabNavigations";
+import CorporateTabNavigations from '../CorporateTabNavigations';
-import DivisionsList from "./List";
+import DivisionsList from './List';
-
+import { useContext, useEffect, useState } from 'react';
-
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
-
+import { Corporate } from '@/@types/corporates';
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
   const { corporate_id } = useParams();
 
+  const [corporate, setCorporate] = useState<Corporate | null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext]);
+
   return (
     <Page title="Corporate Plan">
-
       <HeaderBreadcrumbs
         heading={'Corporate Plan'}
         links={[
@@ -24,12 +31,12 @@ export default function Divisions() {
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
+            name: corporate?.name ?? '-',
-            href: '/corporates/'+corporate_id,
+            href: '/corporates/' + corporate_id,
           },
           {
             name: 'Plan',
-            href: '/corporates/'+corporate_id+'/plans',
+            href: '/corporates/' + corporate_id + '/plans',
           },
         ]}
       />
@@ -38,7 +45,6 @@ export default function Divisions() {
         <CorporateTabNavigations position={'plans'} />
         <DivisionsList />
       </Card>
-      
     </Page>
   );
 }

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

@@ -5,12 +5,23 @@ import Page from '../../../components/Page';
 import useSettings from '../../../hooks/useSettings';
 import CorporateTabNavigations from '../CorporateTabNavigations';
 import List from './List';
+import { useContext, useEffect, useState } from 'react';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import { Corporate } from '@/@types/corporates';
 
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
   const { corporate_id } = useParams();
 
+  const [corporate, setCorporate] = useState<Corporate | null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext]);
+
   const pageTitle = 'Services';
   return (
     <Page title={pageTitle}>
@@ -22,7 +33,7 @@ export default function Divisions() {
             href: '/corporates',
           },
           {
-            name: 'Corporate Name',
+            name: corporate?.name ?? '-',
             href: '/corporates/' + corporate_id,
           },
           {

frontend/dashboard/src/pages/Corporates/Services/List.tsx

@@ -1,6 +1,35 @@
 import * as Yup from 'yup';
 // @mui
-import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Checkbox, FormControlLabel } from '@mui/material';
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Tab,
+  Tabs,
+  CardHeader,
+  Stack,
+  Menu,
+  ButtonGroup,
+  Checkbox,
+  FormControlLabel,
+} from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
@@ -27,7 +56,6 @@ export default function List() {
   const [searchParams, setSearchParams] = useSearchParams();
   const [importResult, setImportResult] = useState(null);
 
-
   // Dummy Default Data
   const [dataTableIsLoading, setDataTableLoading] = useState(true);
   const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
@@ -35,41 +63,49 @@ export default function List() {
   const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
     current_page: 1,
     data: [],
-    path: "",
+    path: '',
-    first_page_url: "",
+    first_page_url: '',
     last_page: 1,
-    last_page_url: "",
+    last_page_url: '',
-    next_page_url: "",
+    next_page_url: '',
-    prev_page_url: "",
+    prev_page_url: '',
     per_page: 10,
     from: 0,
     to: 0,
-    total: 0
+    total: 0,
   });
 
-  
   function SearchInput(props: any) {
-     // SEARCH
+    // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState('');
 
     const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? ''
+      const newSearchText = event.target.value ?? '';
       setSearchText(newSearchText);
-    }
+    };
 
     const handleSearchSubmit = (event: any) => {
       event.preventDefault();
       props.onSearch(searchText); // Trigger to Parent
-    }
+    };
 
-    useEffect(() =>  { // Trigger First Search
+    useEffect(() => {
+      // Trigger First Search
       setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams])
+    }, [searchParams]);
 
     return (
       <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
-        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+        <TextField
+          id="search-input"
+          ref={searchInput}
+          label="Search"
+          variant="outlined"
+          fullWidth
+          onChange={handleSearchChange}
+          value={searchText}
+        />
       </form>
     );
   }
@@ -83,17 +119,17 @@ export default function List() {
     };
 
     return (
-        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+      <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-          <SearchInput onSearch={applyFilter}/>
+        <SearchInput onSearch={applyFilter} />
-        </Stack>
+      </Stack>
     );
   }
 
   // Called on every row to map the data to the columns
-  function createData( corporateService: CorporateService ): CorporateService {
+  function createData(corporateService: CorporateService): CorporateService {
     return {
       ...corporateService,
-    }
+    };
   }
 
   // Generate the every row of the table
@@ -102,32 +138,34 @@ export default function List() {
     const [open, setOpen] = React.useState(false);
 
     const handleConfigChange = (event: ChangeEvent<HTMLInputElement>, service: any) => {
-      console.log( event.target.name ,event.target.checked, service);
+      console.log(event.target.name, event.target.checked, service);
 
-      axios.put(`/corporates/${corporate_id}/services`, { 
+      axios.put(`/corporates/${corporate_id}/services`, {
         service_code: service.service_code,
         config_name: event.target.name,
-        config_value: event.target.checked
+        config_value: event.target.checked,
-       })
+      });
-    }
+    };
-    
+
     const handleActivate = (service: any, status: string) => {
-      axios.put(`/corporates/${corporate_id}/services/${service.service_code}`, { 
+      axios
-        service_code: service.service_code,
+        .put(`/corporates/${corporate_id}/services/${service.service_code}`, {
-        status
+          service_code: service.service_code,
-      }).then((res) => {
+          status,
-        setDataTableData({
-          ...dataTableData,
-          data: dataTableData.data.map((service) => {
-            let updatedService = service
-            if (row.id == service.id) {
-              updatedService.status = res.data.status
-            }
-            return updatedService
-          })
         })
-      })
+        .then((res) => {
-    }
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.map((service) => {
+              let updatedService = service;
+              if (row.id == service.id) {
+                updatedService.status = res.data.status;
+              }
+              return updatedService;
+            }),
+          });
+        });
+    };
 
     return (
       <React.Fragment>
@@ -145,139 +183,325 @@ export default function List() {
           <TableCell align="left">{row.name}</TableCell>
 
           <TableCell align="right">
-            {( row.status == 'active' && <Button variant="outlined" color="success" size="small" onClick={() => { handleActivate(row, 'inactive') }}>Active</Button> )}
+            {row.status == 'active' && (
-            {( row.status == 'inactive' && <Button variant="outlined" color="error" size="small" onClick={() => { handleActivate(row, 'active') }}>Inactive</Button> )}
+              <Button
+                variant="outlined"
+                color="success"
+                size="small"
+                onClick={() => {
+                  handleActivate(row, 'inactive');
+                }}
+              >
+                Active
+              </Button>
+            )}
+            {row.status == 'inactive' && (
+              <Button
+                variant="outlined"
+                color="error"
+                size="small"
+                onClick={() => {
+                  handleActivate(row, 'active');
+                }}
+              >
+                Inactive
+              </Button>
+            )}
           </TableCell>
           <TableCell align="right">
-            <Link to={`/corporates/${corporate_id}/services/${row.service_code}`}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
+            <Link to={`/corporate/${corporate_id}/services/${row.service_code}`}>
-            </TableCell>
+              <Button variant="outlined" color="primary" size="small">
-        </TableRow>
+                Config
-        {/* COLLAPSIBLE ROW */}
+              </Button>
-        {false && <TableRow>
+            </Link>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
-            <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ borderBottom: 1 }}>
-                <Stack>
-
-                  <TableContainer>
-                    <Table sx={{ minWidth: 650 }} size="small">
-                      <TableHead>
-                        <TableRow>
-                          <TableCell colSpan={4} sx={{ py: 1 }}>General Practitioner</TableCell>
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        <TableRow>
-                          <TableCell colSpan={2}>External Doctor</TableCell>
-                          <TableCell colSpan={2}>Internal Doctor</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.gp_external_doctor_online == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="gp_external_doctor_online" />} label="Online" />
-                          </TableCell>
-                          <TableCell>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.gp_external_doctor_offline == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="gp_external_doctor_offline" />} label="Offline" />
-                          </TableCell>
-                          <TableCell>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.gp_internal_doctor_online == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="gp_internal_doctor_online" />} label="Online" />
-                          </TableCell>
-                          <TableCell>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.gp_internal_doctor_offline == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="gp_internal_doctor_offline" />} label="Offline" />
-                          </TableCell>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
-
-                  <TableContainer>
-                    <Table sx={{ minWidth: 650 }} size="small">
-                      <TableHead>
-                        <TableRow>
-                          <TableCell colSpan={4} sx={{ py: 1 }}>Specialist Practitioner</TableCell>
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        <TableRow>
-                          <TableCell colSpan={2}>External Doctor</TableCell>
-                          <TableCell colSpan={2}>Internal Doctor</TableCell>
-                        </TableRow>
-                        <TableRow>
-                          <TableCell>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.sp_external_doctor_online == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="sp_external_doctor_online" />} label="Online" />
-                          </TableCell>
-                          <TableCell>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.sp_external_doctor_offline == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="sp_external_doctor_offline" />} label="Offline" />
-                          </TableCell>
-                          <TableCell>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.sp_internal_doctor_online == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="sp_internal_doctor_online" />} label="Online" />
-                          </TableCell>
-                          <TableCell>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.sp_internal_doctor_offline == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="sp_internal_doctor_offline" />} label="Offline" />
-                          </TableCell>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
-
-                  <TableContainer>
-                    <Table sx={{ minWidth: 650 }} size="small">
-                      <TableHead>
-                        <TableRow>
-                          <TableCell colSpan={4} sx={{ py: 1 }}>Medicine</TableCell>
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        <TableRow>
-                          <TableCell width={'25%'}>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.vitamins == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="vitamins" />} label="Vitamins" />
-                          </TableCell>
-                          <TableCell width={'25%'}>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.delivery_fee == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="delivery_fee" />} label="Delivery Fee" />
-                          </TableCell>
-                          <TableCell width={'25%'}/>
-                          <TableCell width={'25%'}/>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
-
-                  <TableContainer>
-                    <Table sx={{ minWidth: 650 }} size="small">
-                      <TableHead>
-                        <TableRow>
-                          <TableCell colSpan={4} sx={{ py: 1 }}>Free Admin Fee</TableCell>
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        <TableRow>
-                          <TableCell width={'25%'}>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.general_practitioner_fee == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="general_practitioner_fee" />} label="General Practitioner" />
-                          </TableCell>
-                          <TableCell width={'25%'}>
-                            <FormControlLabel control={<Checkbox defaultChecked={row.configurations.specialist_practitioner_fee == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="specialist_practitioner_fee" />} label="Specialist Practitioner" />
-                          </TableCell>
-                          <TableCell width={'25%'}/>
-                          <TableCell width={'25%'}/>
-                        </TableRow>
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
-
-
-                </Stack>
-              </Box>
-            </Collapse>
           </TableCell>
         </TableRow>
-        }
+        {/* COLLAPSIBLE ROW */}
+        {false && (
+          <TableRow>
+            <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
+              <Collapse in={open} timeout="auto" unmountOnExit>
+                <Box sx={{ borderBottom: 1 }}>
+                  <Stack>
+                    <TableContainer>
+                      <Table sx={{ minWidth: 650 }} size="small">
+                        <TableHead>
+                          <TableRow>
+                            <TableCell colSpan={4} sx={{ py: 1 }}>
+                              General Practitioner
+                            </TableCell>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          <TableRow>
+                            <TableCell colSpan={2}>External Doctor</TableCell>
+                            <TableCell colSpan={2}>Internal Doctor</TableCell>
+                          </TableRow>
+                          <TableRow>
+                            <TableCell>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={
+                                      row.configurations.gp_external_doctor_online == '1'
+                                    }
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="gp_external_doctor_online"
+                                  />
+                                }
+                                label="Online"
+                              />
+                            </TableCell>
+                            <TableCell>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={
+                                      row.configurations.gp_external_doctor_offline == '1'
+                                    }
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="gp_external_doctor_offline"
+                                  />
+                                }
+                                label="Offline"
+                              />
+                            </TableCell>
+                            <TableCell>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={
+                                      row.configurations.gp_internal_doctor_online == '1'
+                                    }
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="gp_internal_doctor_online"
+                                  />
+                                }
+                                label="Online"
+                              />
+                            </TableCell>
+                            <TableCell>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={
+                                      row.configurations.gp_internal_doctor_offline == '1'
+                                    }
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="gp_internal_doctor_offline"
+                                  />
+                                }
+                                label="Offline"
+                              />
+                            </TableCell>
+                          </TableRow>
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+
+                    <TableContainer>
+                      <Table sx={{ minWidth: 650 }} size="small">
+                        <TableHead>
+                          <TableRow>
+                            <TableCell colSpan={4} sx={{ py: 1 }}>
+                              Specialist Practitioner
+                            </TableCell>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          <TableRow>
+                            <TableCell colSpan={2}>External Doctor</TableCell>
+                            <TableCell colSpan={2}>Internal Doctor</TableCell>
+                          </TableRow>
+                          <TableRow>
+                            <TableCell>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={
+                                      row.configurations.sp_external_doctor_online == '1'
+                                    }
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="sp_external_doctor_online"
+                                  />
+                                }
+                                label="Online"
+                              />
+                            </TableCell>
+                            <TableCell>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={
+                                      row.configurations.sp_external_doctor_offline == '1'
+                                    }
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="sp_external_doctor_offline"
+                                  />
+                                }
+                                label="Offline"
+                              />
+                            </TableCell>
+                            <TableCell>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={
+                                      row.configurations.sp_internal_doctor_online == '1'
+                                    }
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="sp_internal_doctor_online"
+                                  />
+                                }
+                                label="Online"
+                              />
+                            </TableCell>
+                            <TableCell>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={
+                                      row.configurations.sp_internal_doctor_offline == '1'
+                                    }
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="sp_internal_doctor_offline"
+                                  />
+                                }
+                                label="Offline"
+                              />
+                            </TableCell>
+                          </TableRow>
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+
+                    <TableContainer>
+                      <Table sx={{ minWidth: 650 }} size="small">
+                        <TableHead>
+                          <TableRow>
+                            <TableCell colSpan={4} sx={{ py: 1 }}>
+                              Medicine
+                            </TableCell>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          <TableRow>
+                            <TableCell width={'25%'}>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={row.configurations.vitamins == '1'}
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="vitamins"
+                                  />
+                                }
+                                label="Vitamins"
+                              />
+                            </TableCell>
+                            <TableCell width={'25%'}>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={row.configurations.delivery_fee == '1'}
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="delivery_fee"
+                                  />
+                                }
+                                label="Delivery Fee"
+                              />
+                            </TableCell>
+                            <TableCell width={'25%'} />
+                            <TableCell width={'25%'} />
+                          </TableRow>
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+
+                    <TableContainer>
+                      <Table sx={{ minWidth: 650 }} size="small">
+                        <TableHead>
+                          <TableRow>
+                            <TableCell colSpan={4} sx={{ py: 1 }}>
+                              Free Admin Fee
+                            </TableCell>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          <TableRow>
+                            <TableCell width={'25%'}>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={
+                                      row.configurations.general_practitioner_fee == '1'
+                                    }
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="general_practitioner_fee"
+                                  />
+                                }
+                                label="General Practitioner"
+                              />
+                            </TableCell>
+                            <TableCell width={'25%'}>
+                              <FormControlLabel
+                                control={
+                                  <Checkbox
+                                    defaultChecked={
+                                      row.configurations.specialist_practitioner_fee == '1'
+                                    }
+                                    onChange={(event) => {
+                                      handleConfigChange(event, row);
+                                    }}
+                                    name="specialist_practitioner_fee"
+                                  />
+                                }
+                                label="Specialist Practitioner"
+                              />
+                            </TableCell>
+                            <TableCell width={'25%'} />
+                            <TableCell width={'25%'} />
+                          </TableRow>
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+                  </Stack>
+                </Box>
+              </Collapse>
+            </TableCell>
+          </TableRow>
+        )}
       </React.Fragment>
     );
   }
 
-  const loadDataTableData = async (appliedFilter : any | null = null) => {
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/corporates/'+corporate_id+'/services', { params: filter });
+    const response = await axios.get('/corporates/' + corporate_id + '/services', {
+      params: filter,
+    });
     setDataTableLoading(false);
 
     // const service = [
@@ -420,73 +644,81 @@ export default function List() {
     // x.data = service;
 
     setDataTableData(response.data);
-  }
+  };
 
   const headStyle = {
     fontWeight: 'bold',
   };
 
   const applyFilter = async (searchFilter: any) => {
-    await loadDataTableData({ "search" : searchFilter });
+    await loadDataTableData({ search: searchFilter });
-    setSearchParams({ "search" : searchFilter });
+    setSearchParams({ search: searchFilter });
-  }
+  };
 
-  const handlePageChange = (event : ChangeEvent, value: number) => {
+  const handlePageChange = (event: ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
     loadDataTableData(filter);
     setSearchParams(filter);
-  }
+  };
 
   useEffect(() => {
     loadDataTableData();
-  }, [])
+  }, []);
-  
+
   return (
     <Stack>
       <SearchForm />
 
-        <Card>
+      <Card>
         {/* The Main Table */}
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
             <TableBody>
               <TableRow>
                 {/* <TableCell style={headStyle} align="left" width={10}/> */}
-                <TableCell style={headStyle} align="left">Code</TableCell>
+                <TableCell style={headStyle} align="left">
-                <TableCell style={headStyle} align="left">Service</TableCell>
+                  Code
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Service
+                </TableCell>
 
-                <TableCell style={headStyle} align="right" width={30}>Status</TableCell>
+                <TableCell style={headStyle} align="right" width={30}>
-                <TableCell style={headStyle} align="right" width={30}>Action</TableCell>
+                  Status
+                </TableCell>
+                <TableCell style={headStyle} align="right" width={30}>
+                  Action
+                </TableCell>
               </TableRow>
             </TableBody>
-            {dataTableIsLoading ?
+            {dataTableIsLoading ? (
-              (
+              <TableBody>
-                <TableBody>
+                <TableRow>
-                  <TableRow>
+                  <TableCell colSpan={8} align="center">
-                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                    Loading
-                  </TableRow>
+                  </TableCell>
-                </TableBody>
+                </TableRow>
-              ) : (
+              </TableBody>
-                dataTableData.data.length == 0 ? 
+            ) : dataTableData.data.length == 0 ? (
-                (
+              <TableBody>
-                  <TableBody>
+                <TableRow>
-                    <TableRow>
+                  <TableCell colSpan={8} align="center">
-                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                    No Data
-                    </TableRow>
+                  </TableCell>
-                  </TableBody>
+                </TableRow>
-                ) : (
+              </TableBody>
-                  <TableBody>
+            ) : (
-                    {dataTableData.data.map(row => (
+              <TableBody>
-                      <Row key={row.id} row={row} />
+                {dataTableData.data.map((row) => (
-                    ))}
+                  <Row key={row.id} row={row} />
-                  </TableBody>
+                ))}
-                )
+              </TableBody>
             )}
           </Table>
         </TableContainer>
-        
+
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
-        </Card>
+      </Card>
     </Stack>
   );
 }

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',
@@ -51,8 +50,7 @@ export default function Corporates() {
           },
         ]}
       />
-
+      
-
       {/* <Container maxWidth={themeStretch ? false : 'xl'}> */}
         <Card>
           <Stack spacing="3">

frontend/dashboard/src/routes/index.tsx

@@ -89,50 +89,81 @@ 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/services',
+              element: <CorporateServices />,
+            },
+            {
+              path: ':corporate_id/services/:service_code',
+              element: <CorporateServicesCreate />,
+            },
+            {
+              path: ':corporate_id/plans/create',
+              element: <PlanCreate />,
+            },
+            {
+              path: ':corporate_id/plans',
+              element: <Plans />,
+            },
+            {
+              path: ':corporate_id/benefits/create',
+              element: <BenefitCreate />,
+            },
+            {
+              path: ':corporate_id/benefits',
+              element: <Benefits />,
+            },
+
+            {
+              path: ':corporate_id/members',
+              element: <CorporateMembers />,
+            },
+
+            {
+              path: ':corporate_id/divisions',
+              element: <CorporateDivisions />,
+            },
+            {
+              path: ':corporate_id/divisions/create',
+              element: <CorporateDivisionsCreate />,
+            },
+            {
+              path: ':corporate_id/divisions/:id/edit',
+              element: <CorporateDivisionsCreate />,
+            },
+            {
+              path: ':corporate_id/formularium',
+              element: <CorporateFormularium />,
+            },
+
+            {
+              path: ':corporate_id/diagnosis-exclusions',
+              element: <DiagnosisExclusions />,
+            },
+
+            {
+              path: ':corporate_id/hospitals',
+              element: <CorporateHospitals />,
+            },
+
+            {
+              path: ':corporate_id/claim-history',
+              element: <CorporateClaimHistories />,
+            },
+          ],
         },
         {
           path: 'corporates/:corporate_id/edit',
           element: <CorporateCreate />,
         },
 
-        {
-          path: 'corporates/:corporate_id/divisions',
-          element: <CorporateDivisions />,
-        },
-        {
-          path: 'corporates/:corporate_id/divisions/create',
-          element: <CorporateDivisionsCreate />,
-        },
-        {
-          path: 'corporates/:corporate_id/divisions/:id/edit',
-          element: <CorporateDivisionsCreate />,
-        },
-
-        {
-          path: 'corporates/:corporate_id/members',
-          element: <CorporateMembers />,
-        },
-
-        {
-          path: 'corporates/:corporate_id/services',
-          element: <CorporateServices />,
-        },
-        {
-          path: 'corporates/:corporate_id/services/:service_code',
-          element: <CorporateServicesCreate />,
-        },
-
-        {
-          path: 'corporates/:corporate_id/plans/create',
-          element: <PlanCreate />,
-        },
-        {
-          path: 'corporates/:corporate_id/plans',
-          element: <Plans />,
-        },
-
         {
           path: 'corporates/:corporate_id/corporate-plans/create',
           element: <CorporatePlanCreate />,
@@ -146,15 +177,6 @@ export default function Router() {
           element: <CorporatePlans />,
         },
 
-        {
-          path: 'corporates/:corporate_id/benefits/create',
-          element: <BenefitCreate />,
-        },
-        {
-          path: 'corporates/:corporate_id/benefits',
-          element: <Benefits />,
-        },
-
         {
           path: 'corporates/:corporate_id/corporate-benefits/create',
           element: <CorporateBenefitsCreate />,
@@ -168,26 +190,6 @@ export default function Router() {
           element: <CorporateBenefitsCreate />,
         },
 
-        {
-          path: 'corporates/:corporate_id/formularium',
-          element: <CorporateFormularium />,
-        },
-
-        {
-          path: 'corporates/:corporate_id/diagnosis-exclusions',
-          element: <DiagnosisExclusions />,
-        },
-
-        {
-          path: 'corporates/:corporate_id/hospitals',
-          element: <CorporateHospitals />,
-        },
-
-        {
-          path: 'corporates/:corporate_id/claim-history',
-          element: <CorporateClaimHistories />,
-        },
-
         {
           path: 'master/doctors',
           element: <MasterDoctors />,
@@ -272,6 +274,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') }],
+  }
 })