tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

LMSN-217

Browse Source 
Improve Slicing tampilan pada hospital portal (List Claim, Detail, Search Member)
This commit is contained in:
ivan-sim
2023-10-16 09:55:15 +07:00
parent c3b745e23b
commit 827ce472ba
13 changed files with 433 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/Services/CorporateMemberService.php
View File

@@ -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')

1
frontend/client-portal/src/components/Table.tsx
View File

@@ -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));

2
frontend/client-portal/src/pages/ClaimReport/DetailTimeline.tsx
View File

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

8
frontend/hospital-portal/public/lang/en-US.json
View File

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

4
frontend/hospital-portal/public/lang/id-ID.json
View File

@@ -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"
}

88
frontend/hospital-portal/src/components/dialogs/DialogDetailClaim.tsx
View File

@@ -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>
<Typography variant="caption">Submission date</Typography>
<Stack direction="row" spacing={1}>
<Typography variant="caption">Submission Date</Typography>
{/* {JSON.stringify(data)} */}
<Typography variant="caption">
{claim.created_at && fDate(claim.created_at)}
<Typography variant="caption" sx={{fontWeight: 'bold'}}>
{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 }} />
<Stack>
<LoadingButton loading={false}
variant="contained"
startIcon={<Add />}
fullWidth
// sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
onClick={() => {}}
>
Upload Invoice
</LoadingButton>
</Stack>
</Card>
<Buttons variant="contained" type="invoice" />
</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;

1
frontend/hospital-portal/src/components/table/Index.ts Normal file
View File

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

60
frontend/hospital-portal/src/components/table/TableMoreMenu.tsx Normal file
View File

@@ -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>
    </>
  );
}

6
frontend/hospital-portal/src/pages/Dashboard.tsx
View File

@@ -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>

62
frontend/hospital-portal/src/sections/dashboard/CardSearchMember.tsx
View File

@@ -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}>
<TextField variant="outlined" label={localeData.txtCardSearchMember4} value={noPolis} onChange={(event) => {
<Stack spacing={2} direction="row" justifyContent="space-between">
<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
variant="outlined"
sx={{
background: '#fff',
p: 1,
width: '100%',
}}
loading={loadingBenefit}
onClick={() => {
handleSearchMember()
}}
>
<Iconify icon="eva:eye-fill" marginRight={0.75} />
{localeData.txtCardSearchMember2}
</LoadingButton>
{/* <LoadingButton
variant="contained"
sx={{
p: 1,
width: '100%',
}}
loading={loadingClaim}
>
Ajukan Penjaminan
</LoadingButton> */}
</Stack>
<LoadingButton
sx={{
backgroundColor: '#19BBBB',
p: 1,
width: '20%',
color: '#FFFF'
}}
loading={loadingBenefit}
onClick={() => {
handleSearchMember()
}}
>
<Iconify icon="eva:search-fill" marginRight={0.75} sx={{width: '24px', height: '24px'}} />
{localeData.txtCardSearchMember2}
</LoadingButton>
</Stack>
</RootNotificationStyle>
{/*

133
frontend/hospital-portal/src/sections/dashboard/DialogMember.tsx
View File

@@ -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}>
<Grid container sx={{ pb: 2, mb: 2, borderBottom: 0 }}>
<Grid item xs={7}>
<Grid container>
<Grid item xs={4}>
Member ID
</Grid>
<Grid item xs={8}>
: { member?.member_id ?? '-'}
</Grid>
<Grid item xs={4}>
Policy Number
</Grid>
<Grid item xs={8}>
: { member?.current_policy?.code ?? '-'}
</Grid>
<Grid item xs={4}>
NRIC
</Grid>
<Grid item xs={8}>
: {member?.nric ?? '-'}
</Grid>
<Grid item xs={4}>
NIK
</Grid>
<Grid item xs={8}>
: {member?.person?.nik ?? '-'}
</Grid>
<Grid item xs={4}>
Email
</Grid>
<Grid item xs={8}>
: {member?.email ?? '-'}
</Grid>
</Grid>
</Grid>
<Grid item xs={5}>
<Grid container>
<Grid item xs={6}>
Birth Date
</Grid>
<Grid item xs={6}>
: {member?.birth_date ?? '-'}
</Grid>
<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 direction="column" spacing={2}>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Member ID</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{ member?.member_id ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Policy Number</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{ member?.current_policy?.code ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">NRIC</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.person?.nik ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">NIK</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.person?.nik ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Email</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.email ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Date of Birth</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.birth_date ? format(new Date(member.birth_date), "d MMM yyyy") : '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Gender</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.gender ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Marital Status</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.marital_status ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Language</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.language ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Race</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.race ?? '-'}</Typography>
</Stack>
<Stack direction="row" justifyContent="space-between">
<Typography sx={{width:'50%'}} variant="body2">Relationship</Typography>
<Typography sx={{width:'50%', fontWeight: 'bold'}} variant="body2">{member?.relation_with_principal ?? '-'}</Typography>
</Stack>
</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">Member ID : {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>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{corporateBenefit.benefit.description}</Typography>
<Typography variant="body2" sx={{color: '#919EAB'}}>{corporateBenefit.benefit.code}</Typography>
</Card>
</Grid>
)})}

182
frontend/hospital-portal/src/sections/dashboard/FormRequestClaim.tsx
View File

@@ -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 }}>
<Typography textAlign={'right'} variant='body2'>
Submission Date : <br /> {fPostFormat(new Date(), 'dd/MM/yyyy')}
<Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2 }} spacing={2}>
<Typography variant='body2' sx={{color: '#757575'}}>
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%'}} variant={serviceCode == 'OP' ? 'contained' : ''} onClick={() => {setServiceCode('OP')}}>Rawat Jalan</Button>
<Button sx={{padding: 2, width: '100%'}} color="primary" variant={serviceCode == 'IP' ? 'outlined' : ''} onClick={() => {setServiceCode('IP')}}>Inpatient</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>{member?.member_id ?? ''}</Typography>
<Typography variant="body2">{member?.full_name ?? ''}</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}>
<Iconify icon="eva:file-text-fill"></Iconify> Dokumen Kondisi
<Typography variant="body1" sx={{fontWeight:'bold'}}>
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) } */}
<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"
/>
<LoadingButton
variant="outlined"
onClick={() => {
fileKondisiInput.current.click();
}}
>
<Iconify icon="eva:plus-fill" />
Add Result
</LoadingButton>
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileKondisiInput.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 Result
</Typography>
</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}>
<Iconify icon="eva:file-text-fill"></Iconify> Dokumen Diagnosa
<Typography variant="body1" sx={{fontWeight:'bold'}}>
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
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"
/>
<LoadingButton
variant="outlined"
onClick={() => {
fileDiagnosaInput.current.click();
}}
>
<Iconify icon="eva:plus-fill" />
Add Result
</LoadingButton>
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileDiagnosaInput.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 Result
</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}>
<Iconify icon="eva:file-text-fill"></Iconify> Dokumen Hasil Penunjang
<Typography variant="body1" sx={{fontWeight:'bold'}}>
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
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"
/>
<LoadingButton
variant="outlined"
onClick={() => {
fileHasilPenunjangInput.current.click();
}}
>
<Iconify icon="eva:plus-fill" />
Add File
</LoadingButton>
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileHasilPenunjangInput.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 Result
</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();
}}

