Merge remote-tracking branch 'origin/staging' into origin/production

2024-05-20 08:49:14 +07:00
parent 15cc88403f f83a7954aa
commit ffb7e0bc08
107 changed files with 9366 additions and 105 deletions
--- a/frontend/client-portal/src/components/DialogUpdateStatus.tsx
+++ b/frontend/client-portal/src/components/DialogUpdateStatus.tsx
@@ -0,0 +1,208 @@
+import * as Yup from 'yup';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton, Grid } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { ReactElement } from 'react';
+import Iconify from './Iconify';
+import { Card } from '@mui/material';
+import { FormProvider, RHFTextField, RHFSwitch, RHFSelect } from './hook-form';
+import { Button } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import axios from '@/utils/axios';
+import { enqueueSnackbar } from 'notistack';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+    code: string;
+    name: string;
+    id: number;
+    status: string
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  maxWidth?: string;
+  data?: DataContent | undefined;
+  description: string;
+};
+
+type FormValuesProps = {
+  value: string;
+  active: boolean;
+};
+
+
+// ----------------------------------------------------------------------
+
+const DialogUpdateStatus = ({ title, openDialog, setOpenDialog, data, maxWidth, content }: MuiDialogProps) => {
+    const NewCorporateSchema = Yup.object().shape({
+        reason: Yup.string().required('Corporate Status is required'),
+    });
+
+    const methods = useForm<FormValuesProps>({
+      resolver: yupResolver(NewCorporateSchema),
+    });
+
+    const {
+        reset,
+        handleSubmit,
+        formState: { isSubmitting },
+    } = methods;
+
+
+    useEffect(() => {
+    if (openDialog === false) {
+        reset();
+    }
+    }, [openDialog, reset]);
+
+    const handleClose = () => {
+        setOpenDialog(false);
+    };
+
+    const handleUpdate = (id: number, status: number) => {
+         axios
+        .put(`/corporates/${id}/activation`, {
+          // service_code: service.service_code,
+          active: status,
+        })
+        .then((res) => {
+            handleClose()
+            window.location.reload();
+        })
+        .catch((error) => {
+          // console.log('asdasd', error.response.data.message)
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    }
+    let maxWidthDialog = 'md';
+
+    if (maxWidth) {
+        maxWidthDialog = maxWidth;
+    }
+
+    const onSubmit = async (row : any) => {
+        console.log('test')
+    };
+
+  return (
+    <Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth={'sm'}>
+      <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+        <Stack direction="row" alignItems="center" justifyContent="space-between">
+          {title?.icon ? (
+            <Stack direction="row">
+              <Iconify icon={title?.icon} width={25} height={25} sx={{ marginRight: '10px' }} />
+              <Typography variant="h6">{title?.name}</Typography>
+            </Stack>
+          ) : (
+            <Typography variant="h6">{title?.name ? title?.name : ''}</Typography>
+          )}
+          <IconButton sx={{ color: '#FFF' }} onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </Stack>
+      </DialogTitle>
+      <DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
+        
+            {/* <Stack paddingX={2} paddingY={2}>
+                <Typography variant='subtitle1'>{description}</Typography>
+            </Stack>
+            <Card>
+                <Grid container paddingX={2} paddingY={2}>
+                    <Grid item xs={4} md={4}>
+                        <Typography variant='inherit'>Code</Typography>
+                    </Grid>
+                    <Grid item xs={8}>
+                        <Typography variant='subtitle1'>{data?.code}</Typography>
+                    </Grid>
+                    <Grid item xs={4} md={4} marginTop={2}>
+                        <Typography variant='inherit'>Corporate Name</Typography>
+                    </Grid>
+                    <Grid item xs={8} marginTop={2}>
+                        <Typography variant='subtitle1'>{data?.name}</Typography>
+                    </Grid>
+                </Grid>
+            </Card>
+
+            <Typography marginTop={5} marginBottom={3} variant='subtitle1'>
+                Reason for update*
+            </Typography>
+            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+                <RHFSelect
+                    name="reason"
+                    label="Reason for update"
+                    >
+                    <option value=""></option>
+                    <option value="Agreement changed">Agreement changed</option>
+                    <option value="Endorsement">Endorsement</option>
+                    <option value="Renewal">Renewal</option>
+                    <option value="Worng Setting">Worng Setting</option>
+                </RHFSelect>
+            </FormProvider>
+            <Stack
+              alignItems="center"
+              justifyContent="flex-end"
+              direction={{ xs: 'column', md: 'row' }}
+              spacing={2}
+              marginTop={5}
+            >
+            <Stack direction="row" spacing={1}>
+            <Button
+                sx={{
+                boxShadow: 'none',
+                }}
+                variant="outlined"
+                size="medium"
+                fullWidth={true}
+                onClick={() => setOpenDialog(false)}
+            >
+                Cancel
+            </Button>
+
+            {data?.status == 1 ?  
+            <Button
+                sx={{
+                    boxShadow: 'none',
+                }}
+                variant="contained"
+                size="medium"
+                fullWidth={true}
+                color='error'
+                onClick={() => handleUpdate(data?.id, 0)}
+            >
+                Inactive
+            </Button>
+            : <Button
+                sx={{
+                    boxShadow: 'none',
+                }}
+                variant="contained"
+                size="medium"
+                fullWidth={true}
+                color='success'
+                onClick={() => handleUpdate(data?.id, 1)}
+            >
+                Active
+            </Button> }
+            </Stack>
+        </Stack> */}
+        {content}
+            
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DialogUpdateStatus;
--- a/frontend/client-portal/src/contexts/ConfiguredCorporateContext.tsx
+++ b/frontend/client-portal/src/contexts/ConfiguredCorporateContext.tsx
@@ -0,0 +1,46 @@
+import { Corporate } from '@/@types/corporates';
+import axios from '@/utils/axios';
+import { ReactNode, createContext, useState, useEffect } from 'react';
+import { useParams } from 'react-router';
+// hooks
+import useResponsive from '../hooks/useResponsive';
+
+// ----------------------------------------------------------------------
+
+export type ConfiguredCorporateContextProps = {
+  currentCorporate?: Corporate | null;
+};
+
+const initialState: ConfiguredCorporateContextProps = {
+  currentCorporate: null,
+};
+
+const ConfiguredCorporateContext = createContext(initialState);
+
+type ConfiguredCorporateProviderProps = {
+  children: ReactNode;
+};
+
+function ConfiguredCorporateProvider({ children }: ConfiguredCorporateProviderProps) {
+  const { corporate_id } = useParams();
+  const [corporate, setCorporate] = useState(null);
+
+  useEffect(() => {
+    axios.get(`corporates/${corporate_id}`)
+    .then((res) => {
+      setCorporate(res.data)
+    })
+  }, []);
+
+  return (
+    <ConfiguredCorporateContext.Provider
+      value={{
+        currentCorporate: corporate,
+      }}
+    >
+      {children}
+    </ConfiguredCorporateContext.Provider>
+  );
+}
+
+export { ConfiguredCorporateProvider, ConfiguredCorporateContext };
--- a/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx
+++ b/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx
@@ -32,6 +32,10 @@ const navConfig = [
        title: 'Alarm Center',
        path: '/alarm-center',
      },
+      {
+        title: 'Formularium',
+        path: '/master/formularium-template-v2',
+      }
      // {
      //   title: 'Claim Submit',
      //   path: '/claim-submit',
--- a/frontend/client-portal/src/pages/Master/FormulariumV2/CreateUpdate.tsx
+++ b/frontend/client-portal/src/pages/Master/FormulariumV2/CreateUpdate.tsx
@@ -0,0 +1,69 @@
+import { useNavigate, useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import {useContext, useEffect, useMemo, useState } from 'react';
+import axios from '../../../utils/axios';
+import { useSnackbar } from 'notistack';
+import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
+import { Corporate, CorporatePlan } from "@/@types/corporates";
+import { MasterFormularium } from "./Type";
+import CreateUpdateForm from "./CreateUpdateForm";
+import Typography from "@/theme/overrides/Typography";
+
+export default function CreateUpdate() {
+  const navigate = useNavigate();
+  const { corporate_id, id } = useParams();
+  const [corporate, setCorporate] = useState<Corporate|null>();
+  const configuredCorporateContext = useContext(ConfiguredCorporateContext)
+  
+  useEffect(() => {
+    setCorporate(configuredCorporateContext.currentCorporate);
+  }, [ConfiguredCorporateContext])
+
+  const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState<CorporatePlan>();
+  const [ currentMasterForm, setCurrentMasterForm ] = useState<MasterFormularium>();
+  const isEdit = !!id;
+  
+  useEffect(() => {
+    if (isEdit) {
+      axios.get(`/master/formularium-template/${id}/edit`)
+        .then((res) => {
+          // setCurrentCorporatePlan(res.data);
+          setCurrentMasterForm(res.data);
+        })
+        .catch((err) => {
+          if (err.response.status === 404) {
+            navigate('/404');
+          }
+        })
+    }
+  }, [corporate_id, id])
+
+  const pageType = !isEdit ? "Create" : "Edit" 
+  const pageTitle = `Master Formularium ${pageType}`
+  return (
+    <Page title={pageTitle}>
+      <HeaderBreadcrumbs
+        heading={pageTitle}
+        links={[
+          {
+            name: 'Master',
+            href: '/master/formularium-template-v2'
+          },
+          {
+            name: 'Formularium',
+            href: '/master/formularium-template-v2'
+          },
+          {
+            name: !isEdit ? 'Create' : 'Edit',
+            href: !isEdit ? `/master/formularium-template-v2/create` : `/master/formularium-template-v2/${id}/edit`
+          }
+        ]}
+      />
+
+      <CreateUpdateForm isEdit={isEdit} currentMasterForm={currentMasterForm} />
+      
+    </Page>
+  )
+}
--- a/frontend/client-portal/src/pages/Master/FormulariumV2/CreateUpdateForm.tsx
+++ b/frontend/client-portal/src/pages/Master/FormulariumV2/CreateUpdateForm.tsx
@@ -0,0 +1,143 @@
+import * as Yup from 'yup';
+import { LoadingButton } from "@mui/lab";
+import { Button, Card, Grid, Stack, Typography } from "@mui/material";
+import { CorporatePlan } from "../../../@types/corporates";
+import { FormProvider, RHFSwitch, RHFTextField } from "../../../components/hook-form";
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate, useParams } from 'react-router-dom';
+import axios from '../../../utils/axios';
+import { MasterFormularium } from "./Type";
+
+
+type Props = {
+  isEdit: boolean;
+  currentMasterForm?: MasterFormularium;
+};
+
+export default function CreateUpdateForm({ isEdit, currentMasterForm }: Props) {
+  const navigate = useNavigate();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const NewCorporatePlanSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      name: currentMasterForm?.name || '',
+      description: currentMasterForm?.description || '',
+    }),
+    [currentMasterForm]
+  )
+  
+  useEffect(() => {
+    if (isEdit && currentMasterForm) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+  }, [isEdit, currentMasterForm])
+
+  const methods = useForm({
+    resolver: yupResolver(NewCorporatePlanSchema),
+    defaultValues,
+  })
+
+  const {
+    reset,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = methods;
+
+  const onSubmit = async (data: any) => {
+    if (!isEdit) {
+      await axios
+        .post('/master/formularium-template/store', data)
+        .then((res) => {
+          enqueueSnackbar('Formularium created succesfully', {variant: 'success'});
+        })
+        .then((res) => {
+          navigate('/master/formularium-template-v2', { replace: true });
+        })
+        .catch(({ response }) => {
+          if (response.status === 422) {
+            for (const [key, value] of Object.entries(response.data.errors)) {
+              setError(key, { message: value[0] });
+              enqueueSnackbar(value[0] ?? 'Failed Processing Reques', { variant: 'error' });
+            }
+          }
+          else {
+            enqueueSnackbar('Create Failed : ' + response.data.message, {variant: 'error'});
+          }
+        });
+    } else {
+      await axios
+        .put(`/master/formularium-template/${currentMasterForm?.id}/update`, data)
+        .then((res) => {
+          enqueueSnackbar('Formularium updated successfully', { variant: 'success' });
+        })
+        .then((res) => {
+          navigate('/master/formularium-template-v2', { replace: true });
+        })
+        .catch(({ response }) => {
+          enqueueSnackbar(`Update Failed : ${response.data.message}`, { variant: 'error' })
+        })
+    }
+  }
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      <Grid container spacing={2}>
+        <Grid item xs={12}>
+          <Card sx={{ p:2 }}>
+            <Stack spacing={3}>
+              <Typography variant='h6' sx={{color: '#19BBBB'}}>Detail</Typography>
+              <Typography variant='h6'>Name*</Typography>
+              <RHFTextField name='name' label='Name' />
+              <Typography variant='h6'>Description*</Typography>
+              <RHFTextField name='description' label='Description' />
+            </Stack>
+          </Card>
+          <Stack direction='row' spacing={4} sx={{marginTop: '40px'}}>
+            <Grid container item xs={12} justifyContent='flex-end' sx={{p:2}}>
+              <Button
+                variant='outlined'
+                onClick={() => navigate('/master/formularium-template-v2')}
+                sx={{
+                  p:1,
+                  fontWeight: 'bold',
+                  outlineColor: 'black',
+                  marginRight: '20px',
+                  width: 100
+                }}
+              >
+                Cancel
+              </Button>
+              <LoadingButton
+                loading={isSubmitting}
+                type='submit'
+                variant='contained'
+                sx={{
+                  p:1,
+                  fontWeight: 'bold',
+                  backgroundColor: '#19BBBB',
+                  "&:hover":{
+                    backgroundColor: '#19BBBB', color: '#FFF'
+                  },
+                  width: 100
+                }}
+              >
+                { isEdit? 'Update' : 'Create' }
+              </LoadingButton>
+            </Grid>
+          </Stack>
+        </Grid>
+      </Grid>
+    </FormProvider>
+  )
+}
--- a/frontend/client-portal/src/pages/Master/FormulariumV2/Detail/DetailFormularium.tsx
+++ b/frontend/client-portal/src/pages/Master/FormulariumV2/Detail/DetailFormularium.tsx
@@ -0,0 +1,102 @@
+// @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';
+import { RHFSelect, FormProvider } from '@/components/hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+// components
+import axios from '../../../../utils/axios';
+import Label from '@/components/Label';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
+import DialogUpdateStatus from '@/components/DialogUpdateStatus'
+import * as Yup from 'yup';
+import { FormulariumData } from "../Type";
+
+
+type Props = {
+  props: FormulariumData,
+  isActive: number,
+}
+
+export default function DetailFormularium({props, isActive} : Props) {
+  const [open, setOpen] = React.useState(false);
+
+
+  return (
+    <TableBody>
+      <TableRow>
+        <TableCell align='left' width={50} />
+        <TableCell align='left'>{props.code}</TableCell>
+        <TableCell align='left'>{props.atc_code}</TableCell>
+        <TableCell align='left'>{props.name}</TableCell>
+        <TableCell align='left'>{props.category_name}</TableCell>
+        <TableCell align='left'>{props.uom}</TableCell>
+        <TableCell align='left'>
+          {isActive == 1 ? (
+            <Label color='success'>Active</Label>
+          ) : (
+            <Label color='error'>Inactive</Label>
+          )}
+        </TableCell>
+        <TableCell align='center' width={100}>
+          <TableMoreMenu actions = {
+            <>
+              <MenuItem onClick={() => setOpen(!open)}>
+                <FindInPageOutlined />
+                Detail
+              </MenuItem>
+            </>
+          } />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell colSpan={8} style={{paddingBottom: 0, paddingTop: 0}}>
+          <Collapse in={open} timeout='auto' unmountOnExit>
+            <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>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  )
+}
--- a/frontend/client-portal/src/pages/Master/FormulariumV2/Detail/Formularium.tsx
+++ b/frontend/client-portal/src/pages/Master/FormulariumV2/Detail/Formularium.tsx
@@ -0,0 +1,316 @@
+// @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 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 { useLocation, 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 { enqueueSnackbar } from 'notistack';
+import DetailFormularium from "./DetailFormularium";
+import { FormulariumData } from '../Type';
+
+
+export default function List() {
+  const navigate = useNavigate();
+  const { id: formularium_template_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [importResult, setImportResult] = useState(null);
+  const { isActive } = useLocation().state as { isActive: number }
+
+  function SearchInput(props: any) {
+    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);
+    }
+
+    useEffect(() => {
+      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 ) {
+    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 handleGetTemplate = (type: string) => {
+      axios.get('corporates/import-document-example/' + type)
+        .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();
+        })
+    }
+
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name)
+      } else {
+        setCurrentImportFileName(null);
+      }
+    }
+
+    const handleFormulariumList = async (appliedFilter = null) => {
+      axios.get(`master/formulariums/${formularium_template_id}/list`)
+        .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();
+          enqueueSnackbar('Download Success', { variant: 'success' })
+        })
+        .catch(response => {
+          enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
+        });
+    }
+
+    const handleUpload = () => {
+      if (importForm.current?.files?.length) {
+        const formData = new FormData();
+        formData.append('file', importForm.current?.files[0])
+        axios.post(`master/formulariums/${formularium_template_id}/import`, formData )
+          .then(response => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data);
+          })
+          .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}/>
+              <Button 
+                id='import-button'
+                variant='outlined'
+                startIcon={<AddIcon />}
+                sx={{ 
+                  p: 1.8,
+                  width: '200px',
+                  backgroundColor: '#19BBBB', color: '#FFF',
+                  "&:hover":{
+                    backgroundColor: "#19BBBB", color: '#FFF'
+                  },
+                }}
+                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={handleImportButton}>Import</MenuItem>
+                <MenuItem onClick={() => handleGetTemplate('master-formularium')}>Download Template</MenuItem>
+                <MenuItem onClick={() => handleFormulariumList()}>Download Formularium</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>
+    );
+  }
+
+  // Default data
+  const [dataTableRow, setDataTableRow] = useState<FormulariumData[] | null>(null)
+  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
+  });
+
+  const loadDataTableData = async (appliedFilter : any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get(`/master/formulariums/${formularium_template_id}`, { params: filter });
+    setDataTableLoading(false);
+
+    console.log(formularium_template_id)
+    console.log(response)
+    setDataTableData(response.data)
+    setDataTableRow(response.data.data)
+  }
+
+  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();
+  }, [])
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  return (
+    <Stack>
+      <ImportForm />
+      <Card>
+        <TableContainer component={Paper}>
+          <Table aria-label='collapsible table'>
+            <TableHead>
+              <TableRow>
+                <TableCell style={headStyle} align='left' width={50}/>
+                <TableCell style={headStyle} align='left'>Code</TableCell>
+                <TableCell style={headStyle} align='left'>ATC Code</TableCell>
+                <TableCell style={headStyle} align='left'>Name</TableCell>
+                <TableCell style={headStyle} align='left'>Category Name</TableCell>
+                <TableCell style={headStyle} align='left'>UOM</TableCell>
+                <TableCell style={headStyle} align='left'>Status</TableCell>
+                <TableCell style={headStyle} align='center' width={100}></TableCell>
+              </TableRow>
+            </TableHead>
+            {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>
+            ) : (
+              dataTableRow?.map(item => (
+                <DetailFormularium props={item} isActive={1}/>
+              ))
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
+  )
+}
--- a/frontend/client-portal/src/pages/Master/FormulariumV2/Detail/Index.tsx
+++ b/frontend/client-portal/src/pages/Master/FormulariumV2/Detail/Index.tsx
@@ -0,0 +1,37 @@
+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 "./Formularium";
+
+
+export default function Formularium() {
+  const pageTitle = "Formularium"
+  const { id: formularium_template_id } = useParams();
+
+  return (
+    <Page title={ pageTitle }>
+      <HeaderBreadcrumbs
+        heading={ pageTitle }
+        links={[
+          {
+            name: 'Master',
+            href: '/master/formularium-template-v2'
+          },
+          {
+            name: 'Formularium',
+            href: '/master/formularium-template-v2'
+          },
+          {
+            name: 'Detail',
+            href: `/master/formularium-template-v2/${formularium_template_id}/detail`
+          },
+        ]} 
+      />
+      <Card>
+        <List />
+      </Card>
+    </Page>
+  )
+}
--- a/frontend/client-portal/src/pages/Master/FormulariumV2/FormulariumRow.tsx
+++ b/frontend/client-portal/src/pages/Master/FormulariumV2/FormulariumRow.tsx
@@ -0,0 +1,211 @@
+import * as Yup from 'yup';
+import TableMoreMenu from "@/components/table/TableMoreMenu"
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
+import HistoryIcon from '@mui/icons-material/History';
+import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
+import { Button, Card, Collapse, Grid, MenuItem, Paper, Stack, Table, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material"
+import React, { Fragment, useEffect, useState } from "react";
+import axios from "@/utils/axios";
+import { useNavigate, useParams } from "react-router-dom";
+import { RHFSelect, FormProvider } from '@/components/hook-form';
+import DialogUpdateStatus from '@/components/DialogUpdateStatus'
+import { MasterFormularium } from "./Type";
+import { LoadingButton } from "@mui/lab";
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+type Props = {
+  props: MasterFormularium
+}
+
+export default function FormulariumRow({props} : Props) {
+  const navigate = useNavigate();
+
+  const [isDialogOpen, setDialogOpen] = useState(false);
+  const [dataValue, setDataValue] = useState<MasterFormularium | null>(null);
+  const [dataDescription, setDescriptionValue] = useState('');
+  const [url, setUrl] = useState('');
+  let titles = {
+    name: 'Update Status',
+    icon: '-'
+  }
+  type FormValuesProps = {
+    value: string;
+    active: boolean;
+  };
+
+  const handleActivate = (isOpen: boolean, dataValue: MasterFormularium) => {
+    setDialogOpen(isOpen);
+    setDataValue(dataValue);
+    setDescriptionValue("Are you sure to inactive this formularium ? ");
+    setUrl(url);
+  };
+
+  const NewMasterFormSchema = Yup.object().shape({
+    reason: Yup.string().required('Reason edit is required')
+  });
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(NewMasterFormSchema)
+  });
+
+  const onSubmit = async (row: any) => {
+    try {
+      handleUpdate(dataValue?.active, dataValue?.id, row.reason)
+    } catch (error: any) {
+      console.log('data gagal');
+    }
+
+    const ascent = document?.querySelector('ascent');
+    if (ascent != null) {
+      ascent.innerHTML = '';
+    }
+  };
+
+  const handleUpdate = (active: number, id: number, reason: string) => {
+
+    if (active == 1) {
+      active = 0
+    } else {
+      active = 1
+    }
+
+    axios
+    .put(`/master/formularium-template/${id}/activation`, {
+      active: active,
+    })
+    .then((res) => {
+      window.location.reload();
+    })
+  }
+
+  const {
+    reset,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const getContent = () => (
+    <>
+      <Stack paddingX={2} paddingY={2}>
+        <Typography variant='subtitle1'>Are you sure to Change this Formularium</Typography>
+        <Stack>
+          <Card>
+            <Grid container paddingX={2} paddingY={2}>
+              <Grid item xs={5} md={5}>
+                <Typography variant="inherit">Formularium name</Typography>
+              </Grid>
+              <Grid item xs={7}>
+                <Typography variant="subtitle1">{dataValue?.name}</Typography>
+              </Grid>
+            </Grid>
+          </Card>
+
+          <Typography marginTop={5} marginBottom={3} variant="subtitle1">Reason for update</Typography>
+          <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+            <RHFSelect
+              name="reason"
+              label="Reason for update"
+            >
+              <option value=""></option>
+              <option value="Agreement changed">Agreement changed</option>
+              <option value="Endorsement">Endorsement</option>
+              <option value="Renewal">Renewal</option>
+              <option value="Wrong Setting">Wrong Setting</option>
+            </RHFSelect>
+            <Stack
+              alignItems='center'
+              justifyContent='flex-end'
+              direction={{xs: 'column', md: 'row'}}
+              spacing={2}
+              marginTop={5}
+            >
+              <Stack direction='row' spacing={1}>
+                <Button
+                  sx={{boxShadow: 'none'}}
+                  variant='outlined'
+                  size='medium'
+                  fullWidth={true}
+                  onClick={() => setDialogOpen(false)}
+                >
+                  Cancel
+                </Button>
+                {dataValue?.active == 1 ?
+                  <LoadingButton
+                    sx={{boxShadow: '0px 2px 4px rgba(0,0,0,0.1)'}}
+                    type='submit'
+                    variant='contained'
+                    size='medium'
+                    fullWidth={true}
+                    loading={isSubmitting}
+                    color='error'
+                  >
+                    Inactive
+                  </LoadingButton> :
+                  <LoadingButton
+                    sx={{boxShadow: '0px 2px 4px rgba(0,0,0,0.1)'}}
+                    type='submit'
+                    variant='contained'
+                    size='medium'
+                    fullWidth={true}
+                    loading={isSubmitting}
+                    color='success'
+                  >
+                    Active
+                  </LoadingButton>
+                }
+              </Stack>
+            </Stack>
+          </FormProvider>
+        </Stack>
+      </Stack>
+    </>
+  )
+
+  return (
+    <Fragment>
+      <TableRow>
+        <TableCell align="left" width={50}></TableCell>
+        <TableCell align="left">{props.name}</TableCell>
+        <TableCell align="left">{props.description}</TableCell>
+        <TableCell align="center" width={100}>
+          <TableMoreMenu actions = {
+            <>
+              <MenuItem onClick={() => navigate(`/master/formularium-template-v2/${props.id}/detail`, {state: { isActive: props.active }})}>
+                <FindInPageOutlinedIcon />
+                Detail
+              </MenuItem>
+              <MenuItem onClick={() => navigate(`/master/formularium-template-v2/${props.id}/edit`)}>
+                <EditOutlinedIcon />
+                Edit
+              </MenuItem>
+              <MenuItem onClick={() => handleActivate(true, {
+                id: props.id,
+                name: props.name,
+                description: props.description,
+                active: props.active
+              })
+              }>
+                <CachedOutlinedIcon />
+                Update Status
+              </MenuItem>
+              <MenuItem onClick={() => navigate(`/master/formularium-template-v2/${props.id}/history`)}>
+                <HistoryIcon />
+                History
+              </MenuItem>
+            </>
+          } />
+        </TableCell>
+      </TableRow>
+      <DialogUpdateStatus
+        openDialog={isDialogOpen}
+        setOpenDialog={setDialogOpen}
+        description={dataDescription}
+        title={titles}
+        data={dataValue}
+        content={getContent()}
+      />
+    </Fragment>
+  )
+}
--- a/frontend/client-portal/src/pages/Master/FormulariumV2/History.tsx
+++ b/frontend/client-portal/src/pages/Master/FormulariumV2/History.tsx
@@ -0,0 +1,211 @@
+// @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,
+  },
+  "&: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,0.5)'
+    : 'rgba(0,0,0,.03)',
+  flexDirection: 'row-reverse',
+  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
+    transform: 'rotate(90dg)',
+  },
+  "& .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 MasterFormulariumHistory() {
+  const [expanded, setExpanded] = React.useState<string | false>('panel1');
+  
+  const handleChange = (panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
+    setExpanded(newExpanded ? panel : false);
+  };
+  const pageTitle = 'Master 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\\FormulariumTemplate';
+    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: 'Master',
+            href: '/master/formularium-template-v2'
+          },
+          {
+            name: 'Formularium',
+            href: '/master/formularium-template-v2'
+          },
+          {
+            name: 'History',
+            href: `/master/formularium-template-v2/${id}`
+          }
+        ]}
+      />
+      {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 Values</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 '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 align="center">{`${field}`}</TableCell>
+                        <TableCell align="center">{`${value}`}</TableCell>
+                        <TableCell align="center">{renderedValue}</TableCell>
+                      </TableRow>
+                      );
+                    }
+                    })}              
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </div>
+  )
+}
--- a/frontend/client-portal/src/pages/Master/FormulariumV2/Index.tsx
+++ b/frontend/client-portal/src/pages/Master/FormulariumV2/Index.tsx
@@ -0,0 +1,33 @@
+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 MasterFormularium() {
+  const pageTitle = "Master Formularium"
+
+  return (
+    <Page title={ pageTitle }>
+      <HeaderBreadcrumbs
+        heading={pageTitle}
+        links={[
+          {
+            name: "Master",
+            href: "/master/formularium-template-v2"
+          },
+          {
+            name: "Formularium",
+            href: "/master/formularium-template-v2"
+          }
+        ]}
+      />
+
+      <Card>
+        <List />
+      </Card>
+
+    </Page>
+  )
+}
--- a/frontend/client-portal/src/pages/Master/FormulariumV2/List.tsx
+++ b/frontend/client-portal/src/pages/Master/FormulariumV2/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, useContext, 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 { LaravelPaginatedData } from '../../../@types/paginated-data';
+import BasePagination from '../../../components/BasePagination';
+import FormulariumRow from "./FormulariumRow";
+import { MasterFormularium } from "./Type";
+import { UserCurrentCorporateContext } from '../../../contexts/UserCurrentCorporate';
+
+export default function List() {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // Default data
+  const [dataTableRow, setDataTableRow] = useState<MasterFormularium[] | null>(null)
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const { corporateValue } = useContext(UserCurrentCorporateContext);
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+
+  const loadDataTableData =async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+
+    const filter = {
+        ...Object.fromEntries([...searchParams.entries()]), // Mengambil parameter dari searchParams
+        corporate_id: corporateValue, // Menambahkan corporate_id
+        ...(appliedFilter ? appliedFilter : {}) // Menggabungkan dengan appliedFilter jika ada
+      };
+    const response = await axios.get('/master/formularium-template', { params: filter });
+    console.log(response.data);
+    console.log(response.data.data)
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+    setDataTableRow(response.data.data);
+  }
+
+  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();
+  }, [])
+
+  function SearchInput(props: any) {
+    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);
+    }
+
+    useEffect(() => {
+      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('/master/formularium-template-v2/create')}
+            sx={{
+              p: 1.8,
+              width: '200px',
+              backgroundColor: '#19BBBB', color: '#FFF',
+              "&:hover":{
+                backgroundColor: "#19BBBB", color: '#FFF'
+              },
+            }}
+          >
+            Create
+          </Button> */}
+        </Stack>
+      </div>
+    )
+  }
+
+  const headStyle = {
+    fontWeight: 'bold'
+  }
+
+  return (
+    <React.Fragment>
+      <Stack>
+        <SearchCreate />
+        <Card>
+          <TableContainer component={Paper}>
+            <Table aria-label='collapsible table'>
+              <TableHead>
+                <TableRow>
+                  <TableCell align='left' width={50}></TableCell>
+                  <TableCell align='left' style={headStyle}>Name</TableCell>
+                  <TableCell align='left' style={headStyle}>Description</TableCell>
+                  <TableCell align='center' style={headStyle} 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>
+                  {dataTableRow?.map(item => (
+                    <FormulariumRow key={item.id} props={item}/>
+                  ))}
+                </TableBody>
+              )}
+            </Table>
+          </TableContainer>
+          <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+        </Card>
+      </Stack>
+    </React.Fragment>
+  )
+}
--- a/frontend/client-portal/src/pages/Master/FormulariumV2/Type.ts
+++ b/frontend/client-portal/src/pages/Master/FormulariumV2/Type.ts
@@ -0,0 +1,32 @@
+export type MasterFormularium = {
+    id: number
+    name: string
+    description: string
+    active: number
+}
+
+
+export type FormulariumData = {
+    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
+  }
--- a/frontend/client-portal/src/routes/index.tsx
+++ b/frontend/client-portal/src/routes/index.tsx
@@ -234,6 +234,86 @@ export default function Router() {
        { path: '*', element: <Navigate to="/404" replace /> },
      ],
    },
