style: increase layout spacing by updating gap utility from 2 to 4 across dashboard and analysis pages

This commit is contained in:
Yoga Pangestu 2026-04-30 15:15:58 +07:00
parent 781962b44c
commit 888d219a18
2 changed files with 5 additions and 5 deletions

View File

@ -260,7 +260,7 @@ export default function Analisa() {
</div>
{/* Stats Grid */}
<div className="grid grid-cols-1 gap-2 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @sm/main:grid-cols-2 @3xl/main:grid-cols-3 @5xl/main:grid-cols-4 @7xl/main:grid-cols-6 dark:*:data-[slot=card]:bg-card">
<div className="grid grid-cols-1 gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @sm/main:grid-cols-2 @3xl/main:grid-cols-3 @5xl/main:grid-cols-4 @7xl/main:grid-cols-6 dark:*:data-[slot=card]:bg-card">
{[
{
title: 'Total Penjualan',

View File

@ -158,13 +158,13 @@ export default function Dashboard() {
<>
<Head title="Dasbor" />
<div
className={`@container/main flex h-full min-h-screen flex-1 flex-col gap-2 overflow-x-auto rounded-xl p-3 transition-colors duration-1000`}
className={`@container/main flex h-full min-h-screen flex-1 flex-col gap-4 overflow-x-auto rounded-xl p-3 transition-colors duration-1000`}
>
{/* Welcome Section */}
<WelcomeCard user={auth.user} time={time} theme={theme} />
{/* Stats Grid */}
<div className="grid grid-cols-1 gap-2 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @sm/main:grid-cols-2 @3xl/main:grid-cols-3 @5xl/main:grid-cols-4 @7xl/main:grid-cols-6 dark:*:data-[slot=card]:bg-card">
<div className="grid grid-cols-1 gap-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs @sm/main:grid-cols-2 @3xl/main:grid-cols-3 @5xl/main:grid-cols-4 @7xl/main:grid-cols-6 dark:*:data-[slot=card]:bg-card">
{statItems.map((item, index) => (
<div
key={index}
@ -185,7 +185,7 @@ export default function Dashboard() {
data={salesByHour}
/>
<div className="grid grid-cols-1 gap-2 lg:grid-cols-3">
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
<CustomPieChart
title="Metode Pembayaran"
description="Distribusi transaksi berdasarkan metode pembayaran yang digunakan."
@ -206,7 +206,7 @@ export default function Dashboard() {
/>
</div>
<div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
<CustomBarChart
title="Top 5 Produk"
description="Daftar produk dengan volume penjualan tertinggi."