Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChipFlow Commander - Admin Dashboard</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"> | |
| <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-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> | |
| <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="transactions_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="transactions_withdraw.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="transactions_transfer.html" 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> | |
| <a href="transactions_history.html" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1"> | |
| <i data-feather="list" class="mr-2"></i> | |
| Transaction History | |
| </a> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="text-xs uppercase text-blue-300 mb-2 px-2">Management</h3> | |
| <a href="bank_accounts.html" 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="id_stock.html" 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="admin_users.html" 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> | |
| <a href="customer_management.html" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1"> | |
| <i data-feather="user" class="mr-2"></i> | |
| Customer Management | |
| </a> | |
| </div> | |
| <div class="mb-4"> | |
| <h3 class="text-xs uppercase text-blue-300 mb-2 px-2">Reports</h3> | |
| <a href="reports_transactions.html" 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="reports_audit.html" 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="reports_analytics.html" 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> | |
| <a href="reports_daily.html" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1"> | |
| <i data-feather="calendar" class="mr-2"></i> | |
| Daily Reports | |
| </a> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- 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"> | |
| <!-- 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"> | |
| <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 class="bg-white rounded-lg shadow p-6"> | |
| <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-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> | |
| <!-- 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"> | |
| <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="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">#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">#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> | |
| </table> | |
| </div> | |
| </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> | |
| </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> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Role-based access control | |
| const userRole = localStorage.getItem('userRole') || 'admin'; | |
| // Hide owner-only features for non-owners | |
| if(userRole !== 'owner') { | |
| document.querySelectorAll('.owner-only').forEach(el => el.style.display = 'none'); | |
| } | |
| // Load real transaction data | |
| fetch('/api/transactions') | |
| .then(response => response.json()) | |
| .then(data => { | |
| const tbody = document.querySelector('tbody'); | |
| tbody.innerHTML = data.map(transaction => ` | |
| <tr> | |
| <td class="px-6 py-4">${transaction.id}</td> | |
| <td class="px-6 py-4">${transaction.type}</td> | |
| <td class="px-6 py-4">${transaction.amount}</td> | |
| <td class="px-6 py-4"> | |
| <span class="px-2 py-1 ${getStatusClass(transaction.status)} rounded-full text-xs"> | |
| ${transaction.status} | |
| </span> | |
| </td> | |
| <td class="px-6 py-4">${new Date(transaction.date).toLocaleDateString()}</td> | |
| <td class="px-6 py-4"> | |
| ${transaction.status === 'Pending' ? ` | |
| <button onclick="approveTransaction('${transaction.id}')" class="text-green-600 hover:text-green-800 mr-2"> | |
| <i data-feather="check"></i> | |
| </button> | |
| <button onclick="rejectTransaction('${transaction.id}')" class="text-red-600 hover:text-red-800"> | |
| <i data-feather="x"></i> | |
| </button> | |
| ` : ` | |
| <button onclick="viewTransaction('${transaction.id}')" class="text-blue-600 hover:text-blue-800"> | |
| <i data-feather="eye"></i> | |
| </button> | |
| `} | |
| </td> | |
| </tr> | |
| `).join(''); | |
| feather.replace(); | |
| }); | |
| function getStatusClass(status) { | |
| return { | |
| 'Pending': 'bg-yellow-100 text-yellow-800', | |
| 'Approved': 'bg-green-100 text-green-800', | |
| 'Rejected': 'bg-red-100 text-red-800' | |
| }[status] || 'bg-gray-100 text-gray-800'; | |
| } | |
| function approveTransaction(id) { | |
| fetch(`/api/transactions/${id}/approve`, { method: 'POST' }) | |
| .then(() => window.location.reload()); | |
| } | |
| function rejectTransaction(id) { | |
| fetch(`/api/transactions/${id}/reject`, { method: 'POST' }) | |
| .then(() => window.location.reload()); | |
| } | |
| function viewTransaction(id) { | |
| window.location.href = `/transaction_detail.html?id=${id}`; | |
| } | |
| </script> | |
| </body> | |
| </html> |