+    {
+        path: 'master/formularium-template-v2',
+        element: (
+          <AuthProvider>
+            <AuthGuard>
+              <DashboardLayout />
+            </AuthGuard>
+          </AuthProvider>
+        ),
+        children: [
+          {
+            element: <MasterFormulariumTemplateV2 />,
+            index: true,
+          },
+        ],
+      },
+      {
+        path: 'master/formularium-template-v2/:id/detail',
+        element: (
+          <AuthProvider>
+            <AuthGuard>
+              <DashboardLayout />
+            </AuthGuard>
+          </AuthProvider>
+        ),
+        children: [
+          {
+            element: <MasterFormulariumTemplateDetailV2 />,
+            index: true,
+          },
+        ],
+      },
+      {
+        path: 'master/formularium-template-v2/create',
+        element: (
+          <AuthProvider>
+            <AuthGuard>
+              <DashboardLayout />
+            </AuthGuard>
+          </AuthProvider>
+        ),
+        children: [
+          {
+            element: <MasterFormulariumTemplateCreateV2 />,
+            index: true,
+          },
+        ],
+      },
+      {
+        path: 'master/formularium-template-v2/:id/edit',
+        element: (
+          <AuthProvider>
+            <AuthGuard>
+              <DashboardLayout />
+            </AuthGuard>
+          </AuthProvider>
+        ),
+        children: [
+          {
+            element: <MasterFormulariumTemplateCreateV2 />,
+            index: true,
+          },
+        ],
+      },
+      {
+        path: 'master/formularium-template-v2/:id/history',
+        element: (
+          <AuthProvider>
+            <AuthGuard>
+              <DashboardLayout />
+            </AuthGuard>
+          </AuthProvider>
+        ),
+        children: [
+          {
+            element: <MasterFormulariumTemplateHistoriesV2 />,
+            index: true,
+          },
+        ],
+      },
    { path: '*', element: <Navigate to="/404" replace /> },
  ]);
 }
