348 lines
4.8 KiB
Markdown
348 lines
4.8 KiB
Markdown
# 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**.
|