[WIP] Import Plans

frontend/dashboard/src/@types/corporates.ts

@@ -0,0 +1,42 @@
+// ----------------------------------------------------------------------
+
+export type Corporate = {
+  id: number;
+  code: string;
+  name?: string;
+  welcome_message?: string;
+  help_text?: string;
+  logo?: any;
+  logo_url?: string;
+  active: boolean | number;
+  divisions?: Division[];
+  employees?: Employee[];
+  current_policy?: Policy;
+};
+
+export type Division = {
+  id: number;
+  corporate_id: number;
+  code: string;
+  name?: string;
+}
+
+export type Employee = {
+  id: number;
+  name: string;
+}
+
+export type Policy = {
+  id: number;
+  corporate_id: number;
+  code: string;
+  total_premi: number;
+  minimal_deposit_percentage: number;
+  minimal_deposit_net: number;
+  minimal_alert_percentage: number;
+  minimal_alert_net: number;
+  minimal_stop_service_percentage: number;
+  minimal_stop_service_net: number;
+  start: string | Date;
+  end: string | Date;
+}

frontend/dashboard/src/@types/paginated-data.ts

@@ -0,0 +1,14 @@
+export type LaravelPaginatedData = {
+  current_page: number;
+  data: any[];
+  path: string;
+  first_page_url: string;
+  last_page: number;
+  last_page_url: string;
+  next_page_url?: string;
+  prev_page_url?: string;
+  per_page: number;
+  from?: number;
+  to?: number;
+  total: number;
+}

frontend/dashboard/src/App.tsx

@@ -9,22 +9,25 @@ import ScrollToTop from './components/ScrollToTop';
 import { ProgressBarStyle } from './components/ProgressBar';
 import ThemeColorPresets from './components/ThemeColorPresets';
 import MotionLazyContainer from './components/animate/MotionLazyContainer';
+import { SnackbarProvider } from 'notistack';
 
 // ----------------------------------------------------------------------
 
 export default function App() {
   return (
-    <ThemeProvider>
-      <ThemeColorPresets>
-        <RtlLayout>
-          <MotionLazyContainer>
-            <ProgressBarStyle />
-            {/* <Settings /> */}
-            <ScrollToTop />
-            <Router />
-          </MotionLazyContainer>
-        </RtlLayout>
-      </ThemeColorPresets>
-    </ThemeProvider>
+      <ThemeProvider>
+        <SnackbarProvider>
+        <ThemeColorPresets>
+          <RtlLayout>
+            <MotionLazyContainer>
+              <ProgressBarStyle />
+              {/* <Settings /> */}
+              <ScrollToTop />
+              <Router />
+            </MotionLazyContainer>
+          </RtlLayout>
+        </ThemeColorPresets>
+        </SnackbarProvider>
+      </ThemeProvider>
   );
 }

frontend/dashboard/src/components/Breadcrumbs.tsx

