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

[WIP] Import Plans

Browse Source
This commit is contained in:
Dell
2022-07-07 10:17:46 +07:00
parent f18bb85b94
commit 574004d408
146 changed files with 28928 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
frontend/dashboard/src/pages/Corporates/Benefit/Create.tsx Normal file
View File

@@ -0,0 +1,241 @@
import * as Yup from 'yup';
import { yupResolver } from "@hookform/resolvers/yup";
import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
import { useForm } from "react-hook-form";
import { useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from "../../../components/hook-form";
import Page from "../../../components/Page";
import useSettings from "../../../hooks/useSettings";
import CorporateTabNavigations from "../CorporateTabNavigations";
import DivisionsList from "./List";
import { useMemo, useState } from 'react';
export default function Divisions() {
const { themeStretch } = useSettings();
const { id } = useParams();
const NewDivisionSchema = Yup.object().shape({
name: Yup.string().required('Name is required'),
code: Yup.string().required('Corporate Code is required'),
active: Yup.boolean().required('Corporate Status is required'),
});
const defaultValues = useMemo(
() => ({
code: '',
}),
[]
);
const methods = useForm({
resolver: yupResolver(NewDivisionSchema),
defaultValues,
});
const {
reset,
watch,
control,
setValue,
getValues,
setError,
handleSubmit,
formState: { isSubmitting },
} = methods;
const onSubmit = async (data: any) => {
console.log(data);
};
const [open, setOpen] = useState(false);
const benefits = [
{
'category' : 'General Practitioner',
'childs' : [
{
'name' : 'External Doctor Online',
'code' : 'gp-external-doctor-online'
},
{
'name' : 'External Doctor Offline',
'code' : 'gp-external-doctor-offline'
},
{
'name' : 'Internal Doctor Online',
'code' : 'gp-internal-doctor-online'
},
{
'name' : 'Internal Doctor Offline',
'code' : 'gp-internal-doctor-offline'
},
]
},
{
'category' : 'Specialist',
'childs' : [
{
'name' : 'External Doctor Online',
'code' : 'sp-external-doctor-online'
},
{
'name' : 'External Doctor Offline',
'code' : 'sp-external-doctor-offline'
},
{
'name' : 'Internal Doctor Online',
'code' : 'sp-internal-doctor-online'
},
{
'name' : 'Internal Doctor Offline',
'code' : 'sp-internal-doctor-offline'
},
]
},
{
'category' : 'Medicines',
'childs' : [
{
'name' : 'Vitamins',
'code' : 'medicines-vitamins'
},
{
'name' : 'Delivery Fee',
'code' : 'medicines-delivery-fee'
},
]
},
];
const products = [
{
'name' : 'Inpatient',
'code' : 'IP',
},
{
'name' : 'Outpatient',
'code' : 'OP',
},
{
'name' : 'Dental',
'code' : 'DT',
},
{
'name' : 'Dental',
'code' : 'DTL',
},
{
'name' : 'Matternity',
'code' : 'MT',
},
{
'name' : 'Special Benefit',
'code' : 'SB',
},
];
return (
<Page title="Create Benefit">
<HeaderBreadcrumbs
heading={'Create Benefit'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+id,
},
{
name: 'Benefits',
href: '/corporates/'+id+'/benefits',
},
{
name: 'Create',
href: '/corporates/'+id+'/benefits/create',
},
]}
/>
<Grid container spacing={2}>
<Grid item xs={12}>
<Card sx={{ p: 2 }}>
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Typography variant="h6">Benefit Detail</Typography>
<RHFTextField name="name" label="Benefit Name" />
<RHFTextField name="code" label="Benefit Code" />
<Typography variant="h6">Benefit Configuration</Typography>
<Divider orientation="horizontal" flexItem />
<Stack spacing={3} divider={<Divider orientation="horizontal" flexItem />}>
<Stack spacing={2}>
<RHFCheckbox name="a" label='Outpatient'/>
{benefits.map(row => (
<Collapse in={true} timeout="auto" unmountOnExit >
<Typography>{row.category}</Typography>
<Grid container>
{row.childs.map(benefit => (
<Grid item xs={6}>
<RHFCheckbox name={benefit.code} label={benefit.name}/>
</Grid>
))}
</Grid>
</Collapse>
))}
<Typography>Admin Fee</Typography>
<Grid container>
{benefits.map(row => (
<Grid item xs={4}>
<RHFCheckbox name="cat" label={row.category}/>
</Grid>
))}
</Grid>
</Stack>
<Stack spacing={2}>
<RHFCheckbox name="a" label='Inpatient'/>
{benefits.map(row => (
<Collapse in={true} timeout="auto" unmountOnExit >
<Typography>{row.category}</Typography>
<Grid container>
{row.childs.map(benefit => (
<Grid item xs={6}>
<RHFCheckbox name={benefit.code} label={benefit.name}/>
</Grid>
))}
</Grid>
</Collapse>
))}
<Typography>Admin Fee</Typography>
<Grid container>
{benefits.map(row => (
<Grid item xs={4}>
<RHFCheckbox name="cat" label={row.category}/>
</Grid>
))}
</Grid>
</Stack>
</Stack>
</Stack>
</FormProvider>
</Card>
</Grid>
</Grid>
</Page>
);
}

55
frontend/dashboard/src/pages/Corporates/Benefit/Index.tsx Normal file
View File

@@ -0,0 +1,55 @@
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";
export default function Divisions() {
const { themeStretch } = useSettings();
const { id } = useParams();
const pageTitle = 'Benefit List';
return (
<Page title={ pageTitle }>
<HeaderBreadcrumbs
heading={ pageTitle }
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+id,
},
{
name: 'Benefits',
href: '/corporates/'+id+'/benefits',
},
]}
/>
<Grid container spacing={2}>
<Grid item xs={8}>
<Card>
<CorporateTabNavigations position={'divisions'} />
<DivisionsList />
</Card>
</Grid>
<Grid item xs={4}>
<Card sx={{ p: 2 }}>
Corporate Detail Goes Here
&nbsp;
</Card>
</Grid>
</Grid>
</Page>
);
}

