accounting_dev_v2/docs/TAHAP-15.md

Tahap 15 — UI/UX Laptop dan HP

Shell dan navigasi

• NavigationService adalah satu-satunya konfigurasi menu untuk desktop dan mobile; keduanya merender partials/navigation_items yang sama.
• Menu dan quick action difilter permission; Admin tetap memperoleh seluruh menu administrasi.
• Pencarian menu, badge approval, quick action, breadcrumb, mobile bottom action bar dan shortcut scanner tersedia.
• Link mati Umum dihapus. Identitas shell menggunakan Accounting tanpa identitas template lama.

Mobile behavior

• Touch target minimum 44 px, modal fullscreen, numeric keyboard, lazy image, sticky action, collapsible/filter panel utility dan summary card utility.
• Tabel biasa diubah ke card/detail per baris menggunakan label header. DataTables tetap memakai responsive extension.
• Form POST menolak submit ganda dan menampilkan global loading. Posting offline selalu ditolak.
• Upload gambar di atas 350 KB dikompresi client-side ke maksimum 1600 px/JPEG 82% jika browser mendukung Canvas/DataTransfer.
• Laporan profesional tetap dapat dilihat sebagai HTML; PDF bukan satu-satunya jalur.

Frontend dan PWA

• Bootstrap, DataTables, Select2, QR scanner dan SweetAlert dimuat berdasarkan halaman. SweetAlert duplikat pada login dihapus.
• Bootstrap dan jQuery memiliki fallback lokal. Aturan responsive kanonis berada di app-final.css; app-responsive.min.css dipertahankan hanya sebagai marker kompatibilitas cache PWA lama. JavaScript UI tetap menggunakan app-ui.min.js.
• PWA memakai ikon 192/512 yang benar. Service worker hanya cache /assets/; halaman dan respons transaksi tidak disimpan untuk penggunaan offline.

Pengujian viewport

Headless Chrome diuji pada:

• 360×800
• 390×844
• 768×1024
• 1366×768

Artefak berada di docs/ui-tests/. Pemeriksaan regresi dapat dijalankan dengan php index.php stage15check.

Pengujian transaksi autentik tetap perlu dilakukan dengan akun per role pada perangkat fisik sebelum Production, terutama scanner/camera permission, keyboard mobile, upload foto, modal panjang dan proses approval.