feat: update components with Mantine UI and improve dark mode support
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
225
Dashboard-MD/PENGAUDAN.md
Normal file
225
Dashboard-MD/PENGAUDAN.md
Normal file
@@ -0,0 +1,225 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user