Terkunci. Berikut spec lengkap yang ditulis ulang - menggantikan dokumen v5, konsisten dengan seluruh keputusan hingga revisi terakhir (label = navigasi, chevron = flyout, hierarki 3 tingkat). Siap copy-paste.
BMP - Spec Navigasi & Landing (Mockup Final v9)
Dokumen pasangan dari mockup-bmp-landing-v9.html. Semua angka CSS px; token warna merujuk file Design Foundation. Dokumen ini menggantikan spec v5 secara penuh.
1. Struktur halaman
Tiga zona: rail sidebar (fix 224 / collapsed 48), page-head (fix 48), kanvas fluid. Tanpa footer di semua halaman. Tanpa greeting. Tanpa launcher grid.
2. Sidebar (rail), atas → bawah
3. Header (page-head 48)
- Kiri: breadcrumb hierarkis; "Home" = ikon saja; semua level dapat diklik; kedalaman maksimum 3 level.
- Kanan: [aksi sekunder kontekstual, mis. "See all" 30px] + [dot koneksi] + [bell] + [avatar 26].
- Avatar = dropdown berkelompok: header (nama + email) → grup Preferences (My Profile, Preferences) → grup Session (Log Out, warna danger).
- Tidak ada title-block di content - breadcrumb adalah identitas halaman.
4. Navigasi: hierarki, gestur, flyout
4.1 Hierarki halaman (3 tingkat)
| Tingkat |
Halaman |
Cara masuk |
Breadcrumb |
Baris aktif |
| 0 - Landing |
My Attention |
klik logo |
Home / My Attention |
tidak ada |
| 1 - Workspace |
Overview per modul (12: 9 bisnis + 3 settings) |
klik label modul, atau item flyout "Overview" |
Home / Accounting |
modul tsb |
| 2 - Sub-halaman |
list/report/form (Sales Invoice, Stock Balance, dll.) |
klik item flyout |
Home / Accounting / Sales Invoice |
modul tsb |
Halaman utilitas (My Profile, Preferences) diperlakukan seperti landing: di luar workspace, tanpa baris aktif.
4.2 Peta gestur → efek
4.3 Pembagian peran penanda
- Rail (baris aktif) = "di wilayah mana saya" - rail konstan di semua halaman (peta stabil; spatial memory); hanya highlight yang bergerak.
- Breadcrumb = "path lengkap saya, dan bagaimana mundur".
- Flyout = "ke mana saya bisa pergi di modul ini".
4.4 Struktur flyout
- Item pertama = Overview (= Workspace; jalur bagi mode collapsed dan jalur alternatif mode expanded).
- Grup ber-header legend divider: label 10px uppercase duduk di atas garis tipis yang menembusnya - terbaca pemisah, bukan item menu. Grup modul bisnis: Transactions / Masters / Reports (kosakata konsisten dengan dokumen modul).
- Tanpa policy di flyout bisnis - policy hidup di Administration. Flyout System & Utility: grup Access / Communication / System.
- Panel: min-width 224, radius 8, shadow, overlay tanpa layout shift.
4.5 Aturan produksi flyout
Click-to-pin; tutup pada klik-luar/Esc; hanya satu flyout terbuka (membuka satu = lain menutup otomatis); clamp viewport - flyout yang melewati batas bawah bergeser naik otomatis; max-height calc(100vh − 16px) + scroll internal.
4.6 Keselamatan gestur
- Chevron tidak pernah menavigasi → menjelajah menu selalu aman; guard form-belum-disimpan hanya muncul pada gestur navigasi eksplisit (label, item flyout, logo) - normal seperti klik link mana pun. Membuka menu tidak boleh menjadi "hukuman untuk niat yang tidak bersalah".
- Chevron: visual 14px, hit area ≥ 28×28, hover + tooltip sendiri ("Sub-menu"), focusable terpisah; Enter pada baris = navigasi.
5. Isi landing (My Attention)
- KPI strip 4 kartu: label uppercase 11 muted; nilai 24 tabular; semantik warna angka: amber = perlu perhatian, merah = overdue, gelap = netral.
- Tabel antrean: header uppercase abu solid; angka rata kanan tabular; badge status semantik; aksi baris (View/Process) hover-reveal.
- Pager tradisional: "1-20 of 230" + lingkaran bernomor (aktif = teal) + Next + pemilih ukuran halaman. Bukan Load More.
6. Halaman Workspace modul
Kelas satu (tujuan klik label). Isi lean: KPI strip modul + antrean perhatian modul. Tanpa direktori kartu - flyout + Ctrl+K menutup long tail.
7. Dimensi kunci
8. Token (cross-reference Design Foundation)
--rail #EFEAE3 · --canvas #FAFAF8 · --card #FFF · --border #E5DFD3 · --line #EEEAE0 · --hover #E6DFD2 · --accent #0D9488 (langka: logo, pager aktif, focus ring) · warn/bad semantik · radius 6-8 · Inter (tabular numerals) · ikon stroke 2, 16/17px.
9. Log keputusan (riwayat iterasi v1→v9)
10. Catatan implementasi produksi
- Persist per user: state rail (expanded/collapsed), density, landing pin.
- Role-gating: zona settings hanya role admin; user bisnis melihat rail tanpa divider+settings.
- Keyboard: chevron tombol terpisah (Tab sendiri); Enter pada baris = navigasi; focus-visible ring; Ctrl+K global.
- Touch: handle always-visible; chevron hit area ≥28×28.
- Dirty-form guard hanya pada gestur navigasi (label, item flyout, logo) - tidak pernah pada chevron.
- Opsional (belum terkunci): progressive module enablement - rail menampilkan hanya modul aktif + alur "Add module" di Administration. Default saat ini: semua modul tampil.
Spec v9 ini menutup bab navigasi/landing secara definitif. Kalau mau, langkah berikutnya adalah mockup v9 yang mengimplementasikan spec ini persis (label sebagai link ke Workspace, chevron sebagai button flyout, halaman Workspace sebagai tujuan) - atau langsung kembali ke antrean dokumen modul (Sales dengan lensa manufaktur).