Add Corporate Specialities

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

@@ -171,3 +171,13 @@ export type Benefit = {
   show_benefit_item : string;
   show_benefit_value : string;
 }
+
+export type CorporateService = {
+  id?: string | number;
+  corporate_id?: string | number;
+  description?: string;
+  name?: string;
+  service_code: string;
+  status: string;
+  configurations: any;
+}

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

@@ -35,20 +35,10 @@ export default function Divisions() {
         ]}
       />
 
-      <Grid container spacing={2}>
-        <Grid item xs={8}>
-          <Card>
-            <CorporateTabNavigations position={'benefits'} />
-            <DivisionsList />
-          </Card>
-        </Grid>
-        <Grid item xs={4}>
-          <Card sx={{ p: 2 }}>
-            Corporate Detail Goes Here
-            &nbsp;
-          </Card>
-        </Grid>
-      </Grid>
+      <Card>
+        <CorporateTabNavigations position={'benefits'} />
+        <DivisionsList />
+      </Card>
     </Page>
   );
 }

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

@@ -0,0 +1,64 @@
+
+import { useNavigate, useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import { useEffect, useMemo, useState } from 'react';
+import axios from '../../../utils/axios';
+import { useSnackbar } from 'notistack';
+import CorporatePlanForm from './Form';
+import { CorporatePlan } from '../../../@types/corporates';
+
+
+
+export default function PlanCreate() {
+  const { themeStretch } = useSettings();
+  const { corporate_id, id } = useParams();
+  const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState<CorporatePlan>();
+  const navigate = useNavigate();
+
+  const isEdit = !!id;
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/corporates/'+corporate_id+'/divisions/'+id+'/edit')
+        .then((res) => {
+          setCurrentCorporatePlan(res.data);
+        })
+        .catch((err) => {
+          if (err.response.status === 404) {
+            navigate('/404');
+          }
+        })
+    }
+  }, [corporate_id, id]);
+
+
+  return (
+    <Page title="Create Corporate Division">
+      <HeaderBreadcrumbs
+        heading={'Create Corporate Division'}
+        links={[
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+corporate_id,
+          },
+          {
+            name: 'Division',
+            href: '/corporates/'+corporate_id+'/divisions',
+          },
+          {
+            name: !isEdit ? 'Create' : 'Edit',
+            href: '/corporates/'+corporate_id+'/divisions/'+id,
+          },
+        ]}
+      />
+
+      <CorporatePlanForm isEdit={isEdit} currentCorporatePlan={currentCorporatePlan}/>
+    </Page>
+  );
+}

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

