dashboard-desaplus-noc/Dashboard-MD/BUMDES.md

BUMDES & UMKM Desa — UI & Functional Specification

Dokumen ini menjelaskan spesifikasi UI, tata letak, gaya visual, responsivitas, serta ekspektasi data & interaksi untuk halaman BUMDes & UMKM Desa (Jenna Analytic Module). Dokumen ini menjadi kontrak desain antara UI/UX, Frontend, dan Backend.

---

1. Tujuan Halaman

Halaman BUMDes & UMKM Desa berfungsi sebagai dashboard monitoring:

• Aktivitas UMKM desa
• Performa penjualan produk unggulan
• Omzet BUMDes
• Stok & tren produk

Target pengguna:

• Kepala Desa
• Admin Desa
• Operator BUMDes

---

2. Tata Letak Keseluruhan (Layout)

2.1 Struktur Utama

Layout menggunakan pola Dashboard Sidebar Layout:

• Sidebar kiri (fixed)
• Topbar/header (fixed)
• Main content (scrollable)

Grid utama:

• Desktop: 12-column grid
• Tablet: 8-column grid
• Mobile: 4-column grid

---

2.2 Sidebar

Komponen:

• Logo DESA + tagline
• Search bar ("cari apa saja")
• Menu navigasi vertikal

Menu aktif:

• Bumdes & UMKM Desa (highlight biru muda)

Perilaku:

• Collapsible pada layar kecil
• Ikon + label (label hidden di mobile)

---

2.3 Topbar

Komponen:

• Nama desa
• Nama & jabatan user
• Avatar user
• Ikon notifikasi (badge)
• Ikon pengaturan

Perilaku:

• Sticky
• Dropdown user menu

---

3. Komponen UI Utama

3.1 KPI Cards (Ringkasan Atas)

Menampilkan ringkasan metrik utama:

KPI	Deskripsi
UMKM Aktif	Jumlah UMKM beroperasi
UMKM Terdaftar	Total UMKM terdaftar
Omzet	Omzet BUMDes per bulan
Kategori UMKM	Jumlah kategori aktif

Karakteristik:

• Card rounded
• Icon di kanan
• Angka besar (headline)

---

3.2 Update Penjualan Produk

Komponen:

• Section header berwarna biru gelap

• Button filter waktu:

  • "Minggu ini"
  • "Bulan ini"

Perilaku:

• Toggle data chart & tabel
• Default: Bulan ini

---

3.3 Produk Unggulan (Left Column)

Sub-komponen:

1. Total Penjualan

   • Nominal
   • Persentase perubahan

2. Produk Aktif

   • Jumlah produk
   • Jumlah kategori

3. Total Transaksi

   • Jumlah transaksi bulan berjalan

4. Top 3 Produk Terlaris

   • Ranking
   • Nama produk
   • Pelaku UMKM
   • Growth indicator

---

3.4 Detail Penjualan Produk (Right Column)

Bentuk:

• Tabel data

Kolom:

• Produk
• Penjualan bulan ini
• Bulan lalu
• Trend
• Volume
• Stok
• Aksi

Elemen khusus:

• Trend: arrow hijau/merah
• Stok: badge warna (aman / kritis)
• Aksi: tombol "Detail"

Filter:

• Dropdown filter kategori / stok

---

4. Gaya & Tema Visual

4.1 Warna

Elemen	Warna
Primary	Biru tua (#183A63 approx)
Secondary	Biru muda (#E6F0FF)
Success	Hijau (#22C55E)
Danger	Merah (#EF4444)
Background	Abu muda / putih

---

4.2 Tipografi

• Font family: Inter / Poppins / Sans-serif modern
• Heading: Semi-bold
• Body text: Regular
• Angka KPI: Bold

Ukuran:

• H1: 24–28px
• H2: 18–20px
• Body: 14–16px

---

4.3 Spasi & Card

• Padding card: 16–20px
• Gap antar card: 16px
• Border radius: 12–16px
• Shadow ringan

---

5. Responsivitas

Desktop

• Sidebar terbuka penuh
• Tabel full

Tablet

• Sidebar collapse
• KPI card wrap

Mobile

• Sidebar drawer
• KPI card stack
• Tabel menjadi card list

---

6. Interaksi & UX Behavior

• Hover effect pada card & row tabel
• Tooltip pada ikon & trend
• Loading skeleton saat fetch data
• Empty state ("Belum ada data")

---

7. Ekspektasi Data (Backend Contract)

KPI API

{
  "umkmAktif": 45,
  "umkmTerdaftar": 68,
  "omzet": 48000000,
  "kategori": 34
}

Produk API

{
  "produk": "Beras Premium Organik",
  "penjualanBulanIni": 8500000,
  "bulanLalu": 8500000,
  "trend": 10,
  "volume": "650 Kg",
  "stok": "850 Kg"
}

---

8. Catatan Implementasi Teknis

• Frontend: React + Vite
• State management: query-based (TanStack Query)
• Chart (jika ditambah): Recharts / Chart.js
• Format uang: Intl.NumberFormat("id-ID")

---

9. Acceptance Checklist

• Semua KPI muncul & valid
• Filter waktu berfungsi
• Trend naik/turun akurat
• Responsif mobile
• Empty & loading state tersedia

---

Dokumen ini bersifat final reference untuk implementasi halaman BUMDes & UMKM Desa.