Add end-to-end tests for import corridor flows

- Implement full train import journey with six container bookings filling a 54-wagon train.
- Create tests for split offer and rebooking scenarios, handling payment expiry and waiting list promotions.
- Add tests for handling waiting bookings expiration when the train is full.
- Implement tests for reopening booking windows after expired reservations.
- Seed database with necessary corridor data for import flows, including yards, container types, locomotives, and rates.

apps/edr-freight-web/backoffice/src/components/contracts/ContractApprovalStepsCard.tsx

@@ -16,6 +16,8 @@ import type { Freight } from "@edr/types";
 import { formatContractApprovalProgress } from "@/features/contracts/contract-approval-progress";
 import { SectionCard } from "@/components/bookings/detail/SectionCard";
 import type { useContractMutations } from "@/hooks/contracts/useContracts";
+import { useAuth } from "@/auth/useAuth";
+import { canApproveContractStep } from "@/lib/permissions";
 
 type Mutations = ReturnType<typeof useContractMutations>;
 
@@ -29,6 +31,7 @@ export function ContractApprovalStepsCard({
   contract,
   mutations,
 }: ContractApprovalStepsCardProps) {
+  const { user } = useAuth();
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [pendingStep, setPendingStep] =
     useState<Freight.IContractApprovalStep | null>(null);
@@ -166,6 +169,10 @@ export function ContractApprovalStepsCard({
                 key={step.id}
                 step={step}
                 isNext={actionable && nextPending?.id === step.id}
+                // Buttons show only to the step's actual approver (matching
+                // position type): a chief step never offers Approve/Reject to a
+                // marketing officer. Everyone still sees the "next" highlight.
+                canAct={canApproveContractStep(user, step.requiredRole)}
                 isPending={
                   mutations.approveStep.isPending ||
                   mutations.rejectStep.isPending
@@ -306,12 +313,14 @@ export function ContractApprovalStepsCard({
 function StepRow({
   step,
   isNext,
+  canAct,
   isPending,
   onApprove,
   onReject,
 }: {
   step: Freight.IContractApprovalStep;
   isNext: boolean;
+  canAct: boolean;
   isPending: boolean;
   onApprove: () => void;
   onReject: () => void;
@@ -372,8 +381,11 @@ function StepRow({
           )}
         </Box>
       </Group>
-      <Group gap="xs" wrap="nowrap" style={{ flexShrink: 0 }}>
-        {isNext && step.status === "PENDING" && (
+      {/* One element type per row: action buttons on the active step (they
+          already imply "pending & actionable"), a status badge otherwise.
+          Mixing compact buttons + a badge here made them read as misaligned. */}
+      <Group gap="xs" wrap="nowrap" align="center" style={{ flexShrink: 0 }}>
+        {isNext && canAct && step.status === "PENDING" ? (
           <>
             <Button
               size="compact-sm"
@@ -395,16 +407,17 @@ function StepRow({
               Reject
             </Button>
           </>
+        ) : (
+          <Badge
+            variant="light"
+            color={statusColor}
+            size="sm"
+            radius="sm"
+            tt="uppercase"
+          >
+            {step.status}
+          </Badge>
         )}
-        <Badge
-          variant="light"
-          color={statusColor}
-          size="sm"
-          radius="sm"
-          tt="uppercase"
-        >
-          {step.status}
-        </Badge>
       </Group>
     </Group>
   );