Admin — Dashboard
Overview
Dashboard adalah halaman utama backoffice admin 88WAGER. Halaman ini memberikan ringkasan operasional harian secara sekilas, meliputi total transaksi deposit & withdraw hari ini, data win/lose per provider game, serta grafik perbandingan deposit dan withdraw dalam beberapa hari terakhir.
Halaman ini diakses pertama kali setelah admin berhasil login dan menjadi titik navigasi menuju semua modul backoffice.
Access
- URL:
/dashboard - Role: Admin (autentikasi wajib)
- Redirect jika belum login:
/auth/login - Navigation path: Sidebar → Dashboard (menu paling atas)
Page Layout
Halaman terdiri dari dua area utama:
| Area | Posisi | Keterangan |
|---|---|---|
| Sidebar | Kiri (lebar tetap) | Navigasi ke semua modul backoffice |
| Konten Utama | Kanan | Header top bar + konten halaman |
Sidebar
Sidebar terletak di sisi kiri halaman dan menampilkan logo serta daftar navigasi modul. Sidebar dapat di-collapse sehingga hanya ikon yang terlihat.
Kontrol Sidebar
| Elemen | Tipe | Keterangan |
|---|---|---|
| Logo (ikon "W") | Gambar | Logo aplikasi di pojok kiri atas |
Label 88WAGER | Teks | Nama brand di bawah logo |
Tombol collapse icon | Button | Sembunyikan/tampilkan label menu sidebar |
Menu Navigasi Sidebar
Semua menu memiliki ikon di sebelah kiri. Menu dengan anak panah (chevron) dapat di-expand untuk menampilkan submenu.
| # | Label Menu | Tipe | URL / Aksi |
|---|---|---|---|
| 1 | Dashboard | Link | /dashboard |
| 2 | Domain Management | Button (expand) | Submenu bertingkat |
| 3 | Content Management | Button (expand) | Submenu bertingkat |
| 4 | Player Management | Button (expand) | Submenu bertingkat |
| 5 | Referral Management | Button (expand) | Submenu bertingkat |
| 6 | Affiliate Management | Button (expand) | Submenu bertingkat |
| 7 | Agent Management | Button (expand) | Submenu bertingkat |
| 8 | Bank Management | Button (expand) | Submenu bertingkat |
| 9 | Rebate Management | Button (expand) | Submenu bertingkat |
| 10 | Payment Gateway | Button (expand) | Submenu bertingkat |
| 11 | Deposit | Button (expand) | Lihat submenu Deposit |
| 12 | Withdraw | Button (expand) | Lihat submenu Withdraw |
| 13 | Bonus | Button (expand) | Submenu bertingkat |
| 14 | Report | Button (expand) | Submenu bertingkat |
| 15 | Settings | Button (expand) | Submenu bertingkat |
| 16 | Staff | Button (expand) | Submenu bertingkat |
| 17 | Mobile Money Site | Button (expand) | Submenu bertingkat |
| 18 | Desktop Money Site | Button (expand) | Submenu bertingkat |
| 19 | Game Management | Button (expand) | Submenu bertingkat |
Submenu: Deposit
Klik menu Deposit untuk memperluas submenu berikut:
| Label | URL |
|---|---|
| Deposit Monitoring | /dashboard/deposit-monitoring |
| Manual Deposit | /dashboard/manual-deposit |
| Deposit History | /dashboard/deposit-history |
Submenu: Withdraw
Klik menu Withdraw untuk memperluas submenu berikut:
| Label | URL |
|---|---|
| Withdraw Monitoring | /dashboard/withdraw-monitoring |
| Manual Withdraw | /dashboard/manual-withdraw |
| Withdraw History | /dashboard/withdraw-history |
Saat satu submenu dibuka, submenu lain akan tertutup secara otomatis.
Header (Top Bar)
Top bar berada di bagian paling atas area konten (kanan), selalu terlihat di semua halaman.
Bagian Kiri Header
| Elemen | Tipe | Keterangan |
|---|---|---|
| Badge DP + angka | Link | Jumlah transaksi deposit pending; klik → /dashboard/deposit-monitoring |
| Badge WD + angka | Link | Jumlah transaksi withdraw pending; klik → /dashboard/withdraw-monitoring |
Nilai balance (contoh: 38,678,386.78) | Teks | Saldo balance admin saat ini |
| Ikon Refresh | Gambar/Button | Klik untuk memperbarui nilai balance secara real-time |
Bagian Kanan Header
| Elemen | Tipe | Keterangan |
|---|---|---|
| Ikon Currency setting | Gambar | Ikon pelengkap currency switcher |
| Tombol IDR | Button (dropdown) | Currency aktif; klik untuk ganti currency |
| Ikon notifikasi (lonceng) | Button | Akses notifikasi sistem |
| Dropdown English | Combobox | Language switcher; default: English |
Tombol Profile (fsok · online) | Button | Menampilkan username dan status koneksi admin |
| Tombol Logout | Button | Keluar dari sesi admin → redirect ke /auth/login |
Currency Switcher
Tombol IDR di header memungkinkan admin mengganti tampilan currency. Setelah dipilih, nilai balance dan summary card akan dikonversi sesuai kurs.
Language Switcher
Dropdown English di header memungkinkan admin mengganti bahasa antarmuka. Pilihan yang tersedia bergantung pada konfigurasi sistem.
Konten Utama Dashboard
Heading
Halaman dibuka dengan heading level 1: "Dashboard".
Summary Cards
Tiga kartu statistik ditampilkan di bawah heading, menggambarkan data transaksi hari ini:
| Card | Warna | Ikon | Keterangan |
|---|---|---|---|
| Total Deposit | Hijau | Keranjang belanja | Total nilai deposit yang disetujui hari ini |
| Total Withdraw | Merah/Oranye | Dompet | Total nilai withdraw yang disetujui hari ini |
| Today's Win Lose | Oranye | Jam/Grafik | Selisih win/lose provider hari ini (bisa negatif) |
Nilai ditampilkan sebagai angka numerik. Jika belum ada transaksi hari ini, nilai ditampilkan sebagai 0.
Tabel: Today's Win Lose
Bagian ini menampilkan data win/lose per provider game hari ini dalam bentuk tabel.
| Kolom | Keterangan |
|---|---|
| Nama Provider | Nama provider/platform game |
| Nilai Win/Lose | Nilai numerik (positif = win, negatif = lose) |
Jika tidak ada data, tabel ditampilkan kosong.
Chart: Deposit / Withdraw
Grafik batang (bar chart) yang menampilkan perbandingan total deposit dan withdraw dalam rentang beberapa hari terakhir.
| Elemen | Keterangan |
|---|---|
| Heading "Deposit / Withdraw" | Judul section (level 2) |
| Sumbu X | Tanggal (format: MM/DD, contoh: 02/25, 03/01) |
| Sumbu Y | Nilai nominal transaksi |
| Batang hijau | Deposit |
| Batang merah | Withdraw |
| Legenda | Keterangan warna (Deposit / Withdraw) di bawah chart |
Dialog: Announcement
Saat pertama kali membuka dashboard dalam satu sesi, sistem menampilkan dialog Announcement secara otomatis di tengah layar.
| Elemen | Tipe | Keterangan |
|---|---|---|
| Heading "Announcement" | Judul dialog | Level 2 |
| Konten pengumuman | Teks | Pengumuman dari sistem; jika kosong ditampilkan "No Announcement" |
| Tombol × (tutup) | Button | Menutup dialog, kembali ke tampilan dashboard normal |
Dialog ini hanya muncul sekali per sesi. Setelah ditutup, tidak muncul lagi selama sesi yang sama (dikontrol via
localStorage: announcementDisplayed).
Features
1. Memantau Transaksi Pending (Badge DP/WD)
Badge di header menampilkan jumlah transaksi deposit dan withdraw yang sedang menunggu persetujuan secara real-time.
Langkah:
- Perhatikan badge DP dan WD di top bar.
- Angka di samping label menunjukkan jumlah transaksi pending.
- Klik DP untuk membuka halaman Deposit Monitoring.
- Klik WD untuk membuka halaman Withdraw Monitoring.
Hasil: Admin langsung diarahkan ke halaman monitoring yang relevan.
2. Menyegarkan Balance
Admin dapat menyegarkan nilai saldo secara manual tanpa reload halaman.
Langkah:
- Perhatikan nilai balance di header (contoh:
38,678,386.78). - Klik ikon Refresh di sebelah kiri nilai balance.
- Nilai balance akan diperbarui sesuai saldo terkini.
Hasil: Balance diperbarui tanpa perpindahan halaman.
3. Mengganti Currency
Langkah:
- Klik tombol IDR di header.
- Pilih currency lain dari dropdown yang muncul.
- Nilai balance dan summary card berubah sesuai kurs currency yang dipilih.
Hasil: Seluruh tampilan nilai nominal menyesuaikan currency yang dipilih.
4. Navigasi via Sidebar
Langkah:
- Klik salah satu menu di sidebar (contoh: Deposit).
- Jika menu memiliki submenu, daftar submenu akan muncul di bawah menu tersebut.
- Klik item submenu (contoh: Deposit Monitoring) untuk berpindah halaman.
Hasil: Browser diarahkan ke halaman yang sesuai.
5. Collapse / Expand Sidebar
Langkah:
- Klik tombol collapse icon di pojok kiri atas sidebar.
- Sidebar menyempit — hanya ikon yang terlihat, label disembunyikan.
- Klik tombol yang sama untuk mengembalikan sidebar ke tampilan normal.
Hasil: Sidebar dapat diminimalkan untuk memperluas area konten.
6. Logout
Langkah:
- Klik tombol Logout di pojok kanan atas header.
- Sesi admin diakhiri.
Hasil: Browser diarahkan ke halaman /auth/login.
Notes
- Data summary cards (Total Deposit, Total Withdraw, Today's Win Lose) mencerminkan data hari ini saja dan akan direset jam 00:00.
- Chart Deposit/Withdraw menampilkan data beberapa hari terakhir (bukan hanya hari ini).
- Badge DP/WD diperbarui secara real-time via SSE (Server-Sent Events).
- Dialog Announcement hanya tampil sekali per sesi; dikontrol oleh key
announcementDisplayeddilocalStorage. - Jika session expired, sistem otomatis redirect ke
/auth/login. Untuk memperbarui session:pnpm exec playwright test setup/admin.setup.ts.