[WIP] Corporate Plan

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

@@ -40,3 +40,63 @@ export type Policy = {
   start: string | Date;
   end: string | Date;
 }
+
+export type CorporatePlan = {
+  id: number;
+  corporate_id: number;
+  code: string;
+  name: string;
+}
+
+export type Plan = {
+  id: number;
+  corporate_plan: CorporatePlan | null;
+  service_code: string;
+  corporate_plan_id: string;
+  code: string;
+  type: string;
+  start: string;
+  end: string;
+  require_referral: string;
+  referral_source: string;
+  referral_duration: string;
+  family_plan: string;
+  family_plan_share_rules: string;
+  limit_rules: string;
+  layer: string;
+  layer_conditions: string;
+  budget_type: string;
+  budget_code: string;
+  budget_conditions: string;
+  surgery_limit: string;
+  non_surgery_limit: string;
+  max_claim_limit: string;
+  max_claim_count: string;
+  area_limit: string;
+  limit_shared_plans: string;
+  limit_shared_plan_type: string;
+  cashless_percentage: string;
+  reimbursement_percentage: string;
+  digital_percentage: string;
+  co_share_m_percentage: string;
+  co_share_s_percentage: string;
+  co_share_c_percentage: string;
+  cashless_deductible: string;
+  reimbursement_deductible: string;
+  digital_deductible: string;
+  co_share_m_deductible: string;
+  co_share_s_deductible: string;
+  co_share_c_deductible: string;
+  co_share_deductible_condition: string;
+  msc: string;
+  genders: string;
+  min_age: string;
+  max_age: string;
+  rule_of_excess: string;
+  max_excess_covered: string;
+  prorate_type: string;
+  prorate_lookup: string;
+  currency: string;
+  max_surgery_reinstatement_days: string;
+  max_surgery_periode_days: string;
+}

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

@@ -39,7 +39,7 @@ export default function Divisions() {
       <Grid container spacing={2}>
         <Grid item xs={8}>
           <Card>
-            <CorporateTabNavigations position={'divisions'} />
+            <CorporateTabNavigations position={'benefits'} />
             <DivisionsList />
           </Card>
         </Grid>

frontend/dashboard/src/pages/Corporates/Benefit/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 { 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 { Plan } 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 { 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/${id}/plans/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( plan: Plan ): Plan {
     return {
-      ...corporate,
+      ...plan,
     }
   }
 
@@ -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 ) => (
-                      <TableRow key={historyRow?.date}>
-                        <TableCell component="th" scope="row">
-                          {historyRow?.date}
-                        </TableCell>
-                        <TableCell>{historyRow?.customerId}</TableCell>
-                        <TableCell align="right">{historyRow?.amount}</TableCell>
-                        <TableCell align="right">
-                          {Math.round(historyRow?.amount * 1000 * 100) / 100}
-                        </TableCell>
+                    {/* {row.history ? row.history.map((historyRow) => ( */}
+                      <TableRow key={row.id}>
+                        <TableCell component="th" scope="row">{row.start} - {row.end}</TableCell>
+                        <TableCell>{row.start}</TableCell>
+                        <TableCell align="right">{row.start}</TableCell>
+                        <TableCell align="right">{row.start}</TableCell>
                       </TableRow>
-                    ))
+                    {/* ))
                     : (
                       <TableRow>
                         <TableCell colSpan={8}>No Data</TableCell>
                       </TableRow>
                       )
-                    }
+                    } */}
                   </TableBody>
                 </Table>
-              </Box>
+              </Box>}
             </Collapse>
           </TableCell>
         </TableRow>
@@ -111,95 +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/'+id+'/plans', { params: filter });
     // console.log(response.data);
     setDataTableLoading(false);
 
     setDataTableData(response.data);
   }
 
-  useEffect(() => {
-    loadDataTableData();
-  }, [])
-
   const headStyle = {
     fontWeight: 'bold',
   };
 
