692 lines
37 KiB
TypeScript
692 lines
37 KiB
TypeScript
// mui
|
|
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
|
|
import useSettings from '../../hooks/useSettings';
|
|
// react
|
|
import { useNavigate, useParams, useLocation } from 'react-router-dom';
|
|
import { useEffect, useState, useRef } from 'react';
|
|
import axios from '../../utils/axios';
|
|
// pages
|
|
import { format } from 'date-fns';
|
|
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
|
|
import Button from '@mui/material/Button';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
|
|
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
|
|
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';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export default function Detail() {
|
|
const location = useLocation();
|
|
const queryParams = new URLSearchParams(location.search);
|
|
const code = queryParams.get('code');
|
|
|
|
const navigate = useNavigate();
|
|
const { themeStretch } = useSettings();
|
|
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();
|
|
|
|
useEffect(() => {
|
|
axios
|
|
.get('/claims/detail/'+id)
|
|
.then((response) => {
|
|
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();
|
|
|
|
}, []);
|
|
|
|
function toTitleCase(str) {
|
|
return str.replace(/\w\S*/g, function(txt) {
|
|
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
|
});
|
|
}
|
|
|
|
const style1 = {
|
|
color: '#919EAB',
|
|
width: '30%'
|
|
}
|
|
const style2 = {
|
|
width: '70%'
|
|
}
|
|
const marginBottom1 = {
|
|
marginBottom: 1,
|
|
}
|
|
|
|
//Request
|
|
const [openDialogRequest, setOpenDialogRequest] = useState(false);
|
|
const handleCloseDialogRequest = () => {
|
|
setOpenDialogRequest(false);
|
|
}
|
|
|
|
const [conditionChecked, setConditionChecked] = useState(true);
|
|
const [diagnosisChecked, setDiagnosisChecked] = useState(false);
|
|
const [supportingResultChecked, setSupportingResultChecked] = useState(false);
|
|
|
|
const handleConditionChange = (event) => {
|
|
setConditionChecked(event.target.checked);
|
|
};
|
|
|
|
const handleDiagnosisChange = (event) => {
|
|
setDiagnosisChecked(event.target.checked);
|
|
};
|
|
|
|
const handleSupportingResultChange = (event) => {
|
|
setSupportingResultChecked(event.target.checked);
|
|
};
|
|
|
|
const [noteField, setNoteField] = useState('');
|
|
const [noteFieldError, setNoteFieldError] = useState('');
|
|
const isRequiredFieldsFilled = () => {
|
|
return noteField.trim() !== '';
|
|
};
|
|
|
|
const handelRequestDocument = () => {
|
|
const dataForm = {
|
|
claim_id: id,
|
|
condition: conditionChecked,
|
|
diagnosis: diagnosisChecked,
|
|
result: supportingResultChecked,
|
|
note: noteField,
|
|
}
|
|
axios
|
|
.post('/claims/request-documents', dataForm)
|
|
.then((response) => {
|
|
enqueueSnackbar('Success Request Document', { variant: 'success' });
|
|
setOpenDialogRequest(false);
|
|
window.location.reload();
|
|
})
|
|
.catch((error) => {
|
|
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'>
|
|
<Container maxWidth={themeStretch ? false : 'xl'}>
|
|
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
|
|
<ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
|
|
<Typography variant="h5" sx={{marginLeft:2}}>{(customerData && customerData.code ? customerData.code : '')}</Typography>
|
|
{customerData ? (
|
|
<Stack direction="column" spacing={1} alignItems="center" sx={{marginLeft:'auto'}}>
|
|
<Stack direction="row" spacing={2}>
|
|
<Typography variant="body2" sx={{color: '#757575'}}>Status</Typography>
|
|
<Typography variant="body2" fontWeight="bold">{(customerData && customerData.status) ? toTitleCase(customerData.status) : ''}</Typography>
|
|
</Stack>
|
|
<Stack direction="row" spacing={2}>
|
|
<Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
|
|
<Typography variant="body2" fontWeight="bold">{(customerData && customerData.submission_date) ? format(new Date(customerData.submission_date), "d MMM yyyy") : ''}</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
) : ''}
|
|
</Stack>
|
|
<Grid container spacing={2}>
|
|
{customerData ? (
|
|
<Grid item xs={12} md={12}>
|
|
<Card sx={{padding:2}} >
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Summary of Customer Data</Typography>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Full Name</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.name}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.payor_id}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.member_id}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Type</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(customerData.payment_type)}</Typography>
|
|
</Stack>
|
|
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
|
<Typography variant='subtitle2' sx={style1} gutterBottom>Corporate Name</Typography>
|
|
<Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(customerData.coporate_name)}</Typography>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
) : ''}
|
|
{documentData ? (
|
|
<Grid item xs={12}>
|
|
<Card sx={{padding: 2}}>
|
|
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Additional Documents</Typography>
|
|
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => setOpenDialogRequest(true)}>
|
|
<Typography variant="button" display="block">Request Document</Typography>
|
|
</Button>
|
|
</Stack>
|
|
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
|
{documentData?.map((documentType, index) => (
|
|
<Stack direction="column" spacing={2} key={index}>
|
|
<Typography variant="Subtitle2" gutterBottom>
|
|
{documentType.type === 'claim-diagnosis' ?
|
|
'Diagnosis'
|
|
: documentType.type === 'claim-kondisi' ?
|
|
'Condition'
|
|
: documentType.type === 'claim-result' ?
|
|
'Supporting Result'
|
|
: documentType.type === 'claim-invoice' ?
|
|
'Invoice'
|
|
: ''}
|
|
</Typography>
|
|
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
|
|
<InsertDriveFileIcon />
|
|
<a
|
|
href={documentType.path}
|
|
style={{ cursor: 'pointer', textDecoration: 'underline', color: '#19BBBB' }}
|
|
target="_blank"
|
|
>
|
|
<Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
|
|
</a>
|
|
</Stack>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
{requestDocumentData && requestDocumentData.length > 0 ? (
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Request Documents</Typography>
|
|
) : ''}
|
|
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
|
{requestDocumentData?.map((documentType, index) => (
|
|
<Stack direction="column" spacing={2} key={index}>
|
|
|
|
<Stack direction="row" spacing={1} sx={{color: '#637381'}}>
|
|
<InsertDriveFileIcon />
|
|
<Typography variant="body2" gutterBottom>
|
|
{documentType.type === 'claim-diagnosis' ?
|
|
'Diagnosis'
|
|
: documentType.type === 'claim-kondisi' ?
|
|
'Condition'
|
|
: documentType.type === 'claim-result' ?
|
|
'Supporting Result'
|
|
: documentType.type === 'claim-invoice' ?
|
|
'Invoice'
|
|
: ''}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
{/* 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={handleCloseDialogRequest}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</Stack>
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
|
|
<FormGroup>
|
|
<FormControlLabel
|
|
control={<Checkbox checked={conditionChecked} onChange={handleConditionChange} />}
|
|
label="Condition Document"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox checked={diagnosisChecked} onChange={handleDiagnosisChange} />}
|
|
label="Diagnosis Document"
|
|
/>
|
|
<FormControlLabel
|
|
control={<Checkbox checked={supportingResultChecked} onChange={handleSupportingResultChange} />}
|
|
label="Supporting Result Document"
|
|
/>
|
|
</FormGroup>
|
|
<Typography variant="Subtitle1" sx={{fontWeight: 'bold'}}>
|
|
Notes*
|
|
</Typography>
|
|
<TextField
|
|
label="Detail Notes"
|
|
value={noteField ? noteField : ''}
|
|
onChange={(e) =>{
|
|
setNoteField(e.target.value);
|
|
setNoteFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
|
|
}}
|
|
fullWidth
|
|
inputProps={{ maxLength: 50 }}
|
|
error={!!noteFieldError}
|
|
helperText={noteFieldError}
|
|
/>
|
|
</Stack>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<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>
|
|
</Card>
|
|
</Grid>
|
|
): ''}
|
|
<Grid item xs={12}>
|
|
<Card sx={{padding: 3}}>
|
|
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>History of Hospital Care</Typography>
|
|
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
|
|
<Typography variant="button" display="block">History</Typography>
|
|
</Button>
|
|
</Stack>
|
|
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Card sx={{padding: 3}}>
|
|
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnostic History</Typography>
|
|
</Stack>
|
|
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Card sx={{padding: 3}}>
|
|
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnosis Summary</Typography>
|
|
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
|
|
<Typography variant="button" display="block">Diagnosis</Typography>
|
|
</Button>
|
|
</Stack>
|
|
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
|
|
</Stack>
|
|
</Card>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Card sx={{padding: 3}}>
|
|
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Service</Typography>
|
|
{!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>
|
|
{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) => {
|
|
setValBenefitNameError(!valBenefitNames ? '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}>
|
|
<Card sx={{padding: 3}}>
|
|
<Grid container spacing={4}>
|
|
{/* title */}
|
|
<Grid item xs={12}>
|
|
<Typography variant='subtitle1' sx={{color: '#19BBBB'}}>Client Benefit Configuration</Typography>
|
|
</Grid>
|
|
|
|
{/* no benefit selected */}
|
|
{
|
|
false
|
|
?
|
|
(
|
|
<Grid item xs={12}>
|
|
<Typography variant='body2' sx={{color: '#919EAB', paddingBottom: '14px', textAlign: 'center'}}>Tidak ada benefit yang dipilih</Typography>
|
|
</Grid>
|
|
)
|
|
:
|
|
(
|
|
<Grid item xs={12}>
|
|
<BenefitConfigurationList />
|
|
</Grid>
|
|
)
|
|
}
|
|
</Grid>
|
|
</Card>
|
|
</Grid>
|
|
<Grid item xs={12} md={12}>
|
|
<Stack direction="row" padding={4}>
|
|
<>
|
|
<Button variant="outlined" sx={{color: '#FF4842', borderColor: '#FF4842', marginLeft: 'auto'}} >Decline</Button>
|
|
<Button sx={{backgroundColor: '#19BBBB', marginLeft: 1}} variant="contained" onClick={()=> setOpenDialogSubmit(true)}>Submit</Button>
|
|
</>
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
</Page>
|
|
);
|
|
}
|