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

update

Browse Source
This commit is contained in:
Server D3 Linksehat
2024-10-14 10:35:21 +07:00
parent 611689235b
commit 013c57d00a
86 changed files with 9199 additions and 729 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,6 +40,11 @@ type BenefitSelected = {
id: number,
description: string,
benefit_id: number,
family_plan: string,
family_plan_plans: string,
limit_amount: number,
limit_amount_plan: number,
max_frequency_period: number,
}
@@ -54,6 +59,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
const [valBenefitNameError, setValBenefitNameError] = useState('');
const benefitNameData = requestLog?.benefit;
const [benefitSelected, setBenefitSelected] = useState<BenefitSelected[]>([]);
const [isDisabled, setisDisable] = useState(false);
const handleConditionChangeService = (event) => {
const selectedItem = event.target.value;
@@ -186,15 +192,125 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
}
}
const totalUsage = () => {
let realTimeUsageMember = 0
for (let key in requestLog?.member_usage_benefit) {
if (requestLog?.member_usage_benefit.hasOwnProperty(key)) {
let value = requestLog?.member_usage_benefit[key];
// Menggunakan parseFloat() untuk mengonversi nilai menjadi angka
let numericValue = parseFloat(value);
// Memeriksa apakah numericValue adalah angka yang valid
if (!isNaN(numericValue)) {
realTimeUsageMember += numericValue;
}
}
}
let totalAmountMember = 0
for (let key in benefitData) {
// Menambahkan nilai amount_approved ke totalAmount
totalAmountMember += Number(benefitData[key].amount_approved);
}
return realTimeUsageMember+totalAmountMember
}
const handleOnChangeNominal = (key) => {
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
// setValue(`benefit_data.${key}.amount_approved`, 0);
setError(`benefit_data.${key}.amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
if (benefitSelected[key].family_plan == 'S' || benefitSelected[key].family_plan == 'F'){
if (requestLog?.member_usage_benefit && benefitSelected[key] && benefitData[key]) {
let limitAmount = Number(benefitSelected[key].limit_amount) || 0;
let limitAmountPlan = Number(benefitSelected[key].limit_amount_plan) || 0;
// Periksa apakah limitAmount Benefit lebih besar dari realTimeUsage
if (limitAmountPlan != 999999999){
let realTimeUsage = 0;
let value = 0;
for (let key in requestLog?.member_usage_benefit) {
if (requestLog?.member_usage_benefit.hasOwnProperty(key)) {
let value = requestLog?.member_usage_benefit[key];
// Menggunakan parseFloat() untuk mengonversi nilai menjadi angka
let numericValue = parseFloat(value);
// Memeriksa apakah numericValue adalah angka yang valid
if (!isNaN(numericValue)) {
realTimeUsage += numericValue;
}
}
}
// console.log(benefitData, 'test')
let totalAmount = 0;
for (let key in benefitData) {
// Menambahkan nilai amount_approved ke totalAmount
totalAmount += Number(benefitData[key].amount_approved);
}
// Hitung penggunaan waktu nyata
realTimeUsage += totalAmount;
let excess = realTimeUsage - limitAmountPlan
let incurred = Number(benefitData[key].amount_incurred);
if (realTimeUsage === limitAmountPlan){
setisDisable(true)
setValue(`benefit_data.${key}.amount_not_approved`, incurred);
} else {
setisDisable(false)
}
if (limitAmountPlan < realTimeUsage) {
setValue(`benefit_data.${key}.amount_not_approved`, excess);
setValue(`benefit_data.${key}.amount_approved`, incurred - excess);
setError(`benefit_data.${key}.amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmountPlan) } , silakan isikan di Amount Excess` });
} else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
setError(`benefit_data.${key}.amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
} else {
clearErrors(`benefit_data.${key}.amount_approved`);
}
} else if (limitAmount != 999999999) { // Periksa apakah limitAmount Benefit lebih besar dari realTimeUsage
// Konversi nilai ke angka dengan aman
let memberUsage = Number(requestLog.member_usage_benefit[benefitSelected[key].id]) || 0;
let amountApproved = Number(benefitData[key].amount_approved) || 0;
// Hitung penggunaan waktu nyata
let realTimeUsage = memberUsage + amountApproved;
let value = realTimeUsage - limitAmount
if (limitAmount < realTimeUsage) {
setValue(`benefit_data.${key}.amount_not_approved`, value);
setError(`benefit_data.${key}.amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmount) } , silakan isikan di Amount Excess` });
} else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
setError(`benefit_data.${key}.amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
} else {
clearErrors(`benefit_data.${key}.amount_approved`);
}
} else {
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
setError(`benefit_data.${key}.amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
} else {
clearErrors(`benefit_data.${key}.amount_approved`);
}
}
if (totalAll().totalAmountApproved + totalAll().totalAmountNotApproved === totalAll().totalAmountIncurred) {
clearErrors(`benefit_data.${key}.excess_paid`);
} else {
setError(`benefit_data.${key}.excess_paid`, { message: 'Total Amount Excess tidak sama dengan Total Amount Incurred' });
}
}
} else {
clearErrors(`benefit_data.${key}.amount_approved`);
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
setError(`benefit_data.${key}.amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
} else {
clearErrors(`benefit_data.${key}.amount_approved`);
}
}
}
const handleOnChangeNotApprove = (key, value) => {
setValue(`benefit_data.${key}.excess_paid`, value);
if (totalAll().totalAmountApproved + totalAll().totalAmountNotApproved === totalAll().totalAmountIncurred) {
clearErrors(`benefit_data.${key}.excess_paid`);
} else {
setError(`benefit_data.${key}.excess_paid`, { message: 'Total Amount Excess tidak sama dengan Total Amount Incurred' });
}
};
// Submit Form
// =====================================
const submitHandler = async (data: BenefitConfigurationListType) => {
@@ -318,6 +434,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
setValue(`benefit_data.${index}.amount_approved`, event.target.value)
handleOnChangeNominal(index)}
}
disabled={isDisabled}
/>
</Grid>
</Grid>
@@ -338,6 +455,10 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
name={`benefit_data.${index}.amount_not_approved`}
placeholder='Amount Not Approved'
required
onChange={(event) => {
setValue(`benefit_data.${index}.amount_not_approved`, event.target.value)
handleOnChangeNotApprove(index, event.target.value)}
}
/>
</Grid>
</Grid>
@@ -432,7 +553,7 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
<Grid container spacing={2}>
<Grid item xs={6}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
Total Benefit
Total Benefit
</Typography>
</Grid>
@@ -507,7 +628,21 @@ export default function DialogBenefit({requestLog, setOpenDialog, openDialog, cl
</Grid>
</Box>
</Grid>
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs={3}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
Total Usage / Limit
</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="body2" sx={{ fontWeight: 'bold'}}>
{fNumber(totalUsage())} / {fNumber(benefitSelected[0].limit_amount_plan) }
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>

206
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogConfirmation copy.tsx Executable file
View File

@@ -0,0 +1,206 @@
import MuiDialog from "@/components/MuiDialog";
import { Autocomplete, 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';
import { DetailFinalLogType } from "../Model/Types";
import { fDateOnly, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
type DialogConfirmationType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
approve: string;
requestLog: DetailFinalLogType|undefined;
}
export default function DialogConfirmation({requestLog, setOpenDialog, openDialog, approve, onSubmit} : DialogConfirmationType ) {
const navigate = useNavigate();
const [formData, setFormData] = useState({
discharge_date: requestLog?.discharge_date,
id: requestLog?.id,
status: approve || '',
catatan: '',
icdCodes: requestLog?.diagnosis.length ? requestLog.diagnosis.map(diagnosis => ({ value: diagnosis.id, label: diagnosis.name })) : []
});
const [icdOptions, setIcdOptions] = useState([
{ value: '-', label: '-' }
]);
useEffect(() => {
// Ambil data dari API dan atur opsi ICD
axios.get('diagnosis')
.then((response) => {
setIcdOptions(response.data.data);
})
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
useEffect(() => {
// Update formData setiap kali approve berubah
setFormData(prevData => ({
...prevData,
status: approve || '',
}));
}, [approve]);
const handleChange = (field, value) => {
setFormData((prevData) => ({
...prevData,
[field]: value,
}));
};
const handleApprove = () => {
setFormData((prevData) => ({
...prevData,
status: approve,
}));
handleSubmit();
};
const handleSubmit = () => {
axios
.post(`customer-service/request/final-log`, formData)
.then((response) => {
enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
setOpenDialog(false);
if (requestLog?.service_type == 'Inpatient'){
navigate('/case_management/inpatient_monitoring');
} else {
navigate('/custormer-service/final-log');
}
})
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
});
}
const style1 = {
color: '#919EAB',
width: '30%'
}
const style2 = {
width: '70%'
}
const marginBottom1 = {
marginBottom: 1,
}
const marginBottom2 = {
marginBottom: 2,
}
const handleCloseDialog = () => {
setOpenDialog(false);
}
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this final log ?</Typography>
<Grid item xs={12} md={12} marginTop={4}>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.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>{requestLog?.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>{requestLog?.name}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
</Stack>
</Card>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
<TextField
label="Discharge Date"
variant="outlined"
fullWidth
type="date"
value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
onChange={(e) => handleChange('discharge_date', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
<TextField
label="Catatan"
variant="outlined"
fullWidth
value={formData.catatan}
onChange={(e) => handleChange('catatan', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
<Autocomplete
multiple
options={icdOptions}
getOptionLabel={(option) => option.label}
fullWidth
value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
onChange={(e, newValues) => handleChange('icdCodes', newValues.map((value) => value.value))}
renderInput={(params) => (
<TextField
{...params}
label="Diagnosis ICD - X"
variant="outlined"
/>
)}
/>
</Stack>
</Card>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
{approve == 'approved' ? (
<Button color="primary" variant="contained" onClick={() => handleApprove()}>Approve</Button>
) : (
<Button color="error" variant="contained" onClick={() => handleApprove()}>Decline</Button>
) }
</DialogActions>
</Stack>
);
return (
<MuiDialog
title={{name: "Confirmation"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
/>
);
}

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

@@ -1,6 +1,5 @@
import MuiDialog from "@/components/MuiDialog";
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Autocomplete, Button, Card, DialogActions, Grid, TextField, Typography } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { DetailFinalLogType } from "../Model/Types";
@@ -26,25 +25,15 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
id: requestLog?.id,
status: approve || '',
catatan: '',
icdCodes: requestLog?.diagnosis.length ? requestLog.diagnosis.map(diagnosis => ({ value: diagnosis.id, label: diagnosis.name })) : []
icdCodes: requestLog?.diagnosis.length ? requestLog.diagnosis.map(diagnosis => ({ value: diagnosis.value, label: diagnosis.label })) : []
});
const [icdOptions, setIcdOptions] = useState([
{ value: '-', label: '-' }
]);
useEffect(() => {
// Ambil data dari API dan atur opsi ICD
axios.get('diagnosis')
.then((response) => {
setIcdOptions(response.data.data);
})
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
const [searchIcd, setSearchIcd] = useState('');
useEffect(() => {
// Update formData setiap kali approve berubah
setFormData(prevData => ({
@@ -58,7 +47,6 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
...prevData,
[field]: value,
}));
};
const handleApprove = () => {
@@ -68,7 +56,17 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
}));
handleSubmit();
};
const handleSearch = (search) => {
setSearchIcd(search);
axios.get('diagnosis?search=' + search)
.then((response) => {
setIcdOptions(response.data.data);
})
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}
const handleSubmit = () => {
axios
@@ -76,7 +74,7 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
.then((response) => {
enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
setOpenDialog(false);
if (requestLog?.service_type == 'Inpatient'){
if (requestLog?.service_type === 'Inpatient') {
navigate('/case_management/inpatient_monitoring');
} else {
navigate('/custormer-service/final-log');
@@ -87,120 +85,117 @@ export default function DialogConfirmation({requestLog, setOpenDialog, openDialo
});
}
const style1 = {
color: '#919EAB',
width: '30%'
}
};
const style2 = {
width: '70%'
}
};
const marginBottom1 = {
marginBottom: 1,
}
};
const marginBottom2 = {
marginBottom: 2,
}
};
const handleCloseDialog = () => {
setOpenDialog(false);
}
};
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to {approve == 'approved' ? 'approve' : 'deciline'} this final log ?</Typography>
<Typography variant="subtitle2">Are you sure to {approve === 'approved' ? 'approve' : 'decline'} this final log?</Typography>
<Grid item xs={12} md={12} marginTop={4}>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.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>{requestLog?.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>{requestLog?.name}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
</Stack>
</Card>
<Card sx={{ padding: 2, marginTop: 2 }}>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.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>{requestLog?.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>{requestLog?.name}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
</Stack>
</Card>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
<TextField
label="Discharge Date"
variant="outlined"
fullWidth
type="date"
value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
onChange={(e) => handleChange('discharge_date', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
<TextField
label="Catatan"
variant="outlined"
fullWidth
value={formData.catatan}
onChange={(e) => handleChange('catatan', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
<Autocomplete
multiple
options={icdOptions}
getOptionLabel={(option) => option.label}
fullWidth
value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
onChange={(e, newValues) => handleChange('icdCodes', newValues.map((value) => value.value))}
renderInput={(params) => (
<TextField
{...params}
label="Diagnosis ICD - X"
variant="outlined"
/>
)}
/>
</Stack>
</Card>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
<Card sx={{ padding: 2, marginTop: 2 }}>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
<TextField
label="Discharge Date"
variant="outlined"
fullWidth
type="date"
value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
onChange={(e) => handleChange('discharge_date', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
<TextField
label="Catatan"
variant="outlined"
fullWidth
value={formData.catatan}
onChange={(e) => handleChange('catatan', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
<Autocomplete
multiple
options={icdOptions}
getOptionLabel={(option) => option.label}
fullWidth
value={formData.icdCodes}
onChange={(e, newValues) => handleChange('icdCodes', newValues)}
inputValue={searchIcd}
onInputChange={(e, newInputValue) => handleSearch(newInputValue)}
renderInput={(params) => (
<TextField
{...params}
label="Diagnosis ICD - X"
variant="outlined"
/>
)}
/>
</Stack>
</Card>
</Grid>
<DialogActions>
<Button variant="outlined" sx={{ color: '#212B36', borderColor: '#919EAB52' }} onClick={handleCloseDialog}>Cancel</Button>
{approve == 'approved' ? (
<Button color="primary" variant="contained" onClick={() => handleApprove()}>Approve</Button>
) : (
<Button color="error" variant="contained" onClick={() => handleApprove()}>Decline</Button>
) }
</DialogActions>
{approve === 'approved' ? (
<Button color="primary" variant="contained" onClick={handleApprove}>Approve</Button>
) : (
<Button color="error" variant="contained" onClick={handleApprove}>Decline</Button>
)}
</DialogActions>
</Stack>
);
);
return (
<MuiDialog
title={{name: "Confirmation"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
title={{ name: "Confirmation" }}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
/>
);
}
);
}

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

@@ -31,10 +31,19 @@ type DialogDeleteType = {
total: any
}
type BenefitSelected = {
id: number,
description: string,
benefit_id: number,
family_plan: string,
limit_amount: number,
}
export default function DialogEditBenefit({id, data, setOpenDialog, openDialog, onSubmit, total} : DialogDeleteType ) {
const handleCloseDialog = () => {
setOpenDialog(false);
}
const [benefitSelected, setBenefitSelected] = useState<BenefitSelected[]>([]);
// setup form
// ====================================
@@ -85,15 +94,70 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,
}
}
const findItemById = (id) => {
return total.benefit.find(item => item.id === id);
}
const handleOnChangeNominal = (key) => {
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
// setValue(`benefit_data.${key}.amount_approved`, 0);
setError(`amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
let benefitData = findItemById(data?.benefit_id)
if (benefitData.family_plan == 'S' || benefitData.family_plan == 'F'){
// Konversi nilai ke angka dengan aman
let limitAmount = Number(benefitData.limit_amount) || 0;
let limitAmountPlan = Number(benefitData.limit_amount_plan) || 0;
if (limitAmountPlan != 999999999){
let realTimeUsage = totalAll().totalAmountApproved;
console.log(limitAmountPlan, 'test')
if (limitAmountPlan < realTimeUsage) {
setError(`amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmountPlan) } , silakan isikan di Amount Excess` });
} else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
setError(`amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
} else {
clearErrors(`amount_approved`);
}
} else if (limitAmount != 999999999) {
let memberUsage = Number(total.totalLimit[benefitData.id]) || 0;
let amountApproved = Number(parseFloat(watch('amount_approved'))) || 0;
// Hitung penggunaan waktu nyata
let realTimeUsage = memberUsage + amountApproved;
// Periksa apakah limitAmount lebih besar dari realTimeUsage
if (limitAmount < realTimeUsage) {
setError(`amount_approved`, { message: `Total Amount Approve sudah melebihi limit ${ fNumber(limitAmount) } , silakan isikan di Amount Excess` });
} else if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
// setValue(`benefit_data.${key}.amount_approved`, 0);
setError(`amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
} else {
clearErrors(`amount_approved`);
}
} else {
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred) {
setError(`amount_approved`, { message: 'Total Amount Approve tidak boleh lebih dari Total Amount Incurred' });
} else {
clearErrors(`amount_approved`);
}
}
} else {
clearErrors(`amount_approved`);
if (totalAll().totalAmountApproved > totalAll().totalAmountIncurred){
setError(`amount_approved`, {message: 'Amount Approve tidak boleh lebih dari Amount Incurred'});
} else {
clearErrors(`amount_approved`);
}
}
}
const handleOnChangeNotApprove = (key, value) => {
let amountApproved = Number(parseFloat(watch('amount_approved'))) || 0;
let amountNotApproved = Number(parseFloat(watch('amount_not_approved'))) || 0;
let amountIncurred = Number(parseFloat(watch('amount_incurred'))) || 0;
setValue(`excess_paid`, value);
console.log(amountApproved + amountNotApproved, amountIncurred, 'test')
if ((amountApproved + amountNotApproved) !== amountIncurred) {
setError(`amount_not_approved`, {message: 'Amount Not Approve tidak sama dengan total Amount Incurred'});
} else {
clearErrors(`amount_not_approved`);
}
};
// if (totalAmountIncurred !== (totalAmountApproved+totalAmountNotApproved)){
// // alert('Total Incurred tidak sama dengan Total Approve + Total Not Approve')
// // setValue('amount_approved', data?.amount_approved)
@@ -203,6 +267,10 @@ export default function DialogEditBenefit({id, data, setOpenDialog, openDialog,
name={`amount_not_approved`}
placeholder='Amount Not Approved'
required
onChange={(event) => {
setValue(`amount_not_approved`, event.target.value)
handleOnChangeNotApprove(id, event.target.value)}
}
/>
</Grid>
</Grid>

284
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditFinalLOG copy.tsx Executable file
View File

@@ -0,0 +1,284 @@
import MuiDialog from "@/components/MuiDialog";
import { Autocomplete, 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';
import { DetailFinalLogType } from "../Model/Types";
import { fDateOnly, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
type DialogConfirmationType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
requestLog: DetailFinalLogType|undefined;
}
export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialog, onSubmit} : DialogConfirmationType ) {
const navigate = useNavigate();
const [formData, setFormData] = useState({
billing_no: requestLog?.billing_no,
invoice_no: requestLog?.invoice_no,
discharge_date: requestLog?.discharge_date,
id: requestLog?.id,
catatan: requestLog?.catatan,
icdCodes: requestLog?.diagnosis
? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
: [],
reason: requestLog?.reason
});
const [icdOptions, setIcdOptions] = useState([
{ value: '-', label: '-' }
]);
useEffect(() => {
// Ambil data dari API dan atur opsi ICD
axios.get('diagnosis')
.then((response) => {
setIcdOptions(response.data.data);
})
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
useEffect(() => {
if (requestLog) {
setFormData({
discharge_date: requestLog.discharge_date,
billing_no: requestLog.billing_no,
invoice_no: requestLog.invoice_no,
id: requestLog.id,
catatan: requestLog.catatan,
icdCodes: requestLog.diagnosis
? requestLog.diagnosis.map(diagnosis => diagnosis.code)
: [],
reason: requestLog.reason
});
}
}, [requestLog]);
const handleChange = (field, value) => {
setFormData((prevData) => ({
...prevData,
[field]: value,
}));
if (field === 'reason') {
setIsReasonSelected(!!value);
}
};
const handleApprove = () => {
setFormData((prevData) => ({
...prevData,
}));
handleSubmit();
};
const handleSubmit = () => {
if (isReasonSelected && formData.reason !== '') {
axios
.post(`customer-service/request/final-log`, formData)
.then((response) => {
enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
setOpenDialog(false);
navigate('/custormer-service/final-log/detail/' + requestLog?.id)
window.location.reload()
})
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
});
} else {
setIsReasonSelected(false);
alert('Silakan pilih alasan sebelum mengirimkan data.');
}
}
const style1 = {
color: '#919EAB',
width: '30%'
}
const style2 = {
width: '70%'
}
const marginBottom1 = {
marginBottom: 1,
}
const marginBottom2 = {
marginBottom: 2,
}
const resetForm = () => {
setFormData({
discharge_date: requestLog?.discharge_date,
id: requestLog?.id,
billing_no: requestLog?.billing_no,
invoice_no: requestLog?.invoice_no,
catatan: requestLog?.catatan,
icdCodes: requestLog?.diagnosis
? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
: [],
reason: requestLog?.reason
});
};
const [isReasonSelected, setIsReasonSelected] = useState(true);
const handleCloseDialog = () => {
setOpenDialog(false);
resetForm();
}
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 getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to edit this final log ?</Typography>
<Grid item xs={12} md={12} marginTop={4}>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.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>{requestLog?.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>{requestLog?.name}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom1}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
</Stack>
</Card>
<Card sx={{padding:2, marginTop:2}} >
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Invoice Number</Typography>
<TextField
label="Invoice Number"
variant="outlined"
fullWidth
value={formData.invoice_no}
onChange={(e) => handleChange('invoice_no', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Billing Number</Typography>
<TextField
label="Billing Number"
variant="outlined"
fullWidth
value={formData.billing_no}
onChange={(e) => handleChange('billing_no', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
<TextField
label="Discharge Date"
variant="outlined"
fullWidth
type="date"
value={formData.discharge_date ? fDateOnly(formData.discharge_date) : '-'}
onChange={(e) => handleChange('discharge_date', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
<TextField
label="Catatan"
variant="outlined"
fullWidth
value={formData.catatan}
onChange={(e) => handleChange('catatan', e.target.value)}
/>
</Stack>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
<Autocomplete
multiple
options={icdOptions}
getOptionLabel={(option) => option.label}
fullWidth
value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
onChange={(e, newValues) => {
const selectedCodes = newValues.map((value) => value.value);
setFormData({ ...formData, icdCodes: selectedCodes });
}}
renderInput={(params) => (
<TextField
{...params}
label="Diagnosis ICD - X"
variant="outlined"
/>
)}
/>
</Stack>
<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="primary" variant="contained" onClick={() => handleApprove()}>Update</Button>
</DialogActions>
</Stack>
);
return (
<MuiDialog
title={{name: "Update"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xl"
/>
);
}

66
frontend/dashboard/src/pages/CustomerService/FinalLog/Components/DialogEditFinalLOG.tsx
View File

@@ -26,9 +26,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
discharge_date: requestLog?.discharge_date,
id: requestLog?.id,
catatan: requestLog?.catatan,
icdCodes: requestLog?.diagnosis
? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
: [],
icdCodes: requestLog?.diagnosis,
reason: requestLog?.reason
});
@@ -36,8 +34,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
{ value: '-', label: '-' }
]);
const [searchIcd, setSearchIcd] = useState('');
useEffect(() => {
// Ambil data dari API dan atur opsi ICD
// Ambil data dari API dan atur opsi ICD
axios.get('diagnosis')
.then((response) => {
setIcdOptions(response.data.data);
@@ -45,23 +45,23 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
useEffect(() => {
if (requestLog) {
setFormData({
discharge_date: requestLog.discharge_date,
billing_no: requestLog.billing_no,
invoice_no: requestLog.invoice_no,
id: requestLog.id,
catatan: requestLog.catatan,
icdCodes: requestLog.diagnosis
? requestLog.diagnosis.map(diagnosis => diagnosis.code)
: [],
reason: requestLog.reason
});
}
}, [requestLog]);
if (requestLog) {
setFormData({
discharge_date: requestLog.discharge_date,
billing_no: requestLog.billing_no,
invoice_no: requestLog.invoice_no,
id: requestLog.id,
catatan: requestLog.catatan,
icdCodes: requestLog.diagnosis,
reason: requestLog.reason
});
}
}, [requestLog]);
const handleChange = (field, value) => {
setFormData((prevData) => ({
@@ -80,6 +80,17 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
}));
handleSubmit();
};
const handleSearch = (search) => {
setSearchIcd(search);
axios.get('diagnosis?search=' + search)
.then((response) => {
setIcdOptions(response.data.data);
})
.catch((error) => {
console.error('Error fetching ICD options:', error);
});
}
const handleSubmit = () => {
@@ -100,8 +111,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
alert('Silakan pilih alasan sebelum mengirimkan data.');
}
}
const style1 = {
color: '#919EAB',
width: '30%'
@@ -123,13 +133,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
billing_no: requestLog?.billing_no,
invoice_no: requestLog?.invoice_no,
catatan: requestLog?.catatan,
icdCodes: requestLog?.diagnosis
? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
: [],
icdCodes: requestLog?.diagnosis,
reason: requestLog?.reason
});
};
const [isReasonSelected, setIsReasonSelected] = useState(true);
const handleCloseDialog = () => {
@@ -227,11 +234,10 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
options={icdOptions}
getOptionLabel={(option) => option.label}
fullWidth
value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
onChange={(e, newValues) => {
const selectedCodes = newValues.map((value) => value.value);
setFormData({ ...formData, icdCodes: selectedCodes });
}}
value={formData.icdCodes}
onChange={(e, newValues) => handleChange('icdCodes', newValues)}
inputValue={searchIcd}
onInputChange={(e, newInputValue) => handleSearch(newInputValue)}
renderInput={(params) => (
<TextField
{...params}
@@ -247,7 +253,7 @@ export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialo
options={reasons}
getOptionLabel={(option) => option.label}
fullWidth
value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
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

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

@@ -140,6 +140,8 @@ export default function Detail() {
totalAmountApproved : totalAmountApprove,
totalAmountNotApproved : totalAmountNotApprove,
totalExcessPaid : totalExcessPaid,
totalLimit : requestLog?.member_usage_benefit,
benefit : requestLog?.benefit,
}
// Handle Delete File LOG
const [pathFile, setPathFile] = useState('')
@@ -254,7 +256,7 @@ export default function Detail() {
{requestLog?.diagnosis?.length > 0 ? (
<ul>
{requestLog.diagnosis.map((diagnosisItem, index) => (
<li key={index}>{diagnosisItem.code} - {diagnosisItem.name}</li>
<li key={index}>{diagnosisItem.value} - {diagnosisItem.label}</li>
// Replace 'name' with the property you want to display
))}
</ul>

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

@@ -61,12 +61,13 @@ export type DetailFinalLogType = {
exclusion : Exclusion[],
medicine : Medicine[],
files : file[],
member_usage_benefit : number
}
export type Diagnosis = {
id : number,
name : string,
code : string
value : string,
label : string
}
export type BenefitData = {
@@ -85,6 +86,7 @@ export type BenefitData = {
export type BenefitConfigurationListType = {
request_log_id: number|undefined,
benefit_name: string,
benefit_id: number,
benefit: {
description: string
},