Merge branch 'staging' of itcorp.primaya.id:rajif/aso into staging

Modules/Internal/Http/Controllers/Api/DrugController.php

@@ -6,6 +6,8 @@ use App\Models\Drug;
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
+use App\Helpers\Helper;
+use Maatwebsite\Excel\Facades\Excel;
 
 class DrugController extends Controller
 {
@@ -15,8 +17,11 @@ class DrugController extends Controller
      */
     public function index(Request $request)
     {
-        $drugs = Drug::withTrashed()->filter($request->toArray())->paginate();
+        $drugs = Drug::query()
-
+            ->filter($request->all())
+            ->orderBy('id', 'DESC')
+            ->paginate(0)
+            ->appends($request->all());
         return $drugs;
     }
 
@@ -79,4 +84,110 @@ class DrugController extends Controller
     {
         //
     }
+
+    public function activation(Request $request, $drug_id)
+    {
+        $request->validate([
+            'active' => 'required',
+            'reason' => 'required',
+        ]);
+
+        $drug = Drug::findOrFail($drug_id);
+        $drug->active = $request->active;
+        $drug->reason = $request->reason;
+
+        if ($drug->save()) {
+            return response()->json([
+                'hostpital' => $drug,
+                'message' => 'Status Updated Successfully'
+            ]);
+        }
+    }
+    public function downloadTemplate() 
+    {
+        return Helper::responseJson([
+            'file_name' => "Template - Drugs.xlsx",
+            "file_url" => url('files/Template - Drugs.xlsx')
+        ]);
+    }
+    public function import(Request $request)
+    {
+        if ($request->hasFile('file')) {
+            $file = $request->file('file');
+            $data = Excel::toArray([], $file);
+
+            $processedData = $this->processCategoryNames($data);
+
+            $importedRows = 0;
+            $failedRows = [];
+
+            foreach ($processedData as $row) {
+                try {
+                    Drug::create(
+                        [
+                            'name' => $row['name'],
+                            'code' => $row['code'],
+                            'generic_name' => $row['generic_name'],
+                            'description' => $row['description'],
+                            'mims_class' => $row['mims_class'],
+                            'indications' => $row['indications'],
+                            'atc_code' => $row['atc_code'],
+                            'segmentation' => $row['segmentation'],
+                            'type' => $row['type'],
+                            'dosage' => $row['dosage'],
+                            'remark' => $row['remark'],
+                        ]
+                    );
+                    $importedRows++;
+                } catch (\Exception $e) {
+                    $failedRows[] = $row;
+                }
+            }
+
+            $response = [
+                'message' => 'File uploaded and data saved to database!',
+                'data' => [
+                    'total_success_row' => $importedRows,
+                    'total_failed_row' => count($failedRows),
+                    'failed_rows' => $failedRows,
+                ],
+            ];
+
+            return response()->json($response);
+        }
+
+        return response()->json(['error' => 'No file uploaded.']);
+    }
+
+    private function processCategoryNames($data)
+    {
+        $header = [];
+        $row = [];
+        for ($i = 1; $i < count($data[0]); $i++) {
+            $row[] = $data[0][$i];
+            $header[] = $data[0][0];
+        }
+        
+        $filed = [];
+        foreach ($header[0] as $value)
+        {
+            $modelColumn = strtolower(preg_replace('/\s+/', '_', trim($value)));
+            $modelColumn = str_replace(['*', ' '], '', $modelColumn);
+            if($modelColumn)
+            {
+                $filed[] = $modelColumn;
+            }
+        }
+        
+        $result = [];
+        foreach ($row as $subarray) {
+            $trimmedSubarray = [];
+            for ($i = 0; $i < count($filed); $i++) {
+                $trimmedSubarray[$filed[$i]] = $subarray[$i] ? $subarray[$i] : null;
+            }
+        
+            $result[] = $trimmedSubarray;
+        }
+        return $result;
+    }    
 }

Modules/Internal/Routes/api.php

