includio-cms 0.24.1 → 0.26.0

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

@@ -1,25 +1,155 @@
 <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 { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { Button } from '../../../components/ui/button/index.js';
 	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
 	import PlusIcon from '@tabler/icons-svelte/icons/plus';
 	import ChevronDownIcon from '@tabler/icons-svelte/icons/chevron-down';
+	import { formatPlnPrice } 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 SortableHeader from '../collection/sortable-header.svelte';
+	import EntryLink from '../collection/entry-link.svelte';
+	import { renderComponent } from '../../../components/ui/data-table/render-helpers.js';
+	import type { ColumnDef, PaginationState, SortingState } from '@tanstack/table-core';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	export type ShopProductRow = {
+		entryId: string;
+		collectionSlug: string;
+		basePrice: number;
+		vatRate: number;
+		isActive: boolean;
+		variantCount: number;
+		totalStock: number | null;
+		publishedData: Record<string, unknown> | null;
+		draftData: Record<string, unknown> | null;
+		publishedByLang?: Record<string, Record<string, unknown>>;
+		draftByLang?: Record<string, Record<string, unknown>>;
+		published: boolean;
+	};
+
+	type Props = {
+		data?: ShopProductRow[];
+		state?: 'loading' | 'error' | 'ok';
+	};
+
+	let { data: injectedData, state: injectedState }: Props = $props();
+	const useInjectedData = $derived(injectedData !== undefined);
 
 	const remotes = getRemotes();
 	const interfaceLanguage = useInterfaceLanguage();
+	const breadcrumbs = getBreadcrumbs();
+
+	$effect(() => {
+		const s = sidebarLang[interfaceLanguage.current].shop;
+		breadcrumbs.state = [{ label: s.title }, { label: s.products }];
+	});
 
-	const entriesQuery = $derived(remotes.listShopProductEntries());
+	const entriesQuery = $derived(useInjectedData ? null : remotes.listShopProductEntries());
 	const collectionsQuery = $derived(remotes.listShopableCollections());
 
-	function formatPrice(pln: number) {
-		return new Intl.NumberFormat('pl-PL', {
-			style: 'currency',
-			currency: 'PLN',
-			minimumFractionDigits: 2
-		}).format(pln);
-	}
+	const allRows = $derived<ShopProductRow[]>(
+		useInjectedData
+			? (injectedData ?? [])
+			: ((entriesQuery?.current as ShopProductRow[] | undefined) ?? [])
+	);
+	const isLoading = $derived(
+		useInjectedData ? injectedState === 'loading' : !(entriesQuery?.ready ?? false)
+	);
+	const isError = $derived(
+		useInjectedData ? injectedState === 'error' : Boolean(entriesQuery?.error)
+	);
+
+	let searchQuery = $state('');
+	let publishedFilter = $state<string | null>(null);
+	let activeFilter = $state<string | null>(null);
+	let sorting = $state<SortingState>([]);
+	let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 20 });
+
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			title: string;
+			search: string;
+			searchPlaceholder: string;
+			filterPublished: string;
+			filterActive: string;
+			statusPublished: string;
+			statusDraft: string;
+			activeYes: string;
+			activeNo: string;
+			addProduct: string;
+			emptyTitle: string;
+			emptyDescription: string;
+			columnName: string;
+			columnCollection: string;
+			columnBasePrice: string;
+			columnVat: string;
+			columnVariants: string;
+			columnStock: string;
+			columnStatus: string;
+			unlimited: string;
+			noResults: string;
+		}
+	> = {
+		en: {
+			title: 'Products',
+			search: 'Search',
+			searchPlaceholder: 'Search by name…',
+			filterPublished: 'Status',
+			filterActive: 'Active',
+			statusPublished: 'Published',
+			statusDraft: 'Draft',
+			activeYes: 'Active',
+			activeNo: 'Inactive',
+			addProduct: 'Add product',
+			emptyTitle: 'No products yet',
+			emptyDescription:
+				"Add a field { type: 'shop' } to a collection, then create an entry and fill out the Shop section.",
+			columnName: 'Name',
+			columnCollection: 'Collection',
+			columnBasePrice: 'Base price',
+			columnVat: 'VAT',
+			columnVariants: 'Variants',
+			columnStock: 'Stock',
+			columnStatus: 'Status',
+			unlimited: 'unlimited',
+			noResults: 'No results.'
+		},
+		pl: {
+			title: 'Produkty',
+			search: 'Szukaj',
+			searchPlaceholder: 'Szukaj po nazwie…',
+			filterPublished: 'Status',
+			filterActive: 'Aktywność',
+			statusPublished: 'Opublikowany',
+			statusDraft: 'Szkic',
+			activeYes: 'Aktywny',
+			activeNo: 'Nieaktywny',
+			addProduct: 'Dodaj produkt',
+			emptyTitle: 'Brak produktów',
+			emptyDescription:
+				"Dodaj pole { type: 'shop' } do kolekcji, a następnie utwórz wpis i wypełnij sekcję „Sklep”.",
+			columnName: 'Nazwa',
+			columnCollection: 'Kolekcja',
+			columnBasePrice: 'Cena bazowa',
+			columnVat: 'VAT',
+			columnVariants: 'Warianty',
+			columnStock: 'Magazyn',
+			columnStatus: 'Status',
+			unlimited: 'nieograniczony',
+			noResults: 'Brak wyników.'
+		}
+	};
+	const t = $derived(lang[interfaceLanguage.current]);
 
 	function resolveTitle(data: Record<string, unknown> | null, fallback: string): string {
 		if (!data) return fallback;
@@ -30,6 +160,80 @@
 		return fallback;
 	}
 