@@ -275,3 +355,9 @@ const ClaimRequest = Loadable(lazy(() => import('../pages/ClaimSubmit/DialogDeta
 const Corporate = Loadable(lazy(() => import('../pages/Corporate/Index')));
 const CorporateEdit = Loadable(lazy(() => import('../pages/Corporate/Form')));
 const CorporateShow = Loadable(lazy(() => import('../pages/Corporate/Show')));
+
+// Formularium
+const MasterFormulariumTemplateV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/Index')));
+const MasterFormulariumTemplateCreateV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/CreateUpdate')));
+const MasterFormulariumTemplateHistoriesV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/History')));
+const MasterFormulariumTemplateDetailV2 = Loadable(lazy(() => import('../pages/Master/FormulariumV2/Detail/Index')));
--- a/frontend/dashboard/src/@types/doctor.tsx
+++ b/frontend/dashboard/src/@types/doctor.tsx
@@ -30,6 +30,13 @@ export type Specialities = {
  name: string;
 };

+export type PeriodStart = {
+  date: string;
+};
+export type PeriodEnd = {
+  date: string;
+};
+
 export type Practitioner = {
  id: number;
  name: string;
@@ -50,6 +57,35 @@ export type Practitioner = {
  active: boolean | number;
  organizations?: Organizations[];
  specialities?: Specialities[];
+  period_start?: PeriodStart[];
+  period_end?: PeriodEnd[];
 };

+export type Medicine = {
+  id: number;
+  drug_id: number;
+  unit_id: number;
+  qty: number;
+  signa: string;
+  note: string;
+}
+
+export type Appointment = {
+  id:number|undefined;
+  name:string;
+  address:string;
+  birth_date:string;
+  gender:string;
+  description:string;
+  birth_place:string;
+  active:number;
+  avatar_url:string;
+  doctor_id:number;
+  organizations:Organizations[];
+  specialities:Specialities[];
+  diagnosis:string;
+  hospital:string;
+  medicine: Medicine[];
+}
+
 export type PractitionerType = Practitioner;
--- a/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
+++ b/frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
@@ -19,6 +19,8 @@ export const accessGroup = {
  admin: ["/report/logs"]
 }

+
+
 const navConfig = [
  // GENERAL
  // ----------------------------------------------------------------------
@@ -95,11 +97,12 @@ const navConfig = [
      {
        title: 'REPORT',
        children: [
+          { title: 'Files Provider', path: 'report/files-provider'},
          { title: 'Letter of Guarantee', path: '/report/logs' },
          { title: 'Appointment', path: '/report/appointments' },
          { title: 'Live Chat', path: '/report/live-chat' },
          { title: 'Linksehat Payment', path: '/report/linksehat-payments' },
-          { title: 'Prescription', path: '/report/prescription' },
+          // { title: 'Prescription', path: '/report/prescription' },
          { title: 'Doctor Rating', path: '/report/doctorrating' },

        ],
@@ -122,6 +125,10 @@ const navConfig = [
        title: 'LINKING TOOLS',
        path: '/linking',
      },
+      {
+        title: 'E-PRESCRIPTION',
+        path: '/e-prescription/live-chat',
+      },
    ],
  },
 ];
--- a/frontend/dashboard/src/layouts/dashboard/navbar/NavbarVertical.tsx
+++ b/frontend/dashboard/src/layouts/dashboard/navbar/NavbarVertical.tsx
@@ -19,6 +19,7 @@ import navConfig from './NavConfig';
 import NavbarDocs from './NavbarDocs';
 import NavbarAccount from './NavbarAccount';
 import CollapseButton from './CollapseButton';
+import useAuth from '@/hooks/useAuth';

 // ----------------------------------------------------------------------

@@ -42,6 +43,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
  const theme = useTheme();

  const { pathname } = useLocation();
+  const {user} = useAuth()

  const isDesktop = useResponsive('up', 'lg');

@@ -55,6 +57,16 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathname]);

+  const filteredItems = navConfig.filter(section => {
+      return section.items.some(item => {
+          return item.title === 'E-PRESCRIPTION';
+      });
+  });
+
+  const filteredData = filteredItems.map(section => ({
+      items: section.items.filter(item => item.title === "E-PRESCRIPTION")
+  }));
+
  const renderContent = (
    <Scrollbar
      sx={{
@@ -89,7 +101,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
        <NavbarAccount isCollapse={isCollapse} />
      </Stack>

-      <NavSectionVertical navConfig={navConfig} isCollapse={isCollapse} />
+      <NavSectionVertical navConfig={user.role_id == 5 ? filteredData : navConfig} isCollapse={isCollapse} />

      <Box sx={{ flexGrow: 1 }} />

--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditFinalLOG.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditFinalLOG.tsx
@@ -21,6 +21,8 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo

    const navigate = useNavigate();
    const [formData, setFormData] = useState({
+        billing_no: requestLog?.billing_no,
+        invoice_no: requestLog?.invoice_no,
        discharge_date: requestLog?.discharge_date,
        id: requestLog?.id,
        catatan: requestLog?.catatan,
@@ -49,6 +51,8 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
    if (requestLog) {
      setFormData({
        discharge_date: requestLog.discharge_date,
+        billing_no: requestLog.billing_no,
+        invoice_no: requestLog.invoice_no,
        id: requestLog.id,
        catatan: requestLog.catatan,
        icdCodes: requestLog.diagnosis
@@ -116,6 +120,8 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
        setFormData({
            discharge_date: requestLog?.discharge_date,
            id: requestLog?.id,
+            billing_no: requestLog?.billing_no,
+            invoice_no: requestLog?.invoice_no,
            catatan: requestLog?.catatan,
            icdCodes: requestLog?.diagnosis
            ? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
@@ -173,6 +179,26 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
                    </Card>

                    <Card sx={{padding:2, marginTop:2}}  >
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Invoice Number</Typography>
+                            <TextField
+                                label="Invoice Number"
+                                variant="outlined"
+                                fullWidth
+                                value={formData.invoice_no}
+                                onChange={(e) => handleChange('invoice_no', e.target.value)}
+                            />
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom2}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Billing Number</Typography>
+                            <TextField
+                                label="Billing Number"
+                                variant="outlined"
+                                fullWidth
+                                value={formData.billing_no}
+                                onChange={(e) => handleChange('billing_no', e.target.value)}
+                            />
+                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom2}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
                            <TextField
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx
@@ -182,6 +182,14 @@ export default function Detail() {
                            </Grid>) : null }

                        </Grid>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Invoice Number</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.invoice_no ? requestLog?.invoice_no : '-'}</Typography>
+                        </Stack>
+                        <Stack direction='row' spacing={2} sx={marginBottom1}>
+                            <Typography variant='subtitle2' sx={style1} gutterBottom>Billing Number</Typography>
+                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.billing_no ? requestLog?.billing_no : '-'}</Typography>
+                        </Stack>
                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                            <Typography variant='subtitle2' sx={style1} gutterBottom>Provider</Typography>
                            <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.provider}</Typography>
--- a/frontend/dashboard/src/pages/CustomerService/FinalLog/Model/Types.tsx
+++ b/frontend/dashboard/src/pages/CustomerService/FinalLog/Model/Types.tsx
@@ -31,6 +31,8 @@ export type DetailFinalLogType = {
    id                  : number,
    code                : string,
    member_id           : string,
+    invoice_no          : string,
+    billing_no          : string,
    provider            : string,
    policy_number       : string,
    name                : string|any,
--- a/frontend/dashboard/src/pages/EPrescription/Livechat/Create.tsx
+++ b/frontend/dashboard/src/pages/EPrescription/Livechat/Create.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { paramCase } from 'change-case';
+import { useParams, useLocation } from 'react-router-dom';
+// @mui
+import { Container, Stack } from '@mui/material';
+import useSettings from '../../../hooks/useSettings';
+import Page from '../../../components/Page';
+import Form from './Form';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import axios from '../../../utils/axios';
+import { Practitioner } from '../../../@types/doctor';
+import ButtonBack from '../../../components/ButtonBack';
+
+export default function Create() {
+  const { themeStretch } = useSettings();
+  const { id } = useParams();
+
+  const isEdit = id ? true : false;
+
+  const [currentPractitioner, setCurrentPractitioner] = useState<Practitioner>();
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/doctors/' + id).then((res) => {
+        setCurrentPractitioner(res.data);
+      });
+    }
+  }, [id]);
+
+  return (
+    <Page title="Membership: Create a new Dokter">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Stack direction="row" alignItems="center">
+          {/* <ButtonBack /> */}
+          <HeaderBreadcrumbs
+            heading={!isEdit ? 'Manage a new Dokter' : 'Manage Dokter'}
+            links={[
+              { name: 'Master', href: '/master' },
+              {
+                name: 'Doctors',
+                href: '/master/doctors',
+              },
+              { name: !isEdit ? 'Create' : currentPractitioner?.name ?? '' },
+            ]}
+          />
+        </Stack>
+
+        <Form
+          // isSubmitting={isSubmitting}
+          isEdit={isEdit}
+          currentPractitioner={currentPractitioner}
+        />
+      </Container>
+    </Page>
+  );
+}
+// const pageTitle = 'Create Data Dokter';
+// return (
+//   <Page title={pageTitle}>
+//     <Container maxWidth={themeStretch ? false : 'xl'}>
+//       <HeaderBreadcrumbs
+//         heading={pageTitle}
+//         links={[
+//           {
+//             name: 'Master',
+//             href: '/master',
+//           },
+//           {
+//             name: 'Dokter',
+//             href: '/master/organizations/',
+//           },
+//           {
+//             name: 'Create',
+//             href: '/master/organizations/create/',
+//           },
+//         ]}
+//       />
+
+//       <Grid container spacing={2}>
+//         <Grid item xs={12}>
+//           <Card sx={{ p: 2 }}>
+//             <Form
+//               isSubmitting={isSubmitting}
+//               isEdit={isEdit}
+//               currentOrganizations={currentOrganizations}
+//             />
+//           </Card>
+//         </Grid>
+//       </Grid>
+//     </Container>
+//   </Page>
+// );
+// }
--- a/frontend/dashboard/src/pages/EPrescription/Livechat/Form.tsx
+++ b/frontend/dashboard/src/pages/EPrescription/Livechat/Form.tsx
@@ -0,0 +1,260 @@
+import * as Yup from 'yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate } from 'react-router-dom';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import MenuItem from '@mui/material/MenuItem';
+
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import * as React 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,
+  Avatar,
+  Button,
+  ButtonGroup,
+  Card,
+  FormHelperText,
+  Grid,
+  Stack,
+  Typography,
+  TextField,
+  Chip,
+} 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 axios from '../../../utils/axios';
+import { fCurrency } from '../../../utils/formatNumber';
+import { Practitioner } from '../../../@types/doctor';
+
+import { Label, Rowing } from '@mui/icons-material';
+
+const LabelStyle = styled(Typography)(({ theme }) => ({
+  ...theme.typography.subtitle2,
+  color: theme.palette.text.secondary,
+  marginBottom: theme.spacing(1),
+}));
+
+const HeaderStyle = styled('header')(({ theme }) => ({
+  paddingBottom: theme.spacing(5),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+}));
+
+const Title = styled(Typography)(({ theme }) => ({
+  ...theme.typography.h4,
+  boxShadow: 'none',
+  // paddingBottom: theme.spacing(3),
+  fontWeight: 700,
+  color: '#005B7F',
+}));
+
+interface FormValuesProps extends Partial<Practitioner> {
+  taxes: boolean;
+  inStock: boolean;
+}
+
+type Props = {
+  isEdit: boolean;
+  currentPractitioner?: Practitioner;
+};
+
+const Span = styled(Typography)(({ theme }) => ({
+  boxShadow: 'none',
+  paddingBottom: theme.spacing(1),
+}));
+
+const Text = styled(Typography)(({ theme }) => ({
+  boxShadow: 'none',
+  paddingBottom: theme.spacing(3),
+}));
+
+export default function PractitionerForm({ isEdit, currentPractitioner }: Props) {
+  const navigate = useNavigate();
+  const [practitioner_group, setPractitionerGroups] = useState([]);
+
+  // const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
+
+  const { enqueueSnackbar } = useSnackbar();
+
+  const NewCorporateSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+    // file: Yup.boolean().required('Corporate Status is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      id: currentPractitioner?.id,
+      name: currentPractitioner?.name || '',
+      address: currentPractitioner?.address || '',
+      birth_date: currentPractitioner?.birth_date || '',
+      gender: currentPractitioner?.gender || '',
+      description: currentPractitioner?.description || '',
+      birth_place: currentPractitioner?.birth_place || '',
+      active: currentPractitioner?.active === 1 ? true : false,
+      avatar_url: currentPractitioner?.avatar_url || '',
+      doctor_id: currentPractitioner?.doctor_id || '',
+      organizations: currentPractitioner?.organizations || [],
+      specialities: currentPractitioner?.specialities || [],
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentPractitioner]
+  );
+
+  console.log('defaultValues', defaultValues);
+
+  function StatusLabel({ value }: { value: boolean }) {
+    return (
+      <Chip
+        label={value ? 'Aktif' : 'Tidak Aktif'}
+        size="medium"
+        sx={{
+          backgroundColor: value ? 'rgba(84, 214, 44, 0.16)' : 'rgba(255, 72, 66, 0.16)',
+          color: value ? '#229A16' : '#B72136',
+          padding: '1 8 1 8 px',
+          borderRadius: '4px',
+          fontSize: '12px',
+          fontWeight: 'bold',
+        }}
+      />
+    );
+  }
+  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 && currentPractitioner) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEdit, currentPractitioner]);
+
+  const handleActivate = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue('active', event.target.checked);
+
+    console.log('event.target.checked', event.target.checked);
+
+    const formData = new FormData();
+    formData.append('active', event.target.checked ? '1' : '0');
+    formData.append('_method', 'PUT');
+    axios.post('/doctors/' + currentPractitioner?.id ?? '', formData);
+
+    enqueueSnackbar('active Updated Successfully!', { variant: 'success' });
+  };
+
+  return (
+    <FormProvider methods={methods}>
+      <Stack spacing={3}>
+        <Box sx={{ width: '100%' }}>
+          {/* <Stack spacing={3}> */}
+          <Card sx={{ p: 5 }}>
+            <HeaderStyle>
+              <Grid item xs={6} md={6}>
+                <Title>Data Dokter</Title>
+              </Grid>
+              <Grid item xs={6} md={6}>
+                {/* <Typography>Status Rumah Sakit</Typography> */}
+                <RHFSwitch name="active" label="" onClick={handleActivate} />
+                <StatusLabel value={values.active} />
+              </Grid>
+            </HeaderStyle>
+            <Title variant="h5">Informasi Umum</Title>
+            <Avatar
+              alt="Remy Sharp"
+              src={currentPractitioner?.avatar_url}
+              sx={{ width: 120, height: 120, marginBottom: 2 }}
+            />
+
+            <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+              <Grid item xs={7}>
+                <Span style={{ fontWeight: 'bold' }}>Nama Dokter</Span>
+                <Text>{currentPractitioner?.name ? currentPractitioner?.name : '-'}</Text>
+                <Span style={{ fontWeight: 'bold' }}>No Telp</Span>
+                <Text>{currentPractitioner?.phone ? currentPractitioner?.phone : '-'}</Text>
+                <Span style={{ fontWeight: 'bold' }}>Tempat Lahir</Span>
+                <Text>
+                  {currentPractitioner?.birth_place ? currentPractitioner?.birth_place : '-'}
+                </Text>
+                <Span style={{ fontWeight: 'bold' }}>Alamat</Span>
+                <Text>{currentPractitioner?.address ? currentPractitioner?.address : '-'}</Text>
+              </Grid>
+              <Grid item xs={5} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+                <Span style={{ fontWeight: 'bold' }}>Jenis Kelamin</Span>
+                <Text>{currentPractitioner?.gender ? currentPractitioner?.gender : '-'}</Text>
+                <Span style={{ fontWeight: 'bold' }}>Email</Span>
+                <Text>{currentPractitioner?.email ? currentPractitioner?.email : '-'}</Text>
+                <Span style={{ fontWeight: 'bold' }}>Tanggal Lahir</Span>
+                <Text>
+                  {currentPractitioner?.birth_date ? currentPractitioner?.birth_date : '-'}
+                </Text>
+              </Grid>
+            </Grid>
+          </Card>
+          <Card sx={{ p: 5, marginTop: 2 }}>
+            <Title variant="h5">Tempat Praktik</Title>
+            {currentPractitioner?.organizations?.map((item, index) => (
+              <Box key={index} sx={{ mt: 3 }}>
+                <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+                  <Grid item xs={7}>
+                    <Text>{item.name}</Text>
+                  </Grid>
+                </Grid>
+              </Box>
+            ))}
+          </Card>
+          <Card sx={{ p: 5, marginTop: 2 }}>
+            <Title variant="h5">Spesialisasi</Title>
+            {currentPractitioner?.specialities?.map((item, index) => (
+              <Box key={index} sx={{ mt: 3 }}>
+                <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+                  <Grid item xs={7}>
+                    <Text>{item.name}</Text>
+                  </Grid>
+                </Grid>
+              </Box>
+            ))}
+          </Card>
+        </Box>
+      </Stack>
+    </FormProvider>
+  );
+}
--- a/frontend/dashboard/src/pages/EPrescription/Livechat/Index.tsx
+++ b/frontend/dashboard/src/pages/EPrescription/Livechat/Index.tsx
@@ -0,0 +1,30 @@
+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 List from './List';
+
+export default function Doctor() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const pageTitle = 'E-Prescription';
+  return (
+    <Page title={pageTitle}>
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <HeaderBreadcrumbs
+          heading={pageTitle}
+          links={[
+            {
+              name: ' E-Prescription',
+              href: 'e-prescription/live-chat',
+            },
+          ]}
+        />
+        <List />
+      </Container>
+    </Page>
+  );
+}
--- a/frontend/dashboard/src/pages/EPrescription/Livechat/List.tsx
+++ b/frontend/dashboard/src/pages/EPrescription/Livechat/List.tsx
@@ -0,0 +1,573 @@
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Stack,
+  ButtonGroup,
+  Grid,
+  Chip,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  FormControl,
+  Autocomplete,
+  InputAdornment,
+  IconButton,
+} from '@mui/material';
+
+import {
+  Link,
+  NavLink as RouterLink,
+  useSearchParams,
+  useNavigate,
+  useParams,
+} from 'react-router-dom';
+// hooks
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+// components
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import { Icd } from '../../../@types/diagnosis';
+import BasePagination from '../../../components/BasePagination';
+import { Practitioner } from '../../../@types/doctor';
+import CreateIcon from '@mui/icons-material/Create';
+import { Props } from '../../../components/editor/index';
+import { red } from '@mui/material/colors';
+import { margin, padding } from '@mui/system';
+import { enqueueSnackbar } from 'notistack';
+import { Controller } from 'react-hook-form';
+
+import SvgIconStyle from '../../../components/SvgIconStyle';
+import { GridSearchIcon } from '@mui/x-data-grid';
+import { Add, Search } from '@mui/icons-material';
+import { Icon } from '@iconify/react';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { RHFDatepicker } from '@/components/hook-form';
+import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { fDateOnly } from '@/utils/formatTime';
+
+// ----------------------------------------------------------------------
+
+export default function List() {
+  // Generate the every row of the table
+
+  const navigate = useNavigate();
+  const { organization_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
+  const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
+  const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
+
+  function Filter(props: any) {
+    // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState('');
+
+    //handle search
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+
+      props.onSearch(searchText);
+    };
+
+    useEffect(() => {
+      // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, []);
+
+    const item = [
+      {
+        id: '',
+        value: '',
+        name: 'Semua',
+      },
+    ];
+
+    return (
+      <form style={{ width: '100%' }}>
+        <Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Grid item xs={12} md={6}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  handleSearchSubmit(event);
+                }
+              }}
+              value={searchText}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search />
+                  </InputAdornment>
+                ),
+                placeholder: 'Search',
+              }}
+            />
+          </Grid>
+          <Grid item xs={12} md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('startDate')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date = value ? fDateOnly(value) : '';
+                      var entries = [...searchParams.entries(), ['startDate', date ?? '']];
+                      if (!searchParams.get('endDate')) {
+                        entries = [...entries, ['endDate', date ?? '']];
+                      }
+                      const filter = Object.fromEntries(entries);
+
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
+              />
+            </LocalizationProvider>
+          </Grid>
+          <Grid item xs={12} md={2}>
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+              <DesktopDatePicker
+                value={searchParams.get('endDate')}
+                inputFormat="dd/MM/yyyy"
+                onChange={(value) => {
+                  try {
+                    if (value && !!Date.parse(value)) {
+                      const date = fDateOnly(value);
+                      var entries = [...searchParams.entries(), ['endDate', date ?? '']];
+                      if (!searchParams.get('startDate')) {
+                        entries = [...entries, ['startDate', date ?? '']];
+                      }
+                      const filter = Object.fromEntries(entries);
+
+                      setSearchParams(filter);
+                      loadDataTableData(filter);
+                    }
+                  } catch (e) {}
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    fullWidth
+                    label="End"
+                    // error={!!error}
+                    // helperText={error?.message}
+                    // {...other}
+                  />
+                )}
+              />
+            </LocalizationProvider>
+          </Grid>
+          <Grid item xs={12} md={2}>
+            <Button
+              variant="outlined"
+              fullWidth
+              startIcon={<Add />}
+              sx={{ p: 1.8 }}
+              onClick={exportExcel}
+            >
+              Export
+            </Button>
+          </Grid>
+        </Grid>
+      </form>
+    );
+  }
+
+  function FilterForm(props: any) {
+    // IMPORT
+    return (
+      <Grid
+        container
+        spacing={2}
+        sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
+      >
+        <Grid item xs={12} md={12} lg={12}>
+          <Filter onSearch={applyItems} />
+        </Grid>
+      </Grid>
+    );
+  }
+
+  function createData(doctor: Practitioner): Practitioner {
+    return {
+      ...doctor,
+    };
+  }
+
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+    const [openDialog, setOpenDialog] = React.useState(false);
+
+    const handleDelete = (model: any) => {
+      axios
+        .delete(`/doctors/${row.id}`)
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.filter((model) => model.id != row.id),
+          });
+          enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
+        })
+        .catch((error) => {
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
+    return (
+      <React.Fragment>
+        <TableRow>
+          <TableCell>
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.date_created ? row.date_created : '-'}</TableCell>
+          <TableCell align="left">{row.time_request ? row.time_request : '-'}</TableCell>
+          <TableCell align="left">{row.health_care ? row.health_care : '-'}</TableCell>
+          <TableCell align="left">{row.doctor_name ? row.doctor_name : '-'}</TableCell>
+          <TableCell align="left">{row.speciality ? row.speciality : '-'}</TableCell>
+          <TableCell align="left">{row.pasien_name ? row.pasien_name : '-'}</TableCell>
+          <TableCell align="left">{row.pasien_phone ? row.pasien_phone : '-'}</TableCell>
+          {/* <TableCell align="left">{row.appointment_media ? row.appointment_media : '-'}</TableCell> */}
+          <TableCell align="left">{row.patient_media ? row.patient_media : '-'}</TableCell>
+          <TableCell align="left">{row.doctor_media ? row.doctor_media : '-'}</TableCell>
+          {/* <TableCell align="left">
+            {row.status_appointment ? row.status_appointment : '-'}
+          </TableCell> */}
+          <TableCell align="left">{row.status_chat ? row.status_chat : '-'}</TableCell>
+          <TableCell align="center">
+            <ButtonGroup variant="text" aria-label="text button group">
+              <Link to={'/e-prescription/live-chat/' + row.id + '/show'}>
+                <Button>
+                  <Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
+                </Button>
+              </Link>
+            </ButtonGroup>
+          </TableCell>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell
+            style={{ paddingBottom: 0, paddingTop: 0, backgroundColor: 'rgba(244, 246, 248, 0.5)' }}
+            colSpan={6}
+          >
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ margin: 1, pb: 2, pl: 4 }}>
+                <Grid container>
+                  <Grid item xs={12} sx={{ padding: 2 }}>
+                    <Grid container>
+                      <Grid item xs={6}>
+                        Metode Pembayaran
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.payment_method ? row.payment_method : '-'}
+                      </Grid>
+
+                      <Grid item xs={6}>
+                        Jenis Benefit
+                      </Grid>
+                      <Grid item xs={6}>
+                        : -
+                      </Grid>
+                      <Grid item xs={6}>
+                        Durasi
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.duration ? row.duration : '-'}
+                      </Grid>
+                      <Grid item xs={6}>
+                        Kode
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.id ? row.id : '-'}
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+
+        {/* END COLLAPSIBLE ROW */}
+        <Dialog
+          open={openDialog}
+          onClose={() => {
+            setOpenDialog(false);
+          }}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogContent sx={{ p: 5 }}>
+            <Icon
+              icon="eva:trash-2-outline"
+              style={{
+                width: '100px',
+                height: '100px',
+                color: '#FF0000',
+                margin: 'auto',
+                display: 'block',
+                marginBottom: '20px',
+                alignContent: 'center',
+              }}
+            />
+            <DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
+              Apakah anda yakin ingin menghapus
+            </DialogContentText>
+            <Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
+              {row.name}?
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              onClick={() => {
+                setOpenDialog(false);
+              }}
+              color="primary"
+            >
+              Batal
+            </Button>
+            <Button
+              onClick={() => {
+                handleDelete(row.id);
+              }}
+              color="primary"
+              autoFocus
+            >
+              Hapus
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    );
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+  // 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('/prescription', {
+      params: filter,
+    });
+    setDataTableLoading(false);
+    setDataTableData(response.data);
+  };
+
+  const exportExcel = async () => {
+    var filter = Object.fromEntries([...searchParams.entries()]);
+
+    await axios
+      .get('live-chat/export', { params: filter })
+      .then((res) => {
+        enqueueSnackbar('Data berhasil di Export', {
+          variant: 'success',
+          anchorOrigin: { horizontal: 'right', vertical: 'top' },
+        });
+
+        document.location.href = res.data.data.file_url;
+      })
+      .catch((err) =>
+        enqueueSnackbar('Data Gagal di Export', {
+          variant: 'error',
+          anchorOrigin: { horizontal: 'right', vertical: 'top' },
+        })
+      );
+  };
+
+  // const applyFilter = async (searchFilter: string) => {
+  //   await loadDataTableData({ search: searchFilter });
+  //   setSearchParams({ search: searchFilter });
+  // };
+
+  const applyItems = async (
+    searchFilter: string,
+    searchFilterOrganization: string,
+    searchFilterSpecialities: string
+  ) => {
+    await loadDataTableData({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      speciality_id: searchFilterSpecialities,
+    });
+    setSearchParamsFilter({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      speciality_id: searchFilterSpecialities,
+    });
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  return (
+    <Stack>
+      {/* <Ambulace /> */}
+
+      <Card sx={{ marginTop: '30px' }}>
+        <FilterForm sx={{ marginTop: '100px' }} />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table>
+            <TableBody>
+              <TableRow>
+                {/* <TableCell colSpan={8} rowSpan={1} align="center" /> */}
+                <TableCell style={headStyle} align="left" />
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Tanggal
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Waktu
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Faskes
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Nama Dokter
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Spesialisasi
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Nama Pasien
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  No Telepon Pasien
+                </TableCell>
+                {/* <TableCell style={headStyle} rowSpan={2} align="left">
+                  Appointment Via App/Website
+                </TableCell> */}
+                <TableCell
+                  colSpan={2}
+                  style={headStyle}
+                  align="center"
+                  sx={{ borderBottom: '3px solid #d7d7d7' }}
+                >
+                  Chat Via App/Website
+                </TableCell>
+                {/* <TableCell style={headStyle} rowSpan={2} align="left">
+                  Status Appointment
+                </TableCell> */}
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Status
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell style={headStyle} align="left" />
+                {/* <TableCell style={headStyle} align="left">
+                    Tanggal Booking
+                  </TableCell>
+                  <TableCell style={headStyle} align="left">
+                    Tanggal Appointment
+                  </TableCell>
+                  <TableCell style={headStyle} align="left">
+                    Faskes
+                  </TableCell>
+                  <TableCell style={headStyle} align="left">
+                    Nama Dokter
+                  </TableCell>
+                  <TableCell style={headStyle} align="left">
+                    Spesialisasi
+                  </TableCell> */}
+                <TableCell style={headStyle} align="left">
+                  Pasien
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Dokter
+                </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/EPrescription/Livechat/Show.tsx
+++ b/frontend/dashboard/src/pages/EPrescription/Livechat/Show.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import { paramCase } from 'change-case';
+import { useParams, useLocation } from 'react-router-dom';
+// @mui
+import { Container, Stack } from '@mui/material';
+import useSettings from '../../../hooks/useSettings';
+import Page from '../../../components/Page';
+import View from './View';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import axios from '../../../utils/axios';
+import { Appointment } from '../../../@types/doctor';
+
+export default function Create() {
+  const { themeStretch } = useSettings();
+  const { id } = useParams();
+
+  const isEdit = id ? true : false;
+
+  const [currentAppointment, setCurrentAppointment] = useState<Appointment>();
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/live-chat/' + id).then((res) => {
+        setCurrentAppointment(res.data);
+      });
+    }
+  }, [id]);
+
+  return (
+    <Page title="E-Prescription">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Stack direction="row" alignItems="center">
+          <HeaderBreadcrumbs
+            heading={!isEdit ? 'E-Prescription' : 'E-Prescription'}
+            links={[
+              {
+                name: 'E-Prescription',
+                href: 'e-prescription/live-chat',
+              },
+            ]}
+          />
+        </Stack>
+
+        <View
+          // isSubmitting={isSubmitting}
+          isEdit={isEdit}
+          id={id}
+          currentAppointment={currentAppointment}
+        />
+      </Container>
+    </Page>
+  );
+}
--- a/frontend/dashboard/src/pages/EPrescription/Livechat/View.tsx
+++ b/frontend/dashboard/src/pages/EPrescription/Livechat/View.tsx
@@ -0,0 +1,687 @@
+import * as Yup from 'yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate } from 'react-router-dom';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import MenuItem from '@mui/material/MenuItem';
+
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import * as React from 'react';
+
+// form
+import {useFieldArray, 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,
+  Autocomplete,
+  Avatar,
+  Button,
+  ButtonGroup,
+  Card,
+  FormHelperText,
+  Grid,
+  Stack,
+  Typography,
+  TextField,
+  Chip,
+  Badge,
+  Divider,
+} 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 axios from '../../../utils/axios';
+import { fCurrency } from '../../../utils/formatNumber';
+import { Appointment } from '../../../@types/doctor';
+import RHFTextFieldMoney from "@/components/hook-form/v2/RHFTextFieldMoney";
+
+import { Label, Rowing, Spa } from '@mui/icons-material';
+import { border, padding } from '@mui/system';
+import { IconButton } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+
+const LabelStyle = styled(Typography)(({ theme }) => ({
+  ...theme.typography.subtitle2,
+  color: theme.palette.text.secondary,
+  marginBottom: theme.spacing(1),
+}));
+
+const HeaderStyle = styled('header')(({ theme }) => ({
+  paddingBottom: theme.spacing(5),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+}));
+
+const Title = styled(Typography)(({ theme }) => ({
+  ...theme.typography.h4,
+  boxShadow: 'none',
+  // paddingBottom: theme.spacing(3),
+  fontWeight: 700,
+  color: '#005B7F',
+}));
+
+interface FormValuesProps extends Partial<Appointment> {
+  taxes: boolean;
+  inStock: boolean;
+}
+
+type Props = {
+  isEdit: boolean;
+  id: number;
+  currentAppointment?: Appointment;
+};
+
+const Span = styled(Typography)(({ theme }) => ({
+  boxShadow: 'none',
+  paddingBottom: theme.spacing(1),
+}));
+
+const Text = styled(Typography)(({ theme }) => ({
+  boxShadow: 'none',
+  paddingBottom: theme.spacing(3),
+}));
+
+export default function AppointmentForm({ isEdit, id, currentAppointment }: 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'),
+    // file: Yup.boolean().required('Corporate Status is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      id: currentAppointment?.id,
+      name: currentAppointment?.name || '',
+      address: currentAppointment?.address || '',
+      birth_date: currentAppointment?.birth_date || '',
+      gender: currentAppointment?.gender || '',
+      description: currentAppointment?.description || '',
+      birth_place: currentAppointment?.birth_place || '',
+      active: currentAppointment?.active === 1 ? true : false,
+      avatar_url: currentAppointment?.avatar_url || '',
+      doctor_id: currentAppointment?.doctor_id || '',
+      organizations: currentAppointment?.organizations || [],
+      specialities: currentAppointment?.specialities || [],
+      diagnosis: currentAppointment?.diagnosis || '',
+      hospital: currentAppointment?.hospital || null,
+      medicine : currentAppointment?.medicine || [
+        {
+          drug_id: 0,
+          qty: 0,
+          signa: '',
+          unit_id: 0,
+          note: '', // input to database
+        }
+      ],
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [currentAppointment]
+  );
+
+  console.log()
+  
+  const methods = useForm<FormValuesProps>({
+    // resolver: yupResolver(NewCorporateSchema),
+    defaultValues,
+  });
+ 
+  const {fields, append, remove} = useFieldArray({name: 'medicine',control: methods.control})
+
+ // Autocomplite ICD
+  const [icdOptions, setIcdOptions] = useState([]);
+  useEffect(() => {
+    // Ambil data dari API dan atur opsi ICD
+    axios.get('diagnosis')
+        .then((response) => {
+            setIcdOptions(response.data.data);
+        })
+        .catch((error) => {
+            console.error('Error fetching ICD options:', error);
+        });
+  }, []); // useEffect dijalankan hanya sekali saat komponen dimount
+    
+  // Menggunakan selectedIcdOptions sebagai state untuk nilai default
+  const [selectedIcdOptions, setSelectedIcdOptions] = useState([]);
+  const codes = defaultValues.diagnosis.split(',');
+  useEffect(() => {
+    // Pastikan bahwa icdOptions sudah terisi sebelum memfilter
+    if (icdOptions.length > 0) {
+      const selectedCodes = icdOptions.filter((icd) => {
+          return codes.includes(icd.value); 
+      });
+      setSelectedIcdOptions(selectedCodes);
+      // setValue('diagnosis', selectedCodes); // Ini bisa Anda hilangkan jika tidak diperlukan
+    }
+  }, [icdOptions, defaultValues.diagnosis]);
+
+
+  // Autocomplite Rumah Sakit
+  const [hospitalOptions, setHospitalOptions] = useState([]);
+  const [selectedHospitalOption, setSelectedHospitalOption] = useState(null);
+
+  // Ambil data dari API dan atur opsi rumah sakit
+  useEffect(() => {
+    axios.get('hospitals')
+      .then((response) => {
+        setHospitalOptions(response.data.data);
+      })
+      .catch((error) => {
+        console.error('Error fetching hospital options:', error);
+      });
+  }, []); // useEffect dijalankan hanya sekali saat komponen dimount
+
+  // Set default value saat hospitalOptions berubah
+  useEffect(() => {
+    const selectedId = hospitalOptions.find((hospital) => {
+    
+        return hospital.value == defaultValues.hospital 
+    });
+    setSelectedHospitalOption(selectedId);
+    setValue('hospital', defaultValues.hospital)
+
+  }, [hospitalOptions, defaultValues]);
+
+  // Autocomplete drugs
+  const [drugOptions, setDrugsOptions] = useState([]);
+  const [selectedDrugsOptions, setSelectedDrugsOptions] = useState({});
+
+  const handleAutocompleteChange = (newValue, index) => {
+    setSelectedDrugsOptions((prevState) => ({
+      ...prevState,
+      [index]: newValue
+    }));
+    setValue(`medicine.${index}.drug_id`, newValue ? newValue.value : '');
+  };
+
+  // Ambil data dari API dan atur opsi obat
+  useEffect(() => {
+    axios.get('drugs')
+      .then((response) => {
+        const data = response.data.data;
+        // Set nilai default jika data tidak kosong
+        if (data.length > 0) {
+          // Pilih nilai default pertama
+          setSelectedDrugsOptions({ 0: data[0] });
+          setValue('medicine.0.drug_id', data[0] ? data[0].value : '');
+        }
+        setDrugsOptions(data);
+      })
+      .catch((error) => {
+        console.error('Error fetching drug options:', error);
+      });
+  }, []); // useEffect dijalankan hanya sekali saat komponen dimount
+
+  // Autocomplete unit
+  const [unitOptions, setUnitsOptions] = useState([]);
+  const [selectedUnitsOptions, setSelectedUnitsOptions] = useState({});
+
+  // Ambil data dari API dan atur opsi satuan
+  useEffect(() => {
+    axios.get('units')
+      .then((response) => {
+        const data = response.data.data;
+        // Set nilai default jika data tidak kosong
+        if (data.length > 0) {
+          // Pilih nilai default pertama
+          setSelectedUnitsOptions({ 0: data[0] });
+          setValue('medicine.0.unit_id', data[0] ? data[0].value : '');
+        }
+        setUnitsOptions(data);
+      })
+      .catch((error) => {
+        console.error('Error fetching unit options:', error);
+      });
+  }, []); // useEffect dijalankan hanya sekali saat komponen dimount
+
+  const handleAutocompleteChangeUnit = (newValue, index) => {
+    setSelectedUnitsOptions((prevState) => ({
+      ...prevState,
+      [index]: newValue
+    }));
+    setValue(`medicine.${index}.unit_id`, newValue ? newValue.value : '');
+  };
+
+  useEffect(() => {
+    if (defaultValues.medicine.length > 0) {
+      defaultValues.medicine.forEach((med, index) => {
+        const selectedDrugId = drugOptions.find((drug) => drug.value === med.drug_id);
+        handleAutocompleteChange(selectedDrugId, index);
+
+        const selectedUnitId = unitOptions.find((unit) => unit.value === med.unit_id);
+        handleAutocompleteChangeUnit(selectedUnitId, index);
+
+        // Lakukan tindakan lainnya sesuai kebutuhan Anda
+      });
+    } else {
+      console.log('Medicine is empty');
+    }
+  }, [defaultValues.medicine]);
+
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  const values = watch();
+
+  useEffect(() => {
+    if (isEdit && currentAppointment) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEdit, currentAppointment]);
+
+  const onSubmit = async (data: FormValuesProps) => {
+    try {
+      const formData = new FormData();
+      formData.append('id', data.id);
+      formData.append('diagnosis', data.diagnosis);
+      formData.append('hospital', data.hospital);
+      
+      // Iterasi melalui setiap objek dalam array medicine dan menambahkannya ke FormData
+      data.medicine.forEach((medicineObj, index) => {
+        // Anda dapat menambahkan setiap properti dari objek medicine ke FormData
+        formData.append(`medicine[${index}][drug_id]`, medicineObj.drug_id);
+        formData.append(`medicine[${index}][qty]`, medicineObj.qty);
+        formData.append(`medicine[${index}][unit_id]`, medicineObj.unit_id);
+        formData.append(`medicine[${index}][signa]`, medicineObj.signa);
+        formData.append(`medicine[${index}][note]`, medicineObj.note);
+      });
+
+
+      const response = await axios.post('/prescription', formData);
+      reset();
+      enqueueSnackbar('Berhasil menambahkan resep', {
+        variant: 'success',
+      });
+      navigate('/e-prescription/live-chat');
+    } catch (error: any) {
+        console.log(error, 'submit')
+        enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
+    }
+
+    const ascent = document?.querySelector('ascent');
+    if (ascent != null) {
+      ascent.innerHTML = '';
+    }
+  };
+
+  const handleDownloadEPrescription = (id: number) => {
+    axios
+      .get(`prescription-download/${id}`, {
+          responseType: 'blob',
+      })
+      .then((response) => {
+          window.open(URL.createObjectURL(response.data));
+      })
+      .catch((response) => {
+          enqueueSnackbar(response.message, { variant: 'error' });
+      });
+  }
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+      <Stack spacing={3}>
+        <Box sx={{ width: '100%' }}>
+          {/* <Stack spacing={3}> */}
+          <Card sx={{ p: 5 }}>
+            <HeaderStyle>
+              <Grid item xs={6} md={6}>
+                <Stack
+                  direction="row"
+                  divider={<Divider orientation="vertical" flexItem />}
+                  spacing={2}
+                >
+                  <Title>Data Live Chat</Title>
+                </Stack>
+              </Grid>
+            </HeaderStyle>
+
+            <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+              <Grid item xs={12}>
+                <Stack direction="row" spacing={2}>
+                  <Grid item xs={6}>
+                    <Stack direction="row" spacing={2} alignItems="center">
+                      <Span style={{ fontWeight: 'bold', paddingBottom: '0px' }}>
+                        Status Appointment :
+                      </Span>
+                      <Chip
+                        label={
+                          currentAppointment?.status_appointment
+                            ? currentAppointment?.status_appointment
+                            : '-'
+                        }
+                        variant="outlined"
+                      />
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Stack direction="row" spacing={2} alignItems="center">
+                      <Span style={{ fontWeight: 'bold', paddingBottom: '0px' }}>
+                        Status Chat :
+                      </Span>
+                      <Chip
+                        label={
+                          currentAppointment?.status_chat ? currentAppointment?.status_chat : '-'
+                        }
+                        variant="outlined"
+                      />
+                    </Stack>
+                  </Grid>
+                </Stack>
+              </Grid>
+              <Grid item xs={12} sx={{ marginTop: '20px' }}>
+                <Stack direction="row" spacing={2}>
+                  <Grid item xs={6}>
+                    <Stack direction="row" spacing={2}>
+                      <Span style={{ fontWeight: 'bold' }}>Tanggal Booking :</Span>
+                      <Text>
+                        {currentAppointment?.date_created ? currentAppointment?.date_created : '-'}
+                      </Text>
+                    </Stack>
+                  </Grid>
+                  <Grid item xs={6}>
+                    <Stack direction="row" spacing={2}>
+                      <Span style={{ fontWeight: 'bold' }}>Tanggal Appointment :</Span>
+                      <Text>
+                        {currentAppointment?.date_appointment
+                          ? currentAppointment?.date_appointment
+                          : '-'}
+                      </Text>
+                    </Stack>
+                  </Grid>
+                </Stack>
+              </Grid>
+
+              <Grid item xs={6}>
+                <Span style={{ fontWeight: 'bold' }}>Nama Dokter</Span>
+                <Text>
+                  {currentAppointment?.doctor_name ? currentAppointment?.doctor_name : '-'}
+                </Text>
+                <Span style={{ fontWeight: 'bold' }}>Faskes</Span>
+                <Text>
+                  {currentAppointment?.health_care ? currentAppointment?.health_care : '-'}
+                </Text>
+                <Span style={{ fontWeight: 'bold' }}>Durasi</Span>
+                <Text>{currentAppointment?.duration ? currentAppointment?.duration : '-'}</Text>
+              </Grid>
+              <Grid item xs={6} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+                <Span style={{ fontWeight: 'bold' }}>Spesialis</Span>
+                <Text>{currentAppointment?.speciality ? currentAppointment?.speciality : '-'}</Text>
+                <Span style={{ fontWeight: 'bold' }}>Appointment Via Web/App</Span>
+                <Text>
+                  {currentAppointment?.appointment_media
+                    ? currentAppointment?.appointment_media
+                    : '-'}
+                </Text>
+              </Grid>
+            </Grid>
+          </Card>
+          <Card sx={{ mt: 5, p: 5 }}>
+            <HeaderStyle>
+              <Grid item xs={6} md={6}>
+                <Title>Data Pembayaran</Title>
+              </Grid>
+            </HeaderStyle>
+
+            {currentAppointment?.payment_detail !== null ? (
+              <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+                <Grid item xs={6}>
+                  <Span style={{ fontWeight: 'bold' }}>Metode Pembayaran</Span>
+                  <Text>
+                    {currentAppointment?.payment_method ? currentAppointment?.payment_method : '-'}
+                  </Text>
+                  <Span style={{ fontWeight: 'bold' }}>Harga</Span>
+                  <Text>
+                    {currentAppointment?.payment_detail?.gross_amount
+                      ? currentAppointment?.payment_detail?.gross_amount
+                      : '-'}
+                  </Text>
+                  <Span style={{ fontWeight: 'bold' }}>Mata Uang</Span>
+                  <Text>
+                    {currentAppointment?.payment_detail?.currency
+                      ? currentAppointment?.payment_detail?.currency
+                      : '-'}
+                  </Text>
+                </Grid>
+                <Grid item xs={6} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+                  <Span style={{ fontWeight: 'bold' }}>Tipe Pembayaran</Span>
+                  <Text>
+                    {currentAppointment?.payment_detail?.payment_type
+                      ? currentAppointment?.payment_detail?.payment_type
+                      : '-'}
+                  </Text>
+                  <Span style={{ fontWeight: 'bold' }}>Waktu Transaksi</Span>
+                  <Text>
+                    {currentAppointment?.payment_detail?.transaction_time
+                      ? currentAppointment?.payment_detail?.transaction_time
+                      : '-'}
+                  </Text>
+                  <Span style={{ fontWeight: 'bold' }}>Status</Span>
+                  <Text>
+                    {currentAppointment?.payment_detail?.status_message
+                      ? currentAppointment?.payment_detail?.status_message
+                      : '-'}
+                  </Text>
+                </Grid>
+              </Grid>
+            ) : (
+              <Span>Belum ada pembayaran</Span>
+            )}
+          </Card>
+
+          <Card sx={{ mt: 5, p: 5 }}>
+            <HeaderStyle>
+              <Grid item xs={12} md={12}>
+                <Title>E-Prescription</Title>
+              </Grid>
+            </HeaderStyle>
+            <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+             
+            <Grid item xs={12} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{marginBottom: 4}}>
+              <Span style={{ fontWeight: 'bold' }}>Diagnosa</Span>
+              <Autocomplete
+                  multiple
+                  options={icdOptions}
+                  getOptionLabel={(option) => option.label}
+                  fullWidth
+                  value={selectedIcdOptions}
+                  onChange={(e, newValues) => {
+                    const selectedCodes = newValues.map((value) => value.value);
+                    setValue('diagnosis', selectedCodes);
+                    setSelectedIcdOptions(newValues);
+                  }}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      label="Diagnosis ICD - X"
+                      variant="outlined"
+                      // required
+                    />
+                  )}
+                />
+            </Grid>
+            
+            {/* <Grid item xs={12} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{marginBottom: 4}}>
+              <Span style={{ fontWeight: 'bold' }}>Rumah Sakit</Span>
+              <Autocomplete
+                options={hospitalOptions}
+                getOptionLabel={(option) => option.label}
+                fullWidth
+                value={selectedHospitalOption}
+                onChange={(e, newValue) => {
+                  setSelectedHospitalOption(newValue);
+                  setValue('hospital', newValue ? newValue.value : ''); // Simpan nilai rumah sakit
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    label="Rumah Sakit"
+                    variant="outlined"
+                    // required
+                  />
+                )}
+              />
+              
+            </Grid> */}
+
+            <Grid item xs={12} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+                <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                    <Typography variant='subtitle1' gutterBottom>Obat</Typography>
+                </Stack>
+            </Grid>
+
+            <Grid item xs={12}>
+              {fields.map((field, index) => (
+                <Grid container spacing={2} key={index} sx={{ marginBottom: '15px' }}>
+                  <Grid item xs={3}>
+                  <Autocomplete
+                      options={drugOptions}
+                      getOptionLabel={(option) => option.label}
+                      fullWidth
+                      value={selectedDrugsOptions[index] || null}
+                      onChange={(e, newValue) => handleAutocompleteChange(newValue, index)}
+                      renderInput={(params) => (
+                        <TextField
+                          {...params}
+                          label="Drugs"
+                          variant="outlined"
+                          required
+                        />
+                      )}
+                    />
+                  </Grid>
+                  <Grid item xs={1}>
+                    <RHFTextField
+                      id={`qty_${index}`}
+                      name={`medicine.${index}.qty`}
+                      label="Qty"
+                      required
+                      type="number"
+                      placeholder="Qty"
+                      fullWidth
+                    />
+                  </Grid>
+                  <Grid item xs={2}>
+                    <Autocomplete
+                        options={unitOptions}
+                        getOptionLabel={(option) => option.label}
+                        fullWidth
+                        value={selectedUnitsOptions[index] || null}
+                        onChange={(e, newValue) => handleAutocompleteChangeUnit(newValue, index)}
+                        renderInput={(params) => (
+                          <TextField
+                            {...params}
+                            label="Units"
+                            variant="outlined"
+                            required
+                          />
+                        )}
+                      />
+                  </Grid>
+                  <Grid item xs={2}>
+                    <RHFTextField
+                      id={`signa_${index}`}
+                      name={`medicine.${index}.signa`}
+                      label="Signa"
+                      required
+                      placeholder="Signa"
+                      fullWidth
+                    />
+                  </Grid>
+                  <Grid item xs={3}>
+                    <RHFTextField
+                      id={`note_${index}`}
+                      name={`medicine.${index}.note`}
+                      label="Note"
+                      required
+                      placeholder="Note"
+                      fullWidth
+                    />
+                  </Grid>
+                  {
+                    index === 0 ? (
+                      <Grid item xs={1} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <IconButton size='large' color='primary' onClick={() => append({medicine_name: '', medicine_price: 0, request_log_id: 1 })}>
+                          <AddIcon />
+                        </IconButton>
+                      </Grid>
+                        ) : (
+                          index == (fields.length-1) ? (
+                            <Grid item xs={1} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                              <IconButton size='large' color='error' onClick={() => remove(index)}>
+                                <RemoveIcon />
+                              </IconButton>
+                            </Grid>
+                      ) : (
+                            <Grid item xs={1} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                              <IconButton size='large' color='primary' onClick={() => append({medicine_name: '', medicine_price: 0, request_log_id: 1 })}>
+                                <AddIcon />
+                              </IconButton>
+                            </Grid>
+                        )
+                      )
+                   }
+                </Grid>
+              ))}
+            </Grid>
+            <Grid item xs={12} md={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+              <Button
+                sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', marginRight: '10px' }}
+                onClick={() => handleDownloadEPrescription(id)} 
+                variant="contained"
+                size="large"
+              >
+                Download
+              </Button>
+              <LoadingButton
+                sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
+                type="submit"
+                variant="contained"
+                size="large"
+                loading={isSubmitting}
+              >
+                {!isEdit ? 'Save' : 'Update'}
+              </LoadingButton>
+            </Grid>
+
+            </Grid>
+          </Card>
+        </Box>
+      </Stack>
+    </FormProvider>
+  );
+}
--- a/frontend/dashboard/src/pages/Master/Doctors/Form.tsx
+++ b/frontend/dashboard/src/pages/Master/Doctors/Form.tsx
@@ -188,6 +188,8 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
      // formData.append('active', data.active ? '1' : '0');
      forms.forEach((form, index) => {
        formData.append(`practices[${index}][organization_id]`, form.organizationId);
+        formData.append(`practices[${index}][period_start]`, form.periodStart);
+        formData.append(`practices[${index}][period_end]`, form.periodEnd);
        form.specialities.forEach((speciality, i) => {
          formData.append(`practices[${index}][specialities][${i}][speciality_id]`, speciality);
        });
@@ -225,6 +227,7 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)

  const [organizations, setOrganizations] = useState<any>([]);
  const [specialities, setSpecialities] = useState<any>([]);
+  const [price, setPrice] = useState<any>([]);

  useEffect(() => {
    axios.get(`/search-organizations`).then((response) => {
@@ -281,6 +284,8 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
        return {
          organizationId: practice.organization_id,
          specialities: practice.specialities.map((s) => s.speciality_id),
+          periodStart: practice.period_start,
+          periodEnd: practice.period_end,
        };
      });
      setForms(newForms);
@@ -289,6 +294,9 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
        {
          organizationId: '',
          specialities: [],
+          periodStart: '',
+          periodEnd: '',
+
        },
      ]);
    }
