Add counter badge of transaction online trail controller

app/Http/Controllers/OnlineTransactionTrailController.php

@@ -49,8 +49,10 @@ class OnlineTransactionTrailController extends Controller
             ])
             ->json();
             
+            
         $branches = Http::arrahn()->get('/api/cawangan')->json();
-
+        
+        
         return view('online.trail.index', compact('transactionTrail', 'startDate', 'endDate', 'norujukan', 'selectedStatus', 'statuses', 'billplzBillId', 'branches', 'selectedBranch'));
     }
 }

resources/views/components/filter-card.blade.php

@@ -31,7 +31,7 @@
                                         <div class="flex">
                                             <span
                                                 class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap"
-                                                style="background-color: rgb(249, 250, 251);">Pada
+                                                style="background-color: rgb(249, 250, 251);">Daripada
                                             </span>
                                             <input id="tarikhmula" name="startDate" type="date"
                                                 class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2"

resources/views/online/trail/index.blade.php

@@ -40,16 +40,44 @@
     </div>
 
 
+    @php
+        $isGroupedByNorujukan = request()->groupedByNorujukan === 'on' ? true : false;
+    @endphp
     <div class="container mx-auto p-4 bg-yellow-50">
         <div class="flex border-b border-gray-200 mb-4">
-            <button class="tab-button active" data-tab="transactions-online">Transactions Online</button>
+            <button class="tab-button active flex items-center" data-tab="transactions-online">
-            <button class="tab-button" data-tab="transactions">Transactions</button>
+                <span>Transactions Online</span>
-            <button class="tab-button" data-tab="transaksi-keuntungan">Transaksi Keuntungan</button>
+                @php
-            <button class="tab-button" data-tab="gldetail">GL Detail</button>
+                    $flattenArray = fn($x) => is_array($x) ? array_merge(...array_values($x)) : [$x];
+                    
+                    $transactionOnlineNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrail['transactionsOnline'])) : sizeOf($transactionTrail['transactionsOnline']);
+                @endphp
+                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $transactionOnlineNumbers }}</span>
+            </button>
+            <button class="tab-button flex items-center" data-tab="transactions">
+                <span>Transactions</span>
+                @php
+                    $transactionNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrail['transaction'])) : sizeOf($transactionTrail['transaction']);
+                @endphp
+                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $transactionNumbers }}</span>
+            </button>
+            <button class="tab-button flex items-center" data-tab="transaksi-keuntungan">
+                <span>Transactions</span>
+                @php
+                    $transaksiKeuntunganNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrail['transaksiKeuntungan'])) : sizeOf($transactionTrail['transaksiKeuntungan']);
+                @endphp
+                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $transaksiKeuntunganNumbers }}</span>
+            </button>
+            <button class="tab-button flex items-center" data-tab="gldetail">
+                <span>Transactions</span>
+                @php
+                    $glDetailNumbers = $isGroupedByNorujukan ? sizeOf($flattenArray($transactionTrail['glDetail'])) : sizeOf($transactionTrail['glDetail']);
+                @endphp
+                <span class="inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-yellow-600 rounded-full ml-2">{{ $glDetailNumbers }}</span>
+            </button>
         </div>
 
         @php
-            $isGroupedByNorujukan = request()->groupedByNorujukan === 'on' ? true : false;
             $pageVariation = $isGroupedByNorujukan ? 'grouped-by-norujukan' : '';
         @endphp
         <div id="transactions-online" class="tab-content active">