Replace account and license-keys pages with profile page and dashboard

src/routes/(protected)/(user)/dashboard/+page.svelte

@@ -1,33 +1,90 @@
 <script lang="ts">
-	import { resolve } from '$app/paths';
+	import DashboardSection from '$lib/components/DashboardSection.svelte';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
+
+	function formatDate(value: Date | string): string {
+		const date = value instanceof Date ? value : new Date(value);
+		return date.toLocaleDateString(undefined, {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric'
+		});
+	}
 </script>
 
 <div>
-	<h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
-		Welcome, {data.firstName}!
-	</h1>
-	<p class="mt-1 text-sm text-slate-500 sm:text-base">Here's an overview of your account.</p>
-
-	<div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-		<a
-			href={resolve('/license-keys')}
-			class="group flex flex-col gap-1 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-indigo-200 hover:shadow"
-		>
-			<span class="text-sm font-medium text-slate-600">Active License Keys</span>
-			<span class="text-3xl font-bold text-indigo-600">{data.activeKeys}</span>
-			<span class="text-sm text-slate-500">{data.totalKeys} total</span>
-		</a>
-
-		<a
-			href={resolve('/account')}
-			class="group flex flex-col gap-1 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-indigo-200 hover:shadow"
-		>
-			<span class="text-sm font-medium text-slate-600">Account</span>
-			<span class="text-2xl font-semibold text-slate-900">Manage Profile</span>
-			<span class="text-sm text-slate-500">Edit your details</span>
-		</a>
+	<div>
+		<h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Dashboard</h1>
+		<p class="mt-1 text-sm text-slate-500 sm:text-base">Manage your account and license keys.</p>
 	</div>
+
+	<!--
+		Dashboard sections. This page is the account management surface; personal
+		information (name, email, phone, addresses) lives on the Profile page.
+		Planned sections to add below as <DashboardSection> blocks:
+		  - Schedules: create and manage listening schedules.
+		  - Devices / playback.
+		  - Billing / orders.
+	-->
+
+	<DashboardSection title="License Keys" description="Your active and inactive license keys.">
+		{#if data.licenseKeys.length > 0}
+			<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
+				<!-- Desktop / tablet: table -->
+				<table class="hidden w-full text-left text-sm sm:table">
+					<thead
+						class="border-b border-slate-200 bg-slate-50 text-xs tracking-wide text-slate-500 uppercase"
+					>
+						<tr>
+							<th class="px-6 py-3 font-semibold">Key</th>
+							<th class="px-6 py-3 font-semibold">Status</th>
+							<th class="px-6 py-3 font-semibold">Created</th>
+						</tr>
+					</thead>
+					<tbody class="divide-y divide-slate-100">
+						{#each data.licenseKeys as key (key.key)}
+							<tr class="hover:bg-slate-50">
+								<td class="px-6 py-4 font-mono text-slate-800">{key.key}</td>
+								<td class="px-6 py-4">
+									<span
+										class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {key.active
+											? 'bg-green-100 text-green-700'
+											: 'bg-slate-100 text-slate-600'}"
+									>
+										{key.active ? 'Active' : 'Inactive'}
+									</span>
+								</td>
+								<td class="px-6 py-4 text-slate-600">{formatDate(key.createdAt)}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+
+				<!-- Mobile: card list -->
+				<ul class="divide-y divide-slate-100 sm:hidden">
+					{#each data.licenseKeys as key (key.key)}
+						<li class="flex flex-col gap-2 px-4 py-4">
+							<div class="flex items-center justify-between gap-4">
+								<span class="min-w-0 font-mono text-sm break-all text-slate-800">{key.key}</span>
+								<span
+									class="shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium {key.active
+										? 'bg-green-100 text-green-700'
+										: 'bg-slate-100 text-slate-600'}"
+								>
+									{key.active ? 'Active' : 'Inactive'}
+								</span>
+							</div>
+							<span class="text-xs text-slate-500">Created {formatDate(key.createdAt)}</span>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{:else}
+			<div class="rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center">
+				<p class="text-sm text-slate-600">You don't have any license keys yet.</p>
+			</div>
+		{/if}
+	</DashboardSection>
 </div>