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

finishing benefit configuration

Browse Source
This commit is contained in:
korospace
2023-11-03 11:32:09 +07:00
parent bc429b6d52
commit 79c8e475e8
11 changed files with 443 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/dashboard/src/components/hook-form/v2/RHFTextFieldMoney.tsx
View File

@@ -26,8 +26,6 @@ export default function RHFTextFieldMoney({ name, ...other }: IProps & TextField
autoComplete="off"
fullWidth error={!!error}
helperText={error?.message}
onFocus={() => { (values[name] === '0') && setValue(name, '') }}
onBlur={() => { (values[name] === '') && setValue(name, '0') }}
{...other}
inputProps={{ min: 0, max: 5, style: { textAlign: 'right' } }}
InputProps={{

210
frontend/dashboard/src/pages/Claims/Detail.tsx
View File

@@ -1,16 +1,16 @@
import * as Yup from 'yup';
// mui
import {
Container,
Grid,
Stack,
Typography,
Card,
TextField,
Divider,
ButtonBase,
Box,
IconButton,
import {
Container,
Grid,
Stack,
Typography,
Card,
TextField,
Divider,
ButtonBase,
Box,
IconButton,
Autocomplete,
FormControl,
InputLabel,
@@ -93,7 +93,7 @@ export default function Detail() {
});
getService();
}, []);
}, []);
function toTitleCase(str: string | null) {
return str.replace(/\w\S*/g, function(txt) {
@@ -117,7 +117,7 @@ export default function Detail() {
const handleCloseDialogRequest = () => {
setOpenDialogRequest(false);
}
const [conditionChecked, setConditionChecked] = useState(true);
const [diagnosisChecked, setDiagnosisChecked] = useState(false);
const [supportingResultChecked, setSupportingResultChecked] = useState(false);
@@ -139,7 +139,7 @@ export default function Detail() {
const isRequiredFieldsFilled = () => {
return noteField.trim() !== '';
};
const handelRequestDocument = () => {
const dataForm = {
claim_id: id,
@@ -161,12 +161,12 @@ export default function Detail() {
}
/*---------------------- Handle History Hospital Care ----------------------------*/
interface FormValuesProps extends Partial<ClaimHistoryCare> {
taxes: boolean;
inStock: boolean;
}
/**------------- Handle History Hospital Care ---------------------*/
const [currentClaimHistoryCare, setCurrentClaimHistoryCare] = useState(null);
@@ -191,7 +191,7 @@ export default function Detail() {
setCorporateId(response.data.data.corporate_id)
setCurrentClaimHistoryCare(response.data.data.history_hospital_care)
setClaim(response.data.data)
})
})
}, [])
useEffect( () => {
@@ -200,14 +200,14 @@ export default function Detail() {
.get(`corporates/${corporate_id}/diagnosis`)
.then((response) => {
setMainDiagnosis(response.data.data)
})
})
// setOrganization atau hospital atau location
axios
.get(`corporates/${corporate_id}/hospitals`)
.then((response) => {
setOrganization(response.data.data)
})
})
}, [corporate_id])
@@ -219,7 +219,7 @@ export default function Detail() {
.then((response) => {
reset({
service_code: response.data.data.service_code,
admision_date: response.data.data.admision_date,
admission_date: response.data.data.admission_date,
discharge_date: response.data.data.discharge_date,
organization_id: response.data.data.organization_id,
practitioner_id: response.data.data.practitioner_id,
@@ -229,7 +229,7 @@ export default function Detail() {
main_diagnosis_id: response.data.data.main_diagnosis_id,
});
setCarehistory(response.data.data);
setCarehistory(response.data.data);
})
.catch((error) => {
console.error(error);
@@ -242,9 +242,9 @@ export default function Detail() {
})
.catch((error) => {
console.error(error);
});
}
});
}
}, [claimHistoryId])
useEffect( () => {
@@ -253,14 +253,14 @@ export default function Detail() {
const [openDialogHospitalCare, setOpenHospitalCare] = useState(false);
const handleCloseDialogHospitalCare = () => {
setEdit(false)
setOpenHospitalCare(false);
setClaimHistoryId(null)
reset();
}
const [openDialogApproval, setOpenDialogApproval] = useState(false);
const handleCloseDialogApprove = () => {
@@ -281,20 +281,20 @@ export default function Detail() {
{ variant: 'success' }
);
window.location.reload();
}
// Handle Location Change
const handleLocationChange = (organization_id:number) => {
// if (newValue) {
const selectedValue = organization_id;
setValue('organization_id', selectedValue);
setValue('organization_id', selectedValue);
// let data = {
// ...values,
// practitioner_id: 0
// }
// reset(data)
axios
.get('/doctors?search=&organization_id=' + selectedValue)
.then((response) => {
@@ -309,14 +309,14 @@ export default function Detail() {
const handleDoctorChange = (event, newValue) => {
if (newValue) {
const selectedValue = newValue.id;
setValue('practitioner_id', selectedValue);
setValue('practitioner_id', selectedValue);
}
}
const handleMainDiagnosisChange = (event, newValue) => {
if (newValue) {
const selectedValue = newValue.id;
setValue('main_diagnosis_id', selectedValue);
setValue('main_diagnosis_id', selectedValue);
}
}
@@ -329,7 +329,7 @@ export default function Detail() {
value: 0
}
}],
admision_date: isEdit ? carehistory?.admision_date : '',
admission_date: isEdit ? carehistory?.admission_date : '',
discharge_date: isEdit ? carehistory?.discharge_date : '',
organization_id: isEdit ? carehistory?.organization_id : '',
practitioner_id: isEdit ? carehistory?.practitioner_id : '',
@@ -338,12 +338,12 @@ export default function Detail() {
sign: isEdit ? carehistory?.sign : '',
main_diagnosis_id: isEdit ? carehistory?.main_diagnosis_id : 0,
}),
[]
[]
)
let NewClaimHistoryCareSchema = Yup.object().shape({
service_code: Yup.string().required('Name is required'),
// admision_date: Yup.date().required('Admisision Date is required'),
// admission_date: Yup.date().required('Admisision Date is required'),
// discharge_date: Yup.date().required('Discharge Date is required'),
// organization_id: Yup.number().required('Location is required'),
// practitioner_id: Yup.number().required('Doctor is required'),
@@ -357,7 +357,7 @@ export default function Detail() {
resolver: yupResolver(NewClaimHistoryCareSchema),
defaultValues,
});
const {
reset,
watch,
@@ -372,16 +372,16 @@ export default function Detail() {
const values = watch();
console.log(values, 'debugs')
const {fields, append, remove} = useFieldArray<FormValuesProps>({name: "secondary_diagnosis_id", control})
const onSubmit = async (data: FormValuesProps) => {
if (isEdit){
let newData = {
service_code: data.service_code,
admision_date: data.admision_date ? fDateOnly(data.admision_date) : null,
admission_date: data.admission_date ? fDateOnly(data.admission_date) : null,
discharge_date: data.discharge_date ? fDateOnly(data.discharge_date) : null,
organization_id: data.organization_id,
practitioner_id: data.practitioner_id,
@@ -391,7 +391,7 @@ export default function Detail() {
secondary_diagnosis_id: data.secondary_diagnosis_id ? data.secondary_diagnosis_id.map((row) => row.value.id) : null,
main_diagnosis_id: data.main_diagnosis_id,
}
const response:any = await axios.post(`/claims/carehistory/${claimHistoryId}/update`, newData);
// if (response.status == 'success'){
setOpenHospitalCare(false)
@@ -406,7 +406,7 @@ export default function Detail() {
} else {
let newData = {
service_code: data.service_code,
admision_date: data.admision_date ? fDateOnly(data.admision_date) : null,
admission_date: data.admission_date ? fDateOnly(data.admission_date) : null,
discharge_date: data.discharge_date ? fDateOnly(data.discharge_date) : null,
organization_id: data.organization_id,
practitioner_id: data.practitioner_id,
@@ -415,9 +415,9 @@ export default function Detail() {
sign: data.sign,
secondary_diagnosis_id: data.secondary_diagnosis_id ? data.secondary_diagnosis_id.map((row) => row.value.id) : null,
main_diagnosis_id: data.main_diagnosis_id,
}
const response:any = await axios.post(`/claims/${id}/carehistory`, newData);
// if (response.status == 'success'){
@@ -428,9 +428,9 @@ export default function Detail() {
);
navigate('/claims/detail/'+id);
// }
}
reset();
}
@@ -459,7 +459,7 @@ export default function Detail() {
)
})
}
function handleNewHospitalCare() {
setEdit(false);
setOpenHospitalCare(true);
@@ -474,12 +474,12 @@ export default function Detail() {
//Service
const [openDialogService, setOpenDialogService] = useState(false);
const handleCloseDialogService = () => {
const handleCloseDialogService = () => {
setOpenDialogService(false);
}
const handleConditionChangeService = (event) => {
const selectedItem = event.target.value;
if (valBenefitNames.includes(selectedItem)) {
// Item is already selected, remove it
setValBenefitNames(valBenefitNames.filter(item => item !== selectedItem));
@@ -488,7 +488,7 @@ export default function Detail() {
setValBenefitNames([...valBenefitNames, selectedItem]);
}
};
//Data
const [serviceTypeData, setServiceTypeData] = useState(null);
const [benefitNameData, setBenefitNameData] = useState(null);
@@ -509,9 +509,9 @@ export default function Detail() {
//Hospital
const [valHospital, setValHospital] = useState('');
const [valHospitalError, setValHospitalError] = useState('');
//txt name
//txt name
const [txtName, setTxtName] = useState('Add Service');
//flag add or edit service
//flag add or edit service
const [flagAddService, setFlagAddService] = useState('add');
//id claim_services
const [idService, setIdService] = useState(null);
@@ -532,7 +532,7 @@ export default function Detail() {
setBenefitNameData(response.data.data.benefit_name),
setHospitalData(response.data.data.hospital),
]);
} catch (error) {
}
}
@@ -548,11 +548,11 @@ export default function Detail() {
setDateAd(serviceData.addmission_date);
setDateDis(serviceData.discharge_date);
setIdService(serviceData.id);
setOpenDialogService(true);
setTxtName('Edit Service');
setFlagAddService('edit');
if (serviceTypeData) {
setValServiceType(serviceData.service_id);
setValHospital(serviceData.hospital_id);
@@ -582,7 +582,7 @@ export default function Detail() {
})
.catch((error) => {
enqueueSnackbar('Something Went Wrong', { variant: 'error' });
})
})
}
const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
@@ -793,7 +793,7 @@ export default function Detail() {
</Button>
</Stack>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
{currentClaimHistoryCare?.map((claimHistoryCare, index) =>
{currentClaimHistoryCare?.map((claimHistoryCare, index) =>
claimHistoryCare.status === 0 ? (
<Grid item xs={12} md={12} key={index}> {/* Tambahkan key untuk setiap elemen dalam loop */}
<Card sx={{padding: 2}}>
@@ -804,17 +804,17 @@ export default function Detail() {
<TableMoreMenu actions={
<>
<MenuItem onClick={() => handleEditHospitalCare(claimHistoryCare.id)}>
<EditTwoTone />Edit
<EditTwoTone />Edit
</MenuItem>
<MenuItem onClick={() => {setOpenDialogApproval(true); setClaimHistoryId(claimHistoryCare.id)}}>
<LoopOutlined />Update Status
<LoopOutlined />Update Status
</MenuItem>
</>
}/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Admission Date :</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{ fDate(claimHistoryCare.admision_date)}</Typography> {/* Perbaikan typo di 'admission_date' */}
<Typography variant='subtitle2' sx={style2} gutterBottom>{ fDate(claimHistoryCare.admission_date)}</Typography> {/* Perbaikan typo di 'admission_date' */}
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date :</Typography>
@@ -841,7 +841,7 @@ export default function Detail() {
) : null
)}
</Stack>
{/* Dialog for input and update */}
<Dialog open={openDialogHospitalCare} onClose={handleCloseDialogHospitalCare} fullWidth={true} maxWidth={'xl'}>
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
@@ -873,27 +873,27 @@ export default function Detail() {
</Grid>
<Grid item xs={6} md={6}>
<Typography variant="subtitle1" sx={{marginBottom: '10px'}}>Admission Date*</Typography>
<RHFDatepicker name="admision_date" label="Admission Date" required/>
<RHFDatepicker name="admission_date" label="Admission Date" required/>
</Grid>
<Grid item xs={6} md={6}>
<Typography variant="subtitle1" sx={{marginBottom: '10px'}}>Discharge Date*</Typography>
<RHFDatepicker name="discharge_date" label="Discharge Date" required/>
</Grid>
</Grid>
{/* Location */}
<Grid item xs={12}>
<Typography variant='subtitle1' marginBottom={1}>Location*</Typography>
<Autocomplete
id="combo-box-demo"
options={organization}
fullWidth
getOptionLabel={(option) => {
getOptionLabel={(option) => {
return option.name ?? false
}}
isOptionEqualToValue={(option, value) =>{
return option.organization_id == value.organization_id
}}
onChange={(e, selectedOption) => {
if (selectedOption) {
const selectedOrganizationId = selectedOption.organization_id;
@@ -901,7 +901,7 @@ export default function Detail() {
}
}}
value={organization.find(row => row.organization_id == values.organization_id)}
renderInput={(params) => (
<RHFTextField
name="organization_id"
@@ -913,17 +913,17 @@ export default function Detail() {
/>
)}
/>
</Grid>
</Grid>
{/* Dokter */}
<Grid item xs={12}>
<Grid item xs={12}>
<Typography variant='subtitle1' marginBottom={1}>Doctor*</Typography>
<Autocomplete
id="combo-box-demo"
options={doctor}
limitTags={1}
fullWidth
getOptionLabel={(option) => {
getOptionLabel={(option) => {
return option.name ?? false
}}
isOptionEqualToValue={(option, value) =>{
@@ -931,14 +931,14 @@ export default function Detail() {
}}
value={doctor.find(row => row.id == values.practitioner_id)}
onChange={handleDoctorChange}
renderInput={(params) => (
<RHFTextField
<RHFTextField
name='practitioner_id'
{...params}
label="Doctor"
variant="outlined"
{...params}
label="Doctor"
variant="outlined"
fullWidth
required
/>
@@ -975,7 +975,7 @@ export default function Detail() {
options={main_diagnosis}
limitTags={1}
fullWidth
getOptionLabel={(option) => {
getOptionLabel={(option) => {
return option.name ?? false
}}
isOptionEqualToValue={(option, value) =>{
@@ -1012,11 +1012,11 @@ export default function Detail() {
</FormProvider>
</DialogContent>
<DialogActions>
</DialogActions>
</Dialog>
{/* Dialog for approval */}
<Dialog open={openDialogApproval} onClose={handleCloseDialogApprove} fullWidth={true} maxWidth={'sm'}>
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
@@ -1038,7 +1038,7 @@ export default function Detail() {
<Card sx={{padding: 2}}>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Admission Date</Typography>
<Typography variant='subtitle1' gutterBottom>{ carehistory ? fDate(carehistory?.admision_date) : '-'}</Typography>
<Typography variant='subtitle1' gutterBottom>{ carehistory ? fDate(carehistory?.admission_date) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
@@ -1069,8 +1069,8 @@ export default function Detail() {
</FormProvider>
</DialogContent>
<DialogActions>
</DialogActions>
</Dialog>
@@ -1083,7 +1083,7 @@ export default function Detail() {
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnostic History</Typography>
</Stack>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
{currentClaimHistoryCare?.map((claimHistoryCare, index) =>
{currentClaimHistoryCare?.map((claimHistoryCare, index) =>
claimHistoryCare.status === 1 ? (
<Grid item xs={12} md={12} key={index}> {/* Tambahkan key untuk setiap elemen dalam loop */}
<Card sx={{padding: 2}}>
@@ -1094,7 +1094,7 @@ export default function Detail() {
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Admission Date :</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{ fDate(claimHistoryCare.admision_date)}</Typography> {/* Perbaikan typo di 'admission_date' */}
<Typography variant='subtitle2' sx={style2} gutterBottom>{ fDate(claimHistoryCare.admission_date)}</Typography> {/* Perbaikan typo di 'admission_date' */}
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date :</Typography>
@@ -1129,7 +1129,7 @@ export default function Detail() {
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnosis Summary</Typography>
</Stack>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
{currentClaimHistoryCare?.map((claimHistoryCare, index) =>
{currentClaimHistoryCare?.map((claimHistoryCare, index) =>
claimHistoryCare.status === 1 ? (
<Grid item xs={12} md={12} key={index}> {/* Tambahkan key untuk setiap elemen dalam loop */}
<Card sx={{padding: 2}}>
@@ -1145,8 +1145,8 @@ export default function Detail() {
<Typography variant='subtitle2' sx={style1} gutterBottom>Main Diagnosis :</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{claimHistoryCare.icd?.name} <Label>{claimHistoryCare.icd?.code}</Label></Typography>
</Stack>
{/* {claimHistoryCare.comparative_diagnosis?.map((comparativeDiagnosis, i) =>
{/* {claimHistoryCare.comparative_diagnosis?.map((comparativeDiagnosis, i) =>
(
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>{i == 0 ? 'Comparative Diagnosis :' : ''}</Typography>
@@ -1168,7 +1168,7 @@ export default function Detail() {
))
)}
</Card>
</Grid>
) : null
@@ -1222,7 +1222,7 @@ export default function Detail() {
</Stack>
</>
): ''}
{/* Dialog Service */}
<Dialog open={openDialogService} onClose={handleCloseDialogService} fullWidth={true}>
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
@@ -1288,11 +1288,11 @@ export default function Detail() {
setValServiceType(e.target.value);
setValServiceTypeError(e.target.value === '' ? 'This field is required' : '');
}}
>
{serviceTypeData?.map((item, index) => (
<MenuItem key={index} value={item.id}>{item.name}</MenuItem>
))}
))}
</Select>
<FormHelperText style={{ color: 'red' }}>{valServiceTypeError}</FormHelperText>
</FormControl>
@@ -1332,7 +1332,7 @@ export default function Detail() {
label={item.description}
/>
</FormGroup>
))}
))}
</Select>
<FormHelperText style={{ color: 'red' }}>{valBenefitNameError}</FormHelperText>
</FormControl>
@@ -1355,11 +1355,11 @@ export default function Detail() {
setValHospital(e.target.value);
setValHospitalError(e.target.value === '' ? 'This field is required' : '');
}}
>
{hospitalData?.map((item, index) => (
<MenuItem key={index} value={item.id}>{item.name}</MenuItem>
))}
))}
</Select>
<FormHelperText style={{ color: 'red' }}>{valHospitalError}</FormHelperText>
</FormControl>
@@ -1406,9 +1406,9 @@ export default function Detail() {
<>
{(customerData && customerData.status === 'received') ? (
<>
<Button
variant="outlined"
sx={{color: '#FF4842', borderColor: '#FF4842', marginLeft: 'auto'}}
<Button
variant="outlined"
sx={{color: '#FF4842', borderColor: '#FF4842', marginLeft: 'auto'}}
onClick={() => {
setOpenDialogSubmit(true);
setDeclaine('decline');
@@ -1416,9 +1416,9 @@ export default function Detail() {
>
Decline
</Button>
<Button
sx={{backgroundColor: '#19BBBB', marginLeft: 1}}
variant="contained"
<Button
sx={{backgroundColor: '#19BBBB', marginLeft: 1}}
variant="contained"
onClick={()=> {
setOpenDialogSubmit(true);
setDeclaine('approve');
@@ -1429,16 +1429,16 @@ export default function Detail() {
</>
) : (
<>
<Button
variant="outlined"
sx={{color: '#212B36', borderColor: '#919EAB52', marginLeft: 'auto'}}
<Button
variant="outlined"
sx={{color: '#212B36', borderColor: '#919EAB52', marginLeft: 'auto'}}
onClick={handelDownloadLog}
>
Download Final LOG
</Button>
<Button
sx={{backgroundColor: '#19BBBB', marginLeft: 1}}
variant="contained"
<Button
sx={{backgroundColor: '#19BBBB', marginLeft: 1}}
variant="contained"
onClick={()=> {
setOpenDialogSubmit(true);
setDeclaine('re-open');
@@ -1448,7 +1448,7 @@ export default function Detail() {
</Button>
</>
) }
</>
{/* Dialog Submits */}
<Dialog open={openDialogSubmit} onClose={handleCloseDialogSubmit} fullWidth={true}>

69
frontend/dashboard/src/pages/Claims/Model/Functions.tsx
View File

@@ -1,23 +1,58 @@
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { BenefitConfigurationListType } from "./Types";
/**
* Get Benefit Configuration List
*/
export const getBenefitConfigurationList = async ( ): Promise<BenefitConfigurationListType[]> => {
return [
{
benefit_name: 'Konsultasi Dokter Umum',
amount_incurred: 75000,
amount_approved: 75000,
amount_not_approved: 0,
excess_paid: 0
},
{
benefit_name: 'Biaya Perawatan Setelah Rawat Inap',
amount_incurred: 925000,
amount_approved: 50000,
amount_not_approved: 425000,
excess_paid: 0
},
];
export const getBenefitConfigurationList = async ( claim_id: string ): Promise<BenefitConfigurationListType[]> => {
const response = await axios.get(`/claims/${claim_id}/benefit-configuration`)
.then((res) =>{
return res.data.data.benefit_list;
})
.catch((res) => {
enqueueSnackbar("server error !", {
variant: 'error',
});
return [];
});
return response;
};
/**
* Edit Benefit Configuration
*/
export const editBenefitConfiguration = async ( data: BenefitConfigurationListType ): Promise<boolean> => {
const response = await axios.put(`/claims/benefit-configuration/edit/${data.claim_service_benefits_id}`, {
...data
})
.then((res) =>{
enqueueSnackbar(res.data.message, {
variant: 'success',
});
return true;
})
.catch((res) => {
if (res.response.status == 400) {
let arr_message = res.response.data.message;
for (const key in arr_message) {
enqueueSnackbar(arr_message[key][0], {
variant: 'warning',
});
}
}
else {
enqueueSnackbar("server error !", {
variant: 'error',
});
}
return false;
});
return response;
};

1
frontend/dashboard/src/pages/Claims/Model/Types.tsx
View File

@@ -2,6 +2,7 @@
* Benefit Configuration List Type
*/
export type BenefitConfigurationListType = {
claim_service_benefits_id: number,
benefit_name: string,
amount_incurred: number,
amount_approved: number,

230
frontend/dashboard/src/pages/Claims/components/BenefitConfigurationDialog.tsx
View File

@@ -1,5 +1,8 @@
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { useEffect, useState } from 'react';
import { Box, Grid } from '@mui/material';
import { LoadingButton } from '@mui/lab';
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
import Dialog from '@mui/material/Dialog';
@@ -10,7 +13,8 @@ import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import Typography from '@mui/material/Typography';
import { useForm } from 'react-hook-form';
import { FormProvider, RHFTextField } from '@/components/hook-form';
import { FormProvider } from '@/components/hook-form';
import RHFTextFieldMoney from '@/components/hook-form/v2/RHFTextFieldMoney';
/**
* Custom Style
@@ -24,8 +28,9 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
* Utils, Types, Functions
* ============================================
*/
import { BenefitConfigurationListType } from '../Model/Types';
import palette from '@/theme/palette';
import { BenefitConfigurationListType } from '../Model/Types';
import { editBenefitConfiguration } from '../Model/Functions';
/**
* Props
@@ -35,6 +40,7 @@ type Props = {
data?: BenefitConfigurationListType,
isOpen: boolean,
handleCancleProp: () => void,
handleSuccessProp: () => void,
};
export default function BenefitConfigurationDialog({ ...props }: Props) {
@@ -42,6 +48,7 @@ export default function BenefitConfigurationDialog({ ...props }: Props) {
// setup form
// ====================================
const defaultValues: BenefitConfigurationListType = {
claim_service_benefits_id: 0,
benefit_name: '',
amount_incurred: 0,
amount_approved: 0,
@@ -49,21 +56,38 @@ export default function BenefitConfigurationDialog({ ...props }: Props) {
excess_paid: 0,
};
const validationSchema = Yup.object().shape({
amount_incurred : Yup.string().typeError('').required(''),
amount_approved : Yup.string().typeError('').required(''),
amount_not_approved : Yup.string().typeError('').required(''),
excess_paid : Yup.string().typeError('').required(''),
});
const methods = useForm<any>({
resolver: yupResolver(validationSchema),
defaultValues
});
const { handleSubmit, reset, setValue, formState: { isDirty, isSubmitting } } = methods;
const { handleSubmit, reset, watch, setValue, formState: { isDirty, isSubmitting, errors } } = methods;
console.log(errors);
console.log(watch());
// Submit Form
// =====================================
const submitHandler = async (data: BenefitConfigurationListType) => {
return true;
let response = await editBenefitConfiguration(data);
if (response == true) {
props.handleSuccessProp()
props.handleCancleProp()
}
}
// Set Value Form
// =====================================
useEffect(() => {
setValue('claim_service_benefits_id', props.data?.claim_service_benefits_id)
setValue('amount_incurred', props.data?.amount_incurred)
setValue('amount_approved', props.data?.amount_approved)
setValue('amount_not_approved', props.data?.amount_not_approved)
@@ -71,124 +95,124 @@ export default function BenefitConfigurationDialog({ ...props }: Props) {
}, [props.data])
return (
<FormProvider methods={methods} onSubmit={handleSubmit(submitHandler)}>
<BootstrapDialog
onClose={props.handleCancleProp}
aria-labelledby="customized-dialog-title"
open={props.isOpen}
maxWidth={'md'}
>
<DialogTitle sx={{ m: 0, p: 2, background: palette.light.primary.main, color: palette.light.grey[0], display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} id="customized-dialog-title">
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>
Client Benefit Configuration
</Typography>
<Dialog
onClose={props.handleCancleProp}
aria-labelledby="customized-dialog-title"
open={props.isOpen}
maxWidth={'md'}
>
<FormProvider methods={methods} onSubmit={handleSubmit(submitHandler)}>
<DialogTitle sx={{ m: 0, p: 2, background: palette.light.primary.main, color: palette.light.grey[0], display: 'flex', alignItems: 'center', justifyContent: 'space-between' }} id="customized-dialog-title">
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>
Client Benefit Configuration
</Typography>
<IconButton
aria-label="close"
onClick={props.handleCancleProp}
sx={{color: (theme) => theme.palette.grey[0]}}
>
<CloseIcon />
</IconButton>
</DialogTitle>
<IconButton
aria-label="close"
onClick={props.handleCancleProp}
sx={{color: (theme) => theme.palette.grey[0]}}
>
<CloseIcon />
</IconButton>
</DialogTitle>
<DialogContent sx={{ p: '0px' }}>
<Box sx={{ py: '24px', px: '32px'}}>
<Box sx={{ p: '24px', border: '1px solid rgba(0,0,0,0.125)', borderRadius: '12px'}}>
<Grid container spacing={3}>
{/* Benefit Name */}
<Grid item xs={12}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
{props.data?.benefit_name}
</Typography>
</Grid>
<DialogContent sx={{ p: '0px' }}>
<Box sx={{ py: '24px', px: '32px'}}>
<Box sx={{ p: '24px', border: '1px solid rgba(0,0,0,0.125)', borderRadius: '12px'}}>
<Grid container spacing={3}>
{/* Benefit Name */}
<Grid item xs={12}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
{props.data?.benefit_name}
</Typography>
</Grid>
<Grid item xs={12}>
<Grid container spacing={3}>
<Grid item xs={3}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="body2" component="div">
Amount Incurred*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextField
id="amount_incurred"
name='amount_incurred'
placeholder='Amount Incurred'
/>
</Grid>
<Grid item xs={12}>
<Grid container spacing={3}>
<Grid item xs={3}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="body2" component="div">
Amount Incurred*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
id="amount_incurred"
name='amount_incurred'
placeholder='Amount Incurred'
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={3}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="body2" component="div">
Amount Approved*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextField
id="amount_approved"
name='amount_approved'
placeholder='Amount Approved'
/>
</Grid>
<Grid item xs={3}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="body2" component="div">
Amount Approved*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
id="amount_approved"
name='amount_approved'
placeholder='Amount Approved'
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={3}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="body2" component="div">
Amount Not Approved*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextField
id="amount_not_approved"
name='amount_not_approved'
placeholder='Amount Not Approved'
/>
</Grid>
<Grid item xs={3}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="body2" component="div">
Amount Not Approved*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
id="amount_not_approved"
name='amount_not_approved'
placeholder='Amount Not Approved'
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={3}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="body2" component="div">
Excess Paid*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextField
id="excess_paid"
name='excess_paid'
placeholder='Excess Paid'
/>
</Grid>
<Grid item xs={3}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="body2" component="div">
Excess Paid*
</Typography>
</Grid>
<Grid item xs={12} sx={{display: 'flex', gap: 1}}>
<RHFTextFieldMoney
id="excess_paid"
name='excess_paid'
placeholder='Excess Paid'
/>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</Grid>
</Box>
</DialogContent>
</Box>
</DialogContent>
<DialogActions>
<Button variant='outlined' onClick={props.handleCancleProp} aria-label="close">
Cancle
</Button>
<Button variant='contained' onClick={props.handleCancleProp}>
Save
</Button>
</DialogActions>
</BootstrapDialog>
</FormProvider>
<DialogActions>
<Button variant='outlined' onClick={props.handleCancleProp} aria-label="close">
Cancle
</Button>
<LoadingButton disabled={!isDirty} type="submit" variant="contained" loading={isSubmitting}>
Save Changes
</LoadingButton>
</DialogActions>
</FormProvider>
</Dialog>
);
}

16
frontend/dashboard/src/pages/Claims/components/BenefitConfigurationList.tsx
View File

@@ -3,6 +3,7 @@
* ============================================
*/
import { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import { Box, Typography, Grid, MenuItem } from '@mui/material';
/**
@@ -26,8 +27,11 @@ import { BenefitConfigurationListType } from '../Model/Types';
import { getBenefitConfigurationList } from '../Model/Functions';
import palette from '@/theme/palette';
import BenefitConfigurationDialog from './BenefitConfigurationDialog';
import { fNumber } from '@/utils/formatNumber';
export default function BenefitConfigurationList() {
const { id: claim_id } = useParams();
// State
// --------------------
const [BenefitConfigurationList, setBenefitConfigurationList] = useState<BenefitConfigurationListType[]>();
@@ -43,7 +47,7 @@ export default function BenefitConfigurationList() {
// Load Data
// -------------------
const loadDataTableData = async () => {
const response = await getBenefitConfigurationList();
const response = await getBenefitConfigurationList(claim_id??'');
setBenefitConfigurationList(response);
}
@@ -94,7 +98,7 @@ export default function BenefitConfigurationList() {
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{row.amount_incurred}
{fNumber(row.amount_incurred)}
</Typography>
</Grid>
</Grid>
@@ -110,7 +114,7 @@ export default function BenefitConfigurationList() {
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{row.amount_approved}
{fNumber(row.amount_approved)}
</Typography>
</Grid>
</Grid>
@@ -126,7 +130,7 @@ export default function BenefitConfigurationList() {
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{row.amount_not_approved}
{fNumber(row.amount_not_approved)}
</Typography>
</Grid>
</Grid>
@@ -142,7 +146,7 @@ export default function BenefitConfigurationList() {
</Grid>
<Grid item xs={12}>
<Typography variant="caption" sx={{ fontWeight: 'bold' }}>
{row.excess_paid}
{fNumber(row.excess_paid)}
</Typography>
</Grid>
</Grid>
@@ -158,7 +162,7 @@ export default function BenefitConfigurationList() {
}
{/* Dialog */}
<BenefitConfigurationDialog data={BenefitConfigurationData} isOpen={isDialogOpen} handleCancleProp={() => setIsDialogOpen(false)} />
<BenefitConfigurationDialog data={BenefitConfigurationData} isOpen={isDialogOpen} handleCancleProp={() => setIsDialogOpen(false)} handleSuccessProp={() => loadDataTableData()} />
</Box>
);
}