feat: build dashboard overview UI

src/routes/dashboard/+page.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import ActivityLists from './activity-lists.svelte';
+	import BillingTrend from './billing-trend.svelte';
+	import MetricCards from './metric-cards.svelte';
+	import RoomSummary from './room-summary.svelte';
+	import { formatDate, formatMoney, formatValue } from '$lib/record-utils';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+</script>
+
+<svelte:head>
+	<title>Dashboard | Clearity</title>
+</svelte:head>
+
+<div class="flex flex-col gap-6">
+	<div class="flex flex-col gap-1">
+		<h1 class="text-2xl font-semibold tracking-tight">Dashboard</h1>
+		<p class="text-sm text-muted-foreground">
+			Operational overview for clients, contracts, bookings, rooms, and billing.
+		</p>
+	</div>
+
+	<MetricCards metrics={data.metrics} monthLabel={data.meta.monthLabel} {formatMoney} />
+
+	<div class="grid gap-4 xl:grid-cols-[minmax(0,1.15fr)_minmax(360px,0.85fr)]">
+		<BillingTrend records={data.billingTrend} {formatMoney} />
+		<RoomSummary metrics={data.metrics} summary={data.roomSummary} />
+	</div>
+
+	<ActivityLists
+		upcomingBookings={data.upcomingBookings}
+		contractsEndingSoon={data.contractsEndingSoon}
+		recentInvoices={data.recentInvoices}
+		{formatDate}
+		{formatMoney}
+		{formatValue}
+	/>
+
+	<p class="text-xs text-muted-foreground">{data.meta.overdueInvoiceBasis}</p>
+</div>