tolong perhatikan lg fungsi fungsi yang ada di admin dashboard karna tidak seperti itu dan selesaikan semua modul yg tersisa

admin_dashboard.html

@@ -28,51 +28,63 @@
                 
                 <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">
+                    <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="customer_topup.html" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                    <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="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                    <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>
-                </div>
+                    <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="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg">
+                    <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="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                    <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="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                    <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>
-                </div>
+                    <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="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg">
+                    <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="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                    <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="#" class="flex items-center px-3 py-2 hover:bg-blue-700 rounded-lg mt-1">
+                    <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>
-                </div>
+                    <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>
 
@@ -200,17 +212,73 @@
             </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());
+                }
 
-    <script>
-        feather.replace();
-        
-        // 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>
+                function viewTransaction(id) {
+                    window.location.href = `/transaction_detail.html?id=${id}`;
+                }
+            </script>
 </body>
 </html>

transactions_topup.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChipFlow - Top Up</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="container mx-auto p-4">
+        <div class="bg-white rounded-lg shadow p-6">
+            <h1 class="text-2xl font-bold mb-6">Top Up Management</h1>
+            
+            <div class="mb-6">
+                <button id="newTopupBtn" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+                    <i data-feather="plus" class="mr-2"></i>New Top Up
+                </button>
+            </div>
+
+            <div class="overflow-x-auto">
+                <table class="min-w-full bg-white">
+                    <thead>
+                        <tr class="bg-gray-100 text-left">
+                            <th class="py-3 px-4">ID</th>
+                            <th class="py-3 px-4">Customer</th>
+                            <th class="py-3 px-4">Bank</th>
+                            <th class="py-3 px-4">Amount</th>
+                            <th class="py-3 px-4">Status</th>
+                            <th class="py-3 px-4">Date</th>
+                            <th class="py-3 px-4">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="topupTableBody">
+                        <!-- Data will be loaded via JS -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+        
+        // Load topup data
+        fetch('/api/topups')
+            .then(response => response.json())
+            .then(data => {
+                const tbody = document.getElementById('topupTableBody');
+                tbody.innerHTML = data.map(topup => `
+                    <tr class="border-b">
+                        <td class="py-3 px-4">${topup.id}</td>
+                        <td class="py-3 px-4">${topup.customerName}</td>
+                        <td class="py-3 px-4">${topup.bankName}</td>
+                        <td class="py-3 px-4">${topup.amount}</td>
+                        <td class="py-3 px-4">
+                            <span class="px-2 py-1 rounded-full text-xs ${getStatusClass(topup.status)}">
+                                ${topup.status}
+                            </span>
+                        </td>
+                        <td class="py-3 px-4">${new Date(topup.date).toLocaleDateString()}</td>
+                        <td class="py-3 px-4">
+                            <button onclick="viewTopup('${topup.id}')" class="text-blue-600 hover:text-blue-800 mr-2">
+                                <i data-feather="eye"></i>
+                            </button>
+                            ${topup.status === 'Pending' ? `
+                            <button onclick="approveTopup('${topup.id}')" class="text-green-600 hover:text-green-800 mr-2">
+                                <i data-feather="check"></i>
+                            </button>
+                            <button onclick="rejectTopup('${topup.id}')" class="text-red-600 hover:text-red-800">
+                                <i data-feather="x"></i>
+                            </button>
+                            ` : ''}
+                        </td>
+                    </tr>
+                `).join('');
+                feather.replace();
+            });
+
+        function getStatusClass(status) {
+            return {
+                'Pending': 'bg-yellow-100 text-yellow-800',
+                'Completed': 'bg-green-100 text-green-800',
+                'Rejected': 'bg-red-100 text-red-800'
+            }[status] || 'bg-gray-100 text-gray-800';
+        }
+
+        document.getElementById('newTopupBtn').addEventListener('click', () => {
+            window.location.href = '/topup_new.html';
+        });
+
+        function viewTopup(id) {
+            window.location.href = `/topup_detail.html?id=${id}`;
+        }
+
+        function approveTopup(id) {
+            fetch(`/api/topups/${id}/approve`, { method: 'POST' })
+                .then(() => window.location.reload());
+        }
+
+        function rejectTopup(id) {
+            fetch(`/api/topups/${id}/reject`, { method: 'POST' })
+                .then(() => window.location.reload());
+        }
+    </script>
+</body>
+</html>