244
frontend/dashboard/src/pages/Corporates/Benefit/List.tsx Normal file
View File

@@ -0,0 +1,244 @@
// @mui
import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import PublishIcon from '@mui/icons-material/Publish';
import AddIcon from '@mui/icons-material/Add';
// hooks
import useSettings from '../../../hooks/useSettings';
// components
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 } from 'react';
import { Theme, useTheme } from '@mui/material/styles';
import { Corporate } from '../../../@types/corporates';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import CorporateTabNavigations from '../CorporateTabNavigations';
export default function DivisionsList() {
const { themeStretch } = useSettings();
// Called on every row to map the data to the columns
function createData( corporate: Corporate ): Corporate {
return {
...corporate,
}
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
History
</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={historyRow?.date}>
<TableCell component="th" scope="row">
{historyRow?.date}
</TableCell>
<TableCell>{historyRow?.customerId}</TableCell>
<TableCell align="right">{historyRow?.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow?.amount * 1000 * 100) / 100}
</TableCell>
</TableRow>
))
: (
<TableRow>
<TableCell colSpan={8}>No Data</TableCell>
</TableRow>
)
}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: "",
first_page_url: "",
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
per_page: 10,
from: 0,
to: 0,
total: 0
});
const loadDataTableData = async () => {
setDataTableLoading(true);
const response = await axios.get('/corporates');
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
useEffect(() => {
loadDataTableData();
}, [])
const headStyle = {
fontWeight: 'bold',
};
// FILTER SELECT
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
const names = [
'PLAN001',
'PLAN002',
'PLAN003',
'PLAN004',
'PLAN005',
];
function getStyles(name: string, personName: string[], theme: Theme) {
return {
fontWeight:
personName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
const theme = useTheme();
const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
const {
target: { value },
} = event;
setPlanIdFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
const {
target: { value },
} = event;
setStatusFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
// END FILTER SELECT
// IMPORT
const importMember = React.useRef(null);
const handleImportButton = (event: any) => {
if (importMember?.current)
importMember.current ? importMember.current.click() : console.log('fuck');
else
alert('No file selected')
}
const { id } = useParams();
return (
<Stack>
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<TextField id="outlined-basic" label="Search" variant="outlined" fullWidth />
<Link to={"/corporates/"+id+"/divisions/create"}>
<Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
</Link>
</Stack>
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">#</TableCell>
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">Loading</TableCell>
</TableRow>
</TableBody>
) : (
dataTableData.data.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">No Data</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map(row => (
<Row key={row.code} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
</Card>
</Stack>
);
}

65
frontend/dashboard/src/pages/Corporates/CorporateTabNavigations.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { Tab, Tabs } from "@mui/material";
import { useTheme } from "@mui/system";
import React, { useEffect } from "react";
import { Link, useParams } from "react-router-dom";
type Props = {
position: string
}
export default function CorporateTabNavigations({ position }: Props) {
const theme = useTheme();
const { id } = useParams();
const [currentTab, setCurrentTab] = React.useState(0);
const mainTabItems = [
{
'path' : 'members',
'label': 'Member List',
},
{
'path' : 'claim-history',
'label': 'Claim History',
},
{
'path' : 'divisions',
'label': 'Divisions',
},
{
'path' : 'plans',
'label': 'Plans',
},
{
'path' : 'benefits',
'label': 'Benefit & Exclusion',
},
{
'path' : 'hospitals',
'label': 'Hospital',
},
{
'path' : 'formularium',
'label': 'Formularium',
},
];
useEffect(() => {
let currentIndex = mainTabItems.findIndex(item => item.path === position);
setCurrentTab(currentIndex);
}, [])
return (
<Tabs
theme={theme}
value={currentTab}
onChange={(event, newValue) => false}
variant="scrollable"
scrollButtons
allowScrollButtonsMobile
aria-label="scrollable force tabs example"
>
{mainTabItems.map((tabItem, index) => (<Tab key={index} label={(<Link to={"/corporates/"+id+"/"+mainTabItems[index].path}>{tabItem.label}</Link>)} />))}
</Tabs>
)
}

56
frontend/dashboard/src/pages/Corporates/Create.tsx Normal file
View File

@@ -0,0 +1,56 @@
import { useEffect, useState } from 'react';
import { paramCase } from 'change-case';
import { useParams, useLocation } from 'react-router-dom';
// @mui
import { Container } from '@mui/material';
import useSettings from '../../hooks/useSettings';
import Page from '../../components/Page';
import Form from './Form';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import axios from '../../utils/axios';
import { Corporate } from '../../@types/corporates';
// ----------------------------------------------------------------------
export default function Create() {
const { themeStretch } = useSettings();
const { id } = useParams();
const isEdit = id ? true : false;
// const corporates = [{ id: 1, name: 'Product 1', code: 'Code' }];
const [ currentCorporate, setCurrentCorporate ] = useState<Corporate>();
// const name = "Henlooooo";
useEffect(() => {
if (isEdit) {
axios.get('/corporates/'+id+'/edit')
.then((res) => {
setCurrentCorporate(res.data);
})
}
}, [id]);
return (
<Page title="Membership: Create a new corporate">
<Container maxWidth={themeStretch ? false : 'lg'}>
<HeaderBreadcrumbs
heading={!isEdit ? 'Create a new corporate' : 'Edit corporate'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
{ name: !isEdit ? 'Create' : currentCorporate?.name ?? '' },
]}
/>
<Form isEdit={isEdit} currentCorporate={currentCorporate} />
</Container>
</Page>
);
}

212
frontend/dashboard/src/pages/Corporates/Division/Create.tsx Normal file
View File

@@ -0,0 +1,212 @@
import * as Yup from 'yup';
import { yupResolver } from "@hookform/resolvers/yup";
import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
import { useForm } from "react-hook-form";
import { useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from "../../../components/hook-form";
import Page from "../../../components/Page";
import useSettings from "../../../hooks/useSettings";
import CorporateTabNavigations from "../CorporateTabNavigations";
import DivisionsList from "./List";
import { useMemo, useState } from 'react';
export default function Divisions() {
const { themeStretch } = useSettings();
const { id } = useParams();
const NewDivisionSchema = Yup.object().shape({
name: Yup.string().required('Name is required'),
code: Yup.string().required('Corporate Code is required'),
active: Yup.boolean().required('Corporate Status is required'),
});
const defaultValues = useMemo(
() => ({
code: '',
}),
[]
);
const methods = useForm({
resolver: yupResolver(NewDivisionSchema),
defaultValues,
});
const {
reset,
watch,
control,
setValue,
getValues,
setError,
handleSubmit,
formState: { isSubmitting },
} = methods;
const onSubmit = async (data: any) => {
console.log(data);
};
const [open, setOpen] = useState(false);
const benefits = [
{
'category' : 'General Practitioner',
'childs' : [
{
'name' : 'External Doctor Online',
'code' : 'gp-external-doctor-online'
},
{
'name' : 'External Doctor Offline',
'code' : 'gp-external-doctor-offline'
},
{
'name' : 'Internal Doctor Online',
'code' : 'gp-internal-doctor-online'
},
{
'name' : 'Internal Doctor Offline',
'code' : 'gp-internal-doctor-offline'
},
]
},
{
'category' : 'Specialist',
'childs' : [
{
'name' : 'External Doctor Online',
'code' : 'sp-external-doctor-online'
},
{
'name' : 'External Doctor Offline',
'code' : 'sp-external-doctor-offline'
},
{
'name' : 'Internal Doctor Online',
'code' : 'sp-internal-doctor-online'
},
{
'name' : 'Internal Doctor Offline',
'code' : 'sp-internal-doctor-offline'
},
]
},
{
'category' : 'Medicines',
'childs' : [
{
'name' : 'Vitamins',
'code' : 'medicines-vitamins'
},
{
'name' : 'Delivery Fee',
'code' : 'medicines-delivery-fee'
},
]
},
];
return (
<Page title="Create Division">
<HeaderBreadcrumbs
heading={'Create Division'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+id,
},
{
name: 'Divisions',
href: '/corporates/'+id+'/divisions',
},
{
name: 'Create',
href: '/corporates/'+id+'/divisions/create',
},
]}
/>
<Grid container spacing={2}>
<Grid item xs={12}>
<Card sx={{ p: 2 }}>
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Typography variant="h6">Division Detail</Typography>
<RHFTextField name="name" label="Corporate Name" />
<Typography variant="h6">Benefit Configuration</Typography>
<Divider orientation="horizontal" flexItem />
<Stack spacing={3} divider={<Divider orientation="horizontal" flexItem />}>
<Stack spacing={2}>
<RHFCheckbox name="a" label='Outpatient'/>
{benefits.map(row => (
<Collapse in={true} timeout="auto" unmountOnExit >
<Typography>{row.category}</Typography>
<Grid container>
{row.childs.map(benefit => (
<Grid item xs={6}>
<RHFCheckbox name={benefit.code} label={benefit.name}/>
</Grid>
))}
</Grid>
</Collapse>
))}
<Typography>Admin Fee</Typography>
<Grid container>
{benefits.map(row => (
<Grid item xs={4}>
<RHFCheckbox name="cat" label={row.category}/>
</Grid>
))}
</Grid>
</Stack>
<Stack spacing={2}>
<RHFCheckbox name="a" label='Inpatient'/>
{benefits.map(row => (
<Collapse in={true} timeout="auto" unmountOnExit >
<Typography>{row.category}</Typography>
<Grid container>
{row.childs.map(benefit => (
<Grid item xs={6}>
<RHFCheckbox name={benefit.code} label={benefit.name}/>
</Grid>
))}
</Grid>
</Collapse>
))}
<Typography>Admin Fee</Typography>
<Grid container>
{benefits.map(row => (
<Grid item xs={4}>
<RHFCheckbox name="cat" label={row.category}/>
</Grid>
))}
</Grid>
</Stack>
</Stack>
</Stack>
</FormProvider>
</Card>
</Grid>
</Grid>
</Page>
);
}

