feat(ui): redesign fleet and booking workflows

frontend/src/pages/VehicleDetail.tsx

@@ -3,6 +3,8 @@ import { Link, useParams } from "react-router-dom";
 import { api } from "../api/client";
 import type { VehicleDetail as VehicleDetailData } from "../api/types";
 import { SeverityBadge, StatusBadge } from "../components/Badge";
+import { Icon } from "../components/Icons";
+import { ErrorState, LoadingState, PageHeader } from "../components/PageChrome";
 
 const TABS = ["overview", "bookings", "inspections", "maintenance", "quality"] as const;
 type Tab = (typeof TABS)[number];
@@ -23,21 +25,15 @@ export function VehicleDetail() {
       .catch(() => setError("This vehicle could not be found."));
   }, [publicRef]);
 
-  if (error) return <p className="error" role="alert">{error}</p>;
-  if (!vehicle) return <p>Loading vehicle…</p>;
+  if (error) return <ErrorState message={error} />;
+  if (!vehicle) return <LoadingState label="Loading vehicle record…" />;
 
   return (
     <div className="page">
-      <p><Link to="/vehicles">← Back to vehicles</Link></p>
-      <h1>
-        {vehicle.public_ref} — {vehicle.make} {vehicle.model}
-      </h1>
-      <p>
-        <StatusBadge status={vehicle.operational_status} />
-        {vehicle.attention && <span className="badge severity-high">Needs attention</span>}
-      </p>
+      <Link className="back-link" to="/vehicles"><Icon name="arrow-left" /> Fleet registry</Link>
+      <PageHeader eyebrow="Fleet / Vehicle record" title={`${vehicle.public_ref} · ${vehicle.make} ${vehicle.model}`} description={`${vehicle.registration_number} · ${vehicle.location}`} actions={<div className="status-stack"><StatusBadge status={vehicle.operational_status} />{vehicle.attention && <span className="badge severity-high">Needs attention</span>}</div>} />
 
-      <div role="tablist" aria-label="Vehicle sections" className="tabs">
+      <div role="tablist" aria-label="Vehicle sections" className="tabs" aria-orientation="horizontal">
         {TABS.map((t) => (
           <button
             key={t}
@@ -53,14 +49,14 @@ export function VehicleDetail() {
       </div>
 
       {tab === "overview" && (
-        <dl className="detail-grid">
+        <section className="record-surface" aria-label="Vehicle overview"><dl className="detail-grid">
           <div><dt>Registration</dt><dd>{vehicle.registration_number}</dd></div>
           <div><dt>Model year</dt><dd>{vehicle.model_year}</dd></div>
           <div><dt>Location</dt><dd>{vehicle.location}</dd></div>
           <div><dt>Odometer</dt><dd>{vehicle.odometer_km.toLocaleString("en-GB")} km</dd></div>
           <div><dt>Next service</dt><dd>{vehicle.next_service_km.toLocaleString("en-GB")} km</dd></div>
           <div><dt>Active</dt><dd>{vehicle.active ? "Yes" : "No"}</dd></div>
-        </dl>
+        </dl></section>
       )}
 
       {tab === "bookings" && (