[WIP] CarePlan

Modules/Internal/Http/Controllers/Api/CorporatePlanController.php

@@ -6,6 +6,7 @@ use App\Models\CorporatePlan;
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
+use Illuminate\Validation\Rule;
 
 class CorporatePlanController extends Controller
 {
@@ -38,9 +39,23 @@ class CorporatePlanController extends Controller
      * @param Request $request
      * @return Renderable
      */
-    public function store(Request $request)
+    public function store(Request $request, $corporate_id)
     {
-        //
+        $request->validate([
+            'code' => [
+                'required',
+                Rule::unique('corporate_plans')->where('corporate_id', $corporate_id)
+            ],
+            'name' => 'required'
+        ]);
+
+        $newCorporatePlan = CorporatePlan::create([
+            'corporate_id' => $corporate_id,
+            'code' => $request->code,
+            'name' => $request->name,
+        ]);
+
+        return $newCorporatePlan;
     }
 
     /**
@@ -58,9 +73,11 @@ class CorporatePlanController extends Controller
      * @param int $id
      * @return Renderable
      */
-    public function edit($id)
+    public function edit($corporate_id, $id)
     {
-        return view('internal::edit');
+        $corporatePlan = CorporatePlan::findOrFail($id);
+
+        return $corporatePlan;
     }
 
     /**

Modules/Internal/Routes/api.php

@@ -42,7 +42,9 @@ Route::prefix('internal')->group(function () {
         Route::post('corporates/{corporate_id}/benefits/import', [BenefitController::class, 'memberBenefitImport']);
 
         Route::get('corporates/{corporate_id}/corporate-plans', [CorporatePlanController::class, 'index']);
-
+        Route::post('corporates/{corporate_id}/corporate-plans', [CorporatePlanController::class, 'store']);
+        Route::get('corporates/{corporate_id}/corporate-plans/{id}/edit', [CorporatePlanController::class, 'edit']);
+        
         Route::get('corporates/{corporate_id}/corporate-benefits', [CorporateBenefitController::class, 'index']);
     });
 });

app/Models/CorporatePlan.php

@@ -13,6 +13,8 @@ class CorporatePlan extends Model
         'corporate_id',
         'code',
         'name',
+        'description',
+        'active',
     ];
 
     public function corporate()

database/migrations/2022_07_07_040543_create_corporate_plans_table.php

@@ -18,12 +18,16 @@ return new class extends Migration
             $table->foreignId('corporate_id')->nullable()->index();
             $table->string('code')->index();
             $table->string('name')->nullable();
+            $table->text('description')->nullable();
+            $table->boolean('active')->default(true);
             $table->timestamps();
             $table->softDeletes();
             
             $table->foreignId('created_by')->nullable()->index();
             $table->foreignId('updated_by')->nullable()->index();
             $table->foreignId('deleted_by')->nullable()->index();
+
+            $table->unique(["corporate_id", "code"], 'corporate_plans_unique');
         });
     }
 

frontend/dashboard/package.json

@@ -56,7 +56,7 @@
     "history": "^5.3.0",
     "jsx-runtime": "^1.2.0",
     "lodash": "^4.17.21",
-    "notistack": "^2.0.4",
+    "notistack": "^3.0.0-alpha.7",
     "nprogress": "^0.2.0",
     "numeral": "^2.0.6",
     "react": "^17.0.2",

frontend/dashboard/pnpm-lock.yaml

@@ -44,7 +44,7 @@ specifiers:
   history: ^5.3.0
   jsx-runtime: ^1.2.0
   lodash: ^4.17.21
-  notistack: ^2.0.4
+  notistack: ^3.0.0-alpha.7
   nprogress: ^0.2.0
   numeral: ^2.0.6
   prettier: ^2.6.2
@@ -88,7 +88,7 @@ dependencies:
   history: 5.3.0
   jsx-runtime: 1.2.0
   lodash: 4.17.21
-  notistack: 2.0.5_k22khpnjqxywh7vt4mxfep5lqy
+  notistack: 3.0.0-alpha.7_sfoxds7t5ydpegc3knd667wn6m
   nprogress: 0.2.0
   numeral: 2.0.6
   react: 17.0.2
@@ -4030,6 +4030,12 @@ packages:
       slash: 3.0.0
     dev: true
 
+  /goober/2.1.10:
+    resolution: {integrity: sha512-7PpuQMH10jaTWm33sQgBQvz45pHR8N4l3Cu3WMGEWmHShAcTuuP7I+5/DwKo39fwti5A80WAjvqgz6SSlgWmGA==}
+    peerDependencies:
+      csstype: ^3.0.10
+    dev: false
+
   /graceful-fs/4.2.10:
     resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
     dev: true
@@ -4532,27 +4538,19 @@ packages:
   /node-releases/2.0.4:
     resolution: {integrity: sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==}
 
-  /notistack/2.0.5_k22khpnjqxywh7vt4mxfep5lqy:
+  /notistack/3.0.0-alpha.7_sfoxds7t5ydpegc3knd667wn6m:
-    resolution: {integrity: sha512-Ig2T1Muqkc1PaSQcEDrK7diKv6cBxw02Iq6uv074ySfgq524TV5lK41diAb6OSsaiWfp3aRt+T3+0MF8m2EcJQ==}
+    resolution: {integrity: sha512-H/L/MyDBlpa0+9+4mp4p10WScDobpPkvWy6naBtAVDgSlCynaSGLitQZ0xHxtN7G7+dCyOBDqy1frCOPQHvOig==}
+    engines: {node: '>=12.0.0', npm: '>=6.0.0'}
     peerDependencies:
-      '@emotion/react': ^11.4.1
-      '@emotion/styled': ^11.3.0
-      '@mui/material': ^5.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@emotion/react':
-        optional: true
-      '@emotion/styled':
-        optional: true
     dependencies:
-      '@emotion/react': 11.9.0_citxzijaigt45he3z6kuy2ivbq
-      '@emotion/styled': 11.8.1_3mkbovqfrbpc53bljqhapolzfu
-      '@mui/material': 5.8.0_zdaquy43folvhsznh4trclztdq
       clsx: 1.1.1
-      hoist-non-react-statics: 3.3.2
+      goober: 2.1.10
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
+    transitivePeerDependencies:
+      - csstype
     dev: false
 
   /nprogress/0.2.0:

frontend/dashboard/src/@types/corporates.ts

@@ -41,16 +41,18 @@ export type Policy = {
   end: string | Date;
 }
 
-export type Plan = {
+export type CorporatePlan = {
   id: number;
   corporate_id: number;
   code: string;
   name: string;
+  description: string | null;
+  active: boolean | number;
 }
 
-export type PlanConfig = {
+export type Plan = {
   id: number;
-  corporate_plan: Plan | null;
+  corporate_plan: CorporatePlan | null;
   service_code: string;
   corporate_plan_id: string;
   code: string;
@@ -101,7 +103,7 @@ export type PlanConfig = {
   max_surgery_periode_days: string;
 }
 
-export type MemberBenefit = {
+export type Benefit = {
   service_code : string;
   plan_code : string;
   benefit_code : string;

frontend/dashboard/src/pages/Corporates/Benefit/Create.tsx

@@ -16,7 +16,7 @@ import { useMemo, useState } from 'react';
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   const NewDivisionSchema = Yup.object().shape({
     name: Yup.string().required('Name is required'),

frontend/dashboard/src/pages/Corporates/Benefit/Index.tsx

@@ -11,7 +11,7 @@ import DivisionsList from "./List";
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   const pageTitle = 'Benefit';
   return (

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

@@ -16,7 +16,7 @@ import { LaravelPaginatedData } from '../../../@types/paginated-data';
 
 export default function PlanList() {
   const { themeStretch } = useSettings();
-  const { id } = useParams();
+  const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   
   function SearchInput(props: any) {

frontend/dashboard/src/pages/Corporates/CorporateBenefit/Create.tsx

@@ -16,7 +16,7 @@ import { useMemo, useState } from 'react';
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   const NewDivisionSchema = Yup.object().shape({
     name: Yup.string().required('Name is required'),

frontend/dashboard/src/pages/Corporates/CorporateBenefit/Index.tsx

@@ -11,7 +11,7 @@ import DivisionsList from "./List";
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   const pageTitle = 'Corporate Benefit';
   return (

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

@@ -16,7 +16,7 @@ import { LaravelPaginatedData } from '../../../@types/paginated-data';
 
 export default function PlanList() {
   const { themeStretch } = useSettings();
-  const { id } = useParams();
+  const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   
   function SearchInput(props: any) {

frontend/dashboard/src/pages/Corporates/CorporatePlan/Create.tsx

@@ -1,247 +0,0 @@
-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>
-  );
-}

frontend/dashboard/src/pages/Corporates/CorporatePlan/CreateUpdate.tsx

@@ -0,0 +1,64 @@
+
+import { useNavigate, useParams } from "react-router-dom";
+import HeaderBreadcrumbs from "../../../components/HeaderBreadcrumbs";
+import Page from "../../../components/Page";
+import useSettings from "../../../hooks/useSettings";
+import { useEffect, useMemo, useState } from 'react';
+import axios from '../../../utils/axios';
+import { useSnackbar } from 'notistack';
+import CorporatePlanForm from './Form';
+import { CorporatePlan } from '../../../@types/corporates';
+
+
+
+export default function PlanCreate() {
+  const { themeStretch } = useSettings();
+  const { corporate_id, id } = useParams();
+  const [ currentCorporatePlan, setCurrentCorporatePlan ] = useState<CorporatePlan>();
+  const navigate = useNavigate();
+
+  const isEdit = !!id;
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/corporates/'+corporate_id+'/corporate-plans/'+id+'/edit')
+        .then((res) => {
+          setCurrentCorporatePlan(res.data);
+        })
+        .catch((err) => {
+          if (err.response.status === 404) {
+            navigate('/404');
+          }
+        })
+    }
+  }, [corporate_id, id]);
+
+
+  return (
+    <Page title="Create Corporate Plan">
+      <HeaderBreadcrumbs
+        heading={'Create Corporate Plan'}
+        links={[
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+corporate_id,
+          },
+          {
+            name: 'Corporate Plans',
+            href: '/corporates/'+corporate_id+'/corporate-plans',
+          },
+          {
+            name: !isEdit ? 'Create' : 'Edit',
+            href: '/corporates/'+corporate_id+'/corporate-plans/'+id,
+          },
+        ]}
+      />
+
+      <CorporatePlanForm isEdit={isEdit} currentCorporatePlan={currentCorporatePlan}/>
+    </Page>
+  );
+}

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

@@ -0,0 +1,131 @@
+import * as Yup from 'yup';
+import { LoadingButton } from "@mui/lab";
+import { Card, Grid, Stack, Typography } from "@mui/material";
+import { CorporatePlan } from "../../../@types/corporates";
+import { FormProvider, RHFSwitch, RHFTextField } from "../../../components/hook-form";
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useSnackbar } from 'notistack';
+import { useNavigate, useParams } from 'react-router-dom';
+import axios from '../../../utils/axios';
+
+type Props = {
+  isEdit: boolean;
+  currentCorporatePlan?: CorporatePlan;
+};
+
+export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Props) {
+
+  const { enqueueSnackbar } = useSnackbar();
+  const navigate = useNavigate();
+  const { corporate_id } = useParams();
+
+  const NewCorporatePlanSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+    code: Yup.string().required('Corporate Code is required'),
+  });
+
+  const defaultValues = useMemo(
+    () => ({
+      name: currentCorporatePlan?.name || '',
+      code: currentCorporatePlan?.code || '',
+      active: currentCorporatePlan?.active === 1 ? true : false,
+    }),
+    [currentCorporatePlan]
+  );
+
+  useEffect(() => {
+    if (isEdit && currentCorporatePlan) {
+      reset(defaultValues);
+    }
+    if (!isEdit) {
+      reset(defaultValues);
+    }
+  }, [isEdit, currentCorporatePlan]);
+
+  const methods = useForm({
+    resolver: yupResolver(NewCorporatePlanSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    watch,
+    control,
+    setValue,
+    getValues,
+    setError,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+
+  const onSubmit = async (data: any) => {
+    console.log('IS EDIT', isEdit);
+    if (!isEdit) {
+      await axios
+      .post('/corporates/' + corporate_id + '/corporate-plans', data)
+      .then((res) => {
+        enqueueSnackbar('Corporate Plan created successfully', { variant: 'success' });
+      })
+      .then((res) => {
+        navigate('/corporates/' + corporate_id + '/corporate-plans',  { replace: true });
+      })
+      .catch(({ response }) => {
+        if (response.status === 422) {
+          for (const [key, value] of Object.entries(response.data.errors)) { 
+            setError(key, { message: value[0] });
+            enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
+          }
+        }
+        else {
+          enqueueSnackbar('Create Failed : '+ response.data.message, { variant: 'error' });
+        }
+      });
+    } else {
+      console.log('EDITING')
+      await axios
+      .put('/corporates/' + corporate_id + '/corporate-plans/' + currentCorporatePlan?.id , data)
+      .then((res) => {
+        enqueueSnackbar('Corporate Plan created successfully', { variant: 'success' });
+      })
+      .then((res) => {
+        navigate('/corporates/' + corporate_id + '/corporate-plans/' + currentCorporatePlan?.id ,  { replace: true });
+      })
+      .catch(({ response }) => {
+        enqueueSnackbar('Update Failed : '+ response.data.message, { variant: 'error' });
+      });
+    }
+  };
+
+  return (
+    <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        <Grid container spacing={2}>
+          <Grid item xs={8}>
+            <Card sx={{ p: 2 }}>
+                <Stack spacing={3}>
+
+                  <Typography variant="h6">Corporate Plan Detail</Typography>
+
+                  <RHFTextField name="name" label="Name" />
+
+                  <RHFTextField name="code" label="Code" />
+
+                  <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+                    Create Corporate Plan
+                  </LoadingButton>
+
+                </Stack>
+            </Card>
+          </Grid>
+          <Grid item xs={4}>
+            <Card sx={{ p:2 }}>
+
+            <RHFSwitch name="active" label="Active" />
+              </Card>
+          </Grid>
+        </Grid>
+      </FormProvider>
+  );
+}

frontend/dashboard/src/pages/Corporates/CorporatePlan/Index.tsx

@@ -11,7 +11,7 @@ import DivisionsList from "./List";
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   return (
     <Page title="Corporate Plan">
@@ -25,11 +25,11 @@ export default function Divisions() {
           },
           {
             name: 'Corporate Name',
-            href: '/corporates/'+id,
+            href: '/corporates/'+corporate_id,
           },
           {
             name: 'Corporate Plan',
-            href: '/corporates/'+id+'/divisions',
+            href: '/corporates/'+corporate_id+'/corporate-plans',
           },
         ]}
       />

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

@@ -8,16 +8,17 @@ import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
 import React, { Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
-import { Plan } from '../../../@types/corporates';
+import { CorporatePlan } from '../../../@types/corporates';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
 
 export default function PlanList() {
   const { themeStretch } = useSettings();
-  const { id } = useParams();
+  const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
   
   function SearchInput(props: any) {
      // SEARCH
@@ -47,7 +48,7 @@ export default function PlanList() {
   }
 
   // Called on every row to map the data to the columns
-  function createData( plan: Plan ): Plan {
+  function createData( plan: CorporatePlan ): CorporatePlan {
     return {
       ...plan,
     }
@@ -75,7 +76,7 @@ export default function PlanList() {
           <TableCell align="left">{row.name}</TableCell>
           <TableCell align="left">{row.description}</TableCell>
           <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
-          <TableCell align="right"><Button variant="outlined" color="success" size="small">Edit</Button></TableCell>
+          <TableCell align="right"><Link to={`/corporates/${row.corporate_id}/corporate-plans/${row.id}/edit`}><Button variant="outlined" color="success" size="small">Edit</Button></Link></TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
@@ -144,7 +145,7 @@ export default function PlanList() {
   const loadDataTableData = async (appliedFilter = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/corporates/'+id+'/corporate-plans', { params: filter });
+    const response = await axios.get('/corporates/'+corporate_id+'/corporate-plans', { params: filter });
     // console.log(response.data);
     setDataTableLoading(false);
 
@@ -168,13 +169,15 @@ export default function PlanList() {
     <Stack>
         <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
           <SearchInput onSearch={applyFilter}/>
+          <Link to={`/corporates/${corporate_id}/corporate-plans/create`}>
           <Button
+            component="button"
             id="upload-button"
             variant='outlined'
             startIcon={<AddIcon />} sx={{ p: 1.8 }}
           >
             Create
-          </Button>
+          </Button></Link>
         </Stack>
 
         <Card>

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

@@ -10,7 +10,7 @@ type Props = {
 export default function CorporateTabNavigations({ position }: Props) {
   const theme = useTheme();
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   const [currentTab, setCurrentTab] = React.useState(0);
 
@@ -71,7 +71,7 @@ export default function CorporateTabNavigations({ position }: Props) {
       allowScrollButtonsMobile
       aria-label="scrollable force tabs example"
     >
-      {mainTabItems.map((tabItem, index) => (<Tab key={index} label={(<Link to={"/corporates/"+id+"/"+mainTabItems[index].path} style={{ textDecoration: 'none', color: 'black' }}>{tabItem.label}</Link>)} />))}
+      {mainTabItems.map((tabItem, index) => (<Tab key={index} label={(<Link to={"/corporates/"+corporate_id+"/"+mainTabItems[index].path} style={{ textDecoration: 'none', color: 'black' }}>{tabItem.label}</Link>)} />))}
     </Tabs>
   )
 }

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

@@ -14,25 +14,20 @@ import { Corporate } from '../../@types/corporates';
 
 export default function Create() {
   const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
 
-  const { id } = useParams();
+  const isEdit = corporate_id ? true : false;
-
-  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')
+      axios.get('/corporates/'+corporate_id+'/edit')
         .then((res) => {
           setCurrentCorporate(res.data);
         })
     }
-  }, [id]);
+  }, [corporate_id]);
 
   return (
     <Page title="Membership: Create a new corporate">

frontend/dashboard/src/pages/Corporates/Division/Create.tsx

@@ -16,7 +16,7 @@ import { useMemo, useState } from 'react';
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   const NewDivisionSchema = Yup.object().shape({
     name: Yup.string().required('Name is required'),

frontend/dashboard/src/pages/Corporates/Division/Index.tsx

@@ -11,7 +11,7 @@ import DivisionsList from "./List";
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   return (
     <Page title="Division List">

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

@@ -190,7 +190,7 @@ export default function DivisionsList() {
       alert('No file selected')
   }
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   return (
     <Stack>

frontend/dashboard/src/pages/Corporates/Member/Index.tsx

@@ -11,7 +11,7 @@ import DivisionsList from "./List";
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   return (
     <Page title="Division List">

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

@@ -190,7 +190,7 @@ export default function DivisionsList() {
       alert('No file selected')
   }
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   return (
     <Stack>

frontend/dashboard/src/pages/Corporates/Plan/Create.tsx

@@ -16,7 +16,7 @@ import { useMemo, useState } from 'react';
 export default function PlanCreate() {
   const { themeStretch } = useSettings();
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   const NewDivisionSchema = Yup.object().shape({
     name: Yup.string().required('Name is required'),

frontend/dashboard/src/pages/Corporates/Plan/Index.tsx

@@ -11,7 +11,7 @@ import DivisionsList from "./List";
 export default function Divisions() {
   const { themeStretch } = useSettings();
 
-  const { id } = useParams();
+  const { corporate_id } = useParams();
 
   return (
     <Page title="Corporate Plan">

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

@@ -16,7 +16,7 @@ import { LaravelPaginatedData } from '../../../@types/paginated-data';
 
 export default function CorporatePlanList() {
   const { themeStretch } = useSettings();
-  const { id } = useParams();
+  const { corporate_id } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
   
   function SearchInput(props: any) {

frontend/dashboard/src/routes/index.tsx

@@ -88,47 +88,55 @@ export default function Router() {
           element: <CorporateCreate />,
         },
         {
-          path: 'corporates/:id',
+          path: 'corporates/:corporate_id',
           element: <CorporateShow />,
         },
         {
-          path: 'corporates/:id/edit',
+          path: 'corporates/:corporate_id/edit',
           element: <CorporateCreate />,
         },
         {
-          path: 'corporates/:id/divisions',
+          path: 'corporates/:corporate_id/divisions',
           element: <CorporateDivisions />,
         },
         {
-          path: 'corporates/:id/divisions/create',
+          path: 'corporates/:corporate_id/divisions/create',
           element: <CorporateDivisionsCreate />,
         },
         {
-          path: 'corporates/:id/members',
+          path: 'corporates/:corporate_id/members',
           element: <CorporateMembers />,
         },
         {
-          path: 'corporates/:id/plans/create',
+          path: 'corporates/:corporate_id/plans/create',
           element: <PlanCreate />,
         },
         {
-          path: 'corporates/:id/plans',
+          path: 'corporates/:corporate_id/plans',
           element: <Plans />,
         },
         {
-          path: 'corporates/:id/corporate-plans',
+          path: 'corporates/:corporate_id/corporate-plans/create',
+          element: <CorporatePlanCreate />,
+        },
+        {
+          path: 'corporates/:corporate_id/corporate-plans/:id/edit',
+          element: <CorporatePlanCreate />,
+        },
+        {
+          path: 'corporates/:corporate_id/corporate-plans',
           element: <CorporatePlans />,
         },
         {
-          path: 'corporates/:id/benefits/create',
+          path: 'corporates/:corporate_id/benefits/create',
           element: <BenefitCreate />,
         },
         {
-          path: 'corporates/:id/benefits',
+          path: 'corporates/:corporate_id/benefits',
           element: <Benefits />,
         },
         {
-          path: 'corporates/:id/corporate-benefits',
+          path: 'corporates/:corporate_id/corporate-benefits',
           element: <CorporateBenefits />,
         },
       ]
@@ -177,7 +185,7 @@ const Members = Loadable(lazy(() => import('../pages/Members/Index')));
 const MedicinesCreate = Loadable(lazy(() => import('../pages/Medicines/Create')));
 
 const Corporate = Loadable(lazy(() => import('../pages/Corporates/Index')));
-const CorporateCreate = Loadable(lazy(() => import('../pages/Corporates/Create')));
+const CorporateCreate = Loadable(lazy(() => import('../pages/Corporates/CreateUpdate')));
 const CorporateShow = Loadable(lazy(() => import('../pages/Corporates/Show')));
 
 const CorporateDivisions = Loadable(lazy(() => import('../pages/Corporates/Division/Index')));
@@ -185,13 +193,13 @@ const CorporateDivisionsCreate = Loadable(lazy(() => import('../pages/Corporates
 
 const CorporateMembers = Loadable(lazy(() => import('../pages/Corporates/Member/Index')));
 
-const BenefitCreate = Loadable(lazy(() => import('../pages/Corporates/Benefit/Create')));
+const BenefitCreate = Loadable(lazy(() => import('../pages/Corporates/CorporateBenefit/Create')));
-const Benefits = Loadable(lazy(() => import('../pages/Corporates/Benefit/Index')));
+const Benefits = Loadable(lazy(() => import('../pages/Corporates/CorporateBenefit/Index')));
 
-const CorporateBenefitsCreate = Loadable(lazy(() => import('../pages/Corporates/CorporateBenefit/Create')));
+const CorporateBenefitsCreate = Loadable(lazy(() => import('../pages/Corporates/Benefit/Create')));
-const CorporateBenefits = Loadable(lazy(() => import('../pages/Corporates/CorporateBenefit/Index')));
+const CorporateBenefits = Loadable(lazy(() => import('../pages/Corporates/Benefit/Index')));
 
-// const PlanCreate = Loadable(lazy(() => import('../pages/Corporates/CorporatePlan/Create')));
+const CorporatePlanCreate = Loadable(lazy(() => import('../pages/Corporates/CorporatePlan/CreateUpdate')));
 const CorporatePlans = Loadable(lazy(() => import('../pages/Corporates/CorporatePlan/Index')));
 
 const PlanCreate = Loadable(lazy(() => import('../pages/Corporates/Plan/Create')));