# Dokumentasi Rekayasa Perangkat Lunak: Desain Antarmuka (UI) & Alur Kerja (Web Flow)

Dokumen ini mendefinisikan arsitektur antarmuka pengguna (*User Interface*), pola desain (*Design Pattern*), dan alur navigasi (*Web Flow*) untuk Sistem Pengaduan Digital. Perancangan ini ditujukan untuk memberikan panduan teknis yang presisi bagi tim pengembang (*Frontend Engineer* dan *UI/UX Designer*) dalam mengimplementasikan sistem.

---

## 1. Pola Desain Arsitektur Antarmuka (*UI Design Patterns*)

Sistem ini mengadopsi beberapa pola desain standar industri untuk menjamin skalabilitas, maintainability, dan performa aplikasi:

### A. Component-Based Architecture (Atomic Design)
Antarmuka dibangun menggunakan pendekatan modular di mana setiap elemen UI dipecah menjadi komponen independen yang dapat digunakan kembali (*reusable*):
* **Atoms:** Elemen dasar UI yang tidak dapat dipecah lagi (contoh: `Button`, `InputText`, `BadgeStatus`, `SpinnerLoading`).
* **Molecules:** Gabungan beberapa atoms yang membentuk satu kesatuan fungsi (contoh: `SearchGroup` yang terdiri dari `InputText` dan `Button`).
* **Organisms:** Komponen kompleks yang membentuk bagian dari halaman (contoh: `Navbar`, `Sidebar`, `TableLaporan`, `FormAduan`).
* **Templates & Pages:** Susunan organisms dalam tata letak (*layout*) tertentu yang merepresentasikan halaman utuh aplikasi.

### B. MVVM (Model-View-ViewModel) Pattern / State Management Centralized
Untuk memisahkan logika bisnis dengan presentasi UI, terutama pada implementasi *Single Page Application* (SPA):
* **View:** Komponen deklaratif UI (HTML/JSX) yang menangani rendering data ke layar.
* **ViewModel / State:** Mengelola kondisi data lokal (*reactive state*), penanganan *event* pengguna, dan komunikasi dengan *API Service Layer*.
* **Model:** Representasi skema data objek (contoh: `User`, `Laporan`, `Statistik`).

### C. Container-Presenter Pattern
Komponen dipisahkan menjadi dua kategori:
1. **Container Components (Smart):** Mengatur penarikan data (*data fetching*), pengelolaan state manajemen, dan logika fungsional.
2. **Presenter Components (Dumb):** Hanya menerima data melalui *properties/props* dan merendernya ke UI tanpa mengetahui asal-usul data tersebut. Menjamin tingkat reusabilitas yang tinggi.

---

## 2. Struktur Tata Letak Utama (*Global Layout Structure*)

Sistem ini dibagi menjadi dua area tata letak utama berdasarkan hak akses pengguna:

### Layout A: Public & Masyarakat Layout (Responsive Clean Grid)
* **Header / Navigation Bar:** Berisi logo sistem, menu navigasi utama (Beranda, Statistik, Panduan), serta tombol aksi "Masuk" dan "Daftar".
* **Main Content Area:** Menggunakan kontainer terpusat (*max-width Container*) dengan pendekatan sistem *Grid* (12 kolom) yang fleksibel untuk perangkat desktop, tablet, maupun mobile.
* **Footer:** Berisi informasi hak cipta, kontak instansi, dan tautan sosial media resmi.

### Layout B: Admin Dashboard Layout (Fixed Sidebar Grid)
* **Sidebar (Navigation Panel):** Terpasang tetap di sisi kiri layar (*fixed positional*). Berisi profil singkat admin, menu manajemen (Dashboard, Verifikasi Laporan, Distribusi Kerja, Statistik Analitik), dan tombol keluar.
* **Top Header:** Berisi indikator status koneksi, panel notifikasi real-time, dan informasi tanggal sistem.
* **Content Canvas:** Area dinamis di sisi kanan sidebar untuk memuat tabel data tabel, grafik analitik, atau formulir verifikasi dokumen dengan kapabilitas *scrolling* independen.

---

## 3. Spesifikasi Tampilan Antarmuka Halaman (*UI Page Descriptions*)

### Halaman 1: Beranda & Landing Page (Akses: Publik)
* **Hero Section:** Judul utama aplikasi "Sistem Pengaduan Digital Masyarakat", deskripsi singkat, serta tombol *Call to Action* (CTA) utama yang mengarah langsung ke formulir pengaduan.
* **Section Alur Kerja:** Infografis langkah mudah melapor (Tulis -> Verifikasi -> Tindak Lanjut -> Selesai).
* **Section Statistik Singkat:** Widget interaktif menampilkan total aduan masuk dan persentase penyelesaian saat ini.

### Halaman 2: Autentikasi - Login & Register (Akses: Publik)
* **Formulir Pendaftaran (UC-01):** Input teks terstruktur untuk Nama Lengkap, Alamat Email, Nomor Telepon, Kata Sandi, dan Konfirmasi Kata Sandi. Dilengkapi dengan indikator validasi *real-time* (kekuatan password dan keunikan email).
* **Formulir Masuk:** Input Email dan Kata Sandi dengan mekanisme proteksi serangan *Brute Force* (reCAPTCHA v3 terintegrasi).

