feat(ui): redesign fleet and booking workflows

frontend/src/pages/BookingDetail.tsx

@@ -4,6 +4,8 @@ import { api } from "../api/client";
 import type { Booking, RegisterReturnResult } from "../api/types";
 import { StatusBadge } from "../components/Badge";
 import { ReturnForm, ReturnResultPanel } from "../components/ReturnForm";
+import { Icon } from "../components/Icons";
+import { ErrorState, LoadingState, PageHeader } from "../components/PageChrome";
 
 export function BookingDetail() {
   const { publicRef } = useParams<{ publicRef: string }>();
@@ -31,15 +33,14 @@ export function BookingDetail() {
     load();
   }
 
-  if (error) return <p className="error" role="alert">{error}</p>;
-  if (!booking) return <p>Loading booking…</p>;
+  if (error) return <ErrorState message={error} />;
+  if (!booking) return <LoadingState label="Loading booking record…" />;
 
   return (
     <div className="page">
-      <p><Link to="/bookings">← Back to bookings</Link></p>
-      <h1>{booking.public_ref}</h1>
-      <p><StatusBadge status={booking.status} /></p>
-      <dl className="detail-grid">
+      <Link className="back-link" to="/bookings"><Icon name="arrow-left" /> Booking ledger</Link>
+      <PageHeader eyebrow="Bookings / Rental record" title={booking.public_ref} description={`${booking.customer_name} · ${booking.vehicle_ref}`} actions={<StatusBadge status={booking.status} />} />
+      <section className="record-surface" aria-label="Booking facts"><dl className="detail-grid">
         <div><dt>Customer</dt><dd>{booking.customer_name} ({booking.customer_ref})</dd></div>
         <div><dt>Vehicle</dt><dd><Link to={`/vehicles/${booking.vehicle_ref}`}>{booking.vehicle_ref}</Link></dd></div>
         <div><dt>Starts</dt><dd>{new Date(booking.starts_at).toLocaleString("en-GB", { timeZone: "Europe/Brussels" })}</dd></div>
@@ -47,7 +48,7 @@ export function BookingDetail() {
         <div><dt>Start odometer</dt><dd>{booking.start_odometer_km ?? "—"} km</dd></div>
         <div><dt>End odometer</dt><dd>{booking.end_odometer_km ?? "—"} km</dd></div>
         <div><dt>Requirements complete</dt><dd>{booking.requirements_complete ? "Yes" : "No"}</dd></div>
-      </dl>
+      </dl></section>
 
       {returnResult && <ReturnResultPanel result={returnResult} />}
       {!returnResult && booking.status === "active" && (