286 lines
4.4 KiB
Markdown
286 lines
4.4 KiB
Markdown
# 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
|
||
|
||
```json
|
||
{
|
||
"umkmAktif": 45,
|
||
"umkmTerdaftar": 68,
|
||
"omzet": 48000000,
|
||
"kategori": 34
|
||
}
|
||
```
|
||
|
||
### Produk API
|
||
|
||
```json
|
||
{
|
||
"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**.
|