nicoarya20/dashboard-noc-desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6722c8646a49fe73d63b7cf66b0a413af9bb6830
dashboard-noc-desa-darmasaba/Dashboard-MD/PENGAUDAN.md

3.5 KiB
Raw Blame History

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

{
  "total": 42,
  "baru": 14,
  "diproses": 14,
  "selesai": 14
}

8.2 Contoh Data Tren

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