427 lines
20 KiB
TypeScript
Executable File
427 lines
20 KiB
TypeScript
Executable File
import * as React from 'react';
|
|
import Timeline from '@mui/lab/Timeline';
|
|
import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
|
|
import TimelineSeparator from '@mui/lab/TimelineSeparator';
|
|
import TimelineConnector from '@mui/lab/TimelineConnector';
|
|
import TimelineContent from '@mui/lab/TimelineContent';
|
|
import TimelineDot from '@mui/lab/TimelineDot';
|
|
import {Typography, Card, Stack, ButtonBase, Box, Divider} from '@mui/material';
|
|
import { styled } from '@mui/material/styles';
|
|
import Paper from '@mui/material/Paper';
|
|
import Button from '@mui/material/Button';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
import Iconify from '../../components/Iconify';
|
|
import { useEffect, useState, useRef } from 'react';
|
|
import { format } from 'date-fns';
|
|
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
|
|
import DescriptionIcon from '@mui/icons-material/Description';
|
|
import { LoadingButton } from '@mui/lab';
|
|
import axios from '../../utils/axios';
|
|
import { makeFormData } from '@/utils/jsonToFormData';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
import { useParams} from 'react-router-dom';
|
|
|
|
const Item1 = styled(Paper)(({ theme }) => ({
|
|
...theme.typography.body2,
|
|
padding: theme.spacing(1),
|
|
textAlign: 'center',
|
|
backgroundColor: '#919EAB29',
|
|
color: '#637381',
|
|
width: 'fit-content',
|
|
marginRight: 'auto',
|
|
}));
|
|
|
|
const Item2 = styled(Paper)(({ theme }) => ({
|
|
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
|
|
...theme.typography.body2,
|
|
padding: theme.spacing(1),
|
|
textAlign: 'center',
|
|
color: theme.palette.text.secondary,
|
|
width: 'fit-content',
|
|
marginLeft: 'auto',
|
|
}));
|
|
|
|
export default function NoOppositeContent({data}) {
|
|
const [timeline, setTimeline] = useState(null);
|
|
const [requestFile, setRequestFile] = useState(null);
|
|
const [document, setDocument] = useState(null);
|
|
useEffect(() => {
|
|
if (data && data.data) {
|
|
setTimeline(data.data.timeline);
|
|
setRequestFile(data.data.request_files);
|
|
setDocument(data.data.documents);
|
|
}
|
|
|
|
}, [data]);
|
|
|
|
// Diagnosis
|
|
const fileRequestDocumentInputDiagnosis = useRef<HTMLInputElement>(null);
|
|
const [fileDiagnosis, setFileDiagnosis] = useState([]);
|
|
const handleRequestDocumentInputChangeDiagnosis = (event) => {
|
|
if (event.target.files[0]) {
|
|
setFileDiagnosis([...fileDiagnosis, ...event.target.files]);
|
|
}
|
|
};
|
|
const removeFileDiagnois = (filesState, index) => {
|
|
setFileDiagnosis(
|
|
filesState.filter((file, fileIndex) => {
|
|
return fileIndex != index;
|
|
})
|
|
);
|
|
};
|
|
// Kondisi
|
|
const fileRequestDocumentInputKondisi = useRef<HTMLInputElement>(null);
|
|
const [fileKondisi, setFileKondisi] = useState([]);
|
|
const handleRequestDocumentInputChangeKondisi = (event) => {
|
|
if (event.target.files[0]) {
|
|
setFileKondisi([...fileKondisi, ...event.target.files]);
|
|
}
|
|
};
|
|
const removeFileKondisi = (filesState, index) => {
|
|
setFileKondisi(
|
|
filesState.filter((file, fileIndex) => {
|
|
return fileIndex != index;
|
|
})
|
|
);
|
|
};
|
|
// Result
|
|
const fileRequestDocumentInputResult = useRef<HTMLInputElement>(null);
|
|
const [fileResult, setFileResult] = useState([]);
|
|
const handleRequestDocumentInputChangeResult = (event) => {
|
|
if (event.target.files[0]) {
|
|
setFileResult([...fileResult, ...event.target.files]);
|
|
}
|
|
};
|
|
const removeFileResult = (filesState, index) => {
|
|
setFileResult(
|
|
filesState.filter((file, fileIndex) => {
|
|
return fileIndex != index;
|
|
})
|
|
);
|
|
};
|
|
const { id } = useParams();
|
|
const [submitLoading, setSubmitLoading] = useState(false);
|
|
const submitRequestFiles = () => {
|
|
setSubmitLoading(true);
|
|
const formData = makeFormData({
|
|
fileDiagnosis: fileDiagnosis,
|
|
fileKondisis: fileKondisi,
|
|
fileResults: fileResult
|
|
});
|
|
axios
|
|
.post('claim-requests/'+id+'/request-files', formData)
|
|
.then((response) => {
|
|
window.location.reload();
|
|
})
|
|
.catch(({ response }) => {
|
|
enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
|
|
});
|
|
}
|
|
const submitButton = requestFile?.find((dataRequestFile) => dataRequestFile.check_files === null);
|
|
return (
|
|
<>
|
|
{timeline?.map((dataTimeline, index) => (
|
|
<Timeline
|
|
sx={{
|
|
[`& .${timelineItemClasses.root}:before`]: {
|
|
flex: 0,
|
|
padding: 0,
|
|
},
|
|
}}
|
|
key={index}
|
|
>
|
|
<Typography variant="body2" gutterBottom fontWeight="bold">{dataTimeline.date ? format(new Date(dataTimeline.date), "d MMM yyyy") : ''}</Typography>
|
|
<TimelineItem>
|
|
<TimelineSeparator>
|
|
<TimelineDot />
|
|
<TimelineConnector />
|
|
</TimelineSeparator>
|
|
<TimelineContent spacing={3}>
|
|
<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
|
|
<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
|
|
<Stack direction="row" sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
|
|
<Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : mm") : ''}</Item1>
|
|
<Item2 sx={{backgroundColor: dataTimeline.txt_status_backgroundColor, color: dataTimeline.txt_status_color}}>{dataTimeline.txt_status}</Item2>
|
|
</Stack>
|
|
<Stack direction="row" spacing={2} sx={{marginBottom: 2}}>
|
|
<Typography variant="body2" gutterBottom>Detail:</Typography>
|
|
<Typography variant="body2" gutterBottom>{dataTimeline.description}</Typography>
|
|
</Stack>
|
|
{dataTimeline.status === 'reviewed' && requestFile ? (
|
|
<>
|
|
{submitButton ? (
|
|
<Typography variant="body2" gutterBottom>Request Document</Typography>
|
|
) : (
|
|
<Typography sx={{color: '#19BBBB'}} variant="body2" gutterBottom>Request Document Success Uploaded</Typography>
|
|
)}
|
|
{/* Diagnosis */}
|
|
{requestFile?.map((dataRequestFile, index) => {
|
|
if(dataRequestFile.type !== 'claim-diagnosis' || dataRequestFile.check_files !== null){
|
|
return null;
|
|
}
|
|
return (
|
|
<Stack spacing={2} sx={{marginBottom: 2}} key={index}>
|
|
<Typography variant="body2" gutterBottom fontWeight="bold">
|
|
Diagnosis
|
|
</Typography>
|
|
<Stack
|
|
divider={<Divider orientation="horizontal" flexItem />}
|
|
spacing={1}
|
|
sx={{ marginY: 2 }}
|
|
>
|
|
{fileDiagnosis &&
|
|
fileDiagnosis.map((file, index) => (
|
|
<Stack direction="row" justifyContent={'space-between'} key={index}>
|
|
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
|
<InsertDriveFileIcon />
|
|
<Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
|
|
</Stack>
|
|
<Iconify
|
|
icon="eva:trash-2-outline"
|
|
color={'darkred'}
|
|
onClick={() => {
|
|
removeFileDiagnois(fileDiagnosis, index);
|
|
}}
|
|
sx={{cursor: 'pointer'}}
|
|
></Iconify>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
<ButtonBase
|
|
sx={{
|
|
p: 4,
|
|
border: '2px dashed #F9FAFB',
|
|
bgcolor: '#919EAB52',
|
|
borderRadius: '8px',
|
|
width: '100%',
|
|
height: '60px',
|
|
}}
|
|
onClick={() => fileRequestDocumentInputDiagnosis.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 Result
|
|
</Typography>
|
|
</Box>
|
|
<input
|
|
type="file"
|
|
id={`file-${index}`}
|
|
ref={fileRequestDocumentInputDiagnosis}
|
|
style={{ display: 'none' }}
|
|
multiple
|
|
onChange={(event) => handleRequestDocumentInputChangeDiagnosis(event)}
|
|
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
|
|
/>
|
|
</ButtonBase>
|
|
</Stack>
|
|
);
|
|
})}
|
|
{/* Kondisi */}
|
|
{requestFile?.map((dataRequestFile, index) => {
|
|
if(dataRequestFile.type !== 'claim-kondisi' || dataRequestFile.check_files !== null){
|
|
return null;
|
|
}
|
|
return (
|
|
<Stack spacing={2} sx={{marginBottom: 2}} key={index}>
|
|
<Typography variant="body2" gutterBottom fontWeight="bold">
|
|
Condition
|
|
</Typography>
|
|
<Stack
|
|
divider={<Divider orientation="horizontal" flexItem />}
|
|
spacing={1}
|
|
sx={{ marginY: 2 }}
|
|
>
|
|
{fileKondisi &&
|
|
fileKondisi.map((file, index) => (
|
|
<Stack direction="row" justifyContent={'space-between'} key={index}>
|
|
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
|
<InsertDriveFileIcon />
|
|
<Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
|
|
</Stack>
|
|
<Iconify
|
|
icon="eva:trash-2-outline"
|
|
color={'darkred'}
|
|
onClick={() => {
|
|
removeFileKondisi(fileKondisi, index);
|
|
}}
|
|
sx={{cursor: 'pointer'}}
|
|
></Iconify>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
<ButtonBase
|
|
sx={{
|
|
p: 4,
|
|
border: '2px dashed #F9FAFB',
|
|
bgcolor: '#919EAB52',
|
|
borderRadius: '8px',
|
|
width: '100%',
|
|
height: '60px',
|
|
}}
|
|
onClick={() => fileRequestDocumentInputKondisi.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 Result
|
|
</Typography>
|
|
</Box>
|
|
<input
|
|
type="file"
|
|
id={`file-${index}`}
|
|
ref={fileRequestDocumentInputKondisi}
|
|
style={{ display: 'none' }}
|
|
multiple
|
|
onChange={(event) => handleRequestDocumentInputChangeKondisi(event)}
|
|
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
|
|
/>
|
|
</ButtonBase>
|
|
</Stack>
|
|
);
|
|
})}
|
|
{/* Supporting Result */}
|
|
{requestFile?.map((dataRequestFile, index) => {
|
|
if(dataRequestFile.type !== 'claim-result' || dataRequestFile.check_files !== null){
|
|
return null;
|
|
}
|
|
return (
|
|
<Stack spacing={2} sx={{marginBottom: 2}} key={index}>
|
|
<Typography variant="body2" gutterBottom fontWeight="bold">
|
|
Supporting Result
|
|
</Typography>
|
|
<Stack
|
|
divider={<Divider orientation="horizontal" flexItem />}
|
|
spacing={1}
|
|
sx={{ marginY: 2 }}
|
|
>
|
|
{fileResult &&
|
|
fileResult.map((file, index) => (
|
|
<Stack direction="row" justifyContent={'space-between'} key={index}>
|
|
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
|
<InsertDriveFileIcon />
|
|
<Typography variant="body2" gutterBottom>{file.name ? file.name : '-'}</Typography>
|
|
</Stack>
|
|
<Iconify
|
|
icon="eva:trash-2-outline"
|
|
color={'darkred'}
|
|
onClick={() => {
|
|
removeFileResult(fileResult, index);
|
|
}}
|
|
sx={{cursor: 'pointer'}}
|
|
></Iconify>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
<ButtonBase
|
|
sx={{
|
|
p: 4,
|
|
border: '2px dashed #F9FAFB',
|
|
bgcolor: '#919EAB52',
|
|
borderRadius: '8px',
|
|
width: '100%',
|
|
height: '60px',
|
|
}}
|
|
onClick={() => fileRequestDocumentInputResult.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 Result
|
|
</Typography>
|
|
</Box>
|
|
<input
|
|
type="file"
|
|
id={`file-${index}`}
|
|
ref={fileRequestDocumentInputResult}
|
|
style={{ display: 'none' }}
|
|
multiple
|
|
onChange={(event) => handleRequestDocumentInputChangeResult(event)}
|
|
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain, application/pdf"
|
|
/>
|
|
</ButtonBase>
|
|
</Stack>
|
|
);
|
|
})}
|
|
{submitButton ? (
|
|
<LoadingButton
|
|
variant="contained"
|
|
sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
|
|
onClick={() => {
|
|
submitRequestFiles();
|
|
}}
|
|
loading={submitLoading}
|
|
>
|
|
Submit
|
|
</LoadingButton>
|
|
) : ''}
|
|
</>
|
|
) : ''}
|
|
</Stack>
|
|
</Card>
|
|
{dataTimeline.status === 'requested' ? (
|
|
<Card sx={{marginTop: 2 }}>
|
|
<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
|
|
<Stack direction="row" spacing={2} sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }} alignItems="center">
|
|
<DescriptionIcon />
|
|
<Typography variant="Subtitle2" sx={{fontWeight: 'bold'}}>Documents</Typography>
|
|
</Stack>
|
|
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
|
{document?.map((dataDocument, index) => (
|
|
<Stack direction="column" spacing={2} key={index}>
|
|
<Typography variant="Subtitle2" gutterBottom>
|
|
{dataDocument.type === 'claim-diagnosis' ?
|
|
'Diagnosis'
|
|
: dataDocument.type === 'claim-kondisi' ?
|
|
'Condition'
|
|
: dataDocument.type === 'claim-result' ?
|
|
'Supporting Result'
|
|
: dataDocument.type === 'claim-invoice' ?
|
|
'Invoice'
|
|
: ''}
|
|
</Typography>
|
|
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
|
<InsertDriveFileIcon />
|
|
<a
|
|
href={dataDocument.path}
|
|
style={{ cursor: 'pointer', textDecoration: 'underline', color: '#19BBBB' }}
|
|
target="_blank"
|
|
>
|
|
<Typography variant="body2" gutterBottom>{dataDocument.original_name ? dataDocument.original_name : '-'}</Typography>
|
|
</a>
|
|
</Stack>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
) : ''}
|
|
</TimelineContent>
|
|
</TimelineItem>
|
|
</Timeline>
|
|
))}
|
|
</>
|
|
);
|
|
}
|