includio-cms 0.25.0 → 0.26.0

package/dist/admin/client/shop/coupons-list-page.svelte

@@ -1,135 +1,279 @@
 <script lang="ts">
 	import { getRemotes } from '../../../sveltekit/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
+	import { sidebarLang } from '../../components/layout/lang.js';
 	import { Button } from '../../../components/ui/button/index.js';
 	import PlusIcon from '@tabler/icons-svelte/icons/plus';
-	import EditIcon from '@tabler/icons-svelte/icons/edit';
-	import TrashIcon from '@tabler/icons-svelte/icons/trash';
+	import { formatPlnPrice, formatShortDateOnly } 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 type { ColumnDef, PaginationState } from '@tanstack/table-core';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	type CouponRow = {
+		id: string;
+		code: string;
+		type: string;
+		value: string | number;
+		minOrderAmount: number | null;
+		usedCount: number;
+		maxUses: number | null;
+		expiresAt: Date | string | null;
+		isActive: boolean;
+	};
+
+	type Props = {
+		data?: CouponRow[];
+		state?: 'loading' | 'error' | 'ok';
+	};
+
+	let { data: injectedData, state: injectedState }: Props = $props();
+	const useInjectedData = $derived(injectedData !== undefined);
 
 	const remotes = getRemotes();
-	const query = $derived(remotes.listCouponsAdmin());
+	const interfaceLanguage = useInterfaceLanguage();
+	const breadcrumbs = getBreadcrumbs();
+
+	$effect(() => {
+		const s = sidebarLang[interfaceLanguage.current].shop;
+		breadcrumbs.state = [{ label: s.title }, { label: s.coupons }];
+	});
+
+	const couponsQuery = $derived(useInjectedData ? null : remotes.listCouponsAdmin());
+
+	const allRows = $derived<CouponRow[]>(
+		useInjectedData
+			? (injectedData ?? [])
+			: ((couponsQuery?.current as CouponRow[] | undefined) ?? [])
+	);
+	const isLoading = $derived(
+		useInjectedData ? injectedState === 'loading' : !(couponsQuery?.ready ?? false)
+	);
+	const isError = $derived(
+		useInjectedData ? injectedState === 'error' : Boolean(couponsQuery?.error)
+	);
 
-	function formatValue(type: string, value: string): string {
-		const num = Number(value);
+	let searchQuery = $state('');
+	let activeFilter = $state<string | null>(null);
+	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 20 });
+
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			title: string;
+			search: string;
+			searchPlaceholder: string;
+			filterActive: string;
+			activeYes: string;
+			activeNo: string;
+			addCoupon: string;
+			emptyTitle: string;
+			emptyDescription: string;
+			columnCode: string;
+			columnValue: string;
+			columnMinOrder: string;
+			columnUsed: string;
+			columnExpires: string;
+			columnStatus: string;
+			noResults: string;
+			never: string;
+		}
+	> = {
+		en: {
+			title: 'Coupons',
+			search: 'Search',
+			searchPlaceholder: 'Search by code…',
+			filterActive: 'Active',
+			activeYes: 'Active',
+			activeNo: 'Paused',
+			addCoupon: 'Add coupon',
+			emptyTitle: 'No coupons yet',
+			emptyDescription: 'Add your first coupon to offer discounts at checkout.',
+			columnCode: 'Code',
+			columnValue: 'Value',
+			columnMinOrder: 'Min. order',
+			columnUsed: 'Used',
+			columnExpires: 'Expires',
+			columnStatus: 'Status',
+			noResults: 'No results.',
+			never: '—'
+		},
+		pl: {
+			title: 'Kody rabatowe',
+			search: 'Szukaj',
+			searchPlaceholder: 'Szukaj po kodzie…',
+			filterActive: 'Aktywność',
+			activeYes: 'Aktywny',
+			activeNo: 'Wstrzymany',
+			addCoupon: 'Dodaj kod',
+			emptyTitle: 'Brak kodów rabatowych',
+			emptyDescription: 'Dodaj pierwszy kod, aby oferować zniżki przy zakupie.',
+			columnCode: 'Kod',
+			columnValue: 'Wartość',
+			columnMinOrder: 'Min. zamów.',
+			columnUsed: 'Wykorzystano',
+			columnExpires: 'Wygasa',
+			columnStatus: 'Status',
+			noResults: 'Brak wyników.',
+			never: '—'
+		}
+	};
+	const t = $derived(lang[interfaceLanguage.current]);
+
+	function formatValue(type: string, value: string | number): string {
+		const num = typeof value === 'string' ? Number(value) : value;
 		if (type === 'percent') return `${num}%`;
-		return new Intl.NumberFormat('pl-PL', {
-			style: 'currency',
-			currency: 'PLN',
-			minimumFractionDigits: 2
-		}).format(num);
+		return formatPlnPrice(num);
 	}
 
