includio-cms 0.1.4 → 0.5.0

package/dist/admin/client/form/form-submission/form-submission.svelte

@@ -3,21 +3,24 @@
 	import { getRemotes } from '../../../context/remotes.js';
 	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../../utils/collectionLabel.js';
+	import { formatAbsoluteDate } from '../../../utils/formatDate.js';
 	import type { FormSubmission } from '../../../../types/forms.js';
 	import type { InterfaceLanguage } from '../../../../types/languages.js';
 	import SubmissionField from './submission-field.svelte';
 	import Button from '../../../../components/ui/button/button.svelte';
-	import Badge from '../../../../components/ui/badge/badge.svelte';
+	import * as AlertDialog from '../../../../components/ui/alert-dialog/index.js';
 	import Trash from '@tabler/icons-svelte/icons/trash';
 	import Mail from '@tabler/icons-svelte/icons/mail';
 	import Eye from '@tabler/icons-svelte/icons/eye';
 	import EyeOff from '@tabler/icons-svelte/icons/eye-off';
+	import Printer from '@tabler/icons-svelte/icons/printer';
 	import ChevronLeft from '@tabler/icons-svelte/icons/chevron-left';
 	import ChevronRight from '@tabler/icons-svelte/icons/chevron-right';
 	import ArrowLeft from '@tabler/icons-svelte/icons/arrow-left';
 	import Monitor from '@tabler/icons-svelte/icons/device-desktop';
 	import Globe from '@tabler/icons-svelte/icons/world';
 	import Calendar from '@tabler/icons-svelte/icons/calendar';
+	import ClipboardList from '@tabler/icons-svelte/icons/clipboard-list';
 
 	const remotes = getRemotes();
 	const interfaceLanguage = useInterfaceLanguage();
@@ -30,54 +33,76 @@
 			markRead: string;
 			markUnread: string;
 			reply: string;
+			print: string;
 			previous: string;
 			next: string;
 			metadata: string;
 			createdAt: string;
 			ip: string;
 			device: string;
+			context: string;
 			formData: string;
 			new: string;
 			read: string;
-			confirmDelete: string;
+			confirmDeleteTitle: string;
+			confirmDeleteDesc: string;
+			cancel: string;
 			noEmail: string;
+			of: string;
+			printSubmission: string;
+			exportPdf: string;
 		}
 	> = {
 		pl: {
-			back: 'Powrót',
+			back: 'Powrót do listy',
 			delete: 'Usuń',
 			markRead: 'Oznacz jako przeczytane',
 			markUnread: 'Oznacz jako nieprzeczytane',
 			reply: 'Odpowiedz',
+			print: 'Drukuj',
 			previous: 'Poprzednie',
 			next: 'Następne',
 			metadata: 'Metadane',
 			createdAt: 'Data utworzenia',
 			ip: 'Adres IP',
 			device: 'Urządzenie',
+			context: 'Kontekst',
 			formData: 'Dane formularza',
 			new: 'Nowe',
 			read: 'Przeczytane',
-			confirmDelete: 'Czy na pewno chcesz usunąć to zgłoszenie?',
-			noEmail: 'Brak adresu email'
+			confirmDeleteTitle: 'Usunąć zgłoszenie?',
+			confirmDeleteDesc: 'Tej akcji nie można cofnąć. Zgłoszenie zostanie trwale usunięte.',
+			cancel: 'Anuluj',
+			noEmail: 'Brak adresu email',
+			of: 'z',
+			printSubmission: 'Drukuj zgłoszenie',
+			exportPdf: 'Eksportuj PDF'
 		},
 		en: {
-			back: 'Back',
+			back: 'Back to list',
 			delete: 'Delete',
 			markRead: 'Mark as read',
 			markUnread: 'Mark as unread',
 			reply: 'Reply',
+			print: 'Print',
 			previous: 'Previous',
 			next: 'Next',
 			metadata: 'Metadata',
 			createdAt: 'Created at',
 			ip: 'IP Address',
 			device: 'Device',
+			context: 'Context',
 			formData: 'Form data',
 			new: 'New',
 			read: 'Read',
-			confirmDelete: 'Are you sure you want to delete this submission?',
-			noEmail: 'No email address'
+			confirmDeleteTitle: 'Delete submission?',
+			confirmDeleteDesc:
+				'This action cannot be undone. The submission will be permanently deleted.',
+			cancel: 'Cancel',
+			noEmail: 'No email address',
+			of: 'of',
+			printSubmission: 'Print submission',
+			exportPdf: 'Export PDF'
 		}
 	};
 
