includio-cms 0.36.8 → 0.37.0

package/dist/admin/client/booking/reservations-page.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { formatCentsPrice, formatDateTime } from '../../utils/formatters.js';
+	import PageHeader from '../../components/layout/page-header.svelte';
+	import DataTable from '../collection/data-table.svelte';
+	import TableToolbar from '../collection/table-toolbar.svelte';
+	import TablePagination from '../collection/table-pagination.svelte';
+	import StateDisplay from '../collection/state-display.svelte';
+	import StatusBadge from '../collection/status-badge.svelte';
+	import EntryLink from '../collection/entry-link.svelte';
+	import { renderComponent } from '../../../components/ui/data-table/render-helpers.js';
+	import { customerSummary } from './customer-view.js';
+	import type { ColumnDef, PaginationState } from '@tanstack/table-core';
+	import type { BookingStatus } from '../../../booking/state-machine.js';
+
+	type BookingRow = {
+		id: string;
+		number: string;
+		status: BookingStatus;
+		currency: string;
+		customer: Record<string, unknown>;
+		totals: { gross: number; balance: number };
+		createdAt: Date | string;
+	};
+
+	const remotes = getRemotes();
+	const interfaceLanguage = useInterfaceLanguage();
+
+	let statusFilter = $state<string | null>(null);
+	let searchQuery = $state('');
+	let appliedSearch = $state('');
+	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 50 });
+	let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const bookingsQuery = $derived(
+		remotes.listBookings({
+			status: (statusFilter as BookingStatus | null) ?? undefined,
+			search: appliedSearch || undefined,
+			limit: pagination.pageSize,
+			offset: pagination.pageIndex * pagination.pageSize
+		})
+	);
+
+	const items = $derived<BookingRow[]>((bookingsQuery.current?.items as BookingRow[]) ?? []);
+	const total = $derived(bookingsQuery.current?.total ?? 0);
+	const isLoading = $derived(!bookingsQuery.ready);
+	const isError = $derived(Boolean(bookingsQuery.error));
+	const pageCount = $derived(Math.max(1, Math.ceil(total / pagination.pageSize)));
+
+	const t = $derived(
+		interfaceLanguage.current === 'pl'
+			? {
+					title: 'Rezerwacje',
+					search: 'Szukaj',
+					searchPlaceholder: 'Szukaj po numerze, imieniu lub e-mailu…',
+					filterStatus: 'Status',
+					number: 'Numer',
+					created: 'Utworzono',
+					customer: 'Klient',
+					total: 'Wartość',
+					balance: 'Saldo',
+					status: 'Status',
+					emptyTitle: 'Brak rezerwacji',
+					emptyDescription: 'Gdy ktoś zarezerwuje, pojawi się tutaj.',
+					noResults: 'Brak wyników.',
+					statusDraft: 'Czeka na zaliczkę',
+					statusReserved: 'Zarezerwowane',
+					statusPartiallyPaid: 'Częściowo opłacone',
+					statusPaid: 'Opłacone',
+					statusCompleted: 'Zakończone',
+					statusCancelled: 'Anulowane'
+				}
+			: {
+					title: 'Reservations',
+					search: 'Search',
+					searchPlaceholder: 'Search by number, name or email…',
+					filterStatus: 'Status',
+					number: 'Number',
+					created: 'Created',
+					customer: 'Customer',
+					total: 'Total',
+					balance: 'Balance',
+					status: 'Status',
+					emptyTitle: 'No reservations yet',
+					emptyDescription: 'Reservations will appear here as soon as someone books.',
+					noResults: 'No results.',
+					statusDraft: 'Awaiting deposit',
+					statusReserved: 'Reserved',
+					statusPartiallyPaid: 'Partially paid',
+					statusPaid: 'Paid',
+					statusCompleted: 'Completed',
+					statusCancelled: 'Cancelled'
+				}
+	);
+
+	const dataFilters = $derived([
+		{
+			slug: 'status',
+			label: t.filterStatus,
+			options: [
+				{ value: 'draft', label: t.statusDraft },
+				{ value: 'reserved', label: t.statusReserved },
+				{ value: 'partially_paid', label: t.statusPartiallyPaid },
+				{ value: 'paid', label: t.statusPaid },
+				{ value: 'completed', label: t.statusCompleted },
+				{ value: 'cancelled', label: t.statusCancelled }
+			]
+		}
+	]);
+	const activeDataFilters = $derived({ status: statusFilter });
+
+	function scheduleSearchUpdate(value: string) {
+		if (searchDebounceTimer) clearTimeout(searchDebounceTimer);
+		searchDebounceTimer = setTimeout(() => {
+			appliedSearch = value.trim();
+			pagination = { ...pagination, pageIndex: 0 };
+		}, 350);
+	}
+
+	const columns = $derived.by<ColumnDef<BookingRow>[]>(() => [
+		{
+			accessorKey: 'number',
+			header: t.number,
+			cell: (info) =>
+				renderComponent(EntryLink, {
+					name: info.row.original.number,
+					url: `/admin/booking/reservations/${info.row.original.id}`
+				})
+		},
+		{
+			accessorKey: 'createdAt',
+			header: t.created,
+			cell: (info) => formatDateTime(info.row.original.createdAt, interfaceLanguage.current)
+		},
+		{
+			id: 'customer',
+			header: t.customer,
+			cell: (info) => {
+				const row = info.row.original;
+				const s = customerSummary(row.customer ?? {});
+				return renderComponent(EntryLink, {
+					name: s.name ?? s.email ?? '—',
+					url: `/admin/booking/reservations/${row.id}`,
+					slug: s.name && s.email ? s.email : undefined
+				});
+			}
+		},
+		{
+			id: 'gross',
+			header: t.total,
+			cell: (info) => formatCentsPrice(info.row.original.totals.gross, info.row.original.currency)
+		},
+		{
+			id: 'balance',
+			header: t.balance,
+			cell: (info) => formatCentsPrice(info.row.original.totals.balance, info.row.original.currency)
+		},
+		{
+			accessorKey: 'status',
+			header: t.status,
+			cell: (info) =>
+				renderComponent(StatusBadge, { variant: 'booking', status: info.row.original.status })
+		}
+	]);
+</script>
+
+<div class="p-5 pb-24 md:p-7">
+	<PageHeader title={t.title} count={!isLoading && !isError ? total : undefined} />
+
+	{#if !isLoading && !isError && total === 0 && !statusFilter && !appliedSearch}
+		<StateDisplay kind="empty" title={t.emptyTitle} description={t.emptyDescription} />
+	{:else}
+		<TableToolbar
+			{searchQuery}
+			searchPlaceholder={t.searchPlaceholder}
+			searchLabel={t.search}
+			onSearchChange={(q) => {
+				searchQuery = q;
+				scheduleSearchUpdate(q);
+			}}
+			hideStatusFilter
+			hideViewToggle
+			{dataFilters}
+			{activeDataFilters}
+			onDataFilterChange={(_slug, value) => {
+				statusFilter = value;
+				pagination = { ...pagination, pageIndex: 0 };
+			}}
+		/>
+
+		<div class="bg-card overflow-hidden rounded-xl border shadow-sm">
+			{#if isError}
+				<StateDisplay kind="error" />
+			{:else if isLoading && items.length === 0}
+				<StateDisplay kind="loading" />
+			{:else}
+				<DataTable
+					data={items}
+					{columns}
+					enablePagination
+					manualPagination
+					{pageCount}
+					rowCount={total}
+					{pagination}
+					onPaginationChange={(p) => (pagination = p)}
+					emptyTitle={t.noResults}
+				/>
+
+				<TablePagination
+					pageIndex={pagination.pageIndex}
+					pageSize={pagination.pageSize}
+					{pageCount}
+					totalItems={total}
+					onPageChange={(p) => (pagination = { ...pagination, pageIndex: p })}
+					onPageSizeChange={(s) => (pagination = { pageIndex: 0, pageSize: s })}
+				/>
+			{/if}
+		</div>
+	{/if}
+</div>

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

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

package/dist/admin/client/collection/collection-entries.svelte

@@ -4,6 +4,7 @@
 	import { getEntryThumbnail, type MediaThumbnailLookup } from '../../utils/entryThumbnail.js';
 	import { arrayMove } from '../../utils/arrayMove.js';
 	import { getRemotes } from '../../../sveltekit/index.js';
+	import { goto } from '$app/navigation';
 	import type { CollectionConfigWithType } from '../../../types/collections.js';
 	import DataTable from './data-table.svelte';
 	import type { ColumnDef, RowSelectionState, Table } from '@tanstack/table-core';
@@ -54,6 +55,8 @@
 			entryRestored: string;
 			entriesRestored: string;
 			entryDeleted: string;
+			entryDuplicated: string;
+			entryDuplicateFailed: string;
 			deleteConfirmTitle: string;
 			deleteConfirmDescription: string;
 			cancel: string;
@@ -74,6 +77,8 @@
 			entryRestored: 'Entry restored',
 			entriesRestored: 'Entries restored',
 			entryDeleted: 'Entry permanently deleted',
+			entryDuplicated: 'Duplicate created (draft)',
+			entryDuplicateFailed: 'Failed to duplicate entry',
 			deleteConfirmTitle: 'Delete entry permanently?',
 			deleteConfirmDescription:
 				'This action cannot be undone. The entry will be permanently deleted.',
@@ -94,6 +99,8 @@
 			entryRestored: 'Wpis przywrócony',
 			entriesRestored: 'Wpisy przywrócone',
 			entryDeleted: 'Wpis trwale usunięty',
+			entryDuplicated: 'Utworzono duplikat (szkic)',
+			entryDuplicateFailed: 'Nie udało się zduplikować wpisu',
 			deleteConfirmTitle: 'Usunąć wpis na stałe?',
 			deleteConfirmDescription: 'Ta akcja jest nieodwracalna. Wpis zostanie trwale usunięty.',
 			cancel: 'Anuluj',
@@ -310,7 +317,7 @@
 				return renderComponent(EntryLink, {
 					name: info.row.original.name,
 					url: info.row.original.url,
-					slug: info.row.original.slug
+					path: info.row.original.slug
 				});
 			}
 		},
