# Runbook Implementasi UI Hirarki Rekening Kas (Reusable)

Runbook ini adalah panduan eksekusi langkah demi langkah untuk menerapkan hirarki rekening kas pada level tampilan (UI-only), tanpa mengubah logic transaksi/jurnal.

Kompatibilitas target:
- PHP 5.6
- CodeIgniter 3

## 1. Tujuan
Menerapkan tampilan hirarki kas yang konsisten dan mudah dibaca, dengan struktur:
1. Kas & Bank (utama)
2. Kategori kas utama (contoh: Kas Utama / Pettycash)
3. Cabang/Unit (opsional, sesuai konteks halaman)
4. Rekening kas/bank detail

## 2. Batasan Implementasi
Wajib:
- Perubahan hanya di view/CSS/JS dan mapping data tampilan di controller.
- Perhitungan saldo tetap memakai sumber data existing.

Dilarang:
- Ubah struktur database.
- Ubah posting jurnal.
- Ubah core business rule transaksi.

## 3. Input Wajib Sebelum Mulai
Siapkan data berikut sebelum coding:
- Daftar akun kas yang akan ditampilkan (kode + nama).
- Daftar kategori aktif (contoh Kas Utama/Pettycash) dan akun mapping-nya.
- Keputusan akun legacy: show/hide.
- Halaman target (controller + view).
- Acuan visual (screenshot/desain).

## 4. Output Akhir Yang Diharapkan
- Panel hirarki kas tampil di halaman target.
- Kartu kategori utama menampilkan saldo dan jumlah rekening/unit.
- Total gabungan kategori aktif tampil.
- Filter periode/search/export existing tetap normal.
- Akun legacy mengikuti keputusan (mis. hidden).

## 5. Urutan Eksekusi (End-to-End)

### Step 1 - Discovery Lokasi Kode
1. Cari controller halaman kas yang menyiapkan data.
2. Cari view yang merender panel summary + tabel.
3. Catat helper formatter (uang/tanggal) dan file JS filter.
4. Catat titik rawan reuse (template dipakai halaman lain).

Deliverable:
- Daftar file target (controller/view/CSS/JS).

### Step 2 - Mapping Hirarki Data Untuk UI
1. Definisikan struktur array untuk hirarki kas di controller.
2. Tetapkan field minimal per kartu:
   - label
   - note
   - kode akun
   - saldo
   - count
   - route_enabled
   - hide_in_ui
3. Tetapkan object totals:
   - total kategori aktif
   - total semua (opsional)
   - count agregat
   - legacy_hidden

Deliverable:
- Data siap render di view tanpa mengubah query bisnis inti.

### Step 3 - Implementasi Panel UI Hirarki
1. Tambahkan blok panel hirarki di view (di atas tabel).
2. Render kartu per kategori aktif sesuai mapping kas.
3. Hide kartu legacy jika `hide_in_ui=true`.
4. Render badge total dan catatan mode aktif.
5. Pastikan link kartu tetap menuju detail halaman yang benar.

Deliverable:
- Panel hirarki tampil stabil di desktop/mobile.

### Step 4 - Sinkronisasi Filter Dan Search
1. Pastikan filter periode tetap muncul pada mode hirarki kas.
2. Pastikan search keyword tetap berfungsi.
3. Pastikan tombol reset dan search submit tetap berfungsi.
4. Pastikan export/print tetap aktif sesuai role.

Deliverable:
- Interaksi user tidak berubah (hanya styling/penempatan visual).

### Step 5 - Fine-Tuning Visual
1. Samakan warna panel dengan acuan desain.
2. Samakan tipografi nilai saldo (lebih dominan dari label).
3. Rapikan spacing panel, filter, dan tabel.
4. Samakan style header tabel bila dibutuhkan.
5. Verifikasi readability kontras warna.

Deliverable:
- Hasil visual mendekati desain acuan.

### Step 6 - Quality Check
1. Jalankan syntax check file PHP yang diubah.
2. Uji desktop (Chrome/Edge).
3. Uji mobile/tablet viewport.
4. Uji minimal 2 role user (operasional + holding).
5. Cek tidak ada regresi halaman lain yang memakai view/partial sama.

Deliverable:
- Bukti lulus validasi teknis dan fungsional.

### Step 7 - Dokumentasi Dan Handover
1. Catat daftar file yang diubah.
2. Catat keputusan bisnis (mis. legacy hidden).
3. Simpan screenshot before/after.
4. Catat known limitation.
5. Lampirkan checklist status final.

Deliverable:
- Paket handover implementasi siap audit.

## 6. Template Catatan Per Eksekusi
Isi template ini tiap kali runbook dipakai:

- Aplikasi:
- Modul/Halaman:
- Scope UI-only:
- Kategori aktif:
- Kategori legacy:
- File diubah:
- Hasil syntax check:
- Hasil test fungsi:
- Hasil test visual:
- Risiko tersisa:
- Next action:

## 7. Quick Rollback Plan
Jika hasil UI tidak sesuai:
1. Revert file view yang diubah.
2. Revert mapping panel di controller.
3. Jalankan ulang syntax check.
4. Verifikasi halaman kembali ke baseline.

Catatan:
- Lakukan rollback per file agar mudah ditelusuri.
- Hindari rollback massal tanpa review perubahan.

## 8. Referensi Pendamping
Gunakan bersama:
- `CHECKLIST_UI_HIRARKI_KAS.md`
- `CHECKLIST_UI_HIRARKI_PIUTANG.md` (sebagai pola implementasi serupa)
- `UAT_QUICKCHECK_UI_HIRARKI_KEUANGAN.md` (skrip uji cepat 10-15 menit)

## 9. Eksekusi UAT Cepat (Wajib Sebelum Handover)
Setelah coding selesai, jalankan quickcheck ini:
1. Isi identitas uji pada `UAT_QUICKCHECK_UI_HIRARKI_KEUANGAN.md`.
2. Jalankan blok `UAT Visual Ringkas`.
3. Jalankan blok `UAT Interaksi Ringkas`.
4. Jalankan blok `UAT Cross-Role Ringkas`.
5. Simpan evidence screenshot dan ringkasan status (`LULUS` / `LULUS DENGAN CATATAN` / `TUNDA`).

Target waktu:
- 10-15 menit per modul untuk validasi baseline.