Step 7 · Lab

Dashboard Shell Lab

Pilih kombinasi sidebar, header, breadcrumb, title, footer, color, dan density. Preview ada di bawah; copy snippet config di akhir untuk dipakai diapps/web/app/admin/(shell)/layout.tsx.

Aktif:sidebar=spaciousheader=page-titlebreadcrumb=standalonetitle=hiddenfooter=fullcolor=soft-mintdensity=comfortable
admin.kiosklix.com/dashboard

Dashboard

Total Revenue

Rp 128.430.000

+12% vs bulan lalu

Total Orders

1.240

+8% vs bulan lalu

Active Customers

856

+5% vs bulan lalu

Products Sold

480

−2% vs bulan lalu

Revenue Trend
7 Hari
Top Products

Pulsa Telkomsel 50K

124 sold this week

Aktif

PLN Token 100K

98 sold this week

Aktif

Paket Data 25GB

42 sold this week

Aktif
Recent Orders
IDPelangganProdukJumlahStatus
#8421Alex RiveraNike BlazerRp 124.000Lunas
#8422Sam CheniPhone 15Rp 999.000Pending
#8423Julia SmithAirPods MaxRp 549.000Lunas
#8424Michael RoeiPad ProRp 799.000Batal

Config snippet

Copy & paste ke apps/web/app/admin/(shell)/layout.tsx untuk mengunci pilihan.

import { AppShell } from "./_components/AppShell";

export default function ShellLayout({ children }: { children: React.ReactNode }) {
    return (
        <AppShell
            config={{
                sidebar: "spacious",
                header: "page-title",
                breadcrumb: "standalone",
                title: "hidden",
                footer: "full",
                color: "soft-mint",
                density: "comfortable",
            }}
        >
            {children}
        </AppShell>
    );
}