@@ -173,6 +173,9 @@ Route::prefix('internal')->group(function () {
         Route::put('master/diagnosis/{diagnosis_template_id}/activation', [DiagnosisController::class, 'activation']);
 
         Route::get('master/drugs', [DrugController::class, 'index']);
+        Route::put('master/drugs/{drug_id}/activation', [DrugController::class, 'activation']);
+        Route::get('master/drugs/download-template', [DrugController::class, 'downloadTemplate']);
+        Route::post('master/drugs/import', [DrugController::class, 'import']);
 
 
         Route::get('members', [MemberController::class, 'index']);

app/Models/Drug.php

@@ -25,7 +25,8 @@ class Drug extends Model
         'dosage',
         'remark',
         'selling_unit_id',
-        'status'
+        'status',
+        'active',
     ];
 
     public function categories()

database/migrations/2023_10_23_114257_add_column_active_to_drugs.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('drugs', function (Blueprint $table) {
+            $table->text('reason')->nullable()->after('status');
+            $table->tinyInteger('active')->default(1)->after('reason');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('drugs', function (Blueprint $table) {
+            $table->dropColumn('reason');
+            $table->dropColumn('active');
+        });
+    }
+};

frontend/dashboard/.env.development

@@ -4,4 +4,4 @@ PORT=8000
 
 REACT_APP_HOST_API_URL="http://lms.test"
 
-VITE_API_URL="http://127.0.0.1:8000/api/internal"
+VITE_API_URL="https://aso-api.linksehat.dev/api/internal"

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

@@ -30,6 +30,7 @@ export type Hospital = {
   corporate_id: number;
   code: string;
   name?: string;
+  active: number;
 }
 
 export type Employee = {
@@ -215,4 +216,4 @@ export type MasterExclusion = {
 
 export type CorporateId = {
   corporate_id?: number
-}
+}

frontend/dashboard/src/@types/pharmacy-and-delivery-managements.ts

@@ -0,0 +1,8 @@
+export type Drug = {
+    id: number;
+    type: string;
+    code: string;
+    name: string;
+    version:string;
+    active: number;
+}

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

@@ -42,6 +42,7 @@ const navConfig = [
       {
         title: 'PHARMACY & DELIVERY MANAGEMENT',
         children: [
+          { title: 'Drug', path: '/master/drugs'},
           { title: 'Inventory', path: '/inventory' },
           { title: 'Delivery Services', path: '/delivery' },
         ],
@@ -53,7 +54,6 @@ const navConfig = [
           { title: 'Corporate', path: '/corporates' },
           // { title: 'Corporate Create', path: '/corporates/create' },
           { title: 'Formularium', path: '/master/formularium-template' },
-          { title: 'Obat', path: '/master/drugs' },
           { title: 'Master ICD-10 Diagnosis', path: '/master/diagnosis-template' },
           { title: 'Hospitals', path: '/hospitals' },
         ],

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

@@ -61,7 +61,7 @@ export default function CorporateTabNavigations({ position }: Props) {
       label: 'Hospital',
     },
     {
-      path: 'formularium',
+      path: 'formulariums',
       label: 'Formularium',
     },
     // {

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

@@ -1,10 +1,10 @@
-import { Card, Grid } from '@mui/material';
+import { Card, Grid, Container } 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';
+import List from './New/List';
 
 import { useContext, useEffect, useState } from 'react';
 import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
@@ -24,9 +24,9 @@ export default function CorporateFormularium() {
   }, [configuredCorporateContext]);
 
   return (
-    <Page title="Formularium">
+    <Page title="Corportae Formularium">
       <HeaderBreadcrumbs
-        heading={'Formularium'}
+        heading={'Corporate Formularium'}
         links={[
           {
             name: 'Corporates',
@@ -38,7 +38,7 @@ export default function CorporateFormularium() {
           },
           {
             name: 'Formularium',
-            href: '/corporates/' + corporate_id + '/formularium',
+            href: '/corporates/' + corporate_id + '/formulariums',
           },
         ]}
       />

frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryDetail.tsx

@@ -0,0 +1,69 @@
+// @mui
+import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Grid, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
+import { LoadingButton } from "@mui/lab";
+import { CachedOutlined, FindInPageOutlined } from '@mui/icons-material';
+// 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';
+import Label from '@/components/Label';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import InfoDetail from "./InfoDetail";
+import { DetailCorpFormularium } from "./Types";
+import DialogUpdateStatus from '../../DialogUpdateStatus';
+
+
+export default function CategoryDetail(props: DetailCorpFormularium) {
+  const [open, setOpen] = React.useState(false);
+  const [isDialogOpen, setDialogOpen] = useState(false)
+
+  return (
+    <React.Fragment>
+        <TableBody>
+          <TableRow>
+            <TableCell align='left' width={50}/>
+            <TableCell align='left'>{props.code}</TableCell>
+            <TableCell align='left'>{props.name}</TableCell>
+            <TableCell align='left' width={100}>
+              <Label color='success'>
+                Active
+              </Label>
+            </TableCell>
+            <TableCell align='center' width={100}>
+              <TableMoreMenu actions={
+                <>
+                  <MenuItem onClick={() => setOpen(!open)}>
+                    <FindInPageOutlined />
+                    Detail
+                  </MenuItem>
+                  <MenuItem onClick={() => setDialogOpen(!isDialogOpen)}>
+                    <CachedOutlined />
+                    Update Status
+                  </MenuItem>
+                </>
+              } />
+            </TableCell>
+          </TableRow>
+        </TableBody>
+        <TableRow>
+          <TableCell colSpan={5} style={{paddingBottom:0, paddingTop:0}}>
+            <Collapse in={open} timeout='auto' unmountOnExit>
+              <InfoDetail {...props}/>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+
+        {/* TODO: dialog update status */}
+        {/* <DialogUpdateStatus 
+          openDialog={isDialogOpen} 
+          setOpenDialog={setDialogOpen}
+          id={0}
+        /> */}
+    </React.Fragment>
+  )
+}

frontend/dashboard/src/pages/Corporates/Formularium/New/CategoryRow.tsx

@@ -0,0 +1,82 @@
+import TableMoreMenu from "@/components/table/TableMoreMenu"
+import { FindInPageOutlined } from "@mui/icons-material"
+import HistoryIcon from '@mui/icons-material/History';
+import { Collapse, Grid, MenuItem, Paper, Table, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
+import React, { useEffect } from "react";
+import CategoryDetail from "./CategoryDetail";
+import { CorporateFormulariumList, DetailCorpFormularium, RespDetailFormularium } from "./Types";
+import axios from "@/utils/axios";
+import { useNavigate, useParams } from "react-router-dom";
+
+const CategoryRow: React.FC<CorporateFormulariumList> = (props) => {
+  const [open, setOpen] = React.useState(false);
+  const { corporate_id } = useParams();
+  const navigate = useNavigate();
+  
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
+  const [dataTableData, setDataTableData] = React.useState<RespDetailFormularium | null>(null)
+  const [dataRow, setDataRow] = React.useState<DetailCorpFormularium[] | null>(null)
+
+  const loadDataTableData = async (id: number) => {
+    setDataTableLoading(true);
+    const resp = await axios.get(`/corporates/${corporate_id}/formulariums/${id}`);
+    console.log(resp.data);
+    setDataTableLoading(false);
+    setDataTableData(resp.data);
+    setDataRow(resp.data.data);
+  }
+
+  return (
+    <React.Fragment>
+      <TableRow>
+        <TableCell align="left" width={50}/>
+        <TableCell align="left">{props.category}</TableCell>
+        <TableCell align="left">{props.description}</TableCell>
+        <TableCell align="center" width={100}>
+          <TableMoreMenu actions = {
+            <>
+            <MenuItem onClick={async () => { loadDataTableData(props.id); setOpen(!open)}}>
+              <FindInPageOutlined />
+              Detail
+            </MenuItem>
+            <MenuItem onClick={() => navigate(`/corporates/${corporate_id}/formulariums/${props.id}/history`)}>
+              <HistoryIcon />
+              History
+            </MenuItem>
+            </>
+          } />
+        </TableCell>        
+      </TableRow>
+      <TableRow >
+        <TableCell colSpan={5} align="center" style={{paddingBottom: 0, paddingTop: 0}}>
+          <Collapse in={open} timeout='auto' unmountOnExit>
+            <TableContainer component={Paper}>
+              <Table aria-label="collapsible table">
+                <TableHead>
+                  <TableRow>
+                    <TableCell align="left" width={50} />
+                    <TableCell align="left">Code</TableCell>
+                    <TableCell align="left">Name</TableCell>
+                    <TableCell align="left" width={100}>Status</TableCell>
+                    <TableCell align="center" width={100}></TableCell>
+                  </TableRow>
+                </TableHead>
+                {dataTableIsLoading ? (
+                  <TableCell colSpan={5} align="center">Loading</TableCell>
+                ) : dataTableData?.data.length == 0 ? (
+                  <TableCell colSpan={5} align="center">No Data</TableCell>
+                ) : (
+                  dataRow?.map(item => (
+                    <CategoryDetail {...item}/>
+                  ))
+                )}
+              </Table>
+            </TableContainer>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </React.Fragment>
+  )
+}
+
+export default CategoryRow

frontend/dashboard/src/pages/Corporates/Formularium/New/CreateForm.tsx

@@ -0,0 +1,54 @@
+import { Card, Grid } from '@mui/material';
+import { useParams } from 'react-router-dom';
+import HeaderBreadcrumbs from '../../../../components/HeaderBreadcrumbs';
+import Page from '../../../../components/Page';
+import useSettings from '../../../../hooks/useSettings';
+import CorporateTabNavigations from '../../CorporateTabNavigations';
+
+import { useContext, useEffect, useState } from 'react';
+import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+import { Corporate } from '@/@types/corporates';
+import CorporateFormulariumCreateForm from "./Form"
+
+
+export default function CorporateFormulariumCreate() {
+  const { themeStretch } = useSettings();
+
+  const { corporate_id } = useParams();
+
+  const [corporate, setCorporate] = useState<Corporate | null>();
+
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [configuredCorporateContext]);
+
+  return(
+    <Page title='Create Formularium'>
+      <HeaderBreadcrumbs
+         heading={'Create Formularium'}
+         links={[
+          {
+            name: 'Corporates',
+            href: '/corporates'
+          },
+          {
+            name: corporate?.name ?? "-",
+            href: '/corporates/' + corporate_id,
+          },
+          {
+            name: 'Formularium',
+            href: '/corporates/' + corporate_id + '/formulariums',
+          },
+          {
+            name: 'Create Formularium',
+            href: '/corporates/' + corporate_id + '/formulariums/create',
+          },
+         ]} 
+        />
+        
+        <CorporateFormulariumCreateForm />
+    </Page>
+  )
+}

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

@@ -0,0 +1,103 @@
+import { useForm } from "react-hook-form";
+import { FormProvider, RHFSelect } from "../../../../components/hook-form";
+import { Button, Card, Grid, Typography } from "@mui/material";
+import { Stack, fontWeight } from "@mui/system";
+import { useNavigate, useParams } from "react-router";
+import React, { useEffect } from "react";
+import { DetailCorpFormularium } from "./Types";
+import axios from "@/utils/axios";
+
+
+export default function CorporateFormulariumCreateForm() {
+  const navigate = useNavigate();
+  const { corporate_id } = useParams();
+  const methods = useForm([
+    // methods Logic??
+  ]);
+
+  const onSubmit = async (data: any) => {
+    // logic onSubmit
+  };
+
+  const {
+    handleSubmit,
+  } = methods;
+
+  // Data Dummy
+  const options = ["Dummy 1", "Dummy 2", "Dummy 3"];
+
+  const [dataDropdownIsLoading, setDataDropdownLoading] = React.useState(true);
+  const [dataDropdownData, setDataDropdownData] = React.useState<DetailCorpFormularium[] | null>(null)
+  const loadDataDropdown = async () => {
+    setDataDropdownLoading(true);
+    const resp = await axios.get(`corporates/${corporate_id}/formulariums/create`);
+    console.log(resp.data);
+    setDataDropdownLoading(false);
+
+    setDataDropdownData(resp.data.data)
+  };
+
+  useEffect(() => {
+    loadDataDropdown();
+  }, [])
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      <Grid item xs={12}>
+        <Card sx={{p:2}}>
+          <Stack spacing={3}>
+            <Typography variant="h6">Formularium Name*</Typography>
+            <RHFSelect name="category" label="Category" placeholder="Category" fullWidth={true}>
+              {/* {options.map((option, index) => (
+                <option key={index} value={option}>
+                  {option}
+                </option>
+              ))} */}
+              <option value=""/>
+              {dataDropdownData?.map((item, index) => (
+                <option key={index} value={item.name}>
+                  {item.name}
+                </option>
+              ))}
+            </RHFSelect>
+          </Stack>
+        </Card>
+        <Stack direction="row" spacing={4} sx={{marginTop: '40px'}}>
+          <Grid container item xs={12} md={12} justifyContent="flex-end" sx={{p:2}}>
+            <Button
+              variant="outlined"
+              onClick={() => navigate(`/corporates/${corporate_id}/formulariums/`)}
+              sx={{
+                p: 1,
+                fontWeight: 'bold',
+                color: 'black',
+                outlineColor: 'black',
+                marginRight: '20px',
+                width: 100
+              }}
+            >
+              Cancel
+            </Button>
+            
+            <Button
+              variant="contained"
+              sx={{
+                p: 1,
+                fontWeight: 'bold',
+                backgroundColor: '#19BBBB', 
+                color: '#FFF',
+                "&:hover":{
+                  backgroundColor: '#19BBBB', color: '#FFF',
+                },
+                width: 100
+              }}
+            >
+              Create
+            </Button>
+          </Grid>
+        </Stack>
+      </Grid>
+
+    </FormProvider>
+  )
+}

frontend/dashboard/src/pages/Corporates/Formularium/New/History.tsx

@@ -0,0 +1,218 @@
+// @mui
+import {
+    Box,
+    Button,
+    Card,
+    Collapse,
+    Container,
+    FormControl,
+    Grid,
+    IconButton,
+    InputLabel,
+    MenuItem,
+    OutlinedInput,
+    Paper,
+    Select,
+    SelectChangeEvent,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    TextField,
+    Typography,
+    Badge,
+    Stack,
+  } from '@mui/material';
+  import * as React from 'react';
+  import { useParams } from 'react-router-dom';
+  import { styled } from '@mui/material/styles';
+  import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+  import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
+  import { useContext, useEffect, useState } from 'react';
+  import MuiAccordionSummary, {
+    AccordionSummaryProps,
+  } from '@mui/material/AccordionSummary';
+  import useSettings from '../../../../hooks/useSettings';
+  import axios from '../../../../utils/axios';
+  import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
+  import MuiAccordionDetails from '@mui/material/AccordionDetails';
+  import HeaderBreadcrumbs from '../../../../components/HeaderBreadcrumbs';
+  import { Corporate } from '@/@types/corporates';
+  import { fDate, fDateTime } from '@/utils/formatTime';
+
+  const Accordion = styled((props: AccordionProps) => (
+    <MuiAccordion disableGutters elevation={0} square {...props} />
+  ))(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    '&:not(:last-child)': {
+        borderBottom: 0,
+    },
+    '7:before': {
+        display: 'none',
+    },
+  }));
+
+  const AccordionSummary = styled((props: AccordionSummaryProps) => (
+    <MuiAccordionSummary expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem'}} />}
+        {...props}
+    />
+  ))(({ theme }) => ({
+    backgroundColor: theme.palette.mode === 'dark'
+        ? 'rgba(255,255,255, .85)'
+        : 'rgba(0,0,0, .03)',
+    flexDirection: 'row-reverse', 
+    '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded' : {
+        transform: 'rotate(90deg)',
+    },
+    '& .MuiAccordionSummary-content': {
+        marginLeft: theme.spacing(1),
+    },    
+  }));
+
+  const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+    padding: theme.spacing(2),
+    borderTop: '1px solid rgba(0, 0, 0, .125)',
+  }));
+
+  export default function CustomizedAccordions() {
+    const [expanded, setExpanded] = React.useState<String | false>('panel1');
+
+    const handleChange = (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+        setExpanded(newExpanded ? panel : false);
+    };
+
+    const pageTitle = 'Corporate Formularium History'
+    const { id } = useParams();
+    const { corporate_id } = useParams();
+    const [corporate, setCorporate] = useState<Corporate | null>();
+    const [currentCorporate, setCurrentCorporate] = useState<Corporate>();
+    const configuredCorporateContext = useContext(ConfiguredCorporateContext);
+
+    useEffect(() => {
+      setCorporate(configuredCorporateContext.currentCorporate);
+      const model = 'App\\Models\\CorporateFormularium';
+      const url = `/audittrail/${id}?model=${model}`;
+      axios.get(url)
+        .then((res) => {
+          setCurrentCorporate(res.data);
+        })
+        .catch((error) => {
+          console.error('Terjadi kesalahan', error)
+        });
+    }, [configuredCorporateContext]);
+
+    return (
+      <div>
+        <HeaderBreadcrumbs 
+          heading={pageTitle}
+          links={[
+            {
+              name: 'Corporates',
+              href: '/corporates',
+            },
+            {
+              name: corporate?.name ?? '-',
+              href: '/corporates/' + corporate_id,
+            },
+            {
+              name: 'Formularium',
+              href: '/corporates/' + corporate_id + '/formulariums',
+            },
+            {
+              name: 'History',
+              href: '/corporates/' + corporate_id + '/formulariums'
+            },
+          ]}
+        />
+        {currentCorporate?.data.map((item, index) => (
+          <Accordion
+            key={index}
+            expanded={expanded === `panel${index}`}
+            onChange={handleChange(`panel${index}`)}
+          >
+            <AccordionSummary
+              aria-controls={`panel${index}d-content`}
+              id={`panel${index}d-header`}
+            >
+              <Typography>{`Data has ${item.action} by ${item.user_id} on ${fDateTime(item.updated_at)}`}</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <TableContainer component={Paper}>
+                <Table aria-label='collapsible table'>
+                  <TableHead>
+                    <TableRow>
+                      <TableCell align='center'>Field</TableCell>
+                      <TableCell align='center'>Old Value</TableCell>
+                      <TableCell align='center'>New Value</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {Object.entries(item.old_values).map(([key, value]) => {
+                      let renderedValue;
+                      if (key === 'deleted_by' || 
+                          key === 'deleted_at' || 
+                          key === 'created_by' || 
+                          key === 'created_at' || 
+                          key === 'updated_by' ||
+                          key === 'description' 
+                        ) {
+                        return null; // Melewati iterasi saat key adalah 'deleted_by'
+                      }
+                      switch (key) {
+                        case 'welcome_message':
+                          renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+                          value = value.replace(/<[^>]*>/g, '');
+                          break;
+                        case 'help_text':
+                          renderedValue = item.new_values[key].replace(/<[^>]*>/g, '');
+                          value = value.replace(/<[^>]*>/g, '');
+                          break;
+                        case 'active':
+                          renderedValue = item.new_values[key] == 1 ? 'Active' : 'Inactive';
+                          value = value == 1 ? 'Active' : 'Inactive';
+                          break;
+                        case 'created_at':
+                          renderedValue = fDateTime(item.new_values[key]);
+                          value = fDateTime(value);
+                          break;
+                        case 'updated_at':
+                          renderedValue = fDateTime(item.new_values[key]);
+                          value = fDateTime(value);
+                          break;
+                        case 'updated_at':
+                          renderedValue = fDateTime(item.new_values[key]);
+                          value = fDateTime(value);
+                          break;
+                        case 'delete_at':
+                          renderedValue = fDateTime(item.new_values[key]);
+                          value = fDateTime(value);
+                          break;
+                        default:
+                          renderedValue = item.new_values[key];
+                          break;
+                      }
+
+                      const field = key.charAt(0).toUpperCase() + key.slice(1);
+                      if (value == renderedValue) {
+                        return null
+                      } else {
+                        return (
+                        <TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                          <TableCell>{`${field}`}</TableCell>
+                          <TableCell align="center">{`${value}`}</TableCell>
+                          <TableCell align="center">{renderedValue}</TableCell>
+                        </TableRow>
+                        );
+                      }
+                    })}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </AccordionDetails>
+          </Accordion>
+        ))}
+      </div>
+    );
+  }