184
frontend/hospital-portal/src/sections/dashboard/TableList.tsx
View File

@@ -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',
label: 'Member',
align: 'left',
label: 'Name',
isSort: false,
width: '33%',
},
{
id: 'submission_date',
align: 'center',
align: 'left',
label: 'Submission Date',
isSort: true,
},
{
id: 'log_url',
align: 'right',
label: 'Download LOG',
isSort: false,
width: '25%',
},
{
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="center">{row.submission_date}</TableCell>
<TableCell align="right">
{row.status == 'approved' ? (
<Button
sx={{
backgroundColor: palette.light.grey[400],
color: palette.dark.grey[900],
paddingY: 0,
'&:hover': {
backgroundColor: 'rgba(84, 214, 44, 0.32)',
color: palette.dark.success.darker,
},
}}
onClick={() => {
handleDownloadLog(row);
}}
>
Download LOG
</Button>
) : (
<Typography>Belum Tersedia</Typography>
)}
<TableCell align="left">{row.member?.full_name ?? ''}</TableCell>
<TableCell align="center">
<Typography
sx={{
backgroundColor: (theme) => theme.palette.grey[300],
borderRadius: '4px',
width: '70%',
}}
variant="body2"
>
{row.submission_date ? format(new Date(row.submission_date), "d MMM yyyy") : ''}
</Typography>
</TableCell>
<TableCell align="right">
<Chip
color={
row.status == 'requested'
? 'default'
: row.status == 'approved'
? 'success'
: row.status == 'declined'
? 'error'
: 'default'
}
size="small"
label={row.status ?? 'unknown'}
sx={{ textTransform: 'capitalize' }}
/>
</TableCell>
<TableCell align="right">
<IconButton
onClick={() => {
handleShowClaim(row);
<TableCell align="center">
{row.status === 'requested' ? (
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#159C9C',
backgroundColor: '#00AB5529',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
<Iconify icon="eva:eye-fill" />
</IconButton>
Request
</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>
))