-  // FILTER SELECT 
-  const ITEM_HEIGHT = 48;
-  const ITEM_PADDING_TOP = 8;
-  const MenuProps = {
-    PaperProps: {
-      style: {
-        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-        width: 250,
-      },
-    },
-  };
-
-  const names = [
-    'PLAN001',
-    'PLAN002',
-    'PLAN003',
-    'PLAN004',
-    'PLAN005',
-  ];
-  function getStyles(name: string, personName: string[], theme: Theme) {
-    return {
-      fontWeight:
-        personName.indexOf(name) === -1
-          ? theme.typography.fontWeightRegular
-          : theme.typography.fontWeightMedium,
-    };
-  }
-  
-  const theme = useTheme();
-  const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
-
-  const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
-    const {
-      target: { value },
-    } = event;
-    setPlanIdFilter(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    );
-  };
-
-  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
-  const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
-    const {
-      target: { value },
-    } = event;
-    setStatusFilter(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    );
-  };
-  // END FILTER SELECT
-  
-  // IMPORT
-  const importMember = React.useRef(null);
-  const handleImportButton = (event: any) => {
-    if (importMember?.current)
-      importMember.current ? importMember.current.click() : console.log('fuck');
-    else
-      alert('No file selected')
+  const applyFilter = async (searchFilter) => {
+    await loadDataTableData({ "search" : searchFilter });
+    setSearchParams({ "search" : searchFilter });
   }
 
-  const { id } = useParams();
-
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+  
   return (
     <Stack>
-        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-            <TextField id="outlined-basic" label="Search" variant="outlined" fullWidth />
-            <Link to={"/corporates/"+id+"/divisions/create"}>
-              <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
-            </Link>
-        </Stack>
+      <ImportForm />
 
         <Card>
         {/* The Main Table */}
@@ -207,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/pages/Corporates/CorporateTabNavigations.tsx

@@ -59,7 +59,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}>{tabItem.label}</Link>)} />))}
+      {mainTabItems.map((tabItem, index) => (<Tab key={index} label={(<Link to={"/corporates/"+id+"/"+mainTabItems[index].path} style={{ textDecoration: 'none', color: 'black' }}>{tabItem.label}</Link>)} />))}
     </Tabs>
   )
 }

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

@@ -6,184 +6,108 @@ import AddIcon from '@mui/icons-material/Add';
 import UploadIcon from '@mui/icons-material/Upload';
 import CancelIcon from '@mui/icons-material/Cancel';
 // hooks
-import React, { useEffect, useRef, useState } from 'react';
+import React, { Component, useEffect, useRef, useState } from 'react';
 import useSettings from '../../../hooks/useSettings';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 // components
 import axios from '../../../utils/axios';
-import { Corporate } from '../../../@types/corporates';
+import { Plan } from '../../../@types/corporates';
 import { LaravelPaginatedData } from '../../../@types/paginated-data';
 
