solve priorty issue

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

@@ -1,9 +1,10 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import {
   Box,
   Group,
   Paper,
   Progress,
+  SegmentedControl,
   Stack,
   Text,
   ThemeIcon,
@@ -15,9 +16,11 @@ import {
   Clock,
   Container,
   Crown,
+  FlaskConical,
   Hourglass,
   Layers,
   ListOrdered,
+  Radio,
   TrainFront,
   Trophy,
   XCircle,
@@ -30,6 +33,8 @@ import type {
   BatchBoardScheduleDetail,
 } from "@/types/trainScheduling";
 import { WindowPhasePill } from "./batchVisuals";
+import { ForecastPanel } from "./ForecastPanel";
+import { forecastIsLive } from "./batchForecast";
 
 /**
  * Priority Tracking tab — live, glanceable ranking of every booking on this
@@ -266,6 +271,15 @@ export function PriorityTrackingTab({ data, bookings }: Props) {
   const phase = data.windowPhase;
   const isPayPhase = phase === "PAYMENT";
 
+  // Before the batch is committed (pre-window / open / doc-review) the real
+  // selection doesn't exist yet — offer a simulated forecast of who WOULD board.
+  // Default to it while it's live; let staff flip to the current live state.
+  const forecastAvailable = forecastIsLive(phase);
+  const [view, setView] = useState<"forecast" | "live">(
+    forecastAvailable ? "forecast" : "live",
+  );
+  const showForecast = forecastAvailable && view === "forecast";
+
   // Rank exactly as the batch engine does: government first, then priority score
   // desc, then oldest (fullyExecutedAt / selectedForBatchAt as the tiebreak the
   // backend uses). The board already returns them in this order, but re-sort
@@ -320,8 +334,51 @@ export function PriorityTrackingTab({ data, bookings }: Props) {
 
   let rankNo = 0;
 
+  const viewToggle = forecastAvailable ? (
+    <SegmentedControl
+      value={view}
+      onChange={(v) => setView(v as "forecast" | "live")}
+      size="sm"
+      radius="md"
+      data={[
+        {
+          value: "forecast",
+          label: (
+            <Group gap={6} wrap="nowrap">
+              <FlaskConical size={13} />
+              <Text size="xs" fw={600}>
+                Forecast
+              </Text>
+            </Group>
+          ),
+        },
+        {
+          value: "live",
+          label: (
+            <Group gap={6} wrap="nowrap">
+              <Radio size={13} />
+              <Text size="xs" fw={600}>
+                Live state
+              </Text>
+            </Group>
+          ),
+        },
+      ]}
+    />
+  ) : null;
+
+  if (showForecast) {
+    return (
+      <Stack gap="lg">
+        {viewToggle ? <Group justify="flex-end">{viewToggle}</Group> : null}
+        <ForecastPanel data={data} bookings={ranked} />
+      </Stack>
+    );
+  }
+
   return (
     <Stack gap="lg">
+      {viewToggle ? <Group justify="flex-end">{viewToggle}</Group> : null}
       {/* Header: phase + capacity meter */}
       <Paper radius="lg" withBorder p="lg">
         <Group justify="space-between" wrap="wrap" gap="md">