Navigasi, Search, dan Table
BCM Suite menggunakan layout enterprise: sidebar kiri, header global, tenant/company switcher, search, notification, profile menu, dan content area.
Sidebar dan Header
| Area | Fungsi | Catatan UX |
|---|---|---|
| Sidebar | Navigasi modul dalam group Overview, Foundation, Analysis, Continuity, Governance, Platform. | Bisa collapse. Saat collapse, icon dan tooltip tetap membantu navigasi. |
| Breadcrumb | Menunjukkan posisi halaman saat ini. | Dipakai untuk orientasi, bukan pengganti sidebar. |
| Global search | Cari modul, dokumen, fungsi, evidence, atau record tenant. | Tenant-scoped. Tidak boleh menampilkan data tenant lain. |
| Notification | Event penting seperti review due, approval, failed connector, incident, dan export job. | Harus bisa dibuka dari header. |
| Profile menu | Profile, personalisasi, dan logout. | Menu dengan label berbeda harus menuju destination berbeda. |
Table Standar
Semua list enterprise memakai pola table standar yang sama.
| Fitur | Cara pakai | Ekspektasi |
|---|---|---|
| Search | Ketik keyword, tekan Enter/Search. | Search tidak boleh call API pada setiap ketikan. |
| Filter | Tambahkan filter field, operator, dan value. | Multiple filter harus bisa dipakai bila field mendukung. |
| Sort | Klik header kolom. | Sort server-side dengan default deterministik. |
| Pagination | Pilih page size dan pindah halaman. | Dropdown tidak boleh mendorong table atau muncul lepas dari parent. |
| Column menu | Hide/show dan pin kolom bila didukung. | Control yang tampil harus berfungsi; jika belum berfungsi, tidak boleh dirender aktif. |
| Detail | Klik row atau action detail. | Detail membuka drawer/sheet, bukan panel inline yang mendorong layout. |
| Export | Gunakan tombol export bila permission cukup. | Export harus audited dan tenant-scoped. |
Form, Drawer, dan Modal
| Pattern | Dipakai untuk | Standar |
|---|---|---|
| Modal | Task pendek seperti confirm, quick add sederhana, atau action singkat. | Ukuran sesuai isi, bukan dipaksa kecil. |
| Drawer/sheet | Detail record, create/edit multi-field, review evidence, upload/download. | Header/footer fixed, body scrollable, Enter submit bila aman. |
| Full page | Workflow kompleks banyak section seperti settings, ACL, audit binder setup, atau onboarding. | Hierarki jelas dan tidak terasa seperti form demo. |
Loading dan Empty State
- Loading memakai skeleton/shimmer agar layout tidak meloncat.
- Empty state menjelaskan sumber data dan action berikutnya.
- Error state memberi pesan bisnis yang bisa ditindaklanjuti.
- Unauthorized/forbidden harus redirect atau menampilkan state yang jelas, bukan 401 loop.