Merge branch 'dev' into freight/fix/type-errors

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

@@ -8,10 +8,22 @@ import {
   Button,
   Textarea,
   FileInput,
+  NumberInput,
 } from "@mantine/core";
 
 import type { BookingActionDef } from "@/features/bookings/booking-actions.config";
 
+/** Today + `days`, formatted as a readable date for the validity preview. */
+function validUntilLabel(days: number): string {
+  const until = new Date();
+  until.setDate(until.getDate() + days);
+  return until.toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
 interface BookingConfirmDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -46,8 +58,18 @@ export function BookingConfirmDialog({
   const Icon = action.icon;
   const needsTextInput = action.input === "note" || action.input === "reason";
   const needsFileInput = action.input === "file";
+  const needsDaysInput = action.input === "days";
+  const needsAmountInput = action.input === "amount";
+  const daysValue = Number(inputValue.trim());
+  const daysValid =
+    Number.isInteger(daysValue) && daysValue >= 1 && daysValue <= 365;
+  const amountValue = Number(inputValue.trim());
+  const amountValid = !!inputValue.trim() && Number.isFinite(amountValue) && amountValue >= 0;
   const inputMissing =
-    (needsTextInput && !inputValue.trim()) || (needsFileInput && !selectedFile);
+    (needsTextInput && !inputValue.trim()) ||
+    (needsFileInput && !selectedFile) ||
+    (needsDaysInput && !daysValid) ||
+    (needsAmountInput && !amountValid);
   const isDestructive = action.variant === "destructive";
   const accent = isDestructive ? "red" : "edr-green";
 
@@ -129,6 +151,40 @@ export function BookingConfirmDialog({
             clearable
           />
         )}
+        {needsDaysInput && (
+          <Stack gap={4}>
+            <NumberInput
+              label={action.inputLabel ?? "Contract validity (days)"}
+              withAsterisk
+              min={1}
+              max={365}
+              clampBehavior="strict"
+              allowDecimal={false}
+              allowNegative={false}
+              placeholder={action.inputPlaceholder ?? "e.g. 30"}
+              value={inputValue === "" ? "" : Number(inputValue)}
+              onChange={(value) => onInputChange(value === "" ? "" : String(value))}
+            />
+            <Text size="xs" c="dimmed">
+              {daysValid
+                ? `Contract valid from today until ${validUntilLabel(daysValue)} (${daysValue} day${daysValue === 1 ? "" : "s"}).`
+                : "Enter a whole number of days between 1 and 365."}
+            </Text>
+          </Stack>
+        )}
+        {needsAmountInput && (
+          <NumberInput
+            label={action.inputLabel ?? "Adjusted total"}
+            withAsterisk
+            min={0}
+            allowNegative={false}
+            decimalScale={2}
+            thousandSeparator=","
+            placeholder={action.inputPlaceholder ?? "0.00"}
+            value={inputValue === "" ? "" : Number(inputValue)}
+            onChange={(value) => onInputChange(value === "" ? "" : String(value))}
+          />
+        )}
         {extra}
       </Stack>
 

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

@@ -1,50 +1,171 @@
-import { Banknote, Receipt } from "lucide-react";
-import { Paper, Stack, Group, Text, Divider } from "@mantine/core";
+import { useState } from "react";
+import { Banknote, Pencil, Receipt } from "lucide-react";
+import {
+  Button,
+  Divider,
+  Group,
+  NumberInput,
+  Paper,
+  Stack,
+  Text,
+  Textarea,
+} from "@mantine/core";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
 
 import type { BookingDetail } from "@/types/booking";
+import { bookingsService } from "@/services/bookings.service";
 
 import { SectionCard } from "./detail/SectionCard";
 import { detailStyles } from "./detail/booking-detail.styles";
 
 export function BookingPricingSummary({ booking }: { booking: BookingDetail }) {
-  const amount = Number(booking.totalAmount);
-  const modifiers = booking.cargoModifiers ?? [];
+  const qc = useQueryClient();
+  const computed = Number(booking.totalAmount);
+  const isAdjusted =
+    booking.adjustedTotalAmount !== null &&
+    booking.adjustedTotalAmount !== undefined;
+  const effective = isAdjusted ? Number(booking.adjustedTotalAmount) : computed;
+
+  const lineItems = booking.pricingBreakdown?.lineItems ?? [];
+
+  const [editing, setEditing] = useState(false);
+  const [amount, setAmount] = useState<number | "">(effective);
+  const [reason, setReason] = useState("");
+
+  const adjustMutation = useMutation({
+    mutationFn: (payload: { amount: number | null; reason?: string }) =>
+      bookingsService.adjustPrice(booking.id, payload.amount, payload.reason),
+    onSuccess: () => {
+      toast.success("Price updated");
+      setEditing(false);
+      qc.invalidateQueries({ queryKey: ["bookings"] });
+    },
+    onError: () => toast.error("Could not update price"),
+  });
+
+  const fmt = (n: number) =>
+    `${booking.paymentCurrency} ${n.toLocaleString(undefined, { minimumFractionDigits: 2 })}`;
 
   return (
     <SectionCard icon={Banknote} title="Pricing & payment">
       <Stack gap="md">
         <Paper radius="md" withBorder p="md" style={detailStyles.highlightCard}>
-          <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
-            Total amount
-          </Text>
-          <Text
-            size="xl"
-            fw={700}
-            c="edr-green.9"
-            mt={4}
-            style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.5px" }}
-          >
-            {booking.paymentCurrency}{" "}
-            {amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
-          </Text>
+          <Group justify="space-between" align="flex-start">
+            <div>
+              <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
+                {isAdjusted ? "Adjusted total" : "Total amount"}
+              </Text>
+              <Text
+                size="xl"
+                fw={700}
+                c="edr-green.9"
+                mt={4}
+                style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.5px" }}
+              >
+                {fmt(effective)}
+              </Text>
+              {isAdjusted && (
+                <Text size="xs" c="dimmed" mt={2}>
+                  Computed: {fmt(computed)}
+                  {booking.adjustmentReason ? ` · ${booking.adjustmentReason}` : ""}
+                </Text>
+              )}
+            </div>
+            {!editing && (
+              <Button
+                size="compact-xs"
+                variant="light"
+                leftSection={<Pencil size={13} />}
+                onClick={() => {
+                  setAmount(effective);
+                  setEditing(true);
+                }}
+              >
+                Adjust
+              </Button>
+            )}
+          </Group>
+
+          {editing && (
+            <Stack gap="xs" mt="md">
+              <NumberInput
+                label="New total"
+                value={amount}
+                onChange={(v) => setAmount(v === "" ? "" : Number(v))}
+                min={0}
+                radius="md"
+                prefix={`${booking.paymentCurrency} `}
+                thousandSeparator=","
+              />
+              <Textarea
+                label="Reason (optional)"
+                value={reason}
+                onChange={(e) => setReason(e.currentTarget.value)}
+                autosize
+                minRows={2}
+                radius="md"
+              />
+              <Group justify="space-between" mt={4}>
+                {isAdjusted ? (
+                  <Button
+                    size="compact-sm"
+                    variant="subtle"
+                    color="red"
+                    loading={adjustMutation.isPending}
+                    onClick={() =>
+                      adjustMutation.mutate({ amount: null })
+                    }
+                  >
+                    Clear adjustment
+                  </Button>
+                ) : (
+                  <span />
+                )}
+                <Group gap="xs">
+                  <Button
+                    size="compact-sm"
+                    variant="default"
+                    onClick={() => setEditing(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    size="compact-sm"
+                    color="edr-green"
+                    loading={adjustMutation.isPending}
+                    disabled={amount === ""}
+                    onClick={() =>
+                      adjustMutation.mutate({
+                        amount: Number(amount),
+                        reason: reason.trim() || undefined,
+                      })
+                    }
+                  >
+                    Save
+                  </Button>
+                </Group>
+              </Group>
+            </Stack>
+          )}
         </Paper>
 
         <Row label="Payment status" value={booking.paymentStatus} />
         {booking.pnrCode && <Row label="PNR code" value={booking.pnrCode} mono />}
 
-        {modifiers.length > 0 && (
+        {lineItems.length > 0 && (
           <>
             <Divider color="var(--mantine-color-gray-2)" />
             <Group gap={6}>
               <Receipt size={13} color="var(--mantine-color-gray-5)" />
               <Text size="xs" c="dimmed" fw={500} tt="uppercase" lts="0.04em">
-                Surcharges applied
+                Price breakdown
               </Text>
             </Group>
             <Stack gap="xs">
-              {modifiers.map((m) => (
+              {lineItems.map((li, i) => (
                 <Group
-                  key={m.id}
+                  key={`${li.code}-${i}`}
                   justify="space-between"
                   px="sm"
                   py={6}
@@ -55,10 +176,10 @@ export function BookingPricingSummary({ booking }: { booking: BookingDetail }) {
                   }}
                 >
                   <Text size="sm" c="dimmed">
-                    Modifier
+                    {li.description}
                   </Text>
                   <Text size="sm" fw={600} style={{ fontVariantNumeric: "tabular-nums" }}>
-                    {Number(m.calculatedAmount).toLocaleString()}
+                    {Number(li.amount).toLocaleString()} {li.currency}
                   </Text>
                 </Group>
               ))}

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

@@ -1,14 +1,14 @@
 import { Badge } from "@mantine/core";
 
 export function BookingPriorityBadge({ score }: { score: number }) {
-  if (score >= 1000) {
+  if (score >= 70) {
     return (
       <Badge color="red" variant="filled" size="sm" radius="lg" tt="uppercase">
         Urgent
       </Badge>
     );
   }
-  if (score >= 500) {
+  if (score >= 40) {
     return (
       <Badge color="yellow" variant="filled" size="sm" radius="lg" tt="uppercase">
         High

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

@@ -1,77 +1,16 @@
-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 { useCallback, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { ArrowRight, Calendar, Package, User } from "lucide-react";
+import { Group } from "@mantine/core";
 
+import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
 import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
-import { canAllocateBooking } from "@/features/bookings/booking-actions.config";
+import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
+import { SchedulingStatusBadge } from "@/components/trainScheduling/ScheduleStatusBadge";
+import { bookingTable } from "@/components/bookings/booking-ui.styles";
 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>
-  );
-}
+import { cn } from "@/lib/utils";
+import { Badge, DataTable, type ColumnDef } from "@edr/ui-common";
 
 export function OperationsBookingQueue({
   bookings,
@@ -82,144 +21,144 @@ export function OperationsBookingQueue({
   isLoading?: boolean;
   onAllocate: (bookingIds: string[]) => void;
 }) {
-  const { government, commercial } = useMemo(
-    () => groupBookingsForOperationsQueue(bookings),
-    [bookings],
+  const navigate = useNavigate();
+  const suppressRowClickRef = useRef(false);
+
+  const suppressRowClick = useCallback(() => {
+    suppressRowClickRef.current = true;
+    window.setTimeout(() => {
+      suppressRowClickRef.current = false;
+    }, 400);
+  }, []);
+
+  const handleRowClick = useCallback(
+    (row: BookingListRow) => {
+      if (suppressRowClickRef.current) return;
+      navigate(`/dashboard/booking-requests/${row.id}`);
+    },
+    [navigate],
   );
-  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>
-    );
-  }
+  const columns: ColumnDef<BookingListRow>[] = [
+    {
+      id: "booking",
+      header: () => <span className={bookingTable.headerCell}>Booking</span>,
+      cell: ({ row }) => {
+        const booking = row.original;
+        return (
+          <div className="flex items-center gap-3 py-1.5">
+            <div className={bookingTable.rowIcon}>
+              <Package className="size-4" strokeWidth={1.75} />
+            </div>
+            <div className="min-w-0">
+              <Group gap={6} wrap="nowrap">
+                <p className="truncate font-medium text-foreground">{booking.reference}</p>
+                {booking.isGovernment ? (
+                  <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
+                    Government
+                  </Badge>
+                ) : null}
+              </Group>
+              <p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
+                <User className="size-3 shrink-0 opacity-70" />
+                {booking.customerLabel}
+              </p>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      id: "route",
+      header: () => <span className={bookingTable.headerCell}>Route</span>,
+      cell: ({ row }) => {
+        const booking = row.original;
+        return (
+          <div className="space-y-1 py-1">
+            <div className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+              <span className="max-w-[8rem] truncate">{booking.originLabel}</span>
+              <ArrowRight className="size-3.5 shrink-0 text-muted-foreground" />
+              <span className="max-w-[8rem] truncate">{booking.destinationLabel}</span>
+            </div>
+            <div className="flex gap-1.5">
+              <Badge variant="outline" className="h-5 px-1.5 text-[10px] uppercase">
+                {booking.tradeDirection}
+              </Badge>
+              <Badge variant="secondary" className="h-5 px-1.5 text-[10px]">
+                {booking.freightType}
+              </Badge>
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      id: "status",
+      header: () => <span className={bookingTable.headerCell}>Status</span>,
+      cell: ({ row }) => (
+        <div className="space-y-1 py-1">
+          <BookingStatusBadge status={row.original.status} />
+          {row.original.schedulingStatus ? (
+            <SchedulingStatusBadge status={row.original.schedulingStatus} />
+          ) : null}
+        </div>
+      ),
+    },
+    {
+      id: "scheduled",
+      header: () => <span className={bookingTable.headerCell}>Scheduled</span>,
+      cell: ({ row }) => (
+        <span className="inline-flex items-center gap-1.5 text-sm text-muted-foreground">
+          <Calendar className="size-3.5" />
+          {row.original.scheduledDate}
+        </span>
+      ),
+    },
+    {
+      id: "priority",
+      header: () => <span className={bookingTable.headerCell}>Priority</span>,
+      cell: ({ row }) => <BookingPriorityBadge score={row.original.priorityScore} />,
+    },
+    {
+      id: "amount",
+      header: () => <span className={bookingTable.headerCell}>Amount</span>,
+      cell: ({ row }) => (
+        <span className="font-mono text-sm font-semibold tabular-nums text-foreground">
+          {row.original.paymentCurrency}{" "}
+          {row.original.totalAmount.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+          })}
+        </span>
+      ),
+    },
+    {
+      id: "actions",
+      header: () => <span className={bookingTable.headerCell}>Actions</span>,
+      cell: ({ row }) => (
+        <BookingActionsMenu
+          row={row.original}
+          variant="table"
+          onSuppressRowClick={suppressRowClick}
+          onAllocateBooking={() => onAllocate([row.original.id])}
+        />
+      ),
+    },
+  ];
 
   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="edr-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>
+    <DataTable
+      columns={columns}
+      data={bookings}
+      status={isLoading ? "loading" : "success"}
+      emptyMessage="No PAID bookings ready to load."
+      onRowClick={handleRowClick}
+      containerClassName={cn(
+        "border-0 shadow-none",
+        "[&_thead_tr]:border-b [&_thead_tr]:border-border/50",
+        "[&_thead_th]:bg-muted/20 [&_thead_th]:backdrop-blur-sm",
+        "[&_tbody_tr]:group/tr [&_tbody_tr]:cursor-pointer [&_tbody_tr]:border-b [&_tbody_tr]:border-border/30",
+        "[&_tbody_tr]:transition-colors [&_tbody_tr:hover]:bg-muted/20",
+      )}
+    />
   );
 }

apps/edr-freight-web/backoffice/src/components/bookings/useBookingActionDialog.ts

@@ -9,6 +9,19 @@ import {
 import { useAuth } from "@/auth/useAuth";
 import { useBookingDetail, useBookingMutations } from "@/hooks/bookings/useBookings";
 
+/** A contract validity window must be a whole number of days, 1–365. */
+function isValidValidityDays(value: string): boolean {
+  const days = Number(value.trim());
+  return Number.isInteger(days) && days >= 1 && days <= 365;
+}
+
+/** An adjusted price must be a non-negative number. */
+function isValidAmount(value: string): boolean {
+  if (!value.trim()) return false;
+  const amount = Number(value.trim());
+  return Number.isFinite(amount) && amount >= 0;
+}
+
 export function useBookingActionDialog(
   bookingId: string,
   context: BookingActionContext,
@@ -59,15 +72,36 @@ export function useBookingActionDialog(
     const onSuccess = () => closeDialog();
 
     switch (pendingAction.id) {
-      case "accept":
-        mutations.staffAccept.mutate(undefined, { onSuccess });
+      case "accept": {
+        const days = Number(inputValue.trim());
+        if (!Number.isInteger(days) || days < 1 || days > 365) return;
+        mutations.staffAccept.mutate(days, { onSuccess });
         break;
+      }
       case "requestChanges":
         mutations.requestChanges.mutate(inputValue.trim(), { onSuccess });
         break;
       case "reject":
         mutations.staffReject.mutate(inputValue.trim(), { onSuccess });
         break;
+      case "operationAccept":
+        mutations.reviewOperation.mutate({ decision: "ACCEPT" }, { onSuccess });
+        break;
+      case "operationRequestChanges":
+        mutations.reviewOperation.mutate(
+          { decision: "REQUEST_CHANGES", note: inputValue.trim() },
+          { onSuccess },
+        );
+        break;
+      case "operationAdjustPrice": {
+        const amount = Number(inputValue.trim());
+        if (!Number.isFinite(amount) || amount < 0) return;
+        mutations.reviewOperation.mutate(
+          { decision: "ADJUST_PRICE", amount },
+          { onSuccess },
+        );
+        break;
+      }
       case "approve": {
         const step = getNextPendingApprovalStep(mergedContext.approvalSteps);
         if (!step) return;
@@ -116,7 +150,9 @@ export function useBookingActionDialog(
       !getNextPendingApprovalStep(mergedContext.approvalSteps)) ||
     (pendingAction?.input === "file" && !selectedFile) ||
     (pendingAction?.input === "reason" && !inputValue.trim()) ||
-    (pendingAction?.input === "note" && !inputValue.trim());
+    (pendingAction?.input === "note" && !inputValue.trim()) ||
+    (pendingAction?.input === "days" && !isValidValidityDays(inputValue)) ||
+    (pendingAction?.input === "amount" && !isValidAmount(inputValue));
 
   return {
     actions,

apps/edr-freight-web/backoffice/src/components/layout/route-meta.ts

@@ -106,6 +106,34 @@ const ROUTE_META: Array<{ prefix: string; meta: PageMeta }> = [
       subtitle: "Manage route definitions built from freight yards",
     },
   },
+  {
+    prefix: "/dashboard/warehouses/list",
+    meta: {
+      title: "Warehouses",
+      subtitle: "Manage warehouses, yards, and zones",
+    },
+  },
+  {
+    prefix: "/dashboard/warehouse-inventory",
+    meta: {
+      title: "Warehouse inventory",
+      subtitle: "Track received items through inspection and loading",
+    },
+  },
+  {
+    prefix: "/dashboard/inventory-inquiry",
+    meta: {
+      title: "Inventory inquiry",
+      subtitle: "Locate cargo, containers, and goods inside the warehouse network",
+    },
+  },
+  {
+    prefix: "/dashboard/warehouses",
+    meta: {
+      title: "Warehouse dashboard",
+      subtitle: "Live overview of warehouse capacity and inventory lifecycle",
+    },
+  },
   ...getFleetRouteMeta(),
   {
     prefix: "/dashboard/trains/",
@@ -167,7 +195,7 @@ const ROUTE_META: Array<{ prefix: string; meta: PageMeta }> = [
     prefix: RULE_ENGINE_CATEGORY_BASE_PATH.configuration,
     meta: {
       title: "Configuration",
-      subtitle: "Master data: cargo, containers, wagon types, services, surcharges, yards, and shipping lines",
+      subtitle: "Master data: cargo, containers, wagon types, services, yards, and shipping lines",
     },
   },
   ...configurationRouteMeta,

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx

@@ -158,11 +158,21 @@ const RuleEngineFormDialog = ({
 
   const visibleFields = useMemo(
     () =>
-      fields.filter(
-        (field) =>
-          !field.hideWhen ||
-          !field.hideWhen.equals.includes(String(values[field.hideWhen.field] ?? "")),
-      ),
+      fields.filter((field) => {
+        if (
+          field.hideWhen &&
+          field.hideWhen.equals.includes(String(values[field.hideWhen.field] ?? ""))
+        ) {
+          return false;
+        }
+        if (
+          field.showWhen &&
+          !field.showWhen.equals.includes(String(values[field.showWhen.field] ?? ""))
+        ) {
+          return false;
+        }
+        return true;
+      }),
     [fields, values],
   );
 
@@ -244,6 +254,7 @@ const RuleEngineFormDialog = ({
         <Select
           key={field.name}
           label={label}
+          description={field.description}
           placeholder={
             selectOptionsLoading ? "Loading options..." : (field.placeholder ?? "Select an option")
           }

apps/edr-freight-web/backoffice/src/components/warehouses/FeePreviewModal.tsx

@@ -5,8 +5,10 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { api } from '@/services/api';
 import { useToast } from '@/hooks/use-toast';
+import { warehouseService } from '@/services/warehouse.service';
 import { extractErrorMessage } from './options';
-import type { FeePreview, WarehouseInvoiceStatus } from '@/types/warehouse';
+import type { FeePreview, WarehouseInventoryItem, WarehouseInvoiceStatus } from '@/types/warehouse';
+import { openPdfBlob } from './pdf';
 
 const INVOICE_STATUS_COLOR: Record<WarehouseInvoiceStatus, string> = {
   DRAFT: 'gray',
@@ -32,6 +34,9 @@ function fmtDate(iso: string | null) {
   return new Date(iso).toLocaleDateString();
 }
 
+const money = (amount: number, currency: string) =>
+  `${Number(amount).toLocaleString()} ${currency === 'ETB' ? 'Birr (ETB)' : currency}`;
+
 function FeeCard({ fee }: { fee: FeePreview }) {
   const meta = LABELS[fee.ruleType] ?? { label: fee.ruleType, color: 'gray' };
   const configured = Boolean(fee.ruleId);
@@ -48,7 +53,7 @@ function FeeCard({ fee }: { fee: FeePreview }) {
           )}
         </Group>
         <Text fw={800} size="lg" c={`${meta.color}.7`}>
-          {fee.amount.toLocaleString()} {fee.currency}
+          {money(fee.amount, fee.currency)}
         </Text>
       </Group>
 
@@ -60,10 +65,12 @@ function FeeCard({ fee }: { fee: FeePreview }) {
         <Stack gap={4}>
           <Row label="Rule" value={fee.ruleName ?? '—'} />
           <Row label="Free days" value={String(fee.freeDays)} />
-          <Row label="Rate / day" value={`${fee.ratePerDay.toLocaleString()} ${fee.currency}`} />
+          <Row label="Rate / day" value={money(fee.ratePerDay, fee.currency)} />
           <Row label="Period" value={`${fmtDate(fee.startDate)} → ${fmtDate(fee.endDate)}${fee.endIsOpen ? ' (today)' : ''}`} />
           <Row label="Elapsed days" value={String(fee.elapsedDays)} />
           <Row label="Chargeable days" value={`${fee.chargeableDays} (after ${fee.freeDays} free)`} />
+          <Row label="Containers" value={String(fee.containerCount ?? 1)} />
+          <Row label="Billable units" value={`${fee.billableUnits ?? fee.chargeableDays} container-day(s)`} />
         </Stack>
       )}
     </Card>
@@ -106,7 +113,7 @@ export function FeePreviewModal({ opened, onClose, inventoryId }: FeePreviewModa
     if (!inventoryId) return;
     try {
       const inv = await generate.mutateAsync({ inventoryId, confirmZero });
-      toast({ title: 'Invoice generated', description: `${inv.invoiceNumber} — ${inv.totalAmount} ${inv.currency}` });
+      toast({ title: 'Invoice generated', description: `${inv.invoiceNumber} - ${money(inv.totalAmount, inv.currency)}` });
     } catch (error) {
       const msg = extractErrorMessage(error);
       if (/no payable warehouse fee/i.test(msg)) {
@@ -121,11 +128,21 @@ export function FeePreviewModal({ opened, onClose, inventoryId }: FeePreviewModa
 
   const handleGateClearance = async () => {
     if (!inventoryId) return;
+    const pdfWindow = window.open('', '_blank');
     try {
-      await gateClear.mutateAsync(inventoryId);
-      toast({ title: 'Gate clearance recorded', description: 'Item released from terminal.' });
+      const releasedItem = await gateClear.mutateAsync(inventoryId) as WarehouseInventoryItem;
+      const documentResponse = await warehouseService.downloadReleaseDocument(inventoryId);
+      const filename = `release-${releasedItem?.booking?.reference ?? releasedItem?.bookingId ?? inventoryId}.pdf`;
+      const opened = openPdfBlob(documentResponse.data, filename, pdfWindow);
+      toast({
+        title: 'Gate clearance recorded',
+        description: opened
+          ? 'The release PDF opened in a browser tab.'
+          : 'The browser blocked the preview tab, so the PDF was downloaded.',
+      });
       onClose();
     } catch (error) {
+      pdfWindow?.close();
       toast({ variant: 'destructive', title: 'Release blocked', description: extractErrorMessage(error) });
     }
   };
@@ -165,7 +182,7 @@ export function FeePreviewModal({ opened, onClose, inventoryId }: FeePreviewModa
                 </Badge>
               </Group>
               <Text size="sm">
-                {Number(activeInvoice.balanceAmount).toLocaleString()} {activeInvoice.currency} due
+                {money(Number(activeInvoice.balanceAmount), activeInvoice.currency)} due
               </Text>
             </Group>
           ) : (

apps/edr-freight-web/backoffice/src/components/warehouses/InspectionReportModal.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Button,
   Divider,
@@ -12,10 +12,8 @@ import {
 } from '@mantine/core';
 import { Upload } from 'lucide-react';
 
-import { useMutation } from '@tanstack/react-query';
-
-import { api } from '@/services/api';
 import { useToast } from '@/hooks/use-toast';
+import { useCreateInspectionReport, useInspectionReports, useUploadInspectionAttachments } from '@/hooks/useWarehouses';
 import {
   INSPECTION_REPORT_TYPES,
   INSPECTION_STATUSES,
@@ -47,12 +45,9 @@ const STATUS_LABELS: Record<InspectionResultStatus, string> = {
 /** Batch 4.5 — record an inspection / damage report with optional image upload. */
 export function InspectionReportModal({ opened, onClose, inventoryId }: InspectionReportModalProps) {
   const { toast } = useToast();
-  const createReport = useMutation(
-    api.warehouses.createInspectionReport.mutationOptions(),
-  );
-  const uploadAttachments = useMutation(
-    api.warehouses.uploadInspectionAttachments.mutationOptions(),
-  );
+  const createReport = useCreateInspectionReport();
+  const uploadAttachments = useUploadInspectionAttachments();
+  const reportsQuery = useInspectionReports(opened ? inventoryId ?? undefined : undefined);
 
   const [reportType, setReportType] = useState<InspectionReportType>('INSPECTION');
   const [inspectionStatus, setInspectionStatus] = useState<InspectionResultStatus>('PASSED');
@@ -82,6 +77,27 @@ export function InspectionReportModal({ opened, onClose, inventoryId }: Inspecti
     setFiles([]);
   };
 
+  useEffect(() => {
+    if (!opened) return;
+    const report = reportsQuery.data?.[0];
+    if (!report) {
+      reset();
+      return;
+    }
+
+    setReportType(report.reportType);
+    setInspectionStatus(report.inspectionStatus);
+    setHasDamage(report.hasDamage ?? false);
+    setDamageDescription(report.damageDescription ?? '');
+    setHasWeightLoss(report.hasWeightLoss ?? false);
+    setExpectedWeight(report.expectedWeight == null ? '' : Number(report.expectedWeight));
+    setActualWeight(report.actualWeight == null ? '' : Number(report.actualWeight));
+    setHasMissingItems(report.hasMissingItems ?? false);
+    setMissingItemsDescription(report.missingItemsDescription ?? '');
+    setRemarks(report.remarks ?? '');
+    setFiles([]);
+  }, [opened, reportsQuery.data]);
+
   const handleSubmit = async () => {
     if (!inventoryId) return;
     try {

apps/edr-freight-web/backoffice/src/components/warehouses/InventoryDetailModal.tsx

@@ -0,0 +1,91 @@
+import { Badge, Divider, Group, Modal, SimpleGrid, Stack, Text } from '@mantine/core';
+
+import type { WarehouseInventoryItem } from '@/types/warehouse';
+import { InventoryStatusBadge } from './badges';
+import { formatDate, formatNumber } from './options';
+
+interface InventoryDetailModalProps {
+  opened: boolean;
+  onClose: () => void;
+  item: WarehouseInventoryItem | null;
+}
+
+function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <Stack gap={2}>
+      <Text size="xs" c="dimmed" tt="uppercase" fw={700}>
+        {label}
+      </Text>
+      <Text size="sm" fw={500}>
+        {value || '-'}
+      </Text>
+    </Stack>
+  );
+}
+
+export function InventoryDetailModal({ opened, onClose, item }: InventoryDetailModalProps) {
+  return (
+    <Modal opened={opened} onClose={onClose} title="Inventory detail" centered size="xl">
+      {!item ? (
+        <Text c="dimmed">No inventory item selected.</Text>
+      ) : (
+        <Stack gap="md">
+          <Group justify="space-between" align="flex-start">
+            <Stack gap={2}>
+              <Text size="lg" fw={800}>
+                {item.booking?.reference ?? item.bookingId ?? item.id}
+              </Text>
+              <Text size="sm" c="dimmed">
+                Inventory ID: {item.id}
+              </Text>
+            </Stack>
+            <InventoryStatusBadge status={item.status} />
+          </Group>
+
+          <Divider label="Location" labelPosition="left" />
+          <SimpleGrid cols={{ base: 1, sm: 3 }}>
+            <DetailRow label="Warehouse" value={item.warehouse ? `${item.warehouse.name} (${item.warehouse.code})` : '-'} />
+            <DetailRow label="Yard" value={item.yard ? `${item.yard.name} (${item.yard.code})` : '-'} />
+            <DetailRow label="Zone" value={item.zone ? `${item.zone.name} (${item.zone.code})` : '-'} />
+          </SimpleGrid>
+
+          <Divider label="Booking & item" labelPosition="left" />
+          <SimpleGrid cols={{ base: 1, sm: 3 }}>
+            <DetailRow label="Booking status" value={item.booking?.status ?? '-'} />
+            <DetailRow label="Payment status" value={item.booking?.paymentStatus ?? '-'} />
+            <DetailRow label="Trade direction" value={item.booking?.tradeDirection ?? '-'} />
+            <DetailRow label="Container ID" value={item.containerId ?? '-'} />
+            <DetailRow label="Cargo ID" value={item.cargoId ?? '-'} />
+            <DetailRow label="Goods ID" value={item.goodsId ?? '-'} />
+            <DetailRow label="Quantity" value={formatNumber(item.quantity)} />
+            <DetailRow label="Weight" value={`${formatNumber(item.weight)} kg`} />
+            <DetailRow label="Volume" value={item.volume == null ? '-' : formatNumber(item.volume)} />
+          </SimpleGrid>
+
+          <Divider label="Lifecycle" labelPosition="left" />
+          <SimpleGrid cols={{ base: 1, sm: 3 }}>
+            <DetailRow label="Inspection" value={<Badge variant="light">{item.inspectionStatus ?? 'Not inspected'}</Badge>} />
+            <DetailRow label="Arrived" value={formatDate(item.arrivedAt)} />
+            <DetailRow label="Stored" value={formatDate(item.storedAt)} />
+            <DetailRow label="Reserved" value={formatDate(item.reservedAt)} />
+            <DetailRow label="Inspected" value={formatDate(item.inspectedAt)} />
+            <DetailRow label="Ready for loading" value={formatDate(item.readyForLoadingAt)} />
+            <DetailRow label="Loaded" value={formatDate(item.loadedAt)} />
+            <DetailRow label="Dispatched" value={formatDate(item.dispatchedAt)} />
+            <DetailRow label="Ready for pickup" value={formatDate(item.readyForPickupAt)} />
+            <DetailRow label="Released" value={formatDate(item.releaseDate)} />
+            <DetailRow label="Delivered" value={formatDate(item.deliveredAt)} />
+            <DetailRow label="Release reference" value={item.releaseOrderReference ?? '-'} />
+          </SimpleGrid>
+
+          {item.notes && (
+            <>
+              <Divider label="Notes" labelPosition="left" />
+              <Text size="sm">{item.notes}</Text>
+            </>
+          )}
+        </Stack>
+      )}
+    </Modal>
+  );
+}

apps/edr-freight-web/backoffice/src/components/warehouses/InventoryInquiryDetailModal.tsx

@@ -0,0 +1,92 @@
+import { Badge, Divider, Group, Modal, SimpleGrid, Stack, Text } from '@mantine/core';
+
+import type { InventoryInquiryResult } from '@/types/warehouse';
+import { InventoryStatusBadge } from './badges';
+import { formatDate, formatNumber } from './options';
+
+interface InventoryInquiryDetailModalProps {
+  opened: boolean;
+  onClose: () => void;
+  result: InventoryInquiryResult | null;
+}
+
+function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <Stack gap={2}>
+      <Text size="xs" c="dimmed" tt="uppercase" fw={700}>
+        {label}
+      </Text>
+      <Text size="sm" fw={500}>
+        {value || '-'}
+      </Text>
+    </Stack>
+  );
+}
+
+function itemLabel(result: InventoryInquiryResult) {
+  if (result.containerNumber) return `Container ${result.containerNumber}`;
+  if (result.cargoType) return result.cargoType;
+  if (result.cargoDescription) return result.cargoDescription;
+  if (result.goodsId) return `Goods ${result.goodsId}`;
+  return '-';
+}
+
+export function InventoryInquiryDetailModal({ opened, onClose, result }: InventoryInquiryDetailModalProps) {
+  return (
+    <Modal opened={opened} onClose={onClose} title="Inventory inquiry detail" centered size="xl">
+      {!result ? (
+        <Text c="dimmed">No inquiry result selected.</Text>
+      ) : (
+        <Stack gap="md">
+          <Group justify="space-between" align="flex-start">
+            <Stack gap={2}>
+              <Text size="lg" fw={800}>
+                {result.bookingReference ?? result.bookingNumber ?? result.bookingId ?? result.id}
+              </Text>
+              <Text size="sm" c="dimmed">
+                Inventory ID: {result.inventoryId ?? 'Not yet in warehouse inventory'}
+              </Text>
+            </Stack>
+            {result.status ? (
+              <InventoryStatusBadge status={result.status} />
+            ) : (
+              <Badge variant="light" color={result.trainStatus === 'ARRIVED' ? 'orange' : 'blue'}>
+                {result.trainStatus ?? result.bookingStatus ?? 'Not in warehouse'}
+              </Badge>
+            )}
+          </Group>
+
+          <Divider label="Booking" labelPosition="left" />
+          <SimpleGrid cols={{ base: 1, sm: 3 }}>
+            <DetailRow label="Booking reference" value={result.bookingReference ?? result.bookingNumber ?? '-'} />
+            <DetailRow label="Booking status" value={result.bookingStatus ?? '-'} />
+            <DetailRow label="Customer" value={result.customerName ?? '-'} />
+          </SimpleGrid>
+
+          <Divider label="Item" labelPosition="left" />
+          <SimpleGrid cols={{ base: 1, sm: 3 }}>
+            <DetailRow label="Item" value={itemLabel(result)} />
+            <DetailRow label="Quantity" value={formatNumber(result.quantity)} />
+            <DetailRow label="Weight" value={`${formatNumber(result.weight)} kg`} />
+          </SimpleGrid>
+
+          <Divider label="Location" labelPosition="left" />
+          <SimpleGrid cols={{ base: 1, sm: 3 }}>
+            <DetailRow label="Warehouse" value={result.warehouse ? `${result.warehouse.name} (${result.warehouse.code})` : '-'} />
+            <DetailRow label="Yard" value={result.yard ? `${result.yard.name} (${result.yard.code})` : '-'} />
+            <DetailRow label="Zone" value={result.zone ? `${result.zone.name} (${result.zone.code})` : '-'} />
+            <DetailRow label="Current location" value={result.locationSummary ?? '-'} />
+            <DetailRow label="Train" value={result.trainNumber ?? '-'} />
+            <DetailRow label="Route" value={result.route ?? '-'} />
+          </SimpleGrid>
+
+          <Divider label="Dates" labelPosition="left" />
+          <SimpleGrid cols={{ base: 1, sm: 3 }}>
+            <DetailRow label="Arrived" value={formatDate(result.arrivedAt)} />
+            <DetailRow label="Ready for loading" value={formatDate(result.readyForLoadingAt)} />
+          </SimpleGrid>
+        </Stack>
+      )}
+    </Modal>
+  );
+}

apps/edr-freight-web/backoffice/src/components/warehouses/InventoryWorkbench.tsx

@@ -6,10 +6,12 @@ import { useMutation } from '@tanstack/react-query';
 
 import { api } from '@/services/api';
 import { useToast } from '@/hooks/use-toast';
+import { warehouseService } from '@/services/warehouse.service';
 import type { InventoryAction, WarehouseInventoryItem } from '@/types/warehouse';
 import { DeliverInventoryModal } from './DeliverInventoryModal';
 import { FeePreviewModal } from './FeePreviewModal';
 import { InspectionReportModal } from './InspectionReportModal';
+import { InventoryDetailModal } from './InventoryDetailModal';
 import { InventoryHistoryModal } from './InventoryHistoryModal';
 import { LoadInventoryModal } from './LoadInventoryModal';
 import { MoveInventoryModal } from './MoveInventoryModal';
@@ -17,6 +19,7 @@ import { ReleaseOrderModal } from './ReleaseOrderModal';
 import { ReserveInventoryModal } from './ReserveInventoryModal';
 import { WarehouseInventoryTable } from './WarehouseInventoryTable';
 import { extractErrorMessage } from './options';
+import { openPdfBlob } from './pdf';
 
 interface InventoryWorkbenchProps {
   items: WarehouseInventoryItem[];
@@ -33,6 +36,7 @@ export function InventoryWorkbench({ items, isLoading, onLastMile }: InventoryWo
   const [reserveItem, setReserveItem] = useState<WarehouseInventoryItem | null>(null);
   const [loadItem, setLoadItem] = useState<WarehouseInventoryItem | null>(null);
   const [historyItem, setHistoryItem] = useState<WarehouseInventoryItem | null>(null);
+  const [viewItem, setViewItem] = useState<WarehouseInventoryItem | null>(null);
   const [inspectItem, setInspectItem] = useState<WarehouseInventoryItem | null>(null);
   const [feeItem, setFeeItem] = useState<WarehouseInventoryItem | null>(null);
   const [releaseItem, setReleaseItem] = useState<WarehouseInventoryItem | null>(null);
@@ -91,10 +95,46 @@ export function InventoryWorkbench({ items, isLoading, onLastMile }: InventoryWo
     }
   };
 
+  const downloadReleaseDocument = async (item: WarehouseInventoryItem) => {
+    setBusyId(item.id);
+    const pdfWindow = window.open('', '_blank');
+    try {
+      const response = await warehouseService.downloadReleaseDocument(item.id);
+      const blob = response.data;
+      const filename = `release-${item.booking?.reference ?? item.bookingId ?? item.id}.pdf`;
+      const opened = openPdfBlob(blob, filename, pdfWindow);
+      toast({ title: opened ? 'Release exit paper opened' : 'Release exit paper downloaded' });
+    } catch (error) {
+      pdfWindow?.close();
+      toast({
+        variant: 'destructive',
+        title: 'Release paper preview failed',
+        description: extractErrorMessage(error),
+      });
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const storeInventory = async (item: WarehouseInventoryItem) => {
+    setBusyId(item.id);
+    try {
+      const stored = await storeMutation.mutateAsync(item.id);
+      toast({
+        title: 'Inventory stored',
+        description: [stored.warehouse?.code, stored.yard?.code, stored.zone?.code].filter(Boolean).join(' / '),
+      });
+    } catch (error) {
+      toast({ variant: 'destructive', title: 'Store failed', description: extractErrorMessage(error) });
+    } finally {
+      setBusyId(null);
+    }
+  };
+
   const advance = (item: WarehouseInventoryItem, action: InventoryAction) => {
     switch (action) {
       case 'store':
-        return runDirect(item, () => storeMutation.mutateAsync(item.id), 'Inventory stored');
+        return storeInventory(item);
       case 'reserve':
         setReserveItem(item);
         return;
@@ -151,8 +191,10 @@ export function InventoryWorkbench({ items, isLoading, onLastMile }: InventoryWo
           onAdvance={advance}
           onMove={setMoveItem}
           onHistory={setHistoryItem}
+          onView={setViewItem}
           onInspect={setInspectItem}
           onFeePreview={setFeeItem}
+          onReleaseDocument={downloadReleaseDocument}
           onLastMile={onLastMile}
           selectedIds={selected}
           onToggleSelect={toggleSelect}
@@ -174,6 +216,7 @@ export function InventoryWorkbench({ items, isLoading, onLastMile }: InventoryWo
         onClose={() => setHistoryItem(null)}
         item={historyItem}
       />
+      <InventoryDetailModal opened={Boolean(viewItem)} onClose={() => setViewItem(null)} item={viewItem} />
       <InspectionReportModal
         opened={Boolean(inspectItem)}
         onClose={() => setInspectItem(null)}

apps/edr-freight-web/backoffice/src/components/warehouses/ReleaseOrderModal.tsx

@@ -6,8 +6,10 @@ import { useMutation } from '@tanstack/react-query';
 
 import { api } from '@/services/api';
 import { useToast } from '@/hooks/use-toast';
+import { warehouseService } from '@/services/warehouse.service';
 import type { WarehouseInventoryItem } from '@/types/warehouse';
 import { extractErrorMessage } from './options';
+import { openPdfBlob } from './pdf';
 
 interface ReleaseOrderModalProps {
   opened: boolean;
@@ -19,6 +21,7 @@ export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalPr
   const { toast } = useToast();
   const releaseMutation = useMutation(api.warehouses.release.mutationOptions());
   const [reference, setReference] = useState('');
+  const [downloading, setDownloading] = useState(false);
 
   useEffect(() => {
     if (opened) setReference(item?.releaseOrderReference ?? '');
@@ -26,36 +29,53 @@ export function ReleaseOrderModal({ opened, onClose, item }: ReleaseOrderModalPr
 
   const handleSubmit = async () => {
     if (!item) return;
+    const pdfWindow = window.open('', '_blank');
     try {
-      await releaseMutation.mutateAsync({ id: item.id, payload: { reference: reference.trim() || undefined } });
-      toast({ title: 'Release order issued' });
+      const released = await releaseMutation.mutateAsync({
+        id: item.id,
+        payload: { reference: reference.trim() || undefined },
+      });
+      setDownloading(true);
+      const response = await warehouseService.downloadReleaseDocument(item.id);
+      const blob = response.data;
+      const filename = `release-${released.booking?.reference ?? released.bookingId ?? item.id}.pdf`;
+      const opened = openPdfBlob(blob, filename, pdfWindow);
+      toast({
+        title: 'Release exit paper issued',
+        description: opened
+          ? 'The PDF opened in a browser tab for printing or saving.'
+          : 'The browser blocked the preview tab, so the PDF was downloaded.',
+      });
       onClose();
     } catch (error) {
+      pdfWindow?.close();
       toast({ variant: 'destructive', title: 'Release failed', description: extractErrorMessage(error) });
+    } finally {
+      setDownloading(false);
     }
   };
 
   return (
-    <Modal opened={opened} onClose={onClose} title="Issue release order (DO)" centered size="md">
+    <Modal opened={opened} onClose={onClose} title="Issue release exit paper" centered size="md">
       <Stack gap="md">
         <Alert icon={<Info size={16} />} color="orange" variant="light">
           <Text size="sm">
-            Records the delivery order / release order sent to the customer. Once issued, the goods can be
-            picked up and delivered.
+            Creates the warehouse release document with booking, customer, cargo and location details. The
+            printed paper authorizes the goods to leave the warehouse gate.
           </Text>
         </Alert>
         <TextInput
-          label="Release order reference"
-          placeholder="e.g. DO-2026-001"
+          label="Release document reference"
+          placeholder="e.g. REL-2026-001"
           value={reference}
           onChange={(e) => setReference(e.currentTarget.value)}
         />
         <Group justify="flex-end" mt="sm">
-          <Button variant="default" onClick={onClose} disabled={releaseMutation.isPending}>
+          <Button variant="default" onClick={onClose} disabled={releaseMutation.isPending || downloading}>
             Cancel
           </Button>
-          <Button color="orange" onClick={handleSubmit} loading={releaseMutation.isPending}>
-            Issue release order
+          <Button color="orange" onClick={handleSubmit} loading={releaseMutation.isPending || downloading}>
+            Issue & view exit paper
           </Button>
         </Group>
       </Stack>

apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseCardView.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import { ActionIcon, Card, Group, SimpleGrid, Stack, Text } from '@mantine/core';
-import { Building2, Eye, MapPin, Pencil } from 'lucide-react';
+import { ActionIcon, Box, Card, Divider, Group, Progress, SimpleGrid, Stack, Text, Tooltip } from '@mantine/core';
+import { Building2, Eye, MapPin, Package, Pencil, Weight } from 'lucide-react';
 
 import { useQuery } from '@tanstack/react-query';
 
@@ -35,56 +35,101 @@ export function WarehouseCardView({ warehouses, onView, onEdit }: WarehouseCardV
   return (
     <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
       {warehouses.map((warehouse) => (
-        <Card key={warehouse.id} withBorder radius="md" padding="lg">
-          <Stack gap="sm">
+        <Card
+          key={warehouse.id}
+          withBorder
+          radius="md"
+          padding={0}
+          style={{
+            overflow: 'hidden',
+            borderColor: 'var(--mantine-color-gray-2)',
+            background: 'white',
+          }}
+        >
+          <Box h={3} bg={warehouse.status === 'ACTIVE' ? 'green.5' : 'gray.4'} />
+          <Stack gap="md" p="lg">
             <Group justify="space-between" wrap="nowrap" align="flex-start">
-              <div>
-                <Text fw={700}>{warehouse.name}</Text>
-                <Text size="xs" c="dimmed">
-                  {warehouse.code}
-                </Text>
-              </div>
-              <WarehouseStatusBadge status={warehouse.status} />
-            </Group>
-
-            <Group gap="xs">
-              <WarehouseTypeBadge type={warehouse.type} />
-            </Group>
-
-            {warehouse.stationId && stationNameById.get(warehouse.stationId) && (
-              <Group gap={6} c="dimmed">
-                <Building2 size={14} />
-                <Text size="sm">{stationNameById.get(warehouse.stationId)}</Text>
+              <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+                <Box
+                  style={{
+                    width: 38,
+                    height: 38,
+                    borderRadius: 8,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    flexShrink: 0,
+                    background: 'var(--mantine-color-green-0)',
+                    color: 'var(--mantine-color-green-7)',
+                    border: '1px solid var(--mantine-color-green-2)',
+                  }}
+                >
+                  <Building2 size={18} />
+                </Box>
+                <Box style={{ minWidth: 0 }}>
+                  <Text fw={800} size="md" truncate>
+                    {warehouse.name}
+                  </Text>
+                  <Text size="xs" c="dimmed" fw={600} truncate>
+                    {warehouse.code}
+                  </Text>
+                </Box>
               </Group>
-            )}
 
-            {warehouse.locationName && (
-              <Group gap={6} c="dimmed">
-                <MapPin size={14} />
-                <Text size="sm">{warehouse.locationName}</Text>
-              </Group>
-            )}
-
-            <Group justify="space-between">
-              <Text size="xs" c="dimmed">
-                Weight
-              </Text>
-              <Text size="sm">{formatCapacity(warehouse.currentWeight, warehouse.capacityWeight)}</Text>
-            </Group>
-            <Group justify="space-between">
-              <Text size="xs" c="dimmed">
-                Containers
-              </Text>
-              <Text size="sm">{formatCapacity(warehouse.currentContainers, warehouse.capacityContainers)}</Text>
+              <Stack gap={6} align="flex-end">
+                <WarehouseStatusBadge status={warehouse.status} />
+                <WarehouseTypeBadge type={warehouse.type} />
+              </Stack>
             </Group>
 
-            <Group justify="flex-end" gap="xs" mt="xs">
-              <ActionIcon variant="subtle" color="gray" onClick={() => onView(warehouse)} title="View">
-                <Eye size={16} />
-              </ActionIcon>
-              <ActionIcon variant="subtle" color="gray" onClick={() => onEdit(warehouse)} title="Edit">
-                <Pencil size={16} />
-              </ActionIcon>
+            <Stack gap={8}>
+              {warehouse.stationId && stationNameById.get(warehouse.stationId) && (
+                <Group gap={8} c="dimmed" wrap="nowrap">
+                  <Building2 size={15} />
+                  <Text size="sm" truncate>
+                    {stationNameById.get(warehouse.stationId)}
+                  </Text>
+                </Group>
+              )}
+
+              {warehouse.locationName && (
+                <Group gap={8} c="dimmed" wrap="nowrap">
+                  <MapPin size={15} />
+                  <Text size="sm" truncate>
+                    {warehouse.locationName}
+                  </Text>
+                </Group>
+              )}
+            </Stack>
+
+            <Divider />
+
+            <Stack gap="md">
+              <CapacityRow
+                icon={Weight}
+                label="Weight"
+                current={warehouse.currentWeight}
+                capacity={warehouse.capacityWeight}
+              />
+              <CapacityRow
+                icon={Package}
+                label="Containers"
+                current={warehouse.currentContainers}
+                capacity={warehouse.capacityContainers}
+              />
+            </Stack>
+
+            <Group justify="flex-end" gap="xs" mt="auto">
+              <Tooltip label="View warehouse" withArrow>
+                <ActionIcon variant="light" color="gray" onClick={() => onView(warehouse)} aria-label="View warehouse">
+                  <Eye size={16} />
+                </ActionIcon>
+              </Tooltip>
+              <Tooltip label="Edit warehouse" withArrow>
+                <ActionIcon variant="light" color="orange" onClick={() => onEdit(warehouse)} aria-label="Edit warehouse">
+                  <Pencil size={16} />
+                </ActionIcon>
+              </Tooltip>
             </Group>
           </Stack>
         </Card>
@@ -92,3 +137,40 @@ export function WarehouseCardView({ warehouses, onView, onEdit }: WarehouseCardV
     </SimpleGrid>
   );
 }
+
+const capacityPercent = (current?: number | null, capacity?: number | null) => {
+  if (!capacity || capacity <= 0) return 0;
+  return Math.min(100, Math.max(0, ((current ?? 0) / capacity) * 100));
+};
+
+function CapacityRow({
+  icon: Icon,
+  label,
+  current,
+  capacity,
+}: {
+  icon: typeof Weight;
+  label: string;
+  current?: number | null;
+  capacity?: number | null;
+}) {
+  const percent = capacityPercent(current, capacity);
+  const color = percent >= 90 ? 'red' : percent >= 70 ? 'orange' : 'green';
+
+  return (
+    <Stack gap={6}>
+      <Group justify="space-between" wrap="nowrap">
+        <Group gap={7} c="dimmed" wrap="nowrap">
+          <Icon size={15} />
+          <Text size="xs" fw={700} tt="uppercase">
+            {label}
+          </Text>
+        </Group>
+        <Text size="sm" fw={700}>
+          {formatCapacity(Number(current) || 0, capacity)}
+        </Text>
+      </Group>
+      <Progress value={percent} color={color} size="xs" radius="xl" bg="var(--mantine-color-gray-1)" />
+    </Stack>
+  );
+}

apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseInquiryTable.tsx

@@ -1,5 +1,5 @@
-import { Stack, Text } from '@mantine/core';
-import { DataTable, type ColumnDef } from '@edr/ui-common';
+import { ActionIcon, Badge, Stack, Table, Text, Tooltip } from '@mantine/core';
+import { Eye } from 'lucide-react';
 
 import type { InventoryInquiryResult } from '@/types/warehouse';
 import { InventoryStatusBadge } from './badges';
@@ -7,71 +7,111 @@ import { formatDate, formatNumber } from './options';
 
 interface WarehouseInquiryTableProps {
   results: InventoryInquiryResult[];
+  onView?: (result: InventoryInquiryResult) => void;
 }
 
+const dash = '-';
+
 const itemDescriptor = (result: InventoryInquiryResult) => {
   if (result.containerNumber) return `Container ${result.containerNumber}`;
-  if (result.cargoType) return `Cargo · ${result.cargoType}`;
-  if (result.cargoDescription) return `Cargo · ${result.cargoDescription}`;
+  if (result.cargoType) return `Cargo - ${result.cargoType}`;
+  if (result.cargoDescription) return `Cargo - ${result.cargoDescription}`;
   if (result.goodsId) return 'Goods';
-  return '—';
+  return dash;
 };
 
-const columns: ColumnDef<InventoryInquiryResult>[] = [
-  {
-    id: 'booking',
-    header: 'Booking',
-    cell: ({ row }) => (
-      <Text size="sm" fw={600}>
-        {row.original.bookingNumber ?? row.original.bookingId.slice(0, 8)}
+export function WarehouseInquiryTable({ results, onView }: WarehouseInquiryTableProps) {
+  if (results.length === 0) {
+    return (
+      <Text c="dimmed" ta="center" py="xl">
+        No matching items. Adjust your search to locate cargo, containers or goods.
       </Text>
-    ),
-  },
-  { id: 'customer', header: 'Customer', cell: ({ row }) => row.original.customerName ?? '—' },
-  { id: 'item', header: 'Item', cell: ({ row }) => itemDescriptor(row.original) },
-  {
-    id: 'warehouse',
-    header: 'Warehouse',
-    cell: ({ row }) => (
-      <Stack gap={0}>
-        <Text size="sm">{row.original.warehouse?.name ?? '—'}</Text>
-        {row.original.warehouse?.code && (
-          <Text size="xs" c="dimmed">
-            {row.original.warehouse.code}
-          </Text>
-        )}
-      </Stack>
-    ),
-  },
-  { id: 'yard', header: 'Yard', cell: ({ row }) => row.original.yard?.name ?? '—' },
-  { id: 'zone', header: 'Zone', cell: ({ row }) => row.original.zone?.name ?? '—' },
-  {
-    id: 'status',
-    header: 'Status',
-    cell: ({ row }) => <InventoryStatusBadge status={row.original.status} />,
-  },
-  { id: 'qty', header: 'Qty', cell: ({ row }) => formatNumber(row.original.quantity) },
-  { id: 'weight', header: 'Weight', cell: ({ row }) => formatNumber(row.original.weight) },
-  {
-    id: 'arrived',
-    header: 'Arrived',
-    cell: ({ row }) => <Text size="xs">{formatDate(row.original.arrivedAt)}</Text>,
-  },
-  {
-    id: 'ready',
-    header: 'Ready',
-    cell: ({ row }) => <Text size="xs">{formatDate(row.original.readyForLoadingAt)}</Text>,
-  },
-];
+    );
+  }
 
-export function WarehouseInquiryTable({ results }: WarehouseInquiryTableProps) {
   return (
-    <DataTable
-      columns={columns}
-      data={results}
-      status="success"
-      emptyMessage="No matching items. Adjust your search to locate cargo, containers or goods."
-      containerClassName="border-0 shadow-none"
-    />
+    <Table.ScrollContainer minWidth={1100}>
+      <Table highlightOnHover verticalSpacing="sm" striped>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Booking</Table.Th>
+            <Table.Th>Customer</Table.Th>
+            <Table.Th>Item</Table.Th>
+            <Table.Th>Warehouse</Table.Th>
+            <Table.Th>Yard</Table.Th>
+            <Table.Th>Zone</Table.Th>
+            <Table.Th>Location</Table.Th>
+            <Table.Th>Status</Table.Th>
+            <Table.Th>Qty</Table.Th>
+            <Table.Th>Weight</Table.Th>
+            <Table.Th>Arrived</Table.Th>
+            <Table.Th>Ready</Table.Th>
+            {onView ? <Table.Th ta="right">Actions</Table.Th> : null}
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {results.map((result) => (
+            <Table.Tr key={result.id}>
+              <Table.Td>
+                <Text size="sm" fw={600}>
+                  {result.bookingReference ?? result.bookingNumber ?? result.bookingId?.slice(0, 8) ?? dash}
+                </Text>
+              </Table.Td>
+              <Table.Td>{result.customerName ?? dash}</Table.Td>
+              <Table.Td>{itemDescriptor(result)}</Table.Td>
+              <Table.Td>
+                <Stack gap={0}>
+                  <Text size="sm">{result.warehouse?.name ?? dash}</Text>
+                  {result.warehouse?.code ? (
+                    <Text size="xs" c="dimmed">
+                      {result.warehouse.code}
+                    </Text>
+                  ) : null}
+                </Stack>
+              </Table.Td>
+              <Table.Td>{result.yard?.name ?? dash}</Table.Td>
+              <Table.Td>{result.zone?.name ?? dash}</Table.Td>
+              <Table.Td>
+                <Stack gap={0}>
+                  <Text size="sm">{result.locationSummary ?? dash}</Text>
+                  {result.trainNumber ? (
+                    <Text size="xs" c="dimmed">
+                      {result.trainNumber}
+                      {result.route ? ` - ${result.route}` : ''}
+                    </Text>
+                  ) : null}
+                </Stack>
+              </Table.Td>
+              <Table.Td>
+                {result.status ? (
+                  <InventoryStatusBadge status={result.status} />
+                ) : (
+                  <Badge variant="light" color={result.trainStatus === 'ARRIVED' ? 'orange' : 'blue'} size="sm">
+                    {result.trainStatus ?? result.bookingStatus ?? 'Not in warehouse'}
+                  </Badge>
+                )}
+              </Table.Td>
+              <Table.Td>{formatNumber(result.quantity)}</Table.Td>
+              <Table.Td>{formatNumber(result.weight)}</Table.Td>
+              <Table.Td>
+                <Text size="xs">{formatDate(result.arrivedAt)}</Text>
+              </Table.Td>
+              <Table.Td>
+                <Text size="xs">{formatDate(result.readyForLoadingAt)}</Text>
+              </Table.Td>
+              {onView ? (
+                <Table.Td>
+                  <Tooltip label="View details" withArrow>
+                    <ActionIcon variant="subtle" color="gray" onClick={() => onView(result)} ml="auto">
+                      <Eye size={16} />
+                    </ActionIcon>
+                  </Tooltip>
+                </Table.Td>
+              ) : null}
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
   );
 }

apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseInventoryTable.tsx

@@ -1,15 +1,13 @@
-import { DataTable, type ColumnDef } from "@edr/ui-common";
-import { ActionIcon, Badge, Button, Group, Text, Tooltip } from "@mantine/core";
-import { ArrowRightLeft, ClipboardList, Coins, History } from "lucide-react";
-import { useMemo } from "react";
+import { ActionIcon, Badge, Button, Checkbox, Group, Table, Text, Tooltip } from '@mantine/core';
+import { ArrowRightLeft, ClipboardList, Coins, Eye, FileText, History, MapPin } from 'lucide-react';
 
 import {
-    INVENTORY_NEXT_ACTION,
-    type InventoryAction,
-    type WarehouseInventoryItem,
-} from "@/types/warehouse";
-import { InventoryStatusBadge } from "./badges";
-import { formatDate, formatNumber, humanizeEnum } from "./options";
+  getNextInventoryAction,
+  type InventoryAction,
+  type WarehouseInventoryItem,
+} from '@/types/warehouse';
+import { InventoryStatusBadge } from './badges';
+import { formatDate, formatNumber, humanizeEnum } from './options';
 
 interface WarehouseInventoryTableProps {
   items: WarehouseInventoryItem[];
@@ -17,11 +15,11 @@ interface WarehouseInventoryTableProps {
   onAdvance: (item: WarehouseInventoryItem, action: InventoryAction) => void;
   onMove: (item: WarehouseInventoryItem) => void;
   onHistory: (item: WarehouseInventoryItem) => void;
+  onView?: (item: WarehouseInventoryItem) => void;
   onInspect?: (item: WarehouseInventoryItem) => void;
   onFeePreview?: (item: WarehouseInventoryItem) => void;
-  // Optional Last Mile action — only rendered for items whose booking requested door delivery.
+  onReleaseDocument?: (item: WarehouseInventoryItem) => void;
   onLastMile?: (item: WarehouseInventoryItem) => void;
-  // Optional row selection (used for bulk Mark-as-Inspected).
   selectedIds?: Set<string>;
   onToggleSelect?: (id: string) => void;
   onToggleSelectAll?: () => void;
@@ -30,21 +28,21 @@ interface WarehouseInventoryTableProps {
 }
 
 const itemKind = (item: WarehouseInventoryItem) => {
-  if (item.containerId) return { label: "Container", color: "blue" };
-  if (item.cargoId) return { label: "Cargo", color: "grape" };
-  if (item.goodsId) return { label: "Goods", color: "orange" };
-  return { label: "—", color: "gray" };
+  if (item.containerId) return { label: 'Container', color: 'blue' };
+  if (item.cargoId) return { label: 'Cargo', color: 'grape' };
+  if (item.goodsId) return { label: 'Goods', color: 'orange' };
+  return { label: '-', color: 'gray' };
 };
 
 const actionColor: Record<InventoryAction, string> = {
-  store: "blue",
-  reserve: "grape",
-  "ready-for-loading": "cyan",
-  load: "teal",
-  dispatch: "edr-green",
-  "ready-for-pickup": "orange",
-  release: "yellow",
-  deliver: "green",
+  store: 'blue',
+  reserve: 'grape',
+  'ready-for-loading': 'cyan',
+  load: 'teal',
+  dispatch: 'edr-green',
+  'ready-for-pickup': 'orange',
+  release: 'yellow',
+  deliver: 'green',
 };
 
 export function WarehouseInventoryTable({
@@ -53,165 +51,195 @@ export function WarehouseInventoryTable({
   onAdvance,
   onMove,
   onHistory,
+  onView,
   onInspect,
   onFeePreview,
+  onReleaseDocument,
+  onLastMile,
+  selectedIds,
+  onToggleSelect,
+  onToggleSelectAll,
+  allSelected,
+  someSelected,
 }: WarehouseInventoryTableProps) {
-  const columns = useMemo<ColumnDef<WarehouseInventoryItem>[]>(
-    () => [
-      {
-        id: "booking",
-        header: "Booking",
-        cell: ({ row }) =>
-          row.original.bookingId ? (
-            <Tooltip label={row.original.bookingId} withArrow>
-              <Text size="sm" fw={600}>
-                {row.original.bookingId.slice(0, 8)}…
-              </Text>
-            </Tooltip>
-          ) : (
-            <Text size="sm" c="dimmed">
-              —
-            </Text>
-          ),
-      },
-      {
-        id: "facility",
-        header: "Facility",
-        cell: ({ row }) => row.original.warehouse?.facility?.name ?? "—",
-      },
-      {
-        id: "warehouse",
-        header: "Warehouse",
-        cell: ({ row }) => row.original.warehouse?.code ?? "—",
-      },
-      {
-        id: "yard",
-        header: "Yard",
-        cell: ({ row }) => row.original.yard?.code ?? "—",
-      },
-      {
-        id: "zone",
-        header: "Zone",
-        cell: ({ row }) => row.original.zone?.code ?? "—",
-      },
-      {
-        id: "item",
-        header: "Item",
-        cell: ({ row }) => {
-          const kind = itemKind(row.original);
-          return (
-            <Badge color={kind.color} variant="light" size="sm" radius="md">
-              {kind.label}
-            </Badge>
-          );
-        },
-      },
-      {
-        id: "qty",
-        header: "Qty",
-        cell: ({ row }) => formatNumber(row.original.quantity),
-      },
-      {
-        id: "weight",
-        header: "Weight",
-        cell: ({ row }) => formatNumber(row.original.weight),
-      },
-      {
-        id: "status",
-        header: "Status",
-        cell: ({ row }) => (
-          <InventoryStatusBadge status={row.original.status} />
-        ),
-      },
-      {
-        id: "arrived",
-        header: "Arrived",
-        cell: ({ row }) => (
-          <Text size="xs">{formatDate(row.original.arrivedAt)}</Text>
-        ),
-      },
-      {
-        id: "actions",
-        header: "",
-        cell: ({ row }) => {
-          const item = row.original;
-          const busy = busyId === item.id;
-          const nextAction = INVENTORY_NEXT_ACTION[item.status];
-          return (
-            <Group
-              gap="xs"
-              justify="flex-end"
-              wrap="nowrap"
-              onClick={(e) => e.stopPropagation()}
-            >
-              {nextAction && (
-                <Button
-                  size="compact-xs"
-                  variant="light"
-                  color={actionColor[nextAction]}
-                  loading={busy}
-                  onClick={() => onAdvance(item, nextAction)}
-                >
-                  {humanizeEnum(nextAction.replace(/-/g, "_"))}
-                </Button>
-              )}
-              {item.status !== "DISPATCHED" && (
-                <Tooltip label="Move" withArrow>
-                  <ActionIcon
-                    variant="subtle"
-                    color="gray"
-                    onClick={() => onMove(item)}
-                  >
-                    <ArrowRightLeft size={16} />
-                  </ActionIcon>
-                </Tooltip>
-              )}
-              {onInspect && (
-                <Tooltip label="Inspection / Report" withArrow>
-                  <ActionIcon
-                    variant="subtle"
-                    color="orange"
-                    onClick={() => onInspect(item)}
-                  >
-                    <ClipboardList size={16} />
-                  </ActionIcon>
-                </Tooltip>
-              )}
-              {onFeePreview && (
-                <Tooltip label="Storage / Demurrage preview" withArrow>
-                  <ActionIcon
-                    variant="subtle"
-                    color="teal"
-                    onClick={() => onFeePreview(item)}
-                  >
-                    <Coins size={16} />
-                  </ActionIcon>
-                </Tooltip>
-              )}
-              <Tooltip label="History" withArrow>
-                <ActionIcon
-                  variant="subtle"
-                  color="gray"
-                  onClick={() => onHistory(item)}
-                >
-                  <History size={16} />
-                </ActionIcon>
-              </Tooltip>
-            </Group>
-          );
-        },
-      },
-    ],
-    [busyId, onAdvance, onMove, onHistory, onInspect, onFeePreview],
-  );
+  const selectable = Boolean(onToggleSelect);
+
+  if (items.length === 0) {
+    return (
+      <Text size="sm" c="dimmed" ta="center" py="xl">
+        No inventory items found.
+      </Text>
+    );
+  }
 
   return (
-    <DataTable
-      columns={columns}
-      data={items}
-      status="success"
-      emptyMessage="No inventory items found."
-      containerClassName="border-0 shadow-none"
-    />
+    <Table.ScrollContainer minWidth={1150}>
+      <Table highlightOnHover verticalSpacing="sm" striped>
+        <Table.Thead>
+          <Table.Tr>
+            {selectable && (
+              <Table.Th w={40}>
+                <Checkbox
+                  aria-label="Select all"
+                  checked={allSelected}
+                  indeterminate={someSelected}
+                  onChange={onToggleSelectAll}
+                />
+              </Table.Th>
+            )}
+            <Table.Th>Booking</Table.Th>
+            <Table.Th>Facility</Table.Th>
+            <Table.Th>Warehouse</Table.Th>
+            <Table.Th>Yard</Table.Th>
+            <Table.Th>Zone</Table.Th>
+            <Table.Th>Item</Table.Th>
+            <Table.Th>Qty</Table.Th>
+            <Table.Th>Weight</Table.Th>
+            <Table.Th>Status</Table.Th>
+            <Table.Th>Arrived</Table.Th>
+            <Table.Th ta="right">Actions</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {items.map((item) => {
+            const kind = itemKind(item);
+            const busy = busyId === item.id;
+            const nextAction = getNextInventoryAction(item);
+
+            return (
+              <Table.Tr key={item.id}>
+                {selectable && (
+                  <Table.Td>
+                    <Checkbox
+                      aria-label={`Select ${item.bookingId ?? item.id}`}
+                      checked={selectedIds?.has(item.id) ?? false}
+                      onChange={() => onToggleSelect?.(item.id)}
+                    />
+                  </Table.Td>
+                )}
+                <Table.Td>
+                  {item.bookingId ? (
+                    <Tooltip label={item.bookingId} withArrow>
+                      <Text size="sm" fw={600}>
+                        {item.bookingId.slice(0, 8)}...
+                      </Text>
+                    </Tooltip>
+                  ) : (
+                    <Text size="sm" c="dimmed">
+                      -
+                    </Text>
+                  )}
+                </Table.Td>
+                <Table.Td>{item.warehouse?.facility?.name ?? '-'}</Table.Td>
+                <Table.Td>{item.warehouse?.code ?? '-'}</Table.Td>
+                <Table.Td>{item.yard?.code ?? '-'}</Table.Td>
+                <Table.Td>{item.zone?.code ?? '-'}</Table.Td>
+                <Table.Td>
+                  <Badge color={kind.color} variant="light" size="sm" radius="md">
+                    {kind.label}
+                  </Badge>
+                </Table.Td>
+                <Table.Td>{formatNumber(item.quantity)}</Table.Td>
+                <Table.Td>{formatNumber(item.weight)}</Table.Td>
+                <Table.Td>
+                  <InventoryStatusBadge status={item.status} />
+                </Table.Td>
+                <Table.Td>
+                  <Text size="xs">{formatDate(item.arrivedAt)}</Text>
+                </Table.Td>
+                <Table.Td>
+                  <Group gap="xs" justify="flex-end" wrap="nowrap">
+                    {onView && (
+                      <Tooltip label="View details" withArrow>
+                        <ActionIcon variant="subtle" color="gray" onClick={() => onView(item)}>
+                          <Eye size={16} />
+                        </ActionIcon>
+                      </Tooltip>
+                    )}
+                    {nextAction && (
+                      <Button
+                        size="compact-xs"
+                        variant="light"
+                        color={actionColor[nextAction]}
+                        loading={busy}
+                        onClick={() => onAdvance(item, nextAction)}
+                      >
+                        {humanizeEnum(nextAction.replace(/-/g, '_'))}
+                      </Button>
+                    )}
+                    {item.status === 'READY_FOR_PICKUP' && (
+                      <>
+                        <Button
+                          size="compact-xs"
+                          variant="light"
+                          color="blue"
+                          loading={busy}
+                          onClick={() => onAdvance(item, 'store')}
+                        >
+                          Store
+                        </Button>
+                        <Button
+                          size="compact-xs"
+                          variant="light"
+                          color="green"
+                          loading={busy}
+                          onClick={() => onAdvance(item, 'dispatch')}
+                        >
+                          Dispatch
+                        </Button>
+                      </>
+                    )}
+                    {item.status !== 'DISPATCHED' && (
+                      <Tooltip label="Move" withArrow>
+                        <ActionIcon variant="subtle" color="gray" onClick={() => onMove(item)}>
+                          <ArrowRightLeft size={16} />
+                        </ActionIcon>
+                      </Tooltip>
+                    )}
+                    {onInspect && (
+                      <Tooltip label="Inspection / Report" withArrow>
+                        <ActionIcon variant="subtle" color="orange" onClick={() => onInspect(item)}>
+                          <ClipboardList size={16} />
+                        </ActionIcon>
+                      </Tooltip>
+                    )}
+                    {onFeePreview && (
+                      <Tooltip label="Storage / Demurrage preview" withArrow>
+                        <ActionIcon variant="subtle" color="teal" onClick={() => onFeePreview(item)}>
+                          <Coins size={16} />
+                        </ActionIcon>
+                      </Tooltip>
+                    )}
+                    {onReleaseDocument && item.releaseDate && (
+                      <Tooltip label="View release exit paper" withArrow>
+                        <ActionIcon
+                          variant="subtle"
+                          color="orange"
+                          onClick={() => onReleaseDocument(item)}
+                        >
+                          <FileText size={16} />
+                        </ActionIcon>
+                      </Tooltip>
+                    )}
+                    {onLastMile && item.booking?.lastMileDeliveryAddress && (
+                      <Tooltip label="Last mile delivery" withArrow>
+                        <ActionIcon variant="subtle" color="blue" onClick={() => onLastMile(item)}>
+                          <MapPin size={16} />
+                        </ActionIcon>
+                      </Tooltip>
+                    )}
+                    <Tooltip label="History" withArrow>
+                      <ActionIcon variant="subtle" color="gray" onClick={() => onHistory(item)}>
+                        <History size={16} />
+                      </ActionIcon>
+                    </Tooltip>
+                  </Group>
+                </Table.Td>
+              </Table.Tr>
+            );
+          })}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
   );
 }

apps/edr-freight-web/backoffice/src/components/warehouses/WarehouseTable.tsx

@@ -1,10 +1,20 @@
 import { useMemo } from 'react';
+import type { ReactNode } from 'react';
 import { ActionIcon, Group, Text } from '@mantine/core';
-import { Eye, Pencil } from 'lucide-react';
+import {
+  Building2,
+  Eye,
+  MapPin,
+  Package,
+  Pencil,
+  Scale,
+  Warehouse as WarehouseIcon,
+} from 'lucide-react';
 import { DataTable, type ColumnDef } from '@edr/ui-common';
 
 import { useQuery } from '@tanstack/react-query';
 
+import { bookingTable } from '@/components/bookings/booking-ui.styles';
 import { api } from '@/services/api';
 import type { Warehouse } from '@/types/warehouse';
 import { WarehouseStatusBadge, WarehouseTypeBadge } from './badges';
@@ -16,6 +26,43 @@ interface WarehouseTableProps {
   onEdit: (warehouse: Warehouse) => void;
 }
 
+const HEADER = bookingTable.headerCell;
+
+function CapacityCell({
+  current,
+  capacity,
+  icon,
+}: {
+  current?: number | null;
+  capacity?: number | null;
+  icon: ReactNode;
+}) {
+  const numericCurrent = Number(current) || 0;
+  const numericCapacity = Number(capacity) || 0;
+  const hasCapacity = numericCapacity > 0;
+  const ratio = hasCapacity ? Math.min(100, Math.max(0, (numericCurrent / numericCapacity) * 100)) : 0;
+  const isOverCapacity = hasCapacity && numericCurrent > numericCapacity;
+
+  return (
+    <div className="min-w-[8rem] space-y-2 py-1">
+      <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+        <span className="flex size-7 shrink-0 items-center justify-center rounded-lg border border-border/50 bg-background/70 text-muted-foreground">
+          {icon}
+        </span>
+        <span className="whitespace-nowrap">{formatCapacity(numericCurrent, capacity)}</span>
+      </div>
+      {hasCapacity ? (
+        <div className="h-1.5 overflow-hidden rounded-full bg-muted/50">
+          <div
+            className={isOverCapacity ? 'h-full rounded-full bg-red-500' : 'h-full rounded-full bg-edr-green'}
+            style={{ width: `${ratio}%` }}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 export function WarehouseTable({ warehouses, onView, onEdit }: WarehouseTableProps) {
   const { data: stations } = useQuery(
     api.stations.list.queryOptions({ staleTime: 5 * 60 * 1000 }),
@@ -28,63 +75,98 @@ export function WarehouseTable({ warehouses, onView, onEdit }: WarehouseTablePro
   const columns: ColumnDef<Warehouse>[] = [
     {
       id: 'code',
-      header: 'Code',
+      header: () => <span className={HEADER}>Warehouse</span>,
       cell: ({ row }) => (
-        <Text
-          fw={600}
-          size="sm"
-          c="edr-green.7"
-          style={{ cursor: 'pointer' }}
-          onClick={() => onView(row.original)}
-        >
-          {row.original.code}
-        </Text>
+        <div className="flex min-w-[11rem] items-center gap-3 py-1.5">
+          <div className={bookingTable.rowIcon}>
+            <WarehouseIcon className="size-4" strokeWidth={1.75} />
+          </div>
+          <div className="min-w-0">
+            <button
+              type="button"
+              className="block max-w-full truncate text-left text-sm font-semibold text-edr-green transition-colors hover:text-edr-green/80"
+              onClick={(e) => {
+                e.stopPropagation();
+                onView(row.original);
+              }}
+            >
+              {row.original.code}
+            </button>
+            <p className="mt-0.5 truncate text-xs text-muted-foreground">
+              {row.original.name}
+            </p>
+          </div>
+        </div>
       ),
     },
-    { id: 'name', header: 'Name', cell: ({ row }) => row.original.name },
     {
       id: 'facility',
-      header: 'Facility',
+      header: () => <span className={HEADER}>Facility</span>,
       cell: ({ row }) => {
         const name = row.original.stationId
           ? stationNameById.get(row.original.stationId)
           : undefined;
         return name ? (
-          <Text size="sm" fw={500}>
-            {name}
-          </Text>
+          <div className="flex min-w-[9rem] items-center gap-2 py-1 text-sm font-medium text-foreground">
+            <Building2 className="size-4 shrink-0 text-muted-foreground" />
+            <span className="truncate">{name}</span>
+          </div>
         ) : (
           <Text size="sm" c="dimmed">
-            —
+            -
           </Text>
         );
       },
     },
     {
       id: 'type',
-      header: 'Type',
-      cell: ({ row }) => <WarehouseTypeBadge type={row.original.type} />,
+      header: () => <span className={HEADER}>Type</span>,
+      cell: ({ row }) => (
+        <div className="py-1">
+          <WarehouseTypeBadge type={row.original.type} />
+        </div>
+      ),
     },
     {
       id: 'location',
-      header: 'Location',
-      cell: ({ row }) => row.original.locationName ?? '—',
+      header: () => <span className={HEADER}>Location</span>,
+      cell: ({ row }) => (
+        <div className="flex min-w-[10rem] items-center gap-2 py-1 text-sm text-foreground">
+          <MapPin className="size-4 shrink-0 text-muted-foreground" />
+          <span className="truncate">{row.original.locationName ?? '-'}</span>
+        </div>
+      ),
     },
     {
       id: 'weight',
-      header: 'Weight (cur / cap)',
-      cell: ({ row }) => formatCapacity(row.original.currentWeight, row.original.capacityWeight),
+      header: () => <span className={HEADER}>Weight</span>,
+      cell: ({ row }) => (
+        <CapacityCell
+          current={row.original.currentWeight}
+          capacity={row.original.capacityWeight}
+          icon={<Scale className="size-3.5" />}
+        />
+      ),
     },
     {
       id: 'containers',
-      header: 'Containers (cur / cap)',
-      cell: ({ row }) =>
-        formatCapacity(row.original.currentContainers, row.original.capacityContainers),
+      header: () => <span className={HEADER}>Containers</span>,
+      cell: ({ row }) => (
+        <CapacityCell
+          current={row.original.currentContainers}
+          capacity={row.original.capacityContainers}
+          icon={<Package className="size-3.5" />}
+        />
+      ),
     },
     {
       id: 'status',
-      header: 'Status',
-      cell: ({ row }) => <WarehouseStatusBadge status={row.original.status} />,
+      header: () => <span className={HEADER}>Status</span>,
+      cell: ({ row }) => (
+        <div className="py-1">
+          <WarehouseStatusBadge status={row.original.status} />
+        </div>
+      ),
     },
     {
       id: 'actions',
@@ -109,7 +191,7 @@ export function WarehouseTable({ warehouses, onView, onEdit }: WarehouseTablePro
       status="success"
       onRowClick={(warehouse) => onView(warehouse)}
       emptyMessage="No warehouses found."
-      containerClassName="border-0 shadow-none"
+      containerClassName="border-0 bg-transparent shadow-none"
     />
   );
 }

apps/edr-freight-web/backoffice/src/components/warehouses/badges.tsx

@@ -57,6 +57,8 @@ const inventoryStatusColor: Record<InventoryStatus, string> = {
   RECEIVED: "yellow",
   STORED: "blue",
   RESERVED: "grape",
+  ARRIVED_AT_WAREHOUSE: "orange",
+  UNDER_INSPECTION: "yellow",
   READY_FOR_LOADING: "cyan",
   LOADED: "teal",
   READY_FOR_PICKUP: "teal",

apps/edr-freight-web/backoffice/src/components/warehouses/index.ts

@@ -16,6 +16,8 @@ export { ReserveInventoryModal } from './ReserveInventoryModal';
 export { InventoryMovementHistoryTable } from './InventoryMovementHistoryTable';
 export { ActivityTimeline } from './ActivityTimeline';
 export { InventoryHistoryModal } from './InventoryHistoryModal';
+export { InventoryDetailModal } from './InventoryDetailModal';
+export { InventoryInquiryDetailModal } from './InventoryInquiryDetailModal';
 export { InventoryWorkbench } from './InventoryWorkbench';
 export { BookingSelect } from './BookingSelect';
 export { WagonSelect } from './WagonSelect';

apps/edr-freight-web/backoffice/src/components/warehouses/pdf.ts

@@ -0,0 +1,24 @@
+export function openPdfBlob(blob: Blob, filename: string, targetWindow?: Window | null) {
+  const url = URL.createObjectURL(blob);
+
+  if (targetWindow && !targetWindow.closed) {
+    targetWindow.location.href = url;
+    setTimeout(() => URL.revokeObjectURL(url), 60_000);
+    return true;
+  }
+
+  const opened = window.open(url, '_blank');
+  if (opened) {
+    setTimeout(() => URL.revokeObjectURL(url), 60_000);
+    return true;
+  }
+
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+  return false;
+}

apps/edr-freight-web/backoffice/src/constants/QUERY_KEYS.ts

@@ -69,6 +69,18 @@ export const QUERY_KEYS = {
     list: (resource: FleetResourceSlug | string) => ["fleet", "list", resource] as const,
   },
 
+  FIRST_MILE: {
+    ROOT: ["first-mile"] as const,
+    list: (filter?: Record<string, unknown>) => ["first-mile", "list", filter ?? {}] as const,
+    byId: (id: string) => ["first-mile", "detail", id] as const,
+  },
+
+  LAST_MILE: {
+    ROOT: ["last-mile"] as const,
+    list: (filter?: Record<string, unknown>) => ["last-mile", "list", filter ?? {}] as const,
+    byId: (id: string) => ["last-mile", "detail", id] as const,
+  },
+
   RULE_ENGINE: {
     ROOT: ["rule-engine"] as const,
     list: (resource: RuleEngineResourceSlug | string, params?: RuleEngineListParams) =>

apps/edr-freight-web/backoffice/src/constants/URLS.ts

@@ -229,9 +229,6 @@ export const URL_CONSTANTS = {
     SERVICE_TYPES: "/service-types",
     SERVICE_TYPE_BY_ID: (id: string) => `/service-types/${id}`,
 
-    SURCHARGE_TYPES: "/surcharge-types",
-    SURCHARGE_TYPE_BY_ID: (id: string) => `/surcharge-types/${id}`,
-
     WEIGHT_LIMIT_RULES: "/weight-limit-rules",
     WEIGHT_LIMIT_RULE_BY_ID: (id: string) => `/weight-limit-rules/${id}`,
 
@@ -279,38 +276,43 @@ export const URL_CONSTANTS = {
   },
 
   WAREHOUSE_YARDS: {
+    BASE: '/warehouse-yards',
     BY_ID: (id: string) => `/warehouse-yards/${id}`,
     ZONES: (yardId: string) => `/warehouse-yards/${yardId}/zones`,
   },
 
   WAREHOUSE_ZONES: {
+    BASE: '/warehouse-zones',
     BY_ID: (id: string) => `/warehouse-zones/${id}`,
   },
 
   WAREHOUSE_INVENTORY: {
     BASE: '/warehouse-inventory',
     RECEIVE: '/warehouse-inventory/receive',
+    DASHBOARD_SUMMARY: '/warehouse-inventory/dashboard/summary',
+    READY_FOR_LOADING: '/warehouse-inventory/ready-for-loading',
+    INQUIRY: '/warehouse-inventory/inquiry',
+    STORE: (id: string) => `/warehouse-inventory/${id}/store`,
+    INSPECT: (id: string) => `/warehouse-inventory/${id}/inspect`,
+    MARK_READY: (id: string) => `/warehouse-inventory/${id}/ready-for-loading`,
+    LOAD: (id: string) => `/warehouse-inventory/${id}/load`,
+    DISPATCH: (id: string) => `/warehouse-inventory/${id}/dispatch`,
+    MOVE: (id: string) => `/warehouse-inventory/${id}/move`,
     RESERVE: '/warehouse-inventory/reserve',
     ARRIVAL_QUEUE: '/warehouse-inventory/arrival-queue',
     AUTO_UNLOAD_ARRIVED: '/warehouse-inventory/auto-unload-arrived',
     AUTO_LOAD_READY: '/warehouse-inventory/auto-load-ready',
     UNLOAD_BOOKING: (bookingId: string) => `/warehouse-inventory/bookings/${bookingId}/unload`,
     INSPECTION_REPORTS: (inventoryId: string) => `/warehouse-inventory/${inventoryId}/inspection-reports`,
-    READY_FOR_LOADING: '/warehouse-inventory/ready-for-loading',
-    INQUIRY: '/warehouse-inventory/inquiry',
     LOADABLE_WAGONS: '/warehouse-inventory/loadable-wagons',
     BOOKING_SCHEDULE: (bookingId: string) => `/warehouse-inventory/booking/${bookingId}/schedule`,
-    MOVE: (id: string) => `/warehouse-inventory/${id}/move`,
     MOVEMENTS: (id: string) => `/warehouse-inventory/${id}/movements`,
     ACTIVITY: (id: string) => `/warehouse-inventory/${id}/activity`,
     LOADINGS: (id: string) => `/warehouse-inventory/${id}/loadings`,
-    STORE: (id: string) => `/warehouse-inventory/${id}/store`,
-    MARK_READY: (id: string) => `/warehouse-inventory/${id}/ready-for-loading`,
-    LOAD: (id: string) => `/warehouse-inventory/${id}/load`,
-    DISPATCH: (id: string) => `/warehouse-inventory/${id}/dispatch`,
     // Import branch
     MARK_READY_PICKUP: (id: string) => `/warehouse-inventory/${id}/ready-for-pickup`,
     RELEASE: (id: string) => `/warehouse-inventory/${id}/release`,
+    RELEASE_DOCUMENT: (id: string) => `/warehouse-inventory/${id}/release-document`,
     DELIVER: (id: string) => `/warehouse-inventory/${id}/deliver`,
     // Receive (Import/Export bulk)
     ELIGIBLE_BOOKINGS: (direction?: string) =>
@@ -365,6 +367,18 @@ export const URL_CONSTANTS = {
     BY_ID: (id: string) => `/vehicles/${id}`,
   },
 
+  FIRST_MILE: {
+    BASE: '/first-mile',
+    BY_ID: (id: string) => `/first-mile/${id}`,
+    ACCEPT: (reference: string) => `/first-mile/accept/${reference}`,
+  },
+
+  LAST_MILE: {
+    BASE: '/last-mile',
+    BY_ID: (id: string) => `/last-mile/${id}`,
+    ACCEPT: (reference: string) => `/last-mile/accept/${reference}`,
+  },
+
   DRIVERS: {
     BASE: '/drivers',
     BY_ID: (id: string) => `/drivers/${id}`,

apps/edr-freight-web/backoffice/src/constants/apiConfig.ts

@@ -1,3 +1,3 @@
-// export const API_BASE_URL = 'https://edrfreightapi.triaplc.com';
+export const API_BASE_URL = 'https://edrfreightapi.triaplc.com';
 
-export const API_BASE_URL = 'http://localhost:3001';
+// export const API_BASE_URL = 'http://localhost:3001';

apps/edr-freight-web/backoffice/src/features/bookings/booking-actions.config.ts

@@ -2,6 +2,7 @@ import type { LucideIcon } from "lucide-react";
 import {
   Ban,
   Check,
+  Coins,
   FileSignature,
   MessageSquareWarning,
   Play,
@@ -34,9 +35,17 @@ export type BookingActionId =
   | "allocateBooking"
   | "startTransit"
   | "complete"
+  | "operationAccept"
+  | "operationRequestChanges"
+  | "operationAdjustPrice"
   | "cancel";
 
-export type BookingActionInputKind = "note" | "reason" | "file";
+export type BookingActionInputKind =
+  | "note"
+  | "reason"
+  | "file"
+  | "days"
+  | "amount";
 
 export interface BookingActionDef {
   id: BookingActionId;
@@ -121,10 +130,13 @@ const SUBMITTED_ACTIONS: BookingActionDef[] = [
     description: "Start the formal approval chain",
     confirmTitle: "Accept submission?",
     confirmDescription:
-      "The booking moves to pending approval and approval steps are created from the rule engine.",
+      "Set how long the contract stays valid, then the booking moves to pending approval and approval steps are created from the rule engine.",
     variant: "default",
     icon: ShieldCheck,
     primary: true,
+    input: "days",
+    inputLabel: "Contract validity (days)",
+    inputPlaceholder: "e.g. 30",
   },
   {
     id: "requestChanges",
@@ -156,6 +168,50 @@ const SUBMITTED_ACTIONS: BookingActionDef[] = [
   },
 ];
 
+// Marketing/operations review of a drawdown order's operation request.
+const OPERATION_REVIEW_ACTIONS: BookingActionDef[] = [
+  {
+    id: "operationAccept",
+    label: "Accept operation",
+    shortLabel: "Accept",
+    description: "Accept the operation request and release it for dispatch",
+    confirmTitle: "Accept operation request?",
+    confirmDescription:
+      "Train orders enter the batch pool; road orders move to truck dispatch.",
+    variant: "default",
+    icon: Check,
+    primary: true,
+  },
+  {
+    id: "operationRequestChanges",
+    label: "Request changes",
+    shortLabel: "Changes",
+    description: "Ask the customer to adjust the operation request",
+    confirmTitle: "Request changes to the operation?",
+    confirmDescription:
+      "The customer will see your note and can adjust and resubmit the order.",
+    variant: "outline",
+    icon: MessageSquareWarning,
+    input: "note",
+    inputLabel: "Message to customer",
+    inputPlaceholder: "Describe what needs to change…",
+  },
+  {
+    id: "operationAdjustPrice",
+    label: "Adjust price",
+    shortLabel: "Price",
+    description: "Set an adjusted total the customer must confirm",
+    confirmTitle: "Adjust the order price?",
+    confirmDescription:
+      "Enter the new total. The customer must confirm it before the order proceeds.",
+    variant: "outline",
+    icon: Coins,
+    input: "amount",
+    inputLabel: "Adjusted total",
+    inputPlaceholder: "0.00",
+  },
+];
+
 const CANCEL_ACTION: BookingActionDef = {
   id: "cancel",
   label: "Cancel booking",
@@ -207,6 +263,9 @@ const ACTION_PERMISSION: Partial<Record<BookingActionId, string>> = {
   signContractStaff: FREIGHT_PERMS.bookings.signStaff,
   startTransit: FREIGHT_PERMS.bookings.operations,
   complete: FREIGHT_PERMS.bookings.operations,
+  operationAccept: FREIGHT_PERMS.bookings.operations,
+  operationRequestChanges: FREIGHT_PERMS.bookings.operations,
+  operationAdjustPrice: FREIGHT_PERMS.bookings.operations,
   allocateBooking: FREIGHT_PERMS.trainScheduling.manage,
   cancel: FREIGHT_PERMS.bookings.cancel,
 };
@@ -300,6 +359,9 @@ export function getBookingActions(
         },
       ];
       break;
+    case "OPERATION_REQUEST_PENDING":
+      actions = withCancel(OPERATION_REVIEW_ACTIONS);
+      break;
     case "PAID":
       if (
         canAllocateBooking({ status, schedulingStatus: ctx.schedulingStatus })

apps/edr-freight-web/backoffice/src/features/bookings/booking-status.config.ts

@@ -86,6 +86,22 @@ export const BOOKING_STATUS_STYLES: Record<string, StatusStyle> = {
     label: "Consolidated",
     color: "bg-indigo-50 text-indigo-700 border-indigo-200",
   },
+  OPERATION_REQUEST_PENDING: {
+    label: "Operation Review",
+    color: "bg-amber-50 text-amber-700 border-amber-200",
+  },
+  OPERATION_CHANGES_REQUESTED: {
+    label: "Operation Changes",
+    color: "bg-orange-50 text-orange-700 border-orange-200",
+  },
+  OPERATION_PRICE_PENDING_CONFIRM: {
+    label: "Price Confirm",
+    color: "bg-amber-50 text-amber-700 border-amber-200",
+  },
+  ROAD_DISPATCH_PENDING: {
+    label: "Truck Dispatch",
+    color: "bg-blue-50 text-blue-700 border-blue-200",
+  },
 };
 
 export interface StatusMeta {
@@ -257,10 +273,19 @@ export const BOOKING_LIST_TABS = [
       "EXPIRED",
     ],
   },
+  {
+    key: "ops_review",
+    label: "Ops review",
+    statuses: [
+      "OPERATION_REQUEST_PENDING",
+      "OPERATION_CHANGES_REQUESTED",
+      "OPERATION_PRICE_PENDING_CONFIRM",
+    ],
+  },
   {
     key: "operations",
     label: "Operations",
-    statuses: ["PAID", "IN_TRANSIT"],
+    statuses: ["PAID", "IN_TRANSIT", "ROAD_DISPATCH_PENDING"],
   },
   { key: "completed", label: "Completed", statuses: ["COMPLETED"] },
   { key: "closed", label: "Closed", statuses: ["REJECTED", "CANCELLED"] },

apps/edr-freight-web/backoffice/src/hooks/bookings/useBookings.ts

@@ -41,7 +41,8 @@ export function useBookingMutations(bookingId: string) {
   };
 
   const staffAccept = useMutation({
-    mutationFn: () => api.bookings.staffAccept.call({ id: bookingId }),
+    mutationFn: (validityDays: number) =>
+      api.bookings.staffAccept.call({ id: bookingId, validityDays }),
     onSuccess: (data) => onSuccess(data, "Booking accepted for approval"),
     onError: () => toast.error("Failed to accept booking"),
   });
@@ -60,6 +61,16 @@ export function useBookingMutations(bookingId: string) {
     onError: () => toast.error("Failed to reject booking"),
   });
 
+  const reviewOperation = useMutation({
+    mutationFn: (payload: {
+      decision: "ACCEPT" | "REQUEST_CHANGES" | "ADJUST_PRICE";
+      note?: string;
+      amount?: number;
+    }) => api.bookings.reviewOperation.call({ id: bookingId, ...payload }),
+    onSuccess: (data) => onSuccess(data, "Operation request reviewed"),
+    onError: () => toast.error("Failed to review operation request"),
+  });
+
   const approveStep = useMutation({
     mutationFn: ({
       stepId,
@@ -147,12 +158,14 @@ export function useBookingMutations(bookingId: string) {
     payBooking.isPending ||
     startTransit.isPending ||
     complete.isPending ||
+    reviewOperation.isPending ||
     cancel.isPending;
 
   return {
     staffAccept,
     requestChanges,
     staffReject,
+    reviewOperation,
     approveStep,
     rejectStep,
     generateContract,

apps/edr-freight-web/backoffice/src/hooks/rule-engine/useRuleEngine.ts

@@ -96,6 +96,40 @@ export const useCargoTypeParentOptions = (excludeId?: string, enabled = true) =>
     },
   });
 
+/**
+ * Cargo-type options restricted to LEAF nodes (actual commodities, not parent
+ * groups). A node is a leaf when no other cargo type names it as parent. Used
+ * by the Rate form's "Bulk cargo type" picker.
+ */
+export const useCargoLeafOptions = (enabled = true) =>
+  useQuery({
+    queryKey: QUERY_KEYS.RULE_ENGINE.selectOptions("cargo-types", { leafOnly: true }),
+    queryFn: () =>
+      ruleEngineService.list<RuleEngineRecord>("cargo-types", {
+        page: 1,
+        pageSize: CARGO_TYPE_PARENT_PAGE_SIZE,
+      }),
+    enabled,
+    select: (result) => {
+      const rows = result.data ?? [];
+      const parentIds = new Set(
+        rows
+          .map((row) => row.parentGroupId)
+          .filter((id): id is string => Boolean(id))
+          .map((id) => String(id)),
+      );
+      return rows
+        .filter((row) => row.id && !parentIds.has(String(row.id)))
+        .map((row) => {
+          const name = String(row.cargoTypeName ?? "").trim();
+          const code = String(row.code ?? "").trim();
+          const label =
+            name && code ? `${name} (${code})` : name || code || String(row.id);
+          return { label, value: String(row.id) };
+        });
+    },
+  });
+
 export function buildContainerTypeSelectOptions(
   rows: RuleEngineRecord[],
   includeNone: boolean,

apps/edr-freight-web/backoffice/src/hooks/useWarehouses.ts

@@ -0,0 +1,538 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { warehouseService } from '@/services/warehouse.service';
+import type {
+  InspectionReportPayload,
+  SaveAllocationRulePayload,
+  SaveFeeRulePayload,
+  WarehouseInvoiceFilter,
+  PayInvoicePayload,
+  InventoryFilter,
+  InventoryInquiryFilter,
+  LoadInventoryPayload,
+  MoveInventoryPayload,
+  ReceiveInventoryPayload,
+  ReleaseOrderPayload,
+  DeliverInventoryPayload,
+  BulkReceivePayload,
+  BulkInspectPayload,
+  ReserveInventoryPayload,
+  SaveWarehousePayload,
+  SaveYardPayload,
+  SaveZonePayload,
+  WarehouseFilter,
+} from '@/types/warehouse';
+
+export const warehouseKeys = {
+  all: ['warehouses'] as const,
+  list: (filter?: WarehouseFilter) => ['warehouses', 'list', filter ?? {}] as const,
+  facilities: () => ['warehouses', 'facilities'] as const,
+  detail: (id: string) => ['warehouses', 'detail', id] as const,
+  yards: (warehouseId: string) => ['warehouses', warehouseId, 'yards'] as const,
+  allYards: () => ['warehouse-yards', 'all'] as const,
+  zones: (yardId: string) => ['warehouse-yards', yardId, 'zones'] as const,
+  allZones: () => ['warehouse-zones', 'all'] as const,
+  inventory: (filter?: InventoryFilter) => ['warehouse-inventory', 'list', filter ?? {}] as const,
+  dashboardSummary: (filter?: InventoryFilter) => ['warehouse-dashboard', 'summary', filter ?? {}] as const,
+  inquiry: (filter: InventoryInquiryFilter) => ['warehouse-inventory', 'inquiry', filter] as const,
+};
+
+// ── Warehouses ─────────────────────────────────────────────────────────────
+
+export function useWarehouses(filter?: WarehouseFilter) {
+  return useQuery({
+    queryKey: warehouseKeys.list(filter),
+    queryFn: () => warehouseService.list(filter).then((r) => r.data),
+  });
+}
+
+export function useWarehouse(id?: string) {
+  return useQuery({
+    queryKey: warehouseKeys.detail(id ?? ''),
+    queryFn: () => warehouseService.getById(id as string).then((r) => r.data),
+    enabled: Boolean(id),
+  });
+}
+
+export function useWarehouseFacilities() {
+  return useQuery({
+    queryKey: warehouseKeys.facilities(),
+    queryFn: () => warehouseService.listFacilities().then((r) => r.data),
+  });
+}
+
+export function useCreateWarehouse() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: SaveWarehousePayload) => warehouseService.create(payload),
+    onSuccess: () => qc.invalidateQueries({ queryKey: warehouseKeys.all }),
+  });
+}
+
+export function useUpdateWarehouse() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: Partial<SaveWarehousePayload> }) =>
+      warehouseService.update(id, payload),
+    onSuccess: (_, { id }) => {
+      qc.invalidateQueries({ queryKey: warehouseKeys.all });
+      qc.invalidateQueries({ queryKey: warehouseKeys.detail(id) });
+    },
+  });
+}
+
+// ── Yards ────────────────────────────────────────────────────────────────
+
+export function useWarehouseYards(warehouseId?: string) {
+  return useQuery({
+    queryKey: warehouseKeys.yards(warehouseId ?? ''),
+    queryFn: () => warehouseService.listYards(warehouseId as string).then((r) => r.data),
+    enabled: Boolean(warehouseId),
+  });
+}
+
+export function useAllWarehouseYards() {
+  return useQuery({
+    queryKey: warehouseKeys.allYards(),
+    queryFn: () => warehouseService.listAllYards().then((r) => r.data),
+  });
+}
+
+export function useCreateYard() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ warehouseId, payload }: { warehouseId: string; payload: SaveYardPayload }) =>
+      warehouseService.createYard(warehouseId, payload),
+    onSuccess: (_, { warehouseId }) => {
+      qc.invalidateQueries({ queryKey: warehouseKeys.yards(warehouseId) });
+      qc.invalidateQueries({ queryKey: warehouseKeys.detail(warehouseId) });
+    },
+  });
+}
+
+export function useUpdateYard() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: Partial<SaveYardPayload> }) =>
+      warehouseService.updateYard(id, payload),
+    onSuccess: () => qc.invalidateQueries({ queryKey: warehouseKeys.all }),
+  });
+}
+
+// ── Zones ──────────────────────────────────────────────────────────────────
+
+export function useWarehouseZones(yardId?: string) {
+  return useQuery({
+    queryKey: warehouseKeys.zones(yardId ?? ''),
+    queryFn: () => warehouseService.listZones(yardId as string).then((r) => r.data),
+    enabled: Boolean(yardId),
+  });
+}
+
+export function useAllWarehouseZones() {
+  return useQuery({
+    queryKey: warehouseKeys.allZones(),
+    queryFn: () => warehouseService.listAllZones().then((r) => r.data),
+  });
+}
+
+export function useCreateZone() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ yardId, payload }: { yardId: string; payload: SaveZonePayload }) =>
+      warehouseService.createZone(yardId, payload),
+    onSuccess: (_, { yardId }) => qc.invalidateQueries({ queryKey: warehouseKeys.zones(yardId) }),
+  });
+}
+
+export function useUpdateZone() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: Partial<SaveZonePayload> }) =>
+      warehouseService.updateZone(id, payload),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['warehouse-yards'] }),
+  });
+}
+
+// ── Inventory ──────────────────────────────────────────────────────────────
+
+export function useWarehouseInventory(filter?: InventoryFilter) {
+  return useQuery({
+    queryKey: warehouseKeys.inventory(filter),
+    queryFn: () => warehouseService.listInventory(filter).then((r) => r.data),
+  });
+}
+
+export function useWarehouseDashboardSummary(filter?: InventoryFilter) {
+  return useQuery({
+    queryKey: warehouseKeys.dashboardSummary(filter),
+    queryFn: () => warehouseService.getDashboardSummary(filter).then((r) => r.data),
+  });
+}
+
+export function useReceiveInventory() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: ReceiveInventoryPayload) => warehouseService.receiveInventory(payload),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
+      qc.invalidateQueries({ queryKey: warehouseKeys.all });
+      qc.invalidateQueries({ queryKey: ['warehouse-dashboard'] });
+    },
+  });
+}
+
+function useInventoryMutation<TArgs>(fn: (args: TArgs) => Promise<unknown>) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: fn,
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
+      qc.invalidateQueries({ queryKey: ['warehouse-loadings'] });
+      qc.invalidateQueries({ queryKey: warehouseKeys.all });
+    },
+  });
+}
+
+export const useStoreInventory = () => useInventoryMutation((id: string) => warehouseService.store(id));
+export const useReserveInventory = () =>
+  useInventoryMutation((payload: ReserveInventoryPayload) => warehouseService.reserve(payload));
+export const useMarkReadyForLoading = () =>
+  useInventoryMutation((id: string) => warehouseService.markReadyForLoading(id));
+export const useLoadInventory = () =>
+  useInventoryMutation((args: { id: string; payload: LoadInventoryPayload }) =>
+    warehouseService.load(args.id, args.payload),
+  );
+export const useDispatchInventory = () => useInventoryMutation((id: string) => warehouseService.dispatch(id));
+export const useMoveInventory = () =>
+  useInventoryMutation((args: { id: string; payload: MoveInventoryPayload }) =>
+    warehouseService.move(args.id, args.payload),
+  );
+
+// ── Import branch (READY_FOR_PICKUP → DELIVERED) ───────────────────────────
+export const useMarkReadyForPickup = () =>
+  useInventoryMutation((id: string) => warehouseService.markReadyForPickup(id));
+export const useReleaseInventory = () =>
+  useInventoryMutation((args: { id: string; payload: ReleaseOrderPayload }) =>
+    warehouseService.release(args.id, args.payload),
+  );
+export const useDeliverInventory = () =>
+  useInventoryMutation((args: { id: string; payload: DeliverInventoryPayload }) =>
+    warehouseService.deliver(args.id, args.payload),
+  );
+
+// ── Receive (Import/Export bulk) ───────────────────────────────────────────
+/**
+ * All not-yet-received PAID bookings, classified IMPORT/EXPORT by route, in one call.
+ * Both Receive tabs share this single query (same key) — only one HTTP request fires —
+ * then filter client-side by direction.
+ */
+export function useEligibleBookings(enabled = true) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', 'eligible-bookings'],
+    queryFn: () => warehouseService.eligibleBookings().then((r) => r.data),
+    enabled,
+  });
+}
+export const useBulkReceive = () =>
+  useInventoryMutation((payload: BulkReceivePayload) => warehouseService.receiveBulk(payload));
+export const useLoadPassedExport = () =>
+  useInventoryMutation(() => warehouseService.loadPassedExport());
+export const useBulkMarkInspected = () =>
+  useInventoryMutation((payload: BulkInspectPayload) => warehouseService.bulkMarkInspected(payload));
+
+export function useReadyToLoadExport(enabled = true) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', 'ready-to-load-export'],
+    queryFn: () => warehouseService.readyToLoadExport().then((r) => r.data),
+    enabled,
+  });
+}
+
+export function useLoadedExport(enabled = true) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', 'loaded-export'],
+    queryFn: () => warehouseService.loadedExport().then((r) => r.data),
+    enabled,
+  });
+}
+
+export const useBulkDispatchExport = () =>
+  useInventoryMutation((inventoryIds: string[]) => warehouseService.bulkDispatchExport(inventoryIds));
+
+/** Arrived IMPORT trains (route-derived). Read-only. */
+export function useImportArriveQueue(enabled = true) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', 'import-arrive-queue'],
+    queryFn: () => warehouseService.importArriveQueue().then((r) => r.data),
+    enabled,
+  });
+}
+
+/** Assigned bookings/items for an arrived import train. Read-only. */
+export function useImportTrainItems(scheduleId?: string) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', 'import-train-items', scheduleId],
+    queryFn: () => warehouseService.importTrainItems(scheduleId as string).then((r) => r.data),
+    enabled: Boolean(scheduleId),
+  });
+}
+
+/** Unload all eligible assigned bookings of an ARRIVED import train (→ UNLOADED). */
+export const useAutoUnloadArrivedBookings = () =>
+  useInventoryMutation((scheduleId: string) => warehouseService.autoUnloadArrivedBookings(scheduleId));
+
+/** IMPORT inventory in the Unloaded Queue (UNLOADED / destination inspection). Read-only. */
+export function useImportUnloadedQueue(enabled = true) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', 'import-unloaded-queue'],
+    queryFn: () => warehouseService.importUnloadedQueue().then((r) => r.data),
+    enabled,
+  });
+}
+
+/** IMPORT inventory that is PICKUP_READY (READY_FOR_PICKUP) awaiting pickup/dispatch. Read-only. */
+export function useImportPickupReadyQueue(enabled = true) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', 'import-pickup-ready-queue'],
+    queryFn: () => warehouseService.importPickupReadyQueue().then((r) => r.data),
+    enabled,
+  });
+}
+
+// ── Loading (Batch 3) ────────────────────────────────────────────────────────
+
+export function useLoadableWagons(enabled = true) {
+  return useQuery({
+    queryKey: ['warehouse', 'loadable-wagons'],
+    queryFn: () => warehouseService.loadableWagons().then((r) => r.data),
+    enabled,
+  });
+}
+
+export function useWarehouseLoadings(params?: { bookingId?: string; wagonId?: string }) {
+  return useQuery({
+    queryKey: ['warehouse-loadings', params ?? {}],
+    queryFn: () => warehouseService.loadings(params).then((r) => r.data),
+  });
+}
+
+export function useBookingSchedule(bookingId?: string) {
+  return useQuery({
+    queryKey: ['warehouse', 'booking-schedule', bookingId ?? ''],
+    queryFn: () => warehouseService.bookingSchedule(bookingId as string).then((r) => r.data),
+    enabled: Boolean(bookingId),
+  });
+}
+
+export function useInventoryMovements(id?: string) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', id, 'movements'],
+    queryFn: () => warehouseService.movements(id as string).then((r) => r.data),
+    enabled: Boolean(id),
+  });
+}
+
+export function useInventoryActivity(id?: string) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', id, 'activity'],
+    queryFn: () => warehouseService.activity(id as string).then((r) => r.data),
+    enabled: Boolean(id),
+  });
+}
+
+export function useWarehouseDashboard() {
+  return useQuery({
+    queryKey: ['warehouses', 'dashboard'],
+    queryFn: () => warehouseService.dashboard().then((r) => r.data),
+  });
+}
+
+export function useInventoryInquiry(filter: InventoryInquiryFilter, enabled = true) {
+  return useQuery({
+    queryKey: warehouseKeys.inquiry(filter),
+    queryFn: () => warehouseService.inquiry(filter).then((r) => r.data),
+    enabled,
+  });
+}
+
+// ── Batch 4.5: Arrival / Unload / Inspection ────────────────────────────────
+
+export function useArrivalQueue() {
+  return useQuery({
+    queryKey: ['warehouse-inventory', 'arrival-queue'],
+    queryFn: () => warehouseService.arrivalQueue().then((r) => r.data),
+  });
+}
+
+function useArrivalInvalidation() {
+  const qc = useQueryClient();
+  return () => {
+    qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
+    qc.invalidateQueries({ queryKey: warehouseKeys.all });
+  };
+}
+
+export function useAutoUnloadArrived() {
+  const onSuccess = useArrivalInvalidation();
+  return useMutation({ mutationFn: () => warehouseService.autoUnloadArrived(), onSuccess });
+}
+
+export function useAutoLoadReady() {
+  const onSuccess = useArrivalInvalidation();
+  return useMutation({ mutationFn: () => warehouseService.autoLoadReady(), onSuccess });
+}
+
+export function useUnloadBooking() {
+  const onSuccess = useArrivalInvalidation();
+  return useMutation({
+    mutationFn: (args: { bookingId: string; payload?: Record<string, unknown> }) =>
+      warehouseService.unloadBooking(args.bookingId, args.payload),
+    onSuccess,
+  });
+}
+
+export function useInspectionReports(inventoryId?: string) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', inventoryId, 'inspection-reports'],
+    queryFn: () => warehouseService.listInspectionReports(inventoryId as string).then((r) => r.data),
+    enabled: Boolean(inventoryId),
+  });
+}
+
+export function useCreateInspectionReport() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ inventoryId, payload }: { inventoryId: string; payload: InspectionReportPayload }) =>
+      warehouseService.createInspectionReport(inventoryId, payload).then((r) => r.data),
+    onSuccess: (_, { inventoryId }) => {
+      qc.invalidateQueries({ queryKey: ['warehouse-inventory', inventoryId, 'inspection-reports'] });
+      qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
+    },
+  });
+}
+
+export function useUploadInspectionAttachments() {
+  return useMutation({
+    mutationFn: ({ reportId, files }: { reportId: string; files: File[] }) =>
+      warehouseService.uploadInspectionAttachments(reportId, files),
+  });
+}
+
+// ── Batch 5: Allocation + Fee rules / preview ───────────────────────────────
+
+export function useAllocationRules() {
+  return useQuery({
+    queryKey: ['warehouse-allocation-rules'],
+    queryFn: () => warehouseService.listAllocationRules().then((r) => r.data),
+  });
+}
+
+export function useFeeRules() {
+  return useQuery({
+    queryKey: ['warehouse-fee-rules'],
+    queryFn: () => warehouseService.listFeeRules().then((r) => r.data),
+  });
+}
+
+function useRuleMutation<TArgs>(fn: (args: TArgs) => Promise<unknown>, keys: string[]) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: fn,
+    onSuccess: () => keys.forEach((k) => qc.invalidateQueries({ queryKey: [k] })),
+  });
+}
+
+export const useCreateAllocationRule = () =>
+  useRuleMutation(
+    (payload: SaveAllocationRulePayload) => warehouseService.createAllocationRule(payload),
+    ['warehouse-allocation-rules'],
+  );
+export const useUpdateAllocationRule = () =>
+  useRuleMutation(
+    (args: { id: string; payload: Partial<SaveAllocationRulePayload> }) =>
+      warehouseService.updateAllocationRule(args.id, args.payload),
+    ['warehouse-allocation-rules'],
+  );
+export const useDeleteAllocationRule = () =>
+  useRuleMutation((id: string) => warehouseService.deleteAllocationRule(id), ['warehouse-allocation-rules']);
+
+export const useCreateFeeRule = () =>
+  useRuleMutation((payload: SaveFeeRulePayload) => warehouseService.createFeeRule(payload), ['warehouse-fee-rules']);
+export const useUpdateFeeRule = () =>
+  useRuleMutation(
+    (args: { id: string; payload: Partial<SaveFeeRulePayload> }) =>
+      warehouseService.updateFeeRule(args.id, args.payload),
+    ['warehouse-fee-rules'],
+  );
+export const useDeleteFeeRule = () =>
+  useRuleMutation((id: string) => warehouseService.deleteFeeRule(id), ['warehouse-fee-rules']);
+
+export function useFeePreview(inventoryId?: string) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', inventoryId, 'fee-preview'],
+    queryFn: () => warehouseService.feePreview(inventoryId as string).then((r) => r.data),
+    enabled: Boolean(inventoryId),
+  });
+}
+
+// ── Batch 6: Warehouse fee invoices ─────────────────────────────────────────
+
+export function useWarehouseInvoices(filter?: WarehouseInvoiceFilter) {
+  return useQuery({
+    queryKey: ['warehouse-fee-invoices', filter ?? {}],
+    queryFn: () => warehouseService.listInvoices(filter).then((r) => r.data),
+  });
+}
+
+export function useWarehouseInvoice(id?: string) {
+  return useQuery({
+    queryKey: ['warehouse-fee-invoices', 'detail', id],
+    queryFn: () => warehouseService.getInvoice(id as string).then((r) => r.data),
+    enabled: Boolean(id),
+  });
+}
+
+export function useInvoicesForInventory(inventoryId?: string) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', inventoryId, 'fee-invoices'],
+    queryFn: () => warehouseService.invoicesForInventory(inventoryId as string).then((r) => r.data),
+    enabled: Boolean(inventoryId),
+  });
+}
+
+function useInvoiceInvalidation() {
+  const qc = useQueryClient();
+  return () => {
+    qc.invalidateQueries({ queryKey: ['warehouse-fee-invoices'] });
+    qc.invalidateQueries({ queryKey: ['warehouse-inventory'] });
+  };
+}
+
+export function useGenerateInvoice() {
+  const onSuccess = useInvoiceInvalidation();
+  return useMutation({
+    mutationFn: ({ inventoryId, confirmZero }: { inventoryId: string; confirmZero?: boolean }) =>
+      warehouseService.generateInvoice(inventoryId, confirmZero).then((r) => r.data),
+    onSuccess,
+  });
+}
+
+export function useCancelInvoice() {
+  const onSuccess = useInvoiceInvalidation();
+  return useMutation({ mutationFn: (id: string) => warehouseService.cancelInvoice(id), onSuccess });
+}
+
+export function usePayInvoice() {
+  const onSuccess = useInvoiceInvalidation();
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: PayInvoicePayload }) =>
+      warehouseService.payInvoice(id, payload),
+    onSuccess,
+  });
+}
+
+export function useGateClearance() {
+  const onSuccess = useInvoiceInvalidation();
+  return useMutation({ mutationFn: (inventoryId: string) => warehouseService.gateClearance(inventoryId), onSuccess });
+}

