train

apps/edr-freight-web/backoffice/src/components/wagons/WagonTransferRequestsModal.tsx

@@ -0,0 +1,344 @@
+import { Freight } from "@edr/types";
+import {
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  Divider,
+  Group,
+  Loader,
+  Modal,
+  ScrollArea,
+  Stack,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  ArrowRight,
+  ChevronLeft,
+  Inbox,
+  PackageCheck,
+  Warehouse,
+  X,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { api } from "@/services/api";
+import { useToast } from "@/hooks/use-toast";
+import type { WagonTransferRequest } from "@/services/wagon.service";
+
+export interface WagonTransferRequestsModalProps {
+  opened: boolean;
+  onClose: () => void;
+}
+
+const PENDING = Freight.WagonTransferRequestStatus.Pending;
+const AVAILABLE = Freight.WagonStatus.Available;
+
+const yardLabel = (y?: { label?: string; code?: string } | null) =>
+  y?.label || y?.code || "—";
+const typeLabel = (t?: { code?: string; name?: string } | null) =>
+  t ? `${t.code ?? ""}${t.name ? ` · ${t.name}` : ""}` : "—";
+
+/** Requester → destination + type + count summary line, reused in list and picker. */
+const RequestSummary = ({ r }: { r: WagonTransferRequest }) => (
+  <Group gap={8} wrap="nowrap">
+    <Text fw={600} size="sm" truncate>
+      {yardLabel(r.fromYard)}
+    </Text>
+    <ArrowRight size={14} style={{ flexShrink: 0 }} />
+    <Text fw={600} size="sm" truncate>
+      {yardLabel(r.toYard)}
+    </Text>
+    <Badge variant="light" color="grape" radius="sm">
+      {r.quantity}× {typeLabel(r.wagonType)}
+    </Badge>
+  </Group>
+);
+
+/**
+ * OCC fulfilment queue for wagon-transfer requests. Lists PENDING requests; open
+ * one to hand-pick exactly the requested number of wagons from the source yard
+ * (of the requested type) and execute the move, or cancel the request.
+ */
+const WagonTransferRequestsModal = ({
+  opened,
+  onClose,
+}: WagonTransferRequestsModalProps) => {
+  const { toast } = useToast();
+  const [active, setActive] = useState<WagonTransferRequest | null>(null);
+  const [picked, setPicked] = useState<Set<string>>(new Set());
+
+  const { data: requests = [], isLoading } = useQuery({
+    ...api.wagonTransferRequests.list.queryOptions({ input: { status: PENDING } }),
+    enabled: opened,
+  });
+
+  // Available wagons of the requested type sitting in the request's source yard.
+  const { data: wagons = [], isLoading: wagonsLoading } = useQuery({
+    ...api.wagons.list.queryOptions({
+      input: {
+        filters: active
+          ? {
+              currentYardId: active.fromYardId,
+              wagonTypeId: active.wagonTypeId,
+              status: AVAILABLE,
+            }
+          : {},
+      },
+    }),
+    enabled: opened && Boolean(active),
+  });
+
+  const fulfill = useMutation(api.wagonTransferRequests.fulfill.mutationOptions());
+  const cancel = useMutation(api.wagonTransferRequests.cancel.mutationOptions());
+
+  const showError = (err: unknown, fallback: string) => {
+    const message =
+      (err as { response?: { data?: { message?: string } } })?.response?.data
+        ?.message ?? fallback;
+    toast({ title: fallback, description: String(message), variant: "destructive" });
+  };
+
+  const openPicker = (r: WagonTransferRequest) => {
+    setActive(r);
+    setPicked(new Set());
+  };
+  const closePicker = () => {
+    setActive(null);
+    setPicked(new Set());
+  };
+
+  const toggle = (id: string) =>
+    setPicked((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else if (active && next.size >= active.quantity) return prev; // cap at quantity
+      else next.add(id);
+      return next;
+    });
+
+  const need = active?.quantity ?? 0;
+  const shortfall = active ? Math.max(0, need - wagons.length) : 0;
+
+  const handleFulfill = async () => {
+    if (!active || picked.size !== need) return;
+    try {
+      await fulfill.mutateAsync({ id: active.id, wagonIds: [...picked] });
+      toast({
+        title: `Transferred ${need} wagon(s) · ${yardLabel(active.fromYard)} → ${yardLabel(
+          active.toYard,
+        )}`,
+      });
+      closePicker();
+    } catch (err) {
+      showError(err, "Transfer failed");
+    }
+  };
+
+  const handleCancel = async (r: WagonTransferRequest) => {
+    try {
+      await cancel.mutateAsync({ id: r.id });
+      toast({ title: "Request cancelled" });
+    } catch (err) {
+      showError(err, "Cancel failed");
+    }
+  };
+
+  const sortedWagons = useMemo(
+    () => [...wagons].sort((a, b) => a.wagonNumber.localeCompare(b.wagonNumber)),
+    [wagons],
+  );
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size="min(760px, 96vw)"
+      radius="lg"
+      centered
+      overlayProps={{ blur: 2 }}
+      title={
+        <Group gap="sm">
+          <ThemeIcon variant="light" color="edr-green" radius="md" size="lg">
+            <Inbox size={18} />
+          </ThemeIcon>
+          <div>
+            <Text fw={700}>Wagon Transfer Requests</Text>
+            <Text size="xs" c="dimmed">
+              {active
+                ? "Pick the wagons to move, then transfer"
+                : "OCC queue — pick wagons and complete each move"}
+            </Text>
+          </div>
+        </Group>
+      }
+    >
+      {!active ? (
+        // ---- Pending queue ----
+        isLoading ? (
+          <Group justify="center" p="xl">
+            <Loader />
+          </Group>
+        ) : requests.length === 0 ? (
+          <Card withBorder radius="md" padding="xl">
+            <Stack align="center" gap={6}>
+              <ThemeIcon variant="light" color="gray" radius="xl" size={48}>
+                <Inbox size={22} />
+              </ThemeIcon>
+              <Text fw={600}>No pending transfer requests</Text>
+              <Text size="sm" c="dimmed" ta="center" maw={420}>
+                When staff request a yard-to-yard wagon move, it appears here for
+                you to fulfil.
+              </Text>
+            </Stack>
+          </Card>
+        ) : (
+          <Stack gap="sm">
+            {requests.map((r) => (
+              <Card key={r.id} withBorder radius="md" padding="md">
+                <Group justify="space-between" wrap="nowrap" align="flex-start">
+                  <Stack gap={6} style={{ minWidth: 0 }}>
+                    <RequestSummary r={r} />
+                    {r.note ? (
+                      <Text size="xs" c="dimmed">
+                        “{r.note}”
+                      </Text>
+                    ) : null}
+                  </Stack>
+                  <Group gap={8} wrap="nowrap">
+                    <Button
+                      size="compact-sm"
+                      variant="subtle"
+                      color="gray"
+                      leftSection={<X size={14} />}
+                      loading={cancel.isPending}
+                      onClick={() => handleCancel(r)}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      size="compact-sm"
+                      color="edr-green"
+                      leftSection={<PackageCheck size={14} />}
+                      onClick={() => openPicker(r)}
+                    >
+                      Fulfil
+                    </Button>
+                  </Group>
+                </Group>
+              </Card>
+            ))}
+          </Stack>
+        )
+      ) : (
+        // ---- Wagon picker for the active request ----
+        <Stack gap="md">
+          <Card withBorder radius="md" padding="sm" bg="var(--mantine-color-gray-0)">
+            <RequestSummary r={active} />
+          </Card>
+
+          <Group justify="space-between">
+            <Text size="sm" fw={600}>
+              Select wagons in {yardLabel(active.fromYard)}
+            </Text>
+            <Badge
+              color={picked.size === need ? "teal" : "gray"}
+              variant={picked.size === need ? "filled" : "light"}
+            >
+              {picked.size} / {need} selected
+            </Badge>
+          </Group>
+
+          {wagonsLoading ? (
+            <Group justify="center" p="lg">
+              <Loader size="sm" />
+            </Group>
+          ) : sortedWagons.length === 0 ? (
+            <Card withBorder radius="md" padding="lg">
+              <Group gap={8} justify="center">
+                <Warehouse size={16} />
+                <Text size="sm" c="dimmed">
+                  No available wagons of this type in {yardLabel(active.fromYard)}.
+                </Text>
+              </Group>
+            </Card>
+          ) : (
+            <>
+              {shortfall > 0 ? (
+                <Text size="xs" c="orange.7">
+                  Only {sortedWagons.length} available — {shortfall} short of the{" "}
+                  {need} requested.
+                </Text>
+              ) : null}
+              <ScrollArea.Autosize mah={320}>
+                <Stack gap={6}>
+                  {sortedWagons.map((w) => {
+                    const checked = picked.has(w.id);
+                    const atCap = !checked && picked.size >= need;
+                    return (
+                      <Card
+                        key={w.id}
+                        withBorder
+                        radius="md"
+                        padding="xs"
+                        onClick={() => !atCap && toggle(w.id)}
+                        style={{
+                          cursor: atCap ? "not-allowed" : "pointer",
+                          borderColor: checked
+                            ? "var(--mantine-color-edr-green-4)"
+                            : undefined,
+                          opacity: atCap ? 0.55 : 1,
+                        }}
+                      >
+                        <Group gap="sm" wrap="nowrap">
+                          {/* Visual only — the Card's onClick owns the toggle so a
+                              click on the box doesn't fire both and cancel out. */}
+                          <Checkbox
+                            checked={checked}
+                            readOnly
+                            disabled={atCap}
+                            color="edr-green"
+                            tabIndex={-1}
+                            aria-hidden
+                          />
+                          <Text fw={600} size="sm">
+                            {w.wagonNumber}
+                          </Text>
+                        </Group>
+                      </Card>
+                    );
+                  })}
+                </Stack>
+              </ScrollArea.Autosize>
+            </>
+          )}
+
+          <Divider />
+          <Group justify="space-between">
+            <Button
+              variant="subtle"
+              color="gray"
+              leftSection={<ChevronLeft size={16} />}
+              onClick={closePicker}
+            >
+              Back to queue
+            </Button>
+            <Button
+              color="edr-green"
+              leftSection={<PackageCheck size={16} />}
+              loading={fulfill.isPending}
+              disabled={picked.size !== need}
+              onClick={handleFulfill}
+            >
+              Transfer {need} wagon{need === 1 ? "" : "s"}
+            </Button>
+          </Group>
+        </Stack>
+      )}
+    </Modal>
+  );
+};
+
+export default WagonTransferRequestsModal;

