342 lines
12 KiB
TypeScript
342 lines
12 KiB
TypeScript
// @mui
|
|
import {
|
|
Button,
|
|
Box,
|
|
Stepper,
|
|
Step,
|
|
StepLabel,
|
|
Card,
|
|
Typography,
|
|
Divider,
|
|
Stack,
|
|
CircularProgress,
|
|
ButtonBase,
|
|
} 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, useRef } 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) => {
|
|
console.log(data);
|
|
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 direction="row" spacing={1}>
|
|
<Typography variant="caption">Submission Date</Typography>
|
|
{/* {JSON.stringify(data)} */}
|
|
<Typography variant="caption" sx={{fontWeight: 'bold'}}>
|
|
{claim.created_at && format(new Date(claim.created_at), "d MMM yyyy")}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
{/* ----------------STEP---------------- */}
|
|
<Box sx={{ width: '100%', marginTop: 2 }}>
|
|
<Stepper alternativeLabel activeStep={currentStep ?? 0}>
|
|
{steps.map((label) => (
|
|
<Step key={label}>
|
|
<StepLabel>{label}</StepLabel>
|
|
</Step>
|
|
))}
|
|
</Stepper>
|
|
</Box>
|
|
|
|
<Stack direction="row" spacing={2} sx={{ marginTop: 2 }}>
|
|
<Stack spacing={2} sx={{ flex: 1, maxWidth: '100%' }}>
|
|
{/* ---------------------------------TYPE INFO------------------------------------ */}
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
|
<Typography variant="body1" fontWeight={600}>
|
|
Request Claim
|
|
</Typography>
|
|
</Stack>
|
|
<Buttons variant="contained" type="invoice" />
|
|
</Stack>
|
|
</Stack>
|
|
{console.log(claim.histories_by_date)}
|
|
|
|
{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?.claim_result &&
|
|
claim.files_by_type.claim_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()}
|
|
/>
|
|
);
|
|
};
|
|
|
|
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;
|