train

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;
+}