tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into pajri

Browse Source
This commit is contained in:
pajri
2022-12-23 14:12:44 +07:00
parent 2321e708c5 9fe12b5948
commit 3c49b98721
22 changed files with 957 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/dashboard/.eslintrc
View File

@@ -31,6 +31,7 @@
"import/no-useless-path-segments": 1,
"import/no-extraneous-dependencies": 0,
"@typescript-eslint/naming-convention": 0,
"import/extensions": "never",
"object-curly-spacing": [
1,
"always"

49
frontend/dashboard/src/contexts/ConfiguredCorporateContext.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { Corporate } from '@/@types/corporates';
import axios from '@/utils/axios';
import { ReactNode, createContext, useState, useEffect } from 'react';
import { useParams } from 'react-router';
// hooks
import useResponsive from '../hooks/useResponsive';
// ----------------------------------------------------------------------
export type ConfiguredCorporateContextProps = {
currentCorporate?: Corporate | null;
};
const initialState: ConfiguredCorporateContextProps = {
currentCorporate: null,
};
const ConfiguredCorporateContext = createContext(initialState);
type ConfiguredCorporateProviderProps = {
children: ReactNode;
};
function ConfiguredCorporateProvider({ children }: ConfiguredCorporateProviderProps) {
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState(null);
useEffect(() => {
// Load Corporate
console.log('calling corporate' + corporate_id);
axios.get(`corporates/${corporate_id}`)
.then((res) => {
setCorporate(res.data)
})
}, []);
return (
<ConfiguredCorporateContext.Provider
value={{
currentCorporate: corporate,
}}
>
{children}
</ConfiguredCorporateContext.Provider>
);
}
export { ConfiguredCorporateProvider, ConfiguredCorporateContext };

9
frontend/dashboard/src/layouts/dashboard/index.tsx
View File

@@ -90,6 +90,15 @@ export default function DashboardLayout() {
sx={{
display: { lg: 'flex' },
minHeight: { lg: 1 },
pl: {
xs: 2,
lg: 0
},
pr: {
xs: 2,
lg: 0
},
}}
>
<DashboardHeader isCollapse={isCollapse} onOpenSidebar={() => setOpen(true)} />

37
frontend/dashboard/src/pages/Corporates/Benefit/Index.tsx
View File

@@ -1,36 +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 DivisionsList from "./List";
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 DivisionsList from './List';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext]);
const pageTitle = 'Benefit';
return (
<Page title={ pageTitle }>
<Page title={pageTitle}>
<HeaderBreadcrumbs
heading={ pageTitle }
heading={pageTitle}
links={[
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+corporate_id,
name: corporate?.name ?? '-',
href: '/corporates/' + corporate_id,
},
{
name: 'Benefit',
href: '/corporates/'+corporate_id+'/benefits',
href: '/corporates/' + corporate_id + '/benefits',
},
]}
/>

32
frontend/dashboard/src/pages/Corporates/ClaimHistory/Index.tsx
View File

