feat: add demografi pekerjaan component and update charts
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
347
Dashboard-MD/DEMOGRAFI_KEPENDUDUKAN.md
Normal file
347
Dashboard-MD/DEMOGRAFI_KEPENDUDUKAN.md
Normal file
@@ -0,0 +1,347 @@
|
||||
# Demografi & Kependudukan – Dashboard Design Specification
|
||||
|
||||
Dokumen ini menjelaskan spesifikasi desain halaman **Demografi & Kependudukan** berdasarkan screenshot (11 Feb 2026). Dokumen ini berfungsi sebagai **design + data contract** untuk implementasi frontend dan backend.
|
||||
|
||||
---
|
||||
|
||||
## 1. Tujuan Halaman
|
||||
|
||||
Halaman **Demografi & Kependudukan** digunakan untuk:
|
||||
|
||||
* Monitoring kondisi penduduk desa secara ringkas
|
||||
* Analisis umur, pekerjaan, agama
|
||||
* Distribusi penduduk per wilayah (banjar)
|
||||
* Dinamika penduduk (lahir, meninggal, migrasi)
|
||||
|
||||
Target user:
|
||||
|
||||
* Kepala Desa
|
||||
* Admin Kependudukan
|
||||
* Perencana Desa
|
||||
|
||||
---
|
||||
|
||||
## 2. Tata Letak Keseluruhan
|
||||
|
||||
### 2.1 Struktur Layout
|
||||
|
||||
```
|
||||
+------------------------------------------------------+
|
||||
| Topbar / Header |
|
||||
+-------------+----------------------------------------+
|
||||
| Sidebar | Main Content |
|
||||
| | - KPI Kependudukan |
|
||||
| | - Grafik Umur & Pekerjaan |
|
||||
| | - Agama + Data per Banjar |
|
||||
| | - Statistik Dinamika |
|
||||
+-------------+----------------------------------------+
|
||||
```
|
||||
|
||||
* Sidebar: fixed di kiri
|
||||
* Header: fixed di atas
|
||||
* Konten utama: scroll vertikal
|
||||
|
||||
---
|
||||
|
||||
## 3. Header (Topbar)
|
||||
|
||||
### Komponen
|
||||
|
||||
* Judul aplikasi: `Desa Darmasaba`
|
||||
* User info:
|
||||
|
||||
* Nama: `I. B. Surya Prabhawa M.`
|
||||
* Role: `Kepala Desa`
|
||||
* Ikon:
|
||||
|
||||
* Notifikasi (badge)
|
||||
* Toggle tema
|
||||
* Avatar user
|
||||
|
||||
### Gaya
|
||||
|
||||
* Background: Biru tua / Navy
|
||||
* Teks: Putih
|
||||
* Tinggi: ±64px
|
||||
|
||||
---
|
||||
|
||||
## 4. Sidebar Navigation
|
||||
|
||||
### Menu
|
||||
|
||||
* Beranda
|
||||
* Kinerja Divisi
|
||||
* Pengaduan & Layanan Publik
|
||||
* Jenna Analytic
|
||||
* **Demografi & Kependudukan (active)**
|
||||
* Keuangan & Anggaran
|
||||
* Bumdes & UMKM Desa
|
||||
* Sosial
|
||||
* Keamanan
|
||||
* Bantuan
|
||||
* Pengaturan
|
||||
|
||||
### Gaya
|
||||
|
||||
* Background: Putih
|
||||
* Active state: biru muda + indicator kiri
|
||||
* Spacing menu: 12–16px
|
||||
|
||||
---
|
||||
|
||||
## 5. KPI Kependudukan (Row Atas)
|
||||
|
||||
### KPI Cards
|
||||
|
||||
1. **Total Penduduk**
|
||||
|
||||
* Value: `5.634`
|
||||
* Sub: Aktif terdaftar
|
||||
|
||||
2. **Kepala Keluarga**
|
||||
|
||||
* Value: `1.354`
|
||||
* Sub: Total KK
|
||||
|
||||
3. **Kelahiran**
|
||||
|
||||
* Value: `23`
|
||||
* Sub: Tahun ini
|
||||
|
||||
4. **Kemiskinan**
|
||||
|
||||
* Value: `324`
|
||||
* Delta: `-10% dari tahun lalu`
|
||||
|
||||
### Gaya
|
||||
|
||||
* Card putih
|
||||
* Border radius: 14–16px
|
||||
* Icon lingkaran di kanan
|
||||
* Shadow lembut
|
||||
|
||||
---
|
||||
|
||||
## 6. Grafik Pengelompokan Umur
|
||||
|
||||
### Deskripsi
|
||||
|
||||
* Tipe: Bar Chart
|
||||
* X-axis:
|
||||
|
||||
* 17–25 thn
|
||||
* 26–35 thn
|
||||
* 36–45 thn
|
||||
* 46–55 thn
|
||||
* 56–65 thn
|
||||
* 65+ thn
|
||||
* Y-axis: jumlah penduduk
|
||||
|
||||
### Gaya
|
||||
|
||||
* Warna bar: Navy
|
||||
* Grid minimal
|
||||
* Tooltip saat hover
|
||||
|
||||
### Data
|
||||
|
||||
```ts
|
||||
{
|
||||
ageRange: string;
|
||||
total: number;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Demografi Pekerjaan
|
||||
|
||||
### Deskripsi
|
||||
|
||||
* Tipe: Bar Chart
|
||||
* Kategori:
|
||||
|
||||
* Sipil
|
||||
* Guru
|
||||
* Petani
|
||||
* Pedagang
|
||||
* Wiraswasta
|
||||
|
||||
### Gaya
|
||||
|
||||
* Warna bar: Navy
|
||||
* Tinggi chart medium
|
||||
|
||||
### Data
|
||||
|
||||
```ts
|
||||
{
|
||||
job: string;
|
||||
total: number;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Distribusi Agama
|
||||
|
||||
### Deskripsi
|
||||
|
||||
* Tipe: Pie / Donut Chart
|
||||
* Kategori:
|
||||
|
||||
* Hindu – 4.234
|
||||
* Islam – 856
|
||||
* Kristen – 412
|
||||
* Buddha – 202
|
||||
|
||||
### Gaya
|
||||
|
||||
* Warna berbeda per agama
|
||||
* Legend di sekitar chart
|
||||
|
||||
### Data
|
||||
|
||||
```ts
|
||||
{
|
||||
religion: string;
|
||||
total: number;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9. Data per Banjar
|
||||
|
||||
### Deskripsi
|
||||
|
||||
* Tipe: Table
|
||||
* Kolom:
|
||||
|
||||
* Banjar
|
||||
* Penduduk
|
||||
* KK
|
||||
* Miskin
|
||||
|
||||
### Contoh Data
|
||||
|
||||
* Banjar Darmasaba
|
||||
* Banjar Manesa
|
||||
* Banjar Cabe
|
||||
* Banjar Penenjoan
|
||||
* Banjar Baler Pasar
|
||||
* Banjar Bucu
|
||||
|
||||
### Gaya
|
||||
|
||||
* Table bersih
|
||||
* Header bold
|
||||
* Angka miskin berwarna merah
|
||||
|
||||
### Data
|
||||
|
||||
```ts
|
||||
{
|
||||
banjar: string;
|
||||
population: number;
|
||||
kk: number;
|
||||
poor: number;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10. Statistik Dinamika Penduduk
|
||||
|
||||
### KPI Mini Cards
|
||||
|
||||
* Kelahiran: `23`
|
||||
* Kematian: `12`
|
||||
* Pindah Masuk: `45`
|
||||
* Pindah Keluar: `32`
|
||||
|
||||
### Gaya
|
||||
|
||||
* Card kecil
|
||||
* Icon panah / lokasi
|
||||
* Warna indikator:
|
||||
|
||||
* Hijau (positif)
|
||||
* Merah (negatif)
|
||||
|
||||
---
|
||||
|
||||
## 11. Warna & Tema
|
||||
|
||||
### Palette
|
||||
|
||||
* Primary (Navy): `#1E3A5F`
|
||||
* Secondary: `#3B82F6`
|
||||
* Success: `#22C55E`
|
||||
* Warning: `#FACC15`
|
||||
* Danger: `#EF4444`
|
||||
* Background App: `#F5F8FB`
|
||||
|
||||
---
|
||||
|
||||
## 12. Tipografi
|
||||
|
||||
* Font: Inter / Poppins / system-ui
|
||||
* Heading: Semi-bold
|
||||
* Body: Regular
|
||||
* Angka KPI: Bold, besar
|
||||
|
||||
---
|
||||
|
||||
## 13. Spasi & Grid
|
||||
|
||||
* Padding card: 16–24px
|
||||
* Gap antar grid: 20–24px
|
||||
* Line-height: 1.5
|
||||
|
||||
---
|
||||
|
||||
## 14. Responsivitas
|
||||
|
||||
### Tablet
|
||||
|
||||
* KPI jadi 2 kolom
|
||||
* Grafik stack vertikal
|
||||
|
||||
### Mobile
|
||||
|
||||
* Sidebar jadi drawer
|
||||
* Semua konten 1 kolom
|
||||
* Table scroll horizontal
|
||||
|
||||
---
|
||||
|
||||
## 15. Interaksi & Perilaku
|
||||
|
||||
* Tooltip pada chart
|
||||
* Hover row table
|
||||
* Filter data (future)
|
||||
* Data async via API
|
||||
|
||||
---
|
||||
|
||||
## 16. Catatan Implementasi Teknis
|
||||
|
||||
* Framework: React + Vite
|
||||
* UI Kit: Mantine / Shadcn / MUI
|
||||
* Chart: Recharts / Chart.js / ECharts
|
||||
* Data: TanStack Query
|
||||
|
||||
---
|
||||
|
||||
## 17. Pengembangan Lanjutan
|
||||
|
||||
* Filter per tahun
|
||||
* Drill-down per banjar
|
||||
* Export PDF / Excel
|
||||
* Heatmap kependudukan
|
||||
|
||||
---
|
||||
|
||||
> Dokumen ini menjadi referensi utama implementasi halaman **Demografi & Kependudukan**.
|
||||
315
Dashboard-MD/KEUANGAN_ANGGARAN.md
Normal file
315
Dashboard-MD/KEUANGAN_ANGGARAN.md
Normal file
@@ -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**.
|
||||
Reference in New Issue
Block a user