Fix Member Plan

This commit is contained in:
R
2022-11-23 11:39:17 +07:00
parent c3d953322d
commit f7d8759a76
10 changed files with 707 additions and 28 deletions

View File

@@ -12,3 +12,18 @@ export type LaravelPaginatedData = {
to?: number;
total: number;
}
export const LaravelPaginatedDataDefault = {
current_page: 1,
data: [],
path: "",
first_page_url: "",
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
per_page: 10,
from: 0,
to: 0,
total: 0
}

View File

@@ -0,0 +1,241 @@
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';
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const NewDivisionSchema = 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'),
});
const defaultValues = useMemo(
() => ({
code: '',
}),
[]
);
const methods = useForm({
resolver: yupResolver(NewDivisionSchema),
defaultValues,
});
const {
reset,
watch,
control,
setValue,
getValues,
setError,
handleSubmit,
formState: { isSubmitting },
} = methods;
const onSubmit = async (data: any) => {
console.log(data);
};
const [open, setOpen] = 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 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',
},
];
return (
<Page title="Create Benefit">
<HeaderBreadcrumbs
heading={'Create Benefit'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+id,
},
{
name: 'Benefits',
href: '/corporates/'+id+'/benefits',
},
{
name: 'Create',
href: '/corporates/'+id+'/benefits/create',
},
]}
/>
<Grid container spacing={2}>
<Grid item xs={12}>
<Card sx={{ p: 2 }}>
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Typography variant="h6">Benefit Detail</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>
</Stack>
</FormProvider>
</Card>
</Grid>
</Grid>
</Page>
);
}

View File

@@ -0,0 +1,29 @@
import { Card, Stack } from "@mui/material";
import HeaderBreadcrumbs from "../../components/HeaderBreadcrumbs";
import Page from "../../components/Page";
import List from "./List";
export default function Claims() {
const pageTitle = 'Claim';
return (
<Page title={ pageTitle } sx={{ mx: 2}}>
<HeaderBreadcrumbs
heading={ pageTitle }
links={[
{
name: 'Claim',
href: '/claims',
},
]}
/>
<Stack>
<List />
</Stack>
</Page>
);
}

View File

@@ -0,0 +1,26 @@
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>
)
}

View File

@@ -0,0 +1,303 @@
// @mui
import { Box, Button, Card, Collapse, IconButton, MenuItem, Table, TableBody, TableCell, TableRow, TextField, Typography, Stack, Menu, ButtonGroup } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import AddIcon from '@mui/icons-material/Add';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
// hooks
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
// components
import axios from '../../utils/axios';
import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
import DataTable from './LaravelTable';
export default function List() {
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState(null);
function SearchInput(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState("");
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? ''
setSearchText(newSearchText);
}
const handleSearchSubmit = (event: any) => {
event.preventDefault();
props.onSearch({search: searchText }); // Trigger to Parent
}
useEffect(() => { // Trigger First Search
setSearchText(searchParams.get('search') ?? '');
}, [])
return (
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
</form>
);
}
function ImportForm(props: any) {
// IMPORT
// Create Button Menu
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const createMenu = Boolean(anchorEl);
const importForm = useRef<HTMLInputElement>(null)
const [currentImportFileName, setCurrentImportFileName] = useState(null)
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleImportButton = () => {
if (importForm?.current) {
handleClose();
importForm.current ? importForm.current.click() : console.log('No File selected');
} else {
alert('No file selected')
}
}
const handleCancelImportButton = () => {
importForm.current.value = "";
importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
}
const handleImportChange = (event: any) => {
if (event.target.files[0]) {
setCurrentImportFileName(event.target.files[0].name)
} else {
setCurrentImportFileName(null);
}
}
const handleUpload = () => {
if (importForm.current?.files.length) {
const formData = new FormData();
formData.append("file", importForm.current?.files[0])
axios.post(`corporates/${corporate_id}/import-plan-benefit`, formData )
.then(response => {
handleCancelImportButton();
loadDataTableData();
setImportResult(response.data)
// alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
})
.catch(response => {
enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
})
} else {
enqueueSnackbar('No File Selected', { variant: 'warning' })
}
}
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 }}>
<SearchInput onSearch={applyFilter}/>
{/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
<Button
id="import-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
</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>
</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>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>(LaravelPaginatedDataDefault);
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 });
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
const applyFilter = async (searchFilter: {search: string}) => {
await loadDataTableData(searchFilter);
setSearchParams(searchFilter);
}
const handlePageChange = (event : ChangeEvent, value: number) : void => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
useEffect(() => {
loadDataTableData();
}, [])
const headStyle = {
fontWeight: 'bold',
};
// Called on every row to map the data to the columns
function createData( data: Icd ): Icd {
return {
...data,
}
}
{/* ------------------ TABLE ROW ------------------ */}
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{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="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
<TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ borderBottom: 1 }}>
<Typography variant="body2" gutterBottom component="div">
Description : {row.description}
</Typography>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
{/* ------------------ END TABLE ROW ------------------ */}
function TableContent() {
return (
<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 ------------------ */}
{dataTableIsLoading ?
(
<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} />
))}
</TableBody>
)
)}
{/* ------------------ END TABLE ROW ------------------ */}
</Table>
)
}
return (
<Card>
<ImportForm />
<DataTable
isLoading={dataTableIsLoading}
lastRequest={0}
data={dataTableData}
handlePageChange={handlePageChange}
TableContent={<TableContent />}
/>
</Card>
);
}

View File

@@ -268,7 +268,7 @@ export default function CorporatePlanList() {
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{row.nric}</TableCell>
<TableCell align="left">{row.email}</TableCell>
<TableCell align="left">{row.plan_id}</TableCell>
<TableCell align="left">{row.current_plan?.code}</TableCell>
<TableCell align="left">{row.current_policy?.start}</TableCell>
<TableCell align="left">{row.current_policy?.end}</TableCell>
{( row.active ? (<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>)

View File

@@ -205,6 +205,12 @@ export default function Router() {
path: 'master/formularium/create',
element: <MasterFormulariumCreate />,
},
{
path: 'claims',
element: <Claims />,
},
]
},
// {
@@ -287,3 +293,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')));