597 lines
19 KiB
TypeScript
597 lines
19 KiB
TypeScript
import * as Yup from 'yup';
|
|
import { useSnackbar } from 'notistack';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { yupResolver } from '@hookform/resolvers/yup';
|
|
import { Controller, useForm } from 'react-hook-form';
|
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
import axios from '../../utils/axios';
|
|
import { FormProvider, RHFTextField } from '../../components/hook-form';
|
|
import {
|
|
Autocomplete,
|
|
Button,
|
|
Grid,
|
|
Stack,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableRow,
|
|
TextField,
|
|
Typography,
|
|
useTheme,
|
|
List,
|
|
ListItem,
|
|
IconButton,
|
|
ListItemAvatar,
|
|
Avatar,
|
|
ListItemText,
|
|
} from '@mui/material';
|
|
import Iconify from '../../components/Iconify';
|
|
import { LoadingButton } from '@mui/lab';
|
|
import { fCurrency } from '../../utils/formatNumber';
|
|
import MemberSelectDialog from '../../components/dialogs/MemberSelectDialog';
|
|
import { Add, DeleteOutline } from '@mui/icons-material';
|
|
|
|
type Props = {
|
|
isEdit: boolean;
|
|
currentClaim?: any;
|
|
};
|
|
|
|
export default function ClaimForm({ isEdit, currentClaim }: Props) {
|
|
const navigate = useNavigate();
|
|
|
|
const { enqueueSnackbar } = useSnackbar();
|
|
|
|
const NewCorporateSchema = Yup.object().shape({
|
|
name: Yup.string().required('Name is required'),
|
|
code: Yup.string().required('Corporate Code is required'),
|
|
active: Yup.boolean().required('Corporate Status is required'),
|
|
// file: Yup.boolean().required('Corporate Status is required'),
|
|
});
|
|
|
|
const defaultValues = useMemo(
|
|
() => ({
|
|
member: currentClaim?.member || {},
|
|
member_id: currentClaim?.member_id || null,
|
|
diagnosis_id: currentClaim?.diagnosis_id || null,
|
|
total_claim: currentClaim?.total_claim || 0,
|
|
}),
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[currentClaim]
|
|
);
|
|
|
|
const methods = useForm<any>({
|
|
resolver: yupResolver(NewCorporateSchema),
|
|
defaultValues,
|
|
});
|
|
const {
|
|
reset,
|
|
watch,
|
|
control,
|
|
setValue,
|
|
getValues,
|
|
setError,
|
|
handleSubmit,
|
|
formState: { isSubmitting },
|
|
} = methods;
|
|
|
|
const values = watch();
|
|
|
|
const [isCheckingLimit, setIsCheckingLimit] = useState(false);
|
|
const [isEligible, setIsEligible] = useState(false);
|
|
const [memberBenefits, setMemberBenefits] = useState([]);
|
|
const [diagnosisOption, setDiagnosisOption] = useState([]);
|
|
const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
|
|
const [member, setMember] = useState({})
|
|
|
|
|
|
useEffect(() => {
|
|
console.log('defaultValues', defaultValues);
|
|
if (isEdit && currentClaim) {
|
|
reset(defaultValues);
|
|
setMember(defaultValues.member)
|
|
}
|
|
if (!isEdit) {
|
|
reset(defaultValues);
|
|
setMember(defaultValues.member)
|
|
}
|
|
}, [isEdit, currentClaim]);
|
|
|
|
const fileSelected = (event, type) => {
|
|
const files = event.target.files;
|
|
const currentFiles = getValues(`uploaded_files.${type}`) ?? [];
|
|
|
|
setValue(`uploaded_files.${type}`, [...currentFiles, ...files]);
|
|
|
|
console.log('currentFiles', getValues('uploaded_files'));
|
|
};
|
|
|
|
const memberSelected = (member) => {
|
|
setMember(member)
|
|
};
|
|
|
|
const checkLimit = async () => {
|
|
console.log('CHECKING LIMIT');
|
|
};
|
|
|
|
const onSubmit = async (data: any) => {
|
|
try {
|
|
if (!isEdit) {
|
|
const response = await axios.post('/claims', data);
|
|
} else {
|
|
const response = await axios.put('/claims/' + currentClaim?.id ?? '', data);
|
|
}
|
|
reset();
|
|
enqueueSnackbar(
|
|
!isEdit ? 'Organizations Created Successfully!' : 'Organizations Udpated Successfully!',
|
|
{ variant: 'success' }
|
|
);
|
|
navigate('/claims');
|
|
} catch (error: any) {
|
|
if (error && error.response.status === 422) {
|
|
for (const [key, value] of Object.entries(error.response.data.errors)) {
|
|
setError(key, { message: value[0] });
|
|
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
|
|
}
|
|
} else {
|
|
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
|
|
}
|
|
}
|
|
|
|
const ascent = document?.querySelector('ascent');
|
|
if (ascent != null) {
|
|
ascent.innerHTML = '';
|
|
}
|
|
};
|
|
|
|
function generate(files, element: React.ReactElement) {
|
|
return files.map((value) =>
|
|
React.cloneElement(element, {
|
|
key: value,
|
|
})
|
|
);
|
|
}
|
|
|
|
const headStyle = {};
|
|
return (
|
|
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
|
<Stack spacing={3}>
|
|
<Typography variant="h6">Member</Typography>
|
|
|
|
<Stack spacing={2} direction="row">
|
|
<Grid item xs={12}>
|
|
<RHFTextField
|
|
name="member_id"
|
|
label="Member"
|
|
variant="outlined"
|
|
fullWidth
|
|
value={member?.name || ''}
|
|
InputProps={{
|
|
readOnly: true,
|
|
}}
|
|
onClick={() => {
|
|
if (!isEdit) setIsMemberDialogOpen(true);
|
|
if (isEdit) enqueueSnackbar('Cannot Change Member', { variant: 'error' });
|
|
}}
|
|
/>
|
|
</Grid>
|
|
{/* <Grid item xs={2}>
|
|
<Button variant="outlined" fullWidth sx={{ p: 1.8 }} onClick={() => {
|
|
setIsMemberDialogOpen(true)
|
|
}}>
|
|
{member ? 'Change' : 'Search'}
|
|
</Button>
|
|
</Grid> */}
|
|
</Stack>
|
|
|
|
{member?.id && (
|
|
<Stack>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} md={6}>
|
|
<Table border="light-700">
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell style={headStyle} align="left">
|
|
Name
|
|
</TableCell>
|
|
<TableCell align="left">{member?.full_name}</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell style={headStyle} align="left">
|
|
DOB
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
{member?.birth_date} ({member?.age + ' years'})
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell style={headStyle} align="left">
|
|
Marital Status
|
|
</TableCell>
|
|
<TableCell align="left">{member?.marital_status}</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell style={headStyle} align="left">
|
|
Record Type
|
|
</TableCell>
|
|
<TableCell align="left">{member?.record_type}</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell style={headStyle} align="left">
|
|
Principal ID
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
{member?.principal_id} (
|
|
{member?.relation_with_principal})
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</Grid>
|
|
<Grid item xs={12} md={6}>
|
|
<Table border="light-700">
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell style={headStyle} align="left">
|
|
Plan
|
|
</TableCell>
|
|
<TableCell align="left">{member?.current_plan?.code}</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell style={headStyle} align="left">
|
|
Active
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
{member?.current_plan?.start} -{' '}
|
|
{member?.current_plan?.end} (Active)
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell style={headStyle} align="left">
|
|
Corporate Limit
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
{fCurrency(0)} / {fCurrency(member?.current_plan?.limit_rules)}
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell style={headStyle} align="left">
|
|
Plan Usage
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
{fCurrency(0)} / {fCurrency(member?.current_plan?.limit_rules)}
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</Grid>
|
|
</Grid>
|
|
</Stack>
|
|
)}
|
|
|
|
<Controller
|
|
name="benefit"
|
|
control={control}
|
|
render={({ field: { onChange, value } }) => (
|
|
<Autocomplete
|
|
options={memberBenefits}
|
|
getOptionLabel={(option) =>
|
|
option ? `#${option.id} (${option.code}) ${option.description}` : ''
|
|
}
|
|
value={value || ''}
|
|
onChange={(event: any, newValue: any) => {
|
|
setValue('benefit_id', newValue?.id);
|
|
onChange(newValue);
|
|
}}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
name="benefit"
|
|
{...params}
|
|
label="Benefit"
|
|
variant="outlined"
|
|
fullWidth
|
|
// onKeyPress={(event) => {
|
|
// if (event.key === 'Enter')
|
|
// searchDiagnosis(event.target.value)
|
|
// }}
|
|
/>
|
|
)}
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
name="diagnosis"
|
|
control={control}
|
|
render={({ field: { onChange, value } }) => (
|
|
<Autocomplete
|
|
options={diagnosisOption}
|
|
getOptionLabel={(option) => (option ? `(${option.code}) ${option.name}` : '')}
|
|
value={value || ''}
|
|
onChange={(event: any, newValue: any) => {
|
|
setValue('diagnosis_id', newValue?.id);
|
|
// setValue('diagnosis', newValue)
|
|
onChange(newValue);
|
|
}}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
name="diagnosis"
|
|
{...params}
|
|
label="Diagnosis"
|
|
variant="outlined"
|
|
fullWidth
|
|
onKeyPress={(event) => {
|
|
if (event.key === 'Enter') searchDiagnosis(event.target.value);
|
|
}}
|
|
/>
|
|
)}
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
{isCheckingLimit && (
|
|
<Stack
|
|
sx={{
|
|
backgroundColor: 'gray',
|
|
paddingY: 1,
|
|
paddingX: 1.5,
|
|
mb: 2,
|
|
borderRadius: '3-xl',
|
|
}}
|
|
>
|
|
{/* Checking */}
|
|
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
|
|
<Iconify
|
|
icon="bxs:info-circle"
|
|
width={12}
|
|
height={13}
|
|
sx={{ color: '#424242', marginRight: '6px' }}
|
|
/>
|
|
<Typography variant="caption" component="span">
|
|
Please Wait, Checking Eligibilty
|
|
</Typography>
|
|
</Typography>
|
|
</Stack>
|
|
)}
|
|
{false && isCheckingLimit == false && isEligible == null && (
|
|
<Stack
|
|
sx={{
|
|
backgroundColor: 'gray',
|
|
paddingY: 1,
|
|
paddingX: 1.5,
|
|
mb: 2,
|
|
borderRadius: '3-xl',
|
|
}}
|
|
>
|
|
{/* No Data Selected */}
|
|
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
|
|
<Iconify
|
|
icon="bxs:info-circle"
|
|
width={12}
|
|
height={13}
|
|
sx={{ color: '#424242', marginRight: '6px' }}
|
|
/>
|
|
<Typography variant="caption" component="span">
|
|
Please Select Diagnosis !
|
|
</Typography>
|
|
</Typography>
|
|
</Stack>
|
|
)}
|
|
{!isCheckingLimit && isEligible !== null && isEligible && (
|
|
<Stack
|
|
sx={{
|
|
backgroundColor: '#B2E8E8',
|
|
paddingY: 1,
|
|
paddingX: 1.5,
|
|
mb: 2,
|
|
borderRadius: '3-xl',
|
|
}}
|
|
>
|
|
{/* Eligible */}
|
|
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
|
|
<Iconify
|
|
icon="bxs:lock-alt"
|
|
width={12}
|
|
height={13}
|
|
sx={{ color: '#424242', marginRight: '6px' }}
|
|
/>
|
|
<Typography variant="caption" component="span">
|
|
Diagnosis is Eligible
|
|
</Typography>
|
|
</Typography>
|
|
<Typography sx={{ typography: 'caption', color: '#637381' }}>
|
|
125.000.000 / 125.000.000
|
|
</Typography>
|
|
</Stack>
|
|
)}
|
|
{!isCheckingLimit && isEligible !== null && !isEligible && (
|
|
<Stack
|
|
sx={{
|
|
backgroundColor: '#B2E8E8',
|
|
paddingY: 1,
|
|
paddingX: 1.5,
|
|
mb: 2,
|
|
borderRadius: '3-xl',
|
|
}}
|
|
>
|
|
{/* Not Eligible */}
|
|
{/* <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
|
|
<Iconify
|
|
icon="bxs:lock-alt"
|
|
width={12}
|
|
height={13}
|
|
sx={{ color: '#424242', marginRight: '6px' }}
|
|
/>
|
|
<Typography variant="caption" component="span">
|
|
Not Eligible
|
|
</Typography>
|
|
</Typography>
|
|
<Typography sx={{ typography: 'caption', color: '#637381' }}>
|
|
125.000.000 / 125.000.000
|
|
</Typography> */}
|
|
</Stack>
|
|
)}
|
|
|
|
<RHFTextField type="number" name="total_claim" label="Total Claim" />
|
|
|
|
{isEdit && (
|
|
<React.Fragment>
|
|
<Typography variant="h6">Documents</Typography>
|
|
|
|
<List>
|
|
{(getValues('uploaded_files.invoice') && getValues('uploaded_files.invoice').length
|
|
? getValues('uploaded_files.invoice')
|
|
: []
|
|
).map((file, index) => (
|
|
<ListItem
|
|
secondaryAction={
|
|
<IconButton edge="end" aria-label="delete">
|
|
<DeleteOutline />
|
|
</IconButton>
|
|
}
|
|
>
|
|
<ListItemAvatar>
|
|
<Avatar>
|
|
{/* <FileIcon /> */}
|
|
I
|
|
</Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText primary={file.name} secondary={file.type} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
<Button
|
|
variant="outlined"
|
|
startIcon={<Add />}
|
|
component="label"
|
|
sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
|
|
>
|
|
Invoice
|
|
<input
|
|
name="invoice"
|
|
hidden
|
|
accept="image/*,application/pdf"
|
|
multiple
|
|
type="file"
|
|
onChange={(event) => {
|
|
fileSelected(event, 'invoice');
|
|
}}
|
|
/>
|
|
</Button>
|
|
<List>
|
|
{(getValues('uploaded_files.prescription') && getValues('uploaded_files.prescription').length
|
|
? getValues('uploaded_files.prescription')
|
|
: []
|
|
).map((file, index) => (
|
|
<ListItem
|
|
secondaryAction={
|
|
<IconButton edge="end" aria-label="delete">
|
|
<DeleteOutline />
|
|
</IconButton>
|
|
}
|
|
>
|
|
<ListItemAvatar>
|
|
<Avatar>
|
|
{/* <FileIcon /> */}
|
|
P
|
|
</Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText primary={file.name} secondary={file.type} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
<Button
|
|
variant="outlined"
|
|
startIcon={<Add />}
|
|
component="label"
|
|
sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
|
|
>
|
|
Prescription
|
|
<input
|
|
name="prescription"
|
|
hidden
|
|
accept="image/*,application/pdf"
|
|
multiple
|
|
type="file"
|
|
onChange={(event) => {
|
|
fileSelected(event, 'prescription');
|
|
}}
|
|
/>
|
|
</Button>
|
|
|
|
<List>
|
|
{(getValues('uploaded_files.diagnosis') && getValues('uploaded_files.diagnosis').length
|
|
? getValues('uploaded_files.diagnosis')
|
|
: []
|
|
).map((file, index) => (
|
|
<ListItem
|
|
secondaryAction={
|
|
<IconButton edge="end" aria-label="delete">
|
|
<DeleteOutline />
|
|
</IconButton>
|
|
}
|
|
>
|
|
<ListItemAvatar>
|
|
<Avatar>
|
|
{/* <FileIcon /> */}
|
|
DR
|
|
</Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText primary={file.name} secondary={file.type} />
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
<Button
|
|
variant="outlined"
|
|
startIcon={<Add />}
|
|
component="label"
|
|
sx={{ paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
|
|
>
|
|
Doctor Result
|
|
<input
|
|
name="invoice"
|
|
hidden
|
|
accept="image/*,application/pdf"
|
|
multiple
|
|
type="file"
|
|
onChange={(event) => {
|
|
fileSelected(event, 'diagnosis');
|
|
}}
|
|
/>
|
|
</Button>
|
|
</React.Fragment>
|
|
)}
|
|
|
|
{isEligible === true ? (
|
|
<LoadingButton
|
|
onClick={handleSubmit(onSubmit)}
|
|
variant="contained"
|
|
color="success"
|
|
style={{ color: '#ffffff' }}
|
|
size="large"
|
|
fullWidth={true}
|
|
loading={isCheckingLimit}
|
|
>
|
|
Create Claim
|
|
</LoadingButton>
|
|
) : (
|
|
<LoadingButton
|
|
onClick={checkLimit}
|
|
variant="outlined"
|
|
size="large"
|
|
fullWidth={true}
|
|
loading={isCheckingLimit}
|
|
>
|
|
Check Limit
|
|
</LoadingButton>
|
|
)}
|
|
</Stack>
|
|
|
|
<MemberSelectDialog
|
|
openDialog={isMemberDialogOpen}
|
|
setOpenDialog={setIsMemberDialogOpen}
|
|
onSelect={memberSelected}
|
|
></MemberSelectDialog>
|
|
</FormProvider>
|
|
);
|
|
}
|