train

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

@@ -10,6 +10,8 @@ import {
   Modal,
   ScrollArea,
   Stack,
+  Switch,
+  Tabs,
   Text,
   ThemeIcon,
 } from "@mantine/core";
@@ -17,6 +19,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import {
   ArrowRight,
   ChevronLeft,
+  History,
   Inbox,
   PackageCheck,
   Warehouse,
@@ -25,8 +28,13 @@ import {
 import { useMemo, useState } from "react";
 
 import { api } from "@/services/api";
+import { useAuth } from "@/auth/useAuth";
+import { FREIGHT_PERMS, hasPermission } from "@/lib/permissions";
 import { useToast } from "@/hooks/use-toast";
-import type { WagonTransferRequest } from "@/services/wagon.service";
+import type {
+  WagonMovementRecord,
+  WagonTransferRequest,
+} from "@/services/wagon.service";
 
 export interface WagonTransferRequestsModalProps {
   opened: boolean;
@@ -57,16 +65,172 @@ const RequestSummary = ({ r }: { r: WagonTransferRequest }) => (
   </Group>
 );
 
+const STATUS_COLOR: Record<string, string> = {
+  PENDING: "gray",
+  FULFILLED: "teal",
+  CANCELLED: "red",
+};
+
+const fmtDateTime = (iso: string) =>
+  new Date(iso).toLocaleString("en-GB", {
+    day: "numeric",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+
+/**
+ * Per-user transfer history. A staffer sees their OWN activity — the requests
+ * they filed or fulfilled, and the individual wagons they moved. Holders of
+ * `transfer_history_all` get an "All staff" toggle that widens the view; the
+ * backend enforces the scope regardless of the toggle.
+ */
+function HistoryPanel({ opened }: { opened: boolean }) {
+  const { user } = useAuth();
+  const canSeeAll = hasPermission(
+    user,
+    FREIGHT_PERMS.wagons.transferHistoryAll,
+  );
+  const myId = (user as { id?: string } | null | undefined)?.id;
+  const [allStaff, setAllStaff] = useState(false);
+  const scopeAll = canSeeAll && allStaff;
+
+  const mine = useQuery({
+    ...api.wagonTransferRequests.history.queryOptions(),
+    enabled: opened && !scopeAll,
+  });
+  const all = useQuery({
+    ...api.wagonTransferRequests.historyAll.queryOptions({ input: {} }),
+    enabled: opened && scopeAll,
+  });
+  const source = scopeAll ? all : mine;
+  const requests = source.data?.requests ?? [];
+  const movements: WagonMovementRecord[] = source.data?.movements ?? [];
+
+  const roleBadge = (r: WagonTransferRequest) => {
+    if (myId && r.fulfilledByUserId === myId)
+      return (
+        <Badge size="xs" variant="light" color="blue">
+          fulfilled
+        </Badge>
+      );
+    if (myId && r.requestedByUserId === myId)
+      return (
+        <Badge size="xs" variant="light" color="grape">
+          requested
+        </Badge>
+      );
+    return null;
+  };
+
+  return (
+    <Stack gap="lg">
+      {canSeeAll ? (
+        <Group justify="flex-end">
+          <Switch
+            checked={allStaff}
+            onChange={(e) => setAllStaff(e.currentTarget.checked)}
+            label="All staff"
+            color="edr-green"
+          />
+        </Group>
+      ) : null}
+
+      {source.isLoading ? (
+        <Group justify="center" p="xl">
+          <Loader />
+        </Group>
+      ) : (
+        <>
+          <div>
+            <Text fw={700} size="sm" mb={8}>
+              Requests{scopeAll ? "" : " you touched"}
+            </Text>
+            {requests.length === 0 ? (
+              <Text size="sm" c="dimmed">
+                No requests yet.
+              </Text>
+            ) : (
+              <Stack gap={6}>
+                {requests.map((r) => (
+                  <Card key={r.id} withBorder radius="md" padding="xs">
+                    <Group justify="space-between" wrap="nowrap">
+                      <RequestSummary r={r} />
+                      <Group gap={8} wrap="nowrap">
+                        {roleBadge(r)}
+                        <Badge
+                          size="sm"
+                          variant="light"
+                          color={STATUS_COLOR[r.status] ?? "gray"}
+                        >
+                          {r.status.toLowerCase()}
+                        </Badge>
+                      </Group>
+                    </Group>
+                  </Card>
+                ))}
+              </Stack>
+            )}
+          </div>
+
+          <Divider />
+
+          <div>
+            <Text fw={700} size="sm" mb={8}>
+              Wagons moved
+            </Text>
+            {movements.length === 0 ? (
+              <Text size="sm" c="dimmed">
+                No wagon moves yet.
+              </Text>
+            ) : (
+              <ScrollArea.Autosize mah={260}>
+                <Stack gap={6}>
+                  {movements.map((m) => (
+                    <Card key={m.id} withBorder radius="md" padding="xs">
+                      <Group justify="space-between" wrap="nowrap">
+                        <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
+                          <Text fw={600} size="sm">
+                            {m.wagon?.wagonNumber ?? "Wagon"}
+                          </Text>
+                          <Text size="xs" c="dimmed" truncate>
+                            {yardLabel(m.fromYard)} → {yardLabel(m.toYard)}
+                          </Text>
+                          {m.transferRequestId ? (
+                            <Badge size="xs" variant="light" color="teal">
+                              from request
+                            </Badge>
+                          ) : null}
+                        </Group>
+                        <Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
+                          {fmtDateTime(m.occurredAt)}
+                        </Text>
+                      </Group>
+                    </Card>
+                  ))}
+                </Stack>
+              </ScrollArea.Autosize>
+            )}
+          </div>
+        </>
+      )}
+    </Stack>
+  );
+}
+
 /**
  * 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.
+ * A second tab shows per-user transfer history.
  */
 const WagonTransferRequestsModal = ({
   opened,
   onClose,
 }: WagonTransferRequestsModalProps) => {
   const { toast } = useToast();
+  const [tab, setTab] = useState<string | null>("queue");
   const [active, setActive] = useState<WagonTransferRequest | null>(null);
   const [picked, setPicked] = useState<Set<string>>(new Set());
 
@@ -175,6 +339,17 @@ const WagonTransferRequestsModal = ({
         </Group>
       }
     >
+      <Tabs value={tab} onChange={setTab} keepMounted={false}>
+        <Tabs.List mb="md">
+          <Tabs.Tab value="queue" leftSection={<Inbox size={14} />}>
+            Queue
+          </Tabs.Tab>
+          <Tabs.Tab value="history" leftSection={<History size={14} />}>
+            History
+          </Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value="queue">
       {!active ? (
         // ---- Pending queue ----
         isLoading ? (
@@ -337,6 +512,12 @@ const WagonTransferRequestsModal = ({
           </Group>
         </Stack>
       )}
+        </Tabs.Panel>
+
+        <Tabs.Panel value="history">
+          <HistoryPanel opened={opened} />
+        </Tabs.Panel>
+      </Tabs>
     </Modal>
   );
 };