apps/edr-freight-web/backoffice/src/components/wagons/WagonYardWorkspaceModal.tsx

@@ -14,7 +14,6 @@ import {
   Select,
   Slider,
   Stack,
-  Switch,
   Text,
   ThemeIcon,
 } from "@mantine/core";
@@ -126,11 +125,12 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
 
   const [transferYardId, setTransferYardId] = useState<string | null>(null);
   const [transferQty, setTransferQty] = useState(0);
-  const [freeAfterMove, setFreeAfterMove] = useState(false);
   const [toAssignedQty, setToAssignedQty] = useState(0);
   const [toAvailableQty, setToAvailableQty] = useState(0);
 
-  const transfer = useMutation(api.wagons.bulkTransfer.mutationOptions());
+  const createRequest = useMutation(
+    api.wagonTransferRequests.create.mutationOptions(),
+  );
   const setStatus = useMutation(api.wagons.bulkSetStatus.mutationOptions());
 
   const yardName = useMemo(() => {
@@ -187,13 +187,6 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
     () => matching.filter((w) => w.status !== AVAILABLE && w.status !== ASSIGNED),
     [matching],
   );
-  // Available first, then assigned, then the rest — a partial move relocates
-  // idle wagons before touching assigned ones.
-  const transferPool = useMemo(
-    () => [...availableWagons, ...assignedWagons, ...otherWagons],
-    [availableWagons, assignedWagons, otherWagons],
-  );
-
   const total = matching.length;
   const availableCount = availableWagons.length;
   const assignedCount = assignedWagons.length;
@@ -214,7 +207,6 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
   useEffect(() => {
     setTransferYardId(null);
     setTransferQty(0);
-    setFreeAfterMove(false);
     setToAssignedQty(0);
     setToAvailableQty(0);
   }, [yardId, typeId]);
@@ -238,25 +230,27 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
     toast({ title: fallback, description: String(message), variant: "destructive" });
   };
 
