feat:UX and fix drinkkaart payment logic

2026-03-04 14:22:42 +01:00
parent 79869a9a21
commit f9d79c3879
26 changed files with 1432 additions and 283 deletions
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -1,5 +1,4 @@
 import type { QueryClient } from "@tanstack/react-query";
-
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
 	createRootRouteWithContext,
@@ -159,7 +158,7 @@ function RootDocument() {
 			<head>
 				<HeadContent />
 			</head>
-			<body>
+			<body className="flex min-h-screen flex-col bg-[#214e51]">
 				<a
 					href="#main-content"
 					className="fixed top-0 left-0 z-[100] -translate-y-full bg-[#d82560] px-4 py-2 text-white transition-transform focus:translate-y-0"
@@ -167,9 +166,9 @@ function RootDocument() {
 					Ga naar hoofdinhoud
 				</a>
 				<SiteHeader />
-				<div id="main-content">
+				<main id="main-content" className="flex-1">
 					<Outlet />
-				</div>
+				</main>
 				<Toaster />
 				<CookieConsent />
 				<TanStackRouterDevtools position="bottom-left" />
--- a/apps/web/src/routes/account.tsx
+++ b/apps/web/src/routes/account.tsx
@@ -0,0 +1,392 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import {
+	Calendar,
+	CreditCard,
+	Music,
+	QrCode,
+	Users,
+	Wallet,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { QrCodeDisplay } from "@/components/drinkkaart/QrCodeDisplay";
+import { TopUpHistory } from "@/components/drinkkaart/TopUpHistory";
+import { TopUpModal } from "@/components/drinkkaart/TopUpModal";
+import { TransactionHistory } from "@/components/drinkkaart/TransactionHistory";
+import { authClient } from "@/lib/auth-client";
+import { formatCents } from "@/lib/drinkkaart";
+import { client, orpc } from "@/utils/orpc";
+
+interface AccountSearch {
+	topup?: string;
+	welkom?: string;
+}
+
+export const Route = createFileRoute("/account")({
+	validateSearch: (search: Record<string, unknown>): AccountSearch => ({
+		topup: typeof search.topup === "string" ? search.topup : undefined,
+		welkom: typeof search.welkom === "string" ? search.welkom : undefined,
+	}),
+	component: AccountPage,
+});
+
+function PaymentBadge({ status }: { status: string | null }) {
+	if (status === "paid") {
+		return (
+			<span className="inline-flex items-center gap-1 rounded-full bg-green-500/20 px-2 py-0.5 font-medium text-green-300 text-xs">
+				<svg
+					className="h-3 w-3"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					strokeWidth={2.5}
+					aria-hidden="true"
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						d="M5 13l4 4L19 7"
+					/>
+				</svg>
+				Betaald
+			</span>
+		);
+	}
+	if (status === "extra_payment_pending") {
+		return (
+			<span className="inline-flex items-center gap-1 rounded-full bg-yellow-500/20 px-2 py-0.5 font-medium text-xs text-yellow-300">
+				Extra betaling verwacht
+			</span>
+		);
+	}
+	return (
+		<span className="inline-flex items-center gap-1 rounded-full bg-orange-500/20 px-2 py-0.5 font-medium text-orange-300 text-xs">
+			In behandeling
+		</span>
+	);
+}
+
+function AccountPage() {
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+	const search = Route.useSearch();
+	const [showQr, setShowQr] = useState(false);
+	const [showTopUp, setShowTopUp] = useState(false);
+
+	const sessionQuery = useQuery({
+		queryKey: ["session"],
+		queryFn: () => authClient.getSession(),
+	});
+
+	// Client-side auth check: redirect to login if not authenticated
+	useEffect(() => {
+		if (!sessionQuery.isLoading && !sessionQuery.data?.data?.user) {
+			navigate({ to: "/login" });
+		}
+	}, [sessionQuery.isLoading, sessionQuery.data, navigate]);
+
+	const drinkkaartQuery = useQuery(
+		orpc.drinkkaart.getMyDrinkkaart.queryOptions(),
+	);
+
+	const registrationQuery = useQuery(orpc.getMyRegistration.queryOptions());
+
+	// Handle topup=success redirect (from Lemon Squeezy returning to /account)
+	useEffect(() => {
+		if (search.topup === "success") {
+			toast.success("Oplading geslaagd! Je saldo is bijgewerkt.");
+			queryClient.invalidateQueries({
+				queryKey: orpc.drinkkaart.getMyDrinkkaart.key(),
+			});
+			const url = new URL(window.location.href);
+			url.searchParams.delete("topup");
+			window.history.replaceState({}, "", url.toString());
+		}
+	}, [search.topup, queryClient]);
+
+	// Silent background call to claim any pending registration fee credit.
+	// This catches cases where: webhook didn't fire/failed, or user signed up after paying.
+	// No UI feedback needed — if there's nothing to claim, it does nothing.
+	useEffect(() => {
+		client.claimRegistrationCredit().catch((err) => {
+			console.error("claimRegistrationCredit failed:", err);
+		});
+	}, []);
+
+	// Welcome toast after fresh signup
+	useEffect(() => {
+		if (search.welkom === "1") {
+			toast.success("Welkom! Je account is aangemaakt.");
+			const url = new URL(window.location.href);
+			url.searchParams.delete("welkom");
+			window.history.replaceState({}, "", url.toString());
+		}
+	}, [search.welkom]);
+
+	const user = sessionQuery.data?.data?.user as
+		| { name?: string; email?: string }
+		| undefined;
+
+	const registration = registrationQuery.data;
+	const drinkkaart = drinkkaartQuery.data;
+
+	const isLoading =
+		sessionQuery.isLoading ||
+		drinkkaartQuery.isLoading ||
+		registrationQuery.isLoading;
+
+	if (isLoading) {
+		return (
+			<div className="flex min-h-screen items-center justify-center bg-[#214e51]">
+				<div className="h-10 w-10 animate-spin rounded-full border-2 border-white/20 border-t-white" />
+			</div>
+		);
+	}
+
+	return (
+		<div>
+			<main className="mx-auto max-w-5xl px-4 py-12">
+				{/* Page header */}
+				<div className="mb-8">
+					<h1 className="mb-1 font-['Intro',sans-serif] text-4xl text-white">
+						Mijn Account
+					</h1>
+					<p className="text-white/50">
+						{user?.name && (
+							<span className="mr-2 font-medium text-white/70">
+								{user.name}
+							</span>
+						)}
+						{user?.email}
+					</p>
+				</div>
+
+				<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+					{/* ── Left column: Registration ── */}
+					<section>
+						<h2 className="mb-3 flex items-center gap-2 font-['Intro',sans-serif] text-lg text-white/80">
+							<Calendar className="h-4 w-4 shrink-0 text-white/40" />
+							Mijn Inschrijving
+						</h2>
+
+						{registration ? (
+							<div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+								{/* Type badge */}
+								<div className="mb-4 flex items-center justify-between">
+									<div className="flex items-center gap-2">
+										{registration.registrationType === "performer" ? (
+											<span className="inline-flex items-center gap-1.5 rounded-full bg-amber-500/20 px-3 py-1 font-medium text-amber-300 text-sm">
+												<Music className="h-3.5 w-3.5" />
+												Artiest
+											</span>
+										) : (
+											<span className="inline-flex items-center gap-1.5 rounded-full bg-teal-500/20 px-3 py-1 font-medium text-sm text-teal-300">
+												<Users className="h-3.5 w-3.5" />
+												Bezoeker
+											</span>
+										)}
+									</div>
+									<PaymentBadge status={registration.paymentStatus} />
+								</div>
+
+								{/* Name */}
+								<p className="mb-1 font-medium text-lg text-white">
+									{registration.firstName} {registration.lastName}
+								</p>
+
+								{/* Art form (performer only) */}
+								{registration.registrationType === "performer" &&
+									registration.artForm && (
+										<p className="mb-1 text-sm text-white/60">
+											Kunstvorm:{" "}
+											<span className="text-white/80">
+												{registration.artForm}
+											</span>
+										</p>
+									)}
+
+								{/* Guests (watcher only) */}
+								{registration.registrationType === "watcher" &&
+									registration.guests.length > 0 && (
+										<p className="mb-1 text-sm text-white/60">
+											{registration.guests.length + 1} personen (jij +{" "}
+											{registration.guests.length} gast
+											{registration.guests.length > 1 ? "en" : ""})
+										</p>
+									)}
+
+								{/* Drink card value */}
+								{registration.registrationType === "watcher" &&
+									(registration.drinkCardValue ?? 0) > 0 && (
+										<p className="mb-1 text-sm text-white/60">
+											Drinkkaart:{" "}
+											<span className="text-white/80">
+												€{registration.drinkCardValue}
+											</span>
+										</p>
+									)}
+
+								{/* Gift */}
+								{(registration.giftAmount ?? 0) > 0 && (
+									<p className="mb-1 text-sm text-white/60">
+										Gift:{" "}
+										<span className="text-white/80">
+											€{(registration.giftAmount ?? 0) / 100}
+										</span>
+									</p>
+								)}
+
+								{/* Date */}
+								<p className="mt-3 text-white/40 text-xs">
+									Ingeschreven op{" "}
+									{new Date(registration.createdAt).toLocaleDateString(
+										"nl-BE",
+										{
+											day: "numeric",
+											month: "long",
+											year: "numeric",
+										},
+									)}
+								</p>
+
+								{/* Action */}
+								{registration.managementToken && (
+									<div className="mt-5">
+										<Link
+											to="/manage/$token"
+											params={{ token: registration.managementToken }}
+											className="inline-flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm text-white transition-colors hover:bg-white/20"
+										>
+											Beheer inschrijving
+											<svg
+												className="h-3.5 w-3.5"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+												strokeWidth={2}
+												aria-hidden="true"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+												/>
+											</svg>
+										</Link>
+									</div>
+								)}
+							</div>
+						) : (
+							<div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+								<p className="mb-3 text-sm text-white/60">
+									We vonden geen actieve inschrijving voor dit e-mailadres.
+								</p>
+								<a
+									href="/#registration"
+									className="inline-flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm text-white transition-colors hover:bg-white/20"
+								>
+									Inschrijven voor het evenement
+									<svg
+										className="h-3.5 w-3.5"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+										strokeWidth={2}
+										aria-hidden="true"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+										/>
+									</svg>
+								</a>
+							</div>
+						)}
+					</section>
+
+					{/* ── Right column: Drinkkaart ── */}
+					<section>
+						<h2 className="mb-3 flex items-center gap-2 font-['Intro',sans-serif] text-lg text-white/80">
+							<CreditCard className="h-4 w-4 shrink-0 text-white/40" />
+							Mijn Drinkkaart
+						</h2>
+
+						{/* Balance card */}
+						<div className="mb-4 rounded-2xl border border-white/10 bg-white/5 p-6">
+							<p className="mb-1 text-sm text-white/50">Huidig saldo</p>
+							<p className="mb-4 font-['Intro',sans-serif] text-5xl text-white">
+								{drinkkaart ? formatCents(drinkkaart.balance) : "—"}
+							</p>
+
+							<div className="flex flex-wrap gap-3">
+								<button
+									type="button"
+									onClick={() => setShowQr((v) => !v)}
+									className="inline-flex items-center gap-2 rounded-lg border border-white/30 bg-transparent px-4 py-2 text-sm text-white transition-colors hover:bg-white/10"
+								>
+									<QrCode className="h-4 w-4" />
+									{showQr ? "Verberg QR-code" : "Toon QR-code"}
+								</button>
+								<button
+									type="button"
+									onClick={() => setShowTopUp(true)}
+									className="inline-flex items-center gap-2 rounded-lg bg-white px-4 py-2 font-semibold text-[#214e51] text-sm transition-colors hover:bg-white/90"
+								>
+									<Wallet className="h-4 w-4" />
+									Opladen
+								</button>
+							</div>
+						</div>
+
+						{/* QR code */}
+						{showQr && (
+							<div className="mb-4 flex justify-center rounded-2xl border border-white/10 bg-white/5 p-6">
+								<QrCodeDisplay />
+							</div>
+						)}
+
+						{/* Top-up history */}
+						<section className="mb-6">
+							<h3 className="mb-2 font-medium text-sm text-white/50 uppercase tracking-wider">
+								Opladingen
+							</h3>
+							{drinkkaart ? (
+								<TopUpHistory
+									topups={
+										drinkkaart.topups as Parameters<
+											typeof TopUpHistory
+										>[0]["topups"]
+									}
+								/>
+							) : (
+								<p className="text-sm text-white/40">Laden...</p>
+							)}
+						</section>
+
+						{/* Transaction history */}
+						<section>
+							<h3 className="mb-2 font-medium text-sm text-white/50 uppercase tracking-wider">
+								Transacties
+							</h3>
+							{drinkkaart ? (
+								<TransactionHistory
+									transactions={
+										drinkkaart.transactions as Parameters<
+											typeof TransactionHistory
+										>[0]["transactions"]
+									}
+								/>
+							) : (
+								<p className="text-sm text-white/40">Laden...</p>
+							)}
+						</section>
+					</section>
+				</div>
+			</main>
+
+			{showTopUp && <TopUpModal onClose={() => setShowTopUp(false)} />}
+		</div>
+	);
+}
--- a/apps/web/src/routes/admin/drinkkaart.tsx
+++ b/apps/web/src/routes/admin/drinkkaart.tsx
@@ -98,7 +98,7 @@ function AdminDrinkkaartPage() {
 	};

 	return (
-		<div className="min-h-screen bg-[#214e51]">
+		<div>
 			{/* Header */}
 			<header className="border-white/10 border-b bg-[#214e51]/95 px-6 py-5">
 				<div className="mx-auto flex max-w-2xl items-center gap-4">
--- a/apps/web/src/routes/admin/index.tsx
+++ b/apps/web/src/routes/admin/index.tsx
@@ -1,10 +1,5 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
-import {
-	createFileRoute,
-	Link,
-	redirect,
-	useNavigate,
-} from "@tanstack/react-router";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import {
 	Check,
 	ChevronDown,
@@ -34,16 +29,6 @@ import { orpc } from "@/utils/orpc";

 export const Route = createFileRoute("/admin/")({
 	component: AdminPage,
-	beforeLoad: async () => {
-		const session = await authClient.getSession();
-		if (!session.data?.user) {
-			throw redirect({ to: "/login" });
-		}
-		const user = session.data.user as { role?: string };
-		if (user.role !== "admin") {
-			throw redirect({ to: "/login" });
-		}
-	},
 });

 function AdminPage() {
@@ -60,6 +45,12 @@ function AdminPage() {

 	const [copiedId, setCopiedId] = useState<string | null>(null);

+	// Get current session to check user role
+	const sessionQuery = useQuery({
+		queryKey: ["session"],
+		queryFn: () => authClient.getSession(),
+	});
+
 	const handleCopyManageUrl = (token: string, id: string) => {
 		const url = `${window.location.origin}/manage/${token}`;
 		navigator.clipboard.writeText(url).then(() => {
@@ -146,6 +137,16 @@ function AdminPage() {
 		},
 	});

+	const requestAdminMutation = useMutation({
+		...orpc.requestAdminAccess.mutationOptions(),
+		onSuccess: () => {
+			toast.success("Admin toegang aangevraagd!");
+		},
+		onError: (error) => {
+			toast.error(`Aanvraag mislukt: ${error.message}`);
+		},
+	});
+
 	const handleSignOut = async () => {
 		await authClient.signOut();
 		navigate({ to: "/" });
@@ -163,6 +164,10 @@ function AdminPage() {
 		rejectRequestMutation.mutate({ requestId });
 	};

+	const handleRequestAdmin = () => {
+		requestAdminMutation.mutate(undefined);
+	};
+
 	const stats = statsQuery.data;
 	const registrations = registrationsQuery.data?.data ?? [];
 	const pagination = registrationsQuery.data?.pagination;
@@ -273,8 +278,119 @@ function AdminPage() {
 		return `€${euros.toFixed(euros % 1 === 0 ? 0 : 2)}`;
 	};

+	// Check if user is admin
+	const user = sessionQuery.data?.data?.user as
+		| { role?: string; name?: string }
+		| undefined;
+	const isAdmin = user?.role === "admin";
+	const isAuthenticated = !!sessionQuery.data?.data?.user;
+
+	// Show loading state while checking session
+	if (sessionQuery.isLoading) {
+		return (
+			<div className="flex min-h-[calc(100dvh-2.75rem)] items-center justify-center px-4 py-8 sm:min-h-[calc(100dvh-3.5rem)]">
+				<p className="text-white/60">Laden...</p>
+			</div>
+		);
+	}
+
+	// Show login prompt for non-authenticated users
+	if (!isAuthenticated) {
+		return (
+			<div className="flex min-h-[calc(100dvh-2.75rem)] items-center justify-center overflow-y-auto px-4 py-8 sm:min-h-[calc(100dvh-3.5rem)]">
+				<Card className="my-auto w-full max-w-md border-white/10 bg-white/5">
+					<CardHeader className="text-center">
+						<CardTitle className="font-['Intro',sans-serif] text-3xl text-white">
+							Inloggen Vereist
+						</CardTitle>
+						<CardDescription className="text-white/60">
+							Je moet ingelogd zijn om admin toegang aan te vragen
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<div className="space-y-4">
+							<Button
+								onClick={() => navigate({ to: "/login" })}
+								className="w-full bg-white text-[#214e51] hover:bg-white/90"
+							>
+								Inloggen
+							</Button>
+
+							<Link
+								to="/"
+								className="block text-center text-sm text-white/40 hover:text-white"
+							>
+								← Terug naar website
+							</Link>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	// Show request admin UI for non-admin users
+	if (!isAdmin) {
+		return (
+			<div className="flex min-h-[calc(100dvh-2.75rem)] items-center justify-center overflow-y-auto px-4 py-8 sm:min-h-[calc(100dvh-3.5rem)]">
+				<Card className="my-auto w-full max-w-md border-white/10 bg-white/5">
+					<CardHeader className="text-center">
+						<CardTitle className="font-['Intro',sans-serif] text-3xl text-white">
+							Admin Toegang Vereist
+						</CardTitle>
+						<CardDescription className="text-white/60">
+							Je hebt geen admin rechten voor dit dashboard
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<div className="space-y-4">
+							<div className="rounded-lg border border-white/10 bg-white/5 p-4">
+								<p className="mb-3 text-center text-sm text-white/60">
+									Admin-toegang aanvragen?
+								</p>
+								<Button
+									onClick={handleRequestAdmin}
+									disabled={requestAdminMutation.isPending}
+									className="w-full bg-white text-[#214e51] hover:bg-white/90"
+								>
+									{requestAdminMutation.isPending
+										? "Bezig..."
+										: "Vraag Admin Toegang Aan"}
+								</Button>
+							</div>
+
+							<Button
+								onClick={() => navigate({ to: "/account" })}
+								variant="outline"
+								className="w-full border-white/20 bg-transparent text-white hover:bg-white/10"
+							>
+								Ga naar mijn account
+							</Button>
+
+							<Button
+								onClick={handleSignOut}
+								variant="outline"
+								className="w-full border-white/20 bg-transparent text-white/60 hover:bg-white/10 hover:text-white"
+							>
+								<LogOut className="mr-2 h-4 w-4" />
+								Uitloggen
+							</Button>
+
+							<Link
+								to="/"
+								className="block text-center text-sm text-white/40 hover:text-white"
+							>
+								← Terug naar website
+							</Link>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
 	return (
-		<div className="min-h-screen bg-[#214e51]">
+		<div>
 			{/* Header */}
 			<header className="border-white/10 border-b bg-[#214e51]/95 px-8 py-6">
 				<div className="mx-auto flex max-w-7xl items-center justify-between">
--- a/apps/web/src/routes/api/webhook/lemonsqueezy.ts
+++ b/apps/web/src/routes/api/webhook/lemonsqueezy.ts
@@ -1,6 +1,8 @@
 import { createHmac, randomUUID } from "node:crypto";
+import { creditRegistrationToAccount } from "@kk/api/routers/index";
 import { db } from "@kk/db";
 import { drinkkaart, drinkkaartTopup, registration } from "@kk/db/schema";
+import { user } from "@kk/db/schema/auth";
 import { env } from "@kk/env/server";
 import { createFileRoute } from "@tanstack/react-router";
 import { and, eq } from "drizzle-orm";
@@ -176,9 +178,21 @@ async function handleWebhook({ request }: { request: Request }) {
 		const orderId = event.data.id;
 		const customerId = String(event.data.attributes.customer_id);

-		// Update registration in database.
-		// Covers both "pending" (initial payment) and "extra_payment_pending"
-		// (delta payment after adding guests to an already-paid registration).
+		// Fetch the registration row first so we can use its email + drinkCardValue.
+		const regRow = await db
+			.select()
+			.from(registration)
+			.where(eq(registration.managementToken, registrationToken))
+			.limit(1)
+			.then((r) => r[0]);
+
+		if (!regRow) {
+			console.error(`Registration not found for token ${registrationToken}`);
+			return new Response("Registration not found", { status: 404 });
+		}
+
+		// Mark the registration as paid. Covers both "pending" (initial payment) and
+		// "extra_payment_pending" (delta after adding guests).
 		await db
 			.update(registration)
 			.set({
@@ -194,6 +208,50 @@ async function handleWebhook({ request }: { request: Request }) {
 			`Payment successful for registration ${registrationToken}, order ${orderId}`,
 		);

+		// If this is a watcher with a drink card value, try to credit their drinkkaart
+		// immediately — but only if they already have an account.
+		if (
+			regRow.registrationType === "watcher" &&
+			(regRow.drinkCardValue ?? 0) > 0
+		) {
+			// Look up user account by email
+			const accountUser = await db
+				.select({ id: user.id })
+				.from(user)
+				.where(eq(user.email, regRow.email))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (accountUser) {
+				const creditResult = await creditRegistrationToAccount(
+					regRow.email,
+					accountUser.id,
+				).catch((err) => {
+					console.error(
+						`Failed to credit drinkkaart for ${regRow.email} after registration payment:`,
+						err,
+					);
+					return null;
+				});
+
+				if (creditResult?.credited) {
+					console.log(
+						`Drinkkaart credited ${creditResult.amountCents}c for user ${accountUser.id} (registration ${registrationToken})`,
+					);
+				} else if (creditResult) {
+					console.log(
+						`Drinkkaart credit skipped for ${regRow.email}: ${creditResult.status}`,
+					);
+				}
+			} else {
+				// No account yet — credit will be applied when the user signs up via
+				// claimRegistrationCredit.
+				console.log(
+					`No account for ${regRow.email} — drinkkaart credit deferred until signup`,
+				);
+			}
+		}
+
 		return new Response("OK", { status: 200 });
 	} catch (error) {
 		console.error("Webhook processing error:", error);
--- a/apps/web/src/routes/contact.tsx
+++ b/apps/web/src/routes/contact.tsx
@@ -6,8 +6,8 @@ export const Route = createFileRoute("/contact")({

 function ContactPage() {
 	return (
-		<div className="min-h-screen bg-[#214e51]">
-			<div className="mx-auto max-w-3xl px-6 py-16">
+		<div>
+			<div className="mx-auto max-w-3xl px-6 py-12">
 				<Link
 					to="/"
 					className="link-hover mb-8 inline-block text-white/80 hover:text-white"
--- a/apps/web/src/routes/drinkkaart.tsx
+++ b/apps/web/src/routes/drinkkaart.tsx
@@ -1,138 +1,21 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, redirect } from "@tanstack/react-router";
-import { QrCode, Wallet } from "lucide-react";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { QrCodeDisplay } from "@/components/drinkkaart/QrCodeDisplay";
-import { TopUpHistory } from "@/components/drinkkaart/TopUpHistory";
-import { TopUpModal } from "@/components/drinkkaart/TopUpModal";
-import { TransactionHistory } from "@/components/drinkkaart/TransactionHistory";
-import { Button } from "@/components/ui/button";
 import { authClient } from "@/lib/auth-client";
-import { formatCents } from "@/lib/drinkkaart";
-import { orpc } from "@/utils/orpc";

+// /drinkkaart redirects to /account, preserving ?topup=success for
+// backward-compatibility with the Lemon Squeezy webhook return URL.
 export const Route = createFileRoute("/drinkkaart")({
 	validateSearch: (search: Record<string, unknown>) => ({
 		topup: search.topup as string | undefined,
 	}),
-	component: DrinkkaartPage,
-	beforeLoad: async () => {
+	beforeLoad: async ({ search }) => {
 		const session = await authClient.getSession();
 		if (!session.data?.user) {
 			throw redirect({ to: "/login" });
 		}
+		throw redirect({
+			to: "/account",
+			search: search.topup ? { topup: search.topup } : {},
+		});
 	},
+	component: () => null,
 });
-
-function DrinkkaartPage() {
-	const queryClient = useQueryClient();
-	const search = Route.useSearch();
-	const [showQr, setShowQr] = useState(false);
-	const [showTopUp, setShowTopUp] = useState(false);
-
-	const { data, isLoading } = useQuery(
-		orpc.drinkkaart.getMyDrinkkaart.queryOptions(),
-	);
-
-	// Handle topup=success redirect
-	useEffect(() => {
-		if (search.topup === "success") {
-			toast.success("Oplading geslaagd! Je saldo is bijgewerkt.");
-			queryClient.invalidateQueries({
-				queryKey: orpc.drinkkaart.getMyDrinkkaart.key(),
-			});
-			// Remove query param without full navigation
-			const url = new URL(window.location.href);
-			url.searchParams.delete("topup");
-			window.history.replaceState({}, "", url.toString());
-		}
-	}, [search.topup, queryClient]);
-
-	if (isLoading) {
-		return (
-			<div className="flex min-h-screen items-center justify-center bg-[#214e51]">
-				<div className="h-10 w-10 animate-spin rounded-full border-2 border-white/20 border-t-white" />
-			</div>
-		);
-	}
-
-	return (
-		<div className="min-h-screen bg-[#214e51]">
-			<main className="mx-auto max-w-lg px-4 py-10">
-				<h1 className="mb-6 font-['Intro',sans-serif] text-3xl text-white">
-					Mijn Drinkkaart
-				</h1>
-
-				{/* Balance card */}
-				<div className="mb-6 rounded-2xl border border-white/10 bg-white/5 p-6">
-					<p className="mb-1 text-sm text-white/50">Huidig saldo</p>
-					<p className="mb-4 font-['Intro',sans-serif] text-5xl text-white">
-						{data ? formatCents(data.balance) : "—"}
-					</p>
-
-					<div className="flex flex-wrap gap-3">
-						<Button
-							onClick={() => setShowQr((v) => !v)}
-							variant="outline"
-							className="border-white/30 bg-transparent text-white hover:bg-white/10"
-						>
-							<QrCode className="mr-2 h-4 w-4" />
-							{showQr ? "Verberg QR-code" : "Toon QR-code"}
-						</Button>
-						<Button
-							onClick={() => setShowTopUp(true)}
-							className="bg-white font-semibold text-[#214e51] hover:bg-white/90"
-						>
-							<Wallet className="mr-2 h-4 w-4" />
-							Opladen
-						</Button>
-					</div>
-				</div>
-
-				{/* QR code */}
-				{showQr && (
-					<div className="mb-6 flex justify-center rounded-2xl border border-white/10 bg-white/5 p-6">
-						<QrCodeDisplay />
-					</div>
-				)}
-
-				{/* Top-up history */}
-				<section className="mb-8">
-					<h2 className="mb-3 font-['Intro',sans-serif] text-lg text-white/80">
-						Opladingen
-					</h2>
-					{data ? (
-						<TopUpHistory
-							topups={
-								data.topups as Parameters<typeof TopUpHistory>[0]["topups"]
-							}
-						/>
-					) : (
-						<p className="text-sm text-white/40">Laden...</p>
-					)}
-				</section>
-
-				{/* Transaction history */}
-				<section>
-					<h2 className="mb-3 font-['Intro',sans-serif] text-lg text-white/80">
-						Transacties
-					</h2>
-					{data ? (
-						<TransactionHistory
-							transactions={
-								data.transactions as Parameters<
-									typeof TransactionHistory
-								>[0]["transactions"]
-							}
-						/>
-					) : (
-						<p className="text-sm text-white/40">Laden...</p>
-					)}
-				</section>
-			</main>
-
-			{showTopUp && <TopUpModal onClose={() => setShowTopUp(false)} />}
-		</div>
-	);
-}
--- a/apps/web/src/routes/login.tsx
+++ b/apps/web/src/routes/login.tsx
@@ -15,13 +15,24 @@ import { authClient } from "@/lib/auth-client";
 import { orpc } from "@/utils/orpc";

 export const Route = createFileRoute("/login")({
+	validateSearch: (search: Record<string, unknown>) => {
+		const signup =
+			search.signup === "1" || search.signup === "true" ? "1" : undefined;
+		const email = typeof search.email === "string" ? search.email : undefined;
+		// Only return defined keys so redirects without search still typecheck
+		return {
+			...(signup !== undefined && { signup }),
+			...(email !== undefined && { email }),
+		} as { signup?: "1"; email?: string };
+	},
 	component: LoginPage,
 });

 function LoginPage() {
 	const navigate = useNavigate();
-	const [isSignup, setIsSignup] = useState(false);
-	const [email, setEmail] = useState("");
+	const search = Route.useSearch();
+	const [isSignup, setIsSignup] = useState(() => search.signup === "1");
+	const [email, setEmail] = useState(() => search.email ?? "");
 	const [password, setPassword] = useState("");
 	const [name, setName] = useState("");

@@ -49,13 +60,12 @@ function LoginPage() {
 		},
 		onSuccess: () => {
 			toast.success("Succesvol ingelogd!");
-			// Check role and redirect
 			authClient.getSession().then((session) => {
 				const user = session.data?.user as { role?: string } | undefined;
 				if (user?.role === "admin") {
 					navigate({ to: "/admin" });
 				} else {
-					navigate({ to: "/" });
+					navigate({ to: "/account" });
 				}
 			});
 		},
@@ -85,11 +95,7 @@ function LoginPage() {
 			return result.data;
 		},
 		onSuccess: () => {
-			toast.success("Account aangemaakt! Wacht op goedkeuring van een admin.");
-			setIsSignup(false);
-			setName("");
-			setEmail("");
-			setPassword("");
+			navigate({ to: "/account", search: { welkom: "1" } });
 		},
 		onError: (error) => {
 			toast.error(`Registratie mislukt: ${error.message}`);
@@ -119,13 +125,15 @@ function LoginPage() {
 		requestAdminMutation.mutate(undefined);
 	};

-	// If already logged in as admin, redirect
+	// If already logged in, redirect to appropriate page
 	if (sessionQuery.data?.data?.user) {
 		const user = sessionQuery.data.data.user as { role?: string };
 		if (user.role === "admin") {
 			navigate({ to: "/admin" });
-			return null;
+		} else {
+			navigate({ to: "/account" });
 		}
+		return null;
 	}

 	const isLoggedIn = !!sessionQuery.data?.data?.user;
@@ -134,51 +142,64 @@ function LoginPage() {
 		| undefined;

 	return (
-		<div className="flex min-h-screen items-center justify-center bg-[#214e51] px-4">
-			<Card className="w-full max-w-md border-white/10 bg-white/5">
+		<div className="flex min-h-[calc(100dvh-2.75rem)] items-center justify-center overflow-y-auto px-4 py-8 sm:min-h-[calc(100dvh-3.5rem)]">
+			<Card className="my-auto w-full max-w-md border-white/10 bg-white/5">
 				<CardHeader className="text-center">
 					<CardTitle className="font-['Intro',sans-serif] text-3xl text-white">
 						{isLoggedIn
-							? "Admin Toegang"
+							? `Welkom, ${user?.name}`
 							: isSignup
 								? "Account Aanmaken"
 								: "Inloggen"}
 					</CardTitle>
 					<CardDescription className="text-white/60">
 						{isLoggedIn
-							? `Welkom, ${user?.name}`
+							? "Je bent al ingelogd"
 							: isSignup
-								? "Maak een account aan om toegang te krijgen"
-								: "Log in om toegang te krijgen tot het admin dashboard"}
+								? "Maak een gratis account aan voor je Drinkkaart en inschrijving"
+								: "Log in om je account te bekijken"}
 					</CardDescription>
 				</CardHeader>
 				<CardContent>
 					{isLoggedIn ? (
 						<div className="space-y-4">
-							<div className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-4">
-								<p className="text-center text-yellow-200">
-									Je bent ingelogd maar hebt geen admin toegang.
-								</p>
-							</div>
+							{/* Primary CTA: go to account */}
 							<Button
-								onClick={handleRequestAdmin}
-								disabled={requestAdminMutation.isPending}
+								onClick={() => navigate({ to: "/account" })}
 								className="w-full bg-white text-[#214e51] hover:bg-white/90"
 							>
-								{requestAdminMutation.isPending
-									? "Bezig..."
-									: "Vraag Admin Toegang Aan"}
+								Ga naar mijn account
 							</Button>
+
+							{/* Secondary: request admin access */}
+							<div className="rounded-lg border border-white/10 bg-white/5 p-4">
+								<p className="mb-3 text-center text-sm text-white/60">
+									Admin-toegang aanvragen?
+								</p>
+								<Button
+									onClick={handleRequestAdmin}
+									disabled={requestAdminMutation.isPending}
+									variant="outline"
+									className="w-full border-white/20 bg-transparent text-white hover:bg-white/10"
+								>
+									{requestAdminMutation.isPending
+										? "Bezig..."
+										: "Vraag Admin Toegang Aan"}
+								</Button>
+							</div>
+
 							<Button
-								onClick={() => authClient.signOut()}
+								onClick={() =>
+									authClient.signOut().then(() => navigate({ to: "/" }))
+								}
 								variant="outline"
-								className="w-full border-white/20 bg-transparent text-white hover:bg-white/10"
+								className="w-full border-white/20 bg-transparent text-white/60 hover:bg-white/10 hover:text-white"
 							>
 								Uitloggen
 							</Button>
 							<Link
 								to="/"
-								className="block text-center text-sm text-white/60 hover:text-white"
+								className="block text-center text-sm text-white/40 hover:text-white"
 							>
 								← Terug naar website
 							</Link>
--- a/apps/web/src/routes/manage.$token.tsx
+++ b/apps/web/src/routes/manage.$token.tsx
@@ -22,8 +22,8 @@ export const Route = createFileRoute("/manage/$token")({

 function PageShell({ children }: { children: React.ReactNode }) {
 	return (
-		<div className="min-h-screen bg-[#214e51]">
-			<div className="mx-auto max-w-3xl px-6 py-16">{children}</div>
+		<div>
+			<div className="mx-auto max-w-5xl px-6 py-12">{children}</div>
 		</div>
 	);
 }
@@ -31,10 +31,10 @@ function PageShell({ children }: { children: React.ReactNode }) {
 function BackLink() {
 	return (
 		<Link
-			to="/"
+			to="/account"
 			className="link-hover mb-8 inline-block text-white/80 hover:text-white"
 		>
-			← Terug naar home
+			← Terug naar account
 		</Link>
 	);
 }
@@ -427,7 +427,7 @@ function EditForm({ token, initialData, onCancel, onSaved }: EditFormProps) {
 						onChange={(e) =>
 							setFormData((p) => ({ ...p, extraQuestions: e.target.value }))
 						}
-						className="w-full resize-none bg-transparent py-2 text-lg text-white placeholder:text-white/40 focus:outline-none"
+						className="w-full border border-white/10 resize-none bg-transparent p-2 text-lg text-white placeholder:text-white/40 focus:outline-none"
 					/>
 				</div>

--- a/apps/web/src/routes/privacy.tsx
+++ b/apps/web/src/routes/privacy.tsx
@@ -6,8 +6,8 @@ export const Route = createFileRoute("/privacy")({

 function PrivacyPage() {
 	return (
-		<div className="min-h-screen bg-[#214e51]">
-			<div className="mx-auto max-w-3xl px-6 py-16">
+		<div>
+			<div className="mx-auto max-w-3xl px-6 py-12">
 				<Link
 					to="/"
 					className="link-hover mb-8 inline-block text-white/80 hover:text-white"
--- a/apps/web/src/routes/terms.tsx
+++ b/apps/web/src/routes/terms.tsx
@@ -6,8 +6,8 @@ export const Route = createFileRoute("/terms")({

 function TermsPage() {
 	return (
-		<div className="min-h-screen bg-[#214e51]">
-			<div className="mx-auto max-w-3xl px-6 py-16">
+		<div>
+			<div className="mx-auto max-w-3xl px-6 py-12">
 				<Link
 					to="/"
 					className="link-hover mb-8 inline-block text-white/80 hover:text-white"