includio-cms 0.25.0 → 0.27.0

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

@@ -1,188 +1,338 @@
 <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 DownloadIcon from '@tabler/icons-svelte/icons/download';
+	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 type { ColumnDef, PaginationState } from '@tanstack/table-core';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import type { OrderStatus } from '../../../shop/types.js';
+
+	type OrderRow = {
+		id: string;
+		number: string;
+		status: OrderStatus;
+		customerName: string | null;
+		customerEmail: string;
+		totalGross: number;
+		currency: string;
+		paymentMethod: string | null;
+		createdAt: Date | string;
+	};
+
+	type Props = {
+		data?: OrderRow[];
+		state?: 'loading' | 'error' | 'ok';
+		totalOverride?: number;
+	};
+
+	let { data: injectedData, state: injectedState, totalOverride }: Props = $props();
+	const useInjectedData = $derived(injectedData !== undefined);
 
 	const remotes = getRemotes();
+	const interfaceLanguage = useInterfaceLanguage();
+	const breadcrumbs = getBreadcrumbs();
 
-	const STATUSES = [
-		{ value: 'all', label: 'Wszystkie' },
-		{ value: 'new', label: 'Nowe' },
-		{ value: 'awaitingPayment', label: 'Oczekują na płatność' },
-		{ value: 'paid', label: 'Opłacone' },
-		{ value: 'preparing', label: 'W przygotowaniu' },
-		{ value: 'sent', label: 'Wysłane' },
-		{ value: 'done', label: 'Zrealizowane' },
-		{ value: 'cancelled', label: 'Anulowane' },
-		{ value: 'paymentRejected', label: 'Płatność odrzucona' },
-		{ value: 'refunded', label: 'Zwrócone' }
-	] as const;
+	$effect(() => {
+		const s = sidebarLang[interfaceLanguage.current].shop;
+		breadcrumbs.state = [{ label: s.title }, { label: s.orders }];
+	});
 
+	let statusFilter = $state<string | null>(null);
+	let searchQuery = $state('');
+	let appliedEmail = $state('');
+	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 50 });
 	let exporting = $state(false);
