[WIP] Corporate Plan

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

@@ -4,11 +4,14 @@ namespace Modules\Internal\Http\Controllers\Api;
 
 use App\Imports\PlansImport;
 use App\Models\Corporate;
+use App\Models\Plan;
 use DB;
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
 use Maatwebsite\Excel\Facades\Excel;
+use Box\Spout\Reader\Common\Creator\ReaderEntityFactory;
+use Illuminate\Support\Facades\Storage;
 
 class CorporateController extends Controller
 {
@@ -19,7 +22,7 @@ class CorporateController extends Controller
     public function index()
     {
         $corporates = Corporate::query()
-                                ->paginate();
+                                ->paginate(0);
 
         return $corporates;
     }
@@ -166,18 +169,4 @@ class CorporateController extends Controller
     {
         //
     }
-
-
-    public function planImport(Request $request, $id)
-    {
-        $request->validate([
-            'file' => 'required|file|mimes:xls,xlsx,csv,txt',
-        ]);
-
-        $data = Excel::toArray(new PlansImport, $request->file('file'));
-        dd($data);
-
-        return 'OK';
-        dd($id, $request->hasFile('file'));
-    }
 }

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

@@ -0,0 +1,148 @@
+<?php
+
+namespace Modules\Internal\Http\Controllers\Api;
+
+use App\Models\Plan;
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Illuminate\Support\Facades\Storage;
+use Box\Spout\Reader\Common\Creator\ReaderEntityFactory;
+
+class PlanController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     * @return Renderable
+     */
+    public function index(Request $request, $corporate_id)
+    {
+        $plans = Plan::query()
+                    ->filter($request->all())
+                    ->whereHas('corporatePlan', function ($corporatePlan) use ($corporate_id) {
+                        $corporatePlan->where('corporate_id', $corporate_id);
+                    })
+                    ->with('corporatePlan')
+                    ->paginate(0)
+                    ->appends($request->all());
+        
+        return $plans;
+    }
+
+    /**
+     * 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)
+    {
+        //
+    }
+
+    /**
+     * 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($id)
+    {
+        return view('internal::edit');
+    }
+
+    /**
+     * Update the specified resource in storage.
+     * @param Request $request
+     * @param int $id
+     * @return Renderable
+     */
+    public function update(Request $request, $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     * @param int $id
+     * @return Renderable
+     */
+    public function destroy($id)
+    {
+        //
+    }
+
+    public function plansImport(Request $request, $corporate_id)
+    {
+        $request->validate([
+            'file' => 'required|file|mimes:xls,xlsx,csv,txt',
+        ]); 
+        $file_name = now()->getPreciseTimestamp(3).'-'.$request->file('file')->getClientOriginalName();
+        $file = $request->file('file')->storeAs('temp', $file_name);
+
+        // return false;
+
+        $reader = ReaderEntityFactory::createReaderFromFile(Storage::path('temp/'.$file_name));
+        $reader->open(Storage::path('temp/'.$file_name));
+
+        $headers_map_to_table_fields = Plan::$doc_headers_to_field_map;
+
+        $imported_plan_data = 0;
+        $failed_plan_data = [];
+        foreach ($reader->getSheetIterator() as $sheet) {
+            $doc_headers_indexes = [];
+            foreach ($sheet->getRowIterator() as $index => $row) {
+                if ($index == 1) { // First Row Must be Header
+                    foreach ($row->getCells() as $index => $cell) {
+                        $doc_headers_indexes[$index] = $cell->getValue();
+                    }
+                } else { // Next Row Should be Data
+                    $new_plan_data = [];
+                    foreach ($row->getCells() as $index => $cell) {
+                        $new_plan_data[$headers_map_to_table_fields[$doc_headers_indexes[$index]]] = $cell->getValue();
+                    }
+
+                    // $imported_plan_data[] = $new_row; // Insert to Array
+                    // Create Directly
+                    try {
+                        Plan::updateOrCreate([
+                            'code' => $new_plan_data['code']
+                        ], $new_plan_data);
+
+                        $imported_plan_data++;
+                    } catch(\Exception $e) {
+                        $failed_plan_data[] = $new_plan_data;
+                    }
+                }
+            }
+            
+            break; //only read first sheet
+        }
+        $reader->close();
+        Storage::delete('temp/'.$file_name);
+        // throw(404);
+
+        return [
+            'total_successed_row' => $imported_plan_data,
+            'total_failed_row' => count($failed_plan_data),
+            'failed_row' => $failed_plan_data
+        ];
+    }
+}

