includio-cms 0.25.0 → 0.26.0

package/dist/admin/client/shop/shop-order-detail-page.svelte

@@ -4,11 +4,35 @@
 	import { Button } from '../../../components/ui/button/index.js';
 	import MailIcon from '@tabler/icons-svelte/icons/mail';
 	import RefundDialog from './refund-dialog.svelte';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
+	import { sidebarLang } from '../../components/layout/lang.js';
+	import { formatCentsPrice, formatDateTime } from '../../utils/formatters.js';
+	import PageHeader from '../../components/layout/page-header.svelte';
+	import StatusBadge from '../collection/status-badge.svelte';
+	import ConfirmationDialog from '../../components/dialogs/confirmation-dialog.svelte';
+	import SaveIndicator from '../entry/header/save-indicator.svelte';
+	import FormErrorSummary, {
+		type FormErrorEntry
+	} from '../../components/forms/form-error-summary.svelte';
+	import type { OrderStatus as OrderStatusT } from '../../../shop/types.js';
 
 	const remotes = getRemotes();
+	const interfaceLanguage = useInterfaceLanguage();
+	const breadcrumbs = getBreadcrumbs();
 
 	const orderId = $derived(page.params.id ?? '');
 	const query = $derived(remotes.getOrderForAdmin(orderId));
+
+	$effect(() => {
+		const s = sidebarLang[interfaceLanguage.current].shop;
+		const number = query.current?.order?.number;
+		breadcrumbs.state = [
+			{ label: s.title },
+			{ label: s.orders, href: '/admin/shop/orders' },
+			{ label: number ?? '…' }
+		];
+	});
 	const refundsQuery = $derived(remotes.getOrderRefundsAdmin(orderId));
 	let refundDialogOpen = $state(false);
 
@@ -35,18 +59,6 @@
 		{ value: 'refunded', label: 'Zwrócone' }
 	];
 
-	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'
-	};
-
 	let newStatus = $state<OrderStatus | ''>('');
 	let note = $state('');
 	let saving = $state(false);
@@ -55,28 +67,24 @@
 	let errorMessage = $state<string | null>(null);
 	let successMessage = $state<string | null>(null);
 
-	function statusLabel(s: string) {
-		return STATUSES.find((x) => x.value === s)?.label ?? s;
-	}
+	type SaveStatus = 'idle' | 'saving' | 'saved' | 'unsaved' | 'error';
+	let statusFormStatus = $state<SaveStatus>('idle');
+	let statusFormSavedAt = $state<Date | null>(null);
 
-	function formatPrice(cents: number, currency: string) {
-		return new Intl.NumberFormat('pl-PL', {
-			style: 'currency',
-			currency,
-			minimumFractionDigits: 2
-		}).format(cents / 100);
-	}
+	const statusFormSummaryErrors = $derived<FormErrorEntry[]>(
+		errorMessage
+			? [{ path: 'newStatus', label: 'Status zamówienia', message: errorMessage }]
+			: []
+	);
 
-	function formatDate(d: Date | string) {
-		return new Intl.DateTimeFormat('pl-PL', {
-			dateStyle: 'short',
-			timeStyle: 'short'
-		}).format(new Date(d));
+	function statusLabel(s: string) {
+		return STATUSES.find((x) => x.value === s)?.label ?? s;
 	}
 
 	async function changeStatus() {
 		if (!newStatus) return;
 		saving = true;
+		statusFormStatus = 'saving';
 		errorMessage = null;
 		successMessage = null;
 		try {
@@ -89,8 +97,11 @@
 			note = '';
 			newStatus = '';
 			successMessage = 'Status zaktualizowany. Email wysłany do klienta.';
+			statusFormSavedAt = new Date();
+			statusFormStatus = 'saved';
 		} catch (err) {
 			errorMessage = err instanceof Error ? err.message : 'Nie udało się zmienić statusu';
+			statusFormStatus = 'error';
 		} finally {
 			saving = false;
 		}
@@ -131,8 +142,13 @@
 		}
 	}
 
