feat: optimize dashboard layout with dynamic grid classes based on visible stats count

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"