tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update kalkulator, edit benefit item, dan delete benefit item

Browse Source
This commit is contained in:
Tb Fajri
2024-02-22 15:28:32 +07:00
parent dcf1eead2d
commit 0e7d9467ce
17 changed files with 808 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogBenefit.tsx
View File

@@ -2,7 +2,7 @@ import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import MuiDialog from "@/components/MuiDialog";
import { Checkbox, Typography, FormControl, Card, Grid, DialogActions } from "@mui/material";
import { Checkbox, Typography, FormControl, Card, Grid, DialogActions, IconButton, Autocomplete } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useEffect, useState } from 'react';
@@ -18,11 +18,14 @@ import { Box } from "@mui/material";
import { FormProvider, RHFTextField } from "@/components/hook-form";
import RHFTextFieldMoney from '@/components/hook-form/v2/RHFTextFieldMoney';
import { useFieldArray, useForm } from 'react-hook-form';
import { useFieldArray, useForm, useWatch } from 'react-hook-form';
import { LoadingButton } from '@mui/lab';
import { postAddBenefit } from '../Model/Functions';
import { useNavigate } from 'react-router';
import { description } from '@/_mock/text';
import { Delete } from '@mui/icons-material';
import { TextField } from '@mui/material';
import RHFAutocomplete from '@/components/hook-form/RHFAutocomplete';
type DialogConfirmationType = {
@@ -30,6 +33,7 @@ type DialogConfirmationType = {
setOpenDialog: any;
onSubmit?: void;
requestLog: DetailFinalLogType|undefined;
claimInput:boolean
}
type BenefitSelected = {
@@ -40,7 +44,7 @@ type BenefitSelected = {
export default function DialogBenefit({requestLog, setOpenDialog, openDialog } : DialogConfirmationType ) {
export default function DialogBenefit({requestLog, setOpenDialog, openDialog, claimInput = false } : DialogConfirmationType ) {
// Add Benefit
const [addBenefit, setAddBenefit] = useState(false)
@@ -63,9 +67,13 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog } :
}
};
const reasons = [
{ value: 'Wrong Setting', label: 'Wrong Setting' },
{ value: 'Hospital Request', label: 'Hospital Request' }
];
useEffect(() => {
const datax: any[] = []
valBenefitNames.map((data) => {
benefitNameData?.map((row) => {
if(row.id == data) {
@@ -85,15 +93,16 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog } :
amount_not_approved: 0,
excess_paid: 0,
keterangan: '',
reason: null
}
})
reset({benefit_data: temp})
setBenefitSelected(datax)
}, [valBenefitNames])
const handleCloseDialogBenefit = () => {
// setOpenDialog(false);
setAddBenefit(false)
@@ -112,10 +121,19 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog } :
amount_approved: 0,
amount_not_approved: 0,
excess_paid: 0,
reason: null
};
const validationSchema = Yup.object().shape({
benefit_data: Yup.array().of(
claimInput ?
Yup.object().shape({
amount_incurred : Yup.number().typeError('').required(''),
amount_approved : Yup.number().typeError('').required(''),
amount_not_approved : Yup.number().typeError('').required(''),
excess_paid : Yup.number().typeError('').required(''),
// reason : Yup.string().required(''),
}) :
Yup.object().shape({
amount_incurred : Yup.number().typeError('').required(''),
amount_approved : Yup.number().typeError('').required(''),
@@ -130,14 +148,56 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog } :
defaultValues
});
const {fields, append, remove} = useFieldArray({name: 'benefit_data',control: methods.control})
let width = claimInput ? 2 : 2.36;
const {fields, append, remove} = useFieldArray({name: 'benefit_data',control: methods.control});
const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods
// Buat total data
let totalAmountIncurred = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
return accumulator + (item.amount_incurred || 0);
}, 0);
let totalAmountApproved = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
return accumulator + (item.amount_approved || 0);
}, 0);
let totalAmountNotApproved = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
return accumulator + (item.amount_not_approved || 0);
}, 0);
let totalExcessPaid = (requestLog?.benefit_data || []).reduce((accumulator, item) => {
return accumulator + (item.excess_paid || 0);
}, 0);
const benefitData = watch('benefit_data');
const [isDisableSave, setDisableSave] = useState(false)
benefitData?.map((item, index) => {
totalAmountIncurred += parseFloat(item.amount_incurred);
totalAmountApproved += parseFloat(item.amount_approved);
totalAmountNotApproved += parseFloat(item.amount_not_approved);
totalExcessPaid += parseFloat(item.excess_paid);
if (totalAmountApproved != 0 && totalAmountIncurred != 0) {
if (totalAmountApproved > totalAmountIncurred){
setValue(`benefit_data.${index}.amount_approved`, 0)
alert('Total Amount Approved tidak boleh lebih dari Total Incurred')
}
}
});
const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
// Submit Form
// =====================================
const submitHandler = async (data: BenefitConfigurationListType) => {
const response = await postAddBenefit(data);
const mapData = data.benefit_data.map((item) => ({
...item,
reason: item.reason.value
}));
const newData = {
...data,
benefit_data: mapData
};
const response = await postAddBenefit(newData);
if (response == true) {
reset();
@@ -146,6 +206,8 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog } :
}
}
// Calculate
const getContent = () => !addBenefit ? (
<Stack spacing={2} sx={{marginTop: 2, padding: 2}} direction="column">
<Stack direction="row" spacing={2}>
@@ -198,14 +260,14 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog } :
{fields?.map((item, index) =>
(
<Box sx={{ marginTop:'10px', marginBottom:'10px', py: '8px', px: '12px', border:'1px solid #919EAB52', borderRadius: '6px'}}>
<Grid key={item.id} container spacing={2}>
<Grid key={item.id} container spacing={2} alignItems="center">
<Grid item xs={12}>
<Typography variant="subtitle1" sx={{ fontWeight: 'bold'}}>
{item.description}
</Typography>
</Grid>
<Grid item xs={2.5}>
<Grid item xs={width}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
@@ -224,7 +286,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog } :
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid item xs={width}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
@@ -244,7 +306,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog } :
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid item xs={width}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
@@ -264,7 +326,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog } :
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid item xs={width}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
@@ -288,7 +350,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog } :
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Keterangan*
Keterangan
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
@@ -298,21 +360,146 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog } :
key={item.id}
name={`benefit_data.${index}.keterangan`}
placeholder='Keterangan'
required
/>
</Grid>
</Grid>
</Grid>
{claimInput ? (
<Grid item xs={1.4}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Reason*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<Autocomplete
options={reasons}
getOptionLabel={(option) => option.label}
fullWidth
value={benefitData[index]?.reason} // Use find to match the default value
onChange={(event, newValue) => {
// Update the value in the form data
setValue(`benefit_data.${index}.reason`, newValue);
}}
renderInput={(params) => (
<TextField
{...params}
label="Reason"
variant="outlined"
required
/>
)}
/>
</Grid>
</Grid>
</Grid>
) : null}
{ fields.length > 1 ? (
<Grid item xs={0} sx={{ textAlign: 'center' }}>
<IconButton size='large' color='error' onClick={() => remove(index)}>
<Delete />
</IconButton>
</Grid>
) : null }
</Grid>
</Box>
))}
<br/>
<hr/>
<br/>
<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} alignItems={'end'}>
{/* Amount Incurred */}
<Grid item xs={width}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption" sx={{ textAlign: 'right' }}>
Amount Incurred
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold', textAlign: 'right' }}>
{fNumber(totalAmountIncurred)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Amount Approved */}
<Grid item xs={width}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption" sx={{ textAlign: 'right' }}>
Amount Approved
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold', textAlign: 'right' }}>
{fNumber(totalAmountApproved)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Amount Not Approved */}
<Grid item xs={width}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption" sx={{ textAlign: 'right' }}>
Amount Not Approved
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold', textAlign: 'right' }}>
{fNumber(totalAmountNotApproved)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Excess Paid* */}
<Grid item xs={width}>
<Grid container>
<Grid item xs={12}>
<Typography variant="caption" sx={{ textAlign: 'right' }}>
Excess Paid
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold', textAlign: 'right' }}>
{fNumber(totalExcessPaid)}
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</Grid>
</Grid>
{/* </Card> */}
<DialogActions>
<Stack direction="row" sx={{marginTop:3}} alignItems="center" justifyContent="space-between" spacing={2}>
<Button variant="outlined" onClick={handleCloseDialogBenefit}><Typography>Cancel</Typography></Button>
<LoadingButton disabled={!addBenefit} type="submit" variant="contained" loading={isSubmitting}>
<LoadingButton disabled={isDisableSave} type="submit" variant="contained" loading={isSubmitting}>
Save
</LoadingButton>
</Stack>

