EhsonKH/tasktamer-jira-inspired-task-wizardry
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Project Dashboard | TaskTamer</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>12</head>13<body class="bg-gray-50 min-h-screen flex flex-col">14 <custom-navbar></custom-navbar>15 16 <main class="flex-1">17 <div class="container mx-auto px-4 py-8">18 <!-- Dashboard Header -->19 <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">20 <div>21 <h1 class="text-3xl font-bold text-gray-800">Project Analytics</h1>22 <p class="text-gray-600">Performance metrics and insights for Website Redesign</p>23 </div>24 <div class="flex gap-3">25 <button class="bg-white hover:bg-gray-100 text-gray-800 font-medium py-2 px-4 rounded-lg shadow transition duration-300 flex items-center border border-gray-200">26 <i data-feather="download" class="mr-2"></i> Export27 </button>28 <select class="bg-white border border-gray-300 text-gray-700 py-2 px-4 rounded-lg shadow focus:outline-none focus:ring-2 focus:ring-indigo-500">29 <option>Last 7 Days</option>30 <option>Last 30 Days</option>31 <option>Last 90 Days</option>32 <option selected>All Time</option>33 </select>34 </div>35 </div>36 37 <!-- Stats Overview -->38 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">39 <div class="bg-white p-6 rounded-xl shadow">40 <div class="flex items-center justify-between">41 <div>42 <p class="text-gray-500">Completion Rate</p>43 <h3 class="text-3xl font-bold mt-1">82%</h3>44 <p class="text-sm text-green-600 mt-1 flex items-center">45 <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>46 <span>+12% from last month</span>47 </p>48 </div>49 <div class="p-3 rounded-full bg-green-100 text-green-600">50 <i data-feather="check-circle"></i>51 </div>52 </div>53 </div>54 <div class="bg-white p-6 rounded-xl shadow">55 <div class="flex items-center justify-between">56 <div>57 <p class="text-gray-500">Tasks Completed</p>58 <h3 class="text-3xl font-bold mt-1">42</h3>59 <p class="text-sm text-green-600 mt-1 flex items-center">60 <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>61 <span>+8 from last week</span>62 </p>63 </div>64 <div class="p-3 rounded-full bg-blue-100 text-blue-600">65 <i data-feather="list"></i>66 </div>67 </div>68 </div>69 <div class="bg-white p-6 rounded-xl shadow">70 <div class="flex items-center justify-between">71 <div>72 <p class="text-gray-500">Avg. Task Time</p>73 <h3 class="text-3xl font-bold mt-1">3.2d</h3>74 <p class="text-sm text-red-600 mt-1 flex items-center">75 <i data-feather="trending-down" class="w-4 h-4 mr-1"></i>76 <span>-0.5d from last week</span>77 </p>78 </div>79 <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">80 <i data-feather="clock"></i>81 </div>82 </div>83 </div>84 <div class="bg-white p-6 rounded-xl shadow">85 <div class="flex items-center justify-between">86 <div>87 <p class="text-gray-500">Team Productivity</p>88 <h3 class="text-3xl font-bold mt-1">76%</h3>89 <p class="text-sm text-green-600 mt-1 flex items-center">90 <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>91 <span>+9% from last week</span>92 </p>93 </div>94 <div class="p-3 rounded-full bg-purple-100 text-purple-600">95 <i data-feather="users"></i>96 </div>97 </div>98 </div>99 </div>100 101 <!-- Main Charts -->102 <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">103 <div class="bg-white p-6 rounded-xl shadow">104 <div class="flex items-center justify-between mb-6">105 <h2 class="text-lg font-semibold">Task Completion Trend</h2>106 <button class="text-gray-400 hover:text-gray-600">107 <i data-feather="more-vertical" class="w-5 h-5"></i>108 </button>109 </div>110 <canvas id="completionChart" height="250"></canvas>111 </div>112 <div class="bg-white p-6 rounded-xl shadow">113 <div class="flex items-center justify-between mb-6">114 <h2 class="text-lg font-semibold">Task Distribution by Status</h2>115 <button class="text-gray-400 hover:text-gray-600">116 <i data-feather="more-vertical" class="w-5 h-5"></i>117 </button>118 </div>119 <canvas id="statusChart" height="250"></canvas>120 </div>121 </div>122 123 <!-- Team Performance -->124 <div class="bg-white rounded-xl shadow overflow-hidden mb-8">125 <div class="p-6 border-b border-gray-200">126 <h2 class="text-lg font-semibold">Team Performance</h2>127 </div>128 <div class="p-6">129 <div class="overflow-x-auto">130 <table class="min-w-full divide-y divide-gray-200">131 <thead class="bg-gray-50">132 <tr>133 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Member</th>134 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tasks Completed</th>135 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg. Time</th>136 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Productivity</th>137 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rating</th>138 </tr>139 </thead>140 <tbody class="bg-white divide-y divide-gray-200">141 <tr>142 <td class="px-6 py-4 whitespace-nowrap">143 <div class="flex items-center">144 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">145 <i data-feather="user" class="text-gray-600"></i>146 </div>147 <div class="ml-3">148 <div class="text-sm font-medium text-gray-900">Alex Johnson</div>149 <div class="text-sm text-gray-500">Lead Designer</div>150 </div>151 </div>152 </td>153 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">12</td>154 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2.8d</td>155 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">156 <div class="w-full bg-gray-200 rounded-full h-2">157 <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>158 </div>159 </td>160 <td class="px-6 py-4 whitespace-nowrap">161 <div class="flex items-center text-yellow-400">162 <i data-feather="star" class="w-4 h-4 fill-current"></i>163 <i data-feather="star" class="w-4 h-4 fill-current"></i>164 <i data-feather="star" class="w-4 h-4 fill-current"></i>165 <i data-feather="star" class="w-4 h-4 fill-current"></i>166 <i data-feather="star" class="w-4 h-4"></i>167 </div>168 </td>169 </tr>170 <tr>171 <td class="px-6 py-4 whitespace-nowrap">172 <div class="flex items-center">173 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">174 <i data-feather="user" class="text-gray-600"></i>175 </div>176 <div class="ml-3">177 <div class="text-sm font-medium text-gray-900">Sam Wilson</div>178 <div class="text-sm text-gray-500">Front-end Developer</div>179 </div>180 </div>181 </td>182 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">15</td>183 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3.1d</td>184 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">185 <div class="w-full bg-gray-200 rounded-full h-2">186 <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div>187 </div>188 </td>189 <td class="px-6 py-4 whitespace-nowrap">190 <div class="flex items-center text-yellow-400">191 <i data-feather="star" class="w-4 h-4 fill-current"></i>192 <i data-feather="star" class="w-4 h-4 fill-current"></i>193 <i data-feather="star" class="w-4 h-4 fill-current"></i>194 <i data-feather="star" class="w-4 h-4 fill-current"></i>195 <i data-feather="star" class="w-4 h-4"></i>196 </div>197 </td>198 </tr>199 <tr>200 <td class="px-6 py-4 whitespace-nowrap">201 <div class="flex items-center">202 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">203 <i data-feather="user" class="text-gray-600"></i>204 </div>205 <div class="ml-3">206 <div class="text-sm font-medium text-gray-900">Taylor Swift</div>207 <div class="text-sm text-gray-500">Marketing Specialist</div>208 </div>209 </div>210 </td>211 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">8</td>212 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">3.5d</td>213 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">214 <div class="w-full bg-gray-200 rounded-full h-2">215 <div class="bg-green-500 h-2 rounded-full" style="width: 65%"></div>216 </div>217 </td>218 <td class="px-6 py-4 whitespace-nowrap">219 <div class="flex items-center text-yellow-400">220 <i data-feather="star" class="w-4 h-4 fill-current"></i>221 <i data-feather="star" class="w-4 h-4 fill-current"></i>222 <i data-feather="star" class="w-4 h-4 fill-current"></i>223 <i data-feather="star" class="w-4 h-4"></i>224 <i data-feather="star" class="w-4 h-4"></i>225 </div>226 </td>227 </tr>228 </tbody>229 </table>230 </div>231 </div>232 </div>233 </div>234 </main>235 236 <custom-footer></custom-footer>237 238 <script src="components/navbar.js"></script>239 <script src="components/footer.js"></script>240 <script src="script.js"></script>241 <script>242 feather.replace();243 244 // Initialize charts245 document.addEventListener('DOMContentLoaded', () => {246 // Completion Trend Chart247 const completionCtx = document.getElementById('completionChart').getContext('2d');248 new Chart(completionCtx, {249 type: 'line',250 data: {251 labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7'],252 datasets: [{253 label: 'Tasks Completed',254 data: [5, 8, 12, 15, 22, 28, 42],255 borderColor: '#6366f1',256 backgroundColor: 'rgba(99, 102, 241, 0.1)',257 tension: 0.3,258 fill: true259 }]260 },261 options: {262 responsive: true,263 plugins: {264 legend: {265 display: false266 }267 }268 }269 });270 271 // Task Status Chart272 const statusCtx = document.getElementById('statusChart').getContext('2d');273 new Chart(statusCtx, {274 type: 'doughnut',275 data: {276 labels: ['Completed', 'In Progress', 'Not Started', 'Blocked'],277 datasets: [{278 data: [42, 15, 8, 3],279 backgroundColor: [280 '#10b981',281 '#3b82f6',282 '#f59e0b',283 '#ef4444'284 ],285 borderWidth: 0286 }]287 },288 options: {289 responsive: true,290 plugins: {291 legend: {292 position: 'right'293 }294 }295 }296 });297 });298 </script>299</body>300</html>