Wian Drs
36 lines
2.0 KiB
Markdown
36 lines
2.0 KiB
Markdown
# 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.
|