@@ -87,25 +112,44 @@
 
 	let { submission }: Props = $props();
 
+	const t = $derived(lang[interfaceLanguage.current]);
+
 	let form = await remotes.getForm(submission.formSlug);
 	let allSubmissions = await remotes.getFormSubmissions(submission.formSlug);
 
 	let isRead = $state(submission.read);
+	let deleteDialogOpen = $state(false);
+
+	const formLabel = $derived(
+		getLocalizedLabel(form.label, interfaceLanguage.current) || form.slug
+	);
 
 	const currentIndex = $derived(allSubmissions.findIndex((s) => s.id === submission.id));
-	const previousSubmission = $derived(currentIndex > 0 ? allSubmissions[currentIndex - 1] : null);
+	const previousSubmission = $derived(
+		currentIndex > 0 ? allSubmissions[currentIndex - 1] : null
+	);
 	const nextSubmission = $derived(
 		currentIndex < allSubmissions.length - 1 ? allSubmissions[currentIndex + 1] : null
 	);
 
 	const emailField = $derived(form.fields.find((f) => f.type === 'email'));
-	const emailValue = $derived(emailField ? (submission.data[emailField.slug] as string) : null);
+	const emailValue = $derived(
+		emailField ? (submission.data[emailField.slug] as string) : null
+	);
 
-	const createdAtFormatted = $derived(new Date(submission.createdAt).toLocaleString('pl'));
+	// Get the first field value for the title
+	const titleValue = $derived(
+		form.fields.length > 0 ? String(submission.data[form.fields[0].slug] || '-') : '-'
+	);
+
+	const createdAtFormatted = $derived(
+		formatAbsoluteDate(new Date(submission.createdAt), interfaceLanguage.current)
+	);
 
 	function parseUserAgent(ua?: string | null): string {
 		if (!ua) return '-';
-		const browser = ua.match(/(Chrome|Firefox|Safari|Edge|Opera)[/\s](\d+)/)?.[1] || 'Unknown';
+		const browser =
+			ua.match(/(Chrome|Firefox|Safari|Edge|Opera)[/\s](\d+)/)?.[1] || 'Unknown';
 		const os = ua.includes('Windows')
 			? 'Windows'
 			: ua.includes('Mac')
@@ -121,7 +165,6 @@
 	}
 
 	async function handleDelete() {
-		if (!confirm(lang[interfaceLanguage.current].confirmDelete)) return;
 		await remotes.deleteFormSubmission(submission.id);
 		goto(`/admin/forms/${submission.formSlug}`);
 	}
@@ -136,108 +179,253 @@
 			window.location.href = `mailto:${emailValue}`;
 		}
 	}
+
+	function handlePrint() {
+		window.print();
+	}
 </script>
 
 <div class="space-y-6">
-	<div class="flex flex-wrap items-center justify-between gap-4">
+	<!-- Back + navigation row -->
+	<div class="flex flex-wrap items-center justify-between gap-3">
 		<a
 			href="/admin/forms/{submission.formSlug}"
-			class="text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm"
+			class="text-muted-foreground hover:text-primary flex items-center gap-1.5 text-sm font-medium transition-colors"
 		>
 			<ArrowLeft class="size-4" />
-			{lang[interfaceLanguage.current].back}
+			{t.back}
 		</a>
 
