Fasa 7 — Dashboard Brief: Pilihan Projek

📦

Inventory Tracker

Track stok barang, kuantiti, kategori, dan harga. Dashboard untuk memantau inventori dengan visualisasi stok.

Penerangan

Sistem untuk mengurus inventori barang. Pengguna boleh menambah item baru, mengemas kini kuantiti stok, melihat item yang hampir habis, dan menganalisis taburan stok mengikut kategori. Sesuai untuk perniagaan kecil atau pembelajaran logistik.

Cadangan Data Model

Column	Type	Keterangan
id PK	uuid	ID unik (auto-generate)
name	text	Nama barang
quantity	integer	Kuantiti stok semasa
category	text	Kategori (contoh: Elektronik, Makanan, Pakaian)
price	decimal(10,2)	Harga seunit
min_stock	integer	Stok minimum (untuk alert)
created_at	timestamp	Tarikh tambah (auto)

Senarai Fitur

Paparan semua item dalam table dengan search
Tambah item baru (form dengan validation)
Edit kuantiti stok
Delete item
Filter ikut kategori
Bar chart — bilangan item mengikut kategori
Card ringkasan: Total Items, Total Categories, Low Stock Items
Alert item low stock (quantity < min_stock)
Line chart — trend penambahan stok mengikut masa
Export data ke CSV
Barcode scanner (mobile)
Real-time updates bila stok berubah

Gambaran UI

Sidebar kiri dengan menu Dashboard, Inventory, Categories, Settings. Halaman utama: 3-4 card ringkasan di atas, table inventory di tengah (boleh scroll), bar chart di sebelah kanan. Ada search bar dan dropdown filter di atas table. Butang "Tambah Item" di sudut kanan atas.

Contoh Prompt

"Bina dashboard Inventory Tracker dengan:
- Sidebar (Dashboard, Inventory, Categories)
- 4 cards: Total Items, Low Stock, Categories, Value
- Table dengan search & filter kategori
- Bar chart: items per category dari Supabase
- Dark theme, responsive"

📧

Contact Manager

Simpan, cari, dan urus senarai contact. Dashboard hubungan dengan visualisasi rangkaian.

Penerangan

Sistem pengurusan hubungan (CRM ringan). Pengguna boleh menyimpan contact, mencari dengan pantas, menapis mengikut syarikat atau tag, dan melihat statistik hubungan. Sesuai untuk rangkaian profesional atau pengurusan pelanggan.

Cadangan Data Model

Column	Type	Keterangan
id PK	uuid	ID unik (auto-generate)
name	text	Nama penuh
email	text	Alamat emel
phone	text	Nombor telefon
company	text	Syarikat / organisasi
position	text	Jawatan
tags	text[]	Tag (array, contoh: {'VIP','Client','Friend'})
created_at	timestamp	Tarikh tambah (auto)

Senarai Fitur

Grid/Lihat senarai contact
Search — cari ikut nama, emel, atau syarikat
Filter ikut tag atau syarikat
Tambah contact baru (form lengkap)
Edit contact (inline atau modal)
Delete contact dengan confirmation
Card ringkasan: Total Contacts, Companies, Tags
Pie chart — pecahan contact mengikut syarikat
Klik contact untuk lihat detail penuh (modal)
Import contact dari CSV
Favourite / starred contacts
Real-time updates

Gambaran UI

Sidebar dengan Dashboard, Contacts, Analytics, Settings. Halaman utama: card statistik di atas (Total Contacts, Companies, Tags Popular). Di bawah: grid contact cards (avatar bulat, nama, syarikat, emel) atau table view (boleh toggle). Search bar sentiasa di atas. Butang "Tambah Contact" terapung di kanan bawah.

Contoh Prompt

"Bina Contact Manager dashboard dengan:
- Sidebar (Dashboard, Contacts, Analytics)
- Card stats: Total Contacts, Total Companies
- Grid contact cards (avatar, nama, emel, syarikat)
- Search bar (filter nama/emel/syarikat)
- Modal untuk tambah/edit contact
- Pie chart: contacts per company
- Dark theme"

💡

Idea Board

Post idea, undi (vote), dan komen. Papan idea interaktif untuk sesi brainstorming pasukan.

Penerangan

Platform untuk mengumpul dan mengurus idea. Pengguna boleh menghantar idea baru, mengundi idea yang sedia ada (upvote/downvote), dan meninggalkan komen. Sesuai untuk pasukan yang ingin melakukan brainstorming secara digital atau komuniti yang ingin mencadangkan penambahbaikan.

Cadangan Data Model

Table	Column	Type	Keterangan
ideas	id PK	uuid	ID unik
	title	text	Tajuk idea
	description	text	Penerangan penuh
	votes	integer	Jumlah undian (default 0)
	author	text	Nama pencipta idea
	created_at	timestamp	Tarikh hantar
comments	id PK	uuid	ID unik
	idea_id FK	uuid	Rujuk ideas.id
	content	text	Kandungan komen
	created_at	timestamp	Tarikh komen

Senarai Fitur

Paparan semua idea dalam card grid (susun ikut votes tertinggi)
Hantar idea baru (title + description + author)
Upvote / downvote idea
Lihat komen untuk setiap idea
Tambah komen pada idea
Search idea ikut tajuk
Card ringkasan: Total Ideas, Total Votes, Top Idea
Filter ikut populariti (votes) atau terbaru (date)
Bar chart — top 5 ideas with most votes
Line chart — ideas submitted over time
Kategori / tag untuk ideas
Real-time — idea baru muncul automatik

