includio-cms 0.25.0 → 0.27.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/refund-dialog.svelte

@@ -10,6 +10,9 @@
 		orderId: string;
 		currency: string;
 		remainingRefundable: number;
+		/** When the order has a deposit policy with paid deposit + balance rows. */
+		hasPartial?: boolean;
+		balanceOwed?: boolean;
 		onOpenChange: (open: boolean) => void;
 		onRefunded: () => void;
 	};
@@ -19,6 +22,8 @@
 		orderId,
 		currency,
 		remainingRefundable,
+		hasPartial = false,
+		balanceOwed = false,
 		onOpenChange,
 		onRefunded
 	}: Props = $props();
@@ -28,6 +33,8 @@
 	let mode = $state<'full' | 'partial'>('full');
 	let amountInput = $state('');
 	let reason = $state('');
+	let kind = $state<'full' | 'deposit' | 'balance'>('full');
+	let releaseStock = $state(false);
 	let submitting = $state(false);
 	let error = $state<string | null>(null);
 
@@ -43,6 +50,8 @@
 		mode = 'full';
 		amountInput = '';
 		reason = '';
+		kind = 'full';
+		releaseStock = false;
 		error = null;
 		submitting = false;
 	}
@@ -70,7 +79,9 @@
 			const result = await remotes.refundOrderCmd({
 				orderId,
 				amount,
-				reason: reason.trim() || undefined
+				reason: reason.trim() || undefined,
+				kind: hasPartial ? kind : undefined,
+				releaseStock: releaseStock || undefined
 			});
 			if (!result.success) {
 				error = result.error;
@@ -102,6 +113,26 @@
 			</Dialog.Description>
 		</Dialog.Header>
 		<form onsubmit={handleSubmit} class="space-y-4">
+			{#if hasPartial}
+				<fieldset class="space-y-2">
+					<legend class="mb-1 text-sm font-semibold">Która płatność?</legend>
+					<label class="flex items-center gap-2 text-sm">
+						<input type="radio" name="refund-kind" value="deposit" bind:group={kind} />
+						<span>Tylko zaliczka</span>
+					</label>
+					<label class="flex items-center gap-2 text-sm">
+						<input
+							type="radio"
+							name="refund-kind"
+							value="balance"
+							bind:group={kind}
+							disabled={balanceOwed}
+						/>
+						<span>Tylko dopłata{balanceOwed ? ' (brak — nie wpłynęła)' : ''}</span>
+					</label>
+				</fieldset>
+			{/if}
+
 			<fieldset class="space-y-2">
 				<legend class="mb-1 text-sm font-semibold">Typ zwrotu</legend>
 				<label class="flex items-center gap-2 text-sm">
@@ -114,6 +145,11 @@
 				</label>
 			</fieldset>
 
+			<label class="flex items-center gap-2 text-sm">
+				<input type="checkbox" bind:checked={releaseStock} />
+				<span>Zwolnij stan magazynowy</span>
+			</label>
+
 			{#if mode === 'partial'}
 				<div class="space-y-2">
 					<Label for="refund-amount">Kwota (PLN)</Label>

package/dist/admin/client/shop/refund-dialog.svelte.d.ts

@@ -3,6 +3,9 @@ type Props = {
     orderId: string;
     currency: string;
     remainingRefundable: number;
+    /** When the order has a deposit policy with paid deposit + balance rows. */
+    hasPartial?: boolean;
+    balanceOwed?: boolean;
     onOpenChange: (open: boolean) => void;
     onRefunded: () => void;
 };