+	function pickByLang(
+		byLang: Record<string, Record<string, unknown>> | undefined,
+		preferred: string
+	): Record<string, unknown> | null {
+		if (!byLang) return null;
+		if (byLang[preferred]) return byLang[preferred];
+		const first = Object.values(byLang)[0];
+		return first ?? null;
+	}
+
+	type EnrichedRow = ShopProductRow & { _title: string };
+
+	const enrichedRows = $derived<EnrichedRow[]>(
+		allRows.map((row) => {
+			const published = pickByLang(row.publishedByLang, interfaceLanguage.current) ?? row.publishedData;
+			const draft = pickByLang(row.draftByLang, interfaceLanguage.current) ?? row.draftData;
+			return {
+				...row,
+				_title: resolveTitle(published ?? draft, row.collectionSlug)
+			};
+		})
+	);
+
+	const filteredRows = $derived.by(() => {
+		const q = searchQuery.trim().toLowerCase();
+		let list = enrichedRows;
+		if (q) list = list.filter((row) => row._title.toLowerCase().includes(q));
+		if (publishedFilter !== null) {
+			const wantPublished = publishedFilter === 'published';
+			list = list.filter((row) => row.published === wantPublished);
+		}
+		if (activeFilter !== null) {
+			const wantActive = activeFilter === 'active';
+			list = list.filter((row) => row.isActive === wantActive);
+		}
+		if (sorting.length > 0) {
+			const [{ id, desc }] = sorting;
+			list = [...list].sort((a, b) => {
+				const av = (a as unknown as Record<string, unknown>)[id];
+				const bv = (b as unknown as Record<string, unknown>)[id];
+				if (av == null && bv == null) return 0;
+				if (av == null) return desc ? 1 : -1;
+				if (bv == null) return desc ? -1 : 1;
+				if (av < bv) return desc ? 1 : -1;
+				if (av > bv) return desc ? -1 : 1;
+				return 0;
+			});
+		}
+		return list;
+	});
+
+	const totalItems = $derived(filteredRows.length);
+	const pageCount = $derived(Math.max(1, Math.ceil(totalItems / pagination.pageSize)));
+
+	const dataFilters = $derived([
+		{
+			slug: 'published',
+			label: t.filterPublished,
+			options: [
+				{ value: 'published', label: t.statusPublished },
+				{ value: 'draft', label: t.statusDraft }
+			]
+		},
+		{
+			slug: 'isActive',
+			label: t.filterActive,
+			options: [
+				{ value: 'active', label: t.activeYes },
+				{ value: 'inactive', label: t.activeNo }
+			]
+		}
+	]);
+	const activeDataFilters = $derived({ published: publishedFilter, isActive: activeFilter });
+
 	async function createInCollection(slug: string) {
 		try {
 			const newEntry = await remotes.createEntry({ type: 'collection', slug });
@@ -38,121 +242,154 @@
 			alert(err instanceof Error ? err.message : 'Nie udało się utworzyć wpisu');
 		}
 	}
