From 4d22d85851438b3a8e7565b891344844c6456f35 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 14 Aug 2026 07:52:28 +0700
Subject: [PATCH] feat: optimize dashboard layout with dynamic grid classes
 based on visible stats count

---
 resources/js/pages/dashboard.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index 3150048..8744170 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -182,6 +182,18 @@ export default function Dashboard({
         return count;
     }, [can]);
 
+    const statsGridClass = useMemo(() => {
+        if (visibleStatsCount === 1) {
+            return 'grid gap-4 grid-cols-1 md:max-w-xl';
+        }
+
+        if (visibleStatsCount === 2) {
+            return 'grid gap-4 grid-cols-1 md:grid-cols-2';
+        }
+
+        return 'grid gap-4 grid-cols-1 md:grid-cols-3';
+    }, [visibleStatsCount]);
+
     const chartsGridClass = useMemo(() => {
         if (visibleChartsCount === 1) {
             return 'grid gap-4 grid-cols-1 md:max-w-xl';
@@ -300,7 +312,7 @@ export default function Dashboard({
                 )}
 
                 {visibleStatsCount > 0 && (
-                    <div className="grid gap-4" style={{ gridTemplateColumns: `repeat(${visibleStatsCount}, minmax(0, 1fr))` }}>
+                    <div className={statsGridClass}>
                         {can('dashboard.attendance') && (
                             <StatCard
                                 title="Kehadiran Hari Ini"