enhance outstanding expense card

app/Helpers/OutstandingHelper.php

@@ -0,0 +1,77 @@
+<?php
+
+namespace App\Helpers;
+
+use Carbon\Carbon;
+use Illuminate\Support\Collection;
+
+class OutstandingHelper
+{
+    /**
+     * Filter a collection of forms to retrieve outstanding items based on role-driven rules.
+     *
+     * @param  Collection  $forms
+     * @param  string      $role
+     * @param  Carbon      $periodStart
+     * @param  Carbon      $periodEnd
+     * @param  array       $context
+     * @return Collection
+     */
+    public static function filterForms(Collection $forms, string $role, Carbon $periodStart, Carbon $periodEnd, array $context = []): Collection
+    {
+        $regionId = $context['region_id'] ?? null;
+        $cabangId = $context['cabang_id'] ?? null;
+
+        return $forms->filter(function ($form) use ($role, $periodStart, $periodEnd, $regionId, $cabangId) {
+            $tanggal = Carbon::parse($form->tanggal);
+            if ($tanggal->lt($periodStart) || $tanggal->gt($periodEnd)) {
+                return false;
+            }
+
+            $status = $form->status;
+            switch ($role) {
+                case 'Admin Region':
+                    if ($status !== 'On Progress') {
+                        return false;
+                    }
+                    if ($regionId && optional($form->user)->region_id !== $regionId) {
+                        return false;
+                    }
+                    return true;
+
+                case 'Area Manager Cabang':
+                    if ($status !== 'Approved 1') {
+                        return false;
+                    }
+                    if ($cabangId && optional($form->rayon)->cabang_id !== $cabangId) {
+                        return false;
+                    }
+                    return true;
+
+                case 'Marketing Information System':
+                    return $status === 'Approved 1';
+
+                case 'Marketing Operational Manager Region':
+                    if ($status !== 'Approved 2') {
+                        return false;
+                    }
+                    if (!is_null($form->final_approved_at) || !is_null($form->final_approved_by)) {
+                        return false;
+                    }
+                    if ($regionId && optional($form->user)->region_id !== $regionId) {
+                        return false;
+                    }
+                    return true;
+
+                case 'Head of Sales Marketing':
+                    if ($status !== 'Approved 2') {
+                        return false;
+                    }
+                    return is_null($form->final_approved_at) || is_null($form->final_approved_by);
+
+                default:
+                    return is_null($form->final_approved_at) || is_null($form->final_approved_by);
+            }
+        });
+    }
+}

app/Http/Controllers/Forms/FormEntertainmentPresentationController.php

@@ -26,6 +26,7 @@ use App\Models\Admin;
 use App\Rules\FileType;
 use App\Helpers\BudgetHelper;
 use App\Helpers\NotificationHelper;
+use App\Helpers\OutstandingHelper;
 use Illuminate\Support\Facades\Log;
 use App\Services\BrevoService;
 use Carbon\Carbon;
@@ -39,6 +40,9 @@ class FormEntertainmentPresentationController extends Controller
     $role = auth()->user()->getRoleNames()[0];
     $startDay = (int) env('STARTING_DATE', 11);
     $closingDay = (int) env('CLOSING_DATE', 10);
+    $userRegionData = auth()->user()->getMyCabangAndRegionId();
+    $regionContextId = $userRegionData['region'] !== '-' ? $userRegionData['region'] : null;
+    $cabangContextId = $userRegionData['cabang'] !== '-' ? $userRegionData['cabang'] : null;
 
     $now = Carbon::now();
 
