Hugging Face's logo

Spaces:
Xcronious
/
chipflow-commander
Running

App Files Community
Xcronious commited on
Commit
29f9c32
·
verified ·
1 Parent(s): e1c3d9f

oke selesaikan semua modul ini untuk di dashboard admin Role & Akses

Browse files

🧑‍💼 Pemilik (Super Admin)
* Login sebagai Pemilik.
* Mengisi saldo awal Bank.
* Mengisi stok awal ID.
* Melakukan adjustment Bank & ID.
* Melihat semua transaksi & history.
* Bisa override data jika ada kesalahan.
* Akses penuh ke seluruh data.

👨‍💻 Admin
* Login sebagai Admin.
* Menambahkan Bank baru (saldo awal otomatis Rp 0).
* Menambahkan ID baru (stok awal otomatis 0).
* Mengaktifkan/menonaktifkan Bank & ID.
* Melakukan Top Up, Withdraw, Transfer, Adjustment, DC BOS, Pinjaman.
* Tidak bisa mengisi saldo awal Bank atau stok awal ID.
* Semua transaksi buatan Admin status awalnya Pending.
* Admin sendiri yang melakukan Approve/Cancel.

👤 Customer
* Tidak perlu login.
* Mengakses halaman publik: Form Top Up, Form WD, Cek Status Transaksi.
* Mengisi nominal uang (bukan jumlah chip).
* Sistem otomatis hitung jumlah chip yang diterima.
* Membayar via Payment Gateway (untuk Top Up).
* Melihat status transaksi via kode unik / invoice ID.

🔐 Login System
* Halaman login untuk Admin & Pemilik.
* Password terenkripsi (bcrypt).
* Gagal login → muncul notifikasi error.

🏦 Modul Bank
* Admin dapat menambah bank baru (saldo awal = 0).
* Pemilik dapat mengisi saldo awal.
* Setiap Bank memiliki toggle aktif/nonaktif:
* Aktif → muncul di pilihan pembayaran.
* Nonaktif → disembunyikan.
* Saldo bank tampil di dashboard & transaksi.

🆔 Modul ID (Stok Chip)
* Admin dapat menambah ID baru (stok awal = 0).
* Pemilik dapat mengisi stok awal.
* Setiap ID ada toggle aktif/nonaktif.
* Stok chip disimpan dalam decimal (misal 100.25 = 100B + 250M).

💳 Modul Top Up
🔹 Otomatis (Customer via Web)
1. Customer isi form:
* ID Game
* Nama ID
* Nomor WhatsApp
* Nominal uang (contoh: Rp 100.000)
* Pilih metode pembayaran (Bank/QRIS)
2. Sistem otomatis hitung jumlah chip yang akan diterima:
* Jika nominal ≥ Rp 63.000 → gunakan harga grosir tier:
◦ ◦ Harga/Chip ◦ Hasil
◦ Rp 65.000–Rp 649.999 ◦ Rp 65.000 ◦ Jumlah Chip = nominal / 65.000
◦ Rp 650.000–Rp 1.299.999 ◦ Rp 64.500 ◦ Jumlah Chip = nominal / 64.500
◦ Rp 1.300.000+ ◦ Rp 63.000 ◦ Jumlah Chip = nominal / 63.000
* ◦ Jika nominal < Rp 63.000 → gunakan tabel fractional:
◦ ◦ Chip Diterima
◦ Rp 10.000 ◦ 0.12
◦ Rp 20.000 ◦ 0.25
◦ Rp 30.000 ◦ 0.37
◦ dst... ◦
3. 3 Sistem generate invoice unik dan kirim ke Payment Gateway.
4. Payment Gateway → callback ke sistem:
* Sukses → status jadi PAID_PENDING.
* Gagal/expired → status jadi FAILED.
5. Admin buka dashboard → lihat transaksi PAID_PENDING.
6. Admin Approve → wajib pilih:
* ID pengirim stok (stok berkurang).
* Bank tujuan (saldo bertambah).
7. Status → APPROVED → stok & saldo update otomatis → masuk ke History & Google Sheet (opsional).

🔹 Manual (Admin Input)
* Admin isi: Nomor WA, ID, Nama ID, Nominal Uang.
* Sistem otomatis hitung jumlah chip berdasarkan tier harga.
* Admin wajib pilih:
* Bank tujuan (customer transfer ke bank admin).
* ID pengirim stok.
* Status awal: Pending.
* Saat Approve → stok ID berkurang, saldo bank bertambah.

💸 Modul Withdraw (WD)
🔹 Otomatis (Customer)
1. Customer isi form:
* ID, Nama ID, Nomor WA
* Jumlah chip yang ingin ditarik
* Pilih Bank pribadi + No. Rekening
2. Status awal: Pending.
3. Admin Approve → pilih:
* Tujuan ID (stok bertambah).
* Bank Pembayar (saldo berkurang).
4. Status → APPROVED, update stok & saldo otomatis.
Harga WD: Rp 60.000/chip (fix)


🔹 Manual (Admin)
* Admin input data WD secara manual (untuk pelanggan offline).
* Status awal Pending, lalu diapprove seperti biasa.

🔄 Modul Transfer
* Untuk memindahkan saldo antar bank atau stok antar ID.
* Input: Asal, Tujuan, Nominal.
* Status: Pending → Approve/Cancel.
* Saat Approve → stok/saldo berpindah otomatis.

⚖️ Modul Adjustment
* Koreksi saldo Bank atau stok ID.
* Bisa dilakukan Admin atau Pemilik.
* Adjustment langsung update (tanpa Pending).

📉 Modul DC BOS (Biaya Operasional)
* Input nominal + keterangan.
* Status: Pending → Approve/Cancel.
* Saat Approve: saldo Bank berkurang.

🤝 Modul Pinjaman
* Catatan pinjaman antar toko (chip atau uang).
* Status: Pending → Approve/Cancel.
* Saat Approve: stok ID atau saldo Bank berkurang.
* Ada tabel cicilan untuk pembayaran bertahap.

📜 Modul History (Audit Log)
Semua aktivitas tercatat otomatis:
* Modul (Top Up, WD, Transfer, dll)
* Aksi (create, approve, cancel, update, delete)
* Data lama & baru (JSON)
* User yang melakukan
* Tanggal & jam
* Tidak dapat dihapus.

📊 Dashboard
Menampilkan:
* Total saldo seluruh Bank aktif
* Total stok seluruh ID aktif (decimal)
* Rekap transaksi harian/mingguan/bulanan
* Daftar transaksi Pending
* Grafik penjualan per periode

⚡ Aturan Sistem Inti
* Semua transaksi butuh approval Admin (kecuali Adjustment).
* Harga chip otomatis — tidak bisa diinput manual.
* Stok ID & saldo Bank update otomatis setelah Approve.
* Payment Gateway hanya untuk Top Up otomatis.
* Semua aksi tercatat di History.
* Data bisa disinkronkan ke Google Sheets (opsional).

✨ Interface
🧍 Customer Page (Publik)
* Form Top Up (input nominal → sistem hitung chip otomatis).
* Form Withdraw.
* Cek status transaksi via kode unik.
🧑‍💻 Admin Page
* Top Up (manual & approve otomatis).
* Withdraw, Transfer, Adjustment, DC BOS, Pinjaman.
* Dashboard + History.
👑 Super Admin Page
* Semua fitur admin.
* Input saldo/stok awal.
* Override data.
* Full History access.

Files changed (8) hide show
  1. admin_dashboard.html +232 -72
  2. bank_management.html +153 -0
  3. customer_topup.html +52 -26
  4. history.html +194 -0
  5. id_management.html +146 -0
  6. login.html +70 -0
  7. transactions.html +121 -47
  8. withdraw.html +69 -29
