610 lines
35 KiB
TypeScript
610 lines
35 KiB
TypeScript
// mui
|
|
import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton, MenuItem } 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 { fDate, 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 { enqueueSnackbar } from 'notistack';
|
|
import { BenefitData, DetailClaimRequest } from './Model/Types';
|
|
import { Delete, EditOutlined } from '@mui/icons-material';
|
|
import { fNumber } from '@/utils/formatNumber';
|
|
import palette from '@/theme/palette';
|
|
import MoreMenu from '@/components/MoreMenu';
|
|
import DialogUploadFileFinalLog from './Components/DialogUploadFileFinalLog';
|
|
import DialogDeleteFileLog from './Components/DialogDeleteFileLog';
|
|
import DialogBenefit from '../CustomerService/FinalLog/Components/DialogBenefit';
|
|
import DialogDeleteBenefit from '../CustomerService/FinalLog/Components/DialogDeleteBenefit';
|
|
import DialogEditBenefit from '../CustomerService/FinalLog/Components/DialogEditBenefit';
|
|
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 [claimRequests, setClaimRequest] = useState<DetailClaimRequest>();
|
|
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
|
|
|
|
const { id } = useParams();
|
|
|
|
useEffect(() => {
|
|
axios
|
|
.get('claim-requests/detail/'+id)
|
|
.then((response) => {
|
|
setClaimRequest(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 style3 = {
|
|
color: '#919EAB',
|
|
width: '35%'
|
|
}
|
|
const marginBottom1 = {
|
|
marginBottom: 1,
|
|
}
|
|
|
|
|
|
// Handle Add Benefit
|
|
const [openDialogBenefit, setDialogBenefit] = useState(false);
|
|
|
|
const [approve, setApprove] = useState('');
|
|
|
|
// Handle Delete File LOG
|
|
const [pathFile, setPathFile] = useState('')
|
|
const [dialogDeleteFIleLog, setDialogDeleteFileLog] = useState(false)
|
|
|
|
// Handle Upload File LOG
|
|
const [dialogUploadFileLog, setDialogUploadFileLog] = useState(false)
|
|
|
|
// Buat total data
|
|
// const totalAmountIncurred = (claimRequests?.benefit_data || []).reduce((accumulator, item) => {
|
|
// return accumulator + (item.amount_incurred || 0);
|
|
// }, 0);
|
|
const totalAmountIncurred = claimRequests?.request_log?.total_amount_incurred;
|
|
const totalAmountApproved = claimRequests?.request_log?.total_amount_approved;
|
|
const totalAmountNotApproved = claimRequests?.request_log?.total_amount_not_approved
|
|
const totalExcessPaid = claimRequests?.request_log?.total_excess_paid
|
|
|
|
// Handle Delete Detail Benefit
|
|
const [idBenefitData, setIdBenefitData] = useState<number>();
|
|
const [openDialogDeleteBenefit, setDialogDeleteBenefit] = useState(false)
|
|
|
|
// Handle Edit Detail Benefit
|
|
const [openDialogEditBenefit, setDialogEditBenefit] = useState(false)
|
|
const [BenefitConfigurationData, setBenefitConfigurationData] = useState<BenefitData>();
|
|
|
|
const total = {
|
|
totalAmountIncurred : totalAmountIncurred,
|
|
totalAmountApproved : totalAmountApproved,
|
|
totalAmountNotApproved : totalAmountNotApproved,
|
|
totalExcessPaid : totalExcessPaid,
|
|
}
|
|
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}}>{(claimRequests && claimRequests.code ? claimRequests.code : '')}</Typography>
|
|
</Stack>
|
|
<Grid container spacing={2}>
|
|
{/* Detail */}
|
|
<Grid item xs={12} md={12}>
|
|
<Card sx={{padding:2}} >
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<Typography variant='subtitle1' sx={{ color: '#19BBBB', marginBottom: 4 }} gutterBottom>
|
|
Details
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Provider Name</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimRequests?.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>{claimRequests?.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>{claimRequests?.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>{claimRequests?.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>{claimRequests?.date_of_birth ? fDate(claimRequests?.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>{claimRequests?.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>{claimRequests?.submission_date ? fDateTimesecond(claimRequests?.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>{claimRequests?.no_identitas ? claimRequests?.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>{claimRequests?.keterangan ? claimRequests?.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>{claimRequests?.hak_kamar_pasien ? claimRequests?.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>{claimRequests?.penempatan_kamar ? claimRequests?.penempatan_kamar : '-'}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style3} gutterBottom>Diagnosis</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>
|
|
{claimRequests?.diagnosis?.length > 0 ? (
|
|
<ul>
|
|
{claimRequests?.diagnosis.map((diagnosisItem, index) => (
|
|
<li key={index}>{diagnosisItem.code} - {diagnosisItem.name}</li>
|
|
// Replace 'name' with the property you want to display
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p>No diagnosis available.</p>
|
|
)}
|
|
</Typography>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
|
|
{/* Service */}
|
|
<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>{claimRequests?.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(claimRequests?.claim_method ?? '-')}</Typography>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
|
|
{/* Document */}
|
|
<Grid item xs={12} md={12}>
|
|
<Card sx={{padding:2}} >
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 4}}>
|
|
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Document </Typography>
|
|
</Stack>
|
|
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
|
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
|
|
setDialogUploadFileLog(true)
|
|
}} >
|
|
<Typography variant="button" display="block">File</Typography>
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
{claimRequests?.files?.map((documentType, index) => (
|
|
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 2}} key={index}>
|
|
<Stack direction="column" spacing={2} >
|
|
|
|
<a
|
|
href={documentType.url}
|
|
style={{
|
|
cursor: 'pointer',
|
|
textDecoration: 'none',
|
|
color: '#19BBBB',
|
|
display: 'flex',
|
|
alignItems: 'center' // Menjadikan konten dalam satu garis vertikal
|
|
}}
|
|
target="_blank"
|
|
>
|
|
<InsertDriveFileIcon style={{ marginRight: '5px' }} />
|
|
<Typography variant="body1" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
|
|
</a>
|
|
</Stack>
|
|
<Stack direction="column" spacing={2}>
|
|
<IconButton onClick={() => {
|
|
setDialogDeleteFileLog(true)
|
|
setPathFile(documentType.path)
|
|
}} aria-label="delete" size="small" sx={{ marginLeft: 'auto' }}>
|
|
<Delete color='error' fontSize="small" />
|
|
</IconButton>
|
|
</Stack>
|
|
</Stack>
|
|
))}
|
|
|
|
<DialogDeleteFileLog
|
|
id={claimRequests?.request_log_id}
|
|
path={pathFile}
|
|
setOpenDialog={setDialogDeleteFileLog}
|
|
openDialog={dialogDeleteFIleLog}
|
|
/>
|
|
|
|
<DialogUploadFileFinalLog
|
|
id={claimRequests?.request_log_id}
|
|
setOpenDialog={setDialogUploadFileLog}
|
|
openDialog={dialogUploadFileLog}
|
|
/>
|
|
</Card>
|
|
</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>
|
|
|
|
<Box sx={{ border: '1px solid rgba(0,0,0,0.125)', px: '24px', py: '20px', marginBottom: '24px', borderRadius: '12px'}}>
|
|
{claimRequests?.request_log?.benefit_data?.map((item, index) => (
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<Grid container >
|
|
<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} py={2}>
|
|
<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>
|
|
))}
|
|
<hr />
|
|
<br />
|
|
{claimRequests?.request_log?.benefit_data && claimRequests?.request_log?.benefit_data.length > 0 ? (
|
|
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={6}>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 'bold'}}>
|
|
Total Benefit
|
|
</Typography>
|
|
</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="subtitle1">
|
|
Amount Incurred
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>
|
|
{totalAmountIncurred ? fNumber(totalAmountIncurred) : '0'}
|
|
</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="subtitle1">
|
|
Amount Approved
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>
|
|
{totalAmountApproved ? fNumber(totalAmountApproved) : '0'}
|
|
</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="subtitle1">
|
|
Amount Not Approved
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>
|
|
{totalAmountNotApproved ? fNumber(totalAmountNotApproved) : 0}
|
|
</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="subtitle1">
|
|
Excess Paid
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}>
|
|
{totalExcessPaid ? fNumber(totalExcessPaid) : 0}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
<Grid container spacing={1} marginY={2}>
|
|
<Grid item xs={6}>
|
|
<Typography variant="subtitle1">
|
|
Biaya disetujui
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={6} textAlign="right">
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>
|
|
{totalAmountApproved ? fNumber(totalAmountApproved) : '0'}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2">
|
|
Nominal diatas 1 juta akan menunggu persetujuan senior analyst
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
)
|
|
: (
|
|
null
|
|
)}
|
|
|
|
|
|
</Box>
|
|
</Card>
|
|
|
|
{/* PR Buat pindahin ke componen */}
|
|
{/* <CardBenefit
|
|
requestLog={requestLog}
|
|
>
|
|
|
|
</CardBenefit> */}
|
|
<DialogBenefit
|
|
requestLog={claimRequests?.request_log}
|
|
openDialog={openDialogBenefit}
|
|
setOpenDialog={setDialogBenefit}
|
|
claimInput={true}
|
|
|
|
/>
|
|
{/* Dialog Edit */}
|
|
<DialogEditBenefit
|
|
id={idBenefitData}
|
|
data={BenefitConfigurationData}
|
|
openDialog={openDialogEditBenefit}
|
|
setOpenDialog={setDialogEditBenefit}
|
|
total={total}
|
|
/>
|
|
|
|
{/* Dialog Delete */}
|
|
<DialogDeleteBenefit
|
|
id={idBenefitData}
|
|
openDialog={openDialogDeleteBenefit}
|
|
setOpenDialog={setDialogDeleteBenefit}
|
|
/>
|
|
|
|
{/* Dialog Edit Detai; */}
|
|
{/* <DialogEditFinalLOG
|
|
setOpenDialog={setDialogDEditDetail}
|
|
requestLog={requestLog}
|
|
openDialog={openDialogEditDetail}
|
|
/> */}
|
|
|
|
{(claimRequests?.status === 'requested') || (claimRequests?.status === 'decline') ? (
|
|
<Grid item xs={12} md={12}>
|
|
<Stack direction="row" padding={4} sx={{ justifyContent: 'flex-end' }}>
|
|
<div style={{ marginRight: '10px' }}> {/* Perubahan sintaksis disini */}
|
|
<Button
|
|
variant="outlined"
|
|
color='inherit'
|
|
onClick={() => {
|
|
navigate('/claim-requests')
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
<div>
|
|
<Button
|
|
variant="contained"
|
|
onClick={() => {
|
|
setOpenDialogSubmit(true);
|
|
setApprove('approved');
|
|
}}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</div>
|
|
<DialogConfirmation
|
|
setOpenDialog={setOpenDialogSubmit}
|
|
requestLog={claimRequests}
|
|
openDialog={openDialogSubmit}
|
|
approve={approve}
|
|
>
|
|
</DialogConfirmation>
|
|
</Stack>
|
|
</Grid>
|
|
) : null}
|
|
</Grid>
|
|
</Grid>
|
|
|
|
</Container>
|
|
</Page>
|
|
)
|
|
}
|