dst/dstpabuaran.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yoga Pangestu 2026-08-14 07:52:28 +07:00
parent c2354440e3
commit 4d22d85851
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
resources/js/pages/dashboard.tsx
View File

@ -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"