refactor: update dashboard permission roles and implement dynamic grid layouts for stats and charts

app/Enums/Role.php

@@ -115,7 +115,6 @@ public function permissions(): array
 
             self::ADMIN_TOKO => [
                 Permission::DASHBOARD_VIEW,
-
                 Permission::DASHBOARD_CASH,
                 Permission::DASHBOARD_REVENUE,
                 Permission::DASHBOARD_EXPENSE,
@@ -123,8 +122,8 @@ public function permissions(): array
                 Permission::DASHBOARD_ORDERS_PAYMENT,
                 Permission::DASHBOARD_ORDERS_MARKETING,
                 Permission::DASHBOARD_ORDERS_STATUS,
-                Permission::ANALYSIS_VIEW,
 
+                Permission::ANALYSIS_VIEW,
                 Permission::ANALYSIS_ATTENDANCE,
                 Permission::ANALYSIS_CASH,
                 Permission::ANALYSIS_PRODUCT_STOCK,
@@ -199,7 +198,6 @@ public function permissions(): array
 
             self::CASHIER => [
                 Permission::DASHBOARD_VIEW,
-                Permission::DASHBOARD_ATTENDANCE,
                 Permission::DASHBOARD_REVENUE,
                 Permission::DASHBOARD_ORDERS_CHANNEL,
                 Permission::DASHBOARD_ORDERS_PAYMENT,

resources/js/pages/admin/Dashboard.vue

@@ -204,6 +204,40 @@ const marketingChartConfig = computed(() => {
 
     return config;
 });
+
+const visibleStatsCount = computed(() => {
+    let count = 0;
+    if (can('dashboard.attendance')) count++;
+    if (can('dashboard.cash')) count++;
+    if (can('dashboard.revenue')) count++;
+    if (can('dashboard.expense')) count++;
+    return count;
+});
+
+const statsGridClass = computed(() => {
+    const count = visibleStatsCount.value;
+    if (count === 1) return 'grid gap-4 grid-cols-1 md:max-w-md';
+    if (count === 2) return 'grid gap-4 grid-cols-1 md:grid-cols-2';
+    if (count === 3) return 'grid gap-4 grid-cols-1 md:grid-cols-3';
+    return 'grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4';
+});
+
+const visibleChartsCount = computed(() => {
+    let count = 0;
+    if (can('dashboard.orders_channel')) count++;
+    if (can('dashboard.orders_payment')) count++;
+    if (can('dashboard.orders_marketing')) count++;
+    if (can('dashboard.orders_status')) count++;
+    return count;
+});
+
+const chartsGridClass = computed(() => {
+    const count = visibleChartsCount.value;
+    if (count === 1) return 'grid gap-4 grid-cols-1 md:max-w-xl';
+    if (count === 2) return 'grid gap-4 grid-cols-1 md:grid-cols-2';
+    if (count === 3) return 'grid gap-4 grid-cols-1 md:grid-cols-3';
+    return 'grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4';
+});
 </script>
 
 <template>
@@ -251,7 +285,7 @@ const marketingChartConfig = computed(() => {
                 @check-out="openCheckOutModal"
             />
 
-            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <div v-if="visibleStatsCount > 0" :class="statsGridClass">
                 <StatCard v-if="can('dashboard.attendance')" title="Kehadiran" :icon="UserCheck"
                     main-label="Total Karyawan" :main-value="attendance.total_employees"
                     :sub-label="attendance.percentage + '% hadir'" :items="[
@@ -319,7 +353,7 @@ const marketingChartConfig = computed(() => {
                     ]" />
             </div>
 
-            <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <div v-if="visibleChartsCount > 0" :class="chartsGridClass">
                 <Card v-if="can('dashboard.orders_channel')">
                     <CardHeader>
                         <CardTitle class="text-base">Pesanan per Channel</CardTitle>