@@ -1,21 +1,29 @@
import { Card, Grid, Typography } 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 DivisionsList from "./List";
import { Card, Grid, Typography } 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 DivisionsList from './List';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext]);
return (
<Page title="Claim History">
<HeaderBreadcrumbs
heading={'Claim History'}
links={[
@@ -24,12 +32,12 @@ export default function Divisions() {
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+corporate_id,
name: corporate?.name ?? '-',
href: '/corporates/' + corporate_id,
},
{
name: 'Claim History',
href: '/corporates/'+corporate_id+'/claim-histories',
href: '/corporates/' + corporate_id + '/claim-histories',
},
]}
/>

19
frontend/dashboard/src/pages/Corporates/ConfigLayout.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { Outlet } from 'react-router-dom';
// @mui
import { Stack } from '@mui/material';
import { ConfiguredCorporateProvider } from '@/contexts/ConfiguredCorporateContext';
export default function ConfigLayout() {
return (
<Stack
sx={{
display: { lg: 'flex' },
minHeight: { lg: 1 },
}}
>
<ConfiguredCorporateProvider>
<Outlet />
</ConfiguredCorporateProvider>
</Stack>
);
}

40
frontend/dashboard/src/pages/Corporates/CorporatePlan/Index.tsx
View File

@@ -1,21 +1,28 @@
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 DivisionsList from "./List";
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 DivisionsList from './List';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext]);
return (
<Page title="Corporate Plan">
<HeaderBreadcrumbs
heading={'Corporate Plan'}
links={[
@@ -24,12 +31,12 @@ export default function Divisions() {
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+corporate_id,
name: corporate?.name ?? '-',
href: '/corporates/' + corporate_id,
},
{
name: 'Corporate Plan',
href: '/corporates/'+corporate_id+'/corporate-plans',
href: '/corporates/' + corporate_id + '/corporate-plans',
},
]}
/>
@@ -42,10 +49,7 @@ export default function Divisions() {
</Card>
</Grid>
<Grid item xs={4}>
<Card sx={{ p: 2 }}>
Corporate Detail Goes Here
&nbsp;
</Card>
<Card sx={{ p: 2 }}>Corporate Detail Goes Here &nbsp;</Card>
</Grid>
</Grid>
</Page>

2
frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx
View File

@@ -89,7 +89,7 @@ export default function CorporateTabNavigations({ position }: Props) {
<Tab
key={index}
onClick={() => {
navigate('/corporates/' + corporate_id + '/' + mainTabItems[index].path);
navigate('/corporate/' + corporate_id + '/' + mainTabItems[index].path);
}}
label={tabItem.label}
/>

38
frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/Index.tsx
View File

@@ -1,40 +1,48 @@
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";
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';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext]);
const pageTitle = 'Diagnosis Exclusion';
return (
<Page title={ pageTitle }>
<Page title={pageTitle}>
<HeaderBreadcrumbs
heading={ pageTitle }
heading={pageTitle}
links={[
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+corporate_id,
name: corporate?.name ?? '-',
href: '/corporates/' + corporate_id,
},
{
name: 'Diagnosis Exclusion',
href: '/corporates/'+corporate_id+'/diagnosis-exclusions',
href: '/corporates/' + corporate_id + '/diagnosis-exclusions',
},
]}
/>
<Card>
<CorporateTabNavigations position={'diagnosis-exclusions'} />
<List />

13
frontend/dashboard/src/pages/Corporates/Division/Index.tsx
View File

@@ -1,4 +1,7 @@
import { Corporate } from "@/@types/corporates";
import { ConfiguredCorporateContext } from "@/contexts/ConfiguredCorporateContext";
import { Card, Grid } from "@mui/material";
import { useContext, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import Page from "../../../components/Page";
@@ -12,6 +15,14 @@ export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate|null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext])
return (
<Page title="Division">
@@ -24,7 +35,7 @@ export default function Divisions() {
href: '/corporates',
},
{
name: 'Corporate Name',
name: corporate?.name ?? '-',
href: '/corporates/'+corporate_id,
},
{

253
frontend/dashboard/src/pages/Corporates/Division/List.tsx
View File

@@ -1,5 +1,32 @@
// @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 {
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';
@@ -20,39 +47,47 @@ export default function PlanList() {
const { corporate_id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const navigate = useNavigate();
function SearchInput(props: any) {
// SEARCH
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState("");
const [searchText, setSearchText] = useState('');
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? ''
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
}
};
const handleSubmit = (event: any) => {
event.preventDefault();
props.onSearch(searchText); // Trigger to Parent
}
};
useEffect(() => {
useEffect(() => {
// console.log('Search Input: useEffect')
setSearchText(searchParams.get('search') ?? '');
}, [searchParams])
}, [searchParams]);
return (
<form onSubmit={handleSubmit} style={{ width: '100%' }}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
<TextField
id="search-input"
ref={searchInput}
label="Search"
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
/>
</form>
);
}
// Called on every row to map the data to the columns
function createData( plan: CorporatePlan ): CorporatePlan {
function createData(plan: CorporatePlan): CorporatePlan {
return {
...plan,
}
};
}
// Generate the every row of the table
@@ -64,11 +99,7 @@ export default function PlanList() {
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
@@ -76,8 +107,18 @@ export default function PlanList() {
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{row.description}</TableCell>
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
<TableCell align="right"><Link to={`/corporates/${row.corporate_id}/divisions/${row.id}/edit`}><Button variant="outlined" color="success" size="small">Edit</Button></Link></TableCell>
<TableCell align="right">
<Button variant="outlined" color="success" size="small">
Active
</Button>
</TableCell>
<TableCell align="right">
<Link to={`/corporate/${row.corporate_id}/divisions/${row.id}/edit`}>
<Button variant="outlined" color="success" size="small">
Edit
</Button>
</Link>
</TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
@@ -88,37 +129,41 @@ export default function PlanList() {
No Extra Data
</Typography>
</Box>
{false && <Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
Rules
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Customer</TableCell>
<TableCell align="right">Amount</TableCell>
<TableCell align="right">Total price ($)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{/* {row.history ? row.history.map((historyRow) => ( */}
{false && (
<Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
Rules
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Customer</TableCell>
<TableCell align="right">Amount</TableCell>
<TableCell align="right">Total price ($)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{/* {row.history ? row.history.map((historyRow) => ( */}
<TableRow key={row.id}>
<TableCell component="th" scope="row">{row.start} - {row.end}</TableCell>
<TableCell component="th" scope="row">
{row.start} - {row.end}
</TableCell>
<TableCell>{row.start}</TableCell>
<TableCell align="right">{row.start}</TableCell>
<TableCell align="right">{row.start}</TableCell>
</TableRow>
{/* ))
{/* ))
: (
<TableRow>
<TableCell colSpan={8}>No Data</TableCell>
</TableRow>
)
} */}
</TableBody>
</Table>
</Box>}
</TableBody>
</Table>
</Box>
)}
</Collapse>
</TableCell>
</TableRow>
@@ -131,104 +176,114 @@ export default function PlanList() {
const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: "",
first_page_url: "",
path: '',
first_page_url: '',
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
last_page_url: '',
next_page_url: '',
prev_page_url: '',
per_page: 10,
from: 0,
to: 0,
total: 0
total: 0,
});
const loadDataTableData = async (appliedFilter : any | null = null) => {
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+'/divisions', { params: filter });
const response = await axios.get('/corporates/' + corporate_id + '/divisions', {
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 });
}
await loadDataTableData({ search: searchFilter });
setSearchParams({ search: searchFilter });
};
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
const handlePageChange = (event: ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
};
useEffect(() => {
loadDataTableData();
}, [])
}, []);
return (
<Stack>
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<SearchInput onSearch={applyFilter}/>
<Link to={`/corporates/${corporate_id}/divisions/create`}>
<Button
component="button"
id="upload-button"
variant='outlined'
startIcon={<AddIcon />} sx={{ p: 1.8 }}
>
Create
</Button>
</Link>
</Stack>
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<SearchInput onSearch={applyFilter} />
<Link to={`/corporate/${corporate_id}/divisions/create`}>
<Button
component="button"
id="upload-button"
variant="outlined"
startIcon={<AddIcon />}
sx={{ p: 1.8 }}
>
Create
</Button>
</Link>
</Stack>
<Card>
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left" />
<TableCell style={headStyle} align="left">ID</TableCell>
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left">Description</TableCell>
<TableCell style={headStyle} align="left">
ID
</TableCell>
<TableCell style={headStyle} align="left">
Code
</TableCell>
<TableCell style={headStyle} align="left">
Name
</TableCell>
<TableCell style={headStyle} align="left">
Description
</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.code} row={row} />
))}
</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.code} row={row} />
))}
</TableBody>
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Stack>
);
}

