show values and edit

src/lib/components/NavigateBackButton.svelte

@@ -1,3 +1,8 @@
-<button class="link-hover link link-primary" onclick={() => history.back()}>
-	&larr; Go back
-</button>
+<script>
+	import { goto } from '$app/navigation';
+	const { backUrl } = $props();
+</script>
+
+<div>
+	<button class="link-hover link link-primary" onclick={() => goto(backUrl)}>&larr; Go back</button>
+</div>

src/routes/[id]/+page.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import HabitActivityHistory from '$lib/components/HabitActivityHistory.svelte';
+	import NavigateBackButton from '$lib/components/NavigateBackButton.svelte';
 	import type { PageData } from './$types';
 
 	let { data }: { data: PageData } = $props();
 	let deleteModal: HTMLDialogElement;
 </script>
 
+<div class="mb-3">
+	<NavigateBackButton backUrl="/" />
+</div>
+
 <h2 class="mb-3 text-3xl">{data.habit?.name}</h2>
 <div class="grid gap-x-3 text-start text-xs">
 	<p class="text-neutral-400">Created:</p>
@@ -19,7 +24,8 @@
 	</p>
 </div>
 
-<div class="my-6 flex flex-row">
+<div class="my-6 flex flex-row gap-3">
+	<a href="/{data.habit.id}/values" class="btn btn-outline btn-error btn-xs">Show Values</a>
 	<button class="btn btn-error btn-xs" onclick={() => deleteModal.showModal()}>Delete</button>
 </div>
 

src/routes/[id]/values/+page.server.ts

@@ -0,0 +1,52 @@
+import { getHabitForUser, updateDates } from '$lib/server/habit';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import type { Actions } from '../$types';
+import { Prisma } from '@prisma/client';
+
+export const load: PageServerLoad = async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/');
+	}
+
+	const habit = await getHabitForUser(event.params.id, event.locals.user.id);
+
+	if (habit === null) {
+		return redirect(302, '/');
+	}
+
+	return { habit: habit };
+};
+
+export const actions: Actions = {
+	delete: async (event) => {
+		if (!event.locals.user) {
+			return redirect(302, '/');
+		}
+
+		let habit = await getHabitForUser(event.params.id, event.locals.user.id);
+
+		if (habit === null) {
+			return redirect(302, '/');
+		}
+
+		const formData = await event.request.formData();
+		const date = formData.get('date') as string;
+
+		if (!date) {
+			return redirect(302, `/${event.params.id}/values`);
+		}
+
+		if (habit && habit.dates && typeof habit.dates === 'object' && Array.isArray(habit.dates)) {
+			const dates = habit.dates as Prisma.JsonArray;
+			const indexOfDate = dates.indexOf(date);
+
+			if (indexOfDate !== -1) {
+				dates.splice(indexOfDate, 1);
+				habit = await updateDates(event.params.id, event.locals.user.id, dates as string[]);
+			}
+		}
+
+		redirect(302, `/${event.params.id}/values`);
+	}
+};

src/routes/[id]/values/+page.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import NavigateBackButton from '$lib/components/NavigateBackButton.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+</script>
+
+<div class="mb-3">
+	<NavigateBackButton backUrl="/{data.habit.id}" />
+</div>
+
+<h2 class="mb-3 text-3xl">{data.habit?.name}</h2>
+<div class="max-w-lg overflow-x-auto">
+	<table class="table table-xs">
+		<thead>
+			<tr>
+				<th>Date</th>
+				<th>Action</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each data.habit?.dates as date}
+				<tr>
+					<td>{date}</td>
+					<td>
+						<form method="POST" action="?/delete">
+							<input type="hidden" name="date" value={date} />
+							<button class="btn btn-outline btn-error btn-xs">Delete</button>
+						</form>
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>

src/routes/create/+layout.svelte

@@ -3,10 +3,8 @@
 	let { children } = $props();
 </script>
 
-<div>
-	<div class="mb-3">
-		<NavigateBackButton backUrl="/" />
-	</div>
-
-	{@render children()}
+<div class="mb-3">
+	<NavigateBackButton backUrl="/" />
 </div>
+
+{@render children()}