+	let emailDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+	const ordersQuery = $derived(
+		useInjectedData
+			? null
+			: remotes.listOrdersAdmin({
+					status: (statusFilter as OrderStatus | null) ?? undefined,
+					email: appliedEmail || undefined,
+					limit: pagination.pageSize,
+					offset: pagination.pageIndex * pagination.pageSize
+				})
+	);
+
+	const items = $derived<OrderRow[]>(
+		useInjectedData
+			? (injectedData ?? [])
+			: ((ordersQuery?.current?.items as OrderRow[] | undefined) ?? [])
+	);
+	const total = $derived(
+		useInjectedData
+			? (totalOverride ?? injectedData?.length ?? 0)
+			: (ordersQuery?.current?.total ?? 0)
+	);
+	const isLoading = $derived(
+		useInjectedData ? injectedState === 'loading' : !(ordersQuery?.ready ?? false)
+	);
+	const isError = $derived(
+		useInjectedData ? injectedState === 'error' : Boolean(ordersQuery?.error)
+	);
+
+	const pageCount = $derived(Math.max(1, Math.ceil(total / pagination.pageSize)));
+
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			title: string;
+			search: string;
+			searchPlaceholder: string;
+			filterStatus: string;
+			columnNumber: string;
+			columnDate: string;
+			columnCustomer: string;
+			columnTotal: string;
+			columnPayment: string;
+			columnStatus: string;
+			emptyTitle: string;
+			emptyDescription: string;
+			exportCsv: string;
+			exporting: string;
+			exportError: string;
+			noResults: string;
+			statusAll: string;
+			statusNew: string;
+			statusAwaitingPayment: string;
+			statusPaid: string;
+			statusPreparing: string;
+			statusSent: string;
+			statusDone: string;
+			statusCancelled: string;
+			statusPaymentRejected: string;
+			statusRefunded: string;
+		}
+	> = {
+		en: {
+			title: 'Orders',
+			search: 'Search',
+			searchPlaceholder: 'Filter by customer email…',
+			filterStatus: 'Status',
+			columnNumber: 'Number',
+			columnDate: 'Date',
+			columnCustomer: 'Customer',
+			columnTotal: 'Total (gross)',
+			columnPayment: 'Payment',
+			columnStatus: 'Status',
+			emptyTitle: 'No orders yet',
+			emptyDescription: 'Orders will appear here as soon as customers place them.',
+			exportCsv: 'Export CSV',
+			exporting: 'Exporting…',
+			exportError: 'Export failed.',
+			noResults: 'No results.',
+			statusAll: 'All',
+			statusNew: 'New',
+			statusAwaitingPayment: 'Awaiting payment',
+			statusPaid: 'Paid',
+			statusPreparing: 'Preparing',
+			statusSent: 'Sent',
+			statusDone: 'Done',
+			statusCancelled: 'Cancelled',
+			statusPaymentRejected: 'Payment rejected',
+			statusRefunded: 'Refunded'
+		},
+		pl: {
+			title: 'Zamówienia',
+			search: 'Szukaj',
+			searchPlaceholder: 'Filtruj po e-mailu klienta…',
+			filterStatus: 'Status',
+			columnNumber: 'Numer',
+			columnDate: 'Data',
+			columnCustomer: 'Klient',
+			columnTotal: 'Suma (brutto)',
+			columnPayment: 'Płatność',
+			columnStatus: 'Status',
+			emptyTitle: 'Brak zamówień',
+			emptyDescription: 'Gdy klient złoży zamówienie, pojawi się tutaj.',
+			exportCsv: 'Eksport CSV',
+			exporting: 'Eksportuję…',
+			exportError: 'Eksport nie powiódł się.',
+			noResults: 'Brak wyników.',
+			statusAll: 'Wszystkie',
+			statusNew: 'Nowe',
+			statusAwaitingPayment: 'Oczekują na płatność',
+			statusPaid: 'Opłacone',
+			statusPreparing: 'W przygotowaniu',
+			statusSent: 'Wysłane',
+			statusDone: 'Zrealizowane',
+			statusCancelled: 'Anulowane',
+			statusPaymentRejected: 'Płatność odrzucona',
+			statusRefunded: 'Zwrócone'
+		}
+	};
+	const t = $derived(lang[interfaceLanguage.current]);
+
+	const dataFilters = $derived([
+		{
+			slug: 'status',
+			label: t.filterStatus,
+			options: [
+				{ value: 'new', label: t.statusNew },
+				{ value: 'awaitingPayment', label: t.statusAwaitingPayment },
+				{ value: 'paid', label: t.statusPaid },
+				{ value: 'preparing', label: t.statusPreparing },
+				{ value: 'sent', label: t.statusSent },
+				{ value: 'done', label: t.statusDone },
+				{ value: 'cancelled', label: t.statusCancelled },
+				{ value: 'paymentRejected', label: t.statusPaymentRejected },
+				{ value: 'refunded', label: t.statusRefunded }
+			]
+		}
+	]);
+	const activeDataFilters = $derived({ status: statusFilter });
+
+	function scheduleEmailFilterUpdate(value: string) {
+		if (emailDebounceTimer) clearTimeout(emailDebounceTimer);
+		emailDebounceTimer = setTimeout(() => {
+			appliedEmail = value.trim();
+			pagination = { ...pagination, pageIndex: 0 };
+		}, 350);
+	}
 
 	async function handleExportCsv() {
 		exporting = true;
 		try {
+			const opts: { status?: OrderStatus; email?: string } = {};
+			if (statusFilter) opts.status = statusFilter as OrderStatus;
+			if (appliedEmail) opts.email = appliedEmail;
 			const result = await remotes.exportOrdersCsv(
-				statusFilter === 'all'
-					? appliedEmail
-						? { email: appliedEmail }
-						: undefined
-					: appliedEmail
-						? { status: statusFilter, email: appliedEmail }
-						: { status: statusFilter }
+				Object.keys(opts).length > 0 ? opts : undefined
 			);
 			const blob = new Blob(['' + result.csv], { type: 'text/csv;charset=utf-8' });
 			const url = URL.createObjectURL(blob);
 			const a = document.createElement('a');
 			const ts = new Date().toISOString().slice(0, 10);
 			a.href = url;
-			a.download = `zamowienia-${ts}.csv`;
+			a.download = `orders-${ts}.csv`;
 			document.body.appendChild(a);
 			a.click();
 			a.remove();
 			URL.revokeObjectURL(url);
 		} catch (err) {
-			alert(err instanceof Error ? err.message : 'Eksport nie powiódł się.');
+			alert(err instanceof Error ? err.message : t.exportError);
 		} finally {
 			exporting = false;
 		}
 	}
 
