changes

apps/edr-freight-web/backoffice/src/components/fleet/FleetRecordActions.tsx

@@ -33,7 +33,9 @@ const FleetRecordActions = ({
   const isVehicle = config.slug === "vehicles";
   const showHistory =
     Boolean(onHistory) &&
-    (config.slug === "drivers" || config.slug === "vehicles");
+    (config.slug === "drivers" ||
+      config.slug === "vehicles" ||
+      config.slug === "wagons");
 
   const handleDetail = () => {
     if (!config.detailPath || !("id" in record)) return;

apps/edr-freight-web/backoffice/src/components/fleet/WagonMovementHistoryModal.tsx

@@ -0,0 +1,133 @@
+import type { ReactNode } from "react";
+import { Badge, Center, Group, Loader, Modal, Text, Timeline } from "@mantine/core";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, PackageCheck, TrainFront, Wrench } from "lucide-react";
+
+import { api } from "@/services/api";
+import type { FleetRecord } from "@/services/fleet/fleet.service";
+import type { WagonMovementRecord } from "@/services/wagon.service";
+
+export interface WagonMovementHistoryModalProps {
+  opened: boolean;
+  onClose: () => void;
+  record: FleetRecord | null;
+}
+
+const asObj = (r: FleetRecord | null) => (r ?? {}) as Record<string, unknown>;
+
+/** Chip style per wagon_movements ledger kind. */
+const KIND_META: Record<string, { label: string; color: string; icon: ReactNode }> = {
+  LOADED: {
+    label: "Loaded leg",
+    color: "edr-green",
+    icon: <PackageCheck size={14} />,
+  },
+  EMPTY_REPOSITION: {
+    label: "Empty reposition",
+    color: "blue",
+    icon: <TrainFront size={14} />,
+  },
+  MANUAL: {
+    label: "Manual move",
+    color: "orange",
+    icon: <Wrench size={14} />,
+  },
+};
+
+const yardLabel = (
+  yard: { label?: string; code?: string } | null | undefined,
+  yardId: string | null,
+) => yard?.label ?? yard?.code ?? yardId ?? "Unknown";
+
+const fmt = (iso: string) => {
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? iso : d.toLocaleString();
+};
+
+/**
+ * Movement ledger for one wagon: every relocation between yards — booking legs,
+ * empty reposition rides, and manual staff corrections — newest first.
+ */
+const WagonMovementHistoryModal = ({
+  opened,
+  onClose,
+  record,
+}: WagonMovementHistoryModalProps) => {
+  const r = asObj(record);
+  const id = r.id ? String(r.id) : "";
+  const wagonNumber = r.wagonNumber ? String(r.wagonNumber) : "";
+
+  const { data, isLoading } = useQuery(
+    api.wagons.movements.queryOptions({
+      input: { id },
+      enabled: opened && Boolean(id),
+    }),
+  );
+
+  const movements: WagonMovementRecord[] = data ?? [];
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={<Text fw={600}>{`Wagon history — ${wagonNumber}`.trim()}</Text>}
+      radius="lg"
+      size="lg"
+      centered
+    >
+      {isLoading ? (
+        <Center py="xl">
+          <Loader size="sm" />
+        </Center>
+      ) : movements.length === 0 ? (
+        <Text c="dimmed" ta="center" py="lg" size="sm">
+          No movements recorded yet. Every yard-to-yard move appears here — a
+          booking's loaded leg, an empty reposition ride, or a manual correction.
+        </Text>
+      ) : (
+        <Timeline active={movements.length} bulletSize={24} lineWidth={2}>
+          {movements.map((movement) => {
+            const meta = KIND_META[movement.kind] ?? {
+              label: movement.kind,
+              color: "gray",
+              icon: <TrainFront size={14} />,
+            };
+            const from = yardLabel(movement.fromYard, movement.fromYardId);
+            const to = yardLabel(movement.toYard, movement.toYardId);
+            return (
+              <Timeline.Item
+                key={movement.id}
+                bullet={meta.icon}
+                title={
+                  <Group gap={6} wrap="nowrap">
+                    <Text size="sm" fw={600}>
+                      {from}
+                    </Text>
+                    <ArrowRight size={13} />
+                    <Text size="sm" fw={600}>
+                      {to}
+                    </Text>
+                    <Badge size="xs" variant="light" color={meta.color}>
+                      {meta.label}
+                    </Badge>
+                  </Group>
+                }
+              >
+                {movement.note && (
+                  <Text size="sm" c="dimmed">
+                    {movement.note}
+                  </Text>
+                )}
+                <Text size="xs" mt={4} c="dimmed">
+                  {fmt(movement.occurredAt)}
+                </Text>
+              </Timeline.Item>
+            );
+          })}
+        </Timeline>
+      )}
+    </Modal>
+  );
+};
+
+export default WagonMovementHistoryModal;