[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;
|
||||
@@ -36,12 +36,12 @@ import { LoadingButton } from '@mui/lab';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { Divider } from '@mui/material';
|
||||
import Iconify from '@/components/Iconify';
|
||||
import DialogDetailClaim from '@/components/dialogs/DialogDetailClaim';
|
||||
// import LoadingButton from '@/theme/overrides/LoadingButton';
|
||||
|
||||
export default function List() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [importResult, setImportResult] = useState(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
function SearchInput(props: any) {
|
||||
// SEARCH
|
||||
@@ -184,6 +184,16 @@ export default function List() {
|
||||
<TableCell align="left">{row.service_type}</TableCell>
|
||||
<TableCell align="right"><Chip label={row.status}/></TableCell>
|
||||
<TableCell align="right">{ row.status == 'requested' && (<LoadingButton loading={loadingApprove} variant="outlined" onClick={() => {handleApprove(row)}}>Approve</LoadingButton> )}</TableCell>
|
||||
<TableCell>
|
||||
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
handleShowClaim(row);
|
||||
}}
|
||||
>
|
||||
<Iconify icon="eva:eye-fill" />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{/* COLLAPSIBLE ROW */}
|
||||
<TableRow>
|
||||
@@ -278,6 +288,33 @@ export default function List() {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// Dialog Detail Claim Request
|
||||
const [openDialogDetailClaim, setOpenDialogDetailClaim] = useState(false);
|
||||
const [loadingClaimDetail, setLoadingClaimDetail] = useState(true);
|
||||
const [currentClaim, setCurrentClaim] = useState(null);
|
||||
|
||||
function handleShowClaim(claimRequest) {
|
||||
setLoadingClaimDetail(true);
|
||||
setOpenDialogDetailClaim(true);
|
||||
|
||||
axios.get(`/claim-requests/${claimRequest.id}`)
|
||||
.then(({data}) => {
|
||||
setCurrentClaim(data.data);
|
||||
setLoadingClaimDetail(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
enqueueSnackbar(err.message, {variant: 'error'})
|
||||
})
|
||||
}
|
||||
|
||||
function handleDownloadLog() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<ImportForm />
|
||||
@@ -289,6 +326,14 @@ export default function List() {
|
||||
handlePageChange={handlePageChange}
|
||||
TableContent={<TableContent />}
|
||||
/>
|
||||
|
||||
|
||||
<DialogDetailClaim
|
||||
openDialog={openDialogDetailClaim}
|
||||
setOpenDialog={setOpenDialogDetailClaim}
|
||||
title={{ name: 'Claim Request Detail' }}
|
||||
data={{ claim: currentClaim, isLoading: loadingClaimDetail, handleDownloadLog }}
|
||||
></DialogDetailClaim>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user