includio-cms 0.24.0 → 0.25.0

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

@@ -3,11 +3,14 @@
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import { Button } from '../../../components/ui/button/index.js';
 	import MailIcon from '@tabler/icons-svelte/icons/mail';
+	import RefundDialog from './refund-dialog.svelte';
 
 	const remotes = getRemotes();
 
 	const orderId = $derived(page.params.id ?? '');
 	const query = $derived(remotes.getOrderForAdmin(orderId));
+	const refundsQuery = $derived(remotes.getOrderRefundsAdmin(orderId));
+	let refundDialogOpen = $state(false);
 
 	type OrderStatus =
 		| 'new'
@@ -17,7 +20,8 @@
 		| 'sent'
 		| 'done'
 		| 'cancelled'
-		| 'paymentRejected';
+		| 'paymentRejected'
+		| 'refunded';
 
 	const STATUSES: Array<{ value: OrderStatus; label: string }> = [
 		{ value: 'new', label: 'Nowe' },
@@ -27,7 +31,8 @@
 		{ value: 'sent', label: 'Wysłane' },
 		{ value: 'done', label: 'Zrealizowane' },
 		{ value: 'cancelled', label: 'Anulowane' },
-		{ value: 'paymentRejected', label: 'Płatność odrzucona' }
+		{ value: 'paymentRejected', label: 'Płatność odrzucona' },
+		{ value: 'refunded', label: 'Zwrócone' }
 	];
 
 	const STATUS_STYLES: Record<string, string> = {
@@ -38,7 +43,8 @@
 		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'
+		paymentRejected: 'bg-red-100 text-red-800',
+		refunded: 'bg-orange-100 text-orange-800'
 	};
 
 	let newStatus = $state<OrderStatus | ''>('');
@@ -119,8 +125,7 @@
 				await query.refresh();
 			}
 		} catch (err) {
-			errorMessage =
-				err instanceof Error ? err.message : 'Błąd przy tworzeniu przesyłki';
+			errorMessage = err instanceof Error ? err.message : 'Błąd przy tworzeniu przesyłki';
 		} finally {
 			shipping = false;
 		}
@@ -140,8 +145,7 @@
 				await query.refresh();
 			}
 		} catch (err) {
-			errorMessage =
-				err instanceof Error ? err.message : 'Błąd przy anulowaniu przesyłki';
+			errorMessage = err instanceof Error ? err.message : 'Błąd przy anulowaniu przesyłki';
 		} finally {
 			shipping = false;
 		}
@@ -158,7 +162,11 @@
 {:else}
 	{@const { order, items, history } = query.current}
 	{@const address = order.shippingAddress as Record<string, string> | null}
-	{@const consents = order.consents as Array<{ id: string; accepted: boolean; label: string }> | null}
+	{@const consents = order.consents as Array<{
+		id: string;
+		accepted: boolean;
+		label: string;
+	}> | null}
 
 	<div class="space-y-6 p-6">
 		<div class="flex items-start justify-between gap-4">
@@ -167,14 +175,14 @@
 					<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
