Add Diagnosis Exclusion

This commit is contained in:
2022-08-03 11:24:09 +07:00
parent 8c78fd3d84
commit f72a641f56
27 changed files with 20708 additions and 3 deletions

View File

@@ -0,0 +1,11 @@
export type Icd = {
id: number;
type: string;
rev: string;
version?: string;
code: string;
name: string;
description?: any;
childs?: Icd[];
status: string;
};

View File

@@ -0,0 +1,17 @@
import { Pagination } from "@mui/material";
import { Box } from "@mui/system";
import { LaravelPaginatedData } from "../@types/paginated-data";
export interface Props {
paginationData?: LaravelPaginatedData;
onPageChange: any;
}
export default function BasePagination({ paginationData, onPageChange }: Props) {
return (
<Box sx={{ m: 2 }} display="flex" justifyContent="flex-end">
<Pagination count={paginationData?.last_page} page={paginationData?.current_page} variant="outlined" shape="rounded" onChange={onPageChange}/>
</Box>
)
}

View File

@@ -43,6 +43,10 @@ export default function CorporateTabNavigations({ position }: Props) {
'path' : 'members',
'label': 'Member List',
},
{
'path' : 'diagnosis-exclusions',
'label': 'Exclusion',
},
{
'path' : 'hospitals',
'label': 'Hospital',

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,45 @@
import { Card, Grid } from "@mui/material";
import { useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import Page from "../../../components/Page";
import useSettings from "../../../hooks/useSettings";
import CorporateTabNavigations from "../CorporateTabNavigations";
import List from "./List";
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const pageTitle = 'Diagnosis Exclusion';
return (
<Page title={ pageTitle }>
<HeaderBreadcrumbs
heading={ pageTitle }
links={[
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+corporate_id,
},
{
name: 'Diagnosis Exclusion',
href: '/corporates/'+corporate_id+'/diagnosis-exclusions',
},
]}
/>
<CorporateTabNavigations position={'diagnosis-exclusions'} />
<Card>
<List />
</Card>
</Page>
);
}

View File

