From 13542cd3c0f1fceb498687ace7fe464f385d9722 Mon Sep 17 00:00:00 2001
From: R <rajif@sismedika.com>
Date: Tue, 14 Feb 2023 12:39:51 +0700
Subject: [PATCH] [WIP] Add Claim Request

---
 .../Api/ClaimRequestController.php            |  97 ++++
 .../Http/Controllers/Api/MemberController.php |  41 ++
 .../Http/Controllers/ClaimController.php      |  83 ++++
 Modules/HospitalPortal/Routes/api.php         |  10 +
 app/Models/Benefit.php                        |   9 +
 app/Models/ClaimRequest.php                   |  52 ++
 app/Models/Member.php                         |   5 +-
 app/Models/Plan.php                           |  63 ++-
 app/Models/Service.php                        |   5 +
 app/Models/User.php                           |   3 +-
 composer.json                                 |   3 +-
 composer.lock                                 |  84 +++-
 config/app.php                                |   1 +
 config/permission.php                         | 161 +++++++
 ..._14_102144_create_claim_requests_table.php |  40 ++
 ..._02_14_112255_create_permission_tables.php | 141 ++++++
 database/seeders/DummyMemberSeeder.php        |  15 +-
 database/seeders/RoleSeeder.php               |  30 ++
 frontend/hospital-portal/package.json         |   7 +-
 frontend/hospital-portal/pnpm-lock.yaml       | 133 +++---
 .../hospital-portal/src/_mock/_analytics.tsx  |   2 +-
 frontend/hospital-portal/src/_mock/_plans.tsx |   2 +-
 .../src/components/BasePagination.tsx         |   2 +-
 .../src/components/BaseTablePagination.tsx    |  25 +
 .../src/components/LaravelTable.tsx           |   2 +-
 .../src/components/MyDropzone.tsx             |   2 +-
 .../src/components/ThemeColorPresets.tsx      |   4 +-
 .../src/components/UploadImage.tsx            |   2 +-
 .../src/components/chart/ChartStyle.tsx       |   2 +-
 .../components/hook-form/RHFDatepicker.tsx    |   2 +-
 .../nav-section/horizontal/NavItem.tsx        |   6 +-
 .../nav-section/horizontal/NavList.tsx        |   2 +-
 .../nav-section/horizontal/index.tsx          |   2 +-
 .../nav-section/horizontal/style.ts           |   2 +-
 .../settings/SettingColorPresets.tsx          |   2 +-
 .../components/settings/SettingDirection.tsx  |   4 +-
 .../components/settings/SettingFullscreen.tsx |   2 +-
 .../src/components/settings/SettingLayout.tsx |   2 +-
 .../src/components/settings/SettingMode.tsx   |   4 +-
 .../components/settings/SettingStretch.tsx    |   4 +-
 .../src/components/settings/ToggleButton.tsx  |   6 +-
 .../src/components/settings/index.tsx         |  12 +-
 .../src/components/upload/BlockContent.tsx    |   2 +-
 .../components/upload/MultiFilePreview.tsx    |   8 +-
 .../src/components/upload/RejectionFiles.tsx  |   2 +-
 .../src/components/upload/UploadAvatar.tsx    |   4 +-
 .../components/upload/UploadSingleFile.tsx    |   2 +-
 .../src/contexts/CollapseDrawerContext.tsx    |  20 +-
 .../contexts/ConfiguredCorporateContext.tsx   |   2 +-
 .../src/contexts/LaravelAuthContext.tsx       |   8 +-
 .../src/contexts/SettingsContext.tsx          |   8 +-
 .../hospital-portal/src/guards/AuthGuard.tsx  |   6 +-
 .../hospital-portal/src/guards/GuestGuard.tsx |   4 +-
 frontend/hospital-portal/src/hooks/useAuth.ts |   8 +-
 .../src/hooks/useCollapseDrawer.ts            |   2 +-
 .../hospital-portal/src/hooks/useSettings.ts  |   2 +-
 .../src/layouts/LogoOnlyLayout.tsx            |   2 +-
 .../dashboard/header/AccountPopover.tsx       |   6 +-
 .../dashboard/header/ContactsPopover.tsx      |  14 +-
 .../dashboard/header/LanguagePopover.tsx      |   6 +-
 .../dashboard/header/NotificationsPopover.tsx |  12 +-
 .../layouts/dashboard/header/Searchbar.tsx    |   6 +-
 .../src/layouts/dashboard/header/index.tsx    |  14 +-
 .../src/layouts/dashboard/index.tsx           |   8 +-
 .../dashboard/navbar/CollapseButton.tsx       |   2 +-
 .../layouts/dashboard/navbar/NavConfig.tsx    |   2 +-
 .../layouts/dashboard/navbar/NavbarDocs.tsx   |   2 +-
 .../dashboard/navbar/NavbarHorizontal.tsx     |   4 +-
 .../dashboard/navbar/NavbarVertical.tsx       |  18 +-
 .../hospital-portal/src/pages/Dashboard.tsx   | 106 +++--
 .../hospital-portal/src/pages/Page404.tsx     |   6 +-
 .../src/pages/auth/ForgetPassword.tsx         |  10 +-
 .../hospital-portal/src/pages/auth/Login.tsx  |  14 +-
 .../src/pages/auth/Register.tsx               |  14 +-
 .../src/pages/auth/ResetPassword.tsx          |  10 +-
 .../src/pages/auth/VerifyCode.tsx             |  10 +-
 frontend/hospital-portal/src/routes/index.tsx |  28 +-
 .../src/sections/auth/AuthFirebaseSocial.tsx  |   2 +-
 .../forget-password/ForgetPasswordForm.tsx    |   8 +-
 .../src/sections/auth/login/LoginForm.tsx     |  10 +-
 .../sections/auth/register/RegisterForm.tsx   |   8 +-
 .../auth/reset-password/ResetPasswordForm.tsx |   6 +-
 .../auth/verify-code/VerifyCodeForm.tsx       |   2 +-
 .../sections/dashboard/CardNotification.tsx   | 140 ++++++
 .../sections/dashboard/CardSearchMember.tsx   | 153 ++++++
 .../src/sections/dashboard/DashboardTable.tsx | 315 ++++++++++++
 .../src/sections/dashboard/DialogMember.tsx   | 100 ++++
 .../sections/dashboard/FormRequestClaim.tsx   | 158 ++++++
 .../sections/dashboard/NotificationCard.tsx   | 109 +++++
 .../src/sections/dashboard/SomethingUsage.tsx |  80 ----
 .../src/sections/dashboard/TableList.tsx      | 448 ++++++++++++++++++
 frontend/hospital-portal/src/theme/index.tsx  |   2 +-
 .../src/theme/overrides/Alert.tsx             |   2 +-
 .../src/theme/overrides/ToggleButton.ts       |   2 +-
 .../hospital-portal/src/theme/typography.ts   |   2 +-
 frontend/hospital-portal/src/utils/axios.ts   |   2 +-
 .../hospital-portal/src/utils/formatNumber.ts |   4 +
 .../hospital-portal/src/utils/formatTime.ts   |   4 +-
 .../src/utils/getColorPresets.ts              |   4 +-
 .../hospital-portal/src/utils/getFontValue.ts |   2 +-
 frontend/hospital-portal/tsconfig.json        |   3 +-
 frontend/hospital-portal/vite.config.ts       |   2 +-
 102 files changed, 2625 insertions(+), 391 deletions(-)
 create mode 100644 Modules/HospitalPortal/Http/Controllers/Api/ClaimRequestController.php
 create mode 100644 Modules/HospitalPortal/Http/Controllers/Api/MemberController.php
 create mode 100644 Modules/HospitalPortal/Http/Controllers/ClaimController.php
 create mode 100644 app/Models/ClaimRequest.php
 create mode 100644 config/permission.php
 create mode 100644 database/migrations/2023_02_14_102144_create_claim_requests_table.php
 create mode 100644 database/migrations/2023_02_14_112255_create_permission_tables.php
 create mode 100644 database/seeders/RoleSeeder.php
 create mode 100755 frontend/hospital-portal/src/components/BaseTablePagination.tsx
 create mode 100644 frontend/hospital-portal/src/sections/dashboard/CardNotification.tsx
 create mode 100644 frontend/hospital-portal/src/sections/dashboard/CardSearchMember.tsx
 create mode 100755 frontend/hospital-portal/src/sections/dashboard/DashboardTable.tsx
 create mode 100644 frontend/hospital-portal/src/sections/dashboard/DialogMember.tsx
 create mode 100644 frontend/hospital-portal/src/sections/dashboard/FormRequestClaim.tsx
 create mode 100755 frontend/hospital-portal/src/sections/dashboard/NotificationCard.tsx
 delete mode 100755 frontend/hospital-portal/src/sections/dashboard/SomethingUsage.tsx
 create mode 100755 frontend/hospital-portal/src/sections/dashboard/TableList.tsx

