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

refactor: optimize grid layout for Dashboard component based on visible stats count

Browse Source
This commit is contained in:
Yoga Pangestu 2026-08-14 06:17:06 +07:00
parent 8f15ad5971
commit 4ec4a4c135
1 changed files with 4 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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