frontend/dashboard/src/pages/Corporates/Formularium/New/InfoDetail.tsx

@@ -0,0 +1,48 @@
+import { Collapse, TableCell, TableRow, Card, Box, Grid, Typography } from "@mui/material";
+import { DetailCorpFormularium } from "./Types";
+
+
+
+export default function InfoDetail(props: DetailCorpFormularium) {
+
+
+  return(
+    <Card sx={{paddingX:2, paddingY:2, marginBottom:3}}>
+      <Box sx={{margin: 1, pb: 2}}>
+        <Grid container>
+          <Grid item>
+            <Typography sx={{ fontWeight: '600', mb: 1}}>Detail</Typography>
+            <Grid container>
+              <Grid item xs={2}>Description</Grid>
+              <Grid item xs={10}> : {props.description}</Grid>
+
+              <Grid item xs={2}>General Indication</Grid>
+              <Grid item xs={10}> : {props.general_indication}</Grid>
+
+              <Grid item xs={2}>Composition</Grid>
+              <Grid item xs={10}> : {props.composition}</Grid>
+
+              <Grid item xs={2}>Kategori Obat</Grid>
+              <Grid item xs={10}> : {props.kategori_obat}</Grid>
+
+              <Grid item xs={2}>BPOM Registration</Grid>
+              <Grid item xs={10}> : {props.bpom_registration}</Grid>
+
+              <Grid item xs={2}>Classification</Grid>
+              <Grid item xs={10}> : {props.classifications}</Grid>
+
+              <Grid item xs={2}>Cat For</Grid>
+              <Grid item xs={10}> : {props.cat_for}</Grid>
+
+              <Grid item xs={2}>Class</Grid>
+              <Grid item xs={10}> : {props.class}</Grid>
+
+              <Grid item xs={2}>Manufacturer</Grid>
+              <Grid item xs={10}> : {props.manufacturer}</Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Box>
+    </Card>
+  )
+}

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

@@ -0,0 +1,179 @@
+// @mui
+import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Grid, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+// 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 axiosInstance from '../../../../utils/axios';
+import axios from '../../../../utils/axios';
+import { LaravelPaginatedData } from '../../../../@types/paginated-data';
+import BasePagination from '../../../../components/BasePagination';
+import CategoryRow from './CategoryRow'
+import {CorporateFormulariumList} from "./Types";
+
+
+export default function List() {
+  const navigate = useNavigate();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [dataRow, setDataRow] = useState<CorporateFormulariumList[] | null>(null);
+
+  // 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,
+  });
+
+  // Load Data
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const resp = await axios.get(`/corporates/${corporate_id}/formulariums`, {params: filter});
+    setDataTableLoading(false);
+    setDataTableData(resp.data);
+    setDataRow(resp.data.data);
+    console.log(dataTableData);
+    console.log(dataRow);
+  }
+
+  const applyFilter = async (searchFilter: any) => {
+    await loadDataTableData({ search: searchFilter });
+    setSearchParams({ search: searchFilter });
+    console.log("here")
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  }
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  
+  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 SearchCreate(props: any) {
+    return (
+      <div>
+        <Stack direction={'row'} spacing={2} sx={{p:2}}>
+          <SearchInput onSearch={applyFilter}/>
+          <Button
+            id='create-button'
+            variant='contained'
+            startIcon={<AddIcon />}
+            onClick={() => navigate(`/corporates/${corporate_id}/formulariums/create`)}
+            sx={{
+              p: 1.8,
+              backgroundColor: '#19BBBB', color: '#FFF',
+              "&:hover":{
+                backgroundColor: '#19BBBB', color: '#FFF',
+              },
+              width: '200px'
+            }}
+          >
+            Create
+          </Button>
+        </Stack>
+      </div>
+    )
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+  
+  return(
+    <React.Fragment>
+      <Stack>
+        <SearchCreate />
+          <Card>
+            {/* The Main Table */}
+            <TableContainer component={Paper}>
+              <Table aria-label="collapsible table">
+                <TableHead>
+                  <TableRow>
+                    <TableCell align='left' width={50}/> 
+                    <TableCell style={headStyle} align="left">Formularium Name</TableCell>
+                    <TableCell style={headStyle} align="left">Description</TableCell>
+                    <TableCell style={headStyle} align="center" width={100}></TableCell>
+                  </TableRow>
+                </TableHead>
+                {dataTableIsLoading ? (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={4} align="center">
+                        Loading
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : dataTableData.data.length == 0 ? (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={4} align="center">
+                        No Data
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : (
+                  <TableBody>
+                    {dataRow?.map(item => (
+                      <CategoryRow {...item}/>
+                    ))}
+                  </TableBody> 
+                )}             
+              </Table>
+            </TableContainer>
+            <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+          </Card>
+      </Stack>
+    </React.Fragment>
+  )
+}

frontend/dashboard/src/pages/Corporates/Formularium/New/Types.ts

@@ -0,0 +1,57 @@
+export type CorporateFormularium = {
+  current_page: number
+  data: CorporateFormulariumList[]
+  first_page_url: string
+  from: number
+  last_page: number
+  last_page_url: string
+  links: CorporateFormulariumPaginationLinks[]
+  next_page_url: any
+  per_page: number
+  total: number
+}
+  
+export type CorporateFormulariumList = {
+  id: number
+  formulaurium_category_id: number
+  category: string
+  description: string
+  active: string
+};
+  
+export type CorporateFormulariumPaginationLinks = {
+  url?: string
+  label: string
+  active: boolean
+}
+
+export type RespDetailFormularium = {
+  status: number
+  message: string
+  data: DetailCorpFormularium[]
+}
+
+export type DetailCorpFormularium = {
+  id: number
+  code: string
+  name: string
+  description: string
+  manufacturer: string
+  category_name: string
+  kategori_obat: string
+  uom: string
+  general_indication: string
+  composition: string
+  atc_code: string
+  class: string
+  bpom_registration: string
+  classifications: string
+  cat_for: string
+  created_at: string
+  updated_at: string
+  deleted_at: any
+  created_by: number
+  updated_by: number
+  deleted_by: any
+  formularium_template_id: number
+}

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

@@ -27,7 +27,7 @@ import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
-import { CorporatePlan } from '../../../@types/corporates';
+import { Hospital } from '../../../@types/corporates';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
 import BasePagination from '../../../components/BasePagination';
 import TableMoreMenu from '@/components/table/TableMoreMenu';
@@ -40,7 +40,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import { enqueueSnackbar } from 'notistack';
 import Label from '../../../components/Label';
 
-export default function PlanList() {
+export default function HospitalList() {
   const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const navigate = useNavigate();
@@ -80,9 +80,9 @@ export default function PlanList() {
   }
 
   // Called on every row to map the data to the columns
-  function createData(plan: CorporatePlan): CorporatePlan {
+  function createData(hospital: Hospital): Hospital {
     return {
-      ...plan,
+      ...hospital,
     };
   }
 

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

@@ -128,7 +128,7 @@ export default function Corporates() {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
     const response = await axios.get('/corporates', { params: filter });
-    // console.log(response.data);
+    console.log(response.data);
     setDataTableLoading(false);
 
     setDataTableData(response.data);

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

@@ -61,6 +61,7 @@ import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
 import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
 import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
+import Label from '../../../components/Label';
 
 export default function CorporatePlanList({handleSubmitSuccess}) {
   const navigate = useNavigate();
@@ -424,12 +425,14 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
   }
 
   const [columns, setColumns] = React.useState([
-    { id: 'member_id', label: 'Member ID', minWidth: 100, align: 'left', width: '10%' },
+    { id: 'member_id', label: 'Member ID', minWidth: 100, align: 'left', width: '15%' },
-    { id: 'effective_date', label: 'Effective Date', minWidth: 100, align: 'left', width: '20%' },
+    { id: 'effective_date', label: 'Effective Date', minWidth: 100, align: 'left', width: '15%' },
     { id: 'name', label: 'Name', minWidth: 100, align: 'left', width: '20%' },
-    { id: 'plan_id', label: 'Plan ID', minWidth: 100, align: 'left', width: '10%' },
+    { id: 'plan_id', label: 'Plan', minWidth: 100, align: 'left', width: '10%' },
-    { id: 'activation_date', label: 'Activation Date', minWidth: 100, align: 'left', width: '20%' },
+    { id: 'activation_date', label: 'Activation Date', minWidth: 100, align: 'left', width: '15%' },
-    { id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'left', width: '20%' },
+    { id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'left', width: '15%' },
+    {id: 'status', label: 'Status', minWidth: 100, align: 'left', width: '5%' },
+    {id: 'action', label: '', minWidth: 100, align: 'left', width: '5%' },
   ]);
 
   // Generate the every row of the table
@@ -489,6 +492,19 @@ export default function CorporatePlanList({handleSubmitSuccess}) {
           <TableCell align="left">
             <Typography variant='body2'>{row.terminated_date ? row.terminated_date : '-'}</Typography>
           </TableCell>
+          <TableCell align="left">
+            <Typography variant='body2'>
+            {row.active === 1 ? (
+              <Label color='success' >
+                Active
+              </Label>
+            ) : ( 
+              <Label color='error'>
+                Inactive
+              </Label>
+            )}
+            </Typography>
+          </TableCell>
           <TableCell align='left'>
             <TableMoreMenu actions={
               <>

frontend/dashboard/src/pages/Master/Drug/Index.tsx

@@ -1,16 +1,11 @@
-import { Card, Grid } from "@mui/material";
+import { Card } 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 (
@@ -20,8 +15,8 @@ export default function Drugs() {
         heading={ pageTitle }
         links={[
           {
-            name: 'Master',
+            name: 'Pharmacy & Delivery Management',
-            href: '/master',
+            href: '/',
           },
           {
             name: 'Drug',

frontend/dashboard/src/pages/Master/Drug/List.tsx

@@ -1,310 +1,579 @@
 // @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 {
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+  Button,
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+  Card,
-import AddIcon from '@mui/icons-material/Add';
+  IconButton,
-import UploadIcon from '@mui/icons-material/Upload';
+  MenuItem,
-import CancelIcon from '@mui/icons-material/Cancel';
+  Paper,
-// hooks
+  Table,
-import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+  TableBody,
-import useSettings from '../../../hooks/useSettings';
+  TableCell,
-import { useParams, useSearchParams } from 'react-router-dom';
+  TableContainer,
-// components
+  TableHead,
-import axios from '../../../utils/axios';
+  TableRow,
-import { LaravelPaginatedData } from '../../../@types/paginated-data';
+  TextField,
-import { Icd } from '../../../@types/diagnosis';
+  Typography,
-import BasePagination from '../../../components/BasePagination';
+  Stack,
+  Collapse,
+  Box,
+  FormControl,
+  InputLabel,
+  Select,
+  FormHelperText,
+  Menu,
+  ButtonGroup,
+  } from '@mui/material';
+  import AddIcon from '@mui/icons-material/Add';
+  // hooks
+  import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+  import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+  // components
+  import axios from '../../../utils/axios';
+  import { Drug } from '../../../@types/pharmacy-and-delivery-managements';
+  import { LaravelPaginatedData } from '../../../@types/paginated-data';
+  import BasePagination from '../../../components/BasePagination';
+  import TableMoreMenu from '@/components/table/TableMoreMenu';
+  import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+  import HistoryIcon from '@mui/icons-material/History';
+  import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
+  import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
+  import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+  import CloseIcon from '@mui/icons-material/Close';
+  import { enqueueSnackbar } from 'notistack';
+  import Label from '../../../components/Label';
+  import UploadIcon from '@mui/icons-material/Upload';
+  import CancelIcon from '@mui/icons-material/Cancel';
+  import DownloadIcon from '@mui/icons-material/Download';
+  import { LoadingButton } from '@mui/lab';
+  
 
-export default function List() {
+  export default function DrugList() {
-  const { themeStretch } = useSettings();
   const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   const [importResult, setImportResult] = useState(null);
-  
+  const navigate = useNavigate();
+
   function SearchInput(props: any) {
-     // SEARCH
+      // SEARCH
-    const searchInput = useRef<HTMLInputElement>(null);
+      const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState("");
+      const [searchText, setSearchText] = useState('');
 
-    const handleSearchChange = (event: any) => {
+      const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? ''
+      const newSearchText = event.target.value ?? '';
       setSearchText(newSearchText);
-    }
+      };
 
-    const handleSearchSubmit = (event: any) => {
+      const handleSubmit = (event: any) => {
       event.preventDefault();
       props.onSearch(searchText); // Trigger to Parent
-    }
+      };
 
-    useEffect(() =>  { // Trigger First Search
+      useEffect(() => {
       setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams])
+      }, [searchParams]);
 
-    return (
+      return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+      <form onSubmit={handleSubmit} style={{ width: '100%' }}>
-        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+          <TextField
+          id="search-input"
+          ref={searchInput}
+          label="Search Code or Name..."
+          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 => {
-            enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
-          })
-      } else {
-        enqueueSnackbar('No File Selected', { variant: 'warning' })
-      }
-    }
-    
-    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 {
+  function createData(drug: Drug): Drug {
-    return {
+      return {
-      ...icd,
+      ...drug,
-    }
+      };
   }
+  function ImportForm(props: any) {
+      // IMPORT
+      // Create Button Menu
+      const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+      const createMenu = Boolean(anchorEl);
+      const importPlan = useRef<HTMLInputElement>(null);
+      const [currentImportFileName, setCurrentImportFileName] = useState(null);
+      const [importLoading, setImportLoading] = useState(false);
+
+      const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+          setAnchorEl(event.currentTarget);
+      };
+
+      const handleClose = () => {
+          setAnchorEl(null);
+      };
+
+      const handleImportButton = () => {
+          if (importPlan?.current) {
+          handleClose();
+          importPlan.current ? importPlan.current.click() : console.log('No File selected');
+          } else {
+          alert('No file selected');
+          }
+      };
+
+      const handleCancelImportButton = () => {
+          if(importPlan.current)
+          {
+              importPlan.current.value = '';
+              importPlan.current.dispatchEvent(new Event('change', { bubbles: true }));
+          }
+      };
+
+      const handleImportChange = (event: any) => {
+          if (event.target.files[0]) {
+          setCurrentImportFileName(event.target.files[0].name);
+          } else {
+          setCurrentImportFileName(null);
+          }
+      };
+
+      const handleUpload = () => {
+          if(importPlan.current && importPlan.current.files)
+          {
+              if (importPlan.current?.files.length) {
+                  const formData = new FormData();
+                  formData.append('file', importPlan.current?.files[0]);
+                  setImportLoading(true);
+                  axios
+                      .post(`master/drugs/import`, formData)
+                      .then((response) => {
+                      handleCancelImportButton();
+                      loadDataTableData();
+                      setImportResult(response.data);
+                      console.log(response.data);
+                      setImportLoading(false);
+                      })
+                      .catch((response) => {
+                      enqueueSnackbar(
+                          'Looks like something went wrong. Please check your data and try again. ' +
+                          response.message,
+                          { variant: 'error' }
+                      );
+                      setImportLoading(false);
+                      });
+              } else {
+                  enqueueSnackbar('No File Selected', { variant: 'warning' });
+              }
+          }
+      };
+
+      const handleGetTemplate = () => {
+          axios.get('master/drugs/download-template').then((response) => {
+          const link = document.createElement('a');
+          link.href = response.data.data.file_url;
+          link.setAttribute('download', response.data.data.file_name);
+          document.body.appendChild(link);
+          link.click();
+          handleClose();
+          });
+      };
+
+      return (
+          <div>
+          <input
+              type="file"
+              id="file"
+              ref={importPlan}
+              style={{ display: 'none' }}
+              onChange={handleImportChange}
+              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+          />
+          {!currentImportFileName && (
+              <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+              <SearchInput onSearch={applyFilter} />
+              <Button
+                  id="import-button"
+                  startIcon={<DownloadIcon />}
+                  sx={{ p: 1.8, color: '#FFFFFF', backgroundColor: '#19BBBB', width: '125px', height: '48px' }}
+                  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}>
+                      <Typography variant='body2'>Import</Typography>
+                  </MenuItem>
+                  <MenuItem
+                      onClick={() => {
+                          handleGetTemplate();
+                      }}
+                  >
+                  <Typography variant='body2'> Download Template</Typography>
+                  </MenuItem>
+                  {/* <MenuItem onClick={handleICDList}>
+                  <Typography variant='body2'>Download ICD</Typography>
+                  </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>
+
+              <LoadingButton
+                  id="upload-button"
+                  variant="outlined"
+                  startIcon={<UploadIcon />}
+                  sx={{ p: 1.8 }}
+                  onClick={handleUpload}
+                  loading={importLoading}
+              >
+                  Upload
+              </LoadingButton>
+              </Stack>
+          )}
+          {importResult && (
+              <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
+              <Box sx={{ color: 'text.secondary' }}>
+                  Last Import Result :{' '}
+                  <Box sx={{ color: 'success.main', display: 'inline' }}>
+                  {importResult.data.total_success_row ?? 0}
+                  </Box>{' '}
+                  Row Processed,{' '}
+                  <Box sx={{ color: 'error.main', display: 'inline' }}>
+                  {importResult.data.total_failed_row}
+                  </Box>{' '}
+                  Failed
+                  {importResult.data.failed_rows.map((row, index) => (
+                      <Typography variant='body' key={index} color="error"> [Code=>{row.code ? row.code : 'Required'},Name=>{row.name ? row.name : 'Required'}]</Typography>
+                  ))}
+              </Box>
+              </Stack>
+          )}
+          </div>
+      );
+      }
 
   // Generate the every row of the table
   function Row(props: { row: ReturnType<typeof createData> }) {
-    const { row } = props;
+      const { row } = props;
-    const [open, setOpen] = React.useState(false);
+      const [open, setOpen] = React.useState(false);
+      const style1 = {
+      color: '#637381'
+      }
 
-    return (
+      return (
       <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableRow sx={{ '& > *': open ? {borderBottom: 'unset'} : {}, cursor: open ? 'pointer' : '' }} onClick={() => {if(open==true) setOpen(!open)}}>
-          <TableCell>
+          <TableCell align="left">{row.type ? row.type : '-'}</TableCell>
-            <IconButton
+          <TableCell align="left">{row.code ? row.code : '-'}</TableCell>
-              aria-label="expand row"
+          <TableCell align="left">{row.name ? row.name : '-'}</TableCell>
-              size="small"
+          <TableCell align="left">{row.version ? row.version : '-'}</TableCell>
-              onClick={() => setOpen(!open)}
+          <TableCell align="left">
-            >
+              {row.active === 1 ? (
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+              <Label color='success' >
-            </IconButton>
+                  Active
+              </Label>
+              ) : ( 
+              <Label color='error'>
+                  Inactive
+              </Label>
+              )}
+              </TableCell>
+          <TableCell align="left">
+              <TableMoreMenu actions={
+              <>
+                  <MenuItem onClick={() => setOpen(!open)}>
+                  <FindInPageOutlinedIcon />
+                  Details
+                  </MenuItem>
+                  {/* <MenuItem onClick={() => handleEditData(row)}>
+                  <EditOutlinedIcon />
+                  Edit
+                  </MenuItem> */}
+                  <MenuItem onClick={() => handleEditDataStatus(row)}>
+                  <CachedOutlinedIcon />
+                  Update Status
+                  </MenuItem>
+                  {/* <MenuItem onClick={() => navigate ('/corporates/'+corporate_id+'/hospitals/'+row.id+'/history')}>
+                  <HistoryIcon />
+                  History
+                  </MenuItem> */}
+              </>
+              }
+              />
           </TableCell>
-          <TableCell align="left">{row.type}</TableCell>
+          </TableRow>
-          <TableCell align="left">{row.code}</TableCell>
+          {/* COLLAPSIBLE ROW */}
-          <TableCell align="left">{row.name}</TableCell>
+          <TableRow sx={{display: open ? '' : 'none', cursor: open ? 'pointer' : ''}} onClick={() => {if(open==true) setOpen(!open)}}>
-          <TableCell align="left">{row.version}</TableCell>
+          <TableCell colSpan={6}>
-
+              <Collapse in={open} timeout="auto" unmountOnExit>
-          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
+              <Card sx={{padding:2}}>
-          <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell>
+                  <Box sx={{ pb: 2 }}>
-        </TableRow>
+                  <Typography variant='subtitle1'>Detail</Typography>
-        {/* COLLAPSIBLE ROW */}
+                  <Stack marginTop={2}>
-        <TableRow>
+                      <Stack direction='row' spacing={1}>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
+                      <Typography variant='body2' sx={{color: style1.color, width: '30%'}}>Code:</Typography>
-            <Collapse in={open} timeout="auto" unmountOnExit>
+                      <Typography variant='body2' sx={{width: '70%'}}>{row.code ? row.code : '-'}</Typography>
-              <Box sx={{ borderBottom: 1 }}>
+                      </Stack>
-                <Typography variant="body2" gutterBottom component="div">
+                      <Stack direction='row' spacing={1}>
-                  Description : {row.description}
+                      <Typography variant='body2' sx={{color: style1.color, width: '30%'}}>Name:</Typography>
-                </Typography>
+                      <Typography variant='body2' sx={{width: '70%'}}>{row.name ? row.name : '-'}</Typography>
-              </Box>
+                      </Stack>
-            </Collapse>
+                  </Stack>
+                  </Box>
+              </Card>
+              </Collapse>
           </TableCell>
-        </TableRow>
+          </TableRow>
       </React.Fragment>
-    );
+      );
   }
 
   // Dummy Default Data
-  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
-  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
-  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+      current_page: 1,
-  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+      data: [],
-    current_page: 1,
+      path: '',
-    data: [],
+      first_page_url: '',
-    path: "",
+      last_page: 1,
-    first_page_url: "",
+      last_page_url: '',
-    last_page: 1,
+      next_page_url: '',
-    last_page_url: "",
+      prev_page_url: '',
-    next_page_url: "",
+      per_page: 10,
-    prev_page_url: "",
+      from: 0,
-    per_page: 10,
+      to: 0,
-    from: 0,
+      total: 0,
-    to: 0,
-    total: 0
   });
-  const [dataTablePage, setDataTablePage] = useState(5);
 
-  const loadDataTableData = async (appliedFilter : any | null = null) => {
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
-    setDataTableLoading(true);
+      setDataTableLoading(true);
-    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+      const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/master/drugs', { params: filter });
+      // Get Data Drugs
-    // console.log(response.data);
+      const response = await axios.get('/master/drugs', { params: filter });
-    setDataTableLoading(false);
+      setDataTableLoading(false);
-
+      setDataTableData(response.data);
-    setDataTableData(response.data);
-  }
-
-  const headStyle = {
-    fontWeight: 'bold',
   };
 
-  const applyFilter = async (searchFilter: string) => {
+  const applyFilter = async (searchFilter: any) => {
-    await loadDataTableData({ "search" : searchFilter });
+      await loadDataTableData({ search: searchFilter });
-    setSearchParams({ "search" : searchFilter });
+      setSearchParams({ search: searchFilter });
-  }
+  };
 
-  const handlePageChange = (event : ChangeEvent, value: number) => {
+  const handlePageChange = (event: ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+      const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
-    loadDataTableData(filter);
+      loadDataTableData(filter);
-    setSearchParams(filter);
+      setSearchParams(filter);
-  }
+  };
 
   useEffect(() => {
-    loadDataTableData();
+      loadDataTableData();
-  }, [])
+  }, []);
-  
-  return (
-    <Stack>
-      <ImportForm />
 
-        <Card>
+  //validation dialog
-        {/* The Main Table */}
+  const [nameField, setNameField] = useState('');
-        <TableContainer component={Paper}>
+  const [codeField, setCodeField] = useState('');
-          <Table aria-label="collapsible table">
+  // ID for edit data
-            <TableBody>
+  const [idField, setIdField] = useState('');
-              <TableRow>
+
-                <TableCell style={headStyle} align="left" />
+  const handleAddData = () => {
-                <TableCell style={headStyle} align="left">Type</TableCell>
+      navigate('/corporates/'+corporate_id+'/hospitals/create');
-                <TableCell style={headStyle} align="left">Code</TableCell>
+  }
-                <TableCell style={headStyle} align="left">Name</TableCell>
+  //Edit data
-                <TableCell style={headStyle} align="left">Version</TableCell>
+  const handleEditData = (data : any) => {
-                <TableCell style={headStyle} align="right">Status</TableCell>
+      navigate('/corporates/'+corporate_id+'/hospitals/edit/'+data.id+'/'+data.organization_id);  
-                <TableCell style={headStyle} align="right">Action</TableCell>
+  }
-              </TableRow>
+  // End dialog for hospitals
-            </TableBody>
+
-            {dataTableIsLoading ?
+  // Dialog for update status hospitals
-              (
+  const [openDialogStatus, setOpenDialogStatus] = useState(false);
-                <TableBody>
+  const [activeField, setActiveField] = useState(0);
+  const [reasonUpdate,setReasonUpdate] = useState('Agreement changed');
+
+  const handleCloseDialogUpdate = () => {
+      setOpenDialogStatus(false);
+      setNameField('');
+      setCodeField('');
+      setIdField('');
+      setActiveField(activeField);
+  }
+
+  const handleSaveUpdateData = () => {
+      let activeValue = 0;
+      if(activeField === 1)
+      {
+      activeValue = 0;
+      }
+      else
+      {
+      activeValue = 1;
+      }
+      const updateData = {
+      reason: reasonUpdate,
+      active : activeValue,
+      id: idField,
+      };
+      axios
+      .put('/master/drugs/'+idField+'/activation', updateData)
+      .then((response) => {
+          enqueueSnackbar('Data updated successfully', { variant: 'success' });
+          loadDataTableData();
+          handleCloseDialogUpdate();
+      })
+      .catch((error) => {
+          enqueueSnackbar('Failed to add data', { variant: 'error' });
+      });
+  }
+
+  const handleEditDataStatus = (data: any) => {
+      setIdField(data.id);
+      setNameField(data.name);
+      setCodeField(data.code);
+      setActiveField(data.active);
+      setOpenDialogStatus(true);    
+  }
+  // End dialog for update status devisions
+
+
+
+  return (
+      <Stack>
+          <ImportForm />
+          <Card>
+              {/* The Main Table */}
+              <TableContainer component={Paper}>
+              <Table aria-label="collapsible table">
+                  {/* Table Head */}
+                  <TableHead>
                   <TableRow>
-                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                      <TableCell sx={{width: '10%'}} align="left">
+                      <Typography variant='subtitle2'>Type</Typography>
+                      </TableCell>
+                      <TableCell sx={{width: '20%'}} align="left">
+                      <Typography variant='subtitle2'>Code</Typography>
+                      </TableCell>
+                      <TableCell sx={{width: '30%'}} align="left">
+                      <Typography variant='subtitle2'>Name</Typography>
+                      </TableCell>
+                      <TableCell sx={{width: '20%'}} align="left">
+                          <Typography variant='subtitle2'>Version</Typography>
+                      </TableCell>
+                      <TableCell sx={{width: '10%'}} align="left">
+                          <Typography variant='subtitle2'>Status</Typography>
+                      </TableCell>
+                      <TableCell sx={{width: '10%'}} align="left">
+                      </TableCell>
                   </TableRow>
-                </TableBody>
+                  </TableHead>
-              ) : (
+                  {/* Condition Table Body */}
-                dataTableData.data.length == 0 ? 
+                  {dataTableIsLoading ? (
-                (
                   <TableBody>
-                    <TableRow>
+                      <TableRow>
-                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                      <TableCell colSpan={6} align="center">
-                    </TableRow>
+                          Loading
+                      </TableCell>
+                      </TableRow>
                   </TableBody>
-                ) : (
+                  ) : dataTableData.data.length == 0 ? (
                   <TableBody>
-                    {dataTableData.data.map(row => (
+                      <TableRow>
+                      <TableCell colSpan={6} align="center">
+                          No Data
+                      </TableCell>
+                      </TableRow>
+                  </TableBody>
+                  ) : (
+                  <TableBody>
+                      {dataTableData.data.map((row) => (
                       <Row key={row.id} row={row} />
-                    ))}
+                      ))}
                   </TableBody>
-                )
+                  )}
-            )}
+              </Table>
-          </Table>
+              </TableContainer>
-        </TableContainer>
+              {/* Paginations */}
-        
+              <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+          </Card>
-        </Card>
+          {/* Dialog Update Status */}
-    </Stack>
+          <Dialog open={openDialogStatus} onClose={handleCloseDialogUpdate} fullWidth={true}>
+              <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+              <Stack direction="row" alignItems="center" justifyContent="space-between">
+                  <Stack direction="row" alignItems='center' spacing={1}>
+                      <Typography variant="h6">Update Status</Typography>
+                  </Stack>
+                  <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
+                      <CloseIcon />
+                  </IconButton>
+              </Stack>
+              </DialogTitle>
+              <DialogContent>
+              <Stack spacing={2} padding={2}>
+                  <Typography variant='body1'>Are you sure to {activeField == 1 ? 'Inactive' : 'Active'} this drug ?</Typography>
+                  <Card sx={{padding:2}}  >
+                  <Stack direction='row' spacing={2}>
+                      <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
+                      <Typography variant='subtitle2' sx={{width: '70%'}}>{nameField}</Typography>
+                  </Stack>
+                  <Stack direction='row' spacing={2}>
+                      <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
+                      <Typography variant='subtitle2' sx={{width: '70%'}}>{codeField}</Typography>
+                  </Stack>
+                  </Card>
+              </Stack>
+              <Stack spacing={2} padding={2}>
+                  <Typography variant='subtitle1'>Reason for update*</Typography>
+                  <FormControl>
+                  <InputLabel htmlFor="reason" required>
+                      Reason for update
+                  </InputLabel>
+                  <Select
+                      id="reason"
+                      value={reasonUpdate}
+                      fullWidth
+                      label="Reason for update"
+                      onChange={(e) => {
+                      setReasonUpdate(e.target.value);
+                      }}
+                      
+                  >
+                      <MenuItem value="Agreement changed">Agreement changed</MenuItem>
+                      <MenuItem value="Endorsement">Endorsement</MenuItem>
+                      <MenuItem value="Renewal">Renewal</MenuItem>
+                      <MenuItem value="Worng Setting">Worng Setting</MenuItem>
+                  </Select>
+                  <FormHelperText style={{ color: 'red' }}></FormHelperText>
+                  </FormControl>
+              </Stack>
+              </DialogContent>
+              <DialogActions>
+              <Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
+              <Button sx={{backgroundColor: activeField == 0 ? '#19BBBB' : '#FF4842'}} onClick={handleSaveUpdateData} variant="contained">{activeField == 1 ? 'Inactive' : 'Active'}</Button>
+              </DialogActions>
+          </Dialog>
+
+      </Stack>
   );
-}
+  }

frontend/dashboard/src/routes/index.tsx

@@ -161,9 +161,17 @@ export default function Router() {
               element: <CorporateDivisionsCreate />,
             },
             {
-              path: ':corporate_id/formularium',
+              path: ':corporate_id/formulariums',
               element: <CorporateFormularium />,
             },
+            {
+              path: ':corporate_id/formulariums/create',
+              element: <CorporateFormulariumCreate />
+            },
+            {
+              path: ':corporate_id/formulariums/:id/history',
+              element: <CorporateFormulariumHistory />
+            },
 
             {
               path: ':corporate_id/diagnosis-exclusions',
@@ -492,6 +500,8 @@ const DiagnosisExclusionsHistory = Loadable(
 
 
 const CorporateFormularium = Loadable(lazy(() => import('../pages/Corporates/Formularium/Index')));
+const CorporateFormulariumCreate = Loadable(lazy(() => import('../pages/Corporates/Formularium/New/CreateForm')));
+const CorporateFormulariumHistory = Loadable(lazy(() => import('../pages/Corporates/Formularium/New/History')))
 
 const MasterDiagnosisTemplate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/Index')));
 const MasterDiagnosisTemplateCreate = Loadable(lazy(() => import('../pages/Master/Diagnosis/Master/CreateUpdate')));