[WIP] Claims
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { Card, Paper, TableContainer } from "@mui/material";
|
||||
import { LaravelPaginatedData } from "../../@types/paginated-data";
|
||||
import BasePagination from "../../components/BasePagination";
|
||||
import { LaravelPaginatedData } from "../@types/paginated-data";
|
||||
import BasePagination from "./BasePagination";
|
||||
|
||||
type LaravelTableProps = {
|
||||
isLoading: boolean;
|
||||
@@ -10,7 +10,7 @@ type LaravelTableProps = {
|
||||
TableContent: any;
|
||||
};
|
||||
|
||||
export default function LaravelTable(props: LaravelTableProps) {
|
||||
function LaravelTable(props: LaravelTableProps) {
|
||||
return (
|
||||
<Card>
|
||||
<TableContainer component={Paper}>
|
||||
@@ -23,4 +23,6 @@ export default function LaravelTable(props: LaravelTableProps) {
|
||||
}
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default LaravelTable
|
||||
56
frontend/dashboard/src/components/MuiDialog.tsx
Normal file
56
frontend/dashboard/src/components/MuiDialog.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton } from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { ReactElement } from 'react';
|
||||
import Iconify from './Iconify';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
maxWidth?: string;
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const MuiDialog = ({ title, openDialog, setOpenDialog, content, maxWidth }: MuiDialogProps) => {
|
||||
const handleClose = () => {
|
||||
setOpenDialog(false);
|
||||
};
|
||||
|
||||
let maxWidthDialog = 'md';
|
||||
|
||||
if (maxWidth) {
|
||||
maxWidthDialog = maxWidth;
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={openDialog} onClose={handleClose} fullWidth={true} maxWidth={maxWidthDialog}>
|
||||
<DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
{title?.icon ? (
|
||||
<Stack direction="row">
|
||||
<Iconify icon={title?.icon} width={25} height={25} sx={{ marginRight: '10px' }} />
|
||||
<Typography variant="h6">{title?.name}</Typography>
|
||||
</Stack>
|
||||
) : (
|
||||
<Typography variant="h6">{title?.name ? title?.name : ''}</Typography>
|
||||
)}
|
||||
<IconButton sx={{ color: '#FFF' }} onClick={handleClose}>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ backgroundColor: '#F9FAFB' }}>
|
||||
{content ? content : 'Testing Content Dialog'}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default MuiDialog;
|
||||
275
frontend/dashboard/src/components/dialogs/MemberSelectDialog.tsx
Normal file
275
frontend/dashboard/src/components/dialogs/MemberSelectDialog.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import {
|
||||
Typography,
|
||||
LinearProgress,
|
||||
linearProgressClasses,
|
||||
Stack,
|
||||
FormControlLabel,
|
||||
TableRow,
|
||||
TableCell,
|
||||
Table,
|
||||
TableBody,
|
||||
TextField,
|
||||
Button,
|
||||
} from '@mui/material';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
// components
|
||||
import { FormProvider, RHFTextField } from '../../components/hook-form';
|
||||
// React
|
||||
import React, { ReactElement, useEffect, useState } from 'react';
|
||||
import { fCurrency } from '../../utils/formatNumber';
|
||||
// yup
|
||||
import * as Yup from 'yup';
|
||||
// form
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import MuiDialog from '../MuiDialog';
|
||||
import { Member } from '../../@types/member';
|
||||
import { LaravelPaginatedDataDefault } from '../../@types/paginated-data';
|
||||
import DataTable from '../LaravelTable';
|
||||
import axios from '../../utils/axios';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type DataContent = {
|
||||
info: string;
|
||||
date: string;
|
||||
time: string;
|
||||
};
|
||||
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
onSelect?: Function;
|
||||
};
|
||||
|
||||
type FormValuesProps = {
|
||||
topup: string;
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const testData = {
|
||||
companyName: 'PT. Aman Mineral',
|
||||
policyNumber: 12345678,
|
||||
totalMembers: 50,
|
||||
totalCases: 100,
|
||||
totalPersen: 75,
|
||||
myLimit: '375.000.000',
|
||||
totalLimit: 500000000,
|
||||
};
|
||||
|
||||
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
height: 10,
|
||||
borderRadius: 6,
|
||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
|
||||
},
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 6,
|
||||
background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
|
||||
},
|
||||
}));
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function MemberSelectDialog({
|
||||
openDialog,
|
||||
setOpenDialog,
|
||||
onSelect
|
||||
}: MuiDialogProps) {
|
||||
const [dataTableLoading, setDataTableLoading] = useState(false)
|
||||
const [dataTableData, setDataTableData] = useState(LaravelPaginatedDataDefault)
|
||||
const [searchFilter, setSearchFilter] = useState({
|
||||
search: ''
|
||||
})
|
||||
|
||||
const handleSearchChange = (event: any) => {
|
||||
setSearchFilter({...searchFilter, ...{search: event.target.value}})
|
||||
}
|
||||
|
||||
const loadDataTableData = async (appliedFilter : any | null = null) => {
|
||||
setDataTableLoading(true);
|
||||
const filter = appliedFilter ? appliedFilter : {};
|
||||
const response = await axios.get('/members', { params: filter });
|
||||
// console.log(response.data);
|
||||
setDataTableLoading(false);
|
||||
|
||||
setDataTableData(response.data);
|
||||
}
|
||||
|
||||
const applyFilter = async (searchFilter: {search: string}) => {
|
||||
await loadDataTableData(searchFilter);
|
||||
}
|
||||
|
||||
const handleFilterSubmit = (event: any) => {
|
||||
event.preventDefault();
|
||||
applyFilter(searchFilter)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log('effect openDialog');
|
||||
if (openDialog === false) {
|
||||
}
|
||||
}, [openDialog]);
|
||||
|
||||
const handlePageChange = () => {
|
||||
console.log('handle change')
|
||||
}
|
||||
|
||||
// Called on every row to map the data to the columns
|
||||
function createData(member: Member): Member {
|
||||
return {
|
||||
...member,
|
||||
};
|
||||
}
|
||||
|
||||
const Row = (props: { row: ReturnType<typeof createData>, onSelect }) => (
|
||||
<React.Fragment>
|
||||
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
|
||||
{/* <TableCell>
|
||||
<IconButton
|
||||
aria-label="expand row"
|
||||
size="small"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
|
||||
</IconButton>
|
||||
</TableCell> */}
|
||||
{/* { columns.map((column, index) =>
|
||||
<TableCell key={ index } align={ column.align } minwidth={ column.minWidth }>{ row[column.id] ?? '-' }</TableCell>
|
||||
) } */}
|
||||
{/* TODO FIX DISPLAY DATA FROM RELATION */}
|
||||
|
||||
{/* { id: 'member_id', label: 'MemberID', minWidth: 100, align: "left" },
|
||||
{ id: 'principal_id', label: 'Mapping ID', minWidth: 100, align: "left" },
|
||||
{ id: 'nik', label: 'NIK', minWidth: 100, align: "left" },
|
||||
{ id: 'current_policy.policy_number', label: 'Policy Number', minWidth: 100, align: "left" },
|
||||
{ id: 'effective_date', label: 'Effective Date', minWidth: 100, align: "left" },
|
||||
{ id: 'name', label: 'Name', minWidth: 100, align: "left" },
|
||||
{ id: 'nric', label: 'NRIC', minWidth: 100, align: "left" },
|
||||
{ id: 'email', label: 'E-mail', minWidth: 100, align: "left" },
|
||||
{ id: 'plan_id', label: 'PlanID', minWidth: 100, align: "left" },
|
||||
{ id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'right' },
|
||||
{ id: 'activation_date', label: 'Activation Date', minWidth: 100, align: "right" },
|
||||
*/}
|
||||
<TableCell align="left">{props.row.member_id}</TableCell>
|
||||
<TableCell align="left">{props.row.principal_id}</TableCell>
|
||||
<TableCell align="left">{props.row.employeds?.[0]?.nik}</TableCell>
|
||||
<TableCell align="left">{props.row.current_policy?.policy_id}</TableCell>
|
||||
<TableCell align="left">{props.row.current_policy?.start}</TableCell>
|
||||
<TableCell align="left">{props.row.name}</TableCell>
|
||||
<TableCell align="left">{props.row.nric}</TableCell>
|
||||
<TableCell align="left">{props.row.email}</TableCell>
|
||||
<TableCell align="left">{props.row.current_plan?.code}</TableCell>
|
||||
<TableCell align="left">{props.row.current_policy?.start}</TableCell>
|
||||
<TableCell align="left">{props.row.current_policy?.end}</TableCell>
|
||||
<TableCell align="right" style={{ position: 'sticky', right: 0}}><Button variant="outlined" color="success" style={{backgroundColor: "#ffffff"}} size="small" onClick={() => {onSelect(props.row); setOpenDialog(false); }}>Select</Button></TableCell>
|
||||
</TableRow>
|
||||
{/* COLLAPSIBLE ROW */}
|
||||
{/* <TableRow>
|
||||
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
|
||||
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||
<Box sx={{ borderBottom: 1 }}>
|
||||
<Typography variant="body2" gutterBottom component="div">
|
||||
No Extra Data
|
||||
</Typography>
|
||||
</Box>
|
||||
{false && <Box sx={{ margin: 1 }} />}
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow> */}
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
const headStyle = {
|
||||
fontWeight: 'bold',
|
||||
};
|
||||
const TableContent = () => (
|
||||
<Table aria-label="collapsible table">
|
||||
{/* ------------------ TABLE HEADER ------------------ */}
|
||||
<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>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
{/* ------------------ END TABLE HEADER ------------------ */}
|
||||
|
||||
{/* ------------------ TABLE ROW ------------------ */}
|
||||
{dataTableLoading ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">
|
||||
Loading
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : dataTableData.data.length === 0 ? (
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center">
|
||||
No Data
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{dataTableData.data.map((row) => (
|
||||
<Row key={row.id} row={row} onSelect/>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
{/* ------------------ END TABLE ROW ------------------ */}
|
||||
</Table>
|
||||
);
|
||||
|
||||
const getContent = () => (
|
||||
<Stack spacing={1} marginTop={2}>
|
||||
<form onSubmit={handleFilterSubmit}>
|
||||
<TextField label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchFilter.search}/>
|
||||
</form>
|
||||
<DataTable
|
||||
isLoading={dataTableLoading}
|
||||
lastRequest={0}
|
||||
data={dataTableData}
|
||||
handlePageChange={handlePageChange}
|
||||
TableContent={<TableContent />}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
return (
|
||||
<MuiDialog
|
||||
title={{name: "Select Member"}}
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
content={getContent()}
|
||||
maxWidth="xl"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -62,9 +62,10 @@ const navConfig = [
|
||||
},
|
||||
{
|
||||
title: 'CASE MANAGEMENT',
|
||||
children: [
|
||||
{ title: 'Request', path: '/case-request' },
|
||||
],
|
||||
path: '/claims',
|
||||
// children: [
|
||||
// { title: 'Request', path: '/case-request' },
|
||||
// ],
|
||||
},
|
||||
{
|
||||
title: 'CUSTOMER SERVICES',
|
||||
|
||||
@@ -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,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 ------------------ */}
|
||||
|
||||
@@ -211,6 +211,10 @@ export default function Router() {
|
||||
path: 'claims',
|
||||
element: <Claims />,
|
||||
},
|
||||
{
|
||||
path: 'claims/create',
|
||||
element: <ClaimsCreate />
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
@@ -294,4 +298,5 @@ const CorporateServicesCreate = Loadable(lazy(() => import('../pages/Corporates/
|
||||
const CorporateHospitals = Loadable(lazy(() => import('../pages/Corporates/Hospital/Index')));
|
||||
const CorporateClaimHistories = Loadable(lazy(() => import('../pages/Corporates/ClaimHistory/Index')));
|
||||
|
||||
const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
|
||||
const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
|
||||
const ClaimsCreate = Loadable(lazy(() => import('../pages/Claims/Create')));
|
||||
Reference in New Issue
Block a user