+
+	const columns = $derived.by<ColumnDef<EnrichedRow>[]>(() => [
+		{
+			accessorKey: '_title',
+			header: ({ column }) =>
+				renderComponent(SortableHeader<EnrichedRow>, { column, label: t.columnName, sorting }),
+			cell: (info) =>
+				renderComponent(EntryLink, {
+					name: info.row.original._title,
+					url: `/admin/entries/${info.row.original.entryId}`
+				})
+		},
+		{
+			accessorKey: 'collectionSlug',
+			header: t.columnCollection,
+			cell: (info) => info.row.original.collectionSlug
+		},
+		{
+			accessorKey: 'basePrice',
+			header: ({ column }) =>
+				renderComponent(SortableHeader<EnrichedRow>, {
+					column,
+					label: t.columnBasePrice,
+					sorting
+				}),
+			cell: (info) => formatPlnPrice(info.row.original.basePrice)
+		},
+		{
+			accessorKey: 'vatRate',
+			header: t.columnVat,
+			cell: (info) => `${info.row.original.vatRate}%`
+		},
+		{
+			accessorKey: 'variantCount',
+			header: t.columnVariants,
+			cell: (info) => info.row.original.variantCount
+		},
+		{
+			accessorKey: 'totalStock',
+			header: t.columnStock,
+			cell: (info) => info.row.original.totalStock ?? t.unlimited
+		},
+		{
+			id: 'status',
+			header: t.columnStatus,
+			cell: (info) =>
+				renderComponent(StatusBadge, {
+					variant: 'boolean',
+					active: info.row.original.published,
+					activeLabel: t.statusPublished,
+					inactiveLabel: t.statusDraft
+				})
+		},
+		{
+			id: 'isActive',
+			header: t.filterActive,
+			cell: (info) =>
+				renderComponent(StatusBadge, {
+					variant: 'boolean',
+					active: info.row.original.isActive,
+					activeLabel: t.activeYes,
+					inactiveLabel: t.activeNo
+				})
+		}
+	]);
+
+	const collections = $derived(collectionsQuery?.current ?? []);
 </script>
 
