Update Formularium

2022-08-15 12:42:49 +07:00
parent 8319331d26
commit a3b53ea334
65 changed files with 3218 additions and 52 deletions
--- a/frontend/dashboard/package.json
+++ b/frontend/dashboard/package.json
@@ -7,7 +7,7 @@
  "scripts": {
    "lint": "eslint --ext .ts,.tsx ./src",
    "lint:fix": "eslint --fix --ext .ts,.tsx ./src",
-    "start": "vite",
+    "start": "vite --port=3000",
    "build": "vite build --mode production && cp .htaccess build/.htaccess && rm -f -r ../../public/dashboard &&  cp -r build ../../public/dashboard",
    "serve": "vite preview",
    "clear-all": "rm -rf build node_modules",
@@ -76,7 +76,7 @@
    "simplebar-react": "^2.4.1",
    "stylis": "^4.1.1",
    "stylis-plugin-rtl": "^2.1.1",
-    "vite": "^2.9.14",
+    "vite": "^3.0.4",
    "vite-plugin-svgr": "^2.2.1",
    "yup": "^0.32.11"
  },
--- a/frontend/dashboard/pnpm-lock.yaml
+++ b/frontend/dashboard/pnpm-lock.yaml
@@ -66,7 +66,7 @@ specifiers:
  stylis: ^4.1.1
  stylis-plugin-rtl: ^2.1.1
  typescript: ^4.7.4
-  vite: ^2.9.14
+  vite: ^3.0.4
  vite-plugin-pwa: ^0.12.3
  vite-plugin-svgr: ^2.2.1
  yup: ^0.32.11
@@ -111,8 +111,8 @@ dependencies:
  simplebar-react: 2.4.1_sfoxds7t5ydpegc3knd667wn6m
  stylis: 4.1.1
  stylis-plugin-rtl: 2.1.1_stylis@4.1.1
-  vite: 2.9.14
-  vite-plugin-svgr: 2.2.1_vite@2.9.14
+  vite: 3.0.4
+  vite-plugin-svgr: 2.2.1_vite@3.0.4
  yup: 0.32.11

 devDependencies:
@@ -142,7 +142,7 @@ devDependencies:
  eslint-plugin-react-hooks: 4.3.0_eslint@8.20.0
  prettier: 2.7.1
  typescript: 4.7.4
-  vite-plugin-pwa: 0.12.3_vite@2.9.14
+  vite-plugin-pwa: 0.12.3_vite@3.0.4

 packages:

@@ -5626,7 +5626,7 @@ packages:
    resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==}
    dev: true

-  /vite-plugin-pwa/0.12.3_vite@2.9.14:
+  /vite-plugin-pwa/0.12.3_vite@3.0.4:
    resolution: {integrity: sha512-gmYdIVXpmBuNjzbJFPZFzxWYrX4lHqwMAlOtjmXBbxApiHjx9QPXKQPJjSpeTeosLKvVbNcKSAAhfxMda0QVNQ==}
    peerDependencies:
      vite: ^2.0.0 || ^3.0.0-0
@@ -5635,7 +5635,7 @@ packages:
      fast-glob: 3.2.11
      pretty-bytes: 6.0.0
      rollup: 2.77.0
-      vite: 2.9.14
+      vite: 3.0.4
      workbox-build: 6.5.3
      workbox-window: 6.5.3
    transitivePeerDependencies:
@@ -5643,26 +5643,27 @@ packages:
      - supports-color
    dev: true

-  /vite-plugin-svgr/2.2.1_vite@2.9.14:
+  /vite-plugin-svgr/2.2.1_vite@3.0.4:
    resolution: {integrity: sha512-+EqwahbwjETJH/ssA/66dNYyKN1cO0AStq96MuXmq5maU7AePBMf2lDKfQna49tJZAjtRz+R899BWCsUUP45Fg==}
    peerDependencies:
      vite: ^2.6.0 || 3
    dependencies:
      '@rollup/pluginutils': 4.2.1
      '@svgr/core': 6.3.1
