enhance outstanding expense card

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