@@ -0,0 +1,129 @@
+import * as Yup from 'yup';
+import { LoadingButton } from "@mui/lab";
+import { Card, Grid, Stack, Typography } from "@mui/material";
+import { CorporatePlan } from "../../../@types/corporates";
+import { FormProvider, RHFSwitch, RHFTextField } from "../../../components/hook-form";
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate, useParams } from 'react-router-dom';
+import axios from '../../../utils/axios';
+
+type Props = {
+  isEdit: boolean;
+  currentCorporatePlan?: CorporatePlan;
+};
+
+export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Props) {
+
+  const { enqueueSnackbar } = useSnackbar();
+  const navigate = useNavigate();
+  const { corporate_id } = useParams();
+
+  const NewCorporatePlanSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+    code: Yup.string().required('Corporate Code is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      name: currentCorporatePlan?.name || '',
+      code: currentCorporatePlan?.code || '',
+      active: currentCorporatePlan?.active === 1 ? true : false,
+    }),
+    [currentCorporatePlan]
+  );
+
+  useEffect(() => {
+    if (isEdit && currentCorporatePlan) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+  }, [isEdit, currentCorporatePlan]);
+
+  const methods = useForm({
+    resolver: yupResolver(NewCorporatePlanSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+
+  const onSubmit = async (data: any) => {
+    if (!isEdit) {
+      await axios
+      .post('/corporates/' + corporate_id + '/divisions', data)
+      .then((res) => {
+        enqueueSnackbar('Division created successfully', { variant: 'success' });
+      })
+      .then((res) => {
+        navigate('/corporates/' + corporate_id + '/divisions',  { replace: true });
+      })
+      .catch(({ response }) => {
+        if (response.status === 422) {
+          for (const [key, value] of Object.entries(response.data.errors)) { 
+            setError(key, { message: value[0] });
+            enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
+          }
+        }
+        else {
+          enqueueSnackbar('Create Failed : '+ response.data.message, { variant: 'error' });
+        }
+      });
+    } else {
+      await axios
+        .put('/corporates/' + corporate_id + '/divisions/' + currentCorporatePlan?.id , data)
+        .then((res) => {
+          enqueueSnackbar('Division updated successfully', { variant: 'success' });
+        })
+        .then((res) => {
+          navigate('/corporates/' + corporate_id + '/divisions/' ,  { replace: true });
+        })
+        .catch(({ response }) => {
+          enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
+        });
+    }
+  };
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        <Grid container spacing={2}>
+          <Grid item xs={8}>
+            <Card sx={{ p: 2 }}>
+                <Stack spacing={3}>
+
+                  <Typography variant="h6">Division Detail</Typography>
+
+                  <RHFTextField name="name" label="Name" />
+
+                  <RHFTextField name="code" label="Code" />
+
+                  <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+                    { isEdit? 'Update' : 'Create' } 
+                  </LoadingButton>
+
+                </Stack>
+            </Card>
+          </Grid>
+          <Grid item xs={4}>
+            <Card sx={{ p:2 }}>
+
+            <RHFSwitch name="active" label="Active" />
+              </Card>
+          </Grid>
+        </Grid>
+      </FormProvider>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { Card, Grid, Typography } 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 { corporate_id } = useParams();
+
+  return (
+    <Page title="Claim History">
+
+      <HeaderBreadcrumbs
+        heading={'Claim History'}
+        links={[
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+corporate_id,
+          },
+          {
+            name: 'Claim History',
+            href: '/corporates/'+corporate_id+'/claim-histories',
+          },
+        ]}
+      />
+
+      <Card>
+        <CorporateTabNavigations position={'claim-histories'} />
+        <Typography sx={{ m: 4 }}>Feature Not Implemented Yet</Typography>
+      </Card>
+    </Page>
+  );
+}

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

@@ -0,0 +1,234 @@
+// @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, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../../utils/axios';
+import { CorporatePlan } from '../../../@types/corporates';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import BasePagination from '../../../components/BasePagination';
+
+export default function PlanList() {
+  const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+  
+  function SearchInput(props: any) {
+     // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState("");
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? ''
+      setSearchText(newSearchText);
+    }
+
+    const handleSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  {
+      // console.log('Search Input: useEffect')
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSubmit} style={{ width: '100%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData( plan: CorporatePlan ): CorporatePlan {
+    return {
+      ...plan,
+    }
+  }
+
+  // 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.id}</TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="left">{row.description}</TableCell>
+          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
+          <TableCell align="right"><Link to={`/corporates/${row.corporate_id}/divisions/${row.id}/edit`}><Button variant="outlined" color="success" size="small">Edit</Button></Link></TableCell>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ borderBottom: 1 }}>
+                <Typography variant="body2" gutterBottom component="div">
+                  No Extra Data
+                </Typography>
+              </Box>
+            {false && <Box sx={{ margin: 1 }}>
+                <Typography variant="h6" gutterBottom component="div">
+                  Rules
+                </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={row.id}>
+                        <TableCell component="th" scope="row">{row.start} - {row.end}</TableCell>
+                        <TableCell>{row.start}</TableCell>
+                        <TableCell align="right">{row.start}</TableCell>
+                        <TableCell align="right">{row.start}</TableCell>
+                      </TableRow>
+                    {/* ))
+                    : (
+                      <TableRow>
+                        <TableCell colSpan={8}>No Data</TableCell>
+                      </TableRow>
+                      )
+                    } */}
+                  </TableBody>
+                </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 (appliedFilter : any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/corporates/'+corporate_id+'/divisions', { params: filter });
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: any) => {
+    await loadDataTableData({ "search" : searchFilter });
+    setSearchParams({ "search" : searchFilter });
+  }
+
+  const handlePageChange = (event : ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  }
+
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+  
+  return (
+    <Stack>
+        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+          <SearchInput onSearch={applyFilter}/>
+          <Link to={`/corporates/${corporate_id}/divisions/create`}>
+            <Button
+              component="button"
+              id="upload-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 style={headStyle} align="left">ID</TableCell>
+                <TableCell style={headStyle} align="left">Code</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="left">Description</TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ?
+              (
+                <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>
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+        </Card>
+    </Stack>
+  );
+}

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

@@ -1,7 +1,7 @@
 import { Tab, Tabs } from "@mui/material";
 import { useTheme } from "@mui/system";
 import React, { useEffect } from "react";
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 
 type Props = {
   position: string
@@ -9,6 +9,7 @@ type Props = {
 
 export default function CorporateTabNavigations({ position }: Props) {
   const theme = useTheme();
+  const navigate = useNavigate();
 
   const { corporate_id } = useParams();
 
@@ -73,13 +74,13 @@ export default function CorporateTabNavigations({ position }: Props) {
     <Tabs
       theme={theme}
       value={currentTab}
-      onChange={(event, newValue) => false}
+      // 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/"+corporate_id+"/"+mainTabItems[index].path} style={{ textDecoration: 'none', color: 'black' }}>{tabItem.label}</Link>)} />))}
+      {mainTabItems.map((tabItem, index) => (<Tab key={index} onClick={() => { navigate("/corporates/"+corporate_id+"/"+mainTabItems[index].path) }}label={tabItem.label}/>))}
     </Tabs>
   )
 }

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

@@ -35,9 +35,8 @@ export default function Divisions() {
         ]}
       />
       
-      <CorporateTabNavigations position={'diagnosis-exclusions'} />
-
       <Card>
+        <CorporateTabNavigations position={'diagnosis-exclusions'} />
         <List />
       </Card>
     </Page>

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

@@ -34,20 +34,10 @@ export default function 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>
+      <Card>
+        <CorporateTabNavigations position={'divisions'} />
+        <DivisionsList />
+      </Card>
     </Page>
   );
 }

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

@@ -1,5 +1,5 @@
 // @mui
-import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup } from '@mui/material';
+import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Input, Grid } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import AddIcon from '@mui/icons-material/Add';
@@ -44,26 +44,66 @@ export default function PlanList() {
   function SearchInput(props: any) {
      // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
+    // const filterForm = useRef();
     const [searchText, setSearchText] = useState("");
+    const [searchStatus, setSearchStatus] = useState("active");
 
     const handleSearchChange = (event: any) => {
       const newSearchText = event.target.value ?? ''
       setSearchText(newSearchText);
     }
 
-    const handleSubmit = (event: any) => {
-      event.preventDefault();
-      props.onSearch(searchText); // Trigger to Parent
+    const handleStatusChange = (event: any) => {
+      const newSearchStatus = event.target.value ?? ''
+      console.log('changing to', newSearchStatus)
+      setSearchStatus(newSearchStatus)
+      // console.log(searchStatus);
+      
+      const searchFilter = {
+        "search" : searchText,
+        "status" : newSearchStatus
+      };
+      
+      props.onSearch(searchFilter); 
     }
 
-    useEffect(() =>  {
-      // console.log('Search Input: useEffect')
+    const handleSubmit = (event?: any) => {
+      event?.preventDefault();
+      const searchFilter = {
+        "search" : searchText,
+        "status" : searchStatus
+      };
+      
+      props.onSearch(searchFilter); // Trigger to Parent
+    }
+
+    useEffect(() => {
       setSearchText(searchParams.get('search') ?? '');
+      setSearchStatus(searchParams.get('status') ?? searchStatus ?? 'active');
     }, [searchParams])
 
     return (
-      <form onSubmit={handleSubmit} style={{ width: '100%' }}>
-        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      <form id="search-form" onSubmit={handleSubmit} style={{ width: '100%' }}>
+        <Grid container spacing={2}>
+          <Grid item xs={9}>
+            <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+          </Grid>
+
+          <Grid item xs={3}>
+          <Select
+            label="Status"
+            value={searchStatus}
+            onChange={handleStatusChange}
+            sx={{ width: '100%' }}
+          >
+            <MenuItem value="active">Active</MenuItem>
+            <MenuItem value="inactive">Inactive</MenuItem>
+            <MenuItem value="all">All</MenuItem>
+            </Select>
+          </Grid>
+          {/* ITS FUCKING MAGIC, SUBMIT BY ENTER WORKING IF THIS BUTTON IS AVAILABLE */}
+          <Button type='submit' variant="outlined" sx={{ p: 1.8, display: 'none' }}>Search</Button>
+        </Grid>
       </form>
     );
   }
@@ -171,8 +211,8 @@ export default function PlanList() {
   };
 
   const applyFilter = async (searchFilter: any) => {
-    await loadDataTableData({ "search" : searchFilter });
-    setSearchParams({ "search" : searchFilter });
+    await loadDataTableData(searchFilter);
+    setSearchParams(searchFilter);
   }
 
   const handlePageChange = (event : ChangeEvent, value: number) => {

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

@@ -0,0 +1,64 @@
+
+import { useNavigate, useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import { useEffect, useMemo, useState } from 'react';
+import axios from '../../../utils/axios';
+import { useSnackbar } from 'notistack';
+import CorporatePlanForm from './Form';
+import { CorporatePlan } from '../../../@types/corporates';
+
+
+
+export default function PlanCreate() {
+  const { themeStretch } = useSettings();
+  const { corporate_id, id } = useParams();
+  const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState<CorporatePlan>();
+  const navigate = useNavigate();
+
+  const isEdit = !!id;
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/corporates/'+corporate_id+'/divisions/'+id+'/edit')
+        .then((res) => {
+          setCurrentCorporatePlan(res.data);
+        })
+        .catch((err) => {
+          if (err.response.status === 404) {
+            navigate('/404');
+          }
+        })
+    }
+  }, [corporate_id, id]);
+
+
+  return (
+    <Page title="Create Corporate Division">
+      <HeaderBreadcrumbs
+        heading={'Create Corporate Division'}
+        links={[
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+corporate_id,
+          },
+          {
+            name: 'Division',
+            href: '/corporates/'+corporate_id+'/divisions',
+          },
+          {
+            name: !isEdit ? 'Create' : 'Edit',
+            href: '/corporates/'+corporate_id+'/divisions/'+id,
+          },
+        ]}
+      />
+
+      <CorporatePlanForm isEdit={isEdit} currentCorporatePlan={currentCorporatePlan}/>
+    </Page>
+  );
+}

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

@@ -0,0 +1,129 @@
+import * as Yup from 'yup';
+import { LoadingButton } from "@mui/lab";
+import { Card, Grid, Stack, Typography } from "@mui/material";
+import { CorporatePlan } from "../../../@types/corporates";
+import { FormProvider, RHFSwitch, RHFTextField } from "../../../components/hook-form";
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate, useParams } from 'react-router-dom';
+import axios from '../../../utils/axios';
+
+type Props = {
+  isEdit: boolean;
+  currentCorporatePlan?: CorporatePlan;
+};
+
+export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Props) {
+
+  const { enqueueSnackbar } = useSnackbar();
+  const navigate = useNavigate();
+  const { corporate_id } = useParams();
+
+  const NewCorporatePlanSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+    code: Yup.string().required('Corporate Code is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      name: currentCorporatePlan?.name || '',
+      code: currentCorporatePlan?.code || '',
+      active: currentCorporatePlan?.active === 1 ? true : false,
+    }),
+    [currentCorporatePlan]
+  );
+
+  useEffect(() => {
+    if (isEdit && currentCorporatePlan) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+  }, [isEdit, currentCorporatePlan]);
+
+  const methods = useForm({
+    resolver: yupResolver(NewCorporatePlanSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+
+  const onSubmit = async (data: any) => {
+    if (!isEdit) {
+      await axios
+      .post('/corporates/' + corporate_id + '/divisions', data)
+      .then((res) => {
+        enqueueSnackbar('Division created successfully', { variant: 'success' });
+      })
+      .then((res) => {
+        navigate('/corporates/' + corporate_id + '/divisions',  { replace: true });
+      })
+      .catch(({ response }) => {
+        if (response.status === 422) {
+          for (const [key, value] of Object.entries(response.data.errors)) { 
+            setError(key, { message: value[0] });
+            enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
+          }
+        }
+        else {
+          enqueueSnackbar('Create Failed : '+ response.data.message, { variant: 'error' });
+        }
+      });
+    } else {
+      await axios
+        .put('/corporates/' + corporate_id + '/divisions/' + currentCorporatePlan?.id , data)
+        .then((res) => {
+          enqueueSnackbar('Division updated successfully', { variant: 'success' });
+        })
+        .then((res) => {
+          navigate('/corporates/' + corporate_id + '/divisions/' ,  { replace: true });
+        })
+        .catch(({ response }) => {
+          enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
+        });
+    }
+  };
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        <Grid container spacing={2}>
+          <Grid item xs={8}>
+            <Card sx={{ p: 2 }}>
+                <Stack spacing={3}>
+
+                  <Typography variant="h6">Division Detail</Typography>
+
+                  <RHFTextField name="name" label="Name" />
+
+                  <RHFTextField name="code" label="Code" />
+
+                  <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+                    { isEdit? 'Update' : 'Create' } 
+                  </LoadingButton>
+
+                </Stack>
+            </Card>
+          </Grid>
+          <Grid item xs={4}>
+            <Card sx={{ p:2 }}>
+
+            <RHFSwitch name="active" label="Active" />
+              </Card>
+          </Grid>
+        </Grid>
+      </FormProvider>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { Card, Grid, Typography } 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 { corporate_id } = useParams();
+
+  return (
+    <Page title="Hospitals">
+
+      <HeaderBreadcrumbs
+        heading={'Hospitals'}
+        links={[
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+corporate_id,
+          },
+          {
+            name: 'Hospitals',
+            href: '/corporates/'+corporate_id+'/hospitals',
+          },
+        ]}
+      />
+
+      <Card>
+        <CorporateTabNavigations position={'hospitals'} />
+        <Typography sx={{ m:4 }}>Feature Not Implemented Yet</Typography>
+      </Card>
+    </Page>
+  );
+}

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

@@ -0,0 +1,234 @@
+// @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, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../../utils/axios';
+import { CorporatePlan } from '../../../@types/corporates';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import BasePagination from '../../../components/BasePagination';
+
+export default function PlanList() {
+  const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+  
+  function SearchInput(props: any) {
+     // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState("");
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? ''
+      setSearchText(newSearchText);
+    }
+
+    const handleSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  {
+      // console.log('Search Input: useEffect')
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSubmit} style={{ width: '100%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData( plan: CorporatePlan ): CorporatePlan {
+    return {
+      ...plan,
+    }
+  }
+
+  // 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.id}</TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="left">{row.description}</TableCell>
+          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
+          <TableCell align="right"><Link to={`/corporates/${row.corporate_id}/divisions/${row.id}/edit`}><Button variant="outlined" color="success" size="small">Edit</Button></Link></TableCell>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ borderBottom: 1 }}>
+                <Typography variant="body2" gutterBottom component="div">
+                  No Extra Data
+                </Typography>
+              </Box>
+            {false && <Box sx={{ margin: 1 }}>
+                <Typography variant="h6" gutterBottom component="div">
+                  Rules
+                </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={row.id}>
+                        <TableCell component="th" scope="row">{row.start} - {row.end}</TableCell>
+                        <TableCell>{row.start}</TableCell>
+                        <TableCell align="right">{row.start}</TableCell>
+                        <TableCell align="right">{row.start}</TableCell>
+                      </TableRow>
+                    {/* ))
+                    : (
+                      <TableRow>
+                        <TableCell colSpan={8}>No Data</TableCell>
+                      </TableRow>
+                      )
+                    } */}
+                  </TableBody>
+                </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 (appliedFilter : any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/corporates/'+corporate_id+'/divisions', { params: filter });
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: any) => {
+    await loadDataTableData({ "search" : searchFilter });
+    setSearchParams({ "search" : searchFilter });
+  }
+
+  const handlePageChange = (event : ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  }
+
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+  
+  return (
+    <Stack>
+        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+          <SearchInput onSearch={applyFilter}/>
+          <Link to={`/corporates/${corporate_id}/divisions/create`}>
+            <Button
+              component="button"
+              id="upload-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 style={headStyle} align="left">ID</TableCell>
+                <TableCell style={headStyle} align="left">Code</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="left">Description</TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ?
+              (
+                <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>
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+        </Card>
+    </Stack>
+  );
+}

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

@@ -34,20 +34,11 @@ export default function 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>
+      <Card>
+        <CorporateTabNavigations position={'plans'} />
+        <DivisionsList />
+      </Card>
+      
     </Page>
   );
 }

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

