Merge pull request #672 from Tria-plc/freight_feature/usermanagement

train

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx

@@ -5,6 +5,7 @@ import {
   Button,
   TextInput,
   Textarea,
+  MultiSelect,
   Select,
   Switch,
   Stack,
@@ -79,8 +80,12 @@ const buildInitialValues = (
 ): Record<string, unknown> => {
   const values: Record<string, unknown> = {};
   for (const field of fields) {
-    const raw = record?.[field.name];
-    if (raw !== undefined && raw !== null) {
+    const raw = field.getInitialValue && record
+      ? field.getInitialValue(record)
+      : record?.[field.name];
+    if (field.type === "multiselect") {
+      values[field.name] = Array.isArray(raw) ? raw.map(String) : [];
+    } else if (raw !== undefined && raw !== null) {
       if (field.type === "date" && typeof raw === "string") {
         values[field.name] = raw.slice(0, 10);
       } else if (Array.isArray(raw)) {
@@ -197,7 +202,10 @@ const RuleEngineFormDialog = ({
 
     for (const field of visibleFields) {
       const raw = values[field.name];
-      if (field.type === "number") {
+      if (field.type === "multiselect") {
+        // Always the full replacement list — the API syncs the relation to it.
+        payload[field.name] = Array.isArray(raw) ? raw : [];
+      } else if (field.type === "number") {
         if (raw === "" || raw === undefined) continue;
         payload[field.name] = Number(raw);
       } else if (field.type === "boolean") {
@@ -258,6 +266,38 @@ const RuleEngineFormDialog = ({
 
     const label = <FieldLabel label={field.label} required={field.required} />;
 
+    if (field.type === "multiselect") {
+      const options = field.optionsFromValues
+        ? field.optionsFromValues(values)
+        : (field.options ?? []);
+      const selected = Array.isArray(values[field.name])
+        ? (values[field.name] as string[])
+        : [];
+      return (
+        <MultiSelect
+          key={field.name}
+          label={label}
+          description={field.description}
+          placeholder={
+            selectOptionsLoading
+              ? "Loading options..."
+              : (field.placeholder ?? "Select one or more")
+          }
+          value={selected}
+          onChange={(v) => setField(field.name, v)}
+          disabled={selectOptionsLoading}
+          data={options
+            .filter((opt) => opt.value !== "" && opt.value !== RULE_ENGINE_SELECT_NONE)
+            .map((opt) => ({ label: opt.label, value: opt.value }))}
+          searchable
+          clearable
+          size="md"
+          radius="md"
+          styles={inputStyles}
+        />
+      );
+    }
+
     if (field.type === "select") {
       // Dynamic options (e.g. rate unit) resolve from the live form values so
       // the choices track the other fields the admin has picked.

apps/edr-freight-web/backoffice/src/components/trainBuilder/AvailableWagonsPanel.tsx

@@ -0,0 +1,152 @@
+import { Freight } from "@edr/types";
+import {
+  Button,
+  Checkbox,
+  Group,
+  ScrollArea,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { useQuery } from "@tanstack/react-query";
+import { Plus, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { api } from "@/services/api";
+
+/**
+ * AVAILABLE wagons standing in the train's own yard — the only ones that can
+ * be coupled. Pick any number and append them to the consist.
+ */
+export default function AvailableWagonsPanel({
+  yardId,
+  yardLabel,
+  onAssign,
+  assigning,
+}: AvailableWagonsPanelProps) {
+  const [search, setSearch] = useState("");
+  const [typeFilter, setTypeFilter] = useState<string>("ALL");
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const wagonsQuery = useQuery(
+    api.wagons.list.queryOptions({
+      input: {
+        filters: { status: Freight.WagonStatus.Available, currentYardId: yardId },
+      },
+      enabled: Boolean(yardId),
+    }),
+  );
+
+  const wagons = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return (wagonsQuery.data ?? []).filter((wagon) => {
+      if (typeFilter !== "ALL" && wagon.wagonTypeId !== typeFilter) return false;
+      if (q && !wagon.wagonNumber.toLowerCase().includes(q)) return false;
+      return true;
+    });
+  }, [wagonsQuery.data, search, typeFilter]);
+
+  const typeOptions = useMemo(() => {
+    const byId = new Map<string, string>();
+    for (const wagon of wagonsQuery.data ?? []) {
+      if (wagon.wagonType) byId.set(wagon.wagonType.id, wagon.wagonType.name);
+    }
+    return [
+      { value: "ALL", label: "All types" },
+      ...[...byId.entries()].map(([value, label]) => ({ value, label })),
+    ];
+  }, [wagonsQuery.data]);
+
+  const toggle = (wagonId: string, checked: boolean) => {
+    setSelected((prev) =>
+      checked ? [...prev, wagonId] : prev.filter((id) => id !== wagonId),
+    );
+  };
+
+  const handleAssign = () => {
+    if (!selected.length) return;
+    onAssign(selected);
+    setSelected([]);
+  };
+
+  return (
+    <Stack gap="sm">
+      <Group gap="xs" grow>
+        <TextInput
+          size="sm"
+          placeholder="Search wagon number…"
+          leftSection={<Search size={14} />}
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+        />
+        <Select
+          size="sm"
+          data={typeOptions}
+          value={typeFilter}
+          onChange={(v) => setTypeFilter(v ?? "ALL")}
+        />
+      </Group>
+
+      <ScrollArea.Autosize mah={380} type="auto">
+        <Stack gap={6}>
+          {wagonsQuery.isLoading ? (
+            <Text py="md" ta="center" c="dimmed" size="sm">
+              Loading wagons…
+            </Text>
+          ) : !wagons.length ? (
+            <Text py="md" ta="center" c="dimmed" size="sm">
+              No available wagons in {yardLabel ?? "this yard"}
+            </Text>
+          ) : (
+            wagons.map((wagon) => (
+              <Group
+                key={wagon.id}
+                gap="sm"
+                wrap="nowrap"
+                p="xs"
+                style={{
+                  border: "1px solid var(--mantine-color-gray-2)",
+                  borderRadius: "var(--mantine-radius-md)",
+                }}
+              >
+                <Checkbox
+                  size="sm"
+                  checked={selected.includes(wagon.id)}
+                  onChange={(e) => toggle(wagon.id, e.currentTarget.checked)}
+                  aria-label={`Select wagon ${wagon.wagonNumber}`}
+                />
+                <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
+                  <Text size="sm" fw={600} ff="monospace" truncate>
+                    {wagon.wagonNumber}
+                  </Text>
+                  <Text size="xs" c="dimmed" truncate>
+                    {wagon.wagonType
+                      ? `${wagon.wagonType.name} · ${wagon.wagonType.capacityTons ?? "—"}T cap`
+                      : "Unknown type"}
+                  </Text>
+                </Stack>
+              </Group>
+            ))
+          )}
+        </Stack>
+      </ScrollArea.Autosize>
+
+      <Button
+        leftSection={<Plus size={16} />}
+        disabled={!selected.length}
+        loading={assigning}
+        onClick={handleAssign}
+      >
+        Add {selected.length ? `${selected.length} wagon${selected.length > 1 ? "s" : ""}` : "wagons"} to consist
+      </Button>
+    </Stack>
+  );
+}
+
+export interface AvailableWagonsPanelProps {
+  yardId: string;
+  yardLabel?: string | null;
+  onAssign: (wagonIds: string[]) => void;
+  assigning: boolean;
+}

apps/edr-freight-web/backoffice/src/components/trainBuilder/BuildTrainModal.tsx

@@ -0,0 +1,182 @@
+import {
+  Button,
+  Group,
+  Modal,
+  MultiSelect,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+} from "@mantine/core";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { isAxiosError } from "axios";
+import { useEffect, useState } from "react";
+
+import { api } from "@/services/api";
+import type { TrainComposition } from "@/services/trainBuilder.service";
+import { useToast } from "@/hooks/use-toast";
+
+const parseError = (error: unknown, fallback: string) => {
+  if (isAxiosError(error)) {
+    const message = error.response?.data?.message;
+    if (Array.isArray(message)) return message.join(", ");
+    if (typeof message === "string") return message;
+  }
+  return fallback;
+};
+
+/**
+ * Step one of the Train Builder: give the train its operator code, pick the
+ * yard it is being assembled in, and couple at least two locomotives from that
+ * yard. Wagons are attached afterwards on the composition page.
+ */
+export default function BuildTrainModal({ opened, onClose, onBuilt }: BuildTrainModalProps) {
+  const { toast } = useToast();
+  const [code, setCode] = useState("");
+  const [trainName, setTrainName] = useState("");
+  const [yardId, setYardId] = useState("");
+  const [locomotiveIds, setLocomotiveIds] = useState<string[]>([]);
+  const [notes, setNotes] = useState("");
+
+  const yardsQuery = useQuery(api.routes.yards.queryOptions({ staleTime: 5 * 60_000 }));
+  // Only serviceable locomotives standing in the selected yard can be coupled.
+  const locomotivesQuery = useQuery(
+    api.locomotives.listFiltered.queryOptions({
+      input: { filters: { status: "AVAILABLE", currentYardId: yardId } },
+      enabled: Boolean(yardId),
+    }),
+  );
+  const build = useMutation(api.trainBuilder.build.mutationOptions());
+
+  // A locomotive belongs to one yard — switching yards invalidates the pick.
+  useEffect(() => {
+    setLocomotiveIds([]);
+  }, [yardId]);
+
+  useEffect(() => {
+    if (!opened) {
+      setCode("");
+      setTrainName("");
+      setYardId("");
+      setLocomotiveIds([]);
+      setNotes("");
+    }
+  }, [opened]);
+
+  const handleBuild = async () => {
+    if (!code.trim() || !yardId || locomotiveIds.length < 2) {
+      toast({
+        title: "Enter a train code, pick a yard, and couple at least two locomotives",
+        variant: "destructive",
+      });
+      return;
+    }
+    try {
+      const composition = await build.mutateAsync({
+        code: code.trim(),
+        currentYardId: yardId,
+        locomotiveIds,
+        ...(trainName.trim() ? { trainName: trainName.trim() } : {}),
+        ...(notes.trim() ? { notes: notes.trim() } : {}),
+      });
+      toast({ title: `Train ${composition.code} built` });
+      onClose();
+      onBuilt(composition);
+    } catch (err) {
+      toast({
+        title: "Build failed",
+        description: parseError(err, "Could not build the train"),
+        variant: "destructive",
+      });
+    }
+  };
+
+  const locomotiveOptions = (locomotivesQuery.data ?? []).map((loco) => ({
+    value: loco.id,
+    label: `${loco.code}${loco.name ? ` — ${loco.name}` : ""} · pulls ${loco.maxPullWeightTons}T`,
+  }));
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={<Text fw={600}>Build a train</Text>}
+      radius="lg"
+      centered
+    >
+      <Stack gap="md">
+        <Text size="sm" c="dimmed">
+          A train is assembled in one yard: two or more locomotives plus wagons
+          standing in that same yard. Wagons are attached on the next screen.
+        </Text>
+        <Group grow>
+          <TextInput
+            label="Train code"
+            placeholder="e.g. 81001"
+            value={code}
+            onChange={(e) => setCode(e.currentTarget.value)}
+            maxLength={32}
+          />
+          <TextInput
+            label="Name (optional)"
+            placeholder="e.g. Fertilizer block"
+            value={trainName}
+            onChange={(e) => setTrainName(e.currentTarget.value)}
+            maxLength={100}
+          />
+        </Group>
+        <Select
+          label="Build yard"
+          placeholder="Select the yard the train is assembled in"
+          data={(yardsQuery.data ?? []).map((y) => ({
+            value: y.id,
+            label: y.label ?? y.code,
+          }))}
+          value={yardId || null}
+          onChange={(v) => setYardId(v ?? "")}
+          searchable
+        />
+        <MultiSelect
+          label="Locomotives"
+          description="A train must be pulled by at least two locomotives (front and back). First pick becomes the lead."
+          placeholder={yardId ? "Select at least two locomotives" : "Select a yard first"}
+          data={locomotiveOptions}
+          value={locomotiveIds}
+          onChange={setLocomotiveIds}
+          searchable
+          disabled={!yardId}
+          error={
+            locomotiveIds.length > 0 && locomotiveIds.length < 2
+              ? "Select at least two locomotives"
+              : undefined
+          }
+          nothingFoundMessage={
+            yardId ? "No available locomotives in this yard" : "Select a yard first"
+          }
+        />
+        <Textarea
+          label="Notes (optional)"
+          value={notes}
+          onChange={(e) => setNotes(e.currentTarget.value)}
+          autosize
+          minRows={2}
+        />
+        <Group justify="flex-end">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button loading={build.isPending} onClick={handleBuild}>
+            Build train
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+export interface BuildTrainModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onBuilt: (composition: TrainComposition) => void;
+}

apps/edr-freight-web/backoffice/src/components/trainBuilder/ChangeLocomotivesModal.tsx

@@ -0,0 +1,128 @@
+import { Button, Group, Modal, MultiSelect, Stack, Text } from "@mantine/core";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { isAxiosError } from "axios";
+import { useEffect, useMemo, useState } from "react";
+
+import { api } from "@/services/api";
+import type { TrainComposition } from "@/services/trainBuilder.service";
+import { useToast } from "@/hooks/use-toast";
+
+const parseError = (error: unknown, fallback: string) => {
+  if (isAxiosError(error)) {
+    const message = error.response?.data?.message;
+    if (Array.isArray(message)) return message.join(", ");
+    if (typeof message === "string") return message;
+  }
+  return fallback;
+};
+
+/** Swap the locomotive set of a built train (minimum 2, same-yard rule). */
+export default function ChangeLocomotivesModal({
+  composition,
+  opened,
+  onClose,
+}: ChangeLocomotivesModalProps) {
+  const { toast } = useToast();
+  const [locomotiveIds, setLocomotiveIds] = useState<string[]>([]);
+
+  const yardId = composition?.currentYard?.id ?? "";
+  const availableQuery = useQuery(
+    api.locomotives.listFiltered.queryOptions({
+      input: { filters: { status: "AVAILABLE", currentYardId: yardId } },
+      enabled: opened && Boolean(yardId),
+    }),
+  );
+  const setLocomotives = useMutation(api.trainBuilder.setLocomotives.mutationOptions());
+
+  useEffect(() => {
+    if (opened && composition) {
+      setLocomotiveIds(composition.locomotives.map((l) => l.id));
+    }
+  }, [opened, composition]);
+
+  // Pickable = available locomotives in the yard + the ones already coupled
+  // to this train (valid to keep even though they are not "loose" anymore).
+  const options = useMemo(() => {
+    const seen = new Set<string>();
+    const rows: Array<{ value: string; label: string }> = [];
+    for (const loco of composition?.locomotives ?? []) {
+      seen.add(loco.id);
+      rows.push({
+        value: loco.id,
+        label: `${loco.code}${loco.name ? ` — ${loco.name}` : ""} · pulls ${loco.maxPullWeightTons}T (coupled)`,
+      });
+    }
+    for (const loco of availableQuery.data ?? []) {
+      if (seen.has(loco.id)) continue;
+      rows.push({
+        value: loco.id,
+        label: `${loco.code}${loco.name ? ` — ${loco.name}` : ""} · pulls ${loco.maxPullWeightTons}T`,
+      });
+    }
+    return rows;
+  }, [composition, availableQuery.data]);
+
+  const handleSave = async () => {
+    if (!composition) return;
+    if (locomotiveIds.length < 2) {
+      toast({ title: "A train needs at least two locomotives", variant: "destructive" });
+      return;
+    }
+    try {
+      await setLocomotives.mutateAsync({ id: composition.id, locomotiveIds });
+      toast({ title: "Locomotives updated" });
+      onClose();
+    } catch (err) {
+      toast({
+        title: "Update failed",
+        description: parseError(err, "Could not update locomotives"),
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={<Text fw={600}>Change locomotives</Text>}
+      radius="lg"
+      centered
+    >
+      <Stack gap="md">
+        <Text size="sm" c="dimmed">
+          Only available locomotives standing in{" "}
+          {composition?.currentYard?.label ?? "the train's yard"} can be coupled.
+          The first pick is the lead locomotive.
+        </Text>
+        <MultiSelect
+          label="Locomotives"
+          data={options}
+          value={locomotiveIds}
+          onChange={setLocomotiveIds}
+          searchable
+          error={
+            locomotiveIds.length > 0 && locomotiveIds.length < 2
+              ? "Select at least two locomotives"
+              : undefined
+          }
+          nothingFoundMessage="No available locomotives in this yard"
+        />
+        <Group justify="flex-end">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button loading={setLocomotives.isPending} onClick={handleSave}>
+            Save
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+export interface ChangeLocomotivesModalProps {
+  composition: TrainComposition | null;
+  opened: boolean;
+  onClose: () => void;
+}

apps/edr-freight-web/backoffice/src/components/trainBuilder/ConsistWagonList.tsx

@@ -0,0 +1,171 @@
+import {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  type DraggableProvided,
+  type DraggableStateSnapshot,
+  type DropResult,
+} from "@hello-pangea/dnd";
+import { ActionIcon, Badge, Box, Group, Stack, Text, Tooltip } from "@mantine/core";
+import { GripVertical, Trash2 } from "lucide-react";
+import { type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+import type { TrainCompositionWagon } from "@/services/trainBuilder.service";
+
+/** Reparent dragged row to body — fixes position:fixed inside transformed parents. */
+const PortalAwareRow = ({
+  snapshot,
+  children,
+}: {
+  snapshot: DraggableStateSnapshot;
+  children: ReactNode;
+}) => {
+  if (snapshot.isDragging) {
+    return createPortal(children, document.body);
+  }
+  return <>{children}</>;
+};
+
+/**
+ * The train's ordered wagon consist. Drag to reorder (persisted on drop),
+ * trash to detach a wagon back to the yard.
+ */
+export default function ConsistWagonList({
+  wagons,
+  editable,
+  onReorder,
+  onRemove,
+  busy = false,
+}: ConsistWagonListProps) {
+  const onDragEnd = (result: DropResult) => {
+    if (!result.destination) return;
+    const from = result.source.index;
+    const to = result.destination.index;
+    if (from === to) return;
+    const next = [...wagons];
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved!);
+    onReorder(next.map((w) => w.id));
+  };
+
+  if (!wagons.length) {
+    return (
+      <Text py="lg" ta="center" c="dimmed" size="sm">
+        No wagons in the consist yet.
+      </Text>
+    );
+  }
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="train-consist-wagons" isDropDisabled={!editable || busy}>
+        {(dropProvided) => (
+          <Stack gap="xs" ref={dropProvided.innerRef} {...dropProvided.droppableProps}>
+            {wagons.map((wagon, index) => (
+              <Draggable
+                key={wagon.id}
+                draggableId={wagon.id}
+                index={index}
+                isDragDisabled={!editable || busy}
+              >
+                {(dragProvided, snapshot) => (
+                  <WagonRow
+                    wagon={wagon}
+                    index={index}
+                    dragProvided={dragProvided}
+                    snapshot={snapshot}
+                    editable={editable}
+                    busy={busy}
+                    onRemove={onRemove}
+                  />
+                )}
+              </Draggable>
+            ))}
+            {dropProvided.placeholder}
+          </Stack>
+        )}
+      </Droppable>
+    </DragDropContext>
+  );
+}
+
+export interface ConsistWagonListProps {
+  wagons: TrainCompositionWagon[];
+  editable: boolean;
+  onReorder: (wagonIds: string[]) => void;
+  onRemove: (wagonId: string) => void;
+  busy?: boolean;
+}
+
+function WagonRow({
+  wagon,
+  index,
+  dragProvided,
+  snapshot,
+  editable,
+  busy,
+  onRemove,
+}: {
+  wagon: TrainCompositionWagon;
+  index: number;
+  dragProvided: DraggableProvided;
+  snapshot: DraggableStateSnapshot;
+  editable: boolean;
+  busy: boolean;
+  onRemove: (wagonId: string) => void;
+}) {
+  return (
+    <PortalAwareRow snapshot={snapshot}>
+      <Group
+        ref={dragProvided.innerRef}
+        {...dragProvided.draggableProps}
+        {...dragProvided.dragHandleProps}
+        gap="sm"
+        wrap="nowrap"
+        p="sm"
+        style={{
+          ...dragProvided.draggableProps.style,
+          border: "1px solid var(--mantine-color-gray-3)",
+          borderRadius: "var(--mantine-radius-md)",
+          background: snapshot.isDragging ? "var(--mantine-color-gray-0)" : "white",
+          boxShadow: snapshot.isDragging ? "0 8px 24px rgba(0, 0, 0, 0.12)" : undefined,
+          cursor: editable ? (snapshot.isDragging ? "grabbing" : "grab") : "default",
+          userSelect: "none",
+        }}
+      >
+        {editable ? (
+          <Box c="dimmed" style={{ display: "flex", alignItems: "center" }}>
+            <GripVertical size={18} />
+          </Box>
+        ) : null}
+        <Badge variant="light" color="gray" size="sm">
+          {index + 1}
+        </Badge>
+        <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
+          <Text size="sm" fw={600} ff="monospace" truncate>
+            {wagon.wagonNumber}
+          </Text>
+          <Text size="xs" c="dimmed" truncate>
+            {wagon.wagonType
+              ? `${wagon.wagonType.name} · ${wagon.wagonType.capacityTons}T cap · ${wagon.wagonType.lengthMeters}m`
+              : "Unknown type"}
+          </Text>
+        </Stack>
+        {editable ? (
+          <Tooltip label="Detach wagon" withArrow>
+            <ActionIcon
+              variant="subtle"
+              color="red"
+              disabled={busy}
+              onClick={() => onRemove(wagon.id)}
+              aria-label={`Detach wagon ${wagon.wagonNumber}`}
+            >
+              <Trash2 size={16} />
+            </ActionIcon>
+          </Tooltip>
+        ) : null}
+      </Group>
+    </PortalAwareRow>
+  );
+}

apps/edr-freight-web/backoffice/src/components/trainBuilder/TrainConsistStrip.tsx

@@ -0,0 +1,159 @@
+import { Box, Group, Stack, Text, Tooltip } from "@mantine/core";
+import { Train as TrainIcon } from "lucide-react";
+
+import type {
+  TrainCompositionLocomotive,
+  TrainCompositionWagon,
+} from "@/services/trainBuilder.service";
+
+/**
+ * Visual consist: locomotives + wagons drawn in order on a rail, the way the
+ * train would leave the yard. Scrolls horizontally for long consists.
+ */
+export default function TrainConsistStrip({
+  locomotives,
+  wagons,
+  emptyHint = "No wagons attached yet — add wagons from the yard below.",
+}: TrainConsistStripProps) {
+  return (
+    <Box
+      px="md"
+      py="lg"
+      style={{
+        overflowX: "auto",
+        borderRadius: 12,
+        background:
+          "linear-gradient(180deg, var(--mantine-color-gray-0) 0%, var(--mantine-color-gray-1) 100%)",
+        border: "1px solid var(--mantine-color-gray-2)",
+      }}
+    >
+      <Box style={{ display: "inline-block", minWidth: "100%" }}>
+        <Group gap={0} wrap="nowrap" align="flex-end">
+          {locomotives.map((loco, index) => (
+            <Group key={loco.id} gap={0} wrap="nowrap" align="flex-end">
+              {index > 0 ? <Coupler /> : null}
+              <LocomotiveCar locomotive={loco} />
+            </Group>
+          ))}
+          {wagons.map((wagon) => (
+            <Group key={wagon.id} gap={0} wrap="nowrap" align="flex-end">
+              <Coupler />
+              <WagonCar wagon={wagon} />
+            </Group>
+          ))}
+        </Group>
+        {/* The rail */}
+        <Box
+          mt={6}
+          style={{
+            height: 0,
+            borderTop: "3px solid var(--mantine-color-gray-4)",
+            borderBottom: "1px solid var(--mantine-color-gray-3)",
+          }}
+        />
+        {!wagons.length ? (
+          <Text size="xs" c="dimmed" mt="xs">
+            {emptyHint}
+          </Text>
+        ) : null}
+      </Box>
+    </Box>
+  );
+}
+
+export interface TrainConsistStripProps {
+  locomotives: TrainCompositionLocomotive[];
+  wagons: TrainCompositionWagon[];
+  emptyHint?: string;
+}
+
+function Coupler() {
+  return (
+    <Box
+      style={{
+        width: 12,
+        height: 4,
+        marginBottom: 18,
+        background: "var(--mantine-color-gray-5)",
+        flexShrink: 0,
+      }}
+    />
+  );
+}
+
+function LocomotiveCar({ locomotive }: { locomotive: TrainCompositionLocomotive }) {
+  return (
+    <Tooltip
+      label={`${locomotive.code}${locomotive.name ? ` — ${locomotive.name}` : ""} · ${
+        locomotive.role === "LEAD" ? "Lead" : "Assist"
+      } · pulls ${locomotive.maxPullWeightTons}T`}
+      withArrow
+    >
+      <Stack
+        gap={2}
+        align="center"
+        px="sm"
+        py={6}
+        style={{
+          minWidth: 96,
+          borderRadius: "10px 14px 4px 4px",
+          background:
+            "linear-gradient(180deg, var(--mantine-color-edr-green-6) 0%, var(--mantine-color-edr-green-8) 100%)",
+          color: "white",
+          border: "1px solid var(--mantine-color-edr-green-9)",
+          flexShrink: 0,
+          cursor: "default",
+        }}
+      >
+        <Group gap={4} wrap="nowrap">
+          <TrainIcon size={13} />
+          <Text size="xs" fw={700} ff="monospace" lh={1.2}>
+            {locomotive.code}
+          </Text>
+        </Group>
+        <Text size="10px" fw={600} tt="uppercase" style={{ opacity: 0.85 }} lh={1}>
+          {locomotive.role === "LEAD" ? "Lead loco" : "Assist loco"}
+        </Text>
+      </Stack>
+    </Tooltip>
+  );
+}
+
+function WagonCar({ wagon }: { wagon: TrainCompositionWagon }) {
+  return (
+    <Tooltip
+      label={`${wagon.wagonNumber}${
+        wagon.wagonType
+          ? ` · ${wagon.wagonType.name} · ${wagon.wagonType.capacityTons}T cap · ${wagon.wagonType.lengthMeters}m`
+          : ""
+      }`}
+      withArrow
+    >
+      <Stack
+        gap={2}
+        align="center"
+        px="xs"
+        py={6}
+        style={{
+          minWidth: 76,
+          borderRadius: 6,
+          background: "white",
+          border: "1px solid var(--mantine-color-gray-3)",
+          borderBottom: "3px solid var(--mantine-color-edr-green-3)",
+          flexShrink: 0,
+          cursor: "default",
+        }}
+      >
+        <Text size="10px" c="dimmed" lh={1}>
+          #{wagon.sequenceNumber ?? "—"}
+        </Text>
+        <Text size="xs" fw={600} ff="monospace" lh={1.2}>
+          {wagon.wagonNumber}
+        </Text>
+        <Text size="10px" c="dimmed" lh={1}>
+          {wagon.wagonType?.code ?? "—"}
+        </Text>
+      </Stack>
+    </Tooltip>
+  );
+}

apps/edr-freight-web/backoffice/src/components/trainBuilder/trainStatus.ts

@@ -0,0 +1,25 @@
+import type { BuiltTrainStatus } from "@/services/trainBuilder.service";
+
+/** Badge color per built-train lifecycle status (Mantine palette keys). */
+export const trainStatusColor = (status: BuiltTrainStatus | string): string => {
+  switch (status) {
+    case "AVAILABLE":
+      return "edr-green";
+    case "SCHEDULED":
+      return "blue";
+    case "IN_SERVICE":
+      return "teal";
+    case "UNDER_MAINTENANCE":
+      return "yellow";
+    case "OUT_OF_SERVICE":
+      return "red";
+    default:
+      return "gray";
+  }
+};
+
+export const trainStatusLabel = (status: BuiltTrainStatus | string): string =>
+  String(status)
+    .toLowerCase()
+    .replace(/_/g, " ")
+    .replace(/^\w/, (c) => c.toUpperCase());

apps/edr-freight-web/backoffice/src/components/wagons/WagonTransferRequestsModal.tsx

@@ -0,0 +1,344 @@
+import { Freight } from "@edr/types";
+import {
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Divider,
+  Group,
+  Loader,
+  Modal,
+  ScrollArea,
+  Stack,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  ArrowRight,
+  ChevronLeft,
+  Inbox,
+  PackageCheck,
+  Warehouse,
+  X,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { api } from "@/services/api";
+import { useToast } from "@/hooks/use-toast";
+import type { WagonTransferRequest } from "@/services/wagon.service";
+
+export interface WagonTransferRequestsModalProps {
+  opened: boolean;
+  onClose: () => void;
+}
+
+const PENDING = Freight.WagonTransferRequestStatus.Pending;
+const AVAILABLE = Freight.WagonStatus.Available;
+
+const yardLabel = (y?: { label?: string; code?: string } | null) =>
+  y?.label || y?.code || "—";
+const typeLabel = (t?: { code?: string; name?: string } | null) =>
+  t ? `${t.code ?? ""}${t.name ? ` · ${t.name}` : ""}` : "—";
+
+/** Requester → destination + type + count summary line, reused in list and picker. */
+const RequestSummary = ({ r }: { r: WagonTransferRequest }) => (
+  <Group gap={8} wrap="nowrap">
+    <Text fw={600} size="sm" truncate>
+      {yardLabel(r.fromYard)}
+    </Text>
+    <ArrowRight size={14} style={{ flexShrink: 0 }} />
+    <Text fw={600} size="sm" truncate>
+      {yardLabel(r.toYard)}
+    </Text>
+    <Badge variant="light" color="grape" radius="sm">
+      {r.quantity}× {typeLabel(r.wagonType)}
+    </Badge>
+  </Group>
+);
+
+/**
+ * OCC fulfilment queue for wagon-transfer requests. Lists PENDING requests; open
+ * one to hand-pick exactly the requested number of wagons from the source yard
+ * (of the requested type) and execute the move, or cancel the request.
+ */
+const WagonTransferRequestsModal = ({
+  opened,
+  onClose,
+}: WagonTransferRequestsModalProps) => {
+  const { toast } = useToast();
+  const [active, setActive] = useState<WagonTransferRequest | null>(null);
+  const [picked, setPicked] = useState<Set<string>>(new Set());
+
+  const { data: requests = [], isLoading } = useQuery({
+    ...api.wagonTransferRequests.list.queryOptions({ input: { status: PENDING } }),
+    enabled: opened,
+  });
+
+  // Available wagons of the requested type sitting in the request's source yard.
+  const { data: wagons = [], isLoading: wagonsLoading } = useQuery({
+    ...api.wagons.list.queryOptions({
+      input: {
+        filters: active
+          ? {
+              currentYardId: active.fromYardId,
+              wagonTypeId: active.wagonTypeId,
+              status: AVAILABLE,
+            }
+          : {},
+      },
+    }),
+    enabled: opened && Boolean(active),
+  });
+
+  const fulfill = useMutation(api.wagonTransferRequests.fulfill.mutationOptions());
+  const cancel = useMutation(api.wagonTransferRequests.cancel.mutationOptions());
+
+  const showError = (err: unknown, fallback: string) => {
+    const message =
+      (err as { response?: { data?: { message?: string } } })?.response?.data
+        ?.message ?? fallback;
+    toast({ title: fallback, description: String(message), variant: "destructive" });
+  };
+
+  const openPicker = (r: WagonTransferRequest) => {
+    setActive(r);
+    setPicked(new Set());
+  };
+  const closePicker = () => {
+    setActive(null);
+    setPicked(new Set());
+  };
+
+  const toggle = (id: string) =>
+    setPicked((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else if (active && next.size >= active.quantity) return prev; // cap at quantity
+      else next.add(id);
+      return next;
+    });
+
+  const need = active?.quantity ?? 0;
+  const shortfall = active ? Math.max(0, need - wagons.length) : 0;
+
+  const handleFulfill = async () => {
+    if (!active || picked.size !== need) return;
+    try {
+      await fulfill.mutateAsync({ id: active.id, wagonIds: [...picked] });
+      toast({
+        title: `Transferred ${need} wagon(s) · ${yardLabel(active.fromYard)} → ${yardLabel(
+          active.toYard,
+        )}`,
+      });
+      closePicker();
+    } catch (err) {
+      showError(err, "Transfer failed");
+    }
+  };
+
+  const handleCancel = async (r: WagonTransferRequest) => {
+    try {
+      await cancel.mutateAsync({ id: r.id });
+      toast({ title: "Request cancelled" });
+    } catch (err) {
+      showError(err, "Cancel failed");
+    }
+  };
+
+  const sortedWagons = useMemo(
+    () => [...wagons].sort((a, b) => a.wagonNumber.localeCompare(b.wagonNumber)),
+    [wagons],
+  );
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size="min(760px, 96vw)"
+      radius="lg"
+      centered
+      overlayProps={{ blur: 2 }}
+      title={
+        <Group gap="sm">
+          <ThemeIcon variant="light" color="edr-green" radius="md" size="lg">
+            <Inbox size={18} />
+          </ThemeIcon>
+          <div>
+            <Text fw={700}>Wagon Transfer Requests</Text>
+            <Text size="xs" c="dimmed">
+              {active
+                ? "Pick the wagons to move, then transfer"
+                : "OCC queue — pick wagons and complete each move"}
+            </Text>
+          </div>
+        </Group>
+      }
+    >
+      {!active ? (
+        // ---- Pending queue ----
+        isLoading ? (
+          <Group justify="center" p="xl">
+            <Loader />
+          </Group>
+        ) : requests.length === 0 ? (
+          <Card withBorder radius="md" padding="xl">
+            <Stack align="center" gap={6}>
+              <ThemeIcon variant="light" color="gray" radius="xl" size={48}>
+                <Inbox size={22} />
+              </ThemeIcon>
+              <Text fw={600}>No pending transfer requests</Text>
+              <Text size="sm" c="dimmed" ta="center" maw={420}>
+                When staff request a yard-to-yard wagon move, it appears here for
+                you to fulfil.
+              </Text>
+            </Stack>
+          </Card>
+        ) : (
+          <Stack gap="sm">
+            {requests.map((r) => (
+              <Card key={r.id} withBorder radius="md" padding="md">
+                <Group justify="space-between" wrap="nowrap" align="flex-start">
+                  <Stack gap={6} style={{ minWidth: 0 }}>
+                    <RequestSummary r={r} />
+                    {r.note ? (
+                      <Text size="xs" c="dimmed">
+                        “{r.note}”
+                      </Text>
+                    ) : null}
+                  </Stack>
+                  <Group gap={8} wrap="nowrap">
+                    <Button
+                      size="compact-sm"
+                      variant="subtle"
+                      color="gray"
+                      leftSection={<X size={14} />}
+                      loading={cancel.isPending}
+                      onClick={() => handleCancel(r)}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      size="compact-sm"
+                      color="edr-green"
+                      leftSection={<PackageCheck size={14} />}
+                      onClick={() => openPicker(r)}
+                    >
+                      Fulfil
+                    </Button>
+                  </Group>
+                </Group>
+              </Card>
+            ))}
+          </Stack>
+        )
+      ) : (
+        // ---- Wagon picker for the active request ----
+        <Stack gap="md">
+          <Card withBorder radius="md" padding="sm" bg="var(--mantine-color-gray-0)">
+            <RequestSummary r={active} />
+          </Card>
+
+          <Group justify="space-between">
+            <Text size="sm" fw={600}>
+              Select wagons in {yardLabel(active.fromYard)}
+            </Text>
+            <Badge
+              color={picked.size === need ? "teal" : "gray"}
+              variant={picked.size === need ? "filled" : "light"}
+            >
+              {picked.size} / {need} selected
+            </Badge>
+          </Group>
+
+          {wagonsLoading ? (
+            <Group justify="center" p="lg">
+              <Loader size="sm" />
+            </Group>
+          ) : sortedWagons.length === 0 ? (
+            <Card withBorder radius="md" padding="lg">
+              <Group gap={8} justify="center">
+                <Warehouse size={16} />
+                <Text size="sm" c="dimmed">
+                  No available wagons of this type in {yardLabel(active.fromYard)}.
+                </Text>
+              </Group>
+            </Card>
+          ) : (
+            <>
+              {shortfall > 0 ? (
+                <Text size="xs" c="orange.7">
+                  Only {sortedWagons.length} available — {shortfall} short of the{" "}
+                  {need} requested.
+                </Text>
+              ) : null}
+              <ScrollArea.Autosize mah={320}>
+                <Stack gap={6}>
+                  {sortedWagons.map((w) => {
+                    const checked = picked.has(w.id);
+                    const atCap = !checked && picked.size >= need;
+                    return (
+                      <Card
+                        key={w.id}
+                        withBorder
+                        radius="md"
+                        padding="xs"
+                        onClick={() => !atCap && toggle(w.id)}
+                        style={{
+                          cursor: atCap ? "not-allowed" : "pointer",
+                          borderColor: checked
+                            ? "var(--mantine-color-edr-green-4)"
+                            : undefined,
+                          opacity: atCap ? 0.55 : 1,
+                        }}
+                      >
+                        <Group gap="sm" wrap="nowrap">
+                          {/* Visual only — the Card's onClick owns the toggle so a
+                              click on the box doesn't fire both and cancel out. */}
+                          <Checkbox
+                            checked={checked}
+                            readOnly
+                            disabled={atCap}
+                            color="edr-green"
+                            tabIndex={-1}
+                            aria-hidden
+                          />
+                          <Text fw={600} size="sm">
+                            {w.wagonNumber}
+                          </Text>
+                        </Group>
+                      </Card>
+                    );
+                  })}
+                </Stack>
+              </ScrollArea.Autosize>
+            </>
+          )}
+
+          <Divider />
+          <Group justify="space-between">
+            <Button
+              variant="subtle"
+              color="gray"
+              leftSection={<ChevronLeft size={16} />}
+              onClick={closePicker}
+            >
+              Back to queue
+            </Button>
+            <Button
+              color="edr-green"
+              leftSection={<PackageCheck size={16} />}
+              loading={fulfill.isPending}
+              disabled={picked.size !== need}
+              onClick={handleFulfill}
+            >
+              Transfer {need} wagon{need === 1 ? "" : "s"}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+    </Modal>
+  );
+};
+
+export default WagonTransferRequestsModal;

apps/edr-freight-web/backoffice/src/components/wagons/WagonYardWorkspaceModal.tsx

@@ -14,7 +14,6 @@ import {
   Select,
   Slider,
   Stack,
-  Switch,
   Text,
   ThemeIcon,
 } from "@mantine/core";
@@ -126,11 +125,12 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
 
   const [transferYardId, setTransferYardId] = useState<string | null>(null);
   const [transferQty, setTransferQty] = useState(0);
-  const [freeAfterMove, setFreeAfterMove] = useState(false);
   const [toAssignedQty, setToAssignedQty] = useState(0);
   const [toAvailableQty, setToAvailableQty] = useState(0);
 
-  const transfer = useMutation(api.wagons.bulkTransfer.mutationOptions());
+  const createRequest = useMutation(
+    api.wagonTransferRequests.create.mutationOptions(),
+  );
   const setStatus = useMutation(api.wagons.bulkSetStatus.mutationOptions());
 
   const yardName = useMemo(() => {
@@ -187,13 +187,6 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
     () => matching.filter((w) => w.status !== AVAILABLE && w.status !== ASSIGNED),
     [matching],
   );
-  // Available first, then assigned, then the rest — a partial move relocates
-  // idle wagons before touching assigned ones.
-  const transferPool = useMemo(
-    () => [...availableWagons, ...assignedWagons, ...otherWagons],
-    [availableWagons, assignedWagons, otherWagons],
-  );
-
   const total = matching.length;
   const availableCount = availableWagons.length;
   const assignedCount = assignedWagons.length;
@@ -214,7 +207,6 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
   useEffect(() => {
     setTransferYardId(null);
     setTransferQty(0);
-    setFreeAfterMove(false);
     setToAssignedQty(0);
     setToAvailableQty(0);
   }, [yardId, typeId]);
@@ -238,25 +230,27 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
     toast({ title: fallback, description: String(message), variant: "destructive" });
   };
 
-  const handleTransfer = async () => {
-    if (!transferYardId || transferQty < 1) return;
-    const ids = transferPool.slice(0, transferQty).map((w) => w.id);
-    if (!ids.length) return;
+  // Request-only: the requester specifies count + destination; OCC later picks
+  // the physical wagons and executes the move. No wagons are moved here.
+  const handleRequest = async () => {
+    if (!yardId || !typeId || !transferYardId || transferQty < 1) return;
     try {
-      const res = await transfer.mutateAsync({ wagonIds: ids, toYardId: transferYardId });
-      if (freeAfterMove) {
-        await setStatus.mutateAsync({ wagonIds: ids, status: AVAILABLE });
-      }
+      await createRequest.mutateAsync({
+        fromYardId: yardId,
+        toYardId: transferYardId,
+        wagonTypeId: typeId,
+        quantity: transferQty,
+      });
       toast({
-        title: `Moved ${res.moved} wagon(s) to ${yardName(transferYardId)}${
-          freeAfterMove ? " · set Available" : ""
-        }`,
+        title: `Requested ${transferQty} ${typeInfo.code(typeId)} wagon(s) · ${yardName(
+          yardId,
+        )} → ${yardName(transferYardId)}`,
+        description: "OCC will pick the wagons and complete the move.",
       });
       setTransferQty(0);
       setTransferYardId(null);
-      setFreeAfterMove(false);
     } catch (err) {
-      showError(err, "Transfer failed");
+      showError(err, "Request failed");
     }
   };
 
@@ -279,7 +273,7 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
     }
   };
 
-  const busy = transfer.isPending || setStatus.isPending;
+  const busy = createRequest.isPending || setStatus.isPending;
   const pct = (n: number) => (total > 0 ? (n / total) * 100 : 0);
 
   return (
@@ -402,12 +396,15 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
               {/* Transfer */}
               <Grid.Col span={{ base: 12, md: 6 }}>
                 <Card withBorder radius="md" h="100%" padding="lg">
-                  <Group gap="xs" mb="md">
+                  <Group gap="xs" mb={4}>
                     <ThemeIcon variant="light" color="grape" radius="md" size="md">
                       <ArrowRightLeft size={16} />
                     </ThemeIcon>
-                    <Text fw={700}>Move to another yard</Text>
+                    <Text fw={700}>Request transfer to another yard</Text>
                   </Group>
+                  <Text size="xs" c="dimmed" mb="md">
+                    Sends a request to OCC — they pick the wagons and complete the move.
+                  </Text>
                   <Stack gap="md">
                     <div>
                       <Text size="sm" fw={500} mb={4}>
@@ -424,12 +421,6 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
                       searchable
                       radius="md"
                     />
-                    <Switch
-                      checked={freeAfterMove}
-                      onChange={(e) => setFreeAfterMove(e.currentTarget.checked)}
-                      label="Set moved wagons to Available"
-                      color="teal"
-                    />
                     {transferYardId && transferQty > 0 ? (
                       <Card bg="var(--mantine-color-gray-0)" radius="md" padding="sm" withBorder>
                         <Group gap={8} wrap="nowrap">
@@ -453,12 +444,13 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
                     ) : null}
                     <Button
                       leftSection={<ArrowRightLeft size={16} />}
-                      onClick={handleTransfer}
-                      loading={transfer.isPending}
+                      onClick={handleRequest}
+                      loading={createRequest.isPending}
                       disabled={busy || !transferYardId || transferQty < 1}
                       color="edr-green"
                     >
-                      Move {transferQty > 0 ? `${transferQty} ` : ""}wagon{transferQty === 1 ? "" : "s"}
+                      Request {transferQty > 0 ? `${transferQty} ` : ""}wagon
+                      {transferQty === 1 ? "" : "s"}
                     </Button>
                   </Stack>
                 </Card>