Update Show Claim Request
This commit is contained in:
@@ -0,0 +1,296 @@
|
||||
// @mui
|
||||
import {
|
||||
Button,
|
||||
Box,
|
||||
Stepper,
|
||||
Step,
|
||||
StepLabel,
|
||||
Card,
|
||||
Typography,
|
||||
Divider,
|
||||
Stack,
|
||||
CircularProgress,
|
||||
} from '@mui/material';
|
||||
import { Add } from '@mui/icons-material';
|
||||
// components
|
||||
import MuiDialog from '../../components/MuiDialog';
|
||||
// theme
|
||||
import palette from '../../theme/palette';
|
||||
// React
|
||||
import { ReactElement, useEffect, useState } from 'react';
|
||||
import { fDate } from '@/utils/formatTime';
|
||||
import { addMinutes, format } from 'date-fns';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
|
||||
type DataContent = {
|
||||
claim: object;
|
||||
isLoading: boolean;
|
||||
handleDownloadLog: void;
|
||||
};
|
||||
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
data?: DataContent[];
|
||||
};
|
||||
|
||||
const steps = ['Review', 'Approval', 'Disbursement'];
|
||||
|
||||
const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
|
||||
const claim = data.claim ?? null;
|
||||
|
||||
// ---------------------------------------------
|
||||
// Step
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
useEffect(
|
||||
function () {
|
||||
if (claim?.status == 'requested') {
|
||||
setCurrentStep(0);
|
||||
}
|
||||
if (claim?.status == 'approved') {
|
||||
setCurrentStep(1);
|
||||
}
|
||||
if (claim?.status == 'closed') {
|
||||
setCurrentStep(2);
|
||||
}
|
||||
},
|
||||
[data]
|
||||
);
|
||||
|
||||
|
||||
// ----------------------------------------------------
|
||||
// Download LOG
|
||||
const [loadingDownloadLog, setLoadingDownloadLog] = useState(false)
|
||||
const handleDownloadLog = async (claimRequest) => {
|
||||
setLoadingDownloadLog(true)
|
||||
await data.handleDownloadLog(claimRequest).then(() => {
|
||||
setLoadingDownloadLog(false)
|
||||
})
|
||||
}
|
||||
|
||||
const getContent = () => (
|
||||
<>
|
||||
{data.isLoading && (
|
||||
<Stack alignItems="center" justifyContent="space-between" sx={{ p: 4 }}>
|
||||
<CircularProgress />
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{!data.isLoading && (
|
||||
<>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
direction="row"
|
||||
sx={{ marginTop: 1 }}
|
||||
>
|
||||
<Typography variant="subtitle1" sx={{ height: 'max-content' }}>
|
||||
Claim Request
|
||||
</Typography>
|
||||
<Stack>
|
||||
<Typography variant="caption">Submission date</Typography>
|
||||
{/* {JSON.stringify(data)} */}
|
||||
<Typography variant="caption">{claim && fDate(claim.created_at)}</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Box sx={{ width: '100%', marginTop: 2 }}>
|
||||
<Stepper alternativeLabel activeStep={currentStep ?? 0}>
|
||||
{steps.map((label) => (
|
||||
<Step key={label}>
|
||||
<StepLabel>{label}</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</Box>
|
||||
|
||||
{ claim.status == 'approved' && (
|
||||
<Stack sx={{ marginTop: 4}}>
|
||||
<LoadingButton loading={loadingDownloadLog}
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
fullWidth
|
||||
// sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
|
||||
onClick={() => {handleDownloadLog(claim)}}
|
||||
>
|
||||
Upload Invoice
|
||||
</LoadingButton>
|
||||
</Stack>)}
|
||||
|
||||
<Stack marginTop={2}>
|
||||
<Typography variant="subtitle1" paddingY={2}>
|
||||
{fDate(claim.created_at)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
|
||||
<Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
|
||||
|
||||
{/* Download LOG */}
|
||||
{claim.status == 'approved' && (
|
||||
<Card sx={{ paddingY: 2, paddingX: 3 }}>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="body1">
|
||||
{format(
|
||||
addMinutes(
|
||||
new Date(claim.created_at),
|
||||
15 //Math.floor(Math.random() * (20 - 15 + 1)) + 15
|
||||
),
|
||||
'HH:mm'
|
||||
)}{' '}
|
||||
WIB</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
backgroundColor: palette.light.warning.lighter,
|
||||
color: palette.light.warning.dark,
|
||||
borderColor: palette.light.warning.dark,
|
||||
border: '1px solid',
|
||||
borderRadius: '6px',
|
||||
padding: 1,
|
||||
}}
|
||||
variant="caption"
|
||||
>
|
||||
Approved
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Divider sx={{ marginY: 2 }} />
|
||||
<Stack>
|
||||
<LoadingButton loading={loadingDownloadLog}
|
||||
variant="outlined"
|
||||
startIcon={<Add />}
|
||||
fullWidth
|
||||
// sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
|
||||
onClick={() => {handleDownloadLog(claim)}}
|
||||
>
|
||||
Download Guarantee Letter
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
|
||||
{/* Item 1 */}
|
||||
{claim.status == 'requested' && (
|
||||
<Card sx={{ paddingY: 2, paddingX: 3 }}>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="body1">09:10 WIB</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
backgroundColor: palette.light.warning.lighter,
|
||||
color: palette.light.warning.dark,
|
||||
borderColor: palette.light.warning.dark,
|
||||
border: '1px solid',
|
||||
borderRadius: '6px',
|
||||
padding: 1,
|
||||
}}
|
||||
variant="caption"
|
||||
>
|
||||
Approval
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Divider sx={{ marginY: 2 }} />
|
||||
<Stack>
|
||||
<Typography variant="subtitle2" color="#404040">
|
||||
Details : mohon melengkapi kekurangan dokumen
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="#757575"
|
||||
sx={{ marginTop: 2, marginBottom: 1 }}
|
||||
>
|
||||
Lab pemeriksaan darah
|
||||
</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<Add />}
|
||||
fullWidth
|
||||
sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
|
||||
>
|
||||
Hasil Pemeriksaan Laboratorium
|
||||
</Button>
|
||||
</Stack>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Item 2 */}
|
||||
<Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
{/* // TODO sementara tanggal random */}
|
||||
<Typography variant="body1">
|
||||
{format(
|
||||
addMinutes(
|
||||
new Date(claim.created_at),
|
||||
10// Math.floor(Math.random() * (15 - 5 + 1)) + 5
|
||||
),
|
||||
'HH:mm'
|
||||
)}{' '}
|
||||
WIB
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
backgroundColor: palette.light.warning.lighter,
|
||||
color: palette.light.warning.dark,
|
||||
borderColor: palette.light.warning.dark,
|
||||
border: '1px solid',
|
||||
borderRadius: '6px',
|
||||
padding: 1,
|
||||
}}
|
||||
variant="caption"
|
||||
>
|
||||
Approval
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Divider sx={{ marginY: 2 }} />
|
||||
<Stack>
|
||||
<Typography variant="subtitle2" color="#404040">
|
||||
Details : Penilaian Dokter
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
{/* Item 3 */}
|
||||
<Card sx={{ flex: 1, maxWidth: '100%', paddingY: 2, paddingX: 3 }}>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Typography variant="body1">{fDate(claim.created_at, 'HH:mm')} WIB</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
backgroundColor: '#F5F5F5',
|
||||
color: '#757575',
|
||||
borderColor: '#757575',
|
||||
border: '1px solid',
|
||||
borderRadius: '6px',
|
||||
padding: 1,
|
||||
}}
|
||||
variant="caption"
|
||||
>
|
||||
Review
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Divider sx={{ marginY: 2 }} />
|
||||
<Stack>
|
||||
<Typography variant="subtitle2" color="#404040">
|
||||
Details : Klaim Diajukan
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<MuiDialog
|
||||
title={title}
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
content={getContent()}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default DialogDetailClaim;
|
||||
Reference in New Issue
Block a user