315 lines
14 KiB
TypeScript
Executable File
315 lines
14 KiB
TypeScript
Executable File
import MuiDialog from "@/components/MuiDialog";
|
|
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography, Select } from "@mui/material";
|
|
import { Paper } from "@mui/material";
|
|
import { Stack, MenuItem } 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,
|
|
reason: requestLog?.reason,
|
|
type_of_member: requestLog?.type_of_member
|
|
});
|
|
|
|
const [error, setError] = useState(false);
|
|
|
|
const [icdOptions, setIcdOptions] = useState([
|
|
{ value: '-', label: '-' }
|
|
]);
|
|
|
|
const [searchIcd, setSearchIcd] = useState('');
|
|
|
|
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(() => {
|
|
setFormData({
|
|
discharge_date: requestLog?.discharge_date|| '',
|
|
billing_no: requestLog?.billing_no|| '',
|
|
invoice_no: requestLog?.invoice_no|| '',
|
|
id: requestLog?.id|| 0,
|
|
catatan: requestLog?.catatan|| '',
|
|
icdCodes: requestLog?.diagnosis|| [],
|
|
reason: requestLog?.reason|| '',
|
|
type_of_member: requestLog?.type_of_member|| '',
|
|
});
|
|
}, [requestLog]);
|
|
|
|
|
|
const handleChange = (field, value) => {
|
|
setFormData((prevData) => ({
|
|
...prevData,
|
|
[field]: value,
|
|
}));
|
|
if (field === 'reason') {
|
|
setIsReasonSelected(!!value);
|
|
}
|
|
|
|
};
|
|
|
|
const handleApprove = () => {
|
|
setFormData((prevData) => ({
|
|
...prevData,
|
|
}));
|
|
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 = () => {
|
|
if (formData.type_of_member == "" && requestLog?.corporate_id == 5) {
|
|
setError(true);
|
|
alert('Silakan pilih Type Of Member sebelum mengirimkan data.');
|
|
}
|
|
else 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 ?? 0,
|
|
billing_no: requestLog?.billing_no ?? '',
|
|
invoice_no: requestLog?.invoice_no ?? '',
|
|
catatan: requestLog?.catatan ?? '',
|
|
icdCodes: requestLog?.diagnosis ?? [],
|
|
reason: requestLog?.reason ?? '',
|
|
type_of_member: requestLog?.type_of_member ?? '',
|
|
});
|
|
};
|
|
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
|
|
];
|
|
|
|
// console.log(formData.type_of_member)
|
|
|
|
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 Provider</Typography>
|
|
<TextField
|
|
label="Invoice Provider"
|
|
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>Type Of Member*</Typography>
|
|
<Select
|
|
fullWidth
|
|
value={formData.type_of_member}
|
|
onChange={(e) => handleChange('type_of_member', e.target.value)}
|
|
variant="outlined"
|
|
displayEmpty
|
|
required
|
|
error={error}
|
|
>
|
|
<MenuItem value="" disabled>
|
|
Type Member
|
|
</MenuItem>
|
|
<MenuItem value="OMT">OMT</MenuItem>
|
|
<MenuItem value="Non OMT">Non OMT</MenuItem>
|
|
</Select>
|
|
</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={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>
|
|
<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"
|
|
/>
|
|
);
|
|
} |