feat: finalize kinerja divisi feature implementation

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

Dashboard-MD/JENNA_ANALYTHIC.md

@@ -0,0 +1,282 @@
+# Jenna Analytic – Dashboard Design Specification
+
+Dokumen ini menjelaskan desain halaman **Jenna Analytic** berdasarkan screenshot (11 Feb 2026). Dokumen ini menjadi acuan implementasi UI/UX, data, dan interaksi untuk halaman analitik chatbot desa.
+
+---
+
+## 1. Tujuan Halaman
+
+Jenna Analytic berfungsi sebagai **dashboard analitik chatbot layanan desa**, berfokus pada:
+
+* Volume interaksi warga
+* Performa jawaban otomatis
+* Respons manual & waktu respons
+* Pola pertanyaan dan jam sibuk
+
+Target user utama:
+
+* Kepala Desa
+* Admin pelayanan
+* Operator chatbot
+
+---
+
+## 2. Tata Letak Keseluruhan (Layout)
+
+### 2.1 Struktur Global
+
+```
++------------------------------------------------------+
+| Topbar / Header                                      |
++-------------+----------------------------------------+
+| Sidebar     | Main Content                           |
+|             | - KPI Cards (Row)                      |
+|             | - Bar Chart Interaksi                  |
+|             | - Topik Terbanyak + Jam Tersibuk       |
++-------------+----------------------------------------+
+```
+
+* Sidebar: fixed kiri
+* Header: fixed atas
+* Main content: scroll vertical
+
+---
+
+## 3. Header (Topbar)
+
+### Komponen
+
+* Judul: `Desa Darmasaba`
+* User Info:
+
+  * Nama: `I. B. Surya Prabhawa M.`
+  * Role: `Kepala Desa`
+* Ikon:
+
+  * Notification (badge angka merah)
+  * Theme toggle / setting
+  * Avatar (lingkaran)
+
+### Gaya
+
+* Background: Navy / Biru Tua
+* Text: Putih
+* Tinggi: ±64px
+* Shadow: subtle
+
+---
+
+## 4. Sidebar Navigation
+
+### Elemen
+
+* Logo DESA+
+* Search input: `cari apa saja`
+* Menu:
+
+  * Beranda
+  * Kinerja Divisi
+  * Pengaduan & Layanan Publik
+  * **Jenna Analytic (active)**
+  * Demografi & Kependudukan
+  * Keuangan & Anggaran
+  * Bumdes & UMKM Desa
+  * Sosial
+  * Keamanan
+  * Bantuan
+  * Pengaturan
+
+### Gaya
+
+* Background: Putih
+* Active state:
+
+  * Background biru muda
+  * Border kiri / highlight
+* Spacing menu: 12–16px
+
+---
+
+## 5. KPI Cards (Ringkasan Atas)
+
+### Daftar KPI
+
+1. **Interaksi Hari Ini**
+
+   * Value: `61`
+   * Delta: `+15% dari kemarin`
+
+2. **Jawaban Otomatis**
+
+   * Value: `87%`
+   * Sub: `53 dari 61 interaksi`
+
+3. **Belum Ditindak**
+
+   * Value: `8`
+   * Sub: `Perlu respon manual`
+
+4. **Waktu Respon**
+
+   * Value: `2.3 sec`
+   * Sub: `Rata-rata`
+
+### Gaya
+
+* Card putih
+* Radius: 14–16px
+* Icon di kanan
+* Shadow lembut
+* Grid 4 kolom (desktop)
+
+---
+
+## 6. Grafik Interaksi Chatbot
+
+### Deskripsi
+
+* Tipe: Bar Chart
+* Judul: `Interaksi Chatbot`
+* X-axis: Hari (Sen–Min)
+* Y-axis: Jumlah interaksi
+
+### Gaya
+
+* Warna bar: Navy / Biru tua
+* Grid minimal
+* Tooltip saat hover
+
+### Data Expectation
+
+```ts
+{
+  day: 'Sen' | 'Sel' | 'Rab' | 'Kam' | 'Jum' | 'Sab' | 'Min';
+  total: number;
+}
+```
+
+---
+
+## 7. Topik Pertanyaan Terbanyak
+
+### Deskripsi
+
+* Tipe: Ranked list
+* Isi:
+
+  * Cara mengurus KTP – 89x
+  * Syarat Kartu Keluarga – 76x
+  * Jadwal Posyandu – 64x
+  * Pengaduan jalan rusak – 52x
+  * Info program bansos – 48x
+
+### Gaya
+
+* Card putih
+* Item list rounded
+* Count di kanan
+
+### Data
+
+```ts
+{
+  topic: string;
+  count: number;
+}
+```
+
+---
+
+## 8. Jam Tersibuk
+
+### Deskripsi
+
+* Menampilkan distribusi interaksi berdasarkan waktu
+
+| Waktu         | Persentase |
+| ------------- | ---------- |
+| Pagi (08–12)  | 30%        |
+| Siang (12–16) | 40%        |
+| Sore (16–20)  | 20%        |
+| Malam (20–08) | 10%        |
+
+### Gaya
+
+* Horizontal bar / progress
+* Label kiri, persentase kanan
+
+---
+
+## 9. Warna & Tema
+
+### Palette
+
+* Primary (Navy): `#1E3A5F`
+* Secondary: `#3B82F6`
+* Success: `#22C55E`
+* Warning: `#FACC15`
+* Danger: `#EF4444`
+* Background App: `#F5F8FB`
+
+---
+
+## 10. Tipografi
+
+* Font: Inter / Poppins / system-ui
+* Heading: Semi-bold
+* Body: Regular
+* KPI number: Bold, besar
+
+---
+
+## 11. Spasi & Grid
+
+* Padding card: 16–24px
+* Gap grid: 20–24px
+* Line-height body: 1.5
+
+---
+
+## 12. Responsivitas
+
+### Tablet
+
+* KPI jadi 2 kolom
+* Chart full width
+
+### Mobile
+
+* Sidebar jadi drawer
+* KPI 1 kolom
+* Chart & list stack vertical
+
+---
+
+## 13. Interaksi & Perilaku
+
+* Hover card: shadow meningkat
+* Tooltip chart
+* KPI clickable (future drill-down)
+* Data async dari API
+
+---
+
+## 14. Catatan Implementasi Teknis
+
+* Framework: React + Vite
+* UI: Mantine / Shadcn / MUI
+* Chart: Recharts / Chart.js
+* State: TanStack Query / SWR
+
+---
+
+## 15. Pengembangan Lanjutan
+
+* Filter tanggal
+* Export CSV
+* Drill-down per topik
+* Alert SLA respon
+
+---
+
+> Dokumen ini bersifat **design & data contract** antara UI, frontend, dan backend.