add GL operations for customs risk assignment, duty advising, and incident reporting

apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/ActionShell.tsx

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import { Badge, Box, Group, Stack, Text, ThemeIcon } from "@mantine/core";
+import { Check, type LucideIcon } from "lucide-react";
+
+export interface ActionShellProps {
+  icon: LucideIcon;
+  title: string;
+  subtitle?: string;
+  /** When true the action is already done — children are hidden, a done badge shows. */
+  done?: boolean;
+  doneLabel?: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * Consistent container for one GL action card: icon, title, and either the
+ * input controls (pending) or a completed badge (done). Keeps every GL action
+ * visually uniform inside {@link GlActionsPanel}.
+ */
+export function ActionShell({
+  icon: Icon,
+  title,
+  subtitle,
+  done,
+  doneLabel,
+  children,
+}: ActionShellProps) {
+  return (
+    <Box
+      p="md"
+      style={{
+        border: "1px solid var(--mantine-color-gray-2)",
+        borderRadius: 12,
+      }}
+    >
+      <Group justify="space-between" align="flex-start" wrap="nowrap" mb="sm">
+        <Group gap="sm" wrap="nowrap">
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={32}>
+            <Icon size={16} />
+          </ThemeIcon>
+          <Stack gap={0}>
+            <Text size="sm" fw={600}>
+              {title}
+            </Text>
+            {subtitle ? (
+              <Text size="xs" c="dimmed">
+                {subtitle}
+              </Text>
+            ) : null}
+          </Stack>
+        </Group>
+        {done ? (
+          typeof doneLabel === "string" || !doneLabel ? (
+            <Badge
+              color="edr-green"
+              variant="light"
+              radius="sm"
+              leftSection={<Check size={12} />}
+            >
+              {doneLabel ?? "Done"}
+            </Badge>
+          ) : (
+            doneLabel
+          )
+        ) : null}
+      </Group>
+      {!done ? children : null}
+    </Box>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/AdviseDutyCard.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import {
+  Button,
+  Group,
+  NumberInput,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { Receipt } from "lucide-react";
+import type { Freight } from "@edr/types";
+
+import { useAdviseDuty } from "@/hooks/contracts/useContracts";
+import { ActionShell } from "./ActionShell";
+
+export function AdviseDutyCard({
+  bookingId,
+  milestone,
+}: {
+  bookingId: string;
+  milestone: Freight.IClearanceMilestone;
+}) {
+  const advise = useAdviseDuty(bookingId);
+  const [amount, setAmount] = useState<number | string>("");
+  const [currency, setCurrency] = useState("ETB");
+  const [serial, setSerial] = useState("");
+
+  const done = milestone.status === "COMPLETED";
+  const meta = milestone.metadata;
+
+  return (
+    <ActionShell
+      icon={Receipt}
+      title="Duty & tax"
+      subtitle="Advise the duty/tax amount and declaration serial."
+      done={done}
+      doneLabel={
+        meta?.dutyAmount != null
+          ? `${meta.dutyAmount.toLocaleString()} ${meta.dutyCurrency ?? ""}`
+          : "Advised"
+      }
+    >
+      <Stack gap="sm">
+        <Group grow>
+          <NumberInput
+            label="Amount"
+            placeholder="0.00"
+            value={amount}
+            onChange={setAmount}
+            min={0}
+            thousandSeparator=","
+            size="sm"
+          />
+          <Select
+            label="Currency"
+            data={["ETB", "USD"]}
+            value={currency}
+            onChange={(v) => setCurrency(v ?? "ETB")}
+            size="sm"
+            allowDeselect={false}
+          />
+        </Group>
+        <TextInput
+          label="Declaration serial"
+          placeholder="e.g. IM4-2026-00123"
+          value={serial}
+          onChange={(e) => setSerial(e.currentTarget.value)}
+          size="sm"
+        />
+        <Group justify="space-between">
+          <Text size="xs" c="dimmed">
+            Customer uploads the payment slip after being advised.
+          </Text>
+          <Button
+            size="compact-sm"
+            color="edr-green"
+            loading={advise.isPending}
+            disabled={!amount || Number(amount) <= 0}
+            onClick={() =>
+              advise.mutate({
+                amount: Number(amount),
+                currency,
+                declarationSerial: serial.trim() || undefined,
+              })
+            }
+          >
+            Advise customer
+          </Button>
+        </Group>
+      </Stack>
+    </ActionShell>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/AssignRiskCard.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { Badge, Box, Button, Group, SegmentedControl, Text } from "@mantine/core";
+import { ShieldAlert } from "lucide-react";
+import type { Freight } from "@edr/types";
+
+import { useAssignRisk } from "@/hooks/contracts/useContracts";
+import { ActionShell } from "./ActionShell";
+
+const RISK_COLOR: Record<Freight.CustomsRiskLevel, string> = {
+  GREEN: "green",
+  YELLOW: "yellow",
+  RED: "red",
+};
+
+export function AssignRiskCard({
+  bookingId,
+  milestone,
+}: {
+  bookingId: string;
+  milestone: Freight.IClearanceMilestone;
+}) {
+  const assign = useAssignRisk(bookingId);
+  const [level, setLevel] = useState<Freight.CustomsRiskLevel>("GREEN");
+
+  const assigned = milestone.status === "COMPLETED";
+  const current = milestone.metadata?.riskLevel;
+
+  return (
+    <ActionShell
+      icon={ShieldAlert}
+      title="Customs risk"
+      subtitle="Assign the customs examination risk level."
+      done={assigned}
+      doneLabel={
+        current ? (
+          <Badge color={RISK_COLOR[current]} variant="filled" radius="sm">
+            {current}
+          </Badge>
+        ) : (
+          "Assigned"
+        )
+      }
+    >
+      <Box>
+        <SegmentedControl
+          fullWidth
+          value={level}
+          onChange={(v) => setLevel(v as Freight.CustomsRiskLevel)}
+          data={[
+            { label: "Green", value: "GREEN" },
+            { label: "Yellow", value: "YELLOW" },
+            { label: "Red", value: "RED" },
+          ]}
+        />
+        <Group justify="space-between" mt="sm">
+          <Text size="xs" c="dimmed">
+            Customer is notified of the assigned risk.
+          </Text>
+          <Button
+            size="compact-sm"
+            color="edr-green"
+            loading={assign.isPending}
+            onClick={() => assign.mutate({ riskLevel: level })}
+          >
+            Assign risk
+          </Button>
+        </Group>
+      </Box>
+    </ActionShell>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/AssignStationCard.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Button, Group, Select, Text } from "@mantine/core";
+import { MapPin } from "lucide-react";
+
+import { api } from "@/services/api";
+import { useAssignStation } from "@/hooks/contracts/useContracts";
+import { ActionShell } from "./ActionShell";
+
+/**
+ * Routes the shipment to an origin station (GL US-02). Binding a staff user is
+ * optional here — the station manager can assign one later.
+ */
+export function AssignStationCard({ bookingId }: { bookingId: string }) {
+  const { data: yards = [] } = useQuery(api.routes.yards.queryOptions());
+  const assign = useAssignStation(bookingId);
+  const [stationYardId, setStationYardId] = useState<string | null>(null);
+
+  return (
+    <ActionShell
+      icon={MapPin}
+      title="Station routing"
+      subtitle="Route this shipment to the handling station."
+    >
+      <Group align="flex-end" wrap="nowrap" gap="sm">
+        <Select
+          flex={1}
+          label="Station"
+          placeholder="Select station"
+          searchable
+          data={yards.map((y) => ({ value: y.id, label: y.label }))}
+          value={stationYardId}
+          onChange={setStationYardId}
+          size="sm"
+        />
+        <Button
+          size="compact-sm"
+          color="edr-green"
+          loading={assign.isPending}
+          disabled={!stationYardId}
+          onClick={() =>
+            stationYardId && assign.mutate({ stationYardId })
+          }
+        >
+          Route
+        </Button>
+      </Group>
+      <Text size="xs" c="dimmed" mt={6}>
+        The shipment moves to the selected station's queue.
+      </Text>
+    </ActionShell>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/GlActionsPanel.tsx

@@ -0,0 +1,67 @@
+import { useMemo } from "react";
+import { Stack, Text } from "@mantine/core";
+import type { Freight } from "@edr/types";
+
+import { SectionCard } from "@/components/bookings/detail/SectionCard";
+import { Flag } from "lucide-react";
+
+import { AssignStationCard } from "./AssignStationCard";
+import { AssignRiskCard } from "./AssignRiskCard";
+import { AdviseDutyCard } from "./AdviseDutyCard";
+import { GlDocumentUploadCard } from "./GlDocumentUploadCard";
+import { IncidentReportCard } from "./IncidentReportCard";
+
+export interface GlActionsPanelProps {
+  bookingId: string;
+  milestones: Freight.IClearanceMilestone[];
+}
+
+/** Find a milestone by code (post-booking milestones live on the booking). */
+function findMilestone(
+  milestones: Freight.IClearanceMilestone[],
+  code: string,
+): Freight.IClearanceMilestone | undefined {
+  return milestones.find((m) => m.milestoneCode === code);
+}
+
+/**
+ * Global Logistics action surface for a shipment. Each card is gated by whether
+ * its milestone exists on this shipment (import vs export differ) and renders the
+ * structured action (risk level, duty advice, document upload, incident report,
+ * station routing) that the plain "Complete" button can't capture.
+ */
+export function GlActionsPanel({ bookingId, milestones }: GlActionsPanelProps) {
+  const riskMs = useMemo(
+    () => findMilestone(milestones, "RISK_ASSIGNED"),
+    [milestones],
+  );
+  const dutyMs = useMemo(
+    () => findMilestone(milestones, "DUTY_TAXES_ADVISED"),
+    [milestones],
+  );
+
+  return (
+    <SectionCard icon={Flag} title="Global Logistics actions" accent="edr-green">
+      <Stack gap="md">
+        <Text size="xs" c="dimmed">
+          Structured GL operations for this shipment. Uploading a document
+          advances its milestone automatically.
+        </Text>
+
+        <AssignStationCard bookingId={bookingId} />
+
+        {dutyMs ? (
+          <AdviseDutyCard bookingId={bookingId} milestone={dutyMs} />
+        ) : null}
+
+        <GlDocumentUploadCard bookingId={bookingId} />
+
+        {riskMs ? (
+          <AssignRiskCard bookingId={bookingId} milestone={riskMs} />
+        ) : null}
+
+        <IncidentReportCard bookingId={bookingId} />
+      </Stack>
+    </SectionCard>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/GlDocumentUploadCard.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { Button, FileButton, Group, Select, Stack, Text } from "@mantine/core";
+import { FileUp, Upload } from "lucide-react";
+
+import { useUploadGlDocuments } from "@/hooks/contracts/useContracts";
+import { ActionShell } from "./ActionShell";
+
+/**
+ * GL post-booking document slots. The fieldname (value) maps server-side to a
+ * doc-triggered milestone in gl-operations.service.ts — uploading auto-advances
+ * the matching milestone.
+ */
+const GL_DOC_SLOTS = [
+  { value: "delivery_order", label: "Delivery Order (DO)" },
+  { value: "release_order", label: "Release Order (RO)" },
+  { value: "t1_transport_document", label: "T1 Transport Document" },
+  { value: "import_release", label: "Import Release" },
+  { value: "full_in_interchange", label: "Full-in Interchange" },
+  { value: "final_declaration", label: "Final Declaration" },
+];
+
+export function GlDocumentUploadCard({ bookingId }: { bookingId: string }) {
+  const upload = useUploadGlDocuments(bookingId);
+  const [slot, setSlot] = useState<string | null>(GL_DOC_SLOTS[0].value);
+  const [file, setFile] = useState<File | null>(null);
+
+  const submit = () => {
+    if (!slot || !file) return;
+    upload.mutate({ [slot]: file });
+    setFile(null);
+  };
+
+  return (
+    <ActionShell
+      icon={FileUp}
+      title="GL documents"
+      subtitle="Upload DO, RO, T1, release, interchange — advances milestones."
+    >
+      <Stack gap="sm">
+        <Select
+          label="Document type"
+          data={GL_DOC_SLOTS}
+          value={slot}
+          onChange={setSlot}
+          size="sm"
+          allowDeselect={false}
+        />
+        <Group justify="space-between" wrap="nowrap">
+          <FileButton onChange={setFile} accept="application/pdf,image/*">
+            {(props) => (
+              <Button
+                {...props}
+                variant="light"
+                color="gray"
+                size="compact-sm"
+                leftSection={<Upload size={14} />}
+              >
+                {file ? file.name : "Choose file"}
+              </Button>
+            )}
+          </FileButton>
+          <Button
+            size="compact-sm"
+            color="edr-green"
+            loading={upload.isPending}
+            disabled={!file || !slot}
+            onClick={submit}
+          >
+            Upload
+          </Button>
+        </Group>
+        {!file ? (
+          <Text size="xs" c="dimmed">
+            PDF or image. The matching milestone completes on upload.
+          </Text>
+        ) : null}
+      </Stack>
+    </ActionShell>
+  );
+}

apps/edr-freight-web/backoffice/src/components/contracts/gl-actions/IncidentReportCard.tsx

@@ -0,0 +1,121 @@
+import { useState } from "react";
+import {
+  Badge,
+  Button,
+  FileButton,
+  Group,
+  Select,
+  Stack,
+  Text,
+  Textarea,
+} from "@mantine/core";
+import { AlertTriangle, ImagePlus } from "lucide-react";
+import type { Freight } from "@edr/types";
+
+import {
+  useBookingIncidents,
+  useReportIncident,
+} from "@/hooks/contracts/useContracts";
+import { ActionShell } from "./ActionShell";
+
+const INCIDENT_OPTIONS: { value: Freight.IncidentType; label: string }[] = [
+  { value: "SEAL_BROKEN", label: "Seal is broken" },
+  { value: "CONTAINER_OPENED", label: "Container opened" },
+  { value: "CONTAINER_DAMAGED", label: "Container damaged" },
+  { value: "FLUID_LEAKING", label: "Fluid leaking" },
+];
+
+const LABEL: Record<Freight.IncidentType, string> = {
+  SEAL_BROKEN: "Seal broken",
+  CONTAINER_OPENED: "Container opened",
+  CONTAINER_DAMAGED: "Container damaged",
+  FLUID_LEAKING: "Fluid leaking",
+};
+
+export function IncidentReportCard({ bookingId }: { bookingId: string }) {
+  const report = useReportIncident(bookingId);
+  const { data: incidents } = useBookingIncidents(bookingId);
+  const [type, setType] = useState<Freight.IncidentType>("SEAL_BROKEN");
+  const [description, setDescription] = useState("");
+  const [photos, setPhotos] = useState<File[]>([]);
+
+  const submit = () => {
+    if (!description.trim()) return;
+    report.mutate(
+      { incidentType: type, description: description.trim(), photos },
+      {
+        onSuccess: () => {
+          setDescription("");
+          setPhotos([]);
+        },
+      },
+    );
+  };
+
+  return (
+    <ActionShell
+      icon={AlertTriangle}
+      title="Cargo exception"
+      subtitle="Log a damage/anomaly with photo evidence (GL Djibouti)."
+    >
+      <Stack gap="sm">
+        {incidents && incidents.length > 0 ? (
+          <Stack gap={4}>
+            {incidents.map((inc) => (
+              <Group key={inc.id} gap={8} wrap="nowrap">
+                <Badge color="red" variant="light" radius="sm">
+                  {LABEL[inc.incidentType]}
+                </Badge>
+                <Text size="xs" c="dimmed" truncate>
+                  {inc.description}
+                </Text>
+              </Group>
+            ))}
+          </Stack>
+        ) : null}
+
+        <Select
+          label="Incident type"
+          data={INCIDENT_OPTIONS}
+          value={type}
+          onChange={(v) => setType((v as Freight.IncidentType) ?? "SEAL_BROKEN")}
+          size="sm"
+          allowDeselect={false}
+        />
+        <Textarea
+          label="Description"
+          placeholder="Describe the anomaly…"
+          value={description}
+          onChange={(e) => setDescription(e.currentTarget.value)}
+          autosize
+          minRows={2}
+          size="sm"
+        />
+        <Group justify="space-between" wrap="nowrap">
+          <FileButton onChange={setPhotos} accept="image/jpeg,image/png" multiple>
+            {(props) => (
+              <Button
+                {...props}
+                variant="light"
+                color="gray"
+                size="compact-sm"
+                leftSection={<ImagePlus size={14} />}
+              >
+                {photos.length > 0 ? `${photos.length} photo(s)` : "Add photos"}
+              </Button>
+            )}
+          </FileButton>
+          <Button
+            size="compact-sm"
+            color="red"
+            loading={report.isPending}
+            disabled={!description.trim()}
+            onClick={submit}
+          >
+            Report incident
+          </Button>
+        </Group>
+      </Stack>
+    </ActionShell>
+  );
+}

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

@@ -59,6 +59,8 @@ export const QUERY_KEYS = {
     milestones: (id: string) => ["contracts", "milestones", id] as const,
     bookingMilestones: (bookingId: string) =>
       ["contracts", "booking-milestones", bookingId] as const,
+    bookingIncidents: (bookingId: string) =>
+      ["contracts", "booking-incidents", bookingId] as const,
   },
 
   BOOKING_ORDERS: {

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

@@ -155,6 +155,17 @@ export const URL_CONSTANTS = {
       `/contracts/bookings/${bookingId}/milestones`,
     COMPLETE_BOOKING_MILESTONE: (bookingId: string, code: string) =>
       `/contracts/bookings/${bookingId}/milestones/${code}/complete`,
+    // ── GL post-booking operational actions ──
+    BOOKING_RISK: (bookingId: string) =>
+      `/contracts/bookings/${bookingId}/risk`,
+    BOOKING_DUTY: (bookingId: string) =>
+      `/contracts/bookings/${bookingId}/duty`,
+    BOOKING_STATION_ASSIGN: (bookingId: string) =>
+      `/contracts/bookings/${bookingId}/station-assign`,
+    BOOKING_GL_DOCUMENTS: (bookingId: string) =>
+      `/contracts/bookings/${bookingId}/documents`,
+    BOOKING_INCIDENTS: (bookingId: string) =>
+      `/contracts/bookings/${bookingId}/incidents`,
   },
 
   OTP: {

apps/edr-freight-web/backoffice/src/hooks/contracts/useContracts.ts

@@ -297,3 +297,106 @@ export function useCompleteMilestone(bookingId: string) {
     onError: () => toast.error("Failed to complete milestone"),
   });
 }
+
+function invalidateMilestones(qc: QueryClient, bookingId: string) {
+  void qc.invalidateQueries({
+    queryKey: QUERY_KEYS.CONTRACTS.bookingMilestones(bookingId),
+  });
+}
+
+/** Assign a customs risk level (completes RISK_ASSIGNED). */
+export function useAssignRisk(bookingId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: {
+      riskLevel: Freight.CustomsRiskLevel;
+      note?: string;
+    }) => contractsService.assignRisk(bookingId, payload),
+    onSuccess: () => {
+      toast.success("Customs risk assigned");
+      invalidateMilestones(qc, bookingId);
+    },
+    onError: () => toast.error("Failed to assign risk"),
+  });
+}
+
+/** Advise duty & tax (completes DUTY_TAXES_ADVISED). */
+export function useAdviseDuty(bookingId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: {
+      amount: number;
+      currency: string;
+      declarationSerial?: string;
+      note?: string;
+    }) => contractsService.adviseDuty(bookingId, payload),
+    onSuccess: () => {
+      toast.success("Duty & tax advised to customer");
+      invalidateMilestones(qc, bookingId);
+    },
+    onError: () => toast.error("Failed to advise duty & tax"),
+  });
+}
+
+/** Route the shipment to a station + bind GL staff. */
+export function useAssignStation(bookingId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: { stationYardId: string; staffId?: string }) =>
+      contractsService.assignStation(bookingId, payload),
+    onSuccess: () => {
+      toast.success("Shipment routed to station");
+      void qc.invalidateQueries({
+        queryKey: QUERY_KEYS.BOOKINGS.byId(bookingId),
+      });
+    },
+    onError: () => toast.error("Failed to assign station"),
+  });
+}
+
+/** Upload GL post-booking documents (DO/RO/T1/…); auto-completes milestones. */
+export function useUploadGlDocuments(bookingId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (files: Record<string, File | null>) =>
+      contractsService.uploadGlDocuments(bookingId, files),
+    onSuccess: (res) => {
+      const n = res.completedMilestones.length;
+      toast.success(
+        n > 0
+          ? `Uploaded — ${n} milestone${n === 1 ? "" : "s"} advanced`
+          : "Documents uploaded",
+      );
+      invalidateMilestones(qc, bookingId);
+    },
+    onError: () => toast.error("Failed to upload documents"),
+  });
+}
+
+/** Incidents for a shipment (damage / exceptions). */
+export function useBookingIncidents(bookingId: string | undefined) {
+  return useQuery({
+    queryKey: QUERY_KEYS.CONTRACTS.bookingIncidents(bookingId ?? ""),
+    queryFn: () => contractsService.listIncidents(bookingId!),
+    enabled: !!bookingId,
+  });
+}
+
+/** Report a cargo exception with photos. */
+export function useReportIncident(bookingId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: {
+      incidentType: Freight.IncidentType;
+      description: string;
+      photos: File[];
+    }) => contractsService.reportIncident(bookingId, payload),
+    onSuccess: () => {
+      toast.success("Incident reported");
+      void qc.invalidateQueries({
+        queryKey: QUERY_KEYS.CONTRACTS.bookingIncidents(bookingId),
+      });
+    },
+    onError: () => toast.error("Failed to report incident"),
+  });
+}

