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

🧑‍💼 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.

admin_dashboard.html

@@ -5,141 +5,176 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ChipFlow Commander - Admin Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 </head>
 <body class="bg-gray-100">
     <div class="flex h-screen">
         <!-- Sidebar -->
-        <div class="w-64 bg-gray-800 text-white">
-            <div class="p-4 border-b border-gray-700">
-                <h1 class="text-xl font-bold">ChipFlow Commander</h1>
-                <p class="text-sm text-gray-400">Admin Dashboard</p>
+        <div class="w-64 bg-blue-800 text-white p-4">
+            <div class="flex items-center mb-8 p-2 border-b border-blue-700">
+                <img src="http://static.photos/finance/200x200/1" alt="Logo" class="w-10 h-10 rounded-full mr-3">
+                <h1 class="text-xl font-bold">ChipFlow</h1>
             </div>
-            <nav class="mt-4">
-                <a href="admin_dashboard.html" class="block py-2 px-4 bg-gray-700 text-white">Dashboard</a>
-                <a href="bank_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Bank Management</a>
-                <a href="id_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">ID Management</a>
-                <a href="transactions.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Transactions</a>
-                <a href="history.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">History Log</a>
-                <a href="/index.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700 mt-8">Logout</a>
+            
+            <nav>
+                <div class="mb-4">
+                    <h3 class="text-xs uppercase text-blue-300 mb-2 px-2">Main</h3>
+                    <a href="#" class="flex items-center px-3 py-2 bg-blue-700 rounded-lg">
+                        <i data-feather="home" class="mr-2"></i>
+                        Dashboard
+                    </a>
+                </div>
+                
+                <div class="mb-4">
+                    <h3 class="text-xs uppercase text-blue-300 mb-2 px-2">Transaksi</h3>
+                    <a href="customer_topup.html" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg">
+                        <i data-feather="plus-circle" class="mr-2"></i>
+                        Top Up
+                    </a>
+                    <a href="customer_topup.html" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                        <i data-feather="dollar-sign" class="mr-2"></i>
+                        Withdraw
+                    </a>
+                    <a href="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                        <i data-feather="repeat" class="mr-2"></i>
+                        Transfer
+                    </a>
+                </div>
+                
+                <div class="mb-4">
+                    <h3 class="text-xs uppercase text-blue-300 mb-2 px-2">Management</h3>
+                    <a href="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg">
+                        <i data-feather="database" class="mr-2"></i>
+                        Bank Accounts
+                    </a>
+                    <a href="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                        <i data-feather="credit-card" class="mr-2"></i>
+                        ID Stock
+                    </a>
+                    <a href="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                        <i data-feather="users" class="mr-2"></i>
+                        Admin Users
+                    </a>
+                </div>
+                
+                <div class="mb-4">
+                    <h3 class="text-xs uppercase text-blue-300 mb-2 px-2">Reports</h3>
+                    <a href="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg">
+                        <i data-feather="activity" class="mr-2"></i>
+                        Transactions
+                    </a>
+                    <a href="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                        <i data-feather="file-text" class="mr-2"></i>
+                        Audit Log
+                    </a>
+                    <a href="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                        <i data-feather="pie-chart" class="mr-2"></i>
+                        Analytics
+                    </a>
+                </div>
             </nav>
-</div>
+        </div>
 
         <!-- Main Content -->
         <div class="flex-1 overflow-auto">
-            <header class="bg-white shadow-sm p-4">
-                <div class="flex justify-between items-center">
-                    <h2 class="text-xl font-semibold text-gray-800">Dashboard Overview</h2>
-                    <div class="flex items-center space-x-4">
-                        <span class="text-gray-600">Admin</span>
-                        <div class="w-8 h-8 bg-blue-500 rounded-full"></div>
+            <!-- Header -->
+            <header class="bg-white shadow-sm p-4 flex justify-between items-center">
+                <div>
+                    <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
+                    <p class="text-gray-600">Welcome back, Admin</p>
+                </div>
+                <div class="flex items-center">
+                    <div class="relative mr-4">
+                        <i data-feather="bell" class="text-gray-500"></i>
+                        <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
+                    </div>
+                    <div class="flex items-center">
+                        <img src="http://static.photos/people/200x200/2" alt="User" class="w-8 h-8 rounded-full mr-2">
+                        <span class="font-medium">Admin User</span>
                     </div>
                 </div>
             </header>
 
