feat(ui): add settlement create, detail, edit and delete

src/lib/components/SettlementForm.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import type { PublicUser } from '$lib/domain/types';
+	import type { FieldErrors, SettlementField, SettlementFormValues } from '$lib/forms/types';
+	import FormError from './FormError.svelte';
+
+	let {
+		members,
+		currency,
+		values,
+		errors = {},
+		version,
+		submitLabel
+	}: {
+		members: PublicUser[];
+		currency: string;
+		values: SettlementFormValues;
+		errors?: FieldErrors<SettlementField>;
+		version?: number;
+		submitLabel: string;
+	} = $props();
+</script>
+
+<form method="POST" use:enhance class="space-y-4">
+	{#if version !== undefined}<input type="hidden" name="version" value={version} />{/if}
+
+	<div class="grid grid-cols-2 gap-3">
+		<div>
+			<label for="from">Who paid</label>
+			<select id="from" name="from" value={values.from}>
+				{#each members as m (m.id)}<option value={m.id}>{m.displayName}</option>{/each}
+			</select>
+			<FormError message={errors.from} />
+		</div>
+		<div>
+			<label for="to">Who received</label>
+			<select id="to" name="to" value={values.to}>
+				<option value="">Choose…</option>
+				{#each members as m (m.id)}<option value={m.id}>{m.displayName}</option>{/each}
+			</select>
+			<FormError message={errors.to} />
+		</div>
+	</div>
+
+	<div class="grid grid-cols-2 gap-3">
+		<div>
+			<label for="amount">Amount ({currency})</label>
+			<input
+				id="amount"
+				name="amount"
+				inputmode="decimal"
+				placeholder="0.00"
+				required
+				value={values.amount}
+			/>
+			<FormError message={errors.amount} />
+		</div>
+		<div>
+			<label for="date">Date</label>
+			<input id="date" name="date" type="date" required value={values.date} />
+			<FormError message={errors.date} />
+		</div>
+	</div>
+
+	<div>
+		<label for="note">Note (optional)</label>
+		<input id="note" name="note" maxlength="2000" value={values.note} />
+	</div>
+
+	<FormError message={errors.form} />
+	<button type="submit" class="w-full rounded-lg bg-green-700 py-3 font-semibold text-white"
+		>{submitLabel}</button
+	>
+</form>

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

@@ -0,0 +1,31 @@
+import { ConflictError, NotFoundError } from '$lib/server/ledger/errors';
+import { error, fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = ({ params, locals }) => {
+	const { ledger, users } = locals.app;
+	const settlement = ledger.getSettlement(params.id);
+	if (!settlement) error(404, 'Payment not found');
+	const name = (id: string) => users.byId(id)?.displayName ?? 'Unknown';
+	return {
+		settlement,
+		fromName: name(settlement.from),
+		toName: name(settlement.to),
+		revisions: ledger.history(settlement.id).length,
+		updatedByName: name(settlement.updatedBy)
+	};
+};
+
+export const actions: Actions = {
+	delete: async ({ params, request, locals }) => {
+		const version = Number((await request.formData()).get('version'));
+		try {
+			await locals.app.ledger.deleteSettlement(locals.user!.id, params.id, version);
+		} catch (e) {
+			if (e instanceof ConflictError) return fail(409, { conflict: true });
+			if (e instanceof NotFoundError) redirect(303, '/');
+			throw e;
+		}
+		redirect(303, '/');
+	}
+};

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { page } from '$app/state';
+	import MoneyText from '$lib/components/MoneyText.svelte';
+	import type { PageProps } from './$types';
+
+	let { data, form }: PageProps = $props();
+	const s = $derived(data.settlement);
+	const confirming = $derived(page.url.searchParams.has('confirm'));
+</script>
+
+<main class="space-y-6 p-4">
+	<header class="flex items-center gap-3">
+		<a href="/" class="text-gray-500" aria-label="Back">←</a>
+		<h1 class="flex-1 text-2xl font-bold">Payment</h1>
+		<a
+			href="/settlements/{s.id}/edit"
+			class="rounded-lg border border-gray-300 px-3 py-1 text-sm">Edit</a
+		>
+	</header>
+
+	<section class="rounded-xl bg-white p-4 shadow-sm">
+		<MoneyText cents={s.amountCents} currency={data.currency} class="block text-3xl font-bold" />
+		<p class="mt-1 text-gray-600">
+			<span class="font-medium">{data.fromName}</span> paid
+			<span class="font-medium">{data.toName}</span> on {s.date}
+		</p>
+		{#if s.note}<p class="mt-3 text-gray-800">{s.note}</p>{/if}
+	</section>
+
+	<p class="text-xs text-gray-500">
+		{data.revisions > 1 ? `Edited by ${data.updatedByName}, ${data.revisions} revisions` : 'Never edited'}
+	</p>
+
+	<section class="rounded-xl border border-red-200 p-4">
+		{#if form?.conflict}
+			<p class="mb-2 text-sm text-red-700" role="alert">
+				This payment was changed by someone else.
+				<a href="/settlements/{s.id}" class="underline" data-sveltekit-reload>Reload</a>.
+			</p>
+		{/if}
+		{#if !confirming}
+			<a href="?confirm" class="block text-center text-red-700">Delete payment</a>
+		{:else}
+			<form method="POST" action="?/delete" use:enhance class="flex gap-2">
+				<input type="hidden" name="version" value={s.version} />
+				<button type="submit" class="flex-1 rounded-lg bg-red-700 py-2 font-semibold text-white"
+					>Confirm delete</button
+				>
+				<a href="/settlements/{s.id}" class="flex-1 rounded-lg border border-gray-300 py-2 text-center"
+					>Cancel</a
+				>
+			</form>
+		{/if}
+	</section>
+</main>

src/routes/settlements/[id]/edit/+page.server.ts

@@ -0,0 +1,49 @@
+import { toPublicUser } from '$lib/domain/types';
+import {
+	buildSettlementBody,
+	readSettlementForm,
+	settlementToFormValues
+} from '$lib/server/forms/settlement-form';
+import { ConflictError, NotFoundError } from '$lib/server/ledger/errors';
+import { error, fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = ({ params, locals }) => {
+	const settlement = locals.app.ledger.getSettlement(params.id);
+	if (!settlement) error(404, 'Payment not found');
+	return {
+		settlement,
+		members: locals.app.users.activeMembers().map(toPublicUser),
+		values: settlementToFormValues(settlement)
+	};
+};
+
+export const actions: Actions = {
+	default: async ({ params, request, locals }) => {
+		const active = locals.app.users.activeMembers().map((u) => u.id);
+		const form = await request.formData();
+		const expectedVersion = Number(form.get('version'));
+		const values = readSettlementForm(form);
+		const built = buildSettlementBody(values, active);
+		if (!built.ok) return fail(400, { values, errors: built.errors });
+		try {
+			await locals.app.ledger.updateSettlement(
+				locals.user!.id,
+				params.id,
+				built.body,
+				expectedVersion
+			);
+		} catch (e) {
+			if (e instanceof ConflictError)
+				return fail(409, {
+					values,
+					errors: {
+						form: 'This payment was changed by someone else. Reload the page and re-apply your edit.'
+					}
+				});
+			if (e instanceof NotFoundError) redirect(303, '/');
+			throw e;
+		}
+		redirect(303, `/settlements/${params.id}`);
+	}
+};

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import SettlementForm from '$lib/components/SettlementForm.svelte';
+	import type { PageProps } from './$types';
+
+	let { data, form }: PageProps = $props();
+</script>
+
+<main class="p-4">
+	<header class="mb-4 flex items-center gap-3">
+		<a href="/settlements/{data.settlement.id}" class="text-gray-500" aria-label="Back">←</a>
+		<h1 class="text-2xl font-bold">Edit payment</h1>
+	</header>
+	<SettlementForm
+		members={data.members}
+		currency={data.currency}
+		values={form?.values ?? data.values}
+		errors={form?.errors ?? {}}
+		version={data.settlement.version}
+		submitLabel="Save changes"
+	/>
+</main>

src/routes/settlements/new/+page.server.ts

@@ -0,0 +1,25 @@
+import { toPublicUser } from '$lib/domain/types';
+import { today } from '$lib/server/forms/form-utils';
+import {
+	buildSettlementBody,
+	readSettlementForm,
+	settlementFormFromQuery
+} from '$lib/server/forms/settlement-form';
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = ({ locals, url }) => ({
+	members: locals.app.users.activeMembers().map(toPublicUser),
+	values: settlementFormFromQuery(url.searchParams, locals.user!.id, today())
+});
+
+export const actions: Actions = {
+	default: async ({ request, locals }) => {
+		const active = locals.app.users.activeMembers().map((u) => u.id);
+		const values = readSettlementForm(await request.formData());
+		const built = buildSettlementBody(values, active);
+		if (!built.ok) return fail(400, { values, errors: built.errors });
+		const s = await locals.app.ledger.createSettlement(locals.user!.id, built.body);
+		redirect(303, `/settlements/${s.id}`);
+	}
+};

src/routes/settlements/new/+page.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import SettlementForm from '$lib/components/SettlementForm.svelte';
+	import type { PageProps } from './$types';
+
+	let { data, form }: PageProps = $props();
+</script>
+
+<main class="p-4">
+	<header class="mb-4 flex items-center gap-3">
+		<a href="/balances" class="text-gray-500" aria-label="Back">←</a>
+		<h1 class="text-2xl font-bold">Record a payment</h1>
+	</header>
+	<SettlementForm
+		members={data.members}
+		currency={data.currency}
+		values={form?.values ?? data.values}
+		errors={form?.errors ?? {}}
+		submitLabel="Save payment"
+	/>
+</main>