432 lines
20 KiB
TypeScript
432 lines
20 KiB
TypeScript
import {
|
|
Container,
|
|
Grid,
|
|
Stack,
|
|
Typography,
|
|
Card,
|
|
Dialog,
|
|
TableRow,
|
|
Tab,
|
|
TableCell,
|
|
Collapse,
|
|
AccordionSummary,
|
|
AccordionDetails,
|
|
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, useMemo } from 'react';
|
|
import axios from '../../../utils/axios';
|
|
// pages
|
|
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
|
import { DetailFinalLogType } from './Model/Types';
|
|
import { fDate, fDateTimesecond } from '@/utils/formatTime';
|
|
import { Button } from '@mui/material';
|
|
import DialogConfirmation from '../FinalLog/Components/DialogConfirmation';
|
|
import Label from '@/components/Label';
|
|
import { Box } from '@mui/system';
|
|
import { Accordion } from '@mui/material';
|
|
import { Delete, EditOutlined, ExpandMore } from '@mui/icons-material';
|
|
import {BenefitData } from '../FinalLog/Model/Types'
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
|
|
// Import Card Detail Final LOG
|
|
import CardDetail from '../Components/CardDetail';
|
|
import CardService from '../Components/CardService';
|
|
import CardExclusion from '../Components/CardExclusion';
|
|
import CardBenefit from '../Components/CardBenefit';
|
|
|
|
// Import Dialog
|
|
import DialogHospitalCare from './Components/DialogHospitalCare';
|
|
import DialogBenefit from './Components/DialogBenefit';
|
|
import DialogMedicine from './Components/DialogMedicine';
|
|
import DialogDelete from './Components/DialogDelete';
|
|
import DialogEditBenefit from './Components/DialogEditBenefit';
|
|
import { DialogDeleteMedicine } from './Components/DialogDelete';
|
|
|
|
import MoreMenu from '@/components/MoreMenu';
|
|
import { MenuItem } from '@mui/material';
|
|
import { fNumber } from '@/utils/formatNumber';
|
|
import palette from '@/theme/palette';
|
|
import CardMedicine from '../Components/CardMedicine';
|
|
import CardFile from '../Components/CardFile';
|
|
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export default function Detail() {
|
|
const location = useLocation();
|
|
const queryParams = new URLSearchParams(location.search);
|
|
|
|
const navigate = useNavigate();
|
|
const { themeStretch } = useSettings();
|
|
const [requestLog, setRequestLog] = useState<DetailFinalLogType>();
|
|
|
|
|
|
const { id } = useParams();
|
|
|
|
useEffect(() => {
|
|
axios
|
|
.get('customer-service/request/'+id)
|
|
.then((response) => {
|
|
setRequestLog(response.data.data)
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
})
|
|
}, [id]);
|
|
|
|
const style1 = {
|
|
color: '#919EAB',
|
|
width: '30%'
|
|
}
|
|
const style2 = {
|
|
width: '70%'
|
|
}
|
|
const marginBottom1 = {
|
|
marginBottom: 1,
|
|
}
|
|
const marginBottom2 = {
|
|
marginBottom: 2,
|
|
}
|
|
|
|
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
|
|
const [openDialogHospital, setDialogHospital] = useState(false);
|
|
const [openDialogBenefit, setDialogBenefit] = useState(false);
|
|
const [openDialogMedicine, setDialogMedicine] = useState(false);
|
|
|
|
// Handel Delete Detail Benefit
|
|
const [idBenefitData, setIdBenefitData] = useState<number>();
|
|
const [openDialogDeleteBenefit, setDialogDeleteBenefit] = useState(false)
|
|
|
|
const [approve, setApprove] = useState('')
|
|
|
|
// Handle Edit Detail Benefit
|
|
const [openDialogEditBenefit, setDialogEditBenefit] = useState(false)
|
|
const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitData>();
|
|
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}>
|
|
{/* Detail */}
|
|
<Grid item xs={12} md={12}>
|
|
<CardDetail
|
|
requestLog={requestLog}
|
|
>
|
|
</CardDetail>
|
|
</Grid>
|
|
|
|
{/* Service */}
|
|
<Grid item xs={12} md={12} marginTop={2}>
|
|
<CardService
|
|
requestLog={requestLog}
|
|
isFinalLog={true}
|
|
>
|
|
</CardService>
|
|
</Grid>
|
|
|
|
{/* Exclusion */}
|
|
<Grid item xs={12} md={12} marginTop={2}>
|
|
<CardExclusion
|
|
requestLog={requestLog}
|
|
>
|
|
</CardExclusion>
|
|
</Grid>
|
|
|
|
{/* Hospital Care */}
|
|
{/* <Grid item xs={12} md={12}>
|
|
<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'}} onClick={() => {
|
|
setDialogHospital(true);
|
|
}} >
|
|
<Typography variant="button" display="block">History</Typography>
|
|
</Button>
|
|
</Stack>
|
|
</Card>
|
|
<DialogHospitalCare
|
|
requestLog={requestLog}
|
|
openDialog={openDialogHospital}
|
|
setOpenDialog={setDialogHospital}
|
|
|
|
>
|
|
</DialogHospitalCare>
|
|
</Grid> */}
|
|
|
|
{/* Benefit */}
|
|
<Grid item xs={12} md={12}>
|
|
<Card sx={{padding:2}} >
|
|
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Benefit</Typography>
|
|
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
|
|
setDialogBenefit(true);
|
|
}} >
|
|
<Typography variant="button" display="block">Benefit</Typography>
|
|
</Button>
|
|
</Stack>
|
|
|
|
{requestLog?.benefit_data?.map((item, index) => (
|
|
<Box key={index} sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '24px', py: '20px', marginBottom: '24px', borderRadius: '12px'}}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
|
|
{item.benefit?.description}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6} sx={{ display: 'flex', placeContent: 'end' }}>
|
|
<MoreMenu actions={
|
|
<>
|
|
<MenuItem onClick={() => {
|
|
setDialogEditBenefit(true)
|
|
setIdBenefitData(item.id)
|
|
setBenefitConfigurationData(item)
|
|
}}
|
|
>
|
|
<EditOutlined />
|
|
Edit
|
|
</MenuItem>
|
|
<MenuItem onClick={() => {
|
|
setIdBenefitData(item.id)
|
|
setDialogDeleteBenefit(true)
|
|
}}
|
|
>
|
|
<Delete color='error'/>
|
|
Delete
|
|
</MenuItem>
|
|
</>
|
|
} />
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Box sx={{ py: '8px', px: '12px', background: palette.light.grey[50012], borderRadius: '6px'}}>
|
|
<Grid container spacing={1}>
|
|
|
|
{/* Amount Incurred */}
|
|
<Grid item xs={2}>
|
|
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption">
|
|
Amount Incurred
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
|
|
{fNumber(item.amount_incurred)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{/* Amount Approved */}
|
|
<Grid item xs={2}>
|
|
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption">
|
|
Amount Approved
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
|
|
{fNumber(item.amount_approved)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{/* Amount Not Approved */}
|
|
<Grid item xs={3}>
|
|
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption">
|
|
Amount Not Approved
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
|
|
{fNumber(item.amount_not_approved)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{/* Excess Paid* */}
|
|
<Grid item xs={2}>
|
|
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption">
|
|
Excess Paid*
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
|
|
{fNumber(item.excess_paid)}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{/* Keterangan* */}
|
|
<Grid item xs={3}>
|
|
<Grid container>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption">
|
|
Keterangan*
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
|
|
{item.keterangan}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</Box>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</Box>
|
|
))}
|
|
|
|
|
|
</Card>
|
|
|
|
{/* PR Buat pindahin ke componen */}
|
|
{/* <CardBenefit
|
|
requestLog={requestLog}
|
|
>
|
|
|
|
</CardBenefit> */}
|
|
|
|
<DialogBenefit
|
|
requestLog={requestLog}
|
|
openDialog={openDialogBenefit}
|
|
setOpenDialog={setDialogBenefit}
|
|
|
|
/>
|
|
{/* Dialog Edit */}
|
|
<DialogEditBenefit
|
|
id={idBenefitData}
|
|
data={BenefitConfigurationData}
|
|
openDialog={openDialogEditBenefit}
|
|
setOpenDialog={setDialogEditBenefit}
|
|
>
|
|
|
|
</DialogEditBenefit>
|
|
{/* Dialog Delete */}
|
|
<DialogDelete
|
|
id={idBenefitData}
|
|
openDialog={openDialogDeleteBenefit}
|
|
setOpenDialog={setDialogDeleteBenefit}
|
|
/>
|
|
</Grid>
|
|
|
|
{/* Medicine */}
|
|
<Grid item xs={12} md={12}>
|
|
<Card sx={{padding:2}} >
|
|
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Medicine</Typography>
|
|
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
|
|
setDialogMedicine(true)
|
|
}} >
|
|
<Typography variant="button" display="block">Medicine</Typography>
|
|
</Button>
|
|
</Stack>
|
|
|
|
{requestLog?.medicine.map((item, index) => (
|
|
<Grid
|
|
container
|
|
direction="row"
|
|
alignItems="center"
|
|
justifyContent="space-between" // Menempatkan item ke sebelah kiri dan kanan
|
|
sx={{ marginBottom: 2 }}
|
|
>
|
|
<Typography variant='subtitle1'>{item.medicine}</Typography>
|
|
<Typography variant="subtitle1">Rp. {fNumber(item.price)}
|
|
<IconButton size='large' color='error' onClick={() => {
|
|
setIdBenefitData(item.id)
|
|
setDialogDeleteBenefit(true)
|
|
}}>
|
|
<Delete color='error'/>
|
|
</IconButton>
|
|
</Typography>
|
|
</Grid>
|
|
))}
|
|
|
|
<DialogMedicine
|
|
requestLog={requestLog}
|
|
openDialog={openDialogMedicine}
|
|
setOpenDialog={setDialogMedicine}
|
|
/>
|
|
<DialogDeleteMedicine
|
|
id={idBenefitData}
|
|
openDialog={openDialogDeleteBenefit}
|
|
setOpenDialog={setDialogDeleteBenefit}
|
|
/>
|
|
</Card>
|
|
</Grid>
|
|
|
|
{/* File */}
|
|
<Grid item xs={12} md={12}>
|
|
<CardFile
|
|
requestLog={requestLog}
|
|
/>
|
|
</Grid>
|
|
|
|
{requestLog?.status_final_log == '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="contained"
|
|
onClick={() => {
|
|
setOpenDialogSubmit(true);
|
|
setApprove('approved');
|
|
}}
|
|
>
|
|
Approve
|
|
</Button>
|
|
</div>
|
|
</>
|
|
<DialogConfirmation
|
|
setOpenDialog={setOpenDialogSubmit}
|
|
requestLog={requestLog}
|
|
openDialog={openDialogSubmit}
|
|
approve={approve}
|
|
></DialogConfirmation>
|
|
</Stack>
|
|
</Grid>
|
|
) : null}
|
|
|
|
</Grid>
|
|
</Container>
|
|
</Page>
|
|
);
|
|
}
|