apps/edr-freight-web/backoffice/src/lib/permissions.ts

@@ -15,6 +15,9 @@ export const FREIGHT_PERMS = {
     signStaff: "edr_freight_app:bookings:sign_staff",
     operations: "edr_freight_app:bookings:operations",
     cancel: "edr_freight_app:bookings:cancel",
+    reviewDocuments: "edr_freight_app:bookings:review_documents",
+    uploadClearanceOutput: "edr_freight_app:bookings:upload_clearance_output",
+    finalizeClearance: "edr_freight_app:bookings:finalize_clearance",
   },
   trainScheduling: {
     view: "edr_freight_app:train_scheduling:view",

apps/edr-freight-web/backoffice/src/pages/auth/LoginPage.tsx

@@ -1,11 +1,7 @@
 import { type FormEvent, useState } from "react";
-import { parsePhoneNumberFromString } from "libphonenumber-js";
 import {
   Eye,
   EyeOff,
-  Mail,
-  Smartphone,
-  UserRound,
   ArrowUpRight,
   Globe,
   ChevronDown,
@@ -14,65 +10,15 @@ import { useNavigate } from "react-router-dom";
 
 import { useAuth } from "@/auth/useAuth";
 
-type LoginMode = "email" | "phone" | "username";
-
-const loginModes: Array<{
-  value: LoginMode;
-  label: string;
-  icon: typeof Mail;
-  placeholder: string;
-}> = [
-    {
-      value: "email",
-      label: "Email",
-      icon: Mail,
-      placeholder: "name@company.com",
-    },
-    {
-      value: "phone",
-      label: "Phone",
-      icon: Smartphone,
-      placeholder: "09XXXXXXXX",
-    },
-    {
-      value: "username",
-      label: "Username",
-      icon: UserRound,
-      placeholder: "username",
-    },
-  ];
-
-const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-const usernamePattern = /^[a-zA-Z0-9._-]{3,32}$/;
-
-const normalizeIdentifier = (mode: LoginMode, value: string) => {
-  const trimmed = value.trim();
-
-  if (mode === "email") {
-    if (!emailPattern.test(trimmed.toLowerCase())) {
-      throw new Error("Enter a valid email address.");
-    }
-
-    return trimmed.toLowerCase();
+/** Normalise Ethiopian local phone (09…/07…) to E.164; pass email through unchanged. */
+const normaliseIdentifier = (raw: string): string => {
+  const v = raw.trim();
+  const digits = v.replace(/\D/g, "");
+  if (digits.length >= 9 && (v.startsWith("0") || v.startsWith("+251"))) {
+    const local = digits.startsWith("251") ? digits.slice(3) : digits.replace(/^0/, "");
+    return `+251${local}`;
   }
-
-  if (mode === "phone") {
-    const parsed = parsePhoneNumberFromString(trimmed, "ET");
-
-    if (!parsed?.isValid()) {
-      throw new Error("Enter a valid Ethiopian phone number.");
-    }
-
-    return parsed.number;
-  }
-
-  if (!usernamePattern.test(trimmed)) {
-    throw new Error(
-      "Username must be 3-32 characters and use letters, numbers, ., _, or -.",
-    );
-  }
-
-  return trimmed;
+  return v.toLowerCase();
 };
 
 const LOGIN_IMAGE = "/assets/login.png";
@@ -214,7 +160,6 @@ const FormFooter = () => (
 const LoginPage = () => {
   const navigate = useNavigate();
   const { login, verifyMfa } = useAuth();
-  const [mode, setMode] = useState<LoginMode>("email");
   const [identifier, setIdentifier] = useState("");
   const [password, setPassword] = useState("");
   const [otp, setOtp] = useState("");
@@ -224,15 +169,13 @@ const LoginPage = () => {
   const [normalizedIdentifier, setNormalizedIdentifier] = useState("");
   const [error, setError] = useState<string | null>(null);
 
-  const currentMode = loginModes.find((item) => item.value === mode)!;
-
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setSubmitting(true);
     setError(null);
 
     try {
-      const normalized = normalizeIdentifier(mode, identifier);
+      const normalized = normaliseIdentifier(identifier);
       setNormalizedIdentifier(normalized);
 
       const result = await login({ email: normalized, password });
@@ -284,32 +227,14 @@ const LoginPage = () => {
       <div className="flex w-full flex-col gap-4">
         <div className="space-y-1.5">
           <label className="text-sm font-medium text-gray-800">
-            Sign in method
-          </label>
-          <div className="relative">
-            <select
-              value={mode}
-              onChange={(event) => setMode(event.target.value as LoginMode)}
-              className={`${fieldClass} appearance-none pr-10`}
-            >
-              {loginModes.map((item) => (
-                <option key={item.value} value={item.value}>
-                  {item.label}
-                </option>
-              ))}
-            </select>
-            <ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
-          </div>
-        </div>
-
-        <div className="space-y-1.5">
-          <label className="text-sm font-medium text-gray-800">
-            {currentMode.label} <span className="text-red-500">*</span>
+            Email or Phone <span className="text-red-500">*</span>
           </label>
           <input
+            type="text"
             value={identifier}
             onChange={(event) => setIdentifier(event.target.value)}
-            placeholder={currentMode.placeholder}
+            placeholder="name@company.com or 09XXXXXXXX"
+            autoComplete="username"
             className={fieldClass}
           />
         </div>

apps/edr-freight-web/backoffice/src/pages/bookings/BookingRequestsPage.tsx

@@ -103,9 +103,8 @@ export default function BookingRequestsPage() {
           page: 1,
           pageSize: 100,
           statuses: "PAID",
-          schedulingStatuses: "NOT_SCHEDULED,HOLDING,ELIGIBLE",
           assignedToSchedule: "false",
-          sortBy: "isGovernment",
+          sortBy: "createdAt",
           sortOrder: "DESC",
           tab: activeTab,
         };

apps/edr-freight-web/backoffice/src/pages/bookings/GlClearancePage.tsx

@@ -0,0 +1,765 @@
+import { useMemo, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  Alert,
+  Badge,
+  Box,
+  Button,
+  Card,
+  FileButton,
+  Group,
+  Loader,
+  Progress,
+  ScrollArea,
+  Stack,
+  Text,
+  TextInput,
+  Textarea,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Clock,
+  Download,
+  ExternalLink,
+  FileText,
+  Inbox,
+  MessageSquareWarning,
+  Search,
+  ShieldCheck,
+  Upload,
+  X,
+} from "lucide-react";
+import toast from "react-hot-toast";
+import type { Freight } from "@edr/types";
+
+import { PageContainer } from "@/components/page/PageContainer";
+import { PageHeader } from "@/components/page/PageHeader";
+import { bookingsService } from "@/services/bookings.service";
+
+const REVIEW_STATUS = "DOCUMENTS_UNDER_REVIEW";
+
+export default function GlClearancePage() {
+  const qc = useQueryClient();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+
+  // Bookings currently awaiting GL document review.
+  const { data: list, isLoading } = useQuery({
+    queryKey: ["gl-clearance", "list"],
+    queryFn: () =>
+      bookingsService.list({ status: REVIEW_STATUS, pageSize: 100 }),
+  });
+
+  const bookings = list?.items ?? [];
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return bookings;
+    return bookings.filter(
+      (b) =>
+        b.reference?.toLowerCase().includes(q) ||
+        b.tradeDirection?.toLowerCase().includes(q) ||
+        b.freightType?.toLowerCase().includes(q),
+    );
+  }, [bookings, search]);
+
+  const activeId =
+    selectedId && filtered.some((b) => b.id === selectedId)
+      ? selectedId
+      : (filtered[0]?.id ?? null);
+
+  return (
+    <PageContainer>
+      <PageHeader
+        title="Document Clearance"
+        subtitle="Review customer documents, approve or raise a query, and finalize clearance."
+        meta={
+          <Badge
+            variant="light"
+            color="edr-green"
+            radius="sm"
+            leftSection={<ShieldCheck size={13} />}
+          >
+            {bookings.length} awaiting review
+          </Badge>
+        }
+      />
+
+      <div className="flex flex-col gap-5 lg:flex-row lg:items-start">
+        {/* ── Review queue ─────────────────────────────────────────────── */}
+        <Card
+          withBorder
+          shadow="sm"
+          radius="lg"
+          p="sm"
+          className="w-full shrink-0 lg:w-[320px]"
+        >
+          <Group justify="space-between" align="center" mb="xs" px={4}>
+            <Text fz="13px" fw={700} c="edr-text">
+              Review queue
+            </Text>
+            <Badge size="sm" variant="default" radius="sm">
+              {filtered.length}
+            </Badge>
+          </Group>
+
+          <TextInput
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+            placeholder="Search reference…"
+            size="xs"
+            radius="md"
+            mb="xs"
+            leftSection={<Search size={14} />}
+            rightSection={
+              search ? (
+                <X
+                  size={14}
+                  style={{ cursor: "pointer" }}
+                  onClick={() => setSearch("")}
+                />
+              ) : null
+            }
+          />
+
+          {isLoading ? (
+            <Group justify="center" py="lg" gap={8}>
+              <Loader size="xs" color="edr-green" />
+              <Text fz="13px" c="dimmed">
+                Loading…
+              </Text>
+            </Group>
+          ) : filtered.length === 0 ? (
+            <Stack align="center" gap={6} py="xl">
+              <ThemeIcon variant="light" color="gray" radius="xl" size={40}>
+                <Inbox size={20} />
+              </ThemeIcon>
+              <Text fz="13px" c="dimmed" ta="center">
+                {search
+                  ? "No bookings match your search."
+                  : "Nothing awaiting document review."}
+              </Text>
+            </Stack>
+          ) : (
+            <ScrollArea.Autosize mah={620} type="hover" offsetScrollbars>
+              <Stack gap={6}>
+                {filtered.map((b) => (
+                  <QueueItem
+                    key={b.id}
+                    booking={b}
+                    active={b.id === activeId}
+                    onSelect={() => setSelectedId(b.id)}
+                  />
+                ))}
+              </Stack>
+            </ScrollArea.Autosize>
+          )}
+        </Card>
+
+        {/* ── Review panel ─────────────────────────────────────────────── */}
+        <Box style={{ flex: 1, minWidth: 0 }}>
+          {activeId ? (
+            <ClearanceReviewPanel
+              key={activeId}
+              bookingId={activeId}
+              onChanged={() =>
+                qc.invalidateQueries({ queryKey: ["gl-clearance", "list"] })
+              }
+            />
+          ) : (
+            <EmptyPanel />
+          )}
+        </Box>
+      </div>
+    </PageContainer>
+  );
+}
+
+/** A single booking row in the left-hand review queue. */
+function QueueItem({
+  booking,
+  active,
+  onSelect,
+}: {
+  booking: Freight.IBooking;
+  active: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <Box
+      component="button"
+      type="button"
+      onClick={onSelect}
+      ta="left"
+      p="xs"
+      style={{
+        cursor: "pointer",
+        borderRadius: 12,
+        border: "1px solid",
+        borderColor: active
+          ? "var(--mantine-color-edr-green-5)"
+          : "var(--mantine-color-edr-border-6)",
+        background: active
+          ? "var(--mantine-color-edr-green-0)"
+          : "var(--mantine-color-edr-card-6)",
+        transition: "all 120ms ease",
+      }}
+    >
+      <Group justify="space-between" wrap="nowrap" gap={8}>
+        <Box style={{ minWidth: 0 }}>
+          <Text fz="13.5px" fw={700} c="edr-text" truncate>
+            {booking.reference}
+          </Text>
+          <Group gap={6} mt={3} wrap="nowrap">
+            <Badge
+              size="xs"
+              variant="light"
+              radius="sm"
+              color={
+                booking.tradeDirection === "IMPORT" ? "edr-blue" : "edr-accent"
+              }
+            >
+              {booking.tradeDirection}
+            </Badge>
+            <Text fz="11px" c="edr-muted" truncate>
+              {booking.freightType}
+            </Text>
+          </Group>
+        </Box>
+      </Group>
+    </Box>
+  );
+}
+
+function EmptyPanel() {
+  return (
+    <Card withBorder shadow="sm" radius="lg" p={48}>
+      <Stack align="center" gap={10}>
+        <ThemeIcon variant="light" color="edr-green" radius="xl" size={56}>
+          <ShieldCheck size={28} />
+        </ThemeIcon>
+        <Text fw={700} c="edr-text">
+          No booking selected
+        </Text>
+        <Text fz="13px" c="dimmed" ta="center" maw={320}>
+          Pick a booking from the review queue to inspect its customer documents
+          and start clearance.
+        </Text>
+      </Stack>
+    </Card>
+  );
+}
+
+function ClearanceReviewPanel({
+  bookingId,
+  onChanged,
+}: {
+  bookingId: string;
+  onChanged: () => void;
+}) {
+  const qc = useQueryClient();
+  const [queryNotes, setQueryNotes] = useState<Record<string, string>>({});
+  const [openQuery, setOpenQuery] = useState<Record<string, boolean>>({});
+  const [outputFiles, setOutputFiles] = useState<Record<string, File>>({});
+
+  const { data: clearance, isLoading } = useQuery({
+    queryKey: ["gl-clearance", bookingId],
+    queryFn: () => bookingsService.getClearance(bookingId),
+  });
+
+  const refresh = () => {
+    qc.invalidateQueries({ queryKey: ["gl-clearance", bookingId] });
+    onChanged();
+  };
+
+  const reviewMutation = useMutation({
+    mutationFn: (p: {
+      fileKey: string;
+      status: "APPROVED" | "QUERIED";
+      note?: string;
+    }) => bookingsService.reviewClearanceDocument(bookingId, p),
+    onSuccess: (_d, p) => {
+      toast.success(
+        p.status === "APPROVED" ? "Document approved" : "Query sent to customer",
+      );
+      if (p.status === "QUERIED")
+        setOpenQuery((o) => ({ ...o, [p.fileKey]: false }));
+      refresh();
+    },
+    onError: () => toast.error("Could not update document"),
+  });
+
+  const outputMutation = useMutation({
+    mutationFn: () =>
+      bookingsService.uploadClearanceOutput(bookingId, outputFiles),
+    onSuccess: () => {
+      toast.success("Output documents uploaded");
+      setOutputFiles({});
+      refresh();
+    },
+    onError: () => toast.error("Upload failed"),
+  });
+
+  const finalizeMutation = useMutation({
+    mutationFn: () => bookingsService.finalizeClearance(bookingId),
+    onSuccess: () => {
+      toast.success("Clearance finalized");
+      refresh();
+    },
+    onError: (e) =>
+      toast.error(
+        e instanceof Error ? e.message : "Could not finalize clearance",
+      ),
+  });
+
+  const customerDocs = useMemo(
+    () => (clearance?.documents ?? []).filter((d) => d.uploadedBy === "customer"),
+    [clearance],
+  );
+  const glDocs = useMemo(
+    () => (clearance?.documents ?? []).filter((d) => d.uploadedBy === "gl"),
+    [clearance],
+  );
+
+  // Review progress across the customer documents — drives the summary bar.
+  const stats = useMemo(() => {
+    const total = customerDocs.length;
+    const approved = customerDocs.filter(
+      (d) => d.reviewStatus === "APPROVED",
+    ).length;
+    const queried = customerDocs.filter(
+      (d) => d.reviewStatus === "QUERIED",
+    ).length;
+    const pending = total - approved - queried;
+    return { total, approved, queried, pending };
+  }, [customerDocs]);
+
+  if (isLoading || !clearance) {
+    return (
+      <Card withBorder shadow="sm" radius="lg" p={48}>
+        <Group justify="center" gap={10}>
+          <Loader size="sm" color="edr-green" />
+          <Text c="dimmed">Loading clearance…</Text>
+        </Group>
+      </Card>
+    );
+  }
+
+  const progressPct =
+    stats.total === 0 ? 0 : Math.round((stats.approved / stats.total) * 100);
+
+  return (
+    <Stack gap="md">
+      {/* ── Progress summary ───────────────────────────────────────────── */}
+      <Card withBorder shadow="sm" radius="lg" p="lg">
+        <Group justify="space-between" align="flex-start" mb="md">
+          <Box>
+            <Text fw={700} fz="15px" c="edr-text">
+              Customer documents
+            </Text>
+            <Text fz="12.5px" c="dimmed" mt={2}>
+              Approve each document, or open a query to tell the customer what to
+              fix.
+            </Text>
+          </Box>
+          {clearance.allApproved ? (
+            <Badge
+              variant="light"
+              color="edr-green"
+              radius="sm"
+              size="lg"
+              leftSection={<CheckCircle2 size={14} />}
+            >
+              All approved
+            </Badge>
+          ) : (
+            <Badge
+              variant="light"
+              color="edr-blue"
+              radius="sm"
+              size="lg"
+              leftSection={<Clock size={14} />}
+            >
+              Review pending
+            </Badge>
+          )}
+        </Group>
+
+        <Progress
+          value={progressPct}
+          color="edr-green"
+          radius="xl"
+          size="sm"
+          mb="sm"
+        />
+        <Group gap="lg">
+          <StatPill color="edr-green" label="Approved" value={stats.approved} />
+          <StatPill color="red" label="Queried" value={stats.queried} />
+          <StatPill color="edr-slate" label="Pending" value={stats.pending} />
+          <Text fz="12.5px" c="dimmed" ml="auto">
+            {stats.approved}/{stats.total} approved
+          </Text>
+        </Group>
+      </Card>
+
+      {/* ── Document review list ───────────────────────────────────────── */}
+      <Stack gap={12}>
+        {customerDocs.map((doc) => (
+          <DocReviewCard
+            key={`${doc.settingCode}:${doc.fileKey}`}
+            doc={doc}
+            note={queryNotes[doc.fileKey] ?? ""}
+            queryOpen={openQuery[doc.fileKey] ?? false}
+            onToggleQuery={(open) =>
+              setOpenQuery((o) => ({ ...o, [doc.fileKey]: open }))
+            }
+            onNote={(v) => setQueryNotes((n) => ({ ...n, [doc.fileKey]: v }))}
+            onApprove={() =>
+              reviewMutation.mutate({ fileKey: doc.fileKey, status: "APPROVED" })
+            }
+            onQuery={() =>
+              reviewMutation.mutate({
+                fileKey: doc.fileKey,
+                status: "QUERIED",
+                note: queryNotes[doc.fileKey],
+              })
+            }
+            busy={reviewMutation.isPending}
+          />
+        ))}
+      </Stack>
+
+      {/* ── Customs output documents (GL-supplied) ─────────────────────── */}
+      {clearance.outputCode && (
+        <Card withBorder shadow="sm" radius="lg" p="lg">
+          <Group gap={8} mb="md">
+            <ThemeIcon variant="light" color="edr-blue" radius="md" size={28}>
+              <Upload size={15} />
+            </ThemeIcon>
+            <Text fw={700} c="edr-text">
+              Customs output documents
+            </Text>
+          </Group>
+          <Stack gap={10}>
+            {glDocs.map((doc) => (
+              <Group key={doc.fileKey} justify="space-between" wrap="nowrap">
+                <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
+                  <FileText size={16} color="var(--mantine-color-edr-blue-6)" />
+                  <Text fz="13px" c="edr-text" truncate>
+                    {doc.label}
+                    {doc.required ? " *" : ""}
+                  </Text>
+                </Group>
+                <Group gap={8} wrap="nowrap">
+                  {doc.file ? (
+                    <Tooltip label="Download">
+                      <Box
+                        component="a"
+                        href={doc.file.url}
+                        target="_blank"
+                        rel="noreferrer"
+                        c="edr-blue"
+                        style={{ display: "flex" }}
+                      >
+                        <Download size={15} />
+                      </Box>
+                    </Tooltip>
+                  ) : (
+                    <Text fz="12px" c="edr-muted">
+                      Not uploaded
+                    </Text>
+                  )}
+                  <FileButton
+                    onChange={(f) =>
+                      f && setOutputFiles((o) => ({ ...o, [doc.fileKey]: f }))
+                    }
+                    accept="application/pdf,image/*"
+                  >
+                    {(props) => (
+                      <Button
+                        {...props}
+                        size="compact-xs"
+                        variant="light"
+                        color="edr-green"
+                        leftSection={<Upload size={13} />}
+                      >
+                        {outputFiles[doc.fileKey] ? "Selected" : "Upload"}
+                      </Button>
+                    )}
+                  </FileButton>
+                </Group>
+              </Group>
+            ))}
+          </Stack>
+          <Group justify="flex-end" mt="md">
+            <Button
+              variant="light"
+              color="edr-green"
+              radius="md"
+              leftSection={<Upload size={15} />}
+              disabled={Object.keys(outputFiles).length === 0}
+              loading={outputMutation.isPending}
+              onClick={() => outputMutation.mutate()}
+            >
+              Upload output documents
+            </Button>
+          </Group>
+        </Card>
+      )}
+
+      {finalizeMutation.isError && (
+        <Alert color="red" radius="md" icon={<AlertCircle size={16} />}>
+          {finalizeMutation.error instanceof Error
+            ? finalizeMutation.error.message
+            : "Could not finalize clearance."}
+        </Alert>
+      )}
+
+      {/* ── Finalize bar ───────────────────────────────────────────────── */}
+      <Card withBorder shadow="sm" radius="lg" p="md">
+        <Group justify="space-between" wrap="nowrap">
+          <Text fz="12.5px" c="dimmed">
+            {clearance.allApproved
+              ? "All required documents are approved. You can finalize clearance."
+              : "Approve every required document to unlock finalization."}
+          </Text>
+          <Button
+            color="edr-green"
+            radius="md"
+            leftSection={<CheckCircle2 size={16} />}
+            disabled={!clearance.allApproved}
+            loading={finalizeMutation.isPending}
+            onClick={() => finalizeMutation.mutate()}
+          >
+            Finalize clearance
+          </Button>
+        </Group>
+      </Card>
+    </Stack>
+  );
+}
+
+function StatPill({
+  color,
+  label,
+  value,
+}: {
+  color: string;
+  label: string;
+  value: number;
+}) {
+  return (
+    <Group gap={6} wrap="nowrap">
+      <Box
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: 999,
+          background: `var(--mantine-color-${color}-6)`,
+        }}
+      />
+      <Text fz="12.5px" c="edr-text" fw={600}>
+        {value}
+      </Text>
+      <Text fz="12.5px" c="dimmed">
+        {label}
+      </Text>
+    </Group>
+  );
+}
+
+/** Visual treatment for each document review state. */
+const STATUS_META: Record<
+  Freight.DocumentReviewStatus,
+  { label: string; color: string }
+> = {
+  APPROVED: { label: "Approved", color: "edr-green" },
+  QUERIED: { label: "Queried", color: "red" },
+  PENDING: { label: "Pending", color: "edr-slate" },
+};
+
+function DocReviewCard({
+  doc,
+  note,
+  queryOpen,
+  onToggleQuery,
+  onNote,
+  onApprove,
+  onQuery,
+  busy,
+}: {
+  doc: Freight.ClearanceDocument;
+  note: string;
+  queryOpen: boolean;
+  onToggleQuery: (open: boolean) => void;
+  onNote: (v: string) => void;
+  onApprove: () => void;
+  onQuery: () => void;
+  busy: boolean;
+}) {
+  const status = doc.reviewStatus ?? "PENDING";
+  const meta = STATUS_META[status];
+  const hasFile = !!doc.file;
+
+  return (
+    <Card
+      withBorder
+      shadow="sm"
+      radius="lg"
+      p="md"
+      style={{
+        borderColor:
+          status === "QUERIED"
+            ? "var(--mantine-color-red-2)"
+            : status === "APPROVED"
+              ? "var(--mantine-color-edr-green-2)"
+              : "var(--mantine-color-edr-border-6)",
+      }}
+    >
+      <Group justify="space-between" align="flex-start" wrap="nowrap">
+        <Group gap={12} wrap="nowrap" style={{ minWidth: 0 }}>
+          <ThemeIcon
+            variant="light"
+            color={hasFile ? "edr-blue" : "gray"}
+            radius="md"
+            size={40}
+          >
+            <FileText size={19} />
+          </ThemeIcon>
+          <Box style={{ minWidth: 0 }}>
+            <Text fz="14px" fw={700} c="edr-text" truncate>
+              {doc.label}
+              {doc.required ? " *" : ""}
+            </Text>
+            <Text fz="12px" c="edr-muted" truncate>
+              {hasFile ? doc.file!.name : "Not uploaded by customer"}
+            </Text>
+          </Box>
+        </Group>
+
+        <Group gap={8} wrap="nowrap">
+          <Badge variant="light" color={meta.color} radius="sm">
+            {meta.label}
+          </Badge>
+          {hasFile && (
+            <Tooltip label="Open document">
+              <Button
+                component="a"
+                href={doc.file!.url}
+                target="_blank"
+                rel="noreferrer"
+                size="compact-xs"
+                variant="default"
+                radius="md"
+                leftSection={<ExternalLink size={13} />}
+              >
+                View
+              </Button>
+            </Tooltip>
+          )}
+        </Group>
+      </Group>
+
+      {/* Previously raised query — visible so staff see what was asked. */}
+      {status === "QUERIED" && doc.note && (
+        <Alert
+          mt="sm"
+          color="red"
+          variant="light"
+          radius="md"
+          icon={<MessageSquareWarning size={15} />}
+          p="xs"
+        >
+          <Text fz="12.5px" c="red.9">
+            {doc.note}
+          </Text>
+        </Alert>
+      )}
+
+      {/* Action row — only when the customer actually uploaded a file. */}
+      {hasFile && (
+        <Box mt="sm">
+          {!queryOpen ? (
+            <Group justify="flex-end" gap={8}>
+              <Button
+                size="compact-sm"
+                variant="light"
+                color="red"
+                radius="md"
+                leftSection={<MessageSquareWarning size={14} />}
+                disabled={busy}
+                onClick={() => onToggleQuery(true)}
+              >
+                Open query
+              </Button>
+              <Button
+                size="compact-sm"
+                color="edr-green"
+                radius="md"
+                leftSection={<CheckCircle2 size={14} />}
+                disabled={busy}
+                onClick={onApprove}
+              >
+                Approve
+              </Button>
+            </Group>
+          ) : (
+            <Box
+              p="sm"
+              style={{
+                borderRadius: 12,
+                background: "var(--mantine-color-red-0)",
+                border: "1px solid var(--mantine-color-red-2)",
+              }}
+            >
+              <Group gap={6} mb={6}>
+                <MessageSquareWarning
+                  size={14}
+                  color="var(--mantine-color-red-7)"
+                />
+                <Text fz="12.5px" fw={700} c="red.8">
+                  Describe the problem for the customer
+                </Text>
+              </Group>
+              <Textarea
+                placeholder="e.g. The commercial invoice is missing the HS code and the totals don't match the packing list."
+                value={note}
+                onChange={(e) => onNote(e.currentTarget.value)}
+                autosize
+                minRows={2}
+                radius="md"
+                size="sm"
+                autoFocus
+              />
+              <Group justify="flex-end" gap={8} mt={8}>
+                <Button
+                  size="compact-sm"
+                  variant="subtle"
+                  color="gray"
+                  radius="md"
+                  disabled={busy}
+                  onClick={() => onToggleQuery(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  size="compact-sm"
+                  color="red"
+                  radius="md"
+                  leftSection={<MessageSquareWarning size={14} />}
+                  loading={busy}
+                  disabled={!note.trim()}
+                  onClick={onQuery}
+                >
+                  Send query to customer
+                </Button>
+              </Group>
+            </Box>
+          )}
+        </Box>
+      )}
+    </Card>
+  );
+}

apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx

@@ -22,7 +22,7 @@ import {
   LayoutGrid,
   Package,
 } from "lucide-react";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -84,6 +84,9 @@ export default function CustomerDetailPage() {
       enabled: Boolean(id),
     }),
   );
+  const approveMutation = useMutation(
+    api.customers.setCompanyStatus.mutationOptions(),
+  );
   const bookingsQuery = useQuery(
     api.customers.bookings.queryOptions({
       input: { id: id ?? "" },
@@ -398,6 +401,21 @@ export default function CustomerDetailPage() {
           <Group gap="xs" wrap="nowrap">
             <CompanyTypeBadge type={company.type} />
             <CompanyStatusBadge status={company.status} />
+            {company.status === "pending" && (
+              <Button
+                size="xs"
+                color="green"
+                loading={approveMutation.isPending}
+                onClick={() =>
+                  approveMutation.mutate({
+                    companyId: company.id,
+                    status: "active",
+                  })
+                }
+              >
+                Approve
+              </Button>
+            )}
           </Group>
         }
       />

apps/edr-freight-web/backoffice/src/pages/fleet/FleetResourcePage.tsx

@@ -360,7 +360,7 @@ const FleetResourcePage = () => {
               {config.subtitle}
             </Text>
           </div>
-          <Button leftSection={<Plus size={16} />} onClick={() => {
+          <Button leftSection={<Plus size={16} />} styles={{ label: { fontWeight: 500 } }} onClick={() => {
             setEditing(null);
             setFormOpen(true);
           }}>
@@ -391,7 +391,7 @@ const FleetResourcePage = () => {
                               size="xs"
                               radius="md"
                               variant={filter.value === option.value ? "filled" : "outline"}
-                              color="green"
+                              styles={{ label: { fontWeight: 500 } }}
                               onClick={() => {
                                 setListFilterValues((prev) => ({
                                   ...prev,
@@ -417,7 +417,7 @@ const FleetResourcePage = () => {
                           size="xs"
                           radius="md"
                           variant={statusFilter === option.value ? "filled" : "outline"}
-                          color="green"
+                          styles={{ label: { fontWeight: 500 } }}
                           onClick={() => setStatusFilter(option.value)}
                         >
                           {option.label}

apps/edr-freight-web/backoffice/src/pages/fleet/config/vehicles.ts

@@ -47,7 +47,10 @@ export const vehiclesConfig: FleetResourceConfig = {
   ],
   searchKeys: ["plateNumber", "registrationNumber", "manufacturer", "model", "vehicleType", "status"],
   columns: [
+    { id: "code", header: "Code", accessorKey: "code", format: "code", size: 110 },
     { id: "plateNumber", header: "Plate Number", accessorKey: "plateNumber", format: "code", size: 130 },
+    { id: "powerPlateNo", header: "Power Plate No", accessorKey: "powerPlateNo", format: "code", size: 140 },
+    { id: "trailerPlateNo", header: "Trailer Plate No", accessorKey: "trailerPlateNo", format: "code", size: 140 },
     { id: "registrationNumber", header: "Registration", accessorKey: "registrationNumber", format: "code", size: 140 },
     { id: "manufacturer", header: "Manufacturer", accessorKey: "manufacturer", format: "code", size: 140 },
     { id: "model", header: "Model", accessorKey: "model", format: "code", size: 120 },
@@ -59,7 +62,10 @@ export const vehiclesConfig: FleetResourceConfig = {
     { id: "status", header: "Status", accessorKey: "status", format: "statusBadge", size: 100 },
   ],
   formFields: [
-    { name: "plateNumber", label: "Plate Number", type: "text", required: true },
+    { name: "code", label: "Code", type: "text" },
+    { name: "plateNumber", label: "Power Plate No", type: "text", required: true },
+    // { name: "powerPlateNo", label: "Power Plate No", type: "text" },
+    { name: "trailerPlateNo", label: "Trailer Plate No", type: "text" },
     { name: "vehicleType", label: "Vehicle Type", type: "select", required: true, options: VEHICLE_TYPE_OPTIONS },
     { name: "manufacturer", label: "Manufacturer", type: "text", required: true },
     { name: "model", label: "Model", type: "text", required: true },
@@ -70,7 +76,10 @@ export const vehiclesConfig: FleetResourceConfig = {
     { name: "description", label: "Description", type: "textarea" },
   ],
   emptyValues: {
+    code: "",
     plateNumber: "",
+    powerPlateNo: "",
+    trailerPlateNo: "",
     vehicleType: "TRUCK",
     manufacturer: "",
     model: "",

apps/edr-freight-web/backoffice/src/pages/ruleEngine/CargoTypesPage.tsx

@@ -35,6 +35,7 @@ import { canAccessRuleEngineResource } from "@/lib/permissions";
 import RuleEngineFormDialog from "@/components/ruleEngine/RuleEngineFormDialog";
 import {
   getRuleEngineResource,
+  RULE_ENGINE_SELECT_NONE,
   type FormFieldDef,
 } from "@/pages/ruleEngine/config/resources";
 import {
@@ -52,6 +53,8 @@ interface CargoNode extends RuleEngineRecord {
   parentGroupId?: string | null;
   showFreeTextBox?: boolean;
   requiresDirectorApproval?: boolean;
+  /** How this cargo is measured (PER_TON / PER_ITEM); null for groups/unset. */
+  unitOfMeasure?: string | null;
   isActive?: boolean;
   displayOrder?: number;
 }
@@ -62,6 +65,21 @@ const orderOf = (n: CargoNode): number => Number(n.displayOrder ?? 0);
 /** Create/edit form fields. Parent is set from the current page, never picked. */
 const FORM_FIELDS: FormFieldDef[] = [
   { name: "cargoTypeName", label: "Cargo type name", type: "text", required: true },
+  {
+    // How this cargo is measured. Optional — leave "None" for grouping
+    // categories; set it on the actual commodities so bookings ask for the
+    // right amount (estimated tons vs. total item count).
+    name: "unitOfMeasure",
+    label: "Unit of measure",
+    type: "select",
+    optional: true,
+    placeholder: "Select unit (optional)",
+    options: [
+      { label: "None", value: RULE_ENGINE_SELECT_NONE },
+      { label: "Per ton (bulk)", value: "PER_TON" },
+      { label: "Per item (break-bulk)", value: "PER_ITEM" },
+    ],
+  },
   { name: "showFreeTextBox", label: "Show free text box", type: "boolean" },
   { name: "requiresDirectorApproval", label: "Requires director approval", type: "boolean" },
   { name: "isActive", label: "Active", type: "boolean" },
@@ -469,6 +487,13 @@ function CargoRow({
                   </Badge>
                 </Tooltip>
               ) : null}
+              {node.unitOfMeasure ? (
+                <Tooltip label="How bookings measure this cargo" withArrow>
+                  <Badge size="xs" variant="light" color="teal" radius="sm">
+                    {node.unitOfMeasure === "PER_ITEM" ? "Per item" : "Per ton"}
+                  </Badge>
+                </Tooltip>
+              ) : null}
               {inactive ? (
                 <Badge size="xs" variant="light" color="gray" radius="sm">
                   Inactive

apps/edr-freight-web/backoffice/src/pages/ruleEngine/RuleEngineResourcePage.tsx

@@ -29,6 +29,7 @@ import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import { useRuleEngineViewMode } from "@/components/ruleEngine/useRuleEngineViewMode";
 import {
     useApprovalChain,
+    useCargoLeafOptions,
     useCargoTypeParentOptions,
     useContainerTypeOptions,
     useLiveRateOptions,
@@ -144,12 +145,17 @@ const RuleEngineResourcePage = () => {
   const usesContainerTypeField = Boolean(
     config?.formFields.some((f) => f.name === "containerTypeId"),
   );
+  const usesCargoTypeField = Boolean(
+    config?.formFields.some((f) => f.name === "cargoTypeId"),
+  );
   const usesLiveRateField = Boolean(
     config?.formFields.some((f) => f.name === "rateId"),
   );
 
   const { data: cargoParentOptions, isLoading: cargoParentOptionsLoading } =
     useCargoTypeParentOptions(editingId, config?.slug === "cargo-types");
+  const { data: cargoLeafOptions, isLoading: cargoLeafOptionsLoading } =
+    useCargoLeafOptions(usesCargoTypeField);
   const { data: containerTypeOptions, isLoading: containerTypeOptionsLoading } =
     useContainerTypeOptions(config?.slug === "rates", usesContainerTypeField);
   const { data: liveRateOptions, isLoading: liveRateOptionsLoading } =
@@ -173,6 +179,13 @@ const RuleEngineResourcePage = () => {
           options: containerTypeOptions ?? [],
         };
       }
+      if (field.name === "cargoTypeId") {
+        return {
+          ...field,
+          type: "select" as const,
+          options: cargoLeafOptions ?? [],
+        };
+      }
       if (field.name === "rateId") {
         return {
           ...field,
@@ -182,7 +195,7 @@ const RuleEngineResourcePage = () => {
       }
       return field;
     });
-  }, [config, cargoParentOptions, containerTypeOptions, liveRateOptions]);
+  }, [config, cargoParentOptions, cargoLeafOptions, containerTypeOptions, liveRateOptions]);
 
   const rows = data?.data ?? [];
   const meta = data?.meta;
@@ -316,7 +329,15 @@ const RuleEngineResourcePage = () => {
   const handleFormSubmit = (values: Record<string, unknown>) => {
     let payload = values;
     if (config.slug === "rates") {
-      payload = { ...values, currency: "USD" };
+      // Base-freight categories have no surcharge trigger field — the engine
+      // treats them as ALWAYS. Surcharges (Applies to = Other) keep their
+      // chosen trigger.
+      const isSurcharge = values.appliesTo === "OTHER";
+      payload = {
+        ...values,
+        currency: "USD",
+        trigger: isSurcharge ? values.trigger : "ALWAYS",
+      };
     } else if (config.slug === "priority-configs") {
       // Label is required by the backend but hidden in the UI for now.
       payload = { ...values, label: String(Date.now()) };
@@ -476,6 +497,7 @@ const RuleEngineResourcePage = () => {
         selectOptionsLoading={
           (config.slug === "cargo-types" && cargoParentOptionsLoading) ||
           (usesContainerTypeField && containerTypeOptionsLoading) ||
+          (usesCargoTypeField && cargoLeafOptionsLoading) ||
           (usesLiveRateField && liveRateOptionsLoading)
         }
         positionOptions={!editing ? createPositionOptions : undefined}

apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts

@@ -38,6 +38,12 @@ export interface FormFieldDef {
   disabled?: boolean;
   /** Hide this field when another field currently equals one of these values. */
   hideWhen?: { field: string; equals: string[] };
+  /**
+   * Show this field ONLY when another field currently equals one of these
+   * values (inverse of hideWhen). When both are set, the field must satisfy
+   * showWhen and not match hideWhen.
+   */
+  showWhen?: { field: string; equals: string[] };
 }
 
 export interface RuleEngineOrderConfig {
@@ -81,38 +87,38 @@ const APPROVAL_ROLES = [
   { label: "CEO", value: "CEO" },
 ];
 
-const SURCHARGE_TRIGGERS = [
-  { label: "Hazardous cargo", value: "CARGO_FLAG_HAZARDOUS" },
-  { label: "Reefer cargo", value: "CARGO_FLAG_REEFER" },
-  { label: "VGM exceeds limit", value: "VGM_EXCEEDS_LIMIT" },
-  { label: "Shipping line mapped", value: "SHIPPING_LINE_MAPPED" },
-  { label: "Consolidation enabled", value: "CONSOLIDATION_ENABLED" },
+/**
+ * Friendly, admin-facing rate categories. Choosing one drives which fields the
+ * Rate form shows (see the `rates` resource below). Base-freight categories
+ * carry a trade direction + container/bulk scope; OTHER is for surcharges.
+ */
+const RATE_APPLIES_TO = [
+  { label: "Bulk (base freight)", value: "BULK" },
+  { label: "Container (base freight)", value: "CONTAINER" },
+  { label: "Intercity (base freight)", value: "INTERCITY" },
+  { label: "First mile", value: "FIRST_MILE" },
+  { label: "Last mile", value: "LAST_MILE" },
+  { label: "Other (surcharge)", value: "OTHER" },
 ];
 
-const RATE_TYPES = [
-  "CONTAINER_IMPORT",
-  "CONTAINER_EXPORT",
-  "BULK_IMPORT",
-  "BULK_EXPORT",
-  "INTERCITY_BULK",
-  "INTERCITY_CONTAINER",
-  "FIRST_MILE",
-  "LAST_MILE",
-  "DEMURRAGE",
-  "LASHING",
-  "DOUBLE_HANDLING",
-  "CONTAINER_WITH_RETURN",
-  "CANCELLATION_FEE",
-  "OVERWEIGHT_PER_TON",
-  "HAZARD_SURCHARGE",
-  "REEFER_SURCHARGE",
-  "PIL_EXTRA_FEE",
-].map((v) => ({ label: v.replace(/_/g, " "), value: v }));
+/** Surcharge triggers — only relevant when Applies to = Other. */
+const RATE_TRIGGERS = [
+  { label: "Hazardous cargo", value: "HAZARDOUS" },
+  { label: "Overweight (per excess ton)", value: "OVERWEIGHT" },
+  { label: "Reefer cargo", value: "REEFER" },
+  { label: "Shipping line mapped", value: "SHIPPING_LINE" },
+  { label: "Consolidation", value: "CONSOLIDATION" },
+  { label: "Cancellation", value: "CANCELLATION" },
+  { label: "Demurrage", value: "DEMURRAGE" },
+  { label: "Shipping line extra fee (PIL)", value: "PIL_EXTRA_FEE" },
+];
 
-const RATE_UNITS = ["PER_WAGON", "PER_TON", "PER_CONTAINER", "PER_KM", "FLAT"].map((v) => ({
-  label: v.replace(/_/g, " "),
-  value: v,
-}));
+const RATE_UNITS =["PER_WAGON", "PER_TON", "PER_CONTAINER", "PER_KM", "PER_INVOICE", "FLAT"].map(
+  (v) => ({
+    label: v.replace(/_/g, " "),
+    value: v,
+  }),
+);
 
 const CURRENCIES = [
   { label: "USD", value: "USD" },
@@ -302,38 +308,6 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
       { name: "isActive", label: "Active", type: "boolean" },
     ],
   },
-  {
-    slug: "surcharge-types",
-    label: "Surcharge Types",
-    category: "configuration",
-    subtitle: "Auto-applied surcharge definitions",
-    searchPlaceholder: "Search surcharge types...",
-    columns: [
-      codeColumn("code"),
-      { id: "label", header: "Label", accessorKey: "label" },
-      { id: "triggerCondition", header: "Trigger", accessorKey: "triggerCondition" },
-      { id: "rateId", header: "Rate", accessorKey: "rate", format: "rateLabel" },
-      activeColumn,
-    ],
-    formFields: [
-      { name: "label", label: "Label", type: "text", required: true },
-      {
-        name: "triggerCondition",
-        label: "Trigger condition",
-        type: "select",
-        required: true,
-        options: SURCHARGE_TRIGGERS,
-      },
-      {
-        name: "rateId",
-        label: "Live rate",
-        type: "select",
-        required: true,
-        placeholder: "Select a LIVE rate",
-      },
-      { name: "isActive", label: "Active", type: "boolean" },
-    ],
-  },
   {
     slug: "weight-limit-rules",
     label: "Weight Limit Rules",
@@ -424,32 +398,64 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
     slug: "rates",
     label: "Rates",
     category: "rules",
-    cardTitleKey: "rateType",
+    cardTitleKey: "appliesTo",
     cardSubtitleKey: "currency",
     subtitle: "Freight rates and approval workflow",
     searchPlaceholder: "Search rates by type or status...",
     columns: [
-      { id: "rateType", header: "Type", accessorKey: "rateType", format: "code" },
-      { id: "currency", header: "Currency", accessorKey: "currency" },
+      { id: "appliesTo", header: "Applies to", accessorKey: "appliesTo", format: "code" },
+      { id: "trigger", header: "Trigger", accessorKey: "trigger" },
       { id: "rateValue", header: "Value", accessorKey: "rateValue", format: "number" },
       { id: "rateUnit", header: "Unit", accessorKey: "rateUnit" },
       { id: "status", header: "Status", accessorKey: "status", format: "rateStatus" },
       { id: "effectiveFrom", header: "From", accessorKey: "effectiveFrom", format: "date" },
     ],
     formFields: [
-      { name: "rateType", label: "Rate type", type: "select", required: true, options: RATE_TYPES },
+      {
+        name: "appliesTo",
+        label: "Applies to",
+        type: "select",
+        required: true,
+        options: RATE_APPLIES_TO,
+        description:
+          "Pick what this rate is for. Bulk/Container/Intercity are base freight; Other is an auto-applied surcharge.",
+      },
+      // ── Surcharge trigger — only when Applies to = Other ──────────────────
+      {
+        name: "trigger",
+        label: "Surcharge trigger",
+        type: "select",
+        required: true,
+        options: RATE_TRIGGERS,
+        placeholder: "What makes this surcharge apply?",
+        showWhen: { field: "appliesTo", equals: ["OTHER"] },
+      },
+      // ── Trade direction — Bulk & Container only (intercity is domestic) ───
+      {
+        name: "tradeDirection",
+        label: "Trade direction",
+        type: "select",
+        required: true,
+        options: TRADE_DIRECTIONS.filter((d) => d.value !== "BOTH"),
+        showWhen: { field: "appliesTo", equals: ["BULK", "CONTAINER"] },
+      },
+      // ── Container type — Container & Intercity ────────────────────────────
       {
         name: "containerTypeId",
         label: "Container type",
         type: "select",
         optional: true,
         placeholder: "Select container type (optional)",
+        showWhen: { field: "appliesTo", equals: ["CONTAINER", "INTERCITY"] },
       },
+      // ── Bulk cargo (leaf commodity) — Bulk & Intercity ───────────────────
       {
-        name: "tradeDirection",
-        label: "Trade direction",
+        name: "cargoTypeId",
+        label: "Bulk cargo type",
         type: "select",
-        options: TRADE_DIRECTIONS,
+        optional: true,
+        placeholder: "Select bulk commodity (optional)",
+        showWhen: { field: "appliesTo", equals: ["BULK", "INTERCITY"] },
       },
       { name: "rateValue", label: "Rate value", type: "number", required: true },
       { name: "rateUnit", label: "Rate unit", type: "select", required: true, options: RATE_UNITS },

apps/edr-freight-web/backoffice/src/pages/warehouses/ArrivalQueuePage.tsx

@@ -1,197 +1,271 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Fragment, useState } from 'react';
 import {
   Badge,
   Button,
   Card,
+  Container,
   Group,
+  Loader,
+  Stack,
+  Table,
   Text,
 } from '@mantine/core';
-import { ClipboardList, Eye, PackageOpen, Truck } from 'lucide-react';
-import { DataTable, type ColumnDef } from '@edr/ui-common';
+import { ChevronDown, ChevronRight, PackageOpen, Truck } from 'lucide-react';
 
-import { PageContainer, PageHeader } from '@/components/page';
+import { PageHeader } from '@/components/page';
+import Breadcrumbs from '@/components/ui/Breadcrumbs';
 import {
-  InspectionReportModal,
   VisualEmptyState,
+  WarehouseHero,
   formatDate,
+  formatNumber,
 } from '@/components/warehouses';
-import { useMutation, useQuery } from '@tanstack/react-query';
-
-import { api } from '@/services/api';
+import {
+  useAutoUnloadArrivedBookings,
+  useImportArriveQueue,
+  useImportTrainItems,
+} from '@/hooks/useWarehouses';
 import { useToast } from '@/hooks/use-toast';
-import type { ArrivalQueueItem } from '@/types/warehouse';
+import type { AutoUnloadArrivedResult, ImportTrain, ImportTrainItem } from '@/types/warehouse';
 
-function inspectionBadge(status: string | null) {
-  if (!status) return <Badge variant="light" color="gray" size="sm">Not inspected</Badge>;
-  const color = status === 'PASSED' ? 'edr-green' : status === 'FAILED' ? 'red' : 'orange';
-  return <Badge variant="light" color={color} size="sm">{status.replace(/_/g, ' ')}</Badge>;
-}
+const getErrorMessage = (error: unknown) => {
+  if (error && typeof error === 'object' && 'response' in error) {
+    const response = (error as { response?: { data?: { message?: unknown } } }).response;
+    const message = response?.data?.message;
+    if (Array.isArray(message)) return message.join(', ');
+    if (typeof message === 'string') return message;
+  }
+  return error instanceof Error ? error.message : undefined;
+};
 
-/** Batch 4.5 — arrived bookings awaiting unload / inspection. */
-export default function ArrivalQueuePage() {
-  const navigate = useNavigate();
-  const { toast } = useToast();
-  const { data, isLoading } = useQuery(api.warehouses.arrivalQueue.queryOptions());
-  const autoUnload = useMutation(api.warehouses.autoUnloadArrived.mutationOptions());
-  const unloadOne = useMutation(api.warehouses.unloadBooking.mutationOptions());
-  const [inspectInventoryId, setInspectInventoryId] = useState<string | null>(null);
+function ImportTrainDetailRows({ scheduleId }: { scheduleId: string }) {
+  const { data: items = [], isLoading } = useImportTrainItems(scheduleId);
 
-  const items = data ?? [];
+  if (isLoading) {
+    return (
+      <Group justify="center" py="md">
+        <Loader size="sm" />
+      </Group>
+    );
+  }
 
-  const handleAutoUnload = async () => {
-    try {
-      const r = await autoUnload.mutateAsync();
-      toast({
-        title: 'Auto-unload complete',
-        description: `Processed ${r.processedCount}, skipped ${r.skippedCount}, failed ${r.failedCount}.`,
-      });
-    } catch {
-      toast({ variant: 'destructive', title: 'Auto-unload failed' });
-    }
-  };
-
-  const handleUnloadOne = async (item: ArrivalQueueItem) => {
-    try {
-      await unloadOne.mutateAsync({ bookingId: item.bookingId });
-      toast({ title: 'Booking unloaded', description: `${item.bookingReference} stored as RECEIVED.` });
-    } catch {
-      toast({ variant: 'destructive', title: 'Unload failed' });
-    }
-  };
-
-  const columns: ColumnDef<ArrivalQueueItem>[] = [
-    {
-      id: 'booking',
-      header: 'Booking',
-      cell: ({ row }) => (
-        <Text fw={600} size="sm">
-          {row.original.bookingReference}
-        </Text>
-      ),
-    },
-    { id: 'customer', header: 'Customer', cell: ({ row }) => row.original.customer ?? '—' },
-    {
-      id: 'cargo',
-      header: 'Cargo / Container',
-      cell: ({ row }) => row.original.container ?? row.original.cargo ?? '—',
-    },
-    {
-      id: 'arrival',
-      header: 'Arrival',
-      cell: ({ row }) => <Text size="xs">{formatDate(row.original.arrivalDate)}</Text>,
-    },
-    { id: 'facility', header: 'Facility', cell: ({ row }) => row.original.facility ?? '—' },
-    { id: 'warehouse', header: 'Warehouse', cell: ({ row }) => row.original.warehouse ?? '—' },
-    { id: 'yard', header: 'Yard', cell: ({ row }) => row.original.yard ?? '—' },
-    { id: 'zone', header: 'Zone', cell: ({ row }) => row.original.zone ?? '—' },
-    {
-      id: 'status',
-      header: 'Status',
-      cell: ({ row }) =>
-        row.original.unloaded ? (
-          <Badge variant="light" color="edr-green" size="sm">
-            {row.original.currentStatus ?? 'RECEIVED'}
-          </Badge>
-        ) : (
-          <Badge variant="light" color="orange" size="sm">
-            Not unloaded
-          </Badge>
-        ),
-    },
-    {
-      id: 'inspection',
-      header: 'Inspection',
-      cell: ({ row }) => inspectionBadge(row.original.inspectionStatus),
-    },
-    {
-      id: 'actions',
-      header: '',
-      cell: ({ row }) => {
-        const item = row.original;
-        return (
-          <Group gap="xs" justify="flex-end" wrap="nowrap" onClick={(e) => e.stopPropagation()}>
-            {!item.unloaded && (
-              <Button
-                size="compact-xs"
-                variant="light"
-                leftSection={<Truck size={14} />}
-                loading={unloadOne.isPending}
-                onClick={() => handleUnloadOne(item)}
-              >
-                Unload
-              </Button>
-            )}
-            {item.inventoryId && (
-              <Button
-                size="compact-xs"
-                variant="light"
-                color="edr-green"
-                leftSection={<ClipboardList size={14} />}
-                onClick={() => setInspectInventoryId(item.inventoryId)}
-              >
-                Inspect
-              </Button>
-            )}
-            {item.inventoryId && (
-              <Button
-                size="compact-xs"
-                variant="subtle"
-                color="gray"
-                leftSection={<Eye size={14} />}
-                onClick={() => navigate('/dashboard/warehouse-inventory')}
-              >
-                Inventory
-              </Button>
-            )}
-          </Group>
-        );
-      },
-    },
-  ];
+  if (items.length === 0) {
+    return (
+      <Text c="dimmed" ta="center" py="md" size="sm">
+        No assigned bookings found for this train.
+      </Text>
+    );
+  }
 
   return (
-    <PageContainer>
-      <PageHeader
-        title="Arrival / Unloading Queue"
-        subtitle="Arrived bookings ready to unload, store and inspect."
-        action={
-          <Button
-            leftSection={<PackageOpen size={16} />}
-            loading={autoUnload.isPending}
-            onClick={handleAutoUnload}
-          >
-            Auto Unload Arrived Bookings
-          </Button>
-        }
-      />
-
-      <Card>
-        <Text fw={600} mb="md">
-          {items.length} arrived booking(s)
-        </Text>
-
-        {!isLoading && items.length === 0 ? (
-          <VisualEmptyState
-            variant="container"
-            title="No arrived bookings"
-            description="Bookings in transit that arrive appear here for unloading and inspection."
-          />
-        ) : (
-          <DataTable
-            columns={columns}
-            data={items}
-            status={isLoading ? 'loading' : 'success'}
-            containerClassName="border-0 shadow-none"
-          />
-        )}
-      </Card>
-
-      <InspectionReportModal
-        opened={Boolean(inspectInventoryId)}
-        onClose={() => setInspectInventoryId(null)}
-        inventoryId={inspectInventoryId}
-      />
-    </PageContainer>
+    <Table highlightOnHover verticalSpacing="xs">
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Booking</Table.Th>
+          <Table.Th>Customer</Table.Th>
+          <Table.Th>Container</Table.Th>
+          <Table.Th>Cargo</Table.Th>
+          <Table.Th>Weight</Table.Th>
+          <Table.Th>Arrival</Table.Th>
+          <Table.Th>Status</Table.Th>
+          <Table.Th>Pickup</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {items.map((item: ImportTrainItem) => (
+          <Table.Tr key={item.bookingId}>
+            <Table.Td>
+              <Text size="sm" fw={600}>
+                {item.bookingReference ?? item.bookingId.slice(0, 8)}
+              </Text>
+            </Table.Td>
+            <Table.Td>{item.customerName ?? '-'}</Table.Td>
+            <Table.Td>{item.containerNumber ?? '-'}</Table.Td>
+            <Table.Td>{item.cargoType ?? '-'}</Table.Td>
+            <Table.Td>{formatNumber(item.weight)}</Table.Td>
+            <Table.Td>{formatDate(item.arrivalTime)}</Table.Td>
+            <Table.Td>
+              <Badge
+                variant="light"
+                color={item.currentStatus === 'UNLOADED' ? 'green' : 'orange'}
+                size="sm"
+              >
+                {item.currentStatus ?? 'PENDING'}
+              </Badge>
+            </Table.Td>
+            <Table.Td>{item.pickupOption.replace(/_/g, ' ')}</Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
+  );
+}
+
+/** Arrived import trains awaiting unload into warehouse inventory. */
+export default function ArrivalQueuePage() {
+  const { toast } = useToast();
+  const { data: trains = [], isLoading } = useImportArriveQueue();
+  const autoUnload = useAutoUnloadArrivedBookings();
+  const [openScheduleId, setOpenScheduleId] = useState<string | null>(null);
+  const [busyScheduleId, setBusyScheduleId] = useState<string | null>(null);
+
+  const unloadTrain = async (train: ImportTrain) => {
+    setBusyScheduleId(train.scheduleId);
+    try {
+      const res = (await autoUnload.mutateAsync(train.scheduleId)) as {
+        data: AutoUnloadArrivedResult;
+      };
+      const result = res.data;
+      const details = [
+        result.skippedCount ? `${result.skippedCount} skipped` : '',
+        result.failedCount ? `${result.failedCount} failed` : '',
+      ]
+        .filter(Boolean)
+        .join(', ');
+
+      toast({
+        title: `${result.unloadedCount} booking(s) unloaded`,
+        description: details || `${train.trainNumber ?? 'Train'} moved into warehouse inventory.`,
+      });
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Auto unload failed',
+        description: getErrorMessage(error),
+      });
+    } finally {
+      setBusyScheduleId(null);
+    }
+  };
+
+  return (
+    <Container size="xxl" py="lg">
+      <Breadcrumbs items={[{ label: 'Arrival queue' }]} />
+
+      <Stack gap="lg" mt="sm">
+        <PageHeader
+          title="Arrival / Unloading Queue"
+          subtitle="Arrived import trains ready to unload assigned bookings into warehouse inventory."
+        />
+
+        <WarehouseHero
+          variant="container"
+          secondaryVariant="warehouse"
+          title="Arrival / Unloading Queue"
+          subtitle="Arrived import trains ready to unload assigned bookings into warehouse inventory."
+        />
+
+        <Card withBorder radius="md" padding="lg">
+          <Group justify="space-between" mb="md">
+            <Text fw={600}>{trains.length} arrived import train(s)</Text>
+            <Text size="sm" c="dimmed">
+              Open a train to review assigned bookings, then auto unload it.
+            </Text>
+          </Group>
+
+          {isLoading ? (
+            <Group justify="center" py="xl">
+              <Loader />
+            </Group>
+          ) : trains.length === 0 ? (
+            <VisualEmptyState
+              variant="container"
+              title="No arrived import trains"
+              description="Import trains appear here once their train schedule status is ARRIVED."
+            />
+          ) : (
+            <Table.ScrollContainer minWidth={1150}>
+              <Table verticalSpacing="sm" highlightOnHover striped>
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>Train</Table.Th>
+                    <Table.Th>Route</Table.Th>
+                    <Table.Th>Origin</Table.Th>
+                    <Table.Th>Destination</Table.Th>
+                    <Table.Th>Arrival</Table.Th>
+                    <Table.Th ta="center">Bookings</Table.Th>
+                    <Table.Th ta="center">Containers</Table.Th>
+                    <Table.Th ta="center">Cargoes</Table.Th>
+                    <Table.Th>Status</Table.Th>
+                    <Table.Th ta="right">Actions</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {trains.map((train: ImportTrain) => {
+                    const isOpen = openScheduleId === train.scheduleId;
+                    return (
+                      <Fragment key={train.scheduleId}>
+                        <Table.Tr>
+                          <Table.Td>
+                            <Stack gap={0}>
+                              <Text size="sm" fw={700}>
+                                {train.trainNumber ?? '-'}
+                              </Text>
+                              <Text size="xs" c="dimmed">
+                                {train.scheduleId.slice(0, 8)}
+                              </Text>
+                            </Stack>
+                          </Table.Td>
+                          <Table.Td>{train.route ?? '-'}</Table.Td>
+                          <Table.Td>{train.origin ?? '-'}</Table.Td>
+                          <Table.Td>{train.destination ?? '-'}</Table.Td>
+                          <Table.Td>
+                            <Text size="xs">{formatDate(train.arrivalTime)}</Text>
+                          </Table.Td>
+                          <Table.Td ta="center">{train.totalBookings}</Table.Td>
+                          <Table.Td ta="center">{train.totalContainers}</Table.Td>
+                          <Table.Td ta="center">{train.totalCargoes}</Table.Td>
+                          <Table.Td>
+                            <Badge variant="light" color="teal" size="sm">
+                              {train.status}
+                            </Badge>
+                          </Table.Td>
+                          <Table.Td>
+                            <Group gap="xs" justify="flex-end" wrap="nowrap">
+                              <Button
+                                size="compact-xs"
+                                variant="light"
+                                leftSection={
+                                  isOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />
+                                }
+                                onClick={() => setOpenScheduleId(isOpen ? null : train.scheduleId)}
+                              >
+                                Open
+                              </Button>
+                              <Button
+                                size="compact-xs"
+                                color="orange"
+                                leftSection={
+                                  busyScheduleId === train.scheduleId ? (
+                                    <PackageOpen size={14} />
+                                  ) : (
+                                    <Truck size={14} />
+                                  )
+                                }
+                                loading={busyScheduleId === train.scheduleId}
+                                onClick={() => unloadTrain(train)}
+                              >
+                                Auto Unload
+                              </Button>
+                            </Group>
+                          </Table.Td>
+                        </Table.Tr>
+                        {isOpen && (
+                          <Table.Tr>
+                            <Table.Td colSpan={10} bg="var(--mantine-color-gray-0)">
+                              <ImportTrainDetailRows scheduleId={train.scheduleId} />
+                            </Table.Td>
+                          </Table.Tr>
+                        )}
+                      </Fragment>
+                    );
+                  })}
+                </Table.Tbody>
+              </Table>
+            </Table.ScrollContainer>
+          )}
+        </Card>
+      </Stack>
+    </Container>
   );
 }

apps/edr-freight-web/backoffice/src/pages/warehouses/InventoryInquiryPage.tsx

@@ -3,35 +3,30 @@ import { Button, Card, Center, Group, Loader, Select, Stack, TextInput } from '@
 import { Search } from 'lucide-react';
 
 import { PageContainer, PageHeader } from '@/components/page';
-import { useQuery } from '@tanstack/react-query';
-
-import { VisualEmptyState, WarehouseInquiryTable, inventoryStatusOptions } from '@/components/warehouses';
-import { api } from '@/services/api';
-import type { InventoryInquiryFilter, InventoryStatus } from '@/types/warehouse';
+import {
+  InventoryInquiryDetailModal,
+  VisualEmptyState,
+  WarehouseInquiryTable,
+  inventoryStatusOptions,
+} from '@/components/warehouses';
+import {
+  useAllWarehouseYards,
+  useAllWarehouseZones,
+  useInventoryInquiry,
+  useWarehouses,
+} from '@/hooks/useWarehouses';
+import type { InventoryInquiryFilter, InventoryInquiryResult, InventoryStatus } from '@/types/warehouse';
 
 export default function InventoryInquiryPage() {
   const [draft, setDraft] = useState<InventoryInquiryFilter>({});
   const [applied, setApplied] = useState<InventoryInquiryFilter>({});
+  const [viewResult, setViewResult] = useState<InventoryInquiryResult | null>(null);
 
-  const warehousesQuery = useQuery(
-    api.warehouses.list.queryOptions({ input: {} }),
-  );
-  const yardsQuery = useQuery(
-    api.warehouses.listYards.queryOptions({
-      input: { warehouseId: draft.warehouseId ?? '' },
-      enabled: Boolean(draft.warehouseId),
-    }),
-  );
-  const zonesQuery = useQuery(
-    api.warehouses.listZones.queryOptions({
-      input: { yardId: draft.yardId ?? '' },
-      enabled: Boolean(draft.yardId),
-    }),
-  );
+  const warehousesQuery = useWarehouses();
+  const yardsQuery = useAllWarehouseYards();
+  const zonesQuery = useAllWarehouseZones();
 
-  const { data, isFetching } = useQuery(
-    api.warehouses.inquiry.queryOptions({ input: { filter: applied } }),
-  );
+  const { data, isFetching } = useInventoryInquiry(applied);
   const results = data ?? [];
 
   const warehouseOptions = useMemo(
@@ -39,15 +34,39 @@ export default function InventoryInquiryPage() {
     [warehousesQuery.data],
   );
   const yardOptions = useMemo(
-    () => (yardsQuery.data ?? []).map((y) => ({ value: y.id, label: `${y.name} (${y.code})` })),
-    [yardsQuery.data],
+    () =>
+      (yardsQuery.data ?? [])
+        .filter((y) => !draft.warehouseId || y.warehouseId === draft.warehouseId)
+        .map((y) => ({ value: y.id, label: `${y.name} (${y.code})` })),
+    [draft.warehouseId, yardsQuery.data],
   );
   const zoneOptions = useMemo(
-    () => (zonesQuery.data ?? []).map((z) => ({ value: z.id, label: `${z.name} (${z.code})` })),
-    [zonesQuery.data],
+    () => {
+      const visibleYardIds = new Set(
+        (yardsQuery.data ?? [])
+          .filter((y) => !draft.warehouseId || y.warehouseId === draft.warehouseId)
+          .map((y) => y.id),
+      );
+      return (zonesQuery.data ?? [])
+        .filter((z) => {
+          if (draft.yardId) return z.yardId === draft.yardId;
+          if (draft.warehouseId) return visibleYardIds.has(z.yardId);
+          return true;
+        })
+        .map((z) => ({ value: z.id, label: `${z.name} (${z.code})` }));
+    },
+    [draft.warehouseId, draft.yardId, yardsQuery.data, zonesQuery.data],
   );
 
-  const runSearch = () => setApplied(draft);
+  const normalizeDraft = (filter: InventoryInquiryFilter): InventoryInquiryFilter => ({
+    ...filter,
+    bookingReference: filter.bookingReference?.trim() || undefined,
+    containerNumber: filter.containerNumber?.trim() || undefined,
+    cargoType: filter.cargoType?.trim() || undefined,
+    goodsName: filter.goodsName?.trim() || undefined,
+  });
+
+  const runSearch = () => setApplied(normalizeDraft(draft));
   const reset = () => {
     setDraft({});
     setApplied({});
@@ -60,101 +79,109 @@ export default function InventoryInquiryPage() {
         subtitle="Locate any cargo, container or goods inside the warehouse network."
       />
 
-      <Card>
-        <Stack gap="md">
-          <Group gap="sm" wrap="wrap">
-            <TextInput
-              label="Booking number"
-              placeholder="e.g. BKG-00123"
-              value={draft.bookingNumber ?? ''}
-              onChange={(e) => { const v = e.currentTarget.value; setDraft((f) => ({ ...f, bookingNumber: v || undefined })); }}
-              w={200}
-            />
-            <TextInput
-              label="Container number"
-              placeholder="e.g. MSKU1234567"
-              value={draft.containerNumber ?? ''}
-              onChange={(e) => { const v = e.currentTarget.value; setDraft((f) => ({ ...f, containerNumber: v || undefined })); }}
-              w={200}
-            />
-            <TextInput
-              label="Goods name"
-              placeholder="e.g. Coffee"
-              value={draft.goodsName ?? ''}
-              onChange={(e) => { const v = e.currentTarget.value; setDraft((f) => ({ ...f, goodsName: v || undefined })); }}
-              w={180}
-            />
-            <Select
-              label="Warehouse"
-              placeholder="Any"
-              clearable
-              searchable
-              data={warehouseOptions}
-              value={draft.warehouseId ?? null}
-              onChange={(value) =>
-                setDraft((f) => ({ ...f, warehouseId: value ?? undefined, yardId: undefined, zoneId: undefined }))
-              }
-              w={200}
-            />
-            <Select
-              label="Yard"
-              placeholder="Any"
-              clearable
-              searchable
-              disabled={!draft.warehouseId}
-              data={yardOptions}
-              value={draft.yardId ?? null}
-              onChange={(value) => setDraft((f) => ({ ...f, yardId: value ?? undefined, zoneId: undefined }))}
-              w={180}
-            />
-            <Select
-              label="Zone"
-              placeholder="Any"
-              clearable
-              searchable
-              disabled={!draft.yardId}
-              data={zoneOptions}
-              value={draft.zoneId ?? null}
-              onChange={(value) => setDraft((f) => ({ ...f, zoneId: value ?? undefined }))}
-              w={180}
-            />
-            <Select
-              label="Status"
-              placeholder="Any"
-              clearable
-              data={inventoryStatusOptions}
-              value={draft.status ?? null}
-              onChange={(value) => setDraft((f) => ({ ...f, status: (value as InventoryStatus) ?? undefined }))}
-              w={180}
-            />
-          </Group>
+      <Stack gap="lg" mt="sm">
+        <Card withBorder radius="md" padding="lg">
+          <Stack gap="md">
+            <Group gap="sm" wrap="wrap">
+              <TextInput
+                label="Booking reference"
+                placeholder="e.g. BKG-00123"
+                value={draft.bookingReference ?? ''}
+                onChange={(e) => { const v = e.currentTarget.value; setDraft((f) => ({ ...f, bookingReference: v || undefined })); }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') runSearch();
+                }}
+                w={200}
+              />
+              <TextInput
+                label="Container number"
+                placeholder="e.g. MSKU1234567"
+                value={draft.containerNumber ?? ''}
+                onChange={(e) => { const v = e.currentTarget.value; setDraft((f) => ({ ...f, containerNumber: v || undefined })); }}
+                w={200}
+              />
+              <TextInput
+                label="Goods name"
+                placeholder="e.g. Coffee"
+                value={draft.goodsName ?? ''}
+                onChange={(e) => { const v = e.currentTarget.value; setDraft((f) => ({ ...f, goodsName: v || undefined })); }}
+                w={180}
+              />
+              <Select
+                label="Warehouse"
+                placeholder="Any"
+                clearable
+                searchable
+                data={warehouseOptions}
+                value={draft.warehouseId ?? null}
+                onChange={(value) =>
+                  setDraft((f) => ({ ...f, warehouseId: value ?? undefined, yardId: undefined, zoneId: undefined }))
+                }
+                w={200}
+              />
+              <Select
+                label="Yard"
+                placeholder="Any"
+                clearable
+                searchable
+                data={yardOptions}
+                value={draft.yardId ?? null}
+                onChange={(value) => setDraft((f) => ({ ...f, yardId: value ?? undefined, zoneId: undefined }))}
+                w={180}
+              />
+              <Select
+                label="Zone"
+                placeholder="Any"
+                clearable
+                searchable
+                data={zoneOptions}
+                value={draft.zoneId ?? null}
+                onChange={(value) => setDraft((f) => ({ ...f, zoneId: value ?? undefined }))}
+                w={180}
+              />
+              <Select
+                label="Status"
+                placeholder="Any"
+                clearable
+                data={inventoryStatusOptions}
+                value={draft.status ?? null}
+                onChange={(value) => setDraft((f) => ({ ...f, status: (value as InventoryStatus) ?? undefined }))}
+                w={180}
+              />
+            </Group>
 
-          <Group>
-            <Button leftSection={<Search size={16} />} onClick={runSearch}>
-              Search
-            </Button>
-            <Button variant="default" onClick={reset}>
-              Reset
-            </Button>
-          </Group>
-        </Stack>
-      </Card>
+            <Group>
+              <Button leftSection={<Search size={16} />} onClick={runSearch}>
+                Search
+              </Button>
+              <Button variant="default" onClick={reset}>
+                Reset
+              </Button>
+            </Group>
+          </Stack>
+        </Card>
 
-      <Card>
-        {isFetching ? (
-          <Center py="xl">
-            <Loader />
-          </Center>
-        ) : results.length === 0 ? (
-          <VisualEmptyState
-            variant="container"
-            title="No items found"
-            description="Adjust your filters and search to locate cargo, containers or goods across the warehouse network."
-          />
-        ) : (
-          <WarehouseInquiryTable results={results} />
-        )}
-      </Card>
+        <Card withBorder radius="md" padding="lg">
+          {isFetching ? (
+            <Center py="xl">
+              <Loader />
+            </Center>
+          ) : results.length === 0 ? (
+            <VisualEmptyState
+              variant="container"
+              title="No items found"
+              description="Adjust your filters and search to locate cargo, containers or goods across the warehouse network."
+            />
+          ) : (
+            <WarehouseInquiryTable results={results} onView={setViewResult} />
+          )}
+        </Card>
+      </Stack>
+      <InventoryInquiryDetailModal
+        opened={Boolean(viewResult)}
+        onClose={() => setViewResult(null)}
+        result={viewResult}
+      />
     </PageContainer>
   );
 }

apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDashboardPage.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { Card, Center, Group, Loader, SimpleGrid, Text, ThemeIcon } from '@mantine/core';
+import { Card, Center, Group, Loader, SimpleGrid, Stack, Text, ThemeIcon } from '@mantine/core';
 import {
   ClipboardCheck,
   ClipboardList,
@@ -16,10 +16,8 @@ import {
 } from 'lucide-react';
 
 import { PageContainer, PageHeader } from '@/components/page';
-import { useQuery } from '@tanstack/react-query';
-
-import { WarehouseDashboardCharts } from '@/components/warehouses';
-import { api } from '@/services/api';
+import { WarehouseDashboardCharts, WarehouseHero } from '@/components/warehouses';
+import { useWarehouseDashboard } from '@/hooks/useWarehouses';
 import type { WarehouseDashboard } from '@/types/warehouse';
 
 interface Metric {
@@ -31,8 +29,8 @@ interface Metric {
   theme: string;
 }
 
-const ORANGE = '#f08c00';
-const GREEN = '#22c55e';
+const ORANGE = 'rgb(241, 147, 23)';
+const GREEN = '#084b21';
 
 const METRICS: Metric[] = [
   { key: 'totalWarehouses', label: 'Total Warehouses', icon: <WarehouseIcon size={22} />, to: '/dashboard/warehouses', theme: ORANGE },
@@ -51,7 +49,7 @@ const METRICS: Metric[] = [
 
 export default function WarehouseDashboardPage() {
   const navigate = useNavigate();
-  const { data, isLoading } = useQuery(api.warehouses.dashboard.queryOptions());
+  const { data, isError, isLoading } = useWarehouseDashboard();
 
   return (
     <PageContainer>
@@ -60,45 +58,58 @@ export default function WarehouseDashboardPage() {
         subtitle="Live overview of warehouse capacity and inventory lifecycle."
       />
 
-      {isLoading ? (
-        <Center py="xl">
-          <Loader />
-        </Center>
-      ) : (
-        <>
-          <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="md">
-            {METRICS.map((metric) => (
-              <Card
-                key={metric.key}
-                padding="lg"
-                onClick={() => navigate(metric.to)}
-                className="cursor-pointer transition-[transform,border-color] duration-150 hover:-translate-y-0.5 hover:border-edr-primary!"
-              >
-                <Group justify="space-between" align="flex-start" wrap="nowrap">
-                  <div>
-                    <Text size="xs" c="edr-muted" tt="uppercase" fw={700} style={{ letterSpacing: 0.4 }}>
-                      {metric.label}
-                    </Text>
-                    <Text fw={800} fz={32} mt={8} c="edr-text" lh={1.1}>
-                      {data ? data[metric.key] : 0}
-                    </Text>
-                  </div>
-                  <ThemeIcon
-                    variant="light"
-                    size={46}
-                    radius="md"
-                    style={{ backgroundColor: `${metric.theme}1a`, color: metric.theme }}
-                  >
-                    {metric.icon}
-                  </ThemeIcon>
-                </Group>
-              </Card>
-            ))}
-          </SimpleGrid>
+      <Stack gap="lg" mt="sm">
+        <WarehouseHero
+          variant="train"
+          secondaryVariant="warehouse"
+          title="Warehouse Dashboard"
+          subtitle="Live overview of warehouse capacity and inventory lifecycle."
+        />
 
-          <WarehouseDashboardCharts data={data} />
-        </>
-      )}
+        {isLoading ? (
+          <Center py="xl">
+            <Loader />
+          </Center>
+        ) : isError ? (
+          <Center py="xl">
+            <Text c="red">Failed to load warehouse dashboard.</Text>
+          </Center>
+        ) : (
+          <>
+            <SimpleGrid cols={{ base: 1, xs: 2, md: 4 }} spacing="md">
+              {METRICS.map((metric) => (
+                <Card
+                  key={metric.key}
+                  padding="lg"
+                  onClick={() => navigate(metric.to)}
+                  className="cursor-pointer transition-[transform,border-color] duration-150 hover:-translate-y-0.5 hover:border-edr-primary!"
+                >
+                  <Group justify="space-between" align="flex-start" wrap="nowrap">
+                    <div>
+                      <Text size="xs" c="edr-muted" tt="uppercase" fw={700} style={{ letterSpacing: 0.4 }}>
+                        {metric.label}
+                      </Text>
+                      <Text fw={800} fz={32} mt={8} c="edr-text" lh={1.1}>
+                        {data ? data[metric.key] : 0}
+                      </Text>
+                    </div>
+                    <ThemeIcon
+                      variant="light"
+                      size={46}
+                      radius="md"
+                      style={{ backgroundColor: `${metric.theme}1a`, color: metric.theme }}
+                    >
+                      {metric.icon}
+                    </ThemeIcon>
+                  </Group>
+                </Card>
+              ))}
+            </SimpleGrid>
+
+            <WarehouseDashboardCharts data={data} />
+          </>
+        )}
+      </Stack>
     </PageContainer>
   );
 }

apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseDetailPage.tsx

@@ -5,16 +5,15 @@ import {
   Button,
   Card,
   Center,
-  Container,
   Group,
   Loader,
-  Stack,
   Select,
+  Stack,
   Tabs,
   Text,
 } from '@mantine/core';
 import { ArrowLeft, Boxes, LayoutGrid, Package, Pencil, Plus } from 'lucide-react';
-
+import { useQuery } from '@tanstack/react-query';
 import { DataTable, type ColumnDef } from '@edr/ui-common';
 
 import { KpiStrip, PageContainer, PageHeader } from '@/components/page';
@@ -27,8 +26,6 @@ import {
   formatCapacity,
   humanizeEnum,
 } from '@/components/warehouses';
-import { useQuery } from '@tanstack/react-query';
-
 import { api } from '@/services/api';
 import type { WarehouseYard, WarehouseZone } from '@/types/warehouse';
 
@@ -51,7 +48,6 @@ export default function WarehouseDetailPage() {
 
   const [yardModalOpen, setYardModalOpen] = useState(false);
   const [editingYard, setEditingYard] = useState<WarehouseYard | null>(null);
-
   const [zoneModalOpen, setZoneModalOpen] = useState(false);
   const [editingZone, setEditingZone] = useState<WarehouseZone | null>(null);
   const [selectedYardId, setSelectedYardId] = useState<string | null>(null);
@@ -169,14 +165,18 @@ export default function WarehouseDetailPage() {
 
   if (!warehouse) {
     return (
-      <Container size="sm" py="xl">
-        <Stack align="center" gap="md">
+      <PageContainer>
+        <Stack align="center" gap="md" py="xl">
           <Text fw={700}>Warehouse not found</Text>
-          <Button variant="default" leftSection={<ArrowLeft size={16} />} onClick={() => navigate('/dashboard/warehouses')}>
+          <Button
+            variant="default"
+            leftSection={<ArrowLeft size={16} />}
+            onClick={() => navigate('/dashboard/warehouses')}
+          >
             Back to warehouses
           </Button>
         </Stack>
-      </Container>
+      </PageContainer>
     );
   }
 
@@ -189,9 +189,7 @@ export default function WarehouseDetailPage() {
         ]}
         backTo="/dashboard/warehouses"
         title={warehouse.name}
-        subtitle={`${warehouse.code}${
-          warehouse.locationName ? ` · ${warehouse.locationName}` : ''
-        }`}
+        subtitle={`${warehouse.code}${warehouse.locationName ? ` - ${warehouse.locationName}` : ''}`}
         meta={
           <Group gap="xs" wrap="nowrap">
             <WarehouseTypeBadge type={warehouse.type} />
@@ -216,7 +214,6 @@ export default function WarehouseDetailPage() {
           </Tabs.Tab>
         </Tabs.List>
 
-        {/* OVERVIEW */}
         <Tabs.Panel value="overview" pt="lg">
           <KpiStrip
             items={[
@@ -237,113 +234,105 @@ export default function WarehouseDetailPage() {
           />
         </Tabs.Panel>
 
-          {/* YARDS */}
-          <Tabs.Panel value="yards" pt="lg">
-            <Card withBorder radius="md" padding="lg">
-              <Stack gap="md">
-                <Group justify="space-between">
-                  <Text fw={600}>Yards</Text>
-                  <Button
-                    size="sm"
-                    leftSection={<Plus size={16} />}
-                    onClick={() => {
-                      setEditingYard(null);
-                      setYardModalOpen(true);
-                    }}
-                  >
-                    Create Yard
-                  </Button>
-                </Group>
+        <Tabs.Panel value="yards" pt="lg">
+          <Card withBorder radius="md" padding="lg">
+            <Stack gap="md">
+              <Group justify="space-between">
+                <Text fw={600}>Yards</Text>
+                <Button
+                  size="sm"
+                  leftSection={<Plus size={16} />}
+                  onClick={() => {
+                    setEditingYard(null);
+                    setYardModalOpen(true);
+                  }}
+                >
+                  Create Yard
+                </Button>
+              </Group>
 
+              <DataTable
+                columns={yardColumns}
+                data={yards}
+                status={
+                  yardsQuery.isLoading ? 'loading' : yardsQuery.isError ? 'error' : 'success'
+                }
+                emptyMessage="No yards yet."
+                containerClassName="border-0 shadow-none"
+                error={
+                  yardsQuery.isError
+                    ? {
+                        message: 'Failed to load yards.',
+                        onRetry: () => void yardsQuery.refetch(),
+                      }
+                    : undefined
+                }
+              />
+            </Stack>
+          </Card>
+        </Tabs.Panel>
+
+        <Tabs.Panel value="zones" pt="lg">
+          <Card withBorder radius="md" padding="lg">
+            <Stack gap="md">
+              <Group justify="space-between" align="flex-end">
+                <Select
+                  label="Yard"
+                  placeholder="Select a yard"
+                  data={yardOptions}
+                  value={selectedYardId}
+                  onChange={setSelectedYardId}
+                  w={280}
+                  searchable
+                />
+                <Button
+                  size="sm"
+                  leftSection={<Plus size={16} />}
+                  disabled={!selectedYardId}
+                  onClick={() => {
+                    setEditingZone(null);
+                    setZoneModalOpen(true);
+                  }}
+                >
+                  Create Zone
+                </Button>
+              </Group>
+
+              {!selectedYardId ? (
+                <Text c="dimmed" ta="center" py="lg">
+                  Select a yard to view its zones.
+                </Text>
+              ) : (
                 <DataTable
-                  columns={yardColumns}
-                  data={yards}
+                  columns={zoneColumns}
+                  data={zonesQuery.data ?? []}
                   status={
-                    yardsQuery.isLoading
-                      ? 'loading'
-                      : yardsQuery.isError
-                        ? 'error'
-                        : 'success'
+                    zonesQuery.isLoading ? 'loading' : zonesQuery.isError ? 'error' : 'success'
                   }
-                  emptyMessage="No yards yet."
+                  emptyMessage="No zones in this yard yet."
                   containerClassName="border-0 shadow-none"
                   error={
-                    yardsQuery.isError
+                    zonesQuery.isError
                       ? {
-                          message: 'Failed to load yards.',
-                          onRetry: () => void yardsQuery.refetch(),
+                          message: 'Failed to load zones.',
+                          onRetry: () => void zonesQuery.refetch(),
                         }
                       : undefined
                   }
                 />
-              </Stack>
-            </Card>
-          </Tabs.Panel>
+              )}
+            </Stack>
+          </Card>
+        </Tabs.Panel>
 
-          {/* ZONES */}
-          <Tabs.Panel value="zones" pt="lg">
-            <Card withBorder radius="md" padding="lg">
-              <Stack gap="md">
-                <Group justify="space-between" align="flex-end">
-                  <Select
-                    label="Yard"
-                    placeholder="Select a yard"
-                    data={yardOptions}
-                    value={selectedYardId}
-                    onChange={setSelectedYardId}
-                    w={280}
-                    searchable
-                  />
-                  <Button
-                    size="sm"
-                    leftSection={<Plus size={16} />}
-                    disabled={!selectedYardId}
-                    onClick={() => {
-                      setEditingZone(null);
-                      setZoneModalOpen(true);
-                    }}
-                  >
-                    Create Zone
-                  </Button>
-                </Group>
-
-                {!selectedYardId ? (
-                  <Text c="dimmed" ta="center" py="lg">
-                    Select a yard to view its zones.
-                  </Text>
-                ) : (
-                  <DataTable
-                    columns={zoneColumns}
-                    data={zonesQuery.data ?? []}
-                    status={
-                      zonesQuery.isLoading
-                        ? 'loading'
-                        : zonesQuery.isError
-                          ? 'error'
-                          : 'success'
-                    }
-                    emptyMessage="No zones in this yard yet."
-                    containerClassName="border-0 shadow-none"
-                    error={
-                      zonesQuery.isError
-                        ? {
-                            message: 'Failed to load zones.',
-                            onRetry: () => void zonesQuery.refetch(),
-                          }
-                        : undefined
-                    }
-                  />
-                )}
-              </Stack>
-            </Card>
-          </Tabs.Panel>
-
-          {/* INVENTORY */}
-          <Tabs.Panel value="inventory" pt="lg">
-            <Card withBorder radius="md" padding="lg">
-              <InventoryWorkbench items={inventoryQuery.data ?? []} isLoading={inventoryQuery.isLoading} />
-            </Card>
-          </Tabs.Panel>
+        <Tabs.Panel value="inventory" pt="lg">
+          <Card withBorder radius="md" padding="lg">
+            <InventoryWorkbench
+              items={inventoryQuery.data ?? []}
+              isLoading={inventoryQuery.isLoading}
+            />
+          </Card>
+        </Tabs.Panel>
       </Tabs>
 
       {id && (

apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInventoryPage.tsx

@@ -10,9 +10,12 @@ import {
   ReceiveInventoryModal,
   inventoryStatusOptions,
 } from '@/components/warehouses';
-import { useQuery } from '@tanstack/react-query';
-
-import { api } from '@/services/api';
+import {
+  useWarehouseInventory,
+  useWarehouseYards,
+  useWarehouseZones,
+  useWarehouses,
+} from '@/hooks/useWarehouses';
 import type { InventoryFilter, InventoryStatus } from '@/types/warehouse';
 
 export default function WarehouseInventoryPage() {
@@ -30,24 +33,10 @@ export default function WarehouseInventoryPage() {
     [filter, debouncedSearch],
   );
 
-  const warehousesQuery = useQuery(
-    api.warehouses.list.queryOptions({ input: {} }),
-  );
-  const yardsQuery = useQuery(
-    api.warehouses.listYards.queryOptions({
-      input: { warehouseId: filter.warehouseId ?? '' },
-      enabled: Boolean(filter.warehouseId),
-    }),
-  );
-  const zonesQuery = useQuery(
-    api.warehouses.listZones.queryOptions({
-      input: { yardId: filter.yardId ?? '' },
-      enabled: Boolean(filter.yardId),
-    }),
-  );
-  const inventoryQuery = useQuery(
-    api.warehouses.listInventory.queryOptions({ input: { filter: queryFilter } }),
-  );
+  const warehousesQuery = useWarehouses();
+  const yardsQuery = useWarehouseYards(filter.warehouseId);
+  const zonesQuery = useWarehouseZones(filter.yardId);
+  const inventoryQuery = useWarehouseInventory(queryFilter);
 
   const warehouseOptions = useMemo(
     () => (warehousesQuery.data ?? []).map((w) => ({ value: w.id, label: `${w.name} (${w.code})` })),
@@ -91,7 +80,12 @@ export default function WarehouseInventoryPage() {
               data={warehouseOptions}
               value={filter.warehouseId ?? null}
               onChange={(value) =>
-                setFilter((f) => ({ ...f, warehouseId: value ?? undefined, yardId: undefined, zoneId: undefined }))
+                setFilter((f) => ({
+                  ...f,
+                  warehouseId: value ?? undefined,
+                  yardId: undefined,
+                  zoneId: undefined,
+                }))
               }
               w={220}
             />
@@ -102,7 +96,9 @@ export default function WarehouseInventoryPage() {
               disabled={!filter.warehouseId}
               data={yardOptions}
               value={filter.yardId ?? null}
-              onChange={(value) => setFilter((f) => ({ ...f, yardId: value ?? undefined, zoneId: undefined }))}
+              onChange={(value) =>
+                setFilter((f) => ({ ...f, yardId: value ?? undefined, zoneId: undefined }))
+              }
               w={200}
             />
             <Select
@@ -120,7 +116,9 @@ export default function WarehouseInventoryPage() {
               clearable
               data={inventoryStatusOptions}
               value={filter.status ?? null}
-              onChange={(value) => setFilter((f) => ({ ...f, status: (value as InventoryStatus) ?? undefined }))}
+              onChange={(value) =>
+                setFilter((f) => ({ ...f, status: (value as InventoryStatus) ?? undefined }))
+              }
               w={200}
             />
           </Group>

apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseInvoicesPage.tsx

@@ -37,7 +37,7 @@ const STATUS_COLOR: Record<WarehouseInvoiceStatus, string> = {
   CANCELLED: 'gray',
 };
 
-const fmt = (n: number, c: string) => `${Number(n).toLocaleString()} ${c}`;
+const fmt = (n: number, c: string) => `${Number(n).toLocaleString()} ${c === 'ETB' ? 'Birr (ETB)' : c}`;
 const fmtDate = (d?: string | null) => (d ? new Date(d).toLocaleDateString() : '—');
 
 export default function WarehouseInvoicesPage() {

apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseListPage.tsx

@@ -12,9 +12,7 @@ import {
   WarehouseTable,
   type WarehouseView,
 } from '@/components/warehouses';
-import { useQuery } from '@tanstack/react-query';
-
-import { api } from '@/services/api';
+import { useWarehouses } from '@/hooks/useWarehouses';
 import type { Warehouse, WarehouseFilter } from '@/types/warehouse';
 
 export default function WarehouseListPage() {
@@ -30,9 +28,7 @@ export default function WarehouseListPage() {
     [filter, debouncedSearch],
   );
 
-  const { data, isLoading, isError } = useQuery(
-    api.warehouses.list.queryOptions({ input: { filter: queryFilter } }),
-  );
+  const { data, isLoading, isError } = useWarehouses(queryFilter);
   const warehouses = data ?? [];
 
   const openCreate = () => {

apps/edr-freight-web/backoffice/src/pages/warehouses/WarehouseRulesPage.tsx

@@ -1,26 +1,34 @@
 import { useState } from 'react';
 import {
   ActionIcon,
+  Alert,
   Badge,
   Button,
   Card,
   Group,
+  Loader,
   Modal,
   NumberInput,
   Select,
   Stack,
   Tabs,
+  Table,
   Text,
   TextInput,
 } from '@mantine/core';
-import { Plus, Trash2 } from 'lucide-react';
-import { DataTable, type ColumnDef } from '@edr/ui-common';
+import { Info, Plus, Trash2 } from 'lucide-react';
 
 import { PageContainer, PageHeader } from '@/components/page';
-import { useMutation, useQuery } from '@tanstack/react-query';
-
-import { api } from '@/services/api';
 import { useToast } from '@/hooks/use-toast';
+import {
+  useAllWarehouseYards,
+  useAllocationRules,
+  useCreateAllocationRule,
+  useCreateFeeRule,
+  useDeleteAllocationRule,
+  useDeleteFeeRule,
+  useFeeRules,
+} from '@/hooks/useWarehouses';
 import { FEE_RULE_TYPES, type FeeRuleType } from '@/types/warehouse';
 
 const FREIGHT = [
@@ -32,15 +40,26 @@ const TRADE = [
   { value: 'EXPORT', label: 'Export' },
   { value: 'DOMESTIC', label: 'Domestic' },
 ];
+const CURRENCIES = [
+  { value: 'USD', label: 'USD - Dollar' },
+  { value: 'ETB', label: 'ETB - Birr' },
+];
 
 const clean = (s: string) => s.trim() || undefined;
+const selectValue = (value: string | null, fallback = '') => value ?? fallback;
+const numberValue = (value: string | number, fallback = 0) => {
+  const next = Number(value);
+  return Number.isFinite(next) ? next : fallback;
+};
+const anyLabel = (value: string, label: string) => value.trim() || `Any ${label}`;
+const dash = '-';
 
 export default function WarehouseRulesPage() {
   return (
     <PageContainer>
       <PageHeader
         title="Allocation & Fee Rules"
-        subtitle="Configure deterministic yard allocation and storage / demurrage free time and rates."
+        subtitle="Configure yard allocation and storage or demurrage free time and rates."
       />
       <Card>
         <Tabs defaultValue="allocation">
@@ -62,11 +81,10 @@ export default function WarehouseRulesPage() {
 
 function AllocationRules() {
   const { toast } = useToast();
-  const { data, isLoading } = useQuery(
-    api.warehouses.allocationRules.queryOptions(),
-  );
-  const create = useMutation(api.warehouses.createAllocationRule.mutationOptions());
-  const remove = useMutation(api.warehouses.deleteAllocationRule.mutationOptions());
+  const { data, isLoading } = useAllocationRules();
+  const { data: yards = [], isLoading: yardsLoading } = useAllWarehouseYards();
+  const create = useCreateAllocationRule();
+  const remove = useDeleteAllocationRule();
   const [open, setOpen] = useState(false);
   const [form, setForm] = useState({
     name: '',
@@ -78,13 +96,33 @@ function AllocationRules() {
     targetYardCode: '',
     storageType: '',
   });
+
   const rules = data ?? [];
+  const yardOptions = yards
+    .filter((yard) => yard.code)
+    .map((yard) => ({
+      value: yard.code,
+      label: `${yard.code} - ${yard.name}${yard.warehouse?.code ? ` (${yard.warehouse.code})` : ''}`,
+    }));
+
+  const resetForm = () =>
+    setForm({
+      name: '',
+      priority: 100,
+      freightType: '',
+      tradeDirection: '',
+      cargoTypeCode: '',
+      containerStatus: '',
+      targetYardCode: '',
+      storageType: '',
+    });
 
   const submit = async () => {
     if (!form.name.trim() || !form.targetYardCode.trim()) {
-      toast({ variant: 'destructive', title: 'Name and target yard code are required' });
+      toast({ variant: 'destructive', title: 'Name and target yard are required' });
       return;
     }
+
     await create.mutateAsync({
       name: form.name.trim(),
       priority: form.priority,
@@ -98,77 +136,179 @@ function AllocationRules() {
     } as never);
     toast({ title: 'Allocation rule created' });
     setOpen(false);
-    setForm({ name: '', priority: 100, freightType: '', tradeDirection: '', cargoTypeCode: '', containerStatus: '', targetYardCode: '', storageType: '' });
+    resetForm();
   };
 
-  const columns: ColumnDef<(typeof rules)[number]>[] = [
-    { id: 'priority', header: 'Priority', cell: ({ row }) => row.original.priority },
-    { id: 'name', header: 'Name', cell: ({ row }) => row.original.name },
-    { id: 'freight', header: 'Freight', cell: ({ row }) => row.original.freightType ?? '—' },
-    { id: 'trade', header: 'Trade', cell: ({ row }) => row.original.tradeDirection ?? '—' },
-    { id: 'cargo', header: 'Cargo code', cell: ({ row }) => row.original.cargoTypeCode ?? '—' },
-    {
-      id: 'targetYard',
-      header: 'Target yard',
-      cell: ({ row }) => <Badge variant="light">{row.original.targetYardCode}</Badge>,
-    },
-    {
-      id: 'active',
-      header: 'Active',
-      cell: ({ row }) => (
-        <Badge color={row.original.isActive ? 'edr-green' : 'gray'} variant="light">
-          {row.original.isActive ? 'Yes' : 'No'}
-        </Badge>
-      ),
-    },
-    {
-      id: 'actions',
-      header: '',
-      cell: ({ row }) => (
-        <Group justify="flex-end" onClick={(e) => e.stopPropagation()}>
-          <ActionIcon variant="subtle" color="red" onClick={() => remove.mutate(row.original.id)} title="Delete">
-            <Trash2 size={16} />
-          </ActionIcon>
-        </Group>
-      ),
-    },
-  ];
-
   return (
     <>
       <Group justify="space-between" mb="sm">
-        <Text c="dimmed" size="sm">{rules.length} rule(s) — matched by ascending priority</Text>
-        <Button leftSection={<Plus size={16} />} onClick={() => setOpen(true)}>New allocation rule</Button>
+        <Text c="dimmed" size="sm">
+          {rules.length} rule(s) matched by ascending priority
+        </Text>
+        <Button leftSection={<Plus size={16} />} onClick={() => setOpen(true)}>
+          New allocation rule
+        </Button>
       </Group>
-      <DataTable
-        columns={columns}
-        data={rules}
-        status={isLoading ? 'loading' : 'success'}
-        emptyMessage="No allocation rules yet."
-        containerClassName="border-0 shadow-none"
-      />
+      <Alert icon={<Info size={16} />} color="orange" variant="light" mb="md">
+        <Text size="sm">
+          Allocation rules tell the system where to place a booking when it enters the warehouse.
+          Lower priority numbers are checked first.
+        </Text>
+      </Alert>
+
+      {isLoading ? (
+        <Group justify="center" py="xl">
+          <Loader />
+        </Group>
+      ) : (
+        <Table.ScrollContainer minWidth={900}>
+          <Table striped highlightOnHover verticalSpacing="sm">
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Priority</Table.Th>
+                <Table.Th>Name</Table.Th>
+                <Table.Th>Freight</Table.Th>
+                <Table.Th>Trade</Table.Th>
+                <Table.Th>Cargo code</Table.Th>
+                <Table.Th>Target yard</Table.Th>
+                <Table.Th>Active</Table.Th>
+                <Table.Th ta="right">Actions</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {rules.map((rule) => (
+                <Table.Tr key={rule.id}>
+                  <Table.Td>{rule.priority}</Table.Td>
+                  <Table.Td>{rule.name}</Table.Td>
+                  <Table.Td>{rule.freightType ?? dash}</Table.Td>
+                  <Table.Td>{rule.tradeDirection ?? dash}</Table.Td>
+                  <Table.Td>{rule.cargoTypeCode ?? dash}</Table.Td>
+                  <Table.Td>
+                    <Badge variant="light">{rule.targetYardCode}</Badge>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge color={rule.isActive ? 'green' : 'gray'} variant="light">
+                      {rule.isActive ? 'Yes' : 'No'}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td ta="right">
+                    <ActionIcon
+                      variant="subtle"
+                      color="red"
+                      onClick={() => remove.mutate(rule.id)}
+                      title="Delete"
+                    >
+                      <Trash2 size={16} />
+                    </ActionIcon>
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+      )}
 
       <Modal opened={open} onClose={() => setOpen(false)} title="New allocation rule" centered size="lg">
-        <Stack gap="sm">
+        <Stack gap="md">
+          <Card withBorder radius="md" padding="sm" bg="gray.0">
+            <Stack gap={4}>
+              <Text size="xs" c="dimmed" fw={700} tt="uppercase">
+                Rule preview
+              </Text>
+              <Text size="sm">
+                <b>When</b> {anyLabel(form.tradeDirection, 'trade direction').toLowerCase()} /{' '}
+                {anyLabel(form.freightType, 'freight type').toLowerCase()} booking
+                {form.cargoTypeCode.trim() ? ` with cargo code ${form.cargoTypeCode.trim()}` : ''}
+                {form.containerStatus.trim() ? ` and container status ${form.containerStatus.trim()}` : ''}{' '}
+                is received, <b>send it to</b> {form.targetYardCode || 'a selected target yard'}.
+              </Text>
+            </Stack>
+          </Card>
           <Group grow>
-            <TextInput label="Name" required value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.currentTarget.value }))} />
-            <NumberInput label="Priority" value={form.priority} onChange={(v) => setForm((f) => ({ ...f, priority: Number(v) || 100 }))} />
+            <TextInput
+              label="Rule name"
+              placeholder="e.g. Import containers to open yard"
+              required
+              value={form.name}
+              onChange={(e) => {
+                const value = e.currentTarget.value;
+                setForm((f) => ({ ...f, name: value }));
+              }}
+            />
+            <NumberInput
+              label="Priority"
+              value={form.priority}
+              onChange={(v) => setForm((f) => ({ ...f, priority: numberValue(v, 100) || 100 }))}
+            />
           </Group>
           <Group grow>
-            <Select label="Freight type" data={FREIGHT} value={form.freightType || null} onChange={(v) => setForm((f) => ({ ...f, freightType: v ?? '' }))} clearable />
-            <Select label="Trade direction" data={TRADE} value={form.tradeDirection || null} onChange={(v) => setForm((f) => ({ ...f, tradeDirection: v ?? '' }))} clearable />
+            <Select
+              label="Freight type"
+              placeholder="Any freight"
+              data={FREIGHT}
+              value={form.freightType || null}
+              onChange={(v) => setForm((f) => ({ ...f, freightType: selectValue(v) }))}
+              clearable
+            />
+            <Select
+              label="Trade direction"
+              placeholder="Any direction"
+              data={TRADE}
+              value={form.tradeDirection || null}
+              onChange={(v) => setForm((f) => ({ ...f, tradeDirection: selectValue(v) }))}
+              clearable
+            />
           </Group>
           <Group grow>
-            <TextInput label="Cargo type code" value={form.cargoTypeCode} onChange={(e) => setForm((f) => ({ ...f, cargoTypeCode: e.currentTarget.value }))} />
-            <TextInput label="Container status" placeholder="e.g. MAINTENANCE" value={form.containerStatus} onChange={(e) => setForm((f) => ({ ...f, containerStatus: e.currentTarget.value }))} />
+            <TextInput
+              label="Cargo type code"
+              placeholder="e.g. COFFEE"
+              value={form.cargoTypeCode}
+              onChange={(e) => {
+                const value = e.currentTarget.value;
+                setForm((f) => ({ ...f, cargoTypeCode: value }));
+              }}
+            />
+            <TextInput
+              label="Container status"
+              placeholder="e.g. MAINTENANCE"
+              value={form.containerStatus}
+              onChange={(e) => {
+                const value = e.currentTarget.value;
+                setForm((f) => ({ ...f, containerStatus: value }));
+              }}
+            />
           </Group>
           <Group grow>
-            <TextInput label="Target yard code" required value={form.targetYardCode} onChange={(e) => setForm((f) => ({ ...f, targetYardCode: e.currentTarget.value }))} />
-            <TextInput label="Storage type" value={form.storageType} onChange={(e) => setForm((f) => ({ ...f, storageType: e.currentTarget.value }))} />
+            <Select
+              label="Target yard"
+              required
+              searchable
+              clearable
+              data={yardOptions}
+              value={form.targetYardCode || null}
+              placeholder={yardsLoading ? 'Loading yards...' : 'Select target yard'}
+              nothingFoundMessage="No yards found"
+              disabled={yardsLoading}
+              onChange={(value) => setForm((f) => ({ ...f, targetYardCode: selectValue(value) }))}
+            />
+            <TextInput
+              label="Storage type"
+              placeholder="e.g. OPEN_STACK"
+              value={form.storageType}
+              onChange={(e) => {
+                const value = e.currentTarget.value;
+                setForm((f) => ({ ...f, storageType: value }));
+              }}
+            />
           </Group>
           <Group justify="flex-end" mt="sm">
-            <Button variant="default" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button loading={create.isPending} onClick={submit}>Create</Button>
+            <Button variant="default" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button loading={create.isPending} onClick={submit}>
+              Create
+            </Button>
           </Group>
         </Stack>
       </Modal>
@@ -178,9 +318,9 @@ function AllocationRules() {
 
 function FeeRules() {
   const { toast } = useToast();
-  const { data, isLoading } = useQuery(api.warehouses.feeRules.queryOptions());
-  const create = useMutation(api.warehouses.createFeeRule.mutationOptions());
-  const remove = useMutation(api.warehouses.deleteFeeRule.mutationOptions());
+  const { data, isLoading } = useFeeRules();
+  const create = useCreateFeeRule();
+  const remove = useDeleteFeeRule();
   const [open, setOpen] = useState(false);
   const [form, setForm] = useState({
     name: '',
@@ -199,6 +339,7 @@ function FeeRules() {
       toast({ variant: 'destructive', title: 'Name is required' });
       return;
     }
+
     await create.mutateAsync({
       name: form.name.trim(),
       ruleType: form.ruleType,
@@ -208,86 +349,158 @@ function FeeRules() {
       freeDays: form.freeDays,
       ratePerDay: form.ratePerDay,
       currency: form.currency || 'USD',
-      isActive: true,
     } as never);
     toast({ title: 'Fee rule created' });
     setOpen(false);
   };
 
-  const columns: ColumnDef<(typeof rules)[number]>[] = [
-    {
-      id: 'type',
-      header: 'Type',
-      cell: ({ row }) => (
-        <Badge color={row.original.ruleType === 'DEMURRAGE_FEE' ? 'orange' : 'teal'} variant="light">
-          {row.original.ruleType === 'DEMURRAGE_FEE' ? 'Demurrage' : 'Storage'}
-        </Badge>
-      ),
-    },
-    { id: 'name', header: 'Name', cell: ({ row }) => row.original.name },
-    { id: 'freight', header: 'Freight', cell: ({ row }) => row.original.freightType ?? '—' },
-    { id: 'trade', header: 'Trade', cell: ({ row }) => row.original.tradeDirection ?? '—' },
-    { id: 'freeDays', header: 'Free days', cell: ({ row }) => row.original.freeDays },
-    {
-      id: 'rate',
-      header: 'Rate / day',
-      cell: ({ row }) => `${Number(row.original.ratePerDay).toLocaleString()} ${row.original.currency}`,
-    },
-    {
-      id: 'active',
-      header: 'Active',
-      cell: ({ row }) => (
-        <Badge color={row.original.isActive ? 'edr-green' : 'gray'} variant="light">
-          {row.original.isActive ? 'Yes' : 'No'}
-        </Badge>
-      ),
-    },
-    {
-      id: 'actions',
-      header: '',
-      cell: ({ row }) => (
-        <Group justify="flex-end" onClick={(e) => e.stopPropagation()}>
-          <ActionIcon variant="subtle" color="red" onClick={() => remove.mutate(row.original.id)} title="Delete">
-            <Trash2 size={16} />
-          </ActionIcon>
-        </Group>
-      ),
-    },
-  ];
-
   return (
     <>
       <Group justify="space-between" mb="sm">
-        <Text c="dimmed" size="sm">{rules.length} rule(s) — most specific match applies</Text>
-        <Button leftSection={<Plus size={16} />} onClick={() => setOpen(true)}>New fee rule</Button>
+        <Text c="dimmed" size="sm">
+          {rules.length} rule(s) - most specific match applies
+        </Text>
+        <Button leftSection={<Plus size={16} />} onClick={() => setOpen(true)}>
+          New fee rule
+        </Button>
       </Group>
-      <DataTable
-        columns={columns}
-        data={rules}
-        status={isLoading ? 'loading' : 'success'}
-        emptyMessage="No fee rules yet."
-        containerClassName="border-0 shadow-none"
-      />
+
+      {isLoading ? (
+        <Group justify="center" py="xl">
+          <Loader />
+        </Group>
+      ) : (
+        <Table.ScrollContainer minWidth={900}>
+          <Table striped highlightOnHover verticalSpacing="sm">
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Type</Table.Th>
+                <Table.Th>Name</Table.Th>
+                <Table.Th>Freight</Table.Th>
+                <Table.Th>Trade</Table.Th>
+                <Table.Th>Free days</Table.Th>
+                <Table.Th>Rate / day</Table.Th>
+                <Table.Th>Active</Table.Th>
+                <Table.Th ta="right">Actions</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {rules.map((rule) => (
+                <Table.Tr key={rule.id}>
+                  <Table.Td>
+                    <Badge color={rule.ruleType === 'DEMURRAGE_FEE' ? 'orange' : 'teal'} variant="light">
+                      {rule.ruleType === 'DEMURRAGE_FEE' ? 'Demurrage' : 'Storage'}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>{rule.name}</Table.Td>
+                  <Table.Td>{rule.freightType ?? dash}</Table.Td>
+                  <Table.Td>{rule.tradeDirection ?? dash}</Table.Td>
+                  <Table.Td>{rule.freeDays}</Table.Td>
+                  <Table.Td>
+                    {Number(rule.ratePerDay).toLocaleString()} {rule.currency}
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge color={rule.isActive ? 'green' : 'gray'} variant="light">
+                      {rule.isActive ? 'Yes' : 'No'}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td ta="right">
+                    <ActionIcon
+                      variant="subtle"
+                      color="red"
+                      onClick={() => remove.mutate(rule.id)}
+                      title="Delete"
+                    >
+                      <Trash2 size={16} />
+                    </ActionIcon>
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+      )}
 
       <Modal opened={open} onClose={() => setOpen(false)} title="New fee rule" centered size="lg">
         <Stack gap="sm">
           <Group grow>
-            <TextInput label="Name" required value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.currentTarget.value }))} />
-            <Select label="Rule type" data={FEE_RULE_TYPES.map((t) => ({ value: t, label: t === 'DEMURRAGE_FEE' ? 'Demurrage' : 'Storage' }))} value={form.ruleType} onChange={(v) => setForm((f) => ({ ...f, ruleType: (v as FeeRuleType) ?? 'DEMURRAGE_FEE' }))} allowDeselect={false} />
+            <TextInput
+              label="Name"
+              required
+              value={form.name}
+              onChange={(e) => {
+                const value = e.currentTarget.value;
+                setForm((f) => ({ ...f, name: value }));
+              }}
+            />
+            <Select
+              label="Rule type"
+              data={FEE_RULE_TYPES.map((type) => ({
+                value: type,
+                label: type === 'DEMURRAGE_FEE' ? 'Demurrage' : 'Storage',
+              }))}
+              value={form.ruleType}
+              onChange={(value) =>
+                setForm((f) => ({
+                  ...f,
+                  ruleType: selectValue(value, 'DEMURRAGE_FEE') as FeeRuleType,
+                }))
+              }
+              allowDeselect={false}
+            />
           </Group>
           <Group grow>
-            <Select label="Freight type" data={FREIGHT} value={form.freightType || null} onChange={(v) => setForm((f) => ({ ...f, freightType: v ?? '' }))} clearable />
-            <Select label="Trade direction" data={TRADE} value={form.tradeDirection || null} onChange={(v) => setForm((f) => ({ ...f, tradeDirection: v ?? '' }))} clearable />
-            <TextInput label="Cargo type code" value={form.cargoTypeCode} onChange={(e) => setForm((f) => ({ ...f, cargoTypeCode: e.currentTarget.value }))} />
+            <Select
+              label="Freight type"
+              data={FREIGHT}
+              value={form.freightType || null}
+              onChange={(value) => setForm((f) => ({ ...f, freightType: selectValue(value) }))}
+              clearable
+            />
+            <Select
+              label="Trade direction"
+              data={TRADE}
+              value={form.tradeDirection || null}
+              onChange={(value) => setForm((f) => ({ ...f, tradeDirection: selectValue(value) }))}
+              clearable
+            />
+            <TextInput
+              label="Cargo type code"
+              value={form.cargoTypeCode}
+              onChange={(e) => {
+                const value = e.currentTarget.value;
+                setForm((f) => ({ ...f, cargoTypeCode: value }));
+              }}
+            />
           </Group>
           <Group grow>
-            <NumberInput label="Free days" min={0} value={form.freeDays} onChange={(v) => setForm((f) => ({ ...f, freeDays: Number(v) || 0 }))} />
-            <NumberInput label="Rate / day" min={0} value={form.ratePerDay} onChange={(v) => setForm((f) => ({ ...f, ratePerDay: Number(v) || 0 }))} />
-            <TextInput label="Currency" value={form.currency} onChange={(e) => setForm((f) => ({ ...f, currency: e.currentTarget.value }))} />
+            <NumberInput
+              label="Free days"
+              min={0}
+              value={form.freeDays}
+              onChange={(value) => setForm((f) => ({ ...f, freeDays: numberValue(value) }))}
+            />
+            <NumberInput
+              label="Rate / day"
+              min={0}
+              value={form.ratePerDay}
+              onChange={(value) => setForm((f) => ({ ...f, ratePerDay: numberValue(value) }))}
+            />
+            <Select
+              label="Currency"
+              data={CURRENCIES}
+              value={form.currency}
+              onChange={(value) => setForm((f) => ({ ...f, currency: selectValue(value, 'USD') }))}
+              allowDeselect={false}
+            />
           </Group>
           <Group justify="flex-end" mt="sm">
-            <Button variant="default" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button loading={create.isPending} onClick={submit}>Create</Button>
+            <Button variant="default" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button loading={create.isPending} onClick={submit}>
+              Create
+            </Button>
           </Group>
         </Stack>
       </Modal>

apps/edr-freight-web/backoffice/src/services/api.ts

@@ -1817,10 +1817,10 @@ export const api = {
       ({ id }) => bookingsService.remove(id),
     ),
 
-    staffAccept: endpoint<{ id: string }, BookingDetail>(
+    staffAccept: endpoint<{ id: string; validityDays: number }, BookingDetail>(
       "bookings",
       "staffAccept",
-      ({ id }) => bookingsService.staffAccept(id),
+      ({ id, validityDays }) => bookingsService.staffAccept(id, validityDays),
     ),
 
     requestChanges: endpoint<{ id: string; note: string }, BookingDetail>(
@@ -1835,6 +1835,18 @@ export const api = {
       ({ id, reason }) => bookingsService.staffReject(id, reason),
     ),
 
+    reviewOperation: endpoint<
+      {
+        id: string;
+        decision: "ACCEPT" | "REQUEST_CHANGES" | "ADJUST_PRICE";
+        note?: string;
+        amount?: number;
+      },
+      BookingDetail
+    >("bookings", "reviewOperation", ({ id, decision, note, amount }) =>
+      bookingsService.reviewOperation(id, decision, { note, amount }),
+    ),
+
     approveStep: endpoint<ApproveStepPayload, BookingDetail>(
       "bookings",
       "approveStep",
@@ -1947,6 +1959,18 @@ export const api = {
         QUERY_KEYS.CUSTOMERS.ROOT,
       ],
     ),
+
+    setCompanyStatus: endpoint<{ companyId: string; status: string }, unknown>(
+      "customers",
+      "setCompanyStatus",
+      ({ companyId, status }) =>
+        customersService.setCompanyStatus(companyId, status),
+      undefined,
+      (input) => [
+        QUERY_KEYS.CUSTOMERS.byId(input.companyId),
+        QUERY_KEYS.CUSTOMERS.ROOT,
+      ],
+    ),
   },
 
   overview: {

apps/edr-freight-web/backoffice/src/services/bookings.service.ts

@@ -2,6 +2,7 @@ import { api as client } from "../auth/http";
 import { unwrap } from "@/utils/endpoint";
 import { URL_CONSTANTS } from "@/constants/URLS";
 import type { BookingDetail } from "@/types/booking";
+import type { Freight } from "@edr/types";
 
 const B = URL_CONSTANTS.BOOKINGS;
 
@@ -169,7 +170,38 @@ export const bookingsService = {
     await client.delete(B.BY_ID(id));
   },
 
-  staffAccept: (id: string) => postBooking<BookingDetail>(B.STAFF_ACCEPT(id)),
+  // ── Document clearance (GL workflow) ──
+  getClearance: async (id: string): Promise<Freight.ClearanceView> => {
+    const response = await client.get(`/bookings/${id}/clearance`);
+    return unwrap(response.data) as Freight.ClearanceView;
+  },
+
+  reviewClearanceDocument: (
+    id: string,
+    payload: { fileKey: string; status: "APPROVED" | "QUERIED"; note?: string },
+  ) => postBooking<BookingDetail>(`/bookings/${id}/clearance/review`, payload),
+
+  uploadClearanceOutput: async (
+    id: string,
+    files: Record<string, File | null>,
+  ): Promise<BookingDetail> => {
+    const form = new FormData();
+    for (const [key, file] of Object.entries(files)) {
+      if (file) form.append(key, file);
+    }
+    const response = await client.post(
+      `/bookings/${id}/clearance/output-documents`,
+      form,
+      { headers: { "Content-Type": "multipart/form-data" } },
+    );
+    return unwrap(response.data) as BookingDetail;
+  },
+
+  finalizeClearance: (id: string) =>
+    postBooking<BookingDetail>(`/bookings/${id}/clearance/finalize`),
+
+  staffAccept: (id: string, validityDays: number) =>
+    postBooking<BookingDetail>(B.STAFF_ACCEPT(id), { validityDays }),
 
   requestChanges: (id: string, note: string) =>
     postBooking<BookingDetail>(B.STAFF_REQUEST_CHANGES(id), { note }),
@@ -177,6 +209,24 @@ export const bookingsService = {
   staffReject: (id: string, reason: string) =>
     postBooking<BookingDetail>(B.STAFF_REJECT(id), { reason }),
 
+  /** Marketing/operations review of a drawdown order's operation request. */
+  reviewOperation: (
+    id: string,
+    decision: "ACCEPT" | "REQUEST_CHANGES" | "ADJUST_PRICE",
+    options: { note?: string; amount?: number } = {},
+  ) =>
+    postBooking<BookingDetail>(`/bookings/${id}/operation/review`, {
+      decision,
+      ...options,
+    }),
+
+  /** Adjust a booking's total price (pass null amount to clear the adjustment). */
+  adjustPrice: (id: string, amount: number | null, reason?: string) =>
+    postBooking<BookingDetail>(`/bookings/${id}/adjust-price`, {
+      amount,
+      reason,
+    }),
+
   approveStep: ({ id, stepId, requiredRole }: ApproveStepPayload) =>
     postBooking<BookingDetail>(B.APPROVE_STEP(id, stepId), { requiredRole }),
 

apps/edr-freight-web/backoffice/src/services/customers.service.ts

@@ -88,4 +88,11 @@ export const customersService = {
       )
       .then((r) => r.data);
   },
+
+  /** Approve / change a company's status (e.g. pending → active). */
+  setCompanyStatus(companyId: string, status: string): Promise<unknown> {
+    return apiClient
+      .patch(URL_CONSTANTS.COMPANIES.BY_ID(companyId), { status })
+      .then((r) => r.data);
+  },
 };

apps/edr-freight-web/backoffice/src/services/first-mile.service.ts

@@ -0,0 +1,67 @@
+import { api } from '../auth/http';
+import { URL_CONSTANTS } from '@/constants/URLS';
+
+export const FIRST_MILE_STATUSES = [
+  'PAYMENT_PENDING',
+  'READY_TO_TRANSIT',
+  'IN_TRANSIT',
+  'RECEIVED_TO_PORT',
+] as const;
+export type FirstMileApiStatus = (typeof FIRST_MILE_STATUSES)[number];
+
+export interface FirstMileBooking {
+  id: string;
+  reference: string;
+  firstMilePickupAddress?: string | null;
+  cargoFreeText?: string | null;
+  cargoTotalWeightVgm: number;
+  totalAmount: number;
+  scheduledDate?: string | null;
+  company?: { id: string; name?: string; phone?: string | null; contactPersonName?: string | null; contactPersonPhone?: string | null } | null;
+  serviceType?: { id: string; label?: string } | null;
+  originYard?: { id: string; label?: string } | null;
+  destinationYard?: { id: string; label?: string } | null;
+  cargoType?: { id: string; label?: string } | null;
+}
+
+export interface FirstMileVehicle {
+  id: string;
+  plateNumber: string;
+  manufacturer: string;
+  model: string;
+  code?: string | null;
+  powerPlateNo?: string | null;
+  trailerPlateNo?: string | null;
+}
+
+export interface FirstMileRecord {
+  id: string;
+  bookingId: string;
+  status: FirstMileApiStatus;
+  advancedPayment: number;
+  remainingPayment: number;
+  estimatedKm?: number | null;
+  exactKm?: number | null;
+  vehicleId?: string | null;
+  booking?: FirstMileBooking | null;
+  vehicle?: FirstMileVehicle | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface FirstMileListResponse {
+  data: FirstMileRecord[];
+  meta: { total: number; page: number; pageSize: number; totalPages: number };
+}
+
+const FM = URL_CONSTANTS.FIRST_MILE;
+
+export const firstMileService = {
+  list: (pageSize = 1000) =>
+    api.get<FirstMileListResponse>(`${FM.BASE}?pageSize=${pageSize}`),
+  getById: (id: string) => api.get<FirstMileRecord>(FM.BY_ID(id)),
+  update: (id: string, data: { status?: FirstMileApiStatus; vehicleId?: string | null }) =>
+    api.patch<FirstMileRecord>(FM.BY_ID(id), data),
+  accept: (bookingReference: string) =>
+    api.post<FirstMileRecord>(FM.ACCEPT(bookingReference)),
+};

apps/edr-freight-web/backoffice/src/services/last-mile.service.ts

@@ -0,0 +1,67 @@
+import { api } from '../auth/http';
+import { URL_CONSTANTS } from '@/constants/URLS';
+
+export const LAST_MILE_STATUSES = [
+  'PAYMENT_PENDING',
+  'READY_TO_TRANSIT',
+  'IN_TRANSIT',
+  'DELIVERED',
+] as const;
+export type LastMileApiStatus = (typeof LAST_MILE_STATUSES)[number];
+
+export interface LastMileBooking {
+  id: string;
+  reference: string;
+  lastMileDeliveryAddress?: string | null;
+  cargoFreeText?: string | null;
+  cargoTotalWeightVgm: number;
+  totalAmount: number;
+  scheduledDate?: string | null;
+  company?: { id: string; name?: string; phone?: string | null; contactPersonName?: string | null; contactPersonPhone?: string | null } | null;
+  serviceType?: { id: string; name?: string } | null;
+  originYard?: { id: string; name?: string } | null;
+  destinationYard?: { id: string; name?: string } | null;
+  cargoType?: { id: string; name?: string } | null;
+}
+
+export interface LastMileVehicle {
+  id: string;
+  plateNumber: string;
+  manufacturer: string;
+  model: string;
+  code?: string | null;
+  powerPlateNo?: string | null;
+  trailerPlateNo?: string | null;
+}
+
+export interface LastMileRecord {
+  id: string;
+  bookingId: string;
+  status: LastMileApiStatus;
+  advancedPayment: number;
+  remainingPayment: number;
+  estimatedKm?: number | null;
+  exactKm?: number | null;
+  vehicleId?: string | null;
+  booking?: LastMileBooking | null;
+  vehicle?: LastMileVehicle | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface LastMileListResponse {
+  data: LastMileRecord[];
+  meta: { total: number; page: number; pageSize: number; totalPages: number };
+}
+
+const LM = URL_CONSTANTS.LAST_MILE;
+
+export const lastMileService = {
+  list: (pageSize = 1000) =>
+    api.get<LastMileListResponse>(`${LM.BASE}?pageSize=${pageSize}`),
+  getById: (id: string) => api.get<LastMileRecord>(LM.BY_ID(id)),
+  update: (id: string, data: { status?: LastMileApiStatus; vehicleId?: string | null }) =>
+    api.patch<LastMileRecord>(LM.BY_ID(id), data),
+  accept: (bookingReference: string) =>
+    api.post<LastMileRecord>(LM.ACCEPT(bookingReference)),
+};

apps/edr-freight-web/backoffice/src/services/ruleEngine/ruleEngine.service.ts

@@ -30,7 +30,6 @@ const RESOURCE_BASE: Record<RuleEngineResourceSlug, string> = {
   "wagon-types": URL_CONSTANTS.RULE_ENGINE.WAGON_TYPES,
   "priority-configs": URL_CONSTANTS.RULE_ENGINE.PRIORITY_CONFIGS,
   "service-types": URL_CONSTANTS.RULE_ENGINE.SERVICE_TYPES,
-  "surcharge-types": URL_CONSTANTS.RULE_ENGINE.SURCHARGE_TYPES,
   "weight-limit-rules": URL_CONSTANTS.RULE_ENGINE.WEIGHT_LIMIT_RULES,
   yards: URL_CONSTANTS.RULE_ENGINE.YARDS,
   "shipping-lines": URL_CONSTANTS.RULE_ENGINE.SHIPPING_LINES,
@@ -50,8 +49,6 @@ const byIdPath = (resource: RuleEngineResourceSlug, id: string): string => {
       return URL_CONSTANTS.RULE_ENGINE.PRIORITY_CONFIG_BY_ID(id);
     case "service-types":
       return URL_CONSTANTS.RULE_ENGINE.SERVICE_TYPE_BY_ID(id);
-    case "surcharge-types":
-      return URL_CONSTANTS.RULE_ENGINE.SURCHARGE_TYPE_BY_ID(id);
     case "weight-limit-rules":
       return URL_CONSTANTS.RULE_ENGINE.WEIGHT_LIMIT_RULE_BY_ID(id);
     case "yards":

apps/edr-freight-web/backoffice/src/services/vehicles.service.ts

@@ -26,6 +26,9 @@ export interface Vehicle {
   capacity: number;
   status: VehicleStatus;
   description?: string | null;
+  code?: string | null;
+  powerPlateNo?: string | null;
+  trailerPlateNo?: string | null;
   createdAt: string;
   updatedAt: string;
 }

apps/edr-freight-web/backoffice/src/services/warehouse.service.ts

@@ -48,6 +48,7 @@ import type {
   Warehouse,
   WarehouseActivityLog,
   WarehouseDashboard,
+  WarehouseFacility,
   WarehouseFilter,
   WarehouseInventoryItem,
   WarehouseLoading,
@@ -67,15 +68,19 @@ export const warehouseService = {
       params: cleanParams(filter ?? {}),
     }),
   dashboard: () => apiClient.get<WarehouseDashboard>(URL_CONSTANTS.WAREHOUSES.DASHBOARD),
+  getDashboardSummary: (_filter?: InventoryFilter) =>
+    apiClient.get<WarehouseDashboard>(URL_CONSTANTS.WAREHOUSES.DASHBOARD),
   getById: (id: string) => apiClient.get<Warehouse>(URL_CONSTANTS.WAREHOUSES.BY_ID(id)),
   create: (payload: SaveWarehousePayload) =>
     apiClient.post<Warehouse>(URL_CONSTANTS.WAREHOUSES.BASE, payload),
   update: (id: string, payload: Partial<SaveWarehousePayload>) =>
     apiClient.patch<Warehouse>(URL_CONSTANTS.WAREHOUSES.BY_ID(id), payload),
+  listFacilities: () => apiClient.get<WarehouseFacility[]>(URL_CONSTANTS.RULE_ENGINE.YARDS),
 
   // ── Yards ────────────────────────────────────────────────────────────────
   listYards: (warehouseId: string) =>
     apiClient.get<WarehouseYard[]>(URL_CONSTANTS.WAREHOUSES.YARDS(warehouseId)),
+  listAllYards: () => apiClient.get<WarehouseYard[]>(URL_CONSTANTS.WAREHOUSE_YARDS.BASE),
   createYard: (warehouseId: string, payload: SaveYardPayload) =>
     apiClient.post<WarehouseYard>(URL_CONSTANTS.WAREHOUSES.YARDS(warehouseId), payload),
   getYard: (id: string) => apiClient.get<WarehouseYard>(URL_CONSTANTS.WAREHOUSE_YARDS.BY_ID(id)),
@@ -85,6 +90,7 @@ export const warehouseService = {
   // ── Zones ──────────────────────────────────────────────────────────────
   listZones: (yardId: string) =>
     apiClient.get<WarehouseZone[]>(URL_CONSTANTS.WAREHOUSE_YARDS.ZONES(yardId)),
+  listAllZones: () => apiClient.get<WarehouseZone[]>(URL_CONSTANTS.WAREHOUSE_ZONES.BASE),
   createZone: (yardId: string, payload: SaveZonePayload) =>
     apiClient.post<WarehouseZone>(URL_CONSTANTS.WAREHOUSE_YARDS.ZONES(yardId), payload),
   getZone: (id: string) => apiClient.get<WarehouseZone>(URL_CONSTANTS.WAREHOUSE_ZONES.BY_ID(id)),
@@ -124,6 +130,10 @@ export const warehouseService = {
     apiClient.post<WarehouseInventoryItem>(URL_CONSTANTS.WAREHOUSE_INVENTORY.MARK_READY_PICKUP(id)),
   release: (id: string, payload: ReleaseOrderPayload) =>
     apiClient.post<WarehouseInventoryItem>(URL_CONSTANTS.WAREHOUSE_INVENTORY.RELEASE(id), payload),
+  downloadReleaseDocument: (id: string) =>
+    apiClient.get<Blob>(URL_CONSTANTS.WAREHOUSE_INVENTORY.RELEASE_DOCUMENT(id), {
+      responseType: 'blob',
+    }),
   deliver: (id: string, payload: DeliverInventoryPayload) =>
     apiClient.post<WarehouseInventoryItem>(URL_CONSTANTS.WAREHOUSE_INVENTORY.DELIVER(id), payload),
 

apps/edr-freight-web/backoffice/src/types/booking.ts

@@ -119,6 +119,24 @@ export interface BookingDetail {
   status: BookingStatus;
   scheduledDate: string;
   totalAmount: number;
+  adjustedTotalAmount?: number | null;
+  adjustedByStaffId?: string | null;
+  adjustedAt?: string | null;
+  adjustmentReason?: string | null;
+  /** Contract validity window set by the backoffice when accepting. */
+  contractValidityDays?: number | null;
+  contractValidFrom?: string | null;
+  contractValidUntil?: string | null;
+  pricingBreakdown?: {
+    currency: string;
+    totalAmount: number;
+    lineItems: Array<{
+      code: string;
+      description: string;
+      amount: number;
+      currency: string;
+    }>;
+  } | null;
   paymentStatus: string;
   paymentCurrency: string;
   contractType: string;
@@ -126,7 +144,6 @@ export interface BookingDetail {
   tradeDirection: string;
   cargoTotalWeightVgm: number;
   isHazardous: boolean;
-  allowConsolidation: boolean;
   consolidationPartnerId?: string | null;
   consolidationPartner?: BookingNamedRef & { reference?: string } | null;
   priorityScore: number;

apps/edr-freight-web/backoffice/src/types/rule-engine/index.ts

@@ -4,7 +4,6 @@ export type RuleEngineResourceSlug =
   | "wagon-types"
   | "priority-configs"
   | "service-types"
-  | "surcharge-types"
   | "weight-limit-rules"
   | "yards"
   | "shipping-lines"

apps/edr-freight-web/backoffice/src/types/warehouse.ts

@@ -27,6 +27,8 @@ export const INVENTORY_STATUSES = [
   'RECEIVED',
   'STORED',
   'RESERVED',
+  'ARRIVED_AT_WAREHOUSE',
+  'UNDER_INSPECTION',
   'READY_FOR_LOADING',
   'LOADED',
   'DISPATCHED',
@@ -57,6 +59,8 @@ export const INVENTORY_NEXT_ACTION: Record<InventoryStatus, InventoryAction | nu
   RECEIVED: 'store',
   STORED: 'reserve',
   RESERVED: 'ready-for-loading',
+  ARRIVED_AT_WAREHOUSE: null,
+  UNDER_INSPECTION: null,
   READY_FOR_LOADING: 'load',
   LOADED: 'dispatch',
   DISPATCHED: null,
@@ -122,6 +126,7 @@ export interface WarehouseYard {
   currentVolume: number;
   status: WarehouseStatus;
   isActive: boolean;
+  warehouse?: Pick<Warehouse, 'id' | 'name' | 'code'> | null;
   zones?: WarehouseZone[];
 }
 
@@ -146,6 +151,8 @@ export interface Facility {
   isActive?: boolean;
 }
 
+export type WarehouseFacility = Facility;
+
 export interface Warehouse {
   id: string;
   name: string;
@@ -459,8 +466,11 @@ export interface ImportTrainItem {
 
 export interface InventoryInquiryResult {
   id: string;
-  bookingId: string;
+  inventoryId: string | null;
+  bookingId: string | null;
+  bookingReference: string | null;
   bookingNumber: string | null;
+  bookingStatus: string | null;
   customerName: string | null;
   containerNumber: string | null;
   cargoType: string | null;
@@ -469,7 +479,11 @@ export interface InventoryInquiryResult {
   warehouse: { id: string; name: string; code: string } | null;
   yard: { id: string; name: string; code: string } | null;
   zone: { id: string; name: string; code: string } | null;
-  status: InventoryStatus;
+  status: InventoryStatus | null;
+  trainNumber: string | null;
+  trainStatus: string | null;
+  route: string | null;
+  locationSummary: string | null;
   quantity: number;
   weight: number;
   arrivedAt: string | null;
@@ -606,6 +620,8 @@ export interface FeePreview {
   endIsOpen: boolean;
   elapsedDays: number;
   chargeableDays: number;
+  containerCount: number;
+  billableUnits: number;
   amount: number;
 }
 
@@ -757,6 +773,28 @@ export interface ReceiveInventoryPayload {
   notes?: string;
 }
 
+export interface MoveInventoryPayload {
+  warehouseId: string;
+  yardId: string;
+  zoneId: string;
+  remarks?: string;
+}
+
+export interface ReserveInventoryPayload {
+  bookingId: string;
+}
+
+export interface WarehouseDashboardSummary {
+  totalWarehouses: number;
+  totalInventory: number;
+  receivedToday: number;
+  stored: number;
+  reserved: number;
+  readyForLoading: number;
+  loaded: number;
+  dispatched: number;
+}
+
 export interface WarehouseFilter {
   search?: string;
   type?: WarehouseType;
@@ -765,6 +803,7 @@ export interface WarehouseFilter {
 }
 
 export interface InventoryFilter {
+  facilityId?: string;
   warehouseId?: string;
   yardId?: string;
   zoneId?: string;
@@ -774,9 +813,12 @@ export interface InventoryFilter {
   goodsId?: string;
   status?: InventoryStatus;
   search?: string;
+  dateFrom?: string;
+  dateTo?: string;
 }
 
 export interface InventoryInquiryFilter {
+  bookingReference?: string;
   bookingNumber?: string;
   containerNumber?: string;
   cargoType?: string;