feat: tasks table

packages/web/src/routes/progress/+page.svelte

@@ -2,45 +2,64 @@
 	let { data } = $props();
 </script>
 
-<div class="flex justify-center items-center">
-	<h1 class="font-bold text-xl text-center m-4">Tasks ({data.tasks.length})</h1>
-	<a href={'/progress/create'}>
-		<button class="px-4 py-2 rounded bg-green-500">Create</button>
+<div class="flex flex-col items-center p-4">
+	<div class="w-full max-w-4xl flex justify-center gap-8 items-center mt-4 mb-8">
+		<h1 class="font-bold text-2xl">
+			Tasks ({data.tasks.length})
+		</h1>
+		<a href="/progress/create">
+			<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition">
+				Create
+			</button>
 		</a>
-</div>
+	</div>
 
-<table>
+	{#if data.tasks.length > 0}
+		<div class="overflow-x-auto w-full">
+			<table class="min-w-full bg-white border border-gray-200">
 				<thead>
-		<tr>
-			<th>ID</th>
-			<th>Name</th>
-			<th>Progress</th>
-			<th>Actions</th>
+					<tr class="bg-gray-100">
+						<th class="px-6 py-3 border-b text-left text-sm font-semibold text-gray-700">Name</th>
+						<th class="px-6 py-3 border-b text-left text-sm font-semibold text-gray-700">Type</th>
+						<th class="px-6 py-3 border-b text-left text-sm font-semibold text-gray-700"
+							>Progress</th
+						>
+						<th class="px-6 py-3 border-b text-left text-sm font-semibold text-gray-700">Actions</th
+						>
 					</tr>
 				</thead>
 				<tbody>
-		{#each data.tasks as task}
-			<tr>
-				<td>
-					<a href={'/progress/' + task.id}>
-						{task.id}
-					</a>
-				</td><td>
-					<a href={'/progress/' + task.id}>
+					{#each data.tasks as task, index}
+						<tr class="{index % 2 === 0 ? 'bg-white' : 'bg-gray-50'} hover:bg-gray-200">
+							<td class="px-6 py-2 border-b">
+								<a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
 									{task.name}
 								</a>
 							</td>
-				<td>
-					<a href={'/progress/' + task.id}>
-						{task.progress}
+							<td class="px-6 py-2 border-b">
+								<a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
+									{task.type}
 								</a>
 							</td>
-				<td>
-					<a href={'/progress/' + task.id}>
-						<button>Delete</button>
-					</a>
+
+							<td class="px-6 py-2 border-b">
+								{task.progress}%
+							</td>
+							<td class="px-6 py-2 border-b">
+								<button
+									onclick={() => {}}
+									class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition"
+									aria-label={`Delete task ${task.name}`}
+								>
+									Delete
+								</button>
 							</td>
 						</tr>
-		{/each}</tbody
-	>
-</table>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	{:else}
+		<p class="text-gray-500">No tasks available. Click "Create" to add a new task.</p>
+	{/if}
+</div>