feat: add demografi pekerjaan component and update charts

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
2026-02-11 14:35:46 +08:00
parent ca2f97fa47
commit c4fd7bb784
10 changed files with 1020 additions and 21 deletions
--- a/Dashboard-MD/KEUANGAN_ANGGARAN.md
+++ b/Dashboard-MD/KEUANGAN_ANGGARAN.md
@@ -0,0 +1,315 @@
+# Keuangan & Anggaran – Dashboard Design Specification
+
+Dokumen ini menjelaskan spesifikasi desain halaman **Keuangan & Anggaran** berdasarkan screenshot (11 Feb 2026). Dokumen ini berfungsi sebagai **design system + data contract** untuk implementasi frontend dan backend.
+
+---
+
+## 1. Tujuan Halaman
+
+Halaman **Keuangan & Anggaran** bertujuan untuk:
+
+* Menampilkan ringkasan APBDes
+* Memantau realisasi anggaran
+* Membandingkan pemasukan vs pengeluaran
+* Melihat alokasi anggaran per sektor
+* Transparansi laporan keuangan desa
+
+Target pengguna:
+
+* Kepala Desa
+* Bendahara Desa
+* Admin Keuangan
+
+---
+
+## 2. Tata Letak Keseluruhan
+
+### 2.1 Struktur Layout Global
+
+```
+------------------------------------------------------+
+| Topbar / Header                                      |
+-------------+----------------------------------------+
+| Sidebar     | Main Content                           |
+|             | - KPI Keuangan                         |
+|             | - Grafik Pemasukan vs Pengeluaran      |
+|             | - Alokasi Anggaran + Dana Bantuan      |
+|             | - Laporan APBDes                       |
+-------------+----------------------------------------+
+```
+
+* Sidebar: fixed kiri
+* Header: fixed atas
+* Konten utama: scroll vertikal
+
+---
+
+## 3. Header (Topbar)
+
+### Komponen
+
+* Nama aplikasi: `Desa Darmasaba`
+* User info:
+
+  * Nama: `I. B. Surya Prabhawa M.`
+  * Role: `Kepala Desa`
+* Ikon:
+
+  * Notifikasi (badge)
+  * Pengaturan / tema
+  * Avatar user
+
+### Gaya
+
+* Background: Navy / Biru Tua
+* Text: Putih
+* Tinggi: ±64px
+
+---
+
+## 4. Sidebar Navigation
+
+### Menu Aktif
+
+* **Keuangan & Anggaran** (active)
+
+Menu lain mengikuti standar global dashboard.
+
+### Gaya
+
+* Background: Putih
+* Active state: Biru muda + indicator kiri
+* Spacing item: 12–16px
+
+---
+
+## 5. KPI Keuangan (Ringkasan Atas)
+
+### KPI Cards
+
+1. **Total APBDes**
+
+   * Value: `5.2M`
+   * Sub: Tahun 2025
+
+2. **Realisasi**
+
+   * Value: `68%`
+   * Sub: `3.5M dari 5.2M`
+
+3. **Pemasukan**
+
+   * Value: `580jt`
+   * Sub: Bulan ini
+   * Delta: `+8%`
+
+4. **Pengeluaran**
+
+   * Value: `520jt`
+   * Sub: Bulan ini
+
+### Gaya
+
+* Card putih
+* Border radius: 14–16px
+* Icon lingkaran kanan
+* Shadow lembut
+
+---
+
+## 6. Grafik Pemasukan vs Pengeluaran
+
+### Deskripsi
+
+* Tipe: Line Chart (2 series)
+* Judul: `Pemasukan vs Pengeluaran`
+* X-axis: Bulan (Apr – Okt)
+* Y-axis: Nilai (juta rupiah)
+
+### Warna
+
+* Pemasukan: Hijau
+* Pengeluaran: Merah
+
+### Interaksi
+
+* Tooltip hover
+* Legend clickable (show/hide series)
+
+### Data
+
+```ts
+{
+  month: string;
+  income: number; // juta
+  expense: number; // juta
+}
+```
+
+---
+
+## 7. Alokasi Anggaran Per Sektor
+
+### Deskripsi
+
+* Tipe: Horizontal Bar Chart
+* Sektor:
+
+  * Pembangunan
+  * Kesehatan
+  * Pendidikan
+  * Sosial
+  * Kebudayaan
+  * Teknologi
+
+### Gaya
+
+* Bar: Navy
+* Label kiri
+
+### Data
+
+```ts
+{
+  sector: string;
+  amount: number; // juta
+}
+```
+
+---
+
+## 8. Dana Bantuan & Hibah
+
+### Deskripsi
+
+* Tipe: List / Card
+* Item:
+
+  * Dana Desa (DD) – 1.8M – *cair*
+  * Alokasi Dana Desa (ADD) – 950jt – *cair*
+  * Bagi Hasil Pajak – 450jt – *cair*
+  * Hibah Provinsi – 300jt – *proses*
+
+### Gaya
+
+* Status badge:
+
+  * Cair: Hijau
+  * Proses: Kuning
+
+### Data
+
+```ts
+{
+  source: string;
+  amount: number;
+  status: 'cair' | 'proses';
+}
+```
+
+---
+
+## 9. Laporan APBDes
+
+### Struktur
+
+#### Pendapatan
+
+* Dana Desa – Rp 1.8M
+* Alokasi Dana Desa – Rp 480jt
+* Bagi Hasil Pajak & Retribusi – Rp 300jt
+* Pendapatan Asli Desa – Rp 200jt
+* Hibah Bantuan – Rp 300jt
+
+**Total Pendapatan: Rp 3M**
+
+#### Belanja
+
+* Penyelenggaraan Pemerintah – Rp 425jt
+* Pembangunan Desa – Rp 850jt
+* Pembinaan Kemasyarakatan – Rp 320jt
+* Pemberdayaan Masyarakat – Rp 380jt
+* Penanggulangan Bencana – Rp 180jt
+
+**Total Belanja: Rp 2.1M**
+
+### Gaya
+
+* Layout dua kolom
+* Pendapatan: teks hijau
+* Belanja: teks merah
+
+---
+
+## 10. Warna & Tema
+
+### Palette
+
+* Primary (Navy): `#1E3A5F`
+* Success (Hijau): `#22C55E`
+* Danger (Merah): `#EF4444`
+* Secondary: `#3B82F6`
+* Background App: `#F5F8FB`
+
+---
+
+## 11. Tipografi
+
+* Font: Inter / Poppins / system-ui
+* Heading: Semi-bold
+* Body: Regular
+* Nilai angka: Bold
+
+---
+
+## 12. Spasi & Grid
+
+* Padding card: 16–24px
+* Gap antar section: 24–32px
+* Line-height: 1.5
+
+---
+
+## 13. Responsivitas
+
+### Tablet
+
+* KPI jadi 2 kolom
+* Chart full width
+
+### Mobile
+
+* Sidebar jadi drawer
+* KPI 1 kolom
+* Grafik scroll horizontal jika perlu
+
+---
+
+## 14. Interaksi & Perilaku
+
+* Hover card: shadow naik
+* Tooltip chart
+* Badge status dinamis
+* Data async via API
+
+---
+
+## 15. Catatan Implementasi Teknis
+
+* Framework: React + Vite
+* UI Kit: Mantine / Shadcn / MUI
+* Chart: Recharts / Chart.js
+* Data: TanStack Query
+
+---
+
+## 16. Pengembangan Lanjutan
+
+* Filter per tahun / bulan
+* Export laporan (PDF / Excel)
+* Drill-down transaksi
+* Audit log perubahan
+
+---
+
+> Dokumen ini menjadi referensi utama implementasi halaman **Keuangan & Anggaran**.