@@ -333,6 +341,8 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
      ...forms,
      {
        organizationId: '',
+        periodStart: '',
+        periodEnd: '',
        specialities: [],
      },
    ]);
@@ -397,6 +407,8 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
    setForms(updatedForms);
  };

+  console.log(forms, 'forms')
+
  return (
    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
      <Stack spacing={3}>
@@ -492,7 +504,6 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
                        value={findValueOrganization(form.organizationId) ?? ''}
                        getOptionLabel={(option) => option.name}
                        isOptionEqualToValue={(option, value) => {
-                            console.log(value, option, 'test')
                            return option.value === value.value
                          }
                        }
@@ -541,6 +552,23 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
                      )}
                    </Grid>
                  </Grid>
+                  <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
+                  <Grid item xs={6}>
+                    <LabelStyle>Period Start</LabelStyle>
+                    <RHFDatepicker 
+                      name={`period_start`} 
+                      placeholder="Silahkan Pilih Tanggal Mulai" 
+                    />
+
+                  </Grid>
+
+                    <Grid item xs={6}>
+                      <LabelStyle>Period End</LabelStyle>
+                      <RHFDatepicker 
+                        name={`period_end`}  
+                        placeholder="Silahkan Pilih Tanggal Selesai" />
+                    </Grid>
+                  </Grid>
                </Box>
              </div>
            ))}
