Fix Division

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

@@ -0,0 +1,118 @@
+<?php
+
+namespace Modules\Internal\Http\Controllers\Api;
+
+use App\Models\CorporateDivision;
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Illuminate\Validation\Rule;
+
+class DivisionController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     * @return Renderable
+     */
+    public function index(Request $request, $corporate_id)
+    {
+        $benefits = CorporateDivision::query()
+                    ->filter($request->all())
+                    ->where('corporate_id', $corporate_id)
+                    ->paginate(0)
+                    ->appends($request->all());
+        
+        return $benefits;
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     * @return Renderable
+     */
+    public function create()
+    {
+        return view('internal::create');
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     * @param Request $request
+     * @return Renderable
+     */
+    public function store(Request $request, $corporate_id)
+    {
+        $request->validate([
+            'code' => [
+                'required',
+                Rule::unique('corporate_plans')->where('corporate_id', $corporate_id)
+            ],
+            'name' => 'required'
+        ]);
+
+        $newCorporatePlan = CorporateDivision::create([
+            'corporate_id' => $corporate_id,
+            'code' => $request->code,
+            'name' => $request->name,
+        ]);
+
+        return $newCorporatePlan;
+    }
+
+    /**
+     * Show the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function show($id)
+    {
+        return view('internal::show');
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function edit($corporate_id, $id)
+    {
+        $corporatePlan = CorporateDivision::findOrFail($id);
+
+        return $corporatePlan;
+    }
+
+    /**
+     * Update the specified resource in storage.
+     * @param Request $request
+     * @param int $id
+     * @return Renderable
+     */
+    public function update(Request $request, $corporate_id, $id)
+    {
+        $corporatePlan = CorporateDivision::findOrFail($id);
+        $request->validate([
+            'code' => [
+                'required',
+                Rule::unique('corporate_plans')->where('corporate_id', $corporate_id)->ignore($corporatePlan->id)
+            ],
+            'name' => 'required'
+        ]);
+
+        $corporatePlan->fill([
+            'code' => $request->code,
+            'name' => $request->name,
+            'active' => $request->active,
+        ])->save();
+
+        return $corporatePlan;
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     * @param int $id
+     * @return Renderable
+     */
+    public function destroy($id)
+    {
+        //
+    }
+}

Modules/Internal/Routes/api.php

@@ -6,6 +6,7 @@ use Modules\Internal\Http\Controllers\Api\BenefitController;
 use Modules\Internal\Http\Controllers\Api\CorporateBenefitController;
 use Modules\Internal\Http\Controllers\Api\CorporateController;
 use Modules\Internal\Http\Controllers\Api\CorporatePlanController;
+use Modules\Internal\Http\Controllers\Api\DivisionController;
 use Modules\Internal\Http\Controllers\Api\PlanController;
 
 /*
@@ -51,5 +52,10 @@ Route::prefix('internal')->group(function () {
 
         Route::get('corporates/{corporate_id}/benefits', [BenefitController::class, 'index']);
         Route::post('corporates/{corporate_id}/benefits/import', [BenefitController::class, 'memberBenefitImport']);
+
+        Route::get('corporates/{corporate_id}/divisions', [DivisionController::class, 'index']);
+        Route::post('corporates/{corporate_id}/divisions', [DivisionController::class, 'store']);
+        Route::get('corporates/{corporate_id}/divisions/{id}/edit', [DivisionController::class, 'edit']);
+        Route::put('corporates/{corporate_id}/divisions/{id}', [DivisionController::class, 'update']);
     });
 });

app/Models/CorporateDivision.php

@@ -8,4 +8,26 @@ use Illuminate\Database\Eloquent\Model;
 class CorporateDivision extends Model
 {
     use HasFactory;
+
+    protected $fillable = [
+        'corporate_id',
+        'code',
+        'name',
+        'description',
+        'active',
+    ];
+
+    public function corporate()
+    {
+        return $this->belongsTo(Corporate::class);
+    }
+
+    public function scopeFilter($query, array $filters)
+    {
+        $query->when($filters['search'] ?? false, function ($query, $search) {
+            return $query
+                    ->where('code', 'like', "%" . $search . "%")
+                    ->orWhere('name', 'like', "%" . $search . "%");
+        });
+    }
 }

database/migrations/2022_06_16_045441_create_corporate_divisions_table.php

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

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

@@ -0,0 +1,5 @@
+// ----------------------------------------------------------------------
+
+export type Member = {
+  
+};

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

@@ -37,7 +37,7 @@ export default function CorporateTabNavigations({ position }: Props) {
     },
     {
       'path' : 'divisions',
-      'label': 'Divisions',
+      'label': 'Division',
     },
     {
       'path' : 'members',

frontend/dashboard/src/pages/Corporates/Division/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+'/divisions/'+id+'/edit')
+        .then((res) => {
+          setCurrentCorporatePlan(res.data);
+        })
+        .catch((err) => {
+          if (err.response.status === 404) {
+            navigate('/404');
+          }
+        })
+    }
+  }, [corporate_id, id]);
+
+
+  return (
+    <Page title="Create Corporate Division">
+      <HeaderBreadcrumbs
+        heading={'Create Corporate Division'}
+        links={[
+          {
+            name: 'Corporates',
+            href: '/corporates',
+          },
+          {
+            name: 'Corporate Name',
+            href: '/corporates/'+corporate_id,
+          },
+          {
+            name: 'Division',
+            href: '/corporates/'+corporate_id+'/divisions',
+          },
+          {
+            name: !isEdit ? 'Create' : 'Edit',
+            href: '/corporates/'+corporate_id+'/divisions/'+id,
+          },
+        ]}
+      />
+
+      <CorporatePlanForm isEdit={isEdit} currentCorporatePlan={currentCorporatePlan}/>
+    </Page>
+  );
+}

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

@@ -0,0 +1,129 @@
+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) => {
+    if (!isEdit) {
+      await axios
+      .post('/corporates/' + corporate_id + '/divisions', data)
+      .then((res) => {
+        enqueueSnackbar('Division created successfully', { variant: 'success' });
+      })
+      .then((res) => {
+        navigate('/corporates/' + corporate_id + '/divisions',  { 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 {
+      await axios
+        .put('/corporates/' + corporate_id + '/divisions/' + currentCorporatePlan?.id , data)
+        .then((res) => {
+          enqueueSnackbar('Division updated successfully', { variant: 'success' });
+        })
+        .then((res) => {
+          navigate('/corporates/' + corporate_id + '/divisions/' ,  { 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">Division Detail</Typography>
+
+                  <RHFTextField name="name" label="Name" />
+
+                  <RHFTextField name="code" label="Code" />
+
+                  <LoadingButton type="submit" variant="contained" size="large" fullWidth={true} loading={isSubmitting}>
+                    { isEdit? 'Update' : 'Create' } 
+                  </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/Division/Index.tsx

@@ -14,23 +14,22 @@ export default function Divisions() {
   const { corporate_id } = useParams();
 
   return (
-    <Page title="Division List">
+    <Page title="Division">
 
       <HeaderBreadcrumbs
-        heading={'Division List'}
+        heading={'Division'}
         links={[
-          { name: 'Dashboard', href: '/dashboard' },
           {
             name: 'Corporates',
             href: '/corporates',
           },
           {
             name: 'Corporate Name',
-            href: '/corporates/'+id,
+            href: '/corporates/'+corporate_id,
           },
           {
-            name: 'Divisions',
+            name: 'Division',
-            href: '/corporates/'+id+'/divisions',
+            href: '/corporates/'+corporate_id+'/divisions',
           },
         ]}
       />

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

@@ -1,29 +1,56 @@
 // @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 { 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 PublishIcon from '@mui/icons-material/Publish';
 import AddIcon from '@mui/icons-material/Add';
+import UploadIcon from '@mui/icons-material/Upload';
+import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
+import React, { Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 // components
-import Page from '../../../components/Page';
 import axios from '../../../utils/axios';
-import useAuth from '../../../hooks/useAuth';
+import { CorporatePlan } from '../../../@types/corporates';
-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() {
+export default function PlanList() {
   const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+  
+  function SearchInput(props: any) {
+     // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState("");
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? ''
+      setSearchText(newSearchText);
+    }
+
+    const handleSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  {
+      // console.log('Search Input: useEffect')
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSubmit} style={{ width: '100%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
+    );
+  }
 
   // Called on every row to map the data to the columns
-  function createData( corporate: Corporate ): Corporate {
+  function createData( plan: CorporatePlan ): CorporatePlan {
     return {
-      ...corporate,
+      ...plan,
     }
   }
 
@@ -44,17 +71,25 @@ export default function DivisionsList() {
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
           </TableCell>
+          <TableCell align="left">{row.id}</TableCell>
           <TableCell align="left">{row.code}</TableCell>
           <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"><Link to={`/corporates/${row.corporate_id}/divisions/${row.id}/edit`}><Button variant="outlined" color="success" size="small">Edit</Button></Link></TableCell>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
             <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ margin: 1 }}>
+              <Box sx={{ borderBottom: 1 }}>
+                <Typography variant="body2" gutterBottom component="div">
+                  No Extra Data
+                </Typography>
+              </Box>
+            {false && <Box sx={{ margin: 1 }}>
                 <Typography variant="h6" gutterBottom component="div">
-                  History
+                  Rules
                 </Typography>
                 <Table size="small" aria-label="purchases">
                   <TableHead>
@@ -66,27 +101,23 @@ export default function DivisionsList() {
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {row.history ? row.history.map((historyRow) => (
+                    {/* {row.history ? row.history.map((historyRow) => ( */}
-                      <TableRow key={historyRow?.date}>
+                      <TableRow key={row.id}>
-                        <TableCell component="th" scope="row">
+                        <TableCell component="th" scope="row">{row.start} - {row.end}</TableCell>
-                          {historyRow?.date}
+                        <TableCell>{row.start}</TableCell>
-                        </TableCell>
+                        <TableCell align="right">{row.start}</TableCell>
-                        <TableCell>{historyRow?.customerId}</TableCell>
+                        <TableCell align="right">{row.start}</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>
+              </Box>}
             </Collapse>
           </TableCell>
         </TableRow>
