Fix Member Plan

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

View File

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