--- a/frontend/dashboard/src/pages/Report/FilesProvider/Index.tsx
+++ b/frontend/dashboard/src/pages/Report/FilesProvider/Index.tsx
@@ -0,0 +1,35 @@
+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 List from './List';
+
+export default function Index() {
+    const { themeStretch } = useSettings();
+
+    const { id } = useParams();
+
+    const pageTitle = 'Files Provider';
+    return (
+        <Page title={pageTitle}>
+        <Container maxWidth={themeStretch ? false : 'xl'}>
+            <HeaderBreadcrumbs
+            heading={pageTitle}
+            links={[
+                {
+                name: 'Report',
+                href: '#',
+                },
+                {
+                name: 'Files Provider',
+                href: '/report/files-provider',
+                },
+            ]}
+            />
+
+            <List />
+        </Container>
+        </Page>
+    );
+}
--- a/frontend/dashboard/src/pages/Report/FilesProvider/List.tsx
+++ b/frontend/dashboard/src/pages/Report/FilesProvider/List.tsx
@@ -0,0 +1,999 @@
+// @mui
+import {
+    Box,
+    Grid,
+    Button,
+    Card,
+    Collapse,
+    IconButton,
+    MenuItem,
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+    TextField,
+    Typography,
+    Stack,
+    Menu,
+    ButtonGroup,
+    Tooltip,
+    TableHead,
+    Checkbox,
+    InputAdornment,
+    TableSortLabel,
+    FormControl
+  } from '@mui/material';
+  import { visuallyHidden } from '@mui/utils';
+
+  import { DesktopDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+  import { fDateOnly } from '@/utils/formatTime';
+
+  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+  import FindInPageOutlinedIcon from '@mui/icons-material/FindInPageOutlined';
+  import AssessmentIcon from '@mui/icons-material/Assessment';
+  // hooks
+  import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+  import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
+
+  import { LoadingButton } from '@mui/lab';
+  // components
+  import axios from '../../../utils/axios';
+  import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../../@types/paginated-data';
+  import DataTable from '../../../components/LaravelTable';
+  import { fCurrency } from '../../utils/formatNumber';
+  import EditRoundedIcon from '@mui/icons-material/EditRounded';
+  import { Chip } from '@mui/material';
+  import Iconify from '@/components/Iconify';
+  import { enqueueSnackbar } from 'notistack';
+  import { fDate, fDateTime } from '../../../utils/formatTime';
+  import { Claims } from '@/@types/claims';
+  import Label from '@/components/Label';
+  import { capitalizeFirstLetter } from '@/utils/formatString';
+  import TableMoreMenu from '@/components/table/TableMoreMenu';
+  import Edit from '@mui/icons-material/Edit';
+  import { Download } from '@mui/icons-material';
+  import { Add, Search } from '@mui/icons-material';
+  import Autocomplete from '@mui/material/Autocomplete';
+
+  import DownloadIcon from '@mui/icons-material/Download';
+
+  import UploadIcon from '@mui/icons-material/Upload';
+  import CancelIcon from '@mui/icons-material/Cancel';
+  import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+
+  import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+  import CloseIcon from '@mui/icons-material/Close';
+
+
+  export default function List() {
+    const [selectAll, setSelectAll] = useState(false);
+    const [selectedRows, setSelectedRows] = useState([]);
+     const [providers, setProviders] = useState(null);
+    // const [searchText, setSearchText] = useState('');
+    const [order, setOrder] = useState<Order>('desc');
+    const [orderBy, setOrderBy] = useState('created_at');
+    const [perPage, setPerPage] = useState<number>(0);
+
+      const handleChange = (event, newValue) => {
+          // Jika newValue tidak undefined, atur nilai dataProvider
+          if (newValue !== undefined) {
+              setDataProvider(newValue.service_code);
+          } else {
+              // Jika tidak ada yang dipilih, set dataProvider menjadi string kosong
+              setDataProvider(null);
+          }
+      };
+    // Dummy data
+  const dummyServices = [
+    { service_code: '1', name: 'Service 1' },
+    { service_code: '2', name: 'Service 2' },
+    { service_code: '3', name: 'Service 3' },
+    // tambahkan data lain sesuai kebutuhan
+  ];
+
+
+
+    const handleSelectAll = () => {
+      setSelectAll(!selectAll);
+      if (!selectAll) {
+        const requestedIds = dataTableData.data
+          .filter(row => row.status === 'approved') // Memfilter baris dengan status 'requested'
+          .map(row => row.id); // Mengambil hanya ID dari baris-baris yang memenuhi kondisi
+          setSelectedRows(requestedIds);
+      } else {
+        setSelectedRows([]);
+      }
+    };
+
+    const handleRowSelect = (id) => {
+      if (selectedRows.includes(id)) {
+        setSelectedRows(selectedRows.filter(rowId => rowId !== id));
+      } else {
+        setSelectedRows([...selectedRows, id]);
+      }
+    };
+
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [startDate, setStartDate] = useState(null);
+    const [searchText, setSearchText] = useState('');
+    const [endDate, setEndDate] = useState(null);
+    const navigate = useNavigate();
+    const [dataProvider, setDataProvider] = useState(null);
+
+    useEffect(() => {
+      if (startDate !== null || endDate !== null || dataProvider !== null
+         || order !== null || orderBy !== null || perPage !== 0) {
+        loadDataTableData();
+        getProvider();
+      }
+    }, [startDate, endDate, dataProvider, order, orderBy, perPage]);
+
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingImport, setIsLoadingImport] = useState(false);
+    const handleExportReport = async () => {
+
+
+      const year = startDate?.getFullYear();
+      const month = (startDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+      const day = startDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+      const formattedDate = year && month && day ? `${year}-${month}-${day}` : '';
+
+      const year1 = endDate?.getFullYear();
+      const month1 = (endDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+      const day1 = endDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+      const formattedDate1 = year1 && month1 && day1 ? `${year1}-${month1}-${day1}` : '';
+
+
+
+      var filter = Object.fromEntries([...searchParams.entries()]);
+      setIsLoading(true)
+      await axios
+        .get('/claims/export-claim-management',{
+          params: {
+            search: searchText,
+            start_date: formattedDate ? formattedDate : null,
+            end_date:formattedDate1,
+            provider: dataProvider,
+            order: order,
+            orderBy: orderBy,
+            page: perPage,
+          }
+        })
+        .then((res) => {
+            enqueueSnackbar('Data berhasil di Export', {
+            variant: 'success',
+            anchorOrigin: { horizontal: 'right', vertical: 'top' },
+          });
+          setIsLoading(false)
+
+          document.location.href = res.data.data.file_url;
+        })
+        .catch((err) =>
+            enqueueSnackbar('Data Gagal di Export', {
+            variant: 'error',
+            anchorOrigin: { horizontal: 'right', vertical: 'top' },
+          })
+
+        );
+    };
+
+
+    function SearchInput(props: any) {
+      // SEARCH
+      const searchInput = useRef<HTMLInputElement>(null);
+
+
+
+      const handleSearchChange = (event: any) => {
+        const newSearchText = event.target.value ?? '';
+        setSearchText(newSearchText);
+      };
+
+      const handleSearchSubmit = (event: any) => {
+        event.preventDefault();
+        props.onSearch({ search: searchText }); // Trigger to Parent
+      };
+
+      const handleGetData = (type :string) => {
+        axios.get(`claims/1/data-claim`)
+          .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();
+          })
+      }
+
+      useEffect(() => {
+        // Trigger First Search
+        // setSearchText(searchParams.get('search') ?? '');
+      }, []);
+
+      return (
+        <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+          <Stack direction={'row'} spacing={2} sx={{ mb: 2 }}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              label="Search"
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              value={searchText}
+              placeholder='Search Code or Member ID...'
+            />
+             <Button
+                variant="contained"
+                startIcon={<Download />}
+                onClick={() => handleGetData('DO')}
+                sx={{ p: 1.8 }}
+              >
+                Export
+              </Button>
+          </Stack>
+        </form>
+      );
+    }
+
+    function ImportForm(props: any) {
+      // IMPORT
+      // Create Button Menu
+      const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+      return (
+        <div>
+          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+            <SearchInput onSearch={applyFilter} />
+            {/* <Button
+              variant="outlined"
+              startIcon={<AddIcon />}
+              sx={{ p: 1.8 }}
+              onClick={() => {
+                navigate('/claims/create');
+              }}
+            >
+              Create
+            </Button> */}
+          </Stack>
+        </div>
+      );
+    }
+
+    const searchInput = useRef<HTMLInputElement>(null);
+
+
+      //handle search
+      const handleSearchChange = (event: any) => {
+        const newSearchText = event.target.value ?? '';
+        setSearchText(newSearchText);
+      };
+
+      const handleSearchSubmit = (event: any) => {
+        event.preventDefault();
+        loadDataTableData();
+      };
+
+
+
+      useEffect(() => {
+        // Trigger First Search
+        //setSearchText(searchText);
+      }, []);
+
+      const item = [
+        {
+          id: '',
+          value: '',
+          name: 'Semua',
+        },
+      ];
+
+      // const handleClick = () => {
+
+      // }
+
+
+
+    // Dummy Default Data
+    const [dataTableIsLoading, setDataTableLoading] = useState(true);
+    const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(
+      LaravelPaginatedDataDefault
+    );
+
+
+
+    const loadDataTableData = async (appliedFilter: any | null = null) => {
+      setDataTableLoading(true);
+      const year = startDate?.getFullYear();
+      const month = (startDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+      const day = startDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+      const formattedDate = year && month && day ? `${year}-${month}-${day}` : '';
+
+      const year1 = endDate?.getFullYear();
+      const month1 = (endDate?.getMonth() + 1).toString().padStart(2, '0'); // Tambahkan 1 karena bulan dimulai dari 0, dan padStart untuk memastikan 2 digit
+      const day1 = endDate?.getDate().toString().padStart(2, '0'); // padStart untuk memastikan 2 digit
+
+      const formattedDate1 = year1 && month1 && day1 ? `${year1}-${month1}-${day1}` : '';
+
+      const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+      const response = await axios.get('/claims-files-provider', {
+        params: {
+          search: searchText,
+          start_date: formattedDate ? formattedDate : null,
+          end_date:formattedDate1,
+          provider: dataProvider,
+          order: order,
+          orderBy: orderBy,
+          page: perPage,
+        }
+      });
+
+      setDataTableLoading(false);
+
+      setDataTableData(response.data);
+    };
+
+    const getProvider =  async () => {
+      const response = await axios.get('/claims/get-provider');
+      setProviders(response.data)
+    }
+
+    const applyFilter = async (searchFilter: { search: string }) => {
+      await loadDataTableData(searchFilter);
+      setSearchParams(searchFilter);
+    };
+
+    const handlePageChange = (event: ChangeEvent, value: number): void => {
+      setPerPage(value);
+    };
+
+    const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
+    const handleCloseDialogSubmit = () => {
+        setOpenDialogSubmit(false);
+    }
+
+    function toTitleCase(str: string | null) {
+        return str.replace(/\w\S*/g, function(txt) {
+            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+        });
+    }
+
+    const [approve, setApprove] = useState('');
+
+    const [reasonDecline, setReasonDecline] = useState('');
+
+    const handleReasonDeclineChange = (event) => {
+        setReasonDecline(event.target.value);
+        // Tambahkan logika yang diperlukan di sini
+    };
+
+    const handleSubmitData = async () => {
+        try {
+            const response = await axios.post('download-zip', { selectedRows: selectedRows });
+            const fileUrl = response.data.file_url; // Perbaikan disini
+            enqueueSnackbar('Data berhasil di download', { variant: 'success' });
+            window.open(fileUrl, '_blank');
+            setOpenDialogSubmit(false);
+            setTimeout(() => {
+                window.location.reload();
+              }, 5000); // Reload the page after 5 seconds
+        } catch (error) {
+            enqueueSnackbar('Data Gagal di download', { variant: 'error' });
+        }
+    };
+
+    const handleSubmitData1 = () => {
+      //approve or decline
+      if (!reasonDecline && approve == 'decline') {
+        enqueueSnackbar('Mohon isi alasan', { variant: 'warning' });
+        return false;
+      }
+      Promise.all(selectedRows.map(send_bulk))
+        .then(() => {
+          enqueueSnackbar('All requests processed successfully', { variant: 'success' });
+          setOpenDialogSubmit(false);
+          setTimeout(() => {
+            window.location.reload();
+          }, 5000); // Reload the page after 5 seconds
+        })
+        .catch((error) => {
+          enqueueSnackbar(error.response?.data?.message ?? 'Something went wrong!', { variant: 'error' });
+        });
+    };
+
+    function send_bulk(id) {
+      return axios.post(`claims/${id}/${approve}`, { reasonDecline: reasonDecline });
+    }
+
+
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const createMenu = Boolean(anchorEl);
+    const importClaimManagement = useRef<HTMLInputElement>(null);
+    const [currentImportFileName, setCurrentImportFileName] = useState(null);
+    const [importLoading, setImportLoading] = useState(false);
+    const [importResult, setImportResult] = useState(null);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleImportButton = () => {
+        if (importClaimManagement?.current) {
+          handleClose();
+        importClaimManagement.current ? importClaimManagement.current.click() : console.log('No File selected');
+        } else {
+          alert('No file selected');
+        }
+    };
+    const handleCancelImportButton = () => {
+      if(importClaimManagement.current)
+      {
+          importClaimManagement.current.value = '';
+          importClaimManagement.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(importClaimManagement.current && importClaimManagement.current.files)
+      {
+          if (importClaimManagement.current?.files.length) {
+              const formData = new FormData();
+              formData.append('file', importClaimManagement.current?.files[0]);
+              setImportLoading(true);
+              axios
+                  .post('claims/import', formData)
+                  .then((response) => {
+                  handleCancelImportButton();
+                  loadDataTableData();
+                  setImportResult(response.data);
+                  setImportLoading(false);
+                  enqueueSnackbar('Success Import Claim Managemenet', { variant: 'success' });
+                  })
+                  .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('claims/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();
+    });
+
+
+  };
+
+  const handleExportReportFiled = async () => {
+
+    await axios
+      .post('claims/exportFiled', { params: importResult?.data.result_rows })
+      .then((res) => {
+        enqueueSnackbar('Data berhasil di Export', {
+          variant: 'success',
+          anchorOrigin: { horizontal: 'right', vertical: 'top' },
+        });
+        setIsLoading(false)
+
+        document.location.href = res.data.data.file_url;
+      })
+      .catch((err) =>
+        enqueueSnackbar('Data Gagal di Export', {
+          variant: 'error',
+          anchorOrigin: { horizontal: 'right', vertical: 'top' },
+        })
+
+      );
+  };
+
+
+    // useEffect(() => {
+    //   loadDataTableData();
+    //   getProvider();
+    // }, []);
+
+    const headStyle = {
+      fontWeight: 'bold',
+    };
+    const headCells = [
+      {
+        id: 'created_at',
+        align: 'left',
+        label: 'Date Submission',
+        isSort: true,
+      },
+      {
+        id: 'code',
+        align: 'left',
+        label: 'Code',
+        isSort: true,
+      },
+      {
+        id: 'name',
+        align: 'left',
+        label: 'Name',
+        isSort: false,
+      },
+      {
+        id: 'provider',
+        align: 'left',
+        label: 'Provider',
+        isSort: false,
+      },
+      {
+        id: 'files',
+        align: 'left',
+        label: 'Nama File',
+        isSort: false,
+      },
+    ];
+
+    const orders = {
+      order: order,
+      setOrder: setOrder,
+      orderBy: orderBy,
+      setOrderBy: setOrderBy,
+    };
+    const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+      handleRequestSort(event, property);
+    };
+    const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
+      const isAsc = orders?.orderBy === property && orders?.order === 'asc';
+
+      orders?.setOrder(isAsc ? 'desc' : 'asc');
+      orders?.setOrderBy(property);
+    };
+    // Called on every row to map the data to the columns
+    function createData(data: Claims): Claims  {
+      return {
+        ...data,
+      };
+    }
+
+    {
+      /* ------------------ TABLE ROW ------------------ */
+    }
+    function Row(props: { row: ReturnType<typeof createData>, isSelected: boolean, onSelect: (id: string) => void }) {
+      const { row, isSelected, onSelect } = props;
+       // Memperbaiki destrukturisasi props
+
+      const handleRowCheckboxChange = () => {
+        onSelect(row.id); // Panggil fungsi onSelect dari komponen induk dengan id baris saat checkbox di baris diklik
+      };
+
+      const [open, setOpen] = React.useState(false);
+
+      const test = 1000;
+
+      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">
+            <Checkbox checked={isSelected} onChange={handleRowCheckboxChange} />
+            </TableCell>
+            <TableCell align="left">{row?.created_at ? fDateTime(row?.created_at) : ''}</TableCell>
+            <TableCell align="left">{row?.code}</TableCell>
+            {/* <TableCell align="left">{row.code}</TableCell> */}
+            <TableCell align="left">{row?.name}</TableCell>
+            <TableCell align="left">{row?.provider}</TableCell>
+            <TableCell align='left'>
+            <a
+                href={row.path}
+                    style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
+                    target="_blank"
+                >
+                    <Typography variant="body2" gutterBottom>{row.files ? row.files : '-'}</Typography>
+                </a>
+            </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>
+      );
+    }
+    {
+      /* ------------------ END TABLE ROW ------------------ */
+    }
+
+
+
+    function TableContent() {
+      return (
+        <Table aria-label="collapsible table">
+          {/* ------------------ TABLE HEADER ------------------ */}
+          <TableHead>
+            <TableRow>
+              {selectedRows.length > 0 ? (
+                <>
+                  <TableCell style={{ backgroundColor: '#D1F1F1' }}  align="left" colSpan={2}>
+                    <Stack direction="row">
+                      <Checkbox checked={selectAll} onChange={handleSelectAll} />
+                      {selectedRows.length > 0 ? selectedRows.length : '0'}  &nbsp;<Typography variant='subtitle2'>Selected</Typography>
+                    </Stack>
+                  </TableCell>
+                  <TableCell style={{ backgroundColor: '#D1F1F1' }} align="left" colSpan={6}>
+
+                  </TableCell>
+                  {/* <TableCell style={{ backgroundColor: '#D1F1F1' }} align="right" colSpan={2}>
+                    <Button variant="text" color="error" startIcon={<CancelIcon />} onClick={() => {setOpenDialogSubmit(true);
+                                          setApprove('decline');}}>
+                      <Typography variant='subtitle2'>Decline</Typography>
+                    </Button>
+                  </TableCell> */}
+                  <TableCell style={{ backgroundColor: '#D1F1F1' }} align="left" colSpan={4}>
+                    <Button variant="text" color="primary" startIcon={<CheckCircleIcon />} onClick={() => {setOpenDialogSubmit(true);
+                                          setApprove('approve');}}>
+                      <Typography variant='subtitle2'>Download</Typography>
+                    </Button>
+                  </TableCell>
+
+                </>
+              ) : (
+                <>
+                <TableCell style={headStyle} align="left">
+                    <Checkbox checked={selectAll} onChange={handleSelectAll} />
+                  </TableCell>
+                {headCells &&
+                  headCells.map((headCell, index) => (
+                    <TableCell
+                      key={index}
+                      sortDirection={orders?.orderBy === headCell.id ? orders.order : false}
+                      // @ts-ignore
+                      align={headCell.align}
+                      sx={{ padding: 2 }}
+                      width={headCell.width ? headCell.width : 'auto'}
+                    >
+                      {headCell.isSort ? (
+                        <TableSortLabel
+                          active={orders?.orderBy === headCell.id}
+                          direction={orders?.orderBy === headCell.id ? orders.order : 'asc'}
+                          onClick={createSortHandler(headCell.id)}
+                        >
+                          {headCell.label}
+                          {orders?.orderBy === headCell.id ? (
+                            <Box component="span" sx={visuallyHidden}>
+                              {orders.order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                            </Box>
+                          ) : null}
+                        </TableSortLabel>
+                      ) : (
+                        headCell.label
+                      )}
+                    </TableCell>
+                  ))}
+                </>
+
+              )}
+
+
+            </TableRow>
+          </TableHead>
+          {/* ------------------ END TABLE HEADER ------------------ */}
+
+          {/* ------------------ TABLE ROW ------------------ */}
+          {dataTableIsLoading ? (
+            <TableBody>
+              <TableRow>
+                <TableCell colSpan={11} align="center">
+                  Loading
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          ) : dataTableData.data.length === 0 ? (
+            <TableBody>
+              <TableRow>
+                <TableCell colSpan={11} align="center">
+                  No Data
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          ) : (
+            <TableBody>
+              {dataTableData.data.map((row) => (
+                <Row key={row.id} row={row} isSelected={selectedRows.includes(row.id)} onSelect={handleRowSelect} />
+              ))}
+            </TableBody>
+          )}
+          {/* ------------------ END TABLE ROW ------------------ */}
+        </Table>
+      );
+    }
+
+    return (
+      <Card>
+        <Grid
+          container
+          spacing={2}
+          sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
+        >
+          <Grid item xs={12} md={12} lg={12}>
+          <form style={{ width: '100%' }}>
+          <Grid container spacing={1} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+            <input
+              type="file"
+              id="file"
+              ref={importClaimManagement}
+              style={{ display: 'none' }}
+              onChange={handleImportChange}
+              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+          />
+          {!currentImportFileName && (
+            <>
+            <Grid item xs={12} md={4}>
+              <TextField
+                id="search-input"
+                ref={searchInput}
+                variant="outlined"
+                value={searchText}
+                fullWidth
+                onChange={handleSearchChange}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    handleSearchSubmit(event);
+                  }
+                }}
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <Search />
+                    </InputAdornment>
+                  ),
+                  placeholder: 'Search Code or Name',
+                }}
+              />
+            </Grid>
+            <Grid item xs={12} md={5} display="flex" sx={{ gap: '16px' }}>
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DesktopDatePicker
+                  value={startDate}
+                  inputFormat="dd/MM/yyyy"
+                  onChange={(value) => {
+
+                    // loadDataTableData();
+                    setStartDate(value);
+                  }}
+                  renderInput={(params) => <TextField {...params} fullWidth label="Start" />}
+                />
+              </LocalizationProvider>
+
+              <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DesktopDatePicker
+                  value={endDate}
+                  inputFormat="dd/MM/yyyy"
+                  onChange={(value) => {
+                    setEndDate(value);
+                  }}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      fullWidth
+                      label="End"
+                      // error={!!error}
+                      // helperText={error?.message}
+                      // {...other}
+                    />
+                  )}
+                />
+              </LocalizationProvider>
+            </Grid>
+            <Grid item xs={12} md={3}>
+            {
+            providers ? (
+              <Autocomplete
+                  id="provider"
+                  options={providers}
+                  getOptionLabel={(option) => option.name || ''}
+                  value={providers.find((item) => item.id === dataProvider) || null}
+                  onChange={(event, value) => {
+                    if (value) {
+                      setDataProvider(value.id);
+                    } else {
+                      setDataProvider(null);
+                    }
+                  }}
+                  renderInput={(params) => (
+                    <TextField
+                      {...params}
+                      label="Provider"
+                      fullWidth
+                    />
+                  )}
+                />
+              ):(
+                <>
+                    <Typography variant='body2' align='center'>Loading...</Typography>
+                </>
+              )
+            }
+            </Grid>
+            {/* <Grid item xs={12} md={3} display="flex" sx={{ gap: '16px' }}>
+                <FormControl >
+                  <LoadingButton
+                    id="upload-button"
+                    variant="outlined"
+                    startIcon={<UploadIcon />}
+                    sx={{ p: 1.8 }}
+                    loading={isLoadingImport}
+                    onClick={handleClick}
+                  >
+                    <Typography variant="inherit" sx={{ marginLeft: 1 }}>
+                      Import
+                    </Typography>
+                  </LoadingButton>
+                  <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>
+                  </Menu>
+                </FormControl>
+                <FormControl >
+                  <LoadingButton
+                    id="upload-button"
+                    variant="contained"
+                    startIcon={<Download />}
+                    sx={{ p: 1.8 }}
+                    onClick={handleExportReport}
+                    loading={isLoading}
+                  >
+                    <Typography variant="inherit" sx={{ marginLeft: 1 }}>
+                      Export
+                    </Typography>
+                  </LoadingButton>
+                </FormControl>
+              </Grid> */}
+              </>
+            )}
+            {currentImportFileName && (
+              <Grid item xs={12} md={12}>
+              <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>
+              </Grid>
+          )}
+            {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'}]</Typography>
+                  ))} */}
+                  &nbsp;Report:
+                  &nbsp;<u onClick={handleExportReportFiled} style={{cursor:'pointer'}}>Download Data Result Import</u>
+              </Box>
+              </Stack>
+          )}
+          </Grid>
+          </form>
+          </Grid>
+        </Grid>
+
+        <DataTable
+          isLoading={dataTableIsLoading}
+          lastRequest={0}
+          data={dataTableData}
+          handlePageChange={handlePageChange}
+          TableContent={<TableContent />}
+        />
+        <Dialog open={openDialogSubmit} onClose={handleCloseDialogSubmit} 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">Confirmation</Typography>
+                          </Stack>
+                          <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogSubmit}>
+                              <CloseIcon />
+                          </IconButton>
+                      </Stack>
+                      </DialogTitle>
+                      <DialogContent>
+
+                          <Stack spacing={2} padding={2}>
+                              <Typography variant='body1'>Are you sure to Download this files selected ?</Typography>
+                              {approve == "decline" ? (
+                                  <Stack direction='row' spacing={2} marginTop={2}>
+                                  <TextField
+                                      id="outlined-multiline-static"
+                                      label="Reason decline"
+                                      multiline
+                                      rows={4} // Tentukan jumlah baris yang diinginkan
+                                      defaultValue=""
+                                      onChange={handleReasonDeclineChange}
+                                      variant="outlined"
+                                      sx={{width:'100%'}}
+                                      // fullWidth // Gunakan ini jika Anda ingin input memenuhi lebar Stack
+                                  />
+                                  </Stack>
+                                    ): ''}
+                          </Stack>
+                      </DialogContent>
+                      <DialogActions>
+                      <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogSubmit}>Cancel</Button>
+                      <Button sx={{backgroundColor: (approve === 'decline' ? '' : '#19BBBB'), color: (approve === 'decline' ? '#FF4842' : ''), borderColor: '#FF4842'}} onClick={handleSubmitData} variant={(approve === 'decline' ? 'outlined' : 'contained')}>{(approve === "decline" ? 'Decline' : 'Download')}</Button>
+                      </DialogActions>
+                  </Dialog>
+      </Card>
+    );
+  }
--- a/frontend/dashboard/src/routes/index.tsx
+++ b/frontend/dashboard/src/routes/index.tsx
@@ -418,6 +418,10 @@ export default function Router() {
          path: 'report/appointments/:id/edit',
          element: <AppointmentCreate />,
        },
