style(dashboard): KPITile primitive + gradient PageHeader + tile skeletons

Replaces flat Card-based KPI rendering with KPITile (gradient-brand-soft + accent
stripe). Adds polished gradient PageHeader to DashboardShell with eyebrow, KPI
sub-line, description. Tile-shaped skeletons replace the four CardSkeletons during
KPI load.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/dashboard/dashboard-shell.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { PageHeader } from '@/components/shared/page-header';
 import { KpiCardsWithBoundary } from './kpi-cards';
 import { PipelineChart } from './pipeline-chart';
 import { RevenueForecast } from './revenue-forecast';
@@ -8,13 +9,27 @@ import { ActivityFeed } from './activity-feed';
 
 export function DashboardShell() {
   useRealtimeInvalidation({
-    'interest:stageChanged': [['dashboard', 'pipeline'], ['dashboard', 'forecast']],
+    'interest:stageChanged': [
+      ['dashboard', 'pipeline'],
+      ['dashboard', 'forecast'],
+    ],
     'client:created': [['dashboard', 'kpis']],
-    'berth:statusChanged': [['dashboard', 'kpis'], ['dashboard', 'forecast']],
+    'berth:statusChanged': [
+      ['dashboard', 'kpis'],
+      ['dashboard', 'forecast'],
+    ],
   });
 
   return (
     <div className="space-y-6">
+      <PageHeader
+        title="Dashboard"
+        eyebrow="Overview"
+        description="Live snapshot of your marina activity"
+        kpiLine={<span>Last 30 days</span>}
+        variant="gradient"
+      />
+
       {/* Row 1: KPI cards */}
       <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
         <KpiCardsWithBoundary />

src/components/dashboard/kpi-cards.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import { DollarSign, LayoutGrid, TrendingUp, Users } from 'lucide-react';
 
 import { apiFetch } from '@/lib/api/client';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { CardSkeleton } from '@/components/shared/loading-skeleton';
+import { KPITile } from '@/components/ui/kpi-tile';
+import { Skeleton } from '@/components/ui/skeleton';
 import { WidgetErrorBoundary } from './widget-error-boundary';
 
 interface KpiData {
@@ -27,6 +26,17 @@ function formatPercent(value: number): string {
   return `${value.toFixed(1)}%`;
 }
 
+function KpiTileSkeleton() {
+  return (
+    <div className="relative overflow-hidden rounded-xl border border-slate-200 bg-card p-5 shadow-sm">
+      <div className="absolute inset-x-0 top-0 h-1 bg-slate-100" aria-hidden />
+      <Skeleton className="h-3 w-24" />
+      <Skeleton className="mt-3 h-7 w-32" />
+      <Skeleton className="mt-2 h-3 w-12" />
+    </div>
+  );
+}
+
 export function KpiCards() {
   const { data, isLoading, isError } = useQuery<KpiData>({
     queryKey: ['dashboard', 'kpis'],
@@ -38,52 +48,45 @@ export function KpiCards() {
   if (isLoading) {
     return (
       <>
-        <CardSkeleton />
-        <CardSkeleton />
-        <CardSkeleton />
-        <CardSkeleton />
+        <KpiTileSkeleton />
+        <KpiTileSkeleton />
+        <KpiTileSkeleton />
+        <KpiTileSkeleton />
       </>
     );
   }
 
-  const kpis = [
+  const kpis: Array<{
+    label: string;
+    value: string;
+    accent: 'brand' | 'success' | 'warning' | 'mint' | 'teal' | 'purple';
+  }> = [
     {
       label: 'Total Clients',
       value: isError ? '—' : String(data?.totalClients ?? 0),
-      icon: Users,
+      accent: 'brand',
     },
     {
       label: 'Active Interests',
       value: isError ? '—' : String(data?.activeInterests ?? 0),
-      icon: TrendingUp,
+      accent: 'teal',
     },
     {
       label: 'Pipeline Value',
       value: isError ? '—' : formatCurrency(data?.pipelineValueUsd ?? 0),
-      icon: DollarSign,
+      accent: 'success',
     },
     {
       label: 'Occupancy Rate',
       value: isError ? '—' : formatPercent(data?.occupancyRate ?? 0),
-      icon: LayoutGrid,
+      accent: 'purple',
     },
   ];
 
   return (
     <>
-      {kpis.map(({ label, value, icon: Icon }) => (
-        <Card key={label}>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium text-muted-foreground">
-              {label}
-            </CardTitle>
-            <Icon className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">{value}</div>
-            <div className="mt-1 h-1 w-8 rounded-full bg-muted" />
-          </CardContent>
-        </Card>
+      {kpis.map(({ label, value, accent }) => (
+        <KPITile key={label} title={label} value={value} accent={accent} />
       ))}
     </>
   );