admin_dashboard.html CHANGED
@@ -3,95 +3,255 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ChipFlow Commander - Top Up</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
9
  </head>
10
  <body class="bg-gray-100">
11
- <div class="container py-8">
12
- <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
13
- <div class="text-center mb-6">
14
- <h1 class="text-2xl font-bold text-gray-800">🔋 Chip Top Up</h1>
15
- <p class="text-gray-600">Fill the form below to recharge your chips</p>
 
16
  </div>
 
 
 
 
 
 
 
 
 
17
 
18
- <form id="topupForm">
19
- <div class="mb-4">
20
- <label class="block text-gray-700 mb-2">Game ID</label>
21
- <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
22
- </div>
23
-
24
- <div class="mb-4">
25
- <label class="block text-gray-700 mb-2">Player Name</label>
26
- <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Your in-game name" required>
27
- </div>
28
-
29
- <div class="mb-4">
30
- <label class="block text-gray-700 mb-2">WhatsApp Number</label>
31
- <input type="tel" class="w-full px-3 py-2 border rounded-lg" placeholder="+62..." required>
32
  </div>
 
33
 
34
- <div class="mb-4">
35
- <label class="block text-gray-700 mb-2">Amount (Rp)</label>
36
- <input type="number" id="amountInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter amount" min="10000" required>
37
- <p class="text-xs text-gray-500 mt-1">Minimum Rp10,000</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  </div>
39
-
40
- <div class="mb-6">
41
- <label class="block text-gray-700 mb-2">Payment Method</label>
42
- <select class="w-full px-3 py-2 border rounded-lg" required>
43
- <option value="">Select payment</option>
44
- <option>Bank Transfer</option>
45
- <option>QRIS</option>
46
- <option>E-Wallet</option>
47
- </select>
 
48
  </div>
49
-
50
- <div class="bg-blue-50 p-4 rounded-lg mb-6">
51
- <h3 class="text-lg font-semibold text-blue-800 mb-2">You will receive:</h3>
52
- <div class="flex justify-between items-center">
53
- <span class="text-gray-700">Chips:</span>
54
- <span id="chipResult" class="text-2xl font-bold text-blue-600">0.00</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  </div>
56
- <div class="text-xs text-gray-500 mt-2" id="rateInfo"></div>
57
  </div>
58
 
59
- <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-bold transition">
60
- Proceed to Payment
61
- </button>
62
- </form>
63
-
64
- <div class="mt-6 text-center text-sm text-gray-500">
65
- <p>Need help? <a href="#" class="text-blue-600">Contact Support</a></p>
66
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  </div>
68
  </div>
69
 
70
  <script>
71
- document.getElementById('amountInput').addEventListener('input', function() {
72
- const amount = parseFloat(this.value) || 0;
73
- let chips = 0;
74
- let rateText = '';
75
-
76
- if (amount >= 1300000) {
77
- chips = amount / 63000;
78
- rateText = 'Wholesale rate: Rp63,000/chip';
79
- } else if (amount >= 650000) {
80
- chips = amount / 64500;
81
- rateText = 'Wholesale rate: Rp64,500/chip';
82
- } else if (amount >= 65000) {
83
- chips = amount / 65000;
84
- rateText = 'Wholesale rate: Rp65,000/chip';
85
- } else {
86
- // Fractional calculation
87
- if (amount >= 10000) {
88
- chips = amount * 0.000012; // Example fractional rate
89
- rateText = 'Fractional chip rate applied';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  }
91
- }
92
-
93
- document.getElementById('chipResult').textContent = chips.toFixed(2);
94
- document.getElementById('rateInfo').textContent = rateText;
95
  });
96
  </script>
97
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ChipFlow Commander - Admin Dashboard</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  </head>
11
  <body class="bg-gray-100">
12
+ <div class="flex h-screen">
13
+ <!-- Sidebar -->
14
+ <div class="w-64 bg-gray-800 text-white">
15
+ <div class="p-4 border-b border-gray-700">
16
+ <h1 class="text-xl font-bold">ChipFlow Commander</h1>
17
+ <p class="text-sm text-gray-400">Admin Dashboard</p>
18
  </div>
19
+ <nav class="mt-4">
20
+ <a href="admin_dashboard.html" class="block py-2 px-4 bg-gray-700 text-white">Dashboard</a>
21
+ <a href="bank_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Bank Management</a>
22
+ <a href="id_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">ID Management</a>
23
+ <a href="transactions.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Transactions</a>
24
+ <a href="history.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">History Log</a>
25
+ <a href="/index.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700 mt-8">Logout</a>
26
+ </nav>
27
+ </div>
28
 
29
+ <!-- Main Content -->
30
+ <div class="flex-1 overflow-auto">
31
+ <header class="bg-white shadow-sm p-4">
32
+ <div class="flex justify-between items-center">
33
+ <h2 class="text-xl font-semibold text-gray-800">Dashboard Overview</h2>
34
+ <div class="flex items-center space-x-4">
35
+ <span class="text-gray-600">Admin</span>
36
+ <div class="w-8 h-8 bg-blue-500 rounded-full"></div>
37
+ </div>
 
 
 
 
 
38
  </div>
39
+ </header>
40
 
41
+ <main class="p-6">
42
+ <!-- Stats Cards -->
43
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
44
+ <div class="bg-white rounded-lg shadow p-6">
45
+ <div class="flex items-center">
46
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
47
+ <i data-feather="dollar-sign"></i>
48
+ </div>
49
+ <div class="ml-4">
50
+ <p class="text-sm font-medium text-gray-500">Total Bank Balance</p>
51
+ <p class="text-2xl font-semibold text-gray-800">Rp 125,450,000</p>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ <div class="bg-white rounded-lg shadow p-6">
56
+ <div class="flex items-center">
57
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
58
+ <i data-feather="credit-card"></i>
59
+ </div>
60
+ <div class="ml-4">
61
+ <p class="text-sm font-medium text-gray-500">Total Chips Stock</p>
62
+ <p class="text-2xl font-semibold text-gray-800">1,845.75</p>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ <div class="bg-white rounded-lg shadow p-6">
67
+ <div class="flex items-center">
68
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
69
+ <i data-feather="clock"></i>
70
+ </div>
71
+ <div class="ml-4">
72
+ <p class="text-sm font-medium text-gray-500">Pending Transactions</p>
73
+ <p class="text-2xl font-semibold text-gray-800">14</p>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ <div class="bg-white rounded-lg shadow p-6">
78
+ <div class="flex items-center">
79
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
80
+ <i data-feather="trending-up"></i>
81
+ </div>
82
+ <div class="ml-4">
83
+ <p class="text-sm font-medium text-gray-500">Today's Profit</p>
84
+ <p class="text-2xl font-semibold text-gray-800">Rp 8,250,000</p>
85
+ </div>
86
+ </div>
87
+ </div>
88
  </div>
89
+ <!-- Charts -->
90
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
91
+ <div class="bg-white rounded-lg shadow p-6">
92
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Revenue Overview</h3>
93
+ <canvas id="revenueChart" height="250"></canvas>
94
+ </div>
95
+ <div class="bg-white rounded-lg shadow p-6">
96
+ <h3 class="text-lg font-medium text-gray-800 mb-4">User Activity</h3>
97
+ <canvas id="activityChart" height="250"></canvas>
98
+ </div>
99
  </div>