-	let statusFilter = $state<(typeof STATUSES)[number]['value']>('all');
-	let emailFilter = $state('');
-	let appliedEmail = $state('');
-
-	const query = $derived(
-		remotes.listOrdersAdmin({
-			status: statusFilter === 'all' ? undefined : statusFilter,
-			email: appliedEmail || undefined,
-			limit: 200
-		})
-	);
-
-	const STATUS_STYLES: Record<string, string> = {
-		new: 'bg-blue-100 text-blue-800',
-		awaitingPayment: 'bg-yellow-100 text-yellow-800',
-		paid: 'bg-green-100 text-green-800',
-		preparing: 'bg-purple-100 text-purple-800',
-		sent: 'bg-indigo-100 text-indigo-800',
-		done: 'bg-gray-100 text-gray-800',
-		cancelled: 'bg-red-100 text-red-800',
-		paymentRejected: 'bg-red-100 text-red-800',
-		refunded: 'bg-orange-100 text-orange-800'
-	};
-
-	function formatPrice(smallest: number, currency: string) {
-		return new Intl.NumberFormat('pl-PL', {
-			style: 'currency',
-			currency,
-			minimumFractionDigits: 2
-		}).format(smallest / 100);
-	}
+	const columns = $derived.by<ColumnDef<OrderRow>[]>(() => [
+		{
+			accessorKey: 'number',
+			header: t.columnNumber,
+			cell: (info) =>
+				renderComponent(EntryLink, {
+					name: info.row.original.number,
+					url: `/admin/shop/orders/${info.row.original.id}`
+				})
+		},
+		{
+			accessorKey: 'createdAt',
+			header: t.columnDate,
+			cell: (info) => formatDateTime(info.row.original.createdAt, interfaceLanguage.current)
+		},
+		{
+			accessorKey: 'customerEmail',
+			header: t.columnCustomer,
+			cell: (info) => {
+				const row = info.row.original;
+				return renderComponent(EntryLink, {
+					name: row.customerName ?? row.customerEmail,
+					url: `/admin/shop/orders/${row.id}`,
+					slug: row.customerName ? row.customerEmail : undefined
+				});
+			}
+		},
+		{
+			accessorKey: 'totalGross',
+			header: t.columnTotal,
+			cell: (info) => formatCentsPrice(info.row.original.totalGross, info.row.original.currency)
+		},
+		{
+			accessorKey: 'paymentMethod',
+			header: t.columnPayment,
+			cell: (info) => info.row.original.paymentMethod ?? '—'
+		},
+		{
+			accessorKey: 'status',
+			header: t.columnStatus,
+			cell: (info) =>
+				renderComponent(StatusBadge, {
+					variant: 'order',
+					status: info.row.original.status
+				})
+		}
+	]);
+</script>
 