+        {
+          path: 'report/files-provider',
+          element: <FilesProvider />,
+        },
        {
          path: 'report/live-chat',
          element: <Livechat />,
@@ -507,6 +511,18 @@ export default function Router() {
          path: 'custormer-service/final-log/detail/:id',
          element: <FinalLogDetail />,
        },
+        {
+          path: 'e-prescription/live-chat',
+          element: <EPrescription />,
+        },
+        {
+          path: 'e-prescription/live-chat/:id',
+          element: <EPrescriptionCreate />,
+        },
+        {
+          path: 'e-prescription/live-chat/:id/show',
+          element: <EPrescriptionShow />,
+        },
      ],
    },
    // {
@@ -630,7 +646,7 @@ const InpatientMonitoring = Loadable(lazy(() => import('../pages/CaseManagement/
 /**
 * Customer Service
 */
-// Request 
+// Request
 const RequestLog    = Loadable(lazy(() => import('../pages/CustomerService/Request/Index')))
 const RequestLogDetail  = Loadable(lazy(() => import('../pages/CustomerService/Request/Detail')))
 // Final LOG
@@ -662,10 +678,17 @@ const Appointment = Loadable(lazy(() => import('../pages/Report/Appointments/Ind
 const AppointmentCreate = Loadable(lazy(() => import('../pages/Report/Appointments/Create')));
 const AppointmentShow = Loadable(lazy(() => import('../pages/Report/Appointments/Show')));

+const FilesProvider = Loadable(lazy(() => import('../pages/Report/FilesProvider/Index')));
+
 const Livechat = Loadable(lazy(() => import('../pages/Report/Livechat/Index')));
 const LivechatCreate = Loadable(lazy(() => import('../pages/Report/Livechat/Create')));
 const LivechatShow = Loadable(lazy(() => import('../pages/Report/Livechat/Show')));

+
+const EPrescription = Loadable(lazy(() => import('../pages/EPrescription/Livechat/Index')));
+const EPrescriptionCreate = Loadable(lazy(() => import('../pages/EPrescription/Livechat/Create')));
+const EPrescriptionShow = Loadable(lazy(() => import('../pages/EPrescription/Livechat/Show')));
+
 const LinksehatPayment = Loadable(lazy(() => import('../pages/Report/LinksehatPayments/Index')));

 const MasterDrug = Loadable(lazy(() => import('../pages/Master/Drug/Index')));