100
+ <!-- Pending Transactions -->
101
+ <div class="bg-white rounded-lg shadow mt-6">
102
+ <div class="p-6 border-b border-gray-200 flex justify-between items-center">
103
+ <h3 class="text-lg font-medium text-gray-800">Pending Transactions</h3>
104
+ <div class="flex space-x-2">
105
+ <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-lg text-sm">Top Ups</button>
106
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm">Withdrawals</button>
107
+ <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm">Transfers</button>
108
+ </div>
109
+ </div>
110
+ <div class="overflow-x-auto">
111
+ <table class="min-w-full divide-y divide-gray-200">
112
+ <thead class="bg-gray-50">
113
+ <tr>
114
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th>
115
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
116
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
117
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
118
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
119
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
120
+ </tr>
121
+ </thead>
122
+ <tbody class="bg-white divide-y divide-gray-200">
123
+ <tr>
124
+ <td class="px-6 py-4 whitespace-nowrap">#TOP-20230815-001</td>
125
+ <td class="px-6 py-4 whitespace-nowrap">John Doe (08123456789)</td>
126
+ <td class="px-6 py-4 whitespace-nowrap">Top Up</td>
127
+ <td class="px-6 py-4 whitespace-nowrap">Rp 650,000</td>
128
+ <td class="px-6 py-4 whitespace-nowrap">15 Aug 2023, 10:30</td>
129
+ <td class="px-6 py-4 whitespace-nowrap">
130
+ <button class="px-3 py-1 bg-green-100 text-green-600 rounded-lg text-sm mr-2">Approve</button>
131
+ <button class="px-3 py-1 bg-red-100 text-red-600 rounded-lg text-sm">Reject</button>
132
+ </td>
133
+ </tr>
134
+ <tr>
135
+ <td class="px-6 py-4 whitespace-nowrap">#WD-20230815-002</td>
136
+ <td class="px-6 py-4 whitespace-nowrap">Jane Smith (08198765432)</td>
137
+ <td class="px-6 py-4 whitespace-nowrap">Withdrawal</td>
138
+ <td class="px-6 py-4 whitespace-nowrap">2.5 Chips</td>
139
+ <td class="px-6 py-4 whitespace-nowrap">15 Aug 2023, 11:45</td>
140
+ <td class="px-6 py-4 whitespace-nowrap">
141
+ <button class="px-3 py-1 bg-green-100 text-green-600 rounded-lg text-sm mr-2">Approve</button>
142
+ <button class="px-3 py-1 bg-red-100 text-red-600 rounded-lg text-sm">Reject</button>
143
+ </td>
144
+ </tr>
145
+ </tbody>
146
+ </table>
147
  </div>
 
148
  </div>
149
 
150
+ <!-- Quick Actions -->
151
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
152
+ <a href="customer_topup.html" class="bg-white rounded-lg shadow p-6 hover:shadow-md transition cursor-pointer">
153
+ <div class="flex items-center">
154
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
155
+ <i data-feather="plus-circle"></i>
156
+ </div>
157
+ <div class="ml-4">
158
+ <h3 class="text-lg font-medium text-gray-800">Quick Top Up</h3>
159
+ <p class="text-sm text-gray-500">Add new top up transaction</p>
160
+ </div>
161
+ </div>
162
+ </a>
163
+ <a href="#" class="bg-white rounded-lg shadow p-6 hover:shadow-md transition cursor-pointer">
164
+ <div class="flex items-center">
165
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
166
+ <i data-feather="minus-circle"></i>
167
+ </div>
168
+ <div class="ml-4">
169
+ <h3 class="text-lg font-medium text-gray-800">Quick Withdrawal</h3>
170
+ <p class="text-sm text-gray-500">Process chip withdrawal</p>
171
+ </div>
172
+ </div>
173
+ </a>
174
+ <a href="#" class="bg-white rounded-lg shadow p-6 hover:shadow-md transition cursor-pointer">
175
+ <div class="flex items-center">
176
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
177
+ <i data-feather="refresh-cw"></i>
178
+ </div>
179
+ <div class="ml-4">
180
+ <h3 class="text-lg font-medium text-gray-800">Transfer</h3>
181
+ <p class="text-sm text-gray-500">Transfer between banks/IDs</p>
182
+ </div>
183
+ </div>
184
+ </a>
185
+ </div>
186
+ </main>
187
  </div>
188
  </div>
189
 
190
  <script>
191
+ // Initialize feather icons
192
+ feather.replace();
193
+
194
+ // Charts initialization
195
+ document.addEventListener('DOMContentLoaded', function() {
196
+ // Revenue Chart
197
+ const revenueCtx = document.getElementById('revenueChart').getContext('2d');
198
+ new Chart(revenueCtx, {
199
+ type: 'line',
200
+ data: {
201
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
202
+ datasets: [{
203
+ label: 'Revenue',
204
+ data: [12000, 19000, 3000, 5000, 2000, 3000, 45000],
205
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
206
+ borderColor: 'rgba(59, 130, 246, 1)',
207
+ borderWidth: 2,
208
+ tension: 0.4,
209
+ fill: true
210
+ }]
211
+ },
212
+ options: {
213
+ responsive: true,
214
+ plugins: {
215
+ legend: {
216
+ display: false
217
+ }
218
+ },
219
+ scales: {
220
+ y: {
221
+ beginAtZero: true
222
+ }
223
+ }
224
+ }
225
+ });
226
+
227
+ // Activity Chart
228
+ const activityCtx = document.getElementById('activityChart').getContext('2d');
229
+ new Chart(activityCtx, {
230
+ type: 'bar',
231
+ data: {
232
+ labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
233
+ datasets: [{
234
+ label: 'Active Users',
235
+ data: [320, 150, 280, 400, 350, 420, 380],
236
+ backgroundColor: 'rgba(124, 58, 237, 0.7)',
237
+ borderColor: 'rgba(124, 58, 237, 1)',
238
+ borderWidth: 1
239
+ }]
240
+ },
241
+ options: {
242
+ responsive: true,
243
+ plugins: {
244
+ legend: {
245
+ display: false
246
+ }
247
+ },
248
+ scales: {
249
+ y: {
250
+ beginAtZero: true
251
+ }
252
+ }
253
  }
254
+ });
 
 
 
255
  });
256
  </script>
257
  </body>
