dashboard-noc-desa-darmasaba/Dashboard-MD/KEUANGAN_ANGGARAN.md

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

{
  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

{
  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

{
  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.