89
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogDeleteBenefit.tsx
View File

@@ -1,8 +1,8 @@
import MuiDialog from "@/components/MuiDialog";
import { Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import { DetailFinalLogType } from "../Model/Types";
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import axios from "@/utils/axios";
@@ -18,9 +18,39 @@ type DialogDeleteType = {
}
export default function DialogDeleteBenefit({id, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
const [formData, setFormData] = useState({
reason: null
});
const resetForm = () => {
setFormData({
reason: null,
});
};
useEffect(() => {
// Update formData setiap kali approve berubah
setFormData(prevData => ({
...prevData,
}));
}, []);
const handleChange = (field, value) => {
setFormData((prevData) => ({
...prevData,
[field]: value,
}));
if (field === 'reason') {
setIsReasonSelected(!!value);
}
};
const handleSubmit = () => {
axios
.delete(`customer-service/request/benefit_data/${id}`)
if (isReasonSelected && formData.reason !== '') {
axios
.post(`customer-service/request/benefit_data/${id}`, formData)
.then((response) => {
enqueueSnackbar('Benefit Data has Deleted', { variant: 'success' });
setOpenDialog(false);
@@ -29,6 +59,11 @@ export default function DialogDeleteBenefit({id, setOpenDialog, openDialog,onSub
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
});
} else {
setIsReasonSelected(false);
alert('Silakan pilih alasan sebelum menghapus data.');
}
}
const style1 = {
@@ -38,10 +73,19 @@ export default function DialogDeleteBenefit({id, setOpenDialog, openDialog,onSub
const style2 = {
width: '70%'
}
const marginBottom1 = {
marginBottom: 1,
const marginBottom2 = {
marginBottom: 2,
}
const [isReasonSelected, setIsReasonSelected] = useState(false);
const reasons = [
{ value: 'agreement', label: 'Agreement changed' },
{ value: 'endorsement', label: 'Endorsement' },
{ value: 'renewal', label: 'Renewal' },
{ value: 'wrong_setting', label: 'Wrong Setting' },
// Add more options as needed
];
const handleCloseDialog = () => {
setOpenDialog(false);
}
@@ -49,10 +93,35 @@ export default function DialogDeleteBenefit({id, setOpenDialog, openDialog,onSub
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to delete this detail benefit ?</Typography>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
<Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
</DialogActions>
<Grid item xs={12} md={12} marginTop={4}>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
<Autocomplete
options={reasons}
getOptionLabel={(option) => option.label}
fullWidth
value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
onChange={(e, newValue) => handleChange('reason', newValue?.value)}
renderInput={(params) => (
<TextField
{...params}
label="Reason"
variant="outlined"
required
error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
/>
)}
/>
</Stack>
</Card>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
<Button color="error" variant="contained" onClick={handleSubmit}>Delete</Button>
</DialogActions>
</Stack>
);

159
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditBenefit.tsx
View File

@@ -2,7 +2,7 @@ import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import MuiDialog from "@/components/MuiDialog";
import { Box, Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
import { Autocomplete, Box, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useEffect, useState } from 'react';
@@ -17,6 +17,9 @@ import { useForm } from 'react-hook-form';
import { FormProvider, RHFTextField } from "@/components/hook-form";
import RHFTextFieldMoney from "@/components/hook-form/v2/RHFTextFieldMoney";
import { LoadingButton } from "@mui/lab";
import { find } from 'lodash';
import { fNumber } from '@/utils/formatNumber';
import palette from '@/theme/palette';
type DialogDeleteType = {
@@ -25,9 +28,10 @@ type DialogDeleteType = {
onSubmit?: void;
data: BenefitConfigurationListType|undefined;
id: number|undefined;
total: any
}
export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
export default function DialogEditBenefit({id, data, setOpenDialog, openDialog, onSubmit, total} : DialogDeleteType ) {
const handleCloseDialog = () => {
setOpenDialog(false);
}
@@ -42,7 +46,8 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,o
amount_not_approved: 0,
excess_paid: 0,
keterangan: '-',
description: '-'
description: '-',
reason: null
};
const validationSchema = Yup.object().shape({
@@ -59,6 +64,28 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,o
const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
// Ambil nilai dari form menggunakan watch
const amountIncurred = parseFloat(watch('amount_incurred'));
const amountApproved = parseFloat(watch('amount_approved'));
const amountNotApproved = parseFloat(watch('amount_not_approved'));
const excessPaid = parseFloat(watch('excess_paid'));
// Hitung total baru
const totalAmountIncurred = total.totalAmountIncurred - data?.amount_incurred + amountIncurred;
const totalAmountApproved = total.totalAmountApproved - data?.amount_approved + amountApproved;
const totalAmountNotApproved = total.totalAmountNotApproved - data?.amount_not_approved + amountNotApproved;
const totalExcessPaid = total.totalExcessPaid - data?.excess_paid + excessPaid;
if (totalAmountApproved > totalAmountIncurred) {
alert('Total Approve tidak boleh melebihi Total Incurred')
setValue('amount_approved', data?.amount_approved)
}
// if (totalAmountIncurred !== (totalAmountApproved+totalAmountNotApproved)){
// // alert('Total Incurred tidak sama dengan Total Approve + Total Not Approve')
// // setValue('amount_approved', data?.amount_approved)
// }
// Submit Form
// =====================================
const submitHandler = async (data: BenefitConfigurationListType) => {
@@ -72,6 +99,11 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,o
}
}
const reasons = [
{ value: 'Wrong Setting', label: 'Wrong Setting' },
{ value: 'Hospital Request', label: 'Hospital Request' }
];
// Set Value Form
// =====================================
useEffect(() => {
@@ -80,8 +112,10 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,o
setValue('amount_not_approved', data?.amount_not_approved)
setValue('excess_paid', data?.excess_paid)
setValue('keterangan', data?.keterangan)
setValue('reason', data?.reason)
}, [data])
const getContent = () => (
<FormProvider methods={methods} onSubmit={handleSubmit(submitHandler)}>
<Stack paddingX={2} paddingY={4}>
@@ -94,7 +128,7 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,o
</Typography>
</Grid>
<Grid item xs={2.5}>
<Grid item xs={2}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
@@ -113,7 +147,7 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,o
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid item xs={2}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
@@ -133,7 +167,7 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,o
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid item xs={2}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
@@ -153,7 +187,7 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,o
</Grid>
</Grid>
<Grid item xs={2.5}>
<Grid item xs={2}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
@@ -177,7 +211,7 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,o
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Keterangan*
Keterangan
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
@@ -187,11 +221,116 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,o
key={id}
name={`keterangan`}
placeholder='Keterangan'
required
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={2}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="subtitle1" component="div">
Reason*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<Autocomplete
options={reasons}
getOptionLabel={(option) => option.label}
fullWidth
value={reasons.find((r) => r.value === watch('reason')) || null}// Use find to match the default value
onChange={(event, newValue) => {
setValue(`reason`, newValue?.value);
}}
renderInput={(params) => (
<TextField
{...params}
label="Reason"
variant="outlined"
required
/>
)}
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} marginTop={3}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
Total Current 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} alignItems={'end'}>
{/* Amount Incurred */}
<Grid item xs={2}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption" sx={{ textAlign: 'right' }}>
Amount Incurred
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold', textAlign: 'right' }}>
{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" sx={{ textAlign: 'right' }}>
Amount Approved
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold', textAlign: 'right' }}>
{fNumber(totalAmountApproved)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Amount Not Approved */}
<Grid item xs={2}>
<Grid container sx={{ borderRight: `0.5px solid ${palette.light.grey[400]}` }}>
<Grid item xs={12}>
<Typography variant="caption" sx={{ textAlign: 'right' }}>
Amount Not Approved
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold', textAlign: 'right' }}>
{fNumber(totalAmountNotApproved)}
</Typography>
</Grid>
</Grid>
</Grid>
{/* Excess Paid* */}
<Grid item xs={2}>
<Grid container>
<Grid item xs={12}>
<Typography variant="caption" sx={{ textAlign: 'right' }}>
Excess Paid
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold', textAlign: 'right' }}>
{fNumber(totalExcessPaid)}
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</Grid>
</Grid>
</Box>
{/* </Card> */}

7
frontend/dashboard/src/pages/CustomerService/FinalLog/Detail.tsx
View File

@@ -133,6 +133,12 @@ export default function Detail() {
return accumulator + (item.excess_paid || 0);
}, 0);
const total = {
totalAmountIncurred : totalAmountIncurred,
totalAmountApproved : totalAmountApprove,
totalAmountNotApproved : totalAmountNotApprove,
totalExcessPaid : totalExcessPaid,
}
// Handle Delete File LOG
const [pathFile, setPathFile] = useState('')
const [dialogDeleteFIleLog, setDialogDeleteFileLog] = useState(false)
@@ -522,6 +528,7 @@ export default function Detail() {
data={BenefitConfigurationData}
openDialog={openDialogEditBenefit}
setOpenDialog={setDialogEditBenefit}
total={total}
/>
{/* Dialog Delete */}

4
frontend/dashboard/src/pages/CustomerService/FinalLog/Model/Types.tsx
View File

@@ -89,6 +89,10 @@ export type BenefitConfigurationListType = {
excess_paid: number,
keterangan: string,
description: string,
reason: {
value:string,
label:string
} | null
}
export type Benefit = {