train

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

@@ -0,0 +1,103 @@
+import { Alert, Button, Group, Modal, Select, Stack, Text } from "@mantine/core";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { isAxiosError } from "axios";
+import { MapPin } from "lucide-react";
+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;
+};
+
+/**
+ * Relocate the train to another yard. The consist moves as one unit — every
+ * coupled locomotive and wagon follows, so their current yards always match
+ * the train's.
+ */
+export default function ChangeYardModal({ composition, opened, onClose }: ChangeYardModalProps) {
+  const { toast } = useToast();
+  const [yardId, setYardId] = useState("");
+
+  const yardsQuery = useQuery(api.routes.yards.queryOptions({ staleTime: 5 * 60_000 }));
+  const setYard = useMutation(api.trainBuilder.setYard.mutationOptions());
+
+  useEffect(() => {
+    if (opened) setYardId(composition?.currentYard?.id ?? "");
+  }, [opened, composition]);
+
+  const handleSave = async () => {
+    if (!composition || !yardId) return;
+    try {
+      await setYard.mutateAsync({ id: composition.id, currentYardId: yardId });
+      toast({ title: "Train relocated" });
+      onClose();
+    } catch (err) {
+      toast({
+        title: "Relocation failed",
+        description: parseError(err, "Could not change the yard"),
+        variant: "destructive",
+      });
+    }
+  };
+
+  const memberCount =
+    (composition?.locomotives.length ?? 0) + (composition?.totals.wagonCount ?? 0);
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={<Text fw={600}>Change yard — train {composition?.code}</Text>}
+      radius="lg"
+      centered
+    >
+      <Stack gap="md">
+        <Alert color="yellow" icon={<MapPin size={16} />}>
+          The whole consist moves with the train: {composition?.locomotives.length ?? 0}{" "}
+          locomotive{(composition?.locomotives.length ?? 0) === 1 ? "" : "s"} and{" "}
+          {composition?.totals.wagonCount ?? 0} wagon
+          {(composition?.totals.wagonCount ?? 0) === 1 ? "" : "s"} ({memberCount} vehicles)
+          are relocated so their current yard always matches the train's. Wagon moves are
+          recorded in the movement ledger.
+        </Alert>
+        <Select
+          label="New yard"
+          placeholder="Select yard"
+          data={(yardsQuery.data ?? []).map((y) => ({
+            value: y.id,
+            label: y.label ?? y.code,
+          }))}
+          value={yardId || null}
+          onChange={(v) => setYardId(v ?? "")}
+          searchable
+        />
+        <Group justify="flex-end">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            loading={setYard.isPending}
+            disabled={!yardId || yardId === composition?.currentYard?.id}
+            onClick={handleSave}
+          >
+            Relocate train
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+export interface ChangeYardModalProps {
+  composition: TrainComposition | null;
+  opened: boolean;
+  onClose: () => void;
+}

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

@@ -1,159 +0,0 @@
-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>
-  );
-}