197 lines
10 KiB
TypeScript
197 lines
10 KiB
TypeScript
import {
|
|
Container,
|
|
Grid,
|
|
Stack,
|
|
Typography,
|
|
Card,
|
|
Dialog,
|
|
} 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, useMemo } from 'react';
|
|
import axios from '../../../utils/axios';
|
|
// pages
|
|
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
|
import { DetailRequestLogType } from './Model/Types';
|
|
import { fDate, fDateTimesecond } from '@/utils/formatTime';
|
|
import { Button } from '@mui/material';
|
|
import DialogConfirmation from './Components/DialogConfirmation';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export default function Detail() {
|
|
const location = useLocation();
|
|
const queryParams = new URLSearchParams(location.search);
|
|
|
|
const navigate = useNavigate();
|
|
const { themeStretch } = useSettings();
|
|
const [requestLog, setRequestLog] = useState<DetailRequestLogType>();
|
|
|
|
|
|
const { id } = useParams();
|
|
|
|
useEffect(() => {
|
|
axios
|
|
.get('customer-service/request/'+id)
|
|
.then((response) => {
|
|
setRequestLog(response.data.data)
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
})
|
|
}, [id]);
|
|
|
|
function toTitleCase(str: string | null) {
|
|
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 [openDialogSubmit, setOpenDialogSubmit] = useState(false);
|
|
const handleCloseDialogSubmit = () => {
|
|
setOpenDialogSubmit(false);
|
|
}
|
|
|
|
const [approve, setApprove] = useState('')
|
|
|
|
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}}>{(requestLog && requestLog.code ? requestLog.code : '')}</Typography>
|
|
</Stack>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} md={12}>
|
|
<Card sx={{padding:2}} >
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Detail</Typography>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Provider Name</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.provider}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Date Of Birth</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.date_of_birth ? fDate(requestLog?.date_of_birth) : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Marital Status</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.marital_status}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
|
|
</Stack>
|
|
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>No KTP</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.no_identitas ? requestLog?.no_identitas : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Keterangan</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.keterangan ? requestLog?.keterangan : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Hak Kamar Pasien</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.hak_kamar_pasien ? requestLog?.hak_kamar_pasien : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Penempatan Kamar</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.penempatan_kamar ? requestLog?.penempatan_kamar : '-'}</Typography>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
<Grid item xs={12} md={12} marginTop={2}>
|
|
<Card sx={{padding:2}} >
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Service</Typography>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(requestLog?.claim_method ?? '-')}</Typography>
|
|
</Stack>
|
|
{/* <Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={{width:'35%', color: '#919EAB'}} gutterBottom>Benefit</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
|
<ul>
|
|
{requestLog?.benefit.length > 0 ? requestLog?.benefit.map((r, index) => (
|
|
<li key={index}>{r.code } - {r.description}</li>
|
|
)) : <li>-</li>}
|
|
</ul>
|
|
</Typography>
|
|
</Stack> */}
|
|
</Card>
|
|
</Grid>
|
|
{requestLog?.status == 'requested' ? (
|
|
<Grid item xs={12} md={12}>
|
|
<Stack direction="row" padding={4} sx={{ justifyContent: 'space-between' }}>
|
|
<>
|
|
<div>
|
|
<Button
|
|
variant="outlined"
|
|
sx={{ color: '#FF4842', borderColor: '#FF4842' }}
|
|
onClick={() => {
|
|
setOpenDialogSubmit(true);
|
|
setApprove('declined');
|
|
}}
|
|
>
|
|
Decline
|
|
</Button>
|
|
</div>
|
|
<div>
|
|
<Button
|
|
variant="outlined"
|
|
sx={{ color: '#19BBBB', borderColor: '#19BBBB' }}
|
|
onClick={() => {
|
|
setOpenDialogSubmit(true);
|
|
setApprove('approved');
|
|
}}
|
|
>
|
|
Approve
|
|
</Button>
|
|
</div>
|
|
</>
|
|
<DialogConfirmation
|
|
setOpenDialog={setOpenDialogSubmit}
|
|
requestLog={requestLog}
|
|
openDialog={openDialogSubmit}
|
|
approve={approve}
|
|
></DialogConfirmation>
|
|
</Stack>
|
|
</Grid>
|
|
) : null}
|
|
|
|
</Grid>
|
|
</Container>
|
|
</Page>
|
|
);
|
|
}
|