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>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</head>12<body class="bg-gray-50 min-h-screen flex flex-col">13 <custom-navbar></custom-navbar>14 15 <main class="flex-1">16 <div class="container mx-auto px-4 py-8">17 <!-- Dashboard Header -->18 <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">19 <div>20 <h1 class="text-3xl font-bold text-gray-800">Project Dashboard</h1>21 <p class="text-gray-600">Manage your team's tasks and projects</p>22 </div>23 <div class="mt-4 md:mt-0 flex gap-3">24 <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg shadow transition duration-300 flex items-center">25 <i data-feather="plus" class="mr-2"></i> New Task26 </button>27 <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">28 <i data-feather="filter" class="mr-2"></i> Filter29 </button>30 </div>31 </div>32 33 <!-- Stats Cards -->34 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">35 <div class="bg-white p-6 rounded-xl shadow">36 <div class="flex items-center justify-between">37 <div>38 <p class="text-gray-500">Total Tasks</p>39 <h3 class="text-3xl font-bold mt-1">42</h3>40 </div>41 <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">42 <i data-feather="check-square"></i>43 </div>44 </div>45 </div>46 <div class="bg-white p-6 rounded-xl shadow">47 <div class="flex items-center justify-between">48 <div>49 <p class="text-gray-500">Completed</p>50 <h3 class="text-3xl font-bold mt-1">18</h3>51 </div>52 <div class="p-3 rounded-full bg-green-100 text-green-600">53 <i data-feather="check-circle"></i>54 </div>55 </div>56 </div>57 <div class="bg-white p-6 rounded-xl shadow">58 <div class="flex items-center justify-between">59 <div>60 <p class="text-gray-500">In Progress</p>61 <h3 class="text-3xl font-bold mt-1">12</h3>62 </div>63 <div class="p-3 rounded-full bg-blue-100 text-blue-600">64 <i data-feather="clock"></i>65 </div>66 </div>67 </div>68 <div class="bg-white p-6 rounded-xl shadow">69 <div class="flex items-center justify-between">70 <div>71 <p class="text-gray-500">Overdue</p>72 <h3 class="text-3xl font-bold mt-1">3</h3>73 </div>74 <div class="p-3 rounded-full bg-red-100 text-red-600">75 <i data-feather="alert-circle"></i>76 </div>77 </div>78 </div>79 </div>80 81 <!-- Task Board -->82 <div class="bg-white rounded-xl shadow overflow-hidden">83 <div class="p-4 border-b border-gray-200">84 <h2 class="text-xl font-semibold">Active Project: Website Redesign</h2>85 </div>86 87 <div class="grid grid-cols-1 md:grid-cols-3 gap-0 divide-x divide-gray-200">88 <!-- To Do Column -->89 <div class="task-column p-4 min-h-[500px]">90 <div class="flex items-center justify-between mb-4">91 <h3 class="font-medium text-gray-700 flex items-center">92 <span class="w-3 h-3 bg-gray-400 rounded-full mr-2"></span>93 To Do <span class="ml-2 text-sm bg-gray-100 px-2 py-0.5 rounded-full">5</span>94 </h3>95 <button class="text-gray-400 hover:text-gray-600">96 <i data-feather="plus" class="w-4 h-4"></i>97 </button>98 </div>99 100 <div class="space-y-4" id="todo-tasks">101 <!-- Task cards will be inserted here by JavaScript -->102 </div>103 </div>104 105 <!-- In Progress Column -->106 <div class="task-column p-4 min-h-[500px]">107 <div class="flex items-center justify-between mb-4">108 <h3 class="font-medium text-gray-700 flex items-center">109 <span class="w-3 h-3 bg-blue-400 rounded-full mr-2"></span>110 In Progress <span class="ml-2 text-sm bg-blue-100 px-2 py-0.5 rounded-full">3</span>111 </h3>112 <button class="text-gray-400 hover:text-gray-600">113 <i data-feather="plus" class="w-4 h-4"></i>114 </button>115 </div>116 117 <div class="space-y-4" id="inprogress-tasks">118 <!-- Task cards will be inserted here by JavaScript -->119 </div>120 </div>121 122 <!-- Done Column -->123 <div class="task-column p-4 min-h-[500px]">124 <div class="flex items-center justify-between mb-4">125 <h3 class="font-medium text-gray-700 flex items-center">126 <span class="w-3 h-3 bg-green-400 rounded-full mr-2"></span>127 Done <span class="ml-2 text-sm bg-green-100 px-2 py-0.5 rounded-full">2</span>128 </h3>129 <button class="text-gray-400 hover:text-gray-600">130 <i data-feather="plus" class="w-4 h-4"></i>131 </button>132 </div>133 134 <div class="space-y-4" id="done-tasks">135 <!-- Task cards will be inserted here by JavaScript -->136 </div>137 </div>138 </div>139 </div>140 </div>141 </main>142 143 <custom-footer></custom-footer>144 145 <script src="components/navbar.js"></script>146 <script src="components/footer.js"></script>147 <script src="script.js"></script>148 <script>149 feather.replace();150 151 // Load and render tasks152 document.addEventListener('DOMContentLoaded', async () => {153 const tasks = await loadTasks();154 155 tasks.forEach(task => {156 const taskCard = createTaskCard(task);157 let targetContainer;158 159 if (task.status === 'To Do') targetContainer = document.getElementById('todo-tasks');160 else if (task.status === 'In Progress') targetContainer = document.getElementById('inprogress-tasks');161 else if (task.status === 'Done') targetContainer = document.getElementById('done-tasks');162 163 if (targetContainer) {164 targetContainer.appendChild(taskCard);165 }166 });167 168 setupDragAndDrop();169 });170 171 function createTaskCard(task) {172 const card = document.createElement('div');173 card.className = 'task-card bg-white p-4 rounded-lg border border-gray-200 shadow-sm cursor-move draggable';174 card.draggable = true;175 176 let priorityBadgeClass = 'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ';177 switch(task.priority) {178 case 'Critical':179 priorityBadgeClass += 'bg-red-100 text-red-800';180 break;181 case 'High':182 priorityBadgeClass += 'bg-yellow-100 text-yellow-800';183 break;184 case 'Medium':185 priorityBadgeClass += 'bg-blue-100 text-blue-800';186 break;187 default:188 priorityBadgeClass += 'bg-gray-100 text-gray-800';189 }190 191 card.innerHTML = `192 <div class="flex justify-between items-start mb-2">193 <h4 class="font-medium text-gray-800">${task.title}</h4>194 <div class="flex items-center space-x-2">195 <span class="${priorityBadgeClass}">${task.priority}</span>196 <button class="text-gray-400 hover:text-gray-600">197 <i data-feather="more-vertical" class="w-4 h-4"></i>198 </button>199 </div>200 </div>201 <div class="flex items-center justify-between text-sm text-gray-500 mt-2">202 <span class="flex items-center">203 <i data-feather="user" class="w-3 h-3 mr-1"></i>204 ${task.assignee}205 </span>206 <span>Due: Tomorrow</span>207 </div>208 `;209 210 return card;211 }212 </script>213</body>214</html>