+            <!-- Dashboard Content -->
             <main class="p-6">
-                <!-- Stats Cards -->
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-full bg-blue-100 text-blue-600">
-                                <i data-feather="dollar-sign"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-500">Total Bank Balance</p>
-                                <p class="text-2xl font-semibold text-gray-800">Rp 125,450,000</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-full bg-green-100 text-green-600">
-                                <i data-feather="credit-card"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-500">Total Chips Stock</p>
-                                <p class="text-2xl font-semibold text-gray-800">1,845.75</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-full bg-purple-100 text-purple-600">
-                                <i data-feather="clock"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-500">Pending Transactions</p>
-                                <p class="text-2xl font-semibold text-gray-800">14</p>
-                            </div>
-                        </div>
-                    </div>
+                <!-- Summary Cards -->
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                     <div class="bg-white rounded-lg shadow p-6">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
-                                <i data-feather="trending-up"></i>
-                            </div>
-                            <div class="ml-4">
-                                <p class="text-sm font-medium text-gray-500">Today's Profit</p>
-                                <p class="text-2xl font-semibold text-gray-800">Rp 8,250,000</p>
-                            </div>
-                        </div>
+                        <h3 class="text-lg font-medium text-gray-700 mb-2">Total Balance</h3>
+                        <p class="text-2xl font-bold text-blue-600">Rp 125,450,000</p>
+                        <p class="text-sm text-gray-500">Across all banks</p>
                     </div>
-                </div>
-<!-- Charts -->
-                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                     <div class="bg-white rounded-lg shadow p-6">
-                        <h3 class="text-lg font-medium text-gray-800 mb-4">Revenue Overview</h3>
-                        <canvas id="revenueChart" height="250"></canvas>
+                        <h3 class="text-lg font-medium text-gray-700 mb-2">Total Chips</h3>
+                        <p class="text-2xl font-bold text-green-600">1,845.75</p>
+                        <p class="text-sm text-gray-500">Across all IDs</p>
                     </div>
                     <div class="bg-white rounded-lg shadow p-6">
-                        <h3 class="text-lg font-medium text-gray-800 mb-4">User Activity</h3>
-                        <canvas id="activityChart" height="250"></canvas>
+                        <h3 class="text-lg font-medium text-gray-700 mb-2">Pending Transactions</h3>
+                        <p class="text-2xl font-bold text-yellow-600">12</p>
+                        <p class="text-sm text-gray-500">Need approval</p>
                     </div>
                 </div>
-                <!-- Pending Transactions -->
-                <div class="bg-white rounded-lg shadow mt-6">
-                    <div class="p-6 border-b border-gray-200 flex justify-between items-center">
-                        <h3 class="text-lg font-medium text-gray-800">Pending Transactions</h3>
-                        <div class="flex space-x-2">
-                            <button class="px-3 py-1 bg-blue-100 text-blue-600 rounded-lg text-sm">Top Ups</button>
-                            <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm">Withdrawals</button>
-                            <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-lg text-sm">Transfers</button>
-                        </div>
+
+                <!-- Recent Transactions -->
+                <div class="bg-white rounded-lg shadow mb-6">
+                    <div class="p-4 border-b">
+                        <h3 class="text-lg font-medium">Recent Transactions</h3>
                     </div>
                     <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
-                                <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                        <table class="min-w-full">
+                            <thead>
+                                <tr class="bg-gray-50 text-left text-xs text-gray-500 uppercase">
+                                    <th class="px-6 py-3">ID</th>
+                                    <th class="px-6 py-3">Type</th>
+                                    <th class="px-6 py-3">Amount</th>
+                                    <th class="px-6 py-3">Status</th>
+                                    <th class="px-6 py-3">Date</th>
+                                    <th class="px-6 py-3">Action</th>
                                 </tr>
                             </thead>
