@coursebuilder/analytics 1.1.0

package/src/components/omnibus-dashboard.tsx

@@ -0,0 +1,1460 @@
+'use client'
+
+import React, { useState, useTransition } from 'react'
+import {
+	CheckIcon,
+	ChevronDownIcon,
+	ClipboardIcon,
+	ClipboardListIcon,
+	ClockIcon,
+	DollarSignIcon,
+	ExternalLinkIcon,
+	FilmIcon,
+	GlobeIcon,
+	LinkIcon,
+	Loader2Icon,
+	MousePointerClickIcon,
+	PlayIcon,
+	ShoppingCartIcon,
+	TrendingUpIcon,
+} from 'lucide-react'
+import { parseAsStringLiteral, useQueryState } from 'nuqs'
+
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from '@coursebuilder/ui'
+
+import type { AnalyticsRange } from '../types'
+import { CountryChart } from './country-chart'
+import { RevenueChart } from './revenue-chart'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/**
+ * Data structure for the Mux video dashboard, inlined here so the shared
+ * component does not depend on the app-level mux-data module.
+ */
+export interface VideoDashboardData {
+	overview: {
+		totalViews: number
+		uniqueViewers: number
+		totalWatchTimeMs: number
+		totalPlayingTimeMs: number
+		viewerExperienceScore: number
+		globalExperienceScore: number | null
+	}
+	watchTimeSeries: {
+		date: string
+		watchTimeMs: number
+	}[]
+	topVideos: {
+		title: string
+		views: number
+		watchTimeMs: number
+		playingTimeMs: number
+	}[]
+	countries: {
+		country: string
+		views: number
+		watchTimeMs: number
+	}[]
+}
+
+export interface DashboardData {
+	summary: {
+		totalRevenue: number
+		purchaseCount: number
+		avgOrderValue: number
+	}
+	daily: { date: string; revenue: number; count: number }[]
+	previousDaily: { date: string; revenue: number; count: number }[]
+	byProduct: {
+		productId: string
+		productName: string
+		revenue: number
+		count: number
+	}[]
+	byCountry: { country: string; revenue: number; count: number }[]
+	recentPurchases: {
+		id: string
+		createdAt: Date
+		totalAmount: number
+		productName: string
+		productId: string
+		country: string | null
+		couponId: string | null
+		userName: string | null
+		userEmail: string | null
+		isTeam: boolean
+		seats: number | null
+	}[]
+	attribution: { type: string; count: number }[]
+	shortlinks: {
+		shortlinkId: string
+		slug: string
+		url: string
+		clicks: number
+		signups: number
+		purchases: number
+	}[]
+	traffic: {
+		sessions: number
+		totalUsers: number
+		newUsers: number
+		pageviews: number
+	} | null
+	attributionCoverage: {
+		totalRevenue: number
+		attributedRevenue: number
+		unattributedRevenue: number
+		attributionRate: number
+		totalPurchases: number
+	} | null
+	mux: VideoDashboardData | null
+	muxThumbnails: Record<string, string>
+	surveySegments:
+		| {
+				questionId: string
+				question: string
+				type: string | null
+				responses: number
+				answerDistribution: { answer: string; count: number }[]
+		  }[]
+		| null
+	surveyCorrelation: {
+		totalRespondents: number
+		respondentsWhoPurchased: number
+		overallConversionRate: number
+		totalRevenueFromRespondents: number
+		prePurchaseRespondents: number
+		postPurchaseRespondents: number
+		neverPurchasedRespondents: number
+		baselineConversionRate: number
+		byQuestion: {
+			questionId: string
+			questionTitle: string | null
+			answer: string
+			respondents: number
+			purchasers: number
+			conversionRate: number
+			revenue: number
+			prePurchaseCount: number
+			postPurchaseCount: number
+		}[]
+	} | null
+}
+
+// ─── Formatters ──────────────────────────────────────────────────────────────
+
+function fmt$(v: number): string {
+	return new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD',
+		minimumFractionDigits: 0,
+		maximumFractionDigits: 0,
+	}).format(v)
+}
+
+function fmtK(v: number): string {
+	if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`
+	if (v >= 1_000) return `${(v / 1_000).toFixed(1)}K`
+	return v.toLocaleString()
+}
+
+function fmtWatchMs(ms: number): string {
+	const hours = ms / 1000 / 60 / 60
+	if (hours >= 1000) return `${(hours / 1000).toFixed(1)}k hrs`
+	if (hours >= 1) return `${hours.toFixed(0)} hrs`
+	return `${(ms / 1000 / 60).toFixed(0)} min`
+}
+
+function fmtAgo(date: Date): string {
+	const ms = Date.now() - new Date(date).getTime()
+	const h = Math.floor(ms / 3_600_000)
+	if (h < 1) return 'just now'
+	if (h < 24) return `${h}h ago`
+	const d = Math.floor(h / 24)
+	return d === 1 ? 'yesterday' : `${d}d ago`
+}
+
+function countryFlag(code: string | null): string {
+	if (!code || code.length !== 2) return '🌍'
+	const offset = 0x1f1e6
+	const a = code.toUpperCase().charCodeAt(0) - 65 + offset
+	const b = code.toUpperCase().charCodeAt(1) - 65 + offset
+	return String.fromCodePoint(a, b)
+}
+
+// ─── Stat Card ───────────────────────────────────────────────────────────────
+
+function Stat({
+	label,
+	value,
+	sub,
+	icon: Icon,
+	accent,
+}: {
+	label: string
+	value: string
+	sub?: string
+	icon: React.ComponentType<{ className?: string }>
+	accent?: boolean
+	index?: number
+}) {
+	return (
+		<div
+			className={`rounded-xl border p-4 transition-[transform,box-shadow] duration-[160ms] ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.97] motion-safe:hover:-translate-y-0.5 motion-safe:hover:shadow-md [@media(hover:hover)]:cursor-default ${accent ? 'border-emerald-500/20 bg-emerald-500/[0.03]' : 'border-border/50 bg-card/50'}`}
+		>
+			<div className="flex items-center justify-between">
+				<span className="text-muted-foreground text-[11px] font-medium uppercase tracking-wider">
+					{label}
+				</span>
+				<Icon className="text-muted-foreground/40 group-hover:text-muted-foreground/70 h-3.5 w-3.5 transition-colors duration-200" />
+			</div>
+			<div className="mt-1.5">
+				<span className="text-foreground text-xl font-bold tabular-nums tracking-tight">
+					{value}
+				</span>
+			</div>
+			{sub && (
+				<p className="text-muted-foreground mt-0.5 text-[11px] leading-relaxed">
+					{sub}
+				</p>
+			)}
+		</div>
+	)
+}
+
+// ─── Agent API Card ───────────────────────────────────────────────────────────
+
+function AgentApiCard({ appName = 'aihero' }: { appName?: string }) {
+	const [state, setState] = useState<'idle' | 'generating' | 'copied'>('idle')
+	const baseUrl =
+		typeof window !== 'undefined'
+			? window.location.origin
+			: 'https://www.aihero.dev'
+	const endpoint = `${baseUrl}/api/analytics`
+
+	const handleCopy = async () => {
+		setState('generating')
+		try {
+			// Fetch token and catalog in parallel so prompt matches available surfaces
+			const [tokenRes, catalogRes] = await Promise.all([
+				fetch('/api/analytics/token', { method: 'POST' }),
+				fetch('/api/analytics')
+					.then((r) => r.json())
+					.catch(() => null),
+			])
+			if (!tokenRes.ok) throw new Error('Failed to generate token')
+			const { token, ttlLabel, expiresAt } = await tokenRes.json()
+
+			// Build surface examples from live catalog
+			const surfaces: {
+				name: string
+				description: string
+				category: string
+			}[] = catalogRes?.surfaces ?? []
+			const categories = new Map<string, number>()
+			for (const s of surfaces) {
+				categories.set(s.category, (categories.get(s.category) ?? 0) + 1)
+			}
+			const categoryLine = [...categories.entries()]
+				.map(([cat, count]) => `${cat} (${count})`)
+				.join(', ')
+
+			// Pick one representative surface per category for the examples
+			const picks: { name: string; description: string }[] = [
+				{ name: '', description: 'surface catalog' },
+			]
+			const seen = new Set<string>()
+			const preferred = [
+				'summary',
+				'attribution/coverage',
+				'traffic',
+				'youtube/videos',
+				'surveys',
+				'correlation/traffic-revenue',
+				'correlation/youtube-revenue',
+				'attribution/email-campaigns',
+			]
+			for (const name of preferred) {
+				const s = surfaces.find((x: any) => x.name === name)
+				if (s && !seen.has(s.category)) {
+					seen.add(s.category)
+					picks.push({ name: s.name, description: s.description })
+				}
+			}
+			// Fill any remaining categories
+			for (const s of surfaces) {
+				if (!seen.has(s.category)) {
+					seen.add(s.category)
+					picks.push({ name: s.name, description: s.description })
+				}
+			}
+
+			const exampleLines = picks
+				.map((p) =>
+					p.name
+						? `GET ${endpoint}?surface=${p.name}&range=30d  → ${p.description}`
+						: `GET ${endpoint}  → ${p.description}`,
+				)
+				.join('\n')
+
+			const hasYouTube = surfaces.some((s: any) => s.category === 'youtube')
+			const ytNote = hasYouTube
+				? `\nImportant:
+- YouTube surfaces are useful for correlation and content analysis, not live dashboard ops
+- YouTube Analytics data lags by about 48 hours, so call out the delay when interpreting fresh periods\n`
+				: ''
+
+			const prompt = `# ${appName} Analytics API
+Base: ${endpoint}
+Auth: Bearer ${token}
+Token expires: ${new Date(expiresAt).toLocaleString()} (${ttlLabel})
+
+${exampleLines}
+${ytNote}
+Example:
+curl -H "Authorization: Bearer ${token}" "${endpoint}?surface=summary&range=30d"
+
+Categories: ${categoryLine}
+Every response has contextual next_actions. Errors have codes + fix hints.`
+
+			await navigator.clipboard.writeText(prompt)
+			setState('copied')
+			setTimeout(() => setState('idle'), 3000)
+		} catch {
+			setState('idle')
+		}
+	}
+
+	return (
+		<div className="border-border/30 flex flex-wrap items-center justify-between gap-2 rounded-lg border px-3 py-2 sm:px-4 sm:py-2.5">
+			<div className="flex min-w-0 items-center gap-2 text-xs">
+				<span className="text-muted-foreground/60 shrink-0">⚡</span>
+				<a
+					href="/api/analytics"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="text-muted-foreground hover:text-foreground shrink-0 font-medium underline-offset-2 transition-colors hover:underline"
+				>
+					/api/analytics
+				</a>
+				<span className="text-muted-foreground/40 hidden sm:inline">·</span>
+				<span className="text-muted-foreground/60 hidden sm:inline">
+					HATEOAS catalog
+				</span>
+			</div>
+			<button
+				onClick={handleCopy}
+				disabled={state === 'generating'}
+				className={`flex shrink-0 items-center gap-1.5 rounded-md px-3 py-1.5 text-[11px] font-semibold transition-[transform,background-color,color,box-shadow] duration-[160ms] ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.97] disabled:pointer-events-none ${
+					state === 'copied'
+						? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+						: state === 'generating'
+							? 'bg-muted text-muted-foreground'
+							: 'bg-primary/10 text-primary hover:bg-primary/20 shadow-sm'
+				}`}
+			>
+				{state === 'generating' ? (
+					<>
+						<Loader2Icon className="h-3 w-3 animate-spin" />
+						Generating token…
+					</>
+				) : state === 'copied' ? (
+					<>
+						<CheckIcon className="h-3 w-3" />
+						Copied with token
+					</>
+				) : (
+					<>
+						<ClipboardIcon className="h-3 w-3" />
+						Copy agent prompt
+					</>
+				)}
+			</button>
+		</div>
+	)
+}
+
+// ─── Video Performance Cards ──────────────────────────────────────────────────
+
+interface VideoItem {
+	title: string
+	thumbnailUrl: string | null
+	watchTime: string
+	views: number
+	href: string | null
+	badge?: string
+}
+
+function TopVideosCard({
+	label,
+	subtitle,
+	icon: Icon,
+	iconColor,
+	videos,
+}: {
+	label: string
+	subtitle: string
+	icon: React.ComponentType<{ className?: string }>
+	iconColor: string
+	videos: VideoItem[]
+}) {
+	if (videos.length === 0) return null
+
+	return (
+		<Card className="flex-1">
+			<CardHeader className="pb-3">
+				<div className="flex items-center gap-2.5">
+					<div
+						className={`flex h-7 w-7 items-center justify-center rounded-lg ${iconColor}`}
+					>
+						<Icon className="h-3.5 w-3.5" />
+					</div>
+					<div>
+						<CardTitle className="text-sm font-semibold">{label}</CardTitle>
+						<CardDescription className="text-[11px]">
+							{subtitle}
+						</CardDescription>
+					</div>
+				</div>
+			</CardHeader>
+			<CardContent className="space-y-0 pt-0">
+				{videos.map((v, i) => {
+					const Row = v.href ? 'a' : 'div'
+					const linkProps = v.href
+						? {
+								href: v.href,
+								target: '_blank' as const,
+								rel: 'noopener noreferrer',
+							}
+						: {}
+					return (
+						<Row
+							key={v.title}
+							{...linkProps}
+							className="hover:bg-muted/40 group -mx-2 flex items-center gap-3 rounded-lg px-2 py-2.5 transition-[background-color] duration-[150ms] ease-[cubic-bezier(0.23,1,0.32,1)]"
+						>
+							<span className="text-muted-foreground/50 w-4 text-right text-xs font-medium tabular-nums">
+								{i + 1}
+							</span>
+							{v.thumbnailUrl ? (
+								<img
+									src={v.thumbnailUrl}
+									alt=""
+									width={72}
+									height={40}
+									loading="lazy"
+									className="hidden h-10 w-[72px] shrink-0 rounded object-cover sm:block"
+								/>
+							) : (
+								<div className="bg-muted hidden h-10 w-[72px] shrink-0 items-center justify-center rounded sm:flex">
+									<PlayIcon
+										className="text-muted-foreground/40 h-4 w-4"
+										aria-hidden="true"
+									/>
+								</div>
+							)}
+							<div className="min-w-0 flex-1">
+								<p className="text-foreground/90 group-hover:text-foreground line-clamp-2 text-[13px] font-medium leading-snug transition-colors">
+									{v.title}
+								</p>
+								<div className="text-muted-foreground mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-[11px]">
+									<span className="flex items-center gap-1">
+										<ClockIcon className="h-3 w-3" aria-hidden="true" />
+										{v.watchTime}
+									</span>
+									<span>{fmtK(v.views)} views</span>
+									{v.badge && (
+										<span className="text-emerald-600 dark:text-emerald-400">
+											{v.badge}
+										</span>
+									)}
+								</div>
+							</div>
+							{v.href && (
+								<ExternalLinkIcon
+									className="text-muted-foreground/0 group-hover:text-muted-foreground/60 h-3.5 w-3.5 shrink-0 transition-colors"
+									aria-hidden="true"
+								/>
+							)}
+						</Row>
+					)
+				})}
+			</CardContent>
+		</Card>
+	)
+}
+
+// ─── Shortlinks Card ──────────────────────────────────────────────────────────
+
+function ShortlinksCard({
+	shortlinks,
+	totalClicks,
+}: {
+	shortlinks: DashboardData['shortlinks']
+	totalClicks: number
+}) {
+	const [expanded, setExpanded] = useState(false)
+	if (shortlinks.length === 0) return null
+
+	const visible = expanded ? shortlinks : shortlinks.slice(0, 10)
+	const hasMore = shortlinks.length > 10
+	const totalSignups = shortlinks.reduce((s, l) => s + l.signups, 0)
+	const totalPurchases = shortlinks.reduce((s, l) => s + l.purchases, 0)
+
+	return (
+		<Card>
+			<CardHeader>
+				<div className="flex items-center gap-2.5">
+					<LinkIcon className="text-muted-foreground h-4 w-4" />
+					<div>
+						<CardTitle className="text-sm font-semibold">
+							Top Shortlinks
+						</CardTitle>
+						<CardDescription className="text-[11px]">
+							{fmtK(totalClicks)} clicks · {totalSignups.toLocaleString()}{' '}
+							signups · {totalPurchases.toLocaleString()} purchases
+						</CardDescription>
+					</div>
+				</div>
+			</CardHeader>
+			<CardContent>
+				<div className="overflow-x-auto">
+					<table className="w-full">
+						<thead>
+							<tr className="text-muted-foreground border-border/50 border-b text-left text-[11px] uppercase tracking-wider">
+								<th className="pb-2.5 pr-4 font-medium">Link</th>
+								<th className="pb-2.5 pr-4 font-medium">Destination</th>
+								<th className="pb-2.5 text-right font-medium">Clicks</th>
+								<th className="hidden pb-2.5 text-right font-medium sm:table-cell">
+									Signups
+								</th>
+								<th className="hidden pb-2.5 text-right font-medium sm:table-cell">
+									Purchases
+								</th>
+							</tr>
+						</thead>
+						<tbody className="divide-border/30 divide-y">
+							{visible.map((link) => (
+								<tr key={link.shortlinkId} className="group">
+									<td className="py-2.5 pr-4 text-sm font-medium">
+										/s/{link.slug}
+									</td>
+									<td className="text-muted-foreground max-w-xs truncate py-2.5 pr-4 text-sm">
+										<a
+											href={link.url}
+											target="_blank"
+											rel="noopener noreferrer"
+											className="hover:text-foreground inline-flex items-center gap-1 transition-colors"
+										>
+											{link.url
+												.replace(/^https?:\/\/(www\.)?/, '')
+												.substring(0, 50)}
+											<ExternalLinkIcon
+												className="h-3 w-3 opacity-0 transition-opacity group-hover:opacity-100"
+												aria-hidden="true"
+											/>
+										</a>
+									</td>
+									<td className="text-foreground py-2.5 text-right text-sm font-semibold tabular-nums">
+										{link.clicks.toLocaleString()}
+									</td>
+									<td className="hidden py-2.5 text-right text-sm tabular-nums sm:table-cell">
+										{link.signups > 0 ? link.signups.toLocaleString() : '–'}
+									</td>
+									<td
+										className={`hidden py-2.5 text-right text-sm font-semibold tabular-nums sm:table-cell ${link.purchases > 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`}
+									>
+										{link.purchases > 0 ? link.purchases.toLocaleString() : '–'}
+									</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+				{hasMore && (
+					<button
+						onClick={() => setExpanded(!expanded)}
+						className="text-muted-foreground hover:text-foreground mt-3 flex w-full items-center justify-center gap-1 text-xs transition-[color,transform] duration-[160ms] ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.97]"
+					>
+						<ChevronDownIcon
+							className={`h-3 w-3 transition-transform duration-[200ms] ease-[cubic-bezier(0.23,1,0.32,1)] ${expanded ? 'rotate-180' : ''}`}
+						/>
+						{expanded ? 'Show less' : `Show ${shortlinks.length - 10} more`}
+					</button>
+				)}
+			</CardContent>
+		</Card>
+	)
+}
+
+// ─── Range Selector ───────────────────────────────────────────────────────────
+
+const RANGES: { value: AnalyticsRange; label: string }[] = [
+	{ value: '24h', label: '24h' },
+	{ value: '7d', label: '7d' },
+	{ value: '30d', label: '30d' },
+	{ value: '90d', label: '90d' },
+	{ value: 'all', label: 'All' },
+]
+
+const rangeParser = parseAsStringLiteral([
+	'24h',
+	'7d',
+	'30d',
+	'90d',
+	'all',
+] as const).withDefault('30d')
+
+// ─── Dashboard ────────────────────────────────────────────────────────────────
+
+export function OmnibusDashboard({
+	data,
+	initialRange,
+	appName,
+	surveyDrilldownHref,
+}: {
+	data: DashboardData
+	initialRange: AnalyticsRange
+	appName?: string
+	/** Link to the analytics survey list page (e.g. /admin/analytics/surveys).
+	 * When set, the Survey Segments header becomes a clickable link. */
+	surveyDrilldownHref?: string
+}) {
+	const [range, setRange] = useQueryState('range', rangeParser)
+	const [isPending, startTransition] = useTransition()
+
+	const rangeLabel =
+		range === '24h'
+			? '24 hours'
+			: range === '7d'
+				? '7 days'
+				: range === '90d'
+					? '90 days'
+					: range === 'all'
+						? 'all time'
+						: '30 days'
+
+	const signupCount =
+		data.attribution.find((a) => a.type === 'signup')?.count ?? 0
+	const purchaseAttrCount =
+		data.attribution.find((a) => a.type === 'purchase')?.count ?? 0
+	const totalClicks = data.shortlinks.reduce((s, l) => s + l.clicks, 0)
+
+	// ── Presence flags ──────────────────────────────────────────────────────
+	const hasRevenue =
+		data.summary.totalRevenue > 0 || data.summary.purchaseCount > 0
+	const hasRevenueChart = data.daily.some((d) => d.revenue > 0)
+	const hasByProduct = data.byProduct.length > 0
+	const hasByCountry = data.byCountry.length > 0
+	const hasRecentPurchases = data.recentPurchases.length > 0
+	const hasAttribution = data.attribution.length > 0
+	const hasAttributionCoverage = data.attributionCoverage != null
+	const hasMux = data.mux != null
+	const hasTraffic = data.traffic != null
+	const hasSurveys =
+		data.surveySegments != null && data.surveySegments.length > 0
+	const hasSurveyCorrelation = data.surveyCorrelation != null
+	const hasShortlinks = data.shortlinks.length > 0
+
+	return (
+		<div className="flex flex-col gap-5 lg:gap-7">
+			{/* ── Header ──────────────────────────────────────────────────── */}
+			<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+				<div className="min-w-0">
+					<h1 className="text-pretty text-xl font-bold tracking-tight sm:text-2xl">
+						Analytics
+					</h1>
+					<p className="text-muted-foreground truncate text-[13px]">
+						Revenue · Attribution · Video · Traffic · Surveys — {rangeLabel}
+					</p>
+				</div>
+				<div className="flex shrink-0 items-center gap-2">
+					{isPending && (
+						<span className="text-muted-foreground animate-pulse text-xs">
+							Loading…
+						</span>
+					)}
+					<div className="border-border/40 bg-muted/20 inline-flex items-center gap-0.5 overflow-x-auto rounded-lg border p-0.5">
+						{RANGES.map(({ value, label }) => (
+							<button
+								key={value}
+								onClick={() =>
+									startTransition(() => {
+										setRange(value)
+									})
+								}
+								disabled={isPending}
+								className={`shrink-0 rounded-md px-2.5 py-1 text-[11px] font-medium transition-[background-color,color,transform] duration-[150ms] ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.95] ${
+									range === value
+										? 'bg-foreground text-background shadow-sm'
+										: 'text-muted-foreground hover:text-foreground'
+								} ${isPending ? 'cursor-wait opacity-60' : ''}`}
+							>
+								{label}
+							</button>
+						))}
+					</div>
+				</div>
+			</div>
+
+			<div
+				className={`flex flex-col gap-5 transition-opacity duration-200 lg:gap-7 ${isPending ? 'pointer-events-none opacity-50' : ''}`}
+			>
+				{/* ── Agent API ────────────────────────────────────────────── */}
+				<AgentApiCard appName={appName} />
+
+				{/* ── Stat Grid ────────────────────────────────────────────── */}
+				<div className="grid grid-cols-2 gap-2.5 lg:grid-cols-3 xl:grid-cols-5">
+					{hasRevenue && (
+						<Stat
+							label="Revenue"
+							value={fmt$(data.summary.totalRevenue)}
+							sub={`${data.summary.purchaseCount} purchases · ${fmt$(data.summary.avgOrderValue)} avg`}
+							icon={DollarSignIcon}
+							accent
+						/>
+					)}
+					{hasMux && (
+						<Stat
+							label="Site Watch Time"
+							value={fmtWatchMs(data.mux!.overview.totalPlayingTimeMs)}
+							sub={`${fmtK(data.mux!.overview.totalViews)} views · ${fmtK(data.mux!.overview.uniqueViewers)} viewers`}
+							icon={FilmIcon}
+						/>
+					)}
+					{hasTraffic && (
+						<Stat
+							label="Sessions"
+							value={fmtK(data.traffic!.sessions)}
+							sub={`${fmtK(data.traffic!.totalUsers)} users · ${fmtK(data.traffic!.pageviews)} pages`}
+							icon={GlobeIcon}
+						/>
+					)}
+					{purchaseAttrCount > 0 && (
+						<Stat
+							label="Conversions"
+							value={`${purchaseAttrCount.toLocaleString()}`}
+							sub={`${signupCount} signups · ${totalClicks > 0 ? ((purchaseAttrCount / signupCount) * 100).toFixed(1) : 0}% signup→purchase`}
+							icon={TrendingUpIcon}
+						/>
+					)}
+					{hasShortlinks && (
+						<Stat
+							label="Link Clicks"
+							value={fmtK(totalClicks)}
+							sub={`${data.shortlinks.length} active · ${signupCount} signups`}
+							icon={MousePointerClickIcon}
+						/>
+					)}
+					{hasSurveys && (
+						<Stat
+							label="Surveys"
+							value={`${data.surveySegments!.length}`}
+							sub={`${data.surveySegments!.reduce((s, q) => s + q.responses, 0).toLocaleString()} responses`}
+							icon={ClipboardListIcon}
+						/>
+					)}
+				</div>
+
+				{/* ── Video Performance ────────────────────────────────────── */}
+				{hasMux && data.mux!.topVideos.length > 0 && (
+					<TopVideosCard
+						label="Site Videos"
+						subtitle={`${fmtWatchMs(data.mux!.overview.totalPlayingTimeMs)} watch time · ${fmtK(data.mux!.overview.uniqueViewers)} viewers`}
+						icon={FilmIcon}
+						iconColor="bg-violet-500/10 text-violet-500"
+						videos={data.mux!.topVideos.slice(0, 5).map((v) => ({
+							title: v.title,
+							thumbnailUrl: data.muxThumbnails[v.title] ?? null,
+							watchTime: fmtWatchMs(v.playingTimeMs),
+							views: v.views,
+							href: null,
+						}))}
+					/>
+				)}
+
+				{/* ── Attribution Summary ──────────────────────────────────── */}
+				{purchaseAttrCount > 0 && (
+					<Card>
+						<CardHeader className="pb-3">
+							<div className="flex items-center gap-2.5">
+								<LinkIcon className="text-muted-foreground h-4 w-4" />
+								<div>
+									<CardTitle className="text-sm font-semibold">
+										Attribution Trail
+									</CardTitle>
+									<CardDescription className="text-[11px]">
+										Shortlink conversions · first-touch UTMs accumulating
+									</CardDescription>
+								</div>
+							</div>
+						</CardHeader>
+						<CardContent>
+							<div className="grid gap-3 sm:grid-cols-3">
+								<div className="bg-muted/20 rounded-lg p-3.5">
+									<span className="text-muted-foreground block text-[11px] font-medium uppercase tracking-wider">
+										Click → Signup
+									</span>
+									<span className="text-foreground mt-1 block text-xl font-bold tabular-nums">
+										{signupCount.toLocaleString()}
+									</span>
+								</div>
+								<div className="bg-muted/20 rounded-lg p-3.5">
+									<span className="text-muted-foreground block text-[11px] font-medium uppercase tracking-wider">
+										Click → Purchase
+									</span>
+									<span className="text-foreground mt-1 block text-xl font-bold tabular-nums">
+										{purchaseAttrCount.toLocaleString()}
+									</span>
+								</div>
+								<div className="bg-muted/20 rounded-lg p-3.5">
+									<span className="text-muted-foreground block text-[11px] font-medium uppercase tracking-wider">
+										Conversion Rate
+									</span>
+									<span className="text-foreground mt-1 block text-xl font-bold tabular-nums">
+										{signupCount > 0
+											? `${((purchaseAttrCount / signupCount) * 100).toFixed(1)}%`
+											: '—'}
+									</span>
+								</div>
+							</div>
+						</CardContent>
+					</Card>
+				)}
+
+				{/* ── Attribution Coverage ─────────────────────────────────── */}
+				{hasAttributionCoverage &&
+					data.attributionCoverage!.totalPurchases > 0 && (
+						<Card>
+							<CardHeader className="pb-3">
+								<div className="flex items-center gap-2.5">
+									<TrendingUpIcon className="text-muted-foreground h-4 w-4" />
+									<div>
+										<CardTitle className="text-sm font-semibold">
+											Attribution Coverage
+										</CardTitle>
+										<CardDescription className="text-[11px]">
+											Attributed vs dark revenue
+										</CardDescription>
+									</div>
+								</div>
+							</CardHeader>
+							<CardContent>
+								<div className="grid gap-3 sm:grid-cols-3">
+									<div className="bg-muted/20 rounded-lg p-3.5">
+										<span className="text-muted-foreground block text-[11px] font-medium uppercase tracking-wider">
+											Attributed
+										</span>
+										<span className="text-foreground mt-1 block text-xl font-bold tabular-nums">
+											{fmt$(data.attributionCoverage!.attributedRevenue)}
+										</span>
+										<span className="text-muted-foreground text-[11px]">
+											{(
+												data.attributionCoverage!.attributionRate * 100
+											).toFixed(1)}
+											% of total
+										</span>
+									</div>
+									<div className="bg-muted/20 rounded-lg p-3.5">
+										<span className="text-muted-foreground block text-[11px] font-medium uppercase tracking-wider">
+											Dark / Unknown
+										</span>
+										<span className="text-foreground mt-1 block text-xl font-bold tabular-nums">
+											{fmt$(data.attributionCoverage!.unattributedRevenue)}
+										</span>
+									</div>
+									<div className="bg-muted/20 rounded-lg p-3.5">
+										<span className="text-muted-foreground block text-[11px] font-medium uppercase tracking-wider">
+											Total Purchases
+										</span>
+										<span className="text-foreground mt-1 block text-xl font-bold tabular-nums">
+											{data.attributionCoverage!.totalPurchases.toLocaleString()}
+										</span>
+									</div>
+								</div>
+							</CardContent>
+						</Card>
+					)}
+
+				{/* ── Survey Segments ──────────────────────────────────────── */}
+				{hasSurveys && (
+					<Card>
+						<CardHeader className="pb-3">
+							<div className="flex items-center justify-between">
+								<div className="flex items-center gap-2.5">
+									<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-indigo-500/10 text-indigo-500">
+										<ClipboardListIcon className="h-3.5 w-3.5" />
+									</div>
+									<div>
+										<CardTitle className="text-sm font-semibold">
+											Survey Segments
+										</CardTitle>
+										<CardDescription className="text-[11px]">
+											How users self-categorize across survey questions
+										</CardDescription>
+									</div>
+								</div>
+								{surveyDrilldownHref && (
+									<a
+										href={surveyDrilldownHref}
+										className="text-muted-foreground hover:text-foreground text-[11px] font-medium transition-colors"
+									>
+										View all surveys →
+									</a>
+								)}
+							</div>
+						</CardHeader>
+						<CardContent className="space-y-6">
+							{data.surveySegments!.slice(0, 8).map((q) => {
+								const totalForQuestion = q.answerDistribution.reduce(
+									(s, a) => s + a.count,
+									0,
+								)
+								return (
+									<div key={q.questionId}>
+										<div className="mb-2.5 flex items-start justify-between gap-2">
+											<p className="text-foreground text-[13px] font-medium leading-snug">
+												{q.question}
+											</p>
+											<span className="text-muted-foreground shrink-0 text-[11px] tabular-nums">
+												{totalForQuestion.toLocaleString()} responses
+											</span>
+										</div>
+										<div className="space-y-1.5">
+											{q.answerDistribution.slice(0, 6).map((a) => {
+												const pct =
+													totalForQuestion > 0
+														? (a.count / totalForQuestion) * 100
+														: 0
+												return (
+													<div
+														key={a.answer}
+														className="group flex items-center gap-2.5"
+													>
+														<span
+															className="text-muted-foreground w-[120px] shrink-0 truncate text-right text-[12px]"
+															title={a.answer}
+														>
+															{a.answer}
+														</span>
+														<div className="bg-muted/50 relative h-5 flex-1 overflow-hidden rounded">
+															<div
+																className="absolute inset-y-0 left-0 rounded bg-indigo-500/20 transition-all duration-300"
+																style={{ width: `${Math.max(pct, 1)}%` }}
+															/>
+															<div className="relative flex h-full items-center px-2">
+																<span className="text-foreground/70 text-[11px] font-medium tabular-nums">
+																	{pct.toFixed(0)}%
+																</span>
+															</div>
+														</div>
+														<span className="text-muted-foreground w-10 shrink-0 text-right text-[11px] tabular-nums">
+															{a.count.toLocaleString()}
+														</span>
+													</div>
+												)
+											})}
+											{q.answerDistribution.length > 6 && (
+												<p className="text-muted-foreground/60 pl-[132px] text-[11px]">
+													+{q.answerDistribution.length - 6} more answers
+												</p>
+											)}
+										</div>
+									</div>
+								)
+							})}
+						</CardContent>
+					</Card>
+				)}
+
+				{/* ── Survey → Purchase Correlation ────────────────────────── */}
+				{hasSurveyCorrelation && (
+					<Card>
+						<CardHeader className="pb-3">
+							<div className="flex items-center gap-2.5">
+								<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-500">
+									<TrendingUpIcon className="h-3.5 w-3.5" />
+								</div>
+								<div>
+									<CardTitle className="text-sm font-semibold">
+										Survey → Purchase Correlation
+									</CardTitle>
+									<CardDescription className="text-[11px]">
+										Which survey answers predict purchases? We match survey
+										respondents against the purchases table to find conversion
+										rates per answer.
+									</CardDescription>
+								</div>
+							</div>
+						</CardHeader>
+						<CardContent className="space-y-5">
+							{/* How it works */}
+							<p className="text-muted-foreground text-[12px] leading-relaxed">
+								We look at every user who answered a survey and check if they
+								ever made a purchase.
+								<strong className="text-foreground"> Conversion</strong> =
+								respondents who purchased / total respondents.
+								<strong className="text-foreground"> Baseline</strong> =
+								purchase rate of users who <em>never</em> took a survey, so you
+								can see if survey-takers convert at a higher or lower rate.
+								<strong className="text-foreground"> Revenue</strong> = total
+								lifetime spend of respondents who purchased.
+							</p>
+
+							{/* Headline stats */}
+							{(() => {
+								const sc = data.surveyCorrelation!
+								const totalRespondents = sc.totalRespondents ?? 0
+								const purchased = sc.respondentsWhoPurchased ?? 0
+								const convRate = sc.overallConversionRate ?? 0
+								const revenue = sc.totalRevenueFromRespondents ?? 0
+								const baseline = sc.baselineConversionRate ?? 0
+								const pre = sc.prePurchaseRespondents ?? 0
+								const post = sc.postPurchaseRespondents ?? 0
+								const never = sc.neverPurchasedRespondents ?? 0
+
+								return (
+									<>
+										<div className="grid grid-cols-2 gap-2 sm:grid-cols-5">
+											<div className="bg-muted/20 rounded-lg p-3">
+												<span className="text-muted-foreground block text-[11px] font-medium uppercase tracking-wider">
+													Respondents
+												</span>
+												<span className="text-foreground mt-1 block text-lg font-bold tabular-nums">
+													{totalRespondents.toLocaleString()}
+												</span>
+												<span className="text-muted-foreground/70 text-[10px]">
+													unique users who answered
+												</span>
+											</div>
+											<div className="bg-muted/20 rounded-lg p-3">
+												<span className="text-muted-foreground block text-[11px] font-medium uppercase tracking-wider">
+													Purchased
+												</span>
+												<span className="text-foreground mt-1 block text-lg font-bold tabular-nums">
+													{purchased.toLocaleString()}
+												</span>
+												<span className="text-muted-foreground/70 text-[10px]">
+													of those also bought
+												</span>
+											</div>
+											<div className="bg-muted/20 rounded-lg p-3">
+												<span className="text-muted-foreground block text-[11px] font-medium uppercase tracking-wider">
+													Conversion
+												</span>
+												<span className="text-foreground mt-1 block text-lg font-bold tabular-nums">
+													{(convRate * 100).toFixed(1)}%
+												</span>
+												<span className="text-muted-foreground/70 text-[10px]">
+													respondent → purchaser
+												</span>
+											</div>
+											<div className="bg-muted/20 rounded-lg p-3">
+												<span className="text-muted-foreground block text-[11px] font-medium uppercase tracking-wider">
+													Revenue
+												</span>
+												<span className="text-foreground mt-1 block text-lg font-bold tabular-nums">
+													{fmt$(revenue)}
+												</span>
+												<span className="text-muted-foreground/70 text-[10px]">
+													lifetime spend of purchasers
+												</span>
+											</div>
+											<div className="bg-muted/20 rounded-lg p-3">
+												<span className="text-muted-foreground block text-[11px] font-medium uppercase tracking-wider">
+													Baseline
+												</span>
+												<span className="text-foreground mt-1 block text-lg font-bold tabular-nums">
+													{(baseline * 100).toFixed(1)}%
+												</span>
+												<span className="text-muted-foreground/70 text-[10px]">
+													users who never took a survey
+												</span>
+											</div>
+										</div>
+
+										{/* Pre/Post breakdown */}
+										<div className="border-border/30 rounded-lg border px-4 py-3">
+											<p className="text-muted-foreground mb-2 text-[11px]">
+												Of the {purchased.toLocaleString()} purchasers, when did
+												they first respond relative to their first purchase?
+											</p>
+											<div className="flex flex-wrap items-center gap-x-6 gap-y-2">
+												<div className="flex items-center gap-2">
+													<span className="inline-block h-2 w-2 rounded-full bg-emerald-500" />
+													<span className="text-[12px]">
+														Responded first, then bought:{' '}
+														<span className="text-foreground font-semibold tabular-nums">
+															{pre.toLocaleString()}
+														</span>
+													</span>
+												</div>
+												<div className="flex items-center gap-2">
+													<span className="inline-block h-2 w-2 rounded-full bg-blue-500" />
+													<span className="text-[12px]">
+														Bought first, then responded:{' '}
+														<span className="text-foreground font-semibold tabular-nums">
+															{post.toLocaleString()}
+														</span>
+													</span>
+												</div>
+												<div className="flex items-center gap-2">
+													<span className="inline-block h-2 w-2 rounded-full bg-gray-400" />
+													<span className="text-[12px]">
+														Responded but never bought:{' '}
+														<span className="text-foreground font-semibold tabular-nums">
+															{never.toLocaleString()}
+														</span>
+													</span>
+												</div>
+											</div>
+										</div>
+									</>
+								)
+							})()}
+
+							{/* Per-answer conversion grouped by question */}
+							{(() => {
+								const allRows = data.surveyCorrelation!.byQuestion ?? []
+								if (allRows.length === 0) return null
+
+								const seen: Record<string, boolean> = {}
+								const questionIds: string[] = []
+								const answerCounts: Record<string, number> = {}
+								for (const r of allRows) {
+									if (!seen[r.questionId]) {
+										seen[r.questionId] = true
+										questionIds.push(r.questionId)
+										answerCounts[r.questionId] = 0
+									}
+									answerCounts[r.questionId]!++
+								}
+
+								const filteredQIds = questionIds.filter(
+									(qId) => (answerCounts[qId] ?? 0) <= 10,
+								)
+								if (filteredQIds.length === 0) return null
+
+								return (
+									<div className="space-y-6">
+										<p className="text-muted-foreground text-[11px]">
+											Per answer: of everyone who chose this option, what % went
+											on to purchase?
+										</p>
+										{filteredQIds.map((qId) => {
+											const answers = allRows
+												.filter(
+													(r) =>
+														r.questionId === qId && r.answer !== '[free text]',
+												)
+												.sort(
+													(a, b) => (b.respondents ?? 0) - (a.respondents ?? 0),
+												)
+											if (answers.length === 0) return null
+											const title = answers[0]?.questionTitle ?? qId
+											return (
+												<div key={qId}>
+													<p className="text-foreground mb-2 text-[13px] font-semibold leading-snug">
+														{title}
+													</p>
+													<div className="space-y-1.5">
+														{answers.map((row) => {
+															const pct = (row.conversionRate ?? 0) * 100
+															const purchased = row.purchasers ?? 0
+															const responded = row.respondents ?? 0
+															return (
+																<div
+																	key={row.answer}
+																	className="group flex items-center gap-2.5"
+																>
+																	<span
+																		className="text-muted-foreground w-[120px] shrink-0 truncate text-right text-[12px]"
+																		title={row.answer}
+																	>
+																		{row.answer}
+																	</span>
+																	<div className="bg-muted/50 relative h-5 flex-1 overflow-hidden rounded">
+																		<div
+																			className="absolute inset-y-0 left-0 rounded bg-emerald-500/20 transition-all duration-300"
+																			style={{ width: `${Math.max(pct, 1)}%` }}
+																		/>
+																		<div className="relative flex h-full items-center px-2">
+																			<span className="text-foreground/70 text-[11px] font-medium tabular-nums">
+																				{pct.toFixed(1)}%
+																			</span>
+																		</div>
+																	</div>
+																	<span className="text-muted-foreground w-12 shrink-0 text-right text-[11px] tabular-nums">
+																		{purchased}/{responded}
+																	</span>
+																</div>
+															)
+														})}
+													</div>
+												</div>
+											)
+										})}
+									</div>
+								)
+							})()}
+						</CardContent>
+					</Card>
+				)}
+
+				{/* ── Revenue Chart ─────────────────────────────────────────── */}
+				{hasRevenueChart && (
+					<Card className="overflow-hidden">
+						<CardHeader className="pb-3">
+							<div className="flex items-center gap-2.5">
+								<TrendingUpIcon className="text-muted-foreground h-4 w-4" />
+								<div>
+									<CardTitle className="text-sm font-semibold">
+										Daily Revenue
+									</CardTitle>
+									<CardDescription className="text-[11px]">
+										{rangeLabel}
+									</CardDescription>
+								</div>
+							</div>
+						</CardHeader>
+						<CardContent className="pb-3">
+							<RevenueChart
+								data={data.daily}
+								previousData={data.previousDaily}
+							/>
+						</CardContent>
+					</Card>
+				)}
+
+				{/* ── Products + Countries ──────────────────────────────────── */}
+				{(hasByProduct || hasByCountry) && (
+					<div className="grid gap-3 md:grid-cols-2">
+						{/* By Product */}
+						{hasByProduct && (
+							<Card>
+								<CardHeader className="pb-3">
+									<div className="flex items-center gap-2.5">
+										<ShoppingCartIcon className="text-muted-foreground h-4 w-4" />
+										<div>
+											<CardTitle className="text-sm font-semibold">
+												By Product
+											</CardTitle>
+											<CardDescription className="text-[11px]">
+												Revenue breakdown
+											</CardDescription>
+										</div>
+									</div>
+								</CardHeader>
+								<CardContent>
+									<div className="flex flex-col gap-3">
+										{data.byProduct.map((p) => {
+											const pct =
+												data.summary.totalRevenue > 0
+													? (p.revenue / data.summary.totalRevenue) * 100
+													: 0
+											return (
+												<div key={p.productId} className="space-y-1.5">
+													<div className="flex items-center justify-between gap-2">
+														<span className="truncate text-sm font-medium">
+															{p.productName}
+														</span>
+														<span className="text-foreground shrink-0 text-sm font-semibold tabular-nums">
+															{fmt$(p.revenue)}
+														</span>
+													</div>
+													<div className="flex items-center gap-2">
+														<div className="bg-muted/50 relative h-1.5 flex-1 overflow-hidden rounded-full">
+															<div
+																className="absolute inset-y-0 left-0 rounded-full bg-emerald-500/60"
+																style={{ width: `${Math.min(pct, 100)}%` }}
+															/>
+														</div>
+														<span className="text-muted-foreground text-[11px] tabular-nums">
+															{p.count}
+														</span>
+													</div>
+												</div>
+											)
+										})}
+									</div>
+								</CardContent>
+							</Card>
+						)}
+
+						{/* By Country */}
+						{hasByCountry && (
+							<Card className="overflow-hidden">
+								<CardHeader className="pb-3">
+									<div className="flex items-center gap-2.5">
+										<GlobeIcon className="text-muted-foreground h-4 w-4" />
+										<div>
+											<CardTitle className="text-sm font-semibold">
+												By Country
+											</CardTitle>
+											<CardDescription className="text-[11px]">
+												Top 10 by revenue
+											</CardDescription>
+										</div>
+									</div>
+								</CardHeader>
+								<CardContent className="pb-3">
+									<CountryChart data={data.byCountry} />
+								</CardContent>
+							</Card>
+						)}
+					</div>
+				)}
+
+				{/* ── Full Site Video Table ─────────────────────────────────── */}
+				{hasMux && data.mux!.topVideos.length > 5 && (
+					<Card>
+						<CardHeader className="pb-3">
+							<div className="flex items-center gap-2.5">
+								<FilmIcon className="text-muted-foreground h-4 w-4" />
+								<div>
+									<CardTitle className="text-sm font-semibold">
+										All Site Videos
+									</CardTitle>
+									<CardDescription className="text-[11px]">
+										By watch time (Mux)
+									</CardDescription>
+								</div>
+							</div>
+						</CardHeader>
+						<CardContent>
+							<div className="overflow-x-auto">
+								<table className="w-full">
+									<thead>
+										<tr className="text-muted-foreground border-border/50 border-b text-left text-[11px] uppercase tracking-wider">
+											<th className="pb-2.5 pr-4 font-medium">#</th>
+											<th className="pb-2.5 pr-4 font-medium">Title</th>
+											<th className="pb-2.5 pr-4 text-right font-medium">
+												Watch Time
+											</th>
+											<th className="pb-2.5 text-right font-medium">Views</th>
+										</tr>
+									</thead>
+									<tbody className="divide-border/30 divide-y">
+										{data.mux!.topVideos.slice(0, 10).map((v, i) => (
+											<tr key={v.title} className="group">
+												<td className="text-muted-foreground py-2.5 pr-4 text-sm tabular-nums">
+													{i + 1}
+												</td>
+												<td className="max-w-[300px] truncate py-2.5 pr-4 text-sm font-medium">
+													{v.title}
+												</td>
+												<td className="text-foreground py-2.5 pr-4 text-right text-sm font-semibold tabular-nums">
+													{fmtWatchMs(v.playingTimeMs)}
+												</td>
+												<td className="text-muted-foreground py-2.5 text-right text-sm tabular-nums">
+													{fmtK(v.views)}
+												</td>
+											</tr>
+										))}
+									</tbody>
+								</table>
+							</div>
+						</CardContent>
+					</Card>
+				)}
+
+				{/* ── Shortlinks ────────────────────────────────────────────── */}
+				{hasShortlinks && (
+					<ShortlinksCard
+						shortlinks={data.shortlinks}
+						totalClicks={totalClicks}
+					/>
+				)}
+
+				{/* ── Recent Purchases ──────────────────────────────────────── */}
+				{hasRecentPurchases && (
+					<Card>
+						<CardHeader className="pb-3">
+							<div className="flex items-center justify-between">
+								<div className="flex items-center gap-2.5">
+									<div className="bg-muted flex h-6 w-6 items-center justify-center rounded-md">
+										<ShoppingCartIcon className="text-muted-foreground h-3.5 w-3.5" />
+									</div>
+									<div>
+										<CardTitle className="text-sm font-semibold">
+											Team Purchases
+										</CardTitle>
+										<CardDescription className="text-[11px]">
+											Multi-seat deals · sorted by amount
+										</CardDescription>
+									</div>
+								</div>
+								<span className="rounded-full bg-red-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-red-600 dark:text-red-400">
+									OH YEAH
+								</span>
+							</div>
+						</CardHeader>
+						<CardContent>
+							<div className="overflow-x-auto">
+								<table className="w-full">
+									<thead>
+										<tr className="text-muted-foreground border-border/50 border-b text-left text-[11px] uppercase tracking-wider">
+											<th className="pb-2.5 pr-4 text-right font-medium">
+												Amount
+											</th>
+											<th className="pb-2.5 pr-4 text-right font-medium">
+												Seats
+											</th>
+											<th className="pb-2.5 pr-4 font-medium">Product</th>
+											<th className="hidden pb-2.5 pr-4 font-medium sm:table-cell">
+												Buyer
+											</th>
+											<th className="hidden pb-2.5 pr-4 font-medium sm:table-cell">
+												Country
+											</th>
+											<th className="pb-2.5 pr-4 font-medium">When</th>
+										</tr>
+									</thead>
+									<tbody className="divide-border/30 divide-y">
+										{data.recentPurchases.map((p) => (
+											<tr key={p.id}>
+												<td
+													className={`py-2.5 pr-4 text-right text-sm font-semibold tabular-nums ${
+														p.totalAmount > 0
+															? 'text-emerald-600 dark:text-emerald-400'
+															: 'text-muted-foreground'
+													}`}
+												>
+													{p.totalAmount > 0 ? fmt$(p.totalAmount) : 'Free'}
+												</td>
+												<td className="py-2.5 pr-4 text-right text-sm tabular-nums">
+													{p.seats ?? '—'}
+												</td>
+												<td className="max-w-[200px] truncate py-2.5 pr-4 text-sm font-medium">
+													{p.productName}
+												</td>
+												<td className="text-muted-foreground hidden max-w-[150px] truncate py-2.5 pr-4 text-sm sm:table-cell">
+													{p.userName ?? p.userEmail ?? '—'}
+												</td>
+												<td className="text-muted-foreground hidden py-2.5 pr-4 text-sm sm:table-cell">
+													{p.country
+														? `${countryFlag(p.country)} ${p.country}`
+														: '—'}
+												</td>
+												<td className="text-muted-foreground whitespace-nowrap py-2.5 pr-4 text-sm">
+													{fmtAgo(p.createdAt)}
+												</td>
+											</tr>
+										))}
+									</tbody>
+								</table>
+							</div>
+						</CardContent>
+					</Card>
+				)}
+			</div>
+		</div>
+	)
+}