@@ -0,0 +1,92 @@
+import { ReactElement } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+// @mui
+import {
+  Box,
+  Link,
+  Typography,
+  BreadcrumbsProps,
+  Breadcrumbs as MUIBreadcrumbs,
+} from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+type TLink = {
+  href?: string;
+  name: string;
+  icon?: ReactElement;
+};
+
+export interface Props extends BreadcrumbsProps {
+  links: TLink[];
+  activeLast?: boolean;
+}
+
+export default function Breadcrumbs({ links, activeLast = false, ...other }: Props) {
+  const currentLink = links[links.length - 1].name;
+
+  const listDefault = links.map((link) => <LinkItem key={link.name} link={link} />);
+
+  const listActiveLast = links.map((link) => (
+    <div key={link.name}>
+      {link.name !== currentLink ? (
+        <LinkItem link={link} />
+      ) : (
+        <Typography
+          variant="body2"
+          sx={{
+            maxWidth: 260,
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            color: 'text.disabled',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          {currentLink}
+        </Typography>
+      )}
+    </div>
+  ));
+
+  return (
+    <MUIBreadcrumbs
+      separator={
+        <Box
+          component="span"
+          sx={{ width: 4, height: 4, borderRadius: '50%', bgcolor: 'text.disabled' }}
+        />
+      }
+      {...other}
+    >
+      {activeLast ? listDefault : listActiveLast}
+    </MUIBreadcrumbs>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+type LinkItemProps = {
+  link: TLink;
+};
+
+function LinkItem({ link }: LinkItemProps) {
+  const { href, name, icon } = link;
+  return (
+    <Link
+      key={name}
+      variant="body2"
+      component={RouterLink}
+      to={href || '#'}
+      sx={{
+        lineHeight: 2,
+        display: 'flex',
+        alignItems: 'center',
+        color: 'text.primary',
+        '& > div': { display: 'inherit' },
+      }}
+    >
+      {icon && <Box sx={{ mr: 1, '& svg': { width: 20, height: 20 } }}>{icon}</Box>}
+      {name}
+    </Link>
+  );
+}

frontend/dashboard/src/components/HeaderBreadcrumbs.tsx

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { isString } from 'lodash';
+// @mui
+import { Box, Typography, Link } from '@mui/material';
+//
+import Breadcrumbs, { Props as BreadcrumbsProps } from './Breadcrumbs';
+
+// ----------------------------------------------------------------------
+
+interface Props extends BreadcrumbsProps {
+  action?: ReactNode;
+  heading: string;
+  moreLink?: string | string[];
+}
+
+export default function HeaderBreadcrumbs({
+  links,
+  action,
+  heading,
+  moreLink = '' || [],
+  sx,
+  ...other
+}: Props) {
+  return (
+    <Box sx={{ mb: 5, ...sx }}>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ flexGrow: 1 }}>
+          <Typography variant="h4" gutterBottom>
+            {heading}
+          </Typography>
+          <Breadcrumbs links={links} {...other} />
+        </Box>
+
+        {action && <Box sx={{ flexShrink: 0 }}>{action}</Box>}
+      </Box>
+
+      <Box sx={{ mt: 2 }}>
+        {isString(moreLink) ? (
+          <Link href={moreLink} target="_blank" rel="noopener" variant="body2">
+            {moreLink}
+          </Link>
+        ) : (
+          moreLink.map((href) => (
+            <Link
+              noWrap
+              key={href}
+              href={href}
+              variant="body2"
+              target="_blank"
+              rel="noopener"
+              sx={{ display: 'table' }}
+            >
+              {href}
+            </Link>
+          ))
+        )}
+      </Box>
+    </Box>
+  );
+}

frontend/dashboard/src/components/editor/index.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import ReactQuill, { ReactQuillProps } from 'react-quill';
+import ReactQuill from 'react-quill';
 // @mui
 import { styled } from '@mui/material/styles';
 import { Box, BoxProps } from '@mui/material';
@@ -33,9 +33,11 @@ const RootStyle = styled(Box)(({ theme }) => ({
 
 // ----------------------------------------------------------------------
 
-export interface Props extends ReactQuillProps {
+export interface Props {
   id?: string;
   error?: boolean;
+  value?: string;
+  onChange?: (value: string) => void;
   simple?: boolean;
   helperText?: ReactNode;
   sx?: BoxProps;
@@ -64,7 +66,7 @@ export default function Editor({
       maxStack: 100,
       userOnly: true,
     },
-    syntax: true,
+    syntax: false, // need highlightjs
     clipboard: {
       matchVisual: false,
     },

frontend/dashboard/src/components/nav-section/horizontal/NavList.tsx

@@ -83,7 +83,7 @@ function NavListSub({ list }: NavListSubProps) {
 
   const { pathname } = useLocation();
 
-  const active = getActive(list.path, pathname);
+  const active = getActive(list.path, pathname, list.openWhen);
 
   const [open, setOpen] = useState(false);
 

frontend/dashboard/src/components/nav-section/index.ts

@@ -9,6 +9,9 @@ export function isExternalLink(path: string) {
   return path.includes('http');
 }
 
-export function getActive(path: string, pathname: string) {
-  return path ? !!matchPath({ path: path, end: false }, pathname) : false;
+export function getActive(path: string, pathname: string, openWhen?: string[]) {
+  const listPathWhenActive = [ ...openWhen ?? [], path ];
+
+  return listPathWhenActive.includes(pathname);
+  // return path ? !!matchPath({ path: path, end: false }, pathname) : false;
 }

frontend/dashboard/src/components/nav-section/type.ts

@@ -8,6 +8,7 @@ export type NavListProps = {
   path: string;
   icon?: ReactElement;
   info?: ReactElement;
+  openWhen? : string[];
   children?: {
     title: string;
     path: string;

frontend/dashboard/src/components/nav-section/vertical/NavList.tsx

@@ -18,7 +18,7 @@ type NavListRootProps = {
 export function NavListRoot({ list, isCollapse }: NavListRootProps) {
   const { pathname } = useLocation();
 
-  const active = getActive(list.path, pathname);
+  const active = getActive(list.path, pathname, list.openWhen);
 
   const [open, setOpen] = useState(active);
 

frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx

@@ -36,8 +36,6 @@ const navConfig = [
       // },
       {
         title: 'DOCTORS & HOSPITALS',
-        // path: '/',
-        // icon: ICONS.user,
         children: [
           { title: 'Doctors', path: '/doctors' },
           { title: 'Hospitals', path: '/hospitals' },
@@ -52,8 +50,10 @@ const navConfig = [
       },
       {
         title: 'STATION BENEFIT & MEMBERSHIP',
+        openWhen: ['/corporates', '/formularium', '/diagnosis', '/hospitals'],
         children: [
           { title: 'Corporate', path: '/corporates' },
+          { title: 'Corporate Create', path: '/corporates/create' },
           { title: 'Formularium', path: '/formularium' },
           { title: 'Diagnosis Library (ICD-X)', path: '/diagnosis' },
           { title: 'Hospitals', path: '/hospitals' },

frontend/dashboard/src/pages/Corporates/Benefit/Create.tsx

@@ -0,0 +1,241 @@
+import * as Yup from 'yup';
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
+import { useForm } from "react-hook-form";
+import { useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from "../../../components/hook-form";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import CorporateTabNavigations from "../CorporateTabNavigations";
+import DivisionsList from "./List";
+import { useMemo, useState } from 'react';
+
+
+
+export default function Divisions() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const NewDivisionSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+    code: Yup.string().required('Corporate Code is required'),
+    active: Yup.boolean().required('Corporate Status is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      code: '',
+    }),
+    []
+  );
+
+  const methods = useForm({
+    resolver: yupResolver(NewDivisionSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const onSubmit = async (data: any) => {
+    console.log(data);
+  };
+
+  const [open, setOpen] = useState(false);
+
+  const benefits = [
+    {
+      'category' : 'General Practitioner',
+      'childs' : [
+        {
+          'name' : 'External Doctor Online',
+          'code' : 'gp-external-doctor-online'
+        },
+        {
+          'name' : 'External Doctor Offline',
+          'code' : 'gp-external-doctor-offline'
+        },
+        {
+          'name' : 'Internal Doctor Online',
+          'code' : 'gp-internal-doctor-online'
+        },
+        {
+          'name' : 'Internal Doctor Offline',
+          'code' : 'gp-internal-doctor-offline'
+        },
+      ]
+    },
+    {
+      'category' : 'Specialist',
+      'childs' : [
+        {
+          'name' : 'External Doctor Online',
+          'code' : 'sp-external-doctor-online'
+        },
+        {
+          'name' : 'External Doctor Offline',
+          'code' : 'sp-external-doctor-offline'
+        },
+        {
+          'name' : 'Internal Doctor Online',
+          'code' : 'sp-internal-doctor-online'
+        },
+        {
+          'name' : 'Internal Doctor Offline',
+          'code' : 'sp-internal-doctor-offline'
+        },
+      ]
+    },
+    {
+      'category' : 'Medicines',
+      'childs' : [
+        {
+          'name' : 'Vitamins',
+          'code' : 'medicines-vitamins'
+        },
+        {
+          'name' : 'Delivery Fee',
+          'code' : 'medicines-delivery-fee'
+        },
+      ]
+    },
+  ];
+
+  const products = [
+    {
+      'name' : 'Inpatient',
+      'code' : 'IP',
+    },
+    {
+      'name' : 'Outpatient',
+      'code' : 'OP',
+    },
+    {
+      'name' : 'Dental',
+      'code' : 'DT',
+    },
+    {
+      'name' : 'Dental',
+      'code' : 'DTL',
+    },
+    {
+      'name' : 'Matternity',
+      'code' : 'MT',
+    },
+    {
+      'name' : 'Special Benefit',
+      'code' : 'SB',
+    },
+  ];
+
+  return (
+    <Page title="Create Benefit">
+
+      <HeaderBreadcrumbs
+        heading={'Create Benefit'}
+        links={[
+          { name: 'Dashboard', href: '/dashboard' },
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+id,
+          },
+          {
+            name: 'Benefits',
+            href: '/corporates/'+id+'/benefits',
+          },
+          {
+            name: 'Create',
+            href: '/corporates/'+id+'/benefits/create',
+          },
+        ]}
+      />
+      
+
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Card sx={{ p: 2 }}>
+            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+              <Stack spacing={3}>
+
+                <Typography variant="h6">Benefit Detail</Typography>
+
+                <RHFTextField name="name" label="Benefit Name" />
+
+                <RHFTextField name="code" label="Benefit Code" />
+
+                <Typography variant="h6">Benefit Configuration</Typography>
+                
+                <Divider orientation="horizontal" flexItem />
+                <Stack spacing={3} divider={<Divider orientation="horizontal" flexItem />}>
+                  <Stack spacing={2}>
+                    <RHFCheckbox name="a" label='Outpatient'/>
+                    {benefits.map(row => (
+                      <Collapse in={true} timeout="auto" unmountOnExit >
+                        <Typography>{row.category}</Typography>
+                        <Grid container>
+                        {row.childs.map(benefit => (
+                          <Grid item xs={6}>
+                            <RHFCheckbox name={benefit.code} label={benefit.name}/>
+                            </Grid>
+                        ))}
+                        </Grid>
+                      </Collapse>
+                    ))}
+                    <Typography>Admin Fee</Typography>
+                    <Grid container>
+                    {benefits.map(row => (
+                      <Grid item xs={4}>
+                        <RHFCheckbox name="cat" label={row.category}/>
+                      </Grid>
+                    ))}
+                    </Grid>
+                  </Stack>
+
+
+                  <Stack spacing={2}>
+                    <RHFCheckbox name="a" label='Inpatient'/>
+                    {benefits.map(row => (
+                      <Collapse in={true} timeout="auto" unmountOnExit >
+                        <Typography>{row.category}</Typography>
+                        <Grid container>
+                        {row.childs.map(benefit => (
+                          <Grid item xs={6}>
+                            <RHFCheckbox name={benefit.code} label={benefit.name}/>
+                            </Grid>
+                        ))}
+                        </Grid>
+                      </Collapse>
+                    ))}
+                    <Typography>Admin Fee</Typography>
+                    <Grid container>
+                    {benefits.map(row => (
+                      <Grid item xs={4}>
+                        <RHFCheckbox name="cat" label={row.category}/>
+                      </Grid>
+                    ))}
+                    </Grid>
+                  </Stack>
+                </Stack>
+
+              </Stack>
+            </FormProvider>
+          </Card>
+        </Grid>
+      </Grid>
+    </Page>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { Card, Grid } from "@mui/material";
+import { useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import CorporateTabNavigations from "../CorporateTabNavigations";
+import DivisionsList from "./List";
+
+
+
+export default function Divisions() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const pageTitle = 'Benefit List';
+  return (
+    <Page title={ pageTitle }>
+
+      <HeaderBreadcrumbs
+        heading={ pageTitle }
+        links={[
+          { name: 'Dashboard', href: '/dashboard' },
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+id,
+          },
+          {
+            name: 'Benefits',
+            href: '/corporates/'+id+'/benefits',
+          },
+        ]}
+      />
+
+      <Grid container spacing={2}>
+        <Grid item xs={8}>
+          <Card>
+            <CorporateTabNavigations position={'divisions'} />
+            <DivisionsList />
+          </Card>
+        </Grid>
+        <Grid item xs={4}>
+          <Card sx={{ p: 2 }}>
+            Corporate Detail Goes Here
+            &nbsp;
+          </Card>
+        </Grid>
+      </Grid>
+    </Page>
+  );
+}

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

@@ -0,0 +1,244 @@
+// @mui
+import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack } from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import PublishIcon from '@mui/icons-material/Publish';
+import AddIcon from '@mui/icons-material/Add';
+// hooks
+import useSettings from '../../../hooks/useSettings';
+// components
+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 } from 'react';
+import { Theme, useTheme } from '@mui/material/styles';
+import { Corporate } from '../../../@types/corporates';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import CorporateTabNavigations from '../CorporateTabNavigations';
+
+export default function DivisionsList() {
+  const { themeStretch } = useSettings();
+
+  // Called on every row to map the data to the columns
+  function createData( corporate: Corporate ): Corporate {
+    return {
+      ...corporate,
+    }
+  }
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableCell>
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ margin: 1 }}>
+                <Typography variant="h6" gutterBottom component="div">
+                  History
+                </Typography>
+                <Table size="small" aria-label="purchases">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Date</TableCell>
+                      <TableCell>Customer</TableCell>
+                      <TableCell align="right">Amount</TableCell>
+                      <TableCell align="right">Total price ($)</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {row.history ? row.history.map(( historyRow ) => (
+                      <TableRow key={historyRow?.date}>
+                        <TableCell component="th" scope="row">
+                          {historyRow?.date}
+                        </TableCell>
+                        <TableCell>{historyRow?.customerId}</TableCell>
+                        <TableCell align="right">{historyRow?.amount}</TableCell>
+                        <TableCell align="right">
+                          {Math.round(historyRow?.amount * 1000 * 100) / 100}
+                        </TableCell>
+                      </TableRow>
+                    ))
+                    : (
+                      <TableRow>
+                        <TableCell colSpan={8}>No Data</TableCell>
+                      </TableRow>
+                      )
+                    }
+                  </TableBody>
+                </Table>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
+  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+
+  const loadDataTableData = async () => {
+    setDataTableLoading(true);
+    const response = await axios.get('/corporates');
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  // FILTER SELECT 
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+      },
+    },
+  };
+
+  const names = [
+    'PLAN001',
+    'PLAN002',
+    'PLAN003',
+    'PLAN004',
+    'PLAN005',
+  ];
+  function getStyles(name: string, personName: string[], theme: Theme) {
+    return {
+      fontWeight:
+        personName.indexOf(name) === -1
+          ? theme.typography.fontWeightRegular
+          : theme.typography.fontWeightMedium,
+    };
+  }
+  
+  const theme = useTheme();
+  const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
+
+  const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setPlanIdFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+
+  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
+  const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setStatusFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+  // END FILTER SELECT
+  
+  // IMPORT
+  const importMember = React.useRef(null);
+  const handleImportButton = (event: any) => {
+    if (importMember?.current)
+      importMember.current ? importMember.current.click() : console.log('fuck');
+    else
+      alert('No file selected')
+  }
+
+  const { id } = useParams();
+
+  return (
+    <Stack>
+        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+            <TextField id="outlined-basic" label="Search" variant="outlined" fullWidth />
+            <Link to={"/corporates/"+id+"/divisions/create"}>
+              <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
+            </Link>
+        </Stack>
+
+        <Card>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left">#</TableCell>
+                <TableCell style={headStyle} align="left">Code</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="right">Action</TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ?
+              (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : (
+                dataTableData.data.length == 0 ? 
+                (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : (
+                  <TableBody>
+                    {dataTableData.data.map(row => (
+                      <Row key={row.code} row={row} />
+                    ))}
+                  </TableBody>
+                )
+            )}
+          </Table>
+        </TableContainer>
+        </Card>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { Tab, Tabs } from "@mui/material";
+import { useTheme } from "@mui/system";
+import React, { useEffect } from "react";
+import { Link, useParams } from "react-router-dom";
+
+type Props = {
+  position: string
+}
+
+export default function CorporateTabNavigations({ position }: Props) {
+  const theme = useTheme();
+
+  const { id } = useParams();
+
+  const [currentTab, setCurrentTab] = React.useState(0);
+
+  const mainTabItems = [
+    {
+      'path' : 'members',
+      'label': 'Member List',
+    },
+    {
+      'path' : 'claim-history',
+      'label': 'Claim History',
+    },
+    {
+      'path' : 'divisions',
+      'label': 'Divisions',
+    },
+    {
+      'path' : 'plans',
+      'label': 'Plans',
+    },
+    {
+      'path' : 'benefits',
+      'label': 'Benefit & Exclusion',
+    },
+    {
+      'path' : 'hospitals',
+      'label': 'Hospital',
+    },
+    {
+      'path' : 'formularium',
+      'label': 'Formularium',
+    },
+  ];
+  useEffect(() => {
+    let currentIndex = mainTabItems.findIndex(item => item.path === position);
+    setCurrentTab(currentIndex);
+  }, [])
+
+  return (
+    <Tabs
+      theme={theme}
+      value={currentTab}
+      onChange={(event, newValue) => false}
+      variant="scrollable"
+      scrollButtons
+      allowScrollButtonsMobile
+      aria-label="scrollable force tabs example"
+    >
+      {mainTabItems.map((tabItem, index) => (<Tab key={index} label={(<Link to={"/corporates/"+id+"/"+mainTabItems[index].path}>{tabItem.label}</Link>)} />))}
+    </Tabs>
+  )
+}

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

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { paramCase } from 'change-case';
+import { useParams, useLocation } from 'react-router-dom';
+// @mui
+import { Container } from '@mui/material';
+import useSettings from '../../hooks/useSettings';
+import Page from '../../components/Page';
+import Form from './Form';
+import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
+import axios from '../../utils/axios';
+import { Corporate } from '../../@types/corporates';
+
+// ----------------------------------------------------------------------
+
+export default function Create() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const isEdit = id ? true : false;
+
+  // const corporates = [{ id: 1, name: 'Product 1', code: 'Code' }];
+
+  const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();
+
+  // const name = "Henlooooo";
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/corporates/'+id+'/edit')
+        .then((res) => {
+          setCurrentCorporate(res.data);
+        })
+    }
+  }, [id]);
+
+  return (
+    <Page title="Membership: Create a new corporate">
+      <Container maxWidth={themeStretch ? false : 'lg'}>
+        <HeaderBreadcrumbs
+          heading={!isEdit ? 'Create a new corporate' : 'Edit corporate'}
+          links={[
+            { name: 'Dashboard', href: '/dashboard' },
+            {
+              name: 'Corporates',
+              href: '/corporates',
+            },
+            { name: !isEdit ? 'Create' : currentCorporate?.name ?? '' },
+          ]}
+        />
+
+        <Form isEdit={isEdit} currentCorporate={currentCorporate} />
+      </Container>
+    </Page>
+  );
+}

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

@@ -0,0 +1,212 @@
+import * as Yup from 'yup';
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
+import { useForm } from "react-hook-form";
+import { useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from "../../../components/hook-form";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import CorporateTabNavigations from "../CorporateTabNavigations";
+import DivisionsList from "./List";
+import { useMemo, useState } from 'react';
+
+
+
+export default function Divisions() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const NewDivisionSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+    code: Yup.string().required('Corporate Code is required'),
+    active: Yup.boolean().required('Corporate Status is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      code: '',
+    }),
+    []
+  );
+
+  const methods = useForm({
+    resolver: yupResolver(NewDivisionSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const onSubmit = async (data: any) => {
+    console.log(data);
+  };
+
+  const [open, setOpen] = useState(false);
+
+  const benefits = [
+    {
+      'category' : 'General Practitioner',
+      'childs' : [
+        {
+          'name' : 'External Doctor Online',
+          'code' : 'gp-external-doctor-online'
+        },
+        {
+          'name' : 'External Doctor Offline',
+          'code' : 'gp-external-doctor-offline'
+        },
+        {
+          'name' : 'Internal Doctor Online',
+          'code' : 'gp-internal-doctor-online'
+        },
+        {
+          'name' : 'Internal Doctor Offline',
+          'code' : 'gp-internal-doctor-offline'
+        },
+      ]
+    },
+    {
+      'category' : 'Specialist',
+      'childs' : [
+        {
+          'name' : 'External Doctor Online',
+          'code' : 'sp-external-doctor-online'
+        },
+        {
+          'name' : 'External Doctor Offline',
+          'code' : 'sp-external-doctor-offline'
+        },
+        {
+          'name' : 'Internal Doctor Online',
+          'code' : 'sp-internal-doctor-online'
+        },
+        {
+          'name' : 'Internal Doctor Offline',
+          'code' : 'sp-internal-doctor-offline'
+        },
+      ]
+    },
+    {
+      'category' : 'Medicines',
+      'childs' : [
+        {
+          'name' : 'Vitamins',
+          'code' : 'medicines-vitamins'
+        },
+        {
+          'name' : 'Delivery Fee',
+          'code' : 'medicines-delivery-fee'
+        },
+      ]
+    },
+  ];
+
+  return (
+    <Page title="Create Division">
+
+      <HeaderBreadcrumbs
+        heading={'Create Division'}
+        links={[
+          { name: 'Dashboard', href: '/dashboard' },
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+id,
+          },
+          {
+            name: 'Divisions',
+            href: '/corporates/'+id+'/divisions',
+          },
+          {
+            name: 'Create',
+            href: '/corporates/'+id+'/divisions/create',
+          },
+        ]}
+      />
+      
+
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Card sx={{ p: 2 }}>
+            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+              <Stack spacing={3}>
+
+                <Typography variant="h6">Division Detail</Typography>
+
+                <RHFTextField name="name" label="Corporate Name" />
+
+                <Typography variant="h6">Benefit Configuration</Typography>
+                
+                <Divider orientation="horizontal" flexItem />
+                <Stack spacing={3} divider={<Divider orientation="horizontal" flexItem />}>
+                  <Stack spacing={2}>
+                    <RHFCheckbox name="a" label='Outpatient'/>
+                    {benefits.map(row => (
+                      <Collapse in={true} timeout="auto" unmountOnExit >
+                        <Typography>{row.category}</Typography>
+                        <Grid container>
+                        {row.childs.map(benefit => (
+                          <Grid item xs={6}>
+                            <RHFCheckbox name={benefit.code} label={benefit.name}/>
+                            </Grid>
+                        ))}
+                        </Grid>
+                      </Collapse>
+                    ))}
+                    <Typography>Admin Fee</Typography>
+                    <Grid container>
+                    {benefits.map(row => (
+                      <Grid item xs={4}>
+                        <RHFCheckbox name="cat" label={row.category}/>
+                      </Grid>
+                    ))}
+                    </Grid>
+                  </Stack>
+
+
+                  <Stack spacing={2}>
+                    <RHFCheckbox name="a" label='Inpatient'/>
+                    {benefits.map(row => (
+                      <Collapse in={true} timeout="auto" unmountOnExit >
+                        <Typography>{row.category}</Typography>
+                        <Grid container>
+                        {row.childs.map(benefit => (
+                          <Grid item xs={6}>
+                            <RHFCheckbox name={benefit.code} label={benefit.name}/>
+                            </Grid>
+                        ))}
+                        </Grid>
+                      </Collapse>
+                    ))}
+                    <Typography>Admin Fee</Typography>
+                    <Grid container>
+                    {benefits.map(row => (
+                      <Grid item xs={4}>
+                        <RHFCheckbox name="cat" label={row.category}/>
+                      </Grid>
+                    ))}
+                    </Grid>
+                  </Stack>
+                </Stack>
+
+              </Stack>
+            </FormProvider>
+          </Card>
+        </Grid>
+      </Grid>
+    </Page>
+  );
+}

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

@@ -0,0 +1,54 @@
+import { Card, Grid } from "@mui/material";
+import { useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import CorporateTabNavigations from "../CorporateTabNavigations";
+import DivisionsList from "./List";
+
+
+
+export default function Divisions() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  return (
+    <Page title="Division List">
+
+      <HeaderBreadcrumbs
+        heading={'Division List'}
+        links={[
+          { name: 'Dashboard', href: '/dashboard' },
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+id,
+          },
+          {
+            name: 'Divisions',
+            href: '/corporates/'+id+'/divisions',
+          },
+        ]}
+      />
+
+      <Grid container spacing={2}>
+        <Grid item xs={8}>
+          <Card>
+            <CorporateTabNavigations position={'divisions'} />
+            <DivisionsList />
+          </Card>
+        </Grid>
+        <Grid item xs={4}>
+          <Card sx={{ p: 2 }}>
+            Corporate Detail Goes Here
+            &nbsp;
+          </Card>
+        </Grid>
+      </Grid>
+    </Page>
+  );
+}

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

@@ -0,0 +1,248 @@
+// @mui
+import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack } from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import PublishIcon from '@mui/icons-material/Publish';
+import AddIcon from '@mui/icons-material/Add';
+// hooks
+import useSettings from '../../../hooks/useSettings';
+// components
+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 } from 'react';
+import { Theme, useTheme } from '@mui/material/styles';
+import { Corporate } from '../../../@types/corporates';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import CorporateTabNavigations from '../CorporateTabNavigations';
+
+export default function DivisionsList() {
+  const { themeStretch } = useSettings();
+
+  // Called on every row to map the data to the columns
+  function createData( corporate: Corporate ): Corporate {
+    return {
+      ...corporate,
+    }
+  }
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableCell>
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ margin: 1 }}>
+                <Typography variant="h6" gutterBottom component="div">
+                  History
+                </Typography>
+                <Table size="small" aria-label="purchases">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Date</TableCell>
+                      <TableCell>Customer</TableCell>
+                      <TableCell align="right">Amount</TableCell>
+                      <TableCell align="right">Total price ($)</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {row.history ? row.history.map((historyRow) => (
+                      <TableRow key={historyRow?.date}>
+                        <TableCell component="th" scope="row">
+                          {historyRow?.date}
+                        </TableCell>
+                        <TableCell>{historyRow?.customerId}</TableCell>
+                        <TableCell align="right">{historyRow?.amount}</TableCell>
+                        <TableCell align="right">
+                          {Math.round(historyRow?.amount * 1000 * 100) / 100}
+                        </TableCell>
+                      </TableRow>
+                    ))
+                    : (
+                      <TableRow>
+                        <TableCell colSpan={8}>No Data</TableCell>
+                      </TableRow>
+                      )
+                    }
+                  </TableBody>
+                </Table>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
+  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+
+  const loadDataTableData = async () => {
+    setDataTableLoading(true);
+    const response = await axios.get('/corporates');
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  // FILTER SELECT 
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+      },
+    },
+  };
+
+  const names = [
+    'PLAN001',
+    'PLAN002',
+    'PLAN003',
+    'PLAN004',
+    'PLAN005',
+  ];
+  function getStyles(name: string, personName: string[], theme: Theme) {
+    return {
+      fontWeight:
+        personName.indexOf(name) === -1
+          ? theme.typography.fontWeightRegular
+          : theme.typography.fontWeightMedium,
+    };
+  }
+  
+  const theme = useTheme();
+  const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
+
+  const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setPlanIdFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+
+  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
+  const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setStatusFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+  // END FILTER SELECT
+  
+  // IMPORT
+  const importMember = React.useRef(null);
+  const handleImportButton = (event: any) => {
+    if (importMember?.current)
+      importMember.current ? importMember.current.click() : console.log('fuck');
+    else
+      alert('No file selected')
+  }
+
+  const { id } = useParams();
+
+  return (
+    <Stack>
+        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+              <TextField id="outlined-basic" label="Search" variant="outlined" fullWidth />
+            {/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
+            <Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
+              Import
+            </Button> */}
+            <Link to={"/corporates/"+id+"/divisions/create"}>
+              <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
+            </Link>
+        </Stack>
+
+        <Card>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left">#</TableCell>
+                <TableCell style={headStyle} align="left">Code</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="right">Action</TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ?
+              (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : (
+                dataTableData.data.length == 0 ? 
+                (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : (
+                  <TableBody>
+                    {dataTableData.data.map(row => (
+                      <Row key={row.code} row={row} />
+                    ))}
+                  </TableBody>
+                )
+            )}
+          </Table>
+        </TableContainer>
+        </Card>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,278 @@
+import * as Yup from 'yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate } from 'react-router-dom';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+// form
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+// @mui
+import { styled } from '@mui/material/styles';
+import { LoadingButton } from '@mui/lab';
+import {
+  Card,
+  FormHelperText,
+  Grid,
+  Stack,
+  Typography,
+} from '@mui/material';
+
+// components
+import {
+  FormProvider,
+  RHFTextField,
+  RHFRadioGroup,
+  RHFUploadAvatar,
+  RHFSwitch,
+} from '../../components/hook-form';
+import { Corporate } from '../../@types/corporates';
+import axios from '../../utils/axios';
+
+const LabelStyle = styled(Typography)(({ theme }) => ({
+  ...theme.typography.subtitle2,
+  color: theme.palette.text.secondary,
+  marginBottom: theme.spacing(1),
+}));
+
+interface FormValuesProps extends Partial<Corporate> {
+  taxes: boolean;
+  inStock: boolean;
+}
+
+type Props = {
+  isEdit: boolean;
+  currentCorporate?: Corporate;
+};
+
+export default function CorporateForm({ isEdit, currentCorporate }: Props) {
+  const navigate = useNavigate();
+
+  // const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
+
+  const { enqueueSnackbar } = useSnackbar();
+
+  const NewCorporateSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+    code: Yup.string().required('Corporate Code is required'),
+    active: Yup.boolean().required('Corporate Status is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      code: currentCorporate?.code || '',
+      name: currentCorporate?.name || '',
+      welcome_message: currentCorporate?.welcome_message || '',
+      help_text: currentCorporate?.help_text || '',
+      active: currentCorporate?.id ? currentCorporate?.active === 1 : true,
+      policy_id: currentCorporate?.current_policy?.id || '',
+      policy_code: currentCorporate?.current_policy?.code || '',
+      policy_total_premi: currentCorporate?.current_policy?.total_premi || '',
+      policy_minimal_deposit_percentage: currentCorporate?.current_policy?.minimal_deposit_percentage || 50,
+      policy_minimal_deposit_net: currentCorporate?.current_policy?.minimal_deposit_net || '',
+      policy_minimal_alert_percentage: currentCorporate?.current_policy?.minimal_alert_percentage || 25,
+      policy_minimal_alert_net: currentCorporate?.current_policy?.minimal_alert_net || '',
+      policy_stop_service_percentage: currentCorporate?.current_policy?.minimal_stop_service_percentage || 25,
+      policy_stop_service_net: currentCorporate?.current_policy?.minimal_stop_service_net || '',
+      policy_start: currentCorporate?.current_policy?.start || '',
+      policy_end: currentCorporate?.current_policy?.end || '',
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentCorporate]
+  );
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewCorporateSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const values = watch();
+
+  useEffect(() => {
+    if (isEdit && currentCorporate) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEdit, currentCorporate]);
+
+  const onSubmit = async (data: FormValuesProps) => {
+    try {
+      if (!isEdit) {
+        const response = await axios.post('/corporates', data);
+      } else {
+        const response = await axios.put('/corporates/' + currentCorporate?.id ?? '', data);
+      }
+      reset();
+      enqueueSnackbar(!isEdit ? 'Corporate Created Successfully!' : 'Corporate Udpated Successfully!', { variant: 'success' });
+      navigate('/corporates');
+    } catch (error: any) {
+      if (error && error.response.status === 422) {
+        for (const [key, value] of Object.entries(error.response.data.errors)) { 
+          setError(key, { message: value[0] });
+          enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
+        }
+      }
+      else {
+        enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
+      }
+    }
+  };
+
+  const handleDrop = useCallback(
+    (acceptedFiles) => {
+      setValue(
+        'logo',
+        acceptedFiles.map((file: Blob | MediaSource) =>
+          Object.assign(file, {
+            preview: URL.createObjectURL(file),
+          })
+        )
+      );
+    },
+    [setValue]
+  );
+
+  const handleRemove = (file: File | string) => {
+    setValue('logo', null);
+  };
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      {/* <Card sx={{ p:3, mb:3, background: 'gray', color: 'white' }}><Typography>Corporate Detail</Typography></Card> */}
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={8}>
+          <Card sx={{ p: 3 }}>
+            <Stack spacing={3}>
+              <Grid item xs={12}><Typography variant='h5'>Corporate Profile</Typography></Grid>
+              
+              <RHFTextField name="code" label="Corporate Code" />
+
+              <RHFTextField name="name" label="Corporate Name" />
+
+              <RHFTextField name="welcome_message" label="Welcome Message" />
+
+              <RHFTextField name="help_text" label="Help Text" />
+
+              {/* <div>
+                <LabelStyle>Images</LabelStyle>
+                <RHFUploadMultiFile
+                  name="images"
+                  files={[]}
+                  showPreview
+                  accept="image/*"
+                  maxSize={3145728}
+                  onDrop={handleDrop}
+                  onRemove={handleRemove}
+                  onRemoveAll={handleRemoveAll}
+                />
+              </div> */}
+            </Stack>
+          </Card>
+        </Grid>
+
+        <Grid item xs={12} md={4}>
+          <Stack spacing={3}>
+            <Card sx={{ p: 3 }}>
+              <RHFSwitch name="active" label="Is Company Active" />
+              <Stack spacing={3} mt={2}>
+                <Typography align="center">Company Logo</Typography>
+                <RHFUploadAvatar name="logo"
+                  showPreview
+                  accept={'image/*'}
+                  maxSize={3145728}
+                  onDrop={handleDrop}
+                  onRemove={handleRemove}
+                  />
+              </Stack>
+            </Card>
+          </Stack>
+        </Grid>
+
+        <Grid item xs={12} md={12}>
+          {/* <Card sx={{ p:3, mb:3, background: 'gray', color: 'white' }}><Typography>Policy Detail</Typography></Card> */}
+          <Card sx={{ p: 3 }}>
+            <Stack spacing={3} mt={2}>
+
+              <Grid item xs={12}><Typography variant='h5'>Policy Detail</Typography></Grid>
+              
+              <input type="hidden" name="policy_id" />
+              
+              <Stack spacing={1}>
+                <RHFTextField name="policy_code" label="Policy Number" />
+                {(!(currentCorporate?.id) && <Typography variant="caption">Will be generated if empty</Typography>)}
+              </Stack>
+
+              {/* <Typography>Minimal Deposit Policy Level</Typography> */}
+              <Grid container>
+                <Grid item xs={12} md={6}>
+                  <RHFTextField name="policy_start" label="Start Date (YYYY-MM-DD)" />
+                </Grid>
+                <Grid item xs={12} md={6}>
+                  <RHFTextField name="policy_end" label="End Date (YYYY-MM-DD)" />
+                </Grid>
+              </Grid>
+
+              <RHFTextField name="policy_total_premi" label="Total Premi" />
+
+              <Stack spacing={1}>
+              <Typography>Minimal Deposit Policy Level</Typography>
+              <Grid container>
+                <Grid item xs={12} md={3}>
+                  <RHFTextField name="policy_minimal_deposit_percentage" label="Percentage (%)" />
+                </Grid>
+                <Grid item xs={12} md={9}>
+                  <RHFTextField name="policy_minimal_deposit_net" label="Net (Rp)" />
+                </Grid>
+              </Grid>
+              </Stack>
+
+              <Stack spacing={1}>
+              <Typography>Minimal Alert Level</Typography>
+              <Grid container>
+                <Grid item xs={12} md={3}>
+                  <RHFTextField name="policy_minimal_alert_percentage" label="Percentage (%)" />
+                </Grid>
+                <Grid item xs={12} md={9}>
+                  <RHFTextField name="policy_minimal_alert_net" label="Net (Rp)" />
+                </Grid>
+              </Grid>
+              </Stack>
+
+              <Stack spacing={1}>
+              <Typography>Stop Service Level</Typography>
+              <Grid container>
+                <Grid item xs={12} md={3}>
+                  <RHFTextField name="policy_stop_service_percentage" label="Percentage (%)" />
+                </Grid>
+                <Grid item xs={12} md={9}>
+                  <RHFTextField name="policy_stop_service_net" label="Net (Rp)" />
+                </Grid>
+              </Grid>
+              </Stack>
+              
+            </Stack>
+          </Card>
+        </Grid>
+        
+        <Grid item xs={12} md={4}>
+          <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+            {!isEdit ? 'Create Product' : 'Save Changes'}
+          </LoadingButton>
+        </Grid>
+      </Grid>
+
+    </FormProvider>
+  );
+};

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

@@ -0,0 +1,321 @@
+// @mui
+import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Stack } from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import PublishIcon from '@mui/icons-material/Publish';
+import AddIcon from '@mui/icons-material/Add';
+// hooks
+import useSettings from '../../hooks/useSettings';
+// components
+import Page from '../../components/Page';
+import axios from '../../utils/axios';
+import useAuth from '../../hooks/useAuth';
+import { Link , NavLink as RouterLink } from 'react-router-dom';
+import React, { useEffect, useRef } from 'react';
+import { Theme, useTheme } from '@mui/material/styles';
+import { Corporate } from '../../@types/corporates';
+import { LaravelPaginatedData } from '../../@types/paginated-data';
+import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
+
+export default function Corporates() {
+  const { themeStretch } = useSettings();
+
+  // Called on every row to map the data to the columns
+  function createData( corporate: Corporate ): Corporate {
+    return {
+      ...corporate,
+    }
+  }
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableCell>
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="left"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
+          <TableCell align="right">
+            <Stack direction="row" justifyContent="flex-end" spacing={1}>
+              <Link to={"/corporates/" + row.id + "/edit"}><Button variant="outlined" color="primary" size="small">Edit</Button></ Link>
+              <Link to={"/corporates/" + row.id + ""}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
+            </Stack>
+          </TableCell>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ margin: 1 }}>
+                <Typography variant="h6" gutterBottom component="div">
+                  History
+                </Typography>
+                <Table size="small" aria-label="purchases">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Date</TableCell>
+                      <TableCell>Customer</TableCell>
+                      <TableCell align="right">Amount</TableCell>
+                      <TableCell align="right">Total price ($)</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {row.history ? row.history.map((historyRow) => (
+                      <TableRow key={historyRow?.date}>
+                        <TableCell component="th" scope="row">
+                          {historyRow?.date}
+                        </TableCell>
+                        <TableCell>{historyRow?.customerId}</TableCell>
+                        <TableCell align="right">{historyRow?.amount}</TableCell>
+                        <TableCell align="right">
+                          {Math.round(historyRow?.amount * 1000 * 100) / 100}
+                        </TableCell>
+                      </TableRow>
+                    ))
+                    : (
+                      <TableRow>
+                        <TableCell colSpan={8}>No Data</TableCell>
+                      </TableRow>
+                      )
+                    }
+                  </TableBody>
+                </Table>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
+  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+
+  const loadDataTableData = async () => {
+    setDataTableLoading(true);
+    const response = await axios.get('/corporates');
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  // FILTER SELECT 
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+      },
+    },
+  };
+
+  const names = [
+    'PLAN001',
+    'PLAN002',
+    'PLAN003',
+    'PLAN004',
+    'PLAN005',
+  ];
+  function getStyles(name: string, personName: string[], theme: Theme) {
+    return {
+      fontWeight:
+        personName.indexOf(name) === -1
+          ? theme.typography.fontWeightRegular
+          : theme.typography.fontWeightMedium,
+    };
+  }
+  
+  const theme = useTheme();
+  const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
+
+  const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setPlanIdFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+
+  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
+  const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setStatusFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+  // END FILTER SELECT
+  
+  // IMPORT
+  const importMember = React.useRef(null);
+  const handleImportButton = (event: any) => {
+    if (importMember?.current)
+      importMember.current ? importMember.current.click() : console.log('fuck');
+    else
+      alert('No file selected')
+  }
+
+  return (
+    <Page title="Membership : Corporate List">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <HeaderBreadcrumbs
+          heading={'Coporate List'}
+          links={[
+            { name: 'Dashboard', href: '/dashboard' },
+            {
+              name: 'Corporates',
+              href: '/corporates',
+            },
+          ]}
+        />
+
+        <Grid container spacing={3} sx={{ mb: 2 }} justifyContent="flex-end">
+          <Grid item>
+            <TextField id="outlined-basic" label="Search" variant="outlined" sx={{ width: 400 }}/>
+          </Grid>
+
+          <Grid item>
+            <FormControl sx={{ width: 200 }}>
+              <InputLabel id="plan-id-label">PlanID</InputLabel>
+              <Select
+                labelId="plan-id-label"
+                id="plan-id"
+                multiple
+                value={planIdFilter}
+                onChange={handleChangePlanID}
+                input={<OutlinedInput label="PlanID" />}
+                MenuProps={MenuProps}
+              >
+                {names.map((name) => (
+                  <MenuItem
+                    key={name}
+                    value={name}
+                    style={getStyles(name, planIdFilter, theme)}
+                  >
+                    {name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Grid item>
+            <FormControl sx={{ width: 200 }}>
+              <InputLabel id="status-filter-label">Status</InputLabel>
+              <Select
+                labelId="status-filter-label"
+                id="status-filter"
+                multiple
+                value={statusFilter}
+                onChange={handleChangeStatus}
+                input={<OutlinedInput label="Status" />}
+                MenuProps={MenuProps}
+              >
+                {['Active', 'Suspended'].map((name) => (
+                  <MenuItem
+                    key={name}
+                    value={name}
+                    style={getStyles(name, statusFilter, theme)}
+                  >
+                    {name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Grid item>
+            {/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
+            <Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
+              Import
+            </Button> */}
+            <Link to={"/corporates/create"}>
+              <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
+            </Link>
+          </Grid>
+        </Grid>
+
+        <Card>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left">#</TableCell>
+                <TableCell style={headStyle} align="left">Code</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="left">Status</TableCell>
+                <TableCell style={headStyle} align="right">Action</TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ? 
+              (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : (
+                dataTableData.data.length == 0 ? 
+                (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : (
+                  <TableBody>
+                    {dataTableData.data.map(row => (
+                      <Row key={row.code} row={row} />
+                    ))}
+                  </TableBody>
+                )
+            )}
+          </Table>
+        </TableContainer>
+        </Card>
+      </Container>
+    </Page>
+  );
+}

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

@@ -0,0 +1,54 @@
+import { Card, Grid } from "@mui/material";
+import { useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import CorporateTabNavigations from "../CorporateTabNavigations";
+import DivisionsList from "./List";
+
+
+
+export default function Divisions() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  return (
+    <Page title="Division List">
+
+      <HeaderBreadcrumbs
+        heading={'Division List'}
+        links={[
+          { name: 'Dashboard', href: '/dashboard' },
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+id,
+          },
+          {
+            name: 'Divisions',
+            href: '/corporates/'+id+'/divisions',
+          },
+        ]}
+      />
+
+      <Grid container spacing={2}>
+        <Grid item xs={8}>
+          <Card>
+            <CorporateTabNavigations position={'divisions'} />
+            <DivisionsList />
+          </Card>
+        </Grid>
+        <Grid item xs={4}>
+          <Card sx={{ p: 2 }}>
+            Corporate Detail Goes Here
+            &nbsp;
+          </Card>
+        </Grid>
+      </Grid>
+    </Page>
+  );
+}

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

@@ -0,0 +1,248 @@
+// @mui
+import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack } from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import PublishIcon from '@mui/icons-material/Publish';
+import AddIcon from '@mui/icons-material/Add';
+// hooks
+import useSettings from '../../../hooks/useSettings';
+// components
+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 } from 'react';
+import { Theme, useTheme } from '@mui/material/styles';
+import { Corporate } from '../../../@types/corporates';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import CorporateTabNavigations from '../CorporateTabNavigations';
+
+export default function DivisionsList() {
+  const { themeStretch } = useSettings();
+
+  // Called on every row to map the data to the columns
+  function createData( corporate: Corporate ): Corporate {
+    return {
+      ...corporate,
+    }
+  }
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableCell>
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ margin: 1 }}>
+                <Typography variant="h6" gutterBottom component="div">
+                  History
+                </Typography>
+                <Table size="small" aria-label="purchases">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Date</TableCell>
+                      <TableCell>Customer</TableCell>
+                      <TableCell align="right">Amount</TableCell>
+                      <TableCell align="right">Total price ($)</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {row.history ? row.history.map((historyRow) => (
+                      <TableRow key={historyRow?.date}>
+                        <TableCell component="th" scope="row">
+                          {historyRow?.date}
+                        </TableCell>
+                        <TableCell>{historyRow?.customerId}</TableCell>
+                        <TableCell align="right">{historyRow?.amount}</TableCell>
+                        <TableCell align="right">
+                          {Math.round(historyRow?.amount * 1000 * 100) / 100}
+                        </TableCell>
+                      </TableRow>
+                    ))
+                    : (
+                      <TableRow>
+                        <TableCell colSpan={8}>No Data</TableCell>
+                      </TableRow>
+                      )
+                    }
+                  </TableBody>
+                </Table>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
+  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+
+  const loadDataTableData = async () => {
+    setDataTableLoading(true);
+    const response = await axios.get('/corporates');
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  // FILTER SELECT 
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+      },
+    },
+  };
+
+  const names = [
+    'PLAN001',
+    'PLAN002',
+    'PLAN003',
+    'PLAN004',
+    'PLAN005',
+  ];
+  function getStyles(name: string, personName: string[], theme: Theme) {
+    return {
+      fontWeight:
+        personName.indexOf(name) === -1
+          ? theme.typography.fontWeightRegular
+          : theme.typography.fontWeightMedium,
+    };
+  }
+  
+  const theme = useTheme();
+  const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
+
+  const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setPlanIdFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+
+  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
+  const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setStatusFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+  // END FILTER SELECT
+  
+  // IMPORT
+  const importMember = React.useRef(null);
+  const handleImportButton = (event: any) => {
+    if (importMember?.current)
+      importMember.current ? importMember.current.click() : console.log('fuck');
+    else
+      alert('No file selected')
+  }
+
+  const { id } = useParams();
+
+  return (
+    <Stack>
+        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+              <TextField id="outlined-basic" label="Search" variant="outlined" fullWidth />
+            {/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
+            <Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
+              Import
+            </Button> */}
+            <Link to={"/corporates/"+id+"/divisions/create"}>
+              <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
+            </Link>
+        </Stack>
+
+        <Card>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left">#</TableCell>
+                <TableCell style={headStyle} align="left">Code</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="right">Action</TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ?
+              (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : (
+                dataTableData.data.length == 0 ? 
+                (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : (
+                  <TableBody>
+                    {dataTableData.data.map(row => (
+                      <Row key={row.code} row={row} />
+                    ))}
+                  </TableBody>
+                )
+            )}
+          </Table>
+        </TableContainer>
+        </Card>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,247 @@
+import * as Yup from 'yup';
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
+import { useForm } from "react-hook-form";
+import { useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from "../../../components/hook-form";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import CorporateTabNavigations from "../CorporateTabNavigations";
+import DivisionsList from "./List";
+import { useMemo, useState } from 'react';
+
+
+
+export default function PlanCreate() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const NewDivisionSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+    code: Yup.string().required('Corporate Code is required'),
+    active: Yup.boolean().required('Corporate Status is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      code: '',
+    }),
+    []
+  );
+
+  const methods = useForm({
+    resolver: yupResolver(NewDivisionSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const onSubmit = async (data: any) => {
+    console.log(data);
+  };
+
+  const [open, setOpen] = useState(false);
+
+  const benefits = [
+    {
+      'category' : 'General Practitioner',
+      'childs' : [
+        {
+          'name' : 'External Doctor Online',
+          'code' : 'gp-external-doctor-online'
+        },
+        {
+          'name' : 'External Doctor Offline',
+          'code' : 'gp-external-doctor-offline'
+        },
+        {
+          'name' : 'Internal Doctor Online',
+          'code' : 'gp-internal-doctor-online'
+        },
+        {
+          'name' : 'Internal Doctor Offline',
+          'code' : 'gp-internal-doctor-offline'
+        },
+      ]
+    },
+    {
+      'category' : 'Specialist',
+      'childs' : [
+        {
+          'name' : 'External Doctor Online',
+          'code' : 'sp-external-doctor-online'
+        },
+        {
+          'name' : 'External Doctor Offline',
+          'code' : 'sp-external-doctor-offline'
+        },
+        {
+          'name' : 'Internal Doctor Online',
+          'code' : 'sp-internal-doctor-online'
+        },
+        {
+          'name' : 'Internal Doctor Offline',
+          'code' : 'sp-internal-doctor-offline'
+        },
+      ]
+    },
+    {
+      'category' : 'Medicines',
+      'childs' : [
+        {
+          'name' : 'Vitamins',
+          'code' : 'medicines-vitamins'
+        },
+        {
+          'name' : 'Delivery Fee',
+          'code' : 'medicines-delivery-fee'
+        },
+      ]
+    },
+  ];
+
+  const products = [
+    {
+      'name' : 'Inpatient',
+      'code' : 'IP',
+    },
+    {
+      'name' : 'Outpatient',
+      'code' : 'OP',
+    },
+    {
+      'name' : 'Dental',
+      'code' : 'DT',
+    },
+    {
+      'name' : 'Dental',
+      'code' : 'DTL',
+    },
+    {
+      'name' : 'Matternity',
+      'code' : 'MT',
+    },
+    {
+      'name' : 'Special Benefit',
+      'code' : 'SB',
+    },
+  ];
+
+  return (
+    <Page title="Create Plan">
+
+      <HeaderBreadcrumbs
+        heading={'Create Plan'}
+        links={[
+          { name: 'Dashboard', href: '/dashboard' },
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+id,
+          },
+          {
+            name: 'Plans',
+            href: '/corporates/'+id+'/plans',
+          },
+          {
+            name: 'Create',
+            href: '/corporates/'+id+'/plans/create',
+          },
+        ]}
+      />
+      
+
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Card sx={{ p: 2 }}>
+            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+              <Stack spacing={3}>
+
+                <Typography variant="h6">Plan Detail</Typography>
+
+                <RHFTextField name="name" label="Name" />
+
+                <RHFTextField name="code" label="Code" />
+
+                <RHFTextField name="limit" label="Limit" />
+
+                <RHFTextField name="start" label="Start (YYYY-MM-DD)" />
+
+                <RHFTextField name="end" label="End (YYYY-MM-DD)" />
+
+                <Typography variant="h6">Benefit Configuration</Typography>
+                
+                <Divider orientation="horizontal" flexItem />
+                <Stack spacing={3} divider={<Divider orientation="horizontal" flexItem />}>
+                  <Stack spacing={2}>
+                    <RHFCheckbox name="a" label='Outpatient'/>
+                    {benefits.map(row => (
+                      <Collapse in={true} timeout="auto" unmountOnExit >
+                        <Typography>{row.category}</Typography>
+                        <Grid container>
+                        {row.childs.map(benefit => (
+                          <Grid item xs={6}>
+                            <RHFCheckbox name={benefit.code} label={benefit.name}/>
+                            </Grid>
+                        ))}
+                        </Grid>
+                      </Collapse>
+                    ))}
+                    <Typography>Admin Fee</Typography>
+                    <Grid container>
+                    {benefits.map(row => (
+                      <Grid item xs={4}>
+                        <RHFCheckbox name="cat" label={row.category}/>
+                      </Grid>
+                    ))}
+                    </Grid>
+                  </Stack>
+
+
+                  <Stack spacing={2}>
+                    <RHFCheckbox name="a" label='Inpatient'/>
+                    {benefits.map(row => (
+                      <Collapse in={true} timeout="auto" unmountOnExit >
+                        <Typography>{row.category}</Typography>
+                        <Grid container>
+                        {row.childs.map(benefit => (
+                          <Grid item xs={6}>
+                            <RHFCheckbox name={benefit.code} label={benefit.name}/>
+                            </Grid>
+                        ))}
+                        </Grid>
+                      </Collapse>
+                    ))}
+                    <Typography>Admin Fee</Typography>
+                    <Grid container>
+                    {benefits.map(row => (
+                      <Grid item xs={4}>
+                        <RHFCheckbox name="cat" label={row.category}/>
+                      </Grid>
+                    ))}
+                    </Grid>
+                  </Stack>
+                </Stack>
+
+              </Stack>
+            </FormProvider>
+          </Card>
+        </Grid>
+      </Grid>
+    </Page>
+  );
+}

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

@@ -0,0 +1,54 @@
+import { Card, Grid } from "@mui/material";
+import { useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import CorporateTabNavigations from "../CorporateTabNavigations";
+import DivisionsList from "./List";
+
+
+
+export default function Divisions() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  return (
+    <Page title="Corporate Plan">
+
+      <HeaderBreadcrumbs
+        heading={'Corporate Plan'}
+        links={[
+          { name: 'Dashboard', href: '/dashboard' },
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+id,
+          },
+          {
+            name: 'Plans',
+            href: '/corporates/'+id+'/divisions',
+          },
+        ]}
+      />
+
+      <Grid container spacing={2}>
+        <Grid item xs={8}>
+          <Card>
+            <CorporateTabNavigations position={'plans'} />
+            <DivisionsList />
+          </Card>
+        </Grid>
+        <Grid item xs={4}>
+          <Card sx={{ p: 2 }}>
+            Corporate Detail Goes Here
+            &nbsp;
+          </Card>
+        </Grid>
+      </Grid>
+    </Page>
+  );
+}

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

@@ -0,0 +1,270 @@
+// @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 KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import AddIcon from '@mui/icons-material/Add';
+import UploadIcon from '@mui/icons-material/Upload';
+import CancelIcon from '@mui/icons-material/Cancel';
+// hooks
+import React, { useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+import { useParams } from 'react-router-dom';
+// components
+import axios from '../../../utils/axios';
+import { Corporate } from '../../../@types/corporates';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+
+export default function DivisionsList() {
+  const { themeStretch } = useSettings();
+
+  // Called on every row to map the data to the columns
+  function createData( corporate: Corporate ): Corporate {
+    return {
+      ...corporate,
+    }
+  }
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableCell>
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ margin: 1 }}>
+                <Typography variant="h6" gutterBottom component="div">
+                  History
+                </Typography>
+                <Table size="small" aria-label="purchases">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Date</TableCell>
+                      <TableCell>Customer</TableCell>
+                      <TableCell align="right">Amount</TableCell>
+                      <TableCell align="right">Total price ($)</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {row.history ? row.history.map((historyRow) => (
+                      <TableRow key={historyRow?.date}>
+                        <TableCell component="th" scope="row">
+                          {historyRow?.date}
+                        </TableCell>
+                        <TableCell>{historyRow?.customerId}</TableCell>
+                        <TableCell align="right">{historyRow?.amount}</TableCell>
+                        <TableCell align="right">
+                          {Math.round(historyRow?.amount * 1000 * 100) / 100}
+                        </TableCell>
+                      </TableRow>
+                    ))
+                    : (
+                      <TableRow>
+                        <TableCell colSpan={8}>No Data</TableCell>
+                      </TableRow>
+                      )
+                    }
+                  </TableBody>
+                </Table>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
+  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+
+  const loadDataTableData = async () => {
+    setDataTableLoading(true);
+    const response = await axios.get('/corporates');
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const { id } = useParams();
+  
+  // SEARCH
+  const searchInput = useRef<HTMLInputElement>(null);
+  
+  // IMPORT
+  // Create Button Menu
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const createMenu = Boolean(anchorEl);
+  const importPlan = useRef<HTMLInputElement>(null) 
+  const [currentImportFileName, setCurrentImportFileName] = useState(null)
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleImportButton = (event: any) => {
+    if (importPlan?.current) {
+      handleClose();
+      importPlan.current ? importPlan.current.click() : console.log('No File selected');
+    } else {
+      alert('No file selected')
+    }
+  }
+
+  const handleCancelImportButton = (event: any) => {
+    // setCurrentImportFileName(null)
+    importPlan.current.value = "";
+    // console.log(importPlan.current?.value)
+    importPlan.current.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+
+  const handleImportChange = (event: any) => {
+    if (event.target.files[0]) {
+      setCurrentImportFileName(event.target.files[0].name)
+    } else {
+      setCurrentImportFileName(null);
+    }
+  }
+
+  const handleUpload = () => {
+    if (importPlan.current?.files.length) {
+      const formData = new FormData();
+      formData.append("file", importPlan.current?.files[0])
+      axios.post(`corporates/${id}/plans/import`, formData )
+    } else {
+      alert('No File Selected')
+    }
+  }
+
+  return (
+    <Stack>
+        <input type='file' id='file' ref={importPlan} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
+        {( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+          <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth />
+          <Button
+              id="import-button"
+              variant='outlined'
+              startIcon={<AddIcon />} sx={{ p: 1.8 }}
+              aria-controls={createMenu ? 'basic-menu' : undefined}
+              aria-haspopup="true"
+              aria-expanded={createMenu ? 'true' : undefined}
+              onClick={handleClick}
+            >
+              Import
+            </Button>
+            <Menu
+              id="import-button"
+              anchorEl={anchorEl}
+              open={createMenu}
+              onClose={handleClose}
+              MenuListProps={{
+                'aria-labelledby': 'basic-button',
+              }}
+            >
+              <MenuItem onClick={handleImportButton}>Import</MenuItem>
+              <MenuItem onClick={handleClose}>Download Template</MenuItem>
+            </Menu>
+        </Stack>
+        )}
+
+        {( currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+          <ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
+            <Button onClick={handleImportButton} fullWidth>{currentImportFileName ?? "No File Selected"}</Button>
+            <Button onClick={handleCancelImportButton} size="small" fullWidth={false} sx={{ p: 1.8 }}><CancelIcon color="error"/></Button>
+          </ButtonGroup>
+
+          <Button
+            id="upload-button"
+            variant='outlined'
+            startIcon={<UploadIcon />} sx={{ p: 1.8 }}
+            onClick={handleUpload}
+          >
+            Upload
+          </Button>
+        </Stack>
+        )}
+
+        <Card>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left">#</TableCell>
+                <TableCell style={headStyle} align="left">Code</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="right">Action</TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ?
+              (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : (
+                dataTableData.data.length == 0 ? 
+                (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : (
+                  <TableBody>
+                    {dataTableData.data.map(row => (
+                      <Row key={row.code} row={row} />
+                    ))}
+                  </TableBody>
+                )
+            )}
+          </Table>
+        </TableContainer>
+        </Card>
+    </Stack>
+  );
+}

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

@@ -0,0 +1,231 @@
+// @mui
+import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Stack } from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import PublishIcon from '@mui/icons-material/Publish';
+import AddIcon from '@mui/icons-material/Add';
+// hooks
+import useSettings from '../../hooks/useSettings';
+// components
+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 } from 'react';
+import { Theme, useTheme } from '@mui/material/styles';
+import { Corporate } from '../../@types/corporates';
+import { LaravelPaginatedData } from '../../@types/paginated-data';
+import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
+import CorporateTabNavigations from './CorporateTabNavigations';
+
+export default function Corporates() {
+  const { themeStretch } = useSettings();
+
+  // Called on every row to map the data to the columns
+  function createData( corporate: Corporate ): Corporate {
+    return {
+      ...corporate,
+    }
+  }
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableCell>
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ margin: 1 }}>
+                <Typography variant="h6" gutterBottom component="div">
+                  History
+                </Typography>
+                <Table size="small" aria-label="purchases">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Date</TableCell>
+                      <TableCell>Customer</TableCell>
+                      <TableCell align="right">Amount</TableCell>
+                      <TableCell align="right">Total price ($)</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {row.history ? row.history.map((historyRow) => (
+                      <TableRow key={historyRow?.date}>
+                        <TableCell component="th" scope="row">
+                          {historyRow?.date}
+                        </TableCell>
+                        <TableCell>{historyRow?.customerId}</TableCell>
+                        <TableCell align="right">{historyRow?.amount}</TableCell>
+                        <TableCell align="right">
+                          {Math.round(historyRow?.amount * 1000 * 100) / 100}
+                        </TableCell>
+                      </TableRow>
+                    ))
+                    : (
+                      <TableRow>
+                        <TableCell colSpan={8}>No Data</TableCell>
+                      </TableRow>
+                      )
+                    }
+                  </TableBody>
+                </Table>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
+  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+
+  const loadDataTableData = async () => {
+    setDataTableLoading(true);
+    const response = await axios.get('/corporates');
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  // FILTER SELECT 
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+      },
+    },
+  };
+
+  const names = [
+    'PLAN001',
+    'PLAN002',
+    'PLAN003',
+    'PLAN004',
+    'PLAN005',
+  ];
+  function getStyles(name: string, personName: string[], theme: Theme) {
+    return {
+      fontWeight:
+        personName.indexOf(name) === -1
+          ? theme.typography.fontWeightRegular
+          : theme.typography.fontWeightMedium,
+    };
+  }
+  
+  const theme = useTheme();
+  const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
+
+  const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setPlanIdFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+
+  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
+  const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setStatusFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+  // END FILTER SELECT
+  
+  // IMPORT
+  const importMember = React.useRef(null);
+  const handleImportButton = (event: any) => {
+    if (importMember?.current)
+      importMember.current ? importMember.current.click() : console.log('fuck');
+    else
+      alert('No file selected')
+  }
+
+  const { id } = useParams();
+  
+  return (
+    <Page title="Corporate Detail">
+
+      <HeaderBreadcrumbs
+        heading={'Corporate Detail'}
+        links={[
+          { name: 'Dashboard', href: '/dashboard' },
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+id,
+          },
+        ]}
+      />
+
+
+      {/* <Container maxWidth={themeStretch ? false : 'xl'}> */}
+        <Card>
+          <Stack spacing="3">
+            <CorporateTabNavigations position="any"/>
+            <Grid container spacing={3}>
+
+              <Grid item xs={12} sx={{ p:2 }}>
+                  Corporate Dashboard / Report Goes Here
+                  &nbsp;
+              </Grid>
+            </Grid>
+          </Stack>
+        </Card>
+      {/* </Container> */}
+    </Page>
+  );
+}

frontend/dashboard/src/routes/index.tsx

@@ -79,6 +79,50 @@ export default function Router() {
           path: 'members',
           element: <Members />,
         },
+        {
+          path: 'corporates',
+          element: <Corporate />,
+        },
+        {
+          path: 'corporates/create',
+          element: <CorporateCreate />,
+        },
+        {
+          path: 'corporates/:id',
+          element: <CorporateShow />,
+        },
+        {
+          path: 'corporates/:id/edit',
+          element: <CorporateCreate />,
+        },
+        {
+          path: 'corporates/:id/divisions',
+          element: <CorporateDivisions />,
+        },
+        {
+          path: 'corporates/:id/divisions/create',
+          element: <CorporateDivisionsCreate />,
+        },
+        {
+          path: 'corporates/:id/members',
+          element: <CorporateMembers />,
+        },
+        {
+          path: 'corporates/:id/plans/create',
+          element: <CorporatePlansCreate />,
+        },
+        {
+          path: 'corporates/:id/plans',
+          element: <CorporatePlans />,
+        },
+        {
+          path: 'corporates/:id/benefits/create',
+          element: <CorporateBenefitsCreate />,
+        },
+        {
+          path: 'corporates/:id/benefits',
+          element: <CorporateBenefits />,
+        },
       ]
     },
     // {