Gambaran UI

Sidebar dengan Dashboard, Ideas Board, Analytics. Halaman utama: card statistik (Total Ideas, Top Idea, Total Votes). Di bawah: grid idea cards — setiap card ada tajuk, description ringkas, vote buttons (▲/▼), jumlah votes, dan komen count. Bila klik idea, buka modal dengan detail penuh dan komen. Butang "Cadang Idea" di atas.

Contoh Prompt

"Bina Idea Board dashboard dengan:
- Sidebar (Dashboard, Ideas, Analytics)
- Card stats: Total Ideas, Top Idea, Total Votes
- Grid idea cards dengan vote buttons (upvote/downvote)
- Modal untuk hantar idea baru
- Komen section untuk setiap idea
- Search ideas
- Sort by votes / newest
- Bar chart: top 5 ideas
- Dark theme"

💼

Expense Tracker

Log perbelanjaan, kategori, jumlah, dan tarikh. Dashboard kewangan dengan analisis perbelanjaan.

Penerangan

Sistem untuk menjejak perbelanjaan harian. Pengguna boleh log setiap perbelanjaan, mengkategorikannya, melihat jumlah perbelanjaan mengikut kategori dan masa, serta menganalisis tabiat berbelanja. Sesuai untuk pengurusan kewangan peribadi atau pembelajaran analisis data.

Cadangan Data Model

Column	Type	Keterangan
id PK	uuid	ID unik (auto-generate)
description	text	Penerangan perbelanjaan
amount	decimal(10,2)	Jumlah wang
category	text	Kategori (Makanan, Pengangkutan, Hiburan, dll)
date	date	Tarikh perbelanjaan
payment_method	text	Tunai / Kad Kredit / Online Banking
notes	text	Nota tambahan (optional)
created_at	timestamp	Tarikh log (auto)

Senarai Fitur

Table senarai semua perbelanjaan (paling baru di atas)
Tambah expense baru (form: description, amount, category, date)
Edit / delete expense
Filter ikut kategori dan date range
Search description
Bar chart — jumlah perbelanjaan ikut kategori
Line chart — trend perbelanjaan bulanan
Pie chart — pecahan perbelanjaan ikut kategori
Card ringkasan: Total Spending, Bulan Ini, Kategori Tertinggi, Purata Harian
Date range picker untuk filter
Export laporan ke PDF/CSV
Budget limit per kategori (dengan alert bila exceeded)
Real-time updates

Gambaran UI

Sidebar dengan Dashboard, Expenses, Charts, Settings. Halaman utama: 4 card ringkasan di baris atas (Total Spending, Spending Bulan Ini, Kategori Tertinggi, Purata/Harian). Di bawah: bar chart (kiri) dan pie chart (kanan) sebelah-menyebelah. Line chart di bawahnya untuk trend bulanan. Table expenses di bawah sekali dengan search, filter kategori, dan date range picker. Butang "Tambah Expense" terapung.

Contoh Prompt

"Bina Expense Tracker dashboard dengan:
- Sidebar (Dashboard, Expenses, Charts)
- 4 cards: Total, Bulan Ini, Tertinggi, Purata
- Bar chart: spending per category
- Line chart: monthly trend
- Pie chart: category breakdown
- Table expenses dengan search & filter
- Dark theme, responsive"

Mix & Match / Custom Dashboard

Tak puas hati dengan 4 pilihan di atas? Anda boleh:

Gabungkan fitur dari pelbagai pilihan — contohnya: Inventory Tracker dengan comments macam Idea Board
Cadangkan sendiri — apa-apa dashboard yang anda nak bina (study tracker, fitness log, reading list, dll.)
Tambah fitur unik — integrasi API ketiga, upload gambar, dark mode toggle, apa saja!

Yang penting: kena ada minimum 1 table di Supabase, search/filter, 1 chart, dan responsive design. Selebihnya, kreativiti anda!

✓

📝

Minimum Viable Product (MVP) Checklist

Ini adalah keperluan minimum yang mesti ada dalam dashboard anda. Semua pelajar mesti capai tahap ini.

Satu halaman HTML/CSS/JS yang berfungsi (atau multi-page dengan navigasi)
Dark theme konsisten (guna palet dari modul ini)
Sambungan ke Supabase — fetch data dari sekurang-kurangnya 1 table
Paparan data (table, cards, atau grid)
Search bar — cari data berdasarkan teks
Satu chart (bar, line, atau pie) menggunakan data dari Supabase
Responsive — nampak ok di desktop dan mobile
Tiada console errors
Loading state semasa fetch data
Error handling kalau data gagal di-load
Sidebar navigation minima 3 menu items
Card ringkasan minima 2 cards dengan data dinamik

★

🌟

Stretch Goals (Kalau Ada Masa Lebih)

Sudah siap MVP? Cuba cabaran tambahan ini untuk dashboard yang lebih hebat.

User Authentication — login/signup dengan Supabase Auth, roles admin vs user
Real-Time Updates — data berubah automatik tanpa refresh guna Supabase Realtime
Multi-Table — guna 2+ table dengan relationship (foreign key)
Data Export — muat turun data sebagai CSV atau PDF
Advanced Charts — 3+ jenis chart, animated, interactive (tooltip, click)
Dark/Light Mode Toggle — suis untuk tukar tema
Data Pagination — untuk table dengan banyak data
Animations — transition, loading spinners, page transitions
Notifications — toast messages untuk success/error actions
Drag & Drop — susun semula cards atau items
Print-Friendly — dashboard boleh dicetak dengan