| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TaskTrack Triumph Dashboard</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <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> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 500: '#6366f1', |
| }, |
| secondary: { |
| 500: '#ec4899', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .glow-card { |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.3); |
| } |
| .data-table { |
| border-collapse: separate; |
| border-spacing: 0; |
| } |
| .data-table th { |
| position: sticky; |
| top: 0; |
| background-color: #f8fafc; |
| } |
| .data-table tr:last-child td { |
| border-bottom: none; |
| } |
| .animate-pulse-slow { |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="flex"> |
| |
| <div class="w-64 bg-white shadow-lg h-screen sticky top-0"> |
| <div class="p-6"> |
| <div class="flex items-center space-x-3"> |
| <i data-feather="check-circle" class="text-primary-500"></i> |
| <h1 class="text-xl font-bold text-gray-800">TaskTrack Triumph</h1> |
| </div> |
| </div> |
| <nav class="mt-6"> |
| <div> |
| <a href="#" class="flex items-center px-6 py-3 text-primary-500 bg-primary-50 border-l-4 border-primary-500"> |
| <i data-feather="bar-chart-2" class="w-5 h-5"></i> |
| <span class="mx-3 font-medium">Dashboard</span> |
| </a> |
| <a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-100"> |
| <i data-feather="list" class="w-5 h-5"></i> |
| <span class="mx-3 font-medium">Tasks</span> |
| </a> |
| <a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-100"> |
| <i data-feather="calendar" class="w-5 h-5"></i> |
| <span class="mx-3 font-medium">Calendar</span> |
| </a> |
| <a href="#" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-100"> |
| <i data-feather="settings" class="w-5 h-5"></i> |
| <span class="mx-3 font-medium">Settings</span> |
| </a> |
| </div> |
| </nav> |
| </div> |
|
|
| |
| <div class="flex-1 p-8"> |
| <header class="flex justify-between items-center mb-8"> |
| <h2 class="text-2xl font-bold text-gray-800">Dashboard Overview</h2> |
| <div class="flex space-x-4"> |
| <button class="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition flex items-center space-x-2"> |
| <i data-feather="plus" class="w-4 h-4"></i> |
| <span>New Task</span> |
| </button> |
| <button class="px-4 py-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center space-x-2"> |
| <i data-feather="filter" class="w-4 h-4"></i> |
| <span>Filter</span> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
| <div class="bg-white p-6 rounded-xl shadow-sm glow-card"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500">Total Tasks</p> |
| <h3 class="text-3xl font-bold mt-2">10</h3> |
| </div> |
| <div class="p-3 rounded-full bg-primary-50 text-primary-500"> |
| <i data-feather="check-square"></i> |
| </div> |
| </div> |
| <div class="mt-4 pt-4 border-t border-gray-100"> |
| <p class="text-sm text-gray-500 flex items-center"> |
| <span class="text-green-500 flex items-center"> |
| <i data-feather="arrow-up" class="w-4 h-4 mr-1"></i> |
| 100% |
| </span> |
| <span class="ml-2">completion rate</span> |
| </p> |
| </div> |
| </div> |
|
|
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500">Recent Activity</p> |
| <h3 class="text-3xl font-bold mt-2">3</h3> |
| </div> |
| <div class="p-3 rounded-full bg-secondary-50 text-secondary-500"> |
| <i data-feather="activity"></i> |
| </div> |
| </div> |
| <div class="mt-4 pt-4 border-t border-gray-100"> |
| <p class="text-sm text-gray-500 flex items-center"> |
| <span class="text-primary-500">last 24 hours</span> |
| </p> |
| </div> |
| </div> |
|
|
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500">Avg. Duration</p> |
| <h3 class="text-3xl font-bold mt-2">1s</h3> |
| </div> |
| <div class="p-3 rounded-full bg-yellow-50 text-yellow-500"> |
| <i data-feather="clock"></i> |
| </div> |
| </div> |
| <div class="mt-4 pt-4 border-t border-gray-100"> |
| <p class="text-sm text-gray-500">per task</p> |
| </div> |
| </div> |
|
|
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <p class="text-gray-500">Busiest Day</p> |
| <h3 class="text-3xl font-bold mt-2">Sep 28</h3> |
| </div> |
| <div class="p-3 rounded-full bg-green-50 text-green-500"> |
| <i data-feather="calendar"></i> |
| </div> |
| </div> |
| <div class="mt-4 pt-4 border-t border-gray-100"> |
| <p class="text-sm text-gray-500">3 tasks completed</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold text-gray-800">Completion Trend</h3> |
| <select class="bg-gray-100 border-0 text-sm rounded-lg px-3 py-1"> |
| <option>Last 7 days</option> |
| <option>Last 30 days</option> |
| <option>Last 90 days</option> |
| </select> |
| </div> |
| <div class="h-64"> |
| <canvas id="completionChart"></canvas> |
| </div> |
| </div> |
|
|
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-semibold text-gray-800">Task Distribution</h3> |
| <div class="flex space-x-2"> |
| <button class="bg-gray-100 border-0 text-sm rounded-lg px-3 py-1">Day</button> |
| <button class="bg-primary-500 text-white text-sm rounded-lg px-3 py-1">Week</button> |
| <button class="bg-gray-100 border-0 text-sm rounded-lg px-3 py-1">Month</button> |
| </div> |
| </div> |
| <div class="h-64"> |
| <canvas id="distributionChart"></canvas> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> |
| <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center"> |
| <h3 class="font-semibold text-gray-800">Recent Tasks</h3> |
| <div class="flex items-center space-x-2"> |
| <button class="p-2 rounded-lg hover:bg-gray-100"> |
| <i data-feather="refresh-cw" class="w-4 h-4 text-gray-500"></i> |
| </button> |
| <button class="p-2 rounded-lg hover:bg-gray-100"> |
| <i data-feather="download" class="w-4 h-4 text-gray-500"></i> |
| </button> |
| </div> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="w-full data-table"> |
| <thead> |
| <tr class="text-left text-gray-500 text-sm border-b border-gray-100"> |
| <th class="px-6 py-3 font-medium">Task ID</th> |
| <th class="px-6 py-3 font-medium">Status</th> |
| <th class="px-6 py-3 font-medium">Duration</th> |
| <th class="px-6 py-3 font-medium">Created</th> |
| <th class="px-6 py-3 font-medium">Completed</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-100"> |
| <tr class="hover:bg-gray-50 transition"> |
| <td class="px-6 py-4 text-sm font-medium text-gray-900 truncate max-w-xs">b7eec7a7-9285-4510-a8f0-abfdce5a8241</td> |
| <td class="px-6 py-4"> |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">completed</span> |
| </td> |
| <td class="px-6 py-4 text-sm text-gray-500">0s</td> |
| <td class="px-6 py-4 text-sm text-gray-500">2025-09-28 15:15:29</td> |
| <td class="px-6 py-4 text-sm text-gray-500">2025-09-28 15:15:29</td> |
| </tr> |
| <tr class="hover:bg-gray-50 transition"> |
| <td class="px-6 py-4 text-sm font-medium text-gray-900 truncate max-w-xs">0809cae3-6b01-4d81-8664-fa627d4d970e</td> |
| <td class="px-6 py-4"> |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">completed</span> |
| </td> |
| <td class="px-6 py-4 text-sm text-gray-500">1s</td> |
| <td class="px-6 py-4 text-sm text-gray-500">2025-09-28 15:15:28</td> |
| <td class="px-6 py-4 text-sm text-gray-500">2025-09-28 15:15:29</td> |
| </tr> |
| <tr class="hover:bg-gray-50 transition"> |
| <td class="px-6 py-4 text-sm font-medium text-gray-900 truncate max-w-xs">c179e1b7-537d-4e20-8ab2-221a7b746e4a</td> |
| <td class="px-6 py-4"> |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">completed</span> |
| </td> |
| <td class="px-6 py-4 text-sm text-gray-500">0s</td> |
| <td class="px-6 py-4 text-sm text-gray-500">2025-09-28 15:15:28</td> |
| <td class="px-6 py-4 text-sm text-gray-500">2025-09-28 15:15:28</td> |
| </tr> |
| <tr class="hover:bg-gray-50 transition"> |
| <td class="px-6 py-4 text-sm font-medium text-gray-900 truncate max-w-xs">06dcc918-e0f8-420a-aa20-a2352f34265d</td> |
| <td class="px-6 py-4"> |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">completed</span> |
| </td> |
| <td class="px-6 py-4 text-sm text-gray-500">1s</td> |
| <td class="px-6 py-4 text-sm text-gray-500">2025-09-25 08:35:36</td> |
| <td class="px-6 py-4 text-sm text-gray-500">2025-09-25 08:35:37</td> |
| </tr> |
| <tr class="hover:bg-gray-50 transition"> |
| <td class="px-6 py-4 text-sm font-medium text-gray-900 truncate max-w-xs">473b47b9-28cf-408a-ad38-7738d5172897</td> |
| <td class="px-6 py-4"> |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">completed</span> |
| </td> |
| <td class="px-6 py-4 text-sm text-gray-500">0s</td> |
| <td class="px-6 py-4 text-sm text-gray-500">2025-09-25 08:21:29</td> |
| <td class="px-6 py-4 text-sm text-gray-500">2025-09-25 08:21:29</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="px-6 py-4 border-t border-gray-100 flex justify-between items-center"> |
| <div class="text-sm text-gray-500"> |
| Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">10</span> results |
| </div> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 border border-gray-200 rounded-md text-sm disabled:text-gray-400 disabled:cursor-not-allowed" disabled> |
| Previous |
| </button> |
| <button class="px-3 py-1 bg-primary-500 text-white rounded-md text-sm"> |
| Next |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| const completionCtx = document.getElementById('completionChart').getContext('2d'); |
| const completionChart = new Chart(completionCtx, { |
| type: 'line', |
| data: { |
| labels: ['Sep 22', 'Sep 23', 'Sep 24', 'Sep 25', 'Sep 26', 'Sep 27', 'Sep 28'], |
| datasets: [{ |
| label: 'Tasks Completed', |
| data: [3, 0, 0, 3, 0, 0, 3], |
| backgroundColor: 'rgba(99, 102, 241, 0.1)', |
| borderColor: '#6366f1', |
| borderWidth: 2, |
| tension: 0.4, |
| fill: true |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| drawBorder: false |
| }, |
| ticks: { |
| stepSize: 1 |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| } |
| } |
| }); |
| |
| |
| const distributionCtx = document.getElementById('distributionChart').getContext('2d'); |
| const distributionChart = new Chart(distributionCtx, { |
| type: 'bar', |
| data: { |
| labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
| datasets: [{ |
| label: 'Tasks', |
| data: [0, 0, 3, 3, 0, 0, 3], |
| backgroundColor: '#6366f1', |
| borderRadius: 4 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| drawBorder: false |
| }, |
| ticks: { |
| stepSize: 1 |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| } |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