bank_management.html ADDED
@@ -0,0 +1,153 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bank Management - ChipFlow Commander</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ </head>
10
+ <body class="bg-gray-100">
11
+ <div class="flex h-screen">
12
+ <!-- Sidebar -->
13
+ <div class="w-64 bg-gray-800 text-white">
14
+ <div class="p-4 border-b border-gray-700">
15
+ <h1 class="text-xl font-bold">ChipFlow Commander</h1>
16
+ <p class="text-sm text-gray-400">Bank Management</p>
17
+ </div>
18
+ <nav class="mt-4">
19
+ <a href="admin_dashboard.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Dashboard</a>
20
+ <a href="bank_management.html" class="block py-2 px-4 bg-gray-700 text-white">Bank Management</a>
21
+ <a href="id_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">ID Management</a>
22
+ <a href="transactions.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Transactions</a>
23
+ <a href="history.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">History Log</a>
24
+ <a href="/index.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700 mt-8">Logout</a>
25
+ </nav>
26
+ </div>
27
+
28
+ <!-- Main Content -->
29
+ <div class="flex-1 overflow-auto">
30
+ <header class="bg-white shadow-sm p-4">
31
+ <div class="flex justify-between items-center">
32
+ <h2 class="text-xl font-semibold text-gray-800">Bank Accounts</h2>
33
+ <button id="addBankBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
34
+ Add New Bank
35
+ </button>
36
+ </div>
37
+ </header>
38
+
39
+ <main class="p-6">
40
+ <div class="bg-white rounded-lg shadow overflow-hidden">
41
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
42
+ <h3 class="text-lg font-medium text-gray-800">Bank List</h3>
43
+ <div class="relative">
44
+ <input type="text" placeholder="Search banks..." class="pl-8 pr-4 py-2 border rounded-lg w-64">
45
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
46
+ </div>
47
+ </div>
48
+
49
+ <div class="overflow-x-auto">
50
+ <table class="min-w-full divide-y divide-gray-200">
51
+ <thead class="bg-gray-50">
52
+ <tr>
53
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bank Name</th>
54
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account Number</th>
55
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account Name</th>
56
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th>
57
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
58
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
59
+ </tr>
60
+ </thead>
61
+ <tbody class="bg-white divide-y divide-gray-200">
62
+ <tr>
63
+ <td class="px-6 py-4 whitespace-nowrap">BCA</td>
64
+ <td class="px-6 py-4 whitespace-nowrap">1234567890</td>
65
+ <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
66
+ <td class="px-6 py-4 whitespace-nowrap">Rp 15,000,000</td>
67
+ <td class="px-6 py-4 whitespace-nowrap">
68
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span>
69
+ </td>
70
+ <td class="px-6 py-4 whitespace-nowrap">
71
+ <button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
72
+ <button class="text-red-600 hover:text-red-800">Deactivate</button>
73
+ </td>
74
+ </tr>
75
+ <!-- More rows would be dynamically inserted here -->
76
+ </tbody>
77
+ </table>
78
+ </div>
79
+ </div>
80
+ </main>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Add Bank Modal -->
85
+ <div id="addBankModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
86
+ <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
87
+ <div class="flex justify-between items-center mb-4">
88
+ <h3 class="text-lg font-medium text-gray-800">Add New Bank</h3>
89
+ <button id="closeModalBtn" class="text-gray-400 hover:text-gray-500">
90
+ <i data-feather="x"></i>
91
+ </button>
92
+ </div>
93
+
94
+ <form id="bankForm">
95
+ <div class="mb-4">
96
+ <label class="block text-gray-700 mb-2">Bank Name</label>
97
+ <input type="text" name="bankName" class="w-full px-4 py-2 border rounded-lg" required>
98
+ </div>
99
+
100
+ <div class="mb-4">
101
+ <label class="block text-gray-700 mb-2">Account Number</label>
102
+ <input type="text" name="accountNumber" class="w-full px-4 py-2 border rounded-lg" required>
103
+ </div>
104
+
105
+ <div class="mb-4">
106
+ <label class="block text-gray-700 mb-2">Account Name</label>
107
+ <input type="text" name="accountName" class="w-full px-4 py-2 border rounded-lg" required>
108
+ </div>
109
+
110
+ <div class="mb-4">
111
+ <label class="block text-gray-700 mb-2">Initial Balance</label>
112
+ <input type="number" name="initialBalance" class="w-full px-4 py-2 border rounded-lg" value="0" min="0">
113
+ </div>
114
+
115
+ <div class="flex justify-end space-x-3 mt-6">
116
+ <button type="button" id="cancelBankBtn" class="px-4 py-2 border rounded-lg text-gray-700 hover:bg-gray-100">
117
+ Cancel
118
+ </button>
119
+ <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">
120
+ Save Bank
121
+ </button>
122
+ </div>
123
+ </form>
124
+ </div>
125
+ </div>
126
+
127
+ <script>
128
+ feather.replace();
129
+
130
+ // Modal handling
131
+ document.getElementById('addBankBtn').addEventListener('click', function() {
132
+ document.getElementById('addBankModal').classList.remove('hidden');
133
+ });
134
+
135
+ document.getElementById('closeModalBtn').addEventListener('click', function() {
136
+ document.getElementById('addBankModal').classList.add('hidden');
137
+ });
138
+
139
+ document.getElementById('cancelBankBtn').addEventListener('click', function() {
140
+ document.getElementById('addBankModal').classList.add('hidden');
141
+ });
142
+
143
+ // Form submission
144
+ document.getElementById('bankForm').addEventListener('submit', async function(e) {
145
+ e.preventDefault();
146
+ // Here you would handle the form submission via API
147
+ // After successful submission:
148
+ document.getElementById('addBankModal').classList.add('hidden');
149
+ // Then refresh the bank list
150
+ });
151
+ </script>
152
+ </body>
153
+ </html>
customer_topup.html CHANGED
@@ -3,69 +3,95 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ChipFlow Commander - Withdraw</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  </head>
9
  <body class="bg-gray-100">
10
  <div class="container py-8">
11
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
12
  <div class="text-center mb-6">
13
- <h1 class="text-2xl font-bold text-gray-800">🏧 Chip Withdrawal</h1>
14
- <p class="text-gray-600">Convert your chips to real money</p>
15
  </div>
16
 
17
- <form id="withdrawForm">
18
  <div class="mb-4">
19
  <label class="block text-gray-700 mb-2">Game ID</label>
20
  <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
21
  </div>
22
 
23
  <div class="mb-4">
24
- <label class="block text-gray-700 mb-2">Chip Amount</label>
25
- <input type="number" id="chipInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter chip amount" min="100" required>
26
- <p class="text-xs text-gray-500 mt-1">Minimum 100 chips</p>
27
  </div>
28
 
29
  <div class="mb-4">
30
- <label class="block text-gray-700 mb-2">Bank Account</label>
31
- <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Account number" required>
32
  </div>
33
 
34
  <div class="mb-4">
35
- <label class="block text-gray-700 mb-2">Bank Name</label>
36
- <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Bank name" required>
 
37
  </div>
38
 
39
- <div class="mb-4">
40
- <label class="block text-gray-700 mb-2">Account Holder Name</label>
41
- <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Name on bank account" required>
 
 
 
 
 
42
  </div>
43
 
44
- <div class="bg-green-50 p-4 rounded-lg mb-6">
45
- <h3 class="text-lg font-semibold text-green-800 mb-2">You will receive:</h3>
46
  <div class="flex justify-between items-center">
47
- <span class="text-gray-700">Amount (Rp):</span>
48
- <span id="cashResult" class="text-2xl font-bold text-green-600">0</span>
49
  </div>
50
- <div class="text-xs text-gray-500 mt-2">Rate: Rp65,000 per chip</div>
51
  </div>
52
 
53
- <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-bold transition">
54
- Request Withdrawal
55
  </button>
56
  </form>
57
 
58
  <div class="mt-6 text-center text-sm text-gray-500">
59
- <p>Processing time: 1-3 business days</p>
60
  </div>
61
  </div>
62
  </div>
63
 
64
  <script>
65
- document.getElementById('chipInput').addEventListener('input', function() {
66
- const chips = parseInt(this.value) || 0;
67
- const cash = chips * 65000;
68
- document.getElementById('cashResult').textContent = cash.toLocaleString();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  });
70
  </script>
71
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ChipFlow Commander - Top Up</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
9
  </head>
10
  <body class="bg-gray-100">
11
  <div class="container py-8">
12
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
13
  <div class="text-center mb-6">
14
+ <h1 class="text-2xl font-bold text-gray-800">🔋 Chip Top Up</h1>
15
+ <p class="text-gray-600">Fill the form below to recharge your chips</p>
16
  </div>
17
 
18
+ <form id="topupForm">
19
  <div class="mb-4">
20
  <label class="block text-gray-700 mb-2">Game ID</label>
21
  <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
22
  </div>
23
 
24
  <div class="mb-4">
