LMSN-217

Improve Slicing tampilan pada hospital portal (List Claim, Detail, Search Member)

app/Services/CorporateMemberService.php

@@ -46,7 +46,7 @@ class CorporateMemberService
 
     public function getAllMemberClaimReports(int $corporateId, Request $request)
     {
-        $limit = $request->has('perPage') ? $request->input('perPage') : 10;
+        $limit = $request->has('per_page') ? $request->input('per_page') : 10;
 
         $results = DB::table('claim_requests')
                     ->leftJoin('claims', 'claim_requests.id', '=', 'claims.claim_request_id')

frontend/client-portal/src/components/Table.tsx

@@ -136,6 +136,7 @@ export default function Table<T>({
     const parameters = Object.fromEntries([
       ...params.searchParams.entries(),
       ['page', newPage + 1],
+      ['per_page', paginations.rowsPerPage]
     ]);
     paginations.setPage(newPage);
     await new Promise((resolve) => setTimeout(resolve, 500));

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

@@ -44,8 +44,6 @@ export default function NoOppositeContent({data}) {
     }
 
   }, [data]);
-  console.log(timeline);
-  console.log(requestFile);
   return (
     <>
       {timeline?.map((dataTimeline, index) => (

frontend/hospital-portal/public/lang/en-US.json

@@ -4,12 +4,12 @@
   "infoLogin": "Enter the registered account",
   "txtLogin1" : "Sign in to Hospital Portal",
   "txtLogin2" : "Enter your details below",
-  "txtCardSearchMember1" : "Guarantee Submission",
+  "txtCardSearchMember1" : "Membership Query",
-  "txtCardSearchMember2" : "Find Member",
+  "txtCardSearchMember2" : "Search Member",
   "txtCardSearchMember3" : "Date Birth",
   "txtCardSearchMember4" : "Member ID",
   "txtCardSearchMember5" : "Member",
-  "txtDialogMember1" : "Benefit Summary",
+  "txtDialogMember1" : "Benefit",
   "txtDialogMember2" : "Request LOG",
-  "txtDialogMember3" : "Member Detail"
+  "txtDialogMember3" : "Detail"
 }

frontend/hospital-portal/public/lang/id-ID.json

@@ -9,7 +9,7 @@
   "txtCardSearchMember3" : "Tanggal Lahir",
   "txtCardSearchMember4" : "Member ID",
   "txtCardSearchMember5" : "Member",
-  "txtDialogMember1" : "Ringkasan Manfaat",
+  "txtDialogMember1" : "Manfaat",
   "txtDialogMember2" : "Request LOG",
-  "txtDialogMember3" : "Detail Member"
+  "txtDialogMember3" : "Detail"
 }

frontend/hospital-portal/src/components/dialogs/DialogDetailClaim.tsx

@@ -10,6 +10,7 @@ import {
   Divider,
   Stack,
   CircularProgress,
+  ButtonBase,
 } from '@mui/material';
 import { Add } from '@mui/icons-material';
 // components
@@ -17,7 +18,7 @@ import MuiDialog from '../../components/MuiDialog';
 // theme
 import palette from '../../theme/palette';
 // React
-import { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState, useRef } from 'react';
 import { fDate } from '@/utils/formatTime';
 import { addMinutes, format } from 'date-fns';
 import { LoadingButton } from '@mui/lab';
@@ -44,6 +45,7 @@ type MuiDialogProps = {
 const steps = ['Review', 'Approval', 'Disbursement'];
 
 const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  console.log(data);
   const claim = data.claim ?? null;
 
   // ---------------------------------------------
@@ -103,11 +105,11 @@ const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialog
             <Typography variant="subtitle1" sx={{ height: 'max-content' }}>
               Claim Request
             </Typography>
-            <Stack>
+            <Stack direction="row" spacing={1}>
-              <Typography variant="caption">Submission date</Typography>
+              <Typography variant="caption">Submission Date</Typography>
               {/* {JSON.stringify(data)} */}
-              <Typography variant="caption">
+              <Typography variant="caption" sx={{fontWeight: 'bold'}}>
-                {claim.created_at && fDate(claim.created_at)}
+                {claim.created_at && format(new Date(claim.created_at), "d MMM yyyy")}
               </Typography>
             </Stack>
           </Stack>
@@ -122,47 +124,19 @@ const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialog
               ))}
             </Stepper>
           </Box>
-
-          {/* { claim.status == 'approved' && (
-            <Stack sx={{ marginTop: 4}}>
-              <LoadingButton loading={false}
-                variant="contained"
-                startIcon={<Add />}
-                fullWidth
-                // sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
-                onClick={() => {handleUploadInvoice()}}
-              >
-                Upload Invoice
-              </LoadingButton>
-            </Stack>
-          )} */}
           
           <Stack direction="row" spacing={2} sx={{ marginTop: 2 }}>
-            <Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
             <Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
               {/* ---------------------------------TYPE INFO------------------------------------ */}
-              <Card sx={{ paddingY: 2, paddingX: 3 }}>
                 <Stack direction="row" justifyContent="space-between" alignItems="center">
                   <Typography variant="body1" fontWeight={600}>
-                    <Iconify icon="eva:file-text-fill"></Iconify> Pengajuan Penjaminan
+                    Request Claim
                   </Typography>
                 </Stack>
-                <Divider sx={{ marginY: 2 }} />
+                  <Buttons variant="contained" type="invoice" />
-
-                <Stack>
-                <LoadingButton loading={false}
-                variant="contained"
-                startIcon={<Add />}
-                fullWidth
-                // sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
-                onClick={() => {}}
-              >
-                Upload Invoice
-              </LoadingButton>
-                </Stack>
-              </Card>
             </Stack>
           </Stack>
+          {console.log(claim.histories_by_date)}
 
           {claim.histories_by_date &&
             claim.histories_by_date.map((historiesByDate) => (
@@ -322,4 +296,46 @@ const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialog
   );
 };
 
+type ButtonIProp = {
+  row: ClaimSubmission;
+  type: 'invoice' | 'another' | 'lab';
+  handle: (event: any, row: any, type: any) => void;
+};
+
+const Buttons = ({ handle, row, type }: ButtonIProp) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  return (
+    <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
+          bgcolor: '#919EAB52',
+          borderRadius: '8px',
+          width: '100%',}} onClick={() => ref.current?.click()}>
+      <Box
+        sx={{
+          display: 'flex',
+          placeItems: 'center',
+          gap: 1,
+          placeContent: 'center',
+          
+
+        }}
+      >
+        <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
+        <Typography variant="body1" fontWeight="bold">
+          Add Invoice
+        </Typography>
+      </Box>
+      <input
+        ref={ref}
+        hidden
+        accept="application/pdf"
+        type="file"
+        name="file"
+        multiple
+        onChange={(event) => handle(event, row, type)}
+      />
+    </ButtonBase>
+  );
+};
+
 export default DialogDetailClaim;