-export default function DivisionsList() {
+export default function PlanList() {
   const { themeStretch } = useSettings();
+  const { id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  
+  function SearchInput(props: any) {
+     // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState("");
 
-  // Called on every row to map the data to the columns
-  function createData( corporate: Corporate ): Corporate {
-    return {
-      ...corporate,
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? ''
+      setSearchText(newSearchText);
     }
-  }
 
-  // Generate the every row of the table
-  function Row(props: { row: ReturnType<typeof createData> }) {
-    const { row } = props;
-    const [open, setOpen] = React.useState(false);
+    const handleSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    }
+
+    useEffect(() =>  {
+      console.log('Search Input: useEffect')
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
 
     return (
-      <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
-          </TableCell>
-          <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
-        </TableRow>
-        {/* COLLAPSIBLE ROW */}
-        <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
-            <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ margin: 1 }}>
-                <Typography variant="h6" gutterBottom component="div">
-                  History
-                </Typography>
-                <Table size="small" aria-label="purchases">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>Date</TableCell>
-                      <TableCell>Customer</TableCell>
-                      <TableCell align="right">Amount</TableCell>
-                      <TableCell align="right">Total price ($)</TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {row.history ? row.history.map((historyRow) => (
-                      <TableRow key={historyRow?.date}>
-                        <TableCell component="th" scope="row">
-                          {historyRow?.date}
-                        </TableCell>
-                        <TableCell>{historyRow?.customerId}</TableCell>
-                        <TableCell align="right">{historyRow?.amount}</TableCell>
-                        <TableCell align="right">
-                          {Math.round(historyRow?.amount * 1000 * 100) / 100}
-                        </TableCell>
-                      </TableRow>
-                    ))
-                    : (
-                      <TableRow>
-                        <TableCell colSpan={8}>No Data</TableCell>
-                      </TableRow>
-                      )
-                    }
-                  </TableBody>
-                </Table>
-              </Box>
-            </Collapse>
-          </TableCell>
-        </TableRow>
-      </React.Fragment>
+      <form onSubmit={handleSubmit} style={{ width: '100%' }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
+      </form>
     );
   }
 
-  // Dummy Default Data
-  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
-  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
-    current_page: 1,
-    data: [],
-    path: "",
-    first_page_url: "",
-    last_page: 1,
-    last_page_url: "",
-    next_page_url: "",
-    prev_page_url: "",
-    per_page: 10,
-    from: 0,
-    to: 0,
-    total: 0
-  });
+  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 loadDataTableData = async () => {
-    setDataTableLoading(true);
-    const response = await axios.get('/corporates');
-    // console.log(response.data);
-    setDataTableLoading(false);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
 
-    setDataTableData(response.data);
-  }
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
 
-  useEffect(() => {
-    loadDataTableData();
-  }, [])
-
-  const headStyle = {
-    fontWeight: 'bold',
-  };
-
-  const { id } = useParams();
-  
-  // SEARCH
-  const searchInput = useRef<HTMLInputElement>(null);
-  
-  // IMPORT
-  // Create Button Menu
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const createMenu = Boolean(anchorEl);
-  const importPlan = useRef<HTMLInputElement>(null) 
-  const [currentImportFileName, setCurrentImportFileName] = useState(null)
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const handleImportButton = (event: any) => {
-    if (importPlan?.current) {
-      handleClose();
-      importPlan.current ? importPlan.current.click() : console.log('No File selected');
-    } else {
-      alert('No file selected')
+    const handleImportButton = () => {
+      if (importPlan?.current) {
+        handleClose();
+        importPlan.current ? importPlan.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected')
+      }
     }
-  }
 
-  const handleCancelImportButton = (event: any) => {
-    // setCurrentImportFileName(null)
-    importPlan.current.value = "";
-    // console.log(importPlan.current?.value)
-    importPlan.current.dispatchEvent(new Event("change", { bubbles: true }));
-  }
-
-  const handleImportChange = (event: any) => {
-    if (event.target.files[0]) {
-      setCurrentImportFileName(event.target.files[0].name)
-    } else {
-      setCurrentImportFileName(null);
+    const handleCancelImportButton = () => {
+      importPlan.current.value = "";
+      importPlan.current.dispatchEvent(new Event("change", { bubbles: true }));
     }
-  }
 
-  const handleUpload = () => {
-    if (importPlan.current?.files.length) {
-      const formData = new FormData();
-      formData.append("file", importPlan.current?.files[0])
-      axios.post(`corporates/${id}/plans/import`, formData )
-    } else {
-      alert('No File Selected')
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name)
+      } else {
+        setCurrentImportFileName(null);
+      }
     }
-  }
 
-  return (
-    <Stack>
+    const handleUpload = () => {
+      if (importPlan.current?.files.length) {
+        const formData = new FormData();
+        formData.append("file", importPlan.current?.files[0])
+        axios.post(`corporates/${id}/plans/import`, formData )
+          .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 }}>
-          <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth />
+          <SearchInput onSearch={applyFilter}/>
+          {/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
           <Button
               id="import-button"
               variant='outlined'
@@ -226,6 +150,175 @@ export default function DivisionsList() {
           </Button>
         </Stack>
         )}
+      </div>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData( plan: Plan ): Plan {
+    return {
+      ...plan,
+    }
+  }
+
+  // Generate the every row of the table
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <React.Fragment>
+        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+          <TableCell>
+            <IconButton
+              aria-label="expand row"
+              size="small"
+              onClick={() => setOpen(!open)}
+            >
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.service_code}</TableCell>
+          <TableCell align="left">{row.corporate_plan?.code}</TableCell>
+          <TableCell align="left">{row.code}</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={10}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <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">
+                  Rules
+                </Typography>
+                <Table size="small" aria-label="purchases">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Date</TableCell>
+                      <TableCell>Customer</TableCell>
+                      <TableCell align="right">Amount</TableCell>
+                      <TableCell align="right">Total price ($)</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {/* {row.history ? row.history.map((historyRow) => ( */}
+                      <TableRow key={row.id}>
+                        <TableCell component="th" scope="row">{row.start} - {row.end}</TableCell>
+                        <TableCell>{row.start}</TableCell>
+                        <TableCell align="right">{row.start}</TableCell>
+                        <TableCell align="right">{row.start}</TableCell>
+                      </TableRow>
+                    {/* ))
+                    : (
+                      <TableRow>
+                        <TableCell colSpan={8}>No Data</TableCell>
+                      </TableRow>
+                      )
+                    } */}
+                  </TableBody>
+                </Table>
+              </Box>}
+            </Collapse>
+          </TableCell>
+        </TableRow>
+      </React.Fragment>
+    );
+  }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
+  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: "",
+    first_page_url: "",
+    last_page: 1,
+    last_page_url: "",
+    next_page_url: "",
+    prev_page_url: "",
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0
+  });
+
+  const loadDataTableData = async (appliedFilter = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/corporates/'+id+'/plans', { params: filter });
+    // console.log(response.data);
+    setDataTableLoading(false);
+
+    setDataTableData(response.data);
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter) => {
+    await loadDataTableData({ "search" : searchFilter });
+    setSearchParams({ "search" : searchFilter });
+  }
+
+  useEffect(() => {
+    loadDataTableData();
+  }, [])
+  
+  return (
+    <Stack>
+      <ImportForm />
 
         <Card>
         {/* The Main Table */}
@@ -233,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>