226 lines
3.5 KiB
Markdown
226 lines
3.5 KiB
Markdown
# PENGADUAN-2.md
|
||
|
||
## 1. Tujuan Halaman
|
||
|
||
Dashboard **Pengaduan Masyarakat** berfungsi untuk memantau, menganalisis, dan menindaklanjuti pengaduan warga secara real-time. Halaman ini mendukung **Light Mode** dan **Dark Mode** dengan struktur UI dan interaksi yang konsisten.
|
||
|
||
---
|
||
|
||
## 2. Struktur Komponen UI
|
||
|
||
### 2.1 Summary Cards (Statistik Utama)
|
||
|
||
Menampilkan ringkasan status pengaduan bulan berjalan.
|
||
|
||
**Komponen:**
|
||
|
||
* Total Pengaduan
|
||
* Baru (Belum diproses)
|
||
* Diproses (Sedang ditangani)
|
||
* Selesai (Terselesaikan)
|
||
|
||
**Elemen UI:**
|
||
|
||
* Angka utama (bold, besar)
|
||
* Label deskriptif
|
||
* Ikon status (chat, alert, clock, check)
|
||
|
||
**Interaksi:**
|
||
|
||
* Hover: efek elevasi + highlight border
|
||
* Click (opsional): filter dashboard berdasarkan status
|
||
|
||
---
|
||
|
||
### 2.2 Grafik Tren Pengaduan (Line Chart)
|
||
|
||
Menampilkan jumlah pengaduan per bulan.
|
||
|
||
**Komponen:**
|
||
|
||
* Sumbu X: Bulan
|
||
* Sumbu Y: Jumlah pengaduan
|
||
* Garis tren + titik data
|
||
|
||
**Interaksi:**
|
||
|
||
* Tooltip saat hover (bulan & jumlah)
|
||
* Toggle range waktu (bulanan/tahunan – opsional)
|
||
|
||
---
|
||
|
||
### 2.3 Surat Terbanyak (Horizontal Bar Chart)
|
||
|
||
Menunjukkan jenis surat/pengaduan yang paling sering diajukan.
|
||
|
||
**Contoh Data:**
|
||
|
||
* KTP
|
||
* KK
|
||
* Domisili
|
||
* Usaha
|
||
* Lainnya
|
||
|
||
**Interaksi:**
|
||
|
||
* Hover tooltip
|
||
* Click bar → filter daftar pengajuan
|
||
|
||
---
|
||
|
||
### 2.4 Pengajuan Terbaru (List)
|
||
|
||
Daftar pengaduan terbaru dari warga.
|
||
|
||
**Isi Item:**
|
||
|
||
* Nama pengaju
|
||
* Jenis pengaduan
|
||
* Waktu pengajuan
|
||
* Badge status: Baru / Diproses / Selesai
|
||
|
||
**Interaksi:**
|
||
|
||
* Click item → halaman detail
|
||
* Scrollable list
|
||
|
||
---
|
||
|
||
### 2.5 Ajuan Ide Inovatif (List)
|
||
|
||
Menampilkan ide/inisiatif warga untuk desa.
|
||
|
||
**Isi Item:**
|
||
|
||
* Nama pengaju
|
||
* Judul ide
|
||
* Kategori
|
||
* Tombol "Detail"
|
||
|
||
---
|
||
|
||
## 3. Tata Letak Keseluruhan (Layout)
|
||
|
||
**Desktop:**
|
||
|
||
* Grid 12 kolom
|
||
* Baris 1: 4 Summary Cards
|
||
* Baris 2: Line Chart (full width)
|
||
* Baris 3: 3 kolom (Bar Chart, Pengajuan Terbaru, Ide Inovatif)
|
||
|
||
**Tablet:**
|
||
|
||
* Summary card 2x2
|
||
* Chart full width
|
||
* List stack vertikal
|
||
|
||
**Mobile:**
|
||
|
||
* Semua komponen stacked
|
||
* Chart scroll horizontal
|
||
|
||
---
|
||
|
||
## 4. Gaya & Tema Visual
|
||
|
||
### 4.1 Light Mode
|
||
|
||
**Warna:**
|
||
|
||
* Background utama: #F6F9FC
|
||
* Card: #FFFFFF
|
||
* Primary: #2563EB (Blue)
|
||
* Text utama: #0F172A
|
||
* Text sekunder: #64748B
|
||
* Border: #E2E8F0
|
||
|
||
**Chart:**
|
||
|
||
* Line: Biru
|
||
* Bar: Biru tua
|
||
* Grid: Abu muda
|
||
|
||
---
|
||
|
||
### 4.2 Dark Mode
|
||
|
||
**Warna:**
|
||
|
||
* Background utama: #0B1220
|
||
* Card: #111827 / #0F172A
|
||
* Primary: #3B82F6
|
||
* Text utama: #E5E7EB
|
||
* Text sekunder: #9CA3AF
|
||
* Border: #1F2937
|
||
|
||
**Chart:**
|
||
|
||
* Line: Biru terang
|
||
* Bar: Biru medium
|
||
* Grid: Abu gelap
|
||
|
||
---
|
||
|
||
## 5. Tipografi
|
||
|
||
* Font utama: Inter / Poppins
|
||
* Heading: 600–700
|
||
* Body: 400–500
|
||
* Angka statistik: 700
|
||
|
||
---
|
||
|
||
## 6. Spasi & Radius
|
||
|
||
* Padding card: 16–24px
|
||
* Gap grid: 16–24px
|
||
* Border radius card: 12–16px
|
||
* Icon container: circle / rounded-full
|
||
|
||
---
|
||
|
||
## 7. Responsivitas
|
||
|
||
* Mobile-first
|
||
* Breakpoint umum: 640px, 768px, 1024px
|
||
* Chart auto-resize
|
||
* List menjadi full-width
|
||
|
||
---
|
||
|
||
## 8. Ekspektasi Data & Interaksi Backend
|
||
|
||
### 8.1 Contoh Data Summary
|
||
|
||
```json
|
||
{
|
||
"total": 42,
|
||
"baru": 14,
|
||
"diproses": 14,
|
||
"selesai": 14
|
||
}
|
||
```
|
||
|
||
### 8.2 Contoh Data Tren
|
||
|
||
```json
|
||
[
|
||
{ "bulan": "Apr", "jumlah": 30 },
|
||
{ "bulan": "Mei", "jumlah": 50 },
|
||
{ "bulan": "Jun", "jumlah": 42 }
|
||
]
|
||
```
|
||
|
||
---
|
||
|
||
## 9. Catatan Teknis
|
||
|
||
* Chart: Recharts / Chart.js / ECharts
|
||
* State: loading, empty, error
|
||
* Theme switch: CSS variable / Tailwind dark mode
|
||
* Konsistensi warna status di seluruh modul
|
||
|
||
---
|
||
|
||
Dokumen ini menjadi **UI Spec + UX Contract** untuk modul Pengaduan dan siap diturunkan ke desain Figma maupun implementasi Frontend.
|