Chapter 6 — System UI/UX: Antarmuka sebagai Penjaga CLoAK

6.0 Register Keputusan

Table

6.1 Filosofi Dasar: UI sebagai Perpanjangan CLoAK

Di BMP, antarmuka bukan sekadar "tampilan yang bagus". UI adalah mekanisme penegak keamanan terdepan — apa yang tidak dilihat user, tidak bisa dieksploitasi. Prinsip payung:

1. Visibility by Permission: Setiap pixel di layar harus lulus pemeriksaan permission. Jika IT tidak punya permlevel 1, field rate, amount, dan valuation_rate tidak hanya disabled — mereka tidak dirender sama sekali di DOM.
2. Navigasi sebagai Tembok: Sidebar menu tidak dibuat dinamis berdasarkan apa yang "user-friendly". Sidebar dibuat berdasarkan Role Matrix CLoAK — IT tidak akan pernah melihat menu "Manufacturing" atau "Accounting" di sidebarnya, meski mereka tahu URL-nya ada.
3. Konsistensi Mengurangi Kesalahan: Satu pola layout, satu pola aksi, satu pola notifikasi di seluruh modul. Ketika user pindah dari Stock ke Accounting, mereka tidak perlu belajar ulang.
4. UMKM-First, Not Enterprise-First: Tidak ada wizard berjalan 7 langkah, tidak ada konfigurasi layar yang memerlukan manual 20 halaman. Setiap layar harus bisa dipahami oleh user yang tidak pernah mengikuti training formal.

6.2 Navigasi & Information Architecture

6.2.1 Peta Menu BMP (Cloak)

Navigasi BMP mengikuti pola "Cloak" — menu yang terlihat tergantung siapa yang mengenakan jubah (role). Peta menu tidak dihasilkan dari Module Def runtime; ia adalah struktur statis yang didefinisikan di kode dan di-deploy bersama aplikasi.

Struktur Level Navigasi:

Table

Aturan CLoAK di Navigasi:

• Owner / Administrator: Lihat semua menu L1-L3.
• Finance / Accounts Manager: Lihat Accounting, Selling (read-only invoice), Buying (read-only PI). Tidak melihat Manufacturing menu.
• Manufacturing Manager / R&D: Lihat Manufacturing, Stock (RM, WIP, FG), Quality. Tidak melihat Accounting menu.
• Stock Manager / Gudang: Lihat Stock (terbatas), Buying (PR, DN). Tidak melihat BOM rate, Accounting, Selling harga.
• Sales Admin: Lihat Selling, Stock (FG read-only). Tidak melihat Manufacturing, Accounting detail.
• IT / System Manager: Lihat Settings, Users, Integrations, Build, Error Log, Background Job. Tidak melihat menu bisnis (Accounting, Manufacturing, Selling, Stock kecuali struktur master).
• Operator Produksi: Lihat Work Order (baca), Stock Entry (input), Batch. Tidak melihat menu lain.

Edge case:

1. User dengan multi-role (mis. Finance + Manufacturing Manager) = union menu, tapi field tetap tersaring permlevel. User melihat kedua menu, tapi field sensitif di masing-masing tetap terlindungi.
2. IT mengetahui URL langsung ke /app/bom = sistem menolak dengan pesan "Anda tidak memiliki akses ke dokumen ini" setelah pengecekan permission. Navigasi bukan satu-satunya garis pertahanan; permission doctype adalah garis terakhir.
3. Menu yang di-hide tapi menjadi target workflow (mis. notifikasi approval) = notifikasi muncul di Bell Icon, tapi klik membuka form read-only atau approval dialog terbatas, bukan navigasi penuh ke modul.

6.3 Landing Page & Dashboard

6.3.1 Landing Page Role-Based

Setiap role memiliki satu halaman awal yang menjadi pintu masuk setelah login. Halaman ini bukan "home generik" — ia adalah cockpit tugas untuk role tersebut.

Table

Perilaku kunci:

• Landing page tidak boleh menampilkan data sensitif cross-role. Contoh: IT melihat "System Health" dengan jumlah Error Log, tapi tidak melihat "Outstanding Sales Invoice" meski error log tersebut berasal dari modul Selling.
• Number Card dan Chart di landing page menggunakan query tersaring yang sama dengan list view — tidak ada bypass.
• Shortcut di landing page adalah deep link ke doctype yang diizinkan; shortcut yang mengarah ke doctype terlarang tidak dirender.