apps/edr-freight-web/backoffice/src/pages/contracts/BookingMilestonesPage.tsx

@@ -18,6 +18,7 @@ import { PageContainer } from "@/components/page";
 import { PageHeader } from "@/components/page/PageHeader";
 import { SectionCard } from "@/components/bookings/detail/SectionCard";
 import { ClearanceMilestoneTimeline } from "@/components/contracts/ClearanceMilestoneTimeline";
+import { GlActionsPanel } from "@/components/contracts/gl-actions/GlActionsPanel";
 import {
   useBookingMilestones,
   useCompleteMilestone,
@@ -66,21 +67,30 @@ export default function BookingMilestonesPage() {
 
         <Grid gap="lg">
           <Grid.Col span={{ base: 12, lg: 8 }}>
-            <SectionCard icon={Flag} title="Clearance milestones">
-              {isLoading ? (
-                <Center py="xl">
-                  <Loader color="edr-green" size="sm" />
-                </Center>
-              ) : (
-                <ClearanceMilestoneTimeline
+            <Stack gap="lg">
+              <SectionCard icon={Flag} title="Clearance milestones">
+                {isLoading ? (
+                  <Center py="xl">
+                    <Loader color="edr-green" size="sm" />
+                  </Center>
+                ) : (
+                  <ClearanceMilestoneTimeline
+                    milestones={milestones ?? []}
+                    busy={complete.isPending}
+                    onComplete={(code, note) =>
+                      complete.mutate({ code, note })
+                    }
+                  />
+                )}
+              </SectionCard>
+
+              {id ? (
+                <GlActionsPanel
+                  bookingId={id}
                   milestones={milestones ?? []}
-                  busy={complete.isPending}
-                  onComplete={(code, note) =>
-                    complete.mutate({ code, note })
-                  }
                 />
-              )}
-            </SectionCard>
+              ) : null}
+            </Stack>
           </Grid.Col>
 
           <Grid.Col span={{ base: 12, lg: 4 }}>

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

@@ -250,4 +250,75 @@ export const contractsService = {
       C.COMPLETE_BOOKING_MILESTONE(bookingId, code),
       { note },
     ),
+
+  // ── GL post-booking operational actions ──
+  assignRisk: (
+    bookingId: string,
+    payload: { riskLevel: Freight.CustomsRiskLevel; note?: string },
+  ) =>
+    postContract<Freight.IClearanceMilestone>(
+      C.BOOKING_RISK(bookingId),
+      payload,
+    ),
+
+  adviseDuty: (
+    bookingId: string,
+    payload: {
+      amount: number;
+      currency: string;
+      declarationSerial?: string;
+      note?: string;
+    },
+  ) =>
+    postContract<Freight.IClearanceMilestone>(
+      C.BOOKING_DUTY(bookingId),
+      payload,
+    ),
+
+  assignStation: (
+    bookingId: string,
+    payload: { stationYardId: string; staffId?: string },
+  ) => postContract(C.BOOKING_STATION_ASSIGN(bookingId), payload),
+
+  uploadGlDocuments: async (
+    bookingId: string,
+    files: Record<string, File | null>,
+  ): Promise<{ uploaded: number; completedMilestones: string[] }> => {
+    const form = new FormData();
+    for (const [key, file] of Object.entries(files)) {
+      if (file) form.append(key, file);
+    }
+    const response = await client.post(C.BOOKING_GL_DOCUMENTS(bookingId), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as {
+      uploaded: number;
+      completedMilestones: string[];
+    };
+  },
+
+  listIncidents: async (
+    bookingId: string,
+  ): Promise<Freight.IClearanceIncident[]> => {
+    const response = await client.get(C.BOOKING_INCIDENTS(bookingId));
+    return (unwrap(response.data) ?? []) as Freight.IClearanceIncident[];
+  },
+
+  reportIncident: async (
+    bookingId: string,
+    payload: {
+      incidentType: Freight.IncidentType;
+      description: string;
+      photos: File[];
+    },
+  ): Promise<Freight.IClearanceIncident> => {
+    const form = new FormData();
+    form.append("incidentType", payload.incidentType);
+    form.append("description", payload.description);
+    for (const photo of payload.photos) form.append("photos", photo);
+    const response = await client.post(C.BOOKING_INCIDENTS(bookingId), form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return unwrap(response.data) as Freight.IClearanceIncident;
+  },
 };