From f214660ab256bb7d3ca7ba07a6e4124adafebc15 Mon Sep 17 00:00:00 2001
From: zias <vanneszias@icloud.com>
Date: Wed, 11 Mar 2026 11:52:26 +0100
Subject: [PATCH] feat: redesign admin page with dense ops-tool aesthetic and
 expandable rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace generic card layout with near-black background and monospace data display
- Add expandable rows for guest details, notes/questions, and performer details
- Fix duplicate stat cards (artiesten/bezoekers were shown twice)
- Fix gift revenue card showing wrong value (stats.today → totalGiftRevenue)
- Fix mobile card view to use accessible <button> for expandable rows
- Remove unused Users and Card component imports
---
 apps/web/src/routes/admin/index.tsx | 1762 ++++++++++++++-------------
 1 file changed, 908 insertions(+), 854 deletions(-)

diff --git a/apps/web/src/routes/admin/index.tsx b/apps/web/src/routes/admin/index.tsx
index 7ce5d60..efb3fb1 100644
--- a/apps/web/src/routes/admin/index.tsx
+++ b/apps/web/src/routes/admin/index.tsx
@@ -10,20 +10,13 @@ import {
 	ClipboardCheck,
 	Download,
 	LogOut,
+	MessageSquare,
 	Search,
-	Users,
 	X,
 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { authClient } from "@/lib/auth-client";
 import { orpc } from "@/utils/orpc";
@@ -49,6 +42,74 @@ function parseGuests(raw: unknown): Guest[] {
 	}
 }
 
