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