25
+ <label class="block text-gray-700 mb-2">Player Name</label>
26
+ <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Your in-game name" required>
 
27
  </div>
28
 
29
  <div class="mb-4">
30
+ <label class="block text-gray-700 mb-2">WhatsApp Number</label>
31
+ <input type="tel" class="w-full px-3 py-2 border rounded-lg" placeholder="+62..." required>
32
  </div>
33
 
34
  <div class="mb-4">
35
+ <label class="block text-gray-700 mb-2">Amount (Rp)</label>
36
+ <input type="number" id="amountInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter amount" min="10000" required>
37
+ <p class="text-xs text-gray-500 mt-1">Minimum Rp10,000</p>
38
  </div>
39
 
40
+ <div class="mb-6">
41
+ <label class="block text-gray-700 mb-2">Payment Method</label>
42
+ <select class="w-full px-3 py-2 border rounded-lg" required>
43
+ <option value="">Select payment</option>
44
+ <option>Bank Transfer</option>
45
+ <option>QRIS</option>
46
+ <option>E-Wallet</option>
47
+ </select>
48
  </div>
49
 
50
+ <div class="bg-blue-50 p-4 rounded-lg mb-6">
51
+ <h3 class="text-lg font-semibold text-blue-800 mb-2">You will receive:</h3>
52
  <div class="flex justify-between items-center">
53
+ <span class="text-gray-700">Chips:</span>
54
+ <span id="chipResult" class="text-2xl font-bold text-blue-600">0.00</span>
55
  </div>
56
+ <div class="text-xs text-gray-500 mt-2" id="rateInfo"></div>
57
  </div>
58
 
59
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-bold transition">
60
+ Proceed to Payment
61
  </button>
62
  </form>
63
 
64
  <div class="mt-6 text-center text-sm text-gray-500">
65
+ <p>Need help? <a href="#" class="text-blue-600">Contact Support</a></p>
66
  </div>
67
  </div>
68
  </div>
69
 
70
  <script>
71
+ document.getElementById('amountInput').addEventListener('input', function() {
72
+ const amount = parseFloat(this.value) || 0;
73
+ let chips = 0;
74
+ let rateText = '';
75
+
76
+ if (amount >= 1300000) {
77
+ chips = amount / 63000;
78
+ rateText = 'Wholesale rate: Rp63,000/chip';
79
+ } else if (amount >= 650000) {
80
+ chips = amount / 64500;
81
+ rateText = 'Wholesale rate: Rp64,500/chip';
82
+ } else if (amount >= 65000) {
83
+ chips = amount / 65000;
84
+ rateText = 'Wholesale rate: Rp65,000/chip';
85
+ } else {
86
+ // Fractional calculation
87
+ if (amount >= 10000) {
88
+ chips = amount * 0.000012; // Example fractional rate
89
+ rateText = 'Fractional chip rate applied';
90
+ }
91
+ }
92
+
93
+ document.getElementById('chipResult').textContent = chips.toFixed(2);
94
+ document.getElementById('rateInfo').textContent = rateText;
95
  });
96
  </script>
97
  </body>