frontend/hospital-portal/src/components/table/Index.ts

@@ -0,0 +1 @@
+export { default as TableMoreMenu } from './TableMoreMenu';

frontend/hospital-portal/src/components/table/TableMoreMenu.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+// @mui
+import { IconButton } from '@mui/material';
+//
+import Iconify from '../Iconify';
+import MenuPopover from '../MenuPopover';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  actions: React.ReactNode;
+  disableRipple?: boolean;
+};
+
+export default function TableMoreMenu({ actions, disableRipple }: Props) {
+  const [open, setOpen] = useState<HTMLElement | null>(null);
+
+  // Close menu popover
+  useEffect(() => {
+    setOpen(null);
+  }, [actions])
+
+  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setOpen(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setOpen(null);
+  };
+
+  return (
+    <>
+      <IconButton onClick={handleOpen} disableRipple={disableRipple}>
+        <Iconify icon={'eva:more-vertical-fill'} width={20} height={20} />
+      </IconButton>
+
+      <MenuPopover
+        open={Boolean(open)}
+        anchorEl={open}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        arrow="right-top"
+        sx={{
+          mt: -1,
+          width: 'auto',
+          minWidth: 160,
+          '& .MuiMenuItem-root': {
+            px: 1,
+            typography: 'body2',
+            borderRadius: 0.75,
+            '& svg': { mr: 2, width: 20, height: 20 },
+          },
+        }}
+      >
+        {actions}
+      </MenuPopover>
+    </>
+  );
+}

frontend/hospital-portal/src/pages/Dashboard.tsx

@@ -86,12 +86,12 @@ export default function Dashboard() {
     <Page title="Dashboard">
       <Container maxWidth={themeStretch ? false : 'xl'}>
         <Grid container spacing={2}>
-          <Grid item xs={12} lg={6} md={6}>
+          <Grid item xs={12} lg={12} md={12}>
             <CardSearchMember handleSubmitSuccess={() => {console.log('submit success')}}></CardSearchMember>
           </Grid>
-          <Grid item xs={12} lg={6} md={6}>
+          {/*<Grid item xs={12} lg={6} md={6}>
             <CardNotification data={itemList} />
-          </Grid>
+          </Grid>*/}
           <Grid item xs={12} lg={12} md={12}>
             <TableList dataLoaded={handleDataLoaded}/>
           </Grid>

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

@@ -88,20 +88,26 @@ export default function CardSearchMember(handleSubmitSuccess) {
           alignItems="center"
           sx={{ paddingBottom: 2, paddingTop: 1 }}
         >
-          <Typography>
+           <Typography
-            <Typography
               variant="body2"
               component="span"
               sx={{ display: 'flex', alignItems: 'center' }}
             >
               {localeData.txtCardSearchMember1}
             </Typography>
-          </Typography>
         </Stack>
-        <Stack gap={2}>
+        <Stack spacing={2} direction="row" justifyContent="space-between">
-          <TextField variant="outlined" label={localeData.txtCardSearchMember4} value={noPolis} onChange={(event) => {
+          <TextField
+            variant="outlined"
+            label={localeData.txtCardSearchMember4}
+            value={noPolis}
+            onChange={(event) => {
             setNoPolis(event.target.value)
-          }} required></TextField>
+            }}
+            sx={{width:'40%'}}
+            required
+          />
+
           <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DatePicker
               label={localeData.txtCardSearchMember3}
@@ -110,37 +116,25 @@ export default function CardSearchMember(handleSubmitSuccess) {
                 setBirthDate(  (newValue));
               }}
               inputFormat="dd-MM-yyyy"
-              renderInput={(params) => <TextField {...params} required/>}
+              renderInput={(params) => <TextField sx={{width:'40%'}} {...params} required/>}
             />
           </LocalizationProvider>
 
-          <Stack gap={2} flexDirection="row">
+          <LoadingButton
-            <LoadingButton
+            sx={{
-              variant="outlined"
+              backgroundColor: '#19BBBB',
-              sx={{
+              p: 1,
-                background: '#fff',
+              width: '20%',
-                p: 1,
+              color: '#FFFF'
-                width: '100%',
+            }}
-              }}
+            loading={loadingBenefit}
-              loading={loadingBenefit}
+            onClick={() => {
-              onClick={() => {
+              handleSearchMember()
-                handleSearchMember()
+            }}
-              }}
+          >
-            >
+            <Iconify icon="eva:search-fill" marginRight={0.75} sx={{width: '24px', height: '24px'}} />
-              <Iconify icon="eva:eye-fill" marginRight={0.75} />
+            {localeData.txtCardSearchMember2}
-              {localeData.txtCardSearchMember2}
+          </LoadingButton>
-            </LoadingButton>
-            {/* <LoadingButton
-              variant="contained"
-              sx={{
-                p: 1,
-                width: '100%',
-              }}
-              loading={loadingClaim}
-            >
-              Ajukan Penjaminan
-            </LoadingButton> */}
-          </Stack>
         </Stack>
       </RootNotificationStyle>
 {/* 

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

@@ -11,6 +11,7 @@ import { Avatar } from '@mui/material';
 import Iconify from '@/components/Iconify';
 import FormRequestClaim from './FormRequestClaim';
 import { LanguageContext } from '@/contexts/LanguageContext';
+import { format } from 'date-fns';
 
 export default function DialogMember(member, handleSubmitSuccess) {
     const { localeData } =  useContext(LanguageContext);
@@ -75,84 +76,51 @@ export default function DialogMember(member, handleSubmitSuccess) {
                 </Tabs>
 
                 <TabPanel value={currentTab} index={'detail'}>
-                    <Stack spacing={2}>
+                    <Stack direction="column" spacing={2}>
-                        <Grid container sx={{ pb: 2, mb: 2, borderBottom: 0 }}>
+                      <Stack direction="row" justifyContent="space-between">
-                          <Grid item xs={7}>
+                        <Typography sx={{width:'50%'}} variant="body2">Member ID</Typography>
-                            <Grid container>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{ member?.member_id ?? '-'}</Typography>
-                              <Grid item xs={4}>
+                      </Stack>
-                                Member ID
+                      <Stack direction="row" justifyContent="space-between">
-                              </Grid>
+                        <Typography sx={{width:'50%'}} variant="body2">Policy Number</Typography>
-                              <Grid item xs={8}>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{ member?.current_policy?.code  ?? '-'}</Typography>
-                                : { member?.member_id ?? '-'}
+                      </Stack>
-                              </Grid>
+                      <Stack direction="row" justifyContent="space-between">
-                              <Grid item xs={4}>
+                        <Typography sx={{width:'50%'}} variant="body2">NRIC</Typography>
-                                Policy Number
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.person?.nik ?? '-'}</Typography>
-                              </Grid>
+                      </Stack>
-                              <Grid item xs={8}>
+                      <Stack direction="row" justifyContent="space-between">
-                                : { member?.current_policy?.code  ?? '-'}
+                        <Typography sx={{width:'50%'}} variant="body2">NIK</Typography>
-                              </Grid>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.person?.nik ?? '-'}</Typography>
-                              <Grid item xs={4}>
+                      </Stack>
-                                NRIC
+                      <Stack direction="row" justifyContent="space-between">
-                              </Grid>
+                        <Typography sx={{width:'50%'}} variant="body2">Email</Typography>
-                              <Grid item xs={8}>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.email ?? '-'}</Typography>
-                                : {member?.nric ?? '-'}
+                      </Stack>
-                              </Grid>
+                      <Stack direction="row" justifyContent="space-between">
-
+                        <Typography sx={{width:'50%'}} variant="body2">Date of Birth</Typography>
-                              <Grid item xs={4}>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.birth_date ? format(new Date(member.birth_date), "d MMM yyyy") : '-'}</Typography>
-                                NIK
+                      </Stack>
-                              </Grid>
+                      <Stack direction="row" justifyContent="space-between">
-                              <Grid item xs={8}>
+                        <Typography sx={{width:'50%'}} variant="body2">Gender</Typography>
-                                : {member?.person?.nik ?? '-'}
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.gender ?? '-'}</Typography>
-                              </Grid>
+                      </Stack>
-                              <Grid item xs={4}>
+                      <Stack direction="row" justifyContent="space-between">
-                                Email
+                        <Typography sx={{width:'50%'}} variant="body2">Marital Status</Typography>
-                              </Grid>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.marital_status ?? '-'}</Typography>
-                              <Grid item xs={8}>
+                      </Stack>
-                                : {member?.email ?? '-'}
+                      <Stack direction="row" justifyContent="space-between">
-                              </Grid>
+                        <Typography sx={{width:'50%'}} variant="body2">Language</Typography>
-                            </Grid>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.language ?? '-'}</Typography>
-                          </Grid>
+                      </Stack>
-                          <Grid item xs={5}>
+                      <Stack direction="row" justifyContent="space-between">
-                            <Grid container>
+                        <Typography sx={{width:'50%'}} variant="body2">Race</Typography>
-                              <Grid item xs={6}>
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.race ?? '-'}</Typography>
-                                Birth Date
+                      </Stack>
-                              </Grid>
+                      <Stack direction="row" justifyContent="space-between">
-                              <Grid item xs={6}>
+                        <Typography sx={{width:'50%'}} variant="body2">Relationship</Typography>
-                                : {member?.birth_date ?? '-'}
+                        <Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.relation_with_principal ?? '-'}</Typography>
-                              </Grid>
+                      </Stack>
-                              <Grid item xs={6}>
-                                Gender
-                              </Grid>
-                              <Grid item xs={6}>
-                                : {member?.gender ?? '-'}
-                              </Grid>
-                              <Grid item xs={6}>
-                                Marital Status
-                              </Grid>
-                              <Grid item xs={6}>
-                                : {member?.marital_status ?? '-'}
-                              </Grid>
-                              <Grid item xs={6}>
-                                Language
-                              </Grid>
-                              <Grid item xs={6}>
-                                : {member?.language ?? '-'}
-                              </Grid>
-                              <Grid item xs={6}>
-                                Race
-                              </Grid>
-                              <Grid item xs={6}>
-                                : {member?.race ?? '-'}
-                              </Grid>
-                              <Grid item xs={6}>
-                                Relationship
-                              </Grid>
-                              <Grid item xs={6}>
-                                : {member?.relation_with_principal ?? '-'}
-                              </Grid>
-                            </Grid>
-                          </Grid>
-                        </Grid>
                     </Stack>
                 </TabPanel>
 
@@ -161,12 +129,9 @@ export default function DialogMember(member, handleSubmitSuccess) {
                         { member && member?.current_plan?.corporate_benefits?.map((corporateBenefit, index) => {return (
                             <Grid item sm={6} key={index}>
                                 <Card sx={{p: 2}}>
-                                    <Typography variant="body1" sx={{fontWeight: 500}}>{corporateBenefit.benefit.description}</Typography>
+                                    <Typography variant="body2" sx={{fontWeight: 'bold'}}>{corporateBenefit.benefit.description}</Typography>
-                                    <Typography variant="body2">Member ID : {corporateBenefit.benefit.code}</Typography>
+                                    <Typography variant="body2" sx={{color: '#919EAB'}}>{corporateBenefit.benefit.code}</Typography>
-                                    <Typography variant="body2" sx={{ marginTop: 2 }}>Yearly Limits</Typography>
+                                    
-                                    <BorderLinearProgress variant="determinate" value={100 - (corporateBenefit.limit_amount ? ((corporateBenefit.usage ?? 0) / corporateBenefit.limit_amount) : 0)} sx={{ mb: 1 }} />
-                                    <Typography sx={{ textAlign: 'right'}}>{corporateBenefit.usage ?? 0} / 
-                                    {corporateBenefit.limit_ammount < 9999999999 ? fCurrency(corporateBenefit.limit_amount ?? 0) : 'As Charge' }</Typography>
                                 </Card>
                             </Grid>
                         )})}

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

@@ -2,7 +2,7 @@ import { styled } from '@mui/material/styles';
 import Iconify from '@/components/Iconify';
 import { fCurrency } from '@/utils/formatNumber';
 import { LoadingButton } from '@mui/lab';
-import { Avatar, Button, Divider, LinearProgress, linearProgressClasses } from '@mui/material';
+import { Avatar, Button, Divider, LinearProgress, linearProgressClasses, ButtonBase, Box } from '@mui/material';
 import { Card } from '@mui/material';
 import { Stack, Typography } from '@mui/material';
 import { fPostFormat } from '@/utils/formatTime';
@@ -10,6 +10,7 @@ import axios from '@/utils/axios';
 import { enqueueSnackbar } from 'notistack';
 import { useRef, useState } from 'react';
 import { makeFormData } from '@/utils/jsonToFormData';
+import { format } from 'date-fns';
 
 // TODO Fix any
 export default function FormRequestClaim({ member, handleSubmitSuccess }) {
@@ -119,18 +120,19 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
 
   return (
     <Stack>
-      <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2 }}>
+      <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2 }} spacing={2}>
-        <Typography textAlign={'right'} variant='body2'>
+        <Typography variant='body2' sx={{color: '#757575'}}>
-          Submission Date : <br /> {fPostFormat(new Date(), 'dd/MM/yyyy')}
+          Submission Date
         </Typography>
+        <Typography variant='body2' sx={{fontWeight:'bold'}}>{format(new Date(), "d MMM yyyy")}</Typography>
       </Stack>
       
       
       <Card sx={{ p: 1, background: '#f4f6f8', marginBottom: 2 }}>
 
       <Stack direction="row" spacing={2}>
-          <Button sx={{padding: 2, width: '100%'}} variant={serviceCode == 'IP' ? 'contained' : ''} onClick={() => {setServiceCode('IP')}}>Rawat Inap</Button>
+          <Button sx={{padding: 2, width: '100%'}} color="primary" variant={serviceCode == 'IP' ? 'outlined' : ''}  onClick={() => {setServiceCode('IP')}}>Inpatient</Button>
-          <Button sx={{padding: 2, width: '100%'}} variant={serviceCode == 'OP' ? 'contained' : ''} onClick={() => {setServiceCode('OP')}}>Rawat Jalan</Button>
+          <Button sx={{padding: 2, width: '100%'}} color="primary" variant={serviceCode == 'OP' ? 'outlined' : ''} onClick={() => {setServiceCode('OP')}}>Outpatient</Button>
       </Stack>
       </Card>
 
@@ -143,13 +145,13 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
             sx={{ marginTop: 1, width: 48, height: 48 }}
           />
           <Stack sx={{ p: 1 }}>
-            <Typography>{member?.full_name ?? ''}</Typography>
+            <Typography variant="body2">{member?.full_name ?? ''}</Typography>
-            <Typography>{member?.member_id ?? ''}</Typography>
+            <Typography variant="body2" sx={{color:'#637381'}}>{member?.member_id ?? ''}</Typography>
           </Stack>
         </Stack>
       </Card>
 
-      <Card sx={{ paddingY: 1, paddingX: 2 }}>
+      {/*<Card sx={{ paddingY: 1, paddingX: 2 }}>
         <Typography variant="body1" sx={{ marginBottom: 1, fontWeight: 600 }}>
           Total Limit
         </Typography>
@@ -166,7 +168,7 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
           {fCurrency(member?.current_plan?.usage ?? 0)} /{' '}
           {member?.current_plan?.limit_rules < 9999999999 ? fCurrency(member?.current_plan?.limit_rules ?? 0) : 'As Charge' }
         </Typography>
-      </Card>
+      </Card>*/}
 
       <Stack
         divider={<Divider orientation="horizontal" flexItem />}
@@ -175,8 +177,8 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
       >
         {/* -------------------------------Upload Dokumen Kondisi------------------------------- */}
         <Stack sx={{ marginTop: 2 }}>
-          <Typography variant="body1" fontWeight={600}>
+          <Typography variant="body1" sx={{fontWeight:'bold'}}>
-            <Iconify icon="eva:file-text-fill"></Iconify> Dokumen Kondisi
+             Condition Document
           </Typography>
           {/* <Typography variant="body2">Hasil Lab, </Typography> */}
           <Stack
@@ -197,36 +199,42 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
                   ></Iconify>
                 </Stack>
               ))}