@@ -0,0 +1,319 @@
// @mui
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, 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, { Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import { Icd } from '../../../@types/diagnosis';
export default function List() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
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(searchText); // Trigger to Parent
}
useEffect(() => { // Trigger First Search
setSearchText(searchParams.get('search') ?? '');
}, [searchParams])
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}/diagnosis-exclusions/import`, 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 => {
alert('Looks like something went wrong. Please check your data and try again. ' + response.message)
})
} else {
alert('No File Selected')
}
}
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>
);
}
// Called on every row to map the data to the columns
function createData( icd: Icd ): Icd {
return {
...icd,
}
}
// Generate the every row of the table
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.service_code}</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{Object.keys(row.rules).length ? 'With Rules' : 'All'}</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 }}>
{ Object.keys(row.rules).length ? (
<div>
<Typography variant="body" sx={{ fontWeight: 'bold' }}>
Excluded Only for :
</Typography>
{ row.rules.msc && (<Typography variant="body" component="div">
MSC : {row.rules.msc.join(', ') ?? "-"}
</Typography> )}
{ row.rules.gender && (<Typography variant="body" component="div">
Gender : {row.rules.gender.join(', ') ?? "-"}
</Typography> )}
{ (row.rules.min_age || row.rules.max_age) && (<Typography variant="body" component="div">
Age : {row.rules.min_age ?? "-"} - {row.rules.max_age ?? "-"}
</Typography> )}
{ row.rules.plan && (<Typography variant="body" component="div">
Plan : {row.rules.plan.join(', ') ?? "-"}
</Typography> )}
</div>
) : (
<Typography variant="body2" gutterBottom component="div">
Excluded for All
</Typography>
)}
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
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
});
const loadDataTableData = async (appliedFilter : any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/corporates/'+corporate_id+'/diagnosis-exclusions', { params: filter });
setDataTableLoading(false);
setDataTableData(response.data);
}
const headStyle = {
fontWeight: 'bold',
};
const applyFilter = async (searchFilter: any) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
useEffect(() => {
loadDataTableData();
}, [])
return (
<Stack>
<ImportForm />
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left" />
<TableCell style={headStyle} align="left">Service</TableCell>
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left">Rules</TableCell>
<TableCell style={headStyle} align="right">Status</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
</TableRow>
</TableBody>
{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>
)
)}
</Table>
</TableContainer>
</Card>
</Stack>
);
}

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,38 @@
import { Card, Grid } from "@mui/material";
import { useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import Page from "../../../components/Page";
import useSettings from "../../../hooks/useSettings";
import List from "./List";
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const pageTitle = 'Benefit';
return (
<Page title={ pageTitle }>
<HeaderBreadcrumbs
heading={ pageTitle }
links={[
{
name: 'Master',
href: '/master',
},
{
name: 'Diagnosis',
href: '/master/diagnosis',
},
]}
/>
<Card>
<List />
</Card>
</Page>
);
}

View File

@@ -0,0 +1,310 @@
// @mui
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } 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, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { useParams, useSearchParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import { Icd } from '../../../@types/diagnosis';
import BasePagination from '../../../components/BasePagination';
export default function List() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
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(searchText); // Trigger to Parent
}
useEffect(() => { // Trigger First Search
setSearchText(searchParams.get('search') ?? '');
}, [searchParams])
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 => {
alert('Looks like something went wrong. Please check your data and try again. ' + response.message)
})
} else {
alert('No File Selected')
}
}
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>
);
}
// Called on every row to map the data to the columns
function createData( icd: Icd ): Icd {
return {
...icd,
}
}
// Generate the every row of the table
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>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
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
});
const [dataTablePage, setDataTablePage] = useState(5);
const loadDataTableData = async (appliedFilter : any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/master/diagnosis', { params: filter });
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
const headStyle = {
fontWeight: 'bold',
};
const applyFilter = async (searchFilter: any) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
useEffect(() => {
loadDataTableData();
}, [])
return (
<Stack>
<ImportForm />
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<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>
{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>
)
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
</Stack>
);
}

View File

@@ -95,6 +95,7 @@ export default function Router() {
path: 'corporates/:corporate_id/edit',
element: <CorporateCreate />,
},
{
path: 'corporates/:corporate_id/divisions',
element: <CorporateDivisions />,
@@ -107,10 +108,12 @@ export default function Router() {
path: 'corporates/:corporate_id/divisions/:id/edit',
element: <CorporateDivisionsCreate />,
},
{
path: 'corporates/:corporate_id/members',
element: <CorporateMembers />,
},
{
path: 'corporates/:corporate_id/plans/create',
element: <PlanCreate />,
@@ -119,6 +122,7 @@ export default function Router() {
path: 'corporates/:corporate_id/plans',
element: <Plans />,
},
{
path: 'corporates/:corporate_id/corporate-plans/create',
element: <CorporatePlanCreate />,
@@ -131,6 +135,7 @@ export default function Router() {
path: 'corporates/:corporate_id/corporate-plans',
element: <CorporatePlans />,
},
{
path: 'corporates/:corporate_id/benefits/create',
element: <BenefitCreate />,
@@ -139,6 +144,7 @@ export default function Router() {
path: 'corporates/:corporate_id/benefits',
element: <Benefits />,
},
{
path: 'corporates/:corporate_id/corporate-benefits/create',
element: <CorporateBenefitsCreate />,
@@ -151,6 +157,16 @@ export default function Router() {
path: 'corporates/:corporate_id/corporate-benefits/:id/edit',
element: <CorporateBenefitsCreate />,
},
{
path: 'corporates/:corporate_id/diagnosis-exclusions',
element: <DiagnosisExclusions />,
},
{
path: 'master/diagnosis',
element: <MasterDiagnosis />,
},
]
},
// {
@@ -216,3 +232,7 @@ const CorporatePlans = Loadable(lazy(() => import('../pages/Corporates/Corporate
const PlanCreate = Loadable(lazy(() => import('../pages/Corporates/Plan/Create')));
const Plans = Loadable(lazy(() => import('../pages/Corporates/Plan/Index')));
const DiagnosisExclusions = Loadable(lazy(() => import('../pages/Corporates/DiagnosisExclusion/Index')));
const MasterDiagnosis = Loadable(lazy(() => import('../pages/Master/Diagnosis/Index')));