[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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
import { Card, Paper, TableContainer } from "@mui/material";
|
||||
import { LaravelPaginatedData } from "../../@types/paginated-data";
|
||||
import BasePagination from "../../components/BasePagination";
|
||||
|
||||
type LaravelTableProps = {
|
||||
isLoading: boolean;
|
||||
lastRequest: number;
|
||||
data: LaravelPaginatedData;
|
||||
handlePageChange: void;
|
||||
TableContent: any;
|
||||
};
|
||||
|
||||
export default function LaravelTable(props: LaravelTableProps) {
|
||||
return (
|
||||
<Card>
|
||||
<TableContainer component={Paper}>
|
||||
{ props.TableContent }
|
||||
</TableContainer>
|
||||
|
||||
{ !props.isLoading ?
|
||||
(<BasePagination paginationData={props.data} onPageChange={props.handlePageChange}/>) :
|
||||
(<div></div>)
|
||||
}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
// @mui
|
||||
import { Box, Button, Card, Collapse, IconButton, MenuItem, Table, TableBody, TableCell, TableRow, TextField, Typography, Stack, Menu, ButtonGroup } from '@mui/material';
|
||||
import { Box, Button, Card, Collapse, IconButton, MenuItem, Table, TableBody, TableCell, TableRow, TextField, Typography, Stack, Menu, ButtonGroup, Link } from '@mui/material';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
@@ -11,7 +11,8 @@ import { useSearchParams } from 'react-router-dom';
|
||||
// components
|
||||
import axios from '../../utils/axios';
|
||||
import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
|
||||
import DataTable from './LaravelTable';
|
||||
import DataTable from '../../components/LaravelTable';
|
||||
import { fCurrency } from '../../utils/formatNumber';
|
||||
|
||||
export default function List() {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
@@ -102,57 +103,17 @@ export default function List() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
|
||||
{( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<SearchInput onSearch={applyFilter}/>
|
||||
{/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
|
||||
<Button
|
||||
id="import-button"
|
||||
<Link href="/claims/create" style={{ textDecoration: "none" }}>
|
||||
<Button
|
||||
variant='outlined'
|
||||
startIcon={<AddIcon />} sx={{ p: 1.8 }}
|
||||
aria-controls={createMenu ? 'basic-menu' : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={createMenu ? 'true' : undefined}
|
||||
onClick={handleClick}
|
||||
>
|
||||
Import
|
||||
Create
|
||||
</Button>
|
||||
<Menu
|
||||
id="import-button"
|
||||
anchorEl={anchorEl}
|
||||
open={createMenu}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
'aria-labelledby': 'basic-button',
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleImportButton}>Import</MenuItem>
|
||||
<MenuItem onClick={handleClose}>Download Template</MenuItem>
|
||||
</Menu>
|
||||
</Link>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{( currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
|
||||
<Button onClick={handleImportButton} fullWidth>{currentImportFileName ?? "No File Selected"}</Button>
|
||||
<Button onClick={handleCancelImportButton} size="small" fullWidth={false} sx={{ p: 1.8 }}><CancelIcon color="error"/></Button>
|
||||
</ButtonGroup>
|
||||
|
||||
<Button
|
||||
id="upload-button"
|
||||
variant='outlined'
|
||||
startIcon={<UploadIcon />} sx={{ p: 1.8 }}
|
||||
onClick={handleUpload}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
</Stack>
|
||||
)}
|
||||
{( importResult &&
|
||||
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
|
||||
<Box sx={{ color: "text.secondary" }}>Last Import Result Report : <a href={importResult.result_file?.url ?? "#"}>{importResult.result_file?.name ?? "-"}</a></Box>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -164,7 +125,7 @@ export default function List() {
|
||||
const loadDataTableData = async (appliedFilter : any | null = null) => {
|
||||
setDataTableLoading(true);
|
||||
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||
const response = await axios.get('/master/drugs', { params: filter });
|
||||
const response = await axios.get('/claims', { params: filter });
|
||||
// console.log(response.data);
|
||||
setDataTableLoading(false);
|
||||
|
||||
@@ -191,7 +152,7 @@ export default function List() {
|
||||
};
|
||||
|
||||
// Called on every row to map the data to the columns
|
||||
function createData( data: Icd ): Icd {
|
||||
function createData( data: any ): any {
|
||||
return {
|
||||
...data,
|
||||
}
|
||||
@@ -214,13 +175,14 @@ export default function List() {
|
||||
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.type}</TableCell>
|
||||
<TableCell align="left">{row.code}</TableCell>
|
||||
<TableCell align="left">{row.name}</TableCell>
|
||||
<TableCell align="left">{row.version}</TableCell>
|
||||
<TableCell align="left">{row.member.full_name}</TableCell>
|
||||
<TableCell align="left">{row.plan.code}</TableCell>
|
||||
<TableCell align="left">{row.benefit.code}</TableCell>
|
||||
<TableCell align="left">({row.diagnosis.code}) {row.diagnosis.name}</TableCell>
|
||||
<TableCell align="left">{fCurrency(row.total_claim)}</TableCell>
|
||||
|
||||
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
|
||||
<TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell>
|
||||
{/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
|
||||
</TableRow>
|
||||
{/* COLLAPSIBLE ROW */}
|
||||
<TableRow>
|
||||
@@ -246,12 +208,13 @@ export default function List() {
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell style={headStyle} align="left" />
|
||||
<TableCell style={headStyle} align="left">Type</TableCell>
|
||||
<TableCell style={headStyle} align="left">Code</TableCell>
|
||||
<TableCell style={headStyle} align="left">Name</TableCell>
|
||||
<TableCell style={headStyle} align="left">Version</TableCell>
|
||||
<TableCell style={headStyle} align="right">Status</TableCell>
|
||||
<TableCell style={headStyle} align="right">Action</TableCell>
|
||||
<TableCell style={headStyle} align="left">Member Name</TableCell>
|
||||
<TableCell style={headStyle} align="left">Plan</TableCell>
|
||||
<TableCell style={headStyle} align="left">Benefit</TableCell>
|
||||
<TableCell style={headStyle} align="left">Diagnosis</TableCell>
|
||||
<TableCell style={headStyle} align="left">Total Claim</TableCell>
|
||||
{/* <TableCell style={headStyle} align="right">Action</TableCell> */}
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
{/* ------------------ END TABLE HEADER ------------------ */}
|
||||
|
||||
Reference in New Issue
Block a user