-	async function handleCancelShipment() {
-		if (!confirm('Anulować przesyłkę? Etykieta zostanie unieważniona w ShipX.')) return;
+	let cancelShipmentOpen = $state(false);
+
+	function handleCancelShipment() {
+		cancelShipmentOpen = true;
+	}
+
+	async function performCancelShipment() {
 		shipping = true;
 		errorMessage = null;
 		successMessage = null;
@@ -168,53 +184,57 @@
 		label: string;
 	}> | null}
 
-	<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">
-					<span class="font-mono">{order.number}</span>
-				</h1>
-				<p class="text-muted-foreground text-sm">
-					{formatDate(order.createdAt)} ·
-					<a href="/admin/shop/orders" class="hover:underline">← Lista</a>
-				</p>
-			</div>
-			<span
-				class="inline-flex rounded-full px-3 py-1 text-xs font-semibold {STATUS_STYLES[
-					order.status
-				] ?? 'bg-gray-100 text-gray-800'}"
-			>
-				{statusLabel(order.status)}
-			</span>
-		</div>
+	<div class="space-y-6 p-3 sm:p-5 md:p-7">
+		<PageHeader
+			title={`Zamówienie ${order.number}`}
+			description={formatDateTime(order.createdAt, interfaceLanguage.current)}
+		>
+			{#snippet secondaryActions()}
+				<StatusBadge variant="order" status={order.status as OrderStatusT} />
+			{/snippet}
+		</PageHeader>
+		<a href="/admin/shop/orders" class="text-primary text-sm hover:underline">← Lista zamówień</a>
 
 		{#if errorMessage}
-			<div class="rounded-lg bg-red-50 p-3 text-sm text-red-800">{errorMessage}</div>
+			<div
+				class="bg-destructive-bg text-destructive rounded-lg p-3 text-sm"
+				role="alert"
+				aria-live="assertive"
+			>
+				{errorMessage}
+			</div>
 		{/if}
 		{#if successMessage}
-			<div class="rounded-lg bg-green-50 p-3 text-sm text-green-800">{successMessage}</div>
+			<div
+				class="bg-success-bg text-success rounded-lg p-3 text-sm"
+				role="status"
+				aria-live="polite"
+			>
+				{successMessage}
+			</div>
 		{/if}
 
 		<div class="grid grid-cols-1 gap-6 lg:grid-cols-[2fr_1fr]">
 			<div class="space-y-6">
-				<section class="border-border bg-card space-y-3 rounded-xl border p-5">
+				<section class="border-border bg-card space-y-3 rounded-xl border p-3 sm:p-5">
 					<h2 class="text-base font-bold">Pozycje</h2>
-					<table class="w-full text-sm">
+					<div class="-mx-3 overflow-x-auto sm:mx-0">
+					<table class="w-full min-w-[640px] text-sm">
 						<thead class="text-muted-foreground text-left text-xs uppercase">
 							<tr>
-								<th class="pb-2 font-semibold">Nazwa</th>
+								<th class="px-3 pb-2 font-semibold sm:px-0">Nazwa</th>
 								<th class="pb-2 font-semibold">SKU</th>
 								<th class="pb-2 text-center font-semibold">Ilość</th>
 								<th class="pb-2 text-right font-semibold">Brutto / szt.</th>
 								<th class="pb-2 text-right font-semibold">VAT</th>
-								<th class="pb-2 text-right font-semibold">Suma</th>
+								<th class="px-3 pb-2 text-right font-semibold sm:px-0">Suma</th>
 							</tr>
 						</thead>
 						<tbody>
 							{#each items as item (item.id)}
 								{@const name = (item.nameSnapshot as { product?: string; variant?: string }) ?? {}}
 								<tr class="border-border border-t">
-									<td class="py-2">
+									<td class="px-3 py-2 sm:px-0">
 										<div class="font-medium">{name.product ?? '—'}</div>
 										{#if name.variant}
 											<div class="text-muted-foreground text-xs">{name.variant}</div>
@@ -225,11 +245,11 @@
 									>
 									<td class="py-2 text-center">{item.qty}</td>
 									<td class="py-2 text-right tabular-nums"
-										>{formatPrice(item.priceGrossSnapshot, order.currency)}</td
+										>{formatCentsPrice(item.priceGrossSnapshot, order.currency)}</td
 									>
 									<td class="text-muted-foreground py-2 text-right">{item.vatRate}%</td>
-									<td class="py-2 text-right font-semibold tabular-nums">
-										{formatPrice(item.priceGrossSnapshot * item.qty, order.currency)}
+									<td class="px-3 py-2 text-right font-semibold tabular-nums sm:px-0">
+										{formatCentsPrice(item.priceGrossSnapshot * item.qty, order.currency)}
 									</td>
 								</tr>
 							{/each}
@@ -238,46 +258,43 @@
 							<tr>
 								<td colspan="5" class="pt-3 text-right text-sm">Wysyłka (brutto):</td>
 								<td class="pt-3 text-right tabular-nums"
-									>{formatPrice(order.shippingGross, order.currency)}</td
+									>{formatCentsPrice(order.shippingGross, order.currency)}</td
 								>
 							</tr>
 							<tr>
 								<td colspan="5" class="text-right text-sm">Razem netto:</td>
 								<td class="text-muted-foreground text-right tabular-nums">
-									{formatPrice(order.totalNet, order.currency)}
+									{formatCentsPrice(order.totalNet, order.currency)}
 								</td>
 							</tr>
 							<tr>
 								<td colspan="5" class="text-right text-sm">VAT:</td>
 								<td class="text-muted-foreground text-right tabular-nums">
-									{formatPrice(order.vatAmount, order.currency)}
+									{formatCentsPrice(order.vatAmount, order.currency)}
 								</td>
 							</tr>
 							<tr>
-								<td colspan="5" class="pb-1 text-right text-base font-bold">Razem brutto:</td>
-								<td class="text-primary pb-1 text-right text-base font-extrabold tabular-nums">
-									{formatPrice(order.totalGross, order.currency)}
+								<td colspan="5" class="px-3 pb-1 text-right text-base font-bold sm:px-0">Razem brutto:</td>
+								<td class="text-primary px-3 pb-1 text-right text-base font-extrabold tabular-nums sm:px-0">
+									{formatCentsPrice(order.totalGross, order.currency)}
 								</td>
 							</tr>
 						</tfoot>
 					</table>
+					</div>
 				</section>
 
-				<section class="border-border bg-card space-y-3 rounded-xl border p-5">
+				<section class="border-border bg-card space-y-3 rounded-xl border p-3 sm:p-5">
 					<h2 class="text-base font-bold">Historia statusów</h2>
 					<ol class="space-y-2 text-sm">
 						{#each history as h (h.id)}
 							<li class="flex items-start gap-3">
-								<span
-									class="mt-0.5 inline-flex shrink-0 rounded-full px-2 py-0.5 text-xs {STATUS_STYLES[
-										h.status
-									] ?? 'bg-gray-100 text-gray-800'}"
-								>
-									{statusLabel(h.status)}
-								</span>
+								<div class="mt-0.5">
+									<StatusBadge variant="order" status={h.status as OrderStatusT} />
+								</div>
 								<div class="flex-1">
 									<div class="text-muted-foreground text-xs">
-										{formatDate(h.changedAt)} · {h.changedBy ?? '—'}
+										{formatDateTime(h.changedAt, interfaceLanguage.current)} · {h.changedBy ?? '—'}
 									</div>
 									{#if h.note}
 										<div class="text-sm">{h.note}</div>
@@ -300,8 +317,12 @@
 			</div>
 
 			<div class="space-y-6">
-				<section class="border-border bg-card space-y-3 rounded-xl border p-5">
-					<h2 class="text-base font-bold">Zmień status</h2>
+				<section class="border-border bg-card space-y-3 rounded-xl border p-3 sm:p-5">
+					<div class="flex items-center justify-between">
+						<h2 class="text-base font-bold">Zmień status</h2>
+						<SaveIndicator status={statusFormStatus} lastSavedAt={statusFormSavedAt} />
+					</div>
+					<FormErrorSummary errors={statusFormSummaryErrors} />
 					<label class="block">
 						<span class="text-muted-foreground mb-1 block text-xs font-semibold">Nowy status</span>
 						<select
@@ -326,13 +347,13 @@
 						></textarea>
 					</label>
 					<Button onclick={changeStatus} disabled={saving || !newStatus} class="w-full">
-						{saving ? 'Zapisywanie…' : 'Zmień status + wyślij email'}
+						{saving ? 'Zapisuję…' : 'Zapisz status i powiadom klienta'}
 					</Button>
 				</section>
 
 				{#if refundsQuery.ready && refundsQuery.current}
 					{@const r = refundsQuery.current}
-					<section class="border-border bg-card space-y-3 rounded-xl border p-5 text-sm">
+					<section class="border-border bg-card space-y-3 rounded-xl border p-3 text-sm sm:p-5">
 						<h2 class="text-base font-bold">Zwroty</h2>
 						{#if r.refunds.length > 0}
 							<ul class="space-y-2">
@@ -340,10 +361,10 @@
 									<li class="border-border flex items-start justify-between gap-2 border-t pt-2">
 										<div>
 											<div class="font-medium tabular-nums">
-												{formatPrice(refund.amount, r.currency)}
+												{formatCentsPrice(refund.amount, r.currency)}
 											</div>
 											<div class="text-muted-foreground text-xs">
-												{formatDate(refund.createdAt)} · {refund.status}
+												{formatDateTime(refund.createdAt, interfaceLanguage.current)} · {refund.status}
 											</div>
 											{#if refund.reason}
 												<div class="text-muted-foreground text-xs">{refund.reason}</div>
@@ -354,10 +375,10 @@
 							</ul>
 							<div class="border-border border-t pt-2 text-xs">
 								<div class="text-muted-foreground">
-									Zwrócono: <strong>{formatPrice(r.refundedAmount, r.currency)}</strong>
+									Zwrócono: <strong>{formatCentsPrice(r.refundedAmount, r.currency)}</strong>
 								</div>
 								<div class="text-muted-foreground">
-									Pozostało: <strong>{formatPrice(r.remainingRefundable, r.currency)}</strong>
+									Pozostało: <strong>{formatCentsPrice(r.remainingRefundable, r.currency)}</strong>
 								</div>
 							</div>
 						{:else}
@@ -376,7 +397,7 @@
 				{/if}
 
 				{#if order.carrierType && order.carrierType !== 'none'}
-					<section class="border-border bg-card space-y-3 rounded-xl border p-5 text-sm">
+					<section class="border-border bg-card space-y-3 rounded-xl border p-3 text-sm sm:p-5">
 						<h2 class="text-base font-bold">
 							Przesyłka <span class="text-muted-foreground font-mono text-xs"
 								>{order.carrierType}</span
@@ -430,7 +451,7 @@
 					</section>
 				{/if}
 
-				<section class="border-border bg-card space-y-2 rounded-xl border p-5 text-sm">
+				<section class="border-border bg-card space-y-2 rounded-xl border p-3 text-sm sm:p-5">
 					<h2 class="text-base font-bold">Klient</h2>
 					<div>
 						<div class="font-medium">{order.customerName ?? '—'}</div>
@@ -471,7 +492,7 @@
 				{/if}
 
 				{#if consents && consents.length > 0}
-					<section class="border-border bg-card space-y-2 rounded-xl border p-5 text-sm">
+					<section class="border-border bg-card space-y-2 rounded-xl border p-3 text-sm sm:p-5">
 						<h2 class="text-base font-bold">Zgody</h2>
 						{#each consents as c (c.id)}
 							<div class="flex items-start gap-2">
@@ -511,3 +532,11 @@
 		/>
 	{/if}
 {/if}
+
+<ConfirmationDialog
+	bind:open={cancelShipmentOpen}
+	title="Anulować przesyłkę?"
+	description="Etykieta wysyłkowa zostanie unieważniona w ShipX. Tej akcji nie cofniesz."
+	loading={shipping}
+	onConfirm={performCancelShipment}
+/>