54
frontend/dashboard/src/pages/Corporates/Division/Index.tsx Normal file
View File

@@ -0,0 +1,54 @@
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";
export default function Divisions() {
const { themeStretch } = useSettings();
const { id } = useParams();
return (
<Page title="Division List">
<HeaderBreadcrumbs
heading={'Division List'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+id,
},
{
name: 'Divisions',
href: '/corporates/'+id+'/divisions',
},
]}
/>
<Grid container spacing={2}>
<Grid item xs={8}>
<Card>
<CorporateTabNavigations position={'divisions'} />
<DivisionsList />
</Card>
</Grid>
<Grid item xs={4}>
<Card sx={{ p: 2 }}>
Corporate Detail Goes Here
&nbsp;
</Card>
</Grid>
</Grid>
</Page>
);
}

248
frontend/dashboard/src/pages/Corporates/Division/List.tsx Normal file
View File

@@ -0,0 +1,248 @@
// @mui
import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import PublishIcon from '@mui/icons-material/Publish';
import AddIcon from '@mui/icons-material/Add';
// hooks
import useSettings from '../../../hooks/useSettings';
// components
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 } from 'react';
import { Theme, useTheme } from '@mui/material/styles';
import { Corporate } from '../../../@types/corporates';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import CorporateTabNavigations from '../CorporateTabNavigations';
export default function DivisionsList() {
const { themeStretch } = useSettings();
// Called on every row to map the data to the columns
function createData( corporate: Corporate ): Corporate {
return {
...corporate,
}
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
History
</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={historyRow?.date}>
<TableCell component="th" scope="row">
{historyRow?.date}
</TableCell>
<TableCell>{historyRow?.customerId}</TableCell>
<TableCell align="right">{historyRow?.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow?.amount * 1000 * 100) / 100}
</TableCell>
</TableRow>
))
: (
<TableRow>
<TableCell colSpan={8}>No Data</TableCell>
</TableRow>
)
}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: "",
first_page_url: "",
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
per_page: 10,
from: 0,
to: 0,
total: 0
});
const loadDataTableData = async () => {
setDataTableLoading(true);
const response = await axios.get('/corporates');
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
useEffect(() => {
loadDataTableData();
}, [])
const headStyle = {
fontWeight: 'bold',
};
// FILTER SELECT
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
const names = [
'PLAN001',
'PLAN002',
'PLAN003',
'PLAN004',
'PLAN005',
];
function getStyles(name: string, personName: string[], theme: Theme) {
return {
fontWeight:
personName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
const theme = useTheme();
const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
const {
target: { value },
} = event;
setPlanIdFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
const {
target: { value },
} = event;
setStatusFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
// END FILTER SELECT
// IMPORT
const importMember = React.useRef(null);
const handleImportButton = (event: any) => {
if (importMember?.current)
importMember.current ? importMember.current.click() : console.log('fuck');
else
alert('No file selected')
}
const { id } = useParams();
return (
<Stack>
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<TextField id="outlined-basic" label="Search" variant="outlined" fullWidth />
{/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
<Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
Import
</Button> */}
<Link to={"/corporates/"+id+"/divisions/create"}>
<Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
</Link>
</Stack>
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">#</TableCell>
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">Loading</TableCell>
</TableRow>
</TableBody>
) : (
dataTableData.data.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">No Data</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map(row => (
<Row key={row.code} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
</Card>
</Stack>
);
}

278
frontend/dashboard/src/pages/Corporates/Form.tsx Normal file
View File

@@ -0,0 +1,278 @@
import * as Yup from 'yup';
import { useSnackbar } from 'notistack';
import { useNavigate } from 'react-router-dom';
import { useCallback, useEffect, useMemo, useState } from 'react';
// form
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
// @mui
import { styled } from '@mui/material/styles';
import { LoadingButton } from '@mui/lab';
import {
Card,
FormHelperText,
Grid,
Stack,
Typography,
} from '@mui/material';
// components
import {
FormProvider,
RHFTextField,
RHFRadioGroup,
RHFUploadAvatar,
RHFSwitch,
} from '../../components/hook-form';
import { Corporate } from '../../@types/corporates';
import axios from '../../utils/axios';
const LabelStyle = styled(Typography)(({ theme }) => ({
...theme.typography.subtitle2,
color: theme.palette.text.secondary,
marginBottom: theme.spacing(1),
}));
interface FormValuesProps extends Partial<Corporate> {
taxes: boolean;
inStock: boolean;
}
type Props = {
isEdit: boolean;
currentCorporate?: Corporate;
};
export default function CorporateForm({ isEdit, currentCorporate }: Props) {
const navigate = useNavigate();
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
const { enqueueSnackbar } = useSnackbar();
const NewCorporateSchema = Yup.object().shape({
name: Yup.string().required('Name is required'),
code: Yup.string().required('Corporate Code is required'),
active: Yup.boolean().required('Corporate Status is required'),
});
const defaultValues = useMemo(
() => ({
code: currentCorporate?.code || '',
name: currentCorporate?.name || '',
welcome_message: currentCorporate?.welcome_message || '',
help_text: currentCorporate?.help_text || '',
active: currentCorporate?.id ? currentCorporate?.active === 1 : true,
policy_id: currentCorporate?.current_policy?.id || '',
policy_code: currentCorporate?.current_policy?.code || '',
policy_total_premi: currentCorporate?.current_policy?.total_premi || '',
policy_minimal_deposit_percentage: currentCorporate?.current_policy?.minimal_deposit_percentage || 50,
policy_minimal_deposit_net: currentCorporate?.current_policy?.minimal_deposit_net || '',
policy_minimal_alert_percentage: currentCorporate?.current_policy?.minimal_alert_percentage || 25,
policy_minimal_alert_net: currentCorporate?.current_policy?.minimal_alert_net || '',
policy_stop_service_percentage: currentCorporate?.current_policy?.minimal_stop_service_percentage || 25,
policy_stop_service_net: currentCorporate?.current_policy?.minimal_stop_service_net || '',
policy_start: currentCorporate?.current_policy?.start || '',
policy_end: currentCorporate?.current_policy?.end || '',
}),
// eslint-disable-next-line react-hooks/exhaustive-deps
[currentCorporate]
);
const methods = useForm<FormValuesProps>({
resolver: yupResolver(NewCorporateSchema),
defaultValues,
});
const {
reset,
watch,
control,
setValue,
getValues,
setError,
handleSubmit,
formState: { isSubmitting },
} = methods;
const values = watch();
useEffect(() => {
if (isEdit && currentCorporate) {
reset(defaultValues);
}
if (!isEdit) {
reset(defaultValues);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isEdit, currentCorporate]);
const onSubmit = async (data: FormValuesProps) => {
try {
if (!isEdit) {
const response = await axios.post('/corporates', data);
} else {
const response = await axios.put('/corporates/' + currentCorporate?.id ?? '', data);
}
reset();
enqueueSnackbar(!isEdit ? 'Corporate Created Successfully!' : 'Corporate Udpated Successfully!', { variant: 'success' });
navigate('/corporates');
} catch (error: any) {
if (error && error.response.status === 422) {
for (const [key, value] of Object.entries(error.response.data.errors)) {
setError(key, { message: value[0] });
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
}
}
else {
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
}
}
};
const handleDrop = useCallback(
(acceptedFiles) => {
setValue(
'logo',
acceptedFiles.map((file: Blob | MediaSource) =>
Object.assign(file, {
preview: URL.createObjectURL(file),
})
)
);
},
[setValue]
);
const handleRemove = (file: File | string) => {
setValue('logo', null);
};
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
{/* <Card sx={{ p:3, mb:3, background: 'gray', color: 'white' }}><Typography>Corporate Detail</Typography></Card> */}
<Grid container spacing={3}>
<Grid item xs={12} md={8}>
<Card sx={{ p: 3 }}>
<Stack spacing={3}>
<Grid item xs={12}><Typography variant='h5'>Corporate Profile</Typography></Grid>
<RHFTextField name="code" label="Corporate Code" />
<RHFTextField name="name" label="Corporate Name" />
<RHFTextField name="welcome_message" label="Welcome Message" />
<RHFTextField name="help_text" label="Help Text" />
{/* <div>
<LabelStyle>Images</LabelStyle>
<RHFUploadMultiFile
name="images"
files={[]}
showPreview
accept="image/*"
maxSize={3145728}
onDrop={handleDrop}
onRemove={handleRemove}
onRemoveAll={handleRemoveAll}
/>
</div> */}
</Stack>
</Card>
</Grid>
<Grid item xs={12} md={4}>
<Stack spacing={3}>
<Card sx={{ p: 3 }}>
<RHFSwitch name="active" label="Is Company Active" />
<Stack spacing={3} mt={2}>
<Typography align="center">Company Logo</Typography>
<RHFUploadAvatar name="logo"
showPreview
accept={'image/*'}
maxSize={3145728}
onDrop={handleDrop}
onRemove={handleRemove}
/>
</Stack>
</Card>
</Stack>
</Grid>
<Grid item xs={12} md={12}>
{/* <Card sx={{ p:3, mb:3, background: 'gray', color: 'white' }}><Typography>Policy Detail</Typography></Card> */}
<Card sx={{ p: 3 }}>
<Stack spacing={3} mt={2}>
<Grid item xs={12}><Typography variant='h5'>Policy Detail</Typography></Grid>
<input type="hidden" name="policy_id" />
<Stack spacing={1}>
<RHFTextField name="policy_code" label="Policy Number" />
{(!(currentCorporate?.id) && <Typography variant="caption">Will be generated if empty</Typography>)}
</Stack>
{/* <Typography>Minimal Deposit Policy Level</Typography> */}
<Grid container>
<Grid item xs={12} md={6}>
<RHFTextField name="policy_start" label="Start Date (YYYY-MM-DD)" />
</Grid>
<Grid item xs={12} md={6}>
<RHFTextField name="policy_end" label="End Date (YYYY-MM-DD)" />
</Grid>
</Grid>
<RHFTextField name="policy_total_premi" label="Total Premi" />
<Stack spacing={1}>
<Typography>Minimal Deposit Policy Level</Typography>
<Grid container>
<Grid item xs={12} md={3}>
<RHFTextField name="policy_minimal_deposit_percentage" label="Percentage (%)" />
</Grid>
<Grid item xs={12} md={9}>
<RHFTextField name="policy_minimal_deposit_net" label="Net (Rp)" />
</Grid>
</Grid>
</Stack>
<Stack spacing={1}>
<Typography>Minimal Alert Level</Typography>
<Grid container>
<Grid item xs={12} md={3}>
<RHFTextField name="policy_minimal_alert_percentage" label="Percentage (%)" />
</Grid>
<Grid item xs={12} md={9}>
<RHFTextField name="policy_minimal_alert_net" label="Net (Rp)" />
</Grid>
</Grid>
</Stack>
<Stack spacing={1}>
<Typography>Stop Service Level</Typography>
<Grid container>
<Grid item xs={12} md={3}>
<RHFTextField name="policy_stop_service_percentage" label="Percentage (%)" />
</Grid>
<Grid item xs={12} md={9}>
<RHFTextField name="policy_stop_service_net" label="Net (Rp)" />
</Grid>
</Grid>
</Stack>
</Stack>
</Card>
</Grid>
<Grid item xs={12} md={4}>
<LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
{!isEdit ? 'Create Product' : 'Save Changes'}
</LoadingButton>
</Grid>
</Grid>
</FormProvider>
);
};

321
frontend/dashboard/src/pages/Corporates/Index.tsx Normal file
View File

@@ -0,0 +1,321 @@
// @mui
import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Stack } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import PublishIcon from '@mui/icons-material/Publish';
import AddIcon from '@mui/icons-material/Add';
// hooks
import useSettings from '../../hooks/useSettings';
// components
import Page from '../../components/Page';
import axios from '../../utils/axios';
import useAuth from '../../hooks/useAuth';
import { Link , NavLink as RouterLink } from 'react-router-dom';
import React, { useEffect, useRef } from 'react';
import { Theme, useTheme } from '@mui/material/styles';
import { Corporate } from '../../@types/corporates';
import { LaravelPaginatedData } from '../../@types/paginated-data';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
export default function Corporates() {
const { themeStretch } = useSettings();
// Called on every row to map the data to the columns
function createData( corporate: Corporate ): Corporate {
return {
...corporate,
}
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
<TableCell align="right">
<Stack direction="row" justifyContent="flex-end" spacing={1}>
<Link to={"/corporates/" + row.id + "/edit"}><Button variant="outlined" color="primary" size="small">Edit</Button></ Link>
<Link to={"/corporates/" + row.id + ""}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
</Stack>
</TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
History
</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={historyRow?.date}>
<TableCell component="th" scope="row">
{historyRow?.date}
</TableCell>
<TableCell>{historyRow?.customerId}</TableCell>
<TableCell align="right">{historyRow?.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow?.amount * 1000 * 100) / 100}
</TableCell>
</TableRow>
))
: (
<TableRow>
<TableCell colSpan={8}>No Data</TableCell>
</TableRow>
)
}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: "",
first_page_url: "",
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
per_page: 10,
from: 0,
to: 0,
total: 0
});
const loadDataTableData = async () => {
setDataTableLoading(true);
const response = await axios.get('/corporates');
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
useEffect(() => {
loadDataTableData();
}, [])
const headStyle = {
fontWeight: 'bold',
};
// FILTER SELECT
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
const names = [
'PLAN001',
'PLAN002',
'PLAN003',
'PLAN004',
'PLAN005',
];
function getStyles(name: string, personName: string[], theme: Theme) {
return {
fontWeight:
personName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
const theme = useTheme();
const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
const {
target: { value },
} = event;
setPlanIdFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
const {
target: { value },
} = event;
setStatusFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
// END FILTER SELECT
// IMPORT
const importMember = React.useRef(null);
const handleImportButton = (event: any) => {
if (importMember?.current)
importMember.current ? importMember.current.click() : console.log('fuck');
else
alert('No file selected')
}
return (
<Page title="Membership : Corporate List">
<Container maxWidth={themeStretch ? false : 'xl'}>
<HeaderBreadcrumbs
heading={'Coporate List'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
]}
/>
<Grid container spacing={3} sx={{ mb: 2 }} justifyContent="flex-end">
<Grid item>
<TextField id="outlined-basic" label="Search" variant="outlined" sx={{ width: 400 }}/>
</Grid>
<Grid item>
<FormControl sx={{ width: 200 }}>
<InputLabel id="plan-id-label">PlanID</InputLabel>
<Select
labelId="plan-id-label"
id="plan-id"
multiple
value={planIdFilter}
onChange={handleChangePlanID}
input={<OutlinedInput label="PlanID" />}
MenuProps={MenuProps}
>
{names.map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, planIdFilter, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item>
<FormControl sx={{ width: 200 }}>
<InputLabel id="status-filter-label">Status</InputLabel>
<Select
labelId="status-filter-label"
id="status-filter"
multiple
value={statusFilter}
onChange={handleChangeStatus}
input={<OutlinedInput label="Status" />}
MenuProps={MenuProps}
>
{['Active', 'Suspended'].map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, statusFilter, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item>
{/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
<Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
Import
</Button> */}
<Link to={"/corporates/create"}>
<Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
</Link>
</Grid>
</Grid>
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">#</TableCell>
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left">Status</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">Loading</TableCell>
</TableRow>
</TableBody>
) : (
dataTableData.data.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">No Data</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map(row => (
<Row key={row.code} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
</Card>
</Container>
</Page>
);
}

54
frontend/dashboard/src/pages/Corporates/Member/Index.tsx Normal file
View File

@@ -0,0 +1,54 @@
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";
export default function Divisions() {
const { themeStretch } = useSettings();
const { id } = useParams();
return (
<Page title="Division List">
<HeaderBreadcrumbs
heading={'Division List'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+id,
},
{
name: 'Divisions',
href: '/corporates/'+id+'/divisions',
},
]}
/>
<Grid container spacing={2}>
<Grid item xs={8}>
<Card>
<CorporateTabNavigations position={'divisions'} />
<DivisionsList />
</Card>
</Grid>
<Grid item xs={4}>
<Card sx={{ p: 2 }}>
Corporate Detail Goes Here
&nbsp;
</Card>
</Grid>
</Grid>
</Page>
);
}

248
frontend/dashboard/src/pages/Corporates/Member/List.tsx Normal file
View File

@@ -0,0 +1,248 @@
// @mui
import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import PublishIcon from '@mui/icons-material/Publish';
import AddIcon from '@mui/icons-material/Add';
// hooks
import useSettings from '../../../hooks/useSettings';
// components
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 } from 'react';
import { Theme, useTheme } from '@mui/material/styles';
import { Corporate } from '../../../@types/corporates';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
import CorporateTabNavigations from '../CorporateTabNavigations';
export default function DivisionsList() {
const { themeStretch } = useSettings();
// Called on every row to map the data to the columns
function createData( corporate: Corporate ): Corporate {
return {
...corporate,
}
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
History
</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={historyRow?.date}>
<TableCell component="th" scope="row">
{historyRow?.date}
</TableCell>
<TableCell>{historyRow?.customerId}</TableCell>
<TableCell align="right">{historyRow?.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow?.amount * 1000 * 100) / 100}
</TableCell>
</TableRow>
))
: (
<TableRow>
<TableCell colSpan={8}>No Data</TableCell>
</TableRow>
)
}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: "",
first_page_url: "",
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
per_page: 10,
from: 0,
to: 0,
total: 0
});
const loadDataTableData = async () => {
setDataTableLoading(true);
const response = await axios.get('/corporates');
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
useEffect(() => {
loadDataTableData();
}, [])
const headStyle = {
fontWeight: 'bold',
};
// FILTER SELECT
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
const names = [
'PLAN001',
'PLAN002',
'PLAN003',
'PLAN004',
'PLAN005',
];
function getStyles(name: string, personName: string[], theme: Theme) {
return {
fontWeight:
personName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
const theme = useTheme();
const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
const {
target: { value },
} = event;
setPlanIdFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
const {
target: { value },
} = event;
setStatusFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
// END FILTER SELECT
// IMPORT
const importMember = React.useRef(null);
const handleImportButton = (event: any) => {
if (importMember?.current)
importMember.current ? importMember.current.click() : console.log('fuck');
else
alert('No file selected')
}
const { id } = useParams();
return (
<Stack>
<Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<TextField id="outlined-basic" label="Search" variant="outlined" fullWidth />
{/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
<Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
Import
</Button> */}
<Link to={"/corporates/"+id+"/divisions/create"}>
<Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
</Link>
</Stack>
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">#</TableCell>
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">Loading</TableCell>
</TableRow>
</TableBody>
) : (
dataTableData.data.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">No Data</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map(row => (
<Row key={row.code} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
</Card>
</Stack>
);
}

247
frontend/dashboard/src/pages/Corporates/Plan/Create.tsx Normal file
View File

@@ -0,0 +1,247 @@
import * as Yup from 'yup';
import { yupResolver } from "@hookform/resolvers/yup";
import { Card, Collapse, Divider, Grid, Stack, Typography } from "@mui/material";
import { useForm } from "react-hook-form";
import { useParams } from "react-router-dom";
import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from "../../../components/hook-form";
import Page from "../../../components/Page";
import useSettings from "../../../hooks/useSettings";
import CorporateTabNavigations from "../CorporateTabNavigations";
import DivisionsList from "./List";
import { useMemo, useState } from 'react';
export default function PlanCreate() {
const { themeStretch } = useSettings();
const { id } = useParams();
const NewDivisionSchema = Yup.object().shape({
name: Yup.string().required('Name is required'),
code: Yup.string().required('Corporate Code is required'),
active: Yup.boolean().required('Corporate Status is required'),
});
const defaultValues = useMemo(
() => ({
code: '',
}),
[]
);
const methods = useForm({
resolver: yupResolver(NewDivisionSchema),
defaultValues,
});
const {
reset,
watch,
control,
setValue,
getValues,
setError,
handleSubmit,
formState: { isSubmitting },
} = methods;
const onSubmit = async (data: any) => {
console.log(data);
};
const [open, setOpen] = useState(false);
const benefits = [
{
'category' : 'General Practitioner',
'childs' : [
{
'name' : 'External Doctor Online',
'code' : 'gp-external-doctor-online'
},
{
'name' : 'External Doctor Offline',
'code' : 'gp-external-doctor-offline'
},
{
'name' : 'Internal Doctor Online',
'code' : 'gp-internal-doctor-online'
},
{
'name' : 'Internal Doctor Offline',
'code' : 'gp-internal-doctor-offline'
},
]
},
{
'category' : 'Specialist',
'childs' : [
{
'name' : 'External Doctor Online',
'code' : 'sp-external-doctor-online'
},
{
'name' : 'External Doctor Offline',
'code' : 'sp-external-doctor-offline'
},
{
'name' : 'Internal Doctor Online',
'code' : 'sp-internal-doctor-online'
},
{
'name' : 'Internal Doctor Offline',
'code' : 'sp-internal-doctor-offline'
},
]
},
{
'category' : 'Medicines',
'childs' : [
{
'name' : 'Vitamins',
'code' : 'medicines-vitamins'
},
{
'name' : 'Delivery Fee',
'code' : 'medicines-delivery-fee'
},
]
},
];
const products = [
{
'name' : 'Inpatient',
'code' : 'IP',
},
{
'name' : 'Outpatient',
'code' : 'OP',
},
{
'name' : 'Dental',
'code' : 'DT',
},
{
'name' : 'Dental',
'code' : 'DTL',
},
{
'name' : 'Matternity',
'code' : 'MT',
},
{
'name' : 'Special Benefit',
'code' : 'SB',
},
];
return (
<Page title="Create Plan">
<HeaderBreadcrumbs
heading={'Create Plan'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+id,
},
{
name: 'Plans',
href: '/corporates/'+id+'/plans',
},
{
name: 'Create',
href: '/corporates/'+id+'/plans/create',
},
]}
/>
<Grid container spacing={2}>
<Grid item xs={12}>
<Card sx={{ p: 2 }}>
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={3}>
<Typography variant="h6">Plan Detail</Typography>
<RHFTextField name="name" label="Name" />
<RHFTextField name="code" label="Code" />
<RHFTextField name="limit" label="Limit" />
<RHFTextField name="start" label="Start (YYYY-MM-DD)" />
<RHFTextField name="end" label="End (YYYY-MM-DD)" />
<Typography variant="h6">Benefit Configuration</Typography>
<Divider orientation="horizontal" flexItem />
<Stack spacing={3} divider={<Divider orientation="horizontal" flexItem />}>
<Stack spacing={2}>
<RHFCheckbox name="a" label='Outpatient'/>
{benefits.map(row => (
<Collapse in={true} timeout="auto" unmountOnExit >
<Typography>{row.category}</Typography>
<Grid container>
{row.childs.map(benefit => (
<Grid item xs={6}>
<RHFCheckbox name={benefit.code} label={benefit.name}/>
</Grid>
))}
</Grid>
</Collapse>
))}
<Typography>Admin Fee</Typography>
<Grid container>
{benefits.map(row => (
<Grid item xs={4}>
<RHFCheckbox name="cat" label={row.category}/>
</Grid>
))}
</Grid>
</Stack>
<Stack spacing={2}>
<RHFCheckbox name="a" label='Inpatient'/>
{benefits.map(row => (
<Collapse in={true} timeout="auto" unmountOnExit >
<Typography>{row.category}</Typography>
<Grid container>
{row.childs.map(benefit => (
<Grid item xs={6}>
<RHFCheckbox name={benefit.code} label={benefit.name}/>
</Grid>
))}
</Grid>
</Collapse>
))}
<Typography>Admin Fee</Typography>
<Grid container>
{benefits.map(row => (
<Grid item xs={4}>
<RHFCheckbox name="cat" label={row.category}/>
</Grid>
))}
</Grid>
</Stack>
</Stack>
</Stack>
</FormProvider>
</Card>
</Grid>
</Grid>
</Page>
);
}

