Detail Claim Management

This commit is contained in:
ivan-sim
2023-10-26 17:24:41 +07:00
parent bf0001ced6
commit 1c71edd3ed
9 changed files with 527 additions and 6 deletions

View File

@@ -31,7 +31,7 @@ import { enqueueSnackbar } from 'notistack';
// ----------------------------------------------------------------------
export default function UserProfile() {
export default function Detail() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const code = queryParams.get('code');
@@ -133,7 +133,7 @@ export default function UserProfile() {
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
<ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
<Typography variant="h5" sx={{marginLeft:2}}>{code}</Typography>
<Typography variant="h5" sx={{marginLeft:2}}>{(data && data.data) ? data.data.status.code : ''}</Typography>
{data ? (
<Stack direction="row" spacing={2} ml="auto">
<Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>

View File

@@ -368,7 +368,7 @@ export default function List() {
<EditOutlinedIcon />
Edit
</MenuItem>
<MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'/?code='+row.code)}>
<MenuItem onClick={() => navigate ('/claim-requests/detail/'+row.id+'')}>
<FindInPageOutlinedIcon />
Detail
</MenuItem>

View File

@@ -0,0 +1,424 @@
// mui
import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
// react
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { useEffect, useState, useRef } from 'react';
import axios from '../../utils/axios';
// pages
import DetailTimeline from '../../pages/ClaimRequests/DetailTimeline';
import DetailStepper from '../../pages/ClaimRequests/DetailStepper';
import { format } from 'date-fns';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import Iconify from '@/components/Iconify';
import { fPostFormat } from '@/utils/formatTime';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import DownloadIcon from '@mui/icons-material/Download';
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { fDateTimesecond } from '@/utils/formatTime';
import { makeFormData } from '@/utils/jsonToFormData';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { enqueueSnackbar } from 'notistack';
// ----------------------------------------------------------------------
export default function Detail() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const code = queryParams.get('code');
const navigate = useNavigate();
const { themeStretch } = useSettings();
const [data, setData] = useState();
const [dataDialog, setDataDialog] = useState();
const [customerData, setCustomerData] = useState(null);
const [documentData, setDocumentData] = useState(null);
const [requestDocumentData, setRequestDocumentData] = useState(null);
const { id } = useParams();
useEffect(() => {
axios
.get('/claims/detail/'+id)
.then((response) => {
setCustomerData(response.data.data.customer_data);
setDocumentData(response.data.data.documents);
setRequestDocumentData(response.data.data.request_documents);
})
.catch((error) => {
console.error(error);
});
}, []);
const [isInvoiceVisible, setInvoiceVisibility] = useState(false);
const handleInvoice = () => {
setInvoiceVisibility(!isInvoiceVisible);
}
const currentDate = new Date();
const formattedCurrentDate = format(currentDate, 'dd MMM yyyy');
const [dateInvoice, setDateInvoice] = useState(currentDate);
const fileInvoiceInput = useRef<HTMLInputElement>(null);
const [fileInvoices, setFileInvoices] = useState([]);
const handleInvoiceInputChange = (event) => {
if (event.target.files[0]) {
setFileInvoices([...fileInvoices, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeInvoiceFiles = (filesState, index) => {
setFileInvoices(
filesState.filter((file, fileIndex) => {
return fileIndex != index;
})
);
};
const date = dateInvoice ? fPostFormat(dateInvoice, 'yyyy-MM-dd') : null;
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
const handleCloseDialogSubmit = () => {
setOpenDialogSubmit(false);
}
const handleSubmitData = () => {
if(fileInvoices.length > 0)
{
//submit data
axios
.post('claim-requests/'+id+'/approve')
.then((response) => {
enqueueSnackbar('Success Submit Claim Request', { variant: 'success' });
setOpenDialogSubmit(false);
})
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
});
//Upload file invoices
const formData = makeFormData({
date:date,
invoice_files: fileInvoices,
});
axios
.post('claim-requests/'+id+'/invoice-files', formData)
.then((response) => {
enqueueSnackbar(response.data.message ?? 'Success upload invoice', { variant: 'success' });
})
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something Went Wrong', { variant: 'error' });
});
}
else
{
enqueueSnackbar('Please upload file invoice, before submit', { variant: 'warning' });
}
setTimeout(() =>
{
window.location.reload();
}, 5000);
};
function toTitleCase(str) {
return str.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
const style1 = {
color: '#919EAB',
width: '30%'
}
const style2 = {
width: '70%'
}
const marginBottom1 = {
marginBottom: 1,
}
const [openDialogRequest, setOpenDialogRequest] = useState(false);
const handleCloseDialogUpdate = () => {
setOpenDialogRequest(false);
}
const [conditionChecked, setConditionChecked] = useState(true);
const [diagnosisChecked, setDiagnosisChecked] = useState(false);
const [supportingResultChecked, setSupportingResultChecked] = useState(false);
const handleConditionChange = (event) => {
setConditionChecked(event.target.checked);
};
const handleDiagnosisChange = (event) => {
setDiagnosisChecked(event.target.checked);
};
const handleSupportingResultChange = (event) => {
setSupportingResultChecked(event.target.checked);
};
const [noteField, setNoteField] = useState('');
const [noteFieldError, setNoteFieldError] = useState('');
const isRequiredFieldsFilled = () => {
return noteField.trim() !== '';
};
const handelRequestDocument = () => {
const dataForm = {
claim_id: id,
condition: conditionChecked,
diagnosis: diagnosisChecked,
result: supportingResultChecked,
note: noteField,
}
axios
.post('/claims/request-documents', dataForm)
.then((response) => {
enqueueSnackbar('Success Request Document', { variant: 'success' });
setOpenDialogRequest(false);
window.location.reload();
})
.catch((error) => {
enqueueSnackbar('Something Went Wrong', { variant: 'error' });
})
}
return (
<Page title='Detail'>
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
<ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
<Typography variant="h5" sx={{marginLeft:2}}>{(customerData && customerData.code ? customerData.code : '')}</Typography>
{customerData ? (
<Stack direction="column" spacing={1} alignItems="center" sx={{marginLeft:'auto'}}>
<Stack direction="row" spacing={2}>
<Typography variant="body2" sx={{color: '#757575'}}>Status</Typography>
<Typography variant="body2" fontWeight="bold">{(customerData && customerData.status) ? toTitleCase(customerData.status) : ''}</Typography>
</Stack>
<Stack direction="row" spacing={2}>
<Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
<Typography variant="body2" fontWeight="bold">{(customerData && customerData.submission_date) ? format(new Date(customerData.submission_date), "d MMM yyyy") : ''}</Typography>
</Stack>
</Stack>
) : ''}
</Stack>
<Grid container spacing={2}>
{customerData ? (
<Grid item xs={12} md={12}>
<Card sx={{padding:2}} >
<Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Summary of Customer Data</Typography>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Full Name</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.name}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.payor_id}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.member_id}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Type</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(customerData.payment_type)}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Corporate Name</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(customerData.coporate_name)}</Typography>
</Stack>
</Card>
</Grid>
) : ''}
{documentData ? (
<Grid item xs={12} spacing={2}>
<Card sx={{padding: 2}}>
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Additional Documents</Typography>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => setOpenDialogRequest(true)}>
<Typography variant="button" display="block">Request Document</Typography>
</Button>
</Stack>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
{documentData?.map((documentType, index) => (
<Stack direction="column" spacing={2} key={index}>
<Typography variant="Subtitle2" gutterBottom>
{documentType.type === 'claim-diagnosis' ?
'Diagnosis'
: documentType.type === 'claim-kondisi' ?
'Condition'
: documentType.type === 'claim-result' ?
'Supporting Result'
: documentType.type === 'claim-invoice' ?
'Invoice'
: ''}
</Typography>
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
<InsertDriveFileIcon />
<a
href={documentType.path}
style={{ cursor: 'pointer', textDecoration: 'underline', color: '#19BBBB' }}
target="_blank"
>
<Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
</a>
</Stack>
</Stack>
))}
</Stack>
{requestDocumentData && requestDocumentData.length > 0 ? (
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Request Documents</Typography>
) : ''}
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
{requestDocumentData?.map((documentType, index) => (
<Stack direction="column" spacing={2} key={index}>
<Stack direction="row" spacing={1} sx={{color: '#637381'}}>
<InsertDriveFileIcon />
<Typography variant="body2" gutterBottom>
{documentType.type === 'claim-diagnosis' ?
'Diagnosis'
: documentType.type === 'claim-kondisi' ?
'Condition'
: documentType.type === 'claim-result' ?
'Supporting Result'
: documentType.type === 'claim-invoice' ?
'Invoice'
: ''}
</Typography>
</Stack>
</Stack>
))}
</Stack>
<Dialog open={openDialogRequest} onClose={handleCloseDialogUpdate} fullWidth={true}>
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
<Stack direction="row" alignItems="center" justifyContent="space-between">
<Stack direction="row" alignItems='center' spacing={1}>
<Typography variant="h6">Request Document</Typography>
</Stack>
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
<CloseIcon />
</IconButton>
</Stack>
</DialogTitle>
<DialogContent>
<Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={conditionChecked} onChange={handleConditionChange} />}
label="Condition Document"
/>
<FormControlLabel
control={<Checkbox checked={diagnosisChecked} onChange={handleDiagnosisChange} />}
label="Diagnosis Document"
/>
<FormControlLabel
control={<Checkbox checked={supportingResultChecked} onChange={handleSupportingResultChange} />}
label="Supporting Result Document"
/>
</FormGroup>
<TextField
label="Note"
required
value={noteField ? noteField : ''}
onChange={(e) =>{
setNoteField(e.target.value);
setNoteFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
}}
fullWidth
inputProps={{ maxLength: 50 }}
error={!!noteFieldError}
helperText={noteFieldError}
/>
</Stack>
</DialogContent>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
<Button sx={{backgroundColor: '#19BBBB'}} variant="contained" disabled={!isRequiredFieldsFilled()} onClick={() => handelRequestDocument()}>Request</Button>
</DialogActions>
</Dialog>
</Card>
</Grid>
): ''}
<Grid item xs={12} spacing={2}>
<Card sx={{padding: 2}}>
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>History of Hospital Care</Typography>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
<Typography variant="button" display="block">History</Typography>
</Button>
</Stack>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
</Stack>
</Card>
</Grid>
<Grid item xs={12} spacing={2}>
<Card sx={{padding: 2}}>
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnostic History</Typography>
</Stack>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
</Stack>
</Card>
</Grid>
<Grid item xs={12} spacing={2}>
<Card sx={{padding: 2}}>
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnosis Summary</Typography>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
<Typography variant="button" display="block">Diagnosis</Typography>
</Button>
</Stack>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
</Stack>
</Card>
</Grid>
<Grid item xs={12} spacing={2}>
<Card sx={{padding: 2}}>
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Service</Typography>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
<Typography variant="button" display="block">Service</Typography>
</Button>
</Stack>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
</Stack>
</Card>
</Grid>
<Grid item xs={12} spacing={2}>
<Card sx={{padding: 2}}>
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Client Benefit Configuration</Typography>
</Stack>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
</Stack>
</Card>
</Grid>
<Grid item xs={12} md={12}>
<Stack direction="row" padding={4}>
<>
<Button variant="outlined" sx={{color: '#FF4842', borderColor: '#FF4842', marginLeft: 'auto'}} >Decline</Button>
<Button sx={{backgroundColor: '#19BBBB', marginLeft: 1}} variant="contained" onClick={()=> setOpenDialogSubmit(true)}>Submit</Button>
</>
</Stack>
</Grid>
</Grid>
</Container>
</Page>
);
}

View File

@@ -208,7 +208,7 @@ export default function List() {
<Edit />
Edit
</MenuItem>
<MenuItem onClick={() => setOpen(!open) }>
<MenuItem onClick={() => navigate('/claims/detail/'+row.id+'') }>
<FindInPageOutlinedIcon />
Detail
</MenuItem>

View File

@@ -393,6 +393,10 @@ export default function Router() {
path: 'claims/edit/:id',
element: <ClaimsCreate />,
},
{
path: 'claims/detail/:id',
element: <ClaimsDetail />,
},
{
path: 'claims/:id',
element: <ClaimShow />,
@@ -559,6 +563,7 @@ const Profile = Loadable(lazy(() => import('../pages/Profile/Index')));
const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
const ClaimsCreate = Loadable(lazy(() => import('../pages/Claims/CreateUpdate')));
const ClaimsDetail = Loadable(lazy(() => import('../pages/Claims/Detail')));
const ClaimShow = Loadable(lazy(() => import('../pages/Claims/Show')));
const ClaimRequests = Loadable(lazy(() => import('../pages/ClaimRequests/Index')));