### Halaman 3: Ruang Kerja Masyarakat (Akses: Masyarakat Terautentikasi)
* **Dashboard Riwayat:** Tabel dinamis (*Data Table*) yang menampilkan daftar pengaduan pribadi. Kolom terdiri dari ID Laporan, Judul Aduan, Tanggal Kirim, Kategori, dan `BadgeStatus` warna (Kuning: Menunggu, Biru: Terverifikasi, Ungu: Didistribusikan, Hijau: Selesai).
* **Formulir Pembuatan Laporan Baru (UC-02):**
  * Input Judul (Teks baris tunggal, maks. 100 karakter).
  * Dropdown Kategori (Infrastruktur, Pelayanan Publik, Keamanan, Kesehatan, dll.).
  * Area Teks Deskripsi (Teks multi-baris kaya komponen teks mentah).
  * Komponen Drag-and-Drop Lampiran (Mendukung berkas JPG/PNG/PDF, maks. 5MB).
* **Formulir Edit Laporan (UC-03):** Replikasi dari formulir pembuatan laporan, namun memuat data lama secara otomatis (*pre-populated data*) dan hanya aktif jika status laporan masih "Menunggu".

### Halaman 4: Ruang Kerja Admin - Control Panel (Akses: Admin)
* **Dashboard Utama:** Kumpulan ringkasan matriks berupa kartu indikator (*KPI Cards*) untuk memantau metrik operasional secara waktu nyata.
* **Halaman Verifikasi & Distribusi (UC-04 & UC-05):** Komponen *Split-Screen View*. Sisi kiri menampilkan daftar antrean laporan masuk, sisi kanan menampilkan detail dokumen laporan yang dipilih secara instan lengkap dengan tombol aksi "Setujui Verifikasi" atau "Tolak" serta dropdown instansi tujuan distribusi.
* **Halaman Manajemen Status (UC-08):** Panel entri data log aktivitas di mana admin dapat memilih *dropdown* status operasional terbaru disertai kolom catatan tindak lanjut yang akan dikirim ke pelapor.

### Halaman 5: Dashboard Statistik Publik (UC-07) (Akses: Publik & Admin)
* **Visualisasi Grafik:** Representasi visual interaktif menggunakan library grafik berbasis performa (seperti Chart.js / Recharts):
  * *Pie Chart:* Distribusi aduan per kategori instansi.
  * *Bar Chart:* Tren volume aduan bulanan.
  * *Line Chart:* Kecepatan rata-rata waktu penyelesaian kasus.
* **Fitur Filter Kontrol:** Komponen seleksi tanggal (*Date Range Picker*) dan filter multi-opsi kategori untuk menyaring data grafik secara instan tanpa memuat ulang halaman (*Asynchronous Re-rendering*).

---

## 4. Arsitektur Alur Kerja Aplikasi (*Systemic Web Flow*)

Seluruh navigasi antar halaman diatur melalui struktur routing yang ketat dengan pengamanan tingkat tinggi (*Route Guards*). Di bawah ini merupakan representasi urutan langkah alur navigasi dari awal hingga akhir proses:

```
[Masyarakat / Publik]
       │
       ├──► Akses Landing Page ──► Melihat Statistik Publik (UC-07)
       │
       ├──► Mengklik "Daftar Akun" ──► Mengisi Form Pendaftaran (UC-01)
       │                                         │
       │                                    (Data Valid)
       │                                         ▼
       ├──► Mengklik "Masuk" ◄───────────────────┘
       │          │
       │     (Login Sukses)
       │          ▼
       └──► Masuk ke Ruang Kerja Masyarakat
                  │
                  ├──► Mengisi Formulir Pengaduan Baru (UC-02) ──► Simpan ke Database (Status: Menunggu)
                  │
                  └──► Membuka Riwayat Pengaduan 
                             │
                             └──► Status "Menunggu"? 
                                        ├──► Ya ──► Mengedit Laporan Aduan (UC-03)
                                        └──► Tidak ──► Akses Edit Terkunci (Read-Only)

───────────────────────────────────────────────────────────────────────────────────────────────────

[Admin]
       │
       ├──► Otentikasi Admin Melalui Portal Khusus
       │          │
       │     (Login Sukses)
       │          ▼
       └──► Masuk ke Admin Control Panel Dashboard
                  │
                  ├──► Buka Modul Antrean Verifikasi Laporan
                  │          │
                  │          └──► Memverifikasi Kelayakan & Kelengkapan Laporan (UC-04)
                  │                     │
                  │                (Laporan Valid)
                  │                     ▼
                  │          Meneruskan & Mengelola Distribusi ke Instansi (UC-05) (Status: Didistribusikan)
                  │
                  ├──► Membuka Log Pengaduan Aktif
                  │          │
                  │          └──► Mengupdate Status Laporan & Beri Catatan Progres (UC-08) (Status: Selesai)
                  │
                  └──► Membuka Analitik Internal ──► Melihat & Ekspor Data Statistik Komprehensif (UC-07)
```

### Aturan Navigasi Operasional & Keamanan Routing:
1. **Guarded Routes (Middleware):** Halaman Ruang Kerja Masyarakat dan Admin Dashboard dilindungi oleh otentikasi berbasis *Token* (misal: JWT). Pengguna anonim yang mencoba mengakses tautan internal akan dilempar secara otomatis ke halaman Login.
2. **Role-Based Access Control (RBAC):** Akun bermasyarakat tidak memiliki akses fisik maupun logika program untuk membuka halaman dengan prefiks URL `/admin/*`. Pelanggaran akses akan memicu respon halaman kesalahan standar HTTP 403 (*Forbidden*).
3. **Form State Preservation:** Jika pengguna tidak sengaja menekan tombol kembali saat mengisi formulir `UC-02` atau `UC-03`, sistem akan menampilkan dialog konfirmasi *pop-up* pencegah kehilangan data guna memastikan pengalaman pengguna tetap optimal.