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

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

{
  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

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