@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
+import { Box, Card, Checkbox, Collapse, Divider, FormControlLabel, Grid, Modal, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material";
 import { useForm } from "react-hook-form";
 import { useParams } from "react-router-dom";
 import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
@@ -9,134 +9,91 @@ import Page from "../../../components/Page";
 import useSettings from "../../../hooks/useSettings";
 import CorporateTabNavigations from "../CorporateTabNavigations";
 import DivisionsList from "./List";
-import { useMemo, useState } from 'react';
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import axios from '../../../utils/axios';
+import { CorporateService } from '../../../@types/corporates';
 
 
 
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
-  const { corporate_id } = useParams();
+  const { corporate_id, service_code } = 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 [service, setService] = useState<CorporateService>({
+    "configurations" : {},
+    "corporate_id": "null",
+    "name" : "",
+    "description" : "",
+    "service_code" : "",
+    "status" : "active"
   });
 
-  const defaultValues = useMemo(
-    () => ({
-      code: '',
-    }),
-    []
-  );
+  const [specialities, setSpecialities] = useState([])
 
-  const methods = useForm({
-    resolver: yupResolver(NewDivisionSchema),
-    defaultValues,
-  });
+  useEffect(() =>  {
+    axios.get('/corporates/'+corporate_id+'/services/'+service_code)
+      .then((res) => {
+        setService(res.data.service)
+        setSpecialities(res.data.specialities)
+      });
+  }, [])
 
-  const {
-    reset,
-    watch,
-    control,
-    setValue,
-    getValues,
-    setError,
-    handleSubmit,
-    formState: { isSubmitting },
-  } = methods;
 
-  const onSubmit = async (data: any) => {
-    console.log(data);
+  const handleConfigChange = (event: ChangeEvent<HTMLInputElement>, service: any) => {
+    axios.put(`/corporates/${corporate_id}/services`, { 
+      service_code: service.service_code,
+      config_name: event.target.name,
+      config_value: event.target.checked
+     })
+     .then((res) => {
+      let newConfigurations = service.configurations
+      newConfigurations[res.data.name] = res.data.value == true
+
+      setService({
+        ...service, 
+        configurations: { ...newConfigurations }
+      })
+     })
+  }
+
+  const handleToggleSpeciality = (event: ChangeEvent<HTMLInputElement>, service: any, speciality: any) => {
+    console.log('Changing Service ', service, 'and', speciality)
+    axios.post(`/corporates/${corporate_id}/services/${service_code}/specialities`, { 
+      // service_code: service.service_code,
+      speciality_id: speciality.id,
+      status: event.target.checked ? 'active' : 'inactive'
+     })
+     .then((res) => {
+      setService({
+        ...service,
+        selected_specialities : res.data
+      })
+      // let newConfigurations = service.configurations
+      // newConfigurations[res.data.name] = res.data.value == true
+
+      // setService({
+      //   ...service, 
+      //   configurations: { ...newConfigurations }
+      // })
+     })
+  }
+
+  const specialityModalStyle = {
+    position: 'absolute' as 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '80%',
+    maxHeight: '80%',
+    overflowY: 'scroll',
+    bgcolor: 'background.paper',
+    border: '2px solid gray',
+    boxShadow: 24,
+    p: 4,
   };
+  const [specialityModal, setSpecialityModal] = useState(false)
 
-  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">
@@ -151,15 +108,15 @@ export default function Divisions() {
           },
           {
             name: 'Corporate Name',
-            href: '/corporates/'+id,
+            href: '/corporates/'+corporate_id,
           },
           {
-            name: 'Benefits',
-            href: '/corporates/'+id+'/benefits',
+            name: 'Services',
+            href: '/corporates/'+corporate_id+'/services',
           },
           {
-            name: 'Create',
-            href: '/corporates/'+id+'/benefits/create',
+            name: service.name ?? '-',
+            href: '/corporates/'+corporate_id+'/services/'+service_code,
           },
         ]}
       />
