feat: add reserve-bay route with allocation summary

src/app/layout.tsx

@@ -33,6 +33,7 @@ const navLinks = [
   { href: "/queue-monitor", label: "Queue Monitor" },
   { href: "/parcel-hub", label: "Parcel Hub" },
   { href: "/status-board", label: "Status Board" },
+  { href: "/reserve-bay", label: "Reserve Bay" },
 ] as const;
 
 export default function RootLayout({

src/app/reserve-bay/_components/allocation-summary.tsx

@@ -0,0 +1,83 @@
+import type {
+  AllocationCategory,
+  AllocationEntry,
+} from "../_data/reserve-bay-data";
+import styles from "../reserve-bay.module.css";
+
+const categoryToneClasses: Record<AllocationCategory, string> = {
+  inbound: "border-sky-200 bg-sky-50/80 text-sky-800",
+  outbound: "border-emerald-200 bg-emerald-50/80 text-emerald-800",
+  overflow: "border-amber-200 bg-amber-50/90 text-amber-800",
+  maintenance: "border-slate-200 bg-slate-100/90 text-slate-700",
+};
+
+const categoryFillClasses: Record<AllocationCategory, string> = {
+  inbound: styles.fillInbound,
+  outbound: styles.fillHigh,
+  overflow: styles.fillModerate,
+  maintenance: styles.fillMaintenance,
+};
+
+export function AllocationSummary({
+  allocations,
+}: {
+  allocations: AllocationEntry[];
+}) {
+  const totalAllocated = allocations.reduce(
+    (sum, a) => sum + a.baysAllocated,
+    0,
+  );
+  const totalUsed = allocations.reduce((sum, a) => sum + a.baysUsed, 0);
+
+  return (
+    <div className={`${styles.surfaceCard} space-y-6 p-6 sm:p-8`}>
+      <div className="space-y-3">
+        <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Facility summary
+        </p>
+        <div className="flex items-baseline gap-3">
+          <p className="text-3xl font-semibold tracking-tight text-slate-950">
+            {totalUsed}/{totalAllocated}
+          </p>
+          <p className="text-sm text-slate-500">bays in use</p>
+        </div>
+      </div>
+
+      <div aria-label="Allocation breakdown" className="space-y-4" role="list">
+        {allocations.map((alloc) => (
+          <div
+            key={alloc.id}
+            role="listitem"
+            className="space-y-3 rounded-2xl bg-white/80 px-4 py-4 shadow-[inset_0_0_0_1px_rgba(148,163,184,0.14)]"
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <span
+                  className={`inline-flex rounded-full border px-3 py-1 text-xs font-semibold ${categoryToneClasses[alloc.category]}`}
+                >
+                  {alloc.label}
+                </span>
+              </div>
+              <span className="text-sm font-semibold text-slate-700">
+                {alloc.baysUsed}/{alloc.baysAllocated}
+              </span>
+            </div>
+
+            <div className="space-y-1.5">
+              <div className="flex items-center justify-between text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+                <span>Utilization</span>
+                <span>{alloc.utilization}%</span>
+              </div>
+              <div className={styles.progressRail}>
+                <span
+                  className={`${styles.progressFill} ${categoryFillClasses[alloc.category]}`}
+                  style={{ width: `${alloc.utilization}%` }}
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/reserve-bay/_components/availability-snapshot.tsx

@@ -0,0 +1,85 @@
+import type {
+  AvailabilityLevel,
+  AvailabilitySnapshot,
+} from "../_data/reserve-bay-data";
+import styles from "../reserve-bay.module.css";
+
+const levelToneClasses: Record<AvailabilityLevel, string> = {
+  high: "border-emerald-200 bg-emerald-50/80 text-emerald-800",
+  moderate: "border-amber-200 bg-amber-50/90 text-amber-800",
+  low: "border-rose-200 bg-rose-50 text-rose-800",
+};
+
+const levelFillClasses: Record<AvailabilityLevel, string> = {
+  high: styles.fillHigh,
+  moderate: styles.fillModerate,
+  low: styles.fillLow,
+};
+
+export function AvailabilitySnapshotCard({
+  snapshot,
+}: {
+  snapshot: AvailabilitySnapshot;
+}) {
+  const occupancyPct = Math.round(
+    (snapshot.occupiedBays / snapshot.totalBays) * 100,
+  );
+  const freeBays = snapshot.totalBays - snapshot.occupiedBays;
+
+  return (
+    <article
+      role="listitem"
+      className={`${styles.surfaceCard} flex h-full flex-col gap-5 p-6`}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-3">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+            {snapshot.zone}
+          </p>
+          <p className="text-4xl font-semibold tracking-tight text-slate-950">
+            {freeBays} <span className="text-lg text-slate-500">free</span>
+          </p>
+        </div>
+        <span
+          className={`inline-flex rounded-full border px-3 py-1 text-xs font-semibold ${levelToneClasses[snapshot.level]}`}
+        >
+          {snapshot.level} availability
+        </span>
+      </div>
+
+      <div className="grid gap-3 text-sm sm:grid-cols-2">
+        <div className="rounded-2xl bg-white/80 px-4 py-3 shadow-[inset_0_0_0_1px_rgba(148,163,184,0.14)]">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+            Next free at
+          </p>
+          <p className="mt-2 font-medium text-slate-700">
+            {snapshot.nextFreeAt}
+          </p>
+        </div>
+        <div className="rounded-2xl bg-white/80 px-4 py-3 shadow-[inset_0_0_0_1px_rgba(148,163,184,0.14)]">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+            Peak window
+          </p>
+          <p className="mt-2 font-medium text-slate-700">
+            {snapshot.peakWindow}
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-auto space-y-3">
+        <div className="flex items-center justify-between text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+          <span>Occupancy</span>
+          <span>
+            {snapshot.occupiedBays}/{snapshot.totalBays} bays · {occupancyPct}%
+          </span>
+        </div>
+        <div className={styles.progressRail}>
+          <span
+            className={`${styles.progressFill} ${levelFillClasses[snapshot.level]}`}
+            style={{ width: `${occupancyPct}%` }}
+          />
+        </div>
+      </div>
+    </article>
+  );
+}

src/app/reserve-bay/_components/reservation-card.tsx

@@ -0,0 +1,66 @@
+import type { Reservation, ReservationStatus } from "../_data/reserve-bay-data";
+import styles from "../reserve-bay.module.css";
+
+const statusToneClasses: Record<ReservationStatus, string> = {
+  confirmed: "border-emerald-200 bg-emerald-50 text-emerald-800",
+  pending: "border-amber-200 bg-amber-50 text-amber-800",
+  expired: "border-slate-200 bg-slate-100 text-slate-600",
+};
+
+const statusLabel: Record<ReservationStatus, string> = {
+  confirmed: "Confirmed",
+  pending: "Pending",
+  expired: "Expired",
+};
+
+export function ReservationCard({ reservation }: { reservation: Reservation }) {
+  return (
+    <article
+      role="listitem"
+      className={`${styles.surfaceCard} ${styles.reservationCard} p-5 sm:p-6`}
+    >
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-3">
+          <div className="flex flex-wrap items-center gap-3">
+            <span
+              className={`inline-flex rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] ${statusToneClasses[reservation.status]}`}
+            >
+              {statusLabel[reservation.status]}
+            </span>
+            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
+              Bay {reservation.bayCode}
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <h3 className="text-xl font-semibold tracking-tight text-slate-950">
+              {reservation.carrier}
+            </h3>
+            <p className="max-w-2xl text-sm leading-6 text-slate-600">
+              {reservation.notes}
+            </p>
+          </div>
+        </div>
+
+        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">
+          {reservation.windowStart}–{reservation.windowEnd}
+        </p>
+      </div>
+
+      <div className="mt-5 grid gap-3 text-sm text-slate-700 sm:grid-cols-[1fr_1fr]">
+        <div className="rounded-2xl bg-white/80 px-4 py-3 shadow-[inset_0_0_0_1px_rgba(148,163,184,0.14)]">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+            Trailer
+          </p>
+          <p className="mt-2 font-medium">{reservation.trailerId}</p>
+        </div>
+        <div className="rounded-2xl bg-white/80 px-4 py-3 shadow-[inset_0_0_0_1px_rgba(148,163,184,0.14)]">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">
+            Load type
+          </p>
+          <p className="mt-2 font-medium">{reservation.loadType}</p>
+        </div>
+      </div>
+    </article>
+  );
+}