feat(ui): add balances page with simplified debts and settle-up links

src/routes/balances/+page.server.ts

@@ -0,0 +1,25 @@
+import { computeNets, simplifyDebts } from '$lib/domain/balances';
+import { centsToInput } from '$lib/domain/money';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = ({ locals }) => {
+	const { ledger, users } = locals.app;
+	const me = locals.user!;
+	const nets = computeNets(ledger.listExpenses(), ledger.listSettlements());
+	const name = (id: string) => users.byId(id)?.displayName ?? 'Unknown';
+
+	const rows = users
+		.members()
+		.filter((u) => u.active || (nets.get(u.id) ?? 0) !== 0)
+		.map((u) => ({ id: u.id, name: u.displayName, active: u.active, net: nets.get(u.id) ?? 0 }))
+		.sort((a, b) => b.net - a.net || a.name.localeCompare(b.name));
+
+	const debts = simplifyDebts(nets).map((d) => ({
+		...d,
+		fromName: name(d.from),
+		toName: name(d.to),
+		settleHref: `/settlements/new?from=${encodeURIComponent(d.from)}&to=${encodeURIComponent(d.to)}&amount=${centsToInput(d.cents)}`
+	}));
+
+	return { rows, debts, myNet: nets.get(me.id) ?? 0 };
+};

src/routes/balances/+page.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import MoneyText from '$lib/components/MoneyText.svelte';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+</script>
+
+<main class="space-y-6 p-4">
+	<h1 class="text-2xl font-bold">Balances</h1>
+
+	{#if data.user?.role === 'member'}
+		<section class="rounded-xl bg-white p-4 shadow-sm">
+			{#if data.myNet > 0}
+				<p class="text-gray-600">You are owed</p>
+			{:else if data.myNet < 0}
+				<p class="text-gray-600">You owe</p>
+			{:else}
+				<p class="text-gray-600">You're all settled up</p>
+			{/if}
+			<MoneyText
+				cents={Math.abs(data.myNet)}
+				currency={data.currency}
+				class="text-3xl font-bold {data.myNet > 0
+					? 'text-green-700'
+					: data.myNet < 0
+						? 'text-red-700'
+						: ''}"
+			/>
+		</section>
+	{/if}
+
+	<section>
+		<h2 class="mb-2 text-sm font-semibold tracking-wide text-gray-500 uppercase">
+			Suggested payments
+		</h2>
+		{#if data.debts.length === 0}
+			<p class="rounded-xl bg-white p-4 text-gray-500 shadow-sm">Nobody owes anything. 🎉</p>
+		{:else}
+			<ul class="divide-y divide-gray-200 rounded-xl bg-white shadow-sm">
+				{#each data.debts as d (d.from + d.to)}
+					<li class="flex items-center gap-3 px-4 py-3">
+						<div class="flex-1">
+							<span class="font-medium">{d.fromName}</span>
+							owes
+							<span class="font-medium">{d.toName}</span>
+						</div>
+						<MoneyText cents={d.cents} currency={data.currency} class="font-medium" />
+						<a
+							href={d.settleHref}
+							class="rounded-lg bg-green-700 px-3 py-1 text-sm font-semibold text-white">Settle up</a
+						>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</section>
+
+	<section>
+		<h2 class="mb-2 text-sm font-semibold tracking-wide text-gray-500 uppercase">Everyone</h2>
+		<ul class="divide-y divide-gray-200 rounded-xl bg-white shadow-sm">
+			{#each data.rows as r (r.id)}
+				<li class="flex justify-between px-4 py-3 {r.active ? '' : 'text-gray-400'}">
+					<span
+						>{r.name}{r.id === data.user?.id ? ' (you)' : ''}{r.active ? '' : ' · inactive'}</span
+					>
+					<MoneyText cents={r.net} currency={data.currency} signed />
+				</li>
+			{/each}
+		</ul>
+	</section>
+</main>