Project: Dashboard UI

Project: Dashboard UI dengan Tailwind

Dalam project akhir ini, kamu akan membangun sebuah Dashboard Admin UI yang lengkap menggunakan Tailwind CSS. Project ini mengintegrasikan semua konsep yang sudah dipelajari.

Preview Dashboard

Dashboard yang akan dibuat terdiri dari:

• Sidebar — Navigasi dengan icon, active state, dan collapsible sections
• Header/Topbar — Search bar, notifikasi, user avatar
• Stats Cards — Grid 4 kolom dengan angka metrik dan trend indicator
• Data Table — Table dengan sorting, pagination, dan action buttons
• Chart Area — Placeholder untuk grafik

Struktur yang Direkomendasikan

src/
├── components/
│   ├── Sidebar.jsx
│   ├── Topbar.jsx
│   ├── StatsCard.jsx
│   ├── DataTable.jsx
│   └── Badge.jsx
├── data/
│   └── mockData.js
└── App.jsx

Tips Pengerjaan

1. Mulai dari layout utama (sidebar + main content area) menggunakan CSS Grid atau Flexbox
2. Buat komponen StatsCard sebagai reusable component dengan props
3. Pastikan layout responsive untuk mobile (sidebar menjadi drawer)
4. Gunakan dark mode variant untuk semua komponen
5. Polish dengan hover states dan transitions yang halus

Dashboard adalah salah satu project yang paling sering muncul di portofolio. Kerjakan dengan serius dan sedetail mungkin!