diff --git a/Modules/HospitalPortal/Http/Controllers/Api/ClaimRequestController.php b/Modules/HospitalPortal/Http/Controllers/Api/ClaimRequestController.php
new file mode 100644
index 00000000..bdf39775
--- /dev/null
+++ b/Modules/HospitalPortal/Http/Controllers/Api/ClaimRequestController.php
@@ -0,0 +1,97 @@
+<?php
+
+namespace Modules\HospitalPortal\Http\Controllers\Api;
+
+use App\Helpers\Helper;
+use App\Models\ClaimRequest;
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+
+class ClaimRequestController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     * @return Renderable
+     */
+    public function index()
+    {
+        $claimRequests = ClaimRequest::query()
+                                ->with(['member'])
+                                ->paginate();
+
+        return Helper::responseJson($claimRequests);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     * @return Renderable
+     */
+    public function create()
+    {
+        return view('hospitalportal::create');
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     * @param Request $request
+     * @return Renderable
+     */
+    public function store(Request $request)
+    {
+        $request->validate([
+            // 'submission_date' => 'required',
+            'member_id' => 'required',
+            // 'files' => ''
+        ]);
+
+        $newClaimRequest = ClaimRequest::create([
+            'member_id' => $request->member_id,
+            'submission_date' => now(),
+            'status' => 'requested'
+        ]);
+
+        return Helper::responseJson(data: $newClaimRequest, message: 'Claim Request berhasil ajukan!');
+    }
+
+    /**
+     * Show the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function show($id)
+    {
+        return view('hospitalportal::show');
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function edit($id)
+    {
+        return view('hospitalportal::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)
+    {
+        //
+    }
+}
diff --git a/Modules/HospitalPortal/Http/Controllers/Api/MemberController.php b/Modules/HospitalPortal/Http/Controllers/Api/MemberController.php
new file mode 100644
index 00000000..7cab7248
--- /dev/null
+++ b/Modules/HospitalPortal/Http/Controllers/Api/MemberController.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Modules\HospitalPortal\Http\Controllers\Api;
+
+use App\Helpers\Helper;
+use App\Models\Member;
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+
+class MemberController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     * @return Renderable
+     */
+    public function search(Request $request)
+    {
+        $request->validate([
+            'no_polis' => 'required',
+            'birth_date' => 'required'
+        ]);
+
+        $member = Member::query()
+                        ->where('member_id', $request->no_polis)
+                        ->where('birth_date', $request->birth_date)
+                        ->with(['person', 'currentCorporate', 
+                            // 'currentCorporate.corporateServices' => function ($corporateService) {
+                            //     $corporateService->where('status', 'active');
+                            // }, 
+                            // 'currentCorporate.corporateServices.service'
+                            // 'currentPlan.benefits',
+                            // 'currentPlan.corporateBenefit.plan',
+                            'currentPlan.corporateBenefits.benefit'
+                        ])
+                        ->firstOrFail();
+
+            
+        return Helper::responseJson($member);
+    }
+}
diff --git a/Modules/HospitalPortal/Http/Controllers/ClaimController.php b/Modules/HospitalPortal/Http/Controllers/ClaimController.php
new file mode 100644
index 00000000..077be0dc
--- /dev/null
+++ b/Modules/HospitalPortal/Http/Controllers/ClaimController.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace Modules\HospitalPortal\Http\Controllers;
+
+use App\Helpers\Helper;
+use App\Models\Claim;
+use Illuminate\Contracts\Support\Renderable;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+
+class ClaimController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     * @return Renderable
+     */
+    public function index()
+    {
+        $claims = Claim::where('deleted_at', 'ASD')->paginate(5);
+
+        return Helper::responseJson($claims);
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     * @return Renderable
+     */
+    public function create()
+    {
+        return view('hospitalportal::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('hospitalportal::show');
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     * @param int $id
+     * @return Renderable
+     */
+    public function edit($id)
+    {
+        return view('hospitalportal::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)
+    {
+        //
+    }
+}
diff --git a/Modules/HospitalPortal/Routes/api.php b/Modules/HospitalPortal/Routes/api.php
index 733b50cb..73cb6912 100644
--- a/Modules/HospitalPortal/Routes/api.php
+++ b/Modules/HospitalPortal/Routes/api.php
@@ -2,6 +2,9 @@
 
 use Illuminate\Http\Request;
 use Modules\HospitalPortal\Http\Controllers\Api\AuthController;
+use Modules\HospitalPortal\Http\Controllers\Api\ClaimRequestController;
+use Modules\HospitalPortal\Http\Controllers\Api\MemberController;
+use Modules\HospitalPortal\Http\Controllers\ClaimController;
 
 /*
 |--------------------------------------------------------------------------
@@ -28,5 +31,12 @@ Route::prefix('hospitalportal')->group(function () {
             return $request->user();
         });
         Route::put('reset-password', [AuthController::class, 'resetPassword'])->name('resetPassword');
+
+        Route::get('claims', [ClaimController::class, 'index']);
+
+        Route::post('search-member', [MemberController::class, 'search']);
+
+        Route::get('claim-requests', [ClaimRequestController::class, 'index'])->name('claim-requests.index');
+        Route::post('claim-requests', [ClaimRequestController::class, 'store'])->name('claim-requests.store');
     });
 });
diff --git a/app/Models/Benefit.php b/app/Models/Benefit.php
index 2fae61df..1ab24372 100755
--- a/app/Models/Benefit.php
+++ b/app/Models/Benefit.php
@@ -18,6 +18,15 @@ class Benefit extends Model
         'active'
     ];
 
+    protected $hidden = [
+        "created_at",
+        "updated_at",
+        "deleted_at",
+        "created_by",
+        "updated_by",
+        "deleted_by",
+    ];
+
     public function scopeFilter($query, array $filters)
     {
         $query->when($filters['search'] ?? false, function ($query, $search) {
diff --git a/app/Models/ClaimRequest.php b/app/Models/ClaimRequest.php
new file mode 100644
index 00000000..689d99c1
--- /dev/null
+++ b/app/Models/ClaimRequest.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace App\Models;
+
+use App\Traits\Blameable;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+class ClaimRequest extends Model
+{
+    use HasFactory, SoftDeletes, Blameable;
+
+    protected static $code_prefix = 'CRQ';
+
+    protected static function boot()
+    {
+        parent::boot();
+
+        static::creating(function ($model) {
+            try {
+                $model->code = self::getNextCode();
+            } catch (\Exception $e) {
+                abort(500, $e->getMessage());
+            }
+        });
+    }
+    
+    public static function getNextCode()
+    {
+        $last_number = self::withTrashed()->max('code');
+        $next_number = empty($last_number) ? 1 : ((int) explode('-', $last_number)[1] + 1);
+
+        return self::makeCode($next_number);
+    }
+
+    public static function makeCode($next_number)
+    {
+        return (string) self::$code_prefix .'-'. str_pad($next_number, 5, 0, STR_PAD_LEFT);
+    }
+
+    public $fillable = [
+        'submission_date',
+        'member_id',
+        'status'
+    ];
+
+    public function member()
+    {
+        return $this->belongsTo(Member::class, 'member_id', 'id');
+    }
+}
diff --git a/app/Models/Member.php b/app/Models/Member.php
index 81ccef0e..150e2719 100755
--- a/app/Models/Member.php
+++ b/app/Models/Member.php
@@ -192,12 +192,13 @@ class Member extends Model
 
     public function getNameAttribute()
     {
-        return $this->person->name ?? null;
+        return $this->person->name ?? ($this->name ?? null);
     }
 
     public function getBirthDateAttribute()
     {
-        return Carbon::parse($this->person->birth_date ?? null)->format('Y-m-d') ?? null;
+        $date = $this->person->birth_date ?? ($this->birth_date ?? null);
+        return !empty($date) ? Carbon::parse($date)->format('Y-m-d') : null;
     }
 
     public function getGenderAttribute()
diff --git a/app/Models/Plan.php b/app/Models/Plan.php
index d9fb6037..1758a4eb 100755
--- a/app/Models/Plan.php
+++ b/app/Models/Plan.php
@@ -182,7 +182,63 @@ class Plan extends Model
         return $this->belongsToMany(Benefit::class, 'corporate_benefits', 'plan_id', 'benefit_id')
             ->withTimestamps()
             ->withPivot([
-                // TODO corporate_benefits pivot
+                'corporate_id',
+                'plan_id',
+                'benefit_id',
+                'corporate_benefit_code',
+                'budget',
+                'budget_conditions',
+                'budget_code',
+                'primary_benefit_code',
+                'benefit_mode',
+                'room_class_coverage',
+                'max_bed_coverage',
+                'tolerance_parameter',
+                'max_room_class',
+                'limit_amount',
+                'area_limit',
+                'shared_benefit',
+                'shared_benefit_type',
+                'msc',
+                'genders',
+                'min_age',
+                'max_age',
+                'max_frequency_period',
+                'daily_frequency',
+                'weekly_frequency',
+                'monthly_frequency',
+                'yearly_frequency',
+                'custom_frequency_days',
+                'custom_duration_value',
+                'allowed_transaction_types',
+                'high_plan_factor',
+                'pre_post_treatment',
+                'pre_treatment_days',
+                'post_treatment_days',
+                'layer_type_1',
+                'layer_value_1',
+                'layer_type_2',
+                'layer_value_2',
+                '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',
+                'prorate_type',
+                'prorate_lookup',
+                'max_days_for_disability',
+                'max_period_for_disability',
+                'currency',
+                'show_benefit_item',
+                'show_benefit_value',
+                'active'
             ]);
     }
 
@@ -190,4 +246,9 @@ class Plan extends Model
     {
         return $this->hasMany(CorporateBenefit::class, 'plan_id', 'id');
     }
+    
+    public function service()
+    {
+        return $this->belongsTo(Service::class, 'service_code', 'code');
+    }
 }
diff --git a/app/Models/Service.php b/app/Models/Service.php
index e9988237..8ef39904 100755
--- a/app/Models/Service.php
+++ b/app/Models/Service.php
@@ -14,4 +14,9 @@ class Service extends Model
         'name',
         'description',
     ];
+    
+    public function corporateService()
+    {
+        return $this->hasMany(CorporateService::class, 'service_code', 'code');
+    }
 }
diff --git a/app/Models/User.php b/app/Models/User.php
index fd6398e7..8ee3e4db 100755
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -7,10 +7,11 @@ use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 use Laravel\Sanctum\HasApiTokens;
+use Spatie\Permission\Traits\HasRoles;
 
 class User extends Authenticatable
 {
-    use HasApiTokens, HasFactory, Notifiable;
+    use HasApiTokens, HasFactory, Notifiable, HasRoles;
 
     /**
      * The attributes that are mass assignable.
diff --git a/composer.json b/composer.json
index 7c33d5ef..b7aec8ad 100755
--- a/composer.json
+++ b/composer.json
@@ -16,7 +16,8 @@
         "maatwebsite/excel": "^3.1",
         "nwidart/laravel-modules": "^9.0",
         "psr/simple-cache": "^1.0",
-        "pusher/pusher-php-server": "^7.2"
+        "pusher/pusher-php-server": "^7.2",
+        "spatie/laravel-permission": "^5.9"
     },
     "require-dev": {
         "barryvdh/laravel-debugbar": "^3.7",
diff --git a/composer.lock b/composer.lock
index 58d2c2e9..0542238e 100755
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "bce7c2a0879fd09f793f1bfa9aeb0a68",
+    "content-hash": "fba5a398ed86e2a1809183198ce640f5",
     "packages": [
         {
             "name": "box/spout",
@@ -4003,6 +4003,88 @@
             ],
             "time": "2022-12-31T22:20:34+00:00"
         },
+        {
+            "name": "spatie/laravel-permission",
+            "version": "5.9.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/laravel-permission.git",
+                "reference": "a88ed98c8937442737e0c50163682e832d608f13"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/laravel-permission/zipball/a88ed98c8937442737e0c50163682e832d608f13",
+                "reference": "a88ed98c8937442737e0c50163682e832d608f13",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/auth": "^7.0|^8.0|^9.0|^10.0",
+                "illuminate/container": "^7.0|^8.0|^9.0|^10.0",
+                "illuminate/contracts": "^7.0|^8.0|^9.0|^10.0",
+                "illuminate/database": "^7.0|^8.0|^9.0|^10.0",
+                "php": "^7.3|^8.0"
+            },
+            "require-dev": {
+                "orchestra/testbench": "^5.0|^6.0|^7.0|^8.0",
+                "phpunit/phpunit": "^9.4",
+                "predis/predis": "^1.1"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "5.x-dev",
+                    "dev-master": "5.x-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Spatie\\Permission\\PermissionServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/helpers.php"
+                ],
+                "psr-4": {
+                    "Spatie\\Permission\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Freek Van der Herten",
+                    "email": "freek@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Permission handling for Laravel 6.0 and up",
+            "homepage": "https://github.com/spatie/laravel-permission",
+            "keywords": [
+                "acl",
+                "laravel",
+                "permission",
+                "permissions",
+                "rbac",
+                "roles",
+                "security",
+                "spatie"
+            ],
+            "support": {
+                "issues": "https://github.com/spatie/laravel-permission/issues",
+                "source": "https://github.com/spatie/laravel-permission/tree/5.9.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/spatie",
+                    "type": "github"
+                }
+            ],
+            "time": "2023-02-06T21:37:02+00:00"
+        },
         {
             "name": "symfony/console",
             "version": "v6.2.3",
diff --git a/config/app.php b/config/app.php
index 1a018790..6b8bf840 100755
--- a/config/app.php
+++ b/config/app.php
@@ -187,6 +187,7 @@ return [
          */
         Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::class,
         Maatwebsite\Excel\ExcelServiceProvider::class,
+        Spatie\Permission\PermissionServiceProvider::class,
 
         /*
          * Application Service Providers...
diff --git a/config/permission.php b/config/permission.php
new file mode 100644
index 00000000..5b6e184c
--- /dev/null
+++ b/config/permission.php
@@ -0,0 +1,161 @@
+<?php
+
+return [
+
+    'models' => [
+
+        /*
+         * When using the "HasPermissions" trait from this package, we need to know which
+         * Eloquent model should be used to retrieve your permissions. Of course, it
+         * is often just the "Permission" model but you may use whatever you like.
+         *
+         * The model you want to use as a Permission model needs to implement the
+         * `Spatie\Permission\Contracts\Permission` contract.
+         */
+
+        'permission' => Spatie\Permission\Models\Permission::class,
+
+        /*
+         * When using the "HasRoles" trait from this package, we need to know which
+         * Eloquent model should be used to retrieve your roles. Of course, it
+         * is often just the "Role" model but you may use whatever you like.
+         *
+         * The model you want to use as a Role model needs to implement the
+         * `Spatie\Permission\Contracts\Role` contract.
+         */
+
+        'role' => Spatie\Permission\Models\Role::class,
+
+    ],
+
+    'table_names' => [
+
+        /*
+         * When using the "HasRoles" trait from this package, we need to know which
+         * table should be used to retrieve your roles. We have chosen a basic
+         * default value but you may easily change it to any table you like.
+         */
+
+        'roles' => 'roles',
+
+        /*
+         * When using the "HasPermissions" trait from this package, we need to know which
+         * table should be used to retrieve your permissions. We have chosen a basic
+         * default value but you may easily change it to any table you like.
+         */
+
+        'permissions' => 'permissions',
+
+        /*
+         * When using the "HasPermissions" trait from this package, we need to know which
+         * table should be used to retrieve your models permissions. We have chosen a
+         * basic default value but you may easily change it to any table you like.
+         */
+
+        'model_has_permissions' => 'model_has_permissions',
+
+        /*
+         * When using the "HasRoles" trait from this package, we need to know which
+         * table should be used to retrieve your models roles. We have chosen a
+         * basic default value but you may easily change it to any table you like.
+         */
+
+        'model_has_roles' => 'model_has_roles',
+
+        /*
+         * When using the "HasRoles" trait from this package, we need to know which
+         * table should be used to retrieve your roles permissions. We have chosen a
+         * basic default value but you may easily change it to any table you like.
+         */
+
+        'role_has_permissions' => 'role_has_permissions',
+    ],
+
+    'column_names' => [
+        /*
+         * Change this if you want to name the related pivots other than defaults
+         */
+        'role_pivot_key' => null, //default 'role_id',
+        'permission_pivot_key' => null, //default 'permission_id',
+
+        /*
+         * Change this if you want to name the related model primary key other than
+         * `model_id`.
+         *
+         * For example, this would be nice if your primary keys are all UUIDs. In
+         * that case, name this `model_uuid`.
+         */
+
+        'model_morph_key' => 'model_id',
+
+        /*
+         * Change this if you want to use the teams feature and your related model's
+         * foreign key is other than `team_id`.
+         */
+
+        'team_foreign_key' => 'team_id',
+    ],
+
+    /*
+     * When set to true, the method for checking permissions will be registered on the gate.
+     * Set this to false, if you want to implement custom logic for checking permissions.
+     */
+
+    'register_permission_check_method' => true,
+
+    /*
+     * When set to true the package implements teams using the 'team_foreign_key'. If you want
+     * the migrations to register the 'team_foreign_key', you must set this to true
+     * before doing the migration. If you already did the migration then you must make a new
+     * migration to also add 'team_foreign_key' to 'roles', 'model_has_roles', and
+     * 'model_has_permissions'(view the latest version of package's migration file)
+     */
+
+    'teams' => false,
+
+    /*
+     * When set to true, the required permission names are added to the exception
+     * message. This could be considered an information leak in some contexts, so
+     * the default setting is false here for optimum safety.
+     */
+
+    'display_permission_in_exception' => false,
+
+    /*
+     * When set to true, the required role names are added to the exception
+     * message. This could be considered an information leak in some contexts, so
+     * the default setting is false here for optimum safety.
+     */
+
+    'display_role_in_exception' => false,
+
+    /*
+     * By default wildcard permission lookups are disabled.
+     */
+
+    'enable_wildcard_permission' => false,
+
+    'cache' => [
+
+        /*
+         * By default all permissions are cached for 24 hours to speed up performance.
+         * When permissions or roles are updated the cache is flushed automatically.
+         */
+
+        'expiration_time' => \DateInterval::createFromDateString('24 hours'),
+
+        /*
+         * The cache key used to store all permissions.
+         */
+
+        'key' => 'spatie.permission.cache',
+
+        /*
+         * You may optionally indicate a specific cache driver to use for permission and
+         * role caching using any of the `store` drivers listed in the cache.php config
+         * file. Using 'default' here means to use the `default` set in cache.php.
+         */
+
+        'store' => 'default',
+    ],
+];
diff --git a/database/migrations/2023_02_14_102144_create_claim_requests_table.php b/database/migrations/2023_02_14_102144_create_claim_requests_table.php
new file mode 100644
index 00000000..f9424a5c
--- /dev/null
+++ b/database/migrations/2023_02_14_102144_create_claim_requests_table.php
@@ -0,0 +1,40 @@
+<?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('claim_requests', function (Blueprint $table) {
+            $table->id();
+            $table->string('code')->index();
+            $table->dateTime('submission_date')->nullable();
+            $table->foreignId('member_id');
+            $table->string('status')->nullable();
+
+            $table->timestamps();
+            $table->softDeletes();
+            $table->unsignedBigInteger('created_by')->nullable()->index();
+            $table->unsignedBigInteger('updated_by')->nullable()->index();
+            $table->unsignedBigInteger('deleted_by')->nullable()->index();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('claim_requests');
+    }
+};
diff --git a/database/migrations/2023_02_14_112255_create_permission_tables.php b/database/migrations/2023_02_14_112255_create_permission_tables.php
new file mode 100644
index 00000000..04c3278b
--- /dev/null
+++ b/database/migrations/2023_02_14_112255_create_permission_tables.php
@@ -0,0 +1,141 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+use Spatie\Permission\PermissionRegistrar;
+
+class CreatePermissionTables extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        $tableNames = config('permission.table_names');
+        $columnNames = config('permission.column_names');
+        $teams = config('permission.teams');
+
+        if (empty($tableNames)) {
+            throw new \Exception('Error: config/permission.php not loaded. Run [php artisan config:clear] and try again.');
+        }
+        if ($teams && empty($columnNames['team_foreign_key'] ?? null)) {
+            throw new \Exception('Error: team_foreign_key on config/permission.php not loaded. Run [php artisan config:clear] and try again.');
+        }
+
+        Schema::create($tableNames['permissions'], function (Blueprint $table) {
+            $table->bigIncrements('id'); // permission id
+            $table->string('name');       // For MySQL 8.0 use string('name', 125);
+            $table->string('guard_name'); // For MySQL 8.0 use string('guard_name', 125);
+            $table->timestamps();
+
+            $table->unique(['name', 'guard_name']);
+        });
+
+        Schema::create($tableNames['roles'], function (Blueprint $table) use ($teams, $columnNames) {
+            $table->bigIncrements('id'); // role id
+            if ($teams || config('permission.testing')) { // permission.testing is a fix for sqlite testing
+                $table->unsignedBigInteger($columnNames['team_foreign_key'])->nullable();
+                $table->index($columnNames['team_foreign_key'], 'roles_team_foreign_key_index');
+            }
+            $table->string('name');       // For MySQL 8.0 use string('name', 125);
+            $table->string('guard_name'); // For MySQL 8.0 use string('guard_name', 125);
+            $table->timestamps();
+            if ($teams || config('permission.testing')) {
+                $table->unique([$columnNames['team_foreign_key'], 'name', 'guard_name']);
+            } else {
+                $table->unique(['name', 'guard_name']);
+            }
+        });
+
+        Schema::create($tableNames['model_has_permissions'], function (Blueprint $table) use ($tableNames, $columnNames, $teams) {
+            $table->unsignedBigInteger(PermissionRegistrar::$pivotPermission);
+
+            $table->string('model_type');
+            $table->unsignedBigInteger($columnNames['model_morph_key']);
+            $table->index([$columnNames['model_morph_key'], 'model_type'], 'model_has_permissions_model_id_model_type_index');
+
+            $table->foreign(PermissionRegistrar::$pivotPermission)
+                ->references('id') // permission id
+                ->on($tableNames['permissions'])
+                ->onDelete('cascade');
+            if ($teams) {
+                $table->unsignedBigInteger($columnNames['team_foreign_key']);
+                $table->index($columnNames['team_foreign_key'], 'model_has_permissions_team_foreign_key_index');
+
+                $table->primary([$columnNames['team_foreign_key'], PermissionRegistrar::$pivotPermission, $columnNames['model_morph_key'], 'model_type'],
+                    'model_has_permissions_permission_model_type_primary');
+            } else {
+                $table->primary([PermissionRegistrar::$pivotPermission, $columnNames['model_morph_key'], 'model_type'],
+                    'model_has_permissions_permission_model_type_primary');
+            }
+
+        });
+
+        Schema::create($tableNames['model_has_roles'], function (Blueprint $table) use ($tableNames, $columnNames, $teams) {
+            $table->unsignedBigInteger(PermissionRegistrar::$pivotRole);
+
+            $table->string('model_type');
+            $table->unsignedBigInteger($columnNames['model_morph_key']);
+            $table->index([$columnNames['model_morph_key'], 'model_type'], 'model_has_roles_model_id_model_type_index');
+
+            $table->foreign(PermissionRegistrar::$pivotRole)
+                ->references('id') // role id
+                ->on($tableNames['roles'])
+                ->onDelete('cascade');
+            if ($teams) {
+                $table->unsignedBigInteger($columnNames['team_foreign_key']);
+                $table->index($columnNames['team_foreign_key'], 'model_has_roles_team_foreign_key_index');
+
+                $table->primary([$columnNames['team_foreign_key'], PermissionRegistrar::$pivotRole, $columnNames['model_morph_key'], 'model_type'],
+                    'model_has_roles_role_model_type_primary');
+            } else {
+                $table->primary([PermissionRegistrar::$pivotRole, $columnNames['model_morph_key'], 'model_type'],
+                    'model_has_roles_role_model_type_primary');
+            }
+        });
+
+        Schema::create($tableNames['role_has_permissions'], function (Blueprint $table) use ($tableNames) {
+            $table->unsignedBigInteger(PermissionRegistrar::$pivotPermission);
+            $table->unsignedBigInteger(PermissionRegistrar::$pivotRole);
+
+            $table->foreign(PermissionRegistrar::$pivotPermission)
+                ->references('id') // permission id
+                ->on($tableNames['permissions'])
+                ->onDelete('cascade');
+
+            $table->foreign(PermissionRegistrar::$pivotRole)
+                ->references('id') // role id
+                ->on($tableNames['roles'])
+                ->onDelete('cascade');
+
+            $table->primary([PermissionRegistrar::$pivotPermission, PermissionRegistrar::$pivotRole], 'role_has_permissions_permission_id_role_id_primary');
+        });
+
+        app('cache')
+            ->store(config('permission.cache.store') != 'default' ? config('permission.cache.store') : null)
+            ->forget(config('permission.cache.key'));
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        $tableNames = config('permission.table_names');
+
+        if (empty($tableNames)) {
+            throw new \Exception('Error: config/permission.php not found and defaults could not be merged. Please publish the package configuration before proceeding, or drop the tables manually.');
+        }
+
+        Schema::drop($tableNames['role_has_permissions']);
+        Schema::drop($tableNames['model_has_roles']);
+        Schema::drop($tableNames['model_has_permissions']);
+        Schema::drop($tableNames['roles']);
+        Schema::drop($tableNames['permissions']);
+    }
+}
diff --git a/database/seeders/DummyMemberSeeder.php b/database/seeders/DummyMemberSeeder.php
index bb0ce713..9c3391c7 100755
--- a/database/seeders/DummyMemberSeeder.php
+++ b/database/seeders/DummyMemberSeeder.php
@@ -17,18 +17,23 @@ class DummyMemberSeeder extends Seeder
     public function run()
     {
         $userEmails = [
-            'admin@linksehat.dev',
-            'manager+one@gmail.com',
-            'manager+two@gmail.com'
+            'admin@linksehat.dev' => ['administrator'],
+            'manager+one@gmail.com' => ['corporate-manager'],
+            'manager+two@gmail.com' => ['corporate-manager'],
+            'hospitaladmin@gmail.com' => ['hospital-admin']
         ];
 
-        foreach ($userEmails as $email) {
-            User::updateOrCreate([
+        foreach ($userEmails as $email => $roles) {
+            $user = User::updateOrCreate([
                 'email' => $email
             ], [
                 'email' => $email,
                 'password' => Hash::make('password')
             ]);
+
+            if (isset($roles) && count($roles)) {
+                $user->syncRoles($roles);
+            }
         }
     }
 }
diff --git a/database/seeders/RoleSeeder.php b/database/seeders/RoleSeeder.php
new file mode 100644
index 00000000..5d1477d2
--- /dev/null
+++ b/database/seeders/RoleSeeder.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Database\Seeders;
+
+use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+use Spatie\Permission\Models\Role;
+
+class RoleSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        $roles = [
+            'administrator',
+            'corporate-manager',
+            'hospital-admin'
+        ];
+
+        foreach ($roles as $name) {
+            Role::create([
+                'name' => $name
+            ]);
+        }
+    }
+}
diff --git a/frontend/hospital-portal/package.json b/frontend/hospital-portal/package.json
index 7562d770..014894d2 100755
--- a/frontend/hospital-portal/package.json
+++ b/frontend/hospital-portal/package.json
@@ -8,8 +8,8 @@
     "lint": "eslint --ext .ts,.tsx ./src",
     "lint:fix": "eslint --fix --ext .ts,.tsx ./src",
     "start": "vite --port=3000",
-    "build": "vite build --mode production && cp .htaccess build/.htaccess && rm -f -r ../../public/dashboard &&  cp -r build ../../public/dashboard",
-    "build-staging": "vite build --mode staging && cp .htaccess build/.htaccess && rm -f -r ../../public/dashboard-staging &&  cp -r build ../../public/dashboard-staging",
+    "build": "vite build --mode production && cp .htaccess build/.htaccess && rm -f -r @/public/dashboard &&  cp -r build @/public/dashboard",
+    "build-staging": "vite build --mode staging && cp .htaccess build/.htaccess && rm -f -r @/public/dashboard-staging &&  cp -r build @/public/dashboard-staging",
     "serve": "vite preview",
     "clear-all": "rm -rf build node_modules",
     "re-start": "rm -rf build node_modules && yarn install && yarn start",
@@ -46,8 +46,9 @@
     "@iconify/react": "^3.2.2",
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "5.0.0-alpha.80",
-    "@mui/material": "^5.11.7",
+    "@mui/material": "^5.11.8",
     "@mui/system": "^5.11.7",
+    "@mui/utils": "^5.11.7",
     "@mui/x-data-grid": "^5.17.21",
     "@mui/x-date-pickers": "5.0.0-beta.2",
     "@vitejs/plugin-react": "^1.3.2",
diff --git a/frontend/hospital-portal/pnpm-lock.yaml b/frontend/hospital-portal/pnpm-lock.yaml
index 6e712988..43bcb212 100755
--- a/frontend/hospital-portal/pnpm-lock.yaml
+++ b/frontend/hospital-portal/pnpm-lock.yaml
@@ -13,8 +13,9 @@ specifiers:
   '@iconify/react': ^3.2.2
   '@mui/icons-material': ^5.11.0
   '@mui/lab': 5.0.0-alpha.80
-  '@mui/material': ^5.11.7
+  '@mui/material': ^5.11.8
   '@mui/system': ^5.11.7
+  '@mui/utils': ^5.11.7
   '@mui/x-data-grid': ^5.17.21
   '@mui/x-date-pickers': 5.0.0-beta.2
   '@types/lodash': ^4.14.191
@@ -80,12 +81,13 @@ dependencies:
   '@emotion/styled': 11.10.5_6pyqqf3gsgk64dc57nzribe7em
   '@hookform/resolvers': 2.9.10_react-hook-form@7.43.0
   '@iconify/react': 3.2.2_react@17.0.2
-  '@mui/icons-material': 5.11.0_pnh4wc2hdngxwkyhxmg7jr2d2q
-  '@mui/lab': 5.0.0-alpha.80_6zefprodjalhdlen346zn6g76u
-  '@mui/material': 5.11.7_qqwwam5mzvatfv4nmfntqfljzy
+  '@mui/icons-material': 5.11.0_5kms7taxz2x6sekph4tu46vq6a
+  '@mui/lab': 5.0.0-alpha.80_ysrzn4qhloqbrgbbmao6mmppwq
+  '@mui/material': 5.11.8_qqwwam5mzvatfv4nmfntqfljzy
   '@mui/system': 5.11.7_tt6tbcqzrys2qrveq7llkyxu6e
-  '@mui/x-data-grid': 5.17.21_loz24cijmwpd2sifcgc2x4dfwu
-  '@mui/x-date-pickers': 5.0.0-beta.2_ztsqxjliezrjrjnhj5k7l7yxha
+  '@mui/utils': 5.11.7_react@17.0.2
+  '@mui/x-data-grid': 5.17.21_5x4u4xgs64rvoe554u2nfslorm
+  '@mui/x-date-pickers': 5.0.0-beta.2_fkizrbujalt2agb3pem6hg34e4
   '@vitejs/plugin-react': 1.3.2
   apexcharts: 3.36.3
   axios: 0.27.2
@@ -1693,7 +1695,6 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@esbuild/linux-loong64/0.15.18:
@@ -1702,7 +1703,6 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@eslint/eslintrc/1.4.1:
@@ -1848,8 +1848,8 @@ packages:
       tslib: 2.5.0
     dev: false
 
-  /@mui/base/5.0.0-alpha.116_zsjcj4gvi24ks76nprapl4hsmq:
-    resolution: {integrity: sha512-VwhifWdrfHc4/ZdqRZ4Gf+7P39sovNN24By1YVZdvJ9fvp0Sr8sNftGUCjYXXz+xCXVBQDXvhfxMwZrj2MvJvA==}
+  /@mui/base/5.0.0-alpha.117_zsjcj4gvi24ks76nprapl4hsmq:
+    resolution: {integrity: sha512-3GlRSZdSrvDQ4k03dSV2rM+97JbNWimFOqGsE7n7Mi8WuBSYCgnPe56bQp3E5cShOrTn11dGH8FRCmVMcCEXqQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
@@ -1896,11 +1896,11 @@ packages:
       react-is: 17.0.2
     dev: false
 
-  /@mui/core-downloads-tracker/5.11.7:
-    resolution: {integrity: sha512-lZgX7XQTk0zVcpwEa80r+T4y09dosnUxWvFPSikU/2Hh5wnyNOek8WfJwGCNsaRiXJHMi5eHY+z8oku4u5lgNw==}
+  /@mui/core-downloads-tracker/5.11.8:
+    resolution: {integrity: sha512-n/uJRIwZAaJaROaOA4VzycxDo27cusnrRzfycnAkAP5gBndwOJQ1CXjd1Y7hJe5eorj/ukixC7IZD+qCClMCMg==}
     dev: false
 
-  /@mui/icons-material/5.11.0_pnh4wc2hdngxwkyhxmg7jr2d2q:
+  /@mui/icons-material/5.11.0_5kms7taxz2x6sekph4tu46vq6a:
     resolution: {integrity: sha512-I2LaOKqO8a0xcLGtIozC9xoXjZAto5G5gh0FYUMAlbsIHNHIjn4Xrw9rvjY20vZonyiGrZNMAlAXYkY6JvhF6A==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -1912,12 +1912,12 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.20.13
-      '@mui/material': 5.11.7_qqwwam5mzvatfv4nmfntqfljzy
+      '@mui/material': 5.11.8_qqwwam5mzvatfv4nmfntqfljzy
       '@types/react': 17.0.53
       react: 17.0.2
     dev: false
 
-  /@mui/lab/5.0.0-alpha.80_6zefprodjalhdlen346zn6g76u:
+  /@mui/lab/5.0.0-alpha.80_ysrzn4qhloqbrgbbmao6mmppwq:
     resolution: {integrity: sha512-td5Ak0Hx+EzVN9MJqBlZJ6BKFGjTrHyNjXncjSHTvp8Z9p157AlOA/Sf7r+RyqyVzOzBfv4S37i9ShFTzSK61Q==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -1943,10 +1943,10 @@ packages:
     dependencies:
       '@babel/runtime': 7.20.13
       '@mui/base': 5.0.0-alpha.79_zsjcj4gvi24ks76nprapl4hsmq
-      '@mui/material': 5.11.7_qqwwam5mzvatfv4nmfntqfljzy
+      '@mui/material': 5.11.8_qqwwam5mzvatfv4nmfntqfljzy
       '@mui/system': 5.11.7_tt6tbcqzrys2qrveq7llkyxu6e
       '@mui/utils': 5.11.7_react@17.0.2
-      '@mui/x-date-pickers': 5.0.0-alpha.0_q26eepl56z56win5z4oguogidy
+      '@mui/x-date-pickers': 5.0.0-alpha.0_not7477uipughfcemtu2nipzci
       '@types/react': 17.0.53
       clsx: 1.2.1
       date-fns: 2.29.3
@@ -1961,8 +1961,8 @@ packages:
       - '@emotion/styled'
     dev: false
 
-  /@mui/material/5.11.7_qqwwam5mzvatfv4nmfntqfljzy:
-    resolution: {integrity: sha512-wDv7Pc6kMe9jeWkmCLt4JChd1lPc2u23JQHpB35L2VwQowpNFoDfIwqi0sYCnZTMKlRc7lza8LqwSwHl2G52Rw==}
+  /@mui/material/5.11.8_qqwwam5mzvatfv4nmfntqfljzy:
+    resolution: {integrity: sha512-MpIVmtj9VJBhPHvPWoMkfCPpmVGXT4q43PtCJsdKIdc7W9/nG3Kpqw2oWyw+UxG5xG7eLhmfRFGPKvj4/WopEQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       '@emotion/react': ^11.5.0
@@ -1981,9 +1981,9 @@ packages:
       '@babel/runtime': 7.20.13
       '@emotion/react': 11.10.5_mk6db2egckiugg7v365a42dwcm
       '@emotion/styled': 11.10.5_6pyqqf3gsgk64dc57nzribe7em
-      '@mui/base': 5.0.0-alpha.116_zsjcj4gvi24ks76nprapl4hsmq
-      '@mui/core-downloads-tracker': 5.11.7
-      '@mui/system': 5.11.7_tt6tbcqzrys2qrveq7llkyxu6e
+      '@mui/base': 5.0.0-alpha.117_zsjcj4gvi24ks76nprapl4hsmq
+      '@mui/core-downloads-tracker': 5.11.8
+      '@mui/system': 5.11.8_tt6tbcqzrys2qrveq7llkyxu6e
       '@mui/types': 7.2.3_@types+react@17.0.53
       '@mui/utils': 5.11.7_react@17.0.2
       '@types/react': 17.0.53
@@ -2036,6 +2036,28 @@ packages:
       react: 17.0.2
     dev: false
 
+  /@mui/styled-engine/5.11.8_3lsrph6se4xquylogkb5yq6ogu:
+    resolution: {integrity: sha512-iSpZp9AoeictsDi5xAQ4PGXu7mKtQyzMl7ZaWpHIGMFpsNnfY3NQNg+wkj/gpsAZ+Zg+IIyD+t+ig71Kr9fa0w==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.4.1
+      '@emotion/styled': ^11.3.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.20.13
+      '@emotion/cache': 11.10.5
+      '@emotion/react': 11.10.5_mk6db2egckiugg7v365a42dwcm
+      '@emotion/styled': 11.10.5_6pyqqf3gsgk64dc57nzribe7em
+      csstype: 3.1.1
+      prop-types: 15.8.1
+      react: 17.0.2
+    dev: false
+
   /@mui/system/5.11.7_tt6tbcqzrys2qrveq7llkyxu6e:
     resolution: {integrity: sha512-uGB6hBxGlAdlmbLdTtUZYNPXkgQGGnKxHdkRATqsu7UlCxNsc/yS5NCEWy/3c4pnelD1LDLD39WrntP9mwhfkQ==}
     engines: {node: '>=12.0.0'}
@@ -2066,6 +2088,36 @@ packages:
       react: 17.0.2
     dev: false
 
+  /@mui/system/5.11.8_tt6tbcqzrys2qrveq7llkyxu6e:
+    resolution: {integrity: sha512-zhroUcxAw2x/dISBJKhGbD70DOYCwMFRo7o/LUYTiUfQkfmLhRfEf1bopWgY9nYstn7QOxOq9fA3aR3pHrUTbw==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0
+      react: ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.20.13
+      '@emotion/react': 11.10.5_mk6db2egckiugg7v365a42dwcm
+      '@emotion/styled': 11.10.5_6pyqqf3gsgk64dc57nzribe7em
+      '@mui/private-theming': 5.11.7_h7fc2el62uaa77gho3xhys6ola
+      '@mui/styled-engine': 5.11.8_3lsrph6se4xquylogkb5yq6ogu
+      '@mui/types': 7.2.3_@types+react@17.0.53
+      '@mui/utils': 5.11.7_react@17.0.2
+      '@types/react': 17.0.53
+      clsx: 1.2.1
+      csstype: 3.1.1
+      prop-types: 15.8.1
+      react: 17.0.2
+    dev: false
+
   /@mui/types/7.2.3_@types+react@17.0.53:
     resolution: {integrity: sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==}
     peerDependencies:
@@ -2091,7 +2143,7 @@ packages:
       react-is: 18.2.0
     dev: false
 
-  /@mui/x-data-grid/5.17.21_loz24cijmwpd2sifcgc2x4dfwu:
+  /@mui/x-data-grid/5.17.21_5x4u4xgs64rvoe554u2nfslorm:
     resolution: {integrity: sha512-dgYYk1H3BEyGg7/RDet+ZBiTZQ9ZEIHE5QhVZ1glopVDRgWJmtcqPUQakkHQzxerEsKVwZ5QEEfueKuoX8oebg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -2101,7 +2153,7 @@ packages:
       react-dom: ^17.0.2 || ^18.0.0
     dependencies:
       '@babel/runtime': 7.20.13
-      '@mui/material': 5.11.7_qqwwam5mzvatfv4nmfntqfljzy
+      '@mui/material': 5.11.8_qqwwam5mzvatfv4nmfntqfljzy
       '@mui/system': 5.11.7_tt6tbcqzrys2qrveq7llkyxu6e
       '@mui/utils': 5.11.7_react@17.0.2
       clsx: 1.2.1
@@ -2111,7 +2163,7 @@ packages:
       reselect: 4.1.7
     dev: false
 
-  /@mui/x-date-pickers/5.0.0-alpha.0_q26eepl56z56win5z4oguogidy:
+  /@mui/x-date-pickers/5.0.0-alpha.0_not7477uipughfcemtu2nipzci:
     resolution: {integrity: sha512-JTzTaNSWbxNi8KDUJjHCH6im0YlIEv88gPoKhGm7s6xCGT1q6FtMp/oQ40nhfwrJ73nkM5G1JXRIzI/yfsHXQQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -2136,7 +2188,7 @@ packages:
       '@date-io/dayjs': 2.16.0
       '@date-io/luxon': 2.16.1
       '@date-io/moment': 2.16.1
-      '@mui/material': 5.11.7_qqwwam5mzvatfv4nmfntqfljzy
+      '@mui/material': 5.11.8_qqwwam5mzvatfv4nmfntqfljzy
       '@mui/system': 5.11.7_tt6tbcqzrys2qrveq7llkyxu6e
       '@mui/utils': 5.11.7_react@17.0.2
       clsx: 1.2.1
@@ -2149,7 +2201,7 @@ packages:
       - react-dom
     dev: false
 
-  /@mui/x-date-pickers/5.0.0-beta.2_ztsqxjliezrjrjnhj5k7l7yxha:
+  /@mui/x-date-pickers/5.0.0-beta.2_fkizrbujalt2agb3pem6hg34e4:
     resolution: {integrity: sha512-UEXQ2tmhosklAQwOUtwQBI2WngSdp5Q8vYqsmvxNJxuXYuM/DawdQBwyfFyK7jx5wf/RTsniG1e12hqii3wPYg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -2184,7 +2236,7 @@ packages:
       '@date-io/moment': 2.16.1
       '@emotion/react': 11.10.5_mk6db2egckiugg7v365a42dwcm
       '@emotion/styled': 11.10.5_6pyqqf3gsgk64dc57nzribe7em
-      '@mui/material': 5.11.7_qqwwam5mzvatfv4nmfntqfljzy
+      '@mui/material': 5.11.8_qqwwam5mzvatfv4nmfntqfljzy
       '@mui/system': 5.11.7_tt6tbcqzrys2qrveq7llkyxu6e
       '@mui/utils': 5.11.7_react@17.0.2
       '@types/react-transition-group': 4.4.5
@@ -3352,7 +3404,6 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-android-arm64/0.15.18:
@@ -3361,7 +3412,6 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-darwin-64/0.15.18:
@@ -3370,7 +3420,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-darwin-arm64/0.15.18:
@@ -3379,7 +3428,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-freebsd-64/0.15.18:
@@ -3388,7 +3436,6 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-freebsd-arm64/0.15.18:
@@ -3397,7 +3444,6 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-linux-32/0.15.18:
@@ -3406,7 +3452,6 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-linux-64/0.15.18:
@@ -3415,7 +3460,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-linux-arm/0.15.18:
@@ -3424,7 +3468,6 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-linux-arm64/0.15.18:
@@ -3433,7 +3476,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-linux-mips64le/0.15.18:
@@ -3442,7 +3484,6 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-linux-ppc64le/0.15.18:
@@ -3451,7 +3492,6 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-linux-riscv64/0.15.18:
@@ -3460,7 +3500,6 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-linux-s390x/0.15.18:
@@ -3469,7 +3508,6 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-netbsd-64/0.15.18:
@@ -3478,7 +3516,6 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-openbsd-64/0.15.18:
@@ -3487,7 +3524,6 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-sunos-64/0.15.18:
@@ -3496,7 +3532,6 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-windows-32/0.15.18:
@@ -3505,7 +3540,6 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-windows-64/0.15.18:
@@ -3514,7 +3548,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild-windows-arm64/0.15.18:
@@ -3523,7 +3556,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /esbuild/0.15.18:
@@ -3554,7 +3586,6 @@ packages:
       esbuild-windows-32: 0.15.18
       esbuild-windows-64: 0.15.18
       esbuild-windows-arm64: 0.15.18
-    dev: false
 
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -4801,7 +4832,6 @@ packages:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: false
 
   /natural-compare-lite/1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -5030,7 +5060,6 @@ packages:
       nanoid: 3.3.4
       picocolors: 1.0.0
       source-map-js: 1.0.2
-    dev: false
 
   /prelude-ls/1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -5501,7 +5530,6 @@ packages:
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /source-map-support/0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
@@ -5938,7 +5966,6 @@ packages:
       rollup: 2.79.1
     optionalDependencies:
       fsevents: 2.3.2
-    dev: false
 
   /webidl-conversions/4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
diff --git a/frontend/hospital-portal/src/_mock/_analytics.tsx b/frontend/hospital-portal/src/_mock/_analytics.tsx
index 932c1dea..d74d3072 100755
--- a/frontend/hospital-portal/src/_mock/_analytics.tsx
+++ b/frontend/hospital-portal/src/_mock/_analytics.tsx
@@ -1,5 +1,5 @@
 // components
-import Iconify from '../components/Iconify';
+import Iconify from '@/components/Iconify';
 //
 import _mock from './_mock';
 
diff --git a/frontend/hospital-portal/src/_mock/_plans.tsx b/frontend/hospital-portal/src/_mock/_plans.tsx
index 658f3862..4dfa6f17 100755
--- a/frontend/hospital-portal/src/_mock/_plans.tsx
+++ b/frontend/hospital-portal/src/_mock/_plans.tsx
@@ -1,4 +1,4 @@
-import { PlanFreeIcon, PlanStarterIcon, PlanPremiumIcon } from '../assets';
+import { PlanFreeIcon, PlanStarterIcon, PlanPremiumIcon } from '@/assets';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/components/BasePagination.tsx b/frontend/hospital-portal/src/components/BasePagination.tsx
index f099aa1a..7d54cc83 100755
--- a/frontend/hospital-portal/src/components/BasePagination.tsx
+++ b/frontend/hospital-portal/src/components/BasePagination.tsx
@@ -1,6 +1,6 @@
 import { Pagination } from "@mui/material";
 import { Box } from "@mui/system";
-import { LaravelPaginatedData } from "../@types/paginated-data";
+import { LaravelPaginatedData } from "@/@types/paginated-data";
 
 
 export interface Props {
diff --git a/frontend/hospital-portal/src/components/BaseTablePagination.tsx b/frontend/hospital-portal/src/components/BaseTablePagination.tsx
new file mode 100755
index 00000000..3af750e6
--- /dev/null
+++ b/frontend/hospital-portal/src/components/BaseTablePagination.tsx
@@ -0,0 +1,25 @@
+/* ---------------------------------- @mui ---------------------------------- */
+import { TablePagination, TablePaginationProps } from '@mui/material';
+import { Box } from '@mui/system';
+
+export default function BaseTablePagination({
+  count,
+  onPageChange,
+  page,
+  rowsPerPage,
+  onRowsPerPageChange,
+}: TablePaginationProps) {
+  return (
+    <Box>
+      <TablePagination
+        component="div"
+        rowsPerPageOptions={[10, 25]}
+        count={count}
+        page={page}
+        onPageChange={onPageChange}
+        rowsPerPage={rowsPerPage}
+        onRowsPerPageChange={onRowsPerPageChange}
+      />
+    </Box>
+  );
+}
diff --git a/frontend/hospital-portal/src/components/LaravelTable.tsx b/frontend/hospital-portal/src/components/LaravelTable.tsx
index 18325952..c65b5955 100644
--- a/frontend/hospital-portal/src/components/LaravelTable.tsx
+++ b/frontend/hospital-portal/src/components/LaravelTable.tsx
@@ -1,5 +1,5 @@
 import { Card, Paper, TableContainer } from "@mui/material";
-import { LaravelPaginatedData } from "../@types/paginated-data";
+import { LaravelPaginatedData } from "@/@types/paginated-data";
 import BasePagination from "./BasePagination";
 
 type LaravelTableProps = {
diff --git a/frontend/hospital-portal/src/components/MyDropzone.tsx b/frontend/hospital-portal/src/components/MyDropzone.tsx
index 4a5a891e..0cbc2f76 100644
--- a/frontend/hospital-portal/src/components/MyDropzone.tsx
+++ b/frontend/hospital-portal/src/components/MyDropzone.tsx
@@ -4,7 +4,7 @@ import { useDropzone } from 'react-dropzone';
 import { Box, Stack, Typography } from '@mui/material';
 import BlockContent from './upload/BlockContent';
 import { styled } from '@mui/material/styles';
-import { UploadIllustration } from '../assets';
+import { UploadIllustration } from '@/assets';
 
 const DropZoneStyle = styled('div')(({ theme }) => ({
   outline: 'none',
diff --git a/frontend/hospital-portal/src/components/ThemeColorPresets.tsx b/frontend/hospital-portal/src/components/ThemeColorPresets.tsx
index 03d43c43..4f267027 100755
--- a/frontend/hospital-portal/src/components/ThemeColorPresets.tsx
+++ b/frontend/hospital-portal/src/components/ThemeColorPresets.tsx
@@ -2,9 +2,9 @@ import { ReactNode, useMemo } from 'react';
 // @mui
 import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 // hooks
-import useSettings from '../hooks/useSettings';
+import useSettings from '@/hooks/useSettings';
 //
-import componentsOverride from '../theme/overrides';
+import componentsOverride from '@/theme/overrides';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/components/UploadImage.tsx b/frontend/hospital-portal/src/components/UploadImage.tsx
index a69c73ec..5d4197a4 100644
--- a/frontend/hospital-portal/src/components/UploadImage.tsx
+++ b/frontend/hospital-portal/src/components/UploadImage.tsx
@@ -4,7 +4,7 @@ import { useDropzone } from 'react-dropzone';
 import { Box, Stack, Typography } from '@mui/material';
 import BlockContent from './upload/BlockContent';
 import { styled } from '@mui/material/styles';
-import { UploadIllustration } from '../assets';
+import { UploadIllustration } from '@/assets';
 import Iconify from './Iconify';
 
 const RootStyle = styled('div')(({ theme }) => ({
diff --git a/frontend/hospital-portal/src/components/chart/ChartStyle.tsx b/frontend/hospital-portal/src/components/chart/ChartStyle.tsx
index 11b5522f..d06276cd 100755
--- a/frontend/hospital-portal/src/components/chart/ChartStyle.tsx
+++ b/frontend/hospital-portal/src/components/chart/ChartStyle.tsx
@@ -2,7 +2,7 @@
 import { alpha, useTheme } from '@mui/material/styles';
 import { GlobalStyles } from '@mui/material';
 // utils
-import cssStyles from '../../utils/cssStyles';
+import cssStyles from '@/utils/cssStyles';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/components/hook-form/RHFDatepicker.tsx b/frontend/hospital-portal/src/components/hook-form/RHFDatepicker.tsx
index dd386d85..f516955d 100755
--- a/frontend/hospital-portal/src/components/hook-form/RHFDatepicker.tsx
+++ b/frontend/hospital-portal/src/components/hook-form/RHFDatepicker.tsx
@@ -11,7 +11,7 @@ import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 
 import InputAdornment from '@mui/material/InputAdornment';
 import EventIcon from '@mui/icons-material/Event';
-import { fPostFormat } from '../../utils/formatTime';
+import { fPostFormat } from '@/utils/formatTime';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/components/nav-section/horizontal/NavItem.tsx b/frontend/hospital-portal/src/components/nav-section/horizontal/NavItem.tsx
index c4a29035..7969e44b 100755
--- a/frontend/hospital-portal/src/components/nav-section/horizontal/NavItem.tsx
+++ b/frontend/hospital-portal/src/components/nav-section/horizontal/NavItem.tsx
@@ -3,11 +3,11 @@ import { NavLink as RouterLink } from 'react-router-dom';
 // @mui
 import { Box, Link } from '@mui/material';
 // config
-import { ICON } from '../../../config';
+import { ICON } from '@/config';
 // type
-import { NavItemProps } from '../type';
+import { NavItemProps } from '@/type';
 //
-import Iconify from '../../Iconify';
+import Iconify from '@/components/Iconify';
 import { ListItemStyle } from './style';
 import { isExternalLink } from '..';
 
diff --git a/frontend/hospital-portal/src/components/nav-section/horizontal/NavList.tsx b/frontend/hospital-portal/src/components/nav-section/horizontal/NavList.tsx
index 1bdc4741..c1384481 100755
--- a/frontend/hospital-portal/src/components/nav-section/horizontal/NavList.tsx
+++ b/frontend/hospital-portal/src/components/nav-section/horizontal/NavList.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 // type
-import { NavListProps } from '../type';
+import { NavListProps } from '@/type';
 //
 import { NavItemRoot, NavItemSub } from './NavItem';
 import { PaperStyle } from './style';
diff --git a/frontend/hospital-portal/src/components/nav-section/horizontal/index.tsx b/frontend/hospital-portal/src/components/nav-section/horizontal/index.tsx
index f823ccce..acfd8a54 100755
--- a/frontend/hospital-portal/src/components/nav-section/horizontal/index.tsx
+++ b/frontend/hospital-portal/src/components/nav-section/horizontal/index.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react';
 // @mui
 import { Stack } from '@mui/material';
 // type
-import { NavSectionProps } from '../type';
+import { NavSectionProps } from '@/type';
 //
 import { NavListRoot } from './NavList';
 
diff --git a/frontend/hospital-portal/src/components/nav-section/horizontal/style.ts b/frontend/hospital-portal/src/components/nav-section/horizontal/style.ts
index 3550409e..d4fe1e83 100755
--- a/frontend/hospital-portal/src/components/nav-section/horizontal/style.ts
+++ b/frontend/hospital-portal/src/components/nav-section/horizontal/style.ts
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { alpha, styled } from '@mui/material/styles';
 import { Button, Popover, ButtonProps, LinkProps } from '@mui/material';
 // config
-import { NAVBAR } from '../../../config';
+import { NAVBAR } from '@/config';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/components/settings/SettingColorPresets.tsx b/frontend/hospital-portal/src/components/settings/SettingColorPresets.tsx
index 91a10a3b..973a2292 100755
--- a/frontend/hospital-portal/src/components/settings/SettingColorPresets.tsx
+++ b/frontend/hospital-portal/src/components/settings/SettingColorPresets.tsx
@@ -2,7 +2,7 @@
 import { alpha, styled } from '@mui/material/styles';
 import { Box, Grid, RadioGroup, CardActionArea } from '@mui/material';
 // hooks
-import useSettings from '../../hooks/useSettings';
+import useSettings from '@/hooks/useSettings';
 //
 import { BoxMask } from '.';
 
diff --git a/frontend/hospital-portal/src/components/settings/SettingDirection.tsx b/frontend/hospital-portal/src/components/settings/SettingDirection.tsx
index 52059ad2..5e05079d 100755
--- a/frontend/hospital-portal/src/components/settings/SettingDirection.tsx
+++ b/frontend/hospital-portal/src/components/settings/SettingDirection.tsx
@@ -2,9 +2,9 @@
 import { styled } from '@mui/material/styles';
 import { Grid, RadioGroup, CardActionArea } from '@mui/material';
 // hooks
-import useSettings from '../../hooks/useSettings';
+import useSettings from '@/hooks/useSettings';
 //
-import Iconify from '../Iconify';
+import Iconify from '@/components/Iconify';
 import { BoxMask } from '.';
 
 // ----------------------------------------------------------------------
diff --git a/frontend/hospital-portal/src/components/settings/SettingFullscreen.tsx b/frontend/hospital-portal/src/components/settings/SettingFullscreen.tsx
index 56d47624..d84337a6 100755
--- a/frontend/hospital-portal/src/components/settings/SettingFullscreen.tsx
+++ b/frontend/hospital-portal/src/components/settings/SettingFullscreen.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { alpha } from '@mui/material/styles';
 import { Button } from '@mui/material';
 // components
-import Iconify from '../Iconify';
+import Iconify from '@/components/Iconify';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/components/settings/SettingLayout.tsx b/frontend/hospital-portal/src/components/settings/SettingLayout.tsx
index 4bd8f449..717a45b4 100755
--- a/frontend/hospital-portal/src/components/settings/SettingLayout.tsx
+++ b/frontend/hospital-portal/src/components/settings/SettingLayout.tsx
@@ -2,7 +2,7 @@
 import { styled, alpha } from '@mui/material/styles';
 import { Grid, RadioGroup, CardActionArea, Box, Stack } from '@mui/material';
 // hooks
-import useSettings from '../../hooks/useSettings';
+import useSettings from '@/hooks/useSettings';
 //
 import { BoxMask } from '.';
 
diff --git a/frontend/hospital-portal/src/components/settings/SettingMode.tsx b/frontend/hospital-portal/src/components/settings/SettingMode.tsx
index 629e4679..7006bddb 100755
--- a/frontend/hospital-portal/src/components/settings/SettingMode.tsx
+++ b/frontend/hospital-portal/src/components/settings/SettingMode.tsx
@@ -2,9 +2,9 @@
 import { styled } from '@mui/material/styles';
 import { Grid, RadioGroup, CardActionArea } from '@mui/material';
 // hooks
-import useSettings from '../../hooks/useSettings';
+import useSettings from '@/hooks/useSettings';
 //
-import Iconify from '../Iconify';
+import Iconify from '@/components/Iconify';
 import { BoxMask } from '.';
 
 // ----------------------------------------------------------------------
diff --git a/frontend/hospital-portal/src/components/settings/SettingStretch.tsx b/frontend/hospital-portal/src/components/settings/SettingStretch.tsx
index acfe4031..3727139a 100755
--- a/frontend/hospital-portal/src/components/settings/SettingStretch.tsx
+++ b/frontend/hospital-portal/src/components/settings/SettingStretch.tsx
@@ -2,9 +2,9 @@
 import { styled } from '@mui/material/styles';
 import { CardActionArea, Stack } from '@mui/material';
 // hooks
-import useSettings from '../../hooks/useSettings';
+import useSettings from '@/hooks/useSettings';
 //
-import Iconify from '../Iconify';
+import Iconify from '@/components/Iconify';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/components/settings/ToggleButton.tsx b/frontend/hospital-portal/src/components/settings/ToggleButton.tsx
index e0469eae..4e8a7035 100755
--- a/frontend/hospital-portal/src/components/settings/ToggleButton.tsx
+++ b/frontend/hospital-portal/src/components/settings/ToggleButton.tsx
@@ -2,10 +2,10 @@
 import { alpha, styled } from '@mui/material/styles';
 import { Tooltip } from '@mui/material';
 // utils
-import cssStyles from '../../utils/cssStyles';
+import cssStyles from '@/utils/cssStyles';
 //
-import Iconify from '../Iconify';
-import { IconButtonAnimate } from '../animate';
+import Iconify from '@/components/Iconify';
+import { IconButtonAnimate } from '@/animate';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/components/settings/index.tsx b/frontend/hospital-portal/src/components/settings/index.tsx
index b38760f9..29dd3034 100755
--- a/frontend/hospital-portal/src/components/settings/index.tsx
+++ b/frontend/hospital-portal/src/components/settings/index.tsx
@@ -4,15 +4,15 @@ import { useState, useEffect } from 'react';
 import { alpha, styled } from '@mui/material/styles';
 import { Backdrop, Divider, Typography, Stack, FormControlLabel, Radio } from '@mui/material';
 // hooks
-import useSettings from '../../hooks/useSettings';
+import useSettings from '@/hooks/useSettings';
 // utils
-import cssStyles from '../../utils/cssStyles';
+import cssStyles from '@/utils/cssStyles';
 // config
-import { NAVBAR, defaultSettings } from '../../config';
+import { NAVBAR, defaultSettings } from '@/config';
 //
-import Iconify from '../Iconify';
-import Scrollbar from '../Scrollbar';
-import { IconButtonAnimate, varFade } from '../animate';
+import Iconify from '@/components/Iconify';
+import Scrollbar from '@/Scrollbar';
+import { IconButtonAnimate, varFade } from '@/animate';
 //
 import ToggleButton from './ToggleButton';
 import SettingMode from './SettingMode';
diff --git a/frontend/hospital-portal/src/components/upload/BlockContent.tsx b/frontend/hospital-portal/src/components/upload/BlockContent.tsx
index c6557bfc..da0d99ba 100755
--- a/frontend/hospital-portal/src/components/upload/BlockContent.tsx
+++ b/frontend/hospital-portal/src/components/upload/BlockContent.tsx
@@ -1,7 +1,7 @@
 // @mui
 import { Box, Typography, Stack } from '@mui/material';
 // assets
-import { UploadIllustration } from '../../assets';
+import { UploadIllustration } from '@/assets';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/components/upload/MultiFilePreview.tsx b/frontend/hospital-portal/src/components/upload/MultiFilePreview.tsx
index 9e133967..194e03c2 100755
--- a/frontend/hospital-portal/src/components/upload/MultiFilePreview.tsx
+++ b/frontend/hospital-portal/src/components/upload/MultiFilePreview.tsx
@@ -4,13 +4,13 @@ import { m, AnimatePresence } from 'framer-motion';
 import { alpha } from '@mui/material/styles';
 import { List, Stack, Button, IconButton, ListItemText, ListItem } from '@mui/material';
 // utils
-import { fData } from '../../utils/formatNumber';
+import { fData } from '@/utils/formatNumber';
 // type
 import { UploadMultiFileProps, CustomFile } from './type';
 //
-import Image from '../Image';
-import Iconify from '../Iconify';
-import { varFade } from '../animate';
+import Image from '@/components/Image';
+import Iconify from '@/components/Iconify';
+import { varFade } from '@/components/animate';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/components/upload/RejectionFiles.tsx b/frontend/hospital-portal/src/components/upload/RejectionFiles.tsx
index c2fbe92a..559546d4 100755
--- a/frontend/hospital-portal/src/components/upload/RejectionFiles.tsx
+++ b/frontend/hospital-portal/src/components/upload/RejectionFiles.tsx
@@ -5,7 +5,7 @@ import { Box, Paper, Typography } from '@mui/material';
 // type
 import { CustomFile } from './type';
 // utils
-import { fData } from '../../utils/formatNumber';
+import { fData } from '@/utils/formatNumber';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/components/upload/UploadAvatar.tsx b/frontend/hospital-portal/src/components/upload/UploadAvatar.tsx
index 743eceba..b4e51ad3 100755
--- a/frontend/hospital-portal/src/components/upload/UploadAvatar.tsx
+++ b/frontend/hospital-portal/src/components/upload/UploadAvatar.tsx
@@ -6,8 +6,8 @@ import { styled } from '@mui/material/styles';
 // type
 import { UploadProps } from './type';
 //
-import Image from '../Image';
-import Iconify from '../Iconify';
+import Image from '@/components/Image';
+import Iconify from '@/components/Iconify';
 import RejectionFiles from './RejectionFiles';
 
 // ----------------------------------------------------------------------
diff --git a/frontend/hospital-portal/src/components/upload/UploadSingleFile.tsx b/frontend/hospital-portal/src/components/upload/UploadSingleFile.tsx
index 5e32e4b1..2ee63926 100755
--- a/frontend/hospital-portal/src/components/upload/UploadSingleFile.tsx
+++ b/frontend/hospital-portal/src/components/upload/UploadSingleFile.tsx
@@ -6,7 +6,7 @@ import { Box } from '@mui/material';
 // type
 import { UploadProps } from './type';
 //
-import Image from '../Image';
+import Image from '@/components/Image';
 import RejectionFiles from './RejectionFiles';
 import BlockContent from './BlockContent';
 
diff --git a/frontend/hospital-portal/src/contexts/CollapseDrawerContext.tsx b/frontend/hospital-portal/src/contexts/CollapseDrawerContext.tsx
index e6454dbe..6191f198 100755
--- a/frontend/hospital-portal/src/contexts/CollapseDrawerContext.tsx
+++ b/frontend/hospital-portal/src/contexts/CollapseDrawerContext.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, createContext, useState, useEffect } from 'react';
 // hooks
-import useResponsive from '../hooks/useResponsive';
+import useResponsive from '@/hooks/useResponsive';
 
 // ----------------------------------------------------------------------
 
@@ -31,18 +31,18 @@ function CollapseDrawerProvider({ children }: CollapseDrawerProviderProps) {
   const isDesktop = useResponsive('up', 'lg');
 
   const [collapse, setCollapse] = useState({
-    click: false,
+    click: true,
     hover: false
   });
 
-  useEffect(() => {
-    if (!isDesktop) {
-      setCollapse({
-        click: false,
-        hover: false
-      });
-    }
-  }, [isDesktop]);
+  // useEffect(() => {
+  //   if (isDesktop) {
+  //     setCollapse({
+  //       click: false,
+  //       hover: false
+  //     });
+  //   }
+  // }, [isDesktop]);
 
   const handleToggleCollapse = () => {
     setCollapse({ ...collapse, click: !collapse.click });
diff --git a/frontend/hospital-portal/src/contexts/ConfiguredCorporateContext.tsx b/frontend/hospital-portal/src/contexts/ConfiguredCorporateContext.tsx
index 5fde9420..9134507e 100644
--- a/frontend/hospital-portal/src/contexts/ConfiguredCorporateContext.tsx
+++ b/frontend/hospital-portal/src/contexts/ConfiguredCorporateContext.tsx
@@ -3,7 +3,7 @@ import axios from '@/utils/axios';
 import { ReactNode, createContext, useState, useEffect } from 'react';
 import { useParams } from 'react-router';
 // hooks
-import useResponsive from '../hooks/useResponsive';
+import useResponsive from '@/hooks/useResponsive';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/contexts/LaravelAuthContext.tsx b/frontend/hospital-portal/src/contexts/LaravelAuthContext.tsx
index ae1b19e1..08c3eef8 100755
--- a/frontend/hospital-portal/src/contexts/LaravelAuthContext.tsx
+++ b/frontend/hospital-portal/src/contexts/LaravelAuthContext.tsx
@@ -1,10 +1,10 @@
 import { createContext, ReactNode, useEffect, useReducer } from 'react';
 // utils
-import axios from '../utils/axios';
-// import { isValidToken, setSession } from '../utils/jwt';
-import { setSession, getSession, getUser } from '../utils/token';
+import axios from '@/utils/axios';
+// import { isValidToken, setSession } from '@/utils/jwt';
+import { setSession, getSession, getUser } from '@/utils/token';
 // @types
-import { ActionMap, AuthState, AuthUser, JWTContextType } from '../@types/auth';
+import { ActionMap, AuthState, AuthUser, JWTContextType } from '@/@types/auth';
 // ----------------------------------------------------------------------
 import { Navigate, useLocation } from 'react-router-dom';
 
diff --git a/frontend/hospital-portal/src/contexts/SettingsContext.tsx b/frontend/hospital-portal/src/contexts/SettingsContext.tsx
index 9b2591c6..ab2c9f16 100755
--- a/frontend/hospital-portal/src/contexts/SettingsContext.tsx
+++ b/frontend/hospital-portal/src/contexts/SettingsContext.tsx
@@ -1,10 +1,10 @@
 import { ReactNode, createContext } from 'react';
 // hooks
-import useLocalStorage from '../hooks/useLocalStorage';
+import useLocalStorage from '@/hooks/useLocalStorage';
 // utils
-import getColorPresets, { colorPresets, defaultPreset } from '../utils/getColorPresets';
+import getColorPresets, { colorPresets, defaultPreset } from '@/utils/getColorPresets';
 // config
-import { defaultSettings } from '../config';
+import { defaultSettings } from '@/config';
 // @type
 import {
   ThemeMode,
@@ -12,7 +12,7 @@ import {
   ThemeDirection,
   ThemeColorPresets,
   SettingsContextProps,
-} from '../components/settings/type';
+} from '@/components/settings/type';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/guards/AuthGuard.tsx b/frontend/hospital-portal/src/guards/AuthGuard.tsx
index 7e470c7d..ef7395eb 100755
--- a/frontend/hospital-portal/src/guards/AuthGuard.tsx
+++ b/frontend/hospital-portal/src/guards/AuthGuard.tsx
@@ -1,11 +1,11 @@
 import { useState, ReactNode } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 // hooks
-import useAuth from '../hooks/useAuth';
+import useAuth from '@/hooks/useAuth';
 // pages
-import Login from '../pages/auth/Login';
+import Login from '@/pages/auth/Login';
 // components
-import LoadingScreen from '../components/LoadingScreen';
+import LoadingScreen from '@/components/LoadingScreen';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/guards/GuestGuard.tsx b/frontend/hospital-portal/src/guards/GuestGuard.tsx
index feb464cb..9446f89e 100755
--- a/frontend/hospital-portal/src/guards/GuestGuard.tsx
+++ b/frontend/hospital-portal/src/guards/GuestGuard.tsx
@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 import { Navigate } from 'react-router-dom';
 // hooks
-import useAuth from '../hooks/useAuth';
+import useAuth from '@/hooks/useAuth';
 // routes
-// import { PATH_DASHBOARD } from '../routes/paths';
+// import { PATH_DASHBOARD } from '@/routes/paths';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/hooks/useAuth.ts b/frontend/hospital-portal/src/hooks/useAuth.ts
index f822b680..4cd627de 100755
--- a/frontend/hospital-portal/src/hooks/useAuth.ts
+++ b/frontend/hospital-portal/src/hooks/useAuth.ts
@@ -1,9 +1,9 @@
 import { useContext } from 'react';
 //
-import { AuthContext } from '../contexts/LaravelAuthContext';
-// import { AuthContext } from '../contexts/Auth0Context';
-// import { AuthContext } from '../contexts/FirebaseContext';
-// import { AuthContext } from '../contexts/AwsCognitoContext';
+import { AuthContext } from '@/contexts/LaravelAuthContext';
+// import { AuthContext } from '@/contexts/Auth0Context';
+// import { AuthContext } from '@/contexts/FirebaseContext';
+// import { AuthContext } from '@/contexts/AwsCognitoContext';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/hooks/useCollapseDrawer.ts b/frontend/hospital-portal/src/hooks/useCollapseDrawer.ts
index 29553930..9e7fb7d7 100755
--- a/frontend/hospital-portal/src/hooks/useCollapseDrawer.ts
+++ b/frontend/hospital-portal/src/hooks/useCollapseDrawer.ts
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { CollapseDrawerContext } from '../contexts/CollapseDrawerContext';
+import { CollapseDrawerContext } from '@/contexts/CollapseDrawerContext';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/hooks/useSettings.ts b/frontend/hospital-portal/src/hooks/useSettings.ts
index 43bb1839..e06f24b5 100755
--- a/frontend/hospital-portal/src/hooks/useSettings.ts
+++ b/frontend/hospital-portal/src/hooks/useSettings.ts
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { SettingsContext } from '../contexts/SettingsContext';
+import { SettingsContext } from '@/contexts/SettingsContext';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/layouts/LogoOnlyLayout.tsx b/frontend/hospital-portal/src/layouts/LogoOnlyLayout.tsx
index d5e29196..3de1ea72 100755
--- a/frontend/hospital-portal/src/layouts/LogoOnlyLayout.tsx
+++ b/frontend/hospital-portal/src/layouts/LogoOnlyLayout.tsx
@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
 // @mui
 import { styled } from '@mui/material/styles';
 // components
-import Logo from '../components/Logo';
+import Logo from '@/components/Logo';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/layouts/dashboard/header/AccountPopover.tsx b/frontend/hospital-portal/src/layouts/dashboard/header/AccountPopover.tsx
index 519a9c3d..cae44c1e 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/header/AccountPopover.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/header/AccountPopover.tsx
@@ -3,10 +3,10 @@ import { useState } from 'react';
 import { alpha } from '@mui/material/styles';
 import { Box, Divider, Typography, Stack, MenuItem, Avatar } from '@mui/material';
 // components
-import MenuPopover from '../../../components/MenuPopover';
-import { IconButtonAnimate } from '../../../components/animate';
+import MenuPopover from '@/components/MenuPopover';
+import { IconButtonAnimate } from '@/components/animate';
 import { useNavigate } from 'react-router-dom';
-import useAuth from '../../../hooks/useAuth';
+import useAuth from '@/hooks/useAuth';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/layouts/dashboard/header/ContactsPopover.tsx b/frontend/hospital-portal/src/layouts/dashboard/header/ContactsPopover.tsx
index 0dc02d5d..7c5c6961 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/header/ContactsPopover.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/header/ContactsPopover.tsx
@@ -3,15 +3,15 @@ import { useState } from 'react';
 import { alpha } from '@mui/material/styles';
 import { Avatar, Typography, ListItemText, ListItemAvatar, MenuItem } from '@mui/material';
 // utils
-import { fToNow } from '../../../utils/formatTime';
+import { fToNow } from '@/utils/formatTime';
 // _mock_
-import { _contacts } from '../../../_mock';
+import { _contacts } from '@/_mock';
 // components
-import Iconify from '../../../components/Iconify';
-import Scrollbar from '../../../components/Scrollbar';
-import MenuPopover from '../../../components/MenuPopover';
-import BadgeStatus from '../../../components/BadgeStatus';
-import { IconButtonAnimate } from '../../../components/animate';
+import Iconify from '@/components/Iconify';
+import Scrollbar from '@/components/Scrollbar';
+import MenuPopover from '@/components/MenuPopover';
+import BadgeStatus from '@/components/BadgeStatus';
+import { IconButtonAnimate } from '@/components/animate';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/layouts/dashboard/header/LanguagePopover.tsx b/frontend/hospital-portal/src/layouts/dashboard/header/LanguagePopover.tsx
index f8bc33e6..7b78ee18 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/header/LanguagePopover.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/header/LanguagePopover.tsx
@@ -2,9 +2,9 @@ import { useState } from 'react';
 // @mui
 import { MenuItem, Stack } from '@mui/material';
 // components
-import Image from '../../../components/Image';
-import MenuPopover from '../../../components/MenuPopover';
-import { IconButtonAnimate } from '../../../components/animate';
+import Image from '@/components/Image';
+import MenuPopover from '@/components/MenuPopover';
+import { IconButtonAnimate } from '@/components/animate';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/layouts/dashboard/header/NotificationsPopover.tsx b/frontend/hospital-portal/src/layouts/dashboard/header/NotificationsPopover.tsx
index 825c5edc..b6f713ff 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/header/NotificationsPopover.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/header/NotificationsPopover.tsx
@@ -16,14 +16,14 @@ import {
   ListItemButton,
 } from '@mui/material';
 // utils
-import { fToNow } from '../../../utils/formatTime';
+import { fToNow } from '@/utils/formatTime';
 // _mock_
-import { _notifications } from '../../../_mock';
+import { _notifications } from '@/_mock';
 // components
-import Iconify from '../../../components/Iconify';
-import Scrollbar from '../../../components/Scrollbar';
-import MenuPopover from '../../../components/MenuPopover';
-import { IconButtonAnimate } from '../../../components/animate';
+import Iconify from '@/components/Iconify';
+import Scrollbar from '@/components/Scrollbar';
+import MenuPopover from '@/components/MenuPopover';
+import { IconButtonAnimate } from '@/components/animate';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/layouts/dashboard/header/Searchbar.tsx b/frontend/hospital-portal/src/layouts/dashboard/header/Searchbar.tsx
index 2b89f4bb..517943f2 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/header/Searchbar.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/header/Searchbar.tsx
@@ -3,10 +3,10 @@ import { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Input, Slide, Button, InputAdornment, ClickAwayListener } from '@mui/material';
 // utils
-import cssStyles from '../../../utils/cssStyles';
+import cssStyles from '@/utils/cssStyles';
 // components
-import Iconify from '../../../components/Iconify';
-import { IconButtonAnimate } from '../../../components/animate';
+import Iconify from '@/components/Iconify';
+import { IconButtonAnimate } from '@/components/animate';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/layouts/dashboard/header/index.tsx b/frontend/hospital-portal/src/layouts/dashboard/header/index.tsx
index f39781e7..156125b4 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/header/index.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/header/index.tsx
@@ -2,16 +2,16 @@
 import { styled } from '@mui/material/styles';
 import { Box, Stack, AppBar, Toolbar } from '@mui/material';
 // hooks
-import useOffSetTop from '../../../hooks/useOffSetTop';
-import useResponsive from '../../../hooks/useResponsive';
+import useOffSetTop from '@/hooks/useOffSetTop';
+import useResponsive from '@/hooks/useResponsive';
 // utils
-import cssStyles from '../../../utils/cssStyles';
+import cssStyles from '@/utils/cssStyles';
 // config
-import { HEADER, NAVBAR } from '../../../config';
+import { HEADER, NAVBAR } from '@/config';
 // components
-import Logo from '../../../components/Logo';
-import Iconify from '../../../components/Iconify';
-import { IconButtonAnimate } from '../../../components/animate';
+import Logo from '@/components/Logo';
+import Iconify from '@/components/Iconify';
+import { IconButtonAnimate } from '@/components/animate';
 //
 import Searchbar from './Searchbar';
 import AccountPopover from './AccountPopover';
diff --git a/frontend/hospital-portal/src/layouts/dashboard/index.tsx b/frontend/hospital-portal/src/layouts/dashboard/index.tsx
index 6a30c399..5b73238b 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/index.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/index.tsx
@@ -4,11 +4,11 @@ import { Outlet } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
 // hooks
-import useSettings from '../../hooks/useSettings';
-import useResponsive from '../../hooks/useResponsive';
-import useCollapseDrawer from '../../hooks/useCollapseDrawer';
+import useSettings from '@/hooks/useSettings';
+import useResponsive from '@/hooks/useResponsive';
+import useCollapseDrawer from '@/hooks/useCollapseDrawer';
 // config
-import { HEADER, NAVBAR } from '../../config';
+import { HEADER, NAVBAR } from '@/config';
 //
 import DashboardHeader from './header';
 import NavbarVertical from './navbar/NavbarVertical';
diff --git a/frontend/hospital-portal/src/layouts/dashboard/navbar/CollapseButton.tsx b/frontend/hospital-portal/src/layouts/dashboard/navbar/CollapseButton.tsx
index 9b28056d..32bd814b 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/navbar/CollapseButton.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/navbar/CollapseButton.tsx
@@ -1,7 +1,7 @@
 // @mui
 import { Box } from '@mui/material';
 // components
-import { IconButtonAnimate } from '../../../components/animate';
+import { IconButtonAnimate } from '@/components/animate';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/layouts/dashboard/navbar/NavConfig.tsx b/frontend/hospital-portal/src/layouts/dashboard/navbar/NavConfig.tsx
index 03e1c4b3..2e1efd95 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/navbar/NavConfig.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/navbar/NavConfig.tsx
@@ -1,5 +1,5 @@
 // components
-import SvgIconStyle from '../../../components/SvgIconStyle';
+import SvgIconStyle from '@/components/SvgIconStyle';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx b/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx
index 35c8503f..6d75ec49 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx
@@ -1,7 +1,7 @@
 // @mui
 import { Stack, Button, Typography } from '@mui/material';
 // assets
-import { DocIllustration } from '../../../assets';
+import { DocIllustration } from '@/assets';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarHorizontal.tsx b/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarHorizontal.tsx
index 4fd9ff5b..21cddb5d 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarHorizontal.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarHorizontal.tsx
@@ -3,9 +3,9 @@ import { memo } from 'react';
 import { styled } from '@mui/material/styles';
 import { Container, AppBar } from '@mui/material';
 // config
-import { HEADER } from '../../../config';
+import { HEADER } from '@/config';
 // components
-import { NavSectionHorizontal } from '../../../components/nav-section';
+import { NavSectionHorizontal } from '@/components/nav-section';
 //
 import navConfig from './NavConfig';
 
diff --git a/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarVertical.tsx b/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarVertical.tsx
index a356edf3..35a449d5 100755
--- a/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarVertical.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/navbar/NavbarVertical.tsx
@@ -4,16 +4,16 @@ import { useLocation } from 'react-router-dom';
 import { styled, useTheme } from '@mui/material/styles';
 import { Box, Stack, Drawer, Typography } from '@mui/material';
 // hooks
-import useResponsive from '../../../hooks/useResponsive';
-import useCollapseDrawer from '../../../hooks/useCollapseDrawer';
+import useResponsive from '@/hooks/useResponsive';
+import useCollapseDrawer from '@/hooks/useCollapseDrawer';
 // utils
-import cssStyles from '../../../utils/cssStyles';
+import cssStyles from '@/utils/cssStyles';
 // config
-import { NAVBAR } from '../../../config';
+import { NAVBAR } from '@/config';
 // components
-import Logo from '../../../components/Logo';
-import Scrollbar from '../../../components/Scrollbar';
-import { NavSectionVertical } from '../../../components/nav-section';
+import Logo from '@/components/Logo';
+import Scrollbar from '@/components/Scrollbar';
+import { NavSectionVertical } from '@/components/nav-section';
 //
 import navConfig from './NavConfig';
 import NavbarDocs from './NavbarDocs';
@@ -76,7 +76,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
           <Stack direction="row" alignItems="center" justifyContent="space-between">
             <Stack direction="row" alignItems="center">
               <Logo />
-              <Typography ml={3}>PRIME CENTER</Typography>
+              <Typography ml={3}>Hospital Portal</Typography>
             </Stack>
             <CollapseButton onToggleCollapse={onToggleCollapse} collapseClick={collapseClick} />
           </Stack>) 
@@ -86,7 +86,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
           </Stack>
         )}
 
-        <NavbarAccount isCollapse={isCollapse} />
+        {/* <NavbarAccount isCollapse={isCollapse} /> */}
       </Stack>
 
       <NavSectionVertical navConfig={navConfig} isCollapse={isCollapse} />
diff --git a/frontend/hospital-portal/src/pages/Dashboard.tsx b/frontend/hospital-portal/src/pages/Dashboard.tsx
index 96a89fb0..23dbe24c 100755
--- a/frontend/hospital-portal/src/pages/Dashboard.tsx
+++ b/frontend/hospital-portal/src/pages/Dashboard.tsx
@@ -1,64 +1,78 @@
 // @mui
-import { Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
+import { Typography, Container, Grid } from '@mui/material';
 // hooks
-import useSettings from '../hooks/useSettings';
+import useSettings from '@/hooks/useSettings';
 // components
-import Page from '../components/Page';
-import axios from '../utils/axios';
-import useAuth from '../hooks/useAuth';
-import SomethingUsage from '../sections/dashboard/SomethingUsage';
-import { fCurrency } from '../utils/formatNumber';
+import Page from '@/components/Page';
+// theme
+import CardNotification from '@/sections/dashboard/CardNotification';
+import CardSearchMember from '@/sections/dashboard/CardSearchMember'
+import { useContext, useEffect, useState } from 'react';
+import axios from '@/utils/axios';
+import { Stack } from '@mui/system';
+import { Input } from '@mui/material';
+//sections
+import TableList from '@/sections/dashboard/TableList';
 
 // ----------------------------------------------------------------------
 
+const itemList = [
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
+];
+
+// ----------------------------------------------------------------------
+
+/* ---------------------------------- types --------------------------------- */
+
+type PolicyProps = {
+  myLimit: {
+    balance: number;
+    total: number;
+    percentage: number;
+  };
+  lockLimit: {
+    balance: number;
+    percentage: number;
+  };
+};
+
+/* -------------------------------------------------------------------------- */
+
+/* ------------------------------ default data ------------------------------ */
+const defaultPolicyData = {
+  myLimit: {
+    balance: 0,
+    total: 0,
+    percentage: 0,
+  },
+  lockLimit: {
+    balance: 0,
+    percentage: 0,
+  },
+};
+/* -------------------------------------------------------------------------- */
+
 export default function Dashboard() {
   const { themeStretch } = useSettings();
 
-  const { logout } = useAuth();
-  
-  const loadSomething = () => {
-    axios.get('/user')
-  };
-
-  const DangerCard = styled(Card)(({ theme }) => ({
-    boxShadow: 'none',
-    padding: theme.spacing(3),
-    color: theme.palette.error.main,
-    backgroundColor: theme.palette.error.lighter,
-  }));
-
-  const SuccessCard = styled(Card)(({ theme }) => ({
-    boxShadow: 'none',
-    padding: theme.spacing(3),
-    color: theme.palette.success.darker,
-    backgroundColor: theme.palette.success.lighter,
-  }));
+  // const [tableData, setTableData] = useState([]);
+  const [policyData, setPolicyData] = useState<PolicyProps>(defaultPolicyData);
 
   return (
     <Page title="Dashboard">
       <Container maxWidth={themeStretch ? false : 'xl'}>
-        <Typography variant="h3" component="h1" paragraph>
-          Dashboard
-        </Typography>
-
         <Grid container spacing={2}>
-          <Grid item xs={6}>
-            <SomethingUsage />
+          <Grid item xs={12} lg={6} md={6}>
+            <CardSearchMember></CardSearchMember>
           </Grid>
-          <Grid item xs={6}>
-            <DangerCard>
-              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
-                <Typography sx={{ typography: 'subtitle2' }}>This Month Usages </Typography>
-                <Typography>{fCurrency(15000000)} (57)</Typography>
-              </Stack>
-            </DangerCard>
-            <br />
-            <SuccessCard>
-              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
-                <Typography sx={{ typography: 'subtitle2' }}>Remaining Balance Estimation </Typography>
-                <Typography>November 2022</Typography>
-              </Stack>
-            </SuccessCard>
+          <Grid item xs={12} lg={6} md={6}>
+            <CardNotification data={itemList} />
+          </Grid>
+          <Grid item xs={12} lg={12} md={12}>
+            <TableList />
           </Grid>
         </Grid>
       </Container>
diff --git a/frontend/hospital-portal/src/pages/Page404.tsx b/frontend/hospital-portal/src/pages/Page404.tsx
index 5b78d2fe..b9748316 100755
--- a/frontend/hospital-portal/src/pages/Page404.tsx
+++ b/frontend/hospital-portal/src/pages/Page404.tsx
@@ -4,10 +4,10 @@ import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Typography, Container } from '@mui/material';
 // components
-import Page from '../components/Page';
-import { MotionContainer, varBounce } from '../components/animate';
+import Page from '@/components/Page';
+import { MotionContainer, varBounce } from '@/components/animate';
 // assets
-import { PageNotFoundIllustration } from '../assets';
+import { PageNotFoundIllustration } from '@/assets';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/pages/auth/ForgetPassword.tsx b/frontend/hospital-portal/src/pages/auth/ForgetPassword.tsx
index 3a7285c9..5920fc62 100755
--- a/frontend/hospital-portal/src/pages/auth/ForgetPassword.tsx
+++ b/frontend/hospital-portal/src/pages/auth/ForgetPassword.tsx
@@ -3,14 +3,14 @@ import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Link, Container, Typography } from '@mui/material';
 // layouts
-import LogoOnlyLayout from '../../layouts/LogoOnlyLayout';
+import LogoOnlyLayout from '@/layouts/LogoOnlyLayout';
 // routes
-import { PATH_AUTH } from '../../routes/paths';
+import { PATH_AUTH } from '@/routes/paths';
 // components
-import Page from '../../components/Page';
-import Iconify from '../../components/Iconify';
+import Page from '@/components/Page';
+import Iconify from '@/components/Iconify';
 // sections
-import { ForgetPasswordForm } from '../../sections/auth/forget-password';
+import { ForgetPasswordForm } from '@/sections/auth/forget-password';
 import { useSearchParams } from 'react-router-dom';
 
 // ----------------------------------------------------------------------
diff --git a/frontend/hospital-portal/src/pages/auth/Login.tsx b/frontend/hospital-portal/src/pages/auth/Login.tsx
index 81eb278c..4ab4f315 100755
--- a/frontend/hospital-portal/src/pages/auth/Login.tsx
+++ b/frontend/hospital-portal/src/pages/auth/Login.tsx
@@ -13,16 +13,16 @@ import {
     Typography,
 } from "@mui/material";
 // routes
-import { PATH_AUTH } from "../../routes/paths";
+import { PATH_AUTH } from "@/routes/paths";
 // hooks
-import useAuth from "../../hooks/useAuth";
-import useResponsive from "../../hooks/useResponsive";
+import useAuth from "@/hooks/useAuth";
+import useResponsive from "@/hooks/useResponsive";
 // components
-import Page from "../../components/Page";
-import Logo from "../../components/Logo";
-import Image from "../../components/Image";
+import Page from "@/components/Page";
+import Logo from "@/components/Logo";
+import Image from "@/components/Image";
 // sections
-import { LoginForm } from "../../sections/auth/login";
+import { LoginForm } from "@/sections/auth/login";
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/pages/auth/Register.tsx b/frontend/hospital-portal/src/pages/auth/Register.tsx
index 89a364d3..619e0d26 100755
--- a/frontend/hospital-portal/src/pages/auth/Register.tsx
+++ b/frontend/hospital-portal/src/pages/auth/Register.tsx
@@ -4,16 +4,16 @@ import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import { Box, Card, Link, Container, Typography, Tooltip } from '@mui/material';
 // hooks
-import useAuth from '../../hooks/useAuth';
-import useResponsive from '../../hooks/useResponsive';
+import useAuth from '@/hooks/useAuth';
+import useResponsive from '@/hooks/useResponsive';
 // routes
-import { PATH_AUTH } from '../../routes/paths';
+import { PATH_AUTH } from '@/routes/paths';
 // components
-import Page from '../../components/Page';
-import Logo from '../../components/Logo';
-import Image from '../../components/Image';
+import Page from '@/components/Page';
+import Logo from '@/components/Logo';
+import Image from '@/components/Image';
 // sections
-import { RegisterForm } from '../../sections/auth/register';
+import { RegisterForm } from '@/sections/auth/register';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/pages/auth/ResetPassword.tsx b/frontend/hospital-portal/src/pages/auth/ResetPassword.tsx
index c10b1782..52e2982f 100755
--- a/frontend/hospital-portal/src/pages/auth/ResetPassword.tsx
+++ b/frontend/hospital-portal/src/pages/auth/ResetPassword.tsx
@@ -4,15 +4,15 @@ import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Container, Typography } from '@mui/material';
 // layouts
-import LogoOnlyLayout from '../../layouts/LogoOnlyLayout';
+import LogoOnlyLayout from '@/layouts/LogoOnlyLayout';
 // routes
-import { PATH_AUTH } from '../../routes/paths';
+import { PATH_AUTH } from '@/routes/paths';
 // components
-import Page from '../../components/Page';
+import Page from '@/components/Page';
 // sections
-import { ResetPasswordForm } from '../../sections/auth/reset-password';
+import { ResetPasswordForm } from '@/sections/auth/reset-password';
 // assets
-import { SentIcon } from '../../assets';
+import { SentIcon } from '@/assets';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/pages/auth/VerifyCode.tsx b/frontend/hospital-portal/src/pages/auth/VerifyCode.tsx
index 1ca75352..903226aa 100755
--- a/frontend/hospital-portal/src/pages/auth/VerifyCode.tsx
+++ b/frontend/hospital-portal/src/pages/auth/VerifyCode.tsx
@@ -3,14 +3,14 @@ import { Link as RouterLink } from 'react-router-dom';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Link, Container, Typography } from '@mui/material';
 // layouts
-import LogoOnlyLayout from '../../layouts/LogoOnlyLayout';
+import LogoOnlyLayout from '@/layouts/LogoOnlyLayout';
 // routes
-import { PATH_AUTH } from '../../routes/paths';
+import { PATH_AUTH } from '@/routes/paths';
 // components
-import Page from '../../components/Page';
-import Iconify from '../../components/Iconify';
+import Page from '@/components/Page';
+import Iconify from '@/components/Iconify';
 // sections
-import { VerifyCodeForm } from '../../sections/auth/verify-code';
+import { VerifyCodeForm } from '@/sections/auth/verify-code';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/routes/index.tsx b/frontend/hospital-portal/src/routes/index.tsx
index 5ecc6c21..26fcfbdc 100755
--- a/frontend/hospital-portal/src/routes/index.tsx
+++ b/frontend/hospital-portal/src/routes/index.tsx
@@ -1,16 +1,16 @@
 import { Suspense, lazy, ElementType } from 'react';
 import { Navigate, useRoutes, useLocation } from 'react-router-dom';
 // layouts
-import DashboardLayout from '../layouts/dashboard';
-import LogoOnlyLayout from '../layouts/LogoOnlyLayout';
+import DashboardLayout from '@/layouts/dashboard';
+import LogoOnlyLayout from '@/layouts/LogoOnlyLayout';
 // components
-import LoadingScreen from '../components/LoadingScreen';
-import GuestGuard from '../guards/GuestGuard';
-import { RegisterForm } from '../sections/auth/register';
-import Register from '../pages/auth/Register';
-import VerifyCode from '../pages/auth/VerifyCode';
-import { AuthProvider } from '../contexts/LaravelAuthContext';
-import AuthGuard from '../guards/AuthGuard';
+import LoadingScreen from '@/components/LoadingScreen';
+import GuestGuard from '@/guards/GuestGuard';
+import { RegisterForm } from '@/sections/auth/register';
+import Register from '@/pages/auth/Register';
+import VerifyCode from '@/pages/auth/VerifyCode';
+import { AuthProvider } from '@/contexts/LaravelAuthContext';
+import AuthGuard from '@/guards/AuthGuard';
 
 // ----------------------------------------------------------------------
 
@@ -91,10 +91,10 @@ export default function Router() {
   ]);
 }
 
-const Login = Loadable(lazy(() => import('../pages/auth/Login')));
-const ResetPassword = Loadable(lazy(() => import('../pages/auth/ResetPassword')));
-const ForgetPassword = Loadable(lazy(() => import('../pages/auth/ForgetPassword')));
+const Login = Loadable(lazy(() => import('@/pages/auth/Login')));
+const ResetPassword = Loadable(lazy(() => import('@/pages/auth/ResetPassword')));
+const ForgetPassword = Loadable(lazy(() => import('@/pages/auth/ForgetPassword')));
 
 // Dashboard
-const Dashboard = Loadable(lazy(() => import('../pages/Dashboard')));
-const NotFound = Loadable(lazy(() => import('../pages/Page404')));
+const Dashboard = Loadable(lazy(() => import('@/pages/Dashboard')));
+const NotFound = Loadable(lazy(() => import('@/pages/Page404')));
diff --git a/frontend/hospital-portal/src/sections/auth/AuthFirebaseSocial.tsx b/frontend/hospital-portal/src/sections/auth/AuthFirebaseSocial.tsx
index 8e6d33ed..de6350ba 100755
--- a/frontend/hospital-portal/src/sections/auth/AuthFirebaseSocial.tsx
+++ b/frontend/hospital-portal/src/sections/auth/AuthFirebaseSocial.tsx
@@ -1,7 +1,7 @@
 // @mui
 import { Grid, Button, Divider, Typography } from '@mui/material';
 // components
-import Iconify from '../../components/Iconify';
+import Iconify from '@/components/Iconify';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/sections/auth/forget-password/ForgetPasswordForm.tsx b/frontend/hospital-portal/src/sections/auth/forget-password/ForgetPasswordForm.tsx
index 2b761f04..4f6cc67c 100755
--- a/frontend/hospital-portal/src/sections/auth/forget-password/ForgetPasswordForm.tsx
+++ b/frontend/hospital-portal/src/sections/auth/forget-password/ForgetPasswordForm.tsx
@@ -9,11 +9,11 @@ import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import { Alert, IconButton, InputAdornment, Stack, Typography } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 // hooks
-import useIsMountedRef from '../../../hooks/useIsMountedRef';
+import useIsMountedRef from '@/hooks/useIsMountedRef';
 // components
-import { FormProvider, RHFTextField } from '../../../components/hook-form';
-import axios from '../../../utils/axios';
-import Iconify from '../../../components/Iconify';
+import { FormProvider, RHFTextField } from '@/components/hook-form';
+import axios from '@/utils/axios';
+import Iconify from '@/components/Iconify';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/sections/auth/login/LoginForm.tsx b/frontend/hospital-portal/src/sections/auth/login/LoginForm.tsx
index 929d871d..118b6324 100755
--- a/frontend/hospital-portal/src/sections/auth/login/LoginForm.tsx
+++ b/frontend/hospital-portal/src/sections/auth/login/LoginForm.tsx
@@ -8,13 +8,13 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { Link, Stack, Alert, IconButton, InputAdornment } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 // routes
-import { PATH_AUTH } from '../../../routes/paths';
+import { PATH_AUTH } from '@/routes/paths';
 // hooks
-import useAuth from '../../../hooks/useAuth';
-import useIsMountedRef from '../../../hooks/useIsMountedRef';
+import useAuth from '@/hooks/useAuth';
+import useIsMountedRef from '@/hooks/useIsMountedRef';
 // components
-import Iconify from '../../../components/Iconify';
-import { FormProvider, RHFTextField, RHFCheckbox } from '../../../components/hook-form';
+import Iconify from '@/components/Iconify';
+import { FormProvider, RHFTextField, RHFCheckbox } from '@/components/hook-form';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/sections/auth/register/RegisterForm.tsx b/frontend/hospital-portal/src/sections/auth/register/RegisterForm.tsx
index 6646de5e..9f14d3d6 100755
--- a/frontend/hospital-portal/src/sections/auth/register/RegisterForm.tsx
+++ b/frontend/hospital-portal/src/sections/auth/register/RegisterForm.tsx
@@ -7,11 +7,11 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { Stack, IconButton, InputAdornment, Alert } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 // hooks
-import useAuth from '../../../hooks/useAuth';
-import useIsMountedRef from '../../../hooks/useIsMountedRef';
+import useAuth from '@/hooks/useAuth';
+import useIsMountedRef from '@/hooks/useIsMountedRef';
 // components
-import Iconify from '../../../components/Iconify';
-import { FormProvider, RHFTextField } from '../../../components/hook-form';
+import Iconify from '@/components/Iconify';
+import { FormProvider, RHFTextField } from '@/components/hook-form';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/sections/auth/reset-password/ResetPasswordForm.tsx b/frontend/hospital-portal/src/sections/auth/reset-password/ResetPasswordForm.tsx
index 552100d2..671f9f76 100755
--- a/frontend/hospital-portal/src/sections/auth/reset-password/ResetPasswordForm.tsx
+++ b/frontend/hospital-portal/src/sections/auth/reset-password/ResetPasswordForm.tsx
@@ -6,10 +6,10 @@ import { useForm } from 'react-hook-form';
 import { Alert, Stack } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 // hooks
-import useIsMountedRef from '../../../hooks/useIsMountedRef';
+import useIsMountedRef from '@/hooks/useIsMountedRef';
 // components
-import { FormProvider, RHFTextField } from '../../../components/hook-form';
-import axios from '../../../utils/axios';
+import { FormProvider, RHFTextField } from '@/components/hook-form';
+import axios from '@/utils/axios';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/sections/auth/verify-code/VerifyCodeForm.tsx b/frontend/hospital-portal/src/sections/auth/verify-code/VerifyCodeForm.tsx
index 7f0492e2..7ebb07fc 100755
--- a/frontend/hospital-portal/src/sections/auth/verify-code/VerifyCodeForm.tsx
+++ b/frontend/hospital-portal/src/sections/auth/verify-code/VerifyCodeForm.tsx
@@ -9,7 +9,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { OutlinedInput, Stack } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
 // routes
-// import { PATH_DASHBOARD } from '../../../routes/paths';
+// import { PATH_DASHBOARD } from '@/routes/paths';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/sections/dashboard/CardNotification.tsx b/frontend/hospital-portal/src/sections/dashboard/CardNotification.tsx
new file mode 100644
index 00000000..e44160d0
--- /dev/null
+++ b/frontend/hospital-portal/src/sections/dashboard/CardNotification.tsx
@@ -0,0 +1,140 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import { Button, Card, Typography, Link, Divider, Stack } from '@mui/material';
+import { ChevronRight } from '@mui/icons-material';
+// components
+import Iconify from '@/components/Iconify';
+// React
+import { useState } from 'react';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type NotificationProps = {
+  data?: DataContent[];
+};
+
+// ----------------------------------------------------------------------
+
+const RootNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: '1rem 0.5rem',
+  color: 'black',
+  backgroundColor: theme.palette.grey[200],
+  maxHeight: '240px',
+}));
+
+const ItemNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(1),
+  borderRadius: 0.5,
+  color: 'black',
+}));
+
+// ----------------------------------------------------------------------
+
+export default function CardNotification({ data }: NotificationProps) {
+  const [openDialog, setOpenDialog] = useState(false);
+  const [dialogTitle, setDialogTitle] = useState('');
+  const [isDialog, setIsDialog] = useState('');
+
+  const clickHandler = (isDialog: string) => {
+    switch (isDialog) {
+      case 'allNotification':
+        setDialogTitle('Notification');
+        setIsDialog(isDialog);
+        setOpenDialog(true);
+        break;
+      case 'infoDetail':
+        setDialogTitle('Claim Details');
+        setIsDialog(isDialog);
+        setOpenDialog(true);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return (
+    <RootNotificationStyle>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Typography>
+          <Typography
+            variant="body2"
+            component="span"
+            sx={{ display: 'flex', alignItems: 'center' }}
+          >
+            <Iconify icon="eva:bell-fill" marginRight={0.75} />
+            Notification
+            <span
+              style={{
+                width: '12px',
+                height: '12px',
+                backgroundColor: '#19BBBB',
+                marginLeft: '0.5rem',
+                borderRadius: '50%',
+              }}
+            />
+          </Typography>
+        </Typography>
+        <Button
+          sx={{ typography: 'body2' }}
+          endIcon={<ChevronRight />}
+          onClick={() => clickHandler('allNotification')}
+        >
+          View All
+        </Button>
+      </Stack>
+
+      <ItemNotificationStyle sx={{ marginTop: 2, overflowY: 'auto', maxHeight: '154px' }}>
+        {data
+          ? data.map(({ info, date, time }, key) => (
+              <div key={key}>
+                {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
+                <Stack direction="row" justifyContent="space-between" alignItems="center">
+                  <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                    <Typography sx={{ typography: 'caption' }}>{info}</Typography>
+                    <Link
+                      component="button"
+                      variant="caption"
+                      underline="always"
+                      onClick={() => clickHandler('infoDetail')}
+                    >
+                      Info Detail
+                    </Link>
+                  </Stack>
+                  <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                    <Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
+                    <Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
+                  </Stack>
+                </Stack>
+              </div>
+            ))
+          : ''}
+      </ItemNotificationStyle>
+
+      {isDialog === 'allNotification' && (
+        <DialogNotification
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={{ name: dialogTitle }}
+          data={data}
+        />
+      )}
+
+      {isDialog === 'infoDetail' && (
+        <DialogDetailClaim
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={{ name: dialogTitle }}
+        />
+      )}
+    </RootNotificationStyle>
+  );
+}
diff --git a/frontend/hospital-portal/src/sections/dashboard/CardSearchMember.tsx b/frontend/hospital-portal/src/sections/dashboard/CardSearchMember.tsx
new file mode 100644
index 00000000..32d5ed32
--- /dev/null
+++ b/frontend/hospital-portal/src/sections/dashboard/CardSearchMember.tsx
@@ -0,0 +1,153 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Button,
+  Card,
+  Typography,
+  Link,
+  Divider,
+  Stack,
+  TextField,
+  Grid,
+  InputAdornment,
+} from '@mui/material';
+import { ChevronRight } from '@mui/icons-material';
+// React
+import React, { useState } from 'react';
+import { LoadingButton } from '@mui/lab';
+import Iconify from '@/components/Iconify';
+import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { fPostFormat } from '@/utils/formatTime';
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+import DialogBenefit from './DiaglogBenefit';
+import MuiDialog from '@/components/MuiDialog';
+import axios from '@/utils/axios';
+import { useSnackbar } from 'notistack';
+import DialogMember from './DialogMember';
+
+// ----------------------------------------------------------------------
+
+const RootNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: '1rem 0.5rem',
+  color: 'black',
+  backgroundColor: theme.palette.grey[200],
+  // maxHeight: '240px',
+}));
+
+const ItemNotificationStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(1),
+  borderRadius: 0.5,
+  color: 'black',
+}));
+
+// ----------------------------------------------------------------------
+
+export default function CardSearchMember() {
+  const {enqueueSnackbar} = useSnackbar();
+
+  const [noPolis, setNoPolis] = useState('');
+  const [tanggalLahir, setTanggalLahir] = useState('');
+  const [loadingBenefit, setLoadingBenefit] = useState(false);
+  const [loadingClaim, setLoadingClaim] = useState(false);
+  const [openDialogBenefit, setOpenDialogBenefit] = useState(false);
+  const [openDialogClaim, setOpenDialogClaim] = useState(false);
+  const [currentMember, setCurrentMember] = useState(null);
+  
+  function handleSearchMember() {
+    setLoadingBenefit(true)
+
+    axios.post('/search-member', { 
+      no_polis: noPolis, 
+      birth_date: tanggalLahir ? fPostFormat(tanggalLahir, 'yyyy-MM-dd') : null
+    })
+    .then((response) => {
+      setOpenDialogBenefit(true)
+      setCurrentMember(response.data.data)
+    })
+    .catch(({response}) => {
+      enqueueSnackbar(response.data.errors ? response.data.errors[0] : (response.data ? response.data.message : 'Opps, Something went Wrong!'), {variant : "error"})
+    })
+    .then(() => {
+      setLoadingBenefit(false)
+    });
+  }
+
+  return (
+    <div>
+      <RootNotificationStyle sx={{ p: 2, height: 'auto' }}>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          sx={{ paddingBottom: 2, paddingTop: 1 }}
+        >
+          <Typography>
+            <Typography
+              variant="body2"
+              component="span"
+              sx={{ display: 'flex', alignItems: 'center' }}
+            >
+              Pengajuan Jaminan
+            </Typography>
+          </Typography>
+        </Stack>
+        <Stack gap={2}>
+          <TextField variant="outlined" label="Nomor Polis" value={noPolis} onChange={(event) => {
+            setNoPolis(event.target.value)
+          }}></TextField>
+          <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DatePicker
+              label="Tanggal Lahir"
+              value={tanggalLahir}
+              onChange={(newValue) => {
+                setTanggalLahir(  (newValue));
+              }}
+              inputFormat="dd-MM-yyyy"
+              renderInput={(params) => <TextField {...params} />}
+            />
+          </LocalizationProvider>
+
+          <Stack gap={2} flexDirection="row">
+            <LoadingButton
+              variant="outlined"
+              sx={{
+                background: '#fff',
+                p: 1,
+                width: '100%',
+              }}
+              loading={loadingBenefit}
+              onClick={() => {
+                handleSearchMember()
+              }}
+            >
+              <Iconify icon="eva:eye-fill" marginRight={0.75} />
+              Cari Member
+            </LoadingButton>
+            {/* <LoadingButton
+              variant="contained"
+              sx={{
+                p: 1,
+                width: '100%',
+              }}
+              loading={loadingClaim}
+            >
+              Ajukan Penjaminan
+            </LoadingButton> */}
+          </Stack>
+        </Stack>
+      </RootNotificationStyle>
+{/* 
+      <DialogBenefit open={openDialogBenefit} setOpen={setOpenDialogBenefit}></DialogBenefit> */}
+      <MuiDialog
+          title={{name: "Member"}}
+          openDialog={openDialogBenefit}
+          setOpenDialog={setOpenDialogBenefit}
+          content={DialogMember(currentMember, () => {setOpenDialogBenefit(false)})}
+          maxWidth="md"
+        />
+    </div>
+  );
+}
diff --git a/frontend/hospital-portal/src/sections/dashboard/DashboardTable.tsx b/frontend/hospital-portal/src/sections/dashboard/DashboardTable.tsx
new file mode 100755
index 00000000..ec9db7e6
--- /dev/null
+++ b/frontend/hospital-portal/src/sections/dashboard/DashboardTable.tsx
@@ -0,0 +1,315 @@
+// @mui
+import {
+  Autocomplete,
+  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,
+  Pagination,
+  TablePagination,
+  Grid,
+} from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import AddIcon from '@mui/icons-material/Add';
+import UploadIcon from '@mui/icons-material/Upload';
+import CancelIcon from '@mui/icons-material/Cancel';
+// hooks
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '@/hooks/useSettings';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+// components
+import axios from '@/utils/axios';
+import { LaravelPaginatedData } from '@/@types/paginated-data';
+import { Member } from '@/@types/member';
+import Iconify from '@/components/Iconify';
+
+export default function DashboardTable() {
+  const navigate = useNavigate();
+  const { themeStretch } = useSettings();
+  const { corporate_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [importResult, setImportResult] = useState(null);
+
+  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 handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+      props.onSearch(searchText); // Trigger to Parent
+    };
+
+    // useEffect(() => {
+    //   // Trigger First Search
+    //   setSearchText(searchParams.get('search') ?? '');
+    // }, [searchParams]);
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ flex: '1' }}>
+        <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 importForm = useRef<HTMLInputElement>(null);
+    const [currentImportFileName, setCurrentImportFileName] = useState(null);
+
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name);
+      } else {
+        setCurrentImportFileName(null);
+      }
+    };
+
+    const options = ['All', 'Option 2'];
+    const [value, setValue] = React.useState<string | null>(options[0]);
+    const [inputValue, setInputValue] = React.useState('');
+
+    return (
+      <div>
+        <Stack direction={'row'} justifyContent="space-between" spacing={2} sx={{ p: 2 }}>
+          {/* Filter Division */}
+          {/* <Autocomplete
+            value={value}
+            onChange={(event: any, newValue: string | null) => {
+              setValue(newValue);
+            }}
+            inputValue={inputValue}
+            onInputChange={(event, newInputValue) => {
+              setInputValue(newInputValue);
+            }}
+            id="controllable-states-demo"
+            options={options}
+            sx={{ minWidth: 240 }}
+            renderInput={(params) => <TextField {...params} label="Division" />}
+          /> */}
+          {/* Search */}
+          <SearchInput onSearch={applyFilter} />
+
+          {/* Button Import */}
+          <Button
+            id="import-button"
+            variant="outlined"
+            startIcon={<Iconify icon="eva:download-fill" />}
+            sx={{ p: 1.8, minWidth: '104px' }}
+            // onClick={() => {}}
+          >
+            Import
+          </Button>
+          {/* <input
+            type="file"
+            id="file"
+            ref={importForm}
+            style={{ display: 'none' }}
+            onChange={handleImportChange}
+            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+          /> */}
+          {/* Button Add Task */}
+          <Button variant="contained" startIcon={<AddIcon />} sx={{ p: 1.8, minWidth: '142px' }}>
+            Add Data
+          </Button>
+        </Stack>
+      </div>
+    );
+  }
+
+  // Called on every row to map the data to the columns
+  function createData(member: Member): Member {
+    return {
+      ...member,
+    };
+  }
+
+  // Generate the every row of the table
+  // function Row(props: { row: ReturnType<typeof createData> }) {
+  //   const { row } = props;
+  //   const [open, setOpen] = React.useState(true);
+
+  //   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.member_id}</TableCell>
+  //         <TableCell align="left">{row.payor_id}</TableCell>
+  //         <TableCell align="left">{row.name}</TableCell>
+  //         <TableCell align="left">{row.nik}</TableCell>
+  //         <TableCell align="left">{row.nric}</TableCell>
+
+  //         <TableCell align="right">
+  //           <Button variant="outlined" color="success" size="small">
+  //             Active
+  //           </Button>
+  //         </TableCell>
+  //         {/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
+  //       </TableRow>
+  //       {/* COLLAPSIBLE ROW */}
+  //       <TableRow>
+  //         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
+  //           <Collapse in={open} timeout="auto" unmountOnExit>
+  //             <Box sx={{ borderBottom: 1 }}>
+  //               <Typography variant="body2" gutterBottom component="div">
+  //                 <Grid></Grid>
+  //               </Typography>
+  //             </Box>
+  //           </Collapse>
+  //         </TableCell>
+  //       </TableRow>
+  //     </React.Fragment>
+  //   );
+  // }
+
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableData, setDataTableData] = 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: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/members', { params: filter });
+
+    setDataTableData(response.data.members);
+    setDataTableLoading(false);
+  };
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
+  const applyFilter = async (searchFilter: string) => {
+    await loadDataTableData({ search: searchFilter });
+    setSearchParams({ search: searchFilter });
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  return (
+    <Card>
+      <ImportForm />
+      <Stack>
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left">
+                  MemberID
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Name
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Divisi
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Limit
+                </TableCell>
+                <TableCell style={headStyle} align="right" width={100}>
+                  Status
+                </TableCell>
+                <TableCell style={headStyle} align="right" width={100}>
+                  Action
+                </TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align="center">
+                    No Data Found
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : dataTableData.data.length === 0 ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align="center">
+                    No Data
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : (
+              <TableBody>
+                {/* {dataTableData.data.map((row) => (
+                  <Row key={row.id} row={row} />
+                ))} */}
+                Testing
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        {/* <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={rows.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        /> */}
+      </Stack>
+    </Card>
+  );
+}
diff --git a/frontend/hospital-portal/src/sections/dashboard/DialogMember.tsx b/frontend/hospital-portal/src/sections/dashboard/DialogMember.tsx
new file mode 100644
index 00000000..beafa469
--- /dev/null
+++ b/frontend/hospital-portal/src/sections/dashboard/DialogMember.tsx
@@ -0,0 +1,100 @@
+// mui
+import { styled } from '@mui/material/styles';
+import { LoadingButton, TabPanel } from "@mui/lab";
+import { Card, Divider, Grid, LinearProgress, linearProgressClasses, Typography } from "@mui/material";
+import { Tab, Tabs } from "@mui/material";
+import { Box, Stack } from "@mui/material";
+import { useEffect, useState } from "react";
+import { fCurrency } from '@/utils/formatNumber';
+import { fPostFormat } from '@/utils/formatTime';
+import { Avatar } from '@mui/material';
+import Iconify from '@/components/Iconify';
+import FormRequestClaim from './FormRequestClaim';
+
+export default function DialogMember(member, closeDialog) {
+    const [currentTab, setCurrentTab] = useState('request')
+        
+    // ----------------------------------------------------------------------
+
+    useEffect(() => {
+        setCurrentTab('benefit')
+    }, [member])
+
+    function handleChangeTab(event: React.SyntheticEvent, newValue: string) {
+        setCurrentTab(newValue)
+    }
+
+    // ----------------------------------------------------------------------
+
+    const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+        height: 10,
+        borderRadius: 6,
+        [`&.${linearProgressClasses.colorPrimary}`]: {
+        backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
+        },
+        [`& .${linearProgressClasses.bar}`]: {
+        borderRadius: 6,
+        background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
+        },
+    }));
+
+    function TabPanel(props) {
+        const { children, value, index, ...other } = props;
+      
+        console.log('current', value)
+        return (
+          <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+          >
+            {value === index && (
+              <Box sx={{ p: 3 }}>
+                <div>{children}</div>
+              </Box>
+            )}
+          </div>
+        );
+    }
+
+    return (
+        <div>
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                <Tabs
+                    value={currentTab}
+                    onChange={handleChangeTab}
+                    aria-label="wrapped label tabs example"
+                >
+                    <Tab
+                    value="benefit"
+                    label="Benefit Summary"
+                    />
+                    <Tab value="request" label="Request Penjaminan" />
+                </Tabs>
+
+                <TabPanel value={currentTab} index={'benefit'}>
+                    <Grid container spacing={2}>
+                        { member && member?.current_plan?.corporate_benefits?.map((corporateBenefit, index) => {return (
+                            <Grid item sm={6} key={index}>
+                                <Card sx={{p: 2}}>
+                                    <Typography variant="body1" sx={{fontWeight: 500}}>{corporateBenefit.benefit.code}</Typography>
+                                    <Typography variant="body2">{corporateBenefit.benefit.description}</Typography>
+                                    <Typography variant="body2" sx={{ marginTop: 2 }}>Yearly Limits</Typography>
+                                    <BorderLinearProgress variant="determinate" value={100 - (corporateBenefit.limit_amount ? ((corporateBenefit.usage ?? 0) / corporateBenefit.limit_amount) : 0)} sx={{ mb: 1 }} />
+                                    <Typography sx={{ textAlign: 'right'}}>{corporateBenefit.usage ?? 0} / {fCurrency(corporateBenefit.limit_amount ?? 0)}</Typography>
+                                </Card>
+                            </Grid>
+                        )})}
+                    </Grid>
+                </TabPanel>
+
+                
+                <TabPanel value={currentTab} index={'request'}>
+                    <FormRequestClaim member={member} handleSubmitSuccess={closeDialog} />
+                </TabPanel>
+            </Box>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/hospital-portal/src/sections/dashboard/FormRequestClaim.tsx b/frontend/hospital-portal/src/sections/dashboard/FormRequestClaim.tsx
new file mode 100644
index 00000000..10da9479
--- /dev/null
+++ b/frontend/hospital-portal/src/sections/dashboard/FormRequestClaim.tsx
@@ -0,0 +1,158 @@
+import { styled } from '@mui/material/styles';
+import Iconify from '@/components/Iconify';
+import { fCurrency } from '@/utils/formatNumber';
+import { LoadingButton } from '@mui/lab';
+import { Avatar, Divider, LinearProgress, linearProgressClasses } from '@mui/material';
+import { Card } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
+import { fPostFormat } from '@/utils/formatTime';
+import axios from '@/utils/axios';
+import { enqueueSnackbar } from 'notistack';
+import { useRef, useState } from 'react';
+
+// TODO Fix any
+export default function FormRequestClaim({ member, handleSubmitSuccess }) {
+    const [submitLoading, setSubmitLoading] = useState(false)
+    const fileResultInput = useRef<HTMLInputElement>(null);
+    const [filesResult, setFilesResult] = useState([]);
+    
+  const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+    height: 10,
+    borderRadius: 6,
+    [`&.${linearProgressClasses.colorPrimary}`]: {
+      backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
+    },
+    [`& .${linearProgressClasses.bar}`]: {
+      borderRadius: 6,
+      background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
+    },
+  }));
+    // ----------------------------------------------------------------------
+
+    
+
+  const handleImportButton = () => {
+    if (fileResultInput?.current) {
+      fileResultInput.current ? fileResultInput.current.click() : console.log('No File selected');
+    } else {
+      alert('No file selected');
+    }
+  };
+  
+  const handleResultInputChange = (event) => {
+    if (event.target.files[0]) {
+        // console.log('pushing', event.target.files[0])
+        // let currentFiles = filesResult;
+        // currentFiles.push(event.target.files[0])
+        setFilesResult([...filesResult, ...event.target.files])
+    } else {
+        console.log('NO FILE')
+    }
+  }
+  const removeFiles = (filesState, index) => {
+    setFilesResult(filesState.filter((file, fileIndex) => {
+        console.log('looing through', fileIndex)
+        return fileIndex != index;
+    }))
+  }
+  
+    function submitRequest() {
+        setSubmitLoading(true)
+        axios.post('/claim-requests', {
+            'member_id' : member.id,
+        })
+        .then((response) => {
+            enqueueSnackbar(response.data.message ?? 'Berhasil membuat data', {variant: 'success'})
+            handleSubmitSuccess()
+        })
+        .catch(({response}) => {
+            enqueueSnackbar(response.data.message ?? 'Something Went Wrong', {variant: 'error'});
+        })
+        .then(() => {
+            setSubmitLoading(false)
+        })
+    }
+
+  return (
+    <Stack>
+      <Stack direction="row" justifyContent={'end'} sx={{ marginBottom: 2}}>
+        <Typography textAlign={'right'}>
+          Submission Date : <br /> {fPostFormat(new Date(), 'dd/MM/yyyy')}
+        </Typography>
+      </Stack>
+      <Card sx={{ p: 1, background: '#f4f6f8', marginBottom: 2 }}>
+        <Stack direction="row">
+          <Avatar
+            src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
+            alt={member?.full_name ?? ''}
+            sx={{ marginTop: 1, width: 48, height: 48 }}
+          />
+          <Stack sx={{ p: 1 }}>
+            <Typography>{member?.full_name ?? ''}</Typography>
+            <Typography>{member?.member_id ?? ''}</Typography>
+          </Stack>
+        </Stack>
+      </Card>
+
+      <Card sx={{ paddingY: 1, paddingX: 2 }}>
+        <Typography variant="body1" sx={{ marginBottom: 1, fontWeight: 600 }}>
+          Total Limit
+        </Typography>
+        <BorderLinearProgress
+          variant="determinate"
+          value={
+            100 -
+            (member?.current_plan?.limit_rules
+              ? (member?.current_plan?.usage ?? 0) / member?.current_plan?.limit_rules
+              : 0)
+          }
+        />
+        <Typography sx={{ textAlign: 'right', marginTop: 1 }}>
+          {fCurrency(member?.current_plan?.usage ?? 0)} /{' '}
+          {fCurrency(member?.current_plan?.limit_rules ?? 0)}
+        </Typography>
+      </Card>
+
+      <Stack sx={{ marginTop: 2 }}>
+        <Typography variant="body1" fontWeight={600}>
+          Hasil Penunjang
+        </Typography>
+        {/* <Typography variant="body2">Hasil Lab, </Typography> */}
+        <Stack
+          divider={<Divider orientation="horizontal" flexItem />}
+          spacing={1}
+          sx={{ marginY: 2 }}
+        >
+            {filesResult && filesResult.map((file, index) => (
+                <Stack direction="row" justifyContent={'space-between'} key={index}>
+                    <Typography>{file.name}</Typography>
+                    <Iconify icon="eva:trash-2-outline" color={'darkred'} onClick={() => {removeFiles(filesResult, index)}}></Iconify>
+                </Stack>
+            ))}
+          {/* <Stack direction="row" justifyContent={'space-between'}>
+                                    <Typography>Nama File .pdf</Typography>
+                                    <Iconify icon="eva:trash-2-outline" color={'darkred'}></Iconify>
+                                </Stack> */}
+        </Stack>
+        {/* { JSON.stringify(filesResult) } */}
+        <input
+          type="file"
+          id="file"
+          ref={fileResultInput}
+          style={{ display: 'none' }}
+          multiple
+          onChange={handleResultInputChange}
+          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+        />
+        <LoadingButton variant="outlined" onClick={() => {fileResultInput.current.click()}}>
+          <Iconify icon="eva:plus-fill" />
+          Add Result
+        </LoadingButton>
+      </Stack>
+
+      <LoadingButton variant="contained" sx={{ marginTop: 2, p: 2 }} onClick={() => {submitRequest()}} loading={submitLoading}>
+        LOG Request
+      </LoadingButton>
+    </Stack>
+  );
+}
diff --git a/frontend/hospital-portal/src/sections/dashboard/NotificationCard.tsx b/frontend/hospital-portal/src/sections/dashboard/NotificationCard.tsx
new file mode 100755
index 00000000..920268d8
--- /dev/null
+++ b/frontend/hospital-portal/src/sections/dashboard/NotificationCard.tsx
@@ -0,0 +1,109 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import { Button, Card, Divider, Link, Typography, Stack } from '@mui/material';
+import { ChevronRight } from '@mui/icons-material';
+// components
+import Iconify from '@/components/Iconify';
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: '1rem 0.5rem',
+  color: 'black',
+  backgroundColor: theme.palette.grey[200],
+  maxHeight: '250px',
+}));
+
+const ItemStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(1),
+  borderRadius: 0.5,
+  color: 'black',
+  height: '180px',
+}));
+
+const itemList = [
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
+  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
+];
+
+// ----------------------------------------------------------------------
+
+export default function NotificationCard() {
+  return (
+    <RootStyle>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Typography>
+          <Typography
+            variant="body2"
+            component="span"
+            sx={{ display: 'flex', alignItems: 'center' }}
+          >
+            <Iconify icon="eva:bell-fill" marginRight={0.75} />
+            Notification
+            <div
+              style={{
+                width: '12px',
+                height: '12px',
+                backgroundColor: '#19BBBB',
+                marginLeft: '0.5rem',
+                borderRadius: '50%',
+              }}
+            />
+          </Typography>
+        </Typography>
+        <Button sx={{ typography: 'body2' }} endIcon={<ChevronRight />}>
+          View All
+        </Button>
+      </Stack>
+
+      <Stack sx={{ marginTop: 2 }}>
+        <ItemStyle>
+          {itemList.map(({ info, date, time }, key) => (
+            <div key={key}>
+              {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
+              <Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                  <Typography sx={{ typography: 'caption' }}>{info}</Typography>
+                  <Link
+                    component="button"
+                    variant="caption"
+                    underline="always"
+                    onClick={() => {
+                      alert('Info Detail');
+                    }}
+                  >
+                    Info Detail
+                  </Link>
+                </Stack>
+                <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
+                  <Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
+                  <Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
+                </Stack>
+              </Stack>
+            </div>
+          ))}
+        </ItemStyle>
+      </Stack>
+
+      {/* <BorderLinearProgress variant="determinate" value={50} sx={{ mb: 1 }} />
+
+      <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
+        <Typography sx={{ typography: 'caption' }}>Lock Fund ( 25% )</Typography>
+        <Typography sx={{ typography: 'caption' }}>125.000.000 / 125.000.000</Typography>
+      </Stack>
+
+      <Stack direction="row" spacing={2}>
+        <Button variant="outlined" fullWidth={true}>
+          Submit Claim
+        </Button>
+        <Button variant="contained" startIcon={<Payments />} fullWidth={true}>
+          Top Up
+        </Button>
+      </Stack> */}
+    </RootStyle>
+  );
+}
diff --git a/frontend/hospital-portal/src/sections/dashboard/SomethingUsage.tsx b/frontend/hospital-portal/src/sections/dashboard/SomethingUsage.tsx
deleted file mode 100755
index 4fbaafc3..00000000
--- a/frontend/hospital-portal/src/sections/dashboard/SomethingUsage.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import merge from 'lodash/merge';
-import ReactApexChart from 'react-apexcharts';
-// @mui
-import { styled } from '@mui/material/styles';
-import { Card, Typography, Stack } from '@mui/material';
-// utils
-import { fCurrency, fPercent } from '../../utils/formatNumber';
-// components
-import Iconify from '../../components/Iconify';
-import BaseOptionChart from '../../components/chart/BaseOptionChart';
-
-// ----------------------------------------------------------------------
-
-const RootStyle = styled(Card)(({ theme }) => ({
-  boxShadow: 'none',
-  padding: theme.spacing(3),
-  color: theme.palette.primary.darker,
-  backgroundColor: theme.palette.primary.lighter,
-}));
-
-// ----------------------------------------------------------------------
-
-const INITIAL = 500000000
-const TOTAL = 257907000;
-const PERCENT = -3;
-const CHART_DATA = [{ data: [100, 99, 99, 85, 74, 57, 54, 51] }];
-
-export default function SomethingUsage() {
-  const chartOptions = merge(BaseOptionChart(), {
-    chart: { sparkline: { enabled: true } },
-    xaxis: { labels: { show: true } },
-    yaxis: { labels: { show: false } },
-    stroke: { width: 4 },
-    legend: { show: false },
-    grid: { show: false },
-    tooltip: {
-      marker: { show: false },
-      y: {
-        formatter: (seriesName: string) => (seriesName) + "%",
-        title: {
-          formatter: () => '',
-        },
-      },
-    },
-    fill: { gradient: { opacityFrom: 0, opacityTo: 0 } },
-  });
-
-  return (
-    <RootStyle>
-      <Stack direction="row" justifyContent="space-between" sx={{ mb: 3 }}>
-        <div>
-          <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
-            {fCurrency(INITIAL)}
-          </Typography>
-          <Typography sx={{ typography: 'subtitle2' }}>Remaining Balance</Typography>
-          <Typography sx={{ typography: 'h3' }}>{fCurrency(TOTAL)}</Typography>
-        </div>
-
-        <div>
-          <Stack direction="row" alignItems="center" justifyContent="flex-end" sx={{ mb: 0.6 }}>
-            <Iconify
-              width={20}
-              height={20}
-              icon={PERCENT >= 0 ? 'eva:trending-up-fill' : 'eva:trending-down-fill'}
-            />
-            <Typography variant="subtitle2" component="span" sx={{ ml: 0.5 }}>
-              {PERCENT > 0 && '+'}
-              {fPercent(PERCENT)}
-            </Typography>
-          </Stack>
-          <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
-            &nbsp;than last month
-          </Typography>
-        </div>
-      </Stack>
-
-      <ReactApexChart type="area" series={CHART_DATA} options={chartOptions} height={100} />
-    </RootStyle>
-  );
-}
diff --git a/frontend/hospital-portal/src/sections/dashboard/TableList.tsx b/frontend/hospital-portal/src/sections/dashboard/TableList.tsx
new file mode 100755
index 00000000..72ddd2af
--- /dev/null
+++ b/frontend/hospital-portal/src/sections/dashboard/TableList.tsx
@@ -0,0 +1,448 @@
+/* ---------------------------------- @mui ---------------------------------- */
+import { styled } from '@mui/material/styles';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Button,
+  TableSortLabel,
+  Box,
+  IconButton,
+  Card,
+  Grid,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
+  Stack,
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
+} from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+/* ---------------------------------- axios --------------------------------- */
+import axios from '@/utils/axios';
+/* ---------------------------------- react --------------------------------- */
+import { useContext, useEffect, useState } from 'react';
+/* -------------------------------- component ------------------------------- */
+import Iconify from '@/components/Iconify';
+import BaseTablePagination from '@/components/BaseTablePagination';
+/* ---------------------------------- theme --------------------------------- */
+import palette from '@/theme/palette';
+import { useSearchParams } from 'react-router-dom';
+// import { UserCurrentCorporateContext } from '@/contexts/UserCurrentCorporate';
+import { fSplit } from '@/utils/formatNumber';
+
+/* ---------------------------------- types --------------------------------- */
+type PaginationTableProps = {
+  current_page: number;
+  from: number;
+  last_page: number;
+  links: [];
+  path: string;
+  per_page: number;
+  to: number;
+  total: number;
+};
+
+type DataTableProps = {
+  fullName: string;
+  memberId: string;
+  division: string;
+  limit: {
+    current: number;
+    total: number;
+    percentage: number;
+  };
+  status: number;
+};
+
+type Order = 'asc' | 'desc';
+
+interface HeadCell {
+  id: string;
+  align: string;
+  label: string;
+  isSort: boolean;
+}
+
+interface EnhancedTableProps {
+  onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
+  order: Order;
+  orderBy: string;
+}
+
+type DivisionDataProps = {
+  id: number;
+  name: string;
+};
+/* -------------------------------------------------------------------------- */
+
+/* --------------------------------- styled --------------------------------- */
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 6,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: '#D1F1F1',
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 6,
+    backgroundColor: theme.palette.primary.main,
+  },
+}));
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------- enchanced table head -------------------------- */
+const headCells: readonly HeadCell[] = [
+  {
+    id: 'code',
+    align: 'left',
+    label: 'Request Code',
+    isSort: true,
+  },
+  {
+    id: 'member.name',
+    align: 'center',
+    label: 'Member',
+    isSort: true,
+  },
+  {
+    id: 'submission_date',
+    align: 'center',
+    label: 'Submission Date',
+    isSort: true,
+  },
+  {
+    id: 'log_url',
+    align: 'right',
+    label: 'Download LOG',
+    isSort: false,
+  },
+  {
+    id: 'status',
+    align: 'right',
+    label: 'Status',
+    isSort: true,
+  },
+];
+
+function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps) {
+  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            sortDirection={orderBy === headCell.id ? order : false}
+            // @ts-ignore
+            align={headCell.align}
+            sx={{ padding: 2 }}
+          >
+            {headCell.isSort ? (
+              <TableSortLabel
+                active={orderBy === headCell.id}
+                direction={orderBy === headCell.id ? order : 'asc'}
+                onClick={createSortHandler(headCell.id)}
+              >
+                {headCell.label}
+                {orderBy === headCell.id ? (
+                  <Box component="span" sx={visuallyHidden}>
+                    {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                  </Box>
+                ) : null}
+              </TableSortLabel>
+            ) : (
+              headCell.label
+            )}
+          </TableCell>
+        ))}
+        <TableCell align="center">{''}</TableCell>
+      </TableRow>
+    </TableHead>
+  );
+}
+/* -------------------------------------------------------------------------- */
+
+export default function TableList(props: any) {
+
+  const [dataTable, setDataTable] = useState([]);
+  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
+    current_page: 0,
+    from: 0,
+    last_page: 0,
+    links: [],
+    path: '',
+    per_page: 0,
+    to: 0,
+    total: 0,
+  });
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [appliedParams, setAppliedParams] = useState({});
+
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState('name');
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  /* ------------------------------- handle sort ------------------------------ */
+  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+    const params = Object.fromEntries([
+      ...searchParams.entries(),
+      ['order', isAsc ? 'desc' : 'asc'],
+      ['orderBy', property],
+    ]);
+    setAppliedParams(params);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ----------------------------- division field ----------------------------- */
+  const [divisionValue, setDivisionValue] = useState('all');
+  const [divisionData, setDivisionData] = useState([]);
+
+  const handleDivisionChange = (event: SelectChangeEvent) => {
+    setDivisionValue(event.target.value as string);
+
+    if (event.target.value === 'all') {
+      searchParams.delete('division');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([
+        ...searchParams.entries(),
+        ['division', event.target.value as string],
+      ]);
+      setAppliedParams(params);
+    }
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ Search field ------------------------------ */
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsLoading(true);
+    if (searchText === '') {
+      searchParams.delete('search');
+      const params = Object.fromEntries([...searchParams.entries()]);
+      setAppliedParams(params);
+    } else {
+      const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
+      setAppliedParams(params);
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------ button change pagination ------------------------ */
+  const onPageChangeHandle = async (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setIsLoading(true);
+    const params = Object.fromEntries([...searchParams.entries(), ['page', newPage + 1]]);
+    setPage(newPage);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* --------------------------- row page per limit --------------------------- */
+  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsLoading(true);
+    searchParams.delete('page');
+    const params = Object.fromEntries([
+      ...searchParams.entries(),
+      ['per_page', parseInt(event.target.value, 10)],
+    ]);
+    setRowsPerPage(parseInt(event.target.value, 10));
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  useEffect(() => {
+    (async () => {
+      setIsLoading(true);
+
+      // const division = await axios.get(`${corporateValue}/division`);
+      // setDivisionData(division.data);
+
+      const params =
+        Object.keys(appliedParams).length !== 0
+          ? appliedParams
+          : Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
+
+      const response = await axios.get(`/claim-requests`, {
+        params: { ...params, claimMember: false },
+      });
+      
+      setSearchParams(params);
+      setDataTable(response.data.data.data);
+      setPaginationTable(response.data.data);
+      setRowsPerPage(response.data.data.per_page);
+      setIsLoading(false);
+    })();
+  }, [appliedParams, searchParams, order, orderBy, setSearchParams]);
+
+  return (
+    <Card>
+      <Grid container>
+        {/* Field 1 */}
+        <Grid item xs={12} paddingX="24px" paddingY="20px">
+          <Grid container spacing={2}>
+            <Grid item xs={12} lg={3} xl={2}>
+              {/* <FormControl fullWidth>
+                <InputLabel id="simple-division-select-lable">Division</InputLabel>
+                <Select
+                  labelId="simple-division-select-lable"
+                  id="division-select-lable"
+                  value={divisionValue}
+                  label="Division"
+                  onChange={handleDivisionChange}
+                >
+                  <MenuItem value="all">All</MenuItem>
+                  {divisionData.map((row: DivisionDataProps, index) => (
+                    <MenuItem key={index} value={row.id}>
+                      {row.name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl> */}
+            </Grid>
+            <Grid item xs={12}>
+              <form onSubmit={handleSearchSubmit}>
+                <TextField
+                  id="search-input"
+                  label="Search"
+                  variant="outlined"
+                  onChange={(event) => setSearchText(event.target.value)}
+                  value={searchText}
+                  fullWidth
+                />
+              </form>
+            </Grid>
+          </Grid>
+        </Grid>
+        {/* End Field 1 */}
+        {/* Field 2 */}
+        <Grid item xs={12}>
+          <TableContainer component={Paper}>
+            <Table aria-label="collapsible table" size="small">
+              <EnhancedTableHead
+                order={order}
+                orderBy={orderBy}
+                onRequestSort={handleRequestSort}
+              />
+              <TableBody>
+                {isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={6} align="center">
+                      Loading . . .
+                    </TableCell>
+                  </TableRow>
+                ) : dataTable.length >= 1 ? (
+                  dataTable.map((row: DataTableProps, index) => (
+                    <TableRow key={index}>
+                      <TableCell align="left">{row.code}</TableCell>
+                      <TableCell align="center">{row.member?.full_name ?? ''}</TableCell>
+                      <TableCell align="center">{row.submission_date}</TableCell>
+                      <TableCell align="right">{ row.log_url ? (
+                        <Button
+                            sx={{
+                              backgroundColor: palette.light.grey[400],
+                              color: palette.dark.grey[900],
+                              paddingY: 0,
+                              '&:hover': {
+                                backgroundColor: 'rgba(84, 214, 44, 0.32)',
+                                color: palette.dark.success.darker,
+                              },
+                            }}
+                          >
+                            Download LOG
+                          </Button>
+                      ) : (
+                        <Typography>Belum Tersedia</Typography>
+                      )}
+                          </TableCell>
+                      <TableCell align="right">
+                        {row.status == 'requested' ? (
+                          <Button
+                            sx={{
+                              backgroundColor: 'rgba(84, 214, 44, 0.16)',
+                              color: palette.dark.success.dark,
+                              paddingY: 0,
+                              '&:hover': {
+                                backgroundColor: 'rgba(84, 214, 44, 0.32)',
+                                color: palette.dark.success.darker,
+                              },
+                            }}
+                          >
+                            Requested
+                          </Button>
+                        ) : (
+                          <Button
+                            sx={{
+                              backgroundColor: 'rgba(255, 72, 66, 0.16)',
+                              color: palette.dark.error.dark,
+                              paddingY: 0,
+                              '&:hover': {
+                                backgroundColor: 'rgba(255, 72, 66, 0.32)',
+                                color: palette.dark.error.darker,
+                              },
+                            }}
+                          >
+                            Declined
+                          </Button>
+                        )}
+                      </TableCell>
+                      {/* <TableCell align="right">
+                        <IconButton>
+                          <Iconify icon="ic:baseline-more-vert" />
+                        </IconButton>
+                      </TableCell> */}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={6} align="center">
+                      No Data Found
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+
+          {/* Pagination */}
+          <BaseTablePagination
+            count={paginationTable.total}
+            onPageChange={onPageChangeHandle}
+            page={page}
+            rowsPerPage={rowsPerPage}
+            onRowsPerPageChange={onRowsPerPageChangeHandle}
+          />
+        </Grid>
+        {/* End Field 2 */}
+      </Grid>
+    </Card>
+  );
+}
diff --git a/frontend/hospital-portal/src/theme/index.tsx b/frontend/hospital-portal/src/theme/index.tsx
index d340fe8c..38f19f10 100755
--- a/frontend/hospital-portal/src/theme/index.tsx
+++ b/frontend/hospital-portal/src/theme/index.tsx
@@ -8,7 +8,7 @@ import {
   StyledEngineProvider,
 } from '@mui/material/styles';
 // hooks
-import useSettings from '../hooks/useSettings';
+import useSettings from '@/hooks/useSettings';
 //
 import palette from './palette';
 import typography from './typography';
diff --git a/frontend/hospital-portal/src/theme/overrides/Alert.tsx b/frontend/hospital-portal/src/theme/overrides/Alert.tsx
index ed49a220..faf642d2 100755
--- a/frontend/hospital-portal/src/theme/overrides/Alert.tsx
+++ b/frontend/hospital-portal/src/theme/overrides/Alert.tsx
@@ -1,7 +1,7 @@
 // @mui
 import { Theme } from '@mui/material/styles';
 // theme
-import { ColorSchema } from '../palette';
+import { ColorSchema } from '@/palette';
 //
 import { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from './CustomIcons';
 
diff --git a/frontend/hospital-portal/src/theme/overrides/ToggleButton.ts b/frontend/hospital-portal/src/theme/overrides/ToggleButton.ts
index 4906a4d4..16613369 100755
--- a/frontend/hospital-portal/src/theme/overrides/ToggleButton.ts
+++ b/frontend/hospital-portal/src/theme/overrides/ToggleButton.ts
@@ -1,6 +1,6 @@
 import { Theme, alpha } from '@mui/material/styles';
 //
-import { ColorSchema } from '../palette';
+import { ColorSchema } from '@/palette';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/theme/typography.ts b/frontend/hospital-portal/src/theme/typography.ts
index 1fc2ab2d..8cf8d139 100755
--- a/frontend/hospital-portal/src/theme/typography.ts
+++ b/frontend/hospital-portal/src/theme/typography.ts
@@ -1,4 +1,4 @@
-import { pxToRem, responsiveFontSizes } from '../utils/getFontValue';
+import { pxToRem, responsiveFontSizes } from '@/utils/getFontValue';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/utils/axios.ts b/frontend/hospital-portal/src/utils/axios.ts
index bc8294a7..65b8b752 100755
--- a/frontend/hospital-portal/src/utils/axios.ts
+++ b/frontend/hospital-portal/src/utils/axios.ts
@@ -1,6 +1,6 @@
 import { default as defaultAxios } from 'axios';
 // config
-import { HOST_API } from '../config';
+import { HOST_API } from '@/config';
 
 import { getSession } from './token';
 
diff --git a/frontend/hospital-portal/src/utils/formatNumber.ts b/frontend/hospital-portal/src/utils/formatNumber.ts
index 353c0299..cc413367 100755
--- a/frontend/hospital-portal/src/utils/formatNumber.ts
+++ b/frontend/hospital-portal/src/utils/formatNumber.ts
@@ -32,6 +32,10 @@ export function fPercent(number: number) {
   return numeral(number / 100).format('0.0%');
 }
 
+export function fSplit(number: string | number) {
+  return numeral(number).format('0,0');
+}
+
 export function fNumber(number: string | number) {
   return numeral(number).format();
 }
diff --git a/frontend/hospital-portal/src/utils/formatTime.ts b/frontend/hospital-portal/src/utils/formatTime.ts
index 203b5933..25e06eb8 100755
--- a/frontend/hospital-portal/src/utils/formatTime.ts
+++ b/frontend/hospital-portal/src/utils/formatTime.ts
@@ -25,6 +25,6 @@ export function fToNow(date: Date | string | number) {
 }
 
 
-export function fPostFormat(date: Date | string | number) {
-  return format(new Date(date), 'yyyy-MM-dd HH:mm:ss');
+export function fPostFormat(date: Date | string | number, dateFormat = 'yyyy-MM-dd HH:mm:ss' ) {
+  return format(new Date(date), dateFormat);
 }
diff --git a/frontend/hospital-portal/src/utils/getColorPresets.ts b/frontend/hospital-portal/src/utils/getColorPresets.ts
index 30c7fcbe..94f87453 100755
--- a/frontend/hospital-portal/src/utils/getColorPresets.ts
+++ b/frontend/hospital-portal/src/utils/getColorPresets.ts
@@ -1,7 +1,7 @@
 // theme
-import palette from '../theme/palette';
+import palette from '@/theme/palette';
 // @type
-import { ThemeColorPresets } from '../components/settings/type';
+import { ThemeColorPresets } from '@/components/settings/type';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/src/utils/getFontValue.ts b/frontend/hospital-portal/src/utils/getFontValue.ts
index 1971e56d..35dcab61 100755
--- a/frontend/hospital-portal/src/utils/getFontValue.ts
+++ b/frontend/hospital-portal/src/utils/getFontValue.ts
@@ -2,7 +2,7 @@
 import { useTheme } from '@mui/material/styles';
 import { Variant } from '@mui/material/styles/createTypography';
 // hooks
-import useResponsive from '../hooks/useResponsive';
+import useResponsive from '@/hooks/useResponsive';
 
 // ----------------------------------------------------------------------
 
diff --git a/frontend/hospital-portal/tsconfig.json b/frontend/hospital-portal/tsconfig.json
index 843bc48b..923a6e9a 100755
--- a/frontend/hospital-portal/tsconfig.json
+++ b/frontend/hospital-portal/tsconfig.json
@@ -20,6 +20,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.json" }]
+  "include": ["src"]
 }
diff --git a/frontend/hospital-portal/vite.config.ts b/frontend/hospital-portal/vite.config.ts
index 557fde33..e417f3e9 100755
--- a/frontend/hospital-portal/vite.config.ts
+++ b/frontend/hospital-portal/vite.config.ts
@@ -22,6 +22,6 @@ export default defineConfig({
     }),
   ],
   resolve: {
-    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
+    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }]
   }
 })