-<div class="flex items-center justify-between gap-4 p-6">
-	<div>
-		<h1 class="text-2xl font-extrabold tracking-tight">Produkty</h1>
-		<p class="text-muted-foreground text-sm">
-			{#if entriesQuery.ready}
-				{entriesQuery.current?.length ?? 0}
-				{(entriesQuery.current?.length ?? 0) === 1 ? 'produkt' : 'produktów'}
-			{:else}
-				Ładowanie…
+<div class="p-5 pb-24 md:p-7">
+	<PageHeader title={t.title} count={!isLoading && !isError ? allRows.length : undefined}>
+		{#snippet primaryActions()}
+			{#if collections.length === 1}
+				{@const only = collections[0]}
+				<Button onclick={() => createInCollection(only.slug)}>
+					<PlusIcon class="size-4" />
+					{t.addProduct}
+				</Button>
+			{:else if collections.length > 1}
+				<DropdownMenu.Root>
+					<DropdownMenu.Trigger>
+						{#snippet child({ props })}
+							<Button {...props}>
+								<PlusIcon class="size-4" />
+								{t.addProduct}
+								<ChevronDownIcon class="size-4" />
+							</Button>
+						{/snippet}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						{#each collections as c (c.slug)}
+							<DropdownMenu.Item onclick={() => createInCollection(c.slug)}>
+								{getLocalizedLabel(c.labels?.singular, interfaceLanguage.current) ?? c.slug}
+							</DropdownMenu.Item>
+						{/each}
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
 			{/if}
-		</p>
-	</div>
-	{#if collectionsQuery.ready && collectionsQuery.current && collectionsQuery.current.length > 0}
-		{#if collectionsQuery.current.length === 1}
-			{@const only = collectionsQuery.current[0]}
-			<Button onclick={() => createInCollection(only.slug)}>
-				<PlusIcon class="mr-1 size-4" />
-				Dodaj produkt
-			</Button>
-		{:else}
-			<DropdownMenu.Root>
-				<DropdownMenu.Trigger>
-					{#snippet child({ props })}
-						<Button {...props}>
-							<PlusIcon class="mr-1 size-4" />
-							Dodaj produkt
-							<ChevronDownIcon class="ml-1 size-4" />
-						</Button>
-					{/snippet}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					{#each collectionsQuery.current as c (c.slug)}
-						<DropdownMenu.Item onclick={() => createInCollection(c.slug)}>
-							{getLocalizedLabel(c.labels?.singular, interfaceLanguage.current) ?? c.slug}
-						</DropdownMenu.Item>
-					{/each}
-				</DropdownMenu.Content>
-			</DropdownMenu.Root>
-		{/if}
-	{/if}
-</div>
+		{/snippet}
+	</PageHeader>
 
-<div class="px-6 pb-12">
-	{#if !entriesQuery.ready}
-		<div class="text-muted-foreground">Ładowanie…</div>
-	{:else if (entriesQuery.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 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".
-			</p>
-		</div>
+	{#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} />
 	{: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">Nazwa</th>
-						<th class="px-4 py-3 font-semibold">Kolekcja</th>
-						<th class="px-4 py-3 font-semibold">Cena bazowa</th>
-						<th class="px-4 py-3 font-semibold">VAT</th>
-						<th class="px-4 py-3 font-semibold">Warianty</th>
-						<th class="px-4 py-3 font-semibold">Magazyn</th>
-						<th class="px-4 py-3 font-semibold">Status</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each entriesQuery.current ?? [] as row (row.entryId)}
-						{@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">
-									{title}
-								</a>
-							</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>
-							<td class="px-4 py-3">
-								{#if row.totalStock == null}
-									<span class="text-muted-foreground text-xs">nieograniczony</span>
-								{:else}
-									{row.totalStock}
-								{/if}
-							</td>
-							<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"
-											>Opublikowany</span
-										>
-									{:else}
-										<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"
-											>Nieaktywny</span
-										>
-									{/if}
-								</div>
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
+		<TableToolbar
+			{searchQuery}
+			searchPlaceholder={t.searchPlaceholder}
+			searchLabel={t.search}
+			onSearchChange={(q) => {
+				searchQuery = q;
+				pagination = { ...pagination, pageIndex: 0 };
+			}}
+			hideStatusFilter
+			hideViewToggle
+			{dataFilters}
+			{activeDataFilters}
+			onDataFilterChange={(slug, value) => {
+				if (slug === 'published') publishedFilter = value;
+				else if (slug === 'isActive') activeFilter = value;
+				pagination = { ...pagination, pageIndex: 0 };
+			}}
+		/>
+
+		<div class="overflow-hidden rounded-xl border bg-card shadow-sm">
+			<DataTable
+				data={filteredRows}
+				{columns}
+				enableSorting
+				enablePagination
+				{sorting}
+				onSortingChange={(s) => (sorting = s)}
+				{pagination}
+				onPaginationChange={(p) => (pagination = p)}
+				emptyTitle={t.noResults}
+			/>
+
+			<TablePagination
+				pageIndex={pagination.pageIndex}
+				pageSize={pagination.pageSize}
+				{pageCount}
+				{totalItems}
+				onPageChange={(p) => (pagination = { ...pagination, pageIndex: p })}
+				onPageSizeChange={(s) => (pagination = { pageIndex: 0, pageSize: s })}
+			/>
 		</div>
 	{/if}
 </div>

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

@@ -1,3 +1,21 @@
-declare const ShopProductsListPage: import("svelte").Component<Record<string, never>, {}, "">;
+export type ShopProductRow = {
+    entryId: string;
+    collectionSlug: string;
+    basePrice: number;
+    vatRate: number;
+    isActive: boolean;
+    variantCount: number;
+    totalStock: number | null;
+    publishedData: Record<string, unknown> | null;
+    draftData: Record<string, unknown> | null;
+    publishedByLang?: Record<string, Record<string, unknown>>;
+    draftByLang?: Record<string, Record<string, unknown>>;
+    published: boolean;
+};
+type Props = {
+    data?: ShopProductRow[];
+    state?: 'loading' | 'error' | 'ok';
+};
+declare const ShopProductsListPage: import("svelte").Component<Props, {}, "">;
 type ShopProductsListPage = ReturnType<typeof ShopProductsListPage>;
 export default ShopProductsListPage;

package/dist/admin/client/users/accept-invite-page.svelte

@@ -8,6 +8,7 @@
 	import { page } from '$app/state';
 	import { usersLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { generatePassword } from '../../shared/password-generate.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const lang = $derived(usersLang[interfaceLanguage.current]);
@@ -61,6 +62,15 @@
 		return null;
 	}
 
+	function handleGeneratePassword() {
+		const pw = generatePassword();
+		password = pw;
+		confirmPassword = pw;
+		showPassword = true;
+		showConfirm = true;
+		error = '';
+	}
+
 	async function handleSubmit(e: Event) {
 		e.preventDefault();
 		const validationError = validate();
@@ -198,9 +208,20 @@
 								{strengthLabelText}: {strengthLabels[strength.level]}
 							</p>
 						{/if}
-						<p id="invite-pw-hint" class="text-text-light mt-1 text-xs">
-							{lang.passwordHint}
-						</p>
+						<div class="mt-1 flex items-center justify-between gap-2">
+							<p id="invite-pw-hint" class="text-text-light text-xs">
+								{lang.passwordHint}
+							</p>
+							<Button
+								variant="link"
+								size="sm"
+								type="button"
+								class="h-auto shrink-0 p-0 text-xs"
+								onclick={handleGeneratePassword}
+							>
+								{lang.generatePassword}
+							</Button>
+						</div>
 					</div>
 					<div class="space-y-2">
 						<Label for="invite-confirm">{lang.invite.confirmPassword}</Label>

package/dist/admin/client/users/create-user-dialog.svelte

@@ -11,6 +11,7 @@
 	import { toast } from 'svelte-sonner';
 	import { usersLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { generatePassword } from '../../shared/password-generate.js';
 	import type { UserRole } from '../../../types/roles.js';
 
 	type Props = {
@@ -32,13 +33,6 @@
 	let error = $state('');
 	let showPassword = $state(false);
 
-	function generatePassword(length = 20): string {
-		const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*';
-		const array = new Uint8Array(length);
-		crypto.getRandomValues(array);
-		return Array.from(array, (b) => chars[b % chars.length]).join('');
-	}
-
 	function reset() {
 		name = '';
 		email = '';
@@ -111,6 +105,7 @@
 							type="button"
 							class="absolute right-2 top-1/2 -translate-y-1/2"
 							style="color: var(--text-light);"
+							aria-label={showPassword ? lang.hidePassword : lang.showPassword}
 							onclick={() => (showPassword = !showPassword)}
 						>
 							{#if showPassword}
@@ -126,7 +121,7 @@
 						size="sm"
 						class="shrink-0 gap-1.5"
 						onclick={() => {
-							password = generatePassword();
+							password = generatePassword(20);
 							showPassword = true;
 						}}
 					>

package/dist/admin/client/users/lang.d.ts

@@ -15,6 +15,8 @@ export declare const usersLang: Record<InterfaceLanguage, {
     cancel: string;
     password: string;
     passwordHint: string;
+    showPassword: string;
+    hidePassword: string;
     passwordMinLength: string;
     passwordRequirements: string;
     passwordMismatch: string;

package/dist/admin/client/users/lang.js

@@ -15,6 +15,8 @@ export const usersLang = {
         cancel: 'Cancel',
         password: 'Password',
         passwordHint: 'Min. 8 characters, uppercase, number and special character',
+        showPassword: 'Show password',
+        hidePassword: 'Hide password',
         passwordMinLength: 'Password must be at least 8 characters',
         passwordRequirements: 'Password must contain an uppercase letter, a number and a special character',
         passwordMismatch: 'Passwords do not match',
@@ -101,6 +103,8 @@ export const usersLang = {
         cancel: 'Anuluj',
         password: 'Hasło',
         passwordHint: 'Min. 8 znaków, wielka litera, cyfra i znak specjalny',
+        showPassword: 'Pokaż hasło',
+        hidePassword: 'Ukryj hasło',
         passwordMinLength: 'Hasło musi mieć min. 8 znaków',
         passwordRequirements: 'Hasło musi zawierać wielką literę, cyfrę i znak specjalny',
         passwordMismatch: 'Hasła nie są zgodne',

package/dist/admin/client/users/pending-invitations.svelte

@@ -7,7 +7,7 @@
 	import { toast } from 'svelte-sonner';
 	import { usersLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
-	import { toLocaleCode } from '../../utils/formatDate.js';
+	import { formatShortDateOnly } from '../../utils/formatters.js';
 	import { getRoleLabel } from '../../utils/roleLabel.js';
 
 	type Props = {
@@ -82,13 +82,6 @@
 		}
 	}
 
-	function formatDate(date: string): string {
-		return new Date(date).toLocaleString(toLocaleCode(interfaceLanguage.current), {
-			year: 'numeric',
-			month: 'short',
-			day: 'numeric'
-		});
-	}
 </script>
 
 <section class="mt-10 users-fade-up" aria-labelledby="invitations-heading">
@@ -144,7 +137,7 @@
 									class:users-expiring-soon={isExpiringSoon(inv.expiresAt)}
 									style={isExpiringSoon(inv.expiresAt) ? '' : 'color: var(--muted-foreground);'}
 								>
-									{formatDate(inv.expiresAt)}
+									{formatShortDateOnly(inv.expiresAt, interfaceLanguage.current)}
 									{#if isExpiringSoon(inv.expiresAt)}
 										— {lang.invite.expiringSoon}
 									{/if}