-            {/* <Stack direction="row" justifyContent={'space-between'}>
-                                      <Typography>Nama File .pdf</Typography>
-                                      <Iconify icon="eva:trash-2-outline" color={'darkred'}></Iconify>
-                                  </Stack> */}
           </Stack>
-          {/* { JSON.stringify(filesResult) } */}
+           <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
-          <input
+                bgcolor: '#919EAB52',
-            type="file"
+                borderRadius: '8px',
-            id="file"
+                width: '100%', height: '60px'}} onClick={() => fileKondisiInput.current?.click()}>
-            ref={fileKondisiInput}
+            <Box
-            style={{ display: 'none' }}
+              sx={{
-            multiple
+                display: 'flex',
-            onChange={handleKondisiInputChange}
+                placeItems: 'center',
-            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+                gap: 1,
-          />
+                placeContent: 'center',
-          <LoadingButton
+                
-            variant="outlined"
+
-            onClick={() => {
+              }}
-              fileKondisiInput.current.click();
+            >
-            }}
+              <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
-          >
+              <Typography variant="body1" fontWeight="bold">
-            <Iconify icon="eva:plus-fill" />
+                Add Result
-            Add Result
+              </Typography>
-          </LoadingButton>
+            </Box>
+            <input
+              type="file"
+              id="file"
+              ref={fileKondisiInput}
+              style={{ display: 'none' }}
+              multiple
+              onChange={handleKondisiInputChange}
+              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+            />
+          </ButtonBase>
         </Stack>
 
         {/* -------------------------------Upload Dokumen Diagnosa------------------------------- */}
         <Stack sx={{ marginTop: 2 }}>
