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 HariTop Products
Pulsa Telkomsel 50K
124 sold this week
PLN Token 100K
98 sold this week
Paket Data 25GB
42 sold this week
Recent Orders
| ID | Pelanggan | Produk | Jumlah | Status |
|---|---|---|---|---|
| #8421 | Alex Rivera | Nike Blazer | Rp 124.000 | Lunas |
| #8422 | Sam Chen | iPhone 15 | Rp 999.000 | Pending |
| #8423 | Julia Smith | AirPods Max | Rp 549.000 | Lunas |
| #8424 | Michael Roe | iPad Pro | Rp 799.000 | Batal |
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>
);
}