-  const handleTransfer = async () => {
-    if (!transferYardId || transferQty < 1) return;
-    const ids = transferPool.slice(0, transferQty).map((w) => w.id);
-    if (!ids.length) return;
+  // Request-only: the requester specifies count + destination; OCC later picks
+  // the physical wagons and executes the move. No wagons are moved here.
+  const handleRequest = async () => {
+    if (!yardId || !typeId || !transferYardId || transferQty < 1) return;
     try {
-      const res = await transfer.mutateAsync({ wagonIds: ids, toYardId: transferYardId });
-      if (freeAfterMove) {
-        await setStatus.mutateAsync({ wagonIds: ids, status: AVAILABLE });
-      }
+      await createRequest.mutateAsync({
+        fromYardId: yardId,
+        toYardId: transferYardId,
+        wagonTypeId: typeId,
+        quantity: transferQty,
+      });
       toast({
-        title: `Moved ${res.moved} wagon(s) to ${yardName(transferYardId)}${
-          freeAfterMove ? " · set Available" : ""
-        }`,
+        title: `Requested ${transferQty} ${typeInfo.code(typeId)} wagon(s) · ${yardName(
+          yardId,
+        )} → ${yardName(transferYardId)}`,
+        description: "OCC will pick the wagons and complete the move.",
       });
       setTransferQty(0);
       setTransferYardId(null);
-      setFreeAfterMove(false);
     } catch (err) {
-      showError(err, "Transfer failed");
+      showError(err, "Request failed");
     }
   };
 
@@ -279,7 +273,7 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
     }
   };
 