6.3.2 Dashboard Chart & Number Card

Dashboard chart adalah visualisasi read-only dari report yang sudah ada. Mereka tidak memiliki query sendiri; mereka adalah instance visual dari report yang tersaring.

Aturan BMP:

• Chart "Pendapatan Bulanan" hanya terlihat oleh Owner dan Finance.
• Chart "Produksi Harian" terlihat oleh Manufacturing Manager dan Owner.
• Chart "System Health" terlihat oleh IT.
• Tidak ada chart yang menampilkan data agregat lintas role — tidak ada "Overview Perusahaan" yang menampilkan BOM rate + Financial + Sales dalam satu layar.

6.4 Interaction Patterns & Aturan Interaksi

6.4.1 Pola Aksi Seragam (Universal Action Patterns)

Setiap form dan list di BMP mengikuti pola aksi yang identik. User tidak perlu menebak "di modul ini tombol save-nya di mana?"

Table

Aturan transisi status:

• Draft → Submit: validasi berjalan, GL/ledger ditulis, notifikasi terkirim.
• Submitted → Cancel: tidak ada hapus fisik. Cancel membuat baris pembalik (reverse entry) dengan jejak utuh.
• Cancelled → Amend: salinan baru dengan link ke dokumen asli; dokumen asli tetap terlihat.

6.4.2 Konfirmasi & Peringatan

BMP menggunakan tingkat intervensi yang berbeda untuk aksi berbeda:

Table

Prinsip: Error dan peringatan harus actionable. Pesan "Permission denied" ditolak; yang diterima adalah "Anda tidak memiliki akses ke BOM rate. Hubungi Owner untuk permintaan akses."

6.4.3 Real-time & Kolaborasi

• Indicator "Sedang Diedit": Jika user A membuka form Sales Invoice, user B melihat indikator "Dibuka oleh A" di list view. Ini mencegah konflik save, bukan untuk kolaborasi real-time editing.
• Notification Bell: Notifikasi muncul untuk assignment (Workflow Action), approval request, dan error background job. Notifikasi tidak muncul untuk "data berhasil disimpan" — itu tugas toast.
• Auto-Save Draft: Form draft di-auto-save setiap 30 detik ke local storage. Jika browser crash, user dipulihkan ke draft terakhir.

6.5 Form Design & Data Entry

6.5.1 Layout Form: Pola BPM (Build-Process-Monitor)

Setiap form transaksi di BMP mengikuti pola BPM Layout yang sama, terinspirasi dari kebutuhan manufaktur tapi diuniversalkan:

plain

┌─────────────────────────────────────────┐

│ HEADER (Metadata Dokumen) │

│ No. Dokumen | Tanggal | Party | Status │

├─────────────────────────────────────────┤

│ BARIS TRANSAKSI (Child Table) │

│ Item | Qty | Rate* | Amount* | Warehouse │

├─────────────────────────────────────────┤

│ FOOTER (Total & Referensi) │

│ Total | Tax | Grand Total | Terms │

├─────────────────────────────────────────┤

│ TIMELINE & COMMENT (Kolaborasi) │

│ Komentar | Versi | Audit Log │

├─────────────────────────────────────────┤

│ ACTION BAR (Simpan | Submit | Cancel) │

└─────────────────────────────────────────┘

Catatan: Field bertanda * (rate, amount) di-set ke permlevel 1 — tersembunyi dari IT, Operator, dan Sales Admin.

6.5.2 Field-Level Security di UI

CLoAK diimplementasikan di UI pada tiga level:

1. Hidden: Field tidak dirender sama sekali di DOM. Digunakan untuk field sensitif yang tidak relevan untuk role (mis. valuation_rate untuk Operator Produksi).
2. Read-Only: Field dirender tapi tidak bisa diubah. Digunakan untuk field yang boleh dilihat tapi tidak boleh diedit role tersebut (mis. item_code di Work Order untuk Operator).
3. Editable: Field bisa diubah. Default untuk field dalam kewenangan role.

Perilaku khusus Customize Form:

• IT boleh membuka Customize Form untuk melihat struktur field (nama, tipe, urutan).
• IT tidak boleh mengubah permlevel field. Perubahan permlevel memerlukan approval Owner.
• UI Customize Form menampilkan permlevel dalam mode read-only untuk IT, editable hanya untuk Owner.