33
frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx
View File

@@ -1,21 +1,30 @@
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";
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';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
export default function CorporateFormularium() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext]);
return (
<Page title="Formularium">
<HeaderBreadcrumbs
heading={'Formularium'}
links={[
@@ -24,12 +33,12 @@ export default function CorporateFormularium() {
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+corporate_id,
name: corporate?.name ?? '-',
href: '/corporates/' + corporate_id,
},
{
name: 'Formularium',
href: '/corporates/'+corporate_id+'/formularium',
href: '/corporates/' + corporate_id + '/formularium',
},
]}
/>

35
frontend/dashboard/src/pages/Corporates/Hospital/Index.tsx
View File

@@ -1,21 +1,30 @@
import { Card, Grid, Typography } 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 DivisionsList from "./List";
import { Card, Grid, Typography } 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 DivisionsList from './List';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext]);
return (
<Page title="Hospitals">
<HeaderBreadcrumbs
heading={'Hospitals'}
links={[
@@ -24,19 +33,19 @@ export default function Divisions() {
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+corporate_id,
name: corporate?.name ?? '-',
href: '/corporates/' + corporate_id,
},
{
name: 'Hospitals',
href: '/corporates/'+corporate_id+'/hospitals',
href: '/corporates/' + corporate_id + '/hospitals',
},
]}
/>
<Card>
<CorporateTabNavigations position={'hospitals'} />
<Typography sx={{ m:4 }}>Feature Not Implemented Yet</Typography>
<Typography sx={{ m: 4 }}>Feature Not Implemented Yet</Typography>
</Card>
</Page>
);