@@ -123,3 +167,14 @@ const NotFound = Loadable(lazy(() => import('../pages/Page404')));
 // Members
 const Members = Loadable(lazy(() => import('../pages/Members/Index')));
 const MedicinesCreate = Loadable(lazy(() => import('../pages/Medicines/Create')));
+
+const Corporate = Loadable(lazy(() => import('../pages/Corporates/Index')));
+const CorporateCreate = Loadable(lazy(() => import('../pages/Corporates/Create')));
+const CorporateShow = Loadable(lazy(() => import('../pages/Corporates/Show')));
+const CorporateDivisions = Loadable(lazy(() => import('../pages/Corporates/Division/Index')));
+const CorporateDivisionsCreate = Loadable(lazy(() => import('../pages/Corporates/Division/Create')));
+const CorporateMembers = Loadable(lazy(() => import('../pages/Corporates/Member/Index')));
+const CorporateBenefitsCreate = Loadable(lazy(() => import('../pages/Corporates/Benefit/Create')));
+const CorporateBenefits = Loadable(lazy(() => import('../pages/Corporates/Benefit/Index')));
+const CorporatePlansCreate = Loadable(lazy(() => import('../pages/Corporates/Plan/Create')));
+const CorporatePlans = Loadable(lazy(() => import('../pages/Corporates/Plan/Index')));

frontend/dashboard/src/utils/axios.ts

@@ -1,4 +1,4 @@
-import axios from 'axios';
+import { default as defaultAxios } from 'axios';
 // config
 import { HOST_API } from '../config';
 
@@ -8,7 +8,7 @@ import { getSession } from './token';
 
 const token = getSession();
 
-const axiosInstance = axios.create({
+const axios = defaultAxios.create({
   baseURL: HOST_API,
   // headers: {
   //   'X-Requested-With': 'XMLHttpRequest',
@@ -19,9 +19,9 @@ const axiosInstance = axios.create({
   // }
 });
 
-axiosInstance.interceptors.response.use(
+axios.interceptors.response.use(
   (response) => response,
   (error) => Promise.reject((error) || 'Something went wrong')
 );
 
-export default axiosInstance;
+export default axios;