Admin — Disbursement
Overview
Halaman Disbursement digunakan oleh admin untuk memonitor dan mengelola transaksi pencairan dana (disbursement) dari payment gateway. Halaman ini menampilkan daftar transaksi disbursement yang telah dilakukan, dengan kemampuan filter berdasarkan rentang tanggal, payment gateway, bank, dan status. Admin juga dapat membuat permintaan disbursement baru melalui fitur Generate.
Access
- URL:
/dashboard/disbursement - Role required: Admin
- Navigation path: Sidebar > Payment Gateway > Disbursement
Submenu Payment Gateway
| Menu | URL |
|---|---|
| Deposit List | /dashboard/deposit-list |
| Disbursement (aktif) | /dashboard/disbursement |
| Balance History | /dashboard/disbursement-balance-history |
| Recipient List | /dashboard/recipient-list |
| Report Payment Gateway | /dashboard/report-payment-gateway |
| Settlement History | /dashboard/settlement-history |
| Setting Price | /dashboard/setting-price |
Page Layout
Header
| Element | Type | Deskripsi |
|---|---|---|
| Disbursement | Heading | Judul halaman |
| Generate | Button (hitam, kanan atas) | Membuat permintaan disbursement baru — membuka modal "Create Receipt" |
Filter Area
Area filter berada di bagian atas halaman. Data tidak ditampilkan secara otomatis — admin harus menekan Search untuk memuat data.
| Element | Type | Default | Deskripsi |
|---|---|---|---|
| Date (start) | Date picker | Hari ini | Tanggal mulai rentang pencarian |
| to (end) | Date picker | Hari ini | Tanggal akhir rentang pencarian |
| Payment Gateway | Dropdown | Select Payment Gateway | Filter berdasarkan payment gateway |
| Bank | Dropdown | All | Filter berdasarkan bank |
| Status | Dropdown | All | Filter berdasarkan status transaksi |
| Search | Button (oranye/hitam) | — | Jalankan pencarian dengan filter yang dipilih |
| Reset | Button (outline) | — | Hapus semua filter dan kembalikan ke kondisi awal |
Opsi Payment Gateway:
| Kode | Keterangan |
|---|---|
| ppay | Payment gateway ppay |
| zpay | Payment gateway zpay |
| spay | Payment gateway spay |
| dpay | Payment gateway dpay |
Opsi Status:
| Value | Keterangan |
|---|---|
| All | Semua status |
| Requested | Permintaan disbursement sedang menunggu diproses |
| Completed | Disbursement berhasil diselesaikan |
| Failed | Disbursement gagal diproses |
Empty State
Ketika tidak ada filter yang diterapkan atau data tidak ditemukan:
Showing 0 Data Please use filter to see specific data
Tabel Data Disbursement
Tabel menampilkan daftar transaksi disbursement sesuai filter yang diterapkan.
| Kolom | Deskripsi |
|---|---|
| Ref ID | UUID unik identifikasi transaksi disbursement |
| Create Time | Waktu permintaan disbursement dibuat (format: DD/MM/YYYY HH:mm:ss) |
| Done Time | Waktu transaksi disbursement selesai diproses (format: DD/MM/YYYY HH:mm:ss) |
| Account No | Nomor rekening tujuan disbursement |
| Account Name | Nama pemilik rekening tujuan disbursement |
| Desc | Deskripsi transaksi (contoh: "Disbursement Request by [username]") |
| Amount | Nominal disbursement (nilai negatif, menandakan pengurangan saldo) |
| Fee | Biaya transaksi disbursement (nilai negatif) |
| Status | Status terkini dari transaksi disbursement |
Catatan: Nilai pada kolom Amount dan Fee ditampilkan sebagai angka negatif (contoh:
-25.00,-2.00), menandakan pengurangan dari saldo payment gateway.
Pagination
| Element | Deskripsi |
|---|---|
| N Data | Total jumlah data yang ditemukan |
| Tombol navigasi halaman | Pertama, Sebelumnya, Nomor halaman, Berikutnya, Terakhir |
| Go to page | Input nomor halaman untuk navigasi langsung |
| Rows | Dropdown pilihan jumlah baris per halaman (default: 100) |
Features
Memfilter Data Disbursement
Langkah:
- Pilih Date start (tanggal mulai) menggunakan date picker — klik ikon kalender atau klik pada field tanggal.
- Pilih Date end (tanggal akhir) — opsional.
- Pilih Payment Gateway dari dropdown.
- Pilih Bank dari dropdown (opsional).
- Pilih Status dari dropdown (opsional).
- Klik tombol Search.
- Tabel akan memuat dan menampilkan data sesuai filter.
Reset filter: Klik tombol Reset untuk menghapus semua filter.
Generate — Create Receipt (Buat Disbursement Baru)
Fitur untuk membuat permintaan disbursement baru ke payment gateway.
Langkah:
- Klik tombol Generate (kanan atas halaman).
- Modal Create Receipt akan muncul.
- Pilih Payment Gateway dari dropdown.
- Sistem akan otomatis menampilkan:
- Pending Balance: Saldo pending pada payment gateway tersebut.
- Balance: Saldo aktif/available pada payment gateway tersebut.
- Pilih Bank Account tujuan disbursement dari dropdown.
- Masukkan Amount (nominal disbursement) — minimal saldo tersisa adalah 5.
- Klik Save untuk membuat disbursement, atau Cancel / Close untuk membatalkan.
Fields pada modal Create Receipt:
| Field | Type | Deskripsi |
|---|---|---|
| Payment Gateway | Dropdown | Pilih payment gateway sumber dana |
| Pending Balance | Read-only | Jumlah saldo pending pada payment gateway terpilih |
| Balance | Read-only | Jumlah saldo aktif pada payment gateway terpilih |
| Bank Account | Dropdown | Pilih rekening bank tujuan disbursement |
| Amount | Text input | Nominal yang akan dicairkan (minimum remaining balance: 5) |
| Cancel | Button | Batalkan dan tutup modal |
| Save | Button | Simpan dan proses permintaan disbursement |
UI Elements Reference
| Label | Type | Location | Deskripsi |
|---|---|---|---|
| Generate | Button (hitam) | Header kanan | Buka modal Create Receipt |
| Date | Date picker (range) | Filter area | Pilih rentang tanggal |
| Payment Gateway | Dropdown (React Select) | Filter area | Pilih payment gateway |
| Bank | Dropdown (React Select) | Filter area | Pilih bank |
| Status | Dropdown (React Select) | Filter area | Pilih status |
| Search | Button (oranye/hitam) | Filter area | Jalankan filter |
| Reset | Button (outline) | Filter area | Reset filter |
| N Data | Text | Pagination atas & bawah | Jumlah total data |
| Rows | Dropdown | Pagination bawah kanan | Pilih jumlah baris per halaman |
Filters & Controls
| Filter | Tipe | Opsi | Default |
|---|---|---|---|
| Date start | Date picker | Tanggal bebas | Hari ini |
| Date end | Date picker | Tanggal bebas | Hari ini |
| Payment Gateway | React Select dropdown | 16 payment gateway | — (kosong) |
| Bank | React Select dropdown | All + daftar bank | All |
| Status | React Select dropdown | All, Requested, Completed, Failed | All |
Data Displayed
Tabel menampilkan data transaksi disbursement dari payment gateway.
Contoh data (filter: start date = 01/11/2025, end date = 04/03/2026, Payment Gateway = znpay):
| Ref ID | Create Time | Done Time | Account No | Account Name | Desc | Amount | Fee | Status |
|---|---|---|---|---|---|---|---|---|
| 58833b02-cd6f-4bd2-a4b3-60fe38cbae44 | 04/12/2025 14:27:29 | 04/12/2025 14:27:30 | 00000000 | Znpay Recipient | Disbursement Request by fsok | -25.00 | -2.00 | Completed |
| 2a5b3b0f-0086-4ff9-8dbf-52b722906e04 | 04/12/2025 14:24:29 | 04/12/2025 14:24:30 | 00000000 | Znpay Recipient | Disbursement Request by fsok | -10.00 | -2.00 | Completed |
| db2af5ff-ccbd-41cd-86a5-ed0f0f2a0784 | 27/11/2025 12:24:02 | 27/11/2025 12:24:04 | 9090909090 | Test Name | Disbursement Request by fsok | -150.00 | -2.00 | Failed |
| b9dd7683-768f-4384-b87f-da0240142834 | 21/11/2025 13:16:43 | 21/11/2025 21:19:36 | 9090909090 | Test Name | Disbursement Request by ivan | -50.00 | -2.00 | Requested |
Screenshots
- Initial state (no data):
disbursement.png - Populated table (filter: znpay, start 01/11/2025):
disbursement-table.png - Generate / Create Receipt modal:
disbursement-generate-modal.png
Notes
- Data tidak dimuat secara otomatis — admin wajib mengisi filter dan menekan Search untuk melihat data.
- Kolom Amount dan Fee menampilkan nilai negatif karena merepresentasikan pengurangan saldo pada payment gateway.
- Kolom Desc selalu berisi teks "Disbursement Request by [username]" yang menunjukkan siapa yang meminta disbursement.
- Halaman ini adalah read-only — tidak ada tombol aksi per baris. Untuk membuat disbursement baru gunakan tombol Generate.
- Default jumlah baris per halaman adalah 100 (berbeda dengan halaman lain yang defaultnya 10).
- Pada modal Create Receipt, field Pending Balance dan Balance terisi otomatis setelah memilih Payment Gateway.
- Minimal saldo tersisa setelah disbursement adalah 5 (sesuai placeholder pada field Amount).