# 06. Admin Dashboard dan Management Web UI

## 1. Arsitektur Web Tier UI

Selain menyediakan REST API untuk aplikasi tenant, PEWE menyediakan modul **Web Management UI** terintegrasi yang berlokasi di bawah namespace `App\Web\*`.

### Structure Sub-Direktori `src/Web/`:
```
src/Web/
├── Auth/               # Authentication Handlers (Login, Logout, Session)
├── Dashboard/          # Main Management Controllers & Handlers
│   ├── IndexHandler.php      # Main Overview Dashboard & Metrics
│   ├── PaymentRequestHandler.php # Transaction Grid & Advanced Filter
│   ├── WebhookHandler.php    # Webhook Queue & Resend Trigger
│   ├── ChannelHandler.php    # Channel Config Management
│   └── TenantHandler.php     # Tenant Profile Management
├── NotFound/           # 404 Handler
└── Shared/             # Render Layout & Template Helpers
```

### Pemetaan Rute Web HTTP (Web Routes)
Pengontrol Web UI menggunakan `yiisoft/yii-view-renderer` untuk merender tampilan HTML berbasis komponen layout terpadu (`src/Web/Dashboard/layout.php`):

| Rute URL | HTTP Method | Handler / Controller Action | Fungsi Utamanya |
|:---|:---|:---|:---|
| `/web/login` | GET / POST | `App\Web\Auth\AuthController::login` | Formulir login admin & autentikasi sesi |
| `/web/logout` | POST | `App\Web\Auth\AuthController::logout` | Menghancurkan sesi pengguna admin |
| `/web/dashboard` | GET | `App\Web\Dashboard\DashboardController::index` | Ringkasan metrik volume transaksi & chart |
| `/web/payment-requests` | GET | `App\Web\Dashboard\DashboardController::paymentRequests` | Grid tabel transaksi & filter pencarian |
| `/web/payment-requests/{id}` | GET | `App\Web\Dashboard\DashboardController::paymentRequestDetail` | Rincian transaksi & log audit JSON mentah |
| `/web/payment-requests/{id}/simulate` | POST | `App\Web\Dashboard\DashboardController::simulatePayment` | Pemicu simulasi pembayaran sandbox |
| `/web/channels` | GET / POST | `App\Web\Dashboard\DashboardController::channels` | Kelola konfigurasi channel & API key vendor |
| `/web/tenants` | GET / POST | `App\Web\Dashboard\DashboardController::tenants` | Kelola kredensial & callback URL tenant |
| `/web/users` | GET / POST | `App\Web\Dashboard\DashboardController::users` | Kelola akun pengguna admin & peran RBAC |
| `/web/reports` | GET | `App\Web\Dashboard\DashboardController::reports` | Laporan analitik keuangan & ekspor data |

---

## 2. Autentikasi & RBAC (Role-Based Access Control)

Akses ke Web UI dikendalikan oleh middleware `App\Middleware\WebAuth` dan `App\Middleware\Rbac\RbacMiddleware`.

### Peran (Roles) Pengguna pada Tabel `admin_user`:

| Role | Hak Akses (Permissions) |
|------|--------------------------|
| **`superadmin`** | Akses penuh seluruh sistem: Kelola Tenant, Kelola Channel, Simulasi Pembayaran, Resend Webhook, dan Manajemen User Admin. |
| **`finance_admin`** | Monitoring Transaksi, Filter & Export Laporan Keuangan, Cek Mutasi Bank, dan Trigger Resend Webhook. |
| **`viewer`** | Read-Only akses untuk melihat grafik ringkasan dashboard dan daftar transaksi. |

### Keamanan Sesi & Perlindungan CSRF
1. **Sesi Web Secure (`WebAuth`)**:
   - Autentikasi admin diverifikasi melalui sesi server Yii3 (`yiisoft/session`). Cookie sesi ditetapkan dengan atribut `HttpOnly` dan `SameSite=Strict`.
   - Kata sandi admin disimpan dalam database menggunakan enkripsi hash standar PHP `password_hash($password, PASSWORD_BCRYPT)`.
2. **Proteksi Form Cross-Site Request Forgery (`yiisoft/csrf`)**:
   - Seluruh formulir web HTTP POST (seperti Login, Simpan Channel, Simulate Payment, dan Resend Webhook) dilindungi oleh token CSRF terenkripsi.

---

## 3. Fitur Utama Management Dashboard

### Diagram Flowchart Navigasi UI Admin Dashboard (Mermaid)

