Hugging Face's logo

Spaces:
ZAMINVEST
/
minvestus
Running

App Files Community
minvestus / admin.html
ZAMINVEST's picture
ZAMINVEST
add wallet , profile and more investment plans , give clear option for adim to add money in the wallet hence deposided, substract hence withdrawn and approve or reject - Follow Up Deployment
8a51c37 verified
Raw
History Blame Contribute Delete
24.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>vvmm Admin Dashboard</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-100">
 <div class="min-h-screen">
 <!-- Admin Navbar -->
 <nav class="bg-blue-900 text-white shadow-lg">
 <div class="container mx-auto px-4 py-3">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i data-feather="shield" class="w-8 h-8"></i>
 <span class="text-xl font-bold">vvmm Admin</span>
 </div>
 <div class="flex items-center space-x-4">
 <span id="adminName">Martin Mutale</span>
 <button id="adminLogout" class="bg-red-500 text-white px-4 py-2 rounded-lg font-medium hover:bg-red-600 transition">
 Logout
 </button>
 </div>
 </div>
 </div>
<!-- Manual Wallet Adjustment -->
 <div class="bg-white rounded-lg shadow overflow-hidden mt-8">
 <div class="px-6 py-4 border-b">
 <h2 class="text-xl font-bold">Wallet Management</h2>
 </div>
 <div class="p-6">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div class="bg-green-50 p-6 rounded-lg">
 <h3 class="font-bold text-lg mb-4">Add Funds</h3>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2">User Email</label>
 <input type="email" id="addFundsEmail" class="w-full px-4 py-2 border rounded-lg">
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2">Amount (ZMW)</label>
 <input type="number" id="addFundsAmount" class="w-full px-4 py-2 border rounded-lg" min="1">
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2">Description</label>
 <input type="text" id="addFundsReason" class="w-full px-4 py-2 border rounded-lg">
 </div>
 <button onclick="adminAddFunds()" class="w-full bg-green-600 text-white py-3 rounded-lg font-bold hover:bg-green-700">
 Add Funds
 </button>
 </div>
 <div class="bg-red-50 p-6 rounded-lg">
 <h3 class="font-bold text-lg mb-4">Deduct Funds</h3>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2">User Email</label>
 <input type="email" id="deductFundsEmail" class="w-full px-4 py-2 border rounded-lg">
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2">Amount (ZMW)</label>
 <input type="number" id="deductFundsAmount" class="w-full px-4 py-2 border rounded-lg" min="1">
 </div>
 <div class="mb-4">
 <label class="block text-gray-700 mb-2">Reason</label>
 <input type="text" id="deductFundsReason" class="w-full px-4 py-2 border rounded-lg">
 </div>
 <button onclick="adminDeductFunds()" class="w-full bg-red-600 text-white py-3 rounded-lg font-bold hover:bg-red-700">
 Deduct Funds
 </button>
 </div>
 </div>
 </div>
 </div>
 </nav>
<!-- Admin Dashboard -->
 <div class="container mx-auto px-4 py-8">
 <div class="mb-8">
 <img src="http://static.photos/office/1200x630/1" alt="Admin Dashboard" class="w-full rounded-lg shadow-lg">
 </div>
 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
 <div class="bg-white p-6 rounded-lg shadow">
 <h3 class="text-lg font-bold mb-2">Total Users</h3>
 <p class="text-3xl font-bold text-blue-600">0</p>
 </div>
 <div class="bg-white p-6 rounded-lg shadow">
 <h3 class="text-lg font-bold mb-2">Processing Fees</h3>
 <p class="text-3xl font-bold text-purple-600">K0</p>
 </div>
 <div class="bg-white p-6 rounded-lg shadow">
 <h3 class="text-lg font-bold mb-2">Pending Deposits</h3>
 <p class="text-3xl font-bold text-yellow-500">0</p>
 </div>
 <div class="bg-white p-6 rounded-lg shadow">
 <h3 class="text-lg font-bold mb-2">Pending Withdrawals</h3>
 <p class="text-3xl font-bold text-orange-500">0</p>
 </div>
 <div class="bg-white p-6 rounded-lg shadow">
 <h3 class="text-lg font-bold mb-2">Total Balance</h3>
 <p class="text-3xl font-bold text-green-500">K0</p>
 </div>
 </div>
