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,
+            width: 13,
-            height: 12,
+            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,
+            height: 78,
-            borderRadius: "16px 22px 10px 10px",
+            borderRadius: "14px 26px 10px 10px",
-            background: freightBrand.gradient,
+            background: `linear-gradient(160deg, ${freightBrand.primaryLight} 0%, ${freightBrand.primary} 45%, ${freightBrand.primaryDark} 100%)`,
-            boxShadow: freightBrand.shadowSm,
+            boxShadow: `${freightBrand.shadowSm}, inset 0 1px 0 rgba(255,255,255,0.25)`,
-            border: "1px solid rgba(0,0,0,0.08)",
+            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,
+              top: 0,
-              right: 10,
+              left: 0,
-              display: "flex",
+              right: 14,
-              gap: 4,
+              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)" }} />
+          {/* roof vents */}
-            <Box style={{ width: 14, height: 12, borderRadius: 3, background: "rgba(255,255,255,0.6)" }} />
+          <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,
+              bottom: 14,
-              right: 6,
+              right: 5,
-              width: 7,
+              width: 8,
-              height: 7,
+              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))",
+                      background: CONTAINER_GRADIENTS[i % CONTAINER_GRADIENTS.length],
-                      border: "1px solid var(--mantine-color-cyan-8)",
+                      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>
+            <Group justify="space-between" wrap="nowrap" gap={4}>
-              {wagon.physicalWagonNumber ?? wagon.wagonTypeCode ?? "Wagon"}
+              <Text size="8px" c="dimmed" fw={600} truncate>
-            </Text>
+                {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:
+        background: "white",
-          "linear-gradient(180deg, var(--mantine-color-gray-0) 0%, white 40%)",
       }}
     >
       <Stack gap="md">
@@ -417,17 +565,20 @@ export function TrainCompositionDiagram({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                width: 38,
+                width: 40,
-                height: 38,
+                height: 40,
-                borderRadius: 10,
+                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">
+          <Group gap="md">
-            <LegendDot color="cyan" label="Container" />
+            <Group
-            <LegendDot color="orange" label="Bulk" />
+              gap={6}
-            <LegendDot color="gray" label="Empty" />
+              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,
+              borderRadius: 12,
-              background: "var(--mantine-color-green-0)",
+              background: "linear-gradient(135deg, var(--mantine-color-green-0), #F2FBF7)",
               border: "1px solid var(--mantine-color-green-1)",
             }}
           >
-            <Group justify="space-between" mb={4}>
+            <Group justify="space-between" mb={6}>
-              <Text size="xs" fw={600} c="green.8">
+              <Group gap={6} wrap="nowrap">
-                Locomotive load · {stats.totalWeight}T of {locomotive?.maxPullWeightTons}T
+                <Gauge size={14} color={freightBrand.primary} />
-              </Text>
+                <Text size="xs" fw={700} c="green.8">
-              <Text size="xs" fw={700} c={stats.pullUtil > 95 ? "red.7" : "green.7"}>
+                  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 }}>
+                  <Box style={{ position: "relative", paddingBottom: 10 }}>
-                    {/* rail under the row */}
+                    <TrackBed />
-                    <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)",
-                      }}
-                    />
                     <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>
+  );
+}

apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchBoardPage.tsx

@@ -1,30 +1,43 @@
+import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import {
-  Badge,
+  Alert,
   Box,
   Button,
   Container,
   Group,
-  Loader,
   Paper,
-  Progress,
+  RingProgress,
   SimpleGrid,
+  Skeleton,
   Stack,
   Text,
   ThemeIcon,
   Title,
-  Tooltip,
 } from "@mantine/core";
 import {
+  AlertTriangle,
   ArrowRight,
+  CalendarDays,
+  Inbox,
   LayoutGrid,
+  Package,
   RefreshCw,
   Ruler,
   Train,
+  TrainFront,
   Weight,
 } from "lucide-react";
 
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import {
+  BookingPipeline,
+  HeroChip,
+  totalBookingCount,
+  WindowStatusPill,
+} from "@/components/trainScheduling/batchVisuals";
+import { RouteCorridor, StatTile } from "@/components/trainScheduling/scheduleVisuals";
+import { FREIGHT_BRAND, FREIGHT_BRAND_DARK } from "@/theme/freight-brand";
 import { useBatchBoard } from "@/hooks/trainScheduling/useTrainScheduling";
 import type { BatchBoardSchedule } from "@/types/trainScheduling";
 
@@ -34,187 +47,235 @@ const fmtTons = (n: number) =>
 const fmtMeters = (n: number) =>
   `${n.toLocaleString(undefined, { maximumFractionDigits: 1 })} m`;
 