transactions_transfer.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChipFlow - Transfers</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="container mx-auto p-4">
+        <div class="bg-white rounded-lg shadow p-6">
+            <h1 class="text-2xl font-bold mb-6">Transfer Management</h1>
+            
+            <div class="mb-6">
+                <button id="newTransferBtn" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+                    <i data-feather="plus" class="mr-2"></i>New Transfer
+                </button>
+            </div>
+
+            <div class="overflow-x-auto">
+                <table class="min-w-full bg-white">
+                    <thead>
+                        <tr class="bg-gray-100 text-left">
+                            <th class="py-3 px-4">ID</th>
+                            <th class="py-3 px-4">From Customer</th>
+                            <th class="py-3 px-4">To Customer</th>
+                            <th class="py-3 px-4">Chips</th>
+                            <th class="py-3 px-4">Status</th>
+                            <th class="py-3 px-4">Date</th>
+                            <th class="py-3 px-4">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="transferTableBody">
+                        <!-- Data will be loaded via JS -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+        
+        // Load transfer data
+        fetch('/api/transfers')
+            .then(response => response.json())
+            .then(data => {
+                const tbody = document.getElementById('transferTableBody');
+                tbody.innerHTML = data.map(transfer => `
+                    <tr class="border-b">
+                        <td class="py-3 px-4">${transfer.id}</td>
+                        <td class="py-3 px-4">${transfer.fromCustomer}</td>
+                        <td class="py-3 px-4">${transfer.toCustomer}</td>
+                        <td class="py-3 px-4">${transfer.chips}</td>
+                        <td class="py-3 px-4">
+                            <span class="px-2 py-1 rounded-full text-xs ${getStatusClass(transfer.status)}">
+                                ${transfer.status}
+                            </span>
+                        </td>
+                        <td class="py-3 px-4">${new Date(transfer.date).toLocaleDateString()}</td>
+                        <td class="py-3 px-4">
+                            <button onclick="viewTransfer('${transfer.id}')" class="text-blue-600 hover:text-blue-800 mr-2">
+                                <i data-feather="eye"></i>
+                            </button>
+                            ${transfer.status === 'Pending' ? `
+                            <button onclick="approveTransfer('${transfer.id}')" class="text-green-600 hover:text-green-800 mr-2">
+                                <i data-feather="check"></i>
+                            </button>
+                            <button onclick="rejectTransfer('${transfer.id}')" class="text-red-600 hover:text-red-800">
+                                <i data-feather="x"></i>
+                            </button>
+                            ` : ''}
+                        </td>
+                    </tr>
+                `).join('');
+                feather.replace();
+            });
+
+        function getStatusClass(status) {
+            return {
+                'Pending': 'bg-yellow-100 text-yellow-800',
+                'Completed': 'bg-green-100 text-green-800',
+                'Rejected': 'bg-red-100 text-red-800'
+            }[status] || 'bg-gray-100 text-gray-800';
+        }
+
+        document.getElementById('newTransferBtn').addEventListener('click', () => {
+            window.location.href = '/transfer_new.html';
+        });
+
+        function viewTransfer(id) {
+            window.location.href = `/transfer_detail.html?id=${id}`;
+        }
+
+        function approveTransfer(id) {
+            fetch(`/api/transfers/${id}/approve`, { method: 'POST' })
+                .then(() => window.location.reload());
+        }
+
+        function rejectTransfer(id) {
+            fetch(`/api/transfers/${id}/reject`, { method: 'POST' })
+                .then(() => window.location.reload());
+        }
+    </script>
+</body>
+</html>

