implement update train details feature: add DTO, service method, and UI modal for editing train name and run numbers

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

@@ -0,0 +1,123 @@
+import { Button, Group, Modal, Stack, Text, TextInput } from "@mantine/core";
+import { useMutation } from "@tanstack/react-query";
+import { Pencil } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { useToast } from "@/hooks/use-toast";
+import { api } from "@/services/api";
+import type { BuiltTrainSummary } from "@/services/trainBuilder.service";
+
+export interface EditTrainDetailsModalProps {
+  /** Train being edited; null closes the modal. */
+  train: BuiltTrainSummary | null;
+  onClose: () => void;
+}
+
+/**
+ * Edit a built train's display identity from the list: its name and its fixed
+ * import/export run numbers. Composition (yard, locomotives, wagons) is edited
+ * on the detail page. Number collisions come back as a 409 with the owning
+ * train's code and surface verbatim.
+ */
+const EditTrainDetailsModal = ({ train, onClose }: EditTrainDetailsModalProps) => {
+  const { toast } = useToast();
+  const [name, setName] = useState("");
+  const [importNo, setImportNo] = useState("");
+  const [exportNo, setExportNo] = useState("");
+
+  useEffect(() => {
+    if (train) {
+      setName(train.trainName ?? "");
+      setImportNo(train.importTrainNumber ?? "");
+      setExportNo(train.exportTrainNumber ?? "");
+    }
+  }, [train]);
+
+  const update = useMutation(api.trainBuilder.updateDetails.mutationOptions());
+
+  const handleSave = async () => {
+    if (!train) return;
+    try {
+      await update.mutateAsync({
+        id: train.id,
+        payload: {
+          trainName: name.trim(),
+          // Numbers cannot be cleared — only replaced; empty inputs keep the
+          // current value (legacy trains may have none yet).
+          ...(importNo.trim() ? { importTrainNumber: importNo.trim() } : {}),
+          ...(exportNo.trim() ? { exportTrainNumber: exportNo.trim() } : {}),
+        },
+      });
+      toast({ title: `Train ${train.code} updated` });
+      onClose();
+    } catch (err) {
+      const message =
+        (err as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Update failed";
+      toast({
+        title: "Could not update train",
+        description: String(message),
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <Modal
+      opened={Boolean(train)}
+      onClose={onClose}
+      title={
+        <Group gap={8}>
+          <Pencil size={16} />
+          <Text fw={700}>Edit train {train?.code ?? ""}</Text>
+        </Group>
+      }
+      centered
+      size="md"
+      radius="lg"
+    >
+      <Stack gap="md">
+        <TextInput
+          label="Train name"
+          placeholder="Optional display name"
+          value={name}
+          onChange={(e) => setName(e.currentTarget.value)}
+          maxLength={100}
+          radius="md"
+        />
+        <Group grow>
+          <TextInput
+            label="Import train no."
+            placeholder="e.g. 8002"
+            value={importNo}
+            onChange={(e) => setImportNo(e.currentTarget.value)}
+            maxLength={20}
+            radius="md"
+          />
+          <TextInput
+            label="Export train no."
+            placeholder="e.g. 8001"
+            value={exportNo}
+            onChange={(e) => setExportNo(e.currentTarget.value)}
+            maxLength={20}
+            radius="md"
+          />
+        </Group>
+        <Group justify="flex-end" gap="sm">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            color="edr-green"
+            loading={update.isPending}
+            onClick={handleSave}
+          >
+            Save
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default EditTrainDetailsModal;