feat: update components with Mantine UI and improve dark mode support
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
285
Dashboard-MD/BUMDES.md
Normal file
285
Dashboard-MD/BUMDES.md
Normal file
@@ -0,0 +1,285 @@
|
||||
# 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**.
|
||||
224
Dashboard-MD/KEAMANAN.md
Normal file
224
Dashboard-MD/KEAMANAN.md
Normal file
@@ -0,0 +1,224 @@
|
||||
# KEAMANAN
|
||||
|
||||
Dokumen ini mendeskripsikan spesifikasi UI/UX dan ekspektasi teknis untuk modul **Keamanan Lingkungan Desa** pada sistem dashboard DESA. Dokumen ini menjadi acuan bersama bagi tim desain, frontend, dan backend.
|
||||
|
||||
---
|
||||
|
||||
## 1. Tujuan Halaman
|
||||
|
||||
Memberikan visibilitas real-time dan historis terhadap kondisi keamanan desa, meliputi:
|
||||
|
||||
* Status CCTV aktif
|
||||
* Laporan kejadian keamanan
|
||||
* Peta lokasi CCTV
|
||||
* Monitoring tren dan respons kejadian
|
||||
|
||||
Target pengguna utama:
|
||||
|
||||
* Kepala Desa
|
||||
* Perangkat Desa / Petugas Keamanan
|
||||
|
||||
---
|
||||
|
||||
## 2. Struktur Tata Letak (Layout)
|
||||
|
||||
### 2.1 Pola Umum
|
||||
|
||||
* **Layout dashboard dua kolom**
|
||||
|
||||
* Kolom kiri: monitoring visual (peta)
|
||||
* Kolom kanan: daftar laporan keamanan
|
||||
* Header KPI ringkas di bagian atas
|
||||
* Semua konten dibungkus dalam **card container** dengan radius konsisten
|
||||
|
||||
Grid:
|
||||
|
||||
* Desktop: 12-column grid
|
||||
* Tablet: 8-column grid
|
||||
* Mobile: 1-column (stack vertikal)
|
||||
|
||||
---
|
||||
|
||||
## 3. Komponen UI
|
||||
|
||||
### 3.1 KPI Cards (Header)
|
||||
|
||||
1. **CCTV Aktif**
|
||||
|
||||
* Value: `20`
|
||||
* Subtext: `Kamera Online`
|
||||
* Ikon: Kamera CCTV
|
||||
|
||||
2. **Laporan Keamanan**
|
||||
|
||||
* Value: `15`
|
||||
* Subtext: `Minggu ini`
|
||||
* Ikon: Chat / laporan
|
||||
|
||||
Perilaku:
|
||||
|
||||
* Tooltip saat hover (penjelasan metrik)
|
||||
* Klik opsional → navigasi ke halaman detail
|
||||
|
||||
---
|
||||
|
||||
### 3.2 Peta Keamanan CCTV
|
||||
|
||||
**Judul Card:** Peta Keamanan CCTV
|
||||
**Subjudul:** Titik Lokasi CCTV
|
||||
|
||||
Isi:
|
||||
|
||||
* Embedded map (Google Maps / Mapbox)
|
||||
* Marker lokasi CCTV
|
||||
|
||||
* Hijau: aktif
|
||||
* Abu-abu: offline (future)
|
||||
|
||||
Kontrol:
|
||||
|
||||
* Toggle tampilan (grid / fullscreen)
|
||||
* Zoom in / out
|
||||
|
||||
Interaksi:
|
||||
|
||||
* Klik marker → popup info CCTV
|
||||
|
||||
* ID CCTV
|
||||
* Lokasi
|
||||
* Status
|
||||
* Waktu terakhir aktif
|
||||
|
||||
---
|
||||
|
||||
### 3.3 Daftar Laporan Keamanan
|
||||
|
||||
**Judul:** Laporan Keamanan Lingkungan
|
||||
|
||||
Item laporan (card list):
|
||||
|
||||
* Judul kejadian (contoh: *Pencurian Motor*)
|
||||
* Timestamp relatif ("2 jam yang lalu")
|
||||
* Tanggal & jam
|
||||
* Lokasi kejadian
|
||||
* Badge status: `Baru`
|
||||
|
||||
Perilaku:
|
||||
|
||||
* Scrollable container
|
||||
* Klik item → detail laporan (modal / halaman baru)
|
||||
|
||||
---
|
||||
|
||||
## 4. Gaya & Tema Visual
|
||||
|
||||
### 4.1 Warna
|
||||
|
||||
* Primary: Navy Blue (`#1F3A5F` – perkiraan)
|
||||
* Background: Light Blue / Off-white (`#F5F9FC`)
|
||||
* Card: Putih
|
||||
* Success: Hijau (status aktif)
|
||||
* Alert: Merah muda / merah untuk laporan baru
|
||||
|
||||
### 4.2 Tipografi
|
||||
|
||||
* Font utama: Sans-serif modern (Inter / Poppins)
|
||||
* Heading: Semi-bold
|
||||
* Body text: Regular
|
||||
* Angka KPI: Bold
|
||||
|
||||
Ukuran relatif:
|
||||
|
||||
* Heading: 16–18px
|
||||
* Body: 13–14px
|
||||
* KPI Value: 22–28px
|
||||
|
||||
### 4.3 Spasi & Elevasi
|
||||
|
||||
* Padding card: 16–20px
|
||||
* Gap antar card: 16px
|
||||
* Border radius: 12–16px
|
||||
* Shadow ringan untuk card
|
||||
|
||||
---
|
||||
|
||||
## 5. Responsivitas
|
||||
|
||||
### Desktop
|
||||
|
||||
* Peta dan laporan tampil berdampingan
|
||||
|
||||
### Tablet
|
||||
|
||||
* KPI tetap horizontal
|
||||
* Peta dan laporan bisa stack 2 baris
|
||||
|
||||
### Mobile
|
||||
|
||||
* Semua komponen stack vertikal
|
||||
* Peta dalam mode scroll / fullscreen
|
||||
* List laporan menjadi full-width
|
||||
|
||||
---
|
||||
|
||||
## 6. Ekspektasi Interaksi & UX
|
||||
|
||||
* Hover state pada card & list item
|
||||
* Tooltip pada ikon KPI
|
||||
* Loading skeleton saat data fetch
|
||||
* Empty state bila tidak ada laporan
|
||||
* Badge status real-time (baru / diproses / selesai – future)
|
||||
|
||||
---
|
||||
|
||||
## 7. Ekspektasi Data (Backend Contract)
|
||||
|
||||
### 7.1 KPI Summary
|
||||
|
||||
```json
|
||||
{
|
||||
"cctvActive": 20,
|
||||
"securityReportsWeekly": 15
|
||||
}
|
||||
```
|
||||
|
||||
### 7.2 CCTV Locations
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id": "CCTV-01",
|
||||
"lat": -8.5,
|
||||
"lng": 115.2,
|
||||
"status": "active",
|
||||
"lastSeen": "2025-10-06T14:30:00Z"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 7.3 Security Reports
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"id": "REP-001",
|
||||
"title": "Pencurian Motor",
|
||||
"reportedAt": "2025-10-06T15:30:00Z",
|
||||
"location": "Jl. Kecubung 20",
|
||||
"status": "new"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Catatan Pengembangan Lanjutan
|
||||
|
||||
* Filter laporan berdasarkan jenis & waktu
|
||||
* Integrasi snapshot CCTV
|
||||
* Heatmap area rawan
|
||||
* Role-based access (admin / petugas)
|
||||
|
||||
---
|
||||
|
||||
Dokumen ini wajib diperbarui bila terdapat perubahan UI atau kebutuhan data pada modul **Keamanan**.
|
||||
239
Dashboard-MD/KINERJA-DIVISI-2.md
Normal file
239
Dashboard-MD/KINERJA-DIVISI-2.md
Normal file
@@ -0,0 +1,239 @@
|
||||
# KINERJA-DIVISI-2
|
||||
|
||||
## 1. Tujuan Halaman
|
||||
|
||||
Halaman **Kinerja Divisi** berfungsi sebagai dashboard operasional untuk memantau progres pekerjaan lintas divisi perangkat desa secara real-time, mencakup status tugas, arsip digital, kegiatan, diskusi internal, dan statistik pendukung.
|
||||
|
||||
Halaman ini dipakai oleh:
|
||||
|
||||
* Kepala Desa
|
||||
* Sekretaris Desa
|
||||
* Kepala Divisi
|
||||
* Admin Operasional
|
||||
|
||||
---
|
||||
|
||||
## 2. Struktur Tata Letak (Overall Layout)
|
||||
|
||||
### Pola Layout
|
||||
|
||||
* **Dashboard berbasis Card + Grid**
|
||||
* Scroll vertikal satu halaman
|
||||
* Tidak ada sidebar khusus (diasumsikan sudah ada global sidebar)
|
||||
|
||||
### Urutan Section (Top → Bottom)
|
||||
|
||||
1. Grafik Progres Tugas per Divisi
|
||||
2. Ringkasan Tugas per Divisi (Sekretariat, Keuangan, Sosial, Humas)
|
||||
3. Arsip Digital Perangkat Desa
|
||||
4. Kartu Progres Kegiatan (Event / Program)
|
||||
5. Statistik Dokumen & Progres Kegiatan
|
||||
6. Diskusi Internal
|
||||
7. Agenda / Acara Hari Ini
|
||||
|
||||
---
|
||||
|
||||
## 3. Komponen UI
|
||||
|
||||
### 3.1 Grafik Progres Tugas per Divisi
|
||||
|
||||
**Tipe:** Grouped Bar Chart
|
||||
|
||||
**Data:**
|
||||
|
||||
* Divisi: Sekretariat, Keuangan, Sosial, Humas
|
||||
* Status:
|
||||
|
||||
* Selesai
|
||||
* Berjalan
|
||||
* Tertunda
|
||||
|
||||
**Interaksi:**
|
||||
|
||||
* Hover tooltip menampilkan jumlah tugas
|
||||
* Legend clickable (toggle series)
|
||||
|
||||
---
|
||||
|
||||
### 3.2 Card Ringkasan Divisi
|
||||
|
||||
Setiap divisi memiliki satu card berisi daftar tugas.
|
||||
|
||||
**Struktur Card:**
|
||||
|
||||
* Judul divisi
|
||||
* List tugas:
|
||||
|
||||
* Nama tugas
|
||||
* Badge status: `selesai | proses | tertunda`
|
||||
|
||||
**Status Badge:**
|
||||
|
||||
* Hijau: Selesai
|
||||
* Kuning: Proses
|
||||
* Merah: Tertunda
|
||||
|
||||
---
|
||||
|
||||
### 3.3 Arsip Digital Perangkat Desa
|
||||
|
||||
**Tipe:** Action Card / Button Card
|
||||
|
||||
**Item:**
|
||||
|
||||
* Surat Keputusan
|
||||
* Laporan Keuangan
|
||||
* Dokumentasi
|
||||
* Notulensi Rapat
|
||||
|
||||
**Interaksi:**
|
||||
|
||||
* Klik membuka modul arsip
|
||||
* Role-based access (view / upload)
|
||||
|
||||
---
|
||||
|
||||
### 3.4 Progres Kegiatan / Program
|
||||
|
||||
**Tipe:** Progress Card
|
||||
|
||||
**Isi:**
|
||||
|
||||
* Nama kegiatan
|
||||
* Progress bar horizontal
|
||||
* Tanggal
|
||||
* Badge status (selesai)
|
||||
|
||||
---
|
||||
|
||||
### 3.5 Statistik Dokumen
|
||||
|
||||
#### a. Jumlah Dokumen
|
||||
|
||||
**Tipe:** Bar Chart
|
||||
|
||||
* Kategori: Gambar, Dokumen
|
||||
|
||||
#### b. Progres Kegiatan
|
||||
|
||||
**Tipe:** Pie Chart
|
||||
|
||||
**Status:**
|
||||
|
||||
* Selesai
|
||||
* Dikerjakan
|
||||
* Segera Dikerjakan
|
||||
* Dibatalkan
|
||||
|
||||
---
|
||||
|
||||
### 3.6 Diskusi Internal
|
||||
|
||||
**Tipe:** List Card
|
||||
|
||||
**Isi:**
|
||||
|
||||
* Judul diskusi
|
||||
* Pengirim
|
||||
* Timestamp
|
||||
|
||||
**Interaksi:**
|
||||
|
||||
* Klik membuka thread diskusi
|
||||
|
||||
---
|
||||
|
||||
### 3.7 Agenda / Acara Hari Ini
|
||||
|
||||
**Tipe:** Informational Card
|
||||
|
||||
**State:**
|
||||
|
||||
* Empty state: "Tidak ada acara hari ini"
|
||||
|
||||
---
|
||||
|
||||
## 4. Gaya & Tema Visual
|
||||
|
||||
### 4.1 Warna
|
||||
|
||||
* Background utama: `#0F172A` / `#111827`
|
||||
* Card: `#1E293B`
|
||||
* Primary accent: Biru tua
|
||||
* Success: Hijau
|
||||
* Warning: Kuning
|
||||
* Danger: Merah
|
||||
|
||||
### 4.2 Tipografi
|
||||
|
||||
* Font utama: **Inter / Poppins**
|
||||
* Heading: Semi-bold
|
||||
* Body: Regular
|
||||
* Angka & statistik: Medium
|
||||
|
||||
### 4.3 Spasi & Radius
|
||||
|
||||
* Padding card: 16–24px
|
||||
* Gap grid: 16–20px
|
||||
* Border radius: 12–16px
|
||||
|
||||
---
|
||||
|
||||
## 5. Responsivitas
|
||||
|
||||
### Desktop
|
||||
|
||||
* Multi-column grid (2–4 kolom)
|
||||
|
||||
### Tablet
|
||||
|
||||
* Grid 2 kolom
|
||||
* Grafik full-width
|
||||
|
||||
### Mobile
|
||||
|
||||
* Semua card 1 kolom
|
||||
* Chart di-scroll horizontal bila perlu
|
||||
|
||||
---
|
||||
|
||||
## 6. Ekspektasi Interaksi & Data
|
||||
|
||||
### 6.1 State Management
|
||||
|
||||
* Filter status tugas
|
||||
* Sinkronisasi real-time (polling / websocket)
|
||||
|
||||
### 6.2 Contoh Struktur Data
|
||||
|
||||
```json
|
||||
{
|
||||
"division": "Keuangan",
|
||||
"tasks": [
|
||||
{ "title": "Laporan APBDes", "status": "selesai" },
|
||||
{ "title": "Verifikasi Dana", "status": "tertunda" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Acceptance Criteria
|
||||
|
||||
* Semua status warna konsisten
|
||||
* Chart sesuai data backend
|
||||
* Empty state ditampilkan bila data kosong
|
||||
* Mobile friendly tanpa overflow
|
||||
|
||||
---
|
||||
|
||||
## 8. Catatan Implementasi
|
||||
|
||||
* Chart library: Chart.js / Recharts / ECharts
|
||||
* Dark mode default
|
||||
* Akses berbasis role (viewer, editor, admin)
|
||||
|
||||
---
|
||||
|
||||
**Status Dokumen:** Final Draft
|
||||
**Digunakan untuk:** Implementasi Frontend & Kontrak API
|
||||
225
Dashboard-MD/PENGAUDAN.md
Normal file
225
Dashboard-MD/PENGAUDAN.md
Normal file
@@ -0,0 +1,225 @@
|
||||
# PENGADUAN-2.md
|
||||
|
||||
## 1. Tujuan Halaman
|
||||
|
||||
Dashboard **Pengaduan Masyarakat** berfungsi untuk memantau, menganalisis, dan menindaklanjuti pengaduan warga secara real-time. Halaman ini mendukung **Light Mode** dan **Dark Mode** dengan struktur UI dan interaksi yang konsisten.
|
||||
|
||||
---
|
||||
|
||||
## 2. Struktur Komponen UI
|
||||
|
||||
### 2.1 Summary Cards (Statistik Utama)
|
||||
|
||||
Menampilkan ringkasan status pengaduan bulan berjalan.
|
||||
|
||||
**Komponen:**
|
||||
|
||||
* Total Pengaduan
|
||||
* Baru (Belum diproses)
|
||||
* Diproses (Sedang ditangani)
|
||||
* Selesai (Terselesaikan)
|
||||
|
||||
**Elemen UI:**
|
||||
|
||||
* Angka utama (bold, besar)
|
||||
* Label deskriptif
|
||||
* Ikon status (chat, alert, clock, check)
|
||||
|
||||
**Interaksi:**
|
||||
|
||||
* Hover: efek elevasi + highlight border
|
||||
* Click (opsional): filter dashboard berdasarkan status
|
||||
|
||||
---
|
||||
|
||||
### 2.2 Grafik Tren Pengaduan (Line Chart)
|
||||
|
||||
Menampilkan jumlah pengaduan per bulan.
|
||||
|
||||
**Komponen:**
|
||||
|
||||
* Sumbu X: Bulan
|
||||
* Sumbu Y: Jumlah pengaduan
|
||||
* Garis tren + titik data
|
||||
|
||||
**Interaksi:**
|
||||
|
||||
* Tooltip saat hover (bulan & jumlah)
|
||||
* Toggle range waktu (bulanan/tahunan – opsional)
|
||||
|
||||
---
|
||||
|
||||
### 2.3 Surat Terbanyak (Horizontal Bar Chart)
|
||||
|
||||
Menunjukkan jenis surat/pengaduan yang paling sering diajukan.
|
||||
|
||||
**Contoh Data:**
|
||||
|
||||
* KTP
|
||||
* KK
|
||||
* Domisili
|
||||
* Usaha
|
||||
* Lainnya
|
||||
|
||||
**Interaksi:**
|
||||
|
||||
* Hover tooltip
|
||||
* Click bar → filter daftar pengajuan
|
||||
|
||||
---
|
||||
|
||||
### 2.4 Pengajuan Terbaru (List)
|
||||
|
||||
Daftar pengaduan terbaru dari warga.
|
||||
|
||||
**Isi Item:**
|
||||
|
||||
* Nama pengaju
|
||||
* Jenis pengaduan
|
||||
* Waktu pengajuan
|
||||
* Badge status: Baru / Diproses / Selesai
|
||||
|
||||
**Interaksi:**
|
||||
|
||||
* Click item → halaman detail
|
||||
* Scrollable list
|
||||
|
||||
---
|
||||
|
||||
### 2.5 Ajuan Ide Inovatif (List)
|
||||
|
||||
Menampilkan ide/inisiatif warga untuk desa.
|
||||
|
||||
**Isi Item:**
|
||||
|
||||
* Nama pengaju
|
||||
* Judul ide
|
||||
* Kategori
|
||||
* Tombol "Detail"
|
||||
|
||||
---
|
||||
|
||||
## 3. Tata Letak Keseluruhan (Layout)
|
||||
|
||||
**Desktop:**
|
||||
|
||||
* Grid 12 kolom
|
||||
* Baris 1: 4 Summary Cards
|
||||
* Baris 2: Line Chart (full width)
|
||||
* Baris 3: 3 kolom (Bar Chart, Pengajuan Terbaru, Ide Inovatif)
|
||||
|
||||
**Tablet:**
|
||||
|
||||
* Summary card 2x2
|
||||
* Chart full width
|
||||
* List stack vertikal
|
||||
|
||||
**Mobile:**
|
||||
|
||||
* Semua komponen stacked
|
||||
* Chart scroll horizontal
|
||||
|
||||
---
|
||||
|
||||
## 4. Gaya & Tema Visual
|
||||
|
||||
### 4.1 Light Mode
|
||||
|
||||
**Warna:**
|
||||
|
||||
* Background utama: #F6F9FC
|
||||
* Card: #FFFFFF
|
||||
* Primary: #2563EB (Blue)
|
||||
* Text utama: #0F172A
|
||||
* Text sekunder: #64748B
|
||||
* Border: #E2E8F0
|
||||
|
||||
**Chart:**
|
||||
|
||||
* Line: Biru
|
||||
* Bar: Biru tua
|
||||
* Grid: Abu muda
|
||||
|
||||
---
|
||||
|
||||
### 4.2 Dark Mode
|
||||
|
||||
**Warna:**
|
||||
|
||||
* Background utama: #0B1220
|
||||
* Card: #111827 / #0F172A
|
||||
* Primary: #3B82F6
|
||||
* Text utama: #E5E7EB
|
||||
* Text sekunder: #9CA3AF
|
||||
* Border: #1F2937
|
||||
|
||||
**Chart:**
|
||||
|
||||
* Line: Biru terang
|
||||
* Bar: Biru medium
|
||||
* Grid: Abu gelap
|
||||
|
||||
---
|
||||
|
||||
## 5. Tipografi
|
||||
|
||||
* Font utama: Inter / Poppins
|
||||
* Heading: 600–700
|
||||
* Body: 400–500
|
||||
* Angka statistik: 700
|
||||
|
||||
---
|
||||
|
||||
## 6. Spasi & Radius
|
||||
|
||||
* Padding card: 16–24px
|
||||
* Gap grid: 16–24px
|
||||
* Border radius card: 12–16px
|
||||
* Icon container: circle / rounded-full
|
||||
|
||||
---
|
||||
|
||||
## 7. Responsivitas
|
||||
|
||||
* Mobile-first
|
||||
* Breakpoint umum: 640px, 768px, 1024px
|
||||
* Chart auto-resize
|
||||
* List menjadi full-width
|
||||
|
||||
---
|
||||
|
||||
## 8. Ekspektasi Data & Interaksi Backend
|
||||
|
||||
### 8.1 Contoh Data Summary
|
||||
|
||||
```json
|
||||
{
|
||||
"total": 42,
|
||||
"baru": 14,
|
||||
"diproses": 14,
|
||||
"selesai": 14
|
||||
}
|
||||
```
|
||||
|
||||
### 8.2 Contoh Data Tren
|
||||
|
||||
```json
|
||||
[
|
||||
{ "bulan": "Apr", "jumlah": 30 },
|
||||
{ "bulan": "Mei", "jumlah": 50 },
|
||||
{ "bulan": "Jun", "jumlah": 42 }
|
||||
]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Catatan Teknis
|
||||
|
||||
* Chart: Recharts / Chart.js / ECharts
|
||||
* State: loading, empty, error
|
||||
* Theme switch: CSS variable / Tailwind dark mode
|
||||
* Konsistensi warna status di seluruh modul
|
||||
|
||||
---
|
||||
|
||||
Dokumen ini menjadi **UI Spec + UX Contract** untuk modul Pengaduan dan siap diturunkan ke desain Figma maupun implementasi Frontend.
|
||||
37
Dashboard-MD/SIDEBAR.md
Normal file
37
Dashboard-MD/SIDEBAR.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# SIDEBAR.md
|
||||
## Spesifikasi Sidebar Navigasi – DESA+
|
||||
|
||||
### Tujuan
|
||||
Membuat sidebar navigasi dengan **indikator menu aktif (isActive)** seperti pada desain:
|
||||
- Menu aktif memiliki **background biru muda**
|
||||
- Ada **indikator garis vertikal di sisi kiri**
|
||||
- Status aktif mengikuti **route/path yang sedang dibuka**
|
||||
|
||||
---
|
||||
## Perilaku isActive
|
||||
|
||||
### Definisi isActive
|
||||
Sebuah menu dianggap **aktif** jika:
|
||||
- `currentPath === menu.path`
|
||||
- atau (opsional) `currentPath.startsWith(menu.path)` untuk nested route
|
||||
|
||||
---
|
||||
|
||||
## Tampilan Menu Aktif
|
||||
|
||||
Jika menu **AKTIF**, maka:
|
||||
- Background: `#E6F0FF` (biru muda)
|
||||
- Text: bold / semibold
|
||||
- Border kiri:
|
||||
- Lebar: `4px`
|
||||
- Warna: `#1E40AF` (biru tua)
|
||||
- Border radius: `8px`
|
||||
- Transition halus (`150–200ms`)
|
||||
|
||||
Jika menu **TIDAK AKTIF**:
|
||||
- Background transparan
|
||||
- Text normal
|
||||
- Hover state:
|
||||
- Background `#F1F5F9`
|
||||
|
||||
---
|
||||
230
Dashboard-MD/SOSIAL.md
Normal file
230
Dashboard-MD/SOSIAL.md
Normal file
@@ -0,0 +1,230 @@
|
||||
# SOSIAL.md
|
||||
|
||||
Dokumen ini mendeskripsikan spesifikasi UI/UX, tata letak, gaya visual, serta ekspektasi data & interaksi untuk **Halaman Sosial Desa**. Digunakan sebagai acuan bersama antara UI/UX Designer, Frontend Developer, dan Backend/API.
|
||||
|
||||
---
|
||||
|
||||
## 1. Tujuan Halaman
|
||||
|
||||
Halaman **Sosial** berfungsi sebagai dashboard monitoring:
|
||||
|
||||
* Kesehatan masyarakat (ibu hamil, balita, stunting)
|
||||
* Aktivitas Posyandu
|
||||
* Pendidikan desa
|
||||
* Beasiswa
|
||||
* Event sosial & budaya
|
||||
|
||||
Fokus utama: **ringkas, informatif, real-time friendly**, dan mudah dipahami perangkat desa.
|
||||
|
||||
---
|
||||
|
||||
## 2. Tata Letak Keseluruhan
|
||||
|
||||
### Struktur Global
|
||||
|
||||
* **Sidebar kiri (persisten)**
|
||||
|
||||
* Navigasi utama aplikasi desa
|
||||
* Menu aktif: `Sosial`
|
||||
|
||||
* **Topbar**
|
||||
|
||||
* Nama desa
|
||||
* Profil user (Kepala Desa)
|
||||
* Notifikasi
|
||||
* Toggle tema (opsional)
|
||||
|
||||
* **Main Content Area (scrollable)**
|
||||
|
||||
* Grid berbasis card
|
||||
* Layout desktop: 2–3 kolom
|
||||
* Mobile: 1 kolom (stack)
|
||||
|
||||
---
|
||||
|
||||
## 3. Komponen UI
|
||||
|
||||
### 3.1 Statistik Kesehatan (Summary Cards)
|
||||
|
||||
**Tipe:** KPI Cards
|
||||
|
||||
| Komponen | Deskripsi |
|
||||
| ---------------- | -------------------------------- |
|
||||
| Ibu Hamil Aktif | Total ibu hamil aktif saat ini |
|
||||
| Balita Terdaftar | Total balita tercatat |
|
||||
| Alert Stunting | Jumlah kasus/peringatan stunting |
|
||||
| Posyandu Aktif | Jumlah posyandu yang aktif |
|
||||
|
||||
**Elemen UI:**
|
||||
|
||||
* Angka besar (headline)
|
||||
* Label kecil
|
||||
* Ikon kontekstual
|
||||
|
||||
---
|
||||
|
||||
### 3.2 Statistik Kesehatan (Progress Bar)
|
||||
|
||||
Menampilkan capaian dalam bentuk **horizontal progress bar**:
|
||||
|
||||
* Imunisasi Lengkap
|
||||
* Pemeriksaan Rutin
|
||||
* Gizi Baik
|
||||
* Target Stunting
|
||||
|
||||
**Behavior:**
|
||||
|
||||
* Persentase dinamis
|
||||
* Warna bar menyesuaikan status (normal / warning)
|
||||
|
||||
---
|
||||
|
||||
### 3.3 Jadwal Posyandu
|
||||
|
||||
**Tipe:** List Card
|
||||
|
||||
Setiap item menampilkan:
|
||||
|
||||
* Nama Posyandu
|
||||
* Tanggal
|
||||
* Jam kegiatan
|
||||
|
||||
**Interaksi (opsional):**
|
||||
|
||||
* Klik item → detail jadwal
|
||||
* Filter berdasarkan wilayah / tanggal
|
||||
|
||||
---
|
||||
|
||||
### 3.4 Pendidikan
|
||||
|
||||
**Tipe:** Informational List
|
||||
|
||||
#### Data Siswa
|
||||
|
||||
* TK / PAUD
|
||||
* SD
|
||||
* SMP
|
||||
* SMA
|
||||
|
||||
#### Info Sekolah
|
||||
|
||||
* Jumlah lembaga pendidikan
|
||||
* Jumlah tenaga pengajar
|
||||
|
||||
Layout sederhana, fokus ke angka.
|
||||
|
||||
---
|
||||
|
||||
### 3.5 Beasiswa Desa
|
||||
|
||||
**Tipe:** Highlight Card
|
||||
|
||||
* Jumlah penerima beasiswa
|
||||
* Total dana tersalurkan
|
||||
* Tahun ajaran
|
||||
|
||||
Digunakan sebagai **headline informasi bantuan pendidikan**.
|
||||
|
||||
---
|
||||
|
||||
### 3.6 Kalender Event Budaya
|
||||
|
||||
**Tipe:** Event List
|
||||
|
||||
Setiap event:
|
||||
|
||||
* Nama kegiatan
|
||||
* Tanggal
|
||||
* Lokasi
|
||||
|
||||
**Interaksi:**
|
||||
|
||||
* Klik → detail event
|
||||
* Potensi integrasi kalender
|
||||
|
||||
---
|
||||
|
||||
## 4. Gaya & Tema Visual
|
||||
|
||||
### Warna
|
||||
|
||||
* **Primary:** Biru navy (#1F3A5F – estimasi)
|
||||
* **Secondary:** Biru muda / abu terang
|
||||
* **Success:** Hijau
|
||||
* **Warning:** Oranye / Merah (stunting alert)
|
||||
|
||||
### Font
|
||||
|
||||
* Sans-serif modern (Inter / Poppins)
|
||||
* Hierarki jelas:
|
||||
|
||||
* Judul card
|
||||
* Angka utama
|
||||
* Label kecil
|
||||
|
||||
### Spasi & Bentuk
|
||||
|
||||
* Padding card: 16–24px
|
||||
* Border radius: 12–16px
|
||||
* Shadow ringan (soft elevation)
|
||||
|
||||
---
|
||||
|
||||
## 5. Responsivitas
|
||||
|
||||
### Desktop
|
||||
|
||||
* Grid 2–3 kolom
|
||||
* Semua card terlihat tanpa overflow horizontal
|
||||
|
||||
### Tablet
|
||||
|
||||
* Grid 2 kolom
|
||||
|
||||
### Mobile
|
||||
|
||||
* 1 kolom (stack)
|
||||
* KPI cards jadi swipe / vertical list
|
||||
|
||||
---
|
||||
|
||||
## 6. Ekspektasi Interaksi & Data
|
||||
|
||||
### Interaksi Umum
|
||||
|
||||
* Hover state pada card
|
||||
* Click-through ke halaman detail
|
||||
* Data auto-refresh (optional)
|
||||
|
||||
### Ekspektasi API (contoh)
|
||||
|
||||
```json
|
||||
{
|
||||
"ibu_hamil": 87,
|
||||
"balita": 342,
|
||||
"alert_stunting": 12,
|
||||
"posyandu_aktif": 8,
|
||||
"kesehatan": {
|
||||
"imunisasi": 92,
|
||||
"pemeriksaan": 88,
|
||||
"gizi": 86,
|
||||
"stunting": 14
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Acceptance Checklist
|
||||
|
||||
* [ ] Semua data tampil konsisten
|
||||
* [ ] Tidak ada overflow di mobile
|
||||
* [ ] Progress bar sesuai persentase
|
||||
* [ ] Event & jadwal dapat diklik
|
||||
* [ ] Alert stunting terlihat jelas
|
||||
|
||||
---
|
||||
|
||||
**Catatan:**
|
||||
Dokumen ini bersifat living document dan dapat diperluas ke modul detail (kesehatan, pendidikan, bantuan sosial).
|
||||
Reference in New Issue
Block a user