diff --git a/frontend/dashboard/.eslintrc b/frontend/dashboard/.eslintrc index 0ddcccd0..e101f76b 100755 --- a/frontend/dashboard/.eslintrc +++ b/frontend/dashboard/.eslintrc @@ -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" diff --git a/frontend/dashboard/src/contexts/ConfiguredCorporateContext.tsx b/frontend/dashboard/src/contexts/ConfiguredCorporateContext.tsx new file mode 100644 index 00000000..5fde9420 --- /dev/null +++ b/frontend/dashboard/src/contexts/ConfiguredCorporateContext.tsx @@ -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 ( + + {children} + + ); +} + +export { ConfiguredCorporateProvider, ConfiguredCorporateContext }; diff --git a/frontend/dashboard/src/layouts/dashboard/index.tsx b/frontend/dashboard/src/layouts/dashboard/index.tsx index 569ddb4c..6a30c399 100755 --- a/frontend/dashboard/src/layouts/dashboard/index.tsx +++ b/frontend/dashboard/src/layouts/dashboard/index.tsx @@ -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 + }, }} > setOpen(true)} /> diff --git a/frontend/dashboard/src/pages/Corporates/Benefit/Index.tsx b/frontend/dashboard/src/pages/Corporates/Benefit/Index.tsx index 838b1437..54cac928 100755 --- a/frontend/dashboard/src/pages/Corporates/Benefit/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/Benefit/Index.tsx @@ -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(); + + const configuredCorporateContext = useContext(ConfiguredCorporateContext); + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + }, [configuredCorporateContext]); + const pageTitle = 'Benefit'; return ( - - + diff --git a/frontend/dashboard/src/pages/Corporates/ClaimHistory/Index.tsx b/frontend/dashboard/src/pages/Corporates/ClaimHistory/Index.tsx index 5f615aae..e30db1cd 100755 --- a/frontend/dashboard/src/pages/Corporates/ClaimHistory/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/ClaimHistory/Index.tsx @@ -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(); + + const configuredCorporateContext = useContext(ConfiguredCorporateContext); + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + }, [configuredCorporateContext]); return ( - diff --git a/frontend/dashboard/src/pages/Corporates/ConfigLayout.tsx b/frontend/dashboard/src/pages/Corporates/ConfigLayout.tsx new file mode 100644 index 00000000..63e02a8c --- /dev/null +++ b/frontend/dashboard/src/pages/Corporates/ConfigLayout.tsx @@ -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 ( + + + + + + ); +} diff --git a/frontend/dashboard/src/pages/Corporates/CorporatePlan/Index.tsx b/frontend/dashboard/src/pages/Corporates/CorporatePlan/Index.tsx index e02925b8..247d941e 100755 --- a/frontend/dashboard/src/pages/Corporates/CorporatePlan/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/CorporatePlan/Index.tsx @@ -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(); + + const configuredCorporateContext = useContext(ConfiguredCorporateContext); + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + }, [configuredCorporateContext]); + return ( - @@ -42,10 +49,7 @@ export default function Divisions() { - - Corporate Detail Goes Here -   - + Corporate Detail Goes Here   diff --git a/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx b/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx index 4cfffe6d..2b1d4860 100755 --- a/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx +++ b/frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx @@ -89,7 +89,7 @@ export default function CorporateTabNavigations({ position }: Props) { { - navigate('/corporates/' + corporate_id + '/' + mainTabItems[index].path); + navigate('/corporate/' + corporate_id + '/' + mainTabItems[index].path); }} label={tabItem.label} /> diff --git a/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/Index.tsx b/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/Index.tsx index e9ce93d8..d022b746 100755 --- a/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/DiagnosisExclusion/Index.tsx @@ -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(); + + const configuredCorporateContext = useContext(ConfiguredCorporateContext); + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + }, [configuredCorporateContext]); const pageTitle = 'Diagnosis Exclusion'; return ( - - + - + diff --git a/frontend/dashboard/src/pages/Corporates/Division/Index.tsx b/frontend/dashboard/src/pages/Corporates/Division/Index.tsx index 3744a469..78da9fe0 100755 --- a/frontend/dashboard/src/pages/Corporates/Division/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/Division/Index.tsx @@ -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(); + + const configuredCorporateContext = useContext(ConfiguredCorporateContext); + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + }, [configuredCorporateContext]) return ( @@ -24,7 +35,7 @@ export default function Divisions() { href: '/corporates', }, { - name: 'Corporate Name', + name: corporate?.name ?? '-', href: '/corporates/'+corporate_id, }, { diff --git a/frontend/dashboard/src/pages/Corporates/Division/List.tsx b/frontend/dashboard/src/pages/Corporates/Division/List.tsx index fb019971..123a603f 100755 --- a/frontend/dashboard/src/pages/Corporates/Division/List.tsx +++ b/frontend/dashboard/src/pages/Corporates/Division/List.tsx @@ -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(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 (
- + ); } // 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() { *': { borderBottom: 'unset' } }}> - setOpen(!open)} - > + setOpen(!open)}> {open ? : } @@ -76,8 +107,18 @@ export default function PlanList() { {row.code} {row.name} {row.description} - - + + + + + + + + {/* COLLAPSIBLE ROW */} @@ -88,37 +129,41 @@ export default function PlanList() { No Extra Data - {false && - - Rules - - - - - Date - Customer - Amount - Total price ($) - - - - {/* {row.history ? row.history.map((historyRow) => ( */} + {false && ( + + + Rules + +
+ + + Date + Customer + Amount + Total price ($) + + + + {/* {row.history ? row.history.map((historyRow) => ( */} - {row.start} - {row.end} + + {row.start} - {row.end} + {row.start} {row.start} {row.start} - {/* )) + {/* )) : ( No Data ) } */} - -
- } + + + + )} @@ -131,104 +176,114 @@ export default function PlanList() { const [dataTableData, setDataTableData] = React.useState({ 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 ( - - - - - - + + + + + + - + {/* The Main Table */} - ID - Code - Name - Description + + ID + + + Code + + + Name + + + Description + - {dataTableIsLoading ? - ( - - - Loading - - - ) : ( - dataTableData.data.length == 0 ? - ( - - - No Data - - - ) : ( - - {dataTableData.data.map(row => ( - - ))} - - ) + {dataTableIsLoading ? ( + + + + Loading + + + + ) : dataTableData.data.length == 0 ? ( + + + + No Data + + + + ) : ( + + {dataTableData.data.map((row) => ( + + ))} + )}
- - + + ); } diff --git a/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx b/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx index c5ae2d12..a28a5518 100755 --- a/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/Formularium/Index.tsx @@ -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(); + + const configuredCorporateContext = useContext(ConfiguredCorporateContext); + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + }, [configuredCorporateContext]); + return ( - diff --git a/frontend/dashboard/src/pages/Corporates/Hospital/Index.tsx b/frontend/dashboard/src/pages/Corporates/Hospital/Index.tsx index b47f9437..d5fa1fa3 100755 --- a/frontend/dashboard/src/pages/Corporates/Hospital/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/Hospital/Index.tsx @@ -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(); + + const configuredCorporateContext = useContext(ConfiguredCorporateContext); + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + }, [configuredCorporateContext]); + return ( - - Feature Not Implemented Yet + Feature Not Implemented Yet ); diff --git a/frontend/dashboard/src/pages/Corporates/Index.tsx b/frontend/dashboard/src/pages/Corporates/Index.tsx index 3d22df70..1d16264a 100755 --- a/frontend/dashboard/src/pages/Corporates/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/Index.tsx @@ -333,7 +333,7 @@ export default function Corporates() { Edit - + diff --git a/frontend/dashboard/src/pages/Corporates/Member/Index.tsx b/frontend/dashboard/src/pages/Corporates/Member/Index.tsx index 1f3412ef..1f6264ee 100755 --- a/frontend/dashboard/src/pages/Corporates/Member/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/Member/Index.tsx @@ -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(); + + const configuredCorporateContext = useContext(ConfiguredCorporateContext); + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + }, [configuredCorporateContext]); return ( - diff --git a/frontend/dashboard/src/pages/Corporates/Plan/Index.tsx b/frontend/dashboard/src/pages/Corporates/Plan/Index.tsx index 5de637be..ac8c62b6 100755 --- a/frontend/dashboard/src/pages/Corporates/Plan/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/Plan/Index.tsx @@ -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(); + + const configuredCorporateContext = useContext(ConfiguredCorporateContext); + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + }, [configuredCorporateContext]); + return ( - @@ -38,7 +45,6 @@ export default function Divisions() {
- ); } diff --git a/frontend/dashboard/src/pages/Corporates/Services/Index.tsx b/frontend/dashboard/src/pages/Corporates/Services/Index.tsx index 97600d34..ca793fcb 100755 --- a/frontend/dashboard/src/pages/Corporates/Services/Index.tsx +++ b/frontend/dashboard/src/pages/Corporates/Services/Index.tsx @@ -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(); + + const configuredCorporateContext = useContext(ConfiguredCorporateContext); + + useEffect(() => { + setCorporate(configuredCorporateContext.currentCorporate); + }, [configuredCorporateContext]); + const pageTitle = 'Services'; return ( @@ -22,7 +33,7 @@ export default function Divisions() { href: '/corporates', }, { - name: 'Corporate Name', + name: corporate?.name ?? '-', href: '/corporates/' + corporate_id, }, { diff --git a/frontend/dashboard/src/pages/Corporates/Services/List.tsx b/frontend/dashboard/src/pages/Corporates/Services/List.tsx index fe65e97a..c7345f6f 100755 --- a/frontend/dashboard/src/pages/Corporates/Services/List.tsx +++ b/frontend/dashboard/src/pages/Corporates/Services/List.tsx @@ -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({ 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(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 (
- + ); } @@ -83,17 +119,17 @@ export default function List() { }; return ( - - - + + + ); } // 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, 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 ( @@ -145,139 +183,325 @@ export default function List() { {row.name} - {( row.status == 'active' && )} - {( row.status == 'inactive' && )} + {row.status == 'active' && ( + + )} + {row.status == 'inactive' && ( + + )} - - - - {/* COLLAPSIBLE ROW */} - {false && - - - - - - - - - - General Practitioner - - - - - External Doctor - Internal Doctor - - - - {handleConfigChange(event, row)}} name="gp_external_doctor_online" />} label="Online" /> - - - {handleConfigChange(event, row)}} name="gp_external_doctor_offline" />} label="Offline" /> - - - {handleConfigChange(event, row)}} name="gp_internal_doctor_online" />} label="Online" /> - - - {handleConfigChange(event, row)}} name="gp_internal_doctor_offline" />} label="Offline" /> - - - -
- - - - - - - Specialist Practitioner - - - - - External Doctor - Internal Doctor - - - - {handleConfigChange(event, row)}} name="sp_external_doctor_online" />} label="Online" /> - - - {handleConfigChange(event, row)}} name="sp_external_doctor_offline" />} label="Offline" /> - - - {handleConfigChange(event, row)}} name="sp_internal_doctor_online" />} label="Online" /> - - - {handleConfigChange(event, row)}} name="sp_internal_doctor_offline" />} label="Offline" /> - - - -
- - - - - - - Medicine - - - - - - {handleConfigChange(event, row)}} name="vitamins" />} label="Vitamins" /> - - - {handleConfigChange(event, row)}} name="delivery_fee" />} label="Delivery Fee" /> - - - - - -
- - - - - - - Free Admin Fee - - - - - - {handleConfigChange(event, row)}} name="general_practitioner_fee" />} label="General Practitioner" /> - - - {handleConfigChange(event, row)}} name="specialist_practitioner_fee" />} label="Specialist Practitioner" /> - - - - - -
- - - - - - + + + - } + {/* COLLAPSIBLE ROW */} + {false && ( + + + + + + + + + + + General Practitioner + + + + + + External Doctor + Internal Doctor + + + + { + handleConfigChange(event, row); + }} + name="gp_external_doctor_online" + /> + } + label="Online" + /> + + + { + handleConfigChange(event, row); + }} + name="gp_external_doctor_offline" + /> + } + label="Offline" + /> + + + { + handleConfigChange(event, row); + }} + name="gp_internal_doctor_online" + /> + } + label="Online" + /> + + + { + handleConfigChange(event, row); + }} + name="gp_internal_doctor_offline" + /> + } + label="Offline" + /> + + + +
+ + + + + + + + Specialist Practitioner + + + + + + External Doctor + Internal Doctor + + + + { + handleConfigChange(event, row); + }} + name="sp_external_doctor_online" + /> + } + label="Online" + /> + + + { + handleConfigChange(event, row); + }} + name="sp_external_doctor_offline" + /> + } + label="Offline" + /> + + + { + handleConfigChange(event, row); + }} + name="sp_internal_doctor_online" + /> + } + label="Online" + /> + + + { + handleConfigChange(event, row); + }} + name="sp_internal_doctor_offline" + /> + } + label="Offline" + /> + + + +
+ + + + + + + + Medicine + + + + + + + { + handleConfigChange(event, row); + }} + name="vitamins" + /> + } + label="Vitamins" + /> + + + { + handleConfigChange(event, row); + }} + name="delivery_fee" + /> + } + label="Delivery Fee" + /> + + + + + +
+ + + + + + + + Free Admin Fee + + + + + + + { + handleConfigChange(event, row); + }} + name="general_practitioner_fee" + /> + } + label="General Practitioner" + /> + + + { + handleConfigChange(event, row); + }} + name="specialist_practitioner_fee" + /> + } + label="Specialist Practitioner" + /> + + + + + +
+ + + + + + + )} ); } - 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 ( - + {/* The Main Table */} {/* */} - Code - Service + + Code + + + Service + - Status - Action + + Status + + + Action + - {dataTableIsLoading ? - ( - - - Loading - - - ) : ( - dataTableData.data.length == 0 ? - ( - - - No Data - - - ) : ( - - {dataTableData.data.map(row => ( - - ))} - - ) + {dataTableIsLoading ? ( + + + + Loading + + + + ) : dataTableData.data.length == 0 ? ( + + + + No Data + + + + ) : ( + + {dataTableData.data.map((row) => ( + + ))} + )}
- - - + + + ); } diff --git a/frontend/dashboard/src/pages/Corporates/Show.tsx b/frontend/dashboard/src/pages/Corporates/Show.tsx index 08d3f009..6e3325e1 100755 --- a/frontend/dashboard/src/pages/Corporates/Show.tsx +++ b/frontend/dashboard/src/pages/Corporates/Show.tsx @@ -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(); + const [corporate, setCorporate] = useState(); + + 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() { }, ]} /> - - + {/* */} diff --git a/frontend/dashboard/src/routes/index.tsx b/frontend/dashboard/src/routes/index.tsx index cbdecd1d..5b5f7ce0 100755 --- a/frontend/dashboard/src/routes/index.tsx +++ b/frontend/dashboard/src/routes/index.tsx @@ -89,50 +89,81 @@ export default function Router() { element: , }, { - path: 'corporates/:corporate_id', - element: , + path: 'corporate', + element: , // Layout that use the context + children: [ + { + path: ':corporate_id', + element: , + }, + { + path: ':corporate_id/services', + element: , + }, + { + path: ':corporate_id/services/:service_code', + element: , + }, + { + path: ':corporate_id/plans/create', + element: , + }, + { + path: ':corporate_id/plans', + element: , + }, + { + path: ':corporate_id/benefits/create', + element: , + }, + { + path: ':corporate_id/benefits', + element: , + }, + + { + path: ':corporate_id/members', + element: , + }, + + { + path: ':corporate_id/divisions', + element: , + }, + { + path: ':corporate_id/divisions/create', + element: , + }, + { + path: ':corporate_id/divisions/:id/edit', + element: , + }, + { + path: ':corporate_id/formularium', + element: , + }, + + { + path: ':corporate_id/diagnosis-exclusions', + element: , + }, + + { + path: ':corporate_id/hospitals', + element: , + }, + + { + path: ':corporate_id/claim-history', + element: , + }, + ], }, { path: 'corporates/:corporate_id/edit', element: , }, - { - path: 'corporates/:corporate_id/divisions', - element: , - }, - { - path: 'corporates/:corporate_id/divisions/create', - element: , - }, - { - path: 'corporates/:corporate_id/divisions/:id/edit', - element: , - }, - - { - path: 'corporates/:corporate_id/members', - element: , - }, - - { - path: 'corporates/:corporate_id/services', - element: , - }, - { - path: 'corporates/:corporate_id/services/:service_code', - element: , - }, - - { - path: 'corporates/:corporate_id/plans/create', - element: , - }, - { - path: 'corporates/:corporate_id/plans', - element: , - }, - { path: 'corporates/:corporate_id/corporate-plans/create', element: , @@ -146,15 +177,6 @@ export default function Router() { element: , }, - { - path: 'corporates/:corporate_id/benefits/create', - element: , - }, - { - path: 'corporates/:corporate_id/benefits', - element: , - }, - { path: 'corporates/:corporate_id/corporate-benefits/create', element: , @@ -168,26 +190,6 @@ export default function Router() { element: , }, - { - path: 'corporates/:corporate_id/formularium', - element: , - }, - - { - path: 'corporates/:corporate_id/diagnosis-exclusions', - element: , - }, - - { - path: 'corporates/:corporate_id/hospitals', - element: , - }, - - { - path: 'corporates/:corporate_id/claim-history', - element: , - }, - { path: 'master/doctors', element: , @@ -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'))); diff --git a/frontend/dashboard/tsconfig.json b/frontend/dashboard/tsconfig.json index e992023b..843bc48b 100755 --- a/frontend/dashboard/tsconfig.json +++ b/frontend/dashboard/tsconfig.json @@ -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" }] } diff --git a/frontend/dashboard/vite.config.ts b/frontend/dashboard/vite.config.ts index a56ef19d..557fde33 100755 --- a/frontend/dashboard/vite.config.ts +++ b/frontend/dashboard/vite.config.ts @@ -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') }], + } })