-		<div class="flex items-center gap-2">
+		<nav class="flex items-center gap-2" aria-label={t.previous}>
 			{#if previousSubmission}
-				<Button variant="outline" size="sm" href="/admin/form-submissions/{previousSubmission.id}">
-					<ChevronLeft class="mr-1 size-4" />
-					{lang[interfaceLanguage.current].previous}
+				<Button
+					variant="outline"
+					size="icon"
+					class="size-8"
+					href="/admin/form-submissions/{previousSubmission.id}"
+					title={t.previous}
+				>
+					<ChevronLeft class="size-4" />
+				</Button>
+			{:else}
+				<Button variant="outline" size="icon" class="size-8" disabled>
+					<ChevronLeft class="size-4" />
 				</Button>
 			{/if}
+			<span class="text-muted-foreground px-1 text-sm font-medium">
+				{currentIndex + 1} {t.of} {allSubmissions.length}
+			</span>
 			{#if nextSubmission}
-				<Button variant="outline" size="sm" href="/admin/form-submissions/{nextSubmission.id}">
-					{lang[interfaceLanguage.current].next}
-					<ChevronRight class="ml-1 size-4" />
+				<Button
+					variant="outline"
+					size="icon"
+					class="size-8"
+					href="/admin/form-submissions/{nextSubmission.id}"
+					title={t.next}
+				>
+					<ChevronRight class="size-4" />
+				</Button>
+			{:else}
+				<Button variant="outline" size="icon" class="size-8" disabled>
+					<ChevronRight class="size-4" />
 				</Button>
 			{/if}
-		</div>
+		</nav>
 	</div>
 
-	<div class="flex flex-wrap items-center justify-between gap-4 rounded-lg border bg-white p-4 dark:bg-slate-900">
-		<div class="flex items-center gap-4">
-			<span class="text-muted-foreground text-sm">{createdAtFormatted}</span>
-			<Badge variant={isRead ? 'secondary' : 'default'}>
-				{isRead ? lang[interfaceLanguage.current].read : lang[interfaceLanguage.current].new}
-			</Badge>
+	<!-- Title + status -->
+	<div>
+		<div class="mb-1 flex flex-wrap items-center gap-3">
+			<h1 class="text-2xl font-bold">{titleValue}</h1>
+			{#if isRead}
+				<span
+					class="bg-lavender-lighter text-primary inline-flex h-6 items-center rounded-full px-2.5 text-xs font-semibold"
+				>
+					{t.read}
+				</span>
+			{:else}
+				<span
+					class="bg-primary inline-flex h-6 items-center rounded-full px-2.5 text-xs font-semibold text-white"
+				>
+					{t.new}
+				</span>
+			{/if}
 		</div>
+		<p class="text-muted-foreground text-sm font-medium">{formLabel}</p>
+	</div>
 
-		<div class="flex items-center gap-2">
-			<Button variant="outline" size="sm" onclick={toggleRead}>
-				{#if isRead}
-					<EyeOff class="mr-2 size-4" />
-					{lang[interfaceLanguage.current].markUnread}
-				{:else}
-					<Eye class="mr-2 size-4" />
-					{lang[interfaceLanguage.current].markRead}
-				{/if}
-			</Button>
-
-			{#if emailValue}
-				<Button variant="outline" size="sm" onclick={handleReply}>
-					<Mail class="mr-2 size-4" />
-					{lang[interfaceLanguage.current].reply}
-				</Button>
+	<!-- Actions bar -->
+	<div class="flex flex-wrap items-center gap-2">
+		<Button variant="outline" size="sm" class="gap-1.5" onclick={toggleRead}>
+			{#if isRead}
+				<EyeOff class="size-4" />
+				{t.markUnread}
+			{:else}
+				<Eye class="size-4" />
+				{t.markRead}
 			{/if}
+		</Button>
 
-			<Button variant="destructive" size="sm" onclick={handleDelete}>
-				<Trash class="mr-2 size-4" />
-				{lang[interfaceLanguage.current].delete}
+		{#if emailValue}
+			<Button variant="outline" size="sm" class="gap-1.5" onclick={handleReply}>
+				<Mail class="size-4" />
+				{t.reply}
 			</Button>
-		</div>
+		{/if}
+
+		<Button variant="outline" size="sm" class="gap-1.5" onclick={handlePrint}>
+			<Printer class="size-4" />
+			{t.print}
+		</Button>
+
+		<div class="flex-1"></div>
+
+		<AlertDialog.Root bind:open={deleteDialogOpen}>
+			<AlertDialog.Trigger>
+				{#snippet child({ props })}
+					<Button
+						{...props}
+						variant="outline"
+						size="sm"
+						class="gap-1.5 text-destructive hover:bg-destructive/10"
+					>
+						<Trash class="size-4" />
+						{t.delete}
+					</Button>
+				{/snippet}
+			</AlertDialog.Trigger>
+			<AlertDialog.Content>
+				<div class="flex flex-col gap-2">
+					<AlertDialog.Title>{t.confirmDeleteTitle}</AlertDialog.Title>
+					<AlertDialog.Description>
+						{t.confirmDeleteDesc}
+					</AlertDialog.Description>
+				</div>
+				<AlertDialog.Footer>
+					<AlertDialog.Cancel>{t.cancel}</AlertDialog.Cancel>
+					<AlertDialog.Action
+						class="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						onclick={handleDelete}
+					>
+						<Trash class="mr-1.5 size-4" />
+						{t.delete}
+					</AlertDialog.Action>
+				</AlertDialog.Footer>
+			</AlertDialog.Content>
+		</AlertDialog.Root>
 	</div>
 
-	<div class="grid gap-6 lg:grid-cols-3">
-		<div class="space-y-4 lg:col-span-2">
-			<h2 class="text-lg font-semibold">{lang[interfaceLanguage.current].formData}</h2>
-			<div class="grid gap-4 sm:grid-cols-2">
+	<!-- Two-column layout -->
+	<div class="grid items-start gap-7 lg:grid-cols-[2fr_1fr]">
+		<!-- Left: Form data -->
+		<section aria-labelledby="form-data-heading">
+			<h2 class="mb-4 text-lg font-semibold" id="form-data-heading">{t.formData}</h2>
+			<div class="grid gap-3 sm:grid-cols-2">
 				{#each form.fields as field}
-					<SubmissionField
-						label={getLocalizedLabel(field.label, interfaceLanguage.current) || field.slug}
-						value={submission.data[field.slug]}
-						fieldType={field.type}
-					/>
+					{@const isFullWidth = field.type === 'textarea' || field.type === 'checkbox'}
+					<div class={isFullWidth ? 'sm:col-span-2' : ''}>
+						<SubmissionField
+							label={getLocalizedLabel(field.label, interfaceLanguage.current) ||
+								field.slug}
+							value={submission.data[field.slug]}
+							fieldType={field.type}
+						/>
+					</div>
 				{/each}
 			</div>
-		</div>
+		</section>
 
-		<div class="space-y-4">
-			<h2 class="text-lg font-semibold">{lang[interfaceLanguage.current].metadata}</h2>
-			<div class="space-y-3 rounded-lg border bg-slate-50 p-4 dark:bg-slate-800/50">
-				<div class="flex items-center gap-3">
-					<Calendar class="size-4 text-slate-400" />
-					<div>
-						<p class="text-muted-foreground text-xs">{lang[interfaceLanguage.current].createdAt}</p>
-						<p class="text-sm font-medium">{createdAtFormatted}</p>
-					</div>
+		<!-- Right: Metadata -->
+		<aside class="lg:sticky lg:top-7" aria-labelledby="metadata-heading">
+			<div class="overflow-hidden rounded-xl border shadow-sm">
+				<div class="border-b px-5 py-4">
+					<h2 class="text-sm font-bold" id="metadata-heading">{t.metadata}</h2>
 				</div>
-
-				<div class="flex items-center gap-3">
-					<Globe class="size-4 text-slate-400" />
-					<div>
-						<p class="text-muted-foreground text-xs">{lang[interfaceLanguage.current].ip}</p>
-						<p class="text-sm font-medium">{submission.ip || '-'}</p>
+				<div class="divide-y">
+					<div class="flex items-center gap-3 px-5 py-3">
+						<div
+							class="bg-surface flex size-8 shrink-0 items-center justify-center rounded-md"
+						>
+							<ClipboardList class="text-muted-foreground size-4" />
+						</div>
+						<div>
+							<div
+								class="text-muted-foreground text-[11px] font-semibold uppercase tracking-wide"
+							>
+								{t.context}
+							</div>
+							<div class="mt-0.5 text-sm font-medium">{formLabel}</div>
+						</div>
 					</div>
-				</div>
-
-				<div class="flex items-center gap-3">
-					<Monitor class="size-4 text-slate-400" />
-					<div>
-						<p class="text-muted-foreground text-xs">{lang[interfaceLanguage.current].device}</p>
-						<p class="text-sm font-medium">{parseUserAgent(submission.userAgent)}</p>
+					<div class="flex items-center gap-3 px-5 py-3">
+						<div
+							class="bg-surface flex size-8 shrink-0 items-center justify-center rounded-md"
+						>
+							<Calendar class="text-muted-foreground size-4" />
+						</div>
+						<div>
+							<div
+								class="text-muted-foreground text-[11px] font-semibold uppercase tracking-wide"
+							>
+								{t.createdAt}
+							</div>
+							<div class="mt-0.5 text-sm font-medium">
+								<time datetime={new Date(submission.createdAt).toISOString()}>
+									{createdAtFormatted}
+								</time>
+							</div>
+						</div>
+					</div>
+					<div class="flex items-center gap-3 px-5 py-3">
+						<div
+							class="bg-surface flex size-8 shrink-0 items-center justify-center rounded-md"
+						>
+							<Globe class="text-muted-foreground size-4" />
+						</div>
+						<div>
+							<div
+								class="text-muted-foreground text-[11px] font-semibold uppercase tracking-wide"
+							>
+								{t.ip}
+							</div>
+							<div class="mt-0.5 text-sm font-medium">{submission.ip || '-'}</div>
+						</div>
 					</div>
+					<div class="flex items-center gap-3 px-5 py-3">
+						<div
+							class="bg-surface flex size-8 shrink-0 items-center justify-center rounded-md"
+						>
+							<Monitor class="text-muted-foreground size-4" />
+						</div>
+						<div>
+							<div
+								class="text-muted-foreground text-[11px] font-semibold uppercase tracking-wide"
+							>
+								{t.device}
+							</div>
+							<div class="mt-0.5 text-sm font-medium">
+								{parseUserAgent(submission.userAgent)}
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="flex flex-col gap-2 border-t p-4">
+					<Button variant="outline" size="sm" class="w-full gap-1.5" onclick={handlePrint}>
+						<Printer class="size-3.5" />
+						{t.printSubmission}
+					</Button>
 				</div>
 			</div>
-		</div>
+		</aside>
 	</div>
 </div>
+
+<style>
+	@media print {
+		:global(.sidebar),
+		:global(.site-header),
+		:global([data-slot='sheet-content']) {
+			display: none !important;
+		}
+	}
+</style>

package/dist/admin/client/form/form-submission/submission-field.svelte

@@ -48,26 +48,26 @@
 	}
 </script>
 
-<div class="rounded-lg border bg-white p-4 dark:bg-slate-900">
+<div class="rounded-lg border bg-card p-4">
 	<div class="mb-2 flex items-center gap-2">
 		{#if iconType === 'check'}
-			<CheckCircle class="size-4 text-slate-400" />
+			<CheckCircle class="size-4 text-muted-foreground" />
 		{:else if iconType === 'x'}
-			<CircleX class="size-4 text-slate-400" />
+			<CircleX class="size-4 text-muted-foreground" />
 		{:else if iconType === 'mail'}
-			<Mail class="size-4 text-slate-400" />
+			<Mail class="size-4 text-muted-foreground" />
 		{:else if iconType === 'phone'}
-			<Phone class="size-4 text-slate-400" />
+			<Phone class="size-4 text-muted-foreground" />
 		{:else if iconType === 'message'}
-			<MessageSquare class="size-4 text-slate-400" />
+			<MessageSquare class="size-4 text-muted-foreground" />
 		{:else if iconType === 'hash'}
-			<Hash class="size-4 text-slate-400" />
+			<Hash class="size-4 text-muted-foreground" />
 		{:else if iconType === 'calendar'}
-			<Calendar class="size-4 text-slate-400" />
+			<Calendar class="size-4 text-muted-foreground" />
 		{:else}
-			<FileText class="size-4 text-slate-400" />
+			<FileText class="size-4 text-muted-foreground" />
 		{/if}
-		<span class="text-sm font-medium text-slate-500 dark:text-slate-400">{label}</span>
+		<span class="text-sm font-medium text-muted-foreground">{label}</span>
 	</div>
 
 	<div class="flex items-start justify-between gap-2">
@@ -82,9 +82,9 @@
 				{/if}
 			</div>
 		{:else if isEmail}
-			<a href="mailto:{value}" class="text-blue-600 hover:underline break-all">{displayValue()}</a>
+			<a href="mailto:{value}" class="text-primary hover:underline break-all">{displayValue()}</a>
 		{:else if isPhone}
-			<a href="tel:{value}" class="text-blue-600 hover:underline">{displayValue()}</a>
+			<a href="tel:{value}" class="text-primary hover:underline">{displayValue()}</a>
 		{:else if fieldType === 'textarea'}
 			<p class="whitespace-pre-wrap break-words">{displayValue()}</p>
 		{:else}