Merge commit 'f5372e5d0aa42845dc582b828f6c693d1615bc7e'

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

@@ -2,10 +2,14 @@
 
 namespace Modules\Internal\Http\Controllers\Api;
 
+use App\Models\Benefit;
 use App\Models\Claim;
+use App\Models\Icd;
+use App\Models\Member;
 use Illuminate\Contracts\Support\Renderable;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller;
+use Modules\Internal\Services\ClaimService;
 
 class ClaimController extends Controller
 {
@@ -21,6 +25,7 @@ class ClaimController extends Controller
                             'plan', 
                             'benefit'
                         ])
+                        ->latest()
                         ->paginate(10);
 
         return response()->json($claims);
@@ -42,7 +47,28 @@ class ClaimController extends Controller
      */
     public function store(Request $request)
     {
-        //
+        $request->validate([
+            'diagnosis_id' => 'required',
+            'member_id' => 'required',
+            'total_claim' => 'required',
+            'benefit_id' => 'required'
+        ]);
+
+        // return response()->json($request->toArray());
+
+        $member = Member::find($request->member_id);
+        $benefit = Benefit::find($request->benefit_id);
+        $diagnosis = Icd::find($request->diagnosis_id);
+
+        // Check Eligibility
+        $validation = ClaimService::checkMemberEligibility($member, $benefit, $diagnosis, $request->total_claim);
+
+        // Store Claim
+        if ($validation['isEligible']) {
+            $claim = ClaimService::storeClaim($member, $diagnosis, $request->total_claim, $benefit);
+        }
+
+        return response()->json($claim);
     }
 
     /**

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

@@ -15,7 +15,9 @@ class MemberController extends Controller
      */
     public function index()
     {
-        return Member::paginate();
+        return Member::query()
+                    ->with('currentPlan')
+                    ->paginate();
     }
 
     /**
@@ -77,4 +79,11 @@ class MemberController extends Controller
     {
         //
     }
+
+    public function benefits($member_id)
+    {
+        $member = Member::findOrFail($member_id);
+
+        return response()->json($member->currentPlan->benefits()->select(['description', 'code', 'id'])->get());
+    }
 }

Modules/Internal/Routes/api.php

@@ -96,8 +96,10 @@ Route::prefix('internal')->group(function () {
         Route::post('master/formulariums/import', [FormulariumController::class, 'import']);
 
         Route::get('members', [MemberController::class, 'index']);
+        Route::get('members/{member_id}/benefits', [MemberController::class, 'benefits']);
         
         Route::get('claims', [ClaimController::class, 'index']);
+        Route::post('claims', [ClaimController::class, 'store']);
         Route::post('check-limit', [ClaimController::class, 'checkLimit']);
         
     });

Modules/Internal/Services/ClaimService.php

@@ -0,0 +1,115 @@
+<?php
+
+namespace Modules\Internal\Services;
+
+use App\Models\Claim;
+use Illuminate\Support\Facades\DB;
+
+class ClaimService
+{
+    public static function checkMemberEligibility($member, $benefit, $diagnosis, $totalClaim = 0)
+    {
+        $currentPlan = $member->currentPlan;
+        $policy = $member->currentPolicy;
+        $corporate = $policy->corporate;
+
+        
+        $isEligible = true;
+        $validationErrors = [];
+
+        // Eligibility Validation
+
+        if (!in_array($member->marital_status, explode(',', $benefit->msc))) {
+            $validationErrors[] = [
+                'error' => 'msc',
+                'message' => 'Only '.$benefit->msc
+            ];
+            $isEligible = false;
+        }
+
+        if (!in_array($member->gender_code, explode(',', $benefit->genders))) {
+            $validationErrors[] = [
+                'error' => 'genders',
+                'message' => 'Only '.$benefit->genders
+            ];
+            $isEligible = false;
+        }
+
+        if (!empty($benefit->min_age) && $member->age < $benefit->min_age) {
+            $validationErrors[] = [
+                'error' => 'min_age',
+                'message' => 'Minimum Age is '.$benefit->min_age
+            ];
+            $isEligible = false;
+        }
+
+        if (!empty($benefit->max_age) && $member->age > $benefit->max_age) {
+            $validationErrors[] = [
+                'error' => 'max_age',
+                'message' => 'Maximum Age is '.$benefit->min_age
+            ];
+            $isEligible = false;
+        }
+
+        // TODO complete validations
+
+        // Limit Validation
+        if ($totalClaim > 0) {
+            if (bcsub($corporate->limit_balance, $totalClaim) < 0) {
+                $validationErrors[] = [
+                    'error' => 'corporate_limit',
+                    'message' => 'Corporate Limit cannot cover this'
+                ];
+                $isEligible = false;
+            }
+    
+            if (bcsub($benefit->limit_amount, $totalClaim) < 0) {
+                $validationErrors[] = [
+                    'error' => 'benefit_limit',
+                    'message' => 'Benefit Limit cannot cover this'
+                ];
+                $isEligible = false;
+            }    
+
+            // TODO complete validations
+
+        }
+
+        return [
+            'isEligible' => $isEligible,
+            'errors' => $validationErrors
+        ];
+    }
+
+    public static function storeClaim($member, $diagnosis, $totalClaim, $benefit)
+    {
+        try {
+            DB::beginTransaction();
+            
+            $claim = Claim::create([
+                'member_id' => $member->id,
+                'diagnosis_id' => $diagnosis->id,
+                'total_claim' => $totalClaim,
+                'currency' => 'IDR',
+                'plan_id' => $member->currentPlan->id,
+                'benefit_id' => $benefit->id,
+            ]);
+
+            $policy = $member->currentPolicy;
+            $policy->limitJournals()->create([
+                'previous_balance' => $policy->limit_balance,
+                'total_credit' => $totalClaim,
+                'type' => 'credit',
+                'balance' => bcsub($policy->limit_balance, $totalClaim),
+                'description' => 'Log for Claim #'. $claim->code,
+            ]);
+
+            DB::commit();
+            return $claim;
+        } catch (\Exception $error) {
+            DB::rollBack();
+
+            return false;
+        }
+    }
+}

Modules/Internal/Services/MemberEnrollmentService.php

@@ -427,6 +427,7 @@ class MemberEnrollmentService
                     // TODO validate corporate plan
                     $plan = Plan::query()
                         ->where('code', $row['plan_id'])
+                        ->where('corporate_id', $corporate->id)
                         ->first();
                     if (!$plan) {
                         throw new ImportRowException(__('enrollment.PLAN_NOT_FOUND'), 0, null, $row);
@@ -461,7 +462,7 @@ class MemberEnrollmentService
                             ]);
 
                             $member->memberPlans()->create([
-                                'plan_id' => $plan->code,
+                                'plan_id' => $plan->id,
                                 'status' => 'active',
                                 'start' => Carbon::parse(strtotime($row['member_effective_date'])),
                                 'end' => Carbon::parse(strtotime($row['member_expiry_date'])),

app/Http/Controllers/Api/MemberController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Api;
 
 use App\Http\Controllers\Controller;
+use App\Models\Member;
 use Illuminate\Http\Request;
 
 class MemberController extends Controller

app/Models/Claim.php

@@ -4,6 +4,7 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Str;
 
 class Claim extends Model
 {
@@ -19,6 +20,28 @@ class Claim extends Model
         'benefit_id',
     ];
 
+    protected $hidden = [
+        'created_at',
+        'updated_at',
+        'deleted_at',
+        'created_by',
+        'updated_by',
+        'deleted_by',
+    ];
+    
+    protected static function boot()
+    {
+        parent::boot();
+
+        static::creating(function ($model) {
+            try {
+                $model->code = (string) Str::orderedUuid(); // generate uuid
+            } catch (\Exception $e) {
+                abort(500, $e->getMessage());
+            }
+        });
+    }
+
     public function member()
     {
         return $this->belongsTo(Member::class, 'member_id');
@@ -38,4 +61,5 @@ class Claim extends Model
     {
         return $this->belongsTo(Benefit::class, 'benefit_id');
     }
+    
 }

app/Models/Corporate.php

@@ -106,4 +106,9 @@ class Corporate extends Model
     {
         return $this->hasMany(Corporate::class, 'parent_id');
     }
+
+    public function getLimitBalanceAttribute()
+    {
+        return $this->currentPolicy->limit_balance;
+    }
 }

app/Models/CorporatePolicy.php

@@ -34,6 +34,11 @@ class CorporatePolicy extends Model
         return $this->belongsTo(Corporate::class);
     }
 
+    public function limitJournals()
+    {
+        return $this->morphMany(LimitJournal::class, 'journalable');
+    }
+
     public function setCodeAttribute($value)
     {
         $this->attributes['code'] = !empty($value) ? $value : Str::upper(Str::random('6'));
@@ -53,4 +58,11 @@ class CorporatePolicy extends Model
     {
         $this->attributes['end'] = !empty($value) ? Carbon::parse($value)->format('Y-m-d') : null;
     }
+
+    public function getLimitBalanceAttribute()
+    {
+        $journal = $this->limitJournals()->latest()->first();
+
+        return $journal ? $journal->balance : (!empty($this->total_premi) ? $this->total_premi : "0");
+    }
 }

app/Models/Icd.php

@@ -27,6 +27,15 @@ class Icd extends Model
         'active'
     ];
 
+    protected $hidden = [
+        'created_at',
+        'updated_at',
+        'deleted_at',
+        'created_by',
+        'updated_by',
+        'deleted_by',
+    ];
+
     public function getTypeAttribute()
     {
         return 'ICD-'.$this->rev;

app/Models/LimitJournal.php

@@ -11,7 +11,9 @@ class LimitJournal extends Model
 
     protected $fillable = [
         'journalable',
-        'mutation',
+        'previous_balance',
+        'total_credit',
+        'total_debit',
         'type',
         'balance',
         'description',
@@ -21,4 +23,15 @@ class LimitJournal extends Model
     {
         return $this->morphTo();
     }
+    
+    public function setTotalCreditAttribute($value)
+    {
+        $this->attributes['total_credit'] = empty($value) ? 0 : $value;
+    }
+
+    public function setTotalDebitAttribute($value)
+    {
+        $this->attributes['total_debit'] =  empty($value) ? 0 : $value;
+    }
+
 }

app/Models/Member.php

@@ -57,7 +57,20 @@ class Member extends Model
         "end_no_claim",
     ];
 
-    protected $appends = ['full_name'];
+    protected $appends = [
+        'full_name',
+        'age',
+        'gender_code'
+    ];
+    
+    protected $hidden = [
+        'created_at',
+        'updated_at',
+        'deleted_at',
+        'created_by',
+        'updated_by',
+        'deleted_by',
+    ];
 
     public function claims()
     {
@@ -105,12 +118,12 @@ class Member extends Model
 
     public function plans()
     {
-        return $this->hasManyThrough(Plan::class, MemberPlan::class, 'member_id', 'code', 'id', 'plan_id');
+        return $this->hasManyThrough(Plan::class, MemberPlan::class, 'member_id', 'id', 'id', 'plan_id');
     }
 
     public function currentPlan()
     {
-        return $this->hasOneThrough(Plan::class, MemberPlan::class, 'member_id', 'code', 'id', 'plan_id')->latest();
+        return $this->hasOneThrough(Plan::class, MemberPlan::class, 'member_id', 'id', 'id', 'plan_id')->latest();
     }
 
     public function policies()
@@ -120,7 +133,21 @@ class Member extends Model
 
     public function currentPolicy()
     {
-        return $this->hasOne(MemberPolicy::class, 'member_id', 'member_id')->where('status', 'active')->latestOfMany();
+        return $this->hasOneThrough(CorporatePolicy::class, MemberPolicy::class, 'member_id', 'code', 'member_id', 'policy_id')
+                    ->where('corporate_policies.start', '<', now())
+                    ->where('corporate_policies.end', '>', now())
+                    ->where('member_policies.start', '<', now())
+                    ->where('member_policies.end', '>', now());
+        // return $this->hasOne(MemberPolicy::class, 'member_id', 'member_id')->where('status', 'active')->latestOfMany();
+    }
+
+    public function getAgeAttribute()
+    {
+        if ($this->birth_date) {
+            return Carbon::parse($this->birth_date)->diffInYears(now());
+        } else {
+            return null;
+        }
     }
 
     public function getFullNameAttribute()
@@ -137,6 +164,11 @@ class Member extends Model
         return implode(' ', $arr);
     }
 
+    public function getGenderCodeAttribute()
+    {
+        return $this->gender ? ($this->gender == 'female' ? 'F' : 'M') : $this->gender;
+    }
+
     public function scopeFilter($query, array $filters)
     {
         $query->when($filters['search'] ?? false, function ($query, $search) {

database/migrations/2022_11_23_140658_create_limit_journals_table.php

@@ -16,7 +16,9 @@ return new class extends Migration
         Schema::create('limit_journals', function (Blueprint $table) {
             $table->id();
             $table->morphs('journalable');
-            $table->string('mutation');
+            $table->string('previous_balance');
+            $table->string('total_debit')->nullable()->comment('Should be in positive value');
+            $table->string('total_credit')->nullable()->comment('Should be in negative value');
             $table->string('type');
             $table->string('balance');
             $table->text('description');

frontend/client-portal/index.html

@@ -13,8 +13,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
   <!-- Using Google Font -->
-  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet">
 
   <!-- Using Local Font -->
   <link rel="stylesheet" type="text/css" href="/fonts/index.css" />
@@ -29,8 +32,8 @@
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
-  
+
   <script type="module" src="/src/index.tsx"></script>
 </body>
 
-</html>
+</html>

frontend/client-portal/package.json

@@ -47,6 +47,7 @@
     "@mui/lab": "5.0.0-alpha.80",
     "@mui/material": "^5.10.2",
     "@mui/system": "^5.10.2",
+    "@mui/utils": "^5.10.16",
     "@mui/x-data-grid": "^5.16.0",
     "@mui/x-date-pickers": "5.0.0-beta.2",
     "@vitejs/plugin-react": "^1.3.2",

frontend/client-portal/pnpm-lock.yaml

@@ -15,6 +15,7 @@ specifiers:
   '@mui/lab': 5.0.0-alpha.80
   '@mui/material': ^5.10.2
   '@mui/system': ^5.10.2
+  '@mui/utils': ^5.10.16
   '@mui/x-data-grid': ^5.16.0
   '@mui/x-date-pickers': 5.0.0-beta.2
   '@types/lodash': ^4.14.184
@@ -85,6 +86,7 @@ dependencies:
   '@mui/lab': 5.0.0-alpha.80_vli2fzedtzvbon5ke6iprktoka
   '@mui/material': 5.10.2_mm2isjkwxtdnw3xlwl5r7b6ile
   '@mui/system': 5.10.2_ynexvg6j2j66sbh5giu7mkkh7u
+  '@mui/utils': 5.10.16_react@17.0.2
   '@mui/x-data-grid': 5.16.0_r4jqxufjb3aftjrjm24vhpn4hm
   '@mui/x-date-pickers': 5.0.0-beta.2_y3fv7pzpxqpbmxcbzsros3kjnu
   '@vitejs/plugin-react': 1.3.2
@@ -1455,14 +1457,20 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       core-js-pure: 3.25.0
-      regenerator-runtime: 0.13.9
+      regenerator-runtime: 0.13.11
     dev: true
 
   /@babel/runtime/7.18.9:
     resolution: {integrity: sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      regenerator-runtime: 0.13.9
+      regenerator-runtime: 0.13.11
+
+  /@babel/runtime/7.20.6:
+    resolution: {integrity: sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.11
 
   /@babel/template/7.18.10:
     resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==}
@@ -1554,7 +1562,7 @@ packages:
       '@babel/core': 7.18.13
       '@babel/helper-module-imports': 7.18.6
       '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.18.13
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.6
       '@emotion/hash': 0.9.0
       '@emotion/memoize': 0.8.0
       '@emotion/serialize': 1.1.0
@@ -1838,10 +1846,10 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.6
       '@emotion/is-prop-valid': 1.2.0
       '@mui/types': 7.1.5_@types+react@17.0.48
-      '@mui/utils': 5.9.3_react@17.0.2
+      '@mui/utils': 5.10.16_react@17.0.2
       '@popperjs/core': 2.11.6
       '@types/react': 17.0.48
       clsx: 1.2.1
@@ -1862,10 +1870,10 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.6
       '@emotion/is-prop-valid': 1.2.0
       '@mui/types': 7.1.5_@types+react@17.0.48
-      '@mui/utils': 5.9.3_react@17.0.2
+      '@mui/utils': 5.10.16_react@17.0.2
       '@popperjs/core': 2.11.6
       '@types/react': 17.0.48
       clsx: 1.2.1
@@ -1924,7 +1932,7 @@ packages:
       '@mui/base': 5.0.0-alpha.79_sk3eihvpffgp52mstba5zhq3vu
       '@mui/material': 5.10.2_mm2isjkwxtdnw3xlwl5r7b6ile
       '@mui/system': 5.10.2_ynexvg6j2j66sbh5giu7mkkh7u
-      '@mui/utils': 5.9.3_react@17.0.2
+      '@mui/utils': 5.10.16_react@17.0.2
       '@mui/x-date-pickers': 5.0.0-alpha.0_ktjudfp74mtqzmc2e56ri5vvri
       '@types/react': 17.0.48
       clsx: 1.2.1
@@ -1964,7 +1972,7 @@ packages:
       '@mui/core-downloads-tracker': 5.10.2
       '@mui/system': 5.10.2_ynexvg6j2j66sbh5giu7mkkh7u
       '@mui/types': 7.1.5_@types+react@17.0.48
-      '@mui/utils': 5.9.3_react@17.0.2
+      '@mui/utils': 5.10.16_react@17.0.2
       '@types/react': 17.0.48
       '@types/react-transition-group': 4.4.5
       clsx: 1.2.1
@@ -1986,8 +1994,8 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.18.9
-      '@mui/utils': 5.9.3_react@17.0.2
+      '@babel/runtime': 7.20.6
+      '@mui/utils': 5.10.16_react@17.0.2
       '@types/react': 17.0.48
       prop-types: 15.8.1
       react: 17.0.2
@@ -2006,7 +2014,7 @@ packages:
       '@emotion/styled':
         optional: true
     dependencies:
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.6
       '@emotion/cache': 11.10.3
       '@emotion/react': 11.10.0_u65opluo5sjgh3eblfliq6jsnm
       '@emotion/styled': 11.10.0_mpqqkyoc5j3vv2sg2f5vubqi7u
@@ -2037,7 +2045,7 @@ packages:
       '@mui/private-theming': 5.9.3_skqlhrap4das3cz5b6iqdn2lqi
       '@mui/styled-engine': 5.10.2_2av45khroaevmcc27aulpaf2sy
       '@mui/types': 7.1.5_@types+react@17.0.48
-      '@mui/utils': 5.9.3_react@17.0.2
+      '@mui/utils': 5.10.16_react@17.0.2
       '@types/react': 17.0.48
       clsx: 1.2.1
       csstype: 3.1.0
@@ -2056,13 +2064,13 @@ packages:
       '@types/react': 17.0.48
     dev: false
 
-  /@mui/utils/5.9.3_react@17.0.2:
-    resolution: {integrity: sha512-l0N5bcrenE9hnwZ/jPecpIRqsDFHkPXoFUcmkgysaJwVZzJ3yQkGXB47eqmXX5yyGrSc6HksbbqXEaUya+siew==}
+  /@mui/utils/5.10.16_react@17.0.2:
+    resolution: {integrity: sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
       react: ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.6
       '@types/prop-types': 15.7.5
       '@types/react-is': 17.0.3
       prop-types: 15.8.1
@@ -2082,7 +2090,7 @@ packages:
       '@babel/runtime': 7.18.9
       '@mui/material': 5.10.2_mm2isjkwxtdnw3xlwl5r7b6ile
       '@mui/system': 5.10.2_ynexvg6j2j66sbh5giu7mkkh7u
-      '@mui/utils': 5.9.3_react@17.0.2
+      '@mui/utils': 5.10.16_react@17.0.2
       clsx: 1.2.1
       prop-types: 15.8.1
       react: 17.0.2
@@ -2117,7 +2125,7 @@ packages:
       '@date-io/moment': 2.15.0
       '@mui/material': 5.10.2_mm2isjkwxtdnw3xlwl5r7b6ile
       '@mui/system': 5.10.2_ynexvg6j2j66sbh5giu7mkkh7u
-      '@mui/utils': 5.9.3_react@17.0.2
+      '@mui/utils': 5.10.16_react@17.0.2
       clsx: 1.2.1
       date-fns: 2.29.2
       prop-types: 15.8.1
@@ -2165,7 +2173,7 @@ packages:
       '@emotion/styled': 11.10.0_mpqqkyoc5j3vv2sg2f5vubqi7u
       '@mui/material': 5.10.2_mm2isjkwxtdnw3xlwl5r7b6ile
       '@mui/system': 5.10.2_ynexvg6j2j66sbh5giu7mkkh7u
-      '@mui/utils': 5.9.3_react@17.0.2
+      '@mui/utils': 5.10.16_react@17.0.2
       '@types/react-transition-group': 4.4.5
       clsx: 1.2.1
       date-fns: 2.29.2
@@ -2708,7 +2716,7 @@ packages:
     resolution: {integrity: sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==}
     engines: {node: '>=6.0'}
     dependencies:
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.6
       '@babel/runtime-corejs3': 7.18.9
     dev: true
 
@@ -2798,7 +2806,7 @@ packages:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
     engines: {node: '>=10', npm: '>=6'}
     dependencies:
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.6
       cosmiconfig: 7.0.1
       resolve: 1.22.1
 
@@ -3192,7 +3200,7 @@ packages:
   /dom-helpers/5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
     dependencies:
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.6
       csstype: 3.1.0
     dev: false
 
@@ -5100,7 +5108,7 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
     dependencies:
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.6
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
@@ -5127,13 +5135,13 @@ packages:
     resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
     dev: true
 
-  /regenerator-runtime/0.13.9:
-    resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==}
+  /regenerator-runtime/0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
 
   /regenerator-transform/0.15.0:
     resolution: {integrity: sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==}
     dependencies:
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.6
     dev: true
 
   /regexp.prototype.flags/1.4.3:
@@ -5846,7 +5854,7 @@ packages:
       '@apideck/better-ajv-errors': 0.3.6_ajv@8.11.0
       '@babel/core': 7.18.13
       '@babel/preset-env': 7.18.10_@babel+core@7.18.13
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.6
       '@rollup/plugin-babel': 5.3.1_2uin6pbxavst3oir53roxbd5qi
       '@rollup/plugin-node-resolve': 11.2.1_rollup@2.78.1
       '@rollup/plugin-replace': 2.4.2_rollup@2.78.1

frontend/client-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>
+  );
+}

frontend/client-portal/src/contexts/LaravelAuthContext.tsx

@@ -78,12 +78,9 @@ function AuthProvider({ children }: AuthProviderProps) {
 
   useEffect(() => {
     (async () => {
-      console.log('initialize', state);
-
       try {
         const accessToken = getSession();
 
-        console.log('');
         if (accessToken) {
           setSession(accessToken);
 
@@ -144,6 +141,8 @@ function AuthProvider({ children }: AuthProviderProps) {
             user,
           },
         });
+
+        return response.data;
       })
       .catch((error) => {
         if (error.response.status !== 404) throw error.response;

frontend/client-portal/src/hooks/useMap.ts

@@ -0,0 +1,50 @@
+import { useCallback, useState } from 'react'
+
+export type MapOrEntries<K, V> = Map<K, V> | [K, V][]
+
+// Public interface
+export interface Actions<K, V> {
+  set: (key: K, value: V) => void
+  setAll: (entries: MapOrEntries<K, V>) => void
+  remove: (key: K) => void
+  reset: Map<K, V>['clear']
+}
+
+// We hide some setters from the returned map to disable autocompletion
+type Return<K, V> = [Omit<Map<K, V>, 'set' | 'clear' | 'delete'>, Actions<K, V>]
+
+function useMap<K, V>(
+  initialState: MapOrEntries<K, V> = new Map(),
+): Return<K, V> {
+  const [map, setMap] = useState(new Map(initialState))
+
+  const actions: Actions<K, V> = {
+    set: useCallback((key, value) => {
+      setMap(prev => {
+        const copy = new Map(prev)
+        copy.set(key, value)
+        return copy
+      })
+    }, []),
+
+    setAll: useCallback(entries => {
+      setMap(() => new Map(entries))
+    }, []),
+
+    remove: useCallback(key => {
+      setMap(prev => {
+        const copy = new Map(prev)
+        copy.delete(key)
+        return copy
+      })
+    }, []),
+
+    reset: useCallback(() => {
+      setMap(() => new Map())
+    }, []),
+  }
+
+  return [map, actions]
+}
+
+export default useMap

frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx

@@ -5,8 +5,9 @@ import { Box, Divider, Typography, Stack, MenuItem, Avatar } from '@mui/material
 // components
 import MenuPopover from '../../../components/MenuPopover';
 import { IconButtonAnimate } from '../../../components/animate';
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from 'react-router-dom';
 import useAuth from '../../../hooks/useAuth';
+import useLocalStorage from '../../../hooks/useLocalStorage';
 
 // ----------------------------------------------------------------------
 
@@ -32,6 +33,10 @@ export default function AccountPopover() {
   const navigate = useNavigate();
   const { logout } = useAuth();
 
+  const [emailOrPhone, setEmailOrPhone] = useLocalStorage('emailOrPhone', '');
+  const [emailOrPhoneForm, setEmailOrPhoneForm] = useLocalStorage('emailOrPhoneForm', false);
+  const [loginOrVerifyCode, setLoginOrVerifyCode] = useLocalStorage('loginOrVerifyCode', false);
+
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
     setOpen(event.currentTarget);
   };
@@ -41,9 +46,12 @@ export default function AccountPopover() {
   };
 
   const handleLogout = () => {
+    setEmailOrPhone('');
+    setEmailOrPhoneForm(false);
+    setLoginOrVerifyCode(false);
     logout();
     navigate('/auth/login');
-  }
+  };
 
   return (
     <>
@@ -105,7 +113,9 @@ export default function AccountPopover() {
 
         <Divider sx={{ borderStyle: 'dashed' }} />
 
-        <MenuItem sx={{ m: 1 }} onClick={handleLogout}>Logout</MenuItem>
+        <MenuItem sx={{ m: 1 }} onClick={handleLogout}>
+          Logout
+        </MenuItem>
       </MenuPopover>
     </>
   );

frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx

@@ -11,10 +11,10 @@ const navConfig = [
   {
     subheader: 'Case Management',
     items: [
-      {
-        title: 'Alarm Center',
-        path: '/alarm-center',
-      },
+      // {
+      //   title: 'Alarm Center',
+      //   path: '/alarm-center',
+      // },
       {
         title: 'Claim Report',
         path: '/claim-report',

frontend/client-portal/src/layouts/dashboard/navbar/NavbarVertical.tsx

@@ -16,7 +16,6 @@ import Scrollbar from '../../../components/Scrollbar';
 import { NavSectionVertical } from '../../../components/nav-section';
 //
 import navConfig from './NavConfig';
-import NavbarDocs from './NavbarDocs';
 import NavbarAccount from './NavbarAccount';
 import CollapseButton from './CollapseButton';
 
@@ -76,7 +75,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}>Client Portal</Typography>
             </Stack>
             <CollapseButton onToggleCollapse={onToggleCollapse} collapseClick={collapseClick} />
           </Stack>
@@ -92,8 +91,6 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
       <NavSectionVertical navConfig={navConfig} isCollapse={isCollapse} />
 
       <Box sx={{ flexGrow: 1 }} />
-
-      {!isCollapse && <NavbarDocs />}
     </Scrollbar>
   );
 

frontend/client-portal/src/pages/AlarmCenter/Index.tsx

@@ -1,19 +1,101 @@
-// mui
-import { Container, Grid, Card } from '@mui/material';
-// components
+/* ---------------------------------- react --------------------------------- */
+import { useState, SyntheticEvent } from 'react';
+/* ---------------------------------- @mui ---------------------------------- */
+import { Box, Tabs, Tab, Container, Grid, Card } from '@mui/material';
+import { styled } from '@mui/material/styles';
+/* ------------------------------- components ------------------------------- */
 import Page from '../../components/Page';
