includio-cms 0.36.8 → 0.37.0

package/dist/admin/client/booking/customer-panel.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { formatShortDateOnly } from '../../utils/formatters.js';
+	import { toCustomerView, type CustomerFieldHint, type CustomerValue } from './customer-view.js';
+
+	type Props = {
+		customer: Record<string, unknown>;
+		/** Anchor-date key from the booking config. */
+		dateFieldKey?: string | null;
+		/** Presentation hints from `defineBooking({ customerFields })`: labels + `birthDate` role. */
+		fields?: CustomerFieldHint[];
+	};
+
+	let { customer, dateFieldKey = null, fields = [] }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+	// Wiek liczony na „teraz" — ustalone raz na render, żeby wszystkie komórki miały tę samą datę.
+	const now = new Date();
+	const view = $derived(toCustomerView(customer, { dateFieldKey, fields, now }));
+
+	const t = $derived(
+		interfaceLanguage.current === 'pl'
+			? { title: 'Klient', empty: 'Brak danych klienta.', years: 'l.' }
+			: { title: 'Customer', empty: 'No customer data.', years: 'yrs' }
+	);
+
+	function display(value: CustomerValue): string {
+		if (value.kind !== 'date') return value.raw;
+		const date = formatShortDateOnly(value.raw, interfaceLanguage.current);
+		return value.age === undefined ? date : `${date} (${value.age} ${t.years})`;
+	}
+</script>
+
+<section class="bg-card rounded-xl border p-5 shadow-sm">
+	<h2 class="mb-4 text-lg font-semibold">{t.title}</h2>
+
+	{#if view.rows.length === 0 && view.tables.length === 0}
+		<p class="text-muted-foreground text-sm">{t.empty}</p>
+	{:else}
+		{#if view.rows.length > 0}
+			<dl class="grid gap-x-6 gap-y-3 sm:grid-cols-2">
+				{#each view.rows as row (row.key)}
+					<div>
+						<dt class="text-muted-foreground text-xs font-medium">{row.label}</dt>
+						<dd class="text-sm">
+							{#if row.value.kind === 'email'}
+								<a class="text-primary hover:underline" href="mailto:{row.value.raw}">
+									{row.value.raw}
+								</a>
+							{:else if row.value.kind === 'phone'}
+								<a
+									class="text-primary hover:underline"
+									href="tel:{row.value.raw.replace(/\s/g, '')}"
+								>
+									{row.value.raw}
+								</a>
+							{:else}
+								{display(row.value)}
+							{/if}
+						</dd>
+					</div>
+				{/each}
+			</dl>
+		{/if}
+
+		{#each view.tables as table (table.key)}
+			<div class="mt-5">
+				<h3 class="text-muted-foreground mb-2 text-xs font-medium">{table.label}</h3>
+				<div class="overflow-x-auto">
+					<table class="w-full text-sm">
+						<thead>
+							<tr class="text-muted-foreground border-border border-b text-left">
+								{#each table.columns as col (col.key)}
+									<th class="py-2 pr-4 font-medium">{col.label}</th>
+								{/each}
+							</tr>
+						</thead>
+						<tbody>
+							{#each table.rows as row, i (i)}
+								<tr class="border-border/60 border-b last:border-0">
+									{#each row as cell, j (j)}
+										<td class="py-2 pr-4">
+											{#if cell.kind === 'email'}
+												<a class="text-primary hover:underline" href="mailto:{cell.raw}">{cell.raw}</a>
+											{:else if cell.kind === 'phone'}
+												<a class="text-primary hover:underline" href="tel:{cell.raw.replace(/\s/g, '')}"
+													>{cell.raw}</a
+												>
+											{:else}
+												{display(cell) || '—'}
+											{/if}
+										</td>
+									{/each}
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		{/each}
+	{/if}
+</section>

package/dist/admin/client/booking/customer-panel.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type CustomerFieldHint } from './customer-view.js';
+type Props = {
+    customer: Record<string, unknown>;
+    /** Anchor-date key from the booking config. */
+    dateFieldKey?: string | null;
+    /** Presentation hints from `defineBooking({ customerFields })`: labels + `birthDate` role. */
+    fields?: CustomerFieldHint[];
+};
+declare const CustomerPanel: import("svelte").Component<Props, {}, "">;
+type CustomerPanel = ReturnType<typeof CustomerPanel>;
+export default CustomerPanel;

package/dist/admin/client/booking/customer-view.d.ts

@@ -0,0 +1,52 @@
+export type CustomerValue = {
+    kind: 'text' | 'email' | 'phone' | 'date';
+    raw: string;
+    /** Skończone lata na `now` — tylko dla pól o roli `birthDate`. */
+    age?: number;
+};
+export type CustomerRow = {
+    key: string;
+    label: string;
+    value: CustomerValue;
+};
+export type CustomerColumn = {
+    key: string;
+    label: string;
+};
+export type CustomerTable = {
+    key: string;
+    label: string;
+    columns: CustomerColumn[];
+    rows: CustomerValue[][];
+};
+/** Wskazówka prezentacyjna dla pola `customer` (podzbiór `FieldDef`). */
+export type CustomerFieldHint = {
+    key: string;
+    label?: string;
+    role?: string;
+};
+export interface CustomerViewOptions {
+    /** Pole daty-kotwicy z konfiguracji bookingu (dla formatów nie-ISO). */
+    dateFieldKey?: string | null;
+    /** Etykiety i role; klucze zagnieżdżone adresuje się kropką (`people.birthDate`). */
+    fields?: CustomerFieldHint[];
+    /** Data odniesienia dla wieku. Brak ⇒ wiek się nie liczy. */
+    now?: Date;
+}
+/** `referralSource` → „Referral source"; `departure_date` → „Departure date". */
+export declare function humanizeKey(key: string): string;
+/** Etykieta pola: z konfiguracji projektu, a gdy jej nie ma — uczłowieczony klucz. */
+export declare function labelFor(key: string, fields?: CustomerFieldHint[]): string;
+export declare function classifyValue(raw: unknown, key: string, options?: CustomerViewOptions): CustomerValue | null;
+/**
+ * Skrót do kolumny „Klient" na liście: pierwszy e-mail i pierwsza wartość tekstowa wyglądająca
+ * na nazwę (zawiera literę).
+ */
+export declare function customerSummary(customer: Record<string, unknown>): {
+    name: string | null;
+    email: string | null;
+};
+export declare function toCustomerView(customer: Record<string, unknown>, options?: CustomerViewOptions): {
+    rows: CustomerRow[];
+    tables: CustomerTable[];
+};

package/dist/admin/client/booking/customer-view.js

@@ -0,0 +1,134 @@
+/**
+ * Panel „Klient" — czysta logika prezentacji worka `booking.customer`.
+ *
+ * `customer` to `jsonb`, którego KSZTAŁT DEFINIUJE PROJEKT, nie rdzeń. Dlatego typ wartości
+ * rozpoznajemy po WARTOŚCI (e-mail zawiera `@`, telefon to wzorzec cyfr, data ISO to data),
+ * a NIE po nazwie klucza — `if (key === 'referralSource')` byłoby wpisaniem semantyki jednego
+ * projektu w rdzeń.
+ *
+ * Czego z wartości wyczytać się NIE DA: ludzkiej etykiety pola i tego, która data jest datą
+ * urodzenia (data przylotu też jest datą). To dostarcza projekt przez `defineBooking({ customerFields })`
+ * — wyłącznie jako wskazówki prezentacyjne. Bez nich panel nadal działa: etykietą jest
+ * uczłowieczony klucz, a wiek się nie liczy.
+ *
+ * Zegara nie czyta — `now` wstrzykuje wywołujący.
+ */
+import { ageAt } from '../../../booking/participant-fields/age.js';
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+/** Telefon: `+`, cyfry, spacje, myślniki, nawiasy — przy co najmniej 7 cyfrach. */
+const PHONE_RE = /^\+?[\d\s()-]{7,}$/;
+/**
+ * Data ISO (`2026-08-12`, opcjonalnie z częścią czasową). Sprawdzana PRZED telefonem, bo
+ * „2026-08-12" to same cyfry i myślniki — bez tego data dostawałaby klikalny link `tel:`.
+ */
+const ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}(?:[T\s].*)?$/;
+/** `referralSource` → „Referral source"; `departure_date` → „Departure date". */
+export function humanizeKey(key) {
+    const spaced = key
+        .replace(/[_.-]+/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .trim()
+        .toLowerCase();
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+function digitCount(s) {
+    return (s.match(/\d/g) ?? []).length;
+}
+function hintFor(key, fields) {
+    return fields?.find((f) => f.key === key);
+}
+/** Etykieta pola: z konfiguracji projektu, a gdy jej nie ma — uczłowieczony klucz. */
+export function labelFor(key, fields) {
+    return hintFor(key, fields)?.label ?? humanizeKey(key);
+}
+export function classifyValue(raw, key, options = {}) {
+    if (raw === null || raw === undefined)
+        return null;
+    if (Array.isArray(raw)) {
+        const scalars = raw.filter((v) => typeof v !== 'object' || v === null);
+        if (scalars.length === 0)
+            return null;
+        return { kind: 'text', raw: scalars.map(String).join(', ') };
+    }
+    if (typeof raw === 'object')
+        return null;
+    const text = String(raw).trim();
+    if (text === '')
+        return null;
+    const isAnchorDate = Boolean(options.dateFieldKey) && key === options.dateFieldKey;
+    const isDate = isAnchorDate || ISO_DATE_RE.test(text);
+    if (isDate) {
+        const value = { kind: 'date', raw: text };
+        // Wiek liczymy WYŁĄCZNIE dla pól, które projekt oznaczył rolą `birthDate` — z samej
+        // wartości nie da się odróżnić daty urodzenia od daty przylotu.
+        if (options.now && hintFor(key, options.fields)?.role === 'birthDate') {
+            const age = ageAt(text, options.now);
+            if (age !== null && age >= 0)
+                value.age = age;
+        }
+        return value;
+    }
+    if (EMAIL_RE.test(text))
+        return { kind: 'email', raw: text };
+    if (PHONE_RE.test(text) && digitCount(text) >= 7)
+        return { kind: 'phone', raw: text };
+    return { kind: 'text', raw: text };
+}
+/**
+ * Skrót do kolumny „Klient" na liście: pierwszy e-mail i pierwsza wartość tekstowa wyglądająca
+ * na nazwę (zawiera literę).
+ */
+export function customerSummary(customer) {
+    let name = null;
+    let email = null;
+    for (const [key, raw] of Object.entries(customer ?? {})) {
+        const v = classifyValue(raw, key);
+        if (!v)
+            continue;
+        if (!email && v.kind === 'email')
+            email = v.raw;
+        if (!name && v.kind === 'text' && /\p{L}/u.test(v.raw))
+            name = v.raw;
+    }
+    return { name, email };
+}
+/** Tablica obiektów (np. manifest osób) → tabelka; kolumny = unia kluczy wszystkich wierszy. */
+function toTable(key, items, options) {
+    if (items.length === 0)
+        return null;
+    const colKeys = [];
+    for (const item of items) {
+        for (const k of Object.keys(item)) {
+            if (!colKeys.includes(k))
+                colKeys.push(k);
+        }
+    }
+    if (colKeys.length === 0)
+        return null;
+    // Kolumny tabeli adresuje się kropką: `people.birthDate`.
+    const columns = colKeys.map((c) => ({
+        key: c,
+        label: labelFor(`${key}.${c}`, options.fields) ?? humanizeKey(c)
+    }));
+    const rows = items.map((item) => colKeys.map((c) => classifyValue(item[c], `${key}.${c}`, options) ?? { kind: 'text', raw: '' }));
+    return { key, label: labelFor(key, options.fields), columns, rows };
+}
+export function toCustomerView(customer, options = {}) {
+    const rows = [];
+    const tables = [];
+    for (const [key, raw] of Object.entries(customer ?? {})) {
+        const isObjectArray = Array.isArray(raw) &&
+            raw.length > 0 &&
+            raw.every((v) => typeof v === 'object' && v !== null && !Array.isArray(v));
+        if (isObjectArray) {
+            const table = toTable(key, raw, options);
+            if (table)
+                tables.push(table);
+            continue;
+        }
+        const value = classifyValue(raw, key, options);
+        if (value)
+            rows.push({ key, label: labelFor(key, options.fields), value });
+    }
+    return { rows, tables };
+}

package/dist/admin/client/booking/participant-data-panel.svelte

@@ -0,0 +1,330 @@
+<script lang="ts">
+	import type { FieldDef, AgeFlagConfig } from '../../../booking/participant-fields/types.js';
+	import {
+		ageAt,
+		canFill,
+		completeness,
+		deriveAgeFlag,
+		groupBySection
+	} from '../../../booking/participant-fields/index.js';
+	import { Button } from '../../../components/ui/button/index.js';
+
+	interface PanelItem {
+		id: string;
+		departureDate: Date | string | null;
+		participantFields: FieldDef[];
+	}
+	interface PanelParticipant {
+		id: string;
+		itemId: string;
+		data: Record<string, unknown>;
+	}
+
+	let {
+		items,
+		participants,
+		ageFlag,
+		lang,
+		onSave
+	}: {
+		items: PanelItem[];
+		participants: PanelParticipant[];
+		ageFlag: AgeFlagConfig | null;
+		lang: 'pl' | 'en';
+		/** When provided, staff/both fields become editable; saves the merged patch. */
+		onSave?: (participantId: string, data: Record<string, unknown>) => Promise<void>;
+	} = $props();
+
+	// Badge wieku — etykieta z configu (np. „Dziecko"/„Junior"), fallback domyślny.
+	const ageBadgeLabel = $derived(ageFlag?.label?.[lang] ?? (lang === 'pl' ? 'Dziecko' : 'Child'));
+
+	let editingId = $state<string | null>(null);
+	let draft = $state<Record<string, unknown>>({});
+	let savingEdit = $state(false);
+	let saveError = $state<string | null>(null);
+
+	const t = $derived(
+		lang === 'pl'
+			? {
+					participant: 'Uczestnik',
+					complete: 'Komplet',
+					missing: 'Brakuje',
+					pending: '— do uzupełnienia',
+					staff: 'tylko obsługa',
+					other: 'Pozostałe',
+					yes: 'Tak',
+					no: 'Nie',
+					years: 'l.',
+					noData: 'Brak danych uczestnika',
+					noParticipants: 'Brak uczestników',
+					edit: 'Edytuj',
+					save: 'Zapisz',
+					cancelEdit: 'Anuluj'
+				}
+			: {
+					participant: 'Participant',
+					complete: 'Complete',
+					missing: 'Missing',
+					pending: '— to be filled',
+					staff: 'staff only',
+					other: 'Other',
+					yes: 'Yes',
+					no: 'No',
+					years: 'yrs',
+					noData: 'No participant data',
+					noParticipants: 'No participants',
+					edit: 'Edit',
+					save: 'Save',
+					cancelEdit: 'Cancel'
+				}
+	);
+
+	function participantsForItem(itemId: string) {
+		return participants.filter((p) => p.itemId === itemId);
+	}
+
+	function anchorDate(d: Date | string | null): Date | null {
+		if (!d) return null;
+		const date = d instanceof Date ? d : new Date(d);
+		return Number.isNaN(date.getTime()) ? null : date;
+	}
+
+	function isEmptyVal(raw: unknown): boolean {
+		return raw == null || raw === '';
+	}
+
+	// „Teraz" ustalone raz na render, żeby wszystkie karty liczyły wiek na tę samą datę.
+	const now = new Date();
+
+	function formatFieldValue(field: FieldDef, raw: unknown): string {
+		if (isEmptyVal(raw)) return t.pending;
+		if (field.type === 'boolean') return raw ? t.yes : t.no;
+		if (Array.isArray(raw)) return raw.join(', ');
+
+		// Data urodzenia dostaje skończone lata w nawiasie — obsługa nie musi liczyć w głowie.
+		// Rola, nie nazwa pola: z samej wartości nie odróżnisz daty urodzenia od innej daty.
+		if (field.role === 'birthDate' && typeof raw === 'string') {
+			const age = ageAt(raw, now);
+			if (age !== null && age >= 0) return `${raw} (${age} ${t.years})`;
+		}
+
+		return String(raw);
+	}
+
+	// Card title = value of the field flagged with role 'name' (no magic keys).
+	function displayName(data: Record<string, unknown>, fields: FieldDef[]): string | null {
+		const nameField = fields.find((f) => f.role === 'name');
+		const v = nameField ? data[nameField.key] : undefined;
+		return typeof v === 'string' && v.trim() ? v : null;
+	}
+
+	function humanizeKey(key: string): string {
+		return key
+			.replace(/[_-]+/g, ' ')
+			.replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+			.trim()
+			.replace(/^./, (c) => c.toUpperCase());
+	}
+
+	function formatLegacy(value: unknown): string {
+		if (value == null || value === '') return '—';
+		if (Array.isArray(value)) return value.map(formatLegacy).join(', ');
+		if (typeof value === 'boolean') return value ? t.yes : t.no;
+		if (typeof value === 'object') return JSON.stringify(value);
+		return String(value);
+	}
+
+	// Data keys not covered by the schema → flat list (graceful for legacy / no-schema
+	// bookings). Nested objects expand one level with a prefixed label.
+	function extraFields(
+		data: Record<string, unknown>,
+		fields: FieldDef[],
+		prefix = ''
+	): Array<{ label: string; value: string }> {
+		const known = new Set(fields.map((f) => f.key));
+		const out: Array<{ label: string; value: string }> = [];
+		for (const [key, value] of Object.entries(data ?? {})) {
+			if (prefix === '' && known.has(key)) continue; // already rendered from schema
+			if (value == null || value === '' || (Array.isArray(value) && value.length === 0)) continue;
+			const label = (prefix ? `${prefix} · ` : '') + humanizeKey(key);
+			if (value && typeof value === 'object' && !Array.isArray(value)) {
+				out.push(...extraFields(value as Record<string, unknown>, fields, label));
+			} else {
+				out.push({ label, value: formatLegacy(value) });
+			}
+		}
+		return out;
+	}
+
+	function startEdit(p: PanelParticipant) {
+		editingId = p.id;
+		draft = { ...p.data };
+		saveError = null;
+	}
+
+	function cancelEdit() {
+		editingId = null;
+		saveError = null;
+	}
+
+	function setDraft(key: string, value: unknown) {
+		draft[key] = value;
+	}
+
+	async function commitEdit(p: PanelParticipant) {
+		if (!onSave) return;
+		savingEdit = true;
+		saveError = null;
+		try {
+			await onSave(p.id, draft);
+			editingId = null;
+		} catch (e) {
+			saveError = e instanceof Error ? e.message : 'Error';
+		} finally {
+			savingEdit = false;
+		}
+	}
+</script>
+
+{#if participants.length === 0}
+	<p class="text-muted-foreground text-sm">{t.noParticipants}</p>
+{:else}
+	<div class="space-y-4">
+		{#each items as it (it.id)}
+			{@const fields = it.participantFields}
+			{#each participantsForItem(it.id) as p, pi (p.id)}
+				{@const groups = groupBySection(fields)}
+				{@const comp = completeness(p.data, fields)}
+				{@const ageInfo = deriveAgeFlag(p.data, fields, ageFlag, anchorDate(it.departureDate))}
+				{@const name = displayName(p.data, fields)}
+				{@const extra = extraFields(p.data, fields)}
+				{@const editing = editingId === p.id}
+				<article class="border-border space-y-3 rounded-xl border p-4">
+					<header class="flex flex-wrap items-center gap-2">
+						<span
+							class="bg-lavender-lighter text-primary flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold"
+							>{pi + 1}</span
+						>
+						<span class="text-foreground text-sm font-medium">{name ?? `${t.participant} ${pi + 1}`}</span>
+						{#if comp.total > 0}
+							{#if comp.complete}
+								<span class="bg-lavender-lighter text-primary rounded-full px-2 py-0.5 text-xs font-medium"
+									>{t.complete}</span
+								>
+							{:else}
+								<span class="border-border text-muted-foreground rounded-full border px-2 py-0.5 text-xs"
+									>{t.missing}: {comp.missing.join(', ')}</span
+								>
+							{/if}
+						{/if}
+						{#if ageInfo.flagged}
+							<span class="bg-lavender-lighter text-primary rounded-full px-2 py-0.5 text-xs font-medium">
+								{ageBadgeLabel}{ageInfo.age != null ? ` · ${ageInfo.age}` : ''}
+							</span>
+						{/if}
+						{#if onSave}
+							<div class="ml-auto flex gap-2">
+								{#if editing}
+									<Button size="sm" disabled={savingEdit} onclick={() => commitEdit(p)}>{t.save}</Button>
+									<Button size="sm" variant="outline" disabled={savingEdit} onclick={cancelEdit}>{t.cancelEdit}</Button>
+								{:else}
+									<Button size="sm" variant="outline" onclick={() => startEdit(p)}>{t.edit}</Button>
+								{/if}
+							</div>
+						{/if}
+					</header>
+
+					{#if editing && saveError}
+						<p class="text-destructive text-sm">{saveError}</p>
+					{/if}
+
+					{#each groups as g (g.section ?? '__none')}
+						{#if g.section}
+							<h4 class="text-muted-foreground text-xs font-semibold tracking-wide uppercase">{g.section}</h4>
+						{/if}
+						<dl class="grid grid-cols-1 gap-x-6 gap-y-1.5 sm:grid-cols-2">
+							{#each g.fields as f (f.key)}
+								<div class="flex items-baseline justify-between gap-4 text-sm">
+									<dt class="text-muted-foreground flex items-center gap-1.5">
+										<span>{f.label}</span>
+										{#if f.whoFills === 'staff'}
+											<span class="border-border text-muted-foreground rounded border px-1 text-[10px] uppercase">{t.staff}</span>
+										{/if}
+									</dt>
+									<dd
+										class="text-right {!editing && isEmptyVal(p.data[f.key])
+											? 'text-muted-foreground italic'
+											: 'text-foreground'}"
+									>
+										{#if editing && canFill(f, 'staff')}
+											{#if f.type === 'boolean'}
+												<input
+													type="checkbox"
+													checked={!!draft[f.key]}
+													onchange={(e) => setDraft(f.key, e.currentTarget.checked)}
+												/>
+											{:else if f.type === 'select'}
+												<select
+													value={String(draft[f.key] ?? '')}
+													onchange={(e) => setDraft(f.key, e.currentTarget.value)}
+													class="border-border rounded-md border px-2 py-1 text-sm"
+												>
+													<option value="">—</option>
+													{#each f.options ?? [] as opt (opt)}
+														<option value={opt}>{opt}</option>
+													{/each}
+												</select>
+											{:else if f.type === 'number'}
+												<input
+													type="number"
+													min={f.min}
+													max={f.max}
+													value={draft[f.key] == null ? '' : String(draft[f.key])}
+													oninput={(e) =>
+														setDraft(f.key, e.currentTarget.value === '' ? undefined : Number(e.currentTarget.value))}
+													class="border-border w-28 rounded-md border px-2 py-1 text-sm"
+												/>
+											{:else if f.type === 'date'}
+												<input
+													type="date"
+													value={String(draft[f.key] ?? '')}
+													oninput={(e) => setDraft(f.key, e.currentTarget.value)}
+													class="border-border rounded-md border px-2 py-1 text-sm"
+												/>
+											{:else}
+												<input
+													type="text"
+													value={String(draft[f.key] ?? '')}
+													oninput={(e) => setDraft(f.key, e.currentTarget.value)}
+													class="border-border w-full rounded-md border px-2 py-1 text-sm"
+												/>
+											{/if}
+										{:else}
+											{formatFieldValue(f, p.data[f.key])}
+										{/if}
+									</dd>
+								</div>
+							{/each}
+						</dl>
+					{/each}
+
+					{#if extra.length > 0}
+						<h4 class="text-muted-foreground text-xs font-semibold tracking-wide uppercase">{t.other}</h4>
+						<dl class="grid grid-cols-1 gap-x-6 gap-y-1.5 sm:grid-cols-2">
+							{#each extra as e (e.label)}
+								<div class="flex items-baseline justify-between gap-4 text-sm">
+									<dt class="text-muted-foreground">{e.label}</dt>
+									<dd class="text-foreground text-right">{e.value}</dd>
+								</div>
+							{/each}
+						</dl>
+					{/if}
+
+					{#if fields.length === 0 && extra.length === 0}
+						<p class="text-muted-foreground text-sm italic">{t.noData}</p>
+					{/if}
+				</article>
+			{/each}
+		{/each}
+	</div>
+{/if}

package/dist/admin/client/booking/participant-data-panel.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { FieldDef, AgeFlagConfig } from '../../../booking/participant-fields/types.js';
+interface PanelItem {
+    id: string;
+    departureDate: Date | string | null;
+    participantFields: FieldDef[];
+}
+interface PanelParticipant {
+    id: string;
+    itemId: string;
+    data: Record<string, unknown>;
+}
+type $$ComponentProps = {
+    items: PanelItem[];
+    participants: PanelParticipant[];
+    ageFlag: AgeFlagConfig | null;
+    lang: 'pl' | 'en';
+    /** When provided, staff/both fields become editable; saves the merged patch. */
+    onSave?: (participantId: string, data: Record<string, unknown>) => Promise<void>;
+};
+declare const ParticipantDataPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ParticipantDataPanel = ReturnType<typeof ParticipantDataPanel>;
+export default ParticipantDataPanel;