-          <Typography variant="body1" fontWeight={600}>
+          <Typography variant="body1" sx={{fontWeight:'bold'}}>
-            <Iconify icon="eva:file-text-fill"></Iconify> Dokumen Diagnosa
+            Diagnosis Dokumen
           </Typography>
           {/* <Typography variant="body2">Hasil Lab, </Typography> */}
           <Stack
@@ -253,30 +261,41 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
                                   </Stack> */}
           </Stack>
           {/* { JSON.stringify(filesResult) } */}
-          <input
+          <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
-            type="file"
+                bgcolor: '#919EAB52',
-            id="file"
+                borderRadius: '8px',
-            ref={fileDiagnosaInput}
+                width: '100%', height: '60px'}} onClick={() => fileDiagnosaInput.current?.click()}>
-            style={{ display: 'none' }}
+            <Box
-            multiple
+              sx={{
-            onChange={handleDiagnosaInputChange}
+                display: 'flex',
-            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+                placeItems: 'center',
-          />
+                gap: 1,
-          <LoadingButton
+                placeContent: 'center',
-            variant="outlined"
+                
-            onClick={() => {
+
-              fileDiagnosaInput.current.click();
+              }}
-            }}
+            >
-          >
+              <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
-            <Iconify icon="eva:plus-fill" />
+              <Typography variant="body1" fontWeight="bold">
-            Add Result
+                Add Result
-          </LoadingButton>
+              </Typography>
+            </Box>
+            <input
+              type="file"
+              id="file"
+              ref={fileDiagnosaInput}
+              style={{ display: 'none' }}
+              multiple
+              onChange={handleDiagnosaInputChange}
+              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+            />
+          </ButtonBase>
         </Stack>
 
         {/* -------------------------------Upload Dokumen Hasil Penunjang------------------------------- */}
         <Stack sx={{ marginTop: 2 }}>