-	function formatDate(d: Date | string | null): string {
-		if (!d) return '—';
-		return new Intl.DateTimeFormat('pl-PL', {
-			dateStyle: 'short'
-		}).format(new Date(d));
+	function formatMinOrder(amountInCents: number | null): string {
+		if (amountInCents == null) return t.never;
+		return formatPlnPrice(amountInCents / 100);
 	}
 
-	async function handleDelete(id: string, code: string) {
-		if (!confirm(`Usunąć kod „${code}”? Tej operacji nie można cofnąć.`)) return;
-		try {
-			await remotes.deleteCouponCmd(id);
-			await query.refresh();
-		} catch (err) {
-			alert(err instanceof Error ? err.message : 'Nie udało się usunąć kodu.');
+	const filteredRows = $derived.by(() => {
+		const q = searchQuery.trim().toLowerCase();
+		let list = allRows;
+		if (q) list = list.filter((c) => c.code.toLowerCase().includes(q));
+		if (activeFilter !== null) {
+			const wantActive = activeFilter === 'active';
+			list = list.filter((c) => c.isActive === wantActive);
 		}
-	}
+		return list;
+	});
+
+	const totalItems = $derived(filteredRows.length);
+	const pageCount = $derived(Math.max(1, Math.ceil(totalItems / pagination.pageSize)));
+
+	const dataFilters = $derived([
+		{
+			slug: 'isActive',
+			label: t.filterActive,
+			options: [
+				{ value: 'active', label: t.activeYes },
+				{ value: 'inactive', label: t.activeNo }
+			]
+		}
+	]);
+	const activeDataFilters = $derived({ isActive: activeFilter });
+
+	const columns = $derived.by<ColumnDef<CouponRow>[]>(() => [
+		{
+			accessorKey: 'code',
+			header: t.columnCode,
+			cell: (info) =>
+				renderComponent(EntryLink, {
+					name: info.row.original.code,
+					url: `/admin/shop/coupons/${info.row.original.id}`
+				})
+		},
+		{
+			accessorKey: 'value',
+			header: t.columnValue,
+			cell: (info) => formatValue(info.row.original.type, info.row.original.value)
+		},
+		{
+			accessorKey: 'minOrderAmount',
+			header: t.columnMinOrder,
+			cell: (info) => formatMinOrder(info.row.original.minOrderAmount)
+		},
+		{
+			accessorKey: 'usedCount',
+			header: t.columnUsed,
+			cell: (info) => {
+				const r = info.row.original;
+				return r.maxUses != null ? `${r.usedCount} / ${r.maxUses}` : `${r.usedCount}`;
+			}
+		},
+		{
+			accessorKey: 'expiresAt',
+			header: t.columnExpires,
+			cell: (info) =>
+				info.row.original.expiresAt
+					? formatShortDateOnly(info.row.original.expiresAt, interfaceLanguage.current)
+					: t.never
+		},
+		{
+			accessorKey: 'isActive',
+			header: t.columnStatus,
+			cell: (info) =>
+				renderComponent(StatusBadge, {
+					variant: 'boolean',
+					active: info.row.original.isActive,
+					activeLabel: t.activeYes,
+					inactiveLabel: t.activeNo
+				})
+		}
+	]);
 </script>
 
-<div class="flex items-center justify-between gap-4 p-6">
-	<div>
-		<h1 class="text-2xl font-extrabold tracking-tight">Kody rabatowe</h1>
-		<p class="text-muted-foreground text-sm">
-			{#if query.ready}
-				{query.current?.length ?? 0}
-				{(query.current?.length ?? 0) === 1 ? 'kod' : 'kodów'}
-			{:else}
-				Ładowanie…
-			{/if}
-		</p>
-	</div>
-	<Button href="/admin/shop/coupons/new">
-		<PlusIcon class="mr-1 size-4" />
-		Dodaj kod
-	</Button>
-</div>
+<div class="p-5 pb-24 md:p-7">
+	<PageHeader title={t.title} count={!isLoading && !isError ? allRows.length : undefined}>
+		{#snippet primaryActions()}
+			<Button href="/admin/shop/coupons/new">
+				<PlusIcon class="size-4" />
+				{t.addCoupon}
+			</Button>
+		{/snippet}
+	</PageHeader>
+
+	{#if isError}
+		<StateDisplay kind="error" />
+	{:else if isLoading}
+		<StateDisplay kind="loading" />
+	{:else if allRows.length === 0}
+		<StateDisplay
+			kind="empty"
+			title={t.emptyTitle}
+			description={t.emptyDescription}
+			ctaLabel={t.addCoupon}
+			onCta={() => (window.location.href = '/admin/shop/coupons/new')}
+		/>
+	{:else}
+		<TableToolbar
+			{searchQuery}
+			searchPlaceholder={t.searchPlaceholder}
+			searchLabel={t.search}
+			onSearchChange={(q) => {
+				searchQuery = q;
+				pagination = { ...pagination, pageIndex: 0 };
+			}}
+			hideStatusFilter
+			hideViewToggle
+			{dataFilters}
+			{activeDataFilters}
+			onDataFilterChange={(_slug, value) => {
+				activeFilter = value;
+				pagination = { ...pagination, pageIndex: 0 };
+			}}
+		/>
+
+		<div class="overflow-hidden rounded-xl border bg-card shadow-sm">
+			<DataTable
+				data={filteredRows}
+				{columns}
+				enablePagination
+				{pagination}
+				onPaginationChange={(p) => (pagination = p)}
+				emptyTitle={t.noResults}
+			/>
 
-{#if query.ready && query.current && query.current.length > 0}
-	<div class="px-6 pb-6">
-		<div class="border-border bg-card overflow-hidden rounded-xl border">
-			<table class="w-full text-sm">
-				<thead class="text-muted-foreground bg-muted/50 text-left text-xs uppercase">
-					<tr>
-						<th class="px-4 py-3 font-semibold">Kod</th>
-						<th class="px-4 py-3 font-semibold">Wartość</th>
-						<th class="px-4 py-3 font-semibold">Min. zamów.</th>
-						<th class="px-4 py-3 font-semibold">Wykorzystano</th>
-						<th class="px-4 py-3 font-semibold">Wygasa</th>
-						<th class="px-4 py-3 font-semibold">Status</th>
-						<th class="px-4 py-3"></th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each query.current as c (c.id)}
-						<tr class="border-border border-t">
-							<td class="px-4 py-3 font-mono font-semibold">{c.code}</td>
-							<td class="px-4 py-3">{formatValue(c.type, c.value)}</td>
-							<td class="text-muted-foreground px-4 py-3">
-								{c.minOrderAmount != null
-									? new Intl.NumberFormat('pl-PL', {
-											style: 'currency',
-											currency: 'PLN',
-											minimumFractionDigits: 2
-										}).format(c.minOrderAmount / 100)
-									: '—'}
-							</td>
-							<td class="px-4 py-3">
-								{c.usedCount}{c.maxUses != null ? ` / ${c.maxUses}` : ''}
-							</td>
-							<td class="text-muted-foreground px-4 py-3 text-xs">
-								{formatDate(c.expiresAt)}
-							</td>
-							<td class="px-4 py-3">
-								{#if c.isActive}
-									<span class="rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-800"
-										>aktywny</span
-									>
-								{:else}
-									<span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-800">
-										wstrzymany
-									</span>
-								{/if}
-							</td>
-							<td class="px-4 py-3 text-right">
-								<div class="flex justify-end gap-1">
-									<Button
-										href="/admin/shop/coupons/{c.id}"
-										variant="ghost"
-										size="sm"
-										title="Edytuj"
-									>
-										<EditIcon class="size-4" />
-									</Button>
-									<Button
-										onclick={() => handleDelete(c.id, c.code)}
-										variant="ghost"
-										size="sm"
-										title="Usuń"
-									>
-										<TrashIcon class="size-4" />
-									</Button>
-								</div>
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
+			<TablePagination
+				pageIndex={pagination.pageIndex}
+				pageSize={pagination.pageSize}
+				{pageCount}
+				{totalItems}
+				onPageChange={(p) => (pagination = { ...pagination, pageIndex: p })}
+				onPageSizeChange={(s) => (pagination = { pageIndex: 0, pageSize: s })}
+			/>
 		</div>
-	</div>
-{:else if query.ready}
-	<div class="text-muted-foreground p-6 text-sm">
-		Brak kodów rabatowych. <a href="/admin/shop/coupons/new" class="text-primary hover:underline"
-			>Dodaj pierwszy</a
-		>.
-	</div>
-{/if}
+	{/if}
+
+</div>

package/dist/admin/client/shop/coupons-list-page.svelte.d.ts

@@ -1,3 +1,18 @@
-declare const CouponsListPage: import("svelte").Component<Record<string, never>, {}, "">;
+type CouponRow = {
+    id: string;
+    code: string;
+    type: string;
+    value: string | number;
+    minOrderAmount: number | null;
+    usedCount: number;
+    maxUses: number | null;
+    expiresAt: Date | string | null;
+    isActive: boolean;
+};
+type Props = {
+    data?: CouponRow[];
+    state?: 'loading' | 'error' | 'ok';
+};
+declare const CouponsListPage: import("svelte").Component<Props, {}, "">;
 type CouponsListPage = ReturnType<typeof CouponsListPage>;
 export default CouponsListPage;

package/dist/admin/client/shop/shipping-method-edit-page.svelte

@@ -5,35 +5,108 @@
 	import { Button } from '../../../components/ui/button/index.js';
 	import TrashIcon from '@tabler/icons-svelte/icons/trash';
 	import ShippingMethodForm, { type ShippingFormPayload } from './shipping-method-form.svelte';
+	import DetailPageShell from '../../components/layout/detail-page-shell.svelte';
+	import StateDisplay from '../collection/state-display.svelte';
+	import ConfirmationDialog from '../../components/dialogs/confirmation-dialog.svelte';
+	import SaveIndicator from '../entry/header/save-indicator.svelte';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
+	import { sidebarLang } from '../../components/layout/lang.js';
+	import { resolveI18n } from '../../../shop/pricing.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	const remotes = getRemotes();
+	const interfaceLanguage = useInterfaceLanguage();
+	const breadcrumbs = getBreadcrumbs();
 
 	const methodId = $derived(page.params.id ?? '');
 	const methodQuery = $derived(remotes.getShippingMethodForAdmin(methodId));
 	const configQuery = $derived(remotes.getShopConfig());
 
+	$effect(() => {
+		const s = sidebarLang[interfaceLanguage.current].shop;
+		const name = methodQuery.current?.name as Record<string, string> | undefined;
+		const label = name ? resolveI18n(name, interfaceLanguage.current, '') : '…';
+		breadcrumbs.state = [
+			{ label: s.title },
+			{ label: s.shipping, href: '/admin/shop/shipping-methods' },
+			{ label: label || '…' }
+		];
+	});
+
+	type SaveStatus = 'idle' | 'saving' | 'saved' | 'unsaved' | 'error';
+
 	let saving = $state(false);
+	let saveStatus = $state<SaveStatus>('idle');
+	let lastSavedAt = $state<Date | null>(null);
 	let deleting = $state(false);
 	let errorMessage = $state<string | null>(null);
-	let successMessage = $state<string | null>(null);
-	let confirmingDelete = $state(false);
+	let confirmDeleteOpen = $state(false);
+
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			title: string;
+			description: string;
+			deleteLabel: string;
+			confirmDeleteTitle: string;
+			confirmDeleteDescription: string;
+			notFoundTitle: string;
+			notFoundDescription: string;
+			backToList: string;
+			loading: string;
+		}
+	> = {
+		pl: {
+			title: 'Edycja metody wysyłki',
+			description: 'Zmień nazwę, cenę, VAT lub zasady doręczenia.',
+			deleteLabel: 'Usuń metodę',
+			confirmDeleteTitle: 'Usunąć metodę wysyłki?',
+			confirmDeleteDescription:
+				'Aktywne zamówienia z tą metodą pozostaną nienaruszone, ale nie pojawi się więcej w koszyku. Tej akcji nie cofniesz.',
+			notFoundTitle: 'Nie znaleziono metody',
+			notFoundDescription: 'Mogła zostać usunięta lub link jest nieaktualny.',
+			backToList: 'Wróć do listy',
+			loading: 'Wczytuję…'
+		},
+		en: {
+			title: 'Edit shipping method',
+			description: 'Update the name, price, VAT or delivery rules.',
+			deleteLabel: 'Delete method',
+			confirmDeleteTitle: 'Delete shipping method?',
+			confirmDeleteDescription:
+				'Existing orders with this method stay intact, but it will no longer appear at checkout. This cannot be undone.',
+			notFoundTitle: 'Method not found',
+			notFoundDescription: 'It may have been deleted or the link is outdated.',
+			backToList: 'Back to list',
+			loading: 'Loading…'
+		}
+	};
+
+	const t = $derived(lang[interfaceLanguage.current]);
 
 	async function handleSubmit(payload: ShippingFormPayload) {
 		saving = true;
+		saveStatus = 'saving';
 		errorMessage = null;
-		successMessage = null;
 		try {
 			await remotes.updateShippingMethodCmd({ id: methodId, input: payload });
 			await methodQuery.refresh();
-			successMessage = 'Zapisano zmiany.';
+			saveStatus = 'saved';
+			lastSavedAt = new Date();
 		} catch (err) {
 			errorMessage = err instanceof Error ? err.message : 'Nie udało się zapisać';
+			saveStatus = 'error';
 		} finally {
 			saving = false;
 		}
 	}
 
-	async function handleDelete() {
+	function handleDelete() {
+		confirmDeleteOpen = true;
+	}
+
+	async function performDelete() {
 		deleting = true;
 		try {
 			await remotes.deleteShippingMethodCmd(methodId);
@@ -45,59 +118,27 @@
 	}
 </script>
 
-{#if !methodQuery.ready || !configQuery.ready}
-	<div class="text-muted-foreground p-6">Ładowanie…</div>
-{:else if !methodQuery.current}
-	<div class="p-6">
-		<p class="mb-4">Metoda nie została znaleziona.</p>
-		<Button href="/admin/shop/shipping-methods" variant="outline">← Wróć do listy</Button>
-	</div>
-{:else if configQuery.current}
-	<div class="space-y-6 p-6">
-		<div class="flex items-start justify-between gap-4">
-			<div>
-				<h1 class="text-2xl font-extrabold tracking-tight">Edycja metody wysyłki</h1>
-				<a href="/admin/shop/shipping-methods" class="text-muted-foreground text-sm hover:underline"
-					>← Wróć do listy</a
-				>
-			</div>
-			<div>
-				{#if confirmingDelete}
-					<div class="flex items-center gap-2">
-						<span class="text-sm">Na pewno?</span>
-						<Button
-							type="button"
-							variant="destructive"
-							size="sm"
-							onclick={handleDelete}
-							disabled={deleting}
-						>
-							{deleting ? 'Usuwanie…' : 'Usuń'}
-						</Button>
-						<Button
-							type="button"
-							variant="outline"
-							size="sm"
-							onclick={() => (confirmingDelete = false)}>Anuluj</Button
-						>
-					</div>
-				{:else}
-					<Button
-						type="button"
-						variant="outline"
-						size="sm"
-						onclick={() => (confirmingDelete = true)}
-					>
-						<TrashIcon class="mr-1 size-4" /> Usuń
-					</Button>
-				{/if}
-			</div>
-		</div>
-
-		{#if successMessage}
-			<div class="rounded-lg bg-green-50 p-3 text-sm text-green-800">{successMessage}</div>
-		{/if}
+<DetailPageShell title={t.title} description={t.description}>
+	{#snippet secondaryActions()}
+		<SaveIndicator status={saveStatus} {lastSavedAt} />
+	{/snippet}
+	{#snippet primaryActions()}
+		<Button type="button" variant="outline" size="sm" onclick={handleDelete}>
+			<TrashIcon class="mr-1 size-4" /> {t.deleteLabel}
+		</Button>
+	{/snippet}
 
+	{#if !methodQuery.ready || !configQuery.ready}
+		<StateDisplay kind="loading" />
+	{:else if !methodQuery.current || !configQuery.current}
+		<StateDisplay
+			kind="error"
+			title={t.notFoundTitle}
+			description={t.notFoundDescription}
+			ctaLabel={t.backToList}
+			onCta={() => goto('/admin/shop/shipping-methods')}
+		/>
+	{:else}
 		<ShippingMethodForm
 			languages={configQuery.current.languages}
 			vatRates={configQuery.current.vatRates}
@@ -107,5 +148,13 @@
 			{errorMessage}
 			onsubmit={handleSubmit}
 		/>
-	</div>
-{/if}
+	{/if}
+</DetailPageShell>
+
+<ConfirmationDialog
+	bind:open={confirmDeleteOpen}
+	title={t.confirmDeleteTitle}
+	description={t.confirmDeleteDescription}
+	loading={deleting}
+	onConfirm={performDelete}
+/>