feat: finalize kinerja divisi feature implementation

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

Dashboard-MD/DASHBOARD_DESIGN.md

@@ -0,0 +1,270 @@
+# Dashboard Design Specification
+
+Dokumen ini mendeskripsikan desain dashboard berdasarkan **Screenshot 2026-02-02 at 14.12.36.png**. Tujuannya sebagai acuan implementasi UI untuk `src/routes/noc/dashboard/route.tsx`.
+
+---
+
+## 1. Gambaran Umum
+
+Dashboard merepresentasikan **Sistem Informasi Desa (DESA+)** dengan fokus pada:
+
+* Monitoring layanan administrasi desa
+* Statistik surat & pengaduan
+* Tingkat kepuasan warga
+* Aktivitas divisi & agenda desa
+
+Gaya visual: **modern, clean, administratif**, dengan nuansa **biru pemerintah** dan kartu (card-based layout).
+
+---
+
+## 2. Struktur Layout
+
+### 2.1 Layout Global
+
+```
++--------------------------------------------------+
+| Topbar / Header                                 |
++-----------+--------------------------------------+
+| Sidebar   | Main Content (Dashboard)             |
+|           |  - KPI Cards                         |
+|           |  - Charts                            |
+|           |  - Activity & Calendar               |
++-----------+--------------------------------------+
+```
+
+* **Sidebar**: fixed / sticky di kiri
+* **Header**: fixed di atas konten utama
+* **Main Content**: scrollable
+
+---
+
+## 3. Header (Topbar)
+
+### Komponen
+
+* Nama desa: `Desa Darmasaba`
+* User info:
+
+  * Nama: `I. B. Surya Prabhawa M.`
+  * Role: `Kepala Desa`
+* Ikon:
+
+  * Notification (badge angka)
+  * Theme / setting (opsional)
+  * Avatar user (circle)
+
+### Style
+
+* Background: **Navy / Dark Blue**
+* Text: putih
+* Height: ±64px
+* Shadow tipis ke bawah
+
+---
+
+## 4. Sidebar Navigation
+
+### Elemen
+
+* Logo **DESA+** di atas
+* Search input: `cari apa saja`
+* Menu navigasi:
+
+  * Beranda (active)
+  * Kinerja Divisi
+  * Pengaduan & Layanan Publik
+  * Jenna Analytic
+  * Demografi & Kependudukan
+  * Keuangan & Anggaran
+  * Bumdes & UMKM Desa
+  * Sosial
+  * Keamanan
+  * Bantuan
+  * Pengaturan
+
+### Style
+
+* Background: putih
+* Active state:
+
+  * Background: biru muda
+  * Text: biru tua
+* Icon (opsional, outline style)
+* Spacing antar menu: ±12–16px
+
+---
+
+## 5. KPI / Summary Cards (Row 1)
+
+### Cards
+
+1. **Surat Minggu Ini**
+
+   * Value: `99`
+   * Delta: `+12%`
+2. **Pengaduan Aktif**
+
+   * Value: `28`
+   * Sub: `14 baru, 14 diproses`
+3. **Layanan Selesai**
+
+   * Value: `156`
+   * Sub: `bulan ini`
+   * Delta: `+8%`
+4. **Kepuasan Warga**
+
+   * Value: `87.2%`
+   * Circular indicator
+
+### Style
+
+* Card background: putih
+* Border radius: 12–16px
+* Shadow: soft
+* Icon di kanan atas card
+* Grid: 4 kolom (desktop)
+
+---
+
+## 6. Statistik Pengajuan Surat (Bar Chart)
+
+### Deskripsi
+
+* Judul: `Statistik Pengajuan Surat`
+* Subjudul: `Trend pengajuan surat 6 bulan terakhir`
+* X-axis: Jan – Jun
+* Y-axis: jumlah surat
+
+### Style
+
+* Bar color: navy / dark blue
+* Background card: putih
+* Axis minimal & clean
+
+### Data Expectation
+
+```ts
+{
+  month: string;
+  total: number;
+}
+```
+
+---
+
+## 7. Tingkat Kepuasan (Donut Chart)
+
+### Kategori
+
+* Sangat Puas (hijau)
+* Puas (biru)
+* Cukup (kuning)
+* Kurang (merah)
+
+### Style
+
+* Donut chart
+* Legend di bawah
+* Persentase di tengah (opsional)
+
+---
+
+## 8. Divisi Teraktif (Progress List)
+
+### Item
+
+* Kesejahteraan – 37 kegiatan
+* Pemerintahan – 26 kegiatan
+* Keuangan – 17 kegiatan
+* Sekretaris Desa – 15 kegiatan
+
+### Style
+
+* Horizontal progress bar
+* Warna bar: navy
+* Background bar: abu-abu terang
+
+---
+
+## 9. Kalender & Kegiatan Mendatang
+
+### Item
+
+* 1 Oktober 2025 – Hari Kesaktian Pancasila
+* 15 Oktober 2025 – Davest
+* 19 Oktober 2025 – Rapat Koordinasi
+
+### Style
+
+* Card list
+* Date kecil, title tebal
+
+---
+
+## 10. Warna & Tema
+
+### Color Palette (Approx)
+
+* Primary: `#1E3A5F` (navy)
+* Secondary: `#3B82F6`
+* Success: `#22C55E`
+* Warning: `#FACC15`
+* Danger: `#EF4444`
+* Background: `#F5F8FB`
+
+---
+
+## 11. Typography
+
+* Font utama: **Inter / Poppins / system-ui**
+* Heading: semi-bold
+* Body: regular
+* Angka KPI: bold, besar
+
+---
+
+## 12. Responsiveness
+
+* Desktop (>=1280px): layout penuh
+* Tablet:
+
+  * Sidebar collapsible
+  * KPI cards jadi 2 kolom
+* Mobile:
+
+  * Sidebar drawer
+  * KPI cards 1 kolom
+  * Charts stack vertical
+
+---
+
+## 13. Interaksi & Behavior
+
+* Sidebar menu: active state
+* Hover card: shadow naik
+* Chart: tooltip on hover
+* Notification: clickable
+* Data: async (API driven)
+
+---
+
+## 14. Catatan Implementasi
+
+* Cocok untuk:
+
+  * React + Vite
+  * Mantine / Shadcn / MUI
+  * ChartJS / Recharts / ECharts
+* Gunakan layout berbasis **CSS Grid / Flexbox**
+
+---
+
+## 15. Scope Selanjutnya
+
+* Dark mode
+* Export laporan (PDF/Excel)
+* Filter tanggal & divisi
+
+---
+
+> Dokumen ini menjadi acuan desain UI. Perubahan visual harus tetap konsisten dengan struktur ini.