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

Modules/Client/Http/Controllers/Api/ClaimRequestController.php

@@ -68,6 +68,19 @@ class ClaimRequestController extends Controller
                     'system_origin' => 'client-portal'
                 ]);
 
+                // Claim Log
+                DB::table('claim_logs')
+                ->insert([
+                    'claim_request_id' => $newClaimRequest->id,
+                    'status' => 'requested',
+                    'date' => date('Y-m-d H:i:s'),
+                    'description' => "Claim Requested for Member : {$member->member_id} - ({$member->full_name})",
+                    'system_origin' => 'hospital-portal',
+                    'created_by' => auth()->user()->id,
+                    'created_at' => date('Y-m-d H:i:s'),
+                    'updated_at'=> date('Y-m-d H:i:s'),
+                ]);
+
                 if ($request->hasFile('laboratorium')) {
                     foreach ($request->laboratorium[$key] as $file) {
                         $pathFile = File::storeFile('claim-result', $newClaimRequest->id, $file);

Modules/HospitalPortal/Http/Controllers/Api/ClaimRequestController.php

@@ -94,7 +94,9 @@ class ClaimRequestController extends Controller
             'date' => date('Y-m-d H:i:s'),
             'description' => "Claim Requested for Member : {$member->member_id} - ({$member->full_name})",
             'system_origin' => 'hospital-portal',
-            'created_by' => auth()->user()->id
+            'created_by' => auth()->user()->id,
+            'created_at' => date('Y-m-d H:i:s'),
+            'updated_at'=> date('Y-m-d H:i:s'),
         ]);
 
 

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

@@ -21,6 +21,7 @@ use Modules\Internal\Transformers\ClaimEditResource;
 use Modules\Internal\Transformers\ClaimHistoryCareResource;
 use Box\Spout\Reader\Common\Creator\ReaderEntityFactory;
 use Box\Spout\Writer\Common\Creator\WriterEntityFactory;
+use Illuminate\Support\Facades\DB;
 
 use PDF;
 
@@ -530,6 +531,94 @@ class ClaimController extends Controller
         ]);
     }
 
+    public function getDetailClaims($claim_id)
+    {
+        $customer_data = DB::table('claim_requests')
+                    ->leftJoin('claims', 'claim_requests.id', '=', 'claims.claim_request_id')
+                    ->leftJoin('members', 'claim_requests.member_id', '=', 'members.id')
+                    ->leftJoin('corporate_employees', 'members.id', '=', 'corporate_employees.member_id')
+                    ->leftJoin('corporates', 'corporate_employees.corporate_id', '=', 'corporates.id')
+                    ->where('claim_requests.id', '=', $claim_id)
+                    ->select(
+                        'claim_requests.code',
+                        'claim_requests.submission_date',
+                        'claims.status',
+                        'members.name',
+                        'members.payor_id',
+                        'members.member_id',
+                        'claim_requests.payment_type',
+                        'corporates.name AS coporate_name',                        
+                    )
+                    ->first();
+        $results['customer_data'] = $customer_data;
+
+        $documents = DB::table('files')
+                                ->where('fileable_type', 'App\Models\ClaimRequest')
+                                ->where('fileable_id', $claim_id)
+                                ->select('original_name', \DB::raw("CONCAT('" . env('APP_URL') . "/storage/', path) as path"), 'type')
+                                ->orderBy('id', 'desc')
+                                ->get();
+        $results['documents'] = $documents;
+
+        $request_documents = DB::table('claim_request_files')
+        ->where('claim_request_id', $claim_id)
+        ->get();
+        $results['request_documents'] = $request_documents;
+
+        return Helper::responseJson($results);
+    }
+
+    public function requestDocuments(Request $request)
+    {
+        $request->validate([
+            'claim_id' => 'required',
+            'note' => 'required',
+        ]);
+
+        $condition = $request->input('condition');
+        $diagnosis = $request->input('diagnosis');
+        $result = $request->input('result');
+        $note = $request->input('note');
+
+        $dataToInsert = [];
+        if ($condition) {
+            $dataToInsert[] = [
+                'claim_request_id' => $request->claim_id,
+                'date' => date('Y-m-d H:i:s'),
+                'type' => 'claim-kondisi',
+                'description' => $note,
+                'created_by' =>auth()->user()->id,
+                'created_at' => date('Y-m-d H:i:s'),
+                'updated_at' => date('Y-m-d H:i:s'),
+            ];
+        }
+        if ($diagnosis) {
+            $dataToInsert[] = [
+                'claim_request_id' => $request->claim_id,
+                'date' => date('Y-m-d H:i:s'),
+                'type' => 'claim-diagnosis',
+                'description' => $note,
+                'created_by' =>auth()->user()->id,
+                'created_at' => date('Y-m-d H:i:s'),
+                'updated_at' => date('Y-m-d H:i:s'),
+            ];
+        }
+        if ($result) {
+            $dataToInsert[] = [
+                'claim_request_id' => $request->claim_id,
+                'date' => date('Y-m-d H:i:s'),
+                'type' => 'claim-result',
+                'description' => $note,
+                'created_by' =>auth()->user()->id,
+                'created_at' => date('Y-m-d H:i:s'),
+                'updated_at' => date('Y-m-d H:i:s'),
+            ];
+        }
+        DB::table('claim_request_files')->insert($dataToInsert);      
+
+        return Helper::responseJson([]);
+    }
+
     //////////////////// History Care Hospital ///////////////////////////
 
     public function storeHistoryCare(Request $request, $id){

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

@@ -227,6 +227,19 @@ class ClaimRequestController extends Controller
                 'system_origin' => 'primecenter'
             ]);
 
