283 lines
4.4 KiB
Markdown
283 lines
4.4 KiB
Markdown
# 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.
|