2
frontend/dashboard/src/pages/Corporates/Index.tsx
View File

@@ -333,7 +333,7 @@ export default function Corporates() {
Edit
</Button>
</Link>
<Link to={'/corporates/' + row.id + ''}>
<Link to={'/corporate/' + row.id + ''}>
<Button variant="outlined" color="primary" size="small">
Config
</Button>

32
frontend/dashboard/src/pages/Corporates/Member/Index.tsx
View File

@@ -1,21 +1,29 @@
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 DivisionsList from "./List";
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 DivisionsList from './List';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext]);
return (
<Page title="Corporate Plan">
<HeaderBreadcrumbs
heading={'Corporate Plan'}
links={[
@@ -24,12 +32,12 @@ export default function Divisions() {
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+corporate_id,
name: corporate?.name ?? '-',
href: '/corporates/' + corporate_id,
},
{
name: 'Member',
href: '/corporates/'+corporate_id+'/members',
href: '/corporates/' + corporate_id + '/members',
},
]}
/>

36
frontend/dashboard/src/pages/Corporates/Plan/Index.tsx
View File

@@ -1,21 +1,28 @@
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 DivisionsList from "./List";
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 DivisionsList from './List';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext]);
return (
<Page title="Corporate Plan">
<HeaderBreadcrumbs
heading={'Corporate Plan'}
links={[
@@ -24,12 +31,12 @@ export default function Divisions() {
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+corporate_id,
name: corporate?.name ?? '-',
href: '/corporates/' + corporate_id,
},
{
name: 'Plan',
href: '/corporates/'+corporate_id+'/plans',
href: '/corporates/' + corporate_id + '/plans',
},
]}
/>
@@ -38,7 +45,6 @@ export default function Divisions() {
<CorporateTabNavigations position={'plans'} />
<DivisionsList />
</Card>
</Page>
);
}

13
frontend/dashboard/src/pages/Corporates/Services/Index.tsx
View File

