src/lib/components/SettlementForm.svelte

<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}>
				<option value="">Choose…</option>
				{#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>