-					>
+					{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'}"
+				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>
@@ -212,9 +220,13 @@
 											<div class="text-muted-foreground text-xs">{name.variant}</div>
 										{/if}
 									</td>
-									<td class="text-muted-foreground py-2 font-mono text-xs">{item.skuSnapshot ?? '—'}</td>
+									<td class="text-muted-foreground py-2 font-mono text-xs"
+										>{item.skuSnapshot ?? '—'}</td
+									>
 									<td class="py-2 text-center">{item.qty}</td>
-									<td class="py-2 text-right tabular-nums">{formatPrice(item.priceGrossSnapshot, order.currency)}</td>
+									<td class="py-2 text-right tabular-nums"
+										>{formatPrice(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)}
@@ -225,7 +237,9 @@
 						<tfoot class="border-border border-t-2">
 							<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>
+								<td class="pt-3 text-right tabular-nums"
+									>{formatPrice(order.shippingGross, order.currency)}</td
+								>
 							</tr>
 							<tr>
 								<td colspan="5" class="text-right text-sm">Razem netto:</td>
@@ -255,7 +269,9 @@
 						{#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'}"
+									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>
@@ -299,7 +315,9 @@
 						</select>
 					</label>
 					<label class="block">
-						<span class="text-muted-foreground mb-1 block text-xs font-semibold">Notatka (opcjonalna)</span>
+						<span class="text-muted-foreground mb-1 block text-xs font-semibold"
+							>Notatka (opcjonalna)</span
+						>
 						<textarea
 							bind:value={note}
 							rows="2"
@@ -312,10 +330,57 @@
 					</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">
+						<h2 class="text-base font-bold">Zwroty</h2>
+						{#if r.refunds.length > 0}
+							<ul class="space-y-2">
+								{#each r.refunds as refund (refund.id)}
+									<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)}
+											</div>
+											<div class="text-muted-foreground text-xs">
+												{formatDate(refund.createdAt)} · {refund.status}
+											</div>
+											{#if refund.reason}
+												<div class="text-muted-foreground text-xs">{refund.reason}</div>
+											{/if}
+										</div>
+									</li>
+								{/each}
+							</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>
+								</div>
+								<div class="text-muted-foreground">
+									Pozostało: <strong>{formatPrice(r.remainingRefundable, r.currency)}</strong>
+								</div>
+							</div>
+						{:else}
+							<p class="text-muted-foreground text-xs">Brak zwrotów dla tego zamówienia.</p>
+						{/if}
+						{#if r.refundSupported && r.remainingRefundable > 0 && (order.status === 'paid' || order.status === 'preparing' || order.status === 'sent' || order.status === 'done')}
+							<Button onclick={() => (refundDialogOpen = true)} variant="outline" class="w-full">
+								Wykonaj zwrot
+							</Button>
+						{:else if !r.refundSupported && r.remainingRefundable > 0}
+							<p class="text-muted-foreground text-xs">
+								Adapter „{r.paymentMethod}” nie obsługuje zwrotów programowych.
+							</p>
+						{/if}
+					</section>
+				{/if}
+
 				{#if order.carrierType && order.carrierType !== 'none'}
 					<section class="border-border bg-card space-y-3 rounded-xl border p-5 text-sm">
 						<h2 class="text-base font-bold">
-							Przesyłka <span class="text-muted-foreground font-mono text-xs">{order.carrierType}</span>
+							Przesyłka <span class="text-muted-foreground font-mono text-xs"
+								>{order.carrierType}</span
+							>
 						</h2>
 						{#if order.shipmentId}
 							<div class="space-y-1">
@@ -354,11 +419,7 @@
 							<p class="text-muted-foreground text-xs">
 								Wygeneruj etykietę i nadaj paczkę przez ShipX.
 							</p>
-							<Button
-								onclick={handleCreateShipment}
-								disabled={shipping}
-								class="w-full"
-							>
+							<Button onclick={handleCreateShipment} disabled={shipping} class="w-full">
 								{shipping ? 'Tworzenie…' : 'Utwórz przesyłkę InPost'}
 							</Button>
 						{:else}
@@ -394,10 +455,15 @@
 							<div class="border-border mt-2 border-t pt-2">
 								<div class="text-muted-foreground text-xs font-semibold">Faktura</div>
 								<div>{address.invoiceCompany}</div>
-								{#if address.invoiceNip}<div class="text-muted-foreground text-xs">NIP: {address.invoiceNip}</div>{/if}
+								{#if address.invoiceNip}<div class="text-muted-foreground text-xs">
+										NIP: {address.invoiceNip}
+									</div>{/if}
 								{#if address.invoiceStreet}<div class="text-xs">{address.invoiceStreet}</div>{/if}
 								{#if address.invoicePostcode || address.invoiceCity}
-									<div class="text-xs">{address.invoicePostcode ?? ''} {address.invoiceCity ?? ''}</div>
+									<div class="text-xs">
+										{address.invoicePostcode ?? ''}
+										{address.invoiceCity ?? ''}
+									</div>
 								{/if}
 							</div>
 						{/if}
@@ -424,10 +490,24 @@
 				{#if order.notes}
 					<section class="border-border bg-card space-y-1 rounded-xl border p-5 text-sm">
 						<h2 class="text-base font-bold">Uwagi klienta</h2>
-						<p class="whitespace-pre-wrap text-xs">{order.notes}</p>
+						<p class="text-xs whitespace-pre-wrap">{order.notes}</p>
 					</section>
 				{/if}
 			</div>
 		</div>
 	</div>
+
+	{#if refundsQuery.ready && refundsQuery.current && refundsQuery.current.refundSupported}
+		<RefundDialog
+			bind:open={refundDialogOpen}
+			{orderId}
+			currency={refundsQuery.current.currency}
+			remainingRefundable={refundsQuery.current.remainingRefundable}
+			onOpenChange={(v) => (refundDialogOpen = v)}
+			onRefunded={async () => {
+				successMessage = 'Zwrot wykonany.';
+				await Promise.all([query.refresh(), refundsQuery.refresh()]);
+			}}
+		/>
+	{/if}
 {/if}

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

@@ -12,9 +12,41 @@
 		{ value: 'sent', label: 'Wysłane' },
 		{ value: 'done', label: 'Zrealizowane' },
 		{ value: 'cancelled', label: 'Anulowane' },
-		{ value: 'paymentRejected', label: 'Płatność odrzucona' }
+		{ value: 'paymentRejected', label: 'Płatność odrzucona' },
+		{ value: 'refunded', label: 'Zwrócone' }
 	] as const;
 
+	let exporting = $state(false);
+
+	async function handleExportCsv() {
+		exporting = true;
+		try {
+			const result = await remotes.exportOrdersCsv(
+				statusFilter === 'all'
+					? appliedEmail
+						? { email: appliedEmail }
+						: undefined
+					: appliedEmail
+						? { status: statusFilter, email: appliedEmail }
+						: { status: statusFilter }
+			);
+			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`;
+			document.body.appendChild(a);
+			a.click();
+			a.remove();
+			URL.revokeObjectURL(url);
+		} catch (err) {
+			alert(err instanceof Error ? err.message : 'Eksport nie powiódł się.');
+		} finally {
+			exporting = false;
+		}
+	}
+
 	let statusFilter = $state<(typeof STATUSES)[number]['value']>('all');
 	let emailFilter = $state('');
 	let appliedEmail = $state('');
@@ -35,7 +67,8 @@
 		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'
+		paymentRejected: 'bg-red-100 text-red-800',
+		refunded: 'bg-orange-100 text-orange-800'
 	};
 
 	function formatPrice(smallest: number, currency: string) {
@@ -73,10 +106,7 @@
 	<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"
-			>
+			<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}
@@ -93,6 +123,15 @@
 				class="border-border h-9 rounded-lg border px-3 text-sm"
 			/>
 		</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>
 
@@ -102,14 +141,12 @@
 	{: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>
+			<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 uppercase tracking-wide">
+				<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>
@@ -136,7 +173,8 @@
 							<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'}"
+									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>

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

@@ -89,14 +89,14 @@
 		<div class="bg-lavender-lighter/40 border-border rounded-xl border p-8 text-center text-sm">
 			<p class="mb-2 font-semibold">Brak produktów</p>
 			<p class="text-muted-foreground">
-				Dodaj pole <code class="text-primary">&lbrace; type: 'shop' &rbrace;</code> do kolekcji,
-				a następnie utwórz wpis i wypełnij sekcję „Sklep".
+				Dodaj pole <code class="text-primary">&lbrace; type: 'shop' &rbrace;</code> do kolekcji, a następnie
+				utwórz wpis i wypełnij sekcję „Sklep".
 			</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 uppercase tracking-wide">
+				<thead class="bg-muted/50 text-left text-xs tracking-wide uppercase">
 					<tr>
 						<th class="px-4 py-3 font-semibold">Nazwa</th>
 						<th class="px-4 py-3 font-semibold">Kolekcja</th>
@@ -112,14 +112,12 @@
 						{@const title = resolveTitle(row.publishedData ?? row.draftData, row.collectionSlug)}
 						<tr class="border-border hover:bg-muted/30 border-t">
 							<td class="px-4 py-3">
-								<a
-									href={`/admin/entries/${row.entryId}`}
-									class="text-primary hover:underline"
-								>
+								<a href={`/admin/entries/${row.entryId}`} class="text-primary hover:underline">
 									{title}
 								</a>
 							</td>
-							<td class="text-muted-foreground px-4 py-3 font-mono text-xs">{row.collectionSlug}</td>
+							<td class="text-muted-foreground px-4 py-3 font-mono text-xs">{row.collectionSlug}</td
+							>
 							<td class="px-4 py-3">{formatPrice(row.basePrice)}</td>
 							<td class="px-4 py-3">{row.vatRate}%</td>
 							<td class="px-4 py-3">{row.variantCount}</td>
@@ -133,16 +131,19 @@
 							<td class="px-4 py-3">
 								<div class="flex gap-1.5">
 									{#if row.published}
-										<span class="inline-flex rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-800"
+										<span
+											class="inline-flex rounded-full bg-green-100 px-2 py-0.5 text-xs text-green-800"
 											>Opublikowany</span
 										>
 									{:else}
-										<span class="inline-flex rounded-full bg-yellow-100 px-2 py-0.5 text-xs text-yellow-800"
+										<span
+											class="inline-flex rounded-full bg-yellow-100 px-2 py-0.5 text-xs text-yellow-800"
 											>Szkic</span
 										>
 									{/if}
 									{#if !row.isActive}
-										<span class="inline-flex rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-800"
+										<span
+											class="inline-flex rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-800"
 											>Nieaktywny</span
 										>
 									{/if}

package/dist/admin/components/layout/lang.d.ts

@@ -24,6 +24,7 @@ export declare const sidebarLang: Record<string, {
         products: string;
         orders: string;
         shipping: string;
+        coupons: string;
     };
     footer: {
         help: string;

package/dist/admin/components/layout/lang.js

@@ -24,7 +24,8 @@ export const sidebarLang = {
             title: 'Sklep',
             products: 'Produkty',
             orders: 'Zamówienia',
-            shipping: 'Metody wysyłki'
+            shipping: 'Metody wysyłki',
+            coupons: 'Kody rabatowe'
         },
         footer: {
             help: 'Pomoc'
@@ -63,7 +64,8 @@ export const sidebarLang = {
             title: 'Shop',
             products: 'Products',
             orders: 'Orders',
-            shipping: 'Shipping methods'
+            shipping: 'Shipping methods',
+            coupons: 'Coupon codes'
         },
         footer: {
             help: 'Help'

package/dist/admin/components/layout/layout-renderer.svelte

@@ -42,7 +42,9 @@
 	const fieldMap = $derived(new Map(fields.map((f) => [f.slug, f])));
 
 	// Compute distributed object slugs once at top level
-	const distributedSlugs = $derived(parentDistributedSlugs ?? getDistributedObjectSlugs(nodes, fields));
+	const distributedSlugs = $derived(
+		parentDistributedSlugs ?? getDistributedObjectSlugs(nodes, fields)
+	);
 
 	/**
 	 * Resolve a field reference (slug or dot-notation path) to its Field definition and form path.
@@ -90,7 +92,8 @@
 				class={cn(
 					'rounded-lg transition-all duration-500',
 					autoGrid && !isCompactField(field) && 'auto-grid-full',
-					isFlashing(formPath) && 'ring-2 ring-primary ring-offset-2 bg-primary/5 animate-in fade-in'
+					isFlashing(formPath) &&
+						'ring-primary bg-primary/5 animate-in fade-in ring-2 ring-offset-2'
 				)}
 			>
 				<FieldRenderer
@@ -135,12 +138,8 @@
 				{@render recurse(node.children)}
 			{/if}
 		</section>
-
 	{:else if node.type === 'columns'}
-		<div
-			class="layout-columns"
-			style="grid-template-columns: {node.ratio};"
-		>
+		<div class="layout-columns" style="grid-template-columns: {node.ratio};">
 			{#if isLayoutBranch(node)}
 				{#each node.children as child (child)}
 					<div class="layout-column">
@@ -149,9 +148,13 @@
 				{/each}
 			{/if}
 		</div>
-
 	{:else if node.type === 'card'}
-		<div role="group" aria-label={getLabel(node) || undefined} class="layout-card" class:no-header={!getLabel(node)}>
+		<div
+			role="group"
+			aria-label={getLabel(node) || undefined}
+			class="layout-card"
+			class:no-header={!getLabel(node)}
+		>
 			{#if getLabel(node)}
 				<div class="layout-card-header">
 					{getLabel(node)}
@@ -176,7 +179,6 @@
 				{/if}
 			</div>
 		</div>
-
 	{:else if node.type === 'accordion'}
 		<div class="layout-accordion-wrapper">
 			<Accordion.Root type="single" value={node.defaultOpen ? 'item' : ''}>
@@ -199,7 +201,6 @@
 				</Accordion.Item>
 			</Accordion.Root>
 		</div>
-
 	{:else if node.type === 'stack'}
 		<div class="layout-stack">
 			{#if isLayoutLeaf(node)}

package/dist/admin/components/layout/nav-breadcrumbs.svelte

@@ -6,15 +6,13 @@
 </script>
 
 <Breadcrumb.Root>
-	<Breadcrumb.List class="text-[13px] gap-2">
+	<Breadcrumb.List class="gap-2 text-[13px]">
 		{#each breadcrumbs.state as crumb, i}
 			<Breadcrumb.Item>
 				{#if crumb.href && i < breadcrumbs.state.length - 1}
-					<Breadcrumb.Link class="font-medium" href={crumb.href}
-						>{crumb.label}</Breadcrumb.Link
-					>
+					<Breadcrumb.Link class="font-medium" href={crumb.href}>{crumb.label}</Breadcrumb.Link>
 				{:else}
-					<Breadcrumb.Page class="font-semibold max-w-60 truncate">{crumb.label}</Breadcrumb.Page>
+					<Breadcrumb.Page class="max-w-60 truncate font-semibold">{crumb.label}</Breadcrumb.Page>
 				{/if}
 			</Breadcrumb.Item>
 			{#if i < breadcrumbs.state.length - 1}

package/dist/admin/components/layout/nav-shop.svelte

@@ -6,6 +6,7 @@
 	import PackageIcon from '@tabler/icons-svelte/icons/package';
 	import ShoppingCartIcon from '@tabler/icons-svelte/icons/shopping-cart';
 	import TruckIcon from '@tabler/icons-svelte/icons/truck';
+	import TicketIcon from '@tabler/icons-svelte/icons/ticket';
 	import BuildingStoreIcon from '@tabler/icons-svelte/icons/building-store';
 	import { page } from '$app/state';
 
@@ -22,7 +23,8 @@
 	const items = $derived([
 		{ title: lang.products, url: '/admin/shop/products', icon: PackageIcon },
 		{ title: lang.orders, url: '/admin/shop/orders', icon: ShoppingCartIcon },
-		{ title: lang.shipping, url: '/admin/shop/shipping-methods', icon: TruckIcon }
+		{ title: lang.shipping, url: '/admin/shop/shipping-methods', icon: TruckIcon },
+		{ title: lang.coupons, url: '/admin/shop/coupons', icon: TicketIcon }
 	]);
 </script>
 

package/dist/admin/components/layout/nav-user.svelte

@@ -29,18 +29,20 @@
 	<Sidebar.MenuItem>
 		{#if $session.data}
 			<div class="flex items-center gap-2 px-2 py-1.5">
-				<a href="/admin/account" class="flex items-center gap-2 flex-1 min-w-0 group">
-					<Avatar.Root class="size-7 rounded-lg shrink-0">
+				<a href="/admin/account" class="group flex min-w-0 flex-1 items-center gap-2">
+					<Avatar.Root class="size-7 shrink-0 rounded-lg">
 						<Avatar.Image src={$session.data.user.image} alt={$session.data.user.name} />
 						<Avatar.Fallback class="rounded-lg text-xs">
 							{$session.data.user.name[0].toUpperCase()}
 						</Avatar.Fallback>
 					</Avatar.Root>
-					<div class="min-w-0 flex flex-col">
+					<div class="flex min-w-0 flex-col">
 						<span class="truncate text-sm font-medium group-hover:underline">
 							{$session.data.user.name}
 						</span>
-						<span class="text-muted-foreground text-[10px] leading-tight">v{updates[0].version}</span>
+						<span class="text-muted-foreground text-[10px] leading-tight"
+							>v{updates[0].version}</span
+						>
 					</div>
 				</a>
 				<button

package/dist/admin/components/layout/site-header.svelte

@@ -40,7 +40,7 @@
 </script>
 
 <header
-	class="flex h-(--header-height) shrink-0 items-center gap-2 border-b border-sidebar-border bg-background/60 backdrop-blur-xl transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)"
+	class="border-sidebar-border bg-background/60 flex h-(--header-height) shrink-0 items-center gap-2 border-b backdrop-blur-xl transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)"
 >
 	<div class="flex w-full items-center px-5">
 		<div class="flex items-center gap-3">
@@ -53,7 +53,7 @@
 				href="/"
 				variant="outline"
 				size="sm"
-				class="text-[13px] font-medium text-primary hover:bg-[var(--lavender-lighter)] hover:border-[var(--lavender)]"
+				class="text-primary text-[13px] font-medium hover:border-[var(--lavender)] hover:bg-[var(--lavender-lighter)]"
 				target="_blank"
 				rel="noopener noreferrer"
 			>
@@ -62,10 +62,14 @@
 			</Button>
 			{#if $session.data}
 				<DropdownMenu.Root>
-					<DropdownMenu.Trigger class="cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+					<DropdownMenu.Trigger
+						class="focus-visible:ring-ring cursor-pointer rounded-full outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+					>
 						<Avatar.Root class="size-[30px]">
 							<Avatar.Image src={$session.data.user.image} alt={$session.data.user.name} />
-							<Avatar.Fallback class="bg-gradient-to-br from-[var(--lavender)] to-primary text-[12px] font-bold text-white">
+							<Avatar.Fallback
+								class="to-primary bg-gradient-to-br from-[var(--lavender)] text-[12px] font-bold text-white"
+							>
 								{$session.data.user.name
 									.split(' ')
 									.map((n) => n[0])
@@ -78,7 +82,9 @@
 					<DropdownMenu.Content align="end" class="w-56">
 						<DropdownMenu.Label class="flex flex-col gap-0.5">
 							<span class="text-sm font-medium">{$session.data.user.name}</span>
-							<span class="text-xs font-normal text-muted-foreground">{$session.data.user.email}</span>
+							<span class="text-muted-foreground text-xs font-normal"
+								>{$session.data.user.email}</span
+							>
 						</DropdownMenu.Label>
 						<DropdownMenu.Separator />
 						<DropdownMenu.Item onSelect={() => goto('/admin/account')}>