+            // Claim Log
+            DB::table('claim_logs')
+            ->insert([
+                'claim_request_id' => $id,
+                'status' => 'reviewed',
+                'date' => date('Y-m-d H:i:s'),
+                'description' => "Claim Requested Successfully Reviewed",
+                'system_origin' => 'prime-center',
+                'created_by' => auth()->user()->id,
+                'created_at' => date('Y-m-d H:i:s'),
+                'updated_at'=> date('Y-m-d H:i:s'),
+            ]);
+
         } catch (\Exception $e) {
             return $e->getMessage();;
         }
@@ -366,7 +379,8 @@ class ClaimRequestController extends Controller
                     ->leftJoin('corporate_divisions', 'corporate_employees.division_id', '=', 'corporate_divisions.id')
                     ->where('claim_requests.id', '=', $claimRequestId)
                     ->select(
-                        'claim_requests.submission_date', 
+                        'claim_requests.submission_date',
+                        'claim_requests.code',  
                         DB::raw('
                             CASE 
                                 WHEN claim_requests.status = "requested" THEN "requested"

Modules/Internal/Routes/api.php

@@ -203,6 +203,8 @@ Route::prefix('internal')->group(function () {
         Route::get('claims/{id}/edit', [ClaimController::class, 'edit']);
         Route::post('check-limit', [ClaimController::class, 'checkLimit']);
         Route::get('claims/1/data-claim', [ClaimController::class, 'dataClaimReport']);
+        Route::get('claims/detail/{id}', [ClaimController::class, 'getDetailClaims']);
+        Route::post('claims/request-documents', [ClaimController::class, 'requestDocuments']);
 
         Route::get('search-organizations', [OrganizationController::class, 'searchOrganization']);
         Route::get('search-specialities', [SpecialityController::class, 'searchSpeciality']);

frontend/client-portal/src/pages/ClaimReport/Detail.tsx

@@ -20,7 +20,7 @@ import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 
 // ----------------------------------------------------------------------
 
-export default function UserProfile() {
+export default function Detail() {
   const navigate = useNavigate();
   const { themeStretch } = useSettings();
   const [data, setData] = useState();

frontend/client-portal/src/pages/ClaimReport/DetailTimeline.tsx

@@ -70,7 +70,7 @@ export default function NoOppositeContent({data}) {
           	<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
           		<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
             		<Stack direction="row" sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
-        				  <Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : ii") : ''}</Item1>
+        				  <Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : mm") : ''}</Item1>
         				  <Item2 sx={{backgroundColor: dataTimeline.txt_status_backgroundColor, color: dataTimeline.txt_status_color}}>{dataTimeline.txt_status}</Item2>
         				</Stack>
         				<Stack direction="row" spacing={2} sx={{marginBottom: 2}}>

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

@@ -53,7 +53,7 @@ const navConfig = [
         children: [
           { title: 'Corporate', path: '/corporates' },
           // { title: 'Corporate Create', path: '/corporates/create' },
-          { title: 'Formularium', path: '/master/formularium-template' },
+          { title: 'Formularium', path: '/master/formularium-template-v2' },
           { title: 'Master ICD-10 Diagnosis', path: '/master/diagnosis-template' },
           { title: 'Hospitals', path: '/hospitals' },
         ],

frontend/dashboard/src/pages/ClaimRequests/Detail.tsx

@@ -31,7 +31,7 @@ import { enqueueSnackbar } from 'notistack';
 
 // ----------------------------------------------------------------------
 
-export default function UserProfile() {
+export default function Detail() {
     const location = useLocation();
     const queryParams = new URLSearchParams(location.search);
     const code = queryParams.get('code');
@@ -133,7 +133,7 @@ export default function UserProfile() {
         <Container maxWidth={themeStretch ? false : 'xl'}>
             <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
             <ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
-            <Typography variant="h5" sx={{marginLeft:2}}>{code}</Typography>
+            <Typography variant="h5" sx={{marginLeft:2}}>{(data && data.data) ? data.data.status.code : ''}</Typography>
             {data ? (
             <Stack direction="row" spacing={2} ml="auto">
                 <Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>

frontend/dashboard/src/pages/ClaimRequests/DetailTimeline.tsx

@@ -70,7 +70,7 @@ export default function NoOppositeContent({data}) {
           	<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
           		<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
             		<Stack direction="row" sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
-        				  <Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : ii") : ''}</Item1>
+        				  <Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : mm") : ''}</Item1>
         				  <Item2 sx={{backgroundColor: dataTimeline.txt_status_backgroundColor, color: dataTimeline.txt_status_color}}>{dataTimeline.txt_status}</Item2>
         				</Stack>
         				<Stack direction="row" spacing={2} sx={{marginBottom: 2}}>

frontend/dashboard/src/pages/ClaimRequests/List.tsx

@@ -368,7 +368,7 @@ export default function List() {
                   <EditOutlinedIcon />
                   Edit
                 </MenuItem>
-                <MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'/?code='+row.code)}>
+                <MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
                   <FindInPageOutlinedIcon />
                   Detail
                 </MenuItem>

frontend/dashboard/src/pages/Claims/Detail.tsx

@@ -0,0 +1,341 @@
+// mui
+import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton } from '@mui/material';
+// components
+import Page from '../../components/Page';
+// utils
+import useSettings from '../../hooks/useSettings';
+// react
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import { useEffect, useState, useRef } from 'react';
+import axios from '../../utils/axios';
+// pages
+import { format } from 'date-fns';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+
+import { enqueueSnackbar } from 'notistack';
+
+// ----------------------------------------------------------------------
+
+export default function Detail() {
+    const location = useLocation();
+    const queryParams = new URLSearchParams(location.search);
+    const code = queryParams.get('code');
+
+    const navigate = useNavigate();
+    const { themeStretch } = useSettings();
+    const [customerData, setCustomerData] = useState(null);
+    const [documentData, setDocumentData] = useState(null);
+    const [requestDocumentData, setRequestDocumentData] = useState(null);
+
+    const { id } = useParams();
+
+    useEffect(() => {
+        axios
+        .get('/claims/detail/'+id)
+        .then((response) => {
+            setCustomerData(response.data.data.customer_data);
+            setDocumentData(response.data.data.documents);
+            setRequestDocumentData(response.data.data.request_documents);   
+        })
+        .catch((error) => {
+            console.error(error);
+        });
+
+    }, []); 
+
+    function toTitleCase(str) {
+        return str.replace(/\w\S*/g, function(txt) {
+            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+        });
+    }
+
+    const style1 = {
+        color: '#919EAB',
+        width: '30%'
+    }
+    const style2 = {
+        width: '70%'
+    }
+    const marginBottom1 = {
+        marginBottom: 1,
+    }
+
+    const [openDialogRequest, setOpenDialogRequest] = useState(false);
+    const handleCloseDialogUpdate = () => {
+        setOpenDialogRequest(false);
+    }
+
+    const [conditionChecked, setConditionChecked] = useState(true);
+    const [diagnosisChecked, setDiagnosisChecked] = useState(false);
+    const [supportingResultChecked, setSupportingResultChecked] = useState(false);
+
+    const handleConditionChange = (event) => {
+        setConditionChecked(event.target.checked);
+    };
+
+    const handleDiagnosisChange = (event) => {
+        setDiagnosisChecked(event.target.checked);
+    };
+
+    const handleSupportingResultChange = (event) => {
+        setSupportingResultChecked(event.target.checked);
+    };
+
+    const [noteField, setNoteField] = useState('');
+    const [noteFieldError, setNoteFieldError] = useState('');
+    const isRequiredFieldsFilled = () => {
+        return noteField.trim() !== '';
+    };
+
+    const handelRequestDocument = () => {
+        const dataForm = {
+            claim_id: id,
+            condition: conditionChecked,
+            diagnosis: diagnosisChecked,
+            result: supportingResultChecked,
+            note: noteField,
+        }
+        axios
+        .post('/claims/request-documents', dataForm)
+        .then((response) => {
+            enqueueSnackbar('Success Request Document', { variant: 'success' });
+            setOpenDialogRequest(false);
+            window.location.reload();
+        })
+        .catch((error) => {
+            enqueueSnackbar('Something Went Wrong', { variant: 'error' });
+        })
+    }
+    
+    return (
+        <Page title='Detail'>
+        <Container maxWidth={themeStretch ? false : 'xl'}>
+            <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
+            <ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
+            <Typography variant="h5" sx={{marginLeft:2}}>{(customerData && customerData.code ? customerData.code : '')}</Typography>
+            {customerData ? (
+                <Stack direction="column" spacing={1} alignItems="center" sx={{marginLeft:'auto'}}>
+                    <Stack direction="row" spacing={2}>
+                        <Typography variant="body2" sx={{color: '#757575'}}>Status</Typography>
+                        <Typography variant="body2" fontWeight="bold">{(customerData && customerData.status) ? toTitleCase(customerData.status) : ''}</Typography>
+                    </Stack>
+                    <Stack direction="row" spacing={2}>
+                        <Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
+                        <Typography variant="body2" fontWeight="bold">{(customerData && customerData.submission_date) ? format(new Date(customerData.submission_date), "d MMM yyyy") : ''}</Typography>
+                    </Stack>
+                </Stack>
+            ) : ''}
+            </Stack>
+            <Grid container spacing={2}>
+            {customerData ? (
+                <Grid item xs={12} md={12}>
+                <Card sx={{padding:2}}  >
+                    <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Summary of Customer Data</Typography>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Full Name</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.name}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.payor_id}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.member_id}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Type</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(customerData.payment_type)}</Typography>
+                    </Stack>
+                    <Stack direction='row' spacing={2} sx={marginBottom1}>
+                        <Typography variant='subtitle2' sx={style1} gutterBottom>Corporate Name</Typography>
+                        <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(customerData.coporate_name)}</Typography>
+                    </Stack>
+                </Card>
+                </Grid>
+            ) : ''}
+            {documentData ? (
+                <Grid item xs={12} spacing={2}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Additional Documents</Typography>
+                            <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => setOpenDialogRequest(true)}>
+                                <Typography variant="button" display="block">Request Document</Typography>
+                            </Button>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                            {documentData?.map((documentType, index) => (
+                                <Stack direction="column" spacing={2} key={index}>
+                                    <Typography variant="Subtitle2" gutterBottom>
+                                    {documentType.type === 'claim-diagnosis' ? 
+                                        'Diagnosis'
+                                    : documentType.type === 'claim-kondisi' ? 
+                                        'Condition'
+                                    : documentType.type === 'claim-result' ?
+                                        'Supporting Result'
+                                    : documentType.type === 'claim-invoice' ?
+                                        'Invoice'
+                                    : ''}
+                                    </Typography>
+                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
+                                    <InsertDriveFileIcon />
+                                    <a
+                                        href={documentType.path}
+                                        style={{ cursor: 'pointer', textDecoration: 'underline', color: '#19BBBB' }}
+                                        target="_blank"
+                                    >
+                                        <Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
+                                    </a>
+                                    </Stack>
+                                </Stack>
+                            ))}
+                        </Stack>
+                        {requestDocumentData && requestDocumentData.length > 0 ? (
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Request Documents</Typography>
+                        ) : ''}
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                            {requestDocumentData?.map((documentType, index) => (
+                                <Stack direction="column" spacing={2} key={index}>
+                                    
+                                    <Stack direction="row" spacing={1} sx={{color: '#637381'}}>
+                                    <InsertDriveFileIcon />
+                                    <Typography variant="body2" gutterBottom>
+                                    {documentType.type === 'claim-diagnosis' ? 
+                                        'Diagnosis'
+                                    : documentType.type === 'claim-kondisi' ? 
+                                        'Condition'
+                                    : documentType.type === 'claim-result' ?
+                                        'Supporting Result'
+                                    : documentType.type === 'claim-invoice' ?
+                                        'Invoice'
+                                    : ''}
+                                    </Typography>
+                                    </Stack>
+                                </Stack>
+                            ))}
+                        </Stack>
+                        <Dialog open={openDialogRequest} onClose={handleCloseDialogUpdate} fullWidth={true}>
+                            <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
+                            <Stack direction="row" alignItems="center" justifyContent="space-between">
+                                <Stack direction="row" alignItems='center' spacing={1}>
+                                    <Typography variant="h6">Request Document</Typography>
+                                </Stack>
+                                <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
+                                    <CloseIcon />
+                                </IconButton>
+                            </Stack>
+                            </DialogTitle>
+                            <DialogContent>
+                            <Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
+                                <FormGroup>
+                                    <FormControlLabel
+                                        control={<Checkbox checked={conditionChecked} onChange={handleConditionChange} />}
+                                        label="Condition Document"
+                                    />
+                                    <FormControlLabel
+                                        control={<Checkbox checked={diagnosisChecked} onChange={handleDiagnosisChange} />}
+                                        label="Diagnosis Document"
+                                    />
+                                    <FormControlLabel
+                                        control={<Checkbox checked={supportingResultChecked} onChange={handleSupportingResultChange} />}
+                                        label="Supporting Result Document"
+                                    />
+                                </FormGroup>
+                                <TextField
+                                    label="Note"
+                                    required
+                                    value={noteField ? noteField : ''}
+                                    onChange={(e) =>{
+                                    setNoteField(e.target.value);
+                                    setNoteFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
+                                    }}
+                                    fullWidth
+                                    inputProps={{ maxLength: 50 }}
+                                    error={!!noteFieldError}
+                                    helperText={noteFieldError}
+                                />
+                            </Stack>
+                            </DialogContent>
+                            <DialogActions>
+                            <Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
+                            <Button sx={{backgroundColor: '#19BBBB'}} variant="contained" disabled={!isRequiredFieldsFilled()} onClick={() => handelRequestDocument()}>Request</Button>
+                            </DialogActions>
+                        </Dialog>
+                    </Card>
+                </Grid>
+            ): ''}
+                <Grid item xs={12} spacing={2}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>History of Hospital Care</Typography>
+                            <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
+                                <Typography variant="button" display="block">History</Typography>
+                            </Button>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} spacing={2}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnostic History</Typography>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} spacing={2}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnosis Summary</Typography>
+                            <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
+                                <Typography variant="button" display="block">Diagnosis</Typography>
+                            </Button>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} spacing={2}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Service</Typography>
+                            <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
+                                <Typography variant="button" display="block">Service</Typography>
+                            </Button>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} spacing={2}>
+                    <Card sx={{padding: 2}}>
+                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
+                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Client Benefit Configuration</Typography>
+                        </Stack>
+                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
+                        </Stack>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} md={12}>
+                    <Stack direction="row" padding={4}>
+                        <>
+                            <Button variant="outlined" sx={{color: '#FF4842', borderColor: '#FF4842', marginLeft: 'auto'}} >Decline</Button>
+                            <Button sx={{backgroundColor: '#19BBBB', marginLeft: 1}} variant="contained" onClick={()=> setOpenDialogSubmit(true)}>Submit</Button>
+                        </>
+                    </Stack>
+                </Grid>
+            </Grid>
+        </Container>
+        </Page>
+    );
+}

frontend/dashboard/src/pages/Claims/List.tsx

@@ -208,7 +208,7 @@ export default function List() {
                 <Edit />
                 Edit
               </MenuItem>
-              <MenuItem onClick={() => setOpen(!open) }>
+              <MenuItem onClick={() => navigate('/claims/detail/'+row.id+'') }>
                   <FindInPageOutlinedIcon />
                   Detail
               </MenuItem>

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

@@ -200,7 +200,7 @@ import {
                       } else {
                         return (
                         <TableRow key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                          <TableCell>{`${field}`}</TableCell>
+                          <TableCell align="center">{`${field}`}</TableCell>
                           <TableCell align="center">{`${value}`}</TableCell>
                           <TableCell align="center">{renderedValue}</TableCell>
                         </TableRow>

frontend/dashboard/src/pages/Master/Formularium/Master/CreateUpdate.tsx

@@ -21,6 +21,7 @@ export default function PlanCreate() {
 
   useEffect(() => {
     setCorporate(configuredCorporateContext.currentCorporate);
+    console.log(configuredCorporateContext.currentCorporate);
   }, [configuredCorporateContext])
 
   const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState<CorporatePlan>();

frontend/dashboard/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>
+  )
+}

frontend/dashboard/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>
+  )
+}

frontend/dashboard/src/pages/Master/FormulariumV2/Detail/Formularium.tsx

@@ -0,0 +1,289 @@
+// @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 { 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';
+
+
+export default function List() {
+  const navigate = useNavigate();
+  const { master_formularium_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [importResult, setImportResult] = useState(null);
+
+  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('corporate/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/${master_formularium_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/formularium/${master_formularium_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<[] | 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/${master_formularium_id}`, { params: filter });
+    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();
+  }, [])
+
+  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='center' width={100}></TableCell>
+              </TableRow>
+            </TableHead>
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
+  )
+}