<!-- Transactions Section -->
 <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
 <div class="px-6 py-4 border-b">
 <h2 class="text-xl font-bold">Pending Transactions</h2>
 </div>
 <div class="divide-y">
 <div class="p-6 flex justify-between items-center">
 <div class="flex items-center">
 <img src="http://static.photos/people/200x200/3" alt="User" class="w-12 h-12 rounded-full mr-4 object-cover">
 <div>
 <p class="font-bold">Deposit - K280</p>
 <p class="text-gray-600">From: user@example.com</p>
 <p class="text-sm text-gray-500">Today, 10:30 AM</p>
 <p class="text-sm font-medium">Payment to: vvmm Official (+260978310594)</p>
 </div>
 </div>
 <div class="flex space-x-2">
 <button onclick="adminApproveTransaction(1, 'deposit')" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">Approve</button>
 <button onclick="adminRejectTransaction(1, 'deposit')" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600">Reject</button>
 </div>
 </div>
 <div class="p-6 flex justify-between items-center">
 <div class="flex items-center">
 <img src="http://static.photos/people/200x200/4" alt="User" class="w-12 h-12 rounded-full mr-4 object-cover">
 <div>
 <p class="font-bold">Withdrawal - K100</p>
 <p class="text-gray-600">From: user2@example.com</p>
 <p class="text-sm text-gray-500">Today, 11:45 AM</p>
 <p class="text-sm font-medium">Payment from: vvmm Official (+260978310594)</p>
 </div>
 </div>
 <div class="flex space-x-2">
 <button onclick="adminApproveTransaction(2, 'withdrawal')" class="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600">Approve</button>
 <button onclick="adminRejectTransaction(2, 'withdrawal')" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600">Reject</button>
 </div>
 </div>
 </div>
 </div>
<!-- Team Members -->
 <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
 <div class="px-6 py-4 border-b">
 <h2 class="text-xl font-bold">Team Members</h2>
 </div>
 <div class="p-6">
 <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">Name</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Investment</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Commission</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
 </tr>
 </thead>
 <tbody class="bg-white divide-y divide-gray-200">
 <tr>
 <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
 <td class="px-6 py-4 whitespace-nowrap">Level 1</td>
 <td class="px-6 py-4 whitespace-nowrap">K500</td>
 <td class="px-6 py-4 whitespace-nowrap">K25 (5%)</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
 </td>
 </tr>
 <tr>
 <td class="px-6 py-4 whitespace-nowrap">Jane Smith</td>
 <td class="px-6 py-4 whitespace-nowrap">Level 2</td>
 <td class="px-6 py-4 whitespace-nowrap">K300</td>
 <td class="px-6 py-4 whitespace-nowrap">K9 (3%)</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </div>
<!-- Payment Proofs -->
 <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
 <div class="px-6 py-4 border-b">
 <h2 class="text-xl font-bold">Payment Proofs</h2>
 </div>
 <div class="p-6">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <div class="border rounded-lg p-4">
 <img src="http://static.photos/finance/320x240/1" alt="Payment Proof" class="w-full rounded mb-2">
 <p class="font-bold">Deposit - K280</p>
 <p class="text-sm text-gray-600">From: user1@example.com</p>
 <p class="text-sm text-gray-500">Today, 09:15 AM</p>
 <div class="mt-2">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Verified</span>
 </div>
 </div>
 <div class="border rounded-lg p-4">
 <img src="http://static.photos/finance/320x240/2" alt="Payment Proof" class="w-full rounded mb-2">
 <p class="font-bold">Withdrawal - K150</p>
 <p class="text-sm text-gray-600">From: user2@example.com</p>
 <p class="text-sm text-gray-500">Yesterday, 02:30 PM</p>
 <div class="mt-2">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
 </div>
 </div>
 <div class="border rounded-lg p-4">
 <img src="http://static.photos/finance/320x240/3" alt="Payment Proof" class="w-full rounded mb-2">
 <p class="font-bold">Deposit - K500</p>
 <p class="text-sm text-gray-600">From: user3@example.com</p>
 <p class="text-sm text-gray-500">Yesterday, 11:45 AM</p>
 <div class="mt-2">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Rejected</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Products Management -->
 <div class="bg-white rounded-lg shadow overflow-hidden mt-8">
 <div class="px-6 py-4 border-b">
 <h2 class="text-xl font-bold">Manage Products</h2>
 </div>
 <div class="p-6">
 <div class="mb-6">
 <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 mb-4">
 Add New Product
 </button>
 <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">Product</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Min Investment</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">
 <div class="flex items-center">
 <img src="http://static.photos/finance/200x200/4" alt="Agriculture" class="w-10 h-10 rounded-full mr-3">
 <div>
 <p class="font-medium">Agriculture Fund</p>
 <p class="text-sm text-gray-500">15-20% returns</p>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">K500</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
 <button class="text-red-600 hover:text-red-900">Archive</button>
 </td>
 </tr>
 <tr>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex items-center">
 <img src="http://static.photos/finance/200x200/5" alt="Real Estate" class="w-10 h-10 rounded-full mr-3">
 <div>
 <p class="font-medium">Real Estate Trust</p>
 <p class="text-sm text-gray-500">Monthly income</p>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">K1000</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
 </td>
 <td class="px-6 py-4 whitespace-nowrap">
 <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
 <button class="text-red-600 hover:text-red-900">Archive</button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </div>
 </div>