@@ -5,12 +5,23 @@ import Page from '../../../components/Page';
import useSettings from '../../../hooks/useSettings';
import CorporateTabNavigations from '../CorporateTabNavigations';
import List from './List';
import { useContext, useEffect, useState } from 'react';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
import { Corporate } from '@/@types/corporates';
export default function Divisions() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate | null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext]);
const pageTitle = 'Services';
return (
<Page title={pageTitle}>
@@ -22,7 +33,7 @@ export default function Divisions() {
href: '/corporates',
},
{
name: 'Corporate Name',
name: corporate?.name ?? '-',
href: '/corporates/' + corporate_id,
},
{

642
frontend/dashboard/src/pages/Corporates/Services/List.tsx
View File

@@ -1,6 +1,35 @@
import * as Yup from 'yup';
// @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, Checkbox, FormControlLabel } from '@mui/material';
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,
Checkbox,
FormControlLabel,
} from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import AddIcon from '@mui/icons-material/Add';
@@ -27,7 +56,6 @@ export default function List() {
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState(null);
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = useState(true);
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
@@ -35,41 +63,49 @@ export default function List() {
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: "",
first_page_url: "",
path: '',
first_page_url: '',
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
last_page_url: '',
next_page_url: '',
prev_page_url: '',
per_page: 10,
from: 0,
to: 0,
total: 0
total: 0,
});
function SearchInput(props: any) {
// SEARCH
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState("");
const [searchText, setSearchText] = useState('');
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? ''
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
}
};
const handleSearchSubmit = (event: any) => {
event.preventDefault();
props.onSearch(searchText); // Trigger to Parent
}
};
useEffect(() => { // Trigger First Search
useEffect(() => {
// Trigger First Search
setSearchText(searchParams.get('search') ?? '');
}, [searchParams])
}, [searchParams]);
return (
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
<TextField
id="search-input"
ref={searchInput}
label="Search"
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
/>
</form>
);
}
@@ -83,17 +119,17 @@ export default function List() {
};
return (
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<SearchInput onSearch={applyFilter}/>
</Stack>
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<SearchInput onSearch={applyFilter} />
</Stack>
);
}
// Called on every row to map the data to the columns
function createData( corporateService: CorporateService ): CorporateService {
function createData(corporateService: CorporateService): CorporateService {
return {
...corporateService,
}
};
}
// Generate the every row of the table
@@ -102,32 +138,34 @@ export default function List() {
const [open, setOpen] = React.useState(false);
const handleConfigChange = (event: ChangeEvent<HTMLInputElement>, service: any) => {
console.log( event.target.name ,event.target.checked, service);
console.log(event.target.name, event.target.checked, service);
axios.put(`/corporates/${corporate_id}/services`, {
axios.put(`/corporates/${corporate_id}/services`, {
service_code: service.service_code,
config_name: event.target.name,
config_value: event.target.checked
})
}
config_value: event.target.checked,
});
};
const handleActivate = (service: any, status: string) => {
axios.put(`/corporates/${corporate_id}/services/${service.service_code}`, {
service_code: service.service_code,
status
}).then((res) => {
setDataTableData({
...dataTableData,
data: dataTableData.data.map((service) => {
let updatedService = service
if (row.id == service.id) {
updatedService.status = res.data.status
}
return updatedService
})
axios
.put(`/corporates/${corporate_id}/services/${service.service_code}`, {
service_code: service.service_code,
status,
})
})
}
.then((res) => {
setDataTableData({
...dataTableData,
data: dataTableData.data.map((service) => {
let updatedService = service;
if (row.id == service.id) {
updatedService.status = res.data.status;
}
return updatedService;
}),
});
});
};
return (
<React.Fragment>
@@ -145,139 +183,325 @@ export default function List() {
<TableCell align="left">{row.name}</TableCell>
<TableCell align="right">
{( row.status == 'active' && <Button variant="outlined" color="success" size="small" onClick={() => { handleActivate(row, 'inactive') }}>Active</Button> )}
{( row.status == 'inactive' && <Button variant="outlined" color="error" size="small" onClick={() => { handleActivate(row, 'active') }}>Inactive</Button> )}
{row.status == 'active' && (
<Button
variant="outlined"
color="success"
size="small"
onClick={() => {
handleActivate(row, 'inactive');
}}
>
Active
</Button>
)}
{row.status == 'inactive' && (
<Button
variant="outlined"
color="error"
size="small"
onClick={() => {
handleActivate(row, 'active');
}}
>
Inactive
</Button>
)}
</TableCell>
<TableCell align="right">
<Link to={`/corporates/${corporate_id}/services/${row.service_code}`}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
</TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
{false && <TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ borderBottom: 1 }}>
<Stack>
<TableContainer>
<Table sx={{ minWidth: 650 }} size="small">
<TableHead>
<TableRow>
<TableCell colSpan={4} sx={{ py: 1 }}>General Practitioner</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell colSpan={2}>External Doctor</TableCell>
<TableCell colSpan={2}>Internal Doctor</TableCell>
</TableRow>
<TableRow>
<TableCell>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.gp_external_doctor_online == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="gp_external_doctor_online" />} label="Online" />
</TableCell>
<TableCell>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.gp_external_doctor_offline == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="gp_external_doctor_offline" />} label="Offline" />
</TableCell>
<TableCell>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.gp_internal_doctor_online == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="gp_internal_doctor_online" />} label="Online" />
</TableCell>
<TableCell>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.gp_internal_doctor_offline == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="gp_internal_doctor_offline" />} label="Offline" />
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<TableContainer>
<Table sx={{ minWidth: 650 }} size="small">
<TableHead>
<TableRow>
<TableCell colSpan={4} sx={{ py: 1 }}>Specialist Practitioner</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell colSpan={2}>External Doctor</TableCell>
<TableCell colSpan={2}>Internal Doctor</TableCell>
</TableRow>
<TableRow>
<TableCell>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.sp_external_doctor_online == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="sp_external_doctor_online" />} label="Online" />
</TableCell>
<TableCell>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.sp_external_doctor_offline == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="sp_external_doctor_offline" />} label="Offline" />
</TableCell>
<TableCell>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.sp_internal_doctor_online == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="sp_internal_doctor_online" />} label="Online" />
</TableCell>
<TableCell>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.sp_internal_doctor_offline == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="sp_internal_doctor_offline" />} label="Offline" />
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<TableContainer>
<Table sx={{ minWidth: 650 }} size="small">
<TableHead>
<TableRow>
<TableCell colSpan={4} sx={{ py: 1 }}>Medicine</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell width={'25%'}>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.vitamins == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="vitamins" />} label="Vitamins" />
</TableCell>
<TableCell width={'25%'}>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.delivery_fee == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="delivery_fee" />} label="Delivery Fee" />
</TableCell>
<TableCell width={'25%'}/>
<TableCell width={'25%'}/>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<TableContainer>
<Table sx={{ minWidth: 650 }} size="small">
<TableHead>
<TableRow>
<TableCell colSpan={4} sx={{ py: 1 }}>Free Admin Fee</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell width={'25%'}>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.general_practitioner_fee == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="general_practitioner_fee" />} label="General Practitioner" />
</TableCell>
<TableCell width={'25%'}>
<FormControlLabel control={<Checkbox defaultChecked={row.configurations.specialist_practitioner_fee == '1'} onChange={(event) => {handleConfigChange(event, row)}} name="specialist_practitioner_fee" />} label="Specialist Practitioner" />
</TableCell>
<TableCell width={'25%'}/>
<TableCell width={'25%'}/>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Stack>
</Box>
</Collapse>
<Link to={`/corporate/${corporate_id}/services/${row.service_code}`}>
<Button variant="outlined" color="primary" size="small">
Config
</Button>
</Link>
</TableCell>
</TableRow>
}
{/* COLLAPSIBLE ROW */}
{false && (
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ borderBottom: 1 }}>
<Stack>
<TableContainer>
<Table sx={{ minWidth: 650 }} size="small">
<TableHead>
<TableRow>
<TableCell colSpan={4} sx={{ py: 1 }}>
General Practitioner
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell colSpan={2}>External Doctor</TableCell>
<TableCell colSpan={2}>Internal Doctor</TableCell>
</TableRow>
<TableRow>
<TableCell>
<FormControlLabel
control={
<Checkbox
defaultChecked={
row.configurations.gp_external_doctor_online == '1'
}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="gp_external_doctor_online"
/>
}
label="Online"
/>
</TableCell>
<TableCell>
<FormControlLabel
control={
<Checkbox
defaultChecked={
row.configurations.gp_external_doctor_offline == '1'
}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="gp_external_doctor_offline"
/>
}
label="Offline"
/>
</TableCell>
<TableCell>
<FormControlLabel
control={
<Checkbox
defaultChecked={
row.configurations.gp_internal_doctor_online == '1'
}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="gp_internal_doctor_online"
/>
}
label="Online"
/>
</TableCell>
<TableCell>
<FormControlLabel
control={
<Checkbox
defaultChecked={
row.configurations.gp_internal_doctor_offline == '1'
}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="gp_internal_doctor_offline"
/>
}
label="Offline"
/>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<TableContainer>
<Table sx={{ minWidth: 650 }} size="small">
<TableHead>
<TableRow>
<TableCell colSpan={4} sx={{ py: 1 }}>
Specialist Practitioner
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell colSpan={2}>External Doctor</TableCell>
<TableCell colSpan={2}>Internal Doctor</TableCell>
</TableRow>
<TableRow>
<TableCell>
<FormControlLabel
control={
<Checkbox
defaultChecked={
row.configurations.sp_external_doctor_online == '1'
}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="sp_external_doctor_online"
/>
}
label="Online"
/>
</TableCell>
<TableCell>
<FormControlLabel
control={
<Checkbox
defaultChecked={
row.configurations.sp_external_doctor_offline == '1'
}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="sp_external_doctor_offline"
/>
}
label="Offline"
/>
</TableCell>
<TableCell>
<FormControlLabel
control={
<Checkbox
defaultChecked={
row.configurations.sp_internal_doctor_online == '1'
}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="sp_internal_doctor_online"
/>
}
label="Online"
/>
</TableCell>
<TableCell>
<FormControlLabel
control={
<Checkbox
defaultChecked={
row.configurations.sp_internal_doctor_offline == '1'
}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="sp_internal_doctor_offline"
/>
}
label="Offline"
/>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<TableContainer>
<Table sx={{ minWidth: 650 }} size="small">
<TableHead>
<TableRow>
<TableCell colSpan={4} sx={{ py: 1 }}>
Medicine
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell width={'25%'}>
<FormControlLabel
control={
<Checkbox
defaultChecked={row.configurations.vitamins == '1'}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="vitamins"
/>
}
label="Vitamins"
/>
</TableCell>
<TableCell width={'25%'}>
<FormControlLabel
control={
<Checkbox
defaultChecked={row.configurations.delivery_fee == '1'}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="delivery_fee"
/>
}
label="Delivery Fee"
/>
</TableCell>
<TableCell width={'25%'} />
<TableCell width={'25%'} />
</TableRow>
</TableBody>
</Table>
</TableContainer>
<TableContainer>
<Table sx={{ minWidth: 650 }} size="small">
<TableHead>
<TableRow>
<TableCell colSpan={4} sx={{ py: 1 }}>
Free Admin Fee
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell width={'25%'}>
<FormControlLabel
control={
<Checkbox
defaultChecked={
row.configurations.general_practitioner_fee == '1'
}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="general_practitioner_fee"
/>
}
label="General Practitioner"
/>
</TableCell>
<TableCell width={'25%'}>
<FormControlLabel
control={
<Checkbox
defaultChecked={
row.configurations.specialist_practitioner_fee == '1'
}
onChange={(event) => {
handleConfigChange(event, row);
}}
name="specialist_practitioner_fee"
/>
}
label="Specialist Practitioner"
/>
</TableCell>
<TableCell width={'25%'} />
<TableCell width={'25%'} />
</TableRow>
</TableBody>
</Table>
</TableContainer>
</Stack>
</Box>
</Collapse>
</TableCell>
</TableRow>
)}
</React.Fragment>
);
}
const loadDataTableData = async (appliedFilter : any | null = null) => {
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+'/services', { params: filter });
const response = await axios.get('/corporates/' + corporate_id + '/services', {
params: filter,
});
setDataTableLoading(false);
// const service = [
@@ -420,73 +644,81 @@ export default function List() {
// x.data = service;
setDataTableData(response.data);
}
};
const headStyle = {
fontWeight: 'bold',
};
const applyFilter = async (searchFilter: any) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
await loadDataTableData({ search: searchFilter });
setSearchParams({ search: searchFilter });
};
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
const handlePageChange = (event: ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
};
useEffect(() => {
loadDataTableData();
}, [])
}, []);
return (
<Stack>
<SearchForm />
<Card>
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
{/* <TableCell style={headStyle} align="left" width={10}/> */}
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Service</TableCell>
<TableCell style={headStyle} align="left">
Code
</TableCell>
<TableCell style={headStyle} align="left">
Service
</TableCell>
<TableCell style={headStyle} align="right" width={30}>Status</TableCell>
<TableCell style={headStyle} align="right" width={30}>Action</TableCell>
<TableCell style={headStyle} align="right" width={30}>
Status
</TableCell>
<TableCell style={headStyle} align="right" width={30}>
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>
)
{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>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Stack>
);
}

