feat: implement Phase 2 (component library) + Phase 3 (dashboard)

Phase 2 - New shared components:
- Button: filled/outlined/text/icon variants, loading state
- StatusChip: colored badge with icon per status (completed/running/pending/failed)
- StatCard: icon circle with tinted bg, big number display
- EmptyState: centered icon, title, description, optional action
- SkeletonCard: shimmer loading placeholders (stat, list item, table row)
- SegmentedButton: active shows Check icon, secondary-container colors
- AirportChip: PlaneTakeoff icon, error hover on remove
- Toast: updated to Lucide icons + design token colors

Phase 3 - Dashboard redesign:
- 5 stat cards with skeleton loading
- Status chip separated from destination text (fixes "BDS→DUScompleted" bug)
- Hover lift effect on scan cards
- Relative timestamps (Just now, Xm ago, Today, Yesterday, N days ago)
- EmptyState when no scans exist

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

flight-comparator/frontend/src/pages/Dashboard.tsx

@@ -1,17 +1,52 @@
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import {
+  ScanSearch,
+  Clock,
+  Loader2,
+  CheckCircle2,
+  XCircle,
+  ArrowRight,
+} from 'lucide-react';
 import { scanApi } from '../api';
 import type { Scan } from '../api';
+import StatCard from '../components/StatCard';
+import StatusChip from '../components/StatusChip';
+import type { ScanStatus } from '../components/StatusChip';
+import EmptyState from '../components/EmptyState';
+import { SkeletonStatCard, SkeletonListItem } from '../components/SkeletonCard';
+
+interface Stats {
+  total: number;
+  pending: number;
+  running: number;
+  completed: number;
+  failed: number;
+}
+
+function formatRelativeDate(dateString: string): string {
+  const date = new Date(dateString);
+  const now  = new Date();
+  const diffMs   = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60_000);
+  const diffDays = Math.floor(diffMs / 86_400_000);
+
+  if (diffMins < 1)   return 'Just now';
+  if (diffMins < 60)  return `${diffMins}m ago`;
+  if (diffDays === 0) return 'Today';
+  if (diffDays === 1) return 'Yesterday';
+  if (diffDays < 7)   return `${diffDays} days ago`;
+  return date.toLocaleDateString('en-GB', {
+    day: 'numeric', month: 'short', year: 'numeric',
+  });
+}
 
 export default function Dashboard() {
-  const [scans, setScans] = useState<Scan[]>([]);
+  const navigate = useNavigate();
+  const [scans, setScans]   = useState<Scan[]>([]);
   const [loading, setLoading] = useState(true);
-  const [stats, setStats] = useState({
-    total: 0,
-    pending: 0,
-    running: 0,
-    completed: 0,
-    failed: 0,
+  const [stats, setStats]   = useState<Stats>({
+    total: 0, pending: 0, running: 0, completed: 0, failed: 0,
   });
 
   useEffect(() => {
@@ -24,14 +59,12 @@ export default function Dashboard() {
       const response = await scanApi.list(1, 10);
       const scanList = response.data.data;
       setScans(scanList);
-
-      // Calculate stats
       setStats({
-        total: response.data.pagination.total,
-        pending: scanList.filter(s => s.status === 'pending').length,
-        running: scanList.filter(s => s.status === 'running').length,
+        total:     response.data.pagination.total,
+        pending:   scanList.filter(s => s.status === 'pending').length,
+        running:   scanList.filter(s => s.status === 'running').length,
         completed: scanList.filter(s => s.status === 'completed').length,
-        failed: scanList.filter(s => s.status === 'failed').length,
+        failed:    scanList.filter(s => s.status === 'failed').length,
       });
     } catch (error) {
       console.error('Failed to load scans:', error);
@@ -40,118 +73,100 @@ export default function Dashboard() {
     }
   };
 
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'completed':
-        return 'bg-green-100 text-green-800';
-      case 'running':
-        return 'bg-blue-100 text-blue-800';
-      case 'pending':
-        return 'bg-yellow-100 text-yellow-800';
-      case 'failed':
-        return 'bg-red-100 text-red-800';
-      default:
-        return 'bg-gray-100 text-gray-800';
-    }
-  };
-
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleString();
-  };
-
-  if (loading) {
-    return (
-      <div className="flex justify-center items-center h-64">
-        <div className="text-gray-500">Loading...</div>
-      </div>
-    );
-  }
-
   return (
-    <div>
-      <div className="flex justify-between items-center mb-6">
-        <h2 className="text-2xl font-bold text-gray-900">Dashboard</h2>
-        <Link
-          to="/scans"
-          className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium"
-        >
-          + New Scan
-        </Link>
+    <div className="space-y-6">
+
+      {/* ── Stats grid ───────────────────────────────────────────── */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+        {loading ? (
+          Array.from({ length: 5 }).map((_, i) => <SkeletonStatCard key={i} />)
+        ) : (
+          <>
+            <StatCard label="Total Scans" value={stats.total}     icon={ScanSearch}    variant="primary"   />
+            <StatCard label="Pending"     value={stats.pending}   icon={Clock}         variant="tertiary"  />
+            <StatCard label="Running"     value={stats.running}   icon={Loader2}       variant="primary"   />
+            <StatCard label="Completed"   value={stats.completed} icon={CheckCircle2}  variant="secondary" />
+            <StatCard label="Failed"      value={stats.failed}    icon={XCircle}       variant="error"     />
+          </>
+        )}
       </div>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
-        <div className="bg-white p-6 rounded-lg shadow">
-          <div className="text-sm font-medium text-gray-500">Total Scans</div>
-          <div className="text-3xl font-bold text-gray-900 mt-2">{stats.total}</div>
+      {/* ── Recent scans ─────────────────────────────────────────── */}
+      <div>
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-base font-semibold text-on-surface">Recent Scans</h2>
+          <Link
+            to="/scans"
+            className="text-sm text-primary font-medium hover:underline"
+          >
+            + New scan
+          </Link>
         </div>
-        <div className="bg-white p-6 rounded-lg shadow">
-          <div className="text-sm font-medium text-gray-500">Pending</div>
-          <div className="text-3xl font-bold text-yellow-600 mt-2">{stats.pending}</div>
-        </div>
-        <div className="bg-white p-6 rounded-lg shadow">
-          <div className="text-sm font-medium text-gray-500">Running</div>
-          <div className="text-3xl font-bold text-blue-600 mt-2">{stats.running}</div>
-        </div>
-        <div className="bg-white p-6 rounded-lg shadow">
-          <div className="text-sm font-medium text-gray-500">Completed</div>
-          <div className="text-3xl font-bold text-green-600 mt-2">{stats.completed}</div>
-        </div>
-        <div className="bg-white p-6 rounded-lg shadow">
-          <div className="text-sm font-medium text-gray-500">Failed</div>
-          <div className="text-3xl font-bold text-red-600 mt-2">{stats.failed}</div>
-        </div>
-      </div>
 
-      {/* Recent Scans */}
-      <div className="bg-white rounded-lg shadow">
-        <div className="px-6 py-4 border-b border-gray-200">
-          <h3 className="text-lg font-semibold text-gray-900">Recent Scans</h3>
-        </div>
-        <div className="divide-y divide-gray-200">
-          {scans.length === 0 ? (
-            <div className="px-6 py-12 text-center text-gray-500">
-              No scans yet. Create your first scan to get started!
-            </div>
-          ) : (
-            scans.map((scan) => (
+        {loading ? (
+          <div className="space-y-2">
+            {Array.from({ length: 5 }).map((_, i) => <SkeletonListItem key={i} />)}
+          </div>
+        ) : scans.length === 0 ? (
+          <div className="bg-surface rounded-lg shadow-level-1">
+            <EmptyState
+              icon={ScanSearch}
+              title="No scans yet"
+              description="Create your first scan to discover flight routes and prices."
+              action={{ label: '+ New Scan', onClick: () => navigate('/scans') }}
+            />
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {scans.map((scan) => (
               <Link
                 key={scan.id}
                 to={`/scans/${scan.id}`}
-                className="block px-6 py-4 hover:bg-gray-50 cursor-pointer"
+                className="group block bg-surface rounded-lg px-5 py-4 shadow-level-1 hover:-translate-y-0.5 hover:shadow-level-2 transition-all duration-150"
               >
-                <div className="flex items-center justify-between">
-                  <div className="flex-1">
-                    <div className="flex items-center space-x-3">
-                      <span className="font-medium text-gray-900">
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex-1 min-w-0">
+                    {/* Row 1: route + status */}
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="font-medium text-on-surface">
                         {scan.origin} → {scan.country}
                       </span>
-                      <span
-                        className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(
-                          scan.status
-                        )}`}
-                      >
-                        {scan.status}
-                      </span>
-                    </div>
-                    <div className="mt-1 text-sm text-gray-500">
-                      {scan.start_date} to {scan.end_date} • {scan.adults} adult(s) • {scan.seat_class}
+                      <StatusChip status={scan.status as ScanStatus} />
                     </div>
+
+                    {/* Row 2: dates + config */}
+                    <p className="mt-1 text-sm text-on-surface-variant">
+                      {scan.start_date} – {scan.end_date}
+                      {' · '}{scan.adults} adult{scan.adults !== 1 ? 's' : ''}
+                      {' · '}{scan.seat_class}
+                    </p>
+
+                    {/* Row 3: results (only when present) */}
                     {scan.total_routes > 0 && (
-                      <div className="mt-1 text-sm text-gray-500">
-                        {scan.total_routes} routes • {scan.total_flights} flights found
-                      </div>
+                      <p className="mt-0.5 text-sm text-on-surface-variant">
+                        {scan.total_routes} routes · {scan.total_flights} flights found
+                      </p>
                     )}
                   </div>
-                  <div className="text-sm text-gray-500">
-                    {formatDate(scan.created_at)}
+
+                  {/* Right: date + arrow */}
+                  <div className="flex items-center gap-2 shrink-0">
+                    <span className="text-xs text-on-surface-variant">
+                      {formatRelativeDate(scan.created_at)}
+                    </span>
+                    <ArrowRight
+                      size={16}
+                      className="text-on-surface-variant group-hover:translate-x-0.5 transition-transform duration-150"
+                      aria-hidden="true"
+                    />
                   </div>
                 </div>
               </Link>
-            ))
-          )}
-        </div>
+            ))}
+          </div>
+        )}
       </div>
+
     </div>
   );
 }