| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Admin Dashboard - TaskFlow Pro</title> |
| <link rel="icon" type="image/x-icon" href="/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| </head> |
| <body class="bg-gray-900 text-gray-100"> |
| <div class="flex h-screen"> |
| |
| <aside class="w-64 bg-gray-800 border-r border-gray-700"> |
| <div class="p-6 border-b border-gray-700"> |
| <div class="flex items-center gap-2"> |
| <div class="w-8 h-8 bg-primary-500 rounded-lg flex items-center justify-center"> |
| <i data-feather="layers" class="text-white"></i> |
| </div> |
| <span class="text-xl font-bold">TaskFlow Pro</span> |
| </div> |
| </div> |
| |
| <nav class="p-4"> |
| <ul class="space-y-2"> |
| <li> |
| <a href="#" class="flex items-center gap-3 px-3 py-2 bg-gray-700 text-primary-400 rounded-lg"> |
| <i data-feather="layout-dashboard" class="w-5 h-5"></i> |
| Dashboard |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center gap-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition-colors"> |
| <i data-feather="check-square" class="w-5 h-5"></i> |
| Tasks |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center gap-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition-colors"> |
| <i data-feather="users" class="w-5 h-5"></i> |
| Users |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center gap-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition-colors"> |
| <i data-feather="bar-chart-2" class="w-5 h-5"></i> |
| Analytics |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center gap-3 px-3 py-2 hover:bg-gray-700 rounded-lg transition-colors"> |
| <i data-feather="folder" class="w-5 h-5"></i> |
| Documents |
| </a> |
| </li> |
| </ul> |
| </nav> |
| </aside> |
|
|
| |
| <div class="flex-1 flex flex-col"> |
| |
| <header class="bg-gray-800 border-b border-gray-700 px-6 py-4"> |
| <div class="flex items-center justify-between"> |
| <h1 class="text-2xl font-bold">Admin Dashboard</h1> |
| <div class="flex items-center gap-4"> |
| <button class="p-2 hover:bg-gray-700 rounded-lg"> |
| <i data-feather="bell" class="w-5 h-5"></i> |
| </button> |
| <div class="flex items-center gap-2"> |
| <div class="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center text-sm font-medium"> |
| A |
| </div> |
| <span class="text-sm">Admin User</span> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 p-6 overflow-y-auto"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
| <div class="bg-gray-800 p-6 rounded-xl border border-gray-700"> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center"> |
| <i data-feather="users" class="text-white"></i> |
| </div> |
| <span class="text-sm text-green-400">+12%</span> |
| </div> |
| <h3 class="text-2xl font-bold mb-1">248</h3> |
| <p class="text-gray-400 text-sm">Total Users</p> |
| </div> |
| |
| <div class="bg-gray-800 p-6 rounded-xl border border-gray-700"> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center"> |
| <i data-feather="check-square" class="text-white"></i> |
| </div> |
| <span class="text-sm text-green-400">+8%</span> |
| </div> |
| <h3 class="text-2xl font-bold mb-1">1,429</h3> |
| <p class="text-gray-400 text-sm">Tasks Completed</p> |
| </div> |
| |
| <div class="bg-gray-800 p-6 rounded-xl border border-gray-700"> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center"> |
| <i data-feather="clock" class="text-white"></i> |
| </div> |
| <span class="text-sm text-red-400">-3%</span> |
| </div> |
| <h3 class="text-2xl font-bold mb-1">89</h3> |
| <p class="text-gray-400 text-sm">Pending Tasks</p> |
| </div> |
| |
| <div class="bg-gray-800 p-6 rounded-xl border border-gray-700"> |
| <div class="flex items-center justify-between mb-4"> |
| <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center"> |
| <i data-feather="trending-up" class="text-white"></i> |
| </div> |
| <span class="text-sm text-green-400">+15%</span> |
| </div> |
| <h3 class="text-2xl font-bold mb-1">92%</h3> |
| <p class="text-gray-400 text-sm">Productivity Rate</p> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
| <div class="bg-gray-800 p-6 rounded-xl border border-gray-700"> |
| <h3 class="text-xl font-semibold mb-4">Task Overview</h3> |
| <canvas id="taskChart" width="400" height="200"></canvas> |
| </div> |
| |
| <div class="bg-gray-800 p-6 rounded-xl border border-gray-700"> |
| <h3 class="text-xl font-semibold mb-4">User Activity</h3> |
| <canvas id="activityChart" width="400" height="200"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-800 rounded-xl border border-gray-700"> |
| <div class="p-6 border-b border-gray-700"> |
| <h3 class="text-xl font-semibold">Recent Activity</h3> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead class="bg-gray-700"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">User</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Action</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Time</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-700"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap">John Doe</td> |
| <td class="px-6 py-4 whitespace-nowrap">Completed task "Design Review"</td> |
| <td class="px-6 py-4 whitespace-nowrap">2 hours ago</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full bg-green-900 text-green-300">Completed</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap">Jane Smith</td> |
| <td class="px-6 py-4 whitespace-nowrap">Created new task "API Development"</td> |
| <td class="px-6 py-4 whitespace-nowrap">3 hours ago</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-900 text-yellow-300">Pending</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap">Mike Johnson</td> |
| <td class="px-6 py-4 whitespace-nowrap">Updated profile</td> |
| <td class="px-6 py-4 whitespace-nowrap">5 hours ago</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-900 text-blue-300">Updated</span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="script.js"></script> |
| <script> |
| |
| const ctx1 = document.getElementById('taskChart').getContext('2d'); |
| new Chart(ctx1, { |
| type: 'line', |
| data: { |
| labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
| datasets: [{ |
| label: 'Completed', |
| data: [12, 19, 3, 5, 2, 3, 9], |
| borderColor: 'rgb(34, 197, 94)', |
| backgroundColor: 'rgba(34, 197, 94, 0.1)', |
| tension: 0.1 |
| }, { |
| label: 'Pending', |
| data: [5, 8, 12, 6, 9, 4, 7], |
| borderColor: 'rgb(239, 68, 68)', |
| backgroundColor: 'rgba(239, 68, 68, 0.1)', |
| tension: 0.1 |
| }] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| labels: { color: '#e5e7eb' } |
| } |
| }, |
| scales: { |
| y: { |
| ticks: { color: '#9ca3af' }, |
| grid: { color: '#374151' } |
| }, |
| x: { |
| ticks: { color: '#9ca3af' }, |
| grid: { color: '#374151' } |
| } |
| } |
| } |
| }); |
| |
| const ctx2 = document.getElementById('activityChart').getContext('2d'); |
| new Chart(ctx2, { |
| type: 'bar', |
| data: { |
| labels: ['Admin', 'Manager', 'Employee'], |
| datasets: [{ |
| label: 'Active Users', |
| data: [12, 19, 45], |
| backgroundColor: [ |
| 'rgba(147, 51, 234, 0.8)', |
| 'rgba(59, 130, 246, 0.8)', |
| 'rgba(34, 197, 94, 0.8)' |
| ] |
| }] |
| }, |
| options: { |
| responsive: true, |
| plugins: { |
| legend: { |
| labels: { color: '#e5e7eb' } |
| } |
| }, |
| scales: { |
| y: { |
| ticks: { color: '#9ca3af' }, |
| grid: { color: '#374151' } |
| }, |
| x: { |
| ticks: { color: '#9ca3af' }, |
| grid: { color: '#374151' } |
| } |
| } |
| } |
| }); |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