-// utils
+/* ---------------------------------- hooks --------------------------------- */
 import useSettings from '../../hooks/useSettings';
-// sections
-// import ListTable from '../../sections/claimreports/ListTable';
-// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
-
 import List from './List';
 
+/* ------------------------------ tabs setting ------------------------------ */
+
+/* ---------------------------------- types --------------------------------- */
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+interface StyledTabsProps {
+  children?: React.ReactNode;
+  value: number;
+  onChange: (event: React.SyntheticEvent, newValue: number) => void;
+}
+
+interface StyledTabProps {
+  label: string;
+  icon?: string | React.ReactElement;
+}
+
+/* -------------------------------- tab style ------------------------------- */
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box>{children}</Box>}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
+  backgroundColor: '#F4F6F8',
+  padding: '0 24px',
+  '& .MuiTabs-indicator': {
+    display: 'flex',
+    justifyContent: 'space-between',
+    backgroundColor: 'transparent',
+  },
+  '& .MuiTabs-indicatorSpan': {
+    maxWidth: 40,
+    backgroundColor: '#635ee7',
+  },
+});
+
+const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
+  ({ theme }) => ({
+    textTransform: 'none',
+    fontWeight: 600,
+    color: theme.palette.grey[600],
+    marginRight: '5rem',
+    '&.Mui-selected': {
+      color: '#212B36',
+      borderBottom: '2px solid ' + theme.palette.primary.main,
+    },
+    '&:hover': {
+      color: '#212B36',
+      opacity: 1,
+      borderBottom: '2px solid ' + theme.palette.primary.main,
+    },
+  })
+);
+
+/* -------------------------------------------------------------------------- */
+
 export default function Drugs() {
   const { themeStretch } = useSettings();
 
-  // const { corporate_id } = useParams();
+  const [value, setValue] = useState(0);
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
 
   return (
     <Page title="Alarm Center">
@@ -21,7 +103,22 @@ export default function Drugs() {
         <Grid container>
           <Grid item xs={12} lg={12} md={12}>
             <Card>
-              <List />
+              <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                <StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
+                  <StyledTab label="All Data (20)" {...a11yProps(0)} />
+                  <StyledTab label="Ongoing (5)" {...a11yProps(1)} />
+                  <StyledTab label="Done (15)" {...a11yProps(2)} />
+                </StyledTabs>
+              </Box>
+              <TabPanel value={value} index={0}>
+                <List />
+              </TabPanel>
+              <TabPanel value={value} index={1}>
+                Item Two
+              </TabPanel>
+              <TabPanel value={value} index={2}>
+                Item Two
+              </TabPanel>
             </Card>
           </Grid>
         </Grid>

frontend/client-portal/src/pages/AlarmCenter/List.tsx

@@ -1,16 +1,6 @@
-// @mui
+/* ---------------------------------- @mui ---------------------------------- */
 import {
-  Box,
-  Button,
-  Card,
-  Collapse,
-  IconButton,
-  InputLabel,
-  MenuItem,
-  OutlinedInput,
   Paper,
-  Select,
-  SelectChangeEvent,
   Table,
   TableBody,
   TableCell,
@@ -18,400 +8,323 @@ import {
   TableHead,
   TableRow,
   TextField,
-  Typography,
-  Badge,
-  Tab,
-  Tabs,
-  CardHeader,
   Stack,
-  Menu,
-  ButtonGroup,
-  Pagination,
-  Grid,
+  Button,
+  TableSortLabel,
+  Box,
 } 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 { Icd } from '../../@types/diagnosis';
-import BasePagination from '../../components/BasePagination';
-import { Member } from '../../@types/member';
+import { visuallyHidden } from '@mui/utils';
+/* ---------------------------------- axios --------------------------------- */
+import axios from 'axios';
+/* ---------------------------------- react --------------------------------- */
+import { useEffect, useState } from 'react';
+/* -------------------------------- component ------------------------------- */
+import Iconify from '../../components/Iconify';
+import BaseTablePagination from '../../components/BaseTablePagination';
+/* ---------------------------------- hooks --------------------------------- */
+import useMap from '../../hooks/useMap';
+/* ---------------------------------- theme --------------------------------- */
+import palette from '../../theme/palette';
+
+/* ---------------------------------- types --------------------------------- */
+
+type PaginationTableProps = {
+  current_page: number;
+  from: number;
+  last_page: number;
+  links: [];
+  path: string;
+  per_page: number;
+  to: number;
+  total: number;
+};
+
+type DataTableProps = {
+  name: string;
+  member_id: string;
+  service: string;
+  start_date: string;
+  end_date: string;
+  status: string;
+};
+
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------- enchanced table head -------------------------- */
+
+type Order = 'asc' | 'desc';
+
+interface HeadCell {
+  id: string;
+  label: string;
+}
+
+const headCells: readonly HeadCell[] = [
+  {
+    id: 'name',
+    label: 'Name',
+  },
+  {
+    id: 'member_id',
+    label: 'Member ID',
+  },
+  {
+    id: 'service',
+    label: 'Service',
+  },
+  {
+    id: 'start_date',
+    label: 'Start Date',
+  },
+  {
+    id: 'end_date',
+    label: 'End Date',
+  },
+  {
+    id: 'status',
+    label: 'Status',
+  },
+];
+
+interface EnhancedTableProps {
+  onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
+  order: Order;
+  orderBy: string;
+}
+
+function EnhancedTableHead(props: EnhancedTableProps) {
+  const { order, orderBy, onRequestSort } = props;
+  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        <TableCell align="center">No</TableCell>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            sortDirection={orderBy === headCell.id ? order : false}
+            align="center"
+          >
+            <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>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
 
 export default function List() {
-  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={{ width: '100%' }}>
-        <TextField
-          id="search-input"
-          ref={searchInput}
-          label="Search"
-          variant="outlined"
-          fullWidth
-          onChange={handleSearchChange}
-          value={searchText}
-        />
-      </form>
-    );
-  }
-
-  function ImportForm(props: any) {
-    // IMPORT
-    // Create Button Menu
-    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null);
-    const [currentImportFileName, setCurrentImportFileName] = useState(null);
-
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      setAnchorEl(event.currentTarget);
-    };
-
-    const handleClose = () => {
-      setAnchorEl(null);
-    };
-
-    const handleImportButton = () => {
-      if (importForm?.current) {
-        handleClose();
-        importForm.current ? importForm.current.click() : console.log('No File selected');
-      } else {
-        alert('No file selected');
-      }
-    };
-
-    const handleCancelImportButton = () => {
-      importForm.current.value = '';
-      importForm.current.dispatchEvent(new Event('change', { bubbles: true }));
-    };
-
-    const handleImportChange = (event: any) => {
-      if (event.target.files[0]) {
-        setCurrentImportFileName(event.target.files[0].name);
-      } else {
-        setCurrentImportFileName(null);
-      }
-    };
-
-    const handleUpload = () => {
-      if (importForm.current?.files.length) {
-        const formData = new FormData();
-        formData.append('file', importForm.current?.files[0]);
-        axios
-          .post(`master/formularium/import`, formData)
-          .then((response) => {
-            handleCancelImportButton();
-            loadDataTableData();
-            setImportResult(response.data);
-            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
-          })
-          .catch((response) => {
-            alert(
-              'Looks like something went wrong. Please check your data and try again. ' +
-                response.message
-            );
-          });
-      } else {
-        alert('No File Selected');
-      }
-    };
-
-    return (
-      <div>
-        <input
-          type="file"
-          id="file"
-          ref={importForm}
-          style={{ display: 'none' }}
-          onChange={handleImportChange}
-          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
-        />
-        {!currentImportFileName && (
-          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-            <SearchInput onSearch={applyFilter} />
-          </Stack>
-        )}
-
-        {currentImportFileName && (
-          <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
-            <ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
-              <Button onClick={handleImportButton} fullWidth>
-                {currentImportFileName ?? 'No File Selected'}
-              </Button>
-              <Button
-                onClick={handleCancelImportButton}
-                size="small"
-                fullWidth={false}
-                sx={{ p: 1.8 }}
-              >
-                <CancelIcon color="error" />
-              </Button>
-            </ButtonGroup>
-
-            <Button
-              id="upload-button"
-              variant="outlined"
-              startIcon={<UploadIcon />}
-              sx={{ p: 1.8 }}
-              onClick={handleUpload}
-            >
-              Upload
-            </Button>
-          </Stack>
-        )}
-        {importResult && (
-          <Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
-            <Box sx={{ color: 'text.secondary' }}>
-              Last Import Result Report :{' '}
-              <a href={importResult.result_file?.url ?? '#'}>
-                {importResult.result_file?.name ?? '-'}
-              </a>
-            </Box>
-          </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 [dataTableLastRequest, setDataTableLastRequest] = useState(0);
-  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
-  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,
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState('name');
+  const [customSearchParams, setCustomSearchParams] = useMap<string, any>();
+  const [isLoading, setIsLoading] = useState(true);
+  const [dataTable, setDataTable] = useState([]);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
+    current_page: 0,
     from: 0,
+    last_page: 0,
+    links: [],
+    path: '',
+    per_page: 0,
     to: 0,
     total: 0,
   });
-  const [dataTablePage, setDataTablePage] = useState(5);
 
-  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 });
+  /* ------------------------------- 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([
+      ...customSearchParams.entries(),
+      ['order', isAsc ? 'desc' : 'asc'],
+      ['orderBy', property],
+    ]);
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
 
-    setDataTableData(response.data.members);
-    setDataTableLoading(false);
+  /* ------------------------------ Search field ------------------------------ */
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearch = (event: any) => {
+    setSearchText(event.target.value);
   };
 
-  const headStyle = {
-    fontWeight: 'bold',
+  const handleSearchSubmit = async (event: any) => {
+    event.preventDefault();
+    const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
   };
+  /* -------------------------------------------------------------------------- */
 
-  const applyFilter = async (searchFilter: string) => {
-    await loadDataTableData({ search: searchFilter });
-    setSearchParams({ search: searchFilter });
-  };
+  /* --------------------------- Load Data Table API -------------------------- */
+  const loadDataTable = async (appliedParams: any | null = null) => {
+    setIsLoading(true);
 
-  const handlePageChange = (event: ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
-    loadDataTableData(filter);
-    setSearchParams(filter);
+    const params = appliedParams
+      ? appliedParams
+      : Object.fromEntries([
+          ...customSearchParams.entries(),
+          ['order', order],
+          ['orderBy', orderBy],
+        ]);
+    const response = await axios.get('http://localhost:8001/api/alarm-center', { params: params });
+
+    setDataTable(response.data.data);
+    setPaginationTable(response.data.meta);
+    setRowsPerPage(response.data.meta.per_page);
+    setIsLoading(false);
   };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------ button change pagination ------------------------ */
+  const onPageChangeHandle = async (event: unknown, newPage: number) => {
+    const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
+    setPage(newPage);
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
+    setCustomSearchParams.set('page', newPage + 1);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ----------------------- row page per limit on click ---------------------- */
+  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPage(0);
+    const params = Object.fromEntries([
+      ...customSearchParams.entries(),
+      ['page', 0],
+      ['per_page', parseInt(event.target.value, 10)],
+    ]);
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setIsLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    loadDataTable(params);
+    setIsLoading(false);
+    setCustomSearchParams.set('per_page', parseInt(event.target.value, 10));
+  };
+  /* -------------------------------------------------------------------------- */
 
   useEffect(() => {
-    loadDataTableData();
+    loadDataTable();
   }, []);
 
   return (
     <Stack>
-      <Stack
-        direction="row"
-        spacing={5}
-        sx={{ backgroundColor: '#F4F6F8', paddingX: 3, paddingY: '13px' }}
-      >
-        <Button variant="subtitle2" sx={{ position: 'relative' }}>
-          All Data ( Count )
-          <Typography
-            sx={{
-              borderBottom: '2px solid #19BBBB',
-              borderRadius: '1px',
-              position: 'absolute',
-              bottom: '-13px',
-              left: 0,
-              width: '100%',
-            }}
-            component="span"
-          />
-        </Button>
-        <Button variant="subtitle2" sx={{ position: 'relative' }}>
-          Ongoing ( Count )
-          {/* <Typography
-            sx={{
-              borderBottom: '2px solid #19BBBB',
-              borderRadius: '1px',
-              position: 'absolute',
-              bottom: '-13px',
-              left: 0,
-              width: '100%',
-            }}
-            component="span"
-          /> */}
-        </Button>
-        <Button variant="subtitle2" sx={{ position: 'relative' }}>
-          Done ( Count )
-          {/* <Typography
-            sx={{
-              borderBottom: '2px solid #19BBBB',
-              borderRadius: '1px',
-              position: 'absolute',
-              bottom: '-13px',
-              left: 0,
-              width: '100%',
-            }}
-            component="span"
-          /> */}
-        </Button>
-      </Stack>
+      {/* Search */}
+      <form onSubmit={handleSearchSubmit} style={{ width: '100%', padding: '20px 24px' }}>
+        <TextField
+          id="search-input"
+          label="Search"
+          variant="outlined"
+          fullWidth
+          onChange={handleSearch}
+          value={searchText}
+        />
+      </form>
 
-      <ImportForm />
-
-      <Card>
-        {/* The Main Table */}
-        <TableContainer component={Paper}>
-          <Table aria-label="collapsible table">
-            <TableBody>
+      {/* The Main Table */}
+      <TableContainer component={Paper}>
+        <Table aria-label="collapsible table">
+          <EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleRequestSort} />
+          <TableBody>
+            {isLoading ? (
               <TableRow>
-                <TableCell style={headStyle} align="left">
-                  No
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Name
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Member ID
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Service
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  Start Date
-                </TableCell>
-                <TableCell style={headStyle} align="left">
-                  End Date
-                </TableCell>
-                <TableCell style={headStyle} align="right" width={100}>
-                  Status
+                <TableCell colSpan={8} align="center">
+                  Loading . . .
                 </TableCell>
               </TableRow>
-            </TableBody>
-            {dataTableIsLoading ? (
-              <TableBody>
-                <TableRow>
-                  <TableCell colSpan={8} align="center">
-                    Loading
+            ) : dataTable.length >= 1 ? (
+              dataTable.map((row: DataTableProps, index) => (
+                <TableRow key={index}>
+                  <TableCell align="center">{paginationTable.from + index++}</TableCell>
+                  <TableCell align="center">{row.name}</TableCell>
+                  <TableCell align="center">{row.member_id}</TableCell>
+                  <TableCell align="center">{row.service}</TableCell>
+                  <TableCell align="center">{row.start_date}</TableCell>
+                  <TableCell align="center">{row.end_date}</TableCell>
+                  <TableCell align="center">
+                    {row.status.toLowerCase() === 'done' ? (
+                      <Button
+                        startIcon={<Iconify icon="ic:round-check" />}
+                        sx={{
+                          backgroundColor: palette.light.grey[300],
+                          color: palette.light.grey[800],
+                          paddingX: 1.5,
+                          paddingY: 1,
+                          '&:hover': {
+                            backgroundColor: palette.light.grey[400],
+                            color: palette.light.grey[800],
+                          },
+                        }}
+                      >
+                        {row.status}
+                      </Button>
+                    ) : (
+                      <Button
+                        startIcon={<Iconify icon="fa6-solid:clock" />}
+                        sx={{
+                          backgroundColor: '#CD7B2E',
+                          color: '#FFFF',
+                          paddingX: 1.5,
+                          paddingY: 1,
+                          '&:hover': {
+                            backgroundColor: '#BF6919',
+                            color: '#FFFF',
+                          },
+                        }}
+                      >
+                        {row.status}
+                      </Button>
+                    )}
                   </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} />
-                ))}
-              </TableBody>
+              <TableRow>
+                <TableCell colSpan={8} align="center">
+                  No Data Found
+                </TableCell>
+              </TableRow>
             )}
-          </Table>
-        </TableContainer>
+          </TableBody>
+        </Table>
+      </TableContainer>
 
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
-      </Card>
+      {/* Pagination */}
+      <BaseTablePagination
+        count={paginationTable.total}
+        onPageChange={onPageChangeHandle}
+        page={page}
+        rowsPerPage={rowsPerPage}
+        onRowsPerPageChange={onRowsPerPageChangeHandle}
+      />
     </Stack>
   );
 }

frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx

@@ -1,6 +1,5 @@
 // mui
 import {
-  Button,
   Box,
   Tabs,
   Tab,
@@ -18,7 +17,7 @@ import Page from '../../components/Page';
 import Iconify from '../../components/Iconify';
 // utils
 import useSettings from '../../hooks/useSettings';
-import { useRef, useState, SyntheticEvent } from 'react';
+import { useState, SyntheticEvent } from 'react';
 // sections
 // import ListTable from '../../sections/claimreports/ListTable';
 // import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
@@ -102,7 +101,7 @@ const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props
   })
 );
 