frontend/dashboard/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 } = 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/${id}/detail`
+          },
+        ]} 
+      />
+      <Card>
+        <List />
+      </Card>
+    </Page>
+  )
+}

frontend/dashboard/src/pages/Master/FormulariumV2/FormulariumRow.tsx

@@ -0,0 +1,48 @@
+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 { Collapse, Grid, MenuItem, Paper, Table, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
+import React, { useEffect } from "react";
+import axios from "@/utils/axios";
+import { useNavigate, useParams } from "react-router-dom";
+import { MasterFormularium } from "./Type";
+
+type Props = {
+  props: MasterFormularium
+}
+
+export default function FormulariumRow({props} : Props) {
+  const navigate = useNavigate();
+
+  return (
+    <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`)}>
+              <FindInPageOutlinedIcon />
+              Detail
+            </MenuItem>
+            <MenuItem onClick={() => navigate(`/master/formularium-template-v2/${props.id}/edit`)}>
+              <EditOutlinedIcon />
+              Edit
+            </MenuItem>
+            <MenuItem>
+              <CachedOutlinedIcon />
+              Update Status
+            </MenuItem>
+            <MenuItem onClick={() => navigate(`/master/formularium-template-v2/${props.id}/history`)}>
+              <HistoryIcon />
+              History
+            </MenuItem>
+          </>
+        } />
+      </TableCell>
+    </TableRow>
+  )
+}

