Fondasi visual
Palet BRI, netral, status semantik, tipografi, dan kontrol dasar.
#0F7A45#EAF7F0Final#9A6700#FFF8E8Draft#B42318#FEF3F2Open#0857C3#F3F9FDBerjalanAMS PAI-TI
Monitoring approval, pipeline audit, dan tenggat proyek.
Platform audit TI & ICOFR berbasis Risk Control Library — terpusat, terukur, dan siap approval lintas UKA. Ukuran dasar ~14.5px / line-height 1.5.
Layout
Konvensi grid Bootstrap agar struktur halaman seragam dan mudah dilanjutkan.
Gunakan row / col-* untuk halaman dan form. Hindari CSS Grid baru untuk layout kolom kecuali komponen visual khusus (mis. chart embed).
row · col-md-6 · col-lg-4 · g-3Komponen interaktif
Demo hidup library yang dipakai di form, daftar, dan visualisasi modul.
Theme Snow · toolbar header / format / list / link — body LHA, deskripsi temuan, catatan approval.
quill@2Pola yang dipakai di list modul (Universe, PAT, EWP, …): card-table, search React, StatusBadge, table-responsive. Ringan, penuh kontrol UI, tanpa jQuery.
ams-table · ReactPilih ini bila butuh tampilan BRI-native, link detail, dan aksi toolbar yang menyatu dengan design system.
Pola resmi DataTables + Bootstrap 5 + Responsive: table table-striped nowrap + responsive: true. Cocok untuk list admin dengan sort/length/pagination bawaan.
datatables.net@3 · responsive@4Pilih ini bila butuh fitur tabel lengkap (sort multi-kolom, length menu, responsive collapse) dengan effort minimal.
Searchable untuk opsi panjang; multi-select / tags untuk kontrol RCL, PIC, Orgeh. Native select tetap dipakai bila opsi sedikit (< ~8). Alternatif React: react-select.
select2@4Chart in-app (bar, doughnut, line) dengan palet BRI untuk ringkasan modul. Insight Dashboard tetap memakai embed Superset / Tableau. Lazy-load agar bundle awal ringan.
chart.js · react-chartjs-2Loading & perceived performance
Skeleton untuk navigasi; lazy load hanya library berat agar bundle awal ringan.
modules/loading.tsx menampilkan skeleton saat navigasi antar halaman modul.
Transisi lembut first paint (~160ms). Dilewati otomatis jika prefers-reduced-motion.
Quill, DataTables, Select2, Chart.js, dan Embed board di-load on demand lewat next/dynamic.
Shell, nav, CTA, dan konten kritis di atas fold tetap eager agar TTI cepat.
Platform ops
Performa & ketahanan untuk akses VPN / intranet BRI — tanpa ketergantungan CDN publik.
Cache aplikasi untuk referensi master, dashboard embed, dan respons API yang sering dibaca — mengurangi latensi dan beban database.
Pembatasan request per user / IP / endpoint (login, approval, unduh dokumen) untuk menjaga stabilitas dan menahan abuse.
Aset UI dilayani dari origin internal (VPN/intranet) dengan cache browser & reverse proxy — tanpa ketergantungan CDN publik.
Mengelola & membatasi koneksi ke database serta layanan surrounding agar lonjakan user tidak menyebabkan connection exhaustion, overload, atau timeout.
Library berat (Quill, DataTables, Select2, embed) di-load on demand; first paint tetap ringan.
Logging terstruktur, audit trail, dan error tracing (mis. Sentry) untuk deteksi dini gangguan produksi.
Connection pooling
Bukan untuk membuat database “lebih cepat”, tetapi memakai koneksi secara efisien dan mencegah connection exhaustion saat traffic naik — termasuk ke layanan surrounding (DB, Redis, API eksternal, message broker, Elasticsearch, IRMS, DiO, dll.).
Contoh: 100 user concurrent — tiap request buka koneksi DB baru.
- 100 user
- 100 koneksi DB
- Database mulai berat
- Connection limit tercapai
- Request gagal / timeout
Padahal belum tentu 100 user butuh 100 koneksi secara bersamaan.
Aplikasi mengelola misalnya 20 koneksi dalam pool, dipakai bergantian.
- 100 user
- Connection pool
- 20 koneksi DB
- Koneksi dipakai bergantian
- Setelah selesai dikembalikan ke pool
Koneksi tidak ditutup tiap request — diambil, dipakai, dikembalikan.
Mengelola dan membatasi koneksi ke database serta service pendukung agar lonjakan jumlah user tidak menyebabkan koneksi habis, database overload, atau request mengalami timeout.
Code quality
Standar clean code untuk handover: static analysis, Quality Gate, lint & type-check.
- ReliabilityTanpa blocker bug baru
- SecurityTanpa vulnerability baru
- MaintainabilityCode smell terkendali
Analisis static (bug, vulnerability, code smell, duplication, coverage) sebelum merge/release.
Gate wajib lulus — New Code / Overall sesuai kebijakan proyek. Fail = tidak deploy.
Lint & type-check di local/CI mendampingi Sonar agar isu tertangkap lebih awal.
Komponen reusable, naming jelas, tanpa dead code — selaras Engineering Handbook.
Pola UX & prinsip
Ringkasan pola yang dipakai di portal dan modul — ditutup dengan prinsip desain.
Layout halaman & form memakai row / col-* agar konsisten dan mudah dilanjutkan.
Sidebar sticky + scroll mask, collapse tooltip, topbar kontekstual per modul.
1 CTA primer + 1 sekunder di first viewport; konten sekunder di bawah fold.
Densitas tinggi menggantikan kartu berulang; timeline scroll match sibling.
Pipeline hover (lift/glow), dense-row chevron slide, enter delays.
Badge semantik, SweetAlert2 konfirmasi, halaman 403/404 bergaya status.
Journey jelas. Alur kerja auditor dari portal ke modul inti tetap terhubung dan mudah diikuti.
Brand konsisten. Palet BRI dipakai seragam di seluruh permukaan aplikasi.
Siap produksi. Komponen (Quill, DataTables, Select2, Chart.js) di-lazy load; skeleton menjaga perceived performance; platform ops (cache, rate limit, reverse proxy) menjaga ketahanan; Quality Gate menjaga kualitas kode.