@@ -168,71 +125,239 @@ export default function Divisions() {
       <Grid container spacing={2}>
         <Grid item xs={12}>
           <Card sx={{ p: 2 }}>
-            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
-              <Stack spacing={3}>
+            {/* <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}> */}
+            <Box sx={{ borderBottom: 1 }}>
+                <Stack>
 
-                <Typography variant="h6">Benefit Detail</Typography>
+                  <TableContainer sx={{ mb:4 }}>
+                    <Table sx={{ minWidth: 650 }} size="small">
+                      <TableHead>
+                        <TableRow>
+                          <TableCell colSpan={4} sx={{ py: 1 }} align="center">General Practitioner</TableCell>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        <TableRow>
+                          <TableCell colSpan={2}>External Doctor</TableCell>
+                          <TableCell colSpan={2}>Internal Doctor</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell>
+                            <FormControlLabel control={(
+                              <Checkbox 
+                              checked={service?.configurations?.gp_external_doctor_online == '1'} 
+                              onChange={(event) => {handleConfigChange(event, service)}} 
+                              name="gp_external_doctor_online" />
+                            )} 
+                              label="Online" />
+                          </TableCell>
+                          <TableCell>
+                            <FormControlLabel control={(
+                              <Checkbox 
+                              checked={service?.configurations?.gp_external_doctor_offline == '1'} 
+                              onChange={(event) => {handleConfigChange(event, service)}} 
+                              name="gp_external_doctor_offline" />
+                            )} 
+                              label="Offline" />
+                          </TableCell>
+                          <TableCell>
+                            <FormControlLabel control={(
+                              <Checkbox 
+                              checked={service?.configurations?.gp_internal_doctor_online == '1'} 
+                              onChange={(event) => {handleConfigChange(event, service)}} 
+                              name="gp_internal_doctor_online" />
+                            )} 
+                              label="Online" />
+                          </TableCell>
+                          <TableCell>
+                            <FormControlLabel control={(
+                              <Checkbox 
+                              checked={service?.configurations?.gp_internal_doctor_offline == '1'} 
+                              onChange={(event) => {handleConfigChange(event, service)}} 
+                              name="gp_internal_doctor_offline" />
+                            )} 
+                              label="Offline" />
+                          </TableCell>
+                        </TableRow>
+                      </TableBody>
+                    </Table>
+                  </TableContainer>
 
-                <RHFTextField name="name" label="Benefit Name" />
+                  <TableContainer sx={{ mb:4 }}>
+                    <Table sx={{ minWidth: 650 }} size="small">
+                      <TableHead>
+                        <TableRow>
+                          <TableCell colSpan={4} sx={{ py: 1 }} align="center">Specialist Practitioner</TableCell>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        <TableRow>
+                          <TableCell colSpan={2}>External Doctor</TableCell>
+                          <TableCell colSpan={2}>Internal Doctor</TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell>
+                            <FormControlLabel control={(
+                              <Checkbox 
+                              checked={service?.configurations?.sp_external_doctor_online == '1'} 
+                              onChange={(event) => {handleConfigChange(event, service)}} 
+                              name="sp_external_doctor_online" />
+                            )} 
+                              label="Online" />
+                          </TableCell>
+                          <TableCell>
+                            <FormControlLabel control={(
+                              <Checkbox 
+                              checked={service?.configurations?.sp_external_doctor_offline == '1'} 
+                              onChange={(event) => {handleConfigChange(event, service)}} 
+                              name="sp_external_doctor_offline" />
+                            )} 
+                              label="Offline" />
+                          </TableCell>
+                          <TableCell>
+                            <FormControlLabel control={(
+                              <Checkbox 
+                              checked={service?.configurations?.sp_internal_doctor_online == '1'} 
+                              onChange={(event) => {handleConfigChange(event, service)}} 
+                              name="sp_internal_doctor_online" />
+                            )} 
+                              label="Online" />
+                          </TableCell>
+                          <TableCell>
+                            <FormControlLabel control={(
+                              <Checkbox 
+                              checked={service?.configurations?.sp_internal_doctor_offline == '1'} 
+                              onChange={(event) => {handleConfigChange(event, service)}} 
+                              name="sp_internal_doctor_offline" />
+                            )} 
+                              label="Offline" />
+                          </TableCell>
+                        </TableRow>
+                        <TableRow>
+                          <TableCell colSpan={4}>
+                            <Typography onClick={() => { setSpecialityModal(true) }}>
+                              Specialities : ({service.selected_specialities ? Object.keys(service.selected_specialities).length : '0'})
+                            </Typography>
+                            <Typography>{service.selected_specialities ? '{'+Object.values(service.selected_specialities).join(', ')+'}' : ''}</Typography>
+                          </TableCell>
+                        </TableRow>
+                      </TableBody>
+                    </Table>
+                  </TableContainer>
 
-                <RHFTextField name="code" label="Benefit Code" />
+                  <Modal
+                    open={specialityModal}
+                    onClose={() => { setSpecialityModal(false) }}
+                    aria-labelledby="modal-modal-title"
+                    aria-describedby="modal-modal-description"
+                  >
+                    <Box sx={specialityModalStyle}>
+                      <Typography id="modal-modal-title" variant="h6" component="h2"  sx={{ pb: 4 }}>
+                        Specialities
+                      </Typography>
+                      <TableContainer component={Paper}>
+                        <Table sx={{ minWidth: 650 }} aria-label="simple table">
+                          <TableHead>
+                            <TableRow>
+                              <TableCell />
+                              <TableCell>Nama Spesialisasi</TableCell>
+                            </TableRow>
+                          </TableHead>
+                          <TableBody>
+                            {specialities.map((row) => (
+                              <TableRow
+                                key={row.name}
+                                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                              >
+                                <TableCell>
+                                  <Checkbox 
+                                    checked={ Object.keys(service.selected_specialities).includes(String(row.id)) } 
+                                    onChange={(event) => {handleToggleSpeciality(event, service, row)}} 
+                                    name="vitamins" />
+                                </TableCell>
+                                <TableCell component="th" scope="row">
+                                  {row.name}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </TableContainer>
+                    </Box>
+                  </Modal>
 
-                <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>
+                  <TableContainer sx={{ mb:4 }}>
+                    <Table sx={{ minWidth: 650 }} size="small">
+                      <TableHead>
+                        <TableRow>
+                          <TableCell colSpan={4} sx={{ py: 1 }} align="center">Medicine</TableCell>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        <TableRow>
+                          <TableCell width={'25%'}>
+                            <FormControlLabel control={(
+                              <Checkbox 
+                              checked={service?.configurations?.vitamins == '1'} 
+                              onChange={(event) => {handleConfigChange(event, service)}} 
+                              name="vitamins" />
+                            )} 
+                              label="Vitamins" />
+                          </TableCell>
+                          <TableCell width={'25%'}>
+                            <FormControlLabel control={(
+                                <Checkbox 
+                                checked={service?.configurations?.delivery_fee == '1'} 
+                                onChange={(event) => {handleConfigChange(event, service)}} 
+                                name="delivery_fee" />
+                              )} 
+                              label="Delivery Fee" />
+                          </TableCell>
+                          <TableCell width={'25%'}/>
+                          <TableCell width={'25%'}/>
+                        </TableRow>
+                      </TableBody>
+                    </Table>
+                  </TableContainer>
+
+                  <TableContainer sx={{ mb:4 }}>
+                    <Table sx={{ minWidth: 650 }} size="small">
+                      <TableHead>
+                        <TableRow>
+                          <TableCell colSpan={4} sx={{ py: 1 }}  align="center">Free Admin Fee</TableCell>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        <TableRow>
+                          <TableCell width={'25%'}>
+                            <FormControlLabel control={(
+                              <Checkbox 
+                              checked={service?.configurations?.general_practitioner_fee == '1'} 
+                              onChange={(event) => {handleConfigChange(event, service)}} 
+                              name="general_practitioner_fee" />
+                            )} 
+                              label="General Practitioner" />
+                          </TableCell>
+                          <TableCell width={'25%'}>
+                            <FormControlLabel control={(
+                                <Checkbox 
+                                checked={service?.configurations?.specialist_practitioner_fee == '1'} 
+                                onChange={(event) => {handleConfigChange(event, service)}} 
+                                name="specialist_practitioner_fee" />
+                                )} 
+                              label="Specialist Practitioner" />
+                          </TableCell>
+                          <TableCell width={'25%'}/>
+                          <TableCell width={'25%'}/>
+                        </TableRow>
+                      </TableBody>
+                    </Table>
+                  </TableContainer>
 
 
-                  <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>
+              </Box>
+            {/* </FormProvider> */}
           </Card>
         </Grid>
       </Grid>

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

@@ -9,7 +9,7 @@ import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
 import React, { ChangeEvent, Component, useEffect, useMemo, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { Link, useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
@@ -19,12 +19,34 @@ import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { RHFCheckbox } from '../../../components/hook-form';
 import { CheckBox } from '@mui/icons-material';
+import { CorporateService } from '../../../@types/corporates';
 
 export default function List() {
   const { themeStretch } = useSettings();
   const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const [importResult, setImportResult] = useState(null);
+
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = 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
+  });
+
   
   function SearchInput(props: any) {
      // SEARCH
@@ -68,9 +90,9 @@ export default function List() {
   }
 
   // Called on every row to map the data to the columns
-  function createData( icd: Icd ): Icd {
+  function createData( corporateService: CorporateService ): CorporateService {
     return {
-      ...icd,
+      ...corporateService,
     }
   }
 
@@ -82,17 +104,35 @@ export default function List() {
     const handleConfigChange = (event: ChangeEvent<HTMLInputElement>, service: any) => {
       console.log( event.target.name ,event.target.checked, service);
 
-      axios.post(`/corporates/${corporate_id}/services`, { 
+      axios.put(`/corporates/${corporate_id}/services`, { 
         service_code: service.service_code,
         config_name: event.target.name,
         config_value: event.target.checked
        })
     }
+    
+    const handleActivate = (service: any, status: string) => {
+      axios.put(`/corporates/${corporate_id}/services/${service.service_code}`, { 
+        service_code: service.service_code,
+        status
+      }).then((res) => {
+        setDataTableData({
+          ...dataTableData,
+          data: dataTableData.data.map((service) => {
+            let updatedService = service
+            if (row.id == service.id) {
+              updatedService.status = res.data.status
+            }
+            return updatedService
+          })
+        })
+      })
+    }
 
     return (
       <React.Fragment>
         <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
+          {/* <TableCell>
             <IconButton
               aria-label="expand row"
               size="small"
@@ -100,14 +140,20 @@ export default function List() {
             >
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
-          </TableCell>
+          </TableCell> */}
+          <TableCell align="left">{row.service_code}</TableCell>
           <TableCell align="left">{row.name}</TableCell>
 
-          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
-          <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell>
+          <TableCell align="right">
+            {( row.status == 'active' && <Button variant="outlined" color="success" size="small" onClick={() => { handleActivate(row, 'inactive') }}>Active</Button> )}
+            {( row.status == 'inactive' && <Button variant="outlined" color="error" size="small" onClick={() => { handleActivate(row, 'active') }}>Inactive</Button> )}
+          </TableCell>
+          <TableCell align="right">
+            <Link to={`/corporates/${corporate_id}/services/${row.service_code}`}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
+            </TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
-        <TableRow>
+        {false && <TableRow>
           <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
             <Collapse in={open} timeout="auto" unmountOnExit>
               <Box sx={{ borderBottom: 1 }}>
@@ -223,29 +269,11 @@ export default function List() {
             </Collapse>
           </TableCell>
         </TableRow>
+        }
       </React.Fragment>
     );
   }
 
-  // Dummy Default Data
-  const [dataTableIsLoading, setDataTableLoading] = useState(true);
-  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
-  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
-  const [dataTableData, setDataTableData] = 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 (appliedFilter : any | null = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
@@ -423,7 +451,8 @@ export default function List() {
           <Table aria-label="collapsible table">
             <TableBody>
               <TableRow>
-                <TableCell style={headStyle} align="left" width={10}/>
+                {/* <TableCell style={headStyle} align="left" width={10}/> */}
+                <TableCell style={headStyle} align="left">Code</TableCell>
                 <TableCell style={headStyle} align="left">Service</TableCell>
 
                 <TableCell style={headStyle} align="right" width={30}>Status</TableCell>

frontend/dashboard/src/routes/index.tsx

@@ -118,6 +118,10 @@ export default function Router() {
           path: 'corporates/:corporate_id/services',
           element: <CorporateServices />,
         },
+        {
+          path: 'corporates/:corporate_id/services/:service_code',
+          element: <CorporateServicesCreate />,
+        },
 
         {
           path: 'corporates/:corporate_id/plans/create',
@@ -173,6 +177,16 @@ export default function Router() {
           element: <DiagnosisExclusions />,
         },
 
+        {
+          path: 'corporates/:corporate_id/hospitals',
+          element: <CorporateHospitals />,
+        },
+
+        {
+          path: 'corporates/:corporate_id/claim-history',
+          element: <CorporateClaimHistories />,
+        },
+
         {
           path: 'master/diagnosis',
           element: <MasterDiagnosis />,
@@ -269,3 +283,7 @@ const MasterFormularium = Loadable(lazy(() => import('../pages/Master/Formulariu
 const MasterFormulariumCreate = Loadable(lazy(() => import('../pages/Master/Formularium/Create')));
 
 const CorporateServices = Loadable(lazy(() => import('../pages/Corporates/Services/Index')));
+const CorporateServicesCreate = Loadable(lazy(() => import('../pages/Corporates/Services/Create')));
+
+const CorporateHospitals = Loadable(lazy(() => import('../pages/Corporates/Hospital/Index')));
+const CorporateClaimHistories = Loadable(lazy(() => import('../pages/Corporates/ClaimHistory/Index')));