implement wagon maintenance feature: add functionality to detach wagons and move them to maintenance status

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

@@ -50,7 +50,15 @@ export default function AvailableWagonsPanel({
   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);
+      if (wagon.wagonType) {
+        // e.g. "Flat wagon (NW5)" — name with its type code.
+        byId.set(
+          wagon.wagonType.id,
+          wagon.wagonType.code
+            ? `${wagon.wagonType.name} (${wagon.wagonType.code})`
+            : wagon.wagonType.name,
+        );
+      }
     }
     return [
       { value: "ALL", label: "All types" },
@@ -64,6 +72,22 @@ export default function AvailableWagonsPanel({
     );
   };
 
+  const allSelected =
+    wagons.length > 0 && wagons.every((w) => selected.includes(w.id));
+  const someSelected = wagons.some((w) => selected.includes(w.id));
+
+  const toggleAll = (checked: boolean) => {
+    setSelected((prev) => {
+      if (checked) {
+        const ids = new Set(prev);
+        wagons.forEach((w) => ids.add(w.id));
+        return [...ids];
+      }
+      const visible = new Set(wagons.map((w) => w.id));
+      return prev.filter((id) => !visible.has(id));
+    });
+  };
+
   const handleAssign = () => {
     if (!selected.length) return;
     onAssign(selected);
@@ -88,6 +112,16 @@ export default function AvailableWagonsPanel({
         />
       </Group>
 
+      {wagons.length ? (
+        <Checkbox
+          size="sm"
+          label={`Select all (${wagons.length})`}
+          checked={allSelected}
+          indeterminate={!allSelected && someSelected}
+          onChange={(e) => toggleAll(e.currentTarget.checked)}
+        />
+      ) : null}
+
       <ScrollArea.Autosize mah={380} type="auto">
         <Stack gap={6}>
           {wagonsQuery.isLoading ? (

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

@@ -31,13 +31,12 @@ const isOddNumber = (value: string) => /^\d*[13579]$/.test(value.trim());
 const isEvenNumber = (value: string) => /^\d*[02468]$/.test(value.trim());
 
 /**
- * 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.
+ * Step one of the Train Builder: pick the yard it is being assembled in and
+ * couple at least two locomotives from that yard. The train code is assigned by
+ * the system. Wagons are attached afterwards on the composition page.
  */
 export default function BuildTrainModal({ opened, onClose, onBuilt }: BuildTrainModalProps) {
   const { toast } = useToast();
-  const [code, setCode] = useState("");
   const [exportTrainNumber, setExportTrainNumber] = useState("");
   const [importTrainNumber, setImportTrainNumber] = useState("");
   const [trainName, setTrainName] = useState("");
@@ -62,7 +61,6 @@ export default function BuildTrainModal({ opened, onClose, onBuilt }: BuildTrain
 
   useEffect(() => {
     if (!opened) {
-      setCode("");
       setExportTrainNumber("");
       setImportTrainNumber("");
       setTrainName("");
@@ -73,9 +71,9 @@ export default function BuildTrainModal({ opened, onClose, onBuilt }: BuildTrain
   }, [opened]);
 
   const handleBuild = async () => {
-    if (!code.trim() || !yardId || locomotiveIds.length < 2) {
+    if (!yardId || locomotiveIds.length < 2) {
       toast({
-        title: "Enter a train code, pick a yard, and couple at least two locomotives",
+        title: "Pick a yard and couple at least two locomotives",
         variant: "destructive",
       });
       return;
@@ -89,7 +87,6 @@ export default function BuildTrainModal({ opened, onClose, onBuilt }: BuildTrain
     }
     try {
       const composition = await build.mutateAsync({
-        code: code.trim(),
         exportTrainNumber: exportTrainNumber.trim(),
         importTrainNumber: importTrainNumber.trim(),
         currentYardId: yardId,
@@ -125,24 +122,16 @@ export default function BuildTrainModal({ opened, onClose, onBuilt }: BuildTrain
       <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.
+          standing in that same yard. The train code is assigned automatically;
+          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>
+        <TextInput
+          label="Name (optional)"
+          placeholder="e.g. Fertilizer block"
+          value={trainName}
+          onChange={(e) => setTrainName(e.currentTarget.value)}
+          maxLength={100}
+        />
         <Group grow>
           <TextInput
             label="Export train number"

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

@@ -7,7 +7,7 @@ import {
   type DropResult,
 } from "@hello-pangea/dnd";
 import { ActionIcon, Badge, Box, Group, Stack, Text, Tooltip } from "@mantine/core";
-import { GripVertical, Trash2 } from "lucide-react";
+import { GripVertical, Trash2, Wrench } from "lucide-react";
 import { type ReactNode } from "react";
 import { createPortal } from "react-dom";
 
@@ -36,6 +36,7 @@ export default function ConsistWagonList({
   editable,
   onReorder,
   onRemove,
+  onMaintenance,
   busy = false,
 }: ConsistWagonListProps) {
   const onDragEnd = (result: DropResult) => {
@@ -78,6 +79,7 @@ export default function ConsistWagonList({
                     editable={editable}
                     busy={busy}
                     onRemove={onRemove}
+                    onMaintenance={onMaintenance}
                   />
                 )}
               </Draggable>
@@ -95,6 +97,8 @@ export interface ConsistWagonListProps {
   editable: boolean;
   onReorder: (wagonIds: string[]) => void;
   onRemove: (wagonId: string) => void;
+  /** Detach the wagon and move it to MAINTENANCE status. */
+  onMaintenance: (wagonId: string) => void;
   busy?: boolean;
 }
 
@@ -106,6 +110,7 @@ function WagonRow({
   editable,
   busy,
   onRemove,
+  onMaintenance,
 }: {
   wagon: TrainCompositionWagon;
   index: number;
@@ -114,6 +119,7 @@ function WagonRow({
   editable: boolean;
   busy: boolean;
   onRemove: (wagonId: string) => void;
+  onMaintenance: (wagonId: string) => void;
 }) {
   return (
     <PortalAwareRow snapshot={snapshot}>
@@ -153,17 +159,30 @@ function WagonRow({
           </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>
+          <Group gap={4} wrap="nowrap">
+            <Tooltip label="Send to maintenance (detaches)" withArrow>
+              <ActionIcon
+                variant="subtle"
+                color="orange"
+                disabled={busy}
+                onClick={() => onMaintenance(wagon.id)}
+                aria-label={`Send wagon ${wagon.wagonNumber} to maintenance`}
+              >
+                <Wrench size={16} />
+              </ActionIcon>
+            </Tooltip>
+            <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>
+          </Group>
         ) : null}
       </Group>
     </PortalAwareRow>