fix batch page ui

apps/edr-freight-web/backoffice/src/components/trainScheduling/TrainCompositionDiagram.tsx

@@ -93,12 +93,14 @@ function Wheels({ count = 2, dark = false }: { count?: number; dark?: boolean })
         <Box
           key={i}
           style={{
-            width: 12,
-            height: 12,
+            width: 13,
+            height: 13,
             borderRadius: "50%",
-            background: dark ? "#0f291b" : "var(--mantine-color-gray-7)",
+            background: dark
+              ? "radial-gradient(circle at 35% 35%, #2c4a3a, #0f291b)"
+              : "radial-gradient(circle at 35% 35%, var(--mantine-color-gray-5), var(--mantine-color-gray-8))",
             border: "2px solid var(--mantine-color-gray-4)",
-            boxShadow: "inset 0 0 0 2px rgba(255,255,255,0.25)",
+            boxShadow: "inset 0 0 0 2px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.2)",
           }}
         />
       ))}
@@ -108,7 +110,7 @@ function Wheels({ count = 2, dark = false }: { count?: number; dark?: boolean })
 
 function Coupler() {
   return (
-    <Box style={{ width: 16, height: 74, display: "flex", alignItems: "center", flexShrink: 0 }}>
+    <Box style={{ width: 16, height: 78, display: "flex", alignItems: "center", flexShrink: 0 }}>
       <Box
         style={{
           width: "100%",
@@ -116,6 +118,7 @@ function Coupler() {
           borderRadius: 3,
           background:
             "linear-gradient(90deg, var(--mantine-color-gray-4), var(--mantine-color-gray-6), var(--mantine-color-gray-4))",
+          boxShadow: "0 1px 1px rgba(0,0,0,0.15)",
         }}
       />
     </Box>
@@ -142,62 +145,109 @@ function LocomotiveCar({
         <Box
           style={{
             position: "relative",
-            height: 74,
-            borderRadius: "16px 22px 10px 10px",
-            background: freightBrand.gradient,
-            boxShadow: freightBrand.shadowSm,
-            border: "1px solid rgba(0,0,0,0.08)",
+            height: 78,
+            borderRadius: "14px 26px 10px 10px",
+            background: `linear-gradient(160deg, ${freightBrand.primaryLight} 0%, ${freightBrand.primary} 45%, ${freightBrand.primaryDark} 100%)`,
+            boxShadow: `${freightBrand.shadowSm}, inset 0 1px 0 rgba(255,255,255,0.25)`,
+            border: "1px solid rgba(0,0,0,0.1)",
             overflow: "hidden",
-            padding: "8px 10px",
+            padding: "10px 10px 8px",
             color: "white",
           }}
         >
-          {/* cab windows */}
+          {/* roofline */}
           <Box
             style={{
               position: "absolute",
-              top: 8,
-              right: 10,
-              display: "flex",
-              gap: 4,
+              top: 0,
+              left: 0,
+              right: 14,
+              height: 5,
+              background: "rgba(0,0,0,0.22)",
+              borderRadius: "14px 0 0 0",
             }}
-          >
-            <Box style={{ width: 14, height: 12, borderRadius: 3, background: "rgba(255,255,255,0.85)" }} />
-            <Box style={{ width: 14, height: 12, borderRadius: 3, background: "rgba(255,255,255,0.6)" }} />
+          />
+          {/* roof vents */}
+          <Box style={{ position: "absolute", top: 1, left: 16, display: "flex", gap: 5 }}>
+            {[0, 1, 2].map((i) => (
+              <Box
+                key={i}
+                style={{
+                  width: 10,
+                  height: 3,
+                  borderRadius: 2,
+                  background: "rgba(255,255,255,0.35)",
+                }}
+              />
+            ))}
+          </Box>
+          {/* cab windows */}
+          <Box style={{ position: "absolute", top: 10, right: 10, display: "flex", gap: 4 }}>
+            <Box
+              style={{
+                width: 15,
+                height: 13,
+                borderRadius: "3px 6px 3px 3px",
+                background: "linear-gradient(135deg, #E8FBFF 0%, #9ED9E8 100%)",
+                border: "1px solid rgba(0,0,0,0.15)",
+              }}
+            />
+            <Box
+              style={{
+                width: 12,
+                height: 13,
+                borderRadius: 3,
+                background: "linear-gradient(135deg, rgba(232,251,255,0.8), rgba(158,217,232,0.6))",
+                border: "1px solid rgba(0,0,0,0.12)",
+              }}
+            />
           </Box>
           {/* headlight */}
           <Box
             style={{
               position: "absolute",
-              bottom: 10,
-              right: 6,
-              width: 7,
-              height: 7,
+              bottom: 14,
+              right: 5,
+              width: 8,
+              height: 8,
               borderRadius: "50%",
               background: "#fde68a",
-              boxShadow: "0 0 8px 2px rgba(253,230,138,0.8)",
+              boxShadow: "0 0 10px 3px rgba(253,230,138,0.9)",
+            }}
+          />
+          {/* hazard stripe on the nose */}
+          <Box
+            style={{
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: 6,
+              background:
+                "repeating-linear-gradient(45deg, #fbbf24 0 7px, #1f2937 7px 14px)",
+              opacity: 0.9,
             }}
           />
           <Group gap={6} wrap="nowrap" align="center">
             <TrainFront size={18} />
-            <Text size="sm" fw={800} style={{ letterSpacing: 0.3 }}>
+            <Text size="sm" fw={800} style={{ letterSpacing: 0.4 }}>
               {code}
             </Text>
           </Group>
-          <Text size="9px" mt={2} style={{ opacity: 0.85 }} lineClamp={1}>
+          <Text size="9px" mt={1} style={{ opacity: 0.85 }} lineClamp={1}>
             {name ?? "Locomotive"}
           </Text>
           {maxPullWeightTons ? (
-            <Group gap={3} wrap="nowrap" mt={4} style={{ opacity: 0.95 }}>
+            <Group gap={3} wrap="nowrap" mt={3} style={{ opacity: 0.95 }}>
               <Gauge size={10} />
-              <Text size="9px" fw={600}>
+              <Text size="9px" fw={700}>
                 {maxPullWeightTons}T pull
               </Text>
             </Group>
           ) : null}
         </Box>
         <Wheels count={3} dark />
-        <Text size="9px" ta="center" c="dimmed" mt={2} fw={700}>
+        <Text size="9px" ta="center" c="dimmed" mt={2} fw={700} style={{ letterSpacing: 1 }}>
           HEAD
         </Text>
       </Box>
@@ -205,6 +255,15 @@ function LocomotiveCar({
   );
 }
 
+const CONTAINER_GRADIENTS = [
+  "linear-gradient(180deg, var(--mantine-color-cyan-5), var(--mantine-color-cyan-7))",
+  "linear-gradient(180deg, var(--mantine-color-blue-5), var(--mantine-color-blue-7))",
+];
+const CONTAINER_BORDERS = [
+  "var(--mantine-color-cyan-8)",
+  "var(--mantine-color-blue-8)",
+];
+
 function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
   const utilization =
     wagon.capacityTons > 0
@@ -219,7 +278,7 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
         wagon.bookingRefs.length ? wagon.bookingRefs.join(", ") : ""
       }${
         wagon.containerNumbers.length ? `\nContainers: ${wagon.containerNumbers.join(", ")}` : ""
-      }${wagon.cargoDescription ? `\n${wagon.cargoDescription}` : ""}`;
+      }${wagon.cargoDescription ? `\n${wagon.cargoDescription}` : ""}\nLoad: ${wagon.assignedWeightTons}/${wagon.capacityTons}T (${utilization}%)`;
 
   // container blocks: one per container number (cap visual at 2 = TEU per wagon)
   const blocks = wagon.containerNumbers.slice(0, 2);
@@ -230,13 +289,15 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
         <Box
           style={{
             position: "relative",
-            height: 74,
+            height: 78,
             borderRadius: 12,
-            background: wagon.isEmpty ? "var(--mantine-color-gray-0)" : "white",
+            background: wagon.isEmpty
+              ? "var(--mantine-color-gray-0)"
+              : "linear-gradient(180deg, white, var(--mantine-color-gray-0))",
             border: wagon.isEmpty
               ? "1.5px dashed var(--mantine-color-gray-4)"
               : "1px solid var(--mantine-color-gray-3)",
-            boxShadow: wagon.isEmpty ? "none" : "0 2px 8px rgba(15,41,27,0.06)",
+            boxShadow: wagon.isEmpty ? "none" : "0 3px 10px rgba(15,41,27,0.08)",
             overflow: "hidden",
             display: "flex",
             flexDirection: "column",
@@ -257,13 +318,13 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
               #{wagon.sequenceNo}
             </Text>
             {wagon.isEmpty ? (
-              <Text size="9px" c="dimmed" fw={600}>
+              <Text size="9px" c="dimmed" fw={700} style={{ letterSpacing: 0.5 }}>
                 EMPTY
               </Text>
             ) : (
               <Group gap={3} wrap="nowrap">
                 {wagon.isBulk ? <Fuel size={11} color={accentVar} /> : <ContainerIcon size={11} color={accentVar} />}
-                <Text size="9px" fw={700} c={`${accent}.7`}>
+                <Text size="9px" fw={700} c={`${accent}.7`} style={{ letterSpacing: 0.4 }}>
                   {wagon.isBulk ? "BULK" : "CONT"}
                 </Text>
               </Group>
@@ -271,7 +332,7 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
           </Group>
 
           {/* body */}
-          <Box style={{ flex: 1, padding: "4px 8px 6px", display: "flex", alignItems: "center" }}>
+          <Box style={{ flex: 1, padding: "4px 8px 4px", display: "flex", alignItems: "center" }}>
             {wagon.isEmpty ? (
               <Group gap={4} justify="center" style={{ width: "100%" }}>
                 <BoxIcon size={14} color="var(--mantine-color-gray-4)" />
@@ -296,11 +357,13 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
                       position: "absolute",
                       inset: 0,
                       width: `${utilization}%`,
-                      background: "linear-gradient(90deg, var(--mantine-color-orange-5), var(--mantine-color-orange-3))",
+                      background:
+                        "linear-gradient(90deg, var(--mantine-color-orange-6), var(--mantine-color-orange-4))",
+                      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.35)",
                     }}
                   />
                 </Box>
-                <Text size="9px" c="dimmed" ta="center">
+                <Text size="9px" c="dimmed" ta="center" fw={600}>
                   {wagon.assignedWeightTons}/{wagon.capacityTons}T
                 </Text>
               </Stack>
@@ -312,17 +375,30 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
                     style={{
                       flex: 1,
                       minWidth: 0,
-                      height: 26,
+                      height: 28,
                       borderRadius: 5,
-                      background: "linear-gradient(180deg, var(--mantine-color-cyan-5), var(--mantine-color-cyan-7))",
-                      border: "1px solid var(--mantine-color-cyan-8)",
+                      background: CONTAINER_GRADIENTS[i % CONTAINER_GRADIENTS.length],
+                      border: `1px solid ${CONTAINER_BORDERS[i % CONTAINER_BORDERS.length]}`,
+                      boxShadow: "inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.15)",
                       display: "flex",
+                      flexDirection: "column",
                       alignItems: "center",
                       justifyContent: "center",
                       padding: "0 3px",
                     }}
                   >
-                    <Text size="8px" fw={700} c="white" truncate>
+                    {/* corrugation lines */}
+                    <Box
+                      style={{
+                        width: "80%",
+                        height: 2,
+                        marginBottom: 2,
+                        background:
+                          "repeating-linear-gradient(90deg, rgba(255,255,255,0.4) 0 3px, transparent 3px 6px)",
+                        borderRadius: 1,
+                      }}
+                    />
+                    <Text size="8px" fw={700} c="white" truncate style={{ maxWidth: "100%" }}>
                       {cn}
                     </Text>
                   </Box>
@@ -331,6 +407,22 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
             )}
           </Box>
 
+          {/* utilization hairline */}
+          {!wagon.isEmpty && !wagon.isBulk ? (
+            <Box style={{ height: 3, background: "var(--mantine-color-gray-1)" }}>
+              <Box
+                style={{
+                  width: `${utilization}%`,
+                  height: "100%",
+                  background:
+                    utilization >= 100
+                      ? "var(--mantine-color-red-5)"
+                      : `var(--mantine-color-${accent}-5)`,
+                }}
+              />
+            </Box>
+          ) : null}
+
           {/* footer */}
           <Box
             style={{
@@ -339,9 +431,16 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
               background: wagon.isEmpty ? "transparent" : "var(--mantine-color-gray-0)",
             }}
           >
-            <Text size="8px" c="dimmed" truncate>
-              {wagon.physicalWagonNumber ?? wagon.wagonTypeCode ?? "Wagon"}
-            </Text>
+            <Group justify="space-between" wrap="nowrap" gap={4}>
+              <Text size="8px" c="dimmed" fw={600} truncate>
+                {wagon.physicalWagonNumber ?? wagon.wagonTypeCode ?? "Wagon"}
+              </Text>
+              {!wagon.isEmpty ? (
+                <Text size="8px" c="gray.6" fw={700} style={{ whiteSpace: "nowrap" }}>
+                  {wagon.assignedWeightTons}T
+                </Text>
+              ) : null}
+            </Group>
           </Box>
         </Box>
         <Wheels count={2} />
@@ -350,6 +449,56 @@ function WagonCar({ wagon }: { wagon: NormalizedWagon }) {
   );
 }
 
+/** Railway track: two rails over evenly-spaced sleepers. */
+function TrackBed() {
+  return (
+    <Box
+      style={{
+        position: "absolute",
+        left: 4,
+        right: 4,
+        bottom: 4,
+        height: 10,
+      }}
+    >
+      {/* sleepers */}
+      <Box
+        style={{
+          position: "absolute",
+          inset: 0,
+          background:
+            "repeating-linear-gradient(90deg, var(--mantine-color-gray-4) 0 5px, transparent 5px 20px)",
+          opacity: 0.6,
+          borderRadius: 2,
+        }}
+      />
+      {/* rails */}
+      <Box
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1,
+          height: 2,
+          borderRadius: 1,
+          background: "var(--mantine-color-gray-6)",
+        }}
+      />
+      <Box
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: 1,
+          height: 2,
+          borderRadius: 1,
+          background: "var(--mantine-color-gray-6)",
+        }}
+      />
+    </Box>
+  );
+}
+
 export function TrainCompositionDiagram({
   locomotive,
   wagons,
@@ -404,8 +553,7 @@ export function TrainCompositionDiagram({
       withBorder
       style={{
         borderColor: "var(--mantine-color-gray-2)",
-        background:
-          "linear-gradient(180deg, var(--mantine-color-gray-0) 0%, white 40%)",
+        background: "white",
       }}
     >
       <Stack gap="md">
@@ -417,17 +565,20 @@ export function TrainCompositionDiagram({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                width: 38,
-                height: 38,
-                borderRadius: 10,
+                width: 40,
+                height: 40,
+                borderRadius: 11,
                 background: freightBrand.gradient,
+                boxShadow: freightBrand.shadowSm,
                 color: "white",
               }}
             >
-              <TrainFront size={20} />
+              <TrainFront size={21} />
             </Box>
             <Stack gap={0}>
-              <Text fw={700}>Train composition</Text>
+              <Text fw={800} style={{ letterSpacing: 0.2 }}>
+                Train composition
+              </Text>
               <Text size="xs" c="dimmed">
                 {trainNumber ? `${trainNumber} · ` : ""}
                 {stats.total} wagons · {stats.assigned} loaded · {stats.empty} empty
@@ -436,35 +587,58 @@ export function TrainCompositionDiagram({
             </Stack>
           </Group>
 
-          <Group gap="xs">
-            <LegendDot color="cyan" label="Container" />
-            <LegendDot color="orange" label="Bulk" />
-            <LegendDot color="gray" label="Empty" />
+          <Group gap="md">
+            <Group
+              gap={6}
+              style={{
+                padding: "4px 12px",
+                borderRadius: 999,
+                background: "var(--mantine-color-gray-0)",
+                border: "1px solid var(--mantine-color-gray-2)",
+              }}
+            >
+              <Text size="xs" fw={700} c="dark.4">
+                {stats.totalWeight}T
+              </Text>
+              <Text size="xs" c="dimmed">
+                of {stats.totalCapacity}T capacity
+              </Text>
+            </Group>
+            <Group gap="xs">
+              <LegendDot color="cyan" label="Container" />
+              <LegendDot color="orange" label="Bulk" />
+              <LegendDot color="gray" label="Empty" />
+            </Group>
           </Group>
         </Group>
 
         {/* Locomotive pull gauge */}
         {stats.pullUtil != null ? (
           <Box
-            p="xs"
+            p="sm"
             style={{
-              borderRadius: 10,
-              background: "var(--mantine-color-green-0)",
+              borderRadius: 12,
+              background: "linear-gradient(135deg, var(--mantine-color-green-0), #F2FBF7)",
               border: "1px solid var(--mantine-color-green-1)",
             }}
           >
-            <Group justify="space-between" mb={4}>
-              <Text size="xs" fw={600} c="green.8">
-                Locomotive load · {stats.totalWeight}T of {locomotive?.maxPullWeightTons}T
-              </Text>
-              <Text size="xs" fw={700} c={stats.pullUtil > 95 ? "red.7" : "green.7"}>
+            <Group justify="space-between" mb={6}>
+              <Group gap={6} wrap="nowrap">
+                <Gauge size={14} color={freightBrand.primary} />
+                <Text size="xs" fw={700} c="green.8">
+                  Locomotive load · {stats.totalWeight}T of {locomotive?.maxPullWeightTons}T
+                </Text>
+              </Group>
+              <Text size="sm" fw={800} c={stats.pullUtil > 95 ? "red.7" : "green.7"}>
                 {stats.pullUtil}%
               </Text>
             </Group>
             <Progress
               value={stats.pullUtil}
-              size="sm"
+              size="md"
               radius="xl"
+              striped={stats.pullUtil > 95}
+              animated={stats.pullUtil > 95}
               color={stats.pullUtil > 95 ? "red" : stats.pullUtil > 80 ? "yellow" : "green"}
             />
           </Box>
@@ -480,20 +654,8 @@ export function TrainCompositionDiagram({
               const turnSide: "left" | "right" = rowIndex % 2 === 0 ? "right" : "left";
               return (
                 <Box key={rowIndex}>
-                  <Box style={{ position: "relative", paddingBottom: 6 }}>
-                    {/* rail under the row */}
-                    <Box
-                      style={{
-                        position: "absolute",
-                        left: 4,
-                        right: 4,
-                        bottom: 8,
-                        height: 4,
-                        borderRadius: 2,
-                        background:
-                          "repeating-linear-gradient(90deg, var(--mantine-color-gray-5) 0 10px, var(--mantine-color-gray-3) 10px 16px)",
-                      }}
-                    />
+                  <Box style={{ position: "relative", paddingBottom: 10 }}>
+                    <TrackBed />
                     <Group
                       gap={0}
                       wrap="nowrap"

apps/edr-freight-web/backoffice/src/components/trainScheduling/batchVisuals.css

@@ -0,0 +1,55 @@
+/* Batch board / batch detail shared visuals */
+
+@keyframes bbPulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(27, 158, 122, 0.5);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(27, 158, 122, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(27, 158, 122, 0);
+  }
+}
+
+.bb-pulse-dot {
+  animation: bbPulse 2.2s ease-out infinite;
+}
+
+.bb-card {
+  transition:
+    transform 0.18s ease,
+    box-shadow 0.18s ease,
+    border-color 0.18s ease;
+}
+
+.bb-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 18px 40px -16px rgba(13, 60, 44, 0.26);
+  border-color: var(--mantine-color-green-3);
+}
+
+.bb-card .bb-arrow {
+  transition: transform 0.18s ease;
+}
+
+.bb-card:hover .bb-arrow {
+  transform: translateX(4px);
+}
+
+.bb-window-accordion .mantine-Accordion-item {
+  border: 1px solid var(--mantine-color-gray-2);
+  border-radius: 14px;
+  background: white;
+  overflow: hidden;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.bb-window-accordion .mantine-Accordion-item[data-active] {
+  border-color: var(--mantine-color-green-3);
+  box-shadow: 0 8px 22px -14px rgba(13, 60, 44, 0.2);
+}
+
+.bb-window-accordion .mantine-Accordion-control:hover {
+  background: var(--mantine-color-green-0);
+}

apps/edr-freight-web/backoffice/src/components/trainScheduling/batchVisuals.tsx

@@ -0,0 +1,215 @@
+import type { ReactNode } from "react";
+import { Box, Group, Progress, Text, Tooltip } from "@mantine/core";
+
+import "./batchVisuals.css";
+
+/**
+ * Shared visual building blocks for the batch board surfaces (list + detail).
+ * Everything keys off the same booking-pipeline color language so the two
+ * pages read as one clean, professional product on a white surface.
+ */
+
+export type BatchCounts = {
+  allocated: number;
+  selectedForBatch: number;
+  ready: number;
+  waiting: number;
+  pendingContract: number;
+  expired: number;
+};
+
+export const PIPELINE_STAGES: ReadonlyArray<{
+  key: keyof BatchCounts;
+  label: string;
+  color: string;
+  hint: string;
+}> = [
+  {
+    key: "allocated",
+    label: "Allocated",
+    color: "green",
+    hint: "Assigned to wagons on the train",
+  },
+  {
+    key: "selectedForBatch",
+    label: "Selected",
+    color: "orange",
+    hint: "Picked by batch — customer notified to pay",
+  },
+  {
+    key: "ready",
+    label: "Ready",
+    color: "teal",
+    hint: "Contract signed — waiting for batch pick",
+  },
+  {
+    key: "waiting",
+    label: "Waiting",
+    color: "blue",
+    hint: "Paid — waiting for a slot",
+  },
+  {
+    key: "pendingContract",
+    label: "Pending contract",
+    color: "gray",
+    hint: "Contract not signed yet",
+  },
+  {
+    key: "expired",
+    label: "Expired",
+    color: "red",
+    hint: "Payment deadline missed",
+  },
+];
+
+export function totalBookingCount(counts: BatchCounts): number {
+  return PIPELINE_STAGES.reduce((sum, stage) => sum + counts[stage.key], 0);
+}
+
+/**
+ * Stacked booking-pipeline bar: one colored segment per batch state, with an
+ * optional dot legend underneath. Reads as a single glanceable funnel.
+ */
+export function BookingPipeline({
+  counts,
+  size = 10,
+  showLegend = true,
+}: {
+  counts: BatchCounts;
+  size?: number;
+  showLegend?: boolean;
+}) {
+  const total = totalBookingCount(counts);
+  const stages = PIPELINE_STAGES.filter((s) => counts[s.key] > 0);
+
+  if (!total) {
+    return (
+      <Box>
+        <Progress value={0} size={size} radius="xl" />
+        <Text size="xs" c="dimmed" mt={6}>
+          No bookings yet
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Progress.Root size={size} radius="xl">
+        {stages.map((stage) => (
+          <Tooltip
+            key={stage.key}
+            label={`${counts[stage.key]} ${stage.label.toLowerCase()} — ${stage.hint}`}
+            withArrow
+          >
+            <Progress.Section
+              value={(counts[stage.key] / total) * 100}
+              color={stage.color}
+            />
+          </Tooltip>
+        ))}
+      </Progress.Root>
+      {showLegend ? (
+        <Group gap={12} mt={9} wrap="wrap">
+          {stages.map((stage) => (
+            <Group key={stage.key} gap={5} wrap="nowrap">
+              <Box
+                w={8}
+                h={8}
+                style={{
+                  borderRadius: 999,
+                  background: `var(--mantine-color-${stage.color}-6)`,
+                  flexShrink: 0,
+                }}
+              />
+              <Text size="xs" c="dimmed">
+                <Text component="span" size="xs" fw={700} c="dark.4">
+                  {counts[stage.key]}
+                </Text>{" "}
+                {stage.label.toLowerCase()}
+              </Text>
+            </Group>
+          ))}
+        </Group>
+      ) : null}
+    </Box>
+  );
+}
+
+const WINDOW_META: Record<string, { color: string; label: string; pulse: boolean }> = {
+  OPEN: { color: "green", label: "Window open", pulse: true },
+  FULL: { color: "orange", label: "Full", pulse: false },
+  CLOSED: { color: "gray", label: "Closed", pulse: false },
+};
+
+/**
+ * Booking-window status pill with a status dot (pulsing while OPEN), styled for
+ * a clean white surface.
+ */
+export function WindowStatusPill({ status }: { status: string }) {
+  const meta = WINDOW_META[status] ?? { color: "gray", label: status, pulse: false };
+  return (
+    <Group
+      gap={6}
+      wrap="nowrap"
+      style={{
+        display: "inline-flex",
+        padding: "4px 11px",
+        borderRadius: 999,
+        background: `var(--mantine-color-${meta.color}-0)`,
+        border: `1px solid var(--mantine-color-${meta.color}-2)`,
+      }}
+    >
+      <Box
+        w={7}
+        h={7}
+        className={meta.pulse ? "bb-pulse-dot" : undefined}
+        style={{
+          borderRadius: 999,
+          flexShrink: 0,
+          background: `var(--mantine-color-${meta.color}-6)`,
+        }}
+      />
+      <Text
+        size="xs"
+        fw={700}
+        c={`${meta.color}.8`}
+        style={{ letterSpacing: 0.3, lineHeight: 1, whiteSpace: "nowrap" }}
+      >
+        {meta.label}
+      </Text>
+    </Group>
+  );
+}
+
+/**
+ * Small neutral info chip used in the page headers (date, loco, status, …).
+ * Clean light surface that reads well on white.
+ */
+export function HeroChip({
+  icon,
+  children,
+}: {
+  icon?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Group
+      gap={6}
+      wrap="nowrap"
+      style={{
+        display: "inline-flex",
+        padding: "4px 10px",
+        borderRadius: 8,
+        background: "var(--mantine-color-gray-0)",
+        border: "1px solid var(--mantine-color-gray-2)",
+        color: "var(--mantine-color-gray-7)",
+      }}
+    >
+      {icon}
+      <Text size="xs" fw={600} c="gray.7" style={{ whiteSpace: "nowrap" }}>
+        {children}
+      </Text>
+    </Group>
+  );
+}