booking operations and trains scheduling also allocations

apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsMenu.tsx

@@ -7,6 +7,7 @@ import { useBookingActionDialog } from "./useBookingActionDialog";
 import { useAuth } from "@/auth/useAuth";
 import {
   getNextPendingApprovalStep,
+  isAllocateAction,
   isContractNavAction,
   listRowHasActions,
   type BookingActionContext,
@@ -20,12 +21,14 @@ interface BookingActionsMenuProps {
   className?: string;
   /** Suppresses table row navigation after menu/dialog close (click-through). */
   onSuppressRowClick?: () => void;
+  onAllocateBooking?: () => void;
 }
 
 export function BookingActionsMenu({
   row,
   variant = "table",
   onSuppressRowClick,
+  onAllocateBooking,
 }: BookingActionsMenuProps) {
   const navigate = useNavigate();
   const { user } = useAuth();
@@ -34,6 +37,7 @@ export function BookingActionsMenu({
     paymentCurrency: row.paymentCurrency,
     reference: row.reference,
     approvalSteps: row.approvalSteps,
+    schedulingStatus: row.schedulingStatus,
   };
 
   const flow = useBookingActionDialog(row.id, context);
@@ -46,6 +50,8 @@ export function BookingActionsMenu({
     onSuppressRowClick?.();
     if (isContractNavAction(action.id)) {
       goToContract();
+    } else if (isAllocateAction(action.id)) {
+      onAllocateBooking?.();
     } else {
       flow.openAction(action);
     }

apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsToolbar.tsx

@@ -1,10 +1,13 @@
+import { useState } from "react";
 import { Download, Zap, FileText, Clock } from "lucide-react";
 import { Stack, Text, Button } from "@mantine/core";
 
+import { AllocateBookingWizard } from "@/components/trainScheduling/AllocateBookingWizard";
 import type { BookingDetail } from "@/types/booking";
 import { BookingActionsMenu } from "./BookingActionsMenu";
 import { SectionCard } from "./detail/SectionCard";
 import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
+import { canAllocateBooking } from "@/features/bookings/booking-actions.config";
 import type { useBookingMutations } from "@/hooks/bookings/useBookings";
 
 type Mutations = ReturnType<typeof useBookingMutations>;
@@ -18,6 +21,7 @@ interface BookingActionsToolbarProps {
 export function BookingActionsToolbar({ booking, mutations }: BookingActionsToolbarProps) {
   const row = toBookingListRow(booking);
   const { status } = booking;
+  const [allocateOpen, setAllocateOpen] = useState(false);
 
   const downloadBlob = async (fn: () => Promise<Blob>, filename: string) => {
     const blob = await fn();
@@ -98,7 +102,11 @@ export function BookingActionsToolbar({ booking, mutations }: BookingActionsTool
           <Text size="xs" c="dimmed">
             Confirm each step before it is applied.
           </Text>
-          <BookingActionsMenu row={row} variant="toolbar" />
+          <BookingActionsMenu
+            row={row}
+            variant="toolbar"
+            onAllocateBooking={() => setAllocateOpen(true)}
+          />
         </Stack>
       </SectionCard>
 
@@ -118,6 +126,14 @@ export function BookingActionsToolbar({ booking, mutations }: BookingActionsTool
           </Button>
         </SectionCard>
       )}
+
+      {canAllocateBooking(booking) ? (
+        <AllocateBookingWizard
+          booking={booking}
+          opened={allocateOpen}
+          onClose={() => setAllocateOpen(false)}
+        />
+      ) : null}
     </Stack>
   );
 }

apps/edr-freight-web/backoffice/src/components/bookings/OperationsBookingQueue.tsx

@@ -0,0 +1,225 @@
+import { useMemo, useState } from "react";
+import { ArrowRight, Building2, Package } from "lucide-react";
+import {
+  Accordion,
+  Badge,
+  Button,
+  Checkbox,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+
+import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
+import { canAllocateBooking } from "@/features/bookings/booking-actions.config";
+import type { BookingListRow } from "@/types/booking";
+import { groupBookingsForOperationsQueue } from "@/utils/groupBookingsForOperationsQueue";
+
+function BookingQueueRow({
+  booking,
+  selected,
+  disabled,
+  onToggle,
+}: {
+  booking: BookingListRow;
+  selected: boolean;
+  disabled: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <Group
+      align="flex-start"
+      wrap="nowrap"
+      p="sm"
+      style={{
+        border: "1px solid var(--mantine-color-gray-3)",
+        borderRadius: 8,
+      }}
+    >
+      <Checkbox checked={selected} disabled={disabled} onChange={onToggle} mt={4} />
+      <Stack gap={4} style={{ flex: 1 }}>
+        <Group gap="xs">
+          <Package size={14} />
+          <Text fw={600} size="sm">{booking.reference}</Text>
+          {booking.isGovernment ? (
+            <Badge color="violet" size="xs" leftSection={<Building2 size={10} />}>
+              Government
+            </Badge>
+          ) : null}
+          <Badge variant="outline" size="xs">{booking.freightType}</Badge>
+          {booking.schedulingStatus ? (
+            <Badge variant="light" size="xs">{booking.schedulingStatus}</Badge>
+          ) : null}
+        </Group>
+        <Text size="xs" c="dimmed">{booking.customerLabel}</Text>
+        <Group gap={6}>
+          <Text size="xs">{booking.originLabel}</Text>
+          <ArrowRight size={12} />
+          <Text size="xs">{booking.destinationLabel}</Text>
+        </Group>
+        <Group gap="sm">
+          <BookingPriorityBadge score={booking.priorityScore} />
+          {booking.serviceTypeLabel ? (
+            <Text size="xs" c="dimmed">
+              {booking.serviceTypeLabel}
+              {booking.serviceTypeBonus ? ` (+${booking.serviceTypeBonus} bonus)` : ""}
+            </Text>
+          ) : null}
+        </Group>
+      </Stack>
+    </Group>
+  );
+}
+
+export function OperationsBookingQueue({
+  bookings,
+  isLoading,
+  onAllocate,
+}: {
+  bookings: BookingListRow[];
+  isLoading?: boolean;
+  onAllocate: (bookingIds: string[]) => void;
+}) {
+  const { government, commercial } = useMemo(
+    () => groupBookingsForOperationsQueue(bookings),
+    [bookings],
+  );
+  const [govSelected, setGovSelected] = useState<string[]>([]);
+  const [selectedByBucket, setSelectedByBucket] = useState<Record<string, string[]>>({});
+
+  const allocatable = (row: BookingListRow) =>
+    row.status === "PAID" &&
+    canAllocateBooking({ status: row.status, schedulingStatus: row.schedulingStatus });
+
+  const govSelection = govSelected.length
+    ? govSelected
+    : government.filter(allocatable).map((b) => b.id);
+
+  const bucketSelection = (bucketKey: string, bucketBookings: BookingListRow[]) => {
+    const existing = selectedByBucket[bucketKey];
+    if (existing) return existing;
+    return bucketBookings.filter(allocatable).map((b) => b.id);
+  };
+
+  const toggleGov = (bookingId: string) => {
+    setGovSelected((prev) => {
+      const base = prev.length ? prev : government.filter(allocatable).map((b) => b.id);
+      return base.includes(bookingId)
+        ? base.filter((id) => id !== bookingId)
+        : [...base, bookingId];
+    });
+  };
+
+  const toggleBucket = (bucketKey: string, bookingId: string) => {
+    setSelectedByBucket((prev) => {
+      const current = prev[bucketKey] ?? [];
+      const next = current.includes(bookingId)
+        ? current.filter((id) => id !== bookingId)
+        : [...current, bookingId];
+      return { ...prev, [bucketKey]: next };
+    });
+  };
+
+  if (isLoading) {
+    return <Text size="sm" c="dimmed">Loading operations queue…</Text>;
+  }
+
+  if (!government.length && !commercial.length) {
+    return (
+      <Text size="sm" c="dimmed">
+        No PAID bookings ready to allocate.
+      </Text>
+    );
+  }
+
+  return (
+    <Stack gap="lg">
+      {government.length > 0 ? (
+        <Paper withBorder p="md" radius="md">
+          <Group justify="space-between" mb="md">
+            <Stack gap={2}>
+              <Title order={5}>Government priority</Title>
+              <Text size="xs" c="dimmed">
+                Served first — not grouped by 3-hour window
+              </Text>
+            </Stack>
+            <Group gap="xs">
+              <Badge variant="light">{govSelection.length} selected</Badge>
+              <Button
+                size="compact-sm"
+                color="violet"
+                disabled={!govSelection.length}
+                onClick={() => onAllocate(govSelection)}
+              >
+                Allocate
+              </Button>
+            </Group>
+          </Group>
+          <Stack gap="sm">
+            {government.map((booking) => (
+              <BookingQueueRow
+                key={booking.id}
+                booking={booking}
+                selected={govSelection.includes(booking.id)}
+                disabled={!allocatable(booking)}
+                onToggle={() => toggleGov(booking.id)}
+              />
+            ))}
+          </Stack>
+        </Paper>
+      ) : null}
+
+      {commercial.length > 0 ? (
+        <Accordion defaultValue={commercial[0]?.key} variant="separated" radius="md">
+          {commercial.map((bucket) => {
+            const selected = bucketSelection(bucket.key, bucket.bookings);
+            return (
+              <Accordion.Item key={bucket.key} value={bucket.key}>
+                <Accordion.Control>
+                  <Group justify="space-between" wrap="nowrap" pr="md">
+                    <Stack gap={2}>
+                      <Text fw={600} size="sm">{bucket.label}</Text>
+                      <Text size="xs" c="dimmed">
+                        {bucket.bookings.length} commercial booking
+                        {bucket.bookings.length === 1 ? "" : "s"}
+                      </Text>
+                    </Stack>
+                    <Group gap="xs">
+                      <Badge variant="light">{selected.length} selected</Badge>
+                      <Button
+                        size="compact-sm"
+                        color="green"
+                        disabled={!selected.length}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onAllocate(selected);
+                        }}
+                      >
+                        Allocate
+                      </Button>
+                    </Group>
+                  </Group>
+                </Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="sm">
+                    {bucket.bookings.map((booking) => (
+                      <BookingQueueRow
+                        key={booking.id}
+                        booking={booking}
+                        selected={selected.includes(booking.id)}
+                        disabled={!allocatable(booking)}
+                        onToggle={() => toggleBucket(bucket.key, booking.id)}
+                      />
+                    ))}
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
+            );
+          })}
+        </Accordion>
+      ) : null}
+    </Stack>
+  );
+}

apps/edr-freight-web/backoffice/src/components/bookings/OperationsScheduledBookings.tsx

@@ -0,0 +1,97 @@
+import { Link } from "react-router-dom";
+import { ArrowRight, ExternalLink } from "lucide-react";
+import { Badge, Button, Group, Stack, Text } from "@mantine/core";
+
+import { SchedulingStatusBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
+import type { BookingListRow } from "@/types/booking";
+import { DataTable, type ColumnDef } from "@edr/ui-common";
+
+export function OperationsScheduledBookings({
+  bookings,
+  isLoading,
+}: {
+  bookings: BookingListRow[];
+  isLoading?: boolean;
+}) {
+  const columns: ColumnDef<BookingListRow>[] = [
+    {
+      id: "reference",
+      header: "Booking",
+      cell: ({ row }) => (
+        <Stack gap={2}>
+          <Group gap={6}>
+            <Text fw={600} size="sm">{row.original.reference}</Text>
+            {row.original.isGovernment ? (
+              <Badge color="violet" size="xs">Government</Badge>
+            ) : null}
+          </Group>
+          <Text size="xs" c="dimmed">{row.original.customerLabel}</Text>
+        </Stack>
+      ),
+    },
+    {
+      id: "route",
+      header: "Route",
+      cell: ({ row }) => (
+        <Group gap={6}>
+          <Text size="sm">{row.original.originLabel}</Text>
+          <ArrowRight size={12} />
+          <Text size="sm">{row.original.destinationLabel}</Text>
+        </Group>
+      ),
+    },
+    {
+      id: "scheduled",
+      header: "Scheduled",
+      cell: ({ row }) => (
+        <Text size="sm">{String(row.original.scheduledDate).slice(0, 16)}</Text>
+      ),
+    },
+    {
+      id: "status",
+      header: "Scheduling",
+      cell: ({ row }) =>
+        row.original.schedulingStatus ? (
+          <SchedulingStatusBadge status={row.original.schedulingStatus} />
+        ) : (
+          <Badge variant="light">—</Badge>
+        ),
+    },
+    {
+      id: "actions",
+      header: "",
+      cell: ({ row }) => (
+        <Group gap="xs">
+          <Button
+            component={Link}
+            to={`/dashboard/booking-requests/${row.original.id}`}
+            variant="light"
+            size="compact-sm"
+          >
+            View booking
+          </Button>
+          {row.original.trainScheduleId ? (
+            <Button
+              component={Link}
+              to={`/dashboard/operations/train-scheduling-v2/${row.original.trainScheduleId}`}
+              variant="subtle"
+              size="compact-sm"
+              leftSection={<ExternalLink size={14} />}
+            >
+              Train schedule
+            </Button>
+          ) : null}
+        </Group>
+      ),
+    },
+  ];
+
+  return (
+    <DataTable
+      columns={columns}
+      data={bookings}
+      status={isLoading ? "loading" : "success"}
+      emptyMessage="No bookings currently assigned to a train schedule"
+    />
+  );
+}

apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingRequestHero.tsx

@@ -4,6 +4,7 @@ import { Paper, Group, Stack, Title, Text, Button, Box } from "@mantine/core";
 import type { BookingDetail } from "@/types/booking";
 import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
 import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
+import { SchedulingStatusBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
 import { NextStepBanner } from "@/components/bookings/NextStepBanner";
 
 import { detailStyles, formatDate } from "./booking-detail.styles";
@@ -52,7 +53,15 @@ export function BookingRequestHero({
             </Title>
             <BookingStatusBadge status={booking.status} />
             <BookingPriorityBadge score={booking.priorityScore} />
+            {booking.schedulingStatus ? (
+              <SchedulingStatusBadge status={booking.schedulingStatus} />
+            ) : null}
           </Group>
+          {booking.holdExpiresAt && booking.schedulingStatus === "HOLDING" ? (
+            <Text size="xs" c="yellow.8">
+              Hold expires {new Date(booking.holdExpiresAt).toLocaleString()}
+            </Text>
+          ) : null}
 
           {booking.nextStep && (
             <Box maw={520}>