-          <Typography variant="body1" fontWeight={600}>
+          <Typography variant="body1" sx={{fontWeight:'bold'}}>
-            <Iconify icon="eva:file-text-fill"></Iconify> Dokumen Hasil Penunjang
+            Supporting Result Document
           </Typography>
           {/* <Typography variant="body2">Hasil Lab, </Typography> */}
           <Stack
@@ -303,30 +322,41 @@ export default function FormRequestClaim({ member, handleSubmitSuccess }) {
                                   </Stack> */}
           </Stack>
           {/* { JSON.stringify(filesResult) } */}
-          <input
+          <ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
-            type="file"
+                bgcolor: '#919EAB52',
-            id="file"
+                borderRadius: '8px',
-            ref={fileHasilPenunjangInput}
+                width: '100%', height: '60px'}} onClick={() => fileHasilPenunjangInput.current?.click()}>
-            style={{ display: 'none' }}
+            <Box
-            multiple
+              sx={{
-            onChange={handleResultInputChange}
+                display: 'flex',
-            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+                placeItems: 'center',
-          />
+                gap: 1,
-          <LoadingButton
+                placeContent: 'center',
-            variant="outlined"
+                
-            onClick={() => {
+
-              fileHasilPenunjangInput.current.click();
+              }}
-            }}
+            >
-          >
+              <Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
-            <Iconify icon="eva:plus-fill" />
+              <Typography variant="body1" fontWeight="bold">
-            Add File
+                Add Result
-          </LoadingButton>
+              </Typography>
+            </Box>
+            <input
+              type="file"
+              id="file"
+              ref={fileHasilPenunjangInput}
+              style={{ display: 'none' }}
+              multiple
+              onChange={handleResultInputChange}
+              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
+            />
+          </ButtonBase>
         </Stack>
       </Stack>
 
       <LoadingButton
         variant="contained"