-                            <tbody class="bg-white divide-y divide-gray-200">
+                            <tbody class="divide-y divide-gray-200">
+                                <tr>
+                                    <td class="px-6 py-4">#CF-1001</td>
+                                    <td class="px-6 py-4">Top Up</td>
+                                    <td class="px-6 py-4">Rp 650,000</td>
+                                    <td class="px-6 py-4"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Pending</span></td>
+                                    <td class="px-6 py-4">20 Jun 2023</td>
+                                    <td class="px-6 py-4">
+                                        <button class="text-green-600 hover:text-green-800 mr-2">
+                                            <i data-feather="check"></i>
+                                        </button>
+                                        <button class="text-red-600 hover:text-red-800">
+                                            <i data-feather="x"></i>
+                                        </button>
+                                    </td>
+                                </tr>
                                 <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap">#TOP-20230815-001</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">John Doe (08123456789)</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Top Up</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Rp 650,000</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">15 Aug 2023, 10:30</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <button class="px-3 py-1 bg-green-100 text-green-600 rounded-lg text-sm mr-2">Approve</button>
-                                        <button class="px-3 py-1 bg-red-100 text-red-600 rounded-lg text-sm">Reject</button>
+                                    <td class="px-6 py-4">#CF-1000</td>
+                                    <td class="px-6 py-4">Withdraw</td>
+                                    <td class="px-6 py-4">2.50 Chips</td>
+                                    <td class="px-6 py-4"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Pending</span></td>
+                                    <td class="px-6 py-4">20 Jun 2023</td>
+                                    <td class="px-6 py-4">
+                                        <button class="text-green-600 hover:text-green-800 mr-2">
+                                            <i data-feather="check"></i>
+                                        </button>
+                                        <button class="text-red-600 hover:text-red-800">
+                                            <i data-feather="x"></i>
+                                        </button>
                                     </td>
                                 </tr>
                                 <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap">#WD-20230815-002</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Jane Smith (08198765432)</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Withdrawal</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">2.5 Chips</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">15 Aug 2023, 11:45</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <button class="px-3 py-1 bg-green-100 text-green-600 rounded-lg text-sm mr-2">Approve</button>
-                                        <button class="px-3 py-1 bg-red-100 text-red-600 rounded-lg text-sm">Reject</button>
+                                    <td class="px-6 py-4">#CF-0999</td>
+                                    <td class="px-6 py-4">Top Up</td>
+                                    <td class="px-6 py-4">Rp 1,300,000</td>
+                                    <td class="px-6 py-4"><span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Approved</span></td>
+                                    <td class="px-6 py-4">19 Jun 2023</td>
+                                    <td class="px-6 py-4">
+                                        <button class="text-blue-600 hover:text-blue-800">
+                                            <i data-feather="eye"></i>
+                                        </button>
                                     </td>
                                 </tr>
                             </tbody>
@@ -147,112 +182,35 @@
                     </div>
                 </div>
 
-                <!-- Quick Actions -->
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
-                    <a href="customer_topup.html" class="bg-white rounded-lg shadow p-6 hover:shadow-md transition cursor-pointer">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-full bg-blue-100 text-blue-600">
-                                <i data-feather="plus-circle"></i>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-lg font-medium text-gray-800">Quick Top Up</h3>
-                                <p class="text-sm text-gray-500">Add new top up transaction</p>
-                            </div>
-                        </div>
-                    </a>
-                    <a href="#" class="bg-white rounded-lg shadow p-6 hover:shadow-md transition cursor-pointer">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-full bg-green-100 text-green-600">
-                                <i data-feather="minus-circle"></i>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-lg font-medium text-gray-800">Quick Withdrawal</h3>
-                                <p class="text-sm text-gray-500">Process chip withdrawal</p>
-                            </div>
+                <!-- Charts Section -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="bg-white rounded-lg shadow p-6">
+                        <h3 class="text-lg font-medium mb-4">Daily Transactions</h3>
+                        <div class="h-64 bg-gray-100 rounded flex items-center justify-center">
+                            [Chart Placeholder]
                         </div>