18
frontend/dashboard/src/pages/Corporates/Show.tsx
View File

@@ -11,26 +11,25 @@ import Page from '../../components/Page';
import axios from '../../utils/axios';
import useAuth from '../../hooks/useAuth';
import { Link , NavLink as RouterLink, useParams } from 'react-router-dom';
import React, { useEffect, useRef, useState } from 'react';
import React, { useContext, useEffect, useRef, useState } from 'react';
import { Theme, useTheme } from '@mui/material/styles';
import { Corporate } from '../../@types/corporates';
import { LaravelPaginatedData, LaravelPaginatedDataDefault } from '../../@types/paginated-data';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import CorporateTabNavigations from './CorporateTabNavigations';
import { fCurrency } from '../../utils/formatNumber';
import { ConfiguredCorporateContext } from '@/contexts/ConfiguredCorporateContext';
export default function Corporates() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [corporate, setCorporate] = useState<Corporate>();
const [corporate, setCorporate] = useState<Corporate|null>();
const configuredCorporateContext = useContext(ConfiguredCorporateContext);
useEffect(() => {
// TODO Use Hooks
axios.get(`corporates/${corporate_id}`)
.then((res) => {
setCorporate(res.data)
})
}, [])
setCorporate(configuredCorporateContext.currentCorporate);
}, [configuredCorporateContext])
const headStyle = {
fontWeight: 'bold',
@@ -51,8 +50,7 @@ export default function Corporates() {
},
]}
/>
{/* <Container maxWidth={themeStretch ? false : 'xl'}> */}
<Card>
<Stack spacing="3">

