Merge pull request #768 from Tria-plc/intercity-load-unload

feat(intercity): show intercity cargo across every train

apps/edr-freight-web/backoffice/src/App.tsx

@@ -25,6 +25,7 @@ import {
   Users,
   Wallet,
   LifeBuoy,
+  TrainFront,
 } from "lucide-react";
 import { useEffect } from "react";
 import {
@@ -122,6 +123,7 @@ import InterchangeDocumentsPage from "./pages/warehouses/InterchangeDocumentsPag
 import InventoryInquiryPage from "./pages/warehouses/InventoryInquiryPage";
 import LoadedInventoryPage from "./pages/warehouses/LoadedInventoryPage";
 import LoadingQueuePage from "./pages/warehouses/LoadingQueuePage";
+import IntercityPage from "./pages/warehouses/IntercityPage";
 import WarehouseDashboardPage from "./pages/warehouses/WarehouseDashboardPage";
 import WarehouseDetailPage from "./pages/warehouses/WarehouseDetailPage";
 import WarehouseInventoryPage from "./pages/warehouses/WarehouseInventoryPage";
@@ -441,6 +443,18 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
           },
         ],
       },
+      {
+        label: "Intercity",
+        href: "/dashboard/intercity",
+        icon: <TrainFront />,
+        children: [
+          {
+            label: "Intercity Cargo",
+            href: "/dashboard/intercity",
+            icon: <TrainFront />,
+          },
+        ],
+      },
       {
         label: "Warehouse Management",
         icon: <Container />,
@@ -933,6 +947,7 @@ const App = () => {
         <Route path="export-warehouse" element={<ExportWarehouseFlowPage />} />
         <Route path="arrival-queue" element={<ArrivalQueuePage />} />
         <Route path="loading-queue" element={<LoadingQueuePage />} />
+        <Route path="intercity" element={<IntercityPage />} />
         <Route path="loaded-inventory" element={<LoadedInventoryPage />} />
         <Route path="dispatch-queue" element={<DispatchQueuePage />} />
         <Route

apps/edr-freight-web/backoffice/src/constants/URLS.ts

@@ -344,6 +344,7 @@ export const URL_CONSTANTS = {
       `/train-scheduling/schedules/${id}/bookings/${bookingId}/load`,
     BOOKING_UNLOAD: (id: string, bookingId: string) =>
       `/train-scheduling/schedules/${id}/bookings/${bookingId}/unload`,
+    INTERCITY_BOOKINGS: "/train-scheduling/intercity/bookings",
     INTERCITY_CANDIDATES: (id: string) =>
       `/train-scheduling/schedules/${id}/intercity-candidates`,
     INTERCITY_ACCEPT: (id: string) =>

apps/edr-freight-web/backoffice/src/pages/warehouses/IntercityPage.tsx

@@ -0,0 +1,291 @@
+import { useMemo, useState } from "react";
+import {
+  Alert,
+  Badge,
+  Card,
+  Center,
+  Group,
+  Loader,
+  SimpleGrid,
+  Table,
+  Tabs,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import { useQuery } from "@tanstack/react-query";
+import { AlertTriangle, PackageCheck, TrainFront, Warehouse } from "lucide-react";
+
+import { PageContainer, PageHeader } from "@/components/page";
+import { api } from "@/services/api";
+import type { IntercityRideAlongRow } from "@/types/trainScheduling";
+
+/**
+ * Intercity cargo across every train.
+ *
+ * Intercity bookings never get their own train — they ride whichever
+ * import/export train passes through their corridor — so the work is spread over
+ * other people's schedules. This is the one place it's all visible.
+ */
+
+const fmtTons = (t: number | null) => (t == null ? "—" : `${t} t`);
+
+/** A booking can only be worked where the train actually is. */
+const atOrigin = (r: IntercityRideAlongRow) =>
+  Boolean(r.trainAtYardId) && r.trainAtYardId === r.originYardId;
+const atDestination = (r: IntercityRideAlongRow) =>
+  Boolean(r.trainAtYardId) && r.trainAtYardId === r.destinationYardId;
+
+const isWaiting = (r: IntercityRideAlongRow) =>
+  !r.loadedAt && r.status !== "IN_TRANSIT" && r.status !== "COMPLETED";
+const isRiding = (r: IntercityRideAlongRow) => r.status === "IN_TRANSIT";
+const isDone = (r: IntercityRideAlongRow) => r.status === "COMPLETED";
+
+/** Yards with no equipment can never load/unload — surface it before the train arrives. */
+function FacilityCell({ yard, has }: { yard: string | null; has: boolean | null }) {
+  if (!yard) return <Text size="sm">—</Text>;
+  if (has) return <Text size="sm">{yard}</Text>;
+  return (
+    <Tooltip
+      label="This yard has no load/unload facility — cargo cannot be handled here"
+      withArrow
+      multiline
+      w={240}
+    >
+      <Group gap={4} wrap="nowrap">
+        <AlertTriangle size={13} color="var(--mantine-color-red-6)" />
+        <Text size="sm" c="red">
+          {yard}
+        </Text>
+      </Group>
+    </Tooltip>
+  );
+}
+
+function Rows({ rows }: { rows: IntercityRideAlongRow[] }) {
+  if (rows.length === 0) {
+    return (
+      <Alert variant="light" color="gray">
+        Nothing here.
+      </Alert>
+    );
+  }
+  return (
+    <Table.ScrollContainer minWidth={900}>
+      <Table striped highlightOnHover verticalSpacing="xs">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Booking</Table.Th>
+            <Table.Th>Customer</Table.Th>
+            <Table.Th>Load at</Table.Th>
+            <Table.Th>Unload at</Table.Th>
+            <Table.Th>Train</Table.Th>
+            <Table.Th ta="right">Weight</Table.Th>
+            <Table.Th>GRN</Table.Th>
+            <Table.Th>Status</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {rows.map((r) => (
+            <Table.Tr key={r.bookingId}>
+              <Table.Td>
+                <Text fw={600} size="sm">
+                  {r.reference ?? r.bookingId.slice(0, 8)}
+                </Text>
+              </Table.Td>
+              <Table.Td>{r.customer ?? "—"}</Table.Td>
+              <Table.Td>
+                <Group gap={6} wrap="nowrap">
+                  <FacilityCell yard={r.origin} has={r.originHasFacility} />
+                  {atOrigin(r) && isWaiting(r) && (
+                    <Badge size="xs" color="edr-green" variant="light">
+                      train here
+                    </Badge>
+                  )}
+                </Group>
+              </Table.Td>
+              <Table.Td>
+                <Group gap={6} wrap="nowrap">
+                  <FacilityCell yard={r.destination} has={r.destinationHasFacility} />
+                  {atDestination(r) && isRiding(r) && (
+                    <Badge size="xs" color="edr-green" variant="light">
+                      train here
+                    </Badge>
+                  )}
+                </Group>
+              </Table.Td>
+              <Table.Td>
+                {r.trainNumber ? (
+                  <Group gap={4} wrap="nowrap">
+                    <TrainFront size={13} />
+                    <Text size="sm">{r.trainNumber}</Text>
+                  </Group>
+                ) : (
+                  <Text size="sm" c="dimmed">
+                    not on a train
+                  </Text>
+                )}
+              </Table.Td>
+              <Table.Td ta="right">
+                <Text size="sm">{fmtTons(r.weightTons)}</Text>
+              </Table.Td>
+              <Table.Td>
+                <Text size="sm" c={r.grnNumber ? undefined : "dimmed"}>
+                  {r.grnNumber ?? "—"}
+                </Text>
+              </Table.Td>
+              <Table.Td>
+                <Badge size="sm" variant="light" color="gray">
+                  {r.status}
+                </Badge>
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
+  );
+}
+
+function Stat({
+  icon,
+  label,
+  value,
+  color,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: React.ReactNode;
+  color?: string;
+}) {
+  return (
+    <Card withBorder radius="md" padding="md">
+      <Group gap="sm" wrap="nowrap">
+        {icon}
+        <div>
+          <Text size="xs" c="dimmed" tt="uppercase" fw={700}>
+            {label}
+          </Text>
+          <Text fw={800} fz={22} lh={1.1} c={color}>
+            {value}
+          </Text>
+        </div>
+      </Group>
+    </Card>
+  );
+}
+
+export default function IntercityPage() {
+  const [tab, setTab] = useState("waiting");
+  const { data: rows = [], isLoading } = useQuery(
+    api.trainScheduling.intercityBookings.queryOptions({ input: undefined }),
+  );
+
+  const waiting = useMemo(() => rows.filter(isWaiting), [rows]);
+  const riding = useMemo(() => rows.filter(isRiding), [rows]);
+  const done = useMemo(() => rows.filter(isDone), [rows]);
+  // A booking whose end has no equipment is stuck until someone flags the yard.
+  const blocked = useMemo(
+    () =>
+      rows.filter(
+        (r) => !isDone(r) && (!r.originHasFacility || !r.destinationHasFacility),
+      ),
+    [rows],
+  );
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title="Intercity"
+        subtitle="Domestic cargo riding passing trains — loaded at its origin facility, unloaded at its destination."
+      />
+
+      {isLoading ? (
+        <Center py="xl">
+          <Loader />
+        </Center>
+      ) : (
+        <>
+          <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="sm" mb="md">
+            <Stat
+              icon={<PackageCheck size={18} />}
+              label="Waiting to load"
+              value={waiting.length}
+            />
+            <Stat icon={<TrainFront size={18} />} label="On a train" value={riding.length} />
+            <Stat icon={<Warehouse size={18} />} label="Completed" value={done.length} />
+            <Stat
+              icon={<AlertTriangle size={18} />}
+              label="No facility"
+              value={blocked.length}
+              color={blocked.length > 0 ? "red" : undefined}
+            />
+          </SimpleGrid>
+
+          {blocked.length > 0 && (
+            <Alert
+              variant="light"
+              color="red"
+              icon={<AlertTriangle size={16} />}
+              title={`${blocked.length} booking${blocked.length === 1 ? "" : "s"} cannot be handled`}
+              mb="md"
+            >
+              Their origin or destination yard has no load/unload facility. Mark the yard as
+              a facility in Configuration → Yards, or the cargo can never be worked there.
+            </Alert>
+          )}
+
+          <Card withBorder radius="md" padding="md">
+            <Tabs value={tab} onChange={(v) => setTab(v ?? "waiting")}>
+              <Tabs.List mb="md">
+                <Tabs.Tab
+                  value="waiting"
+                  rightSection={
+                    <Badge size="xs" variant="light">
+                      {waiting.length}
+                    </Badge>
+                  }
+                >
+                  Waiting to load
+                </Tabs.Tab>
+                <Tabs.Tab
+                  value="riding"
+                  rightSection={
+                    <Badge size="xs" variant="light">
+                      {riding.length}
+                    </Badge>
+                  }
+                >
+                  On a train
+                </Tabs.Tab>
+                <Tabs.Tab
+                  value="done"
+                  rightSection={
+                    <Badge size="xs" variant="light">
+                      {done.length}
+                    </Badge>
+                  }
+                >
+                  Completed
+                </Tabs.Tab>
+              </Tabs.List>
+
+              <Tabs.Panel value="waiting">
+                <Rows rows={waiting} />
+              </Tabs.Panel>
+              <Tabs.Panel value="riding">
+                <Rows rows={riding} />
+              </Tabs.Panel>
+              <Tabs.Panel value="done">
+                <Rows rows={done} />
+              </Tabs.Panel>
+            </Tabs>
+            <Text size="xs" c="dimmed" mt="sm">
+              Loading and unloading happen on the train's schedule page, where the ride-along
+              panel confirms the train is at the yard.
+            </Text>
+          </Card>
+        </>
+      )}
+    </PageContainer>
+  );
+}

apps/edr-freight-web/backoffice/src/services/api.ts

@@ -702,6 +702,16 @@ export const api = {
       () => TRAIN_SCHEDULING_INVALIDATIONS,
     ),
 
+    intercityBookings: endpoint<
+      void,
+      import("@/types/trainScheduling").IntercityRideAlongRow[]
+    >(
+      "train-scheduling",
+      "intercity-bookings",
+      () => trainSchedulingService.listIntercityBookings(),
+      () => ["train-scheduling", "intercity-bookings"],
+    ),
+
     intercityCandidates: endpoint<
       { scheduleId: string },
       import("@/types/trainScheduling").IntercityCandidatesResult

apps/edr-freight-web/backoffice/src/services/trainScheduling.service.ts

@@ -393,6 +393,15 @@ export const trainSchedulingService = {
     return unwrap(response.data);
   },
 
+  listIntercityBookings: async (): Promise<
+    import("@/types/trainScheduling").IntercityRideAlongRow[]
+  > => {
+    const response = await client.get<
+      import("@/types/trainScheduling").IntercityRideAlongRow[]
+    >(URL_CONSTANTS.TRAIN_SCHEDULING.INTERCITY_BOOKINGS);
+    return response.data ?? [];
+  },
+
   getIntercityCandidates: async (
     scheduleId: string,
   ): Promise<IntercityCandidatesResult> => {

apps/edr-freight-web/backoffice/src/types/trainScheduling.ts

@@ -956,3 +956,27 @@ export interface BookingUnloadResult {
   status: string;
   arrivedAt: string;
 }
+
+/** An intercity booking's ride-along state, with both ends' facility status. */
+export interface IntercityRideAlongRow {
+  bookingId: string;
+  reference: string | null;
+  status: string;
+  freightType: string | null;
+  weightTons: number | null;
+  loadedAt: string | null;
+  arrivedAt: string | null;
+  customer: string | null;
+  trainScheduleId: string | null;
+  trainNumber: string | null;
+  scheduleStatus: string | null;
+  originYardId: string | null;
+  origin: string | null;
+  originHasFacility: boolean | null;
+  destinationYardId: string | null;
+  destination: string | null;
+  destinationHasFacility: boolean | null;
+  /** Yard the train was last recorded at — cargo can only be worked there. */
+  trainAtYardId: string | null;
+  grnNumber: string | null;
+}