feat: finalize kinerja divisi feature implementation
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
270
Dashboard-MD/DASHBOARD_DESIGN.md
Normal file
270
Dashboard-MD/DASHBOARD_DESIGN.md
Normal file
@@ -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.
|
||||
282
Dashboard-MD/JENNA_ANALYTHIC.md
Normal file
282
Dashboard-MD/JENNA_ANALYTHIC.md
Normal file
@@ -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.
|
||||
Reference in New Issue
Block a user