-	function formatDate(d: Date | string) {
-		return new Intl.DateTimeFormat('pl-PL', {
-			dateStyle: 'short',
-			timeStyle: 'short'
-		}).format(new Date(d));
-	}
+<div class="p-5 pb-24 md:p-7">
+	<PageHeader title={t.title} count={!isLoading && !isError ? total : undefined}>
+		{#snippet secondaryActions()}
+			<Button variant="outline" size="sm" onclick={handleExportCsv} disabled={exporting}>
+				<DownloadIcon class="size-4" />
+				{exporting ? t.exporting : t.exportCsv}
+			</Button>
+		{/snippet}
+	</PageHeader>
 
-	function applyEmailFilter() {
-		appliedEmail = emailFilter.trim();
-	}
-</script>
+	{#if isError}
+		<StateDisplay kind="error" />
+	{:else if isLoading && total === 0}
+		<StateDisplay kind="loading" />
+	{:else if total === 0 && !statusFilter && !appliedEmail}
+		<StateDisplay kind="empty" title={t.emptyTitle} description={t.emptyDescription} />
+	{:else}
+		<TableToolbar
+			searchQuery={searchQuery}
+			searchPlaceholder={t.searchPlaceholder}
+			searchLabel={t.search}
+			onSearchChange={(q) => {
+				searchQuery = q;
+				scheduleEmailFilterUpdate(q);
+			}}
+			hideStatusFilter
+			hideViewToggle
+			{dataFilters}
+			{activeDataFilters}
+			onDataFilterChange={(_slug, value) => {
+				statusFilter = value;
+				pagination = { ...pagination, pageIndex: 0 };
+			}}
+		/>
 
-<div class="flex flex-wrap items-end justify-between gap-4 p-6">
-	<div>
-		<h1 class="text-2xl font-extrabold tracking-tight">Zamówienia</h1>
-		<p class="text-muted-foreground text-sm">
-			{#if query.ready}
-				{query.current?.length ?? 0}
-				{(query.current?.length ?? 0) === 1 ? 'zamówienie' : 'zamówień'}
-			{:else}
-				Ładowanie…
-			{/if}
-		</p>
-	</div>
-	<div class="flex flex-wrap items-end gap-3">
-		<label class="block">
-			<span class="text-muted-foreground mb-1 block text-xs font-semibold">Status</span>
-			<select bind:value={statusFilter} class="border-border h-9 rounded-lg border px-3 text-sm">
-				{#each STATUSES as s (s.value)}
-					<option value={s.value}>{s.label}</option>
-				{/each}
-			</select>
-		</label>
-		<label class="block">
-			<span class="text-muted-foreground mb-1 block text-xs font-semibold">Email klienta</span>
-			<input
-				type="email"
-				bind:value={emailFilter}
-				onchange={applyEmailFilter}
-				onblur={applyEmailFilter}
-				placeholder="filtruj po email"
-				class="border-border h-9 rounded-lg border px-3 text-sm"
+		<div class="overflow-hidden rounded-xl border bg-card shadow-sm">
+			<DataTable
+				data={items}
+				{columns}
+				enablePagination
+				manualPagination
+				{pageCount}
+				rowCount={total}
+				{pagination}
+				onPaginationChange={(p) => (pagination = p)}
+				emptyTitle={t.noResults}
 			/>
-		</label>
-		<button
-			type="button"
-			onclick={handleExportCsv}
-			disabled={exporting}
-			class="border-border hover:bg-muted h-9 rounded-lg border px-3 text-sm disabled:opacity-50"
-			title="Pobierz CSV z bieżącymi filtrami"
-		>
-			{exporting ? 'Eksportuję…' : 'Eksport CSV'}
-		</button>
-	</div>
-</div>
 
-<div class="px-6 pb-12">
-	{#if !query.ready}
-		<div class="text-muted-foreground">Ładowanie…</div>
-	{:else if (query.current?.length ?? 0) === 0}
-		<div class="bg-lavender-lighter/40 border-border rounded-xl border p-8 text-center text-sm">
-			<p class="mb-2 font-semibold">Brak zamówień</p>
-			<p class="text-muted-foreground">Gdy klient złoży zamówienie, pojawi się tutaj.</p>
-		</div>
-	{:else}
-		<div class="border-border overflow-hidden rounded-xl border">
-			<table class="w-full text-sm">
-				<thead class="bg-muted/50 text-left text-xs tracking-wide uppercase">
-					<tr>
-						<th class="px-4 py-3 font-semibold">Numer</th>
-						<th class="px-4 py-3 font-semibold">Data</th>
-						<th class="px-4 py-3 font-semibold">Klient</th>
-						<th class="px-4 py-3 font-semibold">Suma (brutto)</th>
-						<th class="px-4 py-3 font-semibold">Płatność</th>
-						<th class="px-4 py-3 font-semibold">Status</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each query.current ?? [] as o (o.id)}
-						<tr class="border-border hover:bg-muted/30 border-t">
-							<td class="px-4 py-3 font-mono text-xs">
-								<a href={`/admin/shop/orders/${o.id}`} class="text-primary hover:underline">
-									{o.number}
-								</a>
-							</td>
-							<td class="text-muted-foreground px-4 py-3 text-xs">{formatDate(o.createdAt)}</td>
-							<td class="px-4 py-3">
-								<div class="font-medium">{o.customerName ?? '—'}</div>
-								<div class="text-muted-foreground text-xs">{o.customerEmail}</div>
-							</td>
-							<td class="px-4 py-3 tabular-nums">{formatPrice(o.totalGross, o.currency)}</td>
-							<td class="text-muted-foreground px-4 py-3 text-xs">{o.paymentMethod ?? '—'}</td>
-							<td class="px-4 py-3">
-								<span
-									class="inline-flex rounded-full px-2 py-0.5 text-xs {STATUS_STYLES[o.status] ??
-										'bg-gray-100 text-gray-800'}"
-								>
-									{STATUSES.find((s) => s.value === o.status)?.label ?? o.status}
-								</span>
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
+			<TablePagination
+				pageIndex={pagination.pageIndex}
+				pageSize={pagination.pageSize}
+				{pageCount}
+				totalItems={total}
+				onPageChange={(p) => (pagination = { ...pagination, pageIndex: p })}
+				onPageSizeChange={(s) => (pagination = { pageIndex: 0, pageSize: s })}
+			/>
 		</div>
 	{/if}
 </div>

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

@@ -1,3 +1,20 @@
-declare const ShopOrdersListPage: import("svelte").Component<Record<string, never>, {}, "">;
+import type { OrderStatus } from '../../../shop/types.js';
+type OrderRow = {
+    id: string;
+    number: string;
+    status: OrderStatus;
+    customerName: string | null;
+    customerEmail: string;
+    totalGross: number;
+    currency: string;
+    paymentMethod: string | null;
+    createdAt: Date | string;
+};
+type Props = {
+    data?: OrderRow[];
+    state?: 'loading' | 'error' | 'ok';
+    totalOverride?: number;
+};
+declare const ShopOrdersListPage: import("svelte").Component<Props, {}, "">;
 type ShopOrdersListPage = ReturnType<typeof ShopOrdersListPage>;
 export default ShopOrdersListPage;