history.html ADDED
@@ -0,0 +1,194 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>History Log - ChipFlow Commander</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ </head>
10
+ <body class="bg-gray-100">
11
+ <div class="flex h-screen">
12
+ <!-- Sidebar -->
13
+ <div class="w-64 bg-gray-800 text-white">
14
+ <div class="p-4 border-b border-gray-700">
15
+ <h1 class="text-xl font-bold">ChipFlow Commander</h1>
16
+ <p class="text-sm text-gray-400">History Log</p>
17
+ </div>
18
+ <nav class="mt-4">
19
+ <a href="admin_dashboard.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Dashboard</a>
20
+ <a href="bank_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Bank Management</a>
21
+ <a href="id_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">ID Management</a>
22
+ <a href="transactions.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Transactions</a>
23
+ <a href="history.html" class="block py-2 px-4 bg-gray-700 text-white">History Log</a>
24
+ <a href="/index.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700 mt-8">Logout</a>
25
+ </nav>
26
+ </div>
27
+
28
+ <!-- Main Content -->
29
+ <div class="flex-1 overflow-auto">
30
+ <header class="bg-white shadow-sm p-4">
31
+ <div class="flex justify-between items-center">
32
+ <h2 class="text-xl font-semibold text-gray-800">Audit Log</h2>
33
+ <div class="flex space-x-2">
34
+ <div class="relative">
35
+ <select class="appearance-none pl-3 pr-8 py-2 border rounded-lg bg-white">
36
+ <option>All Modules</option>
37
+ <option>Bank</option>
38
+ <option>ID</option>
39
+ <option>Top Up</option>
40
+ <option>Withdrawal</option>
41
+ <option>Transfer</option>
42
+ </select>
43
+ <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-400 pointer-events-none"></i>
44
+ </div>
45
+ <div class="relative">
46
+ <input type="text" placeholder="Search..." class="pl-8 pr-4 py-2 border rounded-lg w-64">
47
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </header>
52
+
53
+ <main class="p-6">
54
+ <div class="bg-white rounded-lg shadow overflow-hidden">
55
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
56
+ <h3 class="text-lg font-medium text-gray-800">System Activities</h3>
57
+ <div class="text-sm text-gray-500">
58
+ Last 30 days of activities
59
+ </div>
60
+ </div>
61
+
62
+ <div class="overflow-x-auto">
63
+ <table class="min-w-full divide-y divide-gray-200">
64
+ <thead class="bg-gray-50">
65
+ <tr>
66
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th>
67
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th>
68
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Module</th>
69
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
70
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
71
+ </tr>
72
+ </thead>
73
+ <tbody class="bg-white divide-y divide-gray-200">
74
+ <tr>
75
+ <td class="px-6 py-4 whitespace-nowrap">15 Aug 2023, 10:15</td>
76
+ <td class="px-6 py-4 whitespace-nowrap">admin1</td>
77
+ <td class="px-6 py-4 whitespace-nowrap">Top Up</td>
78
+ <td class="px-6 py-4 whitespace-nowrap">Approved</td>
79
+ <td class="px-6 py-4">
80
+ <button class="text-blue-600 hover:text-blue-800">View Details</button>
81
+ </td>
82
+ </tr>
83
+ <tr>
84
+ <td class="px-6 py-4 whitespace-nowrap">15 Aug 2023, 09:30</td>
85
+ <td class="px-6 py-4 whitespace-nowrap">owner</td>
86
+ <td class="px-6 py-4 whitespace-nowrap">Bank</td>
87
+ <td class="px-6 py-4 whitespace-nowrap">Created</td>
88
+ <td class="px-6 py-4">
89
+ <button class="text-blue-600 hover:text-blue-800">View Details</button>
90
+ </td>
91
+ </tr>
92
+ <tr>
93
+ <td class="px-6 py-4 whitespace-nowrap">14 Aug 2023, 16:45</td>
94
+ <td class="px-6 py-4 whitespace-nowrap">admin2</td>
95
+ <td class="px-6 py-4 whitespace-nowrap">Withdrawal</td>
96
+ <td class="px-6 py-4 whitespace-nowrap">Rejected</td>
97
+ <td class="px-6 py-4">
98
+ <button class="text-blue-600 hover:text-blue-800">View Details</button>
99
+ </td>
100
+ </tr>
101
+ <!-- More rows would be dynamically inserted here -->
102
+ </tbody>
103
+ </table>
104
+ </div>
105
+
106
+ <div class="px-6 py-4 border-t border-gray-200 flex justify-between items-center">
107
+ <div class="text-sm text-gray-500">
108
+ Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">127</span> results
109
+ </div>
110
+ <div class="flex space-x-2">
111
+ <button class="px-3 py-1 border rounded-lg text-gray-700">Previous</button>
112
+ <button class="px-3 py-1 border rounded-lg bg-blue-600 text-white">1</button>
113
+ <button class="px-3 py-1 border rounded-lg text-gray-700">2</button>
114
+ <button class="px-3 py-1 border rounded-lg text-gray-700">3</button>
115
+ <button class="px-3 py-1 border rounded-lg text-gray-700">Next</button>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </main>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Detail Modal -->
124
+ <div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
125
+ <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-2xl">
126
+ <div class="flex justify-between items-center mb-4">
127
+ <h3 class="text-lg font-medium text-gray-800">Activity Details</h3>
128
+ <button id="closeDetailModalBtn" class="text-gray-400 hover:text-gray-500">
129
+ <i data-feather="x"></i>
130
+ </button>
131
+ </div>
132
+
133
+ <div class="mb-4">
134
+ <h4 class="font-medium text-gray-700 mb-2">Transaction Information</h4>
135
+ <div class="grid grid-cols-2 gap-4">
136
+ <div>
137
+ <p class="text-sm text-gray-500">Module</p>
138
+ <p>Top Up</p>
139
+ </div>
140
+ <div>
141
+ <p class="text-sm text-gray-500">Action</p>
142
+ <p>Approved</p>
143
+ </div>
144
+ <div>
145
+ <p class="text-sm text-gray-500">User</p>
146
+ <p>admin1</p>
147
+ </div>
148
+ <div>
149
+ <p class="text-sm text-gray-500">Timestamp</p>
150
+ <p>15 Aug 2023, 10:15:23</p>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="mb-4">
156
+ <h4 class="font-medium text-gray-700 mb-2">Change Details</h4>
157
+ <div class="bg-gray-50 p-4 rounded-lg">
158
+ <pre class="text-sm">{
159
+ "transaction_id": "TOP-20230815-001",
160
+ "status": "Pending → Approved",
161
+ "bank_balance_change": "+650000",
162
+ "chip_stock_change": "-10.00"
163
+ }</pre>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="flex justify-end mt-6">
168
+ <button id="closeDetailBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">
169
+ Close
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <script>
176
+ feather.replace();
177
+
178
+ // Modal handling for details
179
+ document.querySelectorAll('button:contains("View Details")').forEach(btn => {
180
+ btn.addEventListener('click', function() {
181
+ document.getElementById('detailModal').classList.remove('hidden');
182
+ });
183
+ });
184
+
185
+ document.getElementById('closeDetailModalBtn').addEventListener('click', function() {
186
+ document.getElementById('detailModal').classList.add('hidden');
187
+ });
188
+
189
+ document.getElementById('closeDetailBtn').addEventListener('click', function() {
190
+ document.getElementById('detailModal').classList.add('hidden');
191
+ });
192
+ </script>
193
+ </body>
194
+ </html>
id_management.html ADDED
@@ -0,0 +1,146 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ID Management - ChipFlow Commander</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ </head>
10
+ <body class="bg-gray-100">
11
+ <div class="flex h-screen">
12
+ <!-- Sidebar -->
13
+ <div class="w-64 bg-gray-800 text-white">
14
+ <div class="p-4 border-b border-gray-700">
15
+ <h1 class="text-xl font-bold">ChipFlow Commander</h1>
16
+ <p class="text-sm text-gray-400">ID Management</p>
17
+ </div>
18
+ <nav class="mt-4">
19
+ <a href="admin_dashboard.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Dashboard</a>
20
+ <a href="bank_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Bank Management</a>
21
+ <a href="id_management.html" class="block py-2 px-4 bg-gray-700 text-white">ID Management</a>
22
+ <a href="transactions.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Transactions</a>
23
+ <a href="history.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">History Log</a>
24
+ <a href="/index.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700 mt-8">Logout</a>
25
+ </nav>
26
+ </div>
27
+
28
+ <!-- Main Content -->
29
+ <div class="flex-1 overflow-auto">
30
+ <header class="bg-white shadow-sm p-4">
31
+ <div class="flex justify-between items-center">
32
+ <h2 class="text-xl font-semibold text-gray-800">Game IDs</h2>
33
+ <button id="addIdBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
34
+ Add New ID
35
+ </button>
36
+ </div>
37
+ </header>
38
+
39
+ <main class="p-6">
40
+ <div class="bg-white rounded-lg shadow overflow-hidden">
41
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
42
+ <h3 class="text-lg font-medium text-gray-800">ID List</h3>
43
+ <div class="relative">
44
+ <input type="text" placeholder="Search IDs..." class="pl-8 pr-4 py-2 border rounded-lg w-64">
45
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
46
+ </div>
47
+ </div>
48
+
49
+ <div class="overflow-x-auto">
50
+ <table class="min-w-full divide-y divide-gray-200">
51
+ <thead class="bg-gray-50">
52
+ <tr>
53
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
54
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nickname</th>
55
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Stock</th>
56
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
57
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
58
+ </tr>
59
+ </thead>
60
+ <tbody class="bg-white divide-y divide-gray-200">
61
+ <tr>
62
+ <td class="px-6 py-4 whitespace-nowrap">ID12345678</td>
63
+ <td class="px-6 py-4 whitespace-nowrap">ChipMaster</td>
64
+ <td class="px-6 py-4 whitespace-nowrap">125.75</td>
65
+ <td class="px-6 py-4 whitespace-nowrap">
66
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span>
67
+ </td>
68
+ <td class="px-6 py-4 whitespace-nowrap">
69
+ <button class="text-blue-600 hover:text-blue-800 mr-3">Edit</button>
70
+ <button class="text-red-600 hover:text-red-800">Deactivate</button>
71
+ </td>
72
+ </tr>
73
+ <!-- More rows would be dynamically inserted here -->
74
+ </tbody>
75
+ </table>
76
+ </div>
77
+ </div>
78
+ </main>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Add ID Modal -->
83
+ <div id="addIdModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
84
+ <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
85
+ <div class="flex justify-between items-center mb-4">
86
+ <h3 class="text-lg font-medium text-gray-800">Add New Game ID</h3>
87
+ <button id="closeIdModalBtn" class="text-gray-400 hover:text-gray-500">
88
+ <i data-feather="x"></i>
89
+ </button>
90
+ </div>
91
+
92
+ <form id="idForm">
93
+ <div class="mb-4">
94
+ <label class="block text-gray-700 mb-2">Game ID</label>
95
+ <input type="text" name="gameId" class="w-full px-4 py-2 border rounded-lg" required>
96
+ </div>
97
+
98
+ <div class="mb-4">
99
+ <label class="block text-gray-700 mb-2">Nickname</label>
100
+ <input type="text" name="nickname" class="w-full px-4 py-2 border rounded-lg" required>
101
+ </div>
102
+
103
+ <div class="mb-4">
104
+ <label class="block text-gray-700 mb-2">Initial Stock</label>
105
+ <input type="number" name="initialStock" class="w-full px-4 py-2 border rounded-lg" value="0" min="0" step="0.01">
106
+ </div>
107
+
108
+ <div class="flex justify-end space-x-3 mt-6">
109
+ <button type="button" id="cancelIdBtn" class="px-4 py-2 border rounded-lg text-gray-700 hover:bg-gray-100">
110
+ Cancel
111
+ </button>
112
+ <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">
113
+ Save ID
114
+ </button>
115
+ </div>
116
+ </form>
117
+ </div>
118
+ </div>
119
+
120
+ <script>
121
+ feather.replace();
122
+
123
+ // Modal handling
124
+ document.getElementById('addIdBtn').addEventListener('click', function() {
125
+ document.getElementById('addIdModal').classList.remove('hidden');
126
+ });
127
+
128
+ document.getElementById('closeIdModalBtn').addEventListener('click', function() {
129
+ document.getElementById('addIdModal').classList.add('hidden');
130
+ });
131
+
132
+ document.getElementById('cancelIdBtn').addEventListener('click', function() {
133
+ document.getElementById('addIdModal').classList.add('hidden');
134
+ });
135
+
136
+ // Form submission
137
+ document.getElementById('idForm').addEventListener('submit', async function(e) {
138
+ e.preventDefault();
139
+ // Here you would handle the form submission via API
140
+ // After successful submission:
141
+ document.getElementById('addIdModal').classList.add('hidden');
142
+ // Then refresh the ID list
143
+ });
144
+ </script>
145
+ </body>
146
+ </html>
login.html ADDED
@@ -0,0 +1,70 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ChipFlow Commander - Login</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ </head>
10
+ <body class="bg-gray-100">
11
+ <div class="min-h-screen flex items-center justify-center">
12
+ <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
13
+ <div class="text-center mb-8">
14
+ <h1 class="text-2xl font-bold text-gray-800">ChipFlow Commander</h1>
15
+ <p class="text-gray-600">Admin & Owner Login</p>
16
+ </div>
17
+
18
+ <form id="loginForm">
19
+ <div class="mb-4">
20
+ <label class="block text-gray-700 mb-2">Username</label>
21
+ <input type="text" name="username" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
22
+ </div>
23
+
24
+ <div class="mb-6">
25
+ <label class="block text-gray-700 mb-2">Password</label>
26
+ <input type="password" name="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
27
+ </div>
28
+
29
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-bold transition">
30
+ Login
31
+ </button>
32
+
33
+ <div id="errorMessage" class="mt-4 text-red-500 text-sm hidden"></div>
34
+ </form>
35
+ </div>
36
+ </div>
37
+
38
+ <script>
39
+ feather.replace();
40
+
41
+ document.getElementById('loginForm').addEventListener('submit', async function(e) {
42
+ e.preventDefault();
43
+ const formData = new FormData(this);
44
+ const errorElement = document.getElementById('errorMessage');
45
+
46
+ try {
47
+ // Simulate API call
48
+ const response = await fetch('/api/login', {
49
+ method: 'POST',
50
+ body: formData
51
+ });
52
+
53
+ if (!response.ok) {
54
+ const error = await response.json();
55
+ errorElement.textContent = error.message || 'Login failed';
56
+ errorElement.classList.remove('hidden');
57
+ return;
58
+ }
59
+
60
+ // Redirect based on role
61
+ const { role } = await response.json();
62
+ window.location.href = role === 'owner' ? 'admin_dashboard.html' : 'admin_dashboard.html';
63
+ } catch (err) {
64
+ errorElement.textContent = 'Network error. Please try again.';
65
+ errorElement.classList.remove('hidden');
66
+ }
67
+ });
68
+ </script>
69
+ </body>
70
+ </html>
transactions.html CHANGED
@@ -3,66 +3,140 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ChipFlow Commander - Transactions</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  </head>
9
  <body class="bg-gray-100">
