includio-cms 0.36.8 → 0.37.0

package/dist/admin/client/booking/reservation-detail-page.svelte

@@ -0,0 +1,637 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import { Button } from '../../../components/ui/button/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import PageHeader from '../../components/layout/page-header.svelte';
+	import { formatCentsPrice, formatDateTime } from '../../utils/formatters.js';
+	import { BOOKING_STATUSES } from '../../../booking/state-machine.js';
+	import ParticipantDataPanel from './participant-data-panel.svelte';
+	import CustomerPanel from './customer-panel.svelte';
+	import StatusBadge from '../collection/status-badge.svelte';
+
+	const remotes = getRemotes();
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const id = $derived(page.params.id ?? '');
+	const detailQuery = $derived(remotes.getBooking(id));
+	const detail = $derived(detailQuery.current ?? null);
+
+	type TabKey = 'overview' | 'participants' | 'payments' | 'adjustments' | 'history' | 'items-edit';
+	let activeTab = $state<TabKey>('overview');
+
+	let saving = $state(false);
+	let error = $state<string | null>(null);
+	let linkAmount = $state(0);
+	let cashAmount = $state(0);
+	let newStatus = $state('');
+	let emailKind = $state('payment-link');
+	let adjKind = $state<'manual_surcharge' | 'manual_discount'>('manual_surcharge');
+	let adjAmount = $state(0);
+	let adjLabelInput = $state('');
+	let adjReasonInput = $state('');
+
+	const EMAIL_KINDS = [
+		'booking-received',
+		'deposit-paid',
+		'payment-received',
+		'payment-link',
+		'balance-due',
+		'balance-overdue-cancelled'
+	];
+
+	const t = $derived(
+		interfaceLanguage.current === 'pl'
+			? {
+					loading: 'Ładowanie…',
+					notFound: 'Nie znaleziono rezerwacji',
+					gross: 'Wartość',
+					paid: 'Wpłacono',
+					balance: 'Saldo',
+					discount: 'Rabat',
+					perks: 'Prezenty',
+					items: 'Pozycje',
+					payments: 'Księga płatności',
+					reminders: 'Przypomnienia',
+					kind: 'Rodzaj',
+					amount: 'Kwota',
+					pstatus: 'Status',
+					when: 'Termin',
+					trip: 'Wycieczka',
+					count: 'Osób',
+					unit: 'Cena jedn.',
+					participant: 'Uczestnik',
+					noData: 'Brak danych uczestnika',
+					none: 'Brak',
+					actions: 'Akcje',
+					amountPln: 'Kwota (PLN)',
+					sendLink: 'Wyślij link płatności',
+					recordCash: 'Zapisz gotówkę',
+					changeStatus: 'Zmień status',
+					cancel: 'Anuluj rezerwację',
+					sendEmail: 'Wyślij e-mail',
+					refund: 'Zwrot',
+					tabs: 'Sekcje rezerwacji',
+					tabOverview: 'Przegląd',
+					tabParticipants: 'Dane uczestników',
+					tabPayments: 'Płatności',
+					tabAdjustments: 'Korekty',
+					tabHistory: 'Historia',
+					tabItemsEdit: 'Edycja pozycji',
+					itemDate: 'Data wylotu',
+					itemPrice: 'Cena jedn. (PLN)',
+					itemRemove: 'Usuń',
+					itemRestore: 'Przywróć',
+					assignPeople: 'Uczestnicy',
+					addTrip: 'Dobierz wycieczkę',
+					pickTrip: 'Wybierz wycieczkę…',
+					saveItems: 'Zapisz zmiany',
+					itemsInvalid: 'Każda pozycja musi mieć ≥1 osobę; potrzebna ≥1 pozycja.',
+					removedTag: 'do usunięcia',
+					surchargeLabel: 'Dopłaty',
+					manualDiscountLabel: 'Rabaty ręczne',
+					addAdjustment: 'Dodaj korektę',
+					voidAdj: 'Cofnij',
+					adjLabel: 'Opis',
+					adjReason: 'Powód',
+					kindSurcharge: 'Dopłata',
+					kindDiscount: 'Rabat',
+					voidedTag: 'Cofnięta',
+					noAdjustments: 'Brak korekt',
+					adjWho: 'Dodał/a',
+					adjKind: 'Rodzaj'
+				}
+			: {
+					loading: 'Loading…',
+					notFound: 'Booking not found',
+					gross: 'Total',
+					paid: 'Paid',
+					balance: 'Balance',
+					discount: 'Discount',
+					perks: 'Perks',
+					items: 'Items',
+					payments: 'Payment ledger',
+					reminders: 'Reminders',
+					kind: 'Kind',
+					amount: 'Amount',
+					pstatus: 'Status',
+					when: 'When',
+					trip: 'Trip',
+					count: 'Pax',
+					unit: 'Unit price',
+					participant: 'Participant',
+					noData: 'No participant data',
+					none: 'None',
+					actions: 'Actions',
+					amountPln: 'Amount (PLN)',
+					sendLink: 'Send payment link',
+					recordCash: 'Record cash',
+					changeStatus: 'Change status',
+					cancel: 'Cancel booking',
+					sendEmail: 'Send email',
+					refund: 'Refund',
+					tabs: 'Booking sections',
+					tabOverview: 'Overview',
+					tabParticipants: 'Participant data',
+					tabPayments: 'Payments',
+					tabAdjustments: 'Adjustments',
+					tabHistory: 'History',
+					tabItemsEdit: 'Edit items',
+					itemDate: 'Departure date',
+					itemPrice: 'Unit price (PLN)',
+					itemRemove: 'Remove',
+					itemRestore: 'Restore',
+					assignPeople: 'Participants',
+					addTrip: 'Add trip',
+					pickTrip: 'Pick a trip…',
+					saveItems: 'Save changes',
+					itemsInvalid: 'Each item needs ≥1 person; at least 1 item required.',
+					removedTag: 'to remove',
+					surchargeLabel: 'Surcharges',
+					manualDiscountLabel: 'Manual discounts',
+					addAdjustment: 'Add adjustment',
+					voidAdj: 'Void',
+					adjLabel: 'Label',
+					adjReason: 'Reason',
+					kindSurcharge: 'Surcharge',
+					kindDiscount: 'Discount',
+					voidedTag: 'Voided',
+					noAdjustments: 'No adjustments',
+					adjWho: 'Added by',
+					adjKind: 'Kind'
+				}
+	);
+
+	const TABS = $derived<Array<{ key: TabKey; label: string }>>([
+		{ key: 'overview', label: t.tabOverview },
+		{ key: 'participants', label: t.tabParticipants },
+		{ key: 'payments', label: t.tabPayments },
+		{ key: 'adjustments', label: t.tabAdjustments },
+		{ key: 'history', label: t.tabHistory },
+		{ key: 'items-edit', label: t.tabItemsEdit }
+	]);
+
+	// Rethrows on failure so the panel can surface a per-card validation message.
+	async function saveParticipant(participantId: string, data: Record<string, unknown>) {
+		await remotes.updateParticipantData({ participantId, data });
+		await detailQuery.refresh();
+	}
+
+	async function run(fn: () => Promise<unknown>) {
+		saving = true;
+		error = null;
+		try {
+			await fn();
+			await detailQuery.refresh();
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Error';
+		} finally {
+			saving = false;
+		}
+	}
+
+	const addLink = () =>
+		run(async () => {
+			const res = await remotes.addPaymentLink({ bookingId: id, amount: Math.round(linkAmount * 100) });
+			if (res.paymentLink) window.open(res.paymentLink, '_blank');
+			linkAmount = 0;
+		});
+	const recordCash = () =>
+		run(async () => {
+			await remotes.recordCashPayment({ bookingId: id, amount: Math.round(cashAmount * 100) });
+			cashAmount = 0;
+		});
+	const refund = (paymentId: string) =>
+		run(() => remotes.refundBookingPayment({ paymentId }));
+	const changeStatus = () =>
+		run(async () => {
+			await remotes.changeBookingStatus({ bookingId: id, to: newStatus });
+			newStatus = '';
+		});
+	const cancel = () => run(() => remotes.cancelBooking({ bookingId: id, reason: 'manual' }));
+	const sendEmail = () => run(() => remotes.sendBookingEmailCmd({ bookingId: id, kind: emailKind }));
+	const addAdjustment = () =>
+		run(async () => {
+			await remotes.addAdjustment({
+				bookingId: id,
+				kind: adjKind,
+				amount: Math.round(adjAmount * 100),
+				label: adjLabelInput.trim(),
+				reason: adjReasonInput.trim() || undefined
+			});
+			adjAmount = 0;
+			adjLabelInput = '';
+			adjReasonInput = '';
+		});
+	const voidAdjustment = (adjustmentId: string) => run(() => remotes.voidAdjustment({ adjustmentId }));
+
+	// --- Items edit tab ---------------------------------------------------------
+	type EditItem = {
+		key: string; // existing item.id or 'new-N'
+		tripRef: string;
+		title: string;
+		dateStr: string; // 'YYYY-MM-DD' or ''
+		priceZl: number;
+		assigned: Record<string, boolean>; // personId -> assigned
+		removed: boolean;
+		isNew: boolean;
+	};
+
+	const catalogQuery = $derived(remotes.listBookingCatalog());
+	const catalog = $derived(catalogQuery.current ?? []);
+
+	const toDateStr = (d: string | Date | null | undefined) => {
+		if (!d) return '';
+		const dt = typeof d === 'string' ? new Date(d) : d;
+		return Number.isNaN(dt.getTime()) ? '' : dt.toISOString().slice(0, 10);
+	};
+
+	const personLabel = (data: Record<string, unknown>) =>
+		String(data.fullName ?? data.name ?? Object.values(data).find((v) => typeof v === 'string') ?? '');
+
+	const people = $derived(
+		(detail?.persons ?? []).map((p) => ({ id: p.id, label: personLabel(p.data) || p.id }))
+	);
+
+	// Per-trip person data that must be preserved on edit.
+	const origData = $derived.by(() => {
+		const m: Record<string, Record<string, unknown>> = {};
+		for (const a of detail?.assignments ?? []) m[`${a.itemId}:${a.personId}`] = a.data;
+		return m;
+	});
+
+	let editItems = $state<EditItem[]>([]);
+	let pickedRef = $state('');
+	let newCounter = 0;
+
+	// Reseed the editable model only when the booking, item count or person count
+	// changes — so ongoing edits aren't clobbered on every re-render.
+	let seededKey: string | null = null;
+	$effect(() => {
+		if (!detail) return;
+		const key = `${detail.booking.id}:${detail.items.length}:${detail.persons.length}`;
+		if (key === seededKey) return;
+		seededKey = key;
+		editItems = detail.items.map((it) => ({
+			key: it.id,
+			tripRef: it.tripRef,
+			title: it.tripTitle,
+			dateStr: toDateStr(it.departureDate),
+			priceZl: it.unitPriceSnapshot / 100,
+			assigned: Object.fromEntries(
+				detail.persons.map((p) => [
+					p.id,
+					detail.assignments.some((a) => a.itemId === it.id && a.personId === p.id)
+				])
+			),
+			removed: false,
+			isNew: false
+		}));
+	});
+
+	function addTrip() {
+		if (!pickedRef) return;
+		editItems.push({
+			key: `new-${newCounter++}`,
+			tripRef: pickedRef,
+			title: catalog.find((c) => c.ref === pickedRef)?.title ?? pickedRef,
+			dateStr: '',
+			priceZl: 0,
+			assigned: Object.fromEntries(people.map((p) => [p.id, true])),
+			removed: false,
+			isNew: true
+		});
+		pickedRef = '';
+	}
+
+	function toggleRemove(key: string) {
+		const it = editItems.find((i) => i.key === key);
+		if (it) it.removed = !it.removed;
+	}
+
+	function canSave() {
+		const kept = editItems.filter((i) => !i.removed);
+		return kept.length >= 1 && kept.every((i) => people.some((p) => i.assigned[p.id]));
+	}
+
+	function saveItems() {
+		run(async () => {
+			if (!detail) return;
+			const persons = detail.persons.map((p) => ({ ref: p.id, identity: p.data }));
+			const items = editItems
+				.filter((i) => !i.removed)
+				.map((i) => ({
+					tripRef: i.tripRef,
+					departureDate: i.dateStr ? new Date(`${i.dateStr}T00:00:00`) : null,
+					unitPrice: Math.round(i.priceZl * 100),
+					assignments: people
+						.filter((p) => i.assigned[p.id])
+						.map((p) => ({ personRef: p.id, data: origData[`${i.key}:${p.id}`] ?? {} }))
+				}));
+			await remotes.editBookingStaff({ bookingId: id, changes: { persons, items } });
+		});
+	}
+</script>
+
+{#if !detailQuery.ready}
+	<p class="text-muted-foreground px-6 py-4 text-sm">{t.loading}</p>
+{:else if !detail}
+	<p class="text-muted-foreground px-6 py-4 text-sm">{t.notFound}</p>
+{:else}
+	{@const b = detail.booking}
+	<PageHeader title={b.number} />
+	<div class="space-y-6 px-4 sm:px-6">
+		<nav class="border-border flex flex-wrap gap-1 border-b" aria-label={t.tabs}>
+			{#each TABS as tab (tab.key)}
+				<button
+					type="button"
+					class="-mb-px border-b-2 px-3 py-2 text-sm font-medium transition-colors {activeTab === tab.key
+						? 'border-primary text-primary'
+						: 'text-muted-foreground hover:text-foreground border-transparent'}"
+					onclick={() => (activeTab = tab.key)}
+				>
+					{tab.label}
+				</button>
+			{/each}
+		</nav>
+
+		{#if error}
+			<p class="text-destructive text-sm">{error}</p>
+		{/if}
+
+		{#if activeTab === 'overview'}
+			<section class="flex flex-wrap items-center gap-3 text-sm">
+				<StatusBadge variant="booking" status={b.status} />
+				<span class="text-muted-foreground">{t.gross}: {formatCentsPrice(b.totals.gross, b.currency)}</span>
+				{#if b.totals.discount > 0}
+					<span class="text-success">{t.discount}: −{formatCentsPrice(b.totals.discount, b.currency)}</span>
+				{/if}
+				{#if (b.totals.surcharge ?? 0) > 0}
+					<span class="text-muted-foreground">{t.surchargeLabel}: +{formatCentsPrice(b.totals.surcharge ?? 0, b.currency)}</span>
+				{/if}
+				{#if (b.totals.manualDiscount ?? 0) > 0}
+					<span class="text-success">{t.manualDiscountLabel}: −{formatCentsPrice(b.totals.manualDiscount ?? 0, b.currency)}</span>
+				{/if}
+				<span class="text-muted-foreground">{t.paid}: {formatCentsPrice(b.totals.paid, b.currency)}</span>
+				<span class="font-medium">{t.balance}: {formatCentsPrice(b.totals.balance, b.currency)}</span>
+				{#each b.totals.perks ?? [] as perk (perk.label)}
+					<span class="bg-lavender-lighter text-primary inline-flex items-center rounded-full px-2 py-0.5 text-xs">🎁 {perk.label}</span>
+				{/each}
+			</section>
+
+			<CustomerPanel
+				customer={(b.customer ?? {}) as Record<string, unknown>}
+				dateFieldKey={detail.arrivalDateField}
+				fields={detail.customerFields}
+			/>
+
+			<section>
+				<h2 class="mb-2 text-sm font-semibold">{t.items}</h2>
+				<table class="w-full text-sm">
+					<thead>
+						<tr class="text-muted-foreground border-border border-b text-left">
+							<th class="py-2 pr-4 font-medium">{t.trip}</th>
+							<th class="py-2 pr-4 font-medium">{t.when}</th>
+							<th class="py-2 pr-4 text-right font-medium">{t.count}</th>
+							<th class="py-2 pr-4 text-right font-medium">{t.unit}</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each detail.items as it (it.id)}
+							<tr class="border-border/60 border-b align-top">
+								<td class="py-2 pr-4 font-medium">{it.tripTitle}</td>
+								<td class="text-muted-foreground py-2 pr-4">
+									{it.departureDate ? formatDateTime(it.departureDate, interfaceLanguage.current) : '—'}
+								</td>
+								<td class="py-2 pr-4 text-right">{it.participantsCount}</td>
+								<td class="py-2 pr-4 text-right">{formatCentsPrice(it.unitPriceSnapshot, b.currency)}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</section>
+
+			<section class="border-border space-y-3 rounded-xl border p-4">
+				<h2 class="text-sm font-semibold">{t.actions}</h2>
+				<div class="flex flex-wrap items-end gap-2">
+					<label class="text-sm">
+						<span class="text-muted-foreground block text-xs">{t.amountPln}</span>
+						<input type="number" min="0" step="0.01" bind:value={linkAmount} class="border-border w-28 rounded-md border px-2 py-1" />
+					</label>
+					<Button disabled={saving || linkAmount <= 0} onclick={addLink}>{t.sendLink}</Button>
+				</div>
+				<div class="flex flex-wrap items-end gap-2">
+					<label class="text-sm">
+						<span class="text-muted-foreground block text-xs">{t.amountPln}</span>
+						<input type="number" min="0" step="0.01" bind:value={cashAmount} class="border-border w-28 rounded-md border px-2 py-1" />
+					</label>
+					<Button variant="secondary" disabled={saving || cashAmount <= 0} onclick={recordCash}>{t.recordCash}</Button>
+				</div>
+				<div class="flex flex-wrap items-end gap-2">
+					<select bind:value={newStatus} class="border-border rounded-md border px-2 py-1 text-sm">
+						<option value="">—</option>
+						{#each BOOKING_STATUSES as s (s)}
+							<option value={s}>{s}</option>
+						{/each}
+					</select>
+					<Button variant="outline" disabled={saving || !newStatus} onclick={changeStatus}>{t.changeStatus}</Button>
+				</div>
+				<div class="flex flex-wrap items-end gap-2">
+					<select bind:value={emailKind} class="border-border rounded-md border px-2 py-1 text-sm">
+						{#each EMAIL_KINDS as k (k)}
+							<option value={k}>{k}</option>
+						{/each}
+					</select>
+					<Button variant="outline" disabled={saving} onclick={sendEmail}>{t.sendEmail}</Button>
+				</div>
+				<Button variant="outline" disabled={saving} onclick={cancel}>{t.cancel}</Button>
+			</section>
+		{:else if activeTab === 'participants'}
+			<ParticipantDataPanel
+				items={detail.items}
+				participants={detail.participants}
+				ageFlag={detail.ageFlag}
+				lang={interfaceLanguage.current}
+				onSave={saveParticipant}
+			/>
+		{:else if activeTab === 'payments'}
+			<section>
+				<h2 class="mb-2 text-sm font-semibold">{t.payments}</h2>
+				{#if detail.payments.length === 0}
+					<p class="text-muted-foreground text-sm">{t.none}</p>
+				{:else}
+					<table class="w-full text-sm">
+						<thead>
+							<tr class="text-muted-foreground border-border border-b text-left">
+								<th class="py-2 pr-4 font-medium">{t.kind}</th>
+								<th class="py-2 pr-4 text-right font-medium">{t.amount}</th>
+								<th class="py-2 pr-4 font-medium">{t.pstatus}</th>
+								<th class="py-2 font-medium"></th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each detail.payments as p (p.id)}
+								<tr class="border-border/60 border-b">
+									<td class="py-2 pr-4">{p.kind}</td>
+									<td class="py-2 pr-4 text-right">{formatCentsPrice(p.amount, b.currency)}</td>
+									<td class="py-2 pr-4">{p.status}</td>
+									<td class="py-2 text-right">
+										{#if p.status === 'paid'}
+											<Button variant="outline" size="sm" disabled={saving} onclick={() => refund(p.id)}>
+												{t.refund}
+											</Button>
+										{/if}
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				{/if}
+			</section>
+		{:else if activeTab === 'adjustments'}
+			<section class="border-border space-y-3 rounded-xl border p-4">
+				<h2 class="text-sm font-semibold">{t.addAdjustment}</h2>
+				<div class="flex flex-wrap items-end gap-2">
+					<label class="text-sm">
+						<span class="text-muted-foreground block text-xs">{t.adjKind}</span>
+						<select bind:value={adjKind} class="border-border rounded-md border px-2 py-1 text-sm">
+							<option value="manual_surcharge">{t.kindSurcharge}</option>
+							<option value="manual_discount">{t.kindDiscount}</option>
+						</select>
+					</label>
+					<label class="text-sm">
+						<span class="text-muted-foreground block text-xs">{t.amountPln}</span>
+						<input type="number" min="0" step="0.01" bind:value={adjAmount} class="border-border w-28 rounded-md border px-2 py-1" />
+					</label>
+					<label class="text-sm">
+						<span class="text-muted-foreground block text-xs">{t.adjLabel}</span>
+						<input type="text" bind:value={adjLabelInput} placeholder="Rower elektryczny" class="border-border w-48 rounded-md border px-2 py-1" />
+					</label>
+					<label class="text-sm">
+						<span class="text-muted-foreground block text-xs">{t.adjReason}</span>
+						<input type="text" bind:value={adjReasonInput} class="border-border w-48 rounded-md border px-2 py-1" />
+					</label>
+					<Button disabled={saving || adjAmount <= 0 || !adjLabelInput.trim()} onclick={addAdjustment}>{t.addAdjustment}</Button>
+				</div>
+			</section>
+
+			<section>
+				{#if detail.adjustments.length === 0}
+					<p class="text-muted-foreground text-sm">{t.noAdjustments}</p>
+				{:else}
+					<table class="w-full text-sm">
+						<thead>
+							<tr class="text-muted-foreground border-border border-b text-left">
+								<th class="py-2 pr-4 font-medium">{t.adjKind}</th>
+								<th class="py-2 pr-4 text-right font-medium">{t.amount}</th>
+								<th class="py-2 pr-4 font-medium">{t.adjLabel}</th>
+								<th class="py-2 pr-4 font-medium">{t.adjReason}</th>
+								<th class="py-2 pr-4 font-medium">{t.adjWho}</th>
+								<th class="py-2 font-medium"></th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each detail.adjustments as a (a.id)}
+								<tr class="border-border/60 border-b align-top {a.voidedAt ? 'text-muted-foreground opacity-60' : ''}">
+									<td class="py-2 pr-4">{a.kind === 'manual_surcharge' ? t.kindSurcharge : t.kindDiscount}</td>
+									<td class="py-2 pr-4 text-right">{a.amount >= 0 ? '+' : '−'}{formatCentsPrice(Math.abs(a.amount), b.currency)}</td>
+									<td class="py-2 pr-4 font-medium">{a.label}</td>
+									<td class="text-muted-foreground py-2 pr-4">{a.reason ?? '—'}</td>
+									<td class="text-muted-foreground py-2 pr-4">
+										{a.createdBy} · {formatDateTime(a.createdAt, interfaceLanguage.current)}
+									</td>
+									<td class="py-2 text-right">
+										{#if a.voidedAt}
+											<span class="bg-muted text-muted-foreground inline-flex items-center rounded-full px-2 py-0.5 text-xs">
+												{t.voidedTag} ({a.voidedBy})
+											</span>
+										{:else}
+											<Button variant="outline" size="sm" disabled={saving} onclick={() => voidAdjustment(a.id)}>
+												{t.voidAdj}
+											</Button>
+										{/if}
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				{/if}
+			</section>
+		{:else if activeTab === 'history'}
+			<section>
+				<h2 class="mb-2 text-sm font-semibold">{t.reminders}</h2>
+				{#if detail.reminders.length === 0}
+					<p class="text-muted-foreground text-sm">{t.none}</p>
+				{:else}
+					<ul class="text-muted-foreground space-y-1 text-sm">
+						{#each detail.reminders as r (r.id)}
+							<li>
+								{r.type} — {formatDateTime(r.scheduledFor, interfaceLanguage.current)}
+								{r.sentAt ? '✓' : ''}
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			</section>
+		{:else if activeTab === 'items-edit'}
+			<section class="space-y-3">
+				{#each editItems as it (it.key)}
+					<div class="border-border rounded-xl border p-4 {it.removed ? 'opacity-50' : ''}">
+						<div class="mb-3 flex items-center gap-2">
+							<h3 class="text-sm font-semibold">{it.title}</h3>
+							{#if it.removed}
+								<span class="bg-muted text-muted-foreground inline-flex items-center rounded-full px-2 py-0.5 text-xs">
+									{t.removedTag}
+								</span>
+							{/if}
+						</div>
+						<div class="flex flex-wrap items-end gap-3">
+							<label class="text-sm">
+								<span class="text-muted-foreground block text-xs">{t.itemDate}</span>
+								<input type="date" bind:value={it.dateStr} class="border-border rounded-md border px-2 py-1" />
+							</label>
+							<label class="text-sm">
+								<span class="text-muted-foreground block text-xs">{t.itemPrice}</span>
+								<input type="number" min="0" step="0.01" bind:value={it.priceZl} class="border-border w-28 rounded-md border px-2 py-1" />
+							</label>
+						</div>
+						<fieldset class="mt-3">
+							<legend class="text-muted-foreground mb-1 text-xs">{t.assignPeople}</legend>
+							<div class="flex flex-wrap gap-3">
+								{#each people as p (p.id)}
+									<label class="flex items-center gap-1.5 text-sm">
+										<input type="checkbox" bind:checked={it.assigned[p.id]} />
+										{p.label}
+									</label>
+								{/each}
+							</div>
+						</fieldset>
+						<div class="mt-3">
+							<Button variant="outline" size="sm" onclick={() => toggleRemove(it.key)}>
+								{it.removed ? t.itemRestore : t.itemRemove}
+							</Button>
+						</div>
+					</div>
+				{/each}
+
+				<div class="border-border flex flex-wrap items-end gap-2 rounded-xl border p-4">
+					<label class="text-sm">
+						<span class="text-muted-foreground block text-xs">{t.addTrip}</span>
+						<select bind:value={pickedRef} class="border-border rounded-md border px-2 py-1 text-sm">
+							<option value="">{t.pickTrip}</option>
+							{#each catalog as c (c.ref)}
+								<option value={c.ref}>{c.title}</option>
+							{/each}
+						</select>
+					</label>
+					<Button disabled={!pickedRef} onclick={addTrip}>{t.addTrip}</Button>
+				</div>
+
+				{#if !canSave()}
+					<p class="text-destructive text-sm">{t.itemsInvalid}</p>
+				{/if}
+				<Button disabled={saving || !canSave()} onclick={saveItems}>{t.saveItems}</Button>
+			</section>
+		{/if}
+	</div>
+{/if}

package/dist/admin/client/booking/reservation-detail-page.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ReservationDetailPage: import("svelte").Component<Record<string, never>, {}, "">;
+type ReservationDetailPage = ReturnType<typeof ReservationDetailPage>;
+export default ReservationDetailPage;