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>