Chapter 6: System UI/UX

Status: 🔒 Final / Mengikat (v2.0)

Bab ini mendefinisikan bagaimana konsep arsitektural (Module, Permission, Role, Workspace, Settings) divisualisasikan dan diinteraksikan oleh pengguna. Jika Chapter 3 mendefinisikan bagaimana hal itu berjalan di backend (Ash.Policy.Authorizer), bab ini mendefinisikan bagaimana hal itu terlihat dan terasa di frontend.

Fondasi visual dan pola interaksi di sini sepenuhnya mengikuti token dari Chapter 1 dan pola perilaku dari Chapter 2.

6.1 Settings Hub: Satu Permukaan Konfigurasi

Sejalan dengan Aturan Emas #4 (Satu Settings Hub; platform tak terlihat user bisnis), seluruh konfigurasi sistem dipusatkan di satu Workspace bernama Settings Hub. Tidak ada tombol "Pengaturan" yang tersebar di tiap modul bisnis.

6.1.1 Arsitektur Halaman Settings Hub

Settings Hub menggunakan layout dua kolom:

1. Kiri (Sub-rail Setempat): Navigasi kategori statis (Master Data, Policies, System, Users & Roles).
2. Kanan (Kanvas): Konten konfigurasi yang dipilih, diformat sebagai List View atau Form View standar BMP.

6.1.2 Pembagian Zona Settings Hub

6.2 Module Management & Enablement

BMP mendukung togglable modules via tabel modules (Chapter 4.13). Pengaturan visibilitas ini dikelola melalui UI Module Enablement di bawah zona System.

6.2.1 UI Module Enablement

• Tampilan: List view sederhana dengan kolom: Nama Modul, Status (Toggle), dan Default Visibility.
• Interaksi: Mengubah toggle dari Active ke Inactive akan:
  1. Menyembunyikan modul dari Rail Sidebar global.
  2. Menghapus item modul dari hasil pencarian Command Palette (Ctrl+K).
  3. Menonaktifkan route LiveView terkait (memunculkan halaman 404/Disabled bila diakses langsung via URL).
• Aturan Ketergantungan: Jika modul Manufacturing dinonaktifkan, sistem otomatis menyembunyikan modul Quality (karena bergantung pada WO dari Manufacturing). Validasi ini dilakukan di backend Ash.

6.2.2 Default Visibility

Beberapa modul memiliki status default yang disembunyikan (hide) untuk menyederhanakan UI UMKM, namun bisa diaktifkan:

• Project / R&D (Default: 👁️ Hide)
• Quality (Default: Active bila Manufacturing Active, else Hide)

6.3 Workspace & Navigation Config

Workspace adalah representasi dari Ash.Domain di UI. Modul bisnis standar (Sales, Accounting, dll.) tidak bisa dihapus, namun urutan dan visibilitas sub-menu (flyout) dapat dikustomisasi per role.

6.3.1 Workspace Editor

Hanya role Owner/Sysadmin yang dapat mengakses editor ini. UI editor menggunakan pola drag-and-drop tree (menggunakan komponen nested list standar).

• Kolom Kiri: Pohon menu default sistem.
• Kolom Kanan: Pohon menu kustom untuk Role yang dipilih.
• Aturan Visibilitas Cloak (Lapis 3): Admin dapat mencentang "Hide in UI" untuk item flyout tertentu (misal: menyembunyikan menu "Cost Center" untuk role Sales). Ini hanya presentasi; keamanan data tetap dipegang oleh Ash.Policy.Authorizer.

6.3.2 Generation of Rail & Flyout

Rail sidebar (Chapter 2.1.1) di-render dinamis berdasarkan:

1. Modul yang aktif (tabel modules).
2. Workspace config yang berlaku untuk user_roles saat ini.
3. Filter domain company_id (Context Switcher).

6.4 User, Role & Permission Matrix

Sistem ini memisahkan identitas (users), fungsi (roles), dan kewenangan (permissions).

6.4.1 User Management UI

• List View: Menampilkan nama, email, role utama, dan status akun (Active/Inactive).
• Form View: Mengikuti pola "Who → What → When/How".
  • Who: Nama, Email, Avatar.
  • What: Multi-select role (menggunakan komponen tag input).
  • When/How: Masa berlaku akun, pembatasan IP (opsional, untuk IT).