@@ -374,7 +381,9 @@
 					entryUrl: info.row.original.url,
 					entryName: info.row.original.name,
 					onArchive: () => handleArchiveSingle(info.row.original.id),
-					...(isArchivedFilter ? { onDelete: () => handleDelete(info.row.original.id), onRestore: () => handleRestoreSingle(info.row.original.id) } : {})
+					...(isArchivedFilter
+						? { onDelete: () => handleDelete(info.row.original.id), onRestore: () => handleRestoreSingle(info.row.original.id) }
+						: { onDuplicate: () => handleDuplicate(info.row.original.id) })
 				}),
 			enableSorting: false,
 			size: 50
@@ -393,6 +402,16 @@
 		override.release();
 	}
 
+	async function handleDuplicate(id: string) {
+		try {
+			const { id: newId } = await remotes.duplicateEntryCommand(id);
+			toast.success(lang[interfaceLanguage.current].entryDuplicated);
+			await goto(`/admin/entries/${newId}`);
+		} catch {
+			toast.error(lang[interfaceLanguage.current].entryDuplicateFailed);
+		}
+	}
+
 	async function handleRestoreSingle(id: string) {
 		const override = entriesQuery.withOverride((old) => ({
 			...old,

package/dist/admin/client/collection/entry-link.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
 	type Props = {
 		name: string;
+		/** Admin edit link for this entry. */
 		url: string;
-		slug?: string;
+		/** Public path of the entry — already absolute (`resolveEntryUrl`), never prefix it. */
+		path?: string;
 	};
 
-	let { name, url, slug }: Props = $props();
+	let { name, url, path }: Props = $props();
 </script>
 
 <div>
 	<a href={url} class="font-medium text-foreground hover:text-primary hover:underline">
 		{name}
 	</a>
-	{#if slug}
-		<div class="text-[11px] text-muted-foreground font-mono mt-0.5 truncate max-w-[200px]">/{slug}</div>
+	{#if path}
+		<div class="text-[11px] text-muted-foreground font-mono mt-0.5 truncate max-w-[200px]">{path}</div>
 	{/if}
 </div>

package/dist/admin/client/collection/entry-link.svelte.d.ts

@@ -1,7 +1,9 @@
 type Props = {
     name: string;
+    /** Admin edit link for this entry. */
     url: string;
-    slug?: string;
+    /** Public path of the entry — already absolute (`resolveEntryUrl`), never prefix it. */
+    path?: string;
 };
 declare const EntryLink: import("svelte").Component<Props, {}, "">;
 type EntryLink = ReturnType<typeof EntryLink>;

package/dist/admin/client/collection/row-actions.svelte

@@ -4,6 +4,7 @@
 	import Archive from '@tabler/icons-svelte/icons/archive';
 	import ArchiveOff from '@tabler/icons-svelte/icons/archive-off';
 	import Trash from '@tabler/icons-svelte/icons/trash';
+	import Copy from '@tabler/icons-svelte/icons/copy';
 	import Button from '../../../components/ui/button/button.svelte';
 	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
@@ -14,17 +15,18 @@
 		entryUrl: string;
 		entryName: string;
 		onArchive: () => void;
+		onDuplicate?: () => void;
 		onDelete?: () => void;
 		onRestore?: () => void;
 	};
 
-	let { entryUrl, entryName, onArchive, onDelete, onRestore }: Props = $props();
+	let { entryUrl, entryName, onArchive, onDuplicate, onDelete, onRestore }: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
 
-	const lang: Record<InterfaceLanguage, { open: string; archive: string; restore: string; delete: string; moreActions: string }> = {
-		en: { open: 'Open', archive: 'Archive', restore: 'Restore', delete: 'Delete', moreActions: 'More actions for' },
-		pl: { open: 'Otwórz', archive: 'Archiwizuj', restore: 'Przywróć', delete: 'Usuń', moreActions: 'Więcej akcji dla' }
+	const lang: Record<InterfaceLanguage, { open: string; duplicate: string; archive: string; restore: string; delete: string; moreActions: string }> = {
+		en: { open: 'Open', duplicate: 'Duplicate', archive: 'Archive', restore: 'Restore', delete: 'Delete', moreActions: 'More actions for' },
+		pl: { open: 'Otwórz', duplicate: 'Duplikuj', archive: 'Archiwizuj', restore: 'Przywróć', delete: 'Usuń', moreActions: 'Więcej akcji dla' }
 	};
 
 	const t = $derived(lang[interfaceLanguage.current]);
@@ -51,6 +53,12 @@
 			{t.open}
 		</DropdownMenu.Item>
 		<DropdownMenu.Separator />
+		{#if onDuplicate}
+		<DropdownMenu.Item onclick={onDuplicate} data-testid="row-action-duplicate">
+			<Copy class="mr-2 size-4" />
+			{t.duplicate}
+		</DropdownMenu.Item>
+		{/if}
 		{#if onRestore}
 		<DropdownMenu.Item onclick={onRestore} data-testid="row-action-restore">
 			<ArchiveOff class="mr-2 size-4" />

package/dist/admin/client/collection/row-actions.svelte.d.ts

@@ -2,6 +2,7 @@ type Props = {
     entryUrl: string;
     entryName: string;
     onArchive: () => void;
+    onDuplicate?: () => void;
     onDelete?: () => void;
     onRestore?: () => void;
 };

package/dist/admin/client/collection/status-badge.svelte

@@ -1,21 +1,23 @@
 <script lang="ts">
 	import type { EntryStatus } from '../../../types/entries.js';
 	import type { OrderStatus } from '../../../shop/types.js';
+	import type { BookingStatus } from '../../../booking/state-machine.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	/**
-	 * StatusBadge accepts three usage modes (variants):
+	 * StatusBadge accepts four usage modes (variants):
 	 * - entry (default): pass `status` as `EntryStatus`
 	 * - order: pass `variant="order"` and `status` as `OrderStatus`
+	 * - booking: pass `variant="booking"` and `status` as `BookingStatus`
 	 * - boolean: pass `variant="boolean"` and `active: boolean`
 	 *
 	 * Type stays permissive (FlatProps) so consumers can pass any combination;
 	 * runtime narrows by `variant` and falls back to muted style on unknown.
 	 */
 	type Props = {
-		variant?: 'entry' | 'order' | 'boolean';
-		status?: EntryStatus | OrderStatus;
+		variant?: 'entry' | 'order' | 'boolean' | 'booking';
+		status?: EntryStatus | OrderStatus | BookingStatus;
 		active?: boolean;
 		activeLabel?: string;
 		inactiveLabel?: string;
@@ -92,6 +94,35 @@
 		}
 	};
 
+	const bookingStyles: Record<BookingStatus, StatusStyle> = {
+		draft: { dot: '◐', classes: 'bg-warning-bg text-warning' },
+		reserved: { dot: '●', classes: 'bg-info-bg text-info' },
+		partially_paid: { dot: '◐', classes: 'bg-warning-bg text-warning' },
+		paid: { dot: '●', classes: 'bg-success-bg text-success' },
+		completed: { dot: '●', classes: 'bg-success-bg text-success' },
+		cancelled: { dot: '○', classes: 'bg-muted text-muted-foreground' }
+	};
+
+	const bookingLabels: Record<InterfaceLanguage, Record<BookingStatus, string>> = {
+		en: {
+			draft: 'Awaiting deposit',
+			reserved: 'Reserved',
+			partially_paid: 'Partially paid',
+			paid: 'Paid',
+			completed: 'Completed',
+			cancelled: 'Cancelled'
+		},
+		pl: {
+			// „Szkic" nic nie mówi osobie prowadzącej rezerwacje — ona myśli „czeka na zaliczkę".
+			draft: 'Czeka na zaliczkę',
+			reserved: 'Zarezerwowane',
+			partially_paid: 'Częściowo opłacone',
+			paid: 'Opłacone',
+			completed: 'Zakończone',
+			cancelled: 'Anulowane'
+		}
+	};
+
 	const booleanDefaults: Record<InterfaceLanguage, { active: string; inactive: string }> = {
 		en: { active: 'Active', inactive: 'Inactive' },
 		pl: { active: 'Aktywny', inactive: 'Nieaktywny' }
@@ -106,6 +137,11 @@
 			if (!s || !(s in orderStyles)) return { style: fallbackStyle, label: String(s ?? '') };
 			return { style: orderStyles[s], label: orderLabels[lang][s] };
 		}
+		if (variant === 'booking') {
+			const s = status as BookingStatus | undefined;
+			if (!s || !(s in bookingStyles)) return { style: fallbackStyle, label: String(s ?? '') };
+			return { style: bookingStyles[s], label: bookingLabels[lang][s] };
+		}
 		if (variant === 'boolean') {
 			const isActive = active === true;
 			const fallback = booleanDefaults[lang];

package/dist/admin/client/collection/status-badge.svelte.d.ts

@@ -1,17 +1,19 @@
 import type { EntryStatus } from '../../../types/entries.js';
 import type { OrderStatus } from '../../../shop/types.js';
+import type { BookingStatus } from '../../../booking/state-machine.js';
 /**
- * StatusBadge accepts three usage modes (variants):
+ * StatusBadge accepts four usage modes (variants):
  * - entry (default): pass `status` as `EntryStatus`
  * - order: pass `variant="order"` and `status` as `OrderStatus`
+ * - booking: pass `variant="booking"` and `status` as `BookingStatus`
  * - boolean: pass `variant="boolean"` and `active: boolean`
  *
  * Type stays permissive (FlatProps) so consumers can pass any combination;
  * runtime narrows by `variant` and falls back to muted style on unknown.
  */
 type Props = {
-    variant?: 'entry' | 'order' | 'boolean';
-    status?: EntryStatus | OrderStatus;
+    variant?: 'entry' | 'order' | 'boolean' | 'booking';
+    status?: EntryStatus | OrderStatus | BookingStatus;
     active?: boolean;
     activeLabel?: string;
     inactiveLabel?: string;

package/dist/admin/client/entry/entry.svelte

@@ -33,6 +33,8 @@
 	import { getCollectionEntryDisplayLabel } from '../../utils/entryLabel.js';
 	import { getFieldsFromConfig, hasLayout } from '../../../core/fields/layoutUtils.js';
 	import { createHybridContext } from './hybrid/hybrid-context.svelte.js';
+	import { createPreviewViewsContext } from './preview-views-context.svelte.js';
+	import { normalizePreviews, buildPreviewUrl } from './preview-views.js';
 	import { onMount, setContext, tick } from 'svelte';
 	import { get } from 'svelte/store';
 	const contentLanguage = getContentLanguage();
@@ -111,6 +113,11 @@
 	let { collection } = entry;
 	const isArchived = $derived(!!entry.archivedAt);
 
+	// Preview views: `previewUrl` is normalized to a single view, so everything
+	// below only ever deals with an array. Empty array = collection has no preview.
+	const previewViews = createPreviewViewsContext(normalizePreviews(collection));
+	const hasPreview = previewViews.views.length > 0;
+
 	setContext('cms-path-template', collection.pathTemplate || null);
 	setContext('cms-entry-published', entry.publishedVersions[contentLanguage.current] != null);
 	setContext('cms-entry-id', entry.id);
@@ -431,9 +438,17 @@
 		}
 	}
 
-	const previewOrigin = collection.previewUrl
-		? getOriginFromUrl(collection.previewUrl)
-		: window.location.origin;
+	// Src of the active view — switching a view swaps the iframe src, which reloads
+	// the preview page; it then asks for the current (unsaved) form data via
+	// `preview-ready`, so nothing in the editor is lost.
+	const previewSrc = $derived(
+		previewViews.activeView
+			? buildPreviewUrl(previewViews.activeView, String(editingEntry.id))
+			: ''
+	);
+	const previewOrigin = $derived(
+		previewSrc ? getOriginFromUrl(previewSrc) : window.location.origin
+	);
 
 	const updatePreview = useDebounce(
 		async (window: Window, form: SuperForm<Record<string, unknown>>) => {
@@ -466,16 +481,16 @@
 
 	// Subscribe to form changes for preview updates
 	onMount(() => {
-		if (!collection.previewUrl) return;
+		if (!hasPreview) return;
 		const unsub = form.form.subscribe(() => {
 			onUpdate();
 		});
 		return () => unsub();
 	});
 
-	// Enable hybrid mode when collection has previewUrl
+	// Enable hybrid mode when the collection has at least one preview view
 	$effect(() => {
-		hybridContext.enabled = !!collection.previewUrl;
+		hybridContext.enabled = hasPreview;
 	});
 
 	// Send current form data + hybrid mode state to iframe
@@ -605,7 +620,7 @@
 	});
 
 	const t = $derived(lang[interfaceLanguage.current]);
-	const isHybrid = $derived(hybridContext.mode === 'hybrid' && !!collection.previewUrl);
+	const isHybrid = $derived(hybridContext.mode === 'hybrid' && hasPreview);
 
 	const errorPaths = $derived(new Set(validationErrors.map((e) => e.path)));
 
@@ -752,8 +767,10 @@
 							<div class="bg-accent h-full animate-pulse rounded-md"></div>
 						{:then { default: HybridPreview }}
 							<HybridPreview
-								{collection}
-								{editingEntry}
+								{previewSrc}
+								views={previewViews.views}
+								activeName={previewViews.activeName}
+								onSelectView={(name) => previewViews.select(name)}
 								bind:previewIframe
 								bind:sizePreset
 								{size}