10
- <div class="container py-8">
11
- <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
12
- <div class="text-center mb-6">
13
- <h1 class="text-2xl font-bold text-gray-800">🔍 Transaction History</h1>
14
- <p class="text-gray-600">Check your recent transactions</p>
 
15
  </div>
 
 
 
 
 
 
 
 
 
16
 
17
- <form class="mb-6">
18
- <div class="mb-4">
19
- <label class="block text-gray-700 mb-2">Game ID</label>
20
- <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
21
- </div>
22
- <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded-lg font-bold transition">
23
- Search Transactions
24
- </button>
25
- </form>
26
-
27
- <div class="space-y-4">
28
- <div class="border-b pb-4">
29
- <div class="flex justify-between items-center mb-2">
30
- <span class="font-semibold">Top Up</span>
31
- <span class="text-blue-600">+Rp500,000</span>
32
- </div>
33
- <div class="flex justify-between text-sm text-gray-500">
34
- <span>2023-11-15 14:30</span>
35
- <span>Completed</span>
36
  </div>
37
  </div>
 
38
 
39
- <div class="border-b pb-4">
40
- <div class="flex justify-between items-center mb-2">
41
- <span class="font-semibold">Withdrawal</span>
42
- <span class="text-red-600">-Rp1,300,000</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  </div>
44
- <div class="flex justify-between text-sm text-gray-500">
45
- <span>2023-11-10 09:15</span>
46
- <span>Processing</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  </div>
48
- </div>
49
-
50
- <div class="border-b pb-4">
51
- <div class="flex justify-between items-center mb-2">
52
- <span class="font-semibold">Top Up</span>
53
- <span class="text-blue-600">+Rp250,000</span>
54
- </div>
55
- <div class="flex justify-between text-sm text-gray-500">
56
- <span>2023-11-05 18:45</span>
57
- <span>Completed</span>
 
 
58
  </div>
59
  </div>
60
- </div>
61
-
62
- <div class="mt-6 text-center text-sm text-gray-500">
63
- <p>Showing last 3 transactions</p>
64
- </div>
65
  </div>
66
  </div>
 
 
 
 
67
  </body>
68
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Transactions - ChipFlow Commander</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
  </head>
10
  <body class="bg-gray-100">
11
+ <div class="flex h-screen">
12
+ <!-- Sidebar -->
13
+ <div class="w-64 bg-gray-800 text-white">
14
+ <div class="p-4 border-b border-gray-700">
15
+ <h1 class="text-xl font-bold">ChipFlow Commander</h1>
16
+ <p class="text-sm text-gray-400">Transactions</p>
17
  </div>
18
+ <nav class="mt-4">
19
+ <a href="admin_dashboard.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Dashboard</a>
20
+ <a href="bank_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Bank Management</a>
21
+ <a href="id_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">ID Management</a>
22
+ <a href="transactions.html" class="block py-2 px-4 bg-gray-700 text-white">Transactions</a>
23
+ <a href="history.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">History Log</a>
24
+ <a href="/index.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700 mt-8">Logout</a>
25
+ </nav>
26
+ </div>
27
 
28
+ <!-- Main Content -->
29
+ <div class="flex-1 overflow-auto">
30
+ <header class="bg-white shadow-sm p-4">
31
+ <div class="flex justify-between items-center">
32
+ <h2 class="text-xl font-semibold text-gray-800">Transaction Management</h2>
33
+ <div class="flex space-x-2">
34
+ <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">
35
+ New Top Up
36
+ </button>
37
+ <button class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg">
38
+ New Withdrawal
39
+ </button>
 
 
 
 
 
 
 
40
  </div>
41
  </div>
42
+ </header>
43
 
44
+ <main class="p-6">
45
+ <div class="bg-white rounded-lg shadow overflow-hidden">
46
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
47
+ <h3 class="text-lg font-medium text-gray-800">All Transactions</h3>
48
+ <div class="flex space-x-4">
49
+ <div class="relative">
50
+ <select class="appearance-none pl-3 pr-8 py-2 border rounded-lg bg-white">
51
+ <option>All Types</option>
52
+ <option>Top Up</option>
53
+ <option>Withdrawal</option>
54
+ <option>Transfer</option>
55
+ <option>Adjustment</option>
56
+ </select>
57
+ <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-400 pointer-events-none"></i>
58
+ </div>
59
+ <div class="relative">
60
+ <select class="appearance-none pl-3 pr-8 py-2 border rounded-lg bg-white">
61
+ <option>All Status</option>
62
+ <option>Pending</option>
63
+ <option>Approved</option>
64
+ <option>Rejected</option>
65
+ <option>Failed</option>
66
+ </select>
67
+ <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-400 pointer-events-none"></i>
68
+ </div>
69
+ <div class="relative">
70
+ <input type="text" placeholder="Search..." class="pl-8 pr-4 py-2 border rounded-lg w-64">
71
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
72
+ </div>
73
+ </div>
74
  </div>
