| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>User Management | Lumikiza</title> |
| | <link rel="stylesheet" href="style.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | </head> |
| | <body class="bg-gray-50"> |
| | <admin-sidebar></admin-sidebar> |
| | <custom-navbar></custom-navbar> |
| | |
| | <main class="ml-80 py-12"> |
| | <div class="container mx-auto px-4"> |
| | <h1 class="text-3xl font-bold text-gray-900 mb-8">User Management</h1> |
| | |
| | |
| | <div class="bg-white rounded-xl shadow-sm p-6 mb-8"> |
| | <div class="flex flex-col md:flex-row gap-4 items-center justify-between"> |
| | <div class="flex-1"> |
| | <input type="text" placeholder="Search users by name, email, or business..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| | </div> |
| | <div class="flex gap-2"> |
| | <select class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| | <option value="">All Roles</option> |
| | <option value="founder">Founder</option> |
| | <option value="advisor">Advisor</option> |
| | </select> |
| | <select class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| | <option value="">All Status</option> |
| | <option value="pending">Pending</option> |
| | <option value="active">Active</option> |
| | <option value="suspended">Suspended</option> |
| | </select> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div class="bg-white rounded-xl shadow-sm overflow-hidden"> |
| | <table class="w-full"> |
| | <thead class="bg-gray-50"> |
| | <tr> |
| | <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"> |
| | Role |
| | </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"> |
| | Registration Date |
| | </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="divide-y divide-gray-200"> |
| | <tr> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <img src="http://static.photos/people/200x200/1" alt="User" class="w-10 h-10 rounded-full mr-4"> |
| | <div> |
| | <div class="text-sm font-medium text-gray-900">Musonda Chisha</div> |
| | <div class="text-sm text-gray-500">musonda@agritech.co.zm</div> |
| | </div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Founder</span> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">Founder</span> |
| | </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"> |
| | <span class="text-sm text-gray-900">2025-01-15</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">Suspend</button> |
| | </td> |
| | </tr> |
| | <tr> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <div class="flex items-center"> |
| | <img src="http://static.photos/people/200x200/2" alt="User" class="w-10 h-10 rounded-full mr-4"> |
| | <div> |
| | <div class="text-sm font-medium text-gray-900">Dr. James Mwansa</div> |
| | <div class="text-sm text-gray-500">james@techadvisor.zm</div> |
| | </div> |
| | </div> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">Advisor</span> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Advisor</span> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <span class="text-sm text-gray-900">2025-01-18</span> |
| | </td> |
| | <td class="px-6 py-4 whitespace-nowrap"> |
| | <span class="text-sm text-gray-900">2025-01-18</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">Suspend</button> |
| | </td> |
| | </tr> |
| | </tbody> |
| | </table> |
| | </div> |
| | </main> |
| |
|
| | <custom-footer></custom-footer> |
| | <script src="components/admin-sidebar.js"></script> |
| | <script src="components/navbar.js"></script> |
| | <script src="components/footer.js"></script> |
| | <script src="components/notification-bell.js"></script> |
| | <script src="script.js"></script> |
| | <script> |
| | feather.replace(); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', function() { |
| | const adminData = JSON.parse(localStorage.getItem('currentUser')); |
| | if (adminData && adminData.role === 'admin') { |
| | document.getElementById('adminName').textContent = adminData.fullName || 'Admin'; |
| | } else { |
| | window.location.href = '/'; |
| | } |
| | }); |
| | </script> |
| | </body> |
| | </html> |