-  const busy = transfer.isPending || setStatus.isPending;
+  const busy = createRequest.isPending || setStatus.isPending;
   const pct = (n: number) => (total > 0 ? (n / total) * 100 : 0);
 
   return (
@@ -402,12 +396,15 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
               {/* Transfer */}
               <Grid.Col span={{ base: 12, md: 6 }}>
                 <Card withBorder radius="md" h="100%" padding="lg">
-                  <Group gap="xs" mb="md">
+                  <Group gap="xs" mb={4}>
                     <ThemeIcon variant="light" color="grape" radius="md" size="md">
                       <ArrowRightLeft size={16} />
                     </ThemeIcon>
-                    <Text fw={700}>Move to another yard</Text>
+                    <Text fw={700}>Request transfer to another yard</Text>
                   </Group>
+                  <Text size="xs" c="dimmed" mb="md">
+                    Sends a request to OCC — they pick the wagons and complete the move.
+                  </Text>
                   <Stack gap="md">
                     <div>
                       <Text size="sm" fw={500} mb={4}>
@@ -424,12 +421,6 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
                       searchable
                       radius="md"
                     />
-                    <Switch
-                      checked={freeAfterMove}
-                      onChange={(e) => setFreeAfterMove(e.currentTarget.checked)}
-                      label="Set moved wagons to Available"
-                      color="teal"
-                    />
                     {transferYardId && transferQty > 0 ? (
                       <Card bg="var(--mantine-color-gray-0)" radius="md" padding="sm" withBorder>
                         <Group gap={8} wrap="nowrap">
@@ -453,12 +444,13 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
                     ) : null}
                     <Button
                       leftSection={<ArrowRightLeft size={16} />}
-                      onClick={handleTransfer}
-                      loading={transfer.isPending}
+                      onClick={handleRequest}
+                      loading={createRequest.isPending}
                       disabled={busy || !transferYardId || transferQty < 1}
                       color="edr-green"
                     >
-                      Move {transferQty > 0 ? `${transferQty} ` : ""}wagon{transferQty === 1 ? "" : "s"}
+                      Request {transferQty > 0 ? `${transferQty} ` : ""}wagon
+                      {transferQty === 1 ? "" : "s"}
                     </Button>
                   </Stack>
                 </Card>