-      vite: 2.9.14
+      vite: 3.0.4
    transitivePeerDependencies:
      - supports-color
    dev: false

-  /vite/2.9.14:
-    resolution: {integrity: sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw==}
-    engines: {node: '>=12.2.0'}
+  /vite/3.0.4:
+    resolution: {integrity: sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
    hasBin: true
    peerDependencies:
      less: '*'
      sass: '*'
      stylus: '*'
+      terser: ^5.4.0
    peerDependenciesMeta:
      less:
        optional: true
@@ -5670,6 +5671,8 @@ packages:
        optional: true
      stylus:
        optional: true
+      terser:
+        optional: true
    dependencies:
      esbuild: 0.14.49
      postcss: 8.4.14
--- a/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
+++ b/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
@@ -54,8 +54,9 @@ const navConfig = [
        children: [
          { title: 'Corporate', path: '/corporates' },
          { title: 'Corporate Create', path: '/corporates/create' },
-          { title: 'Formularium', path: '/formularium' },
-          { title: 'Diagnosis Library (ICD-X)', path: '/masterdiagnosis' },
+          { title: 'Formularium', path: '/master/formularium' },
+          { title: 'Obat', path: '/master/drugs' },
+          { title: 'Diagnosis Library (ICD-X)', path: '/master/diagnosis' },
          { title: 'Hospitals', path: '/hospitals' },
        ],
      },
--- a/frontend/dashboard/src/pages/Corporates/Form.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Form.tsx
@@ -358,7 +358,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
        
        <Grid item xs={12} md={4}>
          <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
-            {!isEdit ? 'Create Product' : 'Save Changes'}
+            {!isEdit ? 'Save New Corporate' : 'Save Corporate'}
          </LoadingButton>
        </Grid>
      </Grid>
--- a/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx
@@ -0,0 +1,43 @@
+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 List from "./List";
+
+
+
+export default function CorporateFormularium() {
+  const { themeStretch } = useSettings();
+
+  const { corporate_id } = useParams();
+
+  return (
+    <Page title="Division">
+
+      <HeaderBreadcrumbs
+        heading={'Division'}
+        links={[
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+corporate_id,
+          },
+          {
+            name: 'Division',
+            href: '/corporates/'+corporate_id+'/divisions',
+          },
+        ]}
+      />
+
+      <Card>
+        <CorporateTabNavigations position={'services'} />
+        <List />
+      </Card>
+    </Page>
+  );
+}
--- a/frontend/dashboard/src/pages/Corporates/Formularium/List.tsx
+++ b/frontend/dashboard/src/pages/Corporates/Formularium/List.tsx
@@ -0,0 +1,237 @@
+// @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';
+import { enqueueSnackbar } from 'notistack';
+
+
+export default function PlanList() {
+  const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  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
+    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,
+    }
+  }
+
+  const handleInactiveAction = (formularium : any) => {
+    axios
+      .put('/corporates/'+corporate_id+'/formulariums/'+formularium.id+'/activate')
+      .then(() => {
+        setDataTableData(
+          { 
+            ...dataTableData, 
+            data: dataTableData.data.map((item: any) => {
+              if (item.id === formularium.id) {
+                return {
+                  ...item,
+                  status: 'active'
+                }
+              }
+  
+              return item;
+            })
+        })
+      })
+      .catch((error) => {
+        enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
+      })
+  }
+
+  const handleActiveAction = (formularium : any) => {
+    axios
+      .put('/corporates/'+corporate_id+'/formulariums/'+formularium.id+'/deactivate')
+      .then(() => {
+        setDataTableData(
+          { 
+            ...dataTableData, 
+            data: dataTableData.data.map((item: any) => {
+              if (item.id === formularium.id) {
+                return {
+                  ...item,
+                  status: 'inactive'
+                }
+              }
+
+              return item;
+            })
+        })
+      })
+      .catch((error) => {
+        enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
+      })
+  }
+
+  // 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 align="left">{row.id}</TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="left">{row.items_count}</TableCell>
+          <TableCell align="right">{( row.status == 'active' ? 
+              <Button variant="outlined" onClick={() => { handleActiveAction(row) }} color="success" size="small">Active</Button> : 
+              <Button variant="outlined" onClick={() => { handleInactiveAction(row) }} color="error" size="small">Tidak Digunakan</Button>
+            )}</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>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  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+'/formulariums', { 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}/>
+        </Stack>
+
+        <Card>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left" width={50}>#</TableCell>
+                <TableCell style={headStyle} align="left">Code</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="left">Total Item</TableCell>
+                <TableCell style={headStyle} align="right">Status</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>
+  );
+}
--- a/frontend/dashboard/src/pages/Master/Drug/Create.tsx
+++ b/frontend/dashboard/src/pages/Master/Drug/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 { corporate_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>
+  );
+}
--- a/frontend/dashboard/src/pages/Master/Drug/Index.tsx
+++ b/frontend/dashboard/src/pages/Master/Drug/Index.tsx
@@ -0,0 +1,38 @@
+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 List from "./List";
+
+
+
+export default function Drugs() {
+  const { themeStretch } = useSettings();
+
+  const { corporate_id } = useParams();
+
+  const pageTitle = 'Drug';
+  return (
+    <Page title={ pageTitle }>
+
+      <HeaderBreadcrumbs
+        heading={ pageTitle }
+        links={[
+          {
+            name: 'Master',
+            href: '/master',
+          },
+          {
+            name: 'Drug',
+            href: '/master/drugs',
+          },
+        ]}
+      />
+      
+      <Card>
+        <List />
+      </Card>
+    </Page>
+  );
+}
--- a/frontend/dashboard/src/pages/Master/Drug/List.tsx
+++ b/frontend/dashboard/src/pages/Master/Drug/List.tsx
@@ -0,0 +1,310 @@
+// @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, Pagination } 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 { useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import { Icd } from '../../../@types/diagnosis';
+import BasePagination from '../../../components/BasePagination';
+
+export default function List() {
+  const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [importResult, setImportResult] = useState(null);
+  
+  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 handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  { // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
+    );
+  }
+
+  function ImportForm(props: any) {
+    // IMPORT
+    // Create Button Menu
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+    const importForm = useRef<HTMLInputElement>(null) 
+    const [currentImportFileName, setCurrentImportFileName] = useState(null)
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleImportButton = () => {
+      if (importForm?.current) {
+        handleClose();
+        importForm.current ? importForm.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected')
+      }
+    }
+
+    const handleCancelImportButton = () => {
+      importForm.current.value = "";
+      importForm.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 (importForm.current?.files.length) {
+        const formData = new FormData();
+        formData.append("file", importForm.current?.files[0])
+        axios.post(`corporates/${corporate_id}/import-plan-benefit`, formData )
+          .then(response => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data)
+            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+          })
+          .catch(response => {
+            alert('Looks like something went wrong. Please check your data and try again. ' + response.message)
+          })
+      } else {
+        alert('No File Selected')
+      }
+    }
+    
+    return (
+      <div>
+        <input type='file' id='file' ref={importForm} 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 }}>
+          <SearchInput onSearch={applyFilter}/>
+          {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+          <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>
+        )}
+        {( importResult && 
+        <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
+          <Box sx={{ color: "text.secondary" }}>Last Import Result Report : <a href={importResult.result_file?.url ?? "#"}>{importResult.result_file?.name ?? "-"}</a></Box>
+        </Stack>
+        )}
+      </div>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData( icd: Icd ): Icd {
+    return {
+      ...icd,
+    }
+  }
+
+  // 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.type}</TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="left">{row.version}</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>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ borderBottom: 1 }}>
+                <Typography variant="body2" gutterBottom component="div">
+                  Description : {row.description}
+                </Typography>
+              </Box>
+            </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 [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter : any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/master/drugs', { params: filter });
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: string) => {
+    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>
+      <ImportForm />
+
+        <Card>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left" />
+                <TableCell style={headStyle} align="left">Type</TableCell>
+                <TableCell style={headStyle} align="left">Code</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="left">Version</TableCell>
+                <TableCell style={headStyle} align="right">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.id} row={row} />
+                    ))}
+                  </TableBody>
+                )
+            )}
+          </Table>
+        </TableContainer>
+        
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+        </Card>
+    </Stack>
+  );
+}
--- a/frontend/dashboard/src/pages/Master/Formularium/Create.tsx
+++ b/frontend/dashboard/src/pages/Master/Formularium/Create.tsx
@@ -0,0 +1,86 @@
+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 { useMemo, useState } from 'react';
+import Form from "./Form";
+
+
+export default function Divisions() {
+  const { themeStretch } = useSettings();
+
+  const [isEdit, setIsEdit] = useState(false);
+
+  const [currentFormularium, setCurrentFormularium] = useState({});
+
+  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 pageTitle = 'Create Formularium';
+  return (
+    <Page title={pageTitle}>
+
+      <HeaderBreadcrumbs
+        heading={pageTitle}
+        links={[
+          {
+            name: 'Master',
+            href: '/master',
+          },
+          {
+            name: 'Formularium',
+            href: '/master/formularium/',
+          },
+          {
+            name: 'Create',
+            href: '/master/formularium/create/',
+          },
+        ]}
+      />
+      
+
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Card sx={{ p: 2 }}>
+            <Form isSubmitting={isSubmitting} isEdit={isEdit} currentFormularium={currentFormularium} />
+          </Card>
+        </Grid>
+      </Grid>
+    </Page>
+  );
+}
--- a/frontend/dashboard/src/pages/Master/Formularium/Form.tsx
+++ b/frontend/dashboard/src/pages/Master/Formularium/Form.tsx
@@ -0,0 +1,239 @@
+import * as Yup from 'yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate } from 'react-router-dom';
+import { useCallback, useEffect, useMemo, useRef, 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 {
+  Box,
+  Button,
+  ButtonGroup,
+  Card,
+  FormHelperText,
+  Grid,
+  Stack,
+  Typography,
+} from '@mui/material';
+
+import CancelIcon from '@mui/icons-material/Cancel';
+
+// components
+import {
+  FormProvider,
+  RHFTextField,
+  RHFRadioGroup,
+  RHFUploadAvatar,
+  RHFSwitch,
+  RHFEditor,
+  RHFDatepicker,
+  RHFMultiCheckbox,
+  RHFCheckbox,
+  RHFCustomMultiCheckbox,
+} from '../../../components/hook-form';
+import { Corporate } from '../../../@types/corporates';
+import axios from '../../../utils/axios';
+import { fCurrency } from '../../../utils/formatNumber';
+
+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;
+  currentFormularium?: Corporate;
+};
+
+export default function FormulariumForm({ isEdit, currentFormularium }: 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'),
+    // file: Yup.boolean().required('Corporate Status is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      code: currentFormularium?.code || '',
+      name: currentFormularium?.name || '',
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentFormularium]
+  );
+
+  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 && currentFormularium) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEdit, currentFormularium]);
+
+  const onSubmit = async (data: FormValuesProps) => {
+    try {
+      if (!isEdit) {
+        const response = await axios.post('/master/formulariums', data);
+      } else {
+        const response = await axios.put('/master/formulariums/' + currentFormularium?.id ?? '', data);
+      }
+      reset();
+      enqueueSnackbar(!isEdit ? 'Formularium Created Successfully!' : 'Formularium Udpated Successfully!', { variant: 'success' });
+      navigate('/master/formularium');
+    } 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 ascent = document?.querySelector("ascent");
+    if (ascent != null) {
+      ascent.innerHTML = "";
+    }
+  };
+
+  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);
+  };
+
+  const linking_rules_checkbox_name = "linking_rules"
+  const linking_tools = [
+    {
+      "value" : "nrik",
+      "label" : "No. KTP"
+    },
+    {
+      "value" : "nik",
+      "label" : "Nomor Induk Karyawan (NIK)"
+    },
+    {
+      "value" : "member_id",
+      "label" : "Member ID"
+    },
+    {
+      "value" : "phone",
+      "label" : "Nomor Telepon"
+    },
+    {
+      "value" : "email",
+      "label" : "E-Mail"
+    },
+  ]
+  
+
+  const importForm = useRef<HTMLInputElement>(null) 
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [currentImportFileName, setCurrentImportFileName] = useState<string|null>(null);
+  
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleImportButton = () => {
+    if (importForm?.current) {
+      handleClose();
+      importForm.current ? importForm.current.click() : console.log('No File selected');
+    } else {
+      alert('No file selected')
+    }
+  }
+
+  const handleCancelImportButton = () => {
+    importForm.current.value = "";
+    importForm.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);
+    }
+  }
+
+
+  return (
+
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      <Stack spacing={3}>
+
+        <Typography variant="h6">Formularium Detail</Typography>
+
+        <div>
+        <RHFTextField name="code" label="Code" />
+        {(!(currentFormularium?.id) && <Typography variant="caption">Will be generated if empty</Typography>)}
+        </div>
+
+        <RHFTextField name="name" label="Name" />
+
+        <Typography variant="h6">Formularium Drug List Import</Typography>
+
+        <input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
+        <ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
+            <Button onClick={handleImportButton} fullWidth>{currentImportFileName ?? "No File Selected"}</Button>
+            {(currentImportFileName && <Button onClick={handleCancelImportButton} size="small" fullWidth={false} sx={{ p: 1.8 }}><CancelIcon color="error"/></Button>)}
+        </ButtonGroup>
+
+        <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+          {!isEdit ? 'Save New Corporate' : 'Save Update'}
+        </LoadingButton>
+
+      </Stack>
+    </FormProvider>
+  );
+};
--- a/frontend/dashboard/src/pages/Master/Formularium/Index.tsx
+++ b/frontend/dashboard/src/pages/Master/Formularium/Index.tsx
@@ -0,0 +1,38 @@
+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 List from "./List";
+
+
+
+export default function Drugs() {
+  const { themeStretch } = useSettings();
+
+  const { corporate_id } = useParams();
+
+  const pageTitle = 'Formularium';
+  return (
+    <Page title={ pageTitle }>
+
+      <HeaderBreadcrumbs
+        heading={ pageTitle }
+        links={[
+          {
+            name: 'Master',
+            href: '/master',
+          },
+          {
+            name: 'Formularium',
+            href: '/master/formulariums',
+          },
+        ]}
+      />
+      
+      <Card>
+        <List />
+      </Card>
+    </Page>
+  );
+}
--- a/frontend/dashboard/src/pages/Master/Formularium/List.tsx
+++ b/frontend/dashboard/src/pages/Master/Formularium/List.tsx
@@ -0,0 +1,310 @@
+// @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, Pagination } 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 { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import { Icd } from '../../../@types/diagnosis';
+import BasePagination from '../../../components/BasePagination';
+
+export default function List() {
+  const navigate = useNavigate();
+  const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [importResult, setImportResult] = useState(null);
+  
+  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 handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  { // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
+    );
+  }
+
+  function ImportForm(props: any) {
+    // IMPORT
+    // Create Button Menu
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+    const importForm = useRef<HTMLInputElement>(null) 
+    const [currentImportFileName, setCurrentImportFileName] = useState(null)
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleImportButton = () => {
+      if (importForm?.current) {
+        handleClose();
+        importForm.current ? importForm.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected')
+      }
+    }
+
+    const handleCancelImportButton = () => {
+      importForm.current.value = "";
+      importForm.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 (importForm.current?.files.length) {
+        const formData = new FormData();
+        formData.append("file", importForm.current?.files[0])
+        axios.post(`master/formularium/import`, formData )
+          .then(response => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data)
+            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+          })
+          .catch(response => {
+            alert('Looks like something went wrong. Please check your data and try again. ' + response.message)
+          })
+      } else {
+        alert('No File Selected')
+      }
+    }
+    
+    return (
+      <div>
+        <input type='file' id='file' ref={importForm} 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 }}>
+          <SearchInput onSearch={applyFilter}/>
+          {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+          <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}
+            >
+              Create
+            </Button>
+            <Menu
+              id="import-button"
+              anchorEl={anchorEl}
+              open={createMenu}
+              onClose={handleClose}
+              MenuListProps={{
+                'aria-labelledby': 'basic-button',
+              }}
+            >
+              <MenuItem onClick={() => {navigate('/master/formularium/create')} }>Create</MenuItem>
+              <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>
+        )}
+        {( importResult && 
+        <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
+          <Box sx={{ color: "text.secondary" }}>Last Import Result Report : <a href={importResult.result_file?.url ?? "#"}>{importResult.result_file?.name ?? "-"}</a></Box>
+        </Stack>
+        )}
+      </div>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData( icd: Icd ): Icd {
+    return {
+      ...icd,
+    }
+  }
+
+  // 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">{row.items_count}</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>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ borderBottom: 1 }}>
+                <Typography variant="body2" gutterBottom component="div">
+                  Description : {row.description}
+                </Typography>
+              </Box>
+            </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 [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter : any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/master/formulariums', { params: filter });
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: string) => {
+    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>
+      <ImportForm />
+
+        <Card>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left" />
+                <TableCell style={headStyle} align="left">Code</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="left">Total Item</TableCell>
+                <TableCell style={headStyle} align="right">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.id} row={row} />
+                    ))}
+                  </TableBody>
+                )
+            )}
+          </Table>
+        </TableContainer>
+        
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+        </Card>
+    </Stack>
+  );
+}
--- a/frontend/dashboard/src/routes/index.tsx
+++ b/frontend/dashboard/src/routes/index.tsx
@@ -163,6 +163,11 @@ export default function Router() {
          element: <CorporateBenefitsCreate />,
        },

