| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Admin Dashboard | WealthHack</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| .gradient-bg { |
| background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%); |
| } |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| .card-hover:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| </style> |
| </head> |
| <body class="flex h-screen bg-gray-100"> |
| <div class="flex h-screen overflow-hidden w-full"> |
| |
| <div class="sidebar hidden md:flex md:flex-shrink-0"> |
| <div class="flex flex-col w-64 bg-white border-r border-gray-200"> |
| <div class="h-0 flex-1 flex flex-col pt-5 pb-4 overflow-y-auto"> |
| <div class="flex items-center flex-shrink-0 px-4"> |
| <div class="gradient-bg text-white p-2 rounded-lg"> |
| <i data-feather="file-text" class="w-6 h-6"></i> |
| </div> |
| <span class="ml-3 text-xl font-bold text-gray-900">WealthHack</span> |
| </div> |
| <nav class="mt-5 flex-1 px-2 space-y-1"> |
| <a href="admin-dashboard.html" class="bg-gray-100 text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"> |
| <i data-feather="home" class="text-gray-500 mr-3 flex-shrink-0 h-6 w-6"></i> |
| Admin Dashboard |
| </a> |
| <a href="business.html" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"> |
| <i data-feather="briefcase" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"></i> |
| Business |
| </a> |
| <a href="users.html" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"> |
| <i data-feather="users" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"></i> |
| Users |
| </a> |
| <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"> |
| <i data-feather="bar-chart-2" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"></i> |
| Analytics |
| </a> |
| <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"> |
| <i data-feather="settings" class="text-gray-400 group-hover:text-gray-500 mr-3 flex-shrink-0 h-6 w-6"></i> |
| Settings |
| </a> |
| </nav> |
| </div> |
| <div class="flex-shrink-0 flex border-t border-gray-200 p-4"> |
| <div class="flex items-center"> |
| <div> |
| <img class="inline-block h-9 w-9 rounded-full" src="http://static.photos/people/200x200/5" alt=""> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-700">Admin User</p> |
| <p class="text-xs font-medium text-gray-500">Administrator</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="flex flex-col w-0 flex-1 overflow-hidden"> |
| |
| <div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3"> |
| <button class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500"> |
| <i data-feather="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
|
|
| <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none"> |
| <div class="py-6"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8"> |
| <div class="flex justify-between items-center"> |
| <h1 class="text-2xl font-semibold text-gray-900">Admin Dashboard</h1> |
| <div class="flex items-center space-x-4"> |
| <div class="relative inline-block text-left"> |
| <div> |
| <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500" id="profile-menu" aria-expanded="false" aria-haspopup="true"> |
| Administrator |
| <i data-feather="chevron-down" class="-mr-1 ml-2 h-5 w-5"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8 mt-8"> |
| |
| <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4"> |
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <div class="gradient-bg text-white p-3 rounded-lg"> |
| <i data-feather="users" class="w-6 h-6"></i> |
| </div> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <dl> |
| <dt class="text-sm font-medium text-gray-500 truncate"> |
| Total Users |
| </dt> |
| <dd> |
| <div class="text-lg font-medium text-gray-900"> |
| 1,248 |
| </div> |
| </dd> |
| </dl> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <div class="bg-blue-500 text-white p-3 rounded-lg"> |
| <i data-feather="briefcase" class="w-6 h-6"></i> |
| </div> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <dl> |
| <dt class="text-sm font-medium text-gray-500 truncate"> |
| Active Businesses |
| </dt> |
| <dd> |
| <div class="text-lg font-medium text-gray-900"> |
| 342 |
| </div> |
| </dd> |
| </dl> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <div class="bg-emerald-500 text-white p-3 rounded-lg"> |
| <i data-feather="dollar-sign" class="w-6 h-6"></i> |
| </div> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <dl> |
| <dt class="text-sm font-medium text-gray-500 truncate"> |
| Revenue |
| </dt> |
| <dd> |
| <div class="text-lg font-medium text-gray-900"> |
| R245,678 |
| </div> |
| </dd> |
| </dl> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white overflow-hidden shadow rounded-lg card-hover"> |
| <div class="p-5"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <div class="bg-purple-500 text-white p-3 rounded-lg"> |
| <i data-feather="file-text" class="w-6 h-6"></i> |
| </div> |
| </div> |
| <div class="ml-5 w-0 flex-1"> |
| <dl> |
| <dt class="text-sm font-medium text-gray-500 truncate"> |
| Reports Generated |
| </dt> |
| <dd> |
| <div class="text-lg font-medium text-gray-900"> |
| 5,892 |
| </div> |
| </dd> |
| </dl> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-8 grid grid-cols-1 gap-5 lg:grid-cols-2"> |
| <div class="bg-white overflow-hidden shadow rounded-lg"> |
| <div class="px-4 py-5 sm:p-6"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">User Growth</h3> |
| <div class="mt-2"> |
| <img src="http://static.photos/technology/640x360/3" alt="User growth chart" class="w-full"> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white overflow-hidden shadow rounded-lg"> |
| <div class="px-4 py-5 sm:p-6"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Revenue Overview</h3> |
| <div class="mt-2"> |
| <img src="http://static.photos/technology/640x360/4" alt="Revenue chart" class="w-full"> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-8"> |
| <div class="sm:flex sm:items-center"> |
| <div class="sm:flex-auto"> |
| <h1 class="text-xl font-semibold text-gray-900">Recent Activity</h1> |
| <p class="mt-2 text-sm text-gray-700">Latest actions performed on the platform</p> |
| </div> |
| </div> |
| <div class="mt-8 flex flex-col"> |
| <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8"> |
| <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8"> |
| <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg"> |
| <table class="min-w-full divide-y divide-gray-300"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">User</th> |
| <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Action</th> |
| <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Time</th> |
| <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-200 bg-white"> |
| <tr> |
| <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">John Smith</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Generated income statement</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">2 mins ago</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-emerald-600">Completed</td> |
| </tr> |
| <tr> |
| <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Sarah Johnson</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Uploaded bank statement</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">15 mins ago</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-emerald-600">Processed</td> |
| </tr> |
| <tr> |
| <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Acme Corp</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Created new business profile</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">1 hour ago</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-blue-600">Pending Review</td> |
| </tr> |
| <tr> |
| <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Mike Williams</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Exported tax summary</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">3 hours ago</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-emerald-600">Completed</td> |
| </tr> |
| <tr> |
| <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">Tech Solutions Ltd</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Updated payroll information</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">5 hours ago</td> |
| <td class="whitespace-nowrap px-3 py-4 text-sm text-emerald-600">Saved</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
| |
| <button onclick="topFunction()" id="backToTopBtn" class="fixed bottom-6 right-6 p-3 rounded-full gradient-bg text-white shadow-lg transition-opacity duration-300 opacity-0 invisible"> |
| <i data-feather="arrow-up" class="w-5 h-5"></i> |
| </button> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| const backToTopBtn = document.getElementById("backToTopBtn"); |
| |
| window.onscroll = function() { |
| if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { |
| backToTopBtn.classList.remove("opacity-0", "invisible"); |
| backToTopBtn.classList.add("opacity-100"); |
| } else { |
| backToTopBtn.classList.add("opacity-0", "invisible"); |
| backToTopBtn.classList.remove("opacity-100"); |
| } |
| }; |
| |
| function topFunction() { |
| window.scrollTo({top: 0, behavior: 'smooth'}); |
| } |
| </script> |
| </body> |
| </html> |
