changes

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

@@ -168,6 +168,11 @@ function HistoryPanel({ opened }: { opened: boolean }) {
                         </Badge>
                       </Group>
                     </Group>
+                    {r.reason ? (
+                      <Text size="xs" c="dimmed" mt={4}>
+                        Reason: {r.reason}
+                      </Text>
+                    ) : null}
                   </Card>
                 ))}
               </Stack>
@@ -233,6 +238,8 @@ const WagonTransferRequestsModal = ({
   const [tab, setTab] = useState<string | null>("queue");
   const [active, setActive] = useState<WagonTransferRequest | null>(null);
   const [picked, setPicked] = useState<Set<string>>(new Set());
+  // Bulk accept-and-execute: the subset of pending requests OCC ticked.
+  const [selected, setSelected] = useState<Set<string>>(new Set());
 
   const { data: requests = [], isLoading } = useQuery({
     ...api.wagonTransferRequests.list.queryOptions({ input: { status: PENDING } }),
@@ -256,6 +263,9 @@ const WagonTransferRequestsModal = ({
   });
 
   const fulfill = useMutation(api.wagonTransferRequests.fulfill.mutationOptions());
+  const bulkFulfill = useMutation(
+    api.wagonTransferRequests.bulkFulfill.mutationOptions(),
+  );
   const cancel = useMutation(api.wagonTransferRequests.cancel.mutationOptions());
 
   const showError = (err: unknown, fallback: string) => {
@@ -310,6 +320,36 @@ const WagonTransferRequestsModal = ({
     }
   };
 
+  const toggleSelected = (id: string) =>
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+
+  // Execute the ticked subset; whatever cannot run (not enough available
+  // wagons, already decided) is reported and simply stays PENDING.
+  const handleBulkFulfill = async () => {
+    if (selected.size === 0) return;
+    try {
+      const res = await bulkFulfill.mutateAsync({ requestIds: [...selected] });
+      setSelected(new Set());
+      const skippedNote = res.skipped.length
+        ? ` · ${res.skipped.length} left pending (${res.skipped
+            .map((s) => s.reason)
+            .join('; ')})`
+        : "";
+      toast({
+        title: `Executed ${res.fulfilled.length} transfer request(s)`,
+        description: skippedNote || undefined,
+        variant: res.fulfilled.length === 0 ? "destructive" : undefined,
+      });
+    } catch (err) {
+      showError(err, "Bulk execute failed");
+    }
+  };
+
   const sortedWagons = useMemo(
     () => [...wagons].sort((a, b) => a.wagonNumber.localeCompare(b.wagonNumber)),
     [wagons],
@@ -371,17 +411,65 @@ const WagonTransferRequestsModal = ({
           </Card>
         ) : (
           <Stack gap="sm">
+            {/* Bulk accept-and-execute action bar: tick a subset, run it, and
+                everything unticked (or unexecutable) stays PENDING. */}
+            <Group justify="space-between" wrap="nowrap">
+              <Checkbox
+                label={
+                  selected.size > 0
+                    ? `${selected.size} of ${requests.length} selected`
+                    : "Select all"
+                }
+                checked={selected.size === requests.length && requests.length > 0}
+                indeterminate={selected.size > 0 && selected.size < requests.length}
+                onChange={() =>
+                  setSelected(
+                    selected.size === requests.length
+                      ? new Set()
+                      : new Set(requests.map((r) => r.id)),
+                  )
+                }
+                color="edr-green"
+              />
+              <Button
+                size="compact-sm"
+                color="edr-green"
+                leftSection={<PackageCheck size={14} />}
+                loading={bulkFulfill.isPending}
+                disabled={selected.size === 0}
+                onClick={handleBulkFulfill}
+              >
+                Accept & execute {selected.size > 0 ? `(${selected.size})` : ""}
+              </Button>
+            </Group>
+
             {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="sm" wrap="nowrap" align="flex-start" style={{ minWidth: 0 }}>
+                    <Checkbox
+                      checked={selected.has(r.id)}
+                      onChange={() => toggleSelected(r.id)}
+                      color="edr-green"
+                      mt={2}
+                    />
+                    <Stack gap={6} style={{ minWidth: 0 }}>
+                      <RequestSummary r={r} />
+                      {r.reason ? (
+                        <Text size="xs">
+                          <Text span fw={600}>
+                            Reason:
+                          </Text>{" "}
+                          {r.reason}
+                        </Text>
+                      ) : null}
+                      {r.note ? (
+                        <Text size="xs" c="dimmed">
+                          “{r.note}”
+                        </Text>
+                      ) : null}
+                    </Stack>
+                  </Group>
                   <Group gap={8} wrap="nowrap">
                     <Button
                       size="compact-sm"

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

@@ -15,6 +15,7 @@ import {
   Slider,
   Stack,
   Text,
+  Textarea,
   ThemeIcon,
 } from "@mantine/core";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -125,6 +126,7 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
 
   const [transferYardId, setTransferYardId] = useState<string | null>(null);
   const [transferQty, setTransferQty] = useState(0);
+  const [transferReason, setTransferReason] = useState("");
   const [toAssignedQty, setToAssignedQty] = useState(0);
   const [toAvailableQty, setToAvailableQty] = useState(0);
 
@@ -207,6 +209,7 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
   useEffect(() => {
     setTransferYardId(null);
     setTransferQty(0);
+    setTransferReason("");
     setToAssignedQty(0);
     setToAvailableQty(0);
   }, [yardId, typeId]);
@@ -219,8 +222,9 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
     }
   }, [opened]);
 
-  // Keep quantities within bounds as counts shift after each action.
-  useEffect(() => setTransferQty((q) => Math.min(q, total)), [total]);
+  // Keep quantities within bounds as counts shift after each action. Transfers
+  // may only ask for AVAILABLE wagons, so the request cap is availableCount.
+  useEffect(() => setTransferQty((q) => Math.min(q, availableCount)), [availableCount]);
   useEffect(() => setToAssignedQty((q) => Math.min(q, availableCount)), [availableCount]);
   useEffect(() => setToAvailableQty((q) => Math.min(q, assignedCount)), [assignedCount]);
 
@@ -233,13 +237,21 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
   // 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;
+    if (
+      !yardId ||
+      !typeId ||
+      !transferYardId ||
+      transferQty < 1 ||
+      !transferReason.trim()
+    )
+      return;
     try {
       await createRequest.mutateAsync({
         fromYardId: yardId,
         toYardId: transferYardId,
         wagonTypeId: typeId,
         quantity: transferQty,
+        reason: transferReason.trim(),
       });
       toast({
         title: `Requested ${transferQty} ${typeInfo.code(typeId)} wagon(s) · ${yardName(
@@ -249,6 +261,7 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
       });
       setTransferQty(0);
       setTransferYardId(null);
+      setTransferReason("");
     } catch (err) {
       showError(err, "Request failed");
     }
@@ -407,10 +420,19 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
                   </Text>
                   <Stack gap="md">
                     <div>
-                      <Text size="sm" fw={500} mb={4}>
-                        How many wagons
-                      </Text>
-                      <QuantityField value={transferQty} onChange={setTransferQty} max={total} />
+                      <Group justify="space-between" mb={4}>
+                        <Text size="sm" fw={500}>
+                          How many wagons
+                        </Text>
+                        <Badge color="teal" variant="light">
+                          {availableCount} available
+                        </Badge>
+                      </Group>
+                      <QuantityField
+                        value={transferQty}
+                        onChange={setTransferQty}
+                        max={availableCount}
+                      />
                     </div>
                     <Select
                       label="Destination yard"
@@ -421,6 +443,16 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
                       searchable
                       radius="md"
                     />
+                    <Textarea
+                      label="Reason"
+                      placeholder="Why are these wagons needed?"
+                      value={transferReason}
+                      onChange={(e) => setTransferReason(e.currentTarget.value)}
+                      required
+                      autosize
+                      minRows={2}
+                      radius="md"
+                    />
                     {transferYardId && transferQty > 0 ? (
                       <Card bg="var(--mantine-color-gray-0)" radius="md" padding="sm" withBorder>
                         <Group gap={8} wrap="nowrap">
@@ -446,7 +478,12 @@ const WagonYardWorkspaceModal = ({ opened, onClose }: WagonYardWorkspaceModalPro
                       leftSection={<ArrowRightLeft size={16} />}
                       onClick={handleRequest}
                       loading={createRequest.isPending}
-                      disabled={busy || !transferYardId || transferQty < 1}
+                      disabled={
+                        busy ||
+                        !transferYardId ||
+                        transferQty < 1 ||
+                        !transferReason.trim()
+                      }
                       color="edr-green"
                     >
                       Request {transferQty > 0 ? `${transferQty} ` : ""}wagon