update
This commit is contained in:
Server D3 Linksehat
@@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user