Files
aso/frontend/dashboard/src/pages/Claims/components/Documents.tsx
2023-04-06 05:03:38 +07:00

126 lines
4.0 KiB
TypeScript

import { IconButtonAnimate } from '@/components/animate';
import Iconify from '@/components/Iconify';
import MuiDialog from '@/components/MuiDialog';
import { Box, Tooltip } from '@mui/material';
import { Paper, Stack, Typography } from '@mui/material';
import { useState } from 'react';
import DialogDocumentRequest from './DialogDocumentRequest';
export default function Documents({ files }) {
// --------------------------------------------------------------
// Dialog Request Document
const [openDialogRequestDocument, setOpenDialogRequestDocument] = useState(false);
const [openDialogConfirmRequestDocument, setOpenDialogConfirmRequestDocument] = useState(false);
function FileItem({ item }) {
function fileCategory(type: string) {
switch (type) {
case 'claim-result':
return 'Claim Result';
case 'claim-diagnosis':
return 'Claim Diagnosis';
case 'claim-condition':
return 'Claim Condition';
default:
return 'Other File';
}
}
const documentTypes = [
{
type: 'result',
name: 'Dokumen Hasil Penunjang',
},
{
type: 'claim-diagnosis',
name: 'Dokumen Diagnosa',
},
{
type: 'claim-diagnosis',
name: 'Dokumen Diagnosa',
},
];
return (
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: 1 }}>
<Stack>
<Typography variant="body2" fontWeight="600">
{fileCategory(item.type)}
</Typography>
<Typography variant="body2">
<a href={item.url} target="_blank">
{item.name}
</a>
</Typography>
</Stack>
<Iconify icon="eva:arrow-ios-forward-fill"></Iconify>
</Stack>
);
}
return (
<Paper variant="outlined" sx={{ background: '#f4f6f8', p: 2 }}>
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" fontWeight={600}>
Dokumen Tambahan
</Typography>
<Typography
variant="body2"
onClick={() => {
setOpenDialogRequestDocument(true);
}}
>
+ Request Document
</Typography>
</Stack>
<Paper sx={{ background: 'white', marginTop: 2 }}>
<Stack>
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{p: 2, paddingBottom: 1}}>
<Typography fontWeight="bold">Dokumen Diagnosa</Typography>
<Tooltip title="Request to upload this">
<IconButtonAnimate color="primary" onClick={() => {}}>
<Iconify icon="eva:bell-outline" width={20} height={20}></Iconify>
{/* <Iconify icon="eva:done-all-fill" width={20} height={20} /> */}
</IconButtonAnimate>
</Tooltip>
<MuiDialog
title="Are you sure to request this document?"
openDialog={openDialogConfirmRequestDocument}
setOpenDialog={setOpenDialogConfirmRequestDocument}
content={(
<Typography variant="body2">kasjdnkajsdnkasdnaksjdnaksdjnkasdnkajsdn</Typography>
)}
/>
</Stack>
<Stack sx={{px: 2}}>
<Typography variant="body2">Dokumen Diagnosa</Typography>
</Stack>
<Stack sx={{px: 2}}>
<Typography variant="body2">Dokumen Diagnosa</Typography>
</Stack>
</Stack>
{files.length > 0 ? (
<Stack sx={{ maxHeight: '250px', overflowY: 'scroll' }}>
{files.map((file, index) => (
<FileItem item={file} key={index}></FileItem>
))}
</Stack>
) : (
<Stack sx={{ p: 1 }}>
<Typography>Belum ada dokumen</Typography>
</Stack>
)}
</Paper>
<DialogDocumentRequest
setOpenDialog={setOpenDialogRequestDocument}
openDialog={openDialogRequestDocument}
></DialogDocumentRequest>
</Paper>
);
}