+        {
+          path: 'corporates/:corporate_id/formularium',
+          element: <CorporateFormularium />,
+        },
+
        {
          path: 'corporates/:corporate_id/diagnosis-exclusions',
          element: <DiagnosisExclusions />,
@@ -172,6 +177,20 @@ export default function Router() {
          path: 'master/diagnosis',
          element: <MasterDiagnosis />,
        },
+
+        {
+          path: 'master/drugs',
+          element: <MasterDrug />,
+        },
+
+        {
+          path: 'master/formularium',
+          element: <MasterFormularium />,
+        },
+        {
+          path: 'master/formularium/create',
+          element: <MasterFormulariumCreate />,
+        },
      ]
    },
    // {
@@ -240,6 +259,13 @@ const Plans = Loadable(lazy(() => import('../pages/Corporates/Plan/Index')));

 const DiagnosisExclusions = Loadable(lazy(() => import('../pages/Corporates/DiagnosisExclusion/Index')));

+const CorporateFormularium = Loadable(lazy(() => import('../pages/Corporates/Formularium/Index')));
+
 const MasterDiagnosis = Loadable(lazy(() => import('../pages/Master/Diagnosis/Index')));

+const MasterDrug = Loadable(lazy(() => import('../pages/Master/Drug/Index')));
+
+const MasterFormularium = Loadable(lazy(() => import('../pages/Master/Formularium/Index')));
+const MasterFormulariumCreate = Loadable(lazy(() => import('../pages/Master/Formularium/Create')));
+
 const CorporateServices = Loadable(lazy(() => import('../pages/Corporates/Services/Index')));