fix: use drizzle

packages/web/src/routes/+page.server.ts

@@ -1,5 +1,4 @@
-// import { db } from '$lib/db/db.server';
-// import { myTable } from '$lib/db/schema';
+// import { myTable, db } from '$lib/db/schema';
 import type { PageServerLoad } from './$types';
 
 export const load = (async () => {

packages/web/src/routes/progress/+page.server.ts

@@ -1,5 +1,7 @@
+import { db, tasks } from "$lib/db/schema"
+
 export const load = async () => {
 	return {
-		tasks: []
+		tasks: await db.select().from(tasks)
 	}
 }

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

@@ -2,7 +2,13 @@
 	let { data } = $props();
 </script>
 
-<h1 class="font-bold text-xl text-center m-4">Tasks ({data.tasks.length})</h1>
+<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>
+	</a>
+</div>
+
 <table>
 	<thead>
 		<tr>
@@ -15,9 +21,9 @@
 	<tbody>
 		{#each data.tasks as task}
 			<tr>
-				<td></td>
-				<td></td>
-				<td></td>
+				<td>{task.id}</td>
+				<td>{task.name}</td>
+				<td>{task.progress}</td>
 				<td><button>Delete</button></td>
 			</tr>
 		{/each}</tbody

packages/web/src/routes/progress/create/+page.server.ts

@@ -0,0 +1,12 @@
+import { db, tasks } from "$lib/db/schema"
+import { redirect } from "@sveltejs/kit"
+
+export const actions = {
+	default: async ({ request }) => {
+		const data = await request.formData()
+
+		await db.insert(tasks).values({ name: data.get('name') })
+
+		redirect(303, '/progress')
+	}
+}

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

@@ -0,0 +1,10 @@
+<form method="post" class="flex flex-col items-center gap-4">
+	<h1 class="font-bold text-xl mt-8 mb-4">Create Task</h1>
+
+	<div class="flex gap-4">
+		<label for="name">Name: </label>
+		<input type="text" id="name" class="border rounded" />
+	</div>
+
+	<button class="px-4 py-2 rounded bg-green-500 m-4">Submit</button>
+</form>