ui(dashboard): show 3 distribution charts per row

app/Services/Dashboard/DashboardService.php

@@ -5,6 +5,7 @@ namespace App\Services\Dashboard;
 use App\Models\Asset;
 use App\Models\AssetApprovalRequest;
 use App\Models\AssetAudit;
+use App\Models\AssetCategory;
 use App\Models\AssetDisposal;
 use App\Models\AssetLocation;
 use App\Models\AssetMaintenance;
@@ -102,6 +103,16 @@ class DashboardService
                 ->take(10)
                 ->values();
 
+            $byCategory = AssetCategory::query()
+                ->withCount(['assets as assets_count' => fn ($q) => $q->forUser($user)])
+                ->orderByDesc('assets_count')
+                ->orderBy('name')
+                ->get()
+                ->map(fn ($cat) => ['label' => $cat->name, 'value' => (int) $cat->assets_count])
+                ->filter(fn ($row) => $row['value'] > 0)
+                ->take(10)
+                ->values();
+
             $trendLabels = $this->buildTrendLabels($trendStart, $trendDays);
             $movementTrend = $this->buildDailyTrend(
                 AssetMovement::query()
@@ -176,6 +187,7 @@ class DashboardService
                 'pendingApprovalsCount',
                 'byStatus',
                 'byLocation',
+                'byCategory',
                 'trendLabels',
                 'movementTrend',
                 'disposalTrend',
@@ -220,4 +232,3 @@ class DashboardService
             ->all();
     }
 }
-

resources/views/pages/dashboards/index.blade.php

@@ -216,23 +216,33 @@
 </div>
 
 <div class="row g-3 mt-0">
-    <div class="col-xl-6">
+    <div class="col-xl-4 col-md-6">
         <div class="card custom-card h-100">
             <div class="card-header">
                 <div class="card-title mb-0">Distribusi Aset per Status</div>
             </div>
             <div class="card-body">
-                <canvas id="chartStatus" height="140"></canvas>
+                <canvas id="chartStatus" height="110"></canvas>
             </div>
         </div>
     </div>
-    <div class="col-xl-6">
+    <div class="col-xl-4 col-md-6">
         <div class="card custom-card h-100">
             <div class="card-header">
                 <div class="card-title mb-0">Top Lokasi (10)</div>
             </div>
             <div class="card-body">
-                <canvas id="chartLocation" height="140"></canvas>
+                <canvas id="chartLocation" height="110"></canvas>
+            </div>
+        </div>
+    </div>
+    <div class="col-xl-4 col-md-12">
+        <div class="card custom-card h-100">
+            <div class="card-header">
+                <div class="card-title mb-0">Top Kategori (10)</div>
+            </div>
+            <div class="card-body">
+                <canvas id="chartCategory" height="110"></canvas>
             </div>
         </div>
     </div>
@@ -489,5 +499,26 @@
             }
         });
     }
+
+    const catCtx = document.getElementById('chartCategory');
+    const catData = @json($byCategory ?? []);
+    if (catCtx) {
+        new Chart(catCtx, {
+            type: 'bar',
+            data: {
+                labels: catData.map(i => i.label),
+                datasets: [{
+                    label: 'Jumlah Aset',
+                    data: catData.map(i => i.value),
+                    backgroundColor: '#a78bfa'
+                }]
+            },
+            options: {
+                indexAxis: 'y',
+                plugins: { legend: { display: false } },
+                scales: { x: { beginAtZero: true, ticks: { precision: 0 } } }
+            }
+        });
+    }
 </script>
 @endsection