75
+
76
+ <div class="overflow-x-auto">
77
+ <table class="min-w-full divide-y divide-gray-200">
78
+ <thead class="bg-gray-50">
79
+ <tr>
80
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th>
81
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
82
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
83
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
84
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
85
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
86
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
87
+ </tr>
88
+ </thead>
89
+ <tbody class="bg-white divide-y divide-gray-200">
90
+ <tr>
91
+ <td class="px-6 py-4 whitespace-nowrap">#TOP-20230815-001</td>
92
+ <td class="px-6 py-4 whitespace-nowrap">Top Up</td>
93
+ <td class="px-6 py-4 whitespace-nowrap">John Doe (08123456789)</td>
94
+ <td class="px-6 py-4 whitespace-nowrap">Rp 650,000</td>
95
+ <td class="px-6 py-4 whitespace-nowrap">15 Aug 2023, 10:30</td>
96
+ <td class="px-6 py-4 whitespace-nowrap">
97
+ <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span>
98
+ </td>
99
+ <td class="px-6 py-4 whitespace-nowrap">
100
+ <button class="text-blue-600 hover:text-blue-800">View</button>
101
+ </td>
102
+ </tr>
103
+ <tr>
104
+ <td class="px-6 py-4 whitespace-nowrap">#WD-20230814-005</td>
105
+ <td class="px-6 py-4 whitespace-nowrap">Withdrawal</td>
106
+ <td class="px-6 py-4 whitespace-nowrap">Jane Smith (08198765432)</td>
107
+ <td class="px-6 py-4 whitespace-nowrap">1.5 Chips</td>
108
+ <td class="px-6 py-4 whitespace-nowrap">14 Aug 2023, 16:45</td>
109
+ <td class="px-6 py-4 whitespace-nowrap">
110
+ <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Approved</span>
111
+ </td>
112
+ <td class="px-6 py-4 whitespace-nowrap">
113
+ <button class="text-blue-600 hover:text-blue-800">View</button>
114
+ </td>
115
+ </tr>
116
+ <!-- More rows would be dynamically inserted here -->
117
+ </tbody>
118
+ </table>
119
  </div>
120
+
121
+ <div class="px-6 py-4 border-t border-gray-200 flex justify-between items-center">
122
+ <div class="text-sm text-gray-500">
123
+ Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">24</span> results
124
+ </div>
125
+ <div class="flex space-x-2">
126
+ <button class="px-3 py-1 border rounded-lg text-gray-700">Previous</button>
127
+ <button class="px-3 py-1 border rounded-lg bg-blue-600 text-white">1</button>
128
+ <button class="px-3 py-1 border rounded-lg text-gray-700">2</button>
129
+ <button class="px-3 py-1 border rounded-lg text-gray-700">3</button>
130
+ <button class="px-3 py-1 border rounded-lg text-gray-700">Next</button>
131
+ </div>
132
  </div>
133
  </div>
134
+ </main>
 
 
 
 
135
  </div>
136
  </div>
137
+
138
+ <script>
139
+ feather.replace();
140
+ </script>
141
  </body>
142
  </html>
withdraw.html CHANGED
@@ -1,32 +1,72 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- </head>
9
- <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
10
- <div class="w-full max-w-md mx-auto bg-white rounded-xl shadow-md p-8">
11
- <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">ChipFlow Commander</h1>
12
-
13
- <div class="space-y-4">
14
- <a href="/customer_topup.html" class="block w-full bg-blue-600 hover:bg-blue-700 text-white text-center py-3 px-6 rounded-lg font-bold transition">
15
- 💰 Top Up Chips
16
- </a>
17
- <a href="/withdraw.html" class="block w-full bg-green-600 hover:bg-green-700 text-white text-center py-3 px-6 rounded-lg font-bold transition">
18
- 🏧 Withdraw Chips
19
- </a>
20
- <a href="/transactions.html" class="block w-full bg-purple-600 hover:bg-purple-700 text-white text-center py-3 px-6 rounded-lg font-bold transition">
21
- 🔍 Check Transaction
22
- </a>
23
- <div class="pt-4 border-t border-gray-200">
24
- <a href="/admin_login.html" class="block w-full bg-gray-800 hover:bg-gray-900 text-white text-center py-3 px-6 rounded-lg font-bold transition">
25
- 👑 Admin Login
26
- </a>
27
- </div>
28
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  </div>
30
- <script></script>
31
- </body>
32
- </html>
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ChipFlow Commander - Withdraw</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ </head>
9
+ <body class="bg-gray-100">
10
+ <div class="container py-8">
11
+ <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
12
+ <div class="text-center mb-6">
13
+ <h1 class="text-2xl font-bold text-gray-800">🏧 Chip Withdrawal</h1>
14
+ <p class="text-gray-600">Convert your chips to real money</p>
15
+ </div>
16
+
17
+ <form id="withdrawForm">
18
+ <div class="mb-4">
19
+ <label class="block text-gray-700 mb-2">Game ID</label>
20
+ <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
21
+ </div>
22
+
23
+ <div class="mb-4">
24
+ <label class="block text-gray-700 mb-2">Chip Amount</label>
25
+ <input type="number" id="chipInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter chip amount" min="100" required>
26
+ <p class="text-xs text-gray-500 mt-1">Minimum 100 chips</p>
27
+ </div>
28
+
29
+ <div class="mb-4">
30
+ <label class="block text-gray-700 mb-2">Bank Account</label>
31
+ <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Account number" required>
32
+ </div>
33
+
34
+ <div class="mb-4">
35
+ <label class="block text-gray-700 mb-2">Bank Name</label>
36
+ <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Bank name" required>
37
+ </div>
38
+
39
+ <div class="mb-4">
40
+ <label class="block text-gray-700 mb-2">Account Holder Name</label>
41
+ <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Name on bank account" required>
42
+ </div>
43
+
44
+ <div class="bg-green-50 p-4 rounded-lg mb-6">
45
+ <h3 class="text-lg font-semibold text-green-800 mb-2">You will receive:</h3>
46
+ <div class="flex justify-between items-center">
47
+ <span class="text-gray-700">Amount (Rp):</span>
48
+ <span id="cashResult" class="text-2xl font-bold text-green-600">0</span>
49
+ </div>
50
+ <div class="text-xs text-gray-500 mt-2">Rate: Rp65,000 per chip</div>
51
+ </div>
52
+
53
+ <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-bold transition">
54
+ Request Withdrawal
55
+ </button>
56
+ </form>
57
+
58
+ <div class="mt-6 text-center text-sm text-gray-500">
59
+ <p>Processing time: 1-3 business days</p>
60
+ </div>
61
+ </div>
62
  </div>
63
+
64
+ <script>
65
+ document.getElementById('chipInput').addEventListener('input', function() {
66
+ const chips = parseInt(this.value) || 0;
67
+ const cash = chips * 65000;
68
+ document.getElementById('cashResult').textContent = cash.toLocaleString();
69
+ });
70
+ </script>
71
+ </body>
72
+ </html>