Claim Services
This commit is contained in:
ivan-sim
@@ -1,5 +1,21 @@
|
||||
// mui
|
||||
import { Container, Grid, Stack, Typography, Card, TextField, Divider, ButtonBase, Box, IconButton } from '@mui/material';
|
||||
import {
|
||||
Container,
|
||||
Grid,
|
||||
Stack,
|
||||
Typography,
|
||||
Card,
|
||||
TextField,
|
||||
Divider,
|
||||
ButtonBase,
|
||||
Box,
|
||||
IconButton,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
FormHelperText,
|
||||
MenuItem,
|
||||
} from '@mui/material';
|
||||
// components
|
||||
import Page from '../../components/Page';
|
||||
// utils
|
||||
@@ -19,9 +35,17 @@ import CloseIcon from '@mui/icons-material/Close';
|
||||
import FormGroup from '@mui/material/FormGroup';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { fPostFormat } from '@/utils/formatTime';
|
||||
import { fDate, fDateTime } from '../../utils/formatTime';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
|
||||
import TableMoreMenu from '@/components/table/TableMoreMenu';
|
||||
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import BenefitConfigurationList from './components/BenefitConfigurationList';
|
||||
import { map } from 'lodash';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -35,6 +59,8 @@ export default function Detail() {
|
||||
const [customerData, setCustomerData] = useState(null);
|
||||
const [documentData, setDocumentData] = useState(null);
|
||||
const [requestDocumentData, setRequestDocumentData] = useState(null);
|
||||
const [serviceData, setServiceData] = useState(null);
|
||||
const [serviceBenefitData, setServiceBenefitData] = useState(null);
|
||||
|
||||
const { id } = useParams();
|
||||
|
||||
@@ -45,10 +71,13 @@ export default function Detail() {
|
||||
setCustomerData(response.data.data.customer_data);
|
||||
setDocumentData(response.data.data.documents);
|
||||
setRequestDocumentData(response.data.data.request_documents);
|
||||
setServiceData(response.data.data.claim_services);
|
||||
setServiceBenefitData(response.data.data.claim_service_benefits);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
getService();
|
||||
|
||||
}, []);
|
||||
|
||||
@@ -69,8 +98,9 @@ export default function Detail() {
|
||||
marginBottom: 1,
|
||||
}
|
||||
|
||||
//Request
|
||||
const [openDialogRequest, setOpenDialogRequest] = useState(false);
|
||||
const handleCloseDialogUpdate = () => {
|
||||
const handleCloseDialogRequest = () => {
|
||||
setOpenDialogRequest(false);
|
||||
}
|
||||
|
||||
@@ -115,6 +145,118 @@ export default function Detail() {
|
||||
enqueueSnackbar('Something Went Wrong', { variant: 'error' });
|
||||
})
|
||||
}
|
||||
//Service
|
||||
const [openDialogService, setOpenDialogService] = useState(false);
|
||||
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));
|
||||
} else {
|
||||
// Item is not selected, add it
|
||||
setValBenefitNames([...valBenefitNames, selectedItem]);
|
||||
}
|
||||
};
|
||||
|
||||
//Data
|
||||
const [serviceTypeData, setServiceTypeData] = useState(null);
|
||||
const [benefitNameData, setBenefitNameData] = useState(null);
|
||||
const [hospitalData, setHospitalData] = useState(null);
|
||||
//Field
|
||||
const currentDate = new Date();
|
||||
const formattedCurrentDate = format(currentDate, 'dd MMM yyyy');
|
||||
//Date Addmissions
|
||||
const [dateAd, setDateAd] = useState(currentDate);
|
||||
//Date Discharge
|
||||
const [dateDis, setDateDis] = useState(currentDate);
|
||||
//Service Type
|
||||
const [valServiceType, setValServiceType] = useState('');
|
||||
const [valServiceTypeError, setValServiceTypeError] = useState('');
|
||||
//Benefit Name
|
||||
const [valBenefitNames, setValBenefitNames] = useState([]);
|
||||
const [valBenefitNameError, setValBenefitNameError] = useState('');
|
||||
//Hospital
|
||||
const [valHospital, setValHospital] = useState('');
|
||||
const [valHospitalError, setValHospitalError] = useState('');
|
||||
//txt name
|
||||
const [txtName, setTxtName] = useState('Add Service');
|
||||
//flag add or edit service
|
||||
const [flagAddService, setFlagAddService] = useState('add');
|
||||
//id claim_services
|
||||
const [idService, setIdService] = useState(null);
|
||||
|
||||
|
||||
const isRequiredFieldsServiceType = () => {
|
||||
return dateAd !== '' && dateDis !== '' && valServiceType !== '' && valBenefitNames.length > 0 && valHospital !== '';
|
||||
};
|
||||
|
||||
const getService = async () => {
|
||||
try {
|
||||
const response = await axios.get('/claims/get-services/' + id);
|
||||
setServiceTypeData(response.data.data.service_type);
|
||||
setBenefitNameData(response.data.data.benefit_name);
|
||||
setHospitalData(response.data.data.hospital);
|
||||
await Promise.all([
|
||||
setServiceTypeData(response.data.data.service_type),
|
||||
setBenefitNameData(response.data.data.benefit_name),
|
||||
setHospitalData(response.data.data.hospital),
|
||||
]);
|
||||
|
||||
} catch (error) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const handleAddService = async () => {
|
||||
setTxtName('Add Service');
|
||||
setFlagAddService('add');
|
||||
setOpenDialogService(true);
|
||||
}
|
||||
|
||||
const handleEditService = async () => {
|
||||
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);
|
||||
setValBenefitNames(serviceBenefitData.benefit_id);
|
||||
}
|
||||
}
|
||||
|
||||
const handelSaveServiceType = () => {
|
||||
const dateAdd = dateAd ? fPostFormat(dateAd, 'yyyy-MM-dd') : null;
|
||||
const dateDisc = dateDis ? fPostFormat(dateDis, 'yyyy-MM-dd') : null;
|
||||
const data = {
|
||||
flagAddService : flagAddService,
|
||||
idService: idService,
|
||||
claim_request_id: id,
|
||||
dateAdd : dateAdd,
|
||||
dateDisc : dateDisc,
|
||||
serviceType : valServiceType,
|
||||
benefitName : valBenefitNames,
|
||||
hospital : valHospital
|
||||
};
|
||||
axios
|
||||
.post('/claims/save-services', data)
|
||||
.then((response) => {
|
||||
enqueueSnackbar('Success '+(flagAddService == 'add' ? 'Add' : 'Edit')+' Service', { variant: 'success' });
|
||||
handleCloseDialogService();
|
||||
window.location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
enqueueSnackbar('Something Went Wrong', { variant: 'error' });
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Page title='Detail'>
|
||||
@@ -223,13 +365,14 @@ export default function Detail() {
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
<Dialog open={openDialogRequest} onClose={handleCloseDialogUpdate} fullWidth={true}>
|
||||
{/* Dialog Request Documents */}
|
||||
<Dialog open={openDialogRequest} onClose={handleCloseDialogRequest} fullWidth={true}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
<Stack direction="row" alignItems='center' spacing={1}>
|
||||
<Typography variant="h6">Request Document</Typography>
|
||||
</Stack>
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogUpdate}>
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogRequest}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
@@ -250,9 +393,11 @@ export default function Detail() {
|
||||
label="Supporting Result Document"
|
||||
/>
|
||||
</FormGroup>
|
||||
<Typography variant="Subtitle1" sx={{fontWeight: 'bold'}}>
|
||||
Notes*
|
||||
</Typography>
|
||||
<TextField
|
||||
label="Note"
|
||||
required
|
||||
label="Detail Notes"
|
||||
value={noteField ? noteField : ''}
|
||||
onChange={(e) =>{
|
||||
setNoteField(e.target.value);
|
||||
@@ -266,7 +411,7 @@ export default function Detail() {
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button variant="outlined" sx={{color: '#212B36'}} onClick={handleCloseDialogUpdate}>Cancel</Button>
|
||||
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogRequest}>Cancel</Button>
|
||||
<Button sx={{backgroundColor: '#19BBBB'}} variant="contained" disabled={!isRequiredFieldsFilled()} onClick={() => handelRequestDocument()}>Request</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
@@ -310,12 +455,199 @@ export default function Detail() {
|
||||
<Card sx={{padding: 3}}>
|
||||
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
||||
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Service</Typography>
|
||||
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
|
||||
{!serviceData ? (
|
||||
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleAddService()}>
|
||||
<Typography variant="button" display="block">Service</Typography>
|
||||
</Button>
|
||||
) : (
|
||||
<Stack sx={{marginLeft: 'auto'}}>
|
||||
<TableMoreMenu actions={
|
||||
<>
|
||||
<MenuItem onClick={() => handleEditService()}>
|
||||
<EditOutlinedIcon />
|
||||
Edit
|
||||
</MenuItem>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
||||
</Stack>
|
||||
{serviceData ? (
|
||||
<>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Admission Date</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{serviceData && serviceData.addmission_date ? fDateTime(serviceData.addmission_date) : ''}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{serviceData && serviceData.discharge_date ? fDateTime(serviceData.discharge_date) : ''}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Serice Type</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{serviceData && serviceData.name_services ? serviceData.name_services : ''}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Benefit Name</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{serviceBenefitData && serviceBenefitData.name_benefits ? serviceBenefitData.name_benefits : ''}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Hospital</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{serviceData && serviceData.name_hospitals ? serviceData.name_hospitals : ''}</Typography>
|
||||
</Stack>
|
||||
</>
|
||||
): ''}
|
||||
|
||||
{/* Dialog Service */}
|
||||
<Dialog open={openDialogService} onClose={handleCloseDialogService} fullWidth={true}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
<Stack direction="row" alignItems='center' spacing={1}>
|
||||
<Typography variant="h6">{txtName}</Typography>
|
||||
</Stack>
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogService}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2} sx={{marginTop: 2, padding: 2}} direction="column">
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Stack direction="column" spacing={2}>
|
||||
<Typography variant="Subtitle1" sx={{fontWeight: 'bold'}}>
|
||||
Admission Date*
|
||||
</Typography>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DatePicker
|
||||
label="Admission Date"
|
||||
value={dateAd}
|
||||
onChange={(newValue) => {
|
||||
setDateAd(newValue);
|
||||
}}
|
||||
inputFormat="dd MMM yyyy"
|
||||
renderInput={(params) => <TextField sx={{width:'100%'}} {...params} defaultValue={formattedCurrentDate}/>}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Stack>
|
||||
<Stack direction="column" spacing={2}>
|
||||
<Typography variant="Subtitle1" sx={{fontWeight: 'bold'}}>
|
||||
Discharge Date*
|
||||
</Typography>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DatePicker
|
||||
label="Discharge Date"
|
||||
value={dateDis}
|
||||
onChange={(newValue) => {
|
||||
setDateDis(newValue);
|
||||
}}
|
||||
inputFormat="dd MMM yyyy"
|
||||
renderInput={(params) => <TextField sx={{width:'100%'}} {...params} defaultValue={formattedCurrentDate}/>}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Stack spacing={2} sx={{width:'100%'}}>
|
||||
<Typography variant='subtitle1'>Service Type*</Typography>
|
||||
<FormControl>
|
||||
<InputLabel htmlFor="service_type">
|
||||
Service Type
|
||||
</InputLabel>
|
||||
<Select
|
||||
id="service_type"
|
||||
value={valServiceType}
|
||||
fullWidth
|
||||
label="Service Type"
|
||||
error={!!valServiceTypeError}
|
||||
onChange={(e) => {
|
||||
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>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Stack spacing={2} sx={{width:'100%'}}>
|
||||
<Typography variant='subtitle1'>Benefit Name*</Typography>
|
||||
<FormControl>
|
||||
<InputLabel htmlFor="benefit_name">
|
||||
Benefit Name
|
||||
</InputLabel>
|
||||
<Select
|
||||
id="benefit_name"
|
||||
value={valBenefitNames}
|
||||
fullWidth
|
||||
label="Benefit Name"
|
||||
error={!!valBenefitNameError}
|
||||
onChange={(e) => {
|
||||
setValBenefitNames(e.target.value);
|
||||
setValBenefitNameError(e.target.value.length === 0 ? 'At least one item must be selected' : '');
|
||||
}}
|
||||
renderValue={(selected) => selected.map(value => {
|
||||
const selectedOption = benefitNameData.find(option => String(option.id) === value);
|
||||
return selectedOption ? selectedOption.description : '';
|
||||
}).join(', ')}
|
||||
>
|
||||
{benefitNameData?.map((item, index) => (
|
||||
<FormGroup key={index} sx={{ marginLeft: 2 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={valBenefitNames.includes(String(item.id))}
|
||||
onChange={handleConditionChangeService}
|
||||
value={String(item.id)}
|
||||
/>
|
||||
}
|
||||
label={item.description}
|
||||
/>
|
||||
</FormGroup>
|
||||
))}
|
||||
</Select>
|
||||
<FormHelperText style={{ color: 'red' }}>{valBenefitNameError}</FormHelperText>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Stack spacing={2} sx={{width:'100%'}}>
|
||||
<Typography variant='subtitle1'>Hospital*</Typography>
|
||||
<FormControl>
|
||||
<InputLabel htmlFor="hospital">
|
||||
Hospital
|
||||
</InputLabel>
|
||||
<Select
|
||||
id="hospital"
|
||||
value={valHospital}
|
||||
fullWidth
|
||||
label="Hospital"
|
||||
error={!!valHospitalError}
|
||||
onChange={(e) => {
|
||||
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>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogService}>Cancel</Button>
|
||||
<Button sx={{backgroundColor: '#19BBBB'}} variant="contained" disabled={!isRequiredFieldsServiceType()} onClick={() => handelSaveServiceType()}>Save</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
|
||||
Reference in New Issue
Block a user