```mermaid
flowchart TD
    A[Halaman Login /web/login] --> B{Validasi Sesi & Password}
    B -- Gagal --> A
    B -- Sukses --> C[Dashboard Utama /web/dashboard]
    
    C --> D[Monitoring Transaksi /web/payment-requests]
    C --> E[Manajemen Channel /web/channels]
    C --> F[Manajemen Tenant /web/tenants]
    C --> G[Laporan Keuangan /web/reports]
    C --> H[Kelola User Admin /web/users]
    
    D --> D1[Detail Transaksi /payment-requests/{id}]
    D1 --> D2[Simulate Payment Status -> PAID]
    D1 --> D3[Resend Webhook Notification]
    
    E --> E1[Edit API Credentials Vendor JSON]
    F --> F1[Generate API Key & Secret Tenant Baru]
    G --> G1[Export CSV / Excel Summary Data]
```

---

### 3.1. Monitoring & Pencarian Transaksi Tingkat Lanjut
Halaman transaksi (`/web/payment-requests`) mendukung pencarian dan filter performa tinggi:
- **Pencarian Tepat (Exact Search)**: Berdasarkan Nomor Virtual Account (VA), String QRIS, External ID Tenant, atau Provider Reference ID.
- **Filter Kombinasi**: Berdasarkan Tenant (`TSJL`, `MOYA`), Channel (`xendit_va_bni`, `direct_va_bri`), dan Status Pembayaran (`pending`, `paid`, `expired`).

```
┌─────────────────────────────────────────────────────────────────────────┐
│                        PEWE ADMIN DASHBOARD                             │
├─────────────────────────────────────────────────────────────────────────┤
│ [ Filter Tenant: All ▼ ] [ Status: Paid ▼ ] [ Search: 26215999... ] [🔎]│
├──────┬──────────┬─────────────┬───────────┬─────────┬────────┬──────────┤
│ ID   │ Tenant   │ External ID │ Channel   │ Amount  │ Status │ Action   │
├──────┼──────────┼─────────────┼───────────┼─────────┼────────┼──────────┤
│ #23  │ TSJL     │ TJjZXrRF... │ VA BRI    │ 50.000  │ PAID   │ [Detail] │
│ #22  │ TSJL     │ TJYlsVk... │ QRIS      │ 50.000  │ PENDING│ [Simulate]
└──────┴──────────┴─────────────┴───────────┴─────────┴────────┴──────────┘
```

---

### 3.2. Simulator Pembayaran Vendor (Sandbox Mode)
Untuk mempermudah pengujian alur integrasi tanpa perlu melakukan transfer bank fisik di lingkungan sandbox, admin dapat menggunakan fitur **Simulate Payment**:
- Mengirimkan event simulasi webhook vendor secara instan.
- Mengubah status `payment_request` dari `PENDING` menjadi `PAID`.
- Memicu antrean `webhook_deliveries` untuk dikirimkan ke aplikasi tenant.

---

### 3.3. Webhook Delivery Manager & Manual Resend
Halaman ini menampilkan log riwayat percobaan pengiriman webhook dari PEWE ke tenant:
- Menampilkan kolom `attempt`, `last_response_code` (misal `200` atau `404`), `last_response_body`, serta status antrean.
- **Fitur Resend**: Tombol tindakan untuk memicu pengiriman ulang notifikasi webhook saat server tenant kembali online setelah perbaikan.

---

### 3.4. Rekonsiliasi Mutasi Bank (`bank_statements`)
Pengelolaan data mutasi kas bank untuk mencocokkan pembayaran direct bank transfer dengan record `payment_request`, memastikan tidak ada dana silap atau transaksi yang belum terkonfirmasi.

---

### 3.5. Manajemen Channel & Kredensial Tenant
- **Manajemen Channel (`/web/channels`)**:
  - Konfigurasi status aktif/non-aktif channel secara real-time.
  - Pengubahan kredensial API key vendor (Xendit Secret Key, Midtrans Server Key) dalam format JSON terenkripsi tanpa perlu merestart server.
- **Manajemen Tenant (`/web/tenants`)**:
  - Registrasi aplikasi tenant baru.
  - Pengaturan URL webhook callback tenant.
  - Rotasi `api_key` dan `api_secret` tenant jika terjadi kebutuhan pembaruan keamanan.

---

### 3.6. Laporan Keuangan & Analitik (`/web/reports`)
- Tampilan agregasi statistik omset pembayaran harian, mingguan, dan bulanan.
- Ringkasan distribusi pilihan metode pembayaran (VA vs QRIS).
- Fitur **Export CSV / Excel** untuk kebutuhan pembukuan tim keuangan institusi sekolah.