Chapter 6: System UI/UX
Bab ini mendefinisikan permukaan sistem-level yang dilihat dan dioperasikan oleh pengguna: Landing Page, Workspace Modul, Settings Hub, Administrasi, dan mekanisme Progressive Module Enablement. Bab ini adalah lapisan presentasi dari Chapter 3 (Architecture) dan Chapter 4 (Data Model).
Status: 🔒 Final / Mengikat (v2.0) Dasar: Spec Navigasi & Landing v9 · UI Reference v1 · Peta Menu BMP Rev3 · Temuan UX (ERPNext v16) Tujuan: Mengunci struktur halaman landing, workspace, settings, dan role-gating UI agar selaras dengan arsitektur data dan prinsip interaksi.
6.1 Landing Page: "My Attention"
Landing page adalah halaman pertama yang dilihat setiap user setelah login. Ini bukan dashboard konsumer — tidak ada greeting, tidak ada widget dekoratif, tidak ada news feed.
6.1.1 Struktur
| Zona |
Konten |
| Breadcrumb |
Home / My Attention |
| KPI Strip |
4 kartu metrik lintas-modul |
| Tabel Antrean |
Daftar item yang membutuhkan perhatian user |
| Pager |
Pager tradisional (bukan Load More) |
6.1.2 KPI Strip
- Jumlah: Maksimum 4 kartu.
- Label: UPPERCASE, 11px, warna muted.
- Nilai: 24px, tabular numerals, rata kiri.
- Semantik Warna Angka:
- Amber = perlu perhatian (mendekati deadline)
- Merah = overdue / melewati batas
- Gelap (netral) = informasi biasa
- Klik Kartu: Navigasi langsung ke list/report yang relevan (Level 2 sub-halaman).
6.1.3 Tabel Antrean
- Header: UPPERCASE, abu solid.
- Angka: Rata kanan, tabular.
- Badge Status: Semantik, paling kiri setelah checkbox.
- Aksi Baris (View/Process): Hover-reveal — hanya muncul saat baris di-hover. Menggunakan pola tone surface (bukan hue baru) sesuai Pola Positif #1 di UI Reference.
- Empty State: Tidak boleh kosong-mati. Wajib menampilkan CTA aksi berikutnya (misal: "Tidak ada item yang membutuhkan perhatian. [Buat Sales Invoice]").
6.1.4 Pager
- Format: "1-20 of 230" + lingkaran bernomor (aktif = Teal) + Next + pemilih ukuran halaman.
- Bukan Load More (Aturan #2, UI Reference).
6.2 Workspace Modul
Workspace adalah halaman tujuan saat user mengklik Label Modul di rail sidebar. Ini adalah "Overview" per modul.
6.2.1 Prinsip: Lean, Bukan Direktori
- Isi: KPI strip modul + antrean perhatian modul.
- Tanpa Direktori Kartu: Tidak ada grid kartu yang menampilkan semua fitur modul. Long-tail navigasi ditangani oleh Flyout dan Ctrl+K Search Palette.
- Rationale: Temuan UX #4 (ERPNext) menunjukkan bahwa launcher grid/direktori kartu mencampuradukkan Platform, Master Data, dan Policy dalam satu permukaan — melanggar prinsip Kemurnian Konteks.
6.2.2 Struktur Workspace
| Zona |
Konten |
| Breadcrumb |
Home / [Nama Modul] (misal: Home / Accounting) |
| KPI Strip |
3-4 kartu metrik spesifik modul |
| Antrean Perhatian |
Tabel item yang butuh aksi dalam modul ini |
| Aksi Cepat |
Tombol "Create" dominan (slot primary) |
6.2.3 Baris Aktif di Rail
- Saat berada di Workspace, baris modul tersebut di rail sidebar di-highlight.
- Breadcrumb menunjukkan Home / [Modul] (kedalaman level 1).
6.3 Settings Hub
Settings Hub adalah satu permukaan terpusat untuk semua kebijakan (policy) sistem. Ini menggantikan pola ERPNext di mana settings tersebar di setiap modul.
6.3.1 Prinsip Strict UI Ownership
- Sidebar hanya entitas milik domain. Settings tidak pernah muncul di flyout modul bisnis.
- Lintas domain via Ctrl+K / Settings Hub. Jika user butuh mengubah policy, mereka masuk ke Settings Hub, bukan mencari di sidebar modul.
- Rationale: Aturan #4 UI Reference — launcher tidak boleh menyamakan Platform/Master/Policy.
6.3.2 Struktur Settings Hub
Settings Hub diakses melalui zona settings di rail sidebar (hanya terlihat untuk role Admin). Terdiri dari 3 workspace settings:
| Workspace Settings |
Isi |
| Organization |
Company, Fiscal Year, Warehouse Tree, Cost Center, Branch |
| Administration |
User, Role, Permission Manager, User Permission, Permission Inspector, Workspace Settings, Notification Settings |
| System & Utility |
Background Job, RQ Job, Error Log, Data Import/Export, Email Queue, Log Settings |
6.3.3 Pembagian Konten Settings Hub
| Kategori |
Lokasi |
Contoh |
| Policy Global |
Settings Hub → Organization |
Fiscal Year, Company, Branch |
| Master Data |
Modul Pemiliknya |
Item (di Inventory), Customer (di Sales), Supplier (di Buying) |
| Konfigurasi Sistem |
Settings Hub → System & Utility |
Background Job, Error Log, Data Import |
| User & Role |
Settings Hub → Administration |
User, Role, Permission Manager |
6.4 Administrasi & Role-Gating UI
6.4.1 Zona Settings Hanya untuk Admin
- Role-gating: Zona settings (divider + 3 workspace settings) di rail sidebar hanya terlihat untuk role Admin/IT.
- User Bisnis: Melihat rail tanpa divider dan tanpa zona settings. Mereka hanya melihat modul operasional (9 bisnis).
- Implementasi: Konfigurasi workspace di database (tabel workspaces) menentukan visibilitas per role. Hide UI ≠ security — setiap route tetap dijaga oleh Ash.Policy.Authorizer.
6.4.2 Avatar Dropdown (Header)
Avatar di header (26px) membuka dropdown berkelompok (Level 3, tanpa backdrop):
| Grup |
Isi |
| Header |
Nama + Email user |
| Preferences |
My Profile, Preferences |
| Session |
Log Out (warna danger) |
- Aturan: Dropdown dikelompokkan per jenis (Aturan #12 UI Reference). Tidak mencampur navigasi, preferensi, dan aksi sesi dalam satu daftar datar.
6.4.3 Halaman Utilitas
- My Profile & Preferences: Diperlakukan seperti landing page — di luar workspace, tanpa baris aktif di rail.
- Breadcrumb: Home / My Profile atau Home / Preferences.
6.5 Progressive Module Enablement ("Hide, Don't Burn")
6.5.1 Filosofi
- Hide, Don't Burn: Fitur yang belum dipakai disembunyikan (bisa dinyalakan saat bisnis tumbuh). Hanya fitur yang benar-benar tidak relevan yang dibuang.
- Rationale: Peta Menu Rev3 — UMKM parfum tidak butuh semua fitur ERP, tetapi sistem harus siap saat bisnis berkembang.
6.5.2 Implementasi UI
- Default: Rail sidebar menampilkan semua modul (9 bisnis + 3 settings untuk admin).
- Opsional (belum terkunci): Progressive module enablement — rail menampilkan hanya modul aktif + alur "Add module" di Administration.
- Toggle: Dilakukan di Settings Hub → Administration → Workspace Settings.
- Persist: State modul aktif disimpan di tabel modules (Chapter 4).
6.5.3 Status Fitur per Modul
Setiap fitur dalam modul memiliki salah satu dari tiga status:
| Status |
Simbol |
Perilaku UI |
Perilaku Database |
| Tampil |
✅ |
Terlihat di flyout & bisa diakses |
Tabel ada, data aktif |
| Hide |
👁️ |
Tersembunyi dari UI, bisa dinyalakan |
Tabel ada, is_hidden = true |
| Buang |
❌ |
Tidak pernah muncul |
Tabel tidak dibuat / tidak digunakan |
6.6 Cloak Enforcement di UI
6.6.1 Prinsip
- Cloak Registry (Chapter 4) mendefinisikan field apa yang dienkripsi dan role siapa yang boleh membacanya.
- UI tidak pernah menerima nilai field Cloak jika role user bukan pembaca. Ini bukan sekadar "disembunyikan di frontend" — field tersebut dibuang dari payload API sebelum sampai ke browser.
- Hide UI ≠ Security: Konfigurasi workspace/flyout hanya presentasi. Setiap route & LiveView tetap dijaga oleh Ash.Policy.Authorizer.
6.6.2 Grup Cloak & Dampaknya di UI
| Grup |
Field yang Dilindungi |
Pembaca Runtime |
Dampak UI |
| A — Margin/COGS |
COGS, Gross Profit, Valuation Rate |
Owner/Finance |
Kolom margin tidak muncul di list untuk role lain |
| B — Resep |
BOM qty, rate, formulation code |
Owner, Prod/R&D |
Operator hanya lihat kode internal BOM |
| C — Payroll/PII |
Email, phone, bank, salary |
Owner/Finance |
Field PII tidak muncul di detail employee untuk role non-finance |
| D — Bank |
Account number, bank transactions |
Owner/Finance |
Detail rekening tidak muncul untuk IT/role lain |
| E — Rahasia Entitas |
Tax ID, BPOM license, drum code |
Bervariasi per field |
Disembunyikan sesuai role pembaca |
6.6.3 Contoh Penerapan: BOM
- Owner/Finance & Prod/R&D: Melihat BOM lengkap (qty, rate, formula).
- Operator Produksi: Hanya melihat kode internal BOM dan instruksi kerja. Field qty/rate tidak ada di payload API untuk role ini.
- IT/System Admin: Tidak bisa mengakses halaman BOM sama sekali (workspace config + policy).
6.7 Personalisasi & User State
6.7.1 State yang Di-Persist per User
| State |
Nilai |
Persist di |
| Rail State |
Expanded / Collapsed |
Tabel user_preferences |
| Density |
Comfortable (44px) / Compact (36px) |
Tabel user_preferences |
| Landing Pin |
Halaman default saat klik logo |
Tabel user_preferences |
| Saved Views |
Filter & kolom tersimpan per list |
Tabel saved_views |
| Column Preferences |
Urutan & visibilitas kolom per list |
Tabel column_preferences |
6.7.2 Density
- Comfortable (44px): Baris tabel lebih renggang. Cocok untuk pengguna yang memprioritaskan keterbacaan.
- Compact (36px): Baris lebih rapat. Cocok untuk power-user yang butuh lebih banyak data per layar.
- Toggle: Di Preferences (diakses via Avatar dropdown).
6.7.3 Keyboard & Touch Preferences
- Focus Ring: Selalu terlihat (focus-visible) untuk navigasi keyboard.
- Touch: Handle always-visible, hit area ≥ 28×28px.
- Chevron: Tombol terpisah (Tab sendiri), Enter pada baris = navigasi.
6.8 Header & Global Navigation
6.8.1 Struktur Header (Page-head 48px)
| Posisi |
Konten |
| 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 notifikasi] + [Avatar 26px] |
6.8.2 Breadcrumb Rules
- Tidak ada title-block di content — breadcrumb adalah identitas halaman.
- Kedalaman maksimum 3 level: Home / [Workspace] / [Sub-halaman].
- Semua level klikabel — user bisa mundur ke level mana pun.
- Di-generate dari pohon navigasi yang sama dengan sidebar (Aturan #5 UI Reference).
6.8.3 Bell Notifikasi
- Menampilkan jumlah notifikasi yang belum dibaca.
- Klik membuka panel anchored (Level 2) di bawah bell.
- Bukan modal (Proporsionalitas Interupsi — Level 2, bukan Level 5).
6.8.4 Dot Koneksi
- Indikator status koneksi sync-agent (untuk deployment Office + Mobile Laptop).
- Hijau = terhubung, Merah = terputus, Amber = sinkronisasi berjalan.
Catatan Integrasi v2.0 (Changelog Chapter 6)
- [BARU] Seluruh Chapter: Chapter ini sebelumnya berstatus "Belum disusun" di v1.0. Kini diisi penuh berdasarkan integrasi 4 dokumen.
- [BARU] 6.1 Landing Page: Spesifikasi "My Attention" dari Spec v9 (KPI strip, tabel antrean, pager tradisional).
- [BARU] 6.2 Workspace Modul: Prinsip "lean, bukan direktori" dari Spec v9 dan Temuan UX #4.
- [BARU] 6.3 Settings Hub: Konsep satu permukaan terpusat dari UI Reference Aturan #4 dan Peta Menu Rev3.
- [BARU] 6.4 Role-Gating UI: Pembagian zona settings untuk Admin vs user bisnis dari Peta Menu Rev3.
- [BARU] 6.5 Progressive Module Enablement: Filosofi "Hide, Don't Burn" dari Peta Menu Rev3.
- [BARU] 6.6 Cloak Enforcement di UI: Penggantian istilah "Chinese Wall" menjadi "Cloak Registry" sesuai update terbaru.
- [BARU] 6.7 Personalisasi: Density, rail state, landing pin dari UI Reference dan Spec v9.
- [BARU] 6.8 Header & Global Navigation: Struktur header, breadcrumb rules, bell notifikasi dari Spec v9.
Langkah Selanjutnya:
Chapter 6 kini telah lengkap mendefinisikan seluruh permukaan sistem-level. Berikutnya kita bisa melangkah ke:
- Chapter 4: Data Model — Menerapkan filter "Hide, Don't Burn" dari Peta Menu Rev3 ke skema database, memastikan tabel modules, workspaces, dan settings siap menopang Chapter 6.
- Chapter 8: Modul ERP Core — Menulis detail per modul (Accounting, Inventory, Sales, dll.) dengan format baru yang diawali Peta Menu.
Mana yang ingin Anda kerjakan selanjutnya?