# 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.