Modules/Internal/Routes/api.php

@@ -3,6 +3,7 @@
 use Modules\Internal\Http\Controllers\Api\AuthController;
 use Illuminate\Http\Request;
 use Modules\Internal\Http\Controllers\Api\CorporateController;
+use Modules\Internal\Http\Controllers\Api\PlanController;
 
 /*
 |--------------------------------------------------------------------------
@@ -32,7 +33,8 @@ Route::prefix('internal')->group(function () {
 
         Route::resource('corporates', CorporateController::class);
         // Route::post('corporates/{id}/plans', [CorporateController::class, 'planImport']);
-        Route::post('corporates/{id}/plans/import', [CorporateController::class, 'planImport']);
+        Route::get('corporates/{corporate_id}/plans', [PlanController::class, 'index']);
+        Route::post('corporates/{corporate_id}/plans/import', [PlanController::class, 'planImport']);
     });
 });
 // Route::resource('corporates', CorporateController::class);

app/Models/CorporatePlan.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class CorporatePlan extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'corporate_id',
+        'code',
+        'name',
+    ];
+
+    public function corporate()
+    {
+        return $this->belongsTo(Corporate::class);
+    }
+}

app/Models/Plan.php

@@ -8,4 +8,138 @@ use Illuminate\Database\Eloquent\Model;
 class Plan extends Model
 {
     use HasFactory;
+
+    protected $fillable = [
+        "service_code",
+        "corporate_plan_id",
+        "code",
+        "type",
+        "start",
+        "end",
+        "require_referral",
+        "referral_source",
+        "referral_duration",
+        "family_plan",
+        "family_plan_share_rules",
+        "limit_rules",
+        "layer",
+        "layer_conditions",
+        "budget_type",
+        "budget_code",
+        "budget_conditions",
+        "surgery_limit",
+        "non_surgery_limit",
+        "max_claim_limit",
+        "max_claim_count",
+        "area_limit",
+        "limit_shared_plans",
+        "limit_shared_plan_type",
+        "cashless_percentage",
+        "reimbursement_percentage",
+        "digital_percentage",
+        "co_share_m_percentage",
+        "co_share_s_percentage",
+        "co_share_c_percentage",
+        "cashless_deductible",
+        "reimbursement_deductible",
+        "digital_deductible",
+        "co_share_m_deductible",
+        "co_share_s_deductible",
+        "co_share_c_deductible",
+        "co_share_deductible_condition",
+        "msc",
+        "genders",
+        "min_age",
+        "max_age",
+        "rule_of_excess",
+        "max_excess_covered",
+        "prorate_type",
+        "prorate_lookup",
+        "currency",
+        "max_surgery_reinstatement_days",
+        "max_surgery_periode_days",
+    ];
+
+    public static $doc_headers_to_field_map = [
+        "Service"                                   => "service_code",
+        "Plan"                                      => "corporate_plan_id",
+        "Customer Plan"                             => "code",
+        "Plan Type"                                 => "type",
+        "Start Date of Plan"                        => "start",
+        "End Date of Plan"                          => "end",
+        "Referral"                                  => "require_referral",
+        "Referral Source"                           => "referral_source",
+        "Referral Duration"                         => "referral_duration",
+        "Family Plan"                               => "family_plan",
+        "Family Sharing Overflow"                   => "family_plan_share_rules",
+        "Plan Limit"                                => "limit_rules",
+        "Layer ID"                                  => "layer",
+        "Layer Condition"                           => "layer_conditions",
+        "Budget Type"                               => "budget_type",
+        "Budget Code"                               => "budget_code",
+        "Budget Condition"                          => "budget_conditions",
+        "Surgery"                                   => "surgery_limit",
+        "Non Surgery"                               => "non_surgery_limit",
+        "Max/Claim"                                 => "max_claim_limit",
+        "Max Count of Claim"                        => "max_claim_count",
+        "Area"                                      => "area_limit",
+        "Shared Plan"                               => "limit_shared_plans",
+        "Shared Plan Type"                          => "limit_shared_plan_type",
+        "Cashless(%)"                               => "cashless_percentage",
+        "Reimbursement(%)"                          => "reimbursement_percentage",
+        "Digital(%)"                                => "digital_percentage",
+        "CoShareM(%)"                               => "co_share_m_percentage",
+        "CoShareS(%)"                               => "co_share_s_percentage",
+        "CoShareC(%)"                               => "co_share_c_percentage",
+        "Cashless Deductible"                       => "cashless_deductible",
+        "Reimbursement Deductible"                  => "reimbursement_deductible",
+        "Digital Deductible"                        => "digital_deductible",
+        "DeductibleM"                               => "co_share_m_deductible",
+        "DeductibleS"                               => "co_share_s_deductible",
+        "DeductibleC"                               => "co_share_c_deductible",
+        "Co-share & Deductible Condition"           => "co_share_deductible_condition",
+        "MSC"                                       => "msc",
+        "Gender"                                    => "genders",
+        "Min Age"                                   => "min_age",
+        "Max Age"                                   => "max_age",
+        "Rule of Excess"                            => "rule_of_excess",
+        "Max Excess Covered"                        => "max_excess_covered",
+        "Prorate Type"                              => "prorate_type",
+        "Prorate Lookup"                            => "prorate_lookup",
+        "Currency"                                  => "currency",
+        "Reinstatement days for Surgery NonSurgery" => "max_surgery_reinstatement_days",
+        "Max Periode of Surgery Non Surgery"        => "max_surgery_periode_days",
+    ];
+
+    public function setStartAttribute($value)
+    {
+        return empty($valu) ? null : $value;
+    }
+
+    public function setEndAttribute($value)
+    {
+        return empty($valu) ? null : $value;
+    }
+
+    public function scopeFilter($query, array $filters)
+    {
+        $query->when($filters['search'] ?? false, function ($query, $search) {
+            return $query
+                    ->where('service_code', 'like', "%" . $search . "%")
+                    ->orWhere('code', 'like', "%" . $search . "%")
+                    ->orWhereHas('corporatePlan', function ($query) use ($search) {
+                        $query->where('code', 'like', "%" . $search . "%");
+                    });
+        });
+    }
+
+    public function corporatePlan()
+    {
+        return $this->belongsTo(CorporatePlan::class);
+    }
+
+    // public function Corporate()
+    // {
+    //     return $this->belongsTo(Corporate::class);
+    // }
 }

composer.json

@@ -6,6 +6,7 @@
     "license": "MIT",
     "require": {
         "php": "^8.0.2",
+        "box/spout": "^3.3",
         "guzzlehttp/guzzle": "^7.2",
         "laravel/framework": "^9.11",
         "laravel/sanctum": "^2.15",

composer.lock

@@ -4,8 +4,83 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "b5340b061d1a252185e034fe63f2fb0c",
+    "content-hash": "f4f7a646aaed46ea86bc501ff51dbe38",
     "packages": [
+        {
+            "name": "box/spout",
+            "version": "v3.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/box/spout.git",
+                "reference": "9bdb027d312b732515b884a341c0ad70372c6295"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/box/spout/zipball/9bdb027d312b732515b884a341c0ad70372c6295",
+                "reference": "9bdb027d312b732515b884a341c0ad70372c6295",
+                "shasum": ""
+            },
+            "require": {
+                "ext-dom": "*",
+                "ext-xmlreader": "*",
+                "ext-zip": "*",
+                "php": ">=7.2.0"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^2",
+                "phpunit/phpunit": "^8"
+            },
+            "suggest": {
+                "ext-iconv": "To handle non UTF-8 CSV files (if \"php-intl\" is not already installed or is too limited)",
+                "ext-intl": "To handle non UTF-8 CSV files (if \"iconv\" is not already installed)"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.1.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Box\\Spout\\": "src/Spout"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "Apache-2.0"
+            ],
+            "authors": [
+                {
+                    "name": "Adrien Loison",
+                    "email": "adrien@box.com"
+                }
+            ],
+            "description": "PHP Library to read and write spreadsheet files (CSV, XLSX and ODS), in a fast and scalable way",
+            "homepage": "https://www.github.com/box/spout",
+            "keywords": [
+                "OOXML",
+                "csv",
+                "excel",
+                "memory",
+                "odf",
+                "ods",
+                "office",
+                "open",
+                "php",
+                "read",
+                "scale",
+                "spreadsheet",
+                "stream",
+                "write",
+                "xlsx"
+            ],
+            "support": {
+                "issues": "https://github.com/box/spout/issues",
+                "source": "https://github.com/box/spout/tree/v3.3.0"
+            },
+            "abandoned": true,
+            "time": "2021-05-14T21:18:09+00:00"
+        },
         {
             "name": "brick/math",
             "version": "0.9.3",

database/migrations/2022_05_23_073350_create_members_table.php

@@ -15,7 +15,7 @@ return new class extends Migration
     {
         Schema::create('members', function (Blueprint $table) {
             $table->id();
-            $table->foreignId('user_id')->nullable();
+            $table->foreignId('user_id')->nullable()->index();
             $table->string('name_prefix')->nullable();
             $table->string('name');
             $table->string('name_suffix')->nullable();
@@ -25,7 +25,7 @@ return new class extends Migration
             $table->string('language')->nullable();
             $table->string('race')->nullable();
             $table->string('marital_status')->nullable();
-            $table->foreignId('principle_id')->nullable();
+            $table->foreignId('principle_id')->nullable()->index();
             $table->string('relation_with_principle')->nullable();
             $table->date('bpjs_class')->nullable();
             $table->boolean('active')->default(true);

database/migrations/2022_06_16_045441_create_corporate_divisions_table.php

@@ -15,7 +15,7 @@ return new class extends Migration
     {
         Schema::create('corporate_divisions', function (Blueprint $table) {
             $table->id();
-            $table->foreignId('corporate_id')->nullable();
+            $table->foreignId('corporate_id')->nullable()->index();
             $table->string('code');
             $table->string('name')->nullable();
             

database/migrations/2022_06_23_083834_create_plans_table.php

@@ -16,6 +16,7 @@ return new class extends Migration
         Schema::create('plans', function (Blueprint $table) {
             $table->id();
             $table->string('service_code')->index();
+            $table->string('corporate_plan_id')->index();
             $table->string('code')->index();
             $table->string('type')->nullable();
             $table->dateTime('start')->nullable();
@@ -46,9 +47,10 @@ return new class extends Migration
             $table->tinyInteger('co_share_c_percentage')->default(100)->nullable();
             $table->decimal('cashless_deductible', 15, 2)->nullable();
             $table->decimal('reimbursement_deductible', 15, 2)->nullable();
+            $table->decimal('digital_deductible', 15, 2)->nullable();
             $table->decimal('co_share_m_deductible', 15, 2)->nullable();
-            $table->decimal('co_share_s_eductible', 15, 2)->nullable();
+            $table->decimal('co_share_s_deductible', 15, 2)->nullable();
-            $table->decimal('co_share_c_eductible', 15, 2)->nullable();
+            $table->decimal('co_share_c_deductible', 15, 2)->nullable();
             $table->string('co_share_deductible_condition')->nullable();
             $table->string('msc')->nullable();
             $table->string('genders')->nullable();
@@ -59,6 +61,8 @@ return new class extends Migration
             $table->string('prorate_type')->nullable();
             $table->string('prorate_lookup')->nullable();
             $table->string('currency')->nullable();
+            $table->tinyInteger('max_surgery_reinstatement_days')->nullable();
+            $table->tinyInteger('max_surgery_periode_days')->nullable();
 
             $table->timestamps();
             $table->softDeletes();

database/migrations/2022_07_04_075238_create_files_table.php

@@ -30,7 +30,6 @@ return new class extends Migration
 
             $table->index(['fileable_id', 'fileable_type']);
             $table->index(['fileable_id', 'fileable_type', 'type']);
-            $table->timestamps();
         });
     }
 

database/migrations/2022_07_07_040543_create_corporate_plans_table.php

@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('corporate_plans', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('corporate_id')->nullable()->index();
+            $table->string('code')->index();
+            $table->string('name')->nullable();
+            $table->timestamps();
+            $table->softDeletes();
+            
+            $table->foreignId('created_by')->nullable()->index();
+            $table->foreignId('updated_by')->nullable()->index();
+            $table->foreignId('deleted_by')->nullable()->index();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('corporate_plans');
+    }
+};

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 { 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 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 ) => (
+                    {/* {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,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 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 { id } = useParams();
+  useEffect(() => {
-
+    loadDataTableData();
+  }, [])
+  
   return (
     <Stack>
-        <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
+      <ImportForm />
-            <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>
 
         <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
+    const handleSearchChange = (event: any) => {
-  function createData( corporate: Corporate ): Corporate {
+      const newSearchText = event.target.value ?? ''
-    return {
+      setSearchText(newSearchText);
-      ...corporate,
     }
-  }
 
-  // Generate the every row of the table
+    const handleSubmit = (event: any) => {
-  function Row(props: { row: ReturnType<typeof createData> }) {
+      event.preventDefault();
-    const { row } = props;
+      props.onSearch(searchText); // Trigger to Parent
-    const [open, setOpen] = React.useState(false);
+    }
+
+    useEffect(() =>  {
+      console.log('Search Input: useEffect')
+      setSearchText(searchParams.get('search') ?? '');
+    }, [searchParams])
 
     return (
-      <React.Fragment>
+      <form onSubmit={handleSubmit} style={{ width: '100%' }}>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+        <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
-          <TableCell>
+      </form>
-            <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>
     );
   }
 
-  // Dummy Default Data
+  function ImportForm(props: any) {
-  const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
+    // IMPORT
-  const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
+    // Create Button Menu
-    current_page: 1,
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    data: [],
+    const createMenu = Boolean(anchorEl);
-    path: "",
+    const importPlan = useRef<HTMLInputElement>(null) 
-    first_page_url: "",
+    const [currentImportFileName, setCurrentImportFileName] = useState(null)
-    last_page: 1,
-    last_page_url: "",
-    next_page_url: "",
-    prev_page_url: "",
-    per_page: 10,
-    from: 0,
-    to: 0,
-    total: 0
-  });
 
-  const loadDataTableData = async () => {
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setDataTableLoading(true);
+      setAnchorEl(event.currentTarget);
-    const response = await axios.get('/corporates');
+    };
-    // console.log(response.data);
-    setDataTableLoading(false);
 
-    setDataTableData(response.data);
+    const handleClose = () => {
-  }
+      setAnchorEl(null);
+    };
 
-  useEffect(() => {
+    const handleImportButton = () => {
-    loadDataTableData();
+      if (importPlan?.current) {
-  }, [])
+        handleClose();
-
+        importPlan.current ? importPlan.current.click() : console.log('No File selected');
-  const headStyle = {
+      } else {
-    fontWeight: 'bold',
+        alert('No file selected')
-  };
+      }
-
-  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 handleCancelImportButton = (event: any) => {
+    const handleCancelImportButton = () => {
-    // setCurrentImportFileName(null)
+      importPlan.current.value = "";
-    importPlan.current.value = "";
+      importPlan.current.dispatchEvent(new Event("change", { bubbles: true }));
-    // 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 handleUpload = () => {
+    const handleImportChange = (event: any) => {
-    if (importPlan.current?.files.length) {
+      if (event.target.files[0]) {
-      const formData = new FormData();
+        setCurrentImportFileName(event.target.files[0].name)
-      formData.append("file", importPlan.current?.files[0])
+      } else {
-      axios.post(`corporates/${id}/plans/import`, formData )
+        setCurrentImportFileName(null);
-    } else {
+      }
-      alert('No File Selected')
     }
-  }
 
-  return (
+    const handleUpload = () => {
-    <Stack>
+      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>