-export default function Drugs() {
+export default function ServiceMonitoring() {
   const { themeStretch } = useSettings();
 
   const [value, setValue] = useState(0);

frontend/client-portal/src/pages/AlarmCenter/UserProfile.tsx

@@ -0,0 +1,63 @@
+// mui
+import { IconButton, Container, Grid, Stack, Typography } from '@mui/material';
+// components
+import Page from '../../components/Page';
+import Iconify from '../../components/Iconify';
+// utils
+import useSettings from '../../hooks/useSettings';
+// section
+import CardPersonalInformation from '../../sections/alarm-center/user-profile/CardPersonalInformation';
+import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
+import CardPolicyNumber from '../../sections/alarm-center/user-profile/CardPolicyNumber';
+import CardBenefitSummary from '../../sections/alarm-center/user-profile/CardBenefitSummary';
+import CardClaimHistory from '../../sections/alarm-center/user-profile/CardClaimHistory';
+// react
+import { useNavigate } from 'react-router';
+
+// ----------------------------------------------------------------------
+
+export default function UserProfile() {
+  const { themeStretch } = useSettings();
+  const navigate = useNavigate();
+
+  return (
+    <Page title="Profile Peserta Jessica Lie">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
+          <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate(-1)}>
+            <Iconify icon="heroicons-outline:arrow-narrow-left" />
+          </IconButton>
+          <Typography variant="h5">Profil Peserta</Typography>
+        </Stack>
+        <Grid container spacing={2}>
+          {/* Row 1 */}
+          <Grid item xs={12} md={6}>
+            <Grid container spacing={2}>
+              {/* Item 1 */}
+              <Grid item xs={12} md={12}>
+                <CardPersonalInformation />
+              </Grid>
+              {/* Item 2 */}
+              <Grid item xs={12} md={12}>
+                <CardFamilyInformation />
+              </Grid>
+            </Grid>
+          </Grid>
+          {/* Row 2 */}
+          <Grid item xs={12} md={6}>
+            <Grid container spacing={2}>
+              {/* Item 1 */}
+              <Grid item xs={12}>
+                <CardPolicyNumber />
+              </Grid>
+              {/* Item 2 */}
+              <Grid item xs={12}>
+                <CardClaimHistory />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Container>
+    </Page>
+  );
+}

frontend/client-portal/src/pages/ClaimReports/Index.tsx

@@ -1,30 +0,0 @@
-// mui
-import { Container, Grid } from '@mui/material';
-// components
-import Page from '../../components/Page';
-// utils
-import useSettings from '../../hooks/useSettings';
-// sections
-import ListTable from '../../sections/claimreports/ListTable';
-import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
-
-export default function Drugs() {
-  const { themeStretch } = useSettings();
-
-  // const { corporate_id } = useParams();
-
-  return (
-    <Page title="Claim Reports">
-      <Container maxWidth={themeStretch ? false : 'xl'}>
-        <Grid container spacing={2}>
-          <Grid item xs={12} lg={12} md={12}>
-            <ClaimStatusCard />
-          </Grid>
-          <Grid item xs={12} lg={12} md={12}>
-            <ListTable />
-          </Grid>
-        </Grid>
-      </Container>
-    </Page>
-  );
-}

frontend/client-portal/src/pages/Dashboard/Dashboard.tsx

@@ -4,11 +4,11 @@ import { Typography, Container, Grid } from '@mui/material';
 import useSettings from '../../hooks/useSettings';
 // components
 import Page from '../../components/Page';
-// Table
-import List from './List';
 // theme
 import CardNotification from '../../sections/dashboard/CardNotification';
 import CardBalance from '../../sections/dashboard/CardBalance';
+import TableList from '../../sections/dashboard/TableList';
+import List from './List';
 
 // ----------------------------------------------------------------------
 
@@ -56,12 +56,11 @@ export default function Dashboard() {
             <CardBalance />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
+            <TableList />
             {/* <List /> */}
           </Grid>
         </Grid>
       </Container>
-
-      {/* <DialogDetailClaim /> */}
     </Page>
   );
 }

frontend/client-portal/src/pages/Dashboard/List.tsx

@@ -0,0 +1,373 @@
+// @mui
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Tab,
+  Tabs,
+  CardHeader,
+  Stack,
+  Menu,
+  ButtonGroup,
+  Pagination,
+  Grid,
+  Autocomplete,
+} 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 { Icd } from '../../@types/diagnosis';
+import BasePagination from '../../components/BasePagination';
+import { Member } from '../../@types/member';
+import Iconify from '../../components/Iconify';
+
+const options = [
+  { label: 'The Shawshank Redemption', value: 1994 },
+  { label: 'The Godfather', year: 1972 },
+  { label: 'The Godfather: Part II', year: 1974 },
+  { label: 'The Dark Knight', year: 2008 },
+  { label: '12 Angry Men', year: 1957 },
+  { label: "Schindler's List", year: 1993 },
+  { label: 'Pulp Fiction', year: 1994 },
+];
+
+export default function List() {
+  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 [value, setValue] = useState<string | null>(options[0]);
+    const [inputValue, setInputValue] = 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') ?? '');
+      console.log(value, inputValue);
+    }, [searchParams, value, inputValue]);
+
+    return (
+      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+        <Stack direction="row" spacing={2}>
+          <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={{ width: 300 }}
+            renderInput={(params) => <TextField {...params} label="Division" />}
+          />
+          <TextField
+            id="search-input"
+            ref={searchInput}
+            label="Search"
+            variant="outlined"
+            fullWidth
+            onChange={handleSearchChange}
+            value={searchText}
+          />
+        </Stack>
+      </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 handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    const handleImportButton = () => {
+      if (importForm?.current) {
+        handleClose();
+        importForm.current ? importForm.current.click() : console.log('No File selected');
+      } else {
+        alert('No file selected');
+      }
+    };
+
+    const handleCancelImportButton = () => {
+      importForm.current.value = '';
+      importForm.current.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+
+    const handleImportChange = (event: any) => {
+      if (event.target.files[0]) {
+        setCurrentImportFileName(event.target.files[0].name);
+      } else {
+        setCurrentImportFileName(null);
+      }
+    };
+
+    const handleUpload = () => {
+      if (importForm.current?.files.length) {
+        const formData = new FormData();
+        formData.append('file', importForm.current?.files[0]);
+        axios
+          .post(`master/formularium/import`, formData)
+          .then((response) => {
+            handleCancelImportButton();
+            loadDataTableData();
+            setImportResult(response.data);
+            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
+          })
+          .catch((response) => {
+            alert(
+              'Looks like something went wrong. Please check your data and try again. ' +
+                response.message
+            );
+          });
+      } else {
+        alert('No File Selected');
+      }
+    };
+
+    return (
+      <Stack direction="row" spacing={2} padding={2}>
+        <SearchInput onSearch={applyFilter} />
+        <Button
+          id="import-button"
+          variant="outlined"
+          startIcon={<Iconify icon="material-symbols:download-rounded" />}
+          sx={{ paddingY: '15px', paddingX: '22px', flex: '10%' }}
+          component="label"
+        >
+          Import
+          <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>
+        <Button
+          id="import-button"
+          variant="contained"
+          startIcon={<AddIcon />}
+          sx={{ paddingY: '15px', paddingX: '22px', flex: '15%' }}
+          onClick={handleClick}
+        >
+          Add Data
+        </Button>
+      </Stack>
+    );
+  }
+
+  // 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 [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  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 [dataTablePage, setDataTablePage] = useState(5);
+
+  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 });
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  return (
+    <Stack>
+      <Card>
+        <ImportForm />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper} sx={{ paddingX: 1, borderRadius: 2 }}>
+          <Table aria-label="collapsible table">
+            <TableBody>
+              <TableRow sx={{ backgroundColor: '#F4F6F8' }}>
+                <TableCell style={headStyle} align="left">
+                  Member ID
+                </TableCell>
+                <TableCell style={headStyle} align="center">
+                  Name
+                </TableCell>
+                <TableCell style={headStyle} align="center">
+                  Divisi
+                </TableCell>
+                <TableCell style={headStyle} align="center">
+                  Limit
+                </TableCell>
+                <TableCell style={headStyle} align="center">
+                  Status
+                </TableCell>
+                <TableCell style={headStyle} align="right">
+                  {' '}
+                </TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={6} align="center">
+                    Loading
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : dataTableData.data.length === 0 ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={6} align="center">
+                    No Data
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : (
+              <TableBody>
+                {dataTableData.data.map((row) => (
+                  <Row key={row.id} row={row} />
+                ))}
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
+  );
+}