6.4.2 Role Management UI

Tabel roles bersifat tetap (8 departemen + fungsi spesifik). UI ini bukan untuk membuat role baru, melainkan untuk mengonfigurasi Role Default dan Permission Matrix.

• Role List: Accounting, Finance, Sales, Production, Warehouse, IT, Owner, BPOM/QA.
• Role Detail: Menampilkan permission matrix (Resource × Action).

6.4.3 Permission Matrix Editor

UI ini memetakan permissions.role_id × permissions.resource × permissions.action.

• Layout: Tabel grid. Baris = Resource (mis: SalesOrder, Item). Kolom = Action (create, read, update, submit, cancel).
• Interaksi: Checkbox tiga state:
  • ✅ (Allow)
  • ❌ (Deny)
  • ⬜ (Inherit / Default Deny)
• Cloak Integration: Untuk resource yang memiliki field Cloak (mis: Item dengan field resep/Cloak Grup B), akan muncul kolom khusus "Read Encrypted" yang hanya bisa di-check oleh Owner.

6.5 System Administration Console (IT Home)

Sesuai Chapter 2.7.2, akun IT/Sysadmin murni mendapat home berupa System Console, bukan Landing "My Attention" bisnis. Console ini berfokus pada kesehatan infrastruktur.

6.5.1 Dashboard IT Console

• Sync-Agent Status: Menampilkan status koneksi per node (Laptop mobile). Indikator: Tersinkron, Menunggu, Offline, Konflik (mengikuti 5 state di Chapter 2.1.4).
• Schema Version: Peringatan visual (badge warning) jika ada node yang schema_version tertinggal dari server.
• Database Health: Ukuran file SQLite, status WAL mode, dan riwayat busy_timeout event.
• Audit Log: Feed real-time (via PubSub company:{id}:system_events) menampilkan aksi kritis (login, export data, perubahan permission).

6.5.2 Manajemen Cloak & Security

• Halaman khusus untuk memantau field apa saja yang terenkripsi.
• Export Control: UI untuk mengeluarkan token sementara (one-time URL) bagi Owner jika dibutuhkan ekspor data sensitif (mis: backup resep parfum). Ini adalah implementasi dari Aturan Cloak #3 (Export = aksi terpisah).

6.6 Personalization & Account Model

Layer ketiga dari manajemen akun (Chapter 2.7) adalah Personal Customization. Tidak ada UI admin yang mengatur ini; sepenuhnya dikelola user di halaman Account Preferences.

6.6.1 Account Preferences UI

Diakses melalui Avatar dropdown (grup Preferences). Menggunakan layout Form View standar.

• Appearance: Pilihan ukuran baris tabel (Comfortable 44px / Compact 36px). Status collapse Rail (Expanded/Collapsed).
• Notifications: Toggle per kategori (Approval Requests, Task Mentions, System Alerts).
• Saved Views: List manajemen view yang disimpan user (tabel saved_views). User bisa mengatur view default saat membuka list dokumen tertentu.

6.6.2 Dirty-Form & Context Switching

• Jika user mengubah Context Switcher (Company/Fiscal Year) sambil ada form yang dirty (belum disimpan), sistem akan memunculkan Modal Level 5 (Konfirmasi destruktif) yang memperingatkan bahwa perubahan akan hilang.

6.7 Global Context Switcher

Konteks operasional (Company, Fiscal Year) tidak boleh mencemari label navigasi (Aturan #11). Pemilih konteks ini diletakkan di akhir Rail Sidebar atau di dalam Page-head, tergantung kebutuhan layout.

6.7.1 UI Company Switcher

• Tampilan: Dropdown anchored (Level 2) yang menampilkan nama perusahaan aktif.
• Perilaku: Mengganti company akan me-refresh seluruh data LiveView dan memfilter query Ash berdasarkan company_id. Tombol aksi (Save, Submit) dinonaktifkan sementara selama transisi konteks (loading state).

6.7.2 UI Fiscal Year / Period Switcher

• Hanya visible untuk modul Accounting dan Inventory.
• Mengubah periode aktif akan memfilter default list view dan membatasi posting date di form transaksi.

End of Chapter 6