-        sx={{ marginTop: 2, p: 2 }}
+        sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
         onClick={() => {
           submitRequest();
         }}

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

@@ -41,6 +41,8 @@ import { fSplit } from '@/utils/formatNumber';
 import { Chip } from '@mui/material';
 import { enqueueSnackbar } from 'notistack';
 import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
+import { format } from 'date-fns';
+import TableMoreMenu from '@/components/table/TableMoreMenu';
 
 /* ---------------------------------- types --------------------------------- */
 type PaginationTableProps = {
@@ -108,30 +110,35 @@ const headCells: readonly HeadCell[] = [
     align: 'left',
     label: 'Request Code',
     isSort: true,
+    width:'25%',
   },
   {
     id: 'member.name',
-    align: 'center',
+    align: 'left',
-    label: 'Member',
+    label: 'Name',
     isSort: false,
+    width: '33%',
   },
   {
     id: 'submission_date',
-    align: 'center',
+    align: 'left',
     label: 'Submission Date',
     isSort: true,
-  },
+    width: '25%',
-  {
-    id: 'log_url',
-    align: 'right',
-    label: 'Download LOG',
-    isSort: false,
   },
   {
     id: 'status',
-    align: 'right',
+    align: 'left',
     label: 'Status',
-    isSort: false,
+    isSort: true,
+    width: '10%',
+  },
+  {
+    id: 'action',
+    align: 'left',
+    label: '',
+    isSort: true,
+    width: '7%',
   },
 ];
 
@@ -149,7 +156,7 @@ function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps
             sortDirection={orderBy === headCell.id ? order : false}
             // @ts-ignore
             align={headCell.align}