transactions_withdraw.html

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChipFlow - Withdrawals</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="container mx-auto p-4">
+        <div class="bg-white rounded-lg shadow p-6">
+            <h1 class="text-2xl font-bold mb-6">Withdrawal Management</h1>
+            
+            <div class="mb-6">
+                <button id="newWithdrawBtn" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+                    <i data-feather="plus" class="mr-2"></i>New Withdrawal
+                </button>
+            </div>
+
+            <div class="overflow-x-auto">
+                <table class="min-w-full bg-white">
+                    <thead>
+                        <tr class="bg-gray-100 text-left">
+                            <th class="py-3 px-4">ID</th>
+                            <th class="py-3 px-4">Customer</th>
+                            <th class="py-3 px-4">Bank</th>
+                            <th class="py-3 px-4">Chips</th>
+                            <th class="py-3 px-4">Amount</th>
+                            <th class="py-3 px-4">Status</th>
+                            <th class="py-3 px-4">Date</th>
+                            <th class="py-3 px-4">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="withdrawTableBody">
+                        <!-- Data will be loaded via JS -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        feather.replace();
+        
+        // Load withdrawal data
+        fetch('/api/withdrawals')
+            .then(response => response.json())
+            .then(data => {
+                const tbody = document.getElementById('withdrawTableBody');
+                tbody.innerHTML = data.map(withdrawal => `
+                    <tr class="border-b">
+                        <td class="py-3 px-4">${withdrawal.id}</td>
+                        <td class="py-3 px-4">${withdrawal.customerName}</td>
+                        <td class="py-3 px-4">${withdrawal.bankName}</td>
+                        <td class="py-3 px-4">${withdrawal.chips}</td>
+                        <td class="py-3 px-4">${withdrawal.amount}</td>
+                        <td class="py-3 px-4">
+                            <span class="px-2 py-1 rounded-full text-xs ${getStatusClass(withdrawal.status)}">
+                                ${withdrawal.status}
+                            </span>
+                        </td>
+                        <td class="py-3 px-4">${new Date(withdrawal.date).toLocaleDateString()}</td>
+                        <td class="py-3 px-4">
+                            <button onclick="viewWithdrawal('${withdrawal.id}')" class="text-blue-600 hover:text-blue-800 mr-2">
+                                <i data-feather="eye"></i>
+                            </button>
+                            ${withdrawal.status === 'Pending' ? `
+                            <button onclick="approveWithdrawal('${withdrawal.id}')" class="text-green-600 hover:text-green-800 mr-2">
+                                <i data-feather="check"></i>
+                            </button>
+                            <button onclick="rejectWithdrawal('${withdrawal.id}')" class="text-red-600 hover:text-red-800">
+                                <i data-feather="x"></i>
+                            </button>
+                            ` : ''}
+                        </td>
+                    </tr>
+                `).join('');
+                feather.replace();
+            });
+
+        function getStatusClass(status) {
+            return {
+                'Pending': 'bg-yellow-100 text-yellow-800',
+                'Completed': 'bg-green-100 text-green-800',
+                'Rejected': 'bg-red-100 text-red-800'
+            }[status] || 'bg-gray-100 text-gray-800';
+        }
+
+        document.getElementById('newWithdrawBtn').addEventListener('click', () => {
+            window.location.href = '/withdraw_new.html';
+        });
+
+        function viewWithdrawal(id) {
+            window.location.href = `/withdraw_detail.html?id=${id}`;
+        }
+
+        function approveWithdrawal(id) {
+            fetch(`/api/withdrawals/${id}/approve`, { method: 'POST' })
+                .then(() => window.location.reload());
+        }
+
+        function rejectWithdrawal(id) {
+            fetch(`/api/withdrawals/${id}/reject`, { method: 'POST' })
+                .then(() => window.location.reload());
+        }
+    </script>
+</body>
+</html>