+function StatCard({
+	label,
+	value,
+	sub,
+	accent,
+}: {
+	label: string;
+	value: string | number;
+	sub?: React.ReactNode;
+	accent?: "amber" | "teal" | "pink" | "white";
+}) {
+	const colorMap = {
+		amber: "text-amber-300",
+		teal: "text-teal-300",
+		pink: "text-pink-300",
+		white: "text-white",
+	};
+	const borderMap = {
+		amber: "border-amber-400/20 bg-amber-400/5",
+		teal: "border-teal-400/20 bg-teal-400/5",
+		pink: "border-pink-400/20 bg-pink-400/5",
+		white: "border-white/10 bg-white/5",
+	};
+	const a = accent ?? "white";
+	return (
+		<div className={`rounded-xl border p-4 ${borderMap[a]}`}>
+			<p className="mb-1 font-mono text-[10px] text-white/40 uppercase tracking-widest">
+				{label}
+			</p>
+			<p className={`font-bold font-mono text-3xl tabular-nums ${colorMap[a]}`}>
+				{value}
+			</p>
+			{sub && <div className="mt-2 space-y-0.5 text-xs">{sub}</div>}
+		</div>
+	);
+}
+
+function PayBadge({
+	status,
+	paymentAmount,
+	isPerformer,
+}: {
+	status: string | null;
+	paymentAmount: number | null;
+	isPerformer: boolean;
+}) {
+	if (isPerformer) return <span className="text-white/25 text-xs">—</span>;
+	if (status === "paid")
+		return (
+			<span className="inline-flex items-center gap-1 rounded-full bg-green-500/15 px-2 py-0.5 font-semibold text-green-400 text-xs">
+				<Check className="h-3 w-3" />
+				Betaald
+			</span>
+		);
+	if (status === "extra_payment_pending")
+		return (
+			<span className="inline-flex items-center gap-1 rounded-full bg-orange-500/15 px-2 py-0.5 font-semibold text-orange-400 text-xs">
+				<span className="h-1.5 w-1.5 rounded-full bg-orange-400" />€
+				{((paymentAmount ?? 0) / 100).toFixed(0)} extra
+			</span>
+		);
+	return (
+		<span className="rounded-full bg-yellow-500/15 px-2 py-0.5 font-semibold text-xs text-yellow-400">
+			Open
+		</span>
+	);
+}
+
 function AdminPage() {
 	const navigate = useNavigate();
 	const [search, setSearch] = useState("");
@@ -62,9 +123,8 @@ function AdminPage() {
 	const pageSize = 20;
 
 	const [copiedId, setCopiedId] = useState<string | null>(null);
-	const [expandedGuests, setExpandedGuests] = useState<Set<string>>(new Set());
+	const [expandedRow, setExpandedRow] = useState<string | null>(null);
 
-	// Get current session to check user role
 	const sessionQuery = useQuery({
 		queryKey: ["session"],
 		queryFn: () => authClient.getSession(),
@@ -79,13 +139,8 @@ function AdminPage() {
 		});
 	};
 
-	const toggleGuestExpand = (id: string) => {
-		setExpandedGuests((prev) => {
-			const next = new Set(prev);
-			if (next.has(id)) next.delete(id);
-			else next.add(id);
-			return next;
-		});
+	const toggleRow = (id: string) => {
+		setExpandedRow((prev) => (prev === id ? null : id));
 	};
 
 	type SortKey =
@@ -102,16 +157,14 @@ function AdminPage() {
 	const [sortDir, setSortDir] = useState<SortDir>("desc");
 
 	const handleSort = (key: SortKey) => {
-		if (sortKey === key) {
-			setSortDir((d) => (d === "asc" ? "desc" : "asc"));
-		} else {
+		if (sortKey === key) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+		else {
 			setSortKey(key);
 			setSortDir("asc");
 		}
 	};
 
 	const statsQuery = useQuery(orpc.getRegistrationStats.queryOptions());
-
 	const registrationsQuery = useQuery(
 		orpc.getRegistrations.queryOptions({
 			input: {
@@ -125,7 +178,6 @@ function AdminPage() {
 			},
 		}),
 	);
-
 	const adminRequestsQuery = useQuery(orpc.getAdminRequests.queryOptions());
 
 	const exportMutation = useMutation({
@@ -149,9 +201,7 @@ function AdminPage() {
 			toast.success("Admin toegang goedgekeurd");
 			adminRequestsQuery.refetch();
 		},
-		onError: (error) => {
-			toast.error(`Fout: ${error.message}`);
-		},
+		onError: (err) => toast.error(`Fout: ${err.message}`),
 	});
 
 	const rejectRequestMutation = useMutation({
@@ -160,42 +210,15 @@ function AdminPage() {
 			toast.success("Admin toegang geweigerd");
 			adminRequestsQuery.refetch();
 		},
-		onError: (error) => {
-			toast.error(`Fout: ${error.message}`);
-		},
+		onError: (err) => toast.error(`Fout: ${err.message}`),
 	});
 
 	const requestAdminMutation = useMutation({
 		...orpc.requestAdminAccess.mutationOptions(),
-		onSuccess: () => {
-			toast.success("Admin toegang aangevraagd!");
-		},
-		onError: (error) => {
-			toast.error(`Aanvraag mislukt: ${error.message}`);
-		},
+		onSuccess: () => toast.success("Admin toegang aangevraagd!"),
+		onError: (err) => toast.error(`Aanvraag mislukt: ${err.message}`),
 	});
 
-	const handleSignOut = async () => {
-		await authClient.signOut();
-		navigate({ to: "/" });
-	};
-
-	const handleExport = () => {
-		exportMutation.mutate(undefined);
-	};
-
-	const handleApprove = (requestId: string) => {
-		approveRequestMutation.mutate({ requestId });
-	};
-
-	const handleReject = (requestId: string) => {
-		rejectRequestMutation.mutate({ requestId });
-	};
-
-	const handleRequestAdmin = () => {
-		requestAdminMutation.mutate(undefined);
-	};
-
 	const stats = statsQuery.data;
 	const registrations = registrationsQuery.data?.data ?? [];
 	const pagination = registrationsQuery.data?.pagination;
@@ -206,19 +229,16 @@ function AdminPage() {
 		stats?.byType.find((t) => t.registrationType === "performer")?.count ?? 0;
 	const watcherCount =
 		stats?.byType.find((t) => t.registrationType === "watcher")?.count ?? 0;
-
-	// Use server-side totalGuestCount from stats (accurate across all pages)
 	const totalGuestCount =
 		(stats as { totalGuestCount?: number } | undefined)?.totalGuestCount ?? 0;
 	const totalWatcherAttendees = watcherCount + totalGuestCount;
-
+	const totalGiftRevenue = (stats?.totalGiftRevenue as number | undefined) ?? 0;
 	const totalDrinkCardValue = registrations
 		.filter((r) => r.registrationType === "watcher")
-		.reduce((sum, r) => sum + (r.drinkCardValue ?? 0), 0);
-	const totalGiftRevenue = (stats?.totalGiftRevenue as number | undefined) ?? 0;
+		.reduce((s, r) => s + (r.drinkCardValue ?? 0), 0);
 
 	const sortedRegistrations = useMemo(() => {
-		const sorted = [...registrations].sort((a, b) => {
+		return [...registrations].sort((a, b) => {
 			let valA: string | number = 0;
 			let valB: string | number = 0;
 			switch (sortKey) {
@@ -244,11 +264,10 @@ function AdminPage() {
 							? b.artForm
 							: `€${b.drinkCardValue ?? 5}`) ?? "";
 					break;
-				case "gasten": {
+				case "gasten":
 					valA = parseGuests(a.guests).length;
 					valB = parseGuests(b.guests).length;
 					break;
-				}
 				case "gift":
 					valA = a.giftAmount ?? 0;
 					valB = b.giftAmount ?? 0;
@@ -266,927 +285,962 @@ function AdminPage() {
 			if (valA > valB) return sortDir === "asc" ? 1 : -1;
 			return 0;
 		});
-		return sorted;
 	}, [registrations, sortKey, sortDir]);
 
 	const SortIcon = ({ col }: { col: SortKey }) => {
 		if (sortKey !== col)
-			return <ChevronsUpDown className="ml-1 inline h-3.5 w-3.5 opacity-40" />;
+			return <ChevronsUpDown className="ml-1 inline h-3 w-3 opacity-30" />;
 		return sortDir === "asc" ? (
-			<ChevronUp className="ml-1 inline h-3.5 w-3.5" />
+			<ChevronUp className="ml-1 inline h-3 w-3 text-teal-300" />
 		) : (
-			<ChevronDown className="ml-1 inline h-3.5 w-3.5" />
+			<ChevronDown className="ml-1 inline h-3 w-3 text-teal-300" />
 		);
 	};
 
-	const thClass =
-		"px-4 py-3 text-left font-medium text-xs text-white/60 uppercase tracking-wider cursor-pointer select-none hover:text-white/90 whitespace-nowrap";
-
 	const formatCents = (cents: number | null | undefined) => {
-		if (!cents || cents <= 0) return "-";
+		if (!cents || cents <= 0) return null;
 		const euros = cents / 100;
 		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 className="flex min-h-screen items-center justify-center">
+				<p className="font-mono text-sm text-white/40">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 className="flex min-h-screen items-center justify-center px-4">
+				<div className="w-full max-w-sm rounded-2xl border border-white/10 bg-white/5 p-8 text-center">
+					<p className="mb-6 font-mono text-sm text-white/60">Login vereist</p>
+					<Button
+						onClick={() => navigate({ to: "/login" })}
+						className="w-full bg-white text-[#214e51] hover:bg-white/90"
+					>
+						Inloggen
+					</Button>
+					<Link
+						to="/"
+						className="mt-4 block text-center text-sm text-white/30 hover:text-white/70"
+					>
+						← Terug naar website
+					</Link>
+				</div>
 			</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>
-			{/* Header */}
-			<header className="border-white/10 border-b bg-[#214e51]/95 px-4 py-4 sm:px-8 sm:py-6">
-				<div className="mx-auto flex max-w-7xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-					<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
-						<Link
-							to="/"
-							className="text-sm text-white hover:opacity-80 sm:text-base"
-						>
-							← Terug naar website
-						</Link>
-						<h1 className="font-['Intro',sans-serif] text-2xl text-white sm:text-3xl">
-							Admin Dashboard
-						</h1>
-					</div>
-					<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
-						<Link
-							to="/admin/drinkkaart"
-							className="inline-flex items-center justify-center rounded-lg border border-white/30 px-4 py-2 text-sm text-white/80 transition-colors hover:bg-white/10 hover:text-white"
-						>
-							Drinkkaart beheer
-						</Link>
+			<div className="flex min-h-screen items-center justify-center px-4">
+				<div className="w-full max-w-sm rounded-2xl border border-white/10 bg-white/5 p-8 text-center">
+					<p className="mb-2 font-['Intro',sans-serif] text-2xl text-white">
+						Geen toegang
+					</p>
+					<p className="mb-6 text-sm text-white/50">
+						Je hebt geen admin rechten
+					</p>
+					<Button
+						onClick={() => requestAdminMutation.mutate(undefined)}
+						disabled={requestAdminMutation.isPending}
+						className="w-full bg-white text-[#214e51] hover:bg-white/90"
+					>
+						{requestAdminMutation.isPending ? "Bezig..." : "Vraag toegang aan"}
+					</Button>
+					<div className="mt-3 flex flex-col gap-2">
 						<Button
-							onClick={handleSignOut}
+							onClick={() => navigate({ to: "/account" })}
 							variant="outline"
-							className="border-white/30 bg-transparent text-white hover:bg-white/10"
+							className="w-full border-white/20 bg-transparent text-white hover:bg-white/10"
+						>
+							Mijn account
+						</Button>
+						<Button
+							onClick={async () => {
+								await authClient.signOut();
+								navigate({ to: "/" });
+							}}
+							variant="outline"
+							className="w-full border-white/10 bg-transparent text-white/40 hover:bg-white/5 hover:text-white"
 						>
 							<LogOut className="mr-2 h-4 w-4" />
 							Uitloggen
 						</Button>
 					</div>
+					<Link
+						to="/"
+						className="mt-4 block text-center text-sm text-white/30 hover:text-white/70"
+					>
+						← Terug naar website
+					</Link>
+				</div>
+			</div>
+		);
+	}
+
+	const thCls =
+		"px-3 py-3 text-left font-mono text-[10px] uppercase tracking-widest text-white/35 cursor-pointer select-none hover:text-white/70 whitespace-nowrap";
+
+	return (
+		<div className="min-h-screen">
+			{/* ── Top bar ── */}
+			<header className="sticky top-0 z-30 border-white/8 border-b bg-[#0d1f20]/95 backdrop-blur-md">
+				<div className="mx-auto flex max-w-[1600px] items-center justify-between px-5 py-3">
+					<div className="flex items-center gap-4">
+						<Link
+							to="/"
+							className="font-mono text-white/40 text-xs hover:text-white/80"
+						>
+							← site
+						</Link>
+						<span className="text-white/15">|</span>
+						<span className="font-['Intro',sans-serif] text-lg text-white">
+							Admin
+						</span>
+						{pendingRequests.length > 0 && (
+							<span className="rounded-full bg-yellow-500/20 px-2 py-0.5 font-mono text-[10px] text-yellow-400">
+								{pendingRequests.length} aanvraag
+								{pendingRequests.length !== 1 ? "en" : ""}
+							</span>
+						)}
+					</div>
+					<div className="flex items-center gap-2">
+						<Link
+							to="/admin/drinkkaart"
+							className="rounded-lg border border-white/15 px-3 py-1.5 font-mono text-white/60 text-xs transition hover:border-white/30 hover:text-white"
+						>
+							Drinkkaart
+						</Link>
+						<button
+							type="button"
+							onClick={async () => {
+								await authClient.signOut();
+								navigate({ to: "/" });
+							}}
+							className="rounded-lg border border-white/10 px-3 py-1.5 font-mono text-white/40 text-xs transition hover:border-white/25 hover:text-white/80"
+						>
+							<LogOut className="inline h-3 w-3" />
+						</button>
+					</div>
 				</div>
 			</header>
 
-			{/* Main Content */}
-			<main className="mx-auto max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8">
-				{/* Pending Admin Requests */}
+			<main className="mx-auto max-w-[1600px] space-y-6 px-5 py-6">
+				{/* ── Pending admin requests ── */}
 				{pendingRequests.length > 0 && (
-					<Card className="mb-4 border-yellow-500/30 bg-yellow-500/10 sm:mb-6">
-						<CardHeader className="px-4 py-4 sm:px-6">
-							<CardTitle className="font-['Intro',sans-serif] text-lg text-yellow-200 sm:text-xl">
-								Openstaande Admin Aanvragen ({pendingRequests.length})
-							</CardTitle>
-							<CardDescription className="text-sm text-yellow-200/60">
-								Gebruikers die admin toegang hebben aangevraagd
-							</CardDescription>
-						</CardHeader>
-						<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6">
-							<div className="space-y-3">
-								{pendingRequests.map((request) => (
-									<div
-										key={request.id}
-										className="flex flex-col gap-3 rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-3 sm:flex-row sm:items-center sm:justify-between sm:p-4"
-									>
-										<div className="min-w-0">
-											<p className="truncate font-medium text-white">
-												{request.userName}
-											</p>
-											<p className="truncate text-sm text-white/60">
-												{request.userEmail}
-											</p>
-											<p className="text-white/40 text-xs">
-												Aangevraagd:{" "}
-												{new Date(request.requestedAt).toLocaleDateString(
-													"nl-BE",
-												)}
-											</p>
-										</div>
-										<div className="flex flex-col gap-2 sm:flex-row">
-											<Button
-												onClick={() => handleApprove(request.id)}
-												disabled={approveRequestMutation.isPending}
-												size="sm"
-												className="bg-green-600 text-white hover:bg-green-700"
-											>
-												<Check className="mr-1 h-4 w-4" />
-												Goedkeuren
-											</Button>
-											<Button
-												onClick={() => handleReject(request.id)}
-												disabled={rejectRequestMutation.isPending}
-												size="sm"
-												variant="outline"
-												className="border-red-500/30 text-red-400 hover:bg-red-500/10"
-											>
-												<X className="mr-1 h-4 w-4" />
-												Weigeren
-											</Button>
-										</div>
+					<div className="rounded-xl border border-yellow-500/25 bg-yellow-500/8 p-4">
+						<p className="mb-3 font-mono text-[10px] text-yellow-400/70 uppercase tracking-widest">
+							Openstaande admin aanvragen ({pendingRequests.length})
+						</p>
+						<div className="space-y-2">
+							{pendingRequests.map((req) => (
+								<div
+									key={req.id}
+									className="flex flex-col gap-3 rounded-lg border border-yellow-500/15 bg-yellow-500/5 px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
+								>
+									<div>
+										<p className="font-medium text-white">{req.userName}</p>
+										<p className="text-white/50 text-xs">{req.userEmail}</p>
 									</div>
-								))}
-							</div>
-						</CardContent>
-					</Card>
+									<div className="flex gap-2">
+										<button
+											type="button"
+											onClick={() =>
+												approveRequestMutation.mutate({ requestId: req.id })
+											}
+											disabled={approveRequestMutation.isPending}
+											className="rounded-lg bg-green-600/80 px-4 py-1.5 font-semibold text-white text-xs transition hover:bg-green-600 disabled:opacity-50"
+										>
+											<Check className="mr-1 inline h-3 w-3" />
+											Goedkeuren
+										</button>
+										<button
+											type="button"
+											onClick={() =>
+												rejectRequestMutation.mutate({ requestId: req.id })
+											}
+											disabled={rejectRequestMutation.isPending}
+											className="rounded-lg border border-red-500/30 px-4 py-1.5 font-semibold text-red-400 text-xs transition hover:bg-red-500/10 disabled:opacity-50"
+										>
+											<X className="mr-1 inline h-3 w-3" />
+											Weigeren
+										</button>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
 				)}
 
-				{/* Stats Cards */}
-				<div className="mb-8 grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-5 lg:gap-6">
-					{/* Total registrations */}
-					<Card className="border-white/10 bg-white/5">
-						<CardHeader className="pb-2">
-							<CardDescription className="text-white/60 text-xs sm:text-sm">
-								Totaal inschrijvingen
-							</CardDescription>
-							<CardTitle className="font-['Intro',sans-serif] text-2xl text-white sm:text-3xl lg:text-4xl">
-								{stats?.total ?? 0}
-							</CardTitle>
-						</CardHeader>
-						<CardContent>
-							<Users className="h-5 w-5 text-white/40" />
-						</CardContent>
-					</Card>
-
-					{/* Today */}
-					<Card className="border-white/10 bg-white/5">
-						<CardHeader className="pb-2">
-							<CardDescription className="text-white/60 text-xs sm:text-sm">
-								Vandaag ingeschreven
-							</CardDescription>
-							<CardTitle className="font-['Intro',sans-serif] text-2xl text-white sm:text-3xl lg:text-4xl">
-								{stats?.today ?? 0}
-							</CardTitle>
-						</CardHeader>
-						<CardContent>
-							<span className="text-white/40 text-xs sm:text-sm">
-								Nieuwe registraties vandaag
+				{/* ── Stats grid ── */}
+				<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
+					<StatCard
+						label="Totaal inschrijvingen"
+						value={stats?.total ?? 0}
+						accent="white"
+						sub={
+							<span className="text-white/35">
+								{stats?.today ?? 0} vandaag nieuw
 							</span>
-						</CardContent>
-					</Card>
-
-					{/* Performers */}
-					<Card className="border-amber-400/20 bg-amber-400/5">
-						<CardHeader className="pb-2">
-							<CardDescription className="text-amber-300/70 text-xs sm:text-sm">
-								Artiesten
-							</CardDescription>
-							<CardTitle className="font-['Intro',sans-serif] text-2xl text-amber-300 sm:text-3xl lg:text-4xl">
-								{performerCount}
-							</CardTitle>
-						</CardHeader>
-						<CardContent>
-							<div className="space-y-1">
-								{stats?.byArtForm.slice(0, 2).map((item) => (
+						}
+					/>
+					<StatCard
+						label="Artiesten"
+						accent="amber"
+						value={performerCount}
+						sub={
+							<>
+								{stats?.byArtForm.slice(0, 3).map((item) => (
 									<div
 										key={item.artForm}
-										className="flex items-center justify-between text-xs"
+										className="flex justify-between text-amber-300/60"
 									>
-										<span className="truncate text-amber-300/70">
+										<span className="truncate">
 											{item.artForm || "Onbekend"}
 										</span>
-										<span className="text-amber-300">{item.count}</span>
+										<span className="ml-2 shrink-0 font-mono text-amber-300">
+											{item.count}
+										</span>
 									</div>
 								))}
-							</div>
-						</CardContent>
-					</Card>
-
-					{/* Watchers + guests (real attendees count) */}
-					<Card className="border-teal-400/20 bg-teal-400/5">
-						<CardHeader className="pb-2">
-							<CardDescription className="text-teal-300/70 text-xs sm:text-sm">
-								Bezoekers
-							</CardDescription>
-							<CardTitle className="font-['Intro',sans-serif] text-2xl text-teal-300 sm:text-3xl lg:text-4xl">
-								{totalWatcherAttendees}
-							</CardTitle>
-						</CardHeader>
-						<CardContent>
-							<div className="space-y-1 text-xs">
-								<div className="flex items-center justify-between">
-									<span className="text-teal-300/70">Inschrijvingen</span>
-									<span className="text-teal-300">{watcherCount}</span>
+							</>
+						}
+					/>
+					<StatCard
+						label="Bezoekers aanwezig"
+						accent="teal"
+						value={totalWatcherAttendees}
+						sub={
+							<>
+								<div className="flex justify-between text-teal-300/60">
+									<span>Inschrijvingen</span>
+									<span className="font-mono text-teal-300">
+										{watcherCount}
+									</span>
 								</div>
 								{totalGuestCount > 0 && (
-									<div className="flex items-center justify-between">
-										<span className="text-teal-300/70">Gasten</span>
-										<span className="text-teal-300">+{totalGuestCount}</span>
+									<div className="flex justify-between text-teal-300/60">
+										<span>Gasten</span>
+										<span className="font-mono text-teal-300">
+											+{totalGuestCount}
+										</span>
 									</div>
 								)}
-								<div className="hidden sm:flex sm:items-center sm:justify-between">
-									<span className="text-teal-300/70">Drinkkaart</span>
-									<span className="text-teal-300">€{totalDrinkCardValue}</span>
+								<div className="flex justify-between text-teal-300/60">
+									<span>Drinkkaart</span>
+									<span className="font-mono text-teal-300">
+										€{totalDrinkCardValue}
+									</span>
 								</div>
-							</div>
-						</CardContent>
-					</Card>
-
-					{/* Gifts */}
-					<Card className="border-pink-400/20 bg-pink-400/5">
-						<CardHeader className="pb-2">
-							<CardDescription className="text-pink-300/70 text-xs sm:text-sm">
-								Vrijwillige Gifts
-							</CardDescription>
-							<CardTitle className="font-['Intro',sans-serif] text-2xl text-pink-300 sm:text-3xl lg:text-4xl">
-								€{Math.round(totalGiftRevenue / 100)}
-							</CardTitle>
-						</CardHeader>
-						<CardContent>
-							<span className="text-white/40 text-xs sm:text-sm">
-								Totale gift opbrengst
-							</span>
-						</CardContent>
-					</Card>
+							</>
+						}
+					/>
+					<StatCard
+						label="Gifts totaal"
+						accent="pink"
+						value={`€${Math.round(totalGiftRevenue / 100)}`}
+						sub={
+							<span className="text-pink-300/50">Vrijwillige bijdragen</span>
+						}
+					/>
+					<StatCard
+						label="Vandaag"
+						accent="white"
+						value={stats?.today ?? 0}
+						sub={<span className="text-white/35">Nieuwe registraties</span>}
+					/>
 				</div>
 
-				{/* Filters */}
-				<Card className="mb-6 border-white/10 bg-white/5">
-					<CardHeader className="px-4 py-4 sm:px-6 sm:py-6">
-						<CardTitle className="font-['Intro',sans-serif] text-lg text-white sm:text-xl">
-							Filters
-						</CardTitle>
-					</CardHeader>
-					<CardContent className="px-4 pb-4 sm:px-6 sm:pb-6">
-						<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-5">
-							<div>
-								<label
-									htmlFor="search"
-									className="mb-1.5 block text-white/60 text-xs sm:mb-2 sm:text-sm"
-								>
-									Zoeken
-								</label>
-								<div className="relative">
-									<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-white/40" />
-									<Input
-										id="search"
-										placeholder="Naam of email..."
-										value={search}
-										onChange={(e) => setSearch(e.target.value)}
-										className="border-white/20 bg-white/10 pl-10 text-sm text-white placeholder:text-white/40 sm:text-base"
-									/>
-								</div>
-							</div>
-
-							<div>
-								<label
-									htmlFor="typeFilter"
-									className="mb-1.5 block text-white/60 text-xs sm:mb-2 sm:text-sm"
-								>
-									Type
-								</label>
-								<select
-									id="typeFilter"
-									value={registrationType}
-									onChange={(e) =>
-										setRegistrationType(
-											e.target.value as "performer" | "watcher" | "",
-										)
-									}
-									className="w-full rounded-md border border-white/20 bg-white/10 px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white/20 sm:text-base"
-								>
-									<option value="" className="bg-[#214e51]">
-										Alle types
-									</option>
-									<option value="performer" className="bg-[#214e51]">
-										Artiesten
-									</option>
-									<option value="watcher" className="bg-[#214e51]">
-										Bezoekers
-									</option>
-								</select>
-							</div>
-
-							<div>
-								<label
-									htmlFor="artForm"
-									className="mb-1.5 block text-white/60 text-xs sm:mb-2 sm:text-sm"
-								>
-									Kunstvorm
-								</label>
+				{/* ── Filters + export row ── */}
+				<div className="rounded-xl border border-white/8 bg-white/3 p-4">
+					<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-6">
+						{/* Search */}
+						<div className="lg:col-span-2">
+							<div className="relative">
+								<Search className="absolute top-1/2 left-3 h-3.5 w-3.5 -translate-y-1/2 text-white/30" />
 								<Input
-									id="artForm"
-									placeholder="Filter op kunstvorm..."
-									value={artForm}
-									onChange={(e) => setArtForm(e.target.value)}
-									className="border-white/20 bg-white/10 text-sm text-white placeholder:text-white/40 sm:text-base"
-								/>
-							</div>
-
-							<div>
-								<label
-									htmlFor="fromDate"
-									className="mb-1.5 block text-white/60 text-xs sm:mb-2 sm:text-sm"
-								>
-									Vanaf
-								</label>
-								<Input
-									id="fromDate"
-									type="date"
-									value={fromDate}
-									onChange={(e) => setFromDate(e.target.value)}
-									className="border-white/20 bg-white/10 text-sm text-white [color-scheme:dark] sm:text-base"
-								/>
-							</div>
-
-							<div>
-								<label
-									htmlFor="toDate"
-									className="mb-1.5 block text-white/60 text-xs sm:mb-2 sm:text-sm"
-								>
-									Tot
-								</label>
-								<Input
-									id="toDate"
-									type="date"
-									value={toDate}
-									onChange={(e) => setToDate(e.target.value)}
-									className="border-white/20 bg-white/10 text-sm text-white [color-scheme:dark] sm:text-base"
+									placeholder="Naam of e-mail zoeken…"
+									value={search}
+									onChange={(e) => {
+										setSearch(e.target.value);
+										setPage(1);
+									}}
+									className="border-white/15 bg-white/8 pl-9 font-mono text-sm text-white placeholder:text-white/25 focus-visible:ring-teal-500/40"
 								/>
 							</div>
 						</div>
-					</CardContent>
-				</Card>
-
-				{/* Export Button */}
-				<div className="mb-4 flex flex-col gap-2 sm:mb-6 sm:flex-row sm:items-center sm:justify-between">
-					<p className="text-sm text-white/60">
-						{pagination?.total ?? 0} registraties gevonden
+						{/* Type */}
+						<div>
+							<select
+								value={registrationType}
+								onChange={(e) => {
+									setRegistrationType(
+										e.target.value as "performer" | "watcher" | "",
+									);
+									setPage(1);
+								}}
+								className="w-full rounded-md border border-white/15 bg-white/8 px-3 py-2 font-mono text-sm text-white focus:outline-none focus:ring-2 focus:ring-teal-500/40"
+							>
+								<option value="" className="bg-[#0d1f20]">
+									Alle types
+								</option>
+								<option value="performer" className="bg-[#0d1f20]">
+									Artiesten
+								</option>
+								<option value="watcher" className="bg-[#0d1f20]">
+									Bezoekers
+								</option>
+							</select>
+						</div>
+						{/* Art form */}
+						<div>
+							<Input
+								placeholder="Kunstvorm…"
+								value={artForm}
+								onChange={(e) => {
+									setArtForm(e.target.value);
+									setPage(1);
+								}}
+								className="border-white/15 bg-white/8 font-mono text-sm text-white placeholder:text-white/25 focus-visible:ring-teal-500/40"
+							/>
+						</div>
+						{/* Date from */}
+						<div>
+							<Input
+								type="date"
+								value={fromDate}
+								onChange={(e) => {
+									setFromDate(e.target.value);
+									setPage(1);
+								}}
+								className="border-white/15 bg-white/8 font-mono text-sm text-white [color-scheme:dark] focus-visible:ring-teal-500/40"
+							/>
+						</div>
+						{/* Date to + export */}
+						<div className="flex gap-2">
+							<Input
+								type="date"
+								value={toDate}
+								onChange={(e) => {
+									setToDate(e.target.value);
+									setPage(1);
+								}}
+								className="min-w-0 flex-1 border-white/15 bg-white/8 font-mono text-sm text-white [color-scheme:dark] focus-visible:ring-teal-500/40"
+							/>
+							<button
+								type="button"
+								onClick={() => exportMutation.mutate(undefined)}
+								disabled={exportMutation.isPending}
+								title="Exporteer CSV"
+								className="shrink-0 rounded-md border border-white/15 bg-white/8 px-3 text-white/60 transition hover:border-teal-400/40 hover:bg-teal-400/10 hover:text-teal-300 disabled:opacity-40"
+							>
+								<Download className="h-4 w-4" />
+							</button>
+						</div>
+					</div>
+					<p className="mt-3 font-mono text-[11px] text-white/30">
+						{pagination?.total ?? 0} registraties
 						{totalGuestCount > 0 && (
-							<span className="ml-2 text-teal-300/70">
-								(+{totalGuestCount} gasten ={" "}
-								{(pagination?.total ?? 0) + totalGuestCount} aanwezigen totaal)
+							<span className="ml-2 text-teal-400/60">
+								· {totalWatcherAttendees + performerCount} aanwezigen totaal
+								(incl. {totalGuestCount} gasten)
 							</span>
 						)}
 					</p>
-					<Button
-						onClick={handleExport}
-						disabled={exportMutation.isPending}
-						className="w-full bg-white text-[#214e51] hover:bg-white/90 sm:w-auto"
-					>
-						<Download className="mr-2 h-4 w-4" />
-						{exportMutation.isPending ? "Exporteren..." : "Exporteer CSV"}
-					</Button>
 				</div>
 
-				{/* Registrations Table / Cards */}
-				<Card className="border-white/10 bg-white/5">
-					<CardContent className="p-0">
-						{/* Desktop Table */}
-						<div className="hidden overflow-x-auto lg:block">
-							<table className="w-full">
-								<thead>
-									<tr className="border-white/10 border-b">
-										<th className={thClass} onClick={() => handleSort("naam")}>
-											Naam <SortIcon col="naam" />
-										</th>
-										<th className={thClass} onClick={() => handleSort("email")}>
-											Email <SortIcon col="email" />
-										</th>
-										<th className="whitespace-nowrap px-4 py-3 text-left font-medium text-white/60 text-xs uppercase tracking-wider">
-											Telefoon
-										</th>
-										<th className={thClass} onClick={() => handleSort("type")}>
-											Type <SortIcon col="type" />
-										</th>
-										<th
-											className={thClass}
-											onClick={() => handleSort("details")}
+				{/* ── Table ── */}
+				<div className="overflow-hidden rounded-xl border border-white/8 bg-white/3">
+					{/* Desktop table */}
+					<div className="hidden overflow-x-auto lg:block">
+						<table className="w-full border-collapse">
+							<thead>
+								<tr className="border-white/8 border-b">
+									<th className={thCls} style={{ width: "2.5rem" }} />
+									<th className={thCls} onClick={() => handleSort("naam")}>
+										Naam <SortIcon col="naam" />
+									</th>
+									<th className={thCls} onClick={() => handleSort("email")}>
+										Email <SortIcon col="email" />
+									</th>
+									<th className={`${thCls} hidden xl:table-cell`}>Telefoon</th>
+									<th className={thCls} onClick={() => handleSort("type")}>
+										Type <SortIcon col="type" />
+									</th>
+									<th className={thCls} onClick={() => handleSort("details")}>
+										Details <SortIcon col="details" />
+									</th>
+									<th className={thCls} onClick={() => handleSort("gasten")}>
+										Gasten <SortIcon col="gasten" />
+									</th>
+									<th className={thCls}>Notities</th>
+									<th className={thCls} onClick={() => handleSort("gift")}>
+										Gift <SortIcon col="gift" />
+									</th>
+									<th className={thCls} onClick={() => handleSort("betaling")}>
+										Betaling <SortIcon col="betaling" />
+									</th>
+									<th className={thCls} onClick={() => handleSort("datum")}>
+										Datum <SortIcon col="datum" />
+									</th>
+									<th className={thCls}>Link</th>
+								</tr>
+							</thead>
+							<tbody>
+								{registrationsQuery.isLoading ? (
+									<tr>
+										<td
+											colSpan={12}
+											className="px-4 py-12 text-center font-mono text-sm text-white/30"
 										>
-											Details <SortIcon col="details" />
-										</th>
-										<th
-											className={thClass}
-											onClick={() => handleSort("gasten")}
-										>
-											Gasten <SortIcon col="gasten" />
-										</th>
-										<th className={thClass} onClick={() => handleSort("gift")}>
-											Gift <SortIcon col="gift" />
-										</th>
-										<th
-											className={thClass}
-											onClick={() => handleSort("betaling")}
-										>
-											Betaling <SortIcon col="betaling" />
-										</th>
-										<th className={thClass} onClick={() => handleSort("datum")}>
-											Datum <SortIcon col="datum" />
-										</th>
-										<th className="whitespace-nowrap px-4 py-3 text-left font-medium text-white/60 text-xs uppercase tracking-wider">
-											Link
-										</th>
+											laden...
+										</td>
 									</tr>
-								</thead>
-								<tbody>
-									{registrationsQuery.isLoading ? (
-										<tr>
-											<td
-												colSpan={10}
-												className="px-4 py-8 text-center text-white/60"
-											>
-												Laden...
-											</td>
-										</tr>
-									) : sortedRegistrations.length === 0 ? (
-										<tr>
-											<td
-												colSpan={10}
-												className="px-4 py-8 text-center text-white/60"
-											>
-												Geen registraties gevonden
-											</td>
-										</tr>
-									) : (
-										sortedRegistrations.map((reg) => {
-											const isPerformer = reg.registrationType === "performer";
-											const guests = parseGuests(reg.guests);
-											const guestCount = guests.length;
-											const isExpanded = expandedGuests.has(reg.id);
-
-											const detailLabel = isPerformer
-												? reg.artForm || "-"
-												: `€${reg.drinkCardValue ?? 5} drinkkaart`;
-
-											const dateLabel = (() => {
-												try {
-													return new Date(reg.createdAt).toLocaleDateString(
-														"nl-BE",
-														{
-															day: "2-digit",
-															month: "2-digit",
-															year: "numeric",
-														},
-													);
-												} catch {
-													return "-";
-												}
-											})();
-
-											return (
-												<>
-													<tr
-														key={reg.id}
-														className="border-white/5 border-b hover:bg-white/5"
-													>
-														<td className="px-4 py-3 font-medium text-white">
-															{reg.firstName} {reg.lastName}
-														</td>
-														<td className="px-4 py-3 text-sm text-white/70">
-															{reg.email}
-														</td>
-														<td className="px-4 py-3 text-sm text-white/60">
-															{reg.phone || "-"}
-														</td>
-														<td className="px-4 py-3">
-															<span
-																className={`inline-flex items-center rounded-full px-2 py-0.5 font-semibold text-xs ${isPerformer ? "bg-amber-400/15 text-amber-300" : "bg-teal-400/15 text-teal-300"}`}
-															>
-																{isPerformer ? "Artiest" : "Bezoeker"}
-															</span>
-														</td>
-														<td className="px-4 py-3 text-sm text-white/70">
-															{detailLabel}
-														</td>
-														<td className="px-4 py-3 text-sm text-white/70">
-															{guestCount > 0 ? (
-																<button
-																	type="button"
-																	onClick={() => toggleGuestExpand(reg.id)}
-																	className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-teal-300 transition-colors hover:bg-teal-400/10"
-																>
-																	{isExpanded ? (
-																		<ChevronDown className="h-3.5 w-3.5" />
-																	) : (
-																		<ChevronRight className="h-3.5 w-3.5" />
-																	)}
-																	{guestCount} gast
-																	{guestCount === 1 ? "" : "en"}
-																</button>
-															) : (
-																"-"
-															)}
-														</td>
-														<td className="px-4 py-3 text-pink-300/70 text-sm">
-															{formatCents(reg.giftAmount)}
-														</td>
-														<td className="px-4 py-3">
-															{isPerformer ? (
-																<span className="text-sm text-white/30">-</span>
-															) : reg.paymentStatus === "paid" ? (
-																<span className="inline-flex items-center gap-1 font-medium text-green-400 text-sm">
-																	<Check className="h-3.5 w-3.5" />
-																	Betaald
-																</span>
-															) : reg.paymentStatus ===
-																"extra_payment_pending" ? (
-																<span className="inline-flex items-center gap-1 font-medium text-orange-400 text-sm">
-																	<span className="h-1.5 w-1.5 rounded-full bg-orange-400" />
-																	Extra (€
-																	{((reg.paymentAmount ?? 0) / 100).toFixed(0)})
-																</span>
-															) : (
-																<span className="text-sm text-yellow-400">
-																	Open
-																</span>
-															)}
-														</td>
-														<td className="px-4 py-3 text-sm text-white/50 tabular-nums">
-															{dateLabel}
-														</td>
-														<td className="px-4 py-3">
-															{reg.managementToken ? (
-																<button
-																	type="button"
-																	title="Kopieer beheerlink"
-																	onClick={() =>
-																		handleCopyManageUrl(
-																			reg.managementToken as string,
-																			reg.id,
-																		)
-																	}
-																	className="inline-flex items-center justify-center rounded p-1 text-white/40 transition-colors hover:bg-white/10 hover:text-white"
-																>
-																	{copiedId === reg.id ? (
-																		<ClipboardCheck className="h-4 w-4 text-green-400" />
-																	) : (
-																		<Clipboard className="h-4 w-4" />
-																	)}
-																</button>
-															) : (
-																<span className="text-sm text-white/20">—</span>
-															)}
-														</td>
-													</tr>
-													{/* Expandable guest details row */}
-													{isExpanded && guestCount > 0 && (
-														<tr
-															key={`${reg.id}-guests`}
-															className="border-white/5 border-b bg-teal-900/20"
-														>
-															<td colSpan={10} className="px-6 py-3">
-																<div className="space-y-1.5">
-																	<p className="mb-2 font-medium text-teal-300/70 text-xs uppercase tracking-wider">
-																		Gasten van {reg.firstName} {reg.lastName}
-																	</p>
-																	{guests.map((g, i) => (
-																		<div
-																			// biome-ignore lint/suspicious/noArrayIndexKey: guest order is stable within a registration
-																			key={i}
-																			className="flex flex-wrap items-center gap-x-4 gap-y-0.5 rounded bg-teal-400/5 px-3 py-1.5 text-sm"
-																		>
-																			<span className="w-5 shrink-0 text-white/40 text-xs">
-																				{i + 1}.
-																			</span>
-																			<span className="font-medium text-white">
-																				{g.firstName} {g.lastName}
-																			</span>
-																			{g.email && (
-																				<span className="text-white/60">
-																					{g.email}
-																				</span>
-																			)}
-																			{g.phone && (
-																				<span className="text-white/50">
-																					{g.phone}
-																				</span>
-																			)}
-																			{!g.email && !g.phone && (
-																				<span className="text-white/30 text-xs italic">
-																					geen contactgegevens
-																				</span>
-																			)}
-																		</div>
-																	))}
-																</div>
-															</td>
-														</tr>
-													)}
-												</>
-											);
-										})
-									)}
-								</tbody>
-							</table>
-						</div>
-
-						{/* Mobile Cards */}
-						<div className="lg:hidden">
-							{registrationsQuery.isLoading ? (
-								<div className="px-4 py-8 text-center text-white/60">
-									Laden...
-								</div>
-							) : sortedRegistrations.length === 0 ? (
-								<div className="px-4 py-8 text-center text-white/60">
-									Geen registraties gevonden
-								</div>
-							) : (
-								<div className="divide-y divide-white/5">
-									{sortedRegistrations.map((reg) => {
+								) : sortedRegistrations.length === 0 ? (
+									<tr>
+										<td
+											colSpan={12}
+											className="px-4 py-12 text-center font-mono text-sm text-white/30"
+										>
+											Geen registraties gevonden
+										</td>
+									</tr>
+								) : (
+									sortedRegistrations.map((reg) => {
 										const isPerformer = reg.registrationType === "performer";
 										const guests = parseGuests(reg.guests);
 										const guestCount = guests.length;
-										const isExpanded = expandedGuests.has(reg.id);
+										const isExpanded = expandedRow === reg.id;
+										const hasNotes = !!reg.extraQuestions?.trim();
+										const hasExtra = guestCount > 0 || hasNotes;
 
 										const detailLabel = isPerformer
-											? reg.artForm || "-"
+											? reg.artForm || "—"
 											: `€${reg.drinkCardValue ?? 5} drinkkaart`;
 
 										const dateLabel = (() => {
 											try {
 												return new Date(reg.createdAt).toLocaleDateString(
 													"nl-BE",
-													{
-														day: "2-digit",
-														month: "2-digit",
-														year: "2-digit",
-													},
+													{ day: "2-digit", month: "2-digit", year: "numeric" },
 												);
 											} catch {
-												return "-";
+												return "—";
 											}
 										})();
 
-										return (
-											<div key={reg.id}>
-												<div className="p-4 hover:bg-white/5">
-													<div className="flex items-start justify-between gap-3">
-														<div className="min-w-0 flex-1">
-															<div className="flex items-center gap-2">
-																<span className="truncate font-medium text-white">
-																	{reg.firstName} {reg.lastName}
-																</span>
-															</div>
-															<div className="mt-1 flex items-center gap-2 text-white/60 text-xs">
-																<span className="truncate">{reg.email}</span>
-																{reg.phone && (
-																	<span className="shrink-0">
-																		• {reg.phone}
-																	</span>
-																)}
-															</div>
-														</div>
-														<div className="flex items-center gap-2">
-															<span
-																className={`shrink-0 rounded-full px-2 py-0.5 font-semibold text-xs ${isPerformer ? "bg-amber-400/15 text-amber-300" : "bg-teal-400/15 text-teal-300"}`}
-															>
-																{isPerformer ? "Artiest" : "Bezoeker"}
-															</span>
-															{reg.managementToken && (
-																<button
-																	type="button"
-																	title="Kopieer beheerlink"
-																	onClick={() =>
-																		handleCopyManageUrl(
-																			reg.managementToken as string,
-																			reg.id,
-																		)
-																	}
-																	className="shrink-0 rounded p-1.5 text-white/40 transition-colors hover:bg-white/10 hover:text-white"
-																>
-																	{copiedId === reg.id ? (
-																		<ClipboardCheck className="h-4 w-4 text-green-400" />
-																	) : (
-																		<Clipboard className="h-4 w-4" />
-																	)}
-																</button>
-															)}
-														</div>
-													</div>
+										const giftFmt = formatCents(reg.giftAmount);
 
-													<div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-2 text-xs">
-														<div className="text-white/70">
-															<span className="text-white/40">Details:</span>{" "}
-															{detailLabel}
-														</div>
-														{guestCount > 0 && (
+										return (
+											<>
+												<tr
+													key={reg.id}
+													onClick={() => hasExtra && toggleRow(reg.id)}
+													className={`border-white/5 border-b transition-colors ${hasExtra ? "cursor-pointer" : ""} ${isExpanded ? "bg-white/5" : "hover:bg-white/3"}`}
+												>
+													{/* Expand toggle */}
+													<td className="py-3 pr-1 pl-3 text-center">
+														{hasExtra ? (
+															isExpanded ? (
+																<ChevronDown className="h-3.5 w-3.5 text-white/40" />
+															) : (
+																<ChevronRight className="h-3.5 w-3.5 text-white/25" />
+															)
+														) : null}
+													</td>
+													<td className="px-3 py-3 font-medium text-white">
+														{reg.firstName} {reg.lastName}
+													</td>
+													<td className="px-3 py-3 font-mono text-white/60 text-xs">
+														{reg.email}
+													</td>
+													<td className="hidden px-3 py-3 font-mono text-white/45 text-xs xl:table-cell">
+														{reg.phone || "—"}
+													</td>
+													<td className="px-3 py-3">
+														<span
+															className={`rounded-full px-2 py-0.5 font-mono font-semibold text-[10px] uppercase tracking-wide ${isPerformer ? "bg-amber-400/12 text-amber-300" : "bg-teal-400/12 text-teal-300"}`}
+														>
+															{isPerformer ? "Artiest" : "Bezoeker"}
+														</span>
+													</td>
+													<td className="px-3 py-3 font-mono text-white/60 text-xs">
+														{detailLabel}
+													</td>
+													<td className="px-3 py-3 font-mono text-xs">
+														{guestCount > 0 ? (
+															<span className="text-teal-300">
+																{guestCount}×
+															</span>
+														) : (
+															<span className="text-white/20">—</span>
+														)}
+													</td>
+													<td className="px-3 py-3">
+														{hasNotes ? (
+															<MessageSquare className="h-3.5 w-3.5 text-white/40" />
+														) : (
+															<span className="text-white/15 text-xs">—</span>
+														)}
+													</td>
+													<td className="px-3 py-3 font-mono text-pink-300/70 text-xs">
+														{giftFmt ?? (
+															<span className="text-white/20">—</span>
+														)}
+													</td>
+													<td className="px-3 py-3">
+														<PayBadge
+															status={reg.paymentStatus ?? null}
+															paymentAmount={reg.paymentAmount ?? null}
+															isPerformer={isPerformer}
+														/>
+													</td>
+													<td className="px-3 py-3 font-mono text-white/40 text-xs tabular-nums">
+														{dateLabel}
+													</td>
+													<td
+														className="px-3 py-3"
+														onClick={(e) => e.stopPropagation()}
+														onKeyDown={(e) => e.stopPropagation()}
+													>
+														{reg.managementToken ? (
 															<button
 																type="button"
-																onClick={() => toggleGuestExpand(reg.id)}
-																className="inline-flex items-center gap-1 text-teal-300"
+																title="Kopieer beheerlink"
+																onClick={() =>
+																	handleCopyManageUrl(
+																		reg.managementToken as string,
+																		reg.id,
+																	)
+																}
+																className="rounded p-1 text-white/30 transition hover:bg-white/10 hover:text-white"
 															>
-																{isExpanded ? (
-																	<ChevronDown className="h-3 w-3" />
+																{copiedId === reg.id ? (
+																	<ClipboardCheck className="h-3.5 w-3.5 text-green-400" />
 																) : (
-																	<ChevronRight className="h-3 w-3" />
+																	<Clipboard className="h-3.5 w-3.5" />
+																)}
+															</button>
+														) : (
+															<span className="text-white/15">—</span>
+														)}
+													</td>
+												</tr>
+
+												{/* Expanded detail row */}
+												{isExpanded && (
+													<tr
+														key={`${reg.id}-detail`}
+														className="border-white/5 border-b bg-white/5"
+													>
+														<td colSpan={12} className="px-6 pt-3 pb-5">
+															<div className="grid gap-4 sm:grid-cols-2">
+																{/* Guests */}
+																{guestCount > 0 && (
+																	<div>
+																		<p className="mb-2 font-mono text-[10px] text-teal-400/60 uppercase tracking-widest">
+																			Gasten ({guestCount})
+																		</p>
+																		<div className="space-y-1.5">
+																			{guests.map((g, i) => (
+																				<div
+																					// biome-ignore lint/suspicious/noArrayIndexKey: stable order
+																					key={i}
+																					className="flex flex-wrap items-baseline gap-x-3 gap-y-0.5 rounded-lg border border-teal-400/10 bg-teal-400/5 px-3 py-2 text-sm"
+																				>
+																					<span className="font-mono text-[10px] text-white/30">
+																						{i + 1}.
+																					</span>
+																					<span className="font-medium text-white">
+																						{g.firstName} {g.lastName}
+																					</span>
+																					{g.email && (
+																						<span className="font-mono text-white/50 text-xs">
+																							{g.email}
+																						</span>
+																					)}
+																					{g.phone && (
+																						<span className="font-mono text-white/40 text-xs">
+																							{g.phone}
+																						</span>
+																					)}
+																					{!g.email && !g.phone && (
+																						<span className="font-mono text-white/25 text-xs italic">
+																							geen contactgegevens
+																						</span>
+																					)}
+																				</div>
+																			))}
+																		</div>
+																	</div>
+																)}
+
+																{/* Notes */}
+																{hasNotes && (
+																	<div>
+																		<p className="mb-2 font-mono text-[10px] text-white/40 uppercase tracking-widest">
+																			Vragen / opmerkingen
+																		</p>
+																		<div className="rounded-lg border border-white/8 bg-white/5 px-4 py-3 text-sm text-white/80 leading-relaxed">
+																			{reg.extraQuestions}
+																		</div>
+																	</div>
+																)}
+
+																{/* Performer extras */}
+																{isPerformer &&
+																	(reg.experience || reg.artForm) && (
+																		<div>
+																			<p className="mb-2 font-mono text-[10px] text-amber-400/60 uppercase tracking-widest">
+																				Optreden details
+																			</p>
+																			<div className="rounded-lg border border-amber-400/10 bg-amber-400/5 px-4 py-3 text-sm text-white/80">
+																				{reg.artForm && (
+																					<p>
+																						<span className="text-amber-300/60">
+																							Kunstvorm:{" "}
+																						</span>
+																						{reg.artForm}
+																					</p>
+																				)}
+																				{reg.experience && (
+																					<p>
+																						<span className="text-amber-300/60">
+																							Ervaring:{" "}
+																						</span>
+																						{reg.experience}
+																					</p>
+																				)}
+																				<p>
+																					<span className="text-amber-300/60">
+																						16+:{" "}
+																					</span>
+																					{reg.isOver16 ? "ja" : "nee"}
+																				</p>
+																			</div>
+																		</div>
+																	)}
+															</div>
+														</td>
+													</tr>
+												)}
+											</>
+										);
+									})
+								)}
+							</tbody>
+						</table>
+					</div>
+
+					{/* Mobile cards */}
+					<div className="divide-y divide-white/5 lg:hidden">
+						{registrationsQuery.isLoading ? (
+							<div className="py-10 text-center font-mono text-sm text-white/30">
+								laden...
+							</div>
+						) : sortedRegistrations.length === 0 ? (
+							<div className="py-10 text-center font-mono text-sm text-white/30">
+								Geen registraties
+							</div>
+						) : (
+							sortedRegistrations.map((reg) => {
+								const isPerformer = reg.registrationType === "performer";
+								const guests = parseGuests(reg.guests);
+								const guestCount = guests.length;
+								const isExpanded = expandedRow === reg.id;
+								const hasNotes = !!reg.extraQuestions?.trim();
+								const hasExtra = guestCount > 0 || hasNotes;
+								const giftFmt = formatCents(reg.giftAmount);
+
+								return (
+									<div key={reg.id}>
+										{hasExtra ? (
+											<button
+												type="button"
+												className={`w-full p-4 text-left transition-colors ${isExpanded ? "bg-white/5" : ""}`}
+												onClick={() => toggleRow(reg.id)}
+											>
+												<div className="flex items-start justify-between gap-3">
+													<div className="min-w-0 flex-1">
+														<div className="flex items-center gap-2">
+															{isExpanded ? (
+																<ChevronDown className="h-3.5 w-3.5 shrink-0 text-white/40" />
+															) : (
+																<ChevronRight className="h-3.5 w-3.5 shrink-0 text-white/25" />
+															)}
+															<span className="truncate font-medium text-white">
+																{reg.firstName} {reg.lastName}
+															</span>
+														</div>
+														<p className="mt-0.5 truncate font-mono text-white/50 text-xs">
+															{reg.email}
+														</p>
+														{reg.phone && (
+															<p className="font-mono text-white/35 text-xs">
+																{reg.phone}
+															</p>
+														)}
+													</div>
+													<div className="flex shrink-0 flex-col items-end gap-1.5">
+														<span
+															className={`rounded-full px-2 py-0.5 font-mono font-semibold text-[10px] uppercase ${isPerformer ? "bg-amber-400/12 text-amber-300" : "bg-teal-400/12 text-teal-300"}`}
+														>
+															{isPerformer ? "Artiest" : "Bezoeker"}
+														</span>
+														<PayBadge
+															status={reg.paymentStatus ?? null}
+															paymentAmount={reg.paymentAmount ?? null}
+															isPerformer={isPerformer}
+														/>
+														{reg.managementToken && (
+															<button
+																type="button"
+																onClick={(e) => {
+																	e.stopPropagation();
+																	handleCopyManageUrl(
+																		reg.managementToken as string,
+																		reg.id,
+																	);
+																}}
+																className="rounded p-1 text-white/30 hover:text-white"
+															>
+																{copiedId === reg.id ? (
+																	<ClipboardCheck className="h-4 w-4 text-green-400" />
+																) : (
+																	<Clipboard className="h-4 w-4" />
 																)}
-																{guestCount} gast{guestCount === 1 ? "" : "en"}
 															</button>
 														)}
-														{(reg.giftAmount ?? 0) > 0 && (
-															<div className="text-pink-300">
-																<span className="text-white/40">Gift:</span>{" "}
-																{formatCents(reg.giftAmount)}
-															</div>
-														)}
-														{!isPerformer && (
-															<div>
-																<span className="text-white/40">Betaling:</span>{" "}
-																{reg.paymentStatus === "paid" ? (
-																	<span className="inline-flex items-center gap-1 font-medium text-green-400">
-																		<Check className="h-3 w-3" />
-																		Betaald
-																	</span>
-																) : reg.paymentStatus ===
-																	"extra_payment_pending" ? (
-																	<span className="inline-flex items-center gap-1 font-medium text-orange-400">
-																		<span className="h-1 w-1 rounded-full bg-orange-400" />
-																		Extra (€
-																		{((reg.paymentAmount ?? 0) / 100).toFixed(
-																			0,
-																		)}
-																		)
-																	</span>
-																) : (
-																	<span className="text-yellow-400">Open</span>
-																)}
-															</div>
-														)}
-														<div className="text-white/50">{dateLabel}</div>
 													</div>
 												</div>
+												<div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 font-mono text-white/50 text-xs">
+													{isPerformer ? (
+														<span>{reg.artForm || "—"}</span>
+													) : (
+														<span>€{reg.drinkCardValue ?? 5} drinkkaart</span>
+													)}
+													{guestCount > 0 && (
+														<span className="text-teal-300">
+															{guestCount} gast{guestCount !== 1 ? "en" : ""}
+														</span>
+													)}
+													{giftFmt && (
+														<span className="text-pink-300/70">
+															gift {giftFmt}
+														</span>
+													)}
+													{hasNotes && (
+														<span className="text-white/35">
+															<MessageSquare className="mr-0.5 inline h-3 w-3" />
+															notitie
+														</span>
+													)}
+													<span className="text-white/30">
+														{(() => {
+															try {
+																return new Date(
+																	reg.createdAt,
+																).toLocaleDateString("nl-BE", {
+																	day: "2-digit",
+																	month: "2-digit",
+																	year: "2-digit",
+																});
+															} catch {
+																return "—";
+															}
+														})()}
+													</span>
+												</div>
+											</button>
+										) : (
+											<div className="p-4">
+												<div className="flex items-start justify-between gap-3">
+													<div className="min-w-0 flex-1">
+														<span className="truncate font-medium text-white">
+															{reg.firstName} {reg.lastName}
+														</span>
+														<p className="mt-0.5 truncate font-mono text-white/50 text-xs">
+															{reg.email}
+														</p>
+														{reg.phone && (
+															<p className="font-mono text-white/35 text-xs">
+																{reg.phone}
+															</p>
+														)}
+													</div>
+													<div className="flex shrink-0 flex-col items-end gap-1.5">
+														<span
+															className={`rounded-full px-2 py-0.5 font-mono font-semibold text-[10px] uppercase ${isPerformer ? "bg-amber-400/12 text-amber-300" : "bg-teal-400/12 text-teal-300"}`}
+														>
+															{isPerformer ? "Artiest" : "Bezoeker"}
+														</span>
+														<PayBadge
+															status={reg.paymentStatus ?? null}
+															paymentAmount={reg.paymentAmount ?? null}
+															isPerformer={isPerformer}
+														/>
+														{reg.managementToken && (
+															<button
+																type="button"
+																onClick={() =>
+																	handleCopyManageUrl(
+																		reg.managementToken as string,
+																		reg.id,
+																	)
+																}
+																className="rounded p-1 text-white/30 hover:text-white"
+															>
+																{copiedId === reg.id ? (
+																	<ClipboardCheck className="h-4 w-4 text-green-400" />
+																) : (
+																	<Clipboard className="h-4 w-4" />
+																)}
+															</button>
+														)}
+													</div>
+												</div>
+												<div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 font-mono text-white/50 text-xs">
+													{isPerformer ? (
+														<span>{reg.artForm || "—"}</span>
+													) : (
+														<span>€{reg.drinkCardValue ?? 5} drinkkaart</span>
+													)}
+													{giftFmt && (
+														<span className="text-pink-300/70">
+															gift {giftFmt}
+														</span>
+													)}
+													<span className="text-white/30">
+														{(() => {
+															try {
+																return new Date(
+																	reg.createdAt,
+																).toLocaleDateString("nl-BE", {
+																	day: "2-digit",
+																	month: "2-digit",
+																	year: "2-digit",
+																});
+															} catch {
+																return "—";
+															}
+														})()}
+													</span>
+												</div>
+											</div>
+										)}
 
-												{/* Expandable guest details — mobile */}
-												{isExpanded && guestCount > 0 && (
-													<div className="border-teal-400/10 border-t bg-teal-900/20 px-4 pt-3 pb-4">
-														<p className="mb-2 font-medium text-teal-300/70 text-xs uppercase tracking-wider">
+										{/* Mobile expanded */}
+										{isExpanded && (
+											<div className="space-y-4 border-white/5 border-t bg-white/4 px-4 pt-3 pb-4">
+												{guestCount > 0 && (
+													<div>
+														<p className="mb-2 font-mono text-[10px] text-teal-400/60 uppercase tracking-widest">
 															Gasten
 														</p>
 														<div className="space-y-2">
 															{guests.map((g, i) => (
 																<div
-																	// biome-ignore lint/suspicious/noArrayIndexKey: guest order is stable within a registration
+																	// biome-ignore lint/suspicious/noArrayIndexKey: stable order
 																	key={i}
-																	className="rounded bg-teal-400/5 px-3 py-2 text-sm"
+																	className="rounded-lg border border-teal-400/10 bg-teal-400/5 px-3 py-2 text-sm"
 																>
-																	<span className="mr-2 text-white/40 text-xs">
-																		{i + 1}.
-																	</span>
-																	<span className="font-medium text-white">
-																		{g.firstName} {g.lastName}
-																	</span>
+																	<p className="font-medium text-white">
+																		{i + 1}. {g.firstName} {g.lastName}
+																	</p>
 																	{g.email && (
-																		<div className="mt-0.5 text-white/60 text-xs">
+																		<p className="font-mono text-white/50 text-xs">
 																			{g.email}
-																		</div>
+																		</p>
 																	)}
 																	{g.phone && (
-																		<div className="text-white/50 text-xs">
+																		<p className="font-mono text-white/40 text-xs">
 																			{g.phone}
-																		</div>
+																		</p>
 																	)}
 																</div>
 															))}
 														</div>
 													</div>
 												)}
+												{hasNotes && (
+													<div>
+														<p className="mb-2 font-mono text-[10px] text-white/40 uppercase tracking-widest">
+															Vragen / opmerkingen
+														</p>
+														<p className="rounded-lg border border-white/8 bg-white/5 px-4 py-3 text-sm text-white/80 leading-relaxed">
+															{reg.extraQuestions}
+														</p>
+													</div>
+												)}
+												{isPerformer && (reg.experience || reg.artForm) && (
+													<div>
+														<p className="mb-2 font-mono text-[10px] text-amber-400/60 uppercase tracking-widest">
+															Optreden details
+														</p>
+														<div className="rounded-lg border border-amber-400/10 bg-amber-400/5 px-3 py-2 text-sm text-white/80">
+															{reg.artForm && (
+																<p>
+																	<span className="text-amber-300/60">
+																		Kunstvorm:{" "}
+																	</span>
+																	{reg.artForm}
+																</p>
+															)}
+															{reg.experience && (
+																<p>
+																	<span className="text-amber-300/60">
+																		Ervaring:{" "}
+																	</span>
+																	{reg.experience}
+																</p>
+															)}
+															<p>
+																<span className="text-amber-300/60">16+: </span>
+																{reg.isOver16 ? "ja" : "nee"}
+															</p>
+														</div>
+													</div>
+												)}
 											</div>
-										);
-									})}
-								</div>
-							)}
-						</div>
-					</CardContent>
-				</Card>
-
-				{/* Pagination */}
+										)}
+									</div>
+								);
+							})
+						)}
+					</div>
+				</div>
 				{pagination && pagination.totalPages > 1 && (
-					<div className="mt-4 flex items-center justify-center gap-2 sm:mt-6">
-						<Button
+					<div className="flex items-center justify-center gap-3">
+						<button
+							type="button"
 							onClick={() => setPage((p) => Math.max(1, p - 1))}
 							disabled={page === 1}
-							variant="outline"
-							size="sm"
-							className="border-white/20 bg-transparent px-2 text-sm text-white hover:bg-white/10 disabled:opacity-50 sm:px-4"
+							className="rounded-lg border border-white/15 bg-white/5 px-4 py-1.5 font-mono text-white/60 text-xs transition hover:border-white/30 hover:text-white disabled:opacity-30"
 						>
-							<span className="hidden sm:inline">Vorige</span>
-							<span className="sm:hidden">←</span>
-						</Button>
-						<span className="mx-2 text-sm text-white sm:mx-4">
-							<span className="sm:hidden">
-								{page}/{pagination.totalPages}
-							</span>
-							<span className="hidden sm:inline">
-								Pagina {page} van {pagination.totalPages}
-							</span>
+							← vorige
+						</button>
+						<span className="font-mono text-white/40 text-xs">
+							{page} / {pagination.totalPages}
 						</span>
-						<Button
+						<button
+							type="button"
 							onClick={() =>
-								setPage((p) => Math.min(pagination.totalPages, p + 1))
+								setPage((p) => Math.min(pagination!.totalPages, p + 1))
 							}
 							disabled={page === pagination.totalPages}
-							variant="outline"
-							size="sm"
-							className="border-white/20 bg-transparent px-2 text-sm text-white hover:bg-white/10 disabled:opacity-50 sm:px-4"
+							className="rounded-lg border border-white/15 bg-white/5 px-4 py-1.5 font-mono text-white/60 text-xs transition hover:border-white/30 hover:text-white disabled:opacity-30"
 						>
-							<span className="hidden sm:inline">Volgende</span>
-							<span className="sm:hidden">→</span>
-						</Button>
+							volgende →
+						</button>
 					</div>
 				)}
 			</main>