-            sx={{ padding: 2 }}
+            sx={{ padding: 2, width: headCell.width }}
           >
             {headCell.isSort ? (
               <TableSortLabel
@@ -444,55 +451,116 @@ export default function TableList(props: any) {
                   dataTable.map((row: DataTableProps, index) => (
                     <TableRow key={index}>
                       <TableCell align="left">{row.code}</TableCell>
-                      <TableCell align="center">{row.member?.full_name ?? ''}</TableCell>
+                      <TableCell align="left">{row.member?.full_name ?? ''}</TableCell>
-                      <TableCell align="center">{row.submission_date}</TableCell>
+                      <TableCell align="center">
-                      <TableCell align="right">
+                        <Typography
-                        {row.status == 'approved' ? (
+                          sx={{
-                          <Button
+                            backgroundColor: (theme) => theme.palette.grey[300],
-                            sx={{
+                            borderRadius: '4px',
-                              backgroundColor: palette.light.grey[400],
+                            width: '70%',
-                              color: palette.dark.grey[900],
+                          }}
-                              paddingY: 0,
+                          variant="body2"
-                              '&:hover': {
+                        >
-                                backgroundColor: 'rgba(84, 214, 44, 0.32)',
+                          {row.submission_date ? format(new Date(row.submission_date), "d MMM yyyy") : ''}
-                                color: palette.dark.success.darker,
+                        </Typography>
-                              },
-                            }}
-                            onClick={() => {
-                              handleDownloadLog(row);
-                            }}
-                          >
-                            Download LOG
-                          </Button>
-                        ) : (
-                          <Typography>Belum Tersedia</Typography>
-                        )}
                       </TableCell>
-                      <TableCell align="right">
+                      <TableCell align="center">
-                        <Chip
+                       {row.status === 'requested' ? (
-                          color={
+                        <Typography
-                            row.status == 'requested'
+                          variant="body2"
-                              ? 'default'
+                          sx={{
-                              : row.status == 'approved'
+                            width: 'Hug (6px)',
-                              ? 'success'
+                            height: 'Hug (22px)',
-                              : row.status == 'declined'
+                            left: '862px',
-                              ? 'error'
+                            top: '17px',
-                              : 'default'
+                            color: '#159C9C',
-                          }
+                            backgroundColor: '#00AB5529',
-                          size="small"
+                            padding: '1px, 8px',
-                          label={row.status ?? 'unknown'}
+                            borderRadius: '6px',
-                          sx={{ textTransform: 'capitalize' }}
-                        />
-                      </TableCell>
-
-                      <TableCell align="right">
-                        <IconButton
-                          onClick={() => {
-                            handleShowClaim(row);
                           }}
                         >
-                          <Iconify icon="eva:eye-fill" />
+                          Request
-                        </IconButton>
+                        </Typography>
+                        ) : row.status === 'approved' ? (
+                          <Typography
+                            variant="body2"
+                            sx={{
+                              width: 'Hug (6px)',
+                              height: 'Hug (22px)',
+                              left: '862px',
+                              top: '17px',
+                              color: '#229A16',
+                              backgroundColor: '#54D62C29',
+                              padding: '1px, 8px',
+                              borderRadius: '6px',
+                            }}
+                          >
+                            Approval
+                          </Typography>
+                        ) : row.status === 'declined' ? (
+                          <Typography
+                            variant="body2"
+                            sx={{
+                              width: 'Hug (6px)',
+                              height: 'Hug (22px)',
+                              left: '862px',
+                              top: '17px',
+                              color: '#B72136',
+                              backgroundColor: '#FF484229',
+                              padding: '1px, 8px',
+                              borderRadius: '6px',
+                            }}
+                          >
+                            Decline
+                          </Typography>
+                        ) : row.status === 'pending' ? (
+                          <Typography
+                            variant="body2"
+                            sx={{
+                              width: 'Hug (6px)',
+                              height: 'Hug (22px)',
+                              left: '862px',
+                              top: '17px',
+                              color: '#BF6919',
+                              backgroundColor: '#FFC10729',
+                              padding: '1px, 8px',
+                              borderRadius: '6px',
+                            }}
+                          >
+                            Pending
+                          </Typography>
+                        ) : row.status === 'reviewed' ? (
+                          <Typography
+                            variant="body2"
+                            sx={{
+                              width: 'Hug (6px)',
+                              height: 'Hug (22px)',
+                              left: '862px',
+                              top: '17px',
+                              color: '#0C53B7',
+                              backgroundColor: '#1890FF29',
+                              padding: '1px, 8px',
+                              borderRadius: '6px',
+                            }}
+                          >
+                            Review
+                          </Typography>
+                        ) : ''}
+                      </TableCell>
+
+                      <TableCell align="center">
+                        <TableMoreMenu actions={
+                          <>
+                            <MenuItem onClick={() => handleShowClaim(row)}>
+                              <Iconify icon="eva:eye-fill" />
+                              View
+                            </MenuItem>
+                            <MenuItem onClick={() => handleDownloadLog(row)}>
+                              <Iconify icon="eva:download-fill" />
+                              Download LOG
+                            </MenuItem>
+                          </>
+                         } />
                       </TableCell>
                     </TableRow>
                   ))