139
frontend/dashboard/src/routes/index.tsx
View File

@@ -89,50 +89,81 @@ export default function Router() {
element: <CorporateCreate />,
},
{
path: 'corporates/:corporate_id',
element: <CorporateShow />,
path: 'corporate',
element: <ConfigLayout />, // Layout that use the context
children: [
{
path: ':corporate_id',
element: <CorporateShow />,
},
{
path: ':corporate_id/services',
element: <CorporateServices />,
},
{
path: ':corporate_id/services/:service_code',
element: <CorporateServicesCreate />,
},
{
path: ':corporate_id/plans/create',
element: <PlanCreate />,
},
{
path: ':corporate_id/plans',
element: <Plans />,
},
{
path: ':corporate_id/benefits/create',
element: <BenefitCreate />,
},
{
path: ':corporate_id/benefits',
element: <Benefits />,
},
{
path: ':corporate_id/members',
element: <CorporateMembers />,
},
{
path: ':corporate_id/divisions',
element: <CorporateDivisions />,
},
{
path: ':corporate_id/divisions/create',
element: <CorporateDivisionsCreate />,
},
{
path: ':corporate_id/divisions/:id/edit',
element: <CorporateDivisionsCreate />,
},
{
path: ':corporate_id/formularium',
element: <CorporateFormularium />,
},
{
path: ':corporate_id/diagnosis-exclusions',
element: <DiagnosisExclusions />,
},
{
path: ':corporate_id/hospitals',
element: <CorporateHospitals />,
},
{
path: ':corporate_id/claim-history',
element: <CorporateClaimHistories />,
},
],
},
{
path: 'corporates/:corporate_id/edit',
element: <CorporateCreate />,
},
{
path: 'corporates/:corporate_id/divisions',
element: <CorporateDivisions />,
},
{
path: 'corporates/:corporate_id/divisions/create',
element: <CorporateDivisionsCreate />,
},
{
path: 'corporates/:corporate_id/divisions/:id/edit',
element: <CorporateDivisionsCreate />,
},
{
path: 'corporates/:corporate_id/members',
element: <CorporateMembers />,
},
{
path: 'corporates/:corporate_id/services',
element: <CorporateServices />,
},
{
path: 'corporates/:corporate_id/services/:service_code',
element: <CorporateServicesCreate />,
},
{
path: 'corporates/:corporate_id/plans/create',
element: <PlanCreate />,
},
{
path: 'corporates/:corporate_id/plans',
element: <Plans />,
},
{
path: 'corporates/:corporate_id/corporate-plans/create',
element: <CorporatePlanCreate />,
@@ -146,15 +177,6 @@ export default function Router() {
element: <CorporatePlans />,
},
{
path: 'corporates/:corporate_id/benefits/create',
element: <BenefitCreate />,
},
{
path: 'corporates/:corporate_id/benefits',
element: <Benefits />,
},
{
path: 'corporates/:corporate_id/corporate-benefits/create',
element: <CorporateBenefitsCreate />,
@@ -168,26 +190,6 @@ export default function Router() {
element: <CorporateBenefitsCreate />,
},
{
path: 'corporates/:corporate_id/formularium',
element: <CorporateFormularium />,
},
{
path: 'corporates/:corporate_id/diagnosis-exclusions',
element: <DiagnosisExclusions />,
},
{
path: 'corporates/:corporate_id/hospitals',
element: <CorporateHospitals />,
},
{
path: 'corporates/:corporate_id/claim-history',
element: <CorporateClaimHistories />,
},
{
path: 'master/doctors',
element: <MasterDoctors />,
@@ -272,6 +274,9 @@ const NotFound = Loadable(lazy(() => import('../pages/Page404')));
const Members = Loadable(lazy(() => import('../pages/Members/Index')));
const MedicinesCreate = Loadable(lazy(() => import('../pages/Medicines/Create')));
// Corporate
const ConfigLayout = Loadable(lazy(() => import('../pages/Corporates/ConfigLayout')));
const Corporate = Loadable(lazy(() => import('../pages/Corporates/Index')));
const CorporateCreate = Loadable(lazy(() => import('../pages/Corporates/CreateUpdate')));
const CorporateShow = Loadable(lazy(() => import('../pages/Corporates/Show')));

8
frontend/dashboard/tsconfig.json
View File

@@ -15,7 +15,11 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "react-jsx",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"]
"include": ["src"],
"references": [{ "path": "./tsconfig.json" }]
}

4
frontend/dashboard/vite.config.ts
View File

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgrPlugin from 'vite-plugin-svgr'
import { VitePWA } from 'vite-plugin-pwa'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
@@ -20,4 +21,7 @@ export default defineConfig({
},
}),
],
resolve: {
alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
}
})