@@ -111,98 +142,43 @@ export default function DivisionsList() {
     total: 0
   });
 
-  const loadDataTableData = async () => {
+  const loadDataTableData = async (appliedFilter = null) => {
     setDataTableLoading(true);
-    const response = await axios.get('/corporates');
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/corporates/'+corporate_id+'/divisions', { params: filter });
     // console.log(response.data);
     setDataTableLoading(false);
 
     setDataTableData(response.data);
   }
 
-  useEffect(() => {
-    loadDataTableData();
-  }, [])
-
   const headStyle = {
     fontWeight: 'bold',
   };
 
-  // FILTER SELECT 
+  const applyFilter = async (searchFilter) => {
-  const ITEM_HEIGHT = 48;
+    await loadDataTableData({ "search" : searchFilter });
-  const ITEM_PADDING_TOP = 8;
+    setSearchParams({ "search" : searchFilter });
-  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 { corporate_id } = useParams();
+  useEffect(() => {
-
+    loadDataTableData();
+  }, [])
+  
   return (
     <Stack>
         <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-              <TextField id="outlined-basic" label="Search" variant="outlined" fullWidth />
+          <SearchInput onSearch={applyFilter}/>
-            {/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
+          <Link to={`/corporates/${corporate_id}/divisions/create`}>
-            <Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
+            <Button
-              Import
+              component="button"
-            </Button> */}
+              id="upload-button"
-            <Link to={"/corporates/"+id+"/divisions/create"}>
+              variant='outlined'
-              <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
+              startIcon={<AddIcon />} sx={{ p: 1.8 }}
-            </Link>
+            >
+              Create
+            </Button>
+          </Link>
         </Stack>
 
         <Card>
@@ -211,10 +187,11 @@ export default function DivisionsList() {
           <Table aria-label="collapsible table">
             <TableBody>
               <TableRow>
-                <TableCell style={headStyle} align="left">#</TableCell>
+                <TableCell style={headStyle} align="left" />
+                <TableCell style={headStyle} align="left">ID</TableCell>
                 <TableCell style={headStyle} align="left">Code</TableCell>
                 <TableCell style={headStyle} align="left">Name</TableCell>
-                <TableCell style={headStyle} align="right">Action</TableCell>
+                <TableCell style={headStyle} align="left">Description</TableCell>
               </TableRow>
             </TableBody>
             {dataTableIsLoading ?

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

@@ -13,7 +13,7 @@ import { useMemo, useState } from 'react';
 
 
 
-export default function Divisions() {
+export default function PlanCreate() {
   const { themeStretch } = useSettings();
 
   const { corporate_id } = useParams();
@@ -111,11 +111,38 @@ export default function Divisions() {
     },
   ];
 
+  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 Division">
+    <Page title="Create Plan">
 
       <HeaderBreadcrumbs
-        heading={'Create Division'}
+        heading={'Create Plan'}
         links={[
           { name: 'Dashboard', href: '/dashboard' },
           {
@@ -127,12 +154,12 @@ export default function Divisions() {
             href: '/corporates/'+id,
           },
           {
-            name: 'Divisions',
+            name: 'Plans',
-            href: '/corporates/'+id+'/divisions',
+            href: '/corporates/'+id+'/plans',
           },
           {
             name: 'Create',
-            href: '/corporates/'+id+'/divisions/create',
+            href: '/corporates/'+id+'/plans/create',
           },
         ]}
       />
@@ -144,9 +171,17 @@ export default function Divisions() {
             <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
               <Stack spacing={3}>
 
-                <Typography variant="h6">Division Detail</Typography>
+                <Typography variant="h6">Plan Detail</Typography>
 
-                <RHFTextField name="name" label="Corporate Name" />
+                <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>
                 

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

@@ -14,23 +14,22 @@ export default function Divisions() {
   const { corporate_id } = useParams();
 
   return (
-    <Page title="Division List">
+    <Page title="Corporate Plan">
 
       <HeaderBreadcrumbs
-        heading={'Division List'}
+        heading={'Corporate Plan'}
         links={[
-          { name: 'Dashboard', href: '/dashboard' },
           {
             name: 'Corporates',
             href: '/corporates',
           },
           {
             name: 'Corporate Name',
-            href: '/corporates/'+id,
+            href: '/corporates/'+corporate_id,
           },
           {
-            name: 'Divisions',
+            name: 'Member',
-            href: '/corporates/'+id+'/divisions',
+            href: '/corporates/'+corporate_id+'/members',
           },
         ]}
       />
@@ -38,7 +37,7 @@ export default function Divisions() {
       <Grid container spacing={2}>
         <Grid item xs={8}>
           <Card>
-            <CorporateTabNavigations position={'divisions'} />
+            <CorporateTabNavigations position={'members'} />
             <DivisionsList />
           </Card>
         </Grid>

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

@@ -1,29 +1,163 @@
 // @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 { 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 PublishIcon from '@mui/icons-material/Publish';
 import AddIcon from '@mui/icons-material/Add';
+import UploadIcon from '@mui/icons-material/Upload';
+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';
 // components
-import Page from '../../../components/Page';
 import axios from '../../../utils/axios';
-import useAuth from '../../../hooks/useAuth';
+import { Plan } from '../../../@types/corporates';
-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() {
+export default function CorporatePlanList() {
   const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  
+  function SearchInput(props: any) {
+     // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState("");
+
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? ''
+      setSearchText(newSearchText);
+    }
+
+    const handleSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  {
+      // console.log('Search Input: useEffect')
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
+
+    return (
+      <form onSubmit={handleSubmit} style={{ width: '100%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
+    );
+  }
+
+  function ImportForm(props: any) {
+    // 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 = () => {
+      if (importPlan?.current) {
+        handleClose();
+        importPlan.current ? importPlan.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected')
+      }
+    }
+
+    const handleCancelImportButton = () => {
+      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/${corporate_id}/members/import`, formData )
+          .then(response => {
+            handleCancelImportButton();
+            loadDataTableData();
+            alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+          })
+          .catch(response => {
+            alert('Looks like something went wrong. Please check your data and try again. ' + response.message)
+          })
+      } else {
+        alert('No File Selected')
+      }
+    }
+    
+    return (
+      <div>
+        <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 }}>
+          <SearchInput onSearch={applyFilter}/>
+          {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
+          <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>
+        )}
+      </div>
+    );
+  }
 
   // Called on every row to map the data to the columns
-  function createData( corporate: Corporate ): Corporate {
+  function createData( member: Member ): Member {
     return {
-      ...corporate,
+      ...member,
     }
   }
 
@@ -44,17 +178,69 @@ export default function DivisionsList() {
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
           </TableCell>
+          <TableCell align="left">{row.service_code}</TableCell>
+          <TableCell align="left">{row.corporate_plan?.code}</TableCell>
           <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="left">{row.type}</TableCell>
+          <TableCell align="left">{row.start}</TableCell>
+          <TableCell align="left">{row.end}</TableCell>
+          <TableCell align="left">{row.require_referral}</TableCell>
+          <TableCell align="left">{row.referral_source}</TableCell>
+          <TableCell align="left">{row.referral_duration}</TableCell>
+          <TableCell align="left">{row.family_plan}</TableCell>
+          <TableCell align="left">{row.family_plan_share_rules}</TableCell>
+          <TableCell align="left">{row.limit_rules}</TableCell>
+          <TableCell align="left">{row.layer}</TableCell>
+          <TableCell align="left">{row.layer_conditions}</TableCell>
+          <TableCell align="left">{row.budget_type}</TableCell>
+          <TableCell align="left">{row.budget_code}</TableCell>
+          <TableCell align="left">{row.budget_conditions}</TableCell>
+          <TableCell align="left">{row.surgery_limit}</TableCell>
+          <TableCell align="left">{row.non_surgery_limit}</TableCell>
+          <TableCell align="left">{row.max_claim_limit}</TableCell>
+          <TableCell align="left">{row.max_claim_count}</TableCell>
+          <TableCell align="left">{row.area_limit}</TableCell>
+          <TableCell align="left">{row.limit_shared_plans}</TableCell>
+          <TableCell align="left">{row.limit_shared_plan_type}</TableCell>
+          <TableCell align="left">{row.cashless_percentage}</TableCell>
+          <TableCell align="left">{row.reimbursement_percentage}</TableCell>
+          <TableCell align="left">{row.digital_percentage}</TableCell>
+          <TableCell align="left">{row.co_share_m_percentage}</TableCell>
+          <TableCell align="left">{row.co_share_s_percentage}</TableCell>
+          <TableCell align="left">{row.co_share_c_percentage}</TableCell>
+          <TableCell align="left">{row.cashless_deductible}</TableCell>
+          <TableCell align="left">{row.reimbursement_deductible}</TableCell>
+          <TableCell align="left">{row.digital_deductible}</TableCell>
+          <TableCell align="left">{row.co_share_m_deductible}</TableCell>
+          <TableCell align="left">{row.co_share_s_deductible}</TableCell>
+          <TableCell align="left">{row.co_share_c_deductible}</TableCell>
+          <TableCell align="left">{row.co_share_deductible_condition}</TableCell>
+          <TableCell align="left">{row.msc}</TableCell>
+          <TableCell align="left">{row.genders}</TableCell>
+          <TableCell align="left">{row.min_age}</TableCell>
+          <TableCell align="left">{row.max_age}</TableCell>
+          <TableCell align="left">{row.rule_of_excess}</TableCell>
+          <TableCell align="left">{row.max_excess_covered}</TableCell>
+          <TableCell align="left">{row.prorate_type}</TableCell>
+          <TableCell align="left">{row.prorate_lookup}</TableCell>
+          <TableCell align="left">{row.currency}</TableCell>
+          <TableCell align="left">{row.max_surgery_reinstatement_days}</TableCell>
+          <TableCell align="left">{row.max_surgery_periode_days}</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>
         </TableRow>
         {/* COLLAPSIBLE ROW */}
         <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={10}>
             <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ margin: 1 }}>
+              <Box sx={{ borderBottom: 1 }}>
+                <Typography variant="body2" gutterBottom component="div">
+                  No Extra Data
+                </Typography>
+              </Box>
+            {false && <Box sx={{ margin: 1 }}>
                 <Typography variant="h6" gutterBottom component="div">
-                  History
+                  Rules
                 </Typography>
                 <Table size="small" aria-label="purchases">
                   <TableHead>
@@ -66,27 +252,23 @@ export default function DivisionsList() {
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {row.history ? row.history.map((historyRow) => (
+                    {/* {row.history ? row.history.map((historyRow) => ( */}
-                      <TableRow key={historyRow?.date}>
+                      <TableRow key={row.id}>
-                        <TableCell component="th" scope="row">
+                        <TableCell component="th" scope="row">{row.start} - {row.end}</TableCell>
-                          {historyRow?.date}
+                        <TableCell>{row.start}</TableCell>
-                        </TableCell>
+                        <TableCell align="right">{row.start}</TableCell>
-                        <TableCell>{historyRow?.customerId}</TableCell>
+                        <TableCell align="right">{row.start}</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>
+              </Box>}
             </Collapse>
           </TableCell>
         </TableRow>
@@ -111,99 +293,32 @@ export default function DivisionsList() {
     total: 0
   });
 
-  const loadDataTableData = async () => {
+  const loadDataTableData = async (appliedFilter = null) => {
     setDataTableLoading(true);
-    const response = await axios.get('/corporates');
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/corporates/'+corporate_id+'/plans', { params: filter });
     // console.log(response.data);
     setDataTableLoading(false);
 
     setDataTableData(response.data);
   }
 
-  useEffect(() => {
-    loadDataTableData();
-  }, [])
-
   const headStyle = {
     fontWeight: 'bold',
   };
 
-  // FILTER SELECT 
+  const applyFilter = async (searchFilter) => {
-  const ITEM_HEIGHT = 48;
+    await loadDataTableData({ "search" : searchFilter });
-  const ITEM_PADDING_TOP = 8;
+    setSearchParams({ "search" : searchFilter });
-  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 { corporate_id } = useParams();
+  useEffect(() => {
-
+    loadDataTableData();
+  }, [])
+  
   return (
     <Stack>
-        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+      <ImportForm />
-              <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 */}
@@ -211,9 +326,56 @@ export default function DivisionsList() {
           <Table aria-label="collapsible table">
             <TableBody>
               <TableRow>
-                <TableCell style={headStyle} align="left">#</TableCell>
+                <TableCell style={headStyle} align="left" />
+                <TableCell style={headStyle} align="left">Service</TableCell>
+                <TableCell style={headStyle} align="left">Plan</TableCell>
                 <TableCell style={headStyle} align="left">Code</TableCell>
-                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="left">Type</TableCell>
+                <TableCell style={headStyle} align="left">Start</TableCell>
+                <TableCell style={headStyle} align="left">End</TableCell>
+                <TableCell style={headStyle} align="left">Referral</TableCell>
+                <TableCell style={headStyle} align="left">Referral Source</TableCell>
+                <TableCell style={headStyle} align="left">Referral Duration</TableCell>
+                <TableCell style={headStyle} align="left">Family Plan</TableCell>
+                <TableCell style={headStyle} align="left">Family Sharing Overflow</TableCell>
+                <TableCell style={headStyle} align="left">Plan Limit</TableCell>
+                <TableCell style={headStyle} align="left">Layer ID</TableCell>
+                <TableCell style={headStyle} align="left">Layer Condition</TableCell>
+                <TableCell style={headStyle} align="left">Budget Type</TableCell>
+                <TableCell style={headStyle} align="left">Budget Code</TableCell>
+                <TableCell style={headStyle} align="left">Budget Condition</TableCell>
+                <TableCell style={headStyle} align="left">Surgery</TableCell>
+                <TableCell style={headStyle} align="left">Non Surgery</TableCell>
+                <TableCell style={headStyle} align="left">Max/Claim</TableCell>
+                <TableCell style={headStyle} align="left">Max Count of Claim</TableCell>
+                <TableCell style={headStyle} align="left">Area</TableCell>
+                <TableCell style={headStyle} align="left">Shared Plan</TableCell>
+                <TableCell style={headStyle} align="left">Limit Shared Type</TableCell>
+                <TableCell style={headStyle} align="left">Cashless(%)</TableCell>
+                <TableCell style={headStyle} align="left">Reimbursement(%)</TableCell>
+                <TableCell style={headStyle} align="left">Digital(%)</TableCell>
+                <TableCell style={headStyle} align="left">CoShare M(%)</TableCell>
+                <TableCell style={headStyle} align="left">CoShare S(%)</TableCell>
+                <TableCell style={headStyle} align="left">CoShare C(%)</TableCell>
+                <TableCell style={headStyle} align="left">Cashless Deductible</TableCell>
+                <TableCell style={headStyle} align="left">Reimbursement Deductible</TableCell>
+                <TableCell style={headStyle} align="left">Digital Deductible</TableCell>
+                <TableCell style={headStyle} align="left">DeductibleM</TableCell>
+                <TableCell style={headStyle} align="left">DeductibleS</TableCell>
+                <TableCell style={headStyle} align="left">DeductibleC</TableCell>
+                <TableCell style={headStyle} align="left">CoShare & Deductible Condition</TableCell>
+                <TableCell style={headStyle} align="left">MSC</TableCell>
+                <TableCell style={headStyle} align="left">Gender</TableCell>
+                <TableCell style={headStyle} align="left">Min Age</TableCell>
+                <TableCell style={headStyle} align="left">Max Age</TableCell>
+                <TableCell style={headStyle} align="left">Rule of Excess</TableCell>
+                <TableCell style={headStyle} align="left">Max Excess Covered</TableCell>
+                <TableCell style={headStyle} align="left">Prorate Type</TableCell>
+                <TableCell style={headStyle} align="left">Prorate Lookup</TableCell>
+                <TableCell style={headStyle} align="left">Currency</TableCell>
+                <TableCell style={headStyle} align="left">Reinstatement Surgery</TableCell>
+                <TableCell style={headStyle} align="left">Period of Surgery</TableCell>
+                <TableCell style={headStyle} align="right">Status</TableCell>
                 <TableCell style={headStyle} align="right">Action</TableCell>
               </TableRow>
             </TableBody>

frontend/dashboard/src/routes/index.tsx

@@ -103,6 +103,10 @@ export default function Router() {
           path: 'corporates/:corporate_id/divisions/create',
           element: <CorporateDivisionsCreate />,
         },
+        {
+          path: 'corporates/:corporate_id/divisions/:id/edit',
+          element: <CorporateDivisionsCreate />,
+        },
         {
           path: 'corporates/:corporate_id/members',
           element: <CorporateMembers />,
@@ -197,7 +201,7 @@ const CorporateCreate = Loadable(lazy(() => import('../pages/Corporates/CreateUp
 const CorporateShow = Loadable(lazy(() => import('../pages/Corporates/Show')));
 
 const CorporateDivisions = Loadable(lazy(() => import('../pages/Corporates/Division/Index')));
-const CorporateDivisionsCreate = Loadable(lazy(() => import('../pages/Corporates/Division/Create')));
+const CorporateDivisionsCreate = Loadable(lazy(() => import('../pages/Corporates/Division/CreateUpdate')));
 
 const CorporateMembers = Loadable(lazy(() => import('../pages/Corporates/Member/Index')));