@@ -64,25 +68,21 @@ class FormEntertainmentPresentationController extends Controller
     $periodeYear = (int) $currentPeriodStartDate->format('Y');
 
     if ($role == 'Admin Region' || $role == 'Marketing Operational Manager Region') {
-      $region_id = auth()->user()->getMyCabangAndRegionId()['region'];
+      if ($regionContextId) {
-
+        $users = UserHasCabang::whereHas('cabang', function ($query) use ($regionContextId) {
-      if ($region_id) {
+          $query->where('region_id', $regionContextId);
-        $users = UserHasCabang::whereHas('cabang', function ($query) use ($region_id) {
-          $query->where('region_id', $region_id);
         })->get();
 
         $userIds = $users->pluck('user_id')->toArray();
         $forms = $forms->whereIn('user_id', $userIds);
       }
     } elseif ($role == 'Area Manager Cabang') {
-      $cabang_id = auth()->user()->getMyCabangAndRegionId()['cabang'];
+      if ($cabangContextId) {
-
+        $users = UserHasCabang::where('cabang_id', $cabangContextId)->get();
-      if ($cabang_id) {
-        $users = UserHasCabang::where('cabang_id', $cabang_id)->get();
         $userIds = $users->pluck('user_id')->toArray();
         $forms = $forms->whereIn('user_id', $userIds);
 
-        $availableBudget = BudgetHelper::getAvailableBudget($cabang_id, $periodeMonth, $periodeYear);
+        $availableBudget = BudgetHelper::getAvailableBudget($cabangContextId, $periodeMonth, $periodeYear);
       }
     } elseif ($role == 'Medical Representatif') {
       $forms = $forms->where('user_id', auth()->user()->id);
@@ -93,9 +93,16 @@ class FormEntertainmentPresentationController extends Controller
       }
     }
 
-    $outstandingForms = $forms->filter(function ($form) {
+    $outstandingForms = OutstandingHelper::filterForms(
-      return is_null($form->final_approved_at) || is_null($form->final_approved_by);
+      $forms,
-    });
+      $role,
+      $currentPeriodStartDate,
+      $currentPeriodClosingDate,
+      [
+        'region_id' => $regionContextId,
+        'cabang_id' => $cabangContextId,
+      ]
+    );
 
     session()->put('redirect_url', route('forms.entertainment'));
     return view('backend.pages.forms.entertainment.index', [
@@ -103,6 +110,7 @@ class FormEntertainmentPresentationController extends Controller
       'availableBudget' => $availableBudget,
       'outstandingCount' => $outstandingForms->count(),
       'outstandingTotal' => $outstandingForms->sum('total'),
+      'outstandingIds' => $outstandingForms->pluck('id')->toArray(),
     ]);
   }
 

app/Http/Controllers/Forms/FormMeetingSeminarController.php

@@ -26,6 +26,7 @@ use App\Rules\FileType;
 use App\Models\Admin;
 use App\Helpers\BudgetHelper;
 use App\Helpers\NotificationHelper;
+use App\Helpers\OutstandingHelper;
 use Illuminate\Support\Facades\Log;
 use App\Services\BrevoService;
 use Carbon\Carbon;
@@ -39,6 +40,9 @@ class FormMeetingSeminarController extends Controller
     $role = auth()->user()->getRoleNames()[0];
     $startDay = (int) env('STARTING_DATE', 11);
     $closingDay = (int) env('CLOSING_DATE', 10);
+    $userRegionData = auth()->user()->getMyCabangAndRegionId();
+    $regionContextId = $userRegionData['region'] !== '-' ? $userRegionData['region'] : null;
+    $cabangContextId = $userRegionData['cabang'] !== '-' ? $userRegionData['cabang'] : null;
 
     // Referensi waktu sekarang
     $now = Carbon::now();
@@ -65,25 +69,21 @@ class FormMeetingSeminarController extends Controller
     $periodeYear = (int) $currentPeriodStartDate->format('Y');
 
     if ($role == 'Admin Region' || $role == 'Marketing Operational Manager Region') {
-      $region_id = auth()->user()->getMyCabangAndRegionId()['region'];
+      if ($regionContextId) {
-
+        $users = UserHasCabang::whereHas('cabang', function ($query) use ($regionContextId) {
-      if ($region_id) {
+          $query->where('region_id', $regionContextId);
-        $users = UserHasCabang::whereHas('cabang', function ($query) use ($region_id) {
-          $query->where('region_id', $region_id);
         })->get();
 
         $userIds = $users->pluck('user_id')->toArray();
         $forms = $forms->whereIn('user_id', $userIds);
       }
     } elseif ($role == 'Area Manager Cabang') {
-      $cabang_id = auth()->user()->getMyCabangAndRegionId()['cabang'];
+      if ($cabangContextId) {
-
+        $users = UserHasCabang::where('cabang_id', $cabangContextId)->get();
-      if ($cabang_id) {
-        $users = UserHasCabang::where('cabang_id', $cabang_id)->get();
         $userIds = $users->pluck('user_id')->toArray();
         $forms = $forms->whereIn('user_id', $userIds);
 
-        $availableBudget = BudgetHelper::getAvailableBudget($cabang_id, $periodeMonth, $periodeYear);
+        $availableBudget = BudgetHelper::getAvailableBudget($cabangContextId, $periodeMonth, $periodeYear);
       }
     } elseif ($role == 'Medical Representatif') {
       $forms = $forms->where('user_id', auth()->user()->id);
@@ -94,9 +94,16 @@ class FormMeetingSeminarController extends Controller
       }
     }
 
-    $outstandingForms = $forms->filter(function ($form) {
+    $outstandingForms = OutstandingHelper::filterForms(
-      return is_null($form->final_approved_at) || is_null($form->final_approved_by);
+      $forms,
-    });
+      $role,
+      $currentPeriodStartDate,
+      $currentPeriodClosingDate,
+      [
+        'region_id' => $regionContextId,
+        'cabang_id' => $cabangContextId,
+      ]
+    );
 
     session()->put('redirect_url', route('forms.meeting'));
 
@@ -105,6 +112,7 @@ class FormMeetingSeminarController extends Controller
       'availableBudget' => $availableBudget,
       'outstandingCount' => $outstandingForms->count(),
       'outstandingTotal' => $outstandingForms->sum('total'),
+      'outstandingIds' => $outstandingForms->pluck('id')->toArray(),
     ]);
   }
 

app/Http/Controllers/Forms/FormOtherController.php

@@ -23,6 +23,7 @@ use App\Models\Admin;
 use App\Helpers\BudgetHelper;
 use App\Helpers\NotificationHelper;
 use App\Models\Cabang;
+use App\Helpers\OutstandingHelper;
 use Illuminate\Support\Facades\Log;
 use App\Services\BrevoService;
 use Carbon\Carbon;
@@ -36,6 +37,9 @@ class FormOtherController extends Controller
     $role = auth()->user()->getRoleNames()[0];
     $startDay = (int) env('STARTING_DATE', 11);
     $closingDay = (int) env('CLOSING_DATE', 10);
+    $userRegionData = auth()->user()->getMyCabangAndRegionId();
+    $regionContextId = $userRegionData['region'] !== '-' ? $userRegionData['region'] : null;
+    $cabangContextId = $userRegionData['cabang'] !== '-' ? $userRegionData['cabang'] : null;
 
     // Referensi waktu sekarang
     $now = Carbon::now();
@@ -62,25 +66,21 @@ class FormOtherController extends Controller
     $periodeYear = (int) $currentPeriodStartDate->format('Y');
 
     if ($role == 'Admin Region' || $role == 'Marketing Operational Manager Region') {
-      $region_id = auth()->user()->getMyCabangAndRegionId()['region'];
+      if ($regionContextId) {
-
+        $users = UserHasCabang::whereHas('cabang', function ($query) use ($regionContextId) {
-      if ($region_id) {
+          $query->where('region_id', $regionContextId);
-        $users = UserHasCabang::whereHas('cabang', function ($query) use ($region_id) {
-          $query->where('region_id', $region_id);
         })->get();
 
         $userIds = $users->pluck('user_id')->toArray();
         $forms = $forms->whereIn('user_id', $userIds);
       }
     } elseif ($role == 'Area Manager Cabang') {
-      $cabang_id = auth()->user()->getMyCabangAndRegionId()['cabang'];
+      if ($cabangContextId) {
-
+        $users = UserHasCabang::where('cabang_id', $cabangContextId)->get();
-      if ($cabang_id) {
-        $users = UserHasCabang::where('cabang_id', $cabang_id)->get();
         $userIds = $users->pluck('user_id')->toArray();
         $forms = $forms->whereIn('user_id', $userIds);
 
-        $availableBudget = BudgetHelper::getAvailableBudget($cabang_id, $periodeMonth, $periodeYear);
+        $availableBudget = BudgetHelper::getAvailableBudget($cabangContextId, $periodeMonth, $periodeYear);
       }
     } elseif ($role == 'Medical Representatif') {
       $forms = $forms->where('user_id', auth()->user()->id);
@@ -91,9 +91,16 @@ class FormOtherController extends Controller
       }
     }
 
-    $outstandingForms = $forms->filter(function ($form) {
+    $outstandingForms = OutstandingHelper::filterForms(
-      return is_null($form->final_approved_at) || is_null($form->final_approved_by);
+      $forms,
-    });
+      $role,
+      $currentPeriodStartDate,
+      $currentPeriodClosingDate,
+      [
+        'region_id' => $regionContextId,
+        'cabang_id' => $cabangContextId,
+      ]
+    );
 
     session()->put('redirect_url', route('forms.other'));
 
@@ -102,6 +109,7 @@ class FormOtherController extends Controller
       'availableBudget' => $availableBudget,
       'outstandingCount' => $outstandingForms->count(),
       'outstandingTotal' => $outstandingForms->sum('total'),
+      'outstandingIds' => $outstandingForms->pluck('id')->toArray(),
     ]);
   }
 

app/Http/Controllers/Forms/FormUpCountryController.php

@@ -26,6 +26,7 @@ use App\Rules\FileType;
 use App\Models\Admin;
 use App\Helpers\BudgetHelper;
 use App\Helpers\NotificationHelper;
+use App\Helpers\OutstandingHelper;
 use Illuminate\Support\Facades\Log;
 use App\Services\BrevoService;
 use Carbon\Carbon;
@@ -62,29 +63,28 @@ class FormUpCountryController extends Controller
         ->get();
 
     $availableBudget = null;
+    $userRegionData = auth()->user()->getMyCabangAndRegionId();
+    $regionContextId = $userRegionData['region'] !== '-' ? $userRegionData['region'] : null;
+    $cabangContextId = $userRegionData['cabang'] !== '-' ? $userRegionData['cabang'] : null;
     $periodeMonth = strtolower($currentPeriodStartDate->format('F'));
     $periodeYear = (int) $currentPeriodStartDate->format('Y');
 
     if ($role == 'Admin Region' || $role == 'Marketing Operational Manager Region') {
-        $region_id = auth()->user()->getMyCabangAndRegionId()['region'];
+        if ($regionContextId) {
-
+            $users = UserHasCabang::whereHas('cabang', function ($query) use ($regionContextId) {
-        if ($region_id) {
+                $query->where('region_id', $regionContextId);
-            $users = UserHasCabang::whereHas('cabang', function ($query) use ($region_id) {
-                $query->where('region_id', $region_id);
             })->get();
 
             $userIds = $users->pluck('user_id')->toArray();
             $forms = $forms->whereIn('user_id', $userIds);
         }
     } else if ($role == 'Area Manager Cabang') {
-        $cabang_id = auth()->user()->getMyCabangAndRegionId()['cabang'];
+        if ($cabangContextId) {
-
+            $users = UserHasCabang::where('cabang_id', $cabangContextId)->get();
-        if ($cabang_id) {
-            $users = UserHasCabang::where('cabang_id', $cabang_id)->get();
             $userIds = $users->pluck('user_id')->toArray();
             $forms = $forms->whereIn('user_id', $userIds);
 
-            $availableBudget = BudgetHelper::getAvailableBudget($cabang_id, $periodeMonth, $periodeYear);
+            $availableBudget = BudgetHelper::getAvailableBudget($cabangContextId, $periodeMonth, $periodeYear);
         }
     } else if ($role == 'Medical Representatif') {
         $forms = $forms->where('user_id', auth()->user()->id);
@@ -95,9 +95,16 @@ class FormUpCountryController extends Controller
         $forms = $forms;
     }
 
-    $outstandingForms = $forms->filter(function ($form) {
+    $outstandingForms = OutstandingHelper::filterForms(
-        return is_null($form->final_approved_at) || is_null($form->final_approved_by);
+        $forms,
-    });
+        $role,
+        $currentPeriodStartDate,
+        $currentPeriodClosingDate,
+        [
+            'region_id' => $regionContextId,
+            'cabang_id' => $cabangContextId,
+        ]
+    );
 
     session()->put('redirect_url', route('forms.up-country'));
     return view('backend.pages.forms.upcountry.index', [
@@ -105,6 +112,7 @@ class FormUpCountryController extends Controller
         'availableBudget' => $availableBudget,
         'outstandingCount' => $outstandingForms->count(),
         'outstandingTotal' => $outstandingForms->sum('total'),
+        'outstandingIds' => $outstandingForms->pluck('id')->toArray(),
     ]);
   }
 
@@ -382,14 +390,20 @@ class FormUpCountryController extends Controller
     $regionId = Cabang::where('id', 1)->value('region_id');
     $rayonData = Rayon::where('cabang_id', $cabang->id)->get();
 
-    if ($role = "Admin Region" || "Marketing Information System" || "Superadmin") {
+    if ($role == "Admin Region") {
       $rayonData = DB::table('rayon')
                 ->join('cabang', 'rayon.cabang_id', '=', 'cabang.id')
                 ->join('region', 'cabang.region_id', '=', 'region.id')
                 ->where('region.id', $regionId)
                 ->select('rayon.*')
                 ->get();
-    
+    } elseif ($role == "Marketing Information System" || $role == "Superadmin") {
+      $rayonData = DB::table('rayon')
+                ->join('cabang', 'rayon.cabang_id', '=', 'cabang.id')
+                ->join('region', 'cabang.region_id', '=', 'region.id')
+                ->whereNotNull('region.id')
+                ->select('rayon.*')
+                ->get();
     }
     
     $form = FormUpCountry::with('rayon')->findOrfail($id);

app/Http/Controllers/Forms/FormVehicleController.php

@@ -26,6 +26,7 @@ use App\Rules\FileType;
 use App\Models\Admin;
 use App\Helpers\BudgetHelper;
 use App\Helpers\NotificationHelper;
+use App\Helpers\OutstandingHelper;
 use Illuminate\Support\Facades\Log;
 use App\Services\BrevoService;
 use Carbon\Carbon;
@@ -61,29 +62,28 @@ class FormVehicleController extends Controller
       ->get();
 
     $availableBudget = null;
+    $userRegionData = auth()->user()->getMyCabangAndRegionId();
+    $regionContextId = $userRegionData['region'] !== '-' ? $userRegionData['region'] : null;
+    $cabangContextId = $userRegionData['cabang'] !== '-' ? $userRegionData['cabang'] : null;
     $periodeMonth = strtolower($currentPeriodStartDate->format('F'));
     $periodeYear = (int) $currentPeriodStartDate->format('Y');
 
     if ($role === 'Admin Region' || $role === 'Marketing Operational Manager Region') {
-      $region_id = auth()->user()->getMyCabangAndRegionId()['region'];
+      if ($regionContextId) {
-
+        $users = UserHasCabang::whereHas('cabang', function ($query) use ($regionContextId) {
-      if ($region_id) {
+          $query->where('region_id', $regionContextId);
-        $users = UserHasCabang::whereHas('cabang', function ($query) use ($region_id) {
-          $query->where('region_id', $region_id);
         })->get();
 
         $userIds = $users->pluck('user_id')->toArray();
         $forms = $forms->whereIn('user_id', $userIds);
       }
     } elseif ($role === 'Area Manager Cabang') {
-      $cabang_id = auth()->user()->getMyCabangAndRegionId()['cabang'];
+      if ($cabangContextId) {
-
+        $users = UserHasCabang::where('cabang_id', $cabangContextId)->get();
-      if ($cabang_id) {
-        $users = UserHasCabang::where('cabang_id', $cabang_id)->get();
         $userIds = $users->pluck('user_id')->toArray();
         $forms = $forms->whereIn('user_id', $userIds);
 
-        $availableBudget = BudgetHelper::getAvailableBudget($cabang_id, $periodeMonth, $periodeYear);
+        $availableBudget = BudgetHelper::getAvailableBudget($cabangContextId, $periodeMonth, $periodeYear);
       }
     } elseif ($role === 'Medical Representatif') {
       $forms = $forms->where('user_id', auth()->user()->id);
@@ -94,9 +94,16 @@ class FormVehicleController extends Controller
       }
     }
 
-    $outstandingForms = $forms->filter(function ($form) {
+    $outstandingForms = OutstandingHelper::filterForms(
-        return is_null($form->final_approved_at) || is_null($form->final_approved_by);
+      $forms,
-    });
+      $role,
+      $currentPeriodStartDate,
+      $currentPeriodClosingDate,
+      [
+        'region_id' => $regionContextId,
+        'cabang_id' => $cabangContextId,
+      ]
+    );
 
     session()->put('redirect_url', route('forms.vehicle'));
 
@@ -105,6 +112,7 @@ class FormVehicleController extends Controller
       'availableBudget' => $availableBudget,
       'outstandingCount' => $outstandingForms->count(),
       'outstandingTotal' => $outstandingForms->sum('total'),
+      'outstandingIds' => $outstandingForms->pluck('id')->toArray(),
     ]);
   }
 

resources/views/backend/pages/forms/entertainment/index.blade.php

@@ -5,6 +5,17 @@
 @endsection
 
 @section('admin-content')
+	<style>
+		#outstandingCard {
+			cursor: pointer;
+		}
+		#outstandingCard.active {
+			box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
+		}
+	</style>
+	@php
+		$outstandingIdCollection = collect($outstandingIds ?? []);
+	@endphp
     <section class="content-header">
         <div class="container-fluid">
             <div class="row mb-2">
@@ -140,7 +151,7 @@
 										$role = auth()->user()->getRoleNames()[0];
 									@endphp
 									@foreach ($forms as $item)
-										<tr>
+										<tr data-outstanding="{{ $outstandingIdCollection->contains($item->id) ? 1 : 0 }}">
 											<td>{{ $loop->iteration }}</td>
 											<td>{{ $item->expense_number }}</td>
 											<td>{{ $item->user->name }}</td>
@@ -256,7 +267,17 @@
 													</a>
 												@endif
 
-												@if (($role != 'Medical Representatif' && auth()->user()->can('forms.entertainment.edit')) || ($role == 'Medical Representatif' && $item->status == 'On Progress'))
+												@php
+													$canEdit = false;
+													if (auth()->user()->can('forms.entertainment.edit')) {
+														if (in_array($role, ['Medical Representatif', 'Area Manager Cabang'])) {
+															$canEdit = $item->status == 'On Progress';
+														} else {
+															$canEdit = true;
+														}
+													}
+												@endphp
+												@if ($canEdit)
 													<a href="{{ route('forms.entertainment.edit', $item->id) }}" class="btn btn-warning btn-sm">
 														<i class="fas fa-edit text-white"></i>
 													</a>
@@ -458,7 +479,18 @@
 			$('.custom-control-input').prop('checked', false);
 
 			if ($('#dataTable').length) {
-				$('#dataTable').DataTable({
+				let outstandingFilterActive = false;
+				const outstandingFilter = function(settings, data, dataIndex) {
+					if (!outstandingFilterActive) {
+						return true;
+					}
+					const row = settings.aoData[dataIndex].nTr;
+					return $(row).data('outstanding') === 1 || $(row).data('outstanding') === '1';
+				};
+
+				$.fn.dataTable.ext.search.push(outstandingFilter);
+
+				const table = $('#dataTable').DataTable({
 					responsive: false,
 					dom: 'Blfrtip',
 					lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
@@ -487,6 +519,20 @@
 						'colvis'
 					]
 				});
+
+				const $outstandingCard = $('#outstandingCard');
+				const updateCardHint = (isActive) => {
+					const text = isActive ? 'Klik untuk menampilkan semua data' : 'Klik untuk menampilkan detail';
+					$outstandingCard.find('.filter-hint small').text(text);
+				};
+				updateCardHint(outstandingFilterActive);
+
+				$outstandingCard.on('click', function () {
+					outstandingFilterActive = !outstandingFilterActive;
+					$outstandingCard.toggleClass('active', outstandingFilterActive);
+					table.draw();
+					updateCardHint(outstandingFilterActive);
+				});
 			}
 
 			// Handle Reject Button Click

resources/views/backend/pages/forms/meeting/index.blade.php

@@ -5,6 +5,17 @@
 @endsection
 
 @section('admin-content')
+    <style>
+        #outstandingCard {
+            cursor: pointer;
+        }
+        #outstandingCard.active {
+            box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
+        }
+    </style>
+    @php
+        $outstandingIdCollection = collect($outstandingIds ?? []);
+    @endphp
     <section class="content-header">
         <div class="container-fluid">
             <div class="row mb-2">
@@ -61,11 +72,12 @@
 				</div>
 				<!-- Outstanding Expense -->
 				<div class="col d-flex">
-					<div class="small-box bg-danger flex-fill">
+					<div class="small-box bg-danger flex-fill" id="outstandingCard">
 						<div class="inner">
 							<h3>{{ $outstandingCount }}</h3>
 							<p>Outstanding Expenses</p>
 							<p class="mb-0"><small>Total Rp {{ number_format($outstandingTotal, 0, ',', '.') }}</small></p>
+							<p class="mb-0 filter-hint"><small>Klik untuk menampilkan detail</small></p>
 						</div>
 						<div class="icon">
 							<i class="fas fa-exclamation-triangle"></i>
@@ -139,7 +151,7 @@
 										$role = auth()->user()->getRoleNames()[0];
 									@endphp
 									@foreach ($forms as $item)
-										<tr>
+										<tr data-outstanding="{{ $outstandingIdCollection->contains($item->id) ? 1 : 0 }}">
 											<td>{{ $loop->iteration }}</td>
 											<td>{{ $item->expense_number }}</td>
 											<td>{{ $item->user->name }}</td>
@@ -246,7 +258,17 @@
 													</a>
 												@endif
 
-												@if (($role != 'Medical Representatif' && auth()->user()->can('forms.meeting.edit')) || ($role == 'Medical Representatif' && $item->status == 'On Progress'))
+												@php
+													$canEdit = false;
+													if (auth()->user()->can('forms.meeting.edit')) {
+														if (in_array($role, ['Medical Representatif', 'Area Manager Cabang'])) {
+															$canEdit = $item->status == 'On Progress';
+														} else {
+															$canEdit = true;
+														}
+													}
+												@endphp
+												@if ($canEdit)
 													<a href="{{ route('forms.meeting.edit', $item->id) }}" class="btn btn-warning btn-sm">
 														<i class="fas fa-edit text-white"></i>
 													</a>
@@ -470,7 +492,18 @@
 			$('.custom-control-input').prop('checked', false);
 
 			if ($('#dataTable').length) {
-				$('#dataTable').DataTable({
+				let outstandingFilterActive = false;
+				const outstandingFilter = function(settings, data, dataIndex) {
+					if (!outstandingFilterActive) {
+						return true;
+					}
+					const row = settings.aoData[dataIndex].nTr;
+					return $(row).data('outstanding') === 1 || $(row).data('outstanding') === '1';
+				};
+
+				$.fn.dataTable.ext.search.push(outstandingFilter);
+
+				const table = $('#dataTable').DataTable({
 					responsive: false,
 					dom: 'Blfrtip',
 					lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
@@ -499,6 +532,20 @@
 						'colvis'
 					]
 				});
+
+				const $outstandingCard = $('#outstandingCard');
+				const updateCardHint = (isActive) => {
+					const text = isActive ? 'Klik untuk menampilkan semua data' : 'Klik untuk menampilkan detail';
+					$outstandingCard.find('.filter-hint small').text(text);
+				};
+				updateCardHint(outstandingFilterActive);
+
+				$outstandingCard.on('click', function () {
+					outstandingFilterActive = !outstandingFilterActive;
+					$outstandingCard.toggleClass('active', outstandingFilterActive);
+					table.draw();
+					updateCardHint(outstandingFilterActive);
+				});
 			}
 
 			// Handle Reject Button Click

resources/views/backend/pages/forms/other/index.blade.php

@@ -5,6 +5,17 @@
 @endsection
 
 @section('admin-content')
+    <style>
+        #outstandingCard {
+            cursor: pointer;
+        }
+        #outstandingCard.active {
+            box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
+        }
+    </style>
+    @php
+        $outstandingIdCollection = collect($outstandingIds ?? []);
+    @endphp
     <section class="content-header">
         <div class="container-fluid">
             <div class="row mb-2">
@@ -61,11 +72,12 @@
 				</div>
 				<!-- Outstanding Expense -->
 				<div class="col d-flex">
-					<div class="small-box bg-danger flex-fill">
+					<div class="small-box bg-danger flex-fill" id="outstandingCard">
 						<div class="inner">
 							<h3>{{ $outstandingCount }}</h3>
 							<p>Outstanding Expenses</p>
 							<p class="mb-0"><small>Total Rp {{ number_format($outstandingTotal, 0, ',', '.') }}</small></p>
+							<p class="mb-0 filter-hint"><small>Klik untuk menampilkan detail</small></p>
 						</div>
 						<div class="icon">
 							<i class="fas fa-exclamation-triangle"></i>
@@ -139,7 +151,7 @@
 										$role = auth()->user()->getRoleNames()[0];
 									@endphp
 									@foreach ($forms as $item)
-										<tr>
+										<tr data-outstanding="{{ $outstandingIdCollection->contains($item->id) ? 1 : 0 }}">
 											<td>{{ $loop->iteration }}</td>
 											<td>{{ $item->expense_number }}</td>
 											<td>{{ $item->user->name }}</td>
@@ -254,7 +266,17 @@
 													</a>
 												@endif
 
-												@if (($role != 'Medical Representatif' && auth()->user()->can('forms.other.edit')) || ($role == 'Medical Representatif' && $item->status == 'On Progress'))
+												@php
+													$canEdit = false;
+													if (auth()->user()->can('forms.other.edit')) {
+														if (in_array($role, ['Medical Representatif', 'Area Manager Cabang'])) {
+															$canEdit = $item->status == 'On Progress';
+														} else {
+															$canEdit = true;
+														}
+													}
+												@endphp
+												@if ($canEdit)
 													<a href="{{ route('forms.other.edit', $item->id) }}" class="btn btn-warning btn-sm">
 														<i class="fas fa-edit text-white"></i>
 													</a>
@@ -444,7 +466,18 @@
 			$('.custom-control-input').prop('checked', false);
 
 			if ($('#dataTable').length) {
-				$('#dataTable').DataTable({
+				let outstandingFilterActive = false;
+				const outstandingFilter = function(settings, data, dataIndex) {
+					if (!outstandingFilterActive) {
+						return true;
+					}
+					const row = settings.aoData[dataIndex].nTr;
+					return $(row).data('outstanding') === 1 || $(row).data('outstanding') === '1';
+				};
+
+				$.fn.dataTable.ext.search.push(outstandingFilter);
+
+				const table = $('#dataTable').DataTable({
 					responsive: false,
 					dom: 'Blfrtip',
 					lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
@@ -473,6 +506,20 @@
 						'colvis'
 					]
 				});
+
+				const $outstandingCard = $('#outstandingCard');
+				const updateCardHint = (isActive) => {
+					const text = isActive ? 'Klik untuk menampilkan semua data' : 'Klik untuk menampilkan detail';
+					$outstandingCard.find('.filter-hint small').text(text);
+				};
+				updateCardHint(outstandingFilterActive);
+
+				$outstandingCard.on('click', function () {
+					outstandingFilterActive = !outstandingFilterActive;
+					$outstandingCard.toggleClass('active', outstandingFilterActive);
+					table.draw();
+					updateCardHint(outstandingFilterActive);
+				});
 			}
 
 			// Handle Reject Button Click

resources/views/backend/pages/forms/upcountry/index.blade.php

@@ -5,6 +5,17 @@
 @endsection
 
 @section('admin-content')
+	<style>
+		#outstandingCard {
+			cursor: pointer;
+		}
+		#outstandingCard.active {
+			box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
+		}
+	</style>
+	@php
+		$outstandingIdCollection = collect($outstandingIds ?? []);
+	@endphp
     <section class="content-header">
         <div class="container-fluid">
             <div class="row mb-2">
@@ -61,11 +72,12 @@
 				</div>
 				<!-- Outstanding Expense -->
 				<div class="col d-flex">
-					<div class="small-box bg-danger flex-fill">
+					<div class="small-box bg-danger flex-fill" id="outstandingCard">
 						<div class="inner">
 							<h3>{{ $outstandingCount }}</h3>
 							<p>Outstanding Expenses</p>
 							<p class="mb-0"><small>Total Rp {{ number_format($outstandingTotal, 0, ',', '.') }}</small></p>
+							<p class="mb-0 filter-hint"><small>Klik untuk menampilkan detail</small></p>
 						</div>
 						<div class="icon">
 							<i class="fas fa-exclamation-triangle"></i>
@@ -139,7 +151,7 @@
 										$role = auth()->user()->getRoleNames()[0];
 									@endphp
 									@foreach ($forms as $item)
-										<tr>
+										<tr data-outstanding="{{ $outstandingIdCollection->contains($item->id) ? 1 : 0 }}">
 											<td>{{ $loop->iteration }}</td>
 											<td>{{ $item->expense_number }}</td>
 											<td>{{ $item->user->name }}</td>
@@ -252,7 +264,17 @@
 													</a>
 												@endif
 
-												@if (($role != 'Medical Representatif' && auth()->user()->can('forms.country.edit')) || ($role == 'Medical Representatif' && $item->status == 'On Progress'))
+												@php
+													$canEdit = false;
+													if (auth()->user()->can('forms.country.edit')) {
+														if (in_array($role, ['Medical Representatif', 'Area Manager Cabang'])) {
+															$canEdit = $item->status == 'On Progress';
+														} else {
+															$canEdit = true;
+														}
+													}
+												@endphp
+												@if ($canEdit)
 													<a href="{{ route('forms.up-country.edit', $item->id) }}" class="btn btn-warning btn-sm">
 														<i class="fas fa-edit text-white"></i>
 													</a>
@@ -518,7 +540,18 @@
 			$('.custom-control-input').prop('checked', false);
 			
 			if ($('#dataTable').length) {
-				$('#dataTable').DataTable({
+				let outstandingFilterActive = false;
+				const outstandingFilter = function(settings, data, dataIndex) {
+					if (!outstandingFilterActive) {
+						return true;
+					}
+					const row = settings.aoData[dataIndex].nTr;
+					return $(row).data('outstanding') === 1 || $(row).data('outstanding') === '1';
+				};
+
+				$.fn.dataTable.ext.search.push(outstandingFilter);
+
+				const table = $('#dataTable').DataTable({
 					 responsive: true,
 
 					dom: 'Blfrtip',
@@ -551,6 +584,19 @@
 
 				});
 
+				const $outstandingCard = $('#outstandingCard');
+				const updateCardHint = (isActive) => {
+					const text = isActive ? 'Klik untuk menampilkan semua data' : 'Klik untuk menampilkan detail';
+					$outstandingCard.find('.filter-hint small').text(text);
+				};
+				updateCardHint(outstandingFilterActive);
+
+				$outstandingCard.on('click', function () {
+					outstandingFilterActive = !outstandingFilterActive;
+					$outstandingCard.toggleClass('active', outstandingFilterActive);
+					table.draw();
+					updateCardHint(outstandingFilterActive);
+				});
 			}  
 
 			// Handle Reject Button Click

resources/views/backend/pages/forms/vehicle/index.blade.php

@@ -5,6 +5,17 @@
 @endsection
 
 @section('admin-content')
+	<style>
+		#outstandingCard {
+			cursor: pointer;
+		}
+		#outstandingCard.active {
+			box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
+		}
+	</style>
+	@php
+		$outstandingIdCollection = collect($outstandingIds ?? []);
+	@endphp
     <section class="content-header">
         <div class="container-fluid">
             <div class="row mb-2">
@@ -61,11 +72,12 @@
 				</div>
 				<!-- Outstanding Expense -->
 				<div class="col d-flex">
-					<div class="small-box bg-danger flex-fill">
+					<div class="small-box bg-danger flex-fill" id="outstandingCard">
 						<div class="inner">
 							<h3>{{ $outstandingCount }}</h3>
 							<p>Outstanding Expenses</p>
 							<p class="mb-0"><small>Total Rp {{ number_format($outstandingTotal, 0, ',', '.') }}</small></p>
+							<p class="mb-0 filter-hint"><small>Klik untuk menampilkan detail</small></p>
 						</div>
 						<div class="icon">
 							<i class="fas fa-exclamation-triangle"></i>
@@ -143,7 +155,7 @@
 										$role = auth()->user()->getRoleNames()[0];
 									@endphp
 									@foreach ($forms as $item)
-										<tr>
+										<tr data-outstanding="{{ $outstandingIdCollection->contains($item->id) ? 1 : 0 }}">
 											<td>{{ $loop->iteration }}</td>
 											<td>{{ $item->expense_number }}</td>
 											<td>{{ $item->user->name }}</td>
@@ -271,7 +283,17 @@
 													</a>
 												@endif
 
-												@if (($role != 'Medical Representatif' && auth()->user()->can('forms.vehicle.edit')) || ($role == 'Medical Representatif' && $item->status == 'On Progress'))
+												@php
+													$canEdit = false;
+													if (auth()->user()->can('forms.vehicle.edit')) {
+														if (in_array($role, ['Medical Representatif', 'Area Manager Cabang'])) {
+															$canEdit = $item->status == 'On Progress';
+														} else {
+															$canEdit = true;
+														}
+													}
+												@endphp
+												@if ($canEdit)
 													<a href="{{ route('forms.vehicle.edit', $item->id) }}" class="btn btn-warning btn-sm">
 														<i class="fas fa-edit text-white"></i>
 													</a>
@@ -479,7 +501,18 @@
 			$('.custom-control-input').prop('checked', false);
 
 			if ($('#dataTable').length) {
-				$('#dataTable').DataTable({
+				let outstandingFilterActive = false;
+				const outstandingFilter = function(settings, data, dataIndex) {
+					if (!outstandingFilterActive) {
+						return true;
+					}
+					const row = settings.aoData[dataIndex].nTr;
+					return $(row).data('outstanding') === 1 || $(row).data('outstanding') === '1';
+				};
+
+				$.fn.dataTable.ext.search.push(outstandingFilter);
+
+				const table = $('#dataTable').DataTable({
 					responsive: false,
 					dom: 'Blfrtip',
 					lengthMenu: [ [10, 50, 100, -1], [10, 50, 100, "All"] ], // Control the entries dropdown
@@ -508,6 +541,20 @@
 						'colvis'
 					]
 				});
+
+				const $outstandingCard = $('#outstandingCard');
+				const updateCardHint = (isActive) => {
+					const text = isActive ? 'Klik untuk menampilkan semua data' : 'Klik untuk menampilkan detail';
+					$outstandingCard.find('.filter-hint small').text(text);
+				};
+				updateCardHint(outstandingFilterActive);
+
+				$outstandingCard.on('click', function () {
+					outstandingFilterActive = !outstandingFilterActive;
+					$outstandingCard.toggleClass('active', outstandingFilterActive);
+					table.draw();
+					updateCardHint(outstandingFilterActive);
+				});
 			}
 
 			// Handle Reject Button Click