[WIP] A
This commit is contained in:
296
frontend/dashboard/src/components/dialogs/DialogDetailClaim.tsx
Normal file
296
frontend/dashboard/src/components/dialogs/DialogDetailClaim.tsx
Normal file
@@ -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';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import Iconify from '../Iconify';
|
||||
|
||||
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]
|
||||
);
|
||||
|
||||
// ----------------------------------------------------
|
||||
// Date Stamp
|
||||
let currentDate = null;
|
||||
|
||||
// ----------------------------------------------------
|
||||
// Download LOG
|
||||
const [loadingDownloadLog, setLoadingDownloadLog] = useState(false);
|
||||
const handleDownloadLog = async (claimRequest) => {
|
||||
setLoadingDownloadLog(true);
|
||||
await data.handleDownloadLog(claimRequest).then(() => {
|
||||
setLoadingDownloadLog(false);
|
||||
});
|
||||
};
|
||||
|
||||
// ----------------------------------------------------
|
||||
// Handle Upload Invoice
|
||||
const handleUploadInvoice = () => {
|
||||
enqueueSnackbar('Something went wrong, please contact Link Medis Sehat', { variant: 'error' });
|
||||
};
|
||||
|
||||
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.created_at && 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={false}
|
||||
variant="contained"
|
||||
startIcon={<Add />}
|
||||
fullWidth
|
||||
// sx={{ typography: 'subtitle2', borderColor: '#F5F5F5' }}
|
||||
onClick={() => {handleUploadInvoice()}}
|
||||
>
|
||||
Upload Invoice
|
||||
</LoadingButton>
|
||||
</Stack>
|
||||
)} */}
|
||||
|
||||
{claim.histories_by_date &&
|
||||
claim.histories_by_date.map((historiesByDate) => (
|
||||
<Stack key={historiesByDate.date}>
|
||||
<Stack marginTop={2}>
|
||||
<Typography variant="subtitle1" paddingY={2}>
|
||||
{fDate(historiesByDate.date)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Divider orientation="vertical" flexItem sx={{ borderStyle: 'dashed' }} />
|
||||
<Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
|
||||
{historiesByDate.histories &&
|
||||
historiesByDate.histories.map((history) => (
|
||||
<Stack key={history.id}>
|
||||
{/* ---------------------------------TYPE INFO------------------------------------ */}
|
||||
<Card sx={{ paddingY: 2, paddingX: 3 }}>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<Typography variant="body1">
|
||||
{fDate(history.created_at, '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"
|
||||
>
|
||||
Request
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Divider sx={{ marginY: 2 }} />
|
||||
<Stack>
|
||||
<Typography variant="subtitle2" color="#404040">
|
||||
{history.title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="#757575"
|
||||
sx={{ marginTop: 2, marginBottom: 1 }}
|
||||
>
|
||||
{history.description}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</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> Dokumen Kelengkapan
|
||||
</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"
|
||||
>
|
||||
Dokumen
|
||||
</Typography> */}
|
||||
</Stack>
|
||||
<Divider sx={{ marginY: 2 }} />
|
||||
|
||||
<Typography fontWeight="600">Kondisi</Typography>
|
||||
<Stack>
|
||||
<Stack
|
||||
// divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={1}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
{claim.files_by_type?.claim_kondisi &&
|
||||
claim.files_by_type.claim_kondisi.map((file, index) => (
|
||||
<Stack direction="row" justifyContent={'space-between'} key={index}>
|
||||
<a href={file.url} target="_blank" style={{ textDecoration: 'none' }}>
|
||||
<Typography sx={{ color: 'text.secondary' }} variant="subtitle2">
|
||||
- {file.name}
|
||||
</Typography>
|
||||
</a>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<Typography fontWeight="600">Diagnosa</Typography>
|
||||
<Stack
|
||||
// divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={1}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
{claim.files_by_type?.claim_diagnosis &&
|
||||
claim.files_by_type.claim_diagnosis.map((file, index) => (
|
||||
<Stack direction="row" justifyContent={'space-between'} key={index}>
|
||||
<a href={file.url} target="_blank" style={{ textDecoration: 'none' }}>
|
||||
<Typography sx={{ color: 'text.secondary' }} variant="subtitle2">
|
||||
- {file.name}
|
||||
</Typography>
|
||||
</a>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<Typography fontWeight="600">Hasil</Typography>
|
||||
<Stack
|
||||
divider={<Divider orientation="horizontal" flexItem />}
|
||||
spacing={1}
|
||||
sx={{ marginY: 2 }}
|
||||
>
|
||||
{claim.files_by_type?.result &&
|
||||
claim.files_by_type.result.map((file, index) => (
|
||||
<Stack direction="row" justifyContent={'space-between'} key={index}>
|
||||
<a href={file.url} target="_blank" style={{ textDecoration: 'none' }}>
|
||||
<Typography sx={{ color: 'text.secondary' }} variant="subtitle2">
|
||||
- {file.name}
|
||||
</Typography>
|
||||
</a>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<MuiDialog
|
||||
title={title}
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
content={getContent()}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default DialogDetailClaim;
|
||||
Reference in New Issue
Block a user