-                    </a>
-                    <a href="#" class="bg-white rounded-lg shadow p-6 hover:shadow-md transition cursor-pointer">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-full bg-purple-100 text-purple-600">
-                                <i data-feather="refresh-cw"></i>
-                            </div>
-                            <div class="ml-4">
-                                <h3 class="text-lg font-medium text-gray-800">Transfer</h3>
-                                <p class="text-sm text-gray-500">Transfer between banks/IDs</p>
-                            </div>
+                    </div>
+                    <div class="bg-white rounded-lg shadow p-6">
+                        <h3 class="text-lg font-medium mb-4">Chip Distribution</h3>
+                        <div class="h-64 bg-gray-100 rounded flex items-center justify-center">
+                            [Pie Chart Placeholder]
                         </div>
-                    </a>
+                    </div>
                 </div>
-</main>
+            </main>
         </div>
     </div>
 
     <script>
-        // Initialize feather icons
         feather.replace();
         
-        // Charts initialization
-        document.addEventListener('DOMContentLoaded', function() {
-            // Revenue Chart
-            const revenueCtx = document.getElementById('revenueChart').getContext('2d');
-            new Chart(revenueCtx, {
-                type: 'line',
-                data: {
-                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
-                    datasets: [{
-                        label: 'Revenue',
-                        data: [12000, 19000, 3000, 5000, 2000, 3000, 45000],
-                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
-                        borderColor: 'rgba(59, 130, 246, 1)',
-                        borderWidth: 2,
-                        tension: 0.4,
-                        fill: true
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        legend: {
-                            display: false
-                        }
-                    },
-                    scales: {
-                        y: {
-                            beginAtZero: true
-                        }
-                    }
-                }
-            });
-
-            // Activity Chart
-            const activityCtx = document.getElementById('activityChart').getContext('2d');
-            new Chart(activityCtx, {
-                type: 'bar',
-                data: {
-                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-                    datasets: [{
-                        label: 'Active Users',
-                        data: [320, 150, 280, 400, 350, 420, 380],
-                        backgroundColor: 'rgba(124, 58, 237, 0.7)',
-                        borderColor: 'rgba(124, 58, 237, 1)',
-                        borderWidth: 1
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        legend: {
-                            display: false
-                        }
-                    },
-                    scales: {
-                        y: {
-                            beginAtZero: true
-                        }
-                    }
-                }
-            });
-        });
+        // Role-based access control simulation
+        const userRole = 'admin'; // Can be 'owner' or 'admin'
+        
+        if(userRole === 'admin') {
+            // Hide owner-only features
+            document.querySelectorAll('.owner-only').forEach(el => el.style.display = 'none');
+        }
     </script>
 </body>
 </html>

customer_topup.html

@@ -3,95 +3,69 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ChipFlow Commander - Top Up</title>
+    <title>ChipFlow Commander - Withdraw</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body class="bg-gray-100">
     <div class="container py-8">
         <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
             <div class="text-center mb-6">
-                <h1 class="text-2xl font-bold text-gray-800">🔋 Chip Top Up</h1>
-                <p class="text-gray-600">Fill the form below to recharge your chips</p>
+                <h1 class="text-2xl font-bold text-gray-800">🏧 Chip Withdrawal</h1>
+                <p class="text-gray-600">Convert your chips to real money</p>
             </div>
 
-            <form id="topupForm">
+            <form id="withdrawForm">
                 <div class="mb-4">
                     <label class="block text-gray-700 mb-2">Game ID</label>
                     <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
                 </div>
 
                 <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Player Name</label>
-                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Your in-game name" required>
+                    <label class="block text-gray-700 mb-2">Chip Amount</label>
+                    <input type="number" id="chipInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter chip amount" min="100" required>
+                    <p class="text-xs text-gray-500 mt-1">Minimum 100 chips</p>
                 </div>
 
                 <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">WhatsApp Number</label>
-                    <input type="tel" class="w-full px-3 py-2 border rounded-lg" placeholder="+62..." required>
+                    <label class="block text-gray-700 mb-2">Bank Account</label>
+                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Account number" required>
                 </div>
 
                 <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Amount (Rp)</label>
-                    <input type="number" id="amountInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter amount" min="10000" required>
-                    <p class="text-xs text-gray-500 mt-1">Minimum Rp10,000</p>
+                    <label class="block text-gray-700 mb-2">Bank Name</label>
+                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Bank name" required>
                 </div>
 
-                <div class="mb-6">
-                    <label class="block text-gray-700 mb-2">Payment Method</label>
-                    <select class="w-full px-3 py-2 border rounded-lg" required>
-                        <option value="">Select payment</option>
-                        <option>Bank Transfer</option>
-                        <option>QRIS</option>
-                        <option>E-Wallet</option>
-                    </select>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2">Account Holder Name</label>
+                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Name on bank account" required>
                 </div>
 
-                <div class="bg-blue-50 p-4 rounded-lg mb-6">
-                    <h3 class="text-lg font-semibold text-blue-800 mb-2">You will receive:</h3>
+                <div class="bg-green-50 p-4 rounded-lg mb-6">
+                    <h3 class="text-lg font-semibold text-green-800 mb-2">You will receive:</h3>
                     <div class="flex justify-between items-center">
-                        <span class="text-gray-700">Chips:</span>
-                        <span id="chipResult" class="text-2xl font-bold text-blue-600">0.00</span>
+                        <span class="text-gray-700">Amount (Rp):</span>
+                        <span id="cashResult" class="text-2xl font-bold text-green-600">0</span>
                     </div>
-                    <div class="text-xs text-gray-500 mt-2" id="rateInfo"></div>
+                    <div class="text-xs text-gray-500 mt-2">Rate: Rp65,000 per chip</div>
                 </div>
 
-                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-bold transition">
-                    Proceed to Payment
+                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-bold transition">
+                    Request Withdrawal
                 </button>
             </form>
 
             <div class="mt-6 text-center text-sm text-gray-500">
-                <p>Need help? <a href="#" class="text-blue-600">Contact Support</a></p>
+                <p>Processing time: 1-3 business days</p>
             </div>
         </div>
     </div>
 
     <script>
-        document.getElementById('amountInput').addEventListener('input', function() {
-            const amount = parseFloat(this.value) || 0;
-            let chips = 0;
-            let rateText = '';
-            
-            if (amount >= 1300000) {
-                chips = amount / 63000;
-                rateText = 'Wholesale rate: Rp63,000/chip';
-            } else if (amount >= 650000) {
-                chips = amount / 64500;
-                rateText = 'Wholesale rate: Rp64,500/chip';
-            } else if (amount >= 65000) {
-                chips = amount / 65000;
-                rateText = 'Wholesale rate: Rp65,000/chip';
-            } else {
-                // Fractional calculation
-                if (amount >= 10000) {
-                    chips = amount * 0.000012; // Example fractional rate
-                    rateText = 'Fractional chip rate applied';
-                }
-            }
-            
-            document.getElementById('chipResult').textContent = chips.toFixed(2);
-            document.getElementById('rateInfo').textContent = rateText;
+        document.getElementById('chipInput').addEventListener('input', function() {
+            const chips = parseInt(this.value) || 0;
+            const cash = chips * 65000;
+            document.getElementById('cashResult').textContent = cash.toLocaleString();
         });
     </script>
 </body>

transactions.html

@@ -3,140 +3,66 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Transactions - ChipFlow Commander</title>
+    <title>ChipFlow Commander - Transactions</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 </head>
 <body class="bg-gray-100">
-    <div class="flex h-screen">
-        <!-- Sidebar -->
-        <div class="w-64 bg-gray-800 text-white">
-            <div class="p-4 border-b border-gray-700">
-                <h1 class="text-xl font-bold">ChipFlow Commander</h1>
-                <p class="text-sm text-gray-400">Transactions</p>
+    <div class="container py-8">
+        <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
+            <div class="text-center mb-6">
+                <h1 class="text-2xl font-bold text-gray-800">🔍 Transaction History</h1>
+                <p class="text-gray-600">Check your recent transactions</p>
             </div>
-            <nav class="mt-4">
-                <a href="admin_dashboard.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Dashboard</a>
-                <a href="bank_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">Bank Management</a>
-                <a href="id_management.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">ID Management</a>
-                <a href="transactions.html" class="block py-2 px-4 bg-gray-700 text-white">Transactions</a>
-                <a href="history.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700">History Log</a>
-                <a href="/index.html" class="block py-2 px-4 text-gray-300 hover:bg-gray-700 mt-8">Logout</a>
-            </nav>
-        </div>
 
-        <!-- Main Content -->
-        <div class="flex-1 overflow-auto">
-            <header class="bg-white shadow-sm p-4">
-                <div class="flex justify-between items-center">
-                    <h2 class="text-xl font-semibold text-gray-800">Transaction Management</h2>
-                    <div class="flex space-x-2">
-                        <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">
-                            New Top Up
-                        </button>
-                        <button class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg">
-                            New Withdrawal
-                        </button>
+            <form class="mb-6">
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2">Game ID</label>
+                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
+                </div>
+                <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded-lg font-bold transition">
+                    Search Transactions
+                </button>
+            </form>
+
+            <div class="space-y-4">
+                <div class="border-b pb-4">
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="font-semibold">Top Up</span>
+                        <span class="text-blue-600">+Rp500,000</span>
+                    </div>
+                    <div class="flex justify-between text-sm text-gray-500">
+                        <span>2023-11-15 14:30</span>
+                        <span>Completed</span>
                     </div>
                 </div>
-            </header>
 
-            <main class="p-6">
-                <div class="bg-white rounded-lg shadow overflow-hidden">
-                    <div class="p-4 border-b border-gray-200 flex justify-between items-center">
-                        <h3 class="text-lg font-medium text-gray-800">All Transactions</h3>
-                        <div class="flex space-x-4">
-                            <div class="relative">
-                                <select class="appearance-none pl-3 pr-8 py-2 border rounded-lg bg-white">
-                                    <option>All Types</option>
-                                    <option>Top Up</option>
-                                    <option>Withdrawal</option>
-                                    <option>Transfer</option>
-                                    <option>Adjustment</option>
-                                </select>
-                                <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-400 pointer-events-none"></i>
-                            </div>
-                            <div class="relative">
-                                <select class="appearance-none pl-3 pr-8 py-2 border rounded-lg bg-white">
-                                    <option>All Status</option>
-                                    <option>Pending</option>
-                                    <option>Approved</option>
-                                    <option>Rejected</option>
-                                    <option>Failed</option>
-                                </select>
-                                <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-400 pointer-events-none"></i>
-                            </div>
-                            <div class="relative">
-                                <input type="text" placeholder="Search..." class="pl-8 pr-4 py-2 border rounded-lg w-64">
-                                <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
-                            </div>
-                        </div>
+                <div class="border-b pb-4">
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="font-semibold">Withdrawal</span>
+                        <span class="text-red-600">-Rp1,300,000</span>
                     </div>
-                    
-                    <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
-                                <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody class="bg-white divide-y divide-gray-200">
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap">#TOP-20230815-001</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Top Up</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">John Doe (08123456789)</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Rp 650,000</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">15 Aug 2023, 10:30</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <button class="text-blue-600 hover:text-blue-800">View</button>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td class="px-6 py-4 whitespace-nowrap">#WD-20230814-005</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Withdrawal</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">Jane Smith (08198765432)</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">1.5 Chips</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">14 Aug 2023, 16:45</td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Approved</span>
-                                    </td>
-                                    <td class="px-6 py-4 whitespace-nowrap">
-                                        <button class="text-blue-600 hover:text-blue-800">View</button>
-                                    </td>
-                                </tr>
-                                <!-- More rows would be dynamically inserted here -->
-                            </tbody>
-                        </table>
+                    <div class="flex justify-between text-sm text-gray-500">
+                        <span>2023-11-10 09:15</span>
+                        <span>Processing</span>
                     </div>
-                    
-                    <div class="px-6 py-4 border-t border-gray-200 flex justify-between items-center">
-                        <div class="text-sm text-gray-500">
-                            Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">24</span> results
-                        </div>
-                        <div class="flex space-x-2">
-                            <button class="px-3 py-1 border rounded-lg text-gray-700">Previous</button>
-                            <button class="px-3 py-1 border rounded-lg bg-blue-600 text-white">1</button>
-                            <button class="px-3 py-1 border rounded-lg text-gray-700">2</button>
-                            <button class="px-3 py-1 border rounded-lg text-gray-700">3</button>
-                            <button class="px-3 py-1 border rounded-lg text-gray-700">Next</button>
-                        </div>
+                </div>
+
+                <div class="border-b pb-4">
+                    <div class="flex justify-between items-center mb-2">
+                        <span class="font-semibold">Top Up</span>
+                        <span class="text-blue-600">+Rp250,000</span>
+                    </div>
+                    <div class="flex justify-between text-sm text-gray-500">
+                        <span>2023-11-05 18:45</span>
+                        <span>Completed</span>
                     </div>
                 </div>
-            </main>
+            </div>
+
+            <div class="mt-6 text-center text-sm text-gray-500">
+                <p>Showing last 3 transactions</p>
+            </div>
         </div>
     </div>
-
-    <script>
-        feather.replace();
-    </script>
 </body>
 </html>

withdraw.html

@@ -1,72 +1,32 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ChipFlow Commander - Withdraw</title>
+<html>
+  <head>
+    <title>My app</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8">
     <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body class="bg-gray-100">
-    <div class="container py-8">
-        <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
-            <div class="text-center mb-6">
-                <h1 class="text-2xl font-bold text-gray-800">🏧 Chip Withdrawal</h1>
-                <p class="text-gray-600">Convert your chips to real money</p>
-            </div>
-
-            <form id="withdrawForm">
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Game ID</label>
-                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter your game ID" required>
-                </div>
-
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Chip Amount</label>
-                    <input type="number" id="chipInput" class="w-full px-3 py-2 border rounded-lg" placeholder="Enter chip amount" min="100" required>
-                    <p class="text-xs text-gray-500 mt-1">Minimum 100 chips</p>
-                </div>
-
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Bank Account</label>
-                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Account number" required>
-                </div>
-
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Bank Name</label>
-                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Bank name" required>
-                </div>
-
-                <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Account Holder Name</label>
-                    <input type="text" class="w-full px-3 py-2 border rounded-lg" placeholder="Name on bank account" required>
-                </div>
-
-                <div class="bg-green-50 p-4 rounded-lg mb-6">
-                    <h3 class="text-lg font-semibold text-green-800 mb-2">You will receive:</h3>
-                    <div class="flex justify-between items-center">
-                        <span class="text-gray-700">Amount (Rp):</span>
-                        <span id="cashResult" class="text-2xl font-bold text-green-600">0</span>
-                    </div>
-                    <div class="text-xs text-gray-500 mt-2">Rate: Rp65,000 per chip</div>
-                </div>
-
-                <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white py-3 px-4 rounded-lg font-bold transition">
-                    Request Withdrawal
-                </button>
-            </form>
-
-            <div class="mt-6 text-center text-sm text-gray-500">
-                <p>Processing time: 1-3 business days</p>
-            </div>
-        </div>
+  </head>
+  <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
+    <div class="w-full max-w-md mx-auto bg-white rounded-xl shadow-md p-8">
+      <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">ChipFlow Commander</h1>
+      
+      <div class="space-y-4">
+        <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">
+          💰 Top Up Chips
+        </a>
+        <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">
+          🏧 Withdraw Chips
+        </a>
+        <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">
+          🔍 Check Transaction
+        </a>
+<div class="pt-4 border-t border-gray-200">
+          <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">
+            👑 Admin Login
+          </a>
+</div>
+      </div>
     </div>
-
-    <script>
-        document.getElementById('chipInput').addEventListener('input', function() {
-            const chips = parseInt(this.value) || 0;
-            const cash = chips * 65000;
-            document.getElementById('cashResult').textContent = cash.toLocaleString();
-        });
-    </script>
-</body>
-</html>
+<script></script>
+  </body>
+</html>