From 36ad38f670efd232a73d17cb96691d4d474c6974 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Fri, 5 Jun 2026 12:13:07 +0100
Subject: [PATCH] feat(frontend): add /gdpr page with PDF export and JSON
 download

New /gdpr route: skeleton loading state, 2s polling for async export, styled report cards/tables matching /schedule and /account styling. 16 data sections with conditional rendering (empty sections hidden). VAT breakdowns hidden until any payment has non-zero VAT. Deposits Required hidden when 0. PDF export via window.print() with print CSS hiding navbar and verification banner. Raw JSON download button. Export My Data button added to Account page under Change Password. Vite worker format set to 'es' for WASM encoder compatibility.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 frontend/src/routes/+layout.svelte       |   14 +
 frontend/src/routes/account/+page.svelte |   18 +
 frontend/src/routes/gdpr/+page.svelte    | 1014 ++++++++++++++++++++++
 frontend/vite.config.ts                  |    3 +
 4 files changed, 1049 insertions(+)
 create mode 100644 frontend/src/routes/gdpr/+page.svelte

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 5976dd8..a4f0511 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -68,3 +68,17 @@
 	{/if}
 	{@render children?.()}
 </main>
+
+<style>
+	@media print {
+		:global(nav) {
+			display: none !important;
+		}
+		:global(main > div.bg-red-600) {
+			display: none !important;
+		}
+		:global(main) {
+			padding-top: 0 !important;
+		}
+	}
+</style>
diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index 0827b08..c57ee18 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -1550,6 +1550,24 @@
 
 						<Separator />
 
+						<!-- Export My Data -->
+						<div>
+							<h3 class="mb-2 text-sm font-semibold">Data Privacy</h3>
+							<p class="mb-3 text-sm text-gray-600">
+								View and export all personal data we hold about you
+							</p>
+							<Button onclick={() => goto('/gdpr')} variant="outline">
+								<svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+									<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+									<polyline points="7 10 12 15 17 10"/>
+									<line x1="12" y1="15" x2="12" y2="3"/>
+								</svg>
+								Export My Data
+							</Button>
+						</div>
+
+						<Separator />
+
 						<!-- Notification Preferences (non-admin users only) -->
 						{#if authStore.currentUser?.role !== 'admin'}
 							<div>
diff --git a/frontend/src/routes/gdpr/+page.svelte b/frontend/src/routes/gdpr/+page.svelte
new file mode 100644
index 0000000..4cda041
--- /dev/null
+++ b/frontend/src/routes/gdpr/+page.svelte
@@ -0,0 +1,1014 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { browser } from '$app/environment';
+	import { Button } from '$lib/components/ui/button';
+	import * as Card from '$lib/components/ui/card';
+	import { Skeleton } from '$lib/components/ui/skeleton';
+
+	type GdprData = {
+		user_profile: {
+			id: string;
+			first_name: string;
+			last_name: string;
+			full_name: string;
+			email: string;
+			phone: string;
+			date_of_birth: string;
+			profile_pic_url?: string;
+			account_role: string;
+			account_type: string;
+			last_login_at: string;
+			loyalty_stamps: number;
+			deposits_required: number;
+			referral_code: string;
+			privacy_policy_and_terms_consent: boolean;
+			policy_consent_updated_at: string;
+			data_retention_consent: boolean;
+			data_consent_updated_at: string;
+			created_at: string;
+			updated_at: string;
+		};
+		bookings: Array<{
+			booking_id: string;
+			start_time: string;
+			status: string;
+			notes?: string;
+			created_by?: string;
+			created_at: string;
+			updated_at: string;
+			total_price: number;
+			services: Array<{
+				service_id: string;
+				name: string;
+				description: string;
+				price: number;
+				duration_minutes: number;
+			}>;
+		}>;
+		payments: Array<{
+			payment_id: string;
+			booking_id: string;
+			payment_type: string;
+			payment_method: string;
+			vendor_code?: string;
+			invoice_number: number;
+			status: string;
+			amount: number;
+			vat_amount: number;
+			net_amount: number;
+			created_at: string;
+			updated_at: string;
+		}>;
+		patch_tests?: Array<{
+			patch_test_id: string;
+			name: string;
+			description: string;
+			tested_at: string;
+		}>;
+		referrals: {
+			referred_by?: {
+				referrer_id: string;
+				referrer_name: string;
+				referred_at: string;
+			};
+			referred_users: Array<{
+				referred_id: string;
+				referred_name: string;
+				referred_at: string;
+			}>;
+		};
+		notification_preferences?: Array<{
+			email_enabled: boolean;
+			sms_enabled: boolean;
+			browser_push_enabled: boolean;
+			updated_at: string;
+		}>;
+		saved_cards?: Array<{
+			card_id: string;
+			brand: string;
+			last_4: string;
+			exp_month: number;
+			exp_year: number;
+			fingerprint?: string;
+			is_default: boolean;
+			deleted_at?: string;
+			retained_until?: string;
+			created_at: string;
+		}>;
+		refunds?: Array<{
+			refund_id: string;
+			payment_id: string;
+			booking_id: string;
+			amount: number;
+			status: string;
+			reason: string;
+			created_at: string;
+		}>;
+		social_logins?: Array<{
+			provider: string;
+			created_at: string;
+		}>;
+		loyalty_redemptions?: Array<{
+			id: string;
+			stamps_redeemed: number;
+			status: string;
+			booking_date?: string;
+			booking_services?: string;
+			redeemed_at: string;
+			applied_at?: string;
+			expires_at?: string;
+		}>;
+		booking_discounts?: Array<{
+			id: string;
+			booking_id: string;
+			campaign_name: string;
+			discount_source: string;
+			source_id?: string;
+			campaign_type: string;
+			milestone_type?: string;
+			discount_percent: number;
+			original_total: number;
+			discount_amount: number;
+			applied_at: string;
+		}>;
+		edit_requests?: Array<{
+			id: string;
+			booking_id: string;
+			new_start_time?: string;
+			new_services?: string[];
+			notes?: string;
+			has_overrides: boolean;
+			updated_at: string;
+		}>;
+		affiliate_payouts?: Array<{
+			id: string;
+			amount: number;
+			status: string;
+			created_at: string;
+		}>;
+		verification_codes?: Array<{
+			purpose: string;
+			created_at: string;
+			used_at?: string;
+			expires_at: string;
+		}>;
+		forgiven_no_shows?: Array<{
+			id: string;
+			booking_id: string;
+			created_at: string;
+		}>;
+		export_metadata?: {
+			exported_at: string;
+			exported_by: string;
+			user_id: string;
+			format_version: string;
+		};
+	};
+
+	let pageState = $state<'loading' | 'unauthorized' | 'generating' | 'loaded' | 'error'>('loading');
+	let gdprData = $state<GdprData | null>(null);
+	let errorMessage = $state('');
+	let pollTimer: ReturnType<typeof setTimeout> | null = null;
+
+	$effect(() => {
+		if (!browser) return;
+		if (authStore.isLoading) {
+			pageState = 'loading';
+			return;
+		}
+		if (!authStore.isAuthenticated) {
+			pageState = 'unauthorized';
+			goto('/login', { replaceState: true });
+			return;
+		}
+		if (pageState === 'loading') {
+			pageState = 'generating';
+			fetchGdprData();
+		}
+	});
+
+	function stopPolling() {
+		if (pollTimer) {
+			clearTimeout(pollTimer);
+			pollTimer = null;
+		}
+	}
+
+	async function fetchGdprData() {
+		stopPolling();
+		try {
+			const res = await fetch('/api/user/gdpr-export', {
+				headers: { Authorization: `Bearer ${authStore.currentToken}` }
+			});
+			if (res.ok) {
+				const data = await res.json();
+				if (data.status === 'generating') {
+					pageState = 'generating';
+					pollTimer = setTimeout(fetchGdprData, 2000);
+				} else {
+					gdprData = data as GdprData;
+					pageState = 'loaded';
+				}
+			} else {
+				const text = await res.text();
+				errorMessage = `Failed to fetch data (${res.status}): ${text}`;
+				pageState = 'error';
+			}
+		} catch (e) {
+			errorMessage = 'Network error — could not connect to server.';
+			pageState = 'error';
+		}
+	}
+
+	function handlePrint() {
+		window.print();
+	}
+
+	function fmt(amount: number): string {
+		return `£${Number(amount).toFixed(2)}`;
+	}
+
+	function fmtDate(dateStr: string): string {
+		if (!dateStr) return '—';
+		const d = new Date(dateStr);
+		return d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
+	}
+
+	function fmtDateTime(dateStr: string): string {
+		if (!dateStr) return '—';
+		const d = new Date(dateStr);
+		return d.toLocaleDateString('en-GB', {
+			day: 'numeric',
+			month: 'short',
+			year: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit'
+		});
+	}
+
+	function badge(status: string): string {
+		const s = status.toLowerCase();
+		if (['completed', 'confirmed', 'successful', 'active', 'paid', 'approved'].includes(s))
+			return 'bg-green-100 text-green-700';
+		if (['pending', 'processing', 'initiated'].includes(s)) return 'bg-yellow-100 text-yellow-700';
+		if (['cancelled', 'failed', 'refunded', 'deleted'].includes(s))
+			return 'bg-red-100 text-red-700';
+		return 'bg-gray-100 text-gray-600';
+	}
+
+	function hasReferralData(r: GdprData['referrals']): boolean {
+		return !!(r?.referred_by || (r?.referred_users && r.referred_users.length > 0));
+	}
+
+	let hasVat = $derived(
+		gdprData?.payments?.some((p) => p.vat_amount && Number(p.vat_amount) > 0) ?? false
+	);
+
+	function downloadJson() {
+		if (!gdprData) return;
+		const blob = new Blob([JSON.stringify(gdprData, null, 2)], { type: 'application/json' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = `gdpr-export-${new Date().toISOString().split('T')[0]}.json`;
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+</script>
+
+<svelte:head>
+	<title>Your Personal Data — Crussell</title>
+</svelte:head>
+
+<div class="mx-auto max-w-4xl p-6">
+	{#if pageState === 'loading' || pageState === 'generating'}
+		<h1 class="mb-6 text-2xl font-bold">Your Personal Data Report</h1>
+		<div class="mb-4 flex items-center gap-3">
+			<div
+				class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-solid border-gray-300 border-r-transparent"
+				role="status"
+			>
+				<span class="sr-only">Loading…</span>
+			</div>
+			<p class="text-sm text-gray-500">Generating report…</p>
+		</div>
+		<div class="space-y-4">
+			{#each [1, 2, 3] as _i (_i)}
+				<div class="rounded-xl border bg-card p-6">
+					<Skeleton class="mb-3 h-5 w-40" />
+					<div class="space-y-2">
+						<Skeleton class="h-4 w-full" />
+						<Skeleton class="h-4 w-3/4" />
+						<Skeleton class="h-4 w-2/3" />
+					</div>
+				</div>
+			{/each}
+		</div>
+	{:else if pageState === 'error'}
+		<div class="flex flex-col items-center justify-center py-20">
+			<h2 class="mb-2 text-xl font-bold">Something went wrong</h2>
+			<p class="mb-6 text-sm text-gray-500">{errorMessage}</p>
+			<div class="flex gap-3">
+				<Button onclick={fetchGdprData}>Try Again</Button>
+				<Button onclick={() => goto('/account')} variant="outline">Back to Account</Button>
+			</div>
+		</div>
+	{:else if pageState === 'loaded' && gdprData}
+		<div class="print-area">
+			<div class="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+				<div>
+					<button
+						onclick={() => goto('/account')}
+						class="mb-2 inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-900"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7" /></svg
+						>
+						Back to Account
+					</button>
+					<h1 class="text-2xl font-bold">Your Personal Data Report</h1>
+					<p class="mt-1 text-sm text-gray-500">
+						{gdprData.export_metadata?.exported_at
+							? fmtDateTime(gdprData.export_metadata.exported_at)
+							: 'Generated now'}
+					</p>
+				</div>
+				<div class="no-print flex gap-2">
+					<Button onclick={downloadJson} variant="outline" class="shrink-0">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="mr-2 h-4 w-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><polyline
+								points="14 2 14 8 20 8"
+							/><line x1="16" y1="13" x2="8" y2="13" /><line x1="16" y1="17" x2="8" y2="17" /></svg
+						>
+						Download JSON
+					</Button>
+					<Button onclick={handlePrint} variant="default" class="shrink-0">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="mr-2 h-4 w-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							><polyline points="6 9 6 2 18 2 18 9" /><path
+								d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"
+							/><rect x="6" y="14" width="12" height="8" /></svg
+						>
+						Export PDF
+					</Button>
+				</div>
+			</div>
+
+			<!-- User Profile -->
+			<Card.Root class="mb-4">
+				<Card.Header><Card.Title>User Profile</Card.Title></Card.Header>
+				<Card.Content>
+					<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+						<div>
+							<span class="text-xs text-gray-400">Name</span>
+							<p class="text-sm font-medium">{gdprData.user_profile.full_name}</p>
+						</div>
+						<div>
+							<span class="text-xs text-gray-400">Email</span>
+							<p class="text-sm">{gdprData.user_profile.email}</p>
+						</div>
+						<div>
+							<span class="text-xs text-gray-400">Phone</span>
+							<p class="text-sm">{gdprData.user_profile.phone || '—'}</p>
+						</div>
+						<div>
+							<span class="text-xs text-gray-400">Date of Birth</span>
+							<p class="text-sm">{fmtDate(gdprData.user_profile.date_of_birth)}</p>
+						</div>
+						<div>
+							<span class="text-xs text-gray-400">Account Role</span>
+							<p class="text-sm">{gdprData.user_profile.account_role.replace(/_/g, ' ')}</p>
+						</div>
+						<div>
+							<span class="text-xs text-gray-400">Account Type</span>
+							<p class="text-sm">{gdprData.user_profile.account_type}</p>
+						</div>
+						<div>
+							<span class="text-xs text-gray-400">Account Created</span>
+							<p class="text-sm">{fmtDate(gdprData.user_profile.created_at)}</p>
+						</div>
+						<div>
+							<span class="text-xs text-gray-400">Last Updated</span>
+							<p class="text-sm">{fmtDateTime(gdprData.user_profile.updated_at)}</p>
+						</div>
+						<div>
+							<span class="text-xs text-gray-400">Last Login</span>
+							<p class="text-sm">
+								{gdprData.user_profile.last_login_at
+									? fmtDateTime(gdprData.user_profile.last_login_at)
+									: '—'}
+							</p>
+						</div>
+						<div>
+							<span class="text-xs text-gray-400">Loyalty Stamps</span>
+							<p class="text-sm">{gdprData.user_profile.loyalty_stamps}</p>
+						</div>
+						{#if gdprData.user_profile.deposits_required > 0}
+							<div>
+								<span class="text-xs text-gray-400">Deposits Required</span>
+								<p class="text-sm">{gdprData.user_profile.deposits_required}</p>
+							</div>
+						{/if}
+						<div>
+							<span class="text-xs text-gray-400">Referral Code</span>
+							<p class="font-mono text-sm">{gdprData.user_profile.referral_code || '—'}</p>
+						</div>
+						<div>
+							<span class="text-xs text-gray-400">Privacy Policy Consent</span>
+							<p class="text-sm">
+								{gdprData.user_profile.privacy_policy_and_terms_consent
+									? 'Accepted'
+									: 'Declined'}{gdprData.user_profile.policy_consent_updated_at
+									? ' — ' + fmtDateTime(gdprData.user_profile.policy_consent_updated_at)
+									: ''}
+							</p>
+						</div>
+						<div>
+							<span class="text-xs text-gray-400">Data Retention Consent</span>
+							<p class="text-sm">
+								{gdprData.user_profile.data_retention_consent ? 'Accepted' : 'Declined'}{gdprData
+									.user_profile.data_consent_updated_at
+									? ' — ' + fmtDateTime(gdprData.user_profile.data_consent_updated_at)
+									: ''}
+							</p>
+						</div>
+					</div>
+				</Card.Content>
+			</Card.Root>
+
+			<!-- Social Logins -->
+			{#if gdprData.social_logins && gdprData.social_logins.length > 0}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Connected Social Accounts</Card.Title></Card.Header>
+					<Card.Content class="p-0">
+						<div class="overflow-x-auto">
+							<table class="w-full text-left text-sm">
+								<thead
+									><tr class="border-b"
+										><th class="px-4 py-3 font-medium text-gray-500">Provider</th><th
+											class="px-4 py-3 font-medium text-gray-500">Connected Since</th
+										></tr
+									></thead
+								>
+								<tbody>
+									{#each gdprData.social_logins as l (l.provider + l.created_at)}
+										<tr class="border-b last:border-b-0">
+											<td class="px-4 py-3 font-medium capitalize">{l.provider}</td>
+											<td class="px-4 py-3 whitespace-nowrap text-gray-500"
+												>{fmtDate(l.created_at)}</td
+											>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Affiliate Payouts -->
+			{#if gdprData.affiliate_payouts && gdprData.affiliate_payouts.length > 0}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Affiliate Payouts</Card.Title></Card.Header>
+					<Card.Content class="p-0">
+						<div class="overflow-x-auto">
+							<table class="w-full text-left text-sm">
+								<thead
+									><tr class="border-b"
+										><th class="px-4 py-3 font-medium text-gray-500">Date</th><th
+											class="px-4 py-3 font-medium text-gray-500">Amount</th
+										><th class="px-4 py-3 font-medium text-gray-500">Status</th></tr
+									></thead
+								>
+								<tbody>
+									{#each gdprData.affiliate_payouts as ap (ap.id)}
+										<tr class="border-b last:border-b-0">
+											<td class="px-4 py-3 whitespace-nowrap">{fmtDate(ap.created_at)}</td>
+											<td class="px-4 py-3 font-medium whitespace-nowrap">{fmt(ap.amount)}</td>
+											<td class="px-4 py-3"
+												><span
+													class="rounded-full px-2 py-0.5 text-xs font-medium {badge(ap.status)}"
+													>{ap.status}</span
+												></td
+											>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Booking Discounts -->
+			{#if gdprData.booking_discounts && gdprData.booking_discounts.length > 0}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Discounts Applied</Card.Title></Card.Header>
+					<Card.Content class="p-0">
+						<div class="overflow-x-auto">
+							<table class="w-full text-left text-sm">
+								<thead
+									><tr class="border-b"
+										><th class="px-4 py-3 font-medium text-gray-500">Date</th><th
+											class="px-4 py-3 font-medium text-gray-500">Campaign</th
+										><th class="px-4 py-3 font-medium text-gray-500">Original</th><th
+											class="px-4 py-3 font-medium text-gray-500">Discount</th
+										><th class="px-4 py-3 font-medium text-gray-500">Source</th></tr
+									></thead
+								>
+								<tbody>
+									{#each gdprData.booking_discounts as d (d.id)}
+										<tr class="border-b last:border-b-0">
+											<td class="px-4 py-3 whitespace-nowrap">{fmtDate(d.applied_at)}</td>
+											<td class="px-4 py-3"
+												>{d.campaign_name}{d.milestone_type
+													? ' (' + d.milestone_type.replace(/_/g, ' ') + ')'
+													: ''}</td
+											>
+											<td class="px-4 py-3 whitespace-nowrap">{fmt(d.original_total)}</td>
+											<td class="px-4 py-3 text-right font-medium whitespace-nowrap text-green-600"
+												>-{fmt(d.discount_amount)} ({d.discount_percent}%)</td
+											>
+											<td class="px-4 py-3 text-xs text-gray-500">{d.discount_source}</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Loyalty Redemptions -->
+			{#if gdprData.loyalty_redemptions && gdprData.loyalty_redemptions.length > 0}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Loyalty Redemptions</Card.Title></Card.Header>
+					<Card.Content class="p-0">
+						<div class="overflow-x-auto">
+							<table class="w-full text-left text-sm">
+								<thead
+									><tr class="border-b"
+										><th class="px-4 py-3 font-medium text-gray-500">Redeemed</th><th
+											class="px-4 py-3 font-medium text-gray-500">Stamps</th
+										><th class="px-4 py-3 font-medium text-gray-500">Status</th><th
+											class="px-4 py-3 font-medium text-gray-500">Booking</th
+										><th class="px-4 py-3 font-medium text-gray-500">Expires</th></tr
+									></thead
+								>
+								<tbody>
+									{#each gdprData.loyalty_redemptions as lr (lr.id)}
+										<tr class="border-b last:border-b-0">
+											<td class="px-4 py-3 whitespace-nowrap">{fmtDate(lr.redeemed_at)}</td>
+											<td class="px-4 py-3">{lr.stamps_redeemed}</td>
+											<td class="px-4 py-3"
+												><span
+													class="rounded-full px-2 py-0.5 text-xs font-medium {badge(lr.status)}"
+													>{lr.status}</span
+												></td
+											>
+											<td class="px-4 py-3 text-gray-500">
+												{#if lr.booking_date}
+													{fmtDate(lr.booking_date)}{lr.booking_services
+														? ' — ' + lr.booking_services
+														: ''}
+												{:else}
+													—
+												{/if}
+											</td>
+											<td class="px-4 py-3 whitespace-nowrap text-gray-500"
+												>{lr.expires_at ? fmtDate(lr.expires_at) : '—'}</td
+											>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Referrals -->
+			{#if hasReferralData(gdprData.referrals)}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Referrals</Card.Title></Card.Header>
+					<Card.Content>
+						{#if gdprData.referrals.referred_by}
+							<div class="mb-3">
+								<span class="text-xs text-gray-400">Referred By</span>
+								<p class="text-sm font-medium">
+									{gdprData.referrals.referred_by.referrer_name}
+									<span class="text-gray-400"
+										>— {fmtDate(gdprData.referrals.referred_by.referred_at)}</span
+									>
+								</p>
+							</div>
+						{/if}
+						{#if gdprData.referrals.referred_users && gdprData.referrals.referred_users.length > 0}
+							<div>
+								<span class="text-xs text-gray-400">People You Referred</span>
+								<div class="mt-1 space-y-1">
+									{#each gdprData.referrals.referred_users as ru (ru.referred_id)}
+										<div class="flex items-center justify-between text-sm">
+											<span class="font-medium">{ru.referred_name}</span>
+											<span class="text-gray-400">{fmtDate(ru.referred_at)}</span>
+										</div>
+									{/each}
+								</div>
+							</div>
+						{/if}
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Patch Tests -->
+			{#if gdprData.patch_tests && gdprData.patch_tests.length > 0}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Patch Tests</Card.Title></Card.Header>
+					<Card.Content class="p-0">
+						<div class="overflow-x-auto">
+							<table class="w-full text-left text-sm">
+								<thead
+									><tr class="border-b"
+										><th class="px-4 py-3 font-medium text-gray-500">Test</th><th
+											class="px-4 py-3 font-medium text-gray-500">Date</th
+										><th class="px-4 py-3 font-medium text-gray-500">Description</th></tr
+									></thead
+								>
+								<tbody>
+									{#each gdprData.patch_tests as t (t.patch_test_id)}
+										<tr class="border-b last:border-b-0">
+											<td class="px-4 py-3 font-medium">{t.name}</td>
+											<td class="px-4 py-3 whitespace-nowrap">{fmtDate(t.tested_at)}</td>
+											<td class="px-4 py-3 text-gray-500">{t.description || '—'}</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Saved Cards -->
+			{#if gdprData.saved_cards && gdprData.saved_cards.length > 0}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Saved Cards</Card.Title></Card.Header>
+					<Card.Content class="p-0">
+						<div class="overflow-x-auto">
+							<table class="w-full text-left text-sm">
+								<thead
+									><tr class="border-b"
+										><th class="px-4 py-3 font-medium text-gray-500">Card</th><th
+											class="px-4 py-3 font-medium text-gray-500">Last 4</th
+										><th class="px-4 py-3 font-medium text-gray-500">Expires</th><th
+											class="px-4 py-3 font-medium text-gray-500">Default</th
+										><th class="px-4 py-3 font-medium text-gray-500">Status</th><th
+											class="px-4 py-3 font-medium text-gray-500">Retained Until</th
+										><th class="px-4 py-3 font-medium text-gray-500">Added</th></tr
+									></thead
+								>
+								<tbody>
+									{#each gdprData.saved_cards as c (c.card_id)}
+										<tr class="border-b last:border-b-0">
+											<td class="px-4 py-3 font-medium">{c.brand}</td>
+											<td class="px-4 py-3 font-mono text-xs">•••• {c.last_4}</td>
+											<td class="px-4 py-3">{String(c.exp_month).padStart(2, '0')}/{c.exp_year}</td>
+											<td class="px-4 py-3">{c.is_default ? 'Yes' : 'No'}</td>
+											<td class="px-4 py-3">{c.deleted_at ? 'Deleted' : 'Active'}</td>
+											<td class="px-4 py-3 whitespace-nowrap text-gray-500"
+												>{c.retained_until ? fmtDate(c.retained_until) : '—'}</td
+											>
+											<td class="px-4 py-3 whitespace-nowrap text-gray-500"
+												>{fmtDate(c.created_at)}</td
+											>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Refunds -->
+			{#if gdprData.refunds && gdprData.refunds.length > 0}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Refunds</Card.Title></Card.Header>
+					<Card.Content class="p-0">
+						<div class="overflow-x-auto">
+							<table class="w-full text-left text-sm">
+								<thead
+									><tr class="border-b"
+										><th class="px-4 py-3 font-medium text-gray-500">Date</th><th
+											class="px-4 py-3 font-medium text-gray-500">Amount</th
+										><th class="px-4 py-3 font-medium text-gray-500">Reason</th><th
+											class="px-4 py-3 font-medium text-gray-500">Booking</th
+										><th class="px-4 py-3 font-medium text-gray-500">Status</th></tr
+									></thead
+								>
+								<tbody>
+									{#each gdprData.refunds as r (r.refund_id)}
+										<tr class="border-b last:border-b-0">
+											<td class="px-4 py-3 whitespace-nowrap">{fmtDate(r.created_at)}</td>
+											<td class="px-4 py-3 font-medium whitespace-nowrap">{fmt(r.amount)}</td>
+											<td class="px-4 py-3">{r.reason}</td>
+											<td class="px-4 py-3 font-mono text-xs text-gray-500">{r.booking_id}</td>
+											<td class="px-4 py-3"
+												><span
+													class="rounded-full px-2 py-0.5 text-xs font-medium {badge(r.status)}"
+													>{r.status}</span
+												></td
+											>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Edit Requests -->
+			{#if gdprData.edit_requests && gdprData.edit_requests.length > 0}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Edits and Reschedules</Card.Title></Card.Header>
+					<Card.Content class="p-0">
+						<div class="overflow-x-auto">
+							<table class="w-full text-left text-sm">
+								<thead
+									><tr class="border-b"
+										><th class="px-4 py-3 font-medium text-gray-500">Updated</th><th
+											class="px-4 py-3 font-medium text-gray-500">Booking</th
+										><th class="px-4 py-3 font-medium text-gray-500">New Time</th><th
+											class="px-4 py-3 font-medium text-gray-500">Notes</th
+										></tr
+									></thead
+								>
+								<tbody>
+									{#each gdprData.edit_requests as req (req.id)}
+										<tr class="border-b last:border-b-0">
+											<td class="px-4 py-3 whitespace-nowrap">{fmtDate(req.updated_at)}</td>
+											<td class="px-4 py-3 font-mono text-xs text-gray-500">{req.booking_id}</td>
+											<td class="px-4 py-3 whitespace-nowrap"
+												>{req.new_start_time ? fmtDate(req.new_start_time) : '—'}</td
+											>
+											<td class="px-4 py-3 text-gray-500">{req.notes || '—'}</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Bookings -->
+			<Card.Root class="mb-4">
+				<Card.Header>
+					<Card.Title
+						>Booking History <span class="ml-1 text-sm font-normal text-gray-400"
+							>({gdprData.bookings.length})</span
+						></Card.Title
+					>
+				</Card.Header>
+				<Card.Content>
+					{#if gdprData.bookings.length === 0}
+						<p class="text-sm text-gray-400">No bookings found.</p>
+					{:else}
+						<div class="space-y-4">
+							{#each gdprData.bookings as b (b.booking_id)}
+								<div class="rounded-lg border p-4">
+									<div class="mb-2 flex flex-wrap items-center justify-between gap-2">
+										<div>
+											<p class="font-medium">{fmtDate(b.start_time)}</p>
+											<p class="text-xs text-gray-400">
+												{fmtDateTime(b.start_time)} · {b.booking_id}
+											</p>
+										</div>
+										<div class="flex items-center gap-2">
+											<span class="rounded-full px-2 py-0.5 text-xs font-medium {badge(b.status)}"
+												>{b.status}</span
+											>
+											<span class="font-semibold">{fmt(b.total_price)}</span>
+										</div>
+									</div>
+									<div class="space-y-1">
+										{#each b.services as s (s.service_id)}
+											<div class="flex items-center justify-between text-sm">
+												<div>
+													<span class="font-medium">{s.name}</span>
+													{#if s.description}<span class="ml-1 text-gray-400"
+															>— {s.description}</span
+														>{/if}
+												</div>
+												<div class="flex items-center gap-3 text-xs text-gray-500">
+													<span>{s.duration_minutes} min</span>
+													<span class="font-medium text-gray-700">{fmt(s.price)}</span>
+												</div>
+											</div>
+										{/each}
+									</div>
+									{#if b.notes}
+										<div class="mt-2 border-t pt-2">
+											<span class="text-xs text-gray-400">Notes</span>
+											<p class="text-sm text-gray-600">{b.notes}</p>
+										</div>
+									{/if}
+									<div class="mt-2 border-t pt-2 text-xs text-gray-400">
+										Created {fmtDateTime(b.created_at)} · Updated {fmtDateTime(b.updated_at)}
+									</div>
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</Card.Content>
+			</Card.Root>
+
+			<!-- Payments -->
+			<Card.Root class="mb-4">
+				<Card.Header>
+					<Card.Title
+						>Payment History <span class="ml-1 text-sm font-normal text-gray-400"
+							>({gdprData.payments.length})</span
+						></Card.Title
+					>
+				</Card.Header>
+				<Card.Content class="p-0">
+					{#if gdprData.payments.length === 0}
+						<p class="p-6 text-sm text-gray-400">No payments found.</p>
+					{:else}
+						<div class="overflow-x-auto">
+							<table class="w-full text-left text-sm">
+								<thead
+									><tr class="border-b"
+										><th class="px-4 py-3 font-medium text-gray-500">Date</th><th
+											class="px-4 py-3 font-medium text-gray-500">Gross</th
+										><th class="px-4 py-3 font-medium text-gray-500">Net</th>{#if hasVat}<th
+												class="px-4 py-3 font-medium text-gray-500">VAT</th
+											>{/if}<th class="px-4 py-3 font-medium text-gray-500">Method</th><th
+											class="px-4 py-3 font-medium text-gray-500">Type</th
+										><th class="px-4 py-3 font-medium text-gray-500">Invoice</th><th
+											class="px-4 py-3 font-medium text-gray-500">Status</th
+										></tr
+									></thead
+								>
+								<tbody>
+									{#each gdprData.payments as p (p.payment_id)}
+										<tr class="border-b last:border-b-0">
+											<td class="px-4 py-3 whitespace-nowrap">{fmtDate(p.created_at)}</td>
+											<td class="px-4 py-3 font-medium whitespace-nowrap">{fmt(p.amount)}</td>
+											<td class="px-4 py-3 whitespace-nowrap">{fmt(p.net_amount)}</td>
+											{#if hasVat}<td class="px-4 py-3 whitespace-nowrap text-gray-500"
+													>{p.vat_amount ? fmt(p.vat_amount) : '—'}</td
+												>{/if}
+											<td class="px-4 py-3">{p.payment_method}</td>
+											<td class="px-4 py-3">{p.payment_type}</td>
+											<td class="px-4 py-3 font-mono text-xs text-gray-500"
+												>{p.invoice_number || '—'}</td
+											>
+											<td class="px-4 py-3"
+												><span
+													class="rounded-full px-2 py-0.5 text-xs font-medium {badge(p.status)}"
+													>{p.status}</span
+												></td
+											>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					{/if}
+				</Card.Content>
+			</Card.Root>
+
+			<!-- Verification Codes -->
+			{#if gdprData.verification_codes && gdprData.verification_codes.length > 0}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Verification Codes</Card.Title></Card.Header>
+					<Card.Content class="p-0">
+						<div class="overflow-x-auto">
+							<table class="w-full text-left text-sm">
+								<thead
+									><tr class="border-b"
+										><th class="px-4 py-3 font-medium text-gray-500">Purpose</th><th
+											class="px-4 py-3 font-medium text-gray-500">Created</th
+										><th class="px-4 py-3 font-medium text-gray-500">Used At</th><th
+											class="px-4 py-3 font-medium text-gray-500">Expires</th
+										></tr
+									></thead
+								>
+								<tbody>
+									{#each gdprData.verification_codes as vc (vc.purpose + vc.created_at)}
+										<tr class="border-b last:border-b-0">
+											<td class="px-4 py-3 font-medium">{vc.purpose.replace(/_/g, ' ')}</td>
+											<td class="px-4 py-3 whitespace-nowrap">{fmtDate(vc.created_at)}</td>
+											<td class="px-4 py-3 whitespace-nowrap text-gray-500"
+												>{vc.used_at ? fmtDate(vc.used_at) : '—'}</td
+											>
+											<td class="px-4 py-3 whitespace-nowrap text-gray-500"
+												>{fmtDate(vc.expires_at)}</td
+											>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Forgiven No-Shows -->
+			{#if gdprData.forgiven_no_shows && gdprData.forgiven_no_shows.length > 0}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Forgiven No-Shows</Card.Title></Card.Header>
+					<Card.Content class="p-0">
+						<div class="overflow-x-auto">
+							<table class="w-full text-left text-sm">
+								<thead
+									><tr class="border-b"
+										><th class="px-4 py-3 font-medium text-gray-500">Booking</th><th
+											class="px-4 py-3 font-medium text-gray-500">Forgiven</th
+										></tr
+									></thead
+								>
+								<tbody>
+									{#each gdprData.forgiven_no_shows as f (f.id)}
+										<tr class="border-b last:border-b-0">
+											<td class="px-4 py-3 font-mono text-xs text-gray-500">{f.booking_id}</td>
+											<td class="px-4 py-3 whitespace-nowrap">{fmtDate(f.created_at)}</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Notification Preferences -->
+			{#if gdprData.notification_preferences && gdprData.notification_preferences.length > 0}
+				<Card.Root class="mb-4">
+					<Card.Header><Card.Title>Notification Preferences</Card.Title></Card.Header>
+					<Card.Content>
+						{#each gdprData.notification_preferences as pref (pref.updated_at)}
+							<div class="flex flex-wrap gap-4 text-sm">
+								<span>Email: {pref.email_enabled ? 'Enabled' : 'Disabled'}</span>
+								<span>SMS: {pref.sms_enabled ? 'Enabled' : 'Disabled'}</span>
+								<span>Browser Push: {pref.browser_push_enabled ? 'Enabled' : 'Disabled'}</span>
+							</div>
+						{/each}
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Export Metadata -->
+			{#if gdprData.export_metadata}
+				<p class="text-xs text-gray-400">
+					Format v{gdprData.export_metadata.format_version} · {fmtDateTime(
+						gdprData.export_metadata.exported_at
+					)}
+				</p>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	@media print {
+		body {
+			-webkit-print-color-adjust: exact;
+			print-color-adjust: exact;
+		}
+		.no-print,
+		.no-print * {
+			display: none !important;
+		}
+		table {
+			page-break-inside: auto;
+		}
+		tr {
+			page-break-inside: avoid;
+			page-break-after: auto;
+		}
+		thead {
+			display: table-header-group;
+		}
+	}
+</style>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 37bb642..9fb2c09 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -7,5 +7,8 @@ export default defineConfig({
 	assetsInclude: ['**/*.wasm'],
 	optimizeDeps: {
 		exclude: ['@discourse/jxl', '@jsquash/avif', '@jsquash/webp', '@jsquash/jpeg']
+	},
+	worker: {
+		format: 'es'
 	}
 });