54
frontend/dashboard/src/pages/Corporates/Plan/Index.tsx Normal file
View File

@@ -0,0 +1,54 @@
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";
export default function Divisions() {
const { themeStretch } = useSettings();
const { id } = useParams();
return (
<Page title="Corporate Plan">
<HeaderBreadcrumbs
heading={'Corporate Plan'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+id,
},
{
name: 'Plans',
href: '/corporates/'+id+'/divisions',
},
]}
/>
<Grid container spacing={2}>
<Grid item xs={8}>
<Card>
<CorporateTabNavigations position={'plans'} />
<DivisionsList />
</Card>
</Grid>
<Grid item xs={4}>
<Card sx={{ p: 2 }}>
Corporate Detail Goes Here
&nbsp;
</Card>
</Grid>
</Grid>
</Page>
);
}

270
frontend/dashboard/src/pages/Corporates/Plan/List.tsx Normal file
View File

@@ -0,0 +1,270 @@
// @mui
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import AddIcon from '@mui/icons-material/Add';
import UploadIcon from '@mui/icons-material/Upload';
import CancelIcon from '@mui/icons-material/Cancel';
// hooks
import React, { useEffect, useRef, useState } from 'react';
import useSettings from '../../../hooks/useSettings';
import { useParams } from 'react-router-dom';
// components
import axios from '../../../utils/axios';
import { Corporate } from '../../../@types/corporates';
import { LaravelPaginatedData } from '../../../@types/paginated-data';
export default function DivisionsList() {
const { themeStretch } = useSettings();
// Called on every row to map the data to the columns
function createData( corporate: Corporate ): Corporate {
return {
...corporate,
}
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
History
</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={historyRow?.date}>
<TableCell component="th" scope="row">
{historyRow?.date}
</TableCell>
<TableCell>{historyRow?.customerId}</TableCell>
<TableCell align="right">{historyRow?.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow?.amount * 1000 * 100) / 100}
</TableCell>
</TableRow>
))
: (
<TableRow>
<TableCell colSpan={8}>No Data</TableCell>
</TableRow>
)
}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: "",
first_page_url: "",
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
per_page: 10,
from: 0,
to: 0,
total: 0
});
const loadDataTableData = async () => {
setDataTableLoading(true);
const response = await axios.get('/corporates');
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
useEffect(() => {
loadDataTableData();
}, [])
const headStyle = {
fontWeight: 'bold',
};
const { id } = useParams();
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
// IMPORT
// Create Button Menu
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const createMenu = Boolean(anchorEl);
const importPlan = useRef<HTMLInputElement>(null)
const [currentImportFileName, setCurrentImportFileName] = useState(null)
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleImportButton = (event: any) => {
if (importPlan?.current) {
handleClose();
importPlan.current ? importPlan.current.click() : console.log('No File selected');
} else {
alert('No file selected')
}
}
const handleCancelImportButton = (event: any) => {
// setCurrentImportFileName(null)
importPlan.current.value = "";
// console.log(importPlan.current?.value)
importPlan.current.dispatchEvent(new Event("change", { bubbles: true }));
}
const handleImportChange = (event: any) => {
if (event.target.files[0]) {
setCurrentImportFileName(event.target.files[0].name)
} else {
setCurrentImportFileName(null);
}
}
const handleUpload = () => {
if (importPlan.current?.files.length) {
const formData = new FormData();
formData.append("file", importPlan.current?.files[0])
axios.post(`corporates/${id}/plans/import`, formData )
} else {
alert('No File Selected')
}
}
return (
<Stack>
<input type='file' id='file' ref={importPlan} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
{( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth />
<Button
id="import-button"
variant='outlined'
startIcon={<AddIcon />} sx={{ p: 1.8 }}
aria-controls={createMenu ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={createMenu ? 'true' : undefined}
onClick={handleClick}
>
Import
</Button>
<Menu
id="import-button"
anchorEl={anchorEl}
open={createMenu}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={handleImportButton}>Import</MenuItem>
<MenuItem onClick={handleClose}>Download Template</MenuItem>
</Menu>
</Stack>
)}
{( currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
<Button onClick={handleImportButton} fullWidth>{currentImportFileName ?? "No File Selected"}</Button>
<Button onClick={handleCancelImportButton} size="small" fullWidth={false} sx={{ p: 1.8 }}><CancelIcon color="error"/></Button>
</ButtonGroup>
<Button
id="upload-button"
variant='outlined'
startIcon={<UploadIcon />} sx={{ p: 1.8 }}
onClick={handleUpload}
>
Upload
</Button>
</Stack>
)}
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">#</TableCell>
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">Loading</TableCell>
</TableRow>
</TableBody>
) : (
dataTableData.data.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">No Data</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map(row => (
<Row key={row.code} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
</Card>
</Stack>
);
}

231
frontend/dashboard/src/pages/Corporates/Show.tsx Normal file
View File

@@ -0,0 +1,231 @@
// @mui
import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Stack } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import PublishIcon from '@mui/icons-material/Publish';
import AddIcon from '@mui/icons-material/Add';
// hooks
import useSettings from '../../hooks/useSettings';
// components
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 } from 'react';
import { Theme, useTheme } from '@mui/material/styles';
import { Corporate } from '../../@types/corporates';
import { LaravelPaginatedData } from '../../@types/paginated-data';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import CorporateTabNavigations from './CorporateTabNavigations';
export default function Corporates() {
const { themeStretch } = useSettings();
// Called on every row to map the data to the columns
function createData( corporate: Corporate ): Corporate {
return {
...corporate,
}
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
History
</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={historyRow?.date}>
<TableCell component="th" scope="row">
{historyRow?.date}
</TableCell>
<TableCell>{historyRow?.customerId}</TableCell>
<TableCell align="right">{historyRow?.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow?.amount * 1000 * 100) / 100}
</TableCell>
</TableRow>
))
: (
<TableRow>
<TableCell colSpan={8}>No Data</TableCell>
</TableRow>
)
}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: "",
first_page_url: "",
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
per_page: 10,
from: 0,
to: 0,
total: 0
});
const loadDataTableData = async () => {
setDataTableLoading(true);
const response = await axios.get('/corporates');
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
useEffect(() => {
loadDataTableData();
}, [])
const headStyle = {
fontWeight: 'bold',
};
// FILTER SELECT
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
const names = [
'PLAN001',
'PLAN002',
'PLAN003',
'PLAN004',
'PLAN005',
];
function getStyles(name: string, personName: string[], theme: Theme) {
return {
fontWeight:
personName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
const theme = useTheme();
const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
const {
target: { value },
} = event;
setPlanIdFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
const {
target: { value },
} = event;
setStatusFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
// END FILTER SELECT
// IMPORT
const importMember = React.useRef(null);
const handleImportButton = (event: any) => {
if (importMember?.current)
importMember.current ? importMember.current.click() : console.log('fuck');
else
alert('No file selected')
}
const { id } = useParams();
return (
<Page title="Corporate Detail">
<HeaderBreadcrumbs
heading={'Corporate Detail'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
{
name: 'Corporate Name',
href: '/corporates/'+id,
},
]}
/>
{/* <Container maxWidth={themeStretch ? false : 'xl'}> */}
<Card>
<Stack spacing="3">
<CorporateTabNavigations position="any"/>
<Grid container spacing={3}>
<Grid item xs={12} sx={{ p:2 }}>
Corporate Dashboard / Report Goes Here
&nbsp;
</Grid>
</Grid>
</Stack>
</Card>
{/* </Container> */}
</Page>
);
}