Studi kasus · 2026
Private Dashboard Banker
Dasbor operasional privat untuk sebuah bank nasional: mengelola pengajuan kartu kredit dari kanal telemarketing dan mitra co-brand, dari unggah dokumen nasabah, verifikasi OTP, sampai tanda tangan digital dan pengiriman ke sistem inti bank. Proyek tim; saya masuk sebagai kontributor di tahap akhir. Sumber dan demo tidak dibagikan karena milik klien, jadi halaman ini menampilkan pratinjau dengan data fiktif.
01Masalahnya
Pengajuan kartu kredit sebuah bank nasional masuk lewat telemarketing dan mitra co-brand (marketplace, dompet digital, payment gateway). Setiap nasabah harus mengunggah dokumen identitas, lolos pemeriksaan data kependudukan, lalu menandatangani dokumen secara digital. Tim operasional butuh satu dasbor untuk memasukkan nasabah satu per satu atau massal lewat Excel, memantau status tiap pengajuan langkah demi langkah, mengelola mitra beserta kredensialnya, dan membatasi akses sesuai peran.
02Prosesnya
Dua repositori terpisah. API memakai Node.js dengan Express 4, Sequelize di MySQL, Mongoose di MongoDB, Redis, dan MinIO untuk penyimpanan dokumen; admin memakai Vue 2 dengan Vuex, Element UI, dan ECharts, dibangun dari template vue-element-admin (lisensi MIT). Autentikasi memakai JWT RS256 dengan tiga peran (Super, Process, Inquiry) dan jalur masuk lewat SSO internal. Nasabah menyelesaikan prosesnya lewat tautan bertoken. Pekerjaan latar belakang berjalan lewat 8 subscriber berbasis Redis dan 8 tugas terjadwal (penandatanganan massal, laporan pengiriman SMS, pengiriman dokumen ke sistem inti, penghapusan data setelah tiga bulan), dan aplikasi dijalankan dengan PM2.
03Solusinya
Operator masuk lewat SSO, melihat kartu status (pending, in progress, failed, completed) dan grafik bulanan, mingguan, serta proporsi di dasbor, lalu membuka daftar nasabah untuk mencari, menyaring, mengimpor Excel, mengekspor, dan membaca linimasa langkah tiap pengajuan. Halaman co-brand mengelola mitra dengan validasi form, halaman admin mengatur pengguna dan peran, dan halaman Config mengatur teks serta saklar notifikasi SMS dan email.
Modul proyek
Dikerjakan tim sejak Januari 2020. Modul utamanya:
- Pengajuan nasabah. Nasabah dimasukkan satu per satu atau massal lewat unggahan Excel; tiap nasabah menerima tautan bertoken untuk melengkapi data.
- Unggah dokumen. KTP, swafoto, NPWP, dan slip gaji disimpan di object storage (MinIO); dokumen yang salah bisa diminta unggah ulang.
- Tanda tangan digital. Nasabah didaftarkan ke penyedia tanda tangan digital, memasukkan OTP, lalu dokumen ditandatangani; penandatanganan massal berjalan sebagai tugas terjadwal.
- Notifikasi. SMS, email, dan WhatsApp lewat gateway bank, dengan laporan pengiriman SMS yang ditarik berkala. Teksnya diatur dari halaman Config.
- Mitra co-brand. Daftar mitra dengan kredensial masing-masing, jalur API ber-key, dan tampilan nasabah per mitra.
- Peran dan akses. Tiga peran (Super, Process, Inquiry) dengan JWT RS256, SSO internal, dan menu yang dibatasi per peran.
- Dasbor dan laporan. Kartu status, grafik ECharts, ekspor Excel, dan unduhan dokumen nasabah dalam ZIP.
- Pengiriman ke sistem inti. Dokumen yang sudah ditandatangani dikirim ke sistem pengajuan pinjaman bank; kegagalan dicatat dan dicoba ulang oleh tugas terjadwal.
- Kebersihan data. Data nasabah dihapus otomatis setelah tiga bulan.
Pratinjau halaman
Gambar diambil dari salinan lokal aplikasi dengan data nasabah fiktif (nama acak, email example.test, NIK palsu). Nama dan logo bank serta mitra dinetralkan, dan layanan eksternal tidak tersambung.
Dasbor
Daftar nasabah
Co-brand (validasi form: pekerjaan saya)
Pengguna dan konfigurasi
Kontribusi saya
Saya masuk di tahap akhir proyek dan menyumbang 9 commit (13 sampai 18 September 2023) dari 863 commit di dua repositori. Modul lain di atas dikerjakan anggota tim sejak 2020 dan bukan klaim saya. Rinciannya:
- Validasi form co-brand (API). Aturan express-validator dengan pesan berbahasa Indonesia: username huruf dan garis bawah 8 sampai 25 karakter, kata sandi dan merchant key 10 sampai 25 karakter, Partner ID 5 digit.
- Form co-brand (admin). Aturan form, batas panjang input, dan placeholder yang sejalan dengan validasi di API; plus perbaikan data dasbor dan daftar co-brand (5 commit, termasuk satu merge).
- Respons gateway SMS (API). Pembaca respons yang menerjemahkan kode status gateway (berhasil, parameter kurang, kredensial salah, nomor tidak valid, IP tidak diizinkan, dan lainnya) menjadi pesan yang terbaca.
- Pencegahan DOM XSS (API). Sanitasi alamat pengalihan dari respons dan HTML rentang tanggal pada halaman viewer (2 commit).
- Kebersihan log (admin). Mematikan log detail pengguna di konsol peramban.
Catatan
Ini proyek tim milik klien, jadi kode sumber dan demo tidak dibagikan; pratinjau di atas dari salinan lokal dengan data fiktif. Antarmuka admin dibangun dari template sumber terbuka vue-element-admin (lisensi MIT).