From 4ec4a4c135429289062ccf12760407823c3cce88 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 14 Aug 2026 06:17:06 +0700
Subject: [PATCH] refactor: optimize grid layout for Dashboard component based
 on visible stats count

---
 resources/js/pages/dashboard.tsx | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index 0668764..3150048 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -160,22 +160,6 @@ export default function Dashboard({
         return count;
     }, [can]);
 
-    const statsGridClass = useMemo(() => {
-        if (visibleStatsCount === 1) {
-            return 'grid gap-4 grid-cols-1 md:max-w-md';
-        }
-
-        if (visibleStatsCount === 2) {
-            return 'grid gap-4 grid-cols-1 md:grid-cols-2';
-        }
-
-        if (visibleStatsCount === 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';
-    }, [visibleStatsCount]);
-
     const visibleChartsCount = useMemo(() => {
         let count = 0;
 
@@ -316,7 +300,7 @@ export default function Dashboard({
                 )}
 
                 {visibleStatsCount > 0 && (
-                    <div className={statsGridClass}>
+                    <div className="grid gap-4" style={{ gridTemplateColumns: `repeat(${visibleStatsCount}, minmax(0, 1fr))` }}>
                         {can('dashboard.attendance') && (
                             <StatCard
                                 title="Kehadiran Hari Ini"
@@ -329,6 +313,7 @@ export default function Dashboard({
                                     { label: 'Tidak Hadir', value: attendanceStats.absent },
                                     { label: 'Cuti', value: attendanceStats.on_leave },
                                 ]}
+                                cols={3}
                             />
                         )}
 
@@ -369,7 +354,7 @@ export default function Dashboard({
                                         value: `Rp${formatRupiah(revenueSummary.total_cogs)}`,
                                     },
                                 ]}
-                                cols={2}
+                                cols={visibleStatsCount === 1 ? 4 : visibleStatsCount === 2 ? 3 : 2}
                             />
                         )}
 
@@ -389,6 +374,7 @@ export default function Dashboard({
                                         value: `Rp${formatRupiah(expenseSummary.advance_total)}`,
                                     },
                                 ]}
+                                cols={visibleStatsCount <= 2 ? 2 : 2}
                             />
                         )}
                     </div>