frontend/dashboard/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>
+  )
+}

frontend/dashboard/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>
+  )
+}

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

@@ -0,0 +1,172 @@
+// @mui
+import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Grid, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+// hooks
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import BasePagination from '../../../components/BasePagination';
+import FormulariumRow from "./FormulariumRow";
+import { MasterFormularium } from "./Type";
+
+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 [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/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 props={item}/>
+                  ))}
+                </TableBody>
+              )}
+            </Table>
+          </TableContainer>
+          <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+        </Card>
+      </Stack>
+    </React.Fragment>
+  )
+}

frontend/dashboard/src/pages/Master/FormulariumV2/Type.ts

@@ -0,0 +1,31 @@
+export type MasterFormularium = {
+    id: number
+    name: string
+    description: string
+}
+
+
+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
+  }

frontend/dashboard/src/routes/index.tsx

@@ -323,6 +323,26 @@ export default function Router() {
           path: 'master/formularium-template/:id/edit',
           element: <MasterFormulariumTemplateCreate />,
         },
+        {
+          path: 'master/formularium-template-v2',
+          element: <MasterFormulariumTemplateV2 />
+        },
+        {
+          path: 'master/formularium-template-v2/create',
+          element: <MasterFormulariumTemplateCreateV2 />
+        },
+        {
+          path: 'master/formularium-template-v2/:id/edit',
+          element: <MasterFormulariumTemplateCreateV2 />
+        },
+        {
+          path: 'master/formularium-template-v2/:id/history',
+          element: <MasterFormulariumTemplateHistoriesV2 />
+        },
+        {
+          path: 'master/formularium-template-v2/:id/detail',
+          element: <MasterFormulariumTemplateDetailV2 />
+        },
 
         {
           path: 'report/appointments',
@@ -393,6 +413,10 @@ export default function Router() {
           path: 'claims/edit/:id',
           element: <ClaimsCreate />,
         },
+        {
+          path: 'claims/detail/:id',
+          element: <ClaimsDetail />,
+        },
         {
           path: 'claims/:id',
           element: <ClaimShow />,
@@ -540,6 +564,11 @@ const MasterFormulariumTemplate = Loadable(lazy(() => import('../pages/Master/Fo
 const MasterFormulariumTemplateCreate = Loadable(lazy(() => import('../pages/Master/Formularium/Master/CreateUpdate')));
 const MasterFormulariumTemplateHistories = Loadable(lazy(() => import('../pages/Master/Formularium/Master/History')));
 
+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')))
+
 const CorporateServices = Loadable(lazy(() => import('../pages/Corporates/Services/Index')));
 const CorporateServicesCreate = Loadable(lazy(() => import('../pages/Corporates/Services/Create')));
 const CorporateServicesHistory = Loadable(lazy(() => import('../pages/Corporates/Services/sections/History')));
@@ -559,6 +588,7 @@ const Profile = Loadable(lazy(() => import('../pages/Profile/Index')));
 
 const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
 const ClaimsCreate = Loadable(lazy(() => import('../pages/Claims/CreateUpdate')));
+const ClaimsDetail = Loadable(lazy(() => import('../pages/Claims/Detail')));
 const ClaimShow = Loadable(lazy(() => import('../pages/Claims/Show')));
 
 const ClaimRequests = Loadable(lazy(() => import('../pages/ClaimRequests/Index')));

frontend/hospital-portal/src/sections/dashboard/DetailTimeline.tsx

@@ -66,7 +66,7 @@ export default function NoOppositeContent({data}) {
           	<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
           		<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
             		<Stack direction="row" spacing={2} sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
-        				  <Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : ii") : ''}</Item1>
+        				  <Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : mm") : ''}</Item1>
         				  <Item2 sx={{backgroundColor: dataTimeline.txt_status_backgroundColor, color: dataTimeline.txt_status_color}}>{dataTimeline.txt_status}</Item2>
         				</Stack>
         				<Stack direction="row" spacing={2} sx={{marginBottom: 2}}>