6.5.3 Input Patterns

Table

Aturan validasi client-side:

• Format number mengikuti locale id-ID: titik ribuan, koma desimal.
• Tanggal tidak boleh lebih dari 1 hari ke depan tanpa approval (mencegah predating).
• Link field menampilkan hanya record yang diizinkan oleh User Permission — dropdown warehouse hanya menampilkan warehouse yang di-assign ke user.

6.6 List Views, Reports & Search

6.6.1 List View

List view adalah gerbang utama ke data. BMP menggunakan list view dengan prinsip:

• Kolom default minimal: Hanya kolom yang esensial untuk role tersebut. Tidak ada "tampilkan 20 kolom sekaligus".
• Saved Views: User boleh menyimpan filter, sort, dan pilihan kolom sebagai "View" pribadi. Saved views tidak mengubah default untuk user lain.
• Filter Builder: Filter di list view menggunakan field doctype yang sama dengan form — termasuk field custom dan dimensi akuntansi.
• Bulk Actions: Hanya untuk aksi yang aman secara permission. IT tidak melihat "Bulk Update" untuk field rate atau valuation_rate.

6.6.2 Global Search

Global Search (ikon kaca pembesar di App Bar) mencari lintas doctype dengan batasan:

• Hasil tersaring oleh Role Permission — user hanya melihat doctype yang mereka punya akses Read.
• Hasil tersaring oleh User Permission — user hanya melihat record dalam scope mereka (mis. warehouse tertentu).
• Ranking: Dokumen yang baru diakses user naik peringkat (personalized), tapi tidak mengaburkan hasil yang relevan secara textual.

6.6.3 Report & Query

Report di BMP mengikuti pola dari Framework Chapter 1 (Report Builder, Query, Script):

• Report Builder: User menyusun kolom dan filter tanpa kode. Hasil bisa di-export xlsx/csv.
• Query Report: SQL dengan parameter terbatas, ditulis oleh implementor.
• Script Report: Python execute(filters), ditulis oleh implementor.

Aturan CLoAK di Report:

• IT boleh membuat report teknis (Error Log summary, Background Job status).
• IT tidak boleh membuat report yang mengakses doctype sensitif (BOM, Invoice, GL Entry).
• Report untuk doctype sensitif hanya bisa dibuat oleh Owner/Finance/Manufacturing Manager sesuai domain.
• Setiap export report tercatat di Access Log (Framework Chapter 2).

6.7 Print & Output Experience

6.7.1 Print Format

Print Format adalah layout PDF yang dirender dari data dokumen. BMP menggunakan dua mesin render:

1. Jinja Template: Layout tradisional dengan HTML/CSS, fleksibel untuk dokumen formal (Invoice, Faktur Pajak, Surat Jalan).
2. Print Format Builder: Editor drag-drop untuk layout sederhana, menghasilkan JSON yang dirender oleh mesin yang sama.

Aturan CLoAK:

• IT boleh mengedit Print Format untuk dokumen operasional non-sensitif: Delivery Note, Stock Entry, Material Request.
• IT tidak boleh mengedit Print Format untuk dokumen sensitif: BOM, Sales Invoice, Purchase Invoice, Journal Entry.
• Print Format untuk dokumen sensitif di-restrict via Role Permission Manager.

6.7.2 Email & PDF Output

• Kirim Email dari Form: Tombol "Email" mengambil template dari Email Template (Framework Chapter 5) dan melampirkan PDF.
• Email Template untuk dokumen sensitif tidak boleh mengandung field rate, amount, atau valuation_rate. Template hanya boleh merujuk field non-sensitif (nomor dokumen, tanggal, nama item, qty).
• PDF Header: Setiap PDF resmi BMP memuat watermark/logo, nomor dokumen, dan footer "Dicetak dari BMP pada [timestamp] oleh [user]" — jejak audit fisik.

6.8 Mobile & Responsive Design

6.8.1 Mobile-First untuk Operator Lapangan

UMKM parfum tidak selalu memiliki workstation di setiap sudut gudang. Operator produksi dan staf gudang sering mengakses BMP dari HP.

Prinsip mobile:

• Tap target minimal 44×44 dp: Tombol aksi utama (Submit, Save) diletakkan di thumb zone.
• Form simplifikasi: Di layar <768px, child table ditampilkan sebagai card list (satu baris = satu card), bukan grid horizontal yang memerlukan scroll.
• Barcode/QR Scan: Input field untuk Item Code dan Batch No mendukung scan kamera HP — mengurangi kesalahan ketik di gudang.
• Offline Tolerance: Form draft bisa disimpan di local storage saat signal hilang, lalu disinkronkan saat koneksi kembali.

6.8.2 Responsive Breakpoints

Table

6.9 Accessibility & Localization

6.9.1 Aksesibilitas

BMP menargetkan WCAG 2.1 Level AA dengan prioritas:

• Kontras warna: Teks utama vs background minimal 4.5:1. Tidak menggunakan warna sebagai satu-satunya indikator status (ikon selalu mendampingi warna).
• Keyboard Navigation: Seluruh navigasi bisa dilakukan dengan keyboard (Tab, Enter, Escape). Shortcut kritis: Ctrl + / untuk search, Ctrl + S untuk simpan draft.
• Screen Reader: Semua field form memiliki label yang terhubung (<label for="...">), dan ikon memiliki aria-label.

6.9.2 Lokalisasi (Bahasa & Format)

• Bahasa default: Bahasa Indonesia (id). Tidak ada fallback ke Inggris yang membingungkan — semua label, error message, dan bantuan dalam Bahasa Indonesia yang baik.
• Format angka: 1.234.567,89 (titik ribuan, koma desimal) — sesuai konvensi Indonesia.
• Format tanggal: DD-MM-YYYY atau DD/MM/YYYY — tidak ada format MM/DD/YYYY yang rawan salah interpretasi.
• Zona waktu: Asia/Jakarta (WIB/WITA/WIT) — tidak ada ambiguitas UTC di tampilan user.
• Override label: Via Property Setter (Framework Chapter 1) atau lapisan terjemahan per instalasi — tidak mengubah kode sumber.

6.10 CLoAK di Level UI: Ringkasan Implementasi

Table

6.11 Edge Case & Mitigasi

1. Celah: User mengubah role sendiri di browser (client-side manipulation) untuk melihat menu tersembunyi. Mitigasi: Sidebar dirender dari server-side permission check; manipulasi DOM hanya mengubah tampilan, bukan akses data. API call tetap ditolak.
2. Celah: User membuat bookmark ke URL form yang tidak boleh mereka akses. Mitigasi: Setiap API getdoc dan get_list menjalankan permission check server-side; URL tidak pernah menjadi bypass.
3. Celah: Print Format yang sudah tidak dipakai masih mengandung field sensitif lama. Mitigasi: Audit Print Format berkala; sistem menolak render field yang permlevel-nya lebih tinggi dari role user.
4. Celah: Mobile view menampilkan field sensitif karena layout berbeda dari desktop. Mitigasi: Permlevel check berjalan sebelum render, tidak peduli breakpoint atau device.
5. Celah: Notifikasi email mengandung snapshot data sensitif karena template lupa di-update. Mitigasi: Review template email saat perubahan permlevel; unit test mengirim email dummy dan memverifikasi tidak ada field sensitif di body.

6.12 Kesimpulan

Chapter 6 menegaskan bahwa di BMP, UI bukan lapisan kosmetik — UI adalah penjaga CLoAK yang pertama dan terakhir. Setiap keputusan desain, dari warna tombol hingga struktur sidebar, harus lolos pertanyaan: "Apakah ini membuat data sensitif lebih sulit dibocorkan oleh orang yang tidak berwenang?"

Dengan navigasi handcrafted, layout seragam, field-level security via permlevel, dan audit trail di setiap output (print, email, export), BMP mencapai keseimbangan antara kegunaan (usability) dan keamanan (security) — dua hal yang sering dianggap saling bertentangan, tapi di BMP menjadi satu kesatuan arsitektur.

Catatan untuk reviewer: Chapter ini sengaja ditulis agresif dalam pembatasan (default deny) karena pengalaman menunjukkan bahwa "memberi akses dulu, membatasi kemudian" selalu meninggalkan celah. Lebih mudah membuka sedikit akses atas permintaan Owner daripada menutup akses yang sudah bocor.

Apakah ada bagian lain yang perlu diselaraskan terminologinya, atau Chapter 6 ini sudah siap untuk direview?