Parent Corporate

frontend/dashboard/src/pages/Corporates/Form.tsx

@@ -3,7 +3,7 @@ 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 { Controller, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 // @mui
 import { styled } from '@mui/material/styles';
@@ -11,8 +11,15 @@ import { LoadingButton } from '@mui/lab';
 import {
   Box,
   Card,
+  FormControl,
   FormHelperText,
   Grid,
+  InputLabel,
+  Menu,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  SelectChangeEvent,
   Stack,
   Typography,
 } from '@mui/material';
@@ -29,6 +36,7 @@ import {
   RHFMultiCheckbox,
   RHFCheckbox,
   RHFCustomMultiCheckbox,
+  RHFSelect,
 } from '../../components/hook-form';
 import { Corporate } from '../../@types/corporates';
 import axios from '../../utils/axios';
@@ -52,6 +60,7 @@ type Props = {
 
 export default function CorporateForm({ isEdit, currentCorporate }: Props) {
   const navigate = useNavigate();
+  const [corporate_groups, setCorporateGroups] = useState([])
 
   // const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
 
@@ -61,6 +70,11 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
     name: Yup.string().required('Name is required'),
     code: Yup.string().required('Corporate Code is required'),
     active: Yup.boolean().required('Corporate Status is required'),
+    type: Yup.string().required('Type is required'),
+    parent_id: Yup.string().when("type", {
+      is: 'subcorporate',
+      then: Yup.string().required("Corporate is required because type is Sub Corporate")
+    })
   });
 
   const defaultValues = useMemo(
@@ -82,6 +96,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
       policy_start: currentCorporate?.current_policy?.start || '',
       policy_end: currentCorporate?.current_policy?.end || '',
       linking_rules: currentCorporate?.linking_rules || ['nrik', 'nik', 'member_id'],
+      type: currentCorporate?.type || 'corporate'
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [currentCorporate]
@@ -113,6 +128,14 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
       reset(defaultValues);
     }
 
+    axios.get('/corporates/create')
+      .then((res) => {
+        setCorporateGroups(res.data.corporate_groups)
+      })
+      .catch((err) => {
+        enqueueSnackbar("Opps, failed to get Corporate Group List", "error")
+      })
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isEdit, currentCorporate]);
 
@@ -222,6 +245,20 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
       "label" : "E-Mail"
     },
   ]
+
+  const types = [
+    {
+      "value" : "corporate",
+      "label" : "Corporate"
+    },
+    {
+      "value" : "subcorporate",
+      "label" : "Sub Corporate"
+    },
+  ]
+  const handleTypeChange = (event: SelectChangeEvent) => {
+    setValue('type', event.target.value)
+  }
   
 
   return (
@@ -232,6 +269,25 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
           <Card sx={{ p: 3 }}>
             <Stack spacing={3}>
               <Grid item xs={12}><Typography variant='h5'>Corporate Profile</Typography></Grid>
+
+              <RHFSelect name="type" label="Type" placeholder="Type">
+                <option value="" />
+                {types.map((option, index) => (
+                  <option key={index} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </RHFSelect>
+              
+              {/* // TODO Use Autocomplete */}
+              {( values.type == 'subcorporate' && <RHFSelect name="parent_id" label="Parent Corporate Group" placeholder="Parent Corporate Group">
+                <option value="" />
+                {corporate_groups.map((option, index) => (
+                  <option key={index} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </RHFSelect> )}
               
               <RHFTextField name="code" label="Corporate Code" />
 
@@ -290,7 +346,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
           </Stack>
         </Grid>
 
-        <Grid item xs={12} md={12}>
+        {( values.type == 'corporate' && <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}>
@@ -354,7 +410,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
               
             </Stack>
           </Card>
-        </Grid>
+        </Grid> )}
         
         <Grid item xs={12} md={4}>
           <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>

frontend/dashboard/src/pages/Corporates/Formularium/List.tsx

@@ -116,7 +116,7 @@ export default function PlanList() {
   }
 
   const handleInactiveAction = (formularium : any) => {
-        enqueueSnackbar('Fuck yuo'), { variant: 'error' });
+        enqueueSnackbar('Fuck yuo'), { variant: 'error' };
     axios
       .put('/corporates/'+corporate_id+'/formulariums/'+formularium.id+'/activate')
       .then(() => {