[WIP] Claims
This commit is contained in:
@@ -1,38 +1,40 @@
|
||||
import * as Yup from 'yup';
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useParams } from "react-router-dom";
|
||||
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
|
||||
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from "../../../components/hook-form";
|
||||
import Page from "../../../components/Page";
|
||||
import useSettings from "../../../hooks/useSettings";
|
||||
import CorporateTabNavigations from "../CorporateTabNavigations";
|
||||
import DivisionsList from "./List";
|
||||
import { useMemo, useState } from 'react';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { Autocomplete, Button, Card, Collapse, Divider, Grid, Stack, TextField, Typography } from '@mui/material';
|
||||
import { Controller, useForm } from 'react-hook-form';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
|
||||
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from '../../components/hook-form';
|
||||
import Page from '../../components/Page';
|
||||
import useSettings from '../../hooks/useSettings';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import MemberSelectDialog from '../../components/dialogs/MemberSelectDialog';
|
||||
import { styled } from '@mui/system';
|
||||
import axios from '../../utils/axios';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
|
||||
export default function Create() {
|
||||
const [member, setMember] = useState();
|
||||
const selectedMemberDisplay = useRef<HTMLInputElement>(null);
|
||||
|
||||
|
||||
export default function Divisions() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { corporate_id } = useParams();
|
||||
|
||||
const NewDivisionSchema = Yup.object().shape({
|
||||
const NewClaimSchema = 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'),
|
||||
diagnosis_id: Yup.string().required('Diagnosis is required'),
|
||||
total_claim: Yup.string().required('Total Claim is required'),
|
||||
});
|
||||
|
||||
const defaultValues = useMemo(
|
||||
() => ({
|
||||
code: '',
|
||||
name: '',
|
||||
diagnosis_id: null,
|
||||
total_claim: 0,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const methods = useForm({
|
||||
resolver: yupResolver(NewDivisionSchema),
|
||||
resolver: yupResolver(NewClaimSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
@@ -51,119 +53,79 @@ export default function Divisions() {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
'category' : 'General Practitioner',
|
||||
'childs' : [
|
||||
{
|
||||
'name' : 'External Doctor Online',
|
||||
'code' : 'gp-external-doctor-online'
|
||||
},
|
||||
{
|
||||
'name' : 'External Doctor Offline',
|
||||
'code' : 'gp-external-doctor-offline'
|
||||
},
|
||||
{
|
||||
'name' : 'Internal Doctor Online',
|
||||
'code' : 'gp-internal-doctor-online'
|
||||
},
|
||||
{
|
||||
'name' : 'Internal Doctor Offline',
|
||||
'code' : 'gp-internal-doctor-offline'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
'category' : 'Specialist',
|
||||
'childs' : [
|
||||
{
|
||||
'name' : 'External Doctor Online',
|
||||
'code' : 'sp-external-doctor-online'
|
||||
},
|
||||
{
|
||||
'name' : 'External Doctor Offline',
|
||||
'code' : 'sp-external-doctor-offline'
|
||||
},
|
||||
{
|
||||
'name' : 'Internal Doctor Online',
|
||||
'code' : 'sp-internal-doctor-online'
|
||||
},
|
||||
{
|
||||
'name' : 'Internal Doctor Offline',
|
||||
'code' : 'sp-internal-doctor-offline'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
'category' : 'Medicines',
|
||||
'childs' : [
|
||||
{
|
||||
'name' : 'Vitamins',
|
||||
'code' : 'medicines-vitamins'
|
||||
},
|
||||
{
|
||||
'name' : 'Delivery Fee',
|
||||
'code' : 'medicines-delivery-fee'
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
const memberSelected = (selectedMember: any) => {
|
||||
setMember(selectedMember);
|
||||
};
|
||||
|
||||
const products = [
|
||||
{
|
||||
'name' : 'Inpatient',
|
||||
'code' : 'IP',
|
||||
},
|
||||
{
|
||||
'name' : 'Outpatient',
|
||||
'code' : 'OP',
|
||||
},
|
||||
{
|
||||
'name' : 'Dental',
|
||||
'code' : 'DT',
|
||||
},
|
||||
{
|
||||
'name' : 'Dental',
|
||||
'code' : 'DTL',
|
||||
},
|
||||
{
|
||||
'name' : 'Matternity',
|
||||
'code' : 'MT',
|
||||
},
|
||||
{
|
||||
'name' : 'Special Benefit',
|
||||
'code' : 'SB',
|
||||
},
|
||||
];
|
||||
const [diagnosis, setDiagnosis] = useState([]);
|
||||
|
||||
const searchDiagnosis = (search) => {
|
||||
axios.get('master/diagnosis/search', {params: {search}})
|
||||
.then(function(res) {
|
||||
setDiagnosis(res.data);
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => { // Trigger First Search
|
||||
axios.get('master/diagnosis/search')
|
||||
.then(function(res) {
|
||||
setDiagnosis(res.data);
|
||||
})
|
||||
|
||||
}, [])
|
||||
|
||||
const [isEligible, setIsEligible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setIsEligible(false)
|
||||
console.log('member change')
|
||||
}, [member])
|
||||
|
||||
const [isCheckingLimit, setIsCheckingLimit] = useState(false)
|
||||
const checkLimit = (event) => {
|
||||
event.preventDefault();
|
||||
console.log(getValues('diagnosis_id'))
|
||||
if (!member || !getValues('diagnosis_id')) {
|
||||
enqueueSnackbar('Please Check the Data', { variant: 'error' })
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
setIsCheckingLimit(true)
|
||||
axios.post('check-limit', {
|
||||
'member_id' : member.id,
|
||||
'diagnosis' : getValues('diagnosis_id'),
|
||||
'total_claim' : getValues('total_claim')
|
||||
})
|
||||
.then((res) => {
|
||||
setIsEligible(true)
|
||||
})
|
||||
.catch((err) => {
|
||||
enqueueSnackbar('Failed Checking Limit : ' + err.message ?? '', { variant: 'error' })
|
||||
})
|
||||
.then(() => {
|
||||
setIsCheckingLimit(false)
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Page title="Create Benefit">
|
||||
|
||||
<Page title="Create Claim" sx={{ mx: 2 }}>
|
||||
<HeaderBreadcrumbs
|
||||
heading={'Create Benefit'}
|
||||
heading={'Create Claim'}
|
||||
links={[
|
||||
{ name: 'Dashboard', href: '/dashboard' },
|
||||
{
|
||||
name: 'Corporates',
|
||||
href: '/corporates',
|
||||
},
|
||||
{
|
||||
name: 'Corporate Name',
|
||||
href: '/corporates/'+id,
|
||||
},
|
||||
{
|
||||
name: 'Benefits',
|
||||
href: '/corporates/'+id+'/benefits',
|
||||
name: 'Claims',
|
||||
href: '/claims',
|
||||
},
|
||||
{
|
||||
name: 'Create',
|
||||
href: '/corporates/'+id+'/benefits/create',
|
||||
href: '/claims/create',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12}>
|
||||
@@ -171,71 +133,96 @@ export default function Divisions() {
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<Stack spacing={3}>
|
||||
|
||||
<Typography variant="h6">Benefit Detail</Typography>
|
||||
<Typography variant="h6">Member</Typography>
|
||||
|
||||
<RHFTextField name="name" label="Benefit Name" />
|
||||
|
||||
<RHFTextField name="code" label="Benefit Code" />
|
||||
|
||||
<Typography variant="h6">Benefit Configuration</Typography>
|
||||
|
||||
<Divider orientation="horizontal" flexItem />
|
||||
<Stack spacing={3} divider={<Divider orientation="horizontal" flexItem />}>
|
||||
<Stack spacing={2}>
|
||||
<RHFCheckbox name="a" label='Outpatient'/>
|
||||
{benefits.map(row => (
|
||||
<Collapse in={true} timeout="auto" unmountOnExit >
|
||||
<Typography>{row.category}</Typography>
|
||||
<Grid container>
|
||||
{row.childs.map(benefit => (
|
||||
<Grid item xs={6}>
|
||||
<RHFCheckbox name={benefit.code} label={benefit.name}/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Collapse>
|
||||
))}
|
||||
<Typography>Admin Fee</Typography>
|
||||
<Grid container>
|
||||
{benefits.map(row => (
|
||||
<Grid item xs={4}>
|
||||
<RHFCheckbox name="cat" label={row.category}/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
|
||||
|
||||
<Stack spacing={2}>
|
||||
<RHFCheckbox name="a" label='Inpatient'/>
|
||||
{benefits.map(row => (
|
||||
<Collapse in={true} timeout="auto" unmountOnExit >
|
||||
<Typography>{row.category}</Typography>
|
||||
<Grid container>
|
||||
{row.childs.map(benefit => (
|
||||
<Grid item xs={6}>
|
||||
<RHFCheckbox name={benefit.code} label={benefit.name}/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Collapse>
|
||||
))}
|
||||
<Typography>Admin Fee</Typography>
|
||||
<Grid container>
|
||||
{benefits.map(row => (
|
||||
<Grid item xs={4}>
|
||||
<RHFCheckbox name="cat" label={row.category}/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
<Stack spacing={2} direction="row">
|
||||
<Grid item xs={10}>
|
||||
<TextField
|
||||
label="Member"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={member?.name || ''}
|
||||
ref={selectedMemberDisplay}
|
||||
InputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={2}>
|
||||
<Button variant="outlined" fullWidth sx={{ p: 1.8 }} onClick={() => {
|
||||
setIsMemberDialogOpen(true)
|
||||
}}>
|
||||
Search
|
||||
</Button>
|
||||
</Grid>
|
||||
</Stack>
|
||||
|
||||
{ member && (
|
||||
<Stack>
|
||||
<div>
|
||||
Plan : {JSON.stringify(member)}
|
||||
</div>
|
||||
<div>
|
||||
Benefit :
|
||||
</div>
|
||||
<div>
|
||||
Another :
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<Controller
|
||||
name="diagnosis"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Autocomplete
|
||||
options={diagnosis}
|
||||
getOptionLabel={(option) =>
|
||||
option ? `(${option.code}) ${option.name}` : ''
|
||||
}
|
||||
value={value || ''}
|
||||
onChange={(event: any, newValue: any) => {
|
||||
setValue('diagnosis_id', newValue?.id)
|
||||
onChange(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Diagnosis"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={(event) => {
|
||||
searchDiagnosis(event.target.value)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<RHFTextField type="number" name="total_claim" label="Total Claim" />
|
||||
|
||||
{ isEligible === true ? (
|
||||
<LoadingButton onClick={checkLimit} 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>
|
||||
</FormProvider>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<MemberSelectDialog
|
||||
openDialog={isMemberDialogOpen}
|
||||
setOpenDialog={setIsMemberDialogOpen}
|
||||
onSelect={memberSelected}
|
||||
></MemberSelectDialog>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user