+const fmtScheduleDate = (iso: string | null) =>
+  iso
+    ? new Intl.DateTimeFormat("en-GB", {
+        weekday: "short",
+        day: "2-digit",
+        month: "short",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+        timeZone: "Africa/Addis_Ababa",
+      }).format(new Date(iso)) + " EAT"
+    : "No date";
+
+function ringColor(pct: number) {
+  if (pct >= 100) return "red";
+  if (pct >= 85) return "orange";
+  return "green";
+}
+
+/** Capacity ring that keeps the explicit allocated/max numbers underneath. */
+function CapacityRing({
+  pct,
+  label,
+  current,
+  max,
+}: {
+  pct: number;
+  label: string;
+  current: string;
+  max: string;
+}) {
+  const clamped = Math.min(100, Math.max(0, pct));
+  const color = ringColor(pct);
+  return (
+    <Stack gap={4} align="center" style={{ flex: 1 }}>
+      <RingProgress
+        size={104}
+        thickness={9}
+        roundCaps
+        sections={[{ value: clamped, color }]}
+        rootColor="var(--mantine-color-gray-1)"
+        label={
+          <Stack gap={0} align="center">
+            <Text ta="center" size="lg" fw={800} c={`${color}.7`} lh={1}>
+              {Math.round(pct)}%
+            </Text>
+            <Text ta="center" size="9px" c="dimmed" fw={600}>
+              {label}
+            </Text>
+          </Stack>
+        }
+      />
+      <Stack gap={0} align="center">
+        <Text size="xs" fw={700} c="dark.4">
+          {current}
+        </Text>
+        <Text size="xs" c="dimmed">
+          of {max}
+        </Text>
+      </Stack>
+    </Stack>
+  );
+}
+
 function ScheduleCard({ schedule }: { schedule: BatchBoardSchedule }) {
   const navigate = useNavigate();
   const { capacity, counts, locomotive } = schedule;
+
   const lengthPct =
     capacity.maxLengthMeters && capacity.maxLengthMeters > 0
       ? (capacity.allocatedLengthMeters / capacity.maxLengthMeters) * 100
-      : 0;
+      : null;
   const weightPct =
     capacity.maxWeightTons && capacity.maxWeightTons > 0
       ? (capacity.usedWeightTons / capacity.maxWeightTons) * 100
-      : 0;
+      : null;
 
-  const windowColor =
+  const totalBookings = totalBookingCount(counts);
-    schedule.bookingWindowStatus === "OPEN"
-      ? "green"
-      : schedule.bookingWindowStatus === "FULL"
-        ? "orange"
-        : "gray";
-
-  const totalBookings =
-    counts.allocated +
-    counts.selectedForBatch +
-    counts.ready +
-    counts.waiting +
-    counts.pendingContract +
-    counts.expired;
 
   return (
     <Paper
+      className="bb-card"
       radius="lg"
       withBorder
       style={{
         borderColor: "var(--mantine-color-gray-2)",
+        background: "white",
         overflow: "hidden",
         cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
       }}
       onClick={() =>
         navigate(`/dashboard/operations/batch-board/${schedule.scheduleId}`)
       }
     >
+      {/* thin brand accent line */}
       <Box
         style={{
-          height: 3,
+          height: 4,
-          background:
+          background: `linear-gradient(90deg, ${FREIGHT_BRAND}, var(--mantine-color-teal-6))`,
-            "linear-gradient(90deg, var(--mantine-color-green-5), var(--mantine-color-teal-7))",
         }}
       />
-      <Stack gap="sm" p="md">
+
+      <Stack gap="md" p="lg" style={{ flex: 1 }}>
+        {/* header */}
         <Group justify="space-between" align="flex-start" wrap="nowrap">
           <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
-            <ThemeIcon size={38} radius="md" variant="light" color="green">
+            <ThemeIcon size={44} radius="md" variant="light" color="green">
-              <Train size={19} />
+              <Train size={22} />
             </ThemeIcon>
             <Box style={{ minWidth: 0 }}>
-              <Text fw={700} size="sm" truncate>
+              <Text fw={800} size="md" truncate style={{ letterSpacing: 0.2 }}>
                 {schedule.trainNumber ?? schedule.routeName ?? "Schedule"}
               </Text>
-              <Text size="xs" c="dimmed" truncate>
+              <Text
-                {schedule.origin ?? "—"} → {schedule.destination ?? "—"}
+                size="10px"
-              </Text>
+                fw={700}
-              <Text size="xs" c="dimmed">
+                tt="uppercase"
-                {schedule.scheduleDate
+                c="dimmed"
-                  ? new Date(schedule.scheduleDate).toLocaleString()
+                style={{ letterSpacing: 0.8 }}
-                  : "No date"}
+              >
+                Freight schedule · {schedule.status}
               </Text>
             </Box>
           </Group>
-          <Stack gap={4} align="flex-end">
+          <WindowStatusPill status={schedule.bookingWindowStatus} />
-            <Badge variant="light" color={windowColor} radius="sm">
-              {schedule.bookingWindowStatus}
-            </Badge>
-            <Badge variant="outline" color="gray" radius="sm">
-              {schedule.status}
-            </Badge>
-          </Stack>
         </Group>
 
-        {locomotive ? (
+        <RouteCorridor
-          <Text size="xs" c="dimmed">
+          origin={schedule.origin}
-            Loco {locomotive.code} · max {fmtTons(locomotive.maxPullWeightTons)} ·{" "}
+          destination={schedule.destination}
-            {locomotive.maxTrainLengthMeters} m
+          variant="compact"
-          </Text>
+        />
-        ) : (
-          <Badge variant="light" color="red" radius="sm">
-            No locomotive — won't allocate
-          </Badge>
-        )}
 
-        <Box>
+        <Group gap={6} wrap="wrap">
-          <Group justify="space-between" mb={2}>
+          <HeroChip icon={<CalendarDays size={12} />}>
-            <Text size="xs" c="dimmed">
+            {fmtScheduleDate(schedule.scheduleDate)}
-              Allocated wagons
+          </HeroChip>
-            </Text>
+          {locomotive ? (
-            <Text size="xs" fw={600}>
+            <HeroChip icon={<TrainFront size={12} />}>
-              {capacity.allocatedWagons}
+              {locomotive.code} · {fmtTons(locomotive.maxPullWeightTons)}
-            </Text>
+            </HeroChip>
-          </Group>
-        </Box>
-        {capacity.maxLengthMeters ? (
-          <Box>
-            <Group justify="space-between" mb={2}>
-              <Group gap={4}>
-                <Ruler size={12} />
-                <Text size="xs" c="dimmed">
-                  Train length
-                </Text>
-              </Group>
-              <Text size="xs" fw={600}>
-                {fmtMeters(capacity.allocatedLengthMeters)}/{fmtMeters(capacity.maxLengthMeters)}
-              </Text>
-            </Group>
-            <Progress
-              value={lengthPct}
-              color={lengthPct >= 100 ? "orange" : "blue"}
-              radius="xl"
-              size="sm"
-            />
-          </Box>
-        ) : null}
-        {capacity.maxWeightTons ? (
-          <Box>
-            <Group justify="space-between" mb={2}>
-              <Group gap={4}>
-                <Weight size={12} />
-                <Text size="xs" c="dimmed">
-                  Weight
-                </Text>
-              </Group>
-              <Text size="xs" fw={600}>
-                {fmtTons(capacity.usedWeightTons)}/{fmtTons(capacity.maxWeightTons)}
-              </Text>
-            </Group>
-            <Progress
-              value={weightPct}
-              color={weightPct >= 100 ? "red" : "teal"}
-              radius="xl"
-              size="sm"
-            />
-          </Box>
-        ) : null}
-
-        <Group gap={6}>
-          <Tooltip label="Allocated to the train">
-            <Badge variant="light" color="green" radius="sm">
-              {counts.allocated} allocated
-            </Badge>
-          </Tooltip>
-          <Tooltip label="Picked by batch — customer notified to pay">
-            <Badge variant="light" color="orange" radius="sm">
-              {counts.selectedForBatch} selected
-            </Badge>
-          </Tooltip>
-          <Tooltip label="Contract signed — waiting for batch pick">
-            <Badge variant="light" color="teal" radius="sm">
-              {counts.ready} ready
-            </Badge>
-          </Tooltip>
-          <Tooltip label="Paid, waiting for a slot">
-            <Badge variant="light" color="blue" radius="sm">
-              {counts.waiting} waiting
-            </Badge>
-          </Tooltip>
-          {counts.expired ? (
-            <Badge variant="light" color="red" radius="sm">
-              {counts.expired} expired
-            </Badge>
           ) : null}
         </Group>
 
-        <Text size="xs" c="dimmed" ta="center">
+        {!locomotive ? (
-          {totalBookings
+          <Alert
-            ? `${totalBookings} booking${totalBookings === 1 ? "" : "s"} · click for batch windows`
+            color="red"
-            : "No bookings yet · click to open"}
+            radius="md"
-        </Text>
+            icon={<AlertTriangle size={15} />}
+            py={6}
+            styles={{ message: { fontSize: 12 } }}
+          >
+            No locomotive assigned — wagon allocation cannot run.
+          </Alert>
+        ) : null}
 
+        {/* capacity: weight + length rings + wagons (numbers preserved) */}
+        <Box
+          py="sm"
+          px="xs"
+          style={{
+            borderRadius: 14,
+            background: "var(--mantine-color-gray-0)",
+            border: "1px solid var(--mantine-color-gray-1)",
+          }}
+        >
+          <Group justify="space-around" align="center" wrap="nowrap" gap="xs">
+            {weightPct != null ? (
+              <CapacityRing
+                pct={weightPct}
+                label="WEIGHT"
+                current={fmtTons(capacity.usedWeightTons)}
+                max={fmtTons(capacity.maxWeightTons ?? 0)}
+              />
+            ) : null}
+
+            <Stack gap={0} align="center" style={{ flex: 1 }}>
+              <ThemeIcon size={34} radius="md" variant="light" color="green">
+                <Package size={17} />
+              </ThemeIcon>
+              <Text fw={800} size="26px" c="dark.5" lh={1.1} mt={6}>
+                {capacity.allocatedWagons}
+              </Text>
+              <Text size="9px" fw={700} c="gray.6" tt="uppercase" style={{ letterSpacing: 0.5 }}>
+                Wagons
+              </Text>
+              <Text size="xs" c="dimmed">
+                allocated
+              </Text>
+            </Stack>
+
+            {lengthPct != null ? (
+              <CapacityRing
+                pct={lengthPct}
+                label="LENGTH"
+                current={fmtMeters(capacity.allocatedLengthMeters)}
+                max={fmtMeters(capacity.maxLengthMeters ?? 0)}
+              />
+            ) : null}
+          </Group>
+        </Box>
+
+        {/* booking pipeline */}
+        <Box>
+          <Group justify="space-between" mb={6}>
+            <Group gap={5} wrap="nowrap">
+              <Package size={13} color="var(--mantine-color-gray-6)" />
+              <Text size="xs" fw={700} c="gray.7" tt="uppercase" style={{ letterSpacing: 0.4 }}>
+                Booking pipeline
+              </Text>
+            </Group>
+            <Text size="xs" fw={700} c="dark.4">
+              {totalBookings} booking{totalBookings === 1 ? "" : "s"}
+            </Text>
+          </Group>
+          <BookingPipeline counts={counts} />
+        </Box>
+      </Stack>
+
+      {/* CTA */}
+      <Box px="lg" pb="lg">
         <Button
-          variant="light"
+          fullWidth
-          color="green"
           radius="md"
-          size="compact-sm"
+          variant="gradient"
-          rightSection={<ArrowRight size={15} />}
+          gradient={{ from: FREIGHT_BRAND, to: FREIGHT_BRAND_DARK, deg: 135 }}
+          rightSection={<ArrowRight size={16} className="bb-arrow" />}
           onClick={(e) => {
             e.stopPropagation();
             navigate(`/dashboard/operations/batch-board/${schedule.scheduleId}`);
@@ -222,6 +283,26 @@ function ScheduleCard({ schedule }: { schedule: BatchBoardSchedule }) {
         >
           View batch windows
         </Button>
+      </Box>
+    </Paper>
+  );
+}
+
+function CardSkeleton() {
+  return (
+    <Paper radius="lg" withBorder style={{ overflow: "hidden" }}>
+      <Skeleton height={4} radius={0} />
+      <Stack gap="md" p="lg">
+        <Group justify="space-between">
+          <Group gap="sm">
+            <Skeleton height={44} width={44} radius="md" />
+            <Skeleton height={32} width={120} />
+          </Group>
+          <Skeleton height={22} width={90} radius="xl" />
+        </Group>
+        <Skeleton height={120} radius="md" />
+        <Skeleton height={10} radius="xl" />
+        <Skeleton height={36} radius="md" />
       </Stack>
     </Paper>
   );
@@ -231,35 +312,58 @@ export default function BatchBoardPage() {
   const { data, isLoading, isFetching, refetch } = useBatchBoard();
   const schedules = data ?? [];
 
+  const summary = useMemo(() => {
+    const openWindows = schedules.filter((s) => s.bookingWindowStatus === "OPEN").length;
+    const totalBookings = schedules.reduce((sum, s) => sum + totalBookingCount(s.counts), 0);
+    const totalWagons = schedules.reduce((sum, s) => sum + s.capacity.allocatedWagons, 0);
+    return { openWindows, totalBookings, totalWagons };
+  }, [schedules]);
+
   return (
-    <Container size="xl" py="lg">
+    <Container fluid py="lg" px="xl">
       <Breadcrumbs items={[{ label: "Operations" }, { label: "Batch board" }]} />
 
+      {/* Hero — clean white */}
       <Paper
         radius="xl"
         p="xl"
         mt="md"
+        withBorder
         style={{
-          background: "#ffffff",
+          borderColor: "var(--mantine-color-gray-2)",
-          border: "1px solid var(--mantine-color-gray-2)",
+          background: "white",
           boxShadow: "0 1px 3px rgba(15,23,42,0.04)",
         }}
       >
-        <Group justify="space-between" align="flex-start" wrap="wrap">
+        <Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
           <Group gap="md" align="center" wrap="nowrap">
-            <ThemeIcon size={54} radius="lg" variant="light" color="green">
+            <ThemeIcon size={56} radius="lg" variant="light" color="green">
-              <LayoutGrid size={26} />
+              <LayoutGrid size={28} />
             </ThemeIcon>
             <Stack gap={2}>
-              <Text size="xs" fw={700} c="green.7" tt="uppercase" style={{ letterSpacing: 1 }}>
+              <Group gap={8}>
-                Allocation · Live
+                <Text
-              </Text>
+                  size="xs"
-              <Title order={2} fw={700} style={{ color: "#0f172a" }}>
+                  fw={700}
+                  c="green.7"
+                  tt="uppercase"
+                  style={{ letterSpacing: 1.2 }}
+                >
+                  Allocation · Live
+                </Text>
+                <Box
+                  w={7}
+                  h={7}
+                  className="bb-pulse-dot"
+                  style={{ borderRadius: 999, background: FREIGHT_BRAND }}
+                />
+              </Group>
+              <Title order={2} fw={800} style={{ color: "#0f172a", letterSpacing: 0.2 }}>
                 Batch board
               </Title>
-              <Text size="sm" c="dimmed" maw={560}>
+              <Text size="sm" c="dimmed" maw={580}>
-                Active schedules — click a card to see EAT 3-hour batch windows, bookings, and
+                Active schedules — open a card to see EAT 3-hour batch windows, bookings,
-                wagon allocation status.
+                and live wagon allocation.
               </Text>
             </Stack>
           </Group>
@@ -273,20 +377,64 @@ export default function BatchBoardPage() {
             Refresh
           </Button>
         </Group>
+
+        <SimpleGrid cols={{ base: 1, xs: 3 }} spacing="md" mt="lg">
+          <StatTile
+            icon={Train}
+            label="Active schedules"
+            value={isLoading ? "…" : schedules.length}
+            hint="on the board right now"
+          />
+          <StatTile
+            icon={CalendarDays}
+            label="Open windows"
+            value={isLoading ? "…" : summary.openWindows}
+            hint="accepting bookings"
+          />
+          <StatTile
+            icon={Package}
+            label="Bookings in play"
+            value={isLoading ? "…" : summary.totalBookings}
+            hint={`${summary.totalWagons} wagons allocated`}
+          />
+        </SimpleGrid>
       </Paper>
 
       {isLoading ? (
-        <Group justify="center" py="xl">
+        <SimpleGrid cols={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing="lg" mt="lg">
-          <Loader color="green" />
+          <CardSkeleton />
-        </Group>
+          <CardSkeleton />
+          <CardSkeleton />
+        </SimpleGrid>
       ) : schedules.length === 0 ? (
-        <Paper radius="lg" withBorder p="xl" mt="lg" bg="gray.0">
+        <Paper radius="lg" withBorder p={48} mt="lg" bg="gray.0">
-          <Text ta="center" c="dimmed">
+          <Stack align="center" gap="sm">
-            No active schedules to show.
+            <Box
-          </Text>
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 64,
+                height: 64,
+                borderRadius: 20,
+                background: "white",
+                border: "1px solid var(--mantine-color-gray-2)",
+                boxShadow: "0 4px 12px rgba(15,23,42,0.06)",
+              }}
+            >
+              <Inbox size={28} color="var(--mantine-color-gray-5)" />
+            </Box>
+            <Text fw={700} c="gray.7">
+              No active schedules
+            </Text>
+            <Text size="sm" c="dimmed" ta="center" maw={380}>
+              Schedules with an open booking window appear here as cards. Create or activate
+              a schedule to get started.
+            </Text>
+          </Stack>
         </Paper>
       ) : (
-        <SimpleGrid cols={{ base: 1, md: 2, xl: 3 }} spacing="lg" mt="lg">
+        <SimpleGrid cols={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing="lg" mt="lg">
           {schedules.map((s) => (
             <ScheduleCard key={s.scheduleId} schedule={s} />
           ))}

apps/edr-freight-web/backoffice/src/pages/trainScheduling/BatchScheduleDetailPage.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import type { ReactNode } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import {
   Accordion,
@@ -10,7 +11,6 @@ import {
   Group,
   Loader,
   Paper,
-  Progress,
   SimpleGrid,
   Stack,
   Table,
@@ -22,20 +22,33 @@ import {
 import {
   AlertTriangle,
   ArrowLeft,
+  Boxes,
+  CalendarDays,
   CheckCircle2,
   Clock,
+  FileSignature,
   Hourglass,
   Layers,
+  Package,
   PlayCircle,
   RefreshCw,
-  Train,
-  Weight,
   Ruler,
+  Train,
+  TrainFront,
+  Weight,
   XCircle,
 } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
 
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { TrainCompositionDiagram } from "@/components/trainScheduling/TrainCompositionDiagram";
+import {
+  BookingPipeline,
+  HeroChip,
+  totalBookingCount,
+  WindowStatusPill,
+} from "@/components/trainScheduling/batchVisuals";
+import { RouteCorridor, scheduleBrand } from "@/components/trainScheduling/scheduleVisuals";
 import {
   useBatchBoardDetail,
   useRunAllocation,
@@ -89,6 +102,15 @@ const fmtDateTime = (iso: string | null) =>
       }).format(new Date(iso))
     : "—";
 
+const initials = (name: string) =>
+  name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w[0])
+    .join("")
+    .toUpperCase() || "?";
+
 function StateBadge({ state }: { state: BatchBoardBookingState }) {
   const meta = STATE_META[state];
   const Icon = meta.icon;
@@ -132,73 +154,166 @@ function BookingTable({ bookings }: { bookings: BatchBoardBookingDetail[] }) {
     );
   }
 
+  const th = (label: string) => (
+    <Table.Th
+      style={{
+        fontSize: 11,
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: 0.5,
+        color: "var(--mantine-color-gray-6)",
+        background: "var(--mantine-color-gray-0)",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {label}
+    </Table.Th>
+  );
+
   return (
-    <Table striped highlightOnHover withTableBorder>
+    <Box
-      <Table.Thead>
+      style={{
-        <Table.Tr>
+        border: "1px solid var(--mantine-color-gray-2)",
-          <Table.Th>Reference</Table.Th>
+        borderRadius: 12,
-          <Table.Th>Customer</Table.Th>
+        overflow: "auto",
-          <Table.Th>Contract signed</Table.Th>
+      }}
-          <Table.Th>Selected for batch</Table.Th>
+    >
-          <Table.Th>Capacity</Table.Th>
+      <Table highlightOnHover verticalSpacing="sm" horizontalSpacing="md" miw={760}>
-          <Table.Th>Batch state</Table.Th>
+        <Table.Thead>
-          <Table.Th>Wagon allocation</Table.Th>
+          <Table.Tr>
-        </Table.Tr>
+            {th("Reference")}
-      </Table.Thead>
+            {th("Customer")}
-      <Table.Tbody>
+            {th("Contract signed")}
-        {bookings.map((b) => (
+            {th("Selected for batch")}
-          <Table.Tr key={b.id}>
+            {th("Capacity")}
-            <Table.Td>
+            {th("Batch state")}
-              <Group gap={6} wrap="nowrap">
+            {th("Wagon allocation")}
-                <Text size="sm" fw={600}>
-                  {b.reference}
-                </Text>
-                {b.isGovernment ? (
-                  <Badge size="xs" variant="light" color="grape">
-                    Gov
-                  </Badge>
-                ) : null}
-              </Group>
-            </Table.Td>
-            <Table.Td>
-              <Text size="sm" c="dimmed">
-                {b.company}
-              </Text>
-            </Table.Td>
-            <Table.Td>
-              <Text size="sm">{fmtDateTime(b.fullyExecutedAt)} EAT</Text>
-            </Table.Td>
-            <Table.Td>
-              {b.selectedForBatchAt ? (
-                <>
-                  <Text size="sm">{fmtDateTime(b.selectedForBatchAt)} EAT</Text>
-                  {b.paymentDeadline ? (
-                    <Text size="xs" c="orange">
-                      Pay by {fmtDateTime(b.paymentDeadline)} EAT
-                    </Text>
-                  ) : null}
-                </>
-              ) : (
-                <Text size="sm" c="dimmed">
-                  —
-                </Text>
-              )}
-            </Table.Td>
-            <Table.Td>
-              <Text size="sm">
-                {b.wagons}w · {fmtTons(b.weightTons)}
-              </Text>
-            </Table.Td>
-            <Table.Td>
-              <StateBadge state={b.state} />
-            </Table.Td>
-            <Table.Td>
-              <AllocationBadge status={b.allocationStatus} issue={b.allocationIssue} />
-            </Table.Td>
           </Table.Tr>
-        ))}
+        </Table.Thead>
-      </Table.Tbody>
+        <Table.Tbody>
-    </Table>
+          {bookings.map((b) => (
+            <Table.Tr key={b.id}>
+              <Table.Td>
+                <Group gap={6} wrap="nowrap">
+                  <Text size="sm" fw={700} c="dark.5">
+                    {b.reference}
+                  </Text>
+                  {b.isGovernment ? (
+                    <Badge size="xs" variant="light" color="grape">
+                      Gov
+                    </Badge>
+                  ) : null}
+                </Group>
+              </Table.Td>
+              <Table.Td>
+                <Group gap={8} wrap="nowrap">
+                  <Box
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: 26,
+                      height: 26,
+                      borderRadius: 8,
+                      flexShrink: 0,
+                      background: "var(--mantine-color-green-0)",
+                      border: "1px solid var(--mantine-color-green-1)",
+                    }}
+                  >
+                    <Text size="10px" fw={800} c="green.8">
+                      {initials(b.company)}
+                    </Text>
+                  </Box>
+                  <Text size="sm" c="gray.7" truncate>
+                    {b.company}
+                  </Text>
+                </Group>
+              </Table.Td>
+              <Table.Td>
+                <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+                  {fmtDateTime(b.fullyExecutedAt)} EAT
+                </Text>
+              </Table.Td>
+              <Table.Td>
+                {b.selectedForBatchAt ? (
+                  <>
+                    <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+                      {fmtDateTime(b.selectedForBatchAt)} EAT
+                    </Text>
+                    {b.paymentDeadline ? (
+                      <Text size="xs" c="orange.7" fw={600} style={{ whiteSpace: "nowrap" }}>
+                        Pay by {fmtDateTime(b.paymentDeadline)} EAT
+                      </Text>
+                    ) : null}
+                  </>
+                ) : (
+                  <Text size="sm" c="dimmed">
+                    —
+                  </Text>
+                )}
+              </Table.Td>
+              <Table.Td>
+                <Group gap={4} wrap="nowrap">
+                  <Badge variant="default" radius="sm" size="sm">
+                    {b.wagons}w
+                  </Badge>
+                  <Badge variant="default" radius="sm" size="sm">
+                    {fmtTons(b.weightTons)}
+                  </Badge>
+                </Group>
+              </Table.Td>
+              <Table.Td>
+                <StateBadge state={b.state} />
+              </Table.Td>
+              <Table.Td>
+                <AllocationBadge status={b.allocationStatus} issue={b.allocationIssue} />
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </Box>
+  );
+}
+
+function WindowCountChips({ counts }: { counts: BatchWindowGroup["counts"] }) {
+  const chips: Array<{ value: number; color: string; label: string }> = [
+    { value: counts.allocated, color: "green", label: "allocated" },
+    { value: counts.selectedForBatch, color: "orange", label: "selected" },
+    { value: counts.ready, color: "teal", label: "ready" },
+    { value: counts.waiting, color: "blue", label: "waiting" },
+    { value: counts.expired, color: "red", label: "expired" },
+  ].filter((c) => c.value > 0);
+
+  return (
+    <Group gap={5} wrap="nowrap">
+      {chips.map((c) => (
+        <Tooltip key={c.label} label={`${c.value} ${c.label}`} withArrow>
+          <Group
+            gap={4}
+            wrap="nowrap"
+            style={{
+              padding: "2px 8px",
+              borderRadius: 999,
+              background: `var(--mantine-color-${c.color}-0)`,
+              border: `1px solid var(--mantine-color-${c.color}-2)`,
+            }}
+          >
+            <Box
+              w={6}
+              h={6}
+              style={{
+                borderRadius: 999,
+                background: `var(--mantine-color-${c.color}-6)`,
+              }}
+            />
+            <Text size="xs" fw={700} c={`${c.color}.8`}>
+              {c.value}
+            </Text>
+          </Group>
+        </Tooltip>
+      ))}
+    </Group>
   );
 }
 
@@ -211,19 +326,51 @@ function WindowAccordionItem({ window }: { window: BatchWindowGroup }) {
   return (
     <Accordion.Item value={window.key}>
       <Accordion.Control>
-        <Group justify="space-between" wrap="nowrap" pr="md">
+        <Group justify="space-between" wrap="nowrap" pr="md" gap="sm">
-          <Text fw={600} size="sm">
+          <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
-            {window.label}
+            <Box
-          </Text>
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 34,
+                height: 34,
+                borderRadius: 10,
+                flexShrink: 0,
+                background: total
+                  ? "var(--mantine-color-green-0)"
+                  : "var(--mantine-color-gray-0)",
+                border: total
+                  ? "1px solid var(--mantine-color-green-2)"
+                  : "1px solid var(--mantine-color-gray-2)",
+                color: total
+                  ? "var(--mantine-color-green-7)"
+                  : "var(--mantine-color-gray-5)",
+              }}
+            >
+              <Clock size={16} />
+            </Box>
+            <Box style={{ minWidth: 0 }}>
+              <Text fw={700} size="sm" truncate>
+                {window.label}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {total ? `${total} booking${total === 1 ? "" : "s"}` : "Empty window"}
+              </Text>
+            </Box>
+          </Group>
           <Group gap={6} wrap="nowrap">
             {hasIssues ? (
-              <Badge variant="light" color="red" size="sm">
+              <Badge
+                variant="light"
+                color="red"
+                size="sm"
+                leftSection={<AlertTriangle size={10} />}
+              >
                 Issues
               </Badge>
             ) : null}
-            <Badge variant="outline" color="gray" size="sm">
+            <WindowCountChips counts={window.counts} />
-              {total} booking{total === 1 ? "" : "s"}
-            </Badge>
           </Group>
         </Group>
       </Accordion.Control>
@@ -234,6 +381,83 @@ function WindowAccordionItem({ window }: { window: BatchWindowGroup }) {
   );
 }
 
+/** Light stat card with an optional capacity bar — keeps the explicit numbers. */
+function StatCard({
+  icon: Icon,
+  label,
+  value,
+  sub,
+  pct,
+}: {
+  icon: LucideIcon;
+  label: string;
+  value: ReactNode;
+  sub?: string;
+  pct?: number | null;
+}) {
+  const barColor =
+    pct == null
+      ? "green"
+      : pct >= 100
+        ? "red"
+        : pct >= 85
+          ? "orange"
+          : "green";
+  return (
+    <Paper
+      p="md"
+      radius="lg"
+      withBorder
+      style={{ borderColor: "var(--mantine-color-gray-2)", background: "white" }}
+    >
+      <Group gap="sm" wrap="nowrap" align="flex-start">
+        <ThemeIcon size={38} radius="md" variant="light" color="green">
+          <Icon size={19} />
+        </ThemeIcon>
+        <Stack gap={5} style={{ minWidth: 0, flex: 1 }}>
+          <Text
+            size="xs"
+            fw={600}
+            tt="uppercase"
+            style={{ letterSpacing: 0.4 }}
+            c="dimmed"
+          >
+            {label}
+          </Text>
+          <Text fw={800} size="lg" lh={1.1} c="dark.5" style={{ whiteSpace: "nowrap" }}>
+            {value}
+          </Text>
+          {pct != null ? (
+            <Box
+              style={{
+                height: 6,
+                borderRadius: 999,
+                background: "var(--mantine-color-gray-1)",
+                overflow: "hidden",
+              }}
+            >
+              <Box
+                style={{
+                  width: `${Math.min(100, Math.max(0, pct))}%`,
+                  height: "100%",
+                  borderRadius: 999,
+                  background: `var(--mantine-color-${barColor}-5)`,
+                  transition: "width 0.4s ease",
+                }}
+              />
+            </Box>
+          ) : null}
+          {sub ? (
+            <Text size="xs" c="dimmed">
+              {sub}
+            </Text>
+          ) : null}
+        </Stack>
+      </Group>
+    </Paper>
+  );
+}
+
 export default function BatchScheduleDetailPage() {
   const { scheduleId } = useParams<{ scheduleId: string }>();
   const navigate = useNavigate();
@@ -287,7 +511,7 @@ export default function BatchScheduleDetailPage() {
 
   if (isLoading || !data) {
     return (
-      <Container size="xl" py="lg">
+      <Container fluid py="lg" px="xl">
         <Group justify="center" py="xl">
           <Loader color="green" />
         </Group>
@@ -298,14 +522,16 @@ export default function BatchScheduleDetailPage() {
   const lengthPct =
     data.capacity.maxLengthMeters && data.capacity.maxLengthMeters > 0
       ? (data.capacity.allocatedLengthMeters / data.capacity.maxLengthMeters) * 100
-      : 0;
+      : null;
   const weightPct =
     data.capacity.maxWeightTons && data.capacity.maxWeightTons > 0
       ? (data.capacity.usedWeightTons / data.capacity.maxWeightTons) * 100
-      : 0;
+      : null;
+
+  const totalBookings = totalBookingCount(data.counts);
 
   return (
-    <Container size="xl" py="lg">
+    <Container fluid py="lg" px="xl">
       <Breadcrumbs
         items={[
           { label: "Operations" },
@@ -314,165 +540,176 @@ export default function BatchScheduleDetailPage() {
         ]}
       />
 
-      <Paper radius="xl" p="xl" mt="md" withBorder>
+      {/* Hero — clean white */}
-        <Group justify="space-between" align="flex-start" wrap="wrap">
+      <Paper
-          <Group gap="md" align="flex-start">
+        radius="xl"
-            <Button
+        p="xl"
-              variant="subtle"
+        mt="md"
-              color="gray"
+        withBorder
-              leftSection={<ArrowLeft size={16} />}
+        style={{
-              onClick={() => navigate("/dashboard/operations/batch-board")}
+          borderColor: "var(--mantine-color-gray-2)",
-            >
+          background: "white",
-              Back
+          boxShadow: "0 1px 3px rgba(15,23,42,0.04)",
-            </Button>
+        }}
-            <Stack gap={4}>
+      >
-              <Group gap="sm">
+        <Stack gap="lg">
-                <ThemeIcon size={44} radius="md" variant="light" color="green">
+          <Group justify="space-between" align="flex-start" wrap="wrap" gap="md">
-                  <Train size={22} />
+            <Group gap="md" align="flex-start" wrap="nowrap" style={{ minWidth: 0 }}>
+              <Button
+                variant="subtle"
+                color="gray"
+                radius="md"
+                px="sm"
+                leftSection={<ArrowLeft size={16} />}
+                onClick={() => navigate("/dashboard/operations/batch-board")}
+              >
+                Back
+              </Button>
+              <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+                <ThemeIcon size={52} radius="md" variant="light" color="green">
+                  <Train size={26} />
                 </ThemeIcon>
-                <div>
+                <Stack gap={7} style={{ minWidth: 0 }}>
-                  <Title order={3}>
+                  <Group gap="sm" wrap="wrap">
-                    {data.trainNumber ?? data.routeName ?? "Schedule"}
+                    <Title order={2} fw={800} style={{ color: "#0f172a", letterSpacing: 0.2 }}>
-                  </Title>
+                      {data.trainNumber ?? data.routeName ?? "Schedule"}
-                  <Text size="sm" c="dimmed">
+                    </Title>
-                    {data.origin ?? "—"} → {data.destination ?? "—"} ·{" "}
+                    <WindowStatusPill status={data.bookingWindowStatus} />
-                    {data.scheduleDate
+                    <HeroChip>{data.status}</HeroChip>
-                      ? new Date(data.scheduleDate).toLocaleString()
+                  </Group>
-                      : "No date"}
+                  <RouteCorridor origin={data.origin} destination={data.destination} />
-                  </Text>
+                  <Group gap={6} wrap="wrap">
-                </div>
+                    <HeroChip icon={<CalendarDays size={12} />}>
+                      {data.scheduleDate
+                        ? new Intl.DateTimeFormat("en-GB", {
+                            weekday: "short",
+                            day: "2-digit",
+                            month: "short",
+                            year: "numeric",
+                            hour: "2-digit",
+                            minute: "2-digit",
+                            hour12: false,
+                            timeZone: "Africa/Addis_Ababa",
+                          }).format(new Date(data.scheduleDate)) + " EAT"
+                        : "No date"}
+                    </HeroChip>
+                    {data.locomotive ? (
+                      <HeroChip icon={<TrainFront size={12} />}>
+                        Loco {data.locomotive.code} · {fmtTons(data.locomotive.maxPullWeightTons)} ·{" "}
+                        {data.locomotive.maxTrainLengthMeters} m
+                      </HeroChip>
+                    ) : null}
+                  </Group>
+                </Stack>
               </Group>
-              <Group gap={6}>
-                <Badge variant="light" color="green">
-                  {data.bookingWindowStatus}
-                </Badge>
-                <Badge variant="outline" color="gray">
-                  {data.status}
-                </Badge>
-              </Group>
-            </Stack>
-          </Group>
-
-          <Group gap="sm">
-            <Button
-              variant="default"
-              leftSection={<RefreshCw size={16} />}
-              loading={isFetching}
-              onClick={() => void refetch()}
-            >
-              Refresh
-            </Button>
-            <Button
-              color="green"
-              leftSection={<PlayCircle size={16} />}
-              loading={runAllocation.isPending}
-              onClick={handleRunAllocation}
-            >
-              Run allocation
-            </Button>
-            <Button
-              variant="light"
-              leftSection={<Layers size={16} />}
-              onClick={() =>
-                navigate(`/dashboard/operations/train-scheduling-v2/${data.scheduleId}`)
-              }
-            >
-              Open schedule
-            </Button>
-          </Group>
-        </Group>
-
-        {data.locomotive ? (
-          <Text size="sm" c="dimmed" mt="md">
-            Loco {data.locomotive.code} · max {fmtTons(data.locomotive.maxPullWeightTons)} ·{" "}
-            {data.locomotive.maxTrainLengthMeters} m
-          </Text>
-        ) : (
-          <Alert color="red" mt="md" icon={<AlertTriangle size={16} />}>
-            No locomotive assigned — wagon allocation cannot run.
-          </Alert>
-        )}
-
-        <SimpleGrid cols={{ base: 1, md: 3 }} spacing="md" mt="md">
-          <Box>
-            <Group justify="space-between" mb={4}>
-              <Text size="sm" c="dimmed">
-                Allocated wagons
-              </Text>
-              <Text size="sm" fw={600}>
-                {data.capacity.allocatedWagons}
-              </Text>
             </Group>
-          </Box>
-          {data.capacity.maxLengthMeters ? (
-            <Box>
-              <Group justify="space-between" mb={4}>
-                <Group gap={4}>
-                  <Ruler size={14} />
-                  <Text size="sm" c="dimmed">
-                    Train length
-                  </Text>
-                </Group>
-                <Text size="sm" fw={600}>
-                  {fmtMeters(data.capacity.allocatedLengthMeters)}/
-                  {fmtMeters(data.capacity.maxLengthMeters)}
-                </Text>
-              </Group>
-              <Progress
-                value={lengthPct}
-                color={lengthPct >= 100 ? "orange" : "blue"}
-                radius="xl"
-              />
-            </Box>
-          ) : null}
-          {data.capacity.maxWeightTons ? (
-            <Box>
-              <Group justify="space-between" mb={4}>
-                <Group gap={4}>
-                  <Weight size={14} />
-                  <Text size="sm" c="dimmed">
-                    Weight
-                  </Text>
-                </Group>
-                <Text size="sm" fw={600}>
-                  {fmtTons(data.capacity.usedWeightTons)}/{fmtTons(data.capacity.maxWeightTons)}
-                </Text>
-              </Group>
-              <Progress
-                value={weightPct}
-                color={weightPct >= 100 ? "red" : "teal"}
-                radius="xl"
-              />
-            </Box>
-          ) : null}
-        </SimpleGrid>
 
-        <Group gap={6} mt="md">
+            <Group gap="sm">
-          <Badge variant="light" color="green">
+              <Button
-            {data.counts.allocated} allocated
+                variant="default"
-          </Badge>
+                radius="md"
-          <Badge variant="light" color="orange">
+                leftSection={<RefreshCw size={16} />}
-            {data.counts.selectedForBatch} selected
+                loading={isFetching}
-          </Badge>
+                onClick={() => void refetch()}
-          <Badge variant="light" color="teal">
+              >
-            {data.counts.ready} ready
+                Refresh
-          </Badge>
+              </Button>
-          <Badge variant="light" color="blue">
+              <Button
-            {data.counts.waiting} waiting
+                color="green"
-          </Badge>
+                radius="md"
-          <Badge variant="light" color="gray">
+                leftSection={<PlayCircle size={16} />}
-            {data.counts.pendingContract} pending contract
+                loading={runAllocation.isPending}
-          </Badge>
+                onClick={handleRunAllocation}
-          {data.counts.expired ? (
+              >
-            <Badge variant="light" color="red">
+                Run allocation
-              {data.counts.expired} expired
+              </Button>
-            </Badge>
+              <Button
+                variant="light"
+                color="green"
+                radius="md"
+                leftSection={<Layers size={16} />}
+                onClick={() =>
+                  navigate(`/dashboard/operations/train-scheduling-v2/${data.scheduleId}`)
+                }
+              >
+                Open schedule
+              </Button>
+            </Group>
+          </Group>
+
+          {!data.locomotive ? (
+            <Alert color="red" radius="md" icon={<AlertTriangle size={16} />}>
+              No locomotive assigned — wagon allocation cannot run.
+            </Alert>
           ) : null}
+
+          <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="md">
+            <StatCard
+              icon={Boxes}
+              label="Allocated wagons"
+              value={data.capacity.allocatedWagons}
+              sub="on this train"
+            />
+            <StatCard
+              icon={Ruler}
+              label="Train length"
+              value={
+                data.capacity.maxLengthMeters
+                  ? `${fmtMeters(data.capacity.allocatedLengthMeters)} / ${fmtMeters(data.capacity.maxLengthMeters)}`
+                  : fmtMeters(data.capacity.allocatedLengthMeters)
+              }
+              pct={lengthPct}
+            />
+            <StatCard
+              icon={Weight}
+              label="Weight"
+              value={
+                data.capacity.maxWeightTons
+                  ? `${fmtTons(data.capacity.usedWeightTons)} / ${fmtTons(data.capacity.maxWeightTons)}`
+                  : fmtTons(data.capacity.usedWeightTons)
+              }
+              pct={weightPct}
+            />
+            <StatCard
+              icon={Package}
+              label="Bookings"
+              value={totalBookings}
+              sub={`${data.counts.allocated} allocated · ${data.counts.expired} expired`}
+            />
+          </SimpleGrid>
+        </Stack>
+      </Paper>
+
+      {/* Booking pipeline */}
+      <Paper
+        radius="lg"
+        withBorder
+        p="lg"
+        mt="lg"
+        style={{ borderColor: "var(--mantine-color-gray-2)" }}
+      >
+        <Group justify="space-between" mb="sm">
+          <Group gap={8} wrap="nowrap">
+            <ThemeIcon size={32} radius="md" variant="light" color="green">
+              <Package size={16} />
+            </ThemeIcon>
+            <Text fw={700}>Booking pipeline</Text>
+          </Group>
+          <Text size="sm" fw={700} c="dark.4">
+            {totalBookings} booking{totalBookings === 1 ? "" : "s"}
+          </Text>
         </Group>
+        <BookingPipeline counts={data.counts} size={14} />
       </Paper>
 
       {data.allocationViolations.length ? (
-        <Alert color="red" mt="md" icon={<AlertTriangle size={16} />} title="Allocation constraints">
+        <Alert
+          color="red"
+          mt="lg"
+          radius="lg"
+          icon={<AlertTriangle size={16} />}
+          title="Allocation constraints"
+        >
           <Stack gap={4}>
             {data.allocationViolations.map((v) => (
               <Text key={v} size="sm">
@@ -483,26 +720,80 @@ export default function BatchScheduleDetailPage() {
         </Alert>
       ) : null}
 
-      <Paper radius="lg" withBorder p="lg" mt="lg">
+      {/* Batch windows */}
-        <Title order={4} mb="md">
+      <Paper
-          Batch windows (EAT)
+        radius="lg"
-        </Title>
+        withBorder
-        <Text size="sm" c="dimmed" mb="md">
+        p="lg"
-          Bookings are grouped by contract signing time (<code>fullyExecutedAt</code>). Expand a
+        mt="lg"
-          window to see bookings and wagon allocation issues.
+        style={{ borderColor: "var(--mantine-color-gray-2)" }}
-        </Text>
+      >
+        <Group gap="sm" mb={4} wrap="nowrap" align="flex-start">
+          <Box
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 38,
+              height: 38,
+              borderRadius: 10,
+              background: scheduleBrand.heroGradient,
+              color: "white",
+              flexShrink: 0,
+            }}
+          >
+            <Clock size={19} />
+          </Box>
+          <Box>
+            <Title order={4}>Batch windows (EAT)</Title>
+            <Text size="sm" c="dimmed">
+              Bookings grouped by contract signing time in 3-hour windows — expand one to
+              see bookings and wagon allocation issues.
+            </Text>
+          </Box>
+        </Group>
 
-        <Accordion multiple defaultValue={defaultOpen} variant="separated">
+        <Accordion
+          multiple
+          defaultValue={defaultOpen}
+          variant="separated"
+          radius="md"
+          mt="md"
+          className="bb-window-accordion"
+        >
           {data.windows.map((window) => (
             <WindowAccordionItem key={window.key} window={window} />
           ))}
           {data.pendingContract.bookings.length ? (
             <Accordion.Item value="pending-contract">
               <Accordion.Control>
-                <Group justify="space-between" wrap="nowrap" pr="md">
+                <Group justify="space-between" wrap="nowrap" pr="md" gap="sm">
-                  <Text fw={600} size="sm">
+                  <Group gap="sm" wrap="nowrap">
-                    Pending contract
+                    <Box
-                  </Text>
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: 34,
+                        height: 34,
+                        borderRadius: 10,
+                        flexShrink: 0,
+                        background: "var(--mantine-color-gray-0)",
+                        border: "1px solid var(--mantine-color-gray-2)",
+                        color: "var(--mantine-color-gray-6)",
+                      }}
+                    >
+                      <FileSignature size={16} />
+                    </Box>
+                    <Box>
+                      <Text fw={700} size="sm">
+                        Pending contract
+                      </Text>
+                      <Text size="xs" c="dimmed">
+                        Contract not signed yet — not in any window
+                      </Text>
+                    </Box>
+                  </Group>
                   <Badge variant="outline" color="gray" size="sm">
                     {data.pendingContract.bookings.length} booking
                     {data.pendingContract.bookings.length === 1 ? "" : "s"}
@@ -517,11 +808,9 @@ export default function BatchScheduleDetailPage() {
         </Accordion>
       </Paper>
 
+      {/* Train composition */}
       {hasAssignedWagons && scheduleDetailQuery.data ? (
-        <Paper radius="lg" withBorder p="lg" mt="lg">
+        <Box mt="lg">
-          <Title order={4} mb="md">
-            Train composition
-          </Title>
           <TrainCompositionDiagram
             locomotive={scheduleDetailQuery.data.trainSet?.locomotive}
             wagons={scheduleDetailQuery.data.trainSet?.wagons ?? []}
@@ -529,8 +818,8 @@ export default function BatchScheduleDetailPage() {
             trainNumber={scheduleDetailQuery.data.trainNumber}
             totalLengthMeters={scheduleDetailQuery.data.trainSet?.totalLengthMeters}
           />
-        </Paper>
+        </Box>
       ) : null}
     </Container>
   );
-}
+}