update kalkulator, edit benefit item, dan delete benefit item
This commit is contained in:
@@ -28,13 +28,17 @@ import { fDateTimesecond } from '@/utils/formatTime';
|
||||
import { makeFormData } from '@/utils/jsonToFormData';
|
||||
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { DetailClaimRequest } from './Model/Types';
|
||||
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';
|
||||
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -80,10 +84,10 @@ export default function Detail() {
|
||||
marginBottom: 1,
|
||||
}
|
||||
|
||||
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
|
||||
const handleCloseDialogSubmit = () => {
|
||||
setOpenDialogSubmit(false);
|
||||
}
|
||||
|
||||
// Handle Add Benefit
|
||||
const [openDialogBenefit, setDialogBenefit] = useState(false);
|
||||
|
||||
const [approve, setApprove] = useState('');
|
||||
|
||||
// Handle Delete File LOG
|
||||
@@ -94,19 +98,28 @@ export default function Detail() {
|
||||
const [dialogUploadFileLog, setDialogUploadFileLog] = useState(false)
|
||||
|
||||
// Buat total data
|
||||
const totalAmountIncurred = (claimRequests?.benefit_data || []).reduce((accumulator, item) => {
|
||||
return accumulator + (item.amount_incurred || 0);
|
||||
}, 0);
|
||||
const totalAmountApprove = (claimRequests?.benefit_data || []).reduce((accumulator, item) => {
|
||||
return accumulator + (item.amount_approved || 0);
|
||||
}, 0);
|
||||
const totalAmountNotApprove = (claimRequests?.benefit_data || []).reduce((accumulator, item) => {
|
||||
return accumulator + (item.amount_not_approved || 0);
|
||||
}, 0);
|
||||
const totalExcessPaid = (claimRequests?.benefit_data || []).reduce((accumulator, item) => {
|
||||
return accumulator + (item.excess_paid || 0);
|
||||
}, 0);
|
||||
|
||||
// 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'}>
|
||||
@@ -269,14 +282,14 @@ export default function Detail() {
|
||||
<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);
|
||||
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?.benefit_data?.map((item, index) => (
|
||||
{claimRequests?.request_log?.benefit_data?.map((item, index) => (
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Grid container >
|
||||
@@ -289,17 +302,17 @@ export default function Detail() {
|
||||
<MoreMenu actions={
|
||||
<>
|
||||
<MenuItem onClick={() => {
|
||||
// setDialogEditBenefit(true)
|
||||
// setIdBenefitData(item.id)
|
||||
// setBenefitConfigurationData(item)
|
||||
setDialogEditBenefit(true)
|
||||
setIdBenefitData(item.id)
|
||||
setBenefitConfigurationData(item)
|
||||
}}
|
||||
>
|
||||
<EditOutlined />
|
||||
Edit
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => {
|
||||
// setIdBenefitData(item.id)
|
||||
// setDialogDeleteBenefit(true)
|
||||
setIdBenefitData(item.id)
|
||||
setDialogDeleteBenefit(true)
|
||||
}}
|
||||
>
|
||||
<Delete color='error'/>
|
||||
@@ -367,7 +380,7 @@ export default function Detail() {
|
||||
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="caption">
|
||||
Excess Paid*
|
||||
Excess Paid
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
@@ -383,7 +396,7 @@ export default function Detail() {
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="caption">
|
||||
Keterangan*
|
||||
Keterangan
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
@@ -402,95 +415,95 @@ export default function Detail() {
|
||||
))}
|
||||
<hr />
|
||||
<br />
|
||||
{claimRequests?.benefit_data && claimRequests.benefit_data.length > 0 ? (
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
|
||||
Total Benefit
|
||||
</Typography>
|
||||
{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="body2" 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="caption">
|
||||
Amount Incurred
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="caption" 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="caption">
|
||||
Amount Approved
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="caption" 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="caption">
|
||||
Amount Not Approved
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="caption" 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="caption">
|
||||
Excess Paid
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
|
||||
{totalExcessPaid ? fNumber(totalExcessPaid) : 0}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</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(totalAmountIncurred)}
|
||||
</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(totalAmountApprove)}
|
||||
</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(totalAmountNotApprove)}
|
||||
</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(totalExcessPaid)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
)
|
||||
: (
|
||||
null
|
||||
)}
|
||||
)
|
||||
: (
|
||||
null
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
@@ -500,26 +513,28 @@ export default function Detail() {
|
||||
>
|
||||
|
||||
</CardBenefit> */}
|
||||
{/* <DialogBenefit
|
||||
requestLog={requestLog}
|
||||
<DialogBenefit
|
||||
requestLog={claimRequests?.request_log}
|
||||
openDialog={openDialogBenefit}
|
||||
setOpenDialog={setDialogBenefit}
|
||||
claimInput={true}
|
||||
|
||||
/>
|
||||
{/* Dialog Edit */}
|
||||
{/* <DialogEditBenefit
|
||||
<DialogEditBenefit
|
||||
id={idBenefitData}
|
||||
data={BenefitConfigurationData}
|
||||
openDialog={openDialogEditBenefit}
|
||||
setOpenDialog={setDialogEditBenefit}
|
||||
/> */}
|
||||
total={total}
|
||||
/>
|
||||
|
||||
{/* Dialog Delete */}
|
||||
{/* <DialogDeleteBenfit
|
||||
<DialogDeleteBenefit
|
||||
id={idBenefitData}
|
||||
openDialog={openDialogDeleteBenefit}
|
||||
setOpenDialog={setDialogDeleteBenefit}
|
||||
/> */}
|
||||
/>
|
||||
|
||||
{/* Dialog Edit Detai; */}
|
||||
{/* <DialogEditFinalLOG
|
||||
|
||||
Reference in New Issue
Block a user