frontend/client-portal/src/pages/auth/Login.tsx

@@ -1,17 +1,16 @@
-// @mui
+/* ---------------------------------- @mui ---------------------------------- */
 import { styled } from '@mui/material/styles';
-import { Box, Card, Divider, Grid, Link, Stack, Typography } from '@mui/material';
-// components
+import { Box, Card, Divider, Grid, Link, Stack, Typography, IconButton } from '@mui/material';
+/* ------------------------------- components ------------------------------- */
 import Page from '../../components/Page';
-import Image from '../../components/Image';
-// sections
-import { LoginEmailForm, LoginPhoneForm } from '../../sections/auth/login';
 import Logo from '../../components/Logo';
-// react
-import { useState, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import Iconify from '../../components/Iconify';
+/* ---------------------------------- hooks --------------------------------- */
+import useLocalStorage from '../../hooks/useLocalStorage';
+/* -------------------------------- sections -------------------------------- */
+import { LoginEmailForm, LoginPhoneForm, VerifyCodeForm } from '../../sections/auth/login';
 
-// ----------------------------------------------------------------------
+/* --------------------------------- styled --------------------------------- */
 
 const RootStyle = styled('div')(({ theme }) => ({
   [theme.breakpoints.up('md')]: {
@@ -33,20 +32,9 @@ const ContentStyle = styled(Card)(({ theme }) => ({
 // ----------------------------------------------------------------------
 
 export default function Login() {
-  const { state } = useLocation();
-  const [formPhone, setFormPhone] = useState(false);
-
-  const handlerChange = (event: any, setForm: boolean) => {
-    event.preventDefault();
-    setFormPhone(setForm);
-  };
-
-  useEffect(() => {
-    if (state !== null) {
-      setFormPhone(state.formPhone);
-    }
-    console.log(state);
-  }, [state]);
+  const [emailOrPhone, setEmailOrPhone] = useLocalStorage('emailOrPhone', '');
+  const [emailOrPhoneForm, setEmailOrPhoneForm] = useLocalStorage('emailOrPhoneForm', false);
+  const [loginOrVerifyCode, setLoginOrVerifyCode] = useLocalStorage('loginOrVerifyCode', false);
 
   return (
     <Page title="Login">
@@ -54,35 +42,99 @@ export default function Login() {
         <ContentStyle>
           <Grid container>
             <Grid item xs={6}>
-              <Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
+              <video
+                autoPlay={true}
+                loop={true}
+                muted={true}
+                playsInline={true}
+                style={{ width: '100%' }}
+              >
+                <source src="/images/login-image.webm" type="video/webm" />
+                <source src="/images/login-image.mp4" type="video/mp4" />
+              </video>
             </Grid>
             <Grid item xs={6} sx={{ padding: 3 }}>
-              <Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
-                <Logo sx={{ width: 90, height: 90 }} />
-                <Box sx={{ flexGrow: 1 }}>
-                  <Typography variant="h4" gutterBottom>
-                    Sign in to LinkSehat
-                  </Typography>
-                  <Typography variant="body1" sx={{ color: 'text.secondary' }}>
-                    Enter your details below.
-                  </Typography>
-                </Box>
-              </Stack>
+              {loginOrVerifyCode && emailOrPhone ? (
+                <>
+                  <Stack direction="column" sx={{ mb: 5 }}>
+                    <Stack direction="row" alignItems="center">
+                      <IconButton
+                        onClick={() => {
+                          localStorage.removeItem('emailOrPhone');
+                          setLoginOrVerifyCode(false);
+                        }}
+                      >
+                        <Iconify
+                          icon="heroicons-outline:arrow-narrow-left"
+                          sx={{ marginRight: '10px' }}
+                        />
+                      </IconButton>
+                      <Typography variant="h4" gutterBottom>
+                        Verifikasi OTP
+                      </Typography>
+                    </Stack>
+                    <Box sx={{ flexGrow: 1 }}>
+                      <Typography
+                        variant="body1"
+                        sx={{ color: 'text.secondary', textAlign: 'left' }}
+                      >
+                        Masukkan kode OTP anda disini
+                      </Typography>
+                    </Box>
+                  </Stack>
 
-              {formPhone ? (
-                <LoginPhoneForm formPhone={formPhone} />
+                  <VerifyCodeForm
+                    setEmailOrPhoneForm={setEmailOrPhoneForm}
+                    setLoginOrVerifyCode={setLoginOrVerifyCode}
+                    emailOrPhone={emailOrPhone}
+                  />
+
+                  <Stack sx={{ marginTop: 5 }} spacing={1} alignItems="center">
+                    <Typography>Tidak mendapatkan kode?</Typography>
+                    <Link sx={{ cursor: 'pointer' }}>Kirim Ulang Kode OTP</Link>
+                  </Stack>
+                </>
               ) : (
-                <LoginEmailForm formPhone={formPhone} />
+                <>
+                  <Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
+                    <Logo sx={{ width: 90, height: 90 }} />
+                    <Box sx={{ flexGrow: 1 }}>
+                      <Typography variant="h4" gutterBottom>
+                        Sign in to LinkSehat
+                      </Typography>
+                      <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+                        Enter your details below.
+                      </Typography>
+                    </Box>
+                  </Stack>
+
+                  {emailOrPhoneForm ? (
+                    <LoginPhoneForm
+                      setEmailOrPhone={setEmailOrPhone}
+                      setLoginOrVerifyCode={setLoginOrVerifyCode}
+                    />
+                  ) : (
+                    <LoginEmailForm
+                      setEmailOrPhone={setEmailOrPhone}
+                      setLoginOrVerifyCode={setLoginOrVerifyCode}
+                    />
+                  )}
+                </>
               )}
 
               <Divider sx={{ marginTop: 5 }}>Atau</Divider>
 
               <Stack sx={{ marginTop: 5 }}>
-                {formPhone ? (
+                {emailOrPhoneForm ? (
                   <Link
                     align="center"
                     underline="hover"
-                    onClick={(event) => handlerChange(event, false)}
+                    onClick={() => {
+                      setEmailOrPhone('');
+                      setLoginOrVerifyCode(false);
+                      setEmailOrPhoneForm(false);
+                    }}
+                    sx={{ cursor: 'pointer' }}
                   >
                     Masuk menggunakan email
                   </Link>
@@ -90,7 +142,12 @@ export default function Login() {
                   <Link
                     align="center"
                     underline="hover"
-                    onClick={(event) => handlerChange(event, true)}
+                    onClick={() => {
+                      setEmailOrPhone('');
+                      setLoginOrVerifyCode(false);
+                      setEmailOrPhoneForm(true);
+                    }}
+                    sx={{ cursor: 'pointer' }}
                   >
                     Masuk menggunakan nomor handphone
                   </Link>

frontend/client-portal/src/pages/auth/VerifyCode.tsx

@@ -1,107 +0,0 @@
-import { useLocation, useNavigate } from 'react-router-dom';
-// @mui
-import { styled } from '@mui/material/styles';
-import { Box, Card, Divider, IconButton, Grid, Link, Stack, Typography } from '@mui/material';
-// components
-import Page from '../../components/Page';
-import Image from '../../components/Image';
-import Iconify from '../../components/Iconify';
-// sections
-import { VerifyCodeForm } from '../../sections/auth/verify-code';
-import { useEffect } from 'react';
-
-// ----------------------------------------------------------------------
-
-const RootStyle = styled('div')(({ theme }) => ({
-  [theme.breakpoints.up('md')]: {
-    display: 'flex',
-  },
-  minHeight: '100vh',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-}));
-
-const ContentStyle = styled(Card)(({ theme }) => ({
-  [theme.breakpoints.up('md')]: {
-    maxHeight: '600px',
-    maxWidth: '1000px',
-  },
-}));
-// ----------------------------------------------------------------------
-
-export default function VerifyCode() {
-  const { state } = useLocation();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (state === null) {
-      navigate('/auth/login');
-    }
-  }, [state, navigate]);
-
-  return (
-    <Page title="Login">
-      <RootStyle>
-        <ContentStyle>
-          <Grid container>
-            <Grid item xs={6}>
-              <Image visibleByDefault disabledEffect src="/images/login-image.gif" alt="login" />
-            </Grid>
-            <Grid item xs={6} sx={{ padding: 3, textAlign: 'center' }}>
-              <Stack direction="column" sx={{ mb: 5 }}>
-                <Stack direction="row" alignItems="center">
-                  <IconButton
-                    onClick={() =>
-                      navigate('/auth/login', { state: { formPhone: state.formPhone } })
-                    }
-                  >
-                    <Iconify
-                      icon="heroicons-outline:arrow-narrow-left"
-                      sx={{ marginRight: '10px' }}
-                    />
-                  </IconButton>
-                  <Typography variant="h4" gutterBottom>
-                    Verifikasi OTP
-                  </Typography>
-                </Stack>
-                <Box sx={{ flexGrow: 1 }}>
-                  <Typography variant="body1" sx={{ color: 'text.secondary', textAlign: 'left' }}>
-                    Masukkan kode OTP anda disini
-                  </Typography>
-                </Box>
-              </Stack>
-
-              <VerifyCodeForm phoneOrEmail={state.phoneOrEmail} />
-
-              <Typography sx={{ marginTop: 5 }}>Tidak mendapatkan kode?</Typography>
-              <Link sx={{ marginTop: 1 }}>Kirim Ulang Kode OTP</Link>
-
-              <Divider sx={{ marginTop: 5 }}>Atau</Divider>
-
-              <Stack sx={{ marginTop: 5 }}>
-                {state.formPhone ? (
-                  <Link
-                    align="center"
-                    underline="hover"
-                    onClick={() => navigate('/auth/login', { state: { formPhone: false } })}
-                  >
-                    Masuk menggunakan email
-                  </Link>
-                ) : (
-                  <Link
-                    align="center"
-                    underline="hover"
-                    onClick={() => navigate('/auth/login', { state: { formPhone: true } })}
-                  >
-                    Masuk menggunakan nomor handphone
-                  </Link>
-                )}
-              </Stack>
-            </Grid>
-          </Grid>
-        </ContentStyle>
-      </RootStyle>
-    </Page>
-  );
-}

frontend/client-portal/src/routes/index.tsx

@@ -37,16 +37,6 @@ export default function Router() {
             </AuthProvider>
           ),
         },
-        {
-          path: 'verify-code',
-          element: (
-            <AuthProvider>
-              <GuestGuard>
-                <VerifyCode />
-              </GuestGuard>
-            </AuthProvider>
-          ),
-        },
       ],
     },
     {
@@ -66,6 +56,22 @@ export default function Router() {
         },
       ],
     },
+    {
+      path: 'user-profile/:id',
+      element: (
+        <AuthProvider>
+          <AuthGuard>
+            <DashboardLayout />
+          </AuthGuard>
+        </AuthProvider>
+      ),
+      children: [
+        {
+          element: <AlarmCenterUserProfile />,
+          index: true,
+        },
+      ],
+    },
     {
       path: '/alarm-center',
       element: (
@@ -116,7 +122,6 @@ export default function Router() {
 
 // Auth
 const Login = Loadable(lazy(() => import('../pages/auth/Login')));
-const VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode')));
 
 // Dashboard
 const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard')));
@@ -127,6 +132,7 @@ const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
 const AlarmCenterServiceMonitoring = Loadable(
   lazy(() => import('../pages/AlarmCenter/ServiceMonitoring'))
 );
+const AlarmCenterUserProfile = Loadable(lazy(() => import('../pages/AlarmCenter/UserProfile')));
 
 // Claim Report
 const ClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/Index')));

frontend/client-portal/src/sections/alarm-center/user-profile/CardBenefitSummary.tsx

@@ -0,0 +1,229 @@
+// mui
+import { styled } from '@mui/material/styles';
+import {
+  Card,
+  Typography,
+  Stack,
+  LinearProgress,
+  linearProgressClasses,
+  Grid,
+} from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+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%)',
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+export default function CardBenefitSummary() {
+  return (
+    <div style={{ marginTop: '1rem' }}>
+      <Typography padding={1} variant="subtitle2">
+        Benefit Summary
+      </Typography>
+      <Card>
+        <Grid container spacing={1} marginTop={1} sx={{ backgroundColor: '#F4F6F8', padding: 1 }}>
+          {/* Card 1 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Rawat Jalan
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 2 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Rawat Inap
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 3 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Manfaat Special
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 4 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Manfaat Special
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 5 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Perobatan Mata
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 6 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Perawatan Gigi
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 7 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Kehamilan
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 8 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Laboratorium
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+          {/* Card 9 */}
+          <Grid item xs={12} sm={6} md={6} lg={4}>
+            <Card sx={{ padding: 1 }}>
+              <Stack spacing={1}>
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  Manfaat Farmasi
+                </Typography>
+                <Typography variant="body2" color="#0A0A0A">
+                  Yearly Limits
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Stack direction="row" spacing={0.25}>
+                  <Typography variant="body2">10.000.000</Typography>
+                  <Typography>/</Typography>
+                  <Typography variant="body2" color="#757575">
+                    10.000.000
+                  </Typography>
+                </Stack>
+              </Stack>
+            </Card>
+          </Grid>
+        </Grid>
+      </Card>
+    </div>
+  );
+}

frontend/client-portal/src/sections/alarm-center/user-profile/CardClaimHistory.tsx

@@ -0,0 +1,97 @@
+// mui
+import {
+  Card,
+  Typography,
+  Stack,
+  TablePagination,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
+} from '@mui/material';
+// react
+import { useState } from 'react';
+
+// ----------------------------------------------------------------------
+
+function createData(benefitType: string, submissionDate: string, status: string) {
+  return { benefitType, submissionDate, status };
+}
+
+const rows = [
+  createData('Rawat Jalan', '15-10-2022', 'Request'),
+  createData('Rawat Inap', '15-10-2022', 'Request'),
+  createData('Manfaat Special', '15-10-2022', 'Request'),
+  createData('Perobatan Mata', '15-10-2022', 'Request'),
+  createData('Perawatan Gigi', '15-10-2022', 'Request'),
+  createData('Kehamilan', '15-10-2022', 'Request'),
+  createData('Laboratorium', '15-10-2022', 'Request'),
+  createData('Manfaat Farmasi', '15-10-2022', 'Request'),
+];
+
+// ----------------------------------------------------------------------
+
+export default function CardClaimHistory() {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+
+  const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
+    setPage(newPage);
+  };
+
+  return (
+    <Card sx={{ padding: 2 }}>
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Typography variant="subtitle2">Claim History</Typography>
+        <TablePagination
+          component="div"
+          count={rows.length}
+          rowsPerPage={rowsPerPage}
+          rowsPerPageOptions={[]}
+          page={page}
+          onPageChange={handleChangePage}
+          sx={{
+            border: 'none',
+            '.MuiToolbar-root.MuiTablePagination-toolbar': {
+              height: '24px',
+              minHeight: '24px',
+            },
+            '.MuiTablePagination-actions .MuiButtonBase-root:nth-last-of-type': {
+              marginLeft: 2,
+            },
+            '.MuiTablePagination-actions .MuiButtonBase-root': { padding: 1 },
+          }}
+        />
+      </Stack>
+      <Card>
+        <TableContainer>
+          <Table sx={{ minWidth: 650 }} size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell>Benefit Type</TableCell>
+                <TableCell align="center">Submission Date</TableCell>
+                <TableCell align="center">Status</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {/* if you don't need to support IE11, you can replace the `stableSort` call with:
+              rows.sort(getComparator(order, orderBy)).slice() */}
+              {rows
+                // .sort(getComparator(order, orderBy))
+                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                .map((row, index) => (
+                  <TableRow key={index}>
+                    <TableCell>{row.benefitType}</TableCell>
+                    <TableCell align="center">{row.submissionDate}</TableCell>
+                    <TableCell align="center">{row.status}</TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Card>
+    </Card>
+  );
+}

frontend/client-portal/src/sections/alarm-center/user-profile/CardFamilyInformation.tsx

@@ -0,0 +1,359 @@
+// mui
+import { Button, Card, Stack, Typography, Grid, Switch } from '@mui/material';
+// components
+import Iconify from '../../../components/Iconify';
+
+export default function CardFamilyInformation() {
+  return (
+    <Card sx={{ borderRadius: '6px', paddingY: 2 }}>
+      {/* Stack 1 */}
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        sx={{ paddingY: 1, paddingX: 3 }}
+      >
+        <Typography variant="subtitle2">Beneficiary / Family</Typography>
+        <Button startIcon={<Iconify icon="ic:round-add" />}>Add Member</Button>
+      </Stack>
+      {/* Stack 2 */}
+      <Grid container maxHeight="307px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
+        {/* Card 1 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <img
+                  width={24}
+                  height={24}
+                  src="/images/husband-user-profile.png"
+                  alt="user-profile"
+                  style={{ borderRadius: '50%' }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Husband
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Octa Xavier
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              14 Jan 1986
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+        {/* Card 2 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <div
+                  style={{
+                    borderRadius: '50%',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#D9D9D9',
+                  }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Kid
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Celine Claudia
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              15 Oct 2000
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+        {/* Card 3 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <div
+                  style={{
+                    borderRadius: '50%',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#D9D9D9',
+                  }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Kid
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Celine Claudia
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              15 Oct 2000
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+        {/* Card 4 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <div
+                  style={{
+                    borderRadius: '50%',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#D9D9D9',
+                  }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Kid
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Celine Claudia
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              15 Oct 2000
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+        {/* Card 5 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <div
+                  style={{
+                    borderRadius: '50%',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#D9D9D9',
+                  }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Kid
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Celine Claudia
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              15 Oct 2000
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+        {/* Card 6 */}
+        <Grid item xs={12} sm={6} md={6}>
+          <Card sx={{ paddingX: 1.5, paddingY: 1 }}>
+            {/* Stack 1 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              spacing={2}
+              sx={{ flex: '100%' }}
+            >
+              {/* Row 1 */}
+              <Stack direction="row" spacing={1}>
+                <div
+                  style={{
+                    borderRadius: '50%',
+                    width: '24px',
+                    height: '24px',
+                    backgroundColor: '#D9D9D9',
+                  }}
+                />
+                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                  Kid
+                </Typography>
+              </Stack>
+              {/* Row 2 */}
+              <Stack alignItems="center">
+                <Typography variant="caption">Suspend</Typography>
+                <Switch aria-label="switch demo" />
+              </Stack>
+            </Stack>
+            <Typography variant="body2" color="#757575">
+              Celine Claudia
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              15 Oct 2000
+            </Typography>
+            <Typography variant="body2" color="#757575">
+              082113256754
+            </Typography>
+            {/* Stack 2 */}
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              marginTop={1.25}
+            >
+              <Button color="error" startIcon={<Iconify icon="ic:round-close" />}>
+                Remove
+              </Button>
+              <Button variant="contained" startIcon={<Iconify icon="heroicons:pencil-solid" />}>
+                Edit Data
+              </Button>
+            </Stack>
+          </Card>
+        </Grid>
+      </Grid>
+    </Card>
+  );
+}

frontend/client-portal/src/sections/alarm-center/user-profile/CardPersonalInformation.tsx

@@ -0,0 +1,147 @@
+// mui
+import { Button, IconButton, Card, Stack, Typography } from '@mui/material';
+import { Visibility as VisibilityIcon } from '@mui/icons-material';
+// components
+import Iconify from '../../../components/Iconify';
+
+export default function CardPersonalInformation() {
+  return (
+    <Card sx={{ borderRadius: '6px', paddingY: 2 }}>
+      {/* Stack 1 */}
+      <Stack
+        direction="row"
+        alignItems="center"
+        justifyContent="space-between"
+        sx={{ paddingY: 1, paddingX: 3 }}
+      >
+        <Typography variant="subtitle2">Informasi Pribadi</Typography>
+        <Button startIcon={<Iconify icon="heroicons:pencil-solid" />}>Edit Data</Button>
+      </Stack>
+      {/* Stack 2 */}
+      <Stack direction="row" spacing={2} paddingX={2}>
+        <div style={{ position: 'relative', flex: 'none', height: 'fit-content' }}>
+          <img
+            width={52}
+            height={52}
+            src="/images/user-profile.png"
+            alt="user-profile"
+            style={{ borderRadius: '50%' }}
+          />
+          <IconButton
+            color="primary"
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              right: 0,
+              width: '20px',
+              height: '20px',
+              padding: '4px',
+              backgroundColor: 'rgba(255,255,255,0.9)',
+            }}
+          >
+            <Iconify icon="material-symbols:photo-camera" />
+          </IconButton>
+        </div>
+        <Stack direction="row" paddingY={1} spacing={2} sx={{ flex: '100%' }}>
+          <Stack sx={{ width: '60%' }}>
+            <Typography variant="caption">Nama Lengkap</Typography>
+            <Typography variant="body2">Jessica Lie</Typography>
+          </Stack>
+          <Stack sx={{ width: '20%' }}>
+            <Typography variant="caption">Berat Badan</Typography>
+            <Typography variant="body2">40 kg</Typography>
+          </Stack>
+          <Stack sx={{ width: '20%' }}>
+            <Typography variant="caption">Tinggi Badan</Typography>
+            <Typography variant="body2">165 cm</Typography>
+          </Stack>
+        </Stack>
+      </Stack>
+      {/* Stack 3 */}
+      <Stack maxHeight="338px" paddingX={2} sx={{ overflowY: 'auto' }}>
+        {/* Stack 3.1 */}
+        <Stack marginTop={2} spacing={1}>
+          <Typography variant="subtitle2">Informasi Dasar</Typography>
+          <Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
+            <Stack sx={{ width: '100%' }}>
+              <Typography variant="caption">Tempat Lahir</Typography>
+              <Typography variant="body2">Jakarta</Typography>
+            </Stack>
+            <Stack sx={{ width: '100%' }}>
+              <Typography variant="caption">Tanggal Lahir</Typography>
+              <Typography variant="body2">15-05-1996</Typography>
+            </Stack>
+            <Stack sx={{ width: '100%' }}>
+              <Typography variant="caption">Jenis Kelamin</Typography>
+              <Typography variant="body2">Perempuan</Typography>
+            </Stack>
+          </Stack>
+        </Stack>
+        {/* Stack 3.2 */}
+        <Stack marginTop={2} spacing={1}>
+          <Typography variant="subtitle2">Informasi Kontak</Typography>
+          <Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
+            <Stack sx={{ width: '100%' }}>
+              <Typography variant="caption">Nomor Telpon</Typography>
+              <Typography variant="body2">081256788765</Typography>
+            </Stack>
+            <Stack sx={{ width: '100%' }}>
+              <Typography variant="caption">Email</Typography>
+              <Typography variant="body2">Jessica.lie@gmail.com</Typography>
+            </Stack>
+          </Stack>
+          <Stack>
+            <Typography variant="caption">Alamat</Typography>
+            <Typography variant="body2">
+              Jl. Kalimantan No.6, Rw. Mekar Jaya, Kec. Serpong, Kota Tangerang Selatan, Banten
+              15310
+            </Typography>
+          </Stack>
+        </Stack>
+        {/* Stack 3.3 */}
+        <Stack marginTop={2} spacing={1}>
+          <Typography variant="subtitle2">Identitas Diri</Typography>
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+            spacing={2}
+            sx={{ flex: '100%' }}
+          >
+            <Stack>
+              <Typography variant="caption">Nomor NIK</Typography>
+              <Typography variant="body2">081256788765</Typography>
+            </Stack>
+            <Stack>
+              <Button variant="contained" startIcon={<VisibilityIcon />}>
+                Lihat Foto
+              </Button>
+            </Stack>
+          </Stack>
+        </Stack>
+        {/* Stack 3.4 */}
+        <Stack marginTop={2} spacing={1}>
+          <Typography variant="subtitle2">Informasi Lainnya</Typography>
+          <Stack direction="row" justifyContent="space-between" spacing={2} sx={{ flex: '100%' }}>
+            <Stack>
+              <Typography variant="caption">Agama</Typography>
+              <Typography variant="body2">Kristen</Typography>
+            </Stack>
+            <Stack>
+              <Typography variant="caption">Status</Typography>
+              <Typography variant="body2">Menikah</Typography>
+            </Stack>
+            <Stack>
+              <Typography variant="caption">Pendidikan</Typography>
+              <Typography variant="body2">S1</Typography>
+            </Stack>
+            <Stack>
+              <Typography variant="caption">Pekerjaan</Typography>
+              <Typography variant="body2">Ibu Rumah Tangga</Typography>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}

frontend/client-portal/src/sections/alarm-center/user-profile/CardPolicyNumber.tsx

@@ -0,0 +1,50 @@
+// mui
+import { styled } from '@mui/material/styles';
+import { Card, Typography, Stack, LinearProgress, linearProgressClasses } from '@mui/material';
+import CardBenefitSummary from './CardBenefitSummary';
+
+// ----------------------------------------------------------------------
+
+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%)',
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+export default function CardPolicyNumber() {
+  return (
+    <Card sx={{ padding: 2 }}>
+      <Stack>
+        <Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
+          <Stack direction="row" spacing={1} alignItems="center">
+            <img width={52} height={52} src="/logo/logo-linksehat.png" alt="LinkSehat" />
+            <Stack spacing={1}>
+              <Typography variant="subtitle2">Policy Number</Typography>
+              <Typography variant="subtitle2">12345678910</Typography>
+            </Stack>
+          </Stack>
+          <Stack spacing={1} sx={{ width: '206.5px' }}>
+            <Typography variant="subtitle2">Yearly Limit</Typography>
+            <BorderLinearProgress variant="determinate" value={100} />
+            <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+              10.000.000 /{' '}
+              <Typography variant="body2" color="#757575" component="span">
+                10.000.000
+              </Typography>
+            </Typography>
+          </Stack>
+        </Stack>
+        {/* Benefit Summary */}
+        <CardBenefitSummary />
+      </Stack>
+    </Card>
+  );
+}

frontend/client-portal/src/sections/auth/login/LoginEmailForm.tsx

@@ -1,34 +1,33 @@
+/* ----------------------------------- yup ---------------------------------- */
 import * as Yup from 'yup';
-import { useNavigate } from 'react-router-dom';
-// form
+/* ---------------------------------- form ---------------------------------- */
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-// @mui
+/* ---------------------------------- @mui ---------------------------------- */
 import { Stack, Alert } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
-// hooks
+/* ---------------------------------- hooks --------------------------------- */
 import useAuth from '../../../hooks/useAuth';
 import useIsMountedRef from '../../../hooks/useIsMountedRef';
-// components
+/* ------------------------------- components ------------------------------- */
 import { FormProvider, RHFTextField } from '../../../components/hook-form';
 
-// ----------------------------------------------------------------------
+/* ---------------------------------- types --------------------------------- */
+
+type LoginFormProps = {
+  setEmailOrPhone: Function;
+  setLoginOrVerifyCode: Function;
+};
 
 type FormValuesProps = {
   email: string;
   afterSubmit?: string;
 };
 
-interface Props {
-  formPhone: boolean;
-}
+/* -------------------------------------------------------------------------- */
 
-// ----------------------------------------------------------------------
-
-export default function LoginForm({ formPhone }: Props) {
+export default function LoginForm({ setEmailOrPhone, setLoginOrVerifyCode }: LoginFormProps) {
   const { login } = useAuth();
-  const navigate = useNavigate();
-
   const isMountedRef = useIsMountedRef();
 
   const LoginSchema = Yup.object().shape({
@@ -54,8 +53,9 @@ export default function LoginForm({ formPhone }: Props) {
   const onSubmit = async (data: FormValuesProps) => {
     try {
       await login(data.email);
-
-      navigate('/auth/verify-code', { state: { phoneOrEmail: data.email, formPhone } });
+      setEmailOrPhone(data.email);
+      setLoginOrVerifyCode(true);
+      reset();
     } catch (error: any) {
       reset();
 

frontend/client-portal/src/sections/auth/login/LoginPhoneForm.tsx

@@ -1,29 +1,34 @@
+/* ----------------------------------- yup ---------------------------------- */
 import * as Yup from 'yup';
-import { useNavigate } from 'react-router-dom';
-// form
+/* ---------------------------------- form ---------------------------------- */
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-// @mui
+/* ---------------------------------- @mui ---------------------------------- */
 import { Stack, Alert, InputAdornment } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
-// components
+/* ------------------------------- components ------------------------------- */
 import { FormProvider, RHFTextField } from '../../../components/hook-form';
+/* ---------------------------------- hooks --------------------------------- */
 import useAuth from '../../../hooks/useAuth';
+import useIsMountedRef from '../../../hooks/useIsMountedRef';
 
-// ----------------------------------------------------------------------
+/* ---------------------------------- types --------------------------------- */
+
+type LoginFormProps = {
+  setEmailOrPhone: Function;
+  setLoginOrVerifyCode: Function;
+};
 
 type FormValuesProps = {
   phone: string;
   afterSubmit?: string;
 };
 
-interface Props {
-  formPhone: boolean;
-}
+/* -------------------------------------------------------------------------- */
 
-export default function LoginPhoneForm({ formPhone }: Props) {
+export default function LoginPhoneForm({ setEmailOrPhone, setLoginOrVerifyCode }: LoginFormProps) {
   const { login } = useAuth();
-  const navigate = useNavigate();
+  const isMountedRef = useIsMountedRef();
 
   const LoginSchema = Yup.object().shape({
     phone: Yup.string().required('Phone is required'),
@@ -48,10 +53,15 @@ export default function LoginPhoneForm({ formPhone }: Props) {
   const onSubmit = async (data: FormValuesProps) => {
     try {
       await login(0 + data.phone);
-      navigate('/auth/verify-code', { state: { phoneOrEmail: 0 + data.phone, formPhone } });
+      setEmailOrPhone(0 + data.phone);
+      setLoginOrVerifyCode(true);
+      reset();
     } catch (error: any) {
       reset();
-      setError('afterSubmit', { ...error, message: error.response.data.message });
+
+      if (isMountedRef.current) {
+        setError('afterSubmit', { ...error, message: error.data.message });
+      }
     }
   };
 

frontend/client-portal/src/sections/auth/login/VerifyCodeForm.tsx

@@ -1,17 +1,25 @@
+/* ---------------------------------- @mui ---------------------------------- */
+import { OutlinedInput, Stack } from '@mui/material';
+/* ----------------------------------- yup ---------------------------------- */
 import * as Yup from 'yup';
+/* -------------------------------- snackbar -------------------------------- */
 import { useSnackbar } from 'notistack';
-import { useNavigate, useLocation } from 'react-router-dom';
+/* ---------------------------------- react --------------------------------- */
+import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
-// form
+/* ---------------------------------- form ---------------------------------- */
 import { useForm, Controller } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
-// @mui
-import { OutlinedInput, Stack } from '@mui/material';
+/* ---------------------------------- hooks --------------------------------- */
 import useAuth from '../../../hooks/useAuth';
-// routes
-// import { PATH_DASHBOARD } from '../../../routes/paths';
 
-// ----------------------------------------------------------------------
+/* ---------------------------------- types --------------------------------- */
+
+type VerifyCodeFormProps = {
+  emailOrPhone: string;
+  setEmailOrPhoneForm: Function;
+  setLoginOrVerifyCode: Function;
+};
 
 type FormValuesProps = {
   code1: string;
@@ -20,18 +28,25 @@ type FormValuesProps = {
   code4: string;
 };
 
-type Props = {
-  phoneOrEmail: string;
-};
-
 type ValueNames = 'code1' | 'code2' | 'code3' | 'code4';
 
-export default function VerifyCodeForm({ phoneOrEmail }: Props) {
+type responseProps = {
+  status: string;
+  statusCode: number;
+  data: [];
+  message: string;
+};
+
+/* -------------------------------------------------------------------------- */
+
+export default function VerifyCodeForm({
+  emailOrPhone,
+  setEmailOrPhoneForm,
+  setLoginOrVerifyCode,
+}: VerifyCodeFormProps) {
   const navigate = useNavigate();
-  const location = useLocation();
   const { validateOtp } = useAuth();
   const { enqueueSnackbar } = useSnackbar();
-  const { phone_or_email } = location.state;
 
   const VerifyCodeSchema = Yup.object().shape({
     code1: Yup.string().required('Code is required'),
@@ -47,13 +62,7 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
     code4: '',
   };
 
-  const {
-    watch,
-    control,
-    setValue,
-    handleSubmit,
-    formState: { isSubmitting, isValid },
-  } = useForm({
+  const { watch, control, setValue, handleSubmit } = useForm({
     mode: 'onBlur',
     resolver: yupResolver(VerifyCodeSchema),
     defaultValues,
@@ -62,15 +71,35 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
   const values = watch();
 
   useEffect(() => {
-    console.log('phone number : ' + phone_or_email);
+    const handlePasteClipboard = (event: ClipboardEvent) => {
+      let data: string | string[] = event?.clipboardData?.getData('Text') || '';
+
+      data = data.split('');
+
+      [].forEach.call(document.querySelectorAll('#field-code'), (node: any, index) => {
+        node.value = data[index];
+        const fieldIndex = `code${index + 1}`;
+        setValue(fieldIndex as ValueNames, data[index]);
+      });
+    };
+
     document.addEventListener('paste', handlePasteClipboard);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [setValue]);
 
   const onSubmit = async (data: FormValuesProps) => {
     try {
       await new Promise((resolve) => setTimeout(resolve, 1000));
-      await validateOtp(phoneOrEmail, Object.values(data).join(''));
+      // @ts-ignore
+      const response: responseProps = await validateOtp(emailOrPhone, Object.values(data).join(''));
+
+      if (response.data.length === 0) {
+        return enqueueSnackbar(response.message, {
+          variant: 'error',
+          autoHideDuration: 4000,
+          preventDuplicate: true,
+        });
+      }
+
       navigate('/dashboard');
       enqueueSnackbar('Verify success!', { variant: 'success' });
     } catch (error) {
@@ -78,18 +107,6 @@ export default function VerifyCodeForm({ phoneOrEmail }: Props) {
     }
   };
 
-  const handlePasteClipboard = (event: ClipboardEvent) => {
-    let data: string | string[] = event?.clipboardData?.getData('Text') || '';
-
-    data = data.split('');
-
-    [].forEach.call(document.querySelectorAll('#field-code'), (node: any, index) => {
-      node.value = data[index];
-      const fieldIndex = `code${index + 1}`;
-      setValue(fieldIndex as ValueNames, data[index]);
-    });
-  };
-
   const handleChangeWithNextField = (
     event: React.ChangeEvent<HTMLInputElement>,
     handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void

frontend/client-portal/src/sections/auth/login/index.ts

@@ -1,2 +1,3 @@
 export { default as LoginEmailForm } from './LoginEmailForm';
-export { default as LoginPhoneForm } from './LoginPhoneForm';
+export { default as LoginPhoneForm } from './LoginPhoneForm';
+export { default as VerifyCodeForm } from './VerifyCodeForm';

frontend/client-portal/src/sections/auth/verify-code/index.ts

@@ -1 +0,0 @@
-export { default as VerifyCodeForm } from './VerifyCodeForm';

frontend/client-portal/src/sections/claimreports/ClaimStatusCard.tsx

@@ -1,67 +0,0 @@
-// @mui
-import { styled } from '@mui/material/styles';
-import { Card, Typography, Stack } from '@mui/material';
-// theme
-import palette from '../../theme/palette';
-
-// ----------------------------------------------------------------------
-
-const RootStyle = styled(Card)(({ theme }) => ({
-  boxShadow: 'none',
-  padding: theme.spacing(2),
-  color: 'black',
-  backgroundColor: theme.palette.grey[200],
-  maxHeight: '240px',
-}));
-
-// ----------------------------------------------------------------------
-
-interface ClaimStatusType {
-  name: string;
-  value: number;
-  color: string;
-}
-
-export default function ClaimStatusCard({ name, value, color }: ClaimStatusType) {
-  const listItems = [
-    { name: 'Requested', value: 15, color: palette.dark.primary.dark },
-    { name: 'Approval', value: 20, color: palette.dark.warning.dark },
-    { name: 'Disbrusment', value: 20, color: palette.dark.success.dark },
-    { name: 'Rejected', value: 20, color: palette.dark.error.dark },
-  ];
-
-  return (
-    <RootStyle>
-      <Stack sx={{ mb: 1 }}>
-        <Typography variant="body2">Claim Status</Typography>
-      </Stack>
-      <Stack direction="row" spacing={2}>
-        {listItems.map(({ name, value, color }, key) => (
-          <Card
-            key={key}
-            sx={{
-              paddingX: 1,
-              borderRadius: 0.75,
-              borderColor: color,
-              borderStyle: 'solid',
-              borderWidth: '1px',
-              padding: 2,
-              flex: 1,
-              textAlign: 'center',
-            }}
-          >
-            <Typography component="p" variant="body2">
-              {name}
-            </Typography>
-            <Typography component="p" variant="h5" sx={{ marginTop: 2 }}>
-              {value}
-            </Typography>
-            <Typography component="p" variant="body2" sx={{ marginTop: 2 }}>
-              Cases
-            </Typography>
-          </Card>
-        ))}
-      </Stack>
-    </RootStyle>
-  );
-}

frontend/client-portal/src/sections/claimreports/ListTable.tsx

@@ -1,313 +0,0 @@
-// @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 ListTable() {
-  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' }}>
-            Submit Claim
-          </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 />
-      {/* The Main Table */}
-      <TableContainer component={Stack} sx={{ padding: 2, borderRadius: 1 }}>
-        <Table aria-label="collapsible table">
-          <TableBody>
-            <TableRow sx={{ backgroundColor: '#F4F6F8' }}>
-              <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}
-        /> */}
-    </Card>
-  );
-}

frontend/client-portal/src/sections/dashboard/CardBalance.tsx

@@ -16,17 +16,18 @@ import { useState } from 'react';
 import { fCurrency } from '../../utils/formatNumber';
 // <sections></sections>
 import DialogTopUpLimit from './DialogTopUpLimit';
+import DialogClaimSubmitMember from './DialogClaimSubmitMember';
 
 // ----------------------------------------------------------------------
 
-type DataContent = {
-  info: string;
-  date: string;
-  time: string;
+type DataMembers = {
+  name: string;
+  memberId: string;
+  saldo: string;
 };
 
 type NotificationProps = {
-  data?: DataContent[];
+  data?: { members: DataMembers[] };
 };
 
 // ----------------------------------------------------------------------
@@ -67,7 +68,7 @@ export default function CardBalance({ data }: NotificationProps) {
   const clickHandler = (isDialog: string) => {
     switch (isDialog) {
       case 'submitClaim':
-        setDialogTitle('Notification');
+        setDialogTitle('Add Claim');
         setIsDialog(isDialog);
         setOpenDialog(true);
         break;
@@ -140,14 +141,14 @@ export default function CardBalance({ data }: NotificationProps) {
         </Stack>
       </>
 
-      {/* {isDialog === 'submitClaim' && (
-        <DialogNotification
+      {isDialog === 'submitClaim' && (
+        <DialogClaimSubmitMember
           openDialog={openDialog}
           setOpenDialog={setOpenDialog}
-          title={dialogTitle}
-          data={data}
+          title={{ name: dialogTitle }}
+          data={data?.members}
         />
-      )} */}
+      )}
 
       {isDialog === 'topUpLimit' && (
         <DialogTopUpLimit

frontend/client-portal/src/sections/dashboard/DialogClaimSubmitMember.tsx

@@ -0,0 +1,191 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
+  Stack,
+  TextField,
+  InputAdornment,
+  Card,
+  IconButton,
+} from '@mui/material';
+import { Search as SearchIcon } from '@mui/icons-material';
+// components
+import MuiDialog from '../../components/MuiDialog';
+import Iconify from '../../components/Iconify';
+// React
+import { ReactElement, useRef, useState } from 'react';
+import DialogClaimSubmitMemberSubmission from './DialogClaimSubmitMemberSubmission';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  name: string;
+  memberId: string;
+  saldo: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent[];
+};
+
+// ----------------------------------------------------------------------
+
+function createData(name: string, memberId: string, saldo: string) {
+  return { name, memberId, saldo };
+}
+
+const rows = [
+  createData('Alexandra tjoa tri atmaja kurniadi', '0122122', '10.000.000'),
+  createData('Marina kurniadi', '0122123', '10.000.000'),
+  createData('Tjoa Indri', '0122124', '10.000.000'),
+  createData('Atmaja Tirta', '0122125', '10.000.000'),
+  createData('Alexandra kurniadi', '0122126', '10.000.000'),
+];
+
+// ----------------------------------------------------------------------
+
+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 DialogClaimSubmitMember = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  /* --------------------------------- Search --------------------------------- */
+
+  const searchInput = useRef<HTMLInputElement>(null);
+  const [searchText, setSearchText] = useState('');
+  const [dataMemberClaim, setDataMemberClaim] = useState({
+    name: '',
+    memberId: '',
+    saldo: '',
+  });
+
+  const handleSearchChange = (event: any) => {
+    const newSearchText = event.target.value ?? '';
+    setSearchText(newSearchText);
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- Get Current Date ---------------------------- */
+
+  const current = new Date();
+  const date = `${current.getDate()} / ${current.getMonth() + 1} / ${current.getFullYear()}`;
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ Icon On Click ----------------------------- */
+
+  const [openDialogClaimMember, setOpenDialogMemberClaim] = useState(false);
+
+  const clickHandler = (name: string, memberId: string, saldo: string) => {
+    setDataMemberClaim({ name: name, memberId: memberId, saldo: saldo });
+    setOpenDialogMemberClaim(true);
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  const getContent = () => (
+    <Stack>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
+        <Typography variant="subtitle1">Pilih Karyawan</Typography>
+        <Stack sx={{ color: '#757575' }}>
+          <Typography variant="caption">Submission date</Typography>
+          <Typography variant="caption">{date}</Typography>
+        </Stack>
+      </Stack>
+      <TextField
+        id="search-input"
+        ref={searchInput}
+        variant="outlined"
+        fullWidth
+        onChange={handleSearchChange}
+        value={searchText}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon />
+            </InputAdornment>
+          ),
+        }}
+        placeholder="Cari nama atau member ID disini..."
+        sx={{ marginTop: 2 }}
+      />
+      <Stack marginTop={2} spacing={1}>
+        {rows.map((row, key) => (
+          <Card key={key} sx={{ paddingY: 1, paddingX: 2 }}>
+            <Stack direction="row" alignItems="center" spacing={2}>
+              <img
+                width={40}
+                height={40}
+                src="/images/member.png"
+                alt="user-profile"
+                style={{ borderRadius: '50%' }}
+              />
+              <Stack sx={{ flex: '45%' }}>
+                <Typography variant="subtitle1">{row.name}</Typography>
+                <Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
+                  Member ID : {row.memberId}
+                </Typography>
+              </Stack>
+              <Stack spacing={1} paddingY={1}>
+                <Typography color="#0A0A0A" variant="caption">
+                  Total Limit
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  {row.saldo} /{' '}
+                  <Typography variant="body2" color="#757575" component="span">
+                    10.000.000
+                  </Typography>
+                </Typography>
+              </Stack>
+              <IconButton onClick={() => clickHandler(row.name, row.memberId, row.saldo)}>
+                <Iconify icon="ic:round-chevron-right" />
+              </IconButton>
+            </Stack>
+          </Card>
+        ))}
+      </Stack>
+    </Stack>
+  );
+
+  return (
+    <>
+      <MuiDialog
+        title={title}
+        openDialog={openDialog}
+        setOpenDialog={setOpenDialog}
+        content={getContent()}
+        maxWidth="sm"
+      />
+
+      <DialogClaimSubmitMemberSubmission
+        title={title}
+        openDialog={openDialogClaimMember}
+        setOpenDialog={setOpenDialogMemberClaim}
+        data={dataMemberClaim}
+      />
+    </>
+  );
+};
+
+export default DialogClaimSubmitMember;

frontend/client-portal/src/sections/dashboard/DialogClaimSubmitMemberSubmission.tsx

@@ -0,0 +1,352 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
+  Stack,
+  Card,
+  Button,
+  Link,
+  Switch,
+  SwitchProps,
+  FormControlLabel,
+} from '@mui/material';
+import { Add as AddIcon } from '@mui/icons-material';
+// components
+import MuiDialog from '../../components/MuiDialog';
+import Iconify from '../../components/Iconify';
+import { FormProvider } from '../../components/hook-form';
+// React
+import { ReactElement, useEffect, useRef, useState } from 'react';
+// yup
+import * as Yup from 'yup';
+// form
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { LoadingButton } from '@mui/lab';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  name: string;
+  memberId: string;
+  saldo: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent;
+};
+
+// ----------------------------------------------------------------------
+
+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 DialogClaimSubmitMemberSubmission = ({
+  title,
+  openDialog,
+  setOpenDialog,
+  data,
+}: MuiDialogProps) => {
+  /* --------------------------------- Search --------------------------------- */
+
+  const searchInput = useRef<HTMLInputElement>(null);
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearchChange = (event: any) => {
+    const newSearchText = event.target.value ?? '';
+    setSearchText(newSearchText);
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- Get Current Date ---------------------------- */
+
+  const current = new Date();
+  const date = `${current.getDate()} / ${current.getMonth() + 1} / ${current.getFullYear()}`;
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------- Form Submit ------------------------------ */
+
+  type FormValuesProps = {
+    topup: string;
+  };
+
+  const TopUpSchema = Yup.object().shape({
+    topup: Yup.string(),
+  });
+
+  const defaultValues = {
+    topup: '',
+  };
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(TopUpSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  useEffect(() => {
+    if (openDialog === false) {
+      reset();
+    }
+  }, [openDialog, reset]);
+
+  const onSubmit = async (data: FormValuesProps) => {
+    reset();
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- Ios Switch Style ---------------------------- */
+
+  const IosSwitch = styled((props: SwitchProps) => (
+    <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
+  ))(({ theme }) => ({
+    width: 28,
+    height: 16,
+    padding: 0,
+    marginRight: '10px',
+    '& .MuiSwitch-switchBase': {
+      padding: 0,
+      margin: 2,
+      transitionDuration: '300ms',
+      '&.Mui-checked': {
+        transform: 'translateX(12px)',
+        color: '#fff',
+        '& + .MuiSwitch-track': {
+          opacity: 1,
+          border: 0,
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+          opacity: 0.5,
+        },
+      },
+      '&.Mui-focusVisible .MuiSwitch-thumb': {
+        color: '#33cf4d',
+        border: '6px solid #fff',
+      },
+      '&.Mui-disabled .MuiSwitch-thumb': {
+        color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
+      },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+      },
+    },
+    '& .MuiSwitch-thumb': {
+      boxSizing: 'border-box',
+      width: 12,
+      height: 12,
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: 26 / 2,
+      opacity: 1,
+      transition: theme.transitions.create(['background-color'], {
+        duration: 500,
+      }),
+    },
+  }));
+
+  /* -------------------------------------------------------------------------- */
+
+  const getContent = () => (
+    <Stack>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
+        <Typography variant="subtitle1">Claim Submission</Typography>
+        <Stack sx={{ color: '#757575' }}>
+          <Typography variant="caption">Submission date</Typography>
+          <Typography variant="caption">{date}</Typography>
+        </Stack>
+      </Stack>
+      <Card sx={{ paddingY: 1, paddingX: 2, marginTop: 2, backgroundColor: '#F4F6F8' }}>
+        <Stack direction="row" alignItems="center" spacing={2}>
+          <img
+            width={40}
+            height={40}
+            src="/images/member.png"
+            alt="user-profile"
+            style={{ borderRadius: '50%' }}
+          />
+          <Stack sx={{ flex: '45%' }}>
+            <Typography variant="subtitle1">{data && data.name}</Typography>
+            <Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
+              Member ID : {data && data.memberId}
+            </Typography>
+          </Stack>
+        </Stack>
+      </Card>
+      <Card sx={{ paddingY: 1, paddingX: 2, marginTop: 2 }}>
+        <Stack spacing={1} paddingY={1}>
+          <Stack direction="row" justifyContent="space-between">
+            <Typography color="#0A0A0A" variant="caption">
+              Total Limit
+            </Typography>
+            <Link variant="caption" textAlign="center" href="">
+              Details Benefits <Iconify icon="ic:round-chevron-right" />
+            </Link>
+          </Stack>
+          <BorderLinearProgress variant="determinate" value={100} />
+          <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+            {data && data.saldo} /{' '}
+            <Typography variant="body2" color="#757575" component="span">
+              10.000.000
+            </Typography>
+          </Typography>
+        </Stack>
+      </Card>
+      <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        {/* Invoice */}
+        <Stack marginTop={2} spacing={1}>
+          <Stack>
+            <Typography variant="subtitle2">Real Invoice</Typography>
+            <Typography color="#9E9E9E" variant="caption">
+              Real invoice required
+            </Typography>
+          </Stack>
+          <Card>
+            <Button
+              variant="outlined"
+              startIcon={<AddIcon />}
+              component="label"
+              sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
+            >
+              Add Invoice
+              <input name="invoice" hidden accept="image/*" multiple type="file" />
+            </Button>
+          </Card>
+        </Stack>
+        {/* Prescription */}
+        <Stack marginTop={2} spacing={1}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack>
+              <Typography variant="subtitle2">
+                Doctor's Prescription and Another Documents
+              </Typography>
+              <Typography color="#9E9E9E" variant="caption">
+                Doctor's Prescription required
+              </Typography>
+            </Stack>
+            <Stack
+              direction="row"
+              padding={1}
+              alignItems="center"
+              sx={{
+                backgroundColor: 'white',
+                border: '1px solid #E0E0E0',
+                borderRadius: '6px',
+                height: 32,
+              }}
+            >
+              <IosSwitch defaultChecked />
+              <Typography color="#404040" variant="body2">
+                Yes
+              </Typography>
+            </Stack>
+          </Stack>
+          <Card>
+            <Button
+              variant="outlined"
+              startIcon={<AddIcon />}
+              component="label"
+              sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
+            >
+              Add Prescription
+              <input name="invoice" hidden accept="image/*" multiple type="file" />
+            </Button>
+          </Card>
+        </Stack>
+        {/* Laboratory */}
+        <Stack marginTop={2} spacing={1}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack>
+              <Typography variant="subtitle2">
+                Doctor's Prescription and Another Documents
+              </Typography>
+              <Typography color="#9E9E9E" variant="caption">
+                Doctor's Prescription required
+              </Typography>
+            </Stack>
+            <Stack
+              direction="row"
+              padding={1}
+              alignItems="center"
+              sx={{
+                backgroundColor: 'white',
+                border: '1px solid #E0E0E0',
+                borderRadius: '6px',
+                height: 32,
+              }}
+            >
+              <IosSwitch defaultChecked />
+              <Typography color="#404040" variant="body2">
+                Yes
+              </Typography>
+            </Stack>
+          </Stack>
+          <Card>
+            <Button
+              variant="outlined"
+              startIcon={<AddIcon />}
+              component="label"
+              sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
+            >
+              Add Result
+              <input name="invoice" hidden accept="image/*" multiple type="file" />
+            </Button>
+          </Card>
+        </Stack>
+        <Stack marginTop={1}>
+          <LoadingButton
+            fullWidth
+            size="large"
+            type="submit"
+            variant="contained"
+            loading={isSubmitting}
+            sx={{ marginTop: 2 }}
+          >
+            Ajukan Permintaan
+          </LoadingButton>
+        </Stack>
+      </FormProvider>
+    </Stack>
+  );
+
+  return (
+    <>
+      <MuiDialog
+        title={title}
+        openDialog={openDialog}
+        setOpenDialog={setOpenDialog}
+        content={getContent()}
+        maxWidth="sm"
+      />
+    </>
+  );
+};
+
+export default DialogClaimSubmitMemberSubmission;

frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx

@@ -52,7 +52,7 @@ const testData = {
   totalMembers: 50,
   totalCases: 100,
   totalPersen: 75,
-  myLimit: '375.000.000',
+  myLimit: 375000000,
   totalLimit: 500000000,
 };
 
@@ -75,14 +75,14 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
   const [isDisabledButton, setIsDisabledButton] = useState(true);
 
   const TopUpSchema = Yup.object().shape({
-    topup: Yup.string()
-      /* 
-    // @ts-ignore */
-      .test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
+    topup: Yup.number(),
+    //   /*
+    // // @ts-ignore */
+    //   .test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
   });
 
   const defaultValues = {
-    topup: '0',
+    topup: 0,
   };
 
   const methods = useForm<FormValuesProps>({
@@ -109,7 +109,8 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
 
   const onCheckHandler = (data: FormValuesProps) => {
     setIsDisabledCheckbox(!isDisabledCheckbox);
-    setValue('topup', '5000000');
+    setIsDisabledButton(false);
+    setValue('topup', testData.totalLimit - testData.myLimit);
   };
 
   const onTopupHandler = (value: string) => {
@@ -175,7 +176,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
           <FormControlLabel
             sx={{ typography: 'caption' }}
             control={<Checkbox />}
-            label={'Max ' + fCurrency(5000000)}
+            label={'Max ' + fCurrency(testData.totalLimit - testData.myLimit)}
             onChange={handleSubmit(onCheckHandler)}
           />
 
@@ -188,7 +189,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
             sx={{ marginTop: 2 }}
             disabled={isDisabledButton}
           >
-            Login
+            Ajukan Permintaan
           </LoadingButton>
         </FormProvider>
       </Stack>

frontend/client-portal/src/sections/dashboard/TableList.tsx

@@ -0,0 +1,361 @@
+/* ---------------------------------- @mui ---------------------------------- */
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Button,
+  TableSortLabel,
+  Box,
+  IconButton,
+  Card,
+  Grid,
+} from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+/* ---------------------------------- axios --------------------------------- */
+import axios from 'axios';
+/* ---------------------------------- react --------------------------------- */
+import { 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';
+
+/* ---------------------------------- types --------------------------------- */
+
+type PaginationTableProps = {
+  current_page: number;
+  from: number;
+  last_page: number;
+  links: [];
+  path: string;
+  per_page: number;
+  to: number;
+  total: number;
+};
+
+type DataTableProps = {
+  name: string;
+  member_id: string;
+  division: string;
+  limit: string;
+  status: string;
+};
+
+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;
+}
+
+/* -------------------------------------------------------------------------- */
+
+/* -------------------------- enchanced table head -------------------------- */
+
+const headCells: readonly HeadCell[] = [
+  {
+    id: 'member_id',
+    align: 'left',
+    label: 'Member ID',
+    isSort: true,
+  },
+  {
+    id: 'name',
+    align: 'center',
+    label: 'Name',
+    isSort: true,
+  },
+  {
+    id: 'division',
+    align: 'center',
+    label: 'Divisi',
+    isSort: true,
+  },
+  {
+    id: 'limit',
+    align: 'center',
+    label: 'Limit',
+    isSort: true,
+  },
+  {
+    id: 'status',
+    align: 'center',
+    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() {
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState('name');
+  const [customSearchParams, setCustomSearchParams] = useSearchParams();
+  const [isLoading, setIsLoading] = useState(true);
+  const [dataTable, setDataTable] = useState([]);
+  const [dataDivision, setDataDivision] = useState([]);
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+  const [appliedParams, setAppliedParams] = useState({});
+  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
+    current_page: 0,
+    from: 0,
+    last_page: 0,
+    links: [],
+    path: '',
+    per_page: 0,
+    to: 0,
+    total: 0,
+  });
+
+  /* ------------------------------- 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([
+      ...customSearchParams.entries(),
+      ['order', isAsc ? 'desc' : 'asc'],
+      ['orderBy', property],
+    ]);
+    setAppliedParams(params);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ Search field ------------------------------ */
+  const [searchText, setSearchText] = useState('');
+
+  const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchText(event.target.value);
+  };
+
+  const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsLoading(true);
+    const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- table pagination ---------------------------- */
+
+  /* ------------------------ button change pagination ------------------------ */
+  const onPageChangeHandle = async (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    setIsLoading(true);
+    const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
+    setPage(newPage);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    setAppliedParams(params);
+    setIsLoading(false);
+    // setCustomSearchParams.set('page', newPage + 1);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* --------------------------- row page per limit --------------------------- */
+  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsLoading(true);
+    setPage(0);
+    const params = Object.fromEntries([
+      ...customSearchParams.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 params =
+        Object.keys(appliedParams).length !== 0
+          ? appliedParams
+          : Object.fromEntries([
+              ...customSearchParams.entries(),
+              ['order', order],
+              ['orderBy', orderBy],
+            ]);
+
+      const response = await axios.get('http://localhost:8001/api/dashboard', {
+        params: params,
+      });
+
+      const division = await axios.get('http://localhost:8001/api/division');
+      setDataDivision(division.data);
+
+      setCustomSearchParams(params);
+      setDataTable(response.data.data);
+      setPaginationTable(response.data.meta);
+      setRowsPerPage(response.data.meta.per_page);
+      setIsLoading(false);
+    })();
+  }, [appliedParams, customSearchParams, order, orderBy, setCustomSearchParams]);
+
+  return (
+    <Card>
+      <Grid container>
+        {/* Field 1 */}
+        <Grid item xs={12} paddingX="24px" paddingY="20px">
+          <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
+            <TextField
+              id="search-input"
+              label="Search"
+              variant="outlined"
+              fullWidth
+              onChange={handleSearch}
+              value={searchText}
+            />
+          </form>
+        </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.member_id}</TableCell>
+                      <TableCell align="center">{row.name}</TableCell>
+                      <TableCell align="center">{row.division}</TableCell>
+                      <TableCell align="center">{row.limit}</TableCell>
+                      <TableCell align="center">
+                        {row.status.toLowerCase() === 'active' ? (
+                          <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,
+                              },
+                            }}
+                          >
+                            {row.status}
+                          </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,
+                              },
+                            }}
+                          >
+                            {row.status}
+                          </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>
+  );
+}

frontend/client-portal/src/theme/overrides/Table.ts

@@ -4,9 +4,19 @@ import { Theme } from '@mui/material/styles';
 
 export default function Table(theme: Theme) {
   return {
+    MuiTableHead: {
+        styleOverrides: {
+          root: {
+            '.MuiTableRow-root': {
+              borderBottom: 'none',
+            },
+          },
+      },
+    },
     MuiTableRow: {
       styleOverrides: {
         root: {
+          borderBottom: '1px solid rgba(241, 243, 244, 1)',
           '&.Mui-selected': {
             backgroundColor: theme.palette.action.selected,
             '&:hover': {

frontend/dashboard/src/components/dialogs/MemberSelectDialog.tsx

@@ -251,7 +251,7 @@ export default function MemberSelectDialog({
   const getContent = () => (
     <Stack spacing={1} marginTop={2}>
       <form onSubmit={handleFilterSubmit}>
-      <TextField label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchFilter.search}/>
+      <TextField label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchFilter.search} autoFocus/>
       </form>
       <DataTable
         isLoading={dataTableLoading}

frontend/dashboard/src/pages/Claims/Create.tsx

@@ -1,8 +1,8 @@
 import * as Yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { Autocomplete, Button, Card, Collapse, Divider, Grid, Stack, TextField, Typography } from '@mui/material';
+import { Autocomplete, Button, Card, Collapse, Divider, Grid, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
 import { Controller, useForm } from 'react-hook-form';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
 import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from '../../components/hook-form';
 import Page from '../../components/Page';
@@ -13,22 +13,29 @@ import { styled } from '@mui/system';
 import axios from '../../utils/axios';
 import { enqueueSnackbar } from 'notistack';
 import { LoadingButton } from '@mui/lab';
+import { fCurrency } from '../../utils/formatNumber';
+import Iconify from '../../components/Iconify';
+
+export default function ClaimsCreate() {
+  const navigate = useNavigate();
 
-export default function Create() {
   const [member, setMember] = useState();
   const selectedMemberDisplay = useRef<HTMLInputElement>(null);
 
   const NewClaimSchema = Yup.object().shape({
-    name: Yup.string().required('Name is required'),
-    diagnosis_id: Yup.string().required('Diagnosis is required'),
-    total_claim: Yup.string().required('Total Claim is required'),
+    member_id: Yup.string().required('Please select Member'),
+    total_claim: Yup.number().typeError('Claim should be a number').min(1, 'Claim cannot 0').required('Total Claim is required'),
+    diagnosis: Yup.object().required('Choose Diagnosis'),
+    benefit: Yup.object().required('Please Select Benefit')
   });
 
   const defaultValues = useMemo(
     () => ({
-      name: '',
+      member_id: null,
+      benefit_id: null,
       diagnosis_id: null,
       total_claim: 0,
+      benefit: null
     }),
     []
   );
@@ -50,13 +57,41 @@ export default function Create() {
   } = methods;
 
   const onSubmit = async (data: any) => {
-    console.log(data);
+    axios.post('claims', getValues())
+      .then(function(res) {
+        console.log('SUCCESS', res)
+        enqueueSnackbar('Success Creating Claim', { variant: 'success' })
+        navigate('/claims');
+      })
+      .catch(function (err) {
+        console.log('ERROR CUK', err.data)
+        enqueueSnackbar('Failed Creating Claim', { variant: 'error' })
+      })
   };
 
+  const [memberBenefits, setMemberBenefits] = useState([]);
+  const getMemberBenefits = (member) => {
+    axios.get(`members/${member.id}/benefits`)
+        .then( (res) => {
+          setMemberBenefits(res.data);
+        })
+        .catch( (err) => {
+          enqueueSnackbar('Failed getting member benefits', { variant: 'error' })
+        })
+  }
+
   const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
 
   const memberSelected = (selectedMember: any) => {
+    // Reset Selected Benefit
+    setMemberBenefits([]);
+    setValue('benefit_id', null);
+    setValue('benefit', null);
+
     setMember(selectedMember);
+    setValue('member_id', selectedMember.id)
+
+    getMemberBenefits(selectedMember)
   };
 
   const [diagnosis, setDiagnosis] = useState([]);
@@ -76,16 +111,12 @@ export default function Create() {
 
   }, [])
 
-  const [isEligible, setIsEligible] = useState(false)
-
-  useEffect(() => {
-    setIsEligible(false)
-    console.log('member change')
-  }, [member])
+  const [isEligible, setIsEligible] = useState<boolean|null>(null)
 
   const [isCheckingLimit, setIsCheckingLimit] = useState(false)
   const checkLimit = (event) => {
     event.preventDefault();
+
     console.log(getValues('diagnosis_id'))
     if (!member || !getValues('diagnosis_id')) {
       enqueueSnackbar('Please Check the Data', { variant: 'error' })
@@ -109,6 +140,10 @@ export default function Create() {
         setIsCheckingLimit(false)
       })
   }
+  
+  const headStyle = {
+    fontWeight: 'bold'
+  };
 
   return (
     <Page title="Create Claim" sx={{ mx: 2 }}>
@@ -136,41 +171,115 @@ export default function Create() {
                 <Typography variant="h6">Member</Typography>
 
                 <Stack spacing={2} direction="row">
-                  <Grid item xs={10}>
-                    <TextField
+                  <Grid item xs={12}>
+                    <RHFTextField
+                      name="member_id"
                       label="Member"
                       variant="outlined"
                       fullWidth
                       value={member?.name || ''}
                       ref={selectedMemberDisplay}
                       InputProps={{
-            readOnly: true,
-          }}
+                        readOnly: true,
+                      }}
+                      onClick={() => {setIsMemberDialogOpen(true)}}
                     />
                   </Grid>
-                  <Grid item xs={2}>
+                  {/* <Grid item xs={2}>
                     <Button variant="outlined" fullWidth sx={{ p: 1.8 }} onClick={() => {
                       setIsMemberDialogOpen(true)
                     }}>
-                      Search
+                      {member ? 'Change' : 'Search'}
                     </Button>
-                  </Grid>
+                  </Grid> */}
                 </Stack>
                   
                 { member && (
                   <Stack>
-                    <div>
-                      Plan : {JSON.stringify(member)} 
-                    </div>
-                    <div>
-                      Benefit : 
-                    </div>
-                    <div>
-                      Another : 
-                    </div>
+                    <Grid container spacing={2}>
+                      <Grid item xs={12} md={6}>
+                        <Table border="light-700">
+                          <TableBody>
+                            <TableRow>
+                              <TableCell style={headStyle} align="left">Name</TableCell>
+                              <TableCell align="left">{member.full_name}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                              <TableCell style={headStyle} align="left">DOB</TableCell>
+                              <TableCell align="left">{member.birth_date} ({member.age + ' years'})</TableCell>
+                            </TableRow>
+                            <TableRow>
+                              <TableCell style={headStyle} align="left">Marital Status</TableCell>
+                              <TableCell align="left">{member.marital_status}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                              <TableCell style={headStyle} align="left">Record Type</TableCell>
+                              <TableCell align="left">{member.record_type}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                              <TableCell style={headStyle} align="left">Principal ID</TableCell>
+                              <TableCell align="left">{member.principal_id} ({member.relation_with_principal})</TableCell>
+                            </TableRow>
+                          </TableBody>
+                        </Table>
+                      </Grid>
+                      <Grid item xs={12} md={6}>
+                        <Table border="light-700">
+                          <TableBody>
+                            <TableRow>
+                              <TableCell style={headStyle} align="left">Plan</TableCell>
+                              <TableCell align="left">{member.current_plan.code}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                              <TableCell style={headStyle} align="left">Active</TableCell>
+                              <TableCell align="left">{member.current_plan.start} - {member.current_plan.end} (Active)</TableCell>
+                            </TableRow>
+                            <TableRow>
+                              <TableCell style={headStyle} align="left">Corporate Limit</TableCell>
+                              <TableCell align="left">{fCurrency(0)} / {fCurrency(member.current_plan.limit_rules)}</TableCell>
+                            </TableRow>
+                            <TableRow>
+                              <TableCell style={headStyle} align="left">Plan Usage</TableCell>
+                              <TableCell align="left">{fCurrency(0)} / {fCurrency(member.current_plan.limit_rules)}</TableCell>
+                            </TableRow>
+                          </TableBody>
+                        </Table>
+                      </Grid>
+                    </Grid>
                 </Stack>
                 )}
-                
+
+                <Controller
+                  name="benefit"
+                  control={control}
+                  render={({ field: { onChange, value } }) => (
+                    <Autocomplete
+                      options={memberBenefits}
+                      getOptionLabel={(option) =>
+                        option ? `#${option.id} (${option.code}) ${option.description}` : ''
+                      }
+                      value={value || ''}
+                      onChange={(event: any, newValue: any) => {
+                        setValue('benefit_id', newValue?.id)
+                        onChange(newValue);
+                      }}
+                      renderInput={(params) => (
+                        <TextField
+                          // name="benefit"
+                          {...params}
+                          label="Benefit"
+                          variant="outlined"
+                          fullWidth
+                          // onKeyPress={(event) => {
+                          //   if (event.key === 'Enter')
+                          //     searchDiagnosis(event.target.value)
+                          // }}
+                        />
+                      )}
+                    />
+                  )}
+                />
+
                 <Controller
                   name="diagnosis"
                   control={control}
@@ -183,16 +292,19 @@ export default function Create() {
                       value={value || ''}
                       onChange={(event: any, newValue: any) => {
                         setValue('diagnosis_id', newValue?.id)
+                        // setValue('diagnosis', newValue)
                         onChange(newValue);
                       }}
                       renderInput={(params) => (
-                        <TextField
+                        <RHFTextField
+                          name="diagnosis"
                           {...params}
                           label="Diagnosis"
                           variant="outlined"
                           fullWidth
-                          onChange={(event) => {
-                            searchDiagnosis(event.target.value)
+                          onKeyPress={(event) => {
+                            if (event.key === 'Enter')
+                              searchDiagnosis(event.target.value)
                           }}
                         />
                       )}
@@ -200,10 +312,86 @@ export default function Create() {
                   )}
                 />
 
+                { isCheckingLimit && (
+                  <Stack sx={{ backgroundColor: 'gray', paddingY: 1, paddingX: 1.5, mb: 2, borderRadius: '3-xl' }}>
+                    {/* Checking */}
+                    <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
+                      <Iconify
+                        icon="bxs:info-circle"
+                        width={12}
+                        height={13}
+                        sx={{ color: '#424242', marginRight: '6px' }}
+                      />
+                      <Typography variant="caption" component="span">
+                        Please Wait, Checking Eligibilty
+                      </Typography>
+                    </Typography>
+                  </Stack>
+                )}
+                { false && isCheckingLimit == false && isEligible == null && (
+                  <Stack sx={{ backgroundColor: 'gray', paddingY: 1, paddingX: 1.5, mb: 2, borderRadius: '3-xl' }}>
+                    {/* No Data Selected */}
+                    <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
+                      <Iconify
+                        icon="bxs:info-circle"
+                        width={12}
+                        height={13}
+                        sx={{ color: '#424242', marginRight: '6px' }}
+                      />
+                      <Typography variant="caption" component="span">
+                        Please Select Diagnosis !
+                      </Typography>
+                    </Typography>
+                  </Stack>
+                )}
+                { (!isCheckingLimit && isEligible !== null) && isEligible && (
+                  <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2, borderRadius: '3-xl' }}>
+                    {/* Eligible */}
+                    <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
+                      <Iconify
+                        icon="bxs:lock-alt"
+                        width={12}
+                        height={13}
+                        sx={{ color: '#424242', marginRight: '6px' }}
+                      />
+                      <Typography variant="caption" component="span">
+                        Diagnosis is Eligible
+                      </Typography>
+                    </Typography>
+                    <Typography sx={{ typography: 'caption', color: '#637381' }}>
+                      125.000.000 / 125.000.000
+                    </Typography>
+                  </Stack>
+                )}
+                { (!isCheckingLimit && isEligible !== null) && !isEligible && (
+                  <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2, borderRadius: '3-xl' }}>
+                    {/* Not Eligible */}
+                    <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
+                      <Iconify
+                        icon="bxs:lock-alt"
+                        width={12}
+                        height={13}
+                        sx={{ color: '#424242', marginRight: '6px' }}
+                      />
+                      <Typography variant="caption" component="span">
+                        Not Eligible
+                      </Typography>
+                    </Typography>
+                    <Typography sx={{ typography: 'caption', color: '#637381' }}>
+                      125.000.000 / 125.000.000
+                    </Typography>
+                  </Stack>
+                )}
+                    
+                
+
                 <RHFTextField type="number" name="total_claim" label="Total Claim" />
                 
+                <LoadingButton onClick={handleSubmit(onSubmit)} variant="contained" color="success" style={{color: '#ffffff'}} size="large" fullWidth={true} loading={isCheckingLimit}>
+                    Create Claim
+                  </LoadingButton>
                 { isEligible === true ? (
-                  <LoadingButton onClick={checkLimit} variant="contained" color="success" style={{color: '#ffffff'}} size="large" fullWidth={true} loading={isCheckingLimit}>
+                  <LoadingButton onClick={handleSubmit(onSubmit)} variant="contained" color="success" style={{color: '#ffffff'}} size="large" fullWidth={true} loading={isCheckingLimit}>
                     Create Claim
                   </LoadingButton>
                 ) : (

frontend/dashboard/src/pages/Claims/Index.tsx

@@ -14,6 +14,7 @@ export default function Claims() {
       <HeaderBreadcrumbs
         heading={ pageTitle }
         links={[
+          { name: 'Dashboard', href: '/dashboard' },
           {
             name: 'Claim',
             href: '/claims',

frontend/dashboard/src/pages/Claims/List.tsx

@@ -176,10 +176,10 @@ export default function List() {
             </IconButton>
           </TableCell>
           <TableCell align="left">{row.code}</TableCell>
-          <TableCell align="left">{row.member.full_name}</TableCell>
-          <TableCell align="left">{row.plan.code}</TableCell>
-          <TableCell align="left">{row.benefit.code}</TableCell>
-          <TableCell align="left">({row.diagnosis.code}) {row.diagnosis.name}</TableCell>
+          <TableCell align="left">{row.member?.full_name}</TableCell>
+          <TableCell align="left">{row.plan?.code}</TableCell>
+          <TableCell align="left">{row.benefit?.code}</TableCell>
+          <TableCell align="left">({row.diagnosis?.code}) {row.diagnosis?.name}</TableCell>
           <TableCell align="left">{fCurrency(row.total_claim)}</TableCell>
 
           {/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}

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

@@ -1,5 +1,30 @@
 // @mui
-import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Stack } from '@mui/material';
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Container,
+  FormControl,
+  Grid,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Badge,
+  Stack,
+} from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import PublishIcon from '@mui/icons-material/Publish';
@@ -10,7 +35,7 @@ import useSettings from '../../hooks/useSettings';
 import Page from '../../components/Page';
 import axios from '../../utils/axios';
 import useAuth from '../../hooks/useAuth';
-import { Link , NavLink as RouterLink, useSearchParams } from 'react-router-dom';
+import { Link, NavLink as RouterLink, useSearchParams } from 'react-router-dom';
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { Theme, useTheme } from '@mui/material/styles';
 import { Corporate } from '../../@types/corporates';
@@ -25,10 +50,10 @@ export default function Corporates() {
   const [searchParams, setSearchParams] = useSearchParams();
 
   // Called on every row to map the data to the columns
-  function createData( corporate: Corporate ): Corporate {
+  function createData(corporate: Corporate): Corporate {
     return {
       ...corporate,
-    }
+    };
   }
 
   // Dummy Default Data
@@ -36,19 +61,19 @@ export default function Corporates() {
   const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
     current_page: 1,
     data: [],
-    path: "",
-    first_page_url: "",
+    path: '',
+    first_page_url: '',
     last_page: 1,
-    last_page_url: "",
-    next_page_url: "",
-    prev_page_url: "",
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
     per_page: 10,
     from: 0,
     to: 0,
-    total: 0
+    total: 0,
   });
 
-  const loadDataTableData = async (appliedFilter : any | null = null) => {
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
     setDataTableLoading(true);
     const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
     const response = await axios.get('/corporates', { params: filter });
@@ -56,31 +81,28 @@ export default function Corporates() {
     setDataTableLoading(false);
 
     setDataTableData(response.data);
-  }
+  };
 
-  
   const applyFilter = async (searchFilter: any) => {
-    await loadDataTableData({ "search" : searchFilter });
-    setSearchParams({ "search" : searchFilter });
-  }
+    await loadDataTableData({ search: searchFilter });
+    setSearchParams({ search: searchFilter });
+  };
 
-  const handlePageChange = (event : ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
     loadDataTableData(filter);
     setSearchParams(filter);
-  }
-
+  };
 
   useEffect(() => {
     loadDataTableData();
-  }, [])
-
+  }, []);
 
   const headStyle = {
     fontWeight: 'bold',
   };
 
-  // FILTER SELECT 
+  // FILTER SELECT
   const ITEM_HEIGHT = 48;
   const ITEM_PADDING_TOP = 8;
   const MenuProps = {
@@ -92,13 +114,7 @@ export default function Corporates() {
     },
   };
 
-  const names = [
-    'PLAN001',
-    'PLAN002',
-    'PLAN003',
-    'PLAN004',
-    'PLAN005',
-  ];
+  const names = ['PLAN001', 'PLAN002', 'PLAN003', 'PLAN004', 'PLAN005'];
   function getStyles(name: string, personName: string[], theme: Theme) {
     return {
       fontWeight:
@@ -107,7 +123,7 @@ export default function Corporates() {
           : theme.typography.fontWeightMedium,
     };
   }
-  
+
   const theme = useTheme();
   const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
 
@@ -117,7 +133,7 @@ export default function Corporates() {
     } = event;
     setPlanIdFilter(
       // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
+      typeof value === 'string' ? value.split(',') : value
     );
   };
 
@@ -128,37 +144,45 @@ export default function Corporates() {
     } = event;
     setStatusFilter(
       // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
+      typeof value === 'string' ? value.split(',') : value
     );
   };
   // END FILTER SELECT
-  
+
   // Component Search Input
   function SearchInput(props: any) {
-     // SEARCH
+    // SEARCH
     const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState('');
 
     const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? ''
+      const newSearchText = event.target.value ?? '';
       setSearchText(newSearchText);
-    }
+    };
 
     const handleSubmit = (event: any) => {
       event.preventDefault();
       props.onSearch(searchText); // Trigger to Parent
-    }
+    };
 
-    useEffect(() =>  {
+    useEffect(() => {
       // console.log('Search Input: useEffect')
       setSearchText(searchParams.get('search') ?? '');
-    }, [searchParams])
+    }, [searchParams]);
 
     return (
       <form onSubmit={handleSubmit} style={{ width: '100%' }}>
         <Stack direction={'row'} spacing={2} sx={{ mb: 2 }}>
-          <TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
-          
+          <TextField
+            id="search-input"
+            ref={searchInput}
+            label="Search"
+            variant="outlined"
+            fullWidth
+            onChange={handleSearchChange}
+            value={searchText}
+          />
+
           {/* <Grid item>
             <TextField id="outlined-basic" label="Search" variant="outlined" sx={{ width: 400 }}/>
           </Grid>
@@ -214,17 +238,21 @@ export default function Corporates() {
           </Grid> */}
 
           {/* <Grid item> */}
-            {/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
+          {/* <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
             <Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
               Import
             </Button> */}
-            <Link to={"/corporates/create"}>
-              <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
-            </Link>
+          <Link to={'/corporates/create'}>
+            <Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }}>
+              Create
+            </Button>
+          </Link>
           {/* </Grid> */}
         </Stack>
 
-        <Button type='submit' sx={{ display: 'none' }}>Search</Button>
+        <Button type="submit" sx={{ display: 'none' }}>
+          Search
+        </Button>
       </form>
     );
   }
@@ -236,50 +264,80 @@ export default function Corporates() {
     const [open, setOpen] = React.useState(false);
 
     const handleActivate = (model: any, status: string) => {
-      axios.put(`/corporates/${row.id}/activation`, { 
-        // service_code: service.service_code,
-        active: status == 'active'
-      })
-      .then((res) => {
-        setDataTableData({
-          ...dataTableData,
-          data: dataTableData.data.map((model) => {
-            let updatedModel = model
-            if (row.id == model.id) {
-              updatedModel.active = res.data.corporate.active
-            }
-            return updatedModel
-          })
+      axios
+        .put(`/corporates/${row.id}/activation`, {
+          // service_code: service.service_code,
+          active: status == 'active',
         })
-      })
-      .catch((error) => {
-        // console.log('asdasd', error.response.data.message)
-        enqueueSnackbar(error.response.data.message ?? error.message ?? 'Failed Processing Request', { variant: 'error' });
-      })
-    }
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.map((model) => {
+              let updatedModel = model;
+              if (row.id == model.id) {
+                updatedModel.active = res.data.corporate.active;
+              }
+              return updatedModel;
+            }),
+          });
+        })
+        .catch((error) => {
+          // console.log('asdasd', error.response.data.message)
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
 
     return (
       <React.Fragment>
         <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
           <TableCell>
-            <IconButton
-              aria-label="expand row"
-              size="small"
-              onClick={() => setOpen(!open)}
-            >
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
           </TableCell>
           <TableCell align="left">{row.code}</TableCell>
           <TableCell align="left">{row.name}</TableCell>
           <TableCell align="left">
-            {( row.active == 1 && <Button variant="outlined" color="success" size="small" onClick={() => { handleActivate(row, 'inactive') }}>Active</Button> )}
-            {( row.active != 1 && <Button variant="outlined" color="error" size="small" onClick={() => { handleActivate(row, 'active') }}>Inactive</Button> )}
+            {row.active == 1 && (
+              <Button
+                variant="outlined"
+                color="success"
+                size="small"
+                onClick={() => {
+                  handleActivate(row, 'inactive');
+                }}
+              >
+                Active
+              </Button>
+            )}
+            {row.active != 1 && (
+              <Button
+                variant="outlined"
+                color="error"
+                size="small"
+                onClick={() => {
+                  handleActivate(row, 'active');
+                }}
+              >
+                Inactive
+              </Button>
+            )}
           </TableCell>
           <TableCell align="right">
             <Stack direction="row" justifyContent="flex-end" spacing={1}>
-              <Link to={"/corporates/" + row.id + "/edit"}><Button variant="outlined" color="primary" size="small">Edit</Button></ Link>
-              <Link to={"/corporates/" + row.id + ""}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
+              <Link to={'/corporates/' + row.id + '/edit'}>
+                <Button variant="outlined" color="primary" size="small">
+                  Edit
+                </Button>
+              </Link>
+              <Link to={'/corporates/' + row.id + ''}>
+                <Button variant="outlined" color="primary" size="small">
+                  Config
+                </Button>
+              </Link>
             </Stack>
           </TableCell>
         </TableRow>
@@ -335,7 +393,10 @@ export default function Corporates() {
                         Minimal Deposit
                       </Grid>
                       <Grid item xs={6}>
-                        : {row.current_policy ? fCurrency(row.current_policy?.minimal_deposit_net) : '-'}
+                        :{' '}
+                        {row.current_policy
+                          ? fCurrency(row.current_policy?.minimal_deposit_net)
+                          : '-'}
                       </Grid>
                     </Grid>
                   </Grid>
@@ -365,7 +426,6 @@ export default function Corporates() {
                     </Grid>
                   </Grid>
                 </Grid>
-                
 
                 <Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Sub Corporate</Typography>
                 <Grid container>
@@ -380,7 +440,6 @@ export default function Corporates() {
                     </Grid>
                   </Grid>
                 </Grid>
-
               </Box>
             </Collapse>
           </TableCell>
@@ -403,47 +462,55 @@ export default function Corporates() {
           ]}
         />
 
-        <SearchInput onSearch={applyFilter}/>
-        
+        <SearchInput onSearch={applyFilter} />
+
         <Card>
-        {/* The Main Table */}
-        <TableContainer component={Paper}>
-          <Table aria-label="collapsible table">
-            <TableBody>
-              <TableRow>
-                <TableCell style={headStyle} align="left" width={50} />
-                <TableCell style={headStyle} align="left">Code</TableCell>
-                <TableCell style={headStyle} align="left">Name</TableCell>
-                <TableCell style={headStyle} align="left" width={100}>Status</TableCell>
-                <TableCell style={headStyle} align="right" width={100}>Action</TableCell>
-              </TableRow>
-            </TableBody>
-            {dataTableIsLoading ? 
-              (
+          {/* The Main Table */}
+          <TableContainer component={Paper}>
+            <Table aria-label="collapsible table">
+              <TableBody>
+                <TableRow>
+                  <TableCell style={headStyle} align="left" width={50} />
+                  <TableCell style={headStyle} align="left">
+                    Code
+                  </TableCell>
+                  <TableCell style={headStyle} align="left">
+                    Name
+                  </TableCell>
+                  <TableCell style={headStyle} align="left" width={100}>
+                    Status
+                  </TableCell>
+                  <TableCell style={headStyle} align="right" width={100}>
+                    Action
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+              {dataTableIsLoading ? (
                 <TableBody>
                   <TableRow>
-                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                    <TableCell colSpan={8} align="center">
+                      Loading
+                    </TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : dataTableData.data.length == 0 ? (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={8} align="center">
+                      No Data
+                    </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.code} row={row} />
-                    ))}
-                  </TableBody>
-                )
-            )}
-          </Table>
-        </TableContainer>
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
+                <TableBody>
+                  {dataTableData.data.map((row) => (
+                    <Row key={row.code} row={row} />
+                  ))}
+                </TableBody>
+              )}
+            </Table>
+          </TableContainer>
+          <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
         </Card>
       </Container>
     </Page>