<!-- Settings -->
 <div class="bg-white rounded-lg shadow overflow-hidden mt-8">
 <div class="px-6 py-4 border-b">
 <h2 class="text-xl font-bold">Platform Settings</h2>
 </div>
 <div class="p-6">
 <div class="mb-4">
 <label class="block font-bold mb-2">Referral Commission Rates</label>
 <div class="grid grid-cols-3 gap-4">
 <div>
 <label class="block text-gray-700 mb-1">Level 1 (%)</label>
 <input type="number" value="5" class="w-full px-4 py-2 border rounded-lg">
 </div>
 <div>
 <label class="block text-gray-700 mb-1">Level 2 (%)</label>
 <input type="number" value="3" class="w-full px-4 py-2 border rounded-lg">
 </div>
 <div>
 <label class="block text-gray-700 mb-1">Level 3 (%)</label>
 <input type="number" value="1" class="w-full px-4 py-2 border rounded-lg">
 </div>
 </div>
 </div>
 <button class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">Save Settings</button>
 </div>
 </div>
 </div>
 </div>
<script>
 // Admin wallet functions
 function adminAddFunds() {
 const email = document.getElementById('addFundsEmail').value;
 const amount = parseFloat(document.getElementById('addFundsAmount').value);
 const reason = document.getElementById('addFundsReason').value;
if(!email || !amount || !reason) {
 alert('Please fill all fields');
 return;
 }
if(confirm(`Add K${amount} to ${email} for "${reason}"?`)) {
 // In real app, would make API call here
 alert(`Successfully added K${amount} to ${email}'s wallet`);
 document.getElementById('addFundsEmail').value = '';
 document.getElementById('addFundsAmount').value = '';
 document.getElementById('addFundsReason').value = '';
 }
 }
 function adminDeductFunds() {
 const email = document.getElementById('deductFundsEmail').value;
 const amount = parseFloat(document.getElementById('deductFundsAmount').value);
 const reason = document.getElementById('deductFundsReason').value;
if(!email || !amount || !reason) {
 alert('Please fill all fields');
 return;
 }
if(confirm(`Deduct K${amount} from ${email} for "${reason}"?`)) {
 // In real app, would make API call here
 alert(`Successfully deducted K${amount} from ${email}'s wallet`);
 document.getElementById('deductFundsEmail').value = '';
 document.getElementById('deductFundsAmount').value = '';
 document.getElementById('deductFundsReason').value = '';
 }
 }
 feather.replace();
// Admin functions
 function adminApproveTransaction(id, type) {
 // Update transaction status
 fetch(`/api/transactions/${id}/approve`, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
 },
 body: JSON.stringify({ type })
 })
 .then(response => response.json())
 .then(data => {
 if(data.success) {
 alert(`Successfully approved ${type} transaction`);
 location.reload();
 } else {
 alert(`Error: ${data.message}`);
 }
 })
 .catch(error => {
 console.error('Error:', error);
 alert('Failed to approve transaction');
 });
 }
 function adminRejectTransaction(id, type) {
 const reason = prompt("Enter rejection reason:");
 if(reason) {
 fetch(`/api/transactions/${id}/reject`, {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json',
 'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
 },
 body: JSON.stringify({ type, reason })
 })
 .then(response => response.json())
 .then(data => {
 if(data.success) {
 alert(`Transaction rejected: ${reason}`);
 location.reload();
 } else {
 alert(`Error: ${data.message}`);
 }
 })
 .catch(error => {
 console.error('Error:', error);
 alert('Failed to reject transaction');
 });
 }
 }
 // Logout
 document.getElementById('adminLogout').addEventListener('click', function() {
 localStorage.removeItem('adminToken');
 window.location.href = 'index.html';
 });
 // Check admin auth
 if(!localStorage.getItem('adminToken')) {
 window.location.href = 'index.html';
 }
 </script>
</body>
</html>