Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>History Log - ChipFlow Commander</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">History Log</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 text-gray-300 hover:bg-gray-700">Transactions</a> | |
| <a href="history.html" class="block py-2 px-4 bg-gray-700 text-white">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">Audit Log</h2> | |
| <div class="flex space-x-2"> | |
| <div class="relative"> | |
| <select class="appearance-none pl-3 pr-8 py-2 border rounded-lg bg-white"> | |
| <option>All Modules</option> | |
| <option>Bank</option> | |
| <option>ID</option> | |
| <option>Top Up</option> | |
| <option>Withdrawal</option> | |
| <option>Transfer</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> | |
| </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">System Activities</h3> | |
| <div class="text-sm text-gray-500"> | |
| Last 30 days of activities | |
| </div> | |
| </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">Timestamp</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Module</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">15 Aug 2023, 10:15</td> | |
| <td class="px-6 py-4 whitespace-nowrap">admin1</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Top Up</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Approved</td> | |
| <td class="px-6 py-4"> | |
| <button class="text-blue-600 hover:text-blue-800">View Details</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">15 Aug 2023, 09:30</td> | |
| <td class="px-6 py-4 whitespace-nowrap">owner</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Bank</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Created</td> | |
| <td class="px-6 py-4"> | |
| <button class="text-blue-600 hover:text-blue-800">View Details</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap">14 Aug 2023, 16:45</td> | |
| <td class="px-6 py-4 whitespace-nowrap">admin2</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Withdrawal</td> | |
| <td class="px-6 py-4 whitespace-nowrap">Rejected</td> | |
| <td class="px-6 py-4"> | |
| <button class="text-blue-600 hover:text-blue-800">View Details</button> | |
| </td> | |
| </tr> | |
| <!-- More rows would be dynamically inserted here --> | |
| </tbody> | |
| </table> | |
| </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">127</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> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Detail Modal --> | |
| <div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-2xl"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-800">Activity Details</h3> | |
| <button id="closeDetailModalBtn" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-medium text-gray-700 mb-2">Transaction Information</h4> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Module</p> | |
| <p>Top Up</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Action</p> | |
| <p>Approved</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">User</p> | |
| <p>admin1</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Timestamp</p> | |
| <p>15 Aug 2023, 10:15:23</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-medium text-gray-700 mb-2">Change Details</h4> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <pre class="text-sm">{ | |
| "transaction_id": "TOP-20230815-001", | |
| "status": "Pending → Approved", | |
| "bank_balance_change": "+650000", | |
| "chip_stock_change": "-10.00" | |
| }</pre> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-6"> | |
| <button id="closeDetailBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Modal handling for details | |
| document.querySelectorAll('button:contains("View Details")').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| document.getElementById('detailModal').classList.remove('hidden'); | |
| }); | |
| }); | |
| document.getElementById('closeDetailModalBtn').addEventListener('click', function() { | |
| document.getElementById('detailModal').classList.add('hidden'); | |
| }); | |
| document.getElementById('closeDetailBtn').addEventListener('click', function() { | |
| document.getElementById('detailModal').classList.add('hidden'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |