diff --git a/apps/edr-freight-api/src/modules/bookings/bookings.controller.ts b/apps/edr-freight-api/src/modules/bookings/bookings.controller.ts
index ee7b218ea..381510e7e 100644
--- a/apps/edr-freight-api/src/modules/bookings/bookings.controller.ts
+++ b/apps/edr-freight-api/src/modules/bookings/bookings.controller.ts
@@ -6,6 +6,7 @@ import {
   ForbiddenException,
   Get,
   HttpCode,
+  NotFoundException,
   Param,
   ParseUUIDPipe,
   Patch,
@@ -786,6 +787,64 @@ export class BookingsController {
   }
 
   /** Owner-or-staff gate shared by the per-cancellation actions. */
+  /**
+   * Scope a clearance READ that a transit agent may be making.
+   *
+   * Transit agents are portal accounts holding no permission and belonging to
+   * no company, so the audience guards admit them but the usual company-based
+   * ownership check would 404 every booking. This narrows them to the shipments
+   * assigned to them and leaves every other caller — staff and owning customers
+   * — on the path they already had. Purely widening: nothing that passed before
+   * starts failing here.
+   */
+  private async assertTransitAgentScope(
+    bookingId: string,
+    user: TCurrentUser,
+  ): Promise<void> {
+    const userId = user?.id;
+    if (!userId) return;
+    if (!(await this.bookingsService.isTransitAgent(userId))) return;
+    if (
+      !(await this.bookingsService.isTransitAgentForBooking(userId, bookingId))
+    ) {
+      // Hidden behind a NotFound so booking ids stay unprobeable, matching the
+      // customer-ownership failure mode.
+      throw new NotFoundException(`Booking ${bookingId} not found`);
+    }
+  }
+
+  /**
+   * Gate a formerly staff-only clearance route that is now MixedAudience.
+   *
+   * Staff still pass on their permission. A portal caller must be a transit
+   * agent assigned to THIS booking — an ordinary customer is rejected, because
+   * relaxing the guard must not hand the whole customer base a route that was
+   * previously staff-only.
+   *
+   * Used for the Djibouti-desk WRITES too (DO/RO upload, RO amendment): the
+   * assigned agent files them in the desk's place, and the assignment is the
+   * only thing standing between a portal token and the customs record.
+   */
+  private async assertPortalClearanceAccess(
+    bookingId: string,
+    user: TCurrentUser,
+  ): Promise<void> {
+    if (
+      hasFreightPermission(user, FREIGHT_PERMS.contracts.clearanceEtActions) ||
+      hasFreightPermission(user, FREIGHT_PERMS.contracts.clearanceDjActions)
+    ) {
+      return;
+    }
+    if (
+      !(await this.bookingsService.isTransitAgentForBooking(
+        user?.id,
+        bookingId,
+      ))
+    ) {
+      throw new NotFoundException(`Booking ${bookingId} not found`);
+    }
+  }
+
   private async assertWagonCancellationActor(
     cancellationId: string,
     user: TCurrentUser,
@@ -1139,6 +1198,9 @@ export class BookingsController {
   }
 
   @Get(":id/clearance")
+  // A transit agent is a portal account, so MixedAudience admits them without a
+  // permission; `assertTransitAgentScope` below narrows them to the shipments
+  // actually assigned to them.
   @MixedAudience([
     FREIGHT_PERMS.bookings.clearanceView,
     FREIGHT_PERMS.bookings.reviewDocuments,
@@ -1147,7 +1209,11 @@ export class BookingsController {
     summary:
       "Document-clearance grid (required docs + upload + GL review status)",
   })
-  getClearance(@Param("id", ParseUUIDPipe) id: string) {
+  async getClearance(
+    @Param("id", ParseUUIDPipe) id: string,
+    @CurrentUser() user: TCurrentUser,
+  ) {
+    await this.assertTransitAgentScope(id, user);
     return this.transitionService.getClearanceView(id);
   }
 
@@ -1289,8 +1355,11 @@ export class BookingsController {
     return { success: true };
   }
 
+  // Was staff-only. Opened to the transit agent assigned to the shipment, who
+  // needs the clearance trail for the bookings they handle; every other portal
+  // account is still rejected by the scope check below.
   @Get(":id/clearance/history")
-  @BookingStaff([
+  @MixedAudience([
     FREIGHT_PERMS.contracts.clearanceEtActions,
     FREIGHT_PERMS.contracts.clearanceDjActions,
   ])
@@ -1298,7 +1367,11 @@ export class BookingsController {
     summary:
       "Clearance action history for the booking — reviews, workflow steps, charges (newest first)",
   })
-  getClearanceHistory(@Param("id", ParseUUIDPipe) id: string) {
+  async getClearanceHistory(
+    @Param("id", ParseUUIDPipe) id: string,
+    @CurrentUser() user: TCurrentUser,
+  ) {
+    await this.assertPortalClearanceAccess(id, user);
     return this.clearanceEventService.list(id);
   }
 
@@ -1321,6 +1394,12 @@ export class BookingsController {
       hasFreightPermission(user, FREIGHT_PERMS.contracts.clearanceEtActions) ||
       hasFreightPermission(user, FREIGHT_PERMS.contracts.clearanceDjActions);
     if (isStaff) return this.clearanceChargeService.list(id);
+    // The transit agent handling this shipment sees the same customer-facing
+    // slice the customer does — charges actually sent, never the internal
+    // draft/billing view `list()` returns.
+    if (await this.bookingsService.isTransitAgentForBooking(user?.id, id)) {
+      return this.clearanceChargeService.listForCustomer(id);
+    }
     const booking = await this.bookingsService.findById(id);
     await this.bookingsService.assertCustomerCanAccessBooking(
       user?.id,
@@ -1788,8 +1867,10 @@ export class BookingsController {
     return this.transitionService.enrichBookingResponse(booking);
   }
 
+  // Djibouti-desk write, also filed by the transit agent assigned to this
+  // shipment — `assertPortalClearanceAccess` rejects every other portal caller.
   @Post(":id/clearance/delivery-order")
-  @BookingStaff(FREIGHT_PERMS.contracts.clearanceDjActions)
+  @MixedAudience(FREIGHT_PERMS.contracts.clearanceDjActions)
   @UseInterceptors(AnyFilesInterceptor())
   @ApiConsumes("multipart/form-data")
   async uploadBookingDeliveryOrder(
@@ -1799,6 +1880,7 @@ export class BookingsController {
     @Body("doCollectedDate") doCollectedDate: string | undefined,
     @CurrentUser() user: TCurrentUser,
   ) {
+    await this.assertPortalClearanceAccess(id, user);
     const booking = await this.bookingClearanceService.uploadDeliveryOrder(
       id,
       files ?? [],
@@ -1809,7 +1891,7 @@ export class BookingsController {
   }
 
   @Post(":id/clearance/release-order")
-  @BookingStaff(FREIGHT_PERMS.contracts.clearanceDjActions)
+  @MixedAudience(FREIGHT_PERMS.contracts.clearanceDjActions)
   @UseInterceptors(AnyFilesInterceptor())
   @ApiConsumes("multipart/form-data")
   async uploadBookingReleaseOrder(
@@ -1818,6 +1900,7 @@ export class BookingsController {
     @Body("vesselDepartureDate") vesselDepartureDate: string,
     @CurrentUser() user: TCurrentUser,
   ) {
+    await this.assertPortalClearanceAccess(id, user);
     const result = await this.bookingClearanceService.uploadReleaseOrder(
       id,
       files ?? [],
@@ -1831,13 +1914,69 @@ export class BookingsController {
     };
   }
 
+  // Transit-agent arrival paperwork (export): gate pass and Djibouti T1 sets.
+  // Same audience rule as the DO/RO uploads above — the desk, or the agent
+  // assigned to this shipment.
+  @Post(":id/clearance/gate-pass-documents")
+  @MixedAudience(FREIGHT_PERMS.contracts.clearanceDjActions)
+  @UseInterceptors(AnyFilesInterceptor())
+  @ApiConsumes("multipart/form-data")
+  async uploadBookingGatePassDocuments(
+    @Param("id", ParseUUIDPipe) id: string,
+    @UploadedFiles() files: Express.Multer.File[],
+    @CurrentUser() user: TCurrentUser,
+  ) {
+    await this.assertPortalClearanceAccess(id, user);
+    return this.bookingClearanceService.uploadTransitArrivalDocuments(
+      id,
+      "gate_pass",
+      files ?? [],
+      resolveAuthUserId(user),
+    );
+  }
+
+  @Post(":id/clearance/djibouti-t1-documents")
+  @MixedAudience(FREIGHT_PERMS.contracts.clearanceDjActions)
+  @UseInterceptors(AnyFilesInterceptor())
+  @ApiConsumes("multipart/form-data")
+  async uploadBookingDjiboutiT1Documents(
+    @Param("id", ParseUUIDPipe) id: string,
+    @UploadedFiles() files: Express.Multer.File[],
+    @CurrentUser() user: TCurrentUser,
+  ) {
+    await this.assertPortalClearanceAccess(id, user);
+    return this.bookingClearanceService.uploadTransitArrivalDocuments(
+      id,
+      "djibouti_t1",
+      files ?? [],
+      resolveAuthUserId(user),
+    );
+  }
+
+  @Delete(":id/clearance/transit-documents/:fileId")
+  @MixedAudience(FREIGHT_PERMS.contracts.clearanceDjActions)
+  @HttpCode(204)
+  async removeBookingTransitDocument(
+    @Param("id", ParseUUIDPipe) id: string,
+    @Param("fileId", ParseUUIDPipe) fileId: string,
+    @CurrentUser() user: TCurrentUser,
+  ) {
+    await this.assertPortalClearanceAccess(id, user);
+    await this.bookingClearanceService.removeTransitArrivalDocument(
+      id,
+      fileId,
+      resolveAuthUserId(user),
+    );
+  }
+
   @Post(":id/clearance/ro-amendment")
-  @BookingStaff(FREIGHT_PERMS.contracts.clearanceDjActions)
+  @MixedAudience(FREIGHT_PERMS.contracts.clearanceDjActions)
   async requestBookingRoAmendment(
     @Param("id", ParseUUIDPipe) id: string,
     @Body() dto: RoAmendmentDto,
     @CurrentUser() user: TCurrentUser,
   ) {
+    await this.assertPortalClearanceAccess(id, user);
     const booking = await this.bookingClearanceService.requestRoAmendment(
       id,
       dto.note,
diff --git a/apps/edr-freight-api/src/modules/bookings/bookings.service.ts b/apps/edr-freight-api/src/modules/bookings/bookings.service.ts
index d777c6414..c7294a004 100644
--- a/apps/edr-freight-api/src/modules/bookings/bookings.service.ts
+++ b/apps/edr-freight-api/src/modules/bookings/bookings.service.ts
@@ -2065,6 +2065,65 @@ ${footer}
     }
   }
 
+  /**
+   * True when `userId` is a transit agent currently assigned to this booking.
+   *
+   * Deliberately NOT folded into {@link assertCustomerCanAccessBooking}: that
+   * assertion guards ~29 call sites, including wagon cancellations, rebooking
+   * and customer-truck writes. A transit agent must reach the clearance READS
+   * for the shipments they handle and nothing else, so the two ownership rules
+   * stay separate and each caller opts in explicitly.
+   *
+   * Queried directly rather than through TransitAssignmentsService: that module
+   * imports BookingsModule, so injecting it here would close an import cycle.
+   */
+  /** Is this portal account a transit agent at all? */
+  async isTransitAgent(userId: string | undefined): Promise<boolean> {
+    if (!userId) return false;
+    const rows: { one: number }[] = await this.dataSource.query(
+      `SELECT 1 AS one
+         FROM freight.transit_agents a
+        WHERE a.user_id = $1 AND a.deleted_at IS NULL
+        LIMIT 1`,
+      [userId],
+    );
+    return rows.length > 0;
+  }
+
+  async isTransitAgentForBooking(
+    userId: string | undefined,
+    bookingId: string,
+  ): Promise<boolean> {
+    if (!userId) return false;
+    const rows: { one: number }[] = await this.dataSource.query(
+      `SELECT 1 AS one
+         FROM freight.transit_assignments ta
+         JOIN freight.transit_agents a ON a.id = ta.transit_agent_id
+        WHERE a.user_id = $1
+          AND ta.booking_id = $2
+          AND ta.deleted_at IS NULL
+          AND a.deleted_at IS NULL
+        LIMIT 1`,
+      [userId, bookingId],
+    );
+    return rows.length > 0;
+  }
+
+  /**
+   * Authorize a clearance READ on one booking for either audience a portal
+   * account can be: the owning customer, or a transit agent assigned to it.
+   *
+   * Read-only by contract — every caller is a GET. Writes keep using
+   * {@link assertCustomerCanAccessBooking}, which a transit agent never passes.
+   */
+  async assertCanReadBookingClearance(
+    userId: string | undefined,
+    booking: Booking,
+  ): Promise<void> {
+    if (await this.isTransitAgentForBooking(userId, booking.id)) return;
+    await this.assertCustomerCanAccessBooking(userId, booking);
+  }
+
   /**
    * Build the customer-facing shipment tracking payload for a booking from the
    * train schedule it is assigned to and the live checkpoint log. The caller is
diff --git a/apps/edr-freight-api/src/modules/contracts/booking-clearance.service.spec.ts b/apps/edr-freight-api/src/modules/contracts/booking-clearance.service.spec.ts
index 5cee12d3b..129789898 100644
--- a/apps/edr-freight-api/src/modules/contracts/booking-clearance.service.spec.ts
+++ b/apps/edr-freight-api/src/modules/contracts/booking-clearance.service.spec.ts
@@ -116,6 +116,7 @@ function makeService(overrides?: {
         .fn()
         .mockResolvedValue({ id: 'ta-1', name: 'Ahmed Bourhan' }),
     } as never, // transit agents
+    { ensureAssignment: jest.fn() } as never, // transit assignments
     { findAll: jest.fn().mockResolvedValue([]) } as never, // contracts repository
     { getScopedYardIds: jest.fn().mockResolvedValue(overrides?.yardScope ?? null) } as never, // yard scope
     { record: jest.fn() } as never, // clearanceEvents
diff --git a/apps/edr-freight-api/src/modules/contracts/booking-clearance.service.ts b/apps/edr-freight-api/src/modules/contracts/booking-clearance.service.ts
index b4cead816..b776a547c 100644
--- a/apps/edr-freight-api/src/modules/contracts/booking-clearance.service.ts
+++ b/apps/edr-freight-api/src/modules/contracts/booking-clearance.service.ts
@@ -1,4 +1,4 @@
-import { BadRequestException, Injectable } from '@nestjs/common';
+import { BadRequestException, Injectable, NotFoundException } from '@nestjs/common';
 import { In } from 'typeorm';
 import {
   ContractDocPhase,
@@ -30,10 +30,12 @@ import { ClearanceMilestoneService } from './clearance-milestone.service';
 import { GlOperationsService } from './gl-operations.service';
 import { GlExchangeService } from './gl-exchange.service';
 import { TransitAgentsService } from '../transit-agents/transit-agents.service';
+import { TransitAssignmentsService } from '../transit-assignments/transit-assignments.service';
 import { YardScopeService } from '../rule-engine/services/yard-scope.service';
 import { ContractsRepository } from './contracts.repository';
 import { AdviseContractDutyDto } from './dto/phased-clearance.dto';
-import { buildWorkflowFiles, belongsOnDjClearanceQueue, belongsOnEtClearanceQueue, DJ_BOOKING_QUEUE_STATUSES, persistDeclarationUploads, persistDeliveryOrderUploads, persistDraftDeclarationUploads, persistReleaseOrderUploads, persistTransitPermitUploads, PHASED_CUSTOMS_BOOKING_QUEUE_STATUSES } from './phased-clearance.util';
+import { buildWorkflowFiles, belongsOnDjClearanceQueue, belongsOnEtClearanceQueue, DJ_BOOKING_QUEUE_STATUSES, persistDeclarationUploads, persistDeliveryOrderUploads, persistDraftDeclarationUploads, persistReleaseOrderUploads, persistTransitArrivalUploads, persistTransitPermitUploads, PHASED_CUSTOMS_BOOKING_QUEUE_STATUSES, transitArrivalDocumentMatcher } from './phased-clearance.util';
+import type { TransitArrivalDocumentKind } from '@edr/types';
 
 import {
   buildClearanceDocHistory,
@@ -45,6 +47,8 @@ import { clearanceDocumentsOpen } from '../bookings/clearance.util';
 const RO_VESSEL_MIN_DAYS_CODE = 'ro_vessel_min_days';
 
 export interface BookingClearanceView {
+  /** Booking creation stamp — the import DO is timed from it. */
+  bookingCreatedAt?: string | null;
   bookingId: string;
   status: string;
   includesCustoms: boolean;
@@ -176,6 +180,7 @@ export class BookingClearanceService {
     private readonly notifier: BookingLifecycleNotifierService,
     private readonly glExchangeService: GlExchangeService,
     private readonly transitAgentsService: TransitAgentsService,
+    private readonly transitAssignmentsService: TransitAssignmentsService,
     private readonly contractsRepository: ContractsRepository,
     private readonly yardScope: YardScopeService,
     private readonly clearanceEvents: ClearanceEventService,
@@ -365,6 +370,7 @@ export class BookingClearanceService {
     return {
       bookingId,
       status: booking.status,
+      bookingCreatedAt: booking.createdAt ? new Date(booking.createdAt).toISOString() : null,
       includesCustoms,
       inputCode,
       outputCode,
@@ -385,6 +391,7 @@ export class BookingClearanceService {
         status: m.status,
         ownerRegion: m.ownerRegion,
         metadata: (m.metadata ?? null) as Record<string, unknown> | null,
+        triggeredAt: m.triggeredAt ? new Date(m.triggeredAt).toISOString() : null,
         sortOrder: m.sortOrder,
       })),
       nextAction,
@@ -593,6 +600,17 @@ export class BookingClearanceService {
       transitAssigneeName: agent.name,
       transitAssigneeAssignedAt: new Date(),
     } as never);
+
+    // The booking only stores the officer's NAME, which is what the clearance
+    // UI reads. The agent's own portal works off `transit_assignments` rows, so
+    // without this the shipment never reaches the officer's work list — the
+    // desk believes it handed the job over and nothing arrives.
+    await this.transitAssignmentsService.ensureAssignment(
+      bookingId,
+      transitAgentId,
+      userId,
+    );
+
     await this.clearanceEvents.record({
       bookingId,
       action: 'TRANSIT_ASSIGNEE_ASSIGNED',
@@ -1161,6 +1179,83 @@ export class BookingClearanceService {
     return { booking: await this.bookingsService.findById(bookingId), hold: false };
   }
 
+  // ── Transit-agent arrival paperwork (export) ────────────────────────────
+  // Gate pass and Djibouti T1 documents the assigned transit officer files at
+  // Djibouti around train arrival. Append-only sets with per-file removal — see
+  // `persistTransitArrivalUploads`. The clearance view stamps every file with
+  // its upload time, so the portal can measure it against train departure and
+  // arrival without a separate ledger.
+
+  private static readonly TRANSIT_ARRIVAL_LABELS: Record<
+    TransitArrivalDocumentKind,
+    { name: string; uploaded: string; removed: string }
+  > = {
+    gate_pass: {
+      name: 'gate pass',
+      uploaded: 'GATE_PASS_DOCUMENTS_UPLOADED',
+      removed: 'GATE_PASS_DOCUMENT_REMOVED',
+    },
+    djibouti_t1: {
+      name: 'Djibouti T1',
+      uploaded: 'DJIBOUTI_T1_DOCUMENTS_UPLOADED',
+      removed: 'DJIBOUTI_T1_DOCUMENT_REMOVED',
+    },
+  };
+
+  async uploadTransitArrivalDocuments(
+    bookingId: string,
+    kind: TransitArrivalDocumentKind,
+    files: Express.Multer.File[],
+    userId?: string,
+  ): Promise<{ uploaded: number }> {
+    const booking = await this.loadBooking(bookingId);
+    if (booking.tradeDirection !== 'EXPORT') {
+      throw new BadRequestException(
+        'Gate pass and Djibouti T1 documents apply only to export bookings.',
+      );
+    }
+    const labels = BookingClearanceService.TRANSIT_ARRIVAL_LABELS[kind];
+    await persistTransitArrivalUploads(this.filesService, bookingId, kind, files ?? [], userId);
+    await this.clearanceEvents.record({
+      bookingId,
+      action: labels.uploaded,
+      label: `Uploaded ${files.length} ${labels.name} document(s)`,
+      actorId: userId ?? null,
+      metadata: { kind, fileNames: (files ?? []).map((f) => f.originalname) },
+    });
+    return { uploaded: files.length };
+  }
+
+  /**
+   * Remove ONE gate pass / Djibouti T1 file. Only those two code families are
+   * removable here: the route is reachable by the transit agent, and it must
+   * never become a way to delete a declaration or a Release Order.
+   */
+  async removeTransitArrivalDocument(
+    bookingId: string,
+    fileId: string,
+    userId?: string,
+  ): Promise<void> {
+    await this.loadBooking(bookingId);
+    const files = await this.filesService.findByResource(bookingId, 'bookings');
+    const file = files.find((f) => f.id === fileId);
+    const kind = (['gate_pass', 'djibouti_t1'] as const).find((k) =>
+      transitArrivalDocumentMatcher(k)(file?.code),
+    );
+    if (!file || !kind) {
+      throw new NotFoundException('Document not found on this booking.');
+    }
+    await this.filesService.remove(fileId);
+    const labels = BookingClearanceService.TRANSIT_ARRIVAL_LABELS[kind];
+    await this.clearanceEvents.record({
+      bookingId,
+      action: labels.removed,
+      label: `Removed ${labels.name} document ${file.name}`,
+      actorId: userId ?? null,
+      metadata: { kind, fileName: file.name },
+    });
+  }
+
   async requestRoAmendment(
     bookingId: string,
     note?: string,
diff --git a/apps/edr-freight-api/src/modules/contracts/contract-clearance.service.ts b/apps/edr-freight-api/src/modules/contracts/contract-clearance.service.ts
index c95eb73b7..c15d20800 100644
--- a/apps/edr-freight-api/src/modules/contracts/contract-clearance.service.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contract-clearance.service.ts
@@ -31,6 +31,7 @@ import { ClearanceMilestoneService } from './clearance-milestone.service';
 import { ContractNotifierService } from './contract-notifier.service';
 import { GlOperationsService } from './gl-operations.service';
 import { TransitAgentsService } from '../transit-agents/transit-agents.service';
+import { TransitAssignmentsService } from '../transit-assignments/transit-assignments.service';
 import {
   ClearanceMilestone,
   type RiskAssignmentRecord,
@@ -185,6 +186,7 @@ export class ContractClearanceService {
     private readonly glOperationsService: GlOperationsService,
     private readonly notifier: ContractNotifierService,
     private readonly transitAgentsService: TransitAgentsService,
+    private readonly transitAssignmentsService: TransitAssignmentsService,
     private readonly dataSource: DataSource,
   ) {}
 
@@ -480,6 +482,7 @@ export class ContractClearanceService {
         status: m.status,
         ownerRegion: m.ownerRegion,
         metadata: (m.metadata ?? null) as Record<string, unknown> | null,
+        triggeredAt: m.triggeredAt ? new Date(m.triggeredAt).toISOString() : null,
         sortOrder: m.sortOrder,
       })),
       nextAction,
@@ -1230,6 +1233,18 @@ export class ContractClearanceService {
       transitAssigneeAssignedByUserId: userId ?? null,
     });
 
+    // Mirror the name onto the officer's own work list, exactly as the
+    // per-booking path does. Contract-level clearance can be assigned before a
+    // booking exists; in that case there is nothing for the officer to work on
+    // yet, and the booking picks the assignment up when it is created.
+    if (cycle.bookingId) {
+      await this.transitAssignmentsService.ensureAssignment(
+        cycle.bookingId,
+        transitAgentId,
+        userId,
+      );
+    }
+
     const updated = await this.contractsService.findById(contractId);
     this.notifier.transitAssigneeAssigned(updated, agent.name, previous);
     return updated;
diff --git a/apps/edr-freight-api/src/modules/contracts/contract-duty-dispute.spec.ts b/apps/edr-freight-api/src/modules/contracts/contract-duty-dispute.spec.ts
index a7bd3cd7d..b35f9d844 100644
--- a/apps/edr-freight-api/src/modules/contracts/contract-duty-dispute.spec.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contract-duty-dispute.spec.ts
@@ -63,6 +63,7 @@ describe('ContractClearanceService — duty dispute', () => {
       {} as never, // glOperationsService
       notifier as never,
       {} as never, // transitAgentsService
+      {} as never, // transitAssignmentsService
       {} as never, // dataSource
     );
     build([
diff --git a/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts b/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts
index c38576fff..7cf7a8398 100644
--- a/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contracts.controller.ts
@@ -4,6 +4,7 @@ import {
   Delete,
   Get,
   HttpCode,
+  NotFoundException,
   Param,
   ParseUUIDPipe,
   Patch,
@@ -1359,19 +1360,35 @@ export class ContractsController {
     return this.glOperationsService.uploadTransportDocument(bookingId, files ?? []);
   }
 
+  // Also filed by the transit agent assigned to the shipment — T1 is their own
+  // transit paperwork. Any other portal caller is rejected below.
   @Post('bookings/:bookingId/t1-documents')
-  @BookingStaff(FREIGHT_PERMS.contracts.clearanceDjActions)
+  @MixedAudience(FREIGHT_PERMS.contracts.clearanceDjActions)
   @UseInterceptors(AnyFilesInterceptor())
   @ApiConsumes('multipart/form-data')
   @ApiOperation({
     summary:
       'GL Djibouti uploads T1 transit documents (multi-file) after wagon allocation; locked once the train departs',
   })
-  uploadT1Documents(
+  async uploadT1Documents(
     @Param('bookingId', ParseUUIDPipe) bookingId: string,
     @UploadedFiles() files: Express.Multer.File[],
+    @CurrentUser() user: TCurrentUser,
   ) {
-    return this.glOperationsService.uploadT1Documents(bookingId, files ?? []);
+    if (
+      !hasFreightPermission(user, FREIGHT_PERMS.contracts.clearanceDjActions) &&
+      !(await this.bookingsService.isTransitAgentForBooking(
+        user?.id,
+        bookingId,
+      ))
+    ) {
+      throw new NotFoundException(`Booking ${bookingId} not found`);
+    }
+    return this.glOperationsService.uploadT1Documents(
+      bookingId,
+      files ?? [],
+      resolveAuthUserId(user),
+    );
   }
 
   @Post('bookings/:bookingId/t1-close')
@@ -1534,6 +1551,8 @@ export class ContractsController {
   @MixedAudience(FREIGHT_PERMS.contracts.view)
   @ApiOperation({ summary: 'List cargo exception/damage reports for a shipment' })
   listIncidents(@Param('bookingId', ParseUUIDPipe) bookingId: string) {
+    // Reads are open to both audiences (a transit agent assigned to the
+    // shipment included); reporting an incident stays staff-only below.
     return this.glOperationsService.listIncidents(bookingId);
   }
 
diff --git a/apps/edr-freight-api/src/modules/contracts/contracts.module.ts b/apps/edr-freight-api/src/modules/contracts/contracts.module.ts
index 2a07b02e5..a198a0282 100644
--- a/apps/edr-freight-api/src/modules/contracts/contracts.module.ts
+++ b/apps/edr-freight-api/src/modules/contracts/contracts.module.ts
@@ -18,6 +18,7 @@ import { BookingsModule } from '../bookings/bookings.module';
 import { TrainSchedulingModule } from '../train-scheduling/train-scheduling.module';
 import { ContractTemplatesModule } from '../contract-templates/contract-templates.module';
 import { TransitAgentsModule } from '../transit-agents/transit-agents.module';
+import { TransitAssignmentsModule } from '../transit-assignments/transit-assignments.module';
 
 import { ContractsController } from './contracts.controller';
 import { ContractsService } from './contracts.service';
@@ -94,6 +95,10 @@ import { ContractDocumentViewModelBuilder } from '../../contracts/contract-docum
     // ContractDocumentViewModelBuilder when rendering contract PDFs.
     ContractTemplatesModule,
     TransitAgentsModule,
+    // Assigning a transit assignee must also land a row in the officer's own
+    // work list. This module is a leaf (it registers Booking as an entity
+    // rather than importing BookingsModule), so no cycle is closed here.
+    TransitAssignmentsModule,
     // BookingsModule provides BookingsRepository/BookingPricingService used by the
     // contract PDF builders (they read a Booking today — see docs/new-doc.md §3.3).
     forwardRef(() => BookingsModule),
diff --git a/apps/edr-freight-api/src/modules/contracts/final-invoice-approval.spec.ts b/apps/edr-freight-api/src/modules/contracts/final-invoice-approval.spec.ts
index 4875d9e24..25f798e68 100644
--- a/apps/edr-freight-api/src/modules/contracts/final-invoice-approval.spec.ts
+++ b/apps/edr-freight-api/src/modules/contracts/final-invoice-approval.spec.ts
@@ -50,6 +50,7 @@ describe('GlOperationsService — final invoice approval', () => {
       {} as never, // milestoneService
       billingService as never,
       notifier as never,
+      { record: jest.fn() } as never, // clearanceEvents
     );
   });
 
diff --git a/apps/edr-freight-api/src/modules/contracts/gl-exchange.controller.ts b/apps/edr-freight-api/src/modules/contracts/gl-exchange.controller.ts
index 6ea0dacbe..b387d9370 100644
--- a/apps/edr-freight-api/src/modules/contracts/gl-exchange.controller.ts
+++ b/apps/edr-freight-api/src/modules/contracts/gl-exchange.controller.ts
@@ -4,6 +4,7 @@ import {
   Delete,
   Get,
   HttpCode,
+  NotFoundException,
   Param,
   ParseUUIDPipe,
   Patch,
@@ -17,10 +18,11 @@ import { FileInterceptor } from '@nestjs/platform-express';
 import { ApiBearerAuth, ApiConsumes, ApiOperation, ApiTags } from '@nestjs/swagger';
 
 import { actorLabel } from '../warehouses/current-actor.util';
-import { BookingStaff } from '../../common/booking-guards';
+import { BookingStaff, MixedAudience } from '../../common/booking-guards';
 import { FREIGHT_PERMS } from '../../seed/freight-permissions.registry';
 import { hasFreightPermission } from '../../common/freight-permission.util';
 import { resolveAuthUserId } from '../../common/resolve-auth-user-id';
+import { BookingsService } from '../bookings/bookings.service';
 
 import {
   GlExchangeService,
@@ -42,37 +44,61 @@ const asBool = (raw: string | boolean | undefined): boolean =>
 @ApiBearerAuth()
 @Controller('gl-exchange')
 export class GlExchangeController {
-  constructor(private readonly exchangeService: GlExchangeService) {}
+  constructor(
+    private readonly exchangeService: GlExchangeService,
+    private readonly bookingsService: BookingsService,
+  ) {}
 
+  // Read opened to the transit agent assigned to the shipment; the POST/PATCH/
+  // DELETE below stay staff-only, so an agent can read the desks' thread but
+  // never post to it.
   @Get(':entityId')
-  @BookingStaff(GL_EXCHANGE_PERMS)
+  @MixedAudience(GL_EXCHANGE_PERMS)
   @ApiOperation({
     summary: 'GL ET ↔ GL DJ shared documents for a booking or contract',
   })
-  list(
+  async list(
     @Param('entityId', ParseUUIDPipe) entityId: string,
     @CurrentUser() user: TCurrentUser,
   ) {
+    const isStaff = GL_EXCHANGE_PERMS.some((p) =>
+      hasFreightPermission(user, p),
+    );
+    if (
+      !isStaff &&
+      !(await this.bookingsService.isTransitAgentForBooking(
+        user?.id,
+        entityId,
+      ))
+    ) {
+      throw new NotFoundException(`Entity ${entityId} not found`);
+    }
     return this.exchangeService.list(entityId, resolveAuthUserId(user));
   }
 
+  // Open to the transit agent assigned to the shipment as well as both desks:
+  // the officer on the ground is often the one holding the scan either desk
+  // needs. Their post is attributed to the TRANSIT side, never to a desk.
   @Post(':entityId')
-  @BookingStaff(GL_EXCHANGE_PERMS)
+  @MixedAudience(GL_EXCHANGE_PERMS)
   @UseInterceptors(FileInterceptor('file'))
   @ApiConsumes('multipart/form-data')
-  @ApiOperation({ summary: 'Share a document with the other GL desk' })
-  upload(
+  @ApiOperation({
+    summary: 'Share a document with the GL desks (either desk, or the assigned transit agent)',
+  })
+  async upload(
     @Param('entityId', ParseUUIDPipe) entityId: string,
     @UploadedFile() file: Express.Multer.File | undefined,
     @Body('title') title: string,
     @Body('visibleToCustomer') visibleToCustomer: string | undefined,
     @CurrentUser() user: TCurrentUser,
   ) {
+    const actor = await this.resolveActor(entityId, user);
     return this.exchangeService.upload(
       entityId,
       file,
       { title, visibleToCustomer: asBool(visibleToCustomer) },
-      this.actor(user),
+      actor,
     );
   }
 
@@ -118,6 +144,36 @@ export class GlExchangeController {
    * is Djibouti; everyone else (GL Ethiopia, and super admins who hold both)
    * posts as Ethiopia.
    */
+  /**
+   * Who is posting, for a route both desks and the assigned transit agent may
+   * call. Staff keep the desk attribution below; a portal caller must be the
+   * agent assigned to this shipment and posts as TRANSIT, so a document is
+   * never credited to a desk that did not send it.
+   */
+  private async resolveActor(
+    entityId: string,
+    user: TCurrentUser,
+  ): Promise<GlExchangeActor> {
+    const isStaff = GL_EXCHANGE_PERMS.some((p) =>
+      hasFreightPermission(user, p),
+    );
+    if (isStaff) return this.actor(user);
+
+    if (
+      !(await this.bookingsService.isTransitAgentForBooking(
+        user?.id,
+        entityId,
+      ))
+    ) {
+      throw new NotFoundException(`Entity ${entityId} not found`);
+    }
+    return {
+      userId: resolveAuthUserId(user),
+      name: actorLabel(user) ?? null,
+      side: 'TRANSIT',
+    };
+  }
+
   private actor(user: TCurrentUser): GlExchangeActor {
     const side: GlExchangeSide =
       !hasFreightPermission(user, FREIGHT_PERMS.contracts.clearanceEtActions) &&
diff --git a/apps/edr-freight-api/src/modules/contracts/gl-exchange.service.ts b/apps/edr-freight-api/src/modules/contracts/gl-exchange.service.ts
index 1b0d88b2a..e76b26efd 100644
--- a/apps/edr-freight-api/src/modules/contracts/gl-exchange.service.ts
+++ b/apps/edr-freight-api/src/modules/contracts/gl-exchange.service.ts
@@ -17,7 +17,7 @@ import type { FileRecord } from '../files/entities/file.entity';
  */
 export const GL_EXCHANGE_RESOURCE = 'gl_exchange';
 
-export type GlExchangeSide = 'ET' | 'DJ';
+export type GlExchangeSide = 'ET' | 'DJ' | 'TRANSIT';
 
 export interface GlExchangeActor {
   userId: string;
@@ -180,7 +180,14 @@ export class GlExchangeService {
       // Pre-title rows (none in practice) fall back to the filename so a list
       // never renders a blank row.
       title: record.title ?? record.name,
-      side: record.code === 'DJ' ? 'DJ' : 'ET',
+      // `files.code` carries the poster's side. Anything unrecognised reads as
+      // ET, which is how every pre-TRANSIT row was written.
+      side:
+        record.code === 'DJ'
+          ? 'DJ'
+          : record.code === 'TRANSIT'
+            ? 'TRANSIT'
+            : 'ET',
       visibleToCustomer: record.visibleToCustomer,
       uploadedById: record.uploadedByUserId,
       uploadedByName: record.uploadedByName,
diff --git a/apps/edr-freight-api/src/modules/contracts/gl-operations.service.ts b/apps/edr-freight-api/src/modules/contracts/gl-operations.service.ts
index 6516ff9ce..70b42a9aa 100644
--- a/apps/edr-freight-api/src/modules/contracts/gl-operations.service.ts
+++ b/apps/edr-freight-api/src/modules/contracts/gl-operations.service.ts
@@ -12,6 +12,7 @@ import { InvoiceLine } from '../billing/entities/invoice-line.entity';
 import { FilesService } from '../files/files.service';
 import { Booking } from '../bookings/entities/booking.entity';
 import { BookingLifecycleNotifierService } from '../bookings/booking-lifecycle-notifier.service';
+import { ClearanceEventService } from '../bookings/clearance-event.service';
 import { TrainSchedule } from '../train-schedules/entities/train-schedule.entity';
 import { ImportDjiboutiOperation } from '../train-scheduling/entities/import-djibouti-operation.entity';
 import {
@@ -55,6 +56,7 @@ export class GlOperationsService {
     private readonly milestoneService: ClearanceMilestoneService,
     private readonly billingService: BillingService,
     private readonly notifier: BookingLifecycleNotifierService,
+    private readonly clearanceEvents: ClearanceEventService,
   ) {}
 
   private get bookings() {
@@ -362,13 +364,15 @@ export class GlOperationsService {
   }
 
   /**
-   * GL Djibouti uploads T1 transport documents (multi-file) once the gate pass
-   * is secured on the train schedule (which itself follows wagon allocation).
-   * Replaces the previous batch; locked only once GL Ethiopia closes the T1.
+   * GL Djibouti / the transit agent uploads T1 transport documents (multi-file)
+   * once the train has DEPARTED Djibouti. Replaces the previous batch, so the
+   * batch's file stamps are always the last update; locked only once GL
+   * Ethiopia closes the T1.
    */
   async uploadT1Documents(
     bookingId: string,
     files: Express.Multer.File[],
+    userId?: string,
   ): Promise<{ uploaded: number }> {
     const booking = await this.getBooking(bookingId);
     if (booking.tradeDirection !== 'IMPORT') {
@@ -376,24 +380,24 @@ export class GlOperationsService {
     }
 
     const state = await this.t1State(bookingId);
-    if (!state.wagonAllocated) {
+    if (!state.trainDepartedAt) {
       throw new BadRequestException(
-        'Wagons must be allocated before T1 transport documents can be uploaded.',
-      );
-    }
-    const gatepass = await this.gatepassForBooking(bookingId);
-    if (!gatepass.granted) {
-      throw new BadRequestException(
-        'Secure the Djibouti gate pass on the train schedule before uploading T1 transport documents.',
+        'T1 transport documents can be uploaded once the train has departed.',
       );
     }
     if (state.closed) {
       throw new BadRequestException('T1 has been closed by GL Ethiopia — documents are final.');
     }
-    // Departure no longer locks T1 docs — GL DJ may replace them any time until
-    // GL Ethiopia closes/accepts the T1.
 
     await persistT1TransportUploads(this.filesService, bookingId, files);
+    // History row so the portal can tell a first upload from a replacement.
+    await this.clearanceEvents.record({
+      bookingId,
+      action: 'T1_DOCUMENTS_UPLOADED',
+      label: `Uploaded T1 transport documents (${files.length} file(s))`,
+      actorId: userId ?? null,
+      metadata: { fileNames: files.map((f) => f.originalname) },
+    });
     return { uploaded: files.length };
   }
 
diff --git a/apps/edr-freight-api/src/modules/contracts/phased-clearance.util.ts b/apps/edr-freight-api/src/modules/contracts/phased-clearance.util.ts
index ab2a2b2d4..05edb9cab 100644
--- a/apps/edr-freight-api/src/modules/contracts/phased-clearance.util.ts
+++ b/apps/edr-freight-api/src/modules/contracts/phased-clearance.util.ts
@@ -12,10 +12,17 @@ import {
   isImportTransitPermitFileCode,
   isExportTransportFileCode,
   isT1TransportFileCode,
+  isGatePassFileCode,
+  isDjiboutiT1FileCode,
   exportTransportFileLabel,
   t1TransportFileLabel,
   transitPermitFileLabel,
+  gatePassFileLabel,
+  djiboutiT1FileLabel,
+  GATE_PASS_FILE_PREFIX,
+  DJIBOUTI_T1_FILE_PREFIX,
   type ClearanceWorkflowFile,
+  type TransitArrivalDocumentKind,
 } from '@edr/types';
 
 /** Require at least one declaration file in the upload batch. */
@@ -46,6 +53,7 @@ type DeclarationFileStore = {
     resource: string;
     code: string;
     file: Express.Multer.File;
+    uploadedByUserId?: string | null;
   }): Promise<unknown>;
 };
 
@@ -445,9 +453,88 @@ export const PHASED_CUSTOMS_BOOKING_QUEUE_STATUSES = [
 /** Booking statuses that may appear on the GL Djibouti clearance list (includes post-clearance). */
 export const DJ_BOOKING_QUEUE_STATUSES = PHASED_CUSTOMS_BOOKING_QUEUE_STATUSES;
 
+/** Prefix + matcher + label for each transit-agent arrival document set. */
+const TRANSIT_ARRIVAL_DOCUMENT_SETS: Record<
+  TransitArrivalDocumentKind,
+  { prefix: string; matches: (code: string | null | undefined) => boolean; label: (i?: number) => string }
+> = {
+  gate_pass: { prefix: GATE_PASS_FILE_PREFIX, matches: isGatePassFileCode, label: gatePassFileLabel },
+  djibouti_t1: { prefix: DJIBOUTI_T1_FILE_PREFIX, matches: isDjiboutiT1FileCode, label: djiboutiT1FileLabel },
+};
+
+export function transitArrivalDocumentMatcher(
+  kind: TransitArrivalDocumentKind,
+): (code: string | null | undefined) => boolean {
+  return TRANSIT_ARRIVAL_DOCUMENT_SETS[kind].matches;
+}
+
+/**
+ * APPEND a batch of transit-agent arrival documents (gate pass / Djibouti T1)
+ * to a booking. Unlike the DO/RO persisters this never deletes what is already
+ * there: the officer collects these one at a time as the paperwork comes in,
+ * and each file is removed individually. Codes continue from the highest
+ * existing index so a removed file's slot is never reused.
+ */
+export async function persistTransitArrivalUploads(
+  store: DeclarationFileStore,
+  bookingId: string,
+  kind: TransitArrivalDocumentKind,
+  files: Express.Multer.File[],
+  uploadedByUserId?: string | null,
+): Promise<void> {
+  if (files.length === 0) {
+    throw new BadRequestException('No documents uploaded');
+  }
+  const set = TRANSIT_ARRIVAL_DOCUMENT_SETS[kind];
+  const existing = await store.findByResource(bookingId, 'bookings');
+  const nextIndex =
+    existing
+      .filter((f) => set.matches(f.code))
+      .map((f) => Number.parseInt((f.code ?? '').slice(set.prefix.length), 10))
+      .filter((n) => Number.isFinite(n))
+      .reduce((max, n) => Math.max(max, n + 1), 0);
+
+  await Promise.all(
+    files.map((file, index) =>
+      store.upload({
+        resourceId: bookingId,
+        resource: 'bookings',
+        code: `${set.prefix}${nextIndex + index}`,
+        file: { ...file, fieldname: `${set.prefix}${nextIndex + index}` },
+        uploadedByUserId: uploadedByUserId ?? null,
+      }),
+    ),
+  );
+}
+
+type WorkflowFileInput = {
+  code?: string | null;
+  id: string;
+  name: string;
+  url: string;
+  createdAt?: Date | string | null;
+  updatedAt?: Date | string | null;
+  size?: number | null;
+  mimeType?: string | null;
+};
+
+function toWorkflowFileRef(file: WorkflowFileInput): NonNullable<ClearanceWorkflowFile['file']> {
+  const iso = (v: Date | string | null | undefined) =>
+    v ? new Date(v).toISOString() : null;
+  return {
+    id: file.id,
+    name: file.name,
+    url: file.url,
+    uploadedAt: iso(file.createdAt),
+    updatedAt: iso(file.updatedAt),
+    size: file.size ?? null,
+    mimeType: file.mimeType ?? null,
+  };
+}
+
 /** Build labeled phased-customs file rows from resource files. */
 export function buildWorkflowFiles(
-  files: Array<{ code?: string | null; id: string; name: string; url: string }>,
+  files: WorkflowFileInput[],
   tradeDirection: string,
 ): ClearanceWorkflowFile[] {
   const fileByCode = new Map(
@@ -465,7 +552,7 @@ export function buildWorkflowFiles(
       label: entry.label,
       uploadedBy: entry.uploadedBy,
       category: entry.category,
-      file: { id: file.id, name: file.name, url: file.url },
+      file: toWorkflowFileRef(file),
     });
   }
 
@@ -481,7 +568,7 @@ export function buildWorkflowFiles(
       label: declarationFileLabel(file.code, index),
       uploadedBy: 'gl_et',
       category: 'declaration',
-      file: { id: file.id, name: file.name, url: file.url },
+      file: toWorkflowFileRef(file),
     });
   });
 
@@ -497,7 +584,7 @@ export function buildWorkflowFiles(
       label: draftDeclarationFileLabel(index),
       uploadedBy: 'gl_et',
       category: 'draft_declaration',
-      file: { id: file.id, name: file.name, url: file.url },
+      file: toWorkflowFileRef(file),
     });
   });
 
@@ -514,7 +601,7 @@ export function buildWorkflowFiles(
         label: transitPermitFileLabel(file.code, index),
         uploadedBy: 'gl_et',
         category: 'transit',
-        file: { id: file.id, name: file.name, url: file.url },
+        file: toWorkflowFileRef(file),
       });
     });
 
@@ -530,7 +617,7 @@ export function buildWorkflowFiles(
         label: deliveryOrderFileLabel(file.code, index),
         uploadedBy: 'gl_dj',
         category: 'djibouti',
-        file: { id: file.id, name: file.name, url: file.url },
+        file: toWorkflowFileRef(file),
       });
     });
 
@@ -546,7 +633,7 @@ export function buildWorkflowFiles(
         label: t1TransportFileLabel(file.code, index),
         uploadedBy: 'gl_dj',
         category: 'djibouti',
-        file: { id: file.id, name: file.name, url: file.url },
+        file: toWorkflowFileRef(file),
       });
     });
   }
@@ -564,7 +651,7 @@ export function buildWorkflowFiles(
         label: releaseOrderFileLabel(file.code, index),
         uploadedBy: 'gl_dj',
         category: 'djibouti',
-        file: { id: file.id, name: file.name, url: file.url },
+        file: toWorkflowFileRef(file),
       });
     });
 
@@ -580,9 +667,32 @@ export function buildWorkflowFiles(
         label: exportTransportFileLabel(file.code, index),
         uploadedBy: 'gl_et',
         category: 'transit',
-        file: { id: file.id, name: file.name, url: file.url },
+        file: toWorkflowFileRef(file),
       });
     });
+
+    // Transit-agent arrival paperwork, ordered by slot index (upload order).
+    const byIndex = (prefix: string) => (a: WorkflowFileInput, b: WorkflowFileInput) =>
+      Number.parseInt((a.code ?? '').slice(prefix.length), 10) -
+      Number.parseInt((b.code ?? '').slice(prefix.length), 10);
+
+    for (const kind of ['gate_pass', 'djibouti_t1'] as const) {
+      const set = TRANSIT_ARRIVAL_DOCUMENT_SETS[kind];
+      files
+        .filter((f) => f.code && set.matches(f.code) && !included.has(f.code))
+        .sort(byIndex(set.prefix))
+        .forEach((file, index) => {
+          if (!file.code) return;
+          included.add(file.code);
+          out.push({
+            code: file.code,
+            label: set.label(index),
+            uploadedBy: 'gl_dj',
+            category: 'djibouti',
+            file: toWorkflowFileRef(file),
+          });
+        });
+    }
   }
 
   return out;
diff --git a/apps/edr-freight-api/src/modules/contracts/transit-assignee.spec.ts b/apps/edr-freight-api/src/modules/contracts/transit-assignee.spec.ts
index 58c97619a..0b7de5be3 100644
--- a/apps/edr-freight-api/src/modules/contracts/transit-assignee.spec.ts
+++ b/apps/edr-freight-api/src/modules/contracts/transit-assignee.spec.ts
@@ -61,6 +61,7 @@ describe('ContractClearanceService — transit assignee', () => {
       {} as never,
       notifier as never,
       transitAgentsService as never,
+      { ensureAssignment: jest.fn() } as never, // transit assignments
       {} as never, // dataSource
     );
   });
diff --git a/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.module.ts b/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.module.ts
index 65edc5868..44862e2ff 100644
--- a/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.module.ts
+++ b/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.module.ts
@@ -2,7 +2,9 @@ import { Module } from "@nestjs/common";
 import { TypeOrmModule } from "@nestjs/typeorm";
 
 import { Booking } from "../bookings/entities/booking.entity";
+import { ClearanceMilestone } from "../contracts/entities/clearance-milestone.entity";
 import { FilesModule } from "../files/files.module";
+import { TrainSchedule } from "../train-schedules/entities/train-schedule.entity";
 import { TransitAgentsModule } from "../transit-agents/transit-agents.module";
 import { TransitAssignment } from "./entities/transit-assignment.entity";
 import { TransitAssignmentsController } from "./transit-assignments.controller";
@@ -14,7 +16,15 @@ import { TransitAssignmentsService } from "./transit-assignments.service";
     // `Booking` is registered as an ENTITY rather than importing BookingsModule:
     // this module only confirms a booking id exists, and that module would drag
     // its whole graph (billing, contracts, scheduling, first/last mile) along.
-    TypeOrmModule.forFeature([TransitAssignment, Booking]),
+    // Milestones and train schedules are read for the agent's dashboard
+    // timings (declaration stamps, departure/arrival fallbacks) — entities
+    // only, for the same reason as Booking.
+    TypeOrmModule.forFeature([
+      TransitAssignment,
+      Booking,
+      ClearanceMilestone,
+      TrainSchedule,
+    ]),
     FilesModule,
     TransitAgentsModule,
   ],
diff --git a/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.service.spec.ts b/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.service.spec.ts
index f23a8426a..68e856eff 100644
--- a/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.service.spec.ts
+++ b/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.service.spec.ts
@@ -38,6 +38,8 @@ describe("TransitAssignmentsService", () => {
     remove: jest.Mock;
   };
   let service: TransitAssignmentsService;
+  let milestones: { find: jest.Mock };
+  let trainSchedules: { find: jest.Mock };
 
   const row = (over: Partial<TransitAssignment> = {}) =>
     ({
@@ -81,11 +83,16 @@ describe("TransitAssignmentsService", () => {
       remove: jest.fn(),
     };
 
+    milestones = { find: jest.fn().mockResolvedValue([]) };
+    trainSchedules = { find: jest.fn().mockResolvedValue([]) };
+
     service = new TransitAssignmentsService(
       assignments as never,
       agents as never,
       bookings as never,
       files as never,
+      milestones as never,
+      trainSchedules as never,
     );
   });
 
@@ -294,222 +301,127 @@ describe("TransitAssignmentsService", () => {
 
   describe("myStats", () => {
     const at = (iso: string) => new Date(iso);
+    const DEPARTED = at("2026-08-27T20:00:00Z");
 
     const withRows = (rows: Record<string, unknown>[]) => {
       assignments.findByTransitAgent.mockResolvedValue(
-        rows.map((r, i) => row({ id: `ta-${i}`, ...r } as never)),
+        rows.map((r, i) => row({ id: `ta-${i}`, bookingId: `bk-${i}`, ...r } as never)),
+      );
+    };
+    const bookingFiles = (entries: Record<string, Array<[string, string]>>) => {
+      files.findByResourceIdsGrouped.mockImplementation(
+        async (_ids: string[], resource: string) =>
+          resource === "bookings"
+            ? new Map(
+                Object.entries(entries).map(([bookingId, list]) => [
+                  bookingId,
+                  list.map(([code, iso]) => ({ code, createdAt: at(iso) })),
+                ]),
+              )
+            : new Map(),
       );
-      files.findByResourceIdsGrouped.mockResolvedValue(new Map());
     };
 
-    it("uses the median, so one reopened assignment cannot skew the headline", async () => {
+    it("measures transit from the train's departure to its arrival, using the median", async () => {
       withRows([
-        {
-          status: TransitAssignmentStatus.Finished,
-          finishedAt: at("2026-08-28T10:35:00Z"),
-        },
-        {
-          status: TransitAssignmentStatus.Finished,
-          finishedAt: at("2026-08-28T12:10:00Z"),
-        },
-        {
-          status: TransitAssignmentStatus.Finished,
-          finishedAt: at("2026-08-28T13:45:00Z"),
-        },
-        // 47h outlier: a mean would report ~12h, which describes nobody.
-        {
-          status: TransitAssignmentStatus.Finished,
-          finishedAt: at("2026-08-30T08:00:00Z"),
-        },
+        { booking: { loadedAt: DEPARTED, arrivedAt: at("2026-08-28T06:00:00Z"), tradeDirection: "EXPORT" } },
+        { booking: { loadedAt: DEPARTED, arrivedAt: at("2026-08-28T08:00:00Z"), tradeDirection: "EXPORT" } },
+        // 3-day outlier: a mean would describe none of the three.
+        { booking: { loadedAt: DEPARTED, arrivedAt: at("2026-08-30T20:00:00Z"), tradeDirection: "EXPORT" } },
+        // Still rolling: contributes nothing, not zero.
+        { booking: { loadedAt: DEPARTED, arrivedAt: null, tradeDirection: "EXPORT" } },
       ]);
+      bookingFiles({});
 
       const stats = await service.myStats("user-1");
 
-      // 95/190/285/2820 -> even count, so the median averages the middle two.
-      // A mean would be 848 minutes, describing none of the four.
-      expect(stats.performance.medianClearanceMinutes).toBe(238);
-      expect(stats.performance.slowestClearanceMinutes).toBe(2820);
+      expect(stats.timings.transit).toEqual({
+        median: 720,
+        fastest: 600,
+        slowest: 4320,
+        measured: 3,
+      });
+      expect(stats.totals.inTransit).toBe(1);
+      expect(stats.totals.arrived).toBe(3);
     });
 
-    it("bands clearance times into the SLA buckets", async () => {
-      withRows([
+    it("times the Release Order from the declaration to the LAST RO upload", async () => {
+      withRows([{ booking: { tradeDirection: "EXPORT", loadedAt: null, arrivedAt: null } }]);
+      milestones.find.mockResolvedValue([
         {
-          status: TransitAssignmentStatus.Finished,
-          finishedAt: at("2026-08-28T10:30:00Z"),
-        },
-        {
-          status: TransitAssignmentStatus.Finished,
-          finishedAt: at("2026-08-28T13:00:00Z"),
-        },
-        {
-          status: TransitAssignmentStatus.Finished,
-          finishedAt: at("2026-08-29T09:00:00Z"),
+          bookingId: "bk-0",
+          milestoneCode: "DECLARED",
+          status: "COMPLETED",
+          triggeredAt: at("2026-08-27T08:00:00Z"),
         },
       ]);
+      bookingFiles({
+        "bk-0": [
+          ["release_order_0", "2026-08-27T09:30:00Z"],
+          // Replaced batch — the later stamp is the one that counts.
+          ["release_order_1", "2026-08-27T11:00:00Z"],
+        ],
+      });
 
       const stats = await service.myStats("user-1");
+      const [item] = stats.items;
 
-      expect(stats.sla).toEqual({ under2h: 1, under6h: 1, over6h: 1 });
-      expect(stats.performance.onTimeRate).toBe(67);
+      expect(item.declaredAt).toBe("2026-08-27T08:00:00.000Z");
+      expect(item.roAt).toBe("2026-08-27T11:00:00.000Z");
+      expect(item.timings.declarationToRo).toBe(180);
+      expect(stats.timings.declarationToRo.median).toBe(180);
+      expect(item.nextAction).toEqual({ kind: "wait", label: "Awaiting train departure" });
     });
 
-    it("counts coverage only over dispatched bookings", async () => {
+    it("points the officer at the next upload the detail page would actually allow", async () => {
       withRows([
-        { booking: { arrivedAt: null, schedulingStatus: "DISPATCHED" } },
-        { booking: { arrivedAt: null, schedulingStatus: "DISPATCHED" } },
-        // Scheduled bookings cannot receive documents yet, so counting them
-        // would report a failure the agent could not have avoided.
-        { booking: { arrivedAt: null, schedulingStatus: "SCHEDULED" } },
+        // Import, nothing filed: the DO comes first.
+        { booking: { tradeDirection: "IMPORT", loadedAt: null, arrivedAt: null } },
+        // Import with a DO but no departure yet: T1 is still locked.
+        { booking: { tradeDirection: "IMPORT", loadedAt: null, arrivedAt: null } },
+        // Import, departed, no T1: upload it.
+        { booking: { tradeDirection: "IMPORT", loadedAt: DEPARTED, arrivedAt: null } },
+        // Export, arrived with an RO but no gate pass yet.
+        {
+          booking: {
+            tradeDirection: "EXPORT",
+            loadedAt: DEPARTED,
+            arrivedAt: at("2026-08-28T06:00:00Z"),
+          },
+        },
       ]);
+      milestones.find.mockResolvedValue([
+        { bookingId: "bk-3", milestoneCode: "DECLARED", status: "COMPLETED", triggeredAt: at("2026-08-26T08:00:00Z") },
+      ]);
+      bookingFiles({
+        "bk-1": [["delivery_order_0", "2026-08-26T10:00:00Z"]],
+        "bk-2": [["delivery_order_0", "2026-08-26T10:00:00Z"]],
+        "bk-3": [["release_order_0", "2026-08-26T10:00:00Z"]],
+      });
 
       const stats = await service.myStats("user-1");
+      const byBooking = new Map(stats.items.map((i) => [i.bookingId, i]));
 
-      expect(stats.coverage.dispatched).toBe(2);
-      expect(stats.coverage.withDocuments).toBe(0);
+      expect(byBooking.get("bk-0")?.nextAction.document).toBe("do");
+      expect(byBooking.get("bk-1")?.nextAction).toEqual({
+        kind: "wait",
+        label: "Awaiting train departure",
+      });
+      expect(byBooking.get("bk-2")?.nextAction.document).toBe("t1");
+      expect(byBooking.get("bk-3")?.nextAction.document).toBe("gate_pass");
+      expect(stats.pending).toEqual({ ro: 0, do: 1, t1: 1, gatePass: 1, djiboutiT1: 0 });
+      expect(stats.totals.actionNeeded).toBe(3);
     });
 
     it("reports nulls rather than zero when nothing has been measured", async () => {
-      withRows([{ status: TransitAssignmentStatus.NotStarted }]);
+      withRows([{ status: TransitAssignmentStatus.NotStarted, booking: { arrivedAt: null } }]);
+      bookingFiles({});
 
       const stats = await service.myStats("user-1");
 
-      expect(stats.performance.medianClearanceMinutes).toBeNull();
-      expect(stats.performance.onTimeRate).toBeNull();
+      expect(stats.timings.transit.median).toBeNull();
+      expect(stats.timings.arrivalToFinish.median).toBeNull();
       expect(stats.totals.open).toBe(1);
     });
   });
-
-  describe("customerName", () => {
-    it("flattens the booking's company name", async () => {
-      assignments.findOneWithRelations.mockResolvedValue(
-        row({
-          booking: {
-            id: "bk-1",
-            arrivedAt: ARRIVED,
-            schedulingStatus: "DISPATCHED",
-            company: { name: "SHAFICI PHARMACEUTICAL" },
-          } as never,
-        }),
-      );
-
-      expect((await service.findById("ta-1")).customerName).toBe(
-        "SHAFICI PHARMACEUTICAL",
-      );
-    });
-
-    it("is null when the booking has no company", async () => {
-      expect((await service.findById("ta-1")).customerName).toBeNull();
-    });
-  });
-
-  describe("canUploadDocuments", () => {
-    it("is true for an open assignment on a dispatched booking", async () => {
-      expect((await service.findById("ta-1")).canUploadDocuments).toBe(true);
-    });
-
-    it("is false before dispatch", async () => {
-      assignments.findOneWithRelations.mockResolvedValue(
-        row({
-          booking: {
-            id: "bk-1",
-            arrivedAt: null,
-            schedulingStatus: "SCHEDULED",
-          } as never,
-        }),
-      );
-      expect((await service.findById("ta-1")).canUploadDocuments).toBe(false);
-    });
-
-    it("is false once finished", async () => {
-      assignments.findOneWithRelations.mockResolvedValue(
-        row({
-          status: TransitAssignmentStatus.Finished,
-          finishedAt: new Date(),
-        }),
-      );
-      expect((await service.findById("ta-1")).canUploadDocuments).toBe(false);
-    });
-  });
-
-  describe("portal scoping", () => {
-    it("hides another agent's assignment behind a NotFound", async () => {
-      assignments.findOneWithRelations.mockResolvedValue(
-        row({ transitAgentId: "someone-else" }),
-      );
-
-      await expect(service.findMineById("user-1", "ta-1")).rejects.toThrow(
-        NotFoundException,
-      );
-    });
-
-    it("rejects an account that is not a transit agent", async () => {
-      agents.findByUserId.mockResolvedValue(null);
-
-      await expect(service.findMine("user-1")).rejects.toThrow(
-        ForbiddenException,
-      );
-    });
-
-    it("pins the query to the session's agent and passes the filters through", async () => {
-      await service.findMine("user-1", {
-        search: "BK-2026",
-        status: TransitAssignmentStatus.InProgress,
-        schedulingStatus: "DISPATCHED",
-        page: 2,
-        pageSize: 10,
-      });
-
-      const [agentId, filter, skip, take] =
-        assignments.findByTransitAgentPaginated.mock.calls[0];
-      // The agent id comes from the session, never from the query — otherwise
-      // one agent could page through another agent's work.
-      expect(agentId).toBe("ag-1");
-      expect(filter).toMatchObject({
-        search: "BK-2026",
-        status: TransitAssignmentStatus.InProgress,
-        schedulingStatus: "DISPATCHED",
-      });
-      expect(skip).toBe(10);
-      expect(take).toBe(10);
-    });
-
-    it("reports pagination meta", async () => {
-      assignments.findByTransitAgentPaginated.mockResolvedValue([[], 45]);
-
-      const result = await service.findMine("user-1", { pageSize: 20 });
-
-      expect(result.meta).toEqual({
-        total: 45,
-        page: 1,
-        pageSize: 20,
-        totalPages: 3,
-      });
-    });
-
-    it("save moves the assignment to IN_PROGRESS, finish closes it", async () => {
-      await service.submitMine("user-1", "ta-1", { finish: false });
-      expect(assignments.update.mock.calls[0][1].status).toBe(
-        TransitAssignmentStatus.InProgress,
-      );
-
-      assignments.update.mockClear();
-      await service.submitMine("user-1", "ta-1", { finish: true });
-      expect(assignments.update.mock.calls[0][1].status).toBe(
-        TransitAssignmentStatus.Finished,
-      );
-    });
-
-    it("refuses to re-submit an already finished assignment", async () => {
-      assignments.findOneWithRelations.mockResolvedValue(
-        row({
-          status: TransitAssignmentStatus.Finished,
-          finishedAt: new Date(),
-        }),
-      );
-
-      await expect(
-        service.submitMine("user-1", "ta-1", { finish: true }),
-      ).rejects.toThrow(ForbiddenException);
-    });
-  });
 });
diff --git a/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.service.ts b/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.service.ts
index 389e08fac..80f8d6be9 100644
--- a/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.service.ts
+++ b/apps/edr-freight-api/src/modules/transit-assignments/transit-assignments.service.ts
@@ -7,10 +7,19 @@ import {
 } from "@nestjs/common";
 
 import { InjectRepository } from "@nestjs/typeorm";
-import { Repository } from "typeorm";
+import { In, Repository } from "typeorm";
+import {
+  isDeliveryOrderFileCode,
+  isDjiboutiT1FileCode,
+  isGatePassFileCode,
+  isReleaseOrderFileCode,
+  isT1TransportFileCode,
+} from "@edr/types";
 
 import { Booking } from "../bookings/entities/booking.entity";
+import { ClearanceMilestone } from "../contracts/entities/clearance-milestone.entity";
 import { FilesService } from "../files/files.service";
+import { TrainSchedule } from "../train-schedules/entities/train-schedule.entity";
 import { TransitAgentsRepository } from "../transit-agents/transit-agents.repository";
 import { FileRecord } from "../files/entities/file.entity";
 import { CreateTransitAssignmentDto } from "./dto/create-transit-assignment.dto";
@@ -66,6 +75,86 @@ export type TransitAssignmentView = TransitAssignment & {
   files?: TransitAssignmentFileView[];
 };
 
+export type TransitTradeDirection = "IMPORT" | "EXPORT";
+export type TransitDocumentKind = "ro" | "do" | "t1" | "gate_pass" | "djibouti_t1";
+
+export interface TransitNextAction {
+  kind: "upload" | "wait" | "done";
+  label: string;
+  document?: TransitDocumentKind;
+}
+
+/** Minutes, or null when nothing has been measured yet — never zero. */
+export interface TransitTimingSummary {
+  median: number | null;
+  fastest: number | null;
+  slowest: number | null;
+  measured: number;
+}
+
+export interface TransitStatItem {
+  id: string;
+  bookingId: string;
+  reference: string | null;
+  customerName: string | null;
+  tradeDirection: TransitTradeDirection;
+  status: TransitAssignmentStatus;
+  schedulingStatus: string | null;
+  trainLabel: string | null;
+  assignedAt: string;
+  startedAt: string | null;
+  finishedAt: string | null;
+  bookingCreatedAt: string | null;
+  departedAt: string | null;
+  arrivedAt: string | null;
+  declaredAt: string | null;
+  roAt: string | null;
+  doAt: string | null;
+  t1At: string | null;
+  t1Closed: boolean;
+  gatePassAt: string | null;
+  djiboutiT1At: string | null;
+  documents: {
+    ro: number;
+    do: number;
+    t1: number;
+    gatePass: number;
+    djiboutiT1: number;
+    own: number;
+  };
+  timings: {
+    transit: number | null;
+    declarationToRo: number | null;
+    bookingToDo: number | null;
+    departureToT1: number | null;
+    arrivalToT1: number | null;
+    arrivalToGatePass: number | null;
+    arrivalToDjiboutiT1: number | null;
+    arrivalToFinish: number | null;
+  };
+  nextAction: TransitNextAction;
+}
+
+export interface TransitStats {
+  totals: {
+    assignments: number;
+    open: number;
+    notStarted: number;
+    inProgress: number;
+    finished: number;
+    imports: number;
+    exports: number;
+    awaitingDeparture: number;
+    inTransit: number;
+    arrived: number;
+    actionNeeded: number;
+  };
+  timings: Record<keyof TransitStatItem["timings"], TransitTimingSummary>;
+  documents: TransitStatItem["documents"];
+  pending: { ro: number; do: number; t1: number; gatePass: number; djiboutiT1: number };
+  items: TransitStatItem[];
+}
+
 @Injectable()
 export class TransitAssignmentsService {
   constructor(
@@ -77,6 +166,10 @@ export class TransitAssignmentsService {
     @InjectRepository(Booking)
     private readonly bookingsRepository: Repository<Booking>,
     private readonly filesService: FilesService,
+    @InjectRepository(ClearanceMilestone)
+    private readonly milestonesRepository: Repository<ClearanceMilestone>,
+    @InjectRepository(TrainSchedule)
+    private readonly trainSchedulesRepository: Repository<TrainSchedule>,
   ) {}
 
   private static minutesBetween(
@@ -179,98 +272,302 @@ export class TransitAssignmentsService {
    * reopened days later drags an average far enough to make the whole panel
    * lie about typical performance.
    */
-  async myStats(userId: string) {
+  /**
+   * The agent's dashboard, every figure derived from stamps that already exist:
+   * the train's departure and arrival, the booking's clearance milestones, and
+   * the upload time of each document on the booking (RO / DO / T1 / gate pass /
+   * Djibouti T1). Replaced batches carry a fresh stamp, so an "uploaded" time
+   * here is always the LAST update, matching the detail page.
+   *
+   * Nothing is stored: a corrected timestamp cannot leave a stale number behind.
+   */
+  async myStats(userId: string): Promise<TransitStats> {
     const agent = await this.requireAgentForUser(userId);
     const rows = await this.assignmentsRepository.findByTransitAgent(agent.id);
+    const bookingIds = [...new Set(rows.map((r) => r.bookingId))];
 
-    const docCounts = rows.length
-      ? await this.filesService.findByResourceIdsGrouped(
-          rows.map((r) => r.id),
-          TRANSIT_ASSIGNMENT_FILE_RESOURCE,
-        )
-      : new Map<string, unknown[]>();
+    const [ownDocs, bookingDocs, milestones, schedules] = await Promise.all([
+      rows.length
+        ? this.filesService.findByResourceIdsGrouped(
+            rows.map((r) => r.id),
+            TRANSIT_ASSIGNMENT_FILE_RESOURCE,
+          )
+        : new Map<string, FileRecord[]>(),
+      bookingIds.length
+        ? this.filesService.findByResourceIdsGrouped(bookingIds, "bookings")
+        : new Map<string, FileRecord[]>(),
+      bookingIds.length
+        ? this.milestonesRepository.find({
+            where: { bookingId: In(bookingIds) },
+            select: ["bookingId", "milestoneCode", "status", "triggeredAt"],
+          })
+        : [],
+      (() => {
+        const ids = [
+          ...new Set(
+            rows
+              .map((r) => r.booking?.trainScheduleId)
+              .filter((id): id is string => Boolean(id)),
+          ),
+        ];
+        return ids.length
+          ? this.trainSchedulesRepository.find({
+              where: { id: In(ids) },
+              select: [
+                "id",
+                "trainNumber",
+                "voyageNumber",
+                "actualDepartureAt",
+                "actualArrivalAt",
+              ],
+            })
+          : [];
+      })(),
+    ]);
 
-    const minutes = (from?: Date | null, to?: Date | null) =>
-      from && to ? Math.floor((to.getTime() - from.getTime()) / 60_000) : null;
+    const scheduleById = new Map(schedules.map((sch) => [sch.id, sch]));
+    const milestonesByBooking = new Map<string, ClearanceMilestone[]>();
+    for (const m of milestones) {
+      if (!m.bookingId) continue;
+      const bucket = milestonesByBooking.get(m.bookingId);
+      if (bucket) bucket.push(m);
+      else milestonesByBooking.set(m.bookingId, [m]);
+    }
+
+    const iso = (d?: Date | string | null): string | null =>
+      d ? new Date(d).toISOString() : null;
+    const minutes = (from?: string | null, to?: string | null): number | null =>
+      from && to
+        ? Math.floor((new Date(to).getTime() - new Date(from).getTime()) / 60_000)
+        : null;
+    /** Latest upload stamp among files matching a code family. */
+    const latest = (
+      files: FileRecord[],
+      matches: (code: string | null | undefined) => boolean,
+    ): { at: string | null; count: number } => {
+      const hits = files.filter((f) => matches(f.code));
+      return {
+        count: hits.length,
+        at: hits.reduce<string | null>((max, f) => {
+          const stamp = iso(f.createdAt);
+          return stamp && (!max || stamp > max) ? stamp : max;
+        }, null),
+      };
+    };
+    /** Earliest upload stamp — for append-only sets the FIRST document matters. */
+    const earliest = (
+      files: FileRecord[],
+      matches: (code: string | null | undefined) => boolean,
+    ): { at: string | null; count: number } => {
+      const hits = files.filter((f) => matches(f.code));
+      return {
+        count: hits.length,
+        at: hits.reduce<string | null>((min, f) => {
+          const stamp = iso(f.createdAt);
+          return stamp && (!min || stamp < min) ? stamp : min;
+        }, null),
+      };
+    };
+
+    const items: TransitStatItem[] = rows.map((row) => {
+      const booking = row.booking;
+      const tradeDirection: TransitTradeDirection =
+        booking?.tradeDirection === "EXPORT" ? "EXPORT" : "IMPORT";
+      const schedule = booking?.trainScheduleId
+        ? scheduleById.get(booking.trainScheduleId)
+        : undefined;
+
+      // Same rule as the clearance view's train state: the booking's own
+      // load/unload stamps first, the schedule's actuals only as a fallback for
+      // legacy bookings that predate per-booking loading.
+      const departedAt = iso(booking?.loadedAt ?? schedule?.actualDepartureAt);
+      const arrivedAt = iso(
+        booking?.arrivedAt ??
+          (booking?.loadedAt ? null : schedule?.actualArrivalAt),
+      );
+
+      const files = bookingDocs.get(row.bookingId) ?? [];
+      const ms = milestonesByBooking.get(row.bookingId) ?? [];
+      const milestone = (code: string) => ms.find((m) => m.milestoneCode === code);
+      const done = (code: string) => {
+        const m = milestone(code);
+        return m?.status === "COMPLETED" || m?.status === "SKIPPED";
+      };
+
+      const declared = done("DECLARED");
+      const declaredAt = iso(milestone("DECLARED")?.triggeredAt);
+      const ro = latest(files, isReleaseOrderFileCode);
+      const deliveryOrder = latest(files, isDeliveryOrderFileCode);
+      const t1 = latest(files, isT1TransportFileCode);
+      const gatePass = earliest(files, isGatePassFileCode);
+      const djiboutiT1 = earliest(files, isDjiboutiT1FileCode);
+      const t1Closed = milestone("T1_CLOSED")?.status === "COMPLETED";
+      const bookingCreatedAt = iso(booking?.createdAt);
+      const finishedAt = iso(row.finishedAt);
+      const finished = row.status === TransitAssignmentStatus.Finished;
+
+      const timings: TransitStatItem["timings"] = {
+        transit: minutes(departedAt, arrivedAt),
+        declarationToRo: tradeDirection === "EXPORT" ? minutes(declaredAt, ro.at) : null,
+        bookingToDo:
+          tradeDirection === "IMPORT" ? minutes(bookingCreatedAt, deliveryOrder.at) : null,
+        departureToT1: tradeDirection === "IMPORT" ? minutes(departedAt, t1.at) : null,
+        arrivalToT1: tradeDirection === "IMPORT" ? minutes(arrivedAt, t1.at) : null,
+        arrivalToGatePass:
+          tradeDirection === "EXPORT" ? minutes(arrivedAt, gatePass.at) : null,
+        arrivalToDjiboutiT1:
+          tradeDirection === "EXPORT" ? minutes(arrivedAt, djiboutiT1.at) : null,
+        arrivalToFinish: minutes(arrivedAt, finishedAt),
+      };
+
+      // What the officer should do next on this shipment — the same gates the
+      // detail page enforces, so the dashboard never points at a locked button.
+      let nextAction: TransitNextAction;
+      if (finished) {
+        nextAction = { kind: "done", label: "Assignment finished" };
+      } else if (tradeDirection === "EXPORT") {
+        if (!declared) {
+          nextAction = { kind: "wait", label: "Awaiting customs declaration" };
+        } else if (ro.count === 0) {
+          nextAction = { kind: "upload", label: "Upload Release Order", document: "ro" };
+        } else if (!departedAt) {
+          nextAction = { kind: "wait", label: "Awaiting train departure" };
+        } else if (!arrivedAt) {
+          nextAction = { kind: "wait", label: "Train in transit" };
+        } else if (gatePass.count === 0) {
+          nextAction = { kind: "upload", label: "Upload gate pass", document: "gate_pass" };
+        } else if (djiboutiT1.count === 0) {
+          nextAction = {
+            kind: "upload",
+            label: "Upload Djibouti T1",
+            document: "djibouti_t1",
+          };
+        } else {
+          nextAction = { kind: "done", label: "Paperwork complete" };
+        }
+      } else if (deliveryOrder.count === 0) {
+        nextAction = { kind: "upload", label: "Upload Delivery Order", document: "do" };
+      } else if (!departedAt) {
+        nextAction = { kind: "wait", label: "Awaiting train departure" };
+      } else if (t1.count === 0 && !t1Closed) {
+        nextAction = { kind: "upload", label: "Upload T1 documents", document: "t1" };
+      } else if (!arrivedAt) {
+        nextAction = { kind: "wait", label: "Train in transit" };
+      } else {
+        nextAction = { kind: "done", label: t1Closed ? "T1 closed" : "Paperwork complete" };
+      }
 
-    const items = rows.map((row) => {
-      const arrivedAt = row.booking?.arrivedAt ?? null;
       return {
         id: row.id,
-        reference: row.booking?.reference ?? null,
-        customerName: row.booking?.company?.name ?? null,
+        bookingId: row.bookingId,
+        reference: booking?.reference ?? null,
+        customerName: booking?.company?.name ?? null,
+        tradeDirection,
         status: row.status,
-        schedulingStatus: row.booking?.schedulingStatus ?? null,
-        /** Dispatch (cargo loaded) to the train arriving. */
-        transitMinutes: minutes(row.booking?.loadedAt, arrivedAt),
-        /** Arrival to the agent picking the work up. */
-        pickupMinutes: minutes(arrivedAt, row.startedAt),
-        /** Arrival to the work being finished — the headline metric. */
-        clearanceMinutes: minutes(arrivedAt, row.finishedAt),
-        documentCount: (docCounts.get(row.id) ?? []).length,
+        schedulingStatus: booking?.schedulingStatus ?? null,
+        trainLabel: schedule?.voyageNumber ?? schedule?.trainNumber ?? null,
+        assignedAt: iso(row.assignedAt) ?? new Date(0).toISOString(),
+        startedAt: iso(row.startedAt),
+        finishedAt,
+        bookingCreatedAt,
+        departedAt,
+        arrivedAt,
+        declaredAt,
+        roAt: ro.at,
+        doAt: deliveryOrder.at,
+        t1At: t1.at,
+        t1Closed,
+        gatePassAt: gatePass.at,
+        djiboutiT1At: djiboutiT1.at,
+        documents: {
+          ro: ro.count,
+          do: deliveryOrder.count,
+          t1: t1.count,
+          gatePass: gatePass.count,
+          djiboutiT1: djiboutiT1.count,
+          own: (ownDocs.get(row.id) ?? []).length,
+        },
+        timings,
+        nextAction,
       };
     });
 
-    const median = (values: number[]): number | null => {
-      if (!values.length) return null;
-      const sorted = [...values].sort((a, b) => a - b);
+    // Most recently moving shipment first: arrival, else departure, else when
+    // it was handed to the agent.
+    const activity = (i: TransitStatItem) =>
+      i.arrivedAt ?? i.departedAt ?? i.assignedAt;
+    items.sort((a, b) => activity(b).localeCompare(activity(a)));
+
+    const summarize = (values: Array<number | null>): TransitTimingSummary => {
+      const measured = values.filter((v): v is number => v !== null && v >= 0);
+      if (!measured.length) {
+        return { median: null, fastest: null, slowest: null, measured: 0 };
+      }
+      const sorted = [...measured].sort((a, b) => a - b);
       const mid = Math.floor(sorted.length / 2);
-      return sorted.length % 2
-        ? sorted[mid]
-        : Math.round((sorted[mid - 1] + sorted[mid]) / 2);
+      return {
+        median:
+          sorted.length % 2
+            ? sorted[mid]
+            : Math.round((sorted[mid - 1] + sorted[mid]) / 2),
+        fastest: sorted[0],
+        slowest: sorted[sorted.length - 1],
+        measured: sorted.length,
+      };
     };
+    const timing = (key: keyof TransitStatItem["timings"]) =>
+      summarize(items.map((i) => i.timings[key]));
 
-    const cleared = items
-      .map((i) => i.clearanceMinutes)
-      .filter((v): v is number => v !== null);
-    const pickups = items
-      .map((i) => i.pickupMinutes)
-      .filter((v): v is number => v !== null);
-
-    // SLA bands, in minutes: inside 2h, inside 6h, beyond.
-    const sla = {
-      under2h: cleared.filter((v) => v <= 120).length,
-      under6h: cleared.filter((v) => v > 120 && v <= 360).length,
-      over6h: cleared.filter((v) => v > 360).length,
-    };
-
-    // Coverage counts only bookings that COULD have documents — uploads are
-    // gated on dispatch, so counting scheduled ones would invent a failure.
-    const dispatched = items.filter((i) => i.schedulingStatus === "DISPATCHED");
-    const withDocs = dispatched.filter((i) => i.documentCount > 0).length;
+    const open = items.filter((i) => i.status !== TransitAssignmentStatus.Finished);
+    const pendingFor = (document: TransitDocumentKind) =>
+      items.filter(
+        (i) => i.nextAction.kind === "upload" && i.nextAction.document === document,
+      ).length;
+    const sumDocs = (key: keyof TransitStatItem["documents"]) =>
+      items.reduce((sum, i) => sum + i.documents[key], 0);
 
     return {
       totals: {
         assignments: items.length,
-        open: items.filter((i) => i.status !== TransitAssignmentStatus.Finished)
+        open: open.length,
+        notStarted: items.filter((i) => i.status === TransitAssignmentStatus.NotStarted)
           .length,
-        finished: items.filter(
-          (i) => i.status === TransitAssignmentStatus.Finished,
-        ).length,
-        readyForDocuments: items.filter(
-          (i) =>
-            i.schedulingStatus === "DISPATCHED" &&
-            i.status !== TransitAssignmentStatus.Finished,
-        ).length,
-        documents: items.reduce((sum, i) => sum + i.documentCount, 0),
+        inProgress: items.filter((i) => i.status === TransitAssignmentStatus.InProgress)
+          .length,
+        finished: items.length - open.length,
+        imports: items.filter((i) => i.tradeDirection === "IMPORT").length,
+        exports: items.filter((i) => i.tradeDirection === "EXPORT").length,
+        awaitingDeparture: open.filter((i) => !i.departedAt).length,
+        inTransit: open.filter((i) => i.departedAt && !i.arrivedAt).length,
+        arrived: open.filter((i) => Boolean(i.arrivedAt)).length,
+        actionNeeded: items.filter((i) => i.nextAction.kind === "upload").length,
       },
-      performance: {
-        medianClearanceMinutes: median(cleared),
-        medianPickupMinutes: median(pickups),
-        fastestClearanceMinutes: cleared.length ? Math.min(...cleared) : null,
-        slowestClearanceMinutes: cleared.length ? Math.max(...cleared) : null,
-        onTimeRate: cleared.length
-          ? Math.round(((sla.under2h + sla.under6h) / cleared.length) * 100)
-          : null,
-        measured: cleared.length,
+      timings: {
+        transit: timing("transit"),
+        declarationToRo: timing("declarationToRo"),
+        bookingToDo: timing("bookingToDo"),
+        departureToT1: timing("departureToT1"),
+        arrivalToT1: timing("arrivalToT1"),
+        arrivalToGatePass: timing("arrivalToGatePass"),
+        arrivalToDjiboutiT1: timing("arrivalToDjiboutiT1"),
+        arrivalToFinish: timing("arrivalToFinish"),
       },
-      sla,
-      coverage: {
-        dispatched: dispatched.length,
-        withDocuments: withDocs,
+      documents: {
+        ro: sumDocs("ro"),
+        do: sumDocs("do"),
+        t1: sumDocs("t1"),
+        gatePass: sumDocs("gatePass"),
+        djiboutiT1: sumDocs("djiboutiT1"),
+        own: sumDocs("own"),
       },
-      /** Newest first, for the timeline and the recent-activity list. */
-      items: items.slice(0, 12),
+      pending: {
+        ro: pendingFor("ro"),
+        do: pendingFor("do"),
+        t1: pendingFor("t1"),
+        gatePass: pendingFor("gate_pass"),
+        djiboutiT1: pendingFor("djibouti_t1"),
+      },
+      items: items.slice(0, 20),
     };
   }
 
@@ -393,6 +690,50 @@ export class TransitAssignmentsService {
     return this.findMineById(userId, id);
   }
 
+  /**
+   * Make `transitAgentId` the officer working `bookingId`, as the clearance
+   * desk's "assign transit assignee" step means it.
+   *
+   * The booking itself only records the officer's NAME, which is all the
+   * clearance UI needs; the officer's own portal reads `transit_assignments`.
+   * This keeps the two in step, and is deliberately forgiving where `create()`
+   * is strict:
+   *  - assigning the same agent twice is a no-op, not a 409 — the desk may
+   *    re-save the step without meaning to start over;
+   *  - a REASSIGNMENT retires the previous officer's row, so a shipment does
+   *    not sit in the work list of someone who no longer handles it. Finished
+   *    rows stay, since they are that officer's record of work already done.
+   */
+  async ensureAssignment(
+    bookingId: string,
+    transitAgentId: string,
+    assignedByUserId?: string,
+  ): Promise<void> {
+    const existing =
+      await this.assignmentsRepository.findByBooking(bookingId);
+
+    for (const row of existing) {
+      if (
+        row.transitAgentId !== transitAgentId &&
+        row.status !== TransitAssignmentStatus.Finished
+      ) {
+        await this.assignmentsRepository.softDelete(row.id);
+      }
+    }
+
+    if (existing.some((row) => row.transitAgentId === transitAgentId)) return;
+
+    await this.assignmentsRepository.create({
+      bookingId,
+      transitAgentId,
+      status: TransitAssignmentStatus.NotStarted,
+      startedAt: null,
+      finishedAt: null,
+      assignedByUserId: assignedByUserId ?? null,
+      note: null,
+    });
+  }
+
   async create(
     dto: CreateTransitAssignmentDto,
     assignedByUserId?: string,
diff --git a/apps/edr-freight-web/backoffice/src/components/contracts/GlExchangePanel.tsx b/apps/edr-freight-web/backoffice/src/components/contracts/GlExchangePanel.tsx
index 852a89cc1..4845d3798 100644
--- a/apps/edr-freight-web/backoffice/src/components/contracts/GlExchangePanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/GlExchangePanel.tsx
@@ -42,6 +42,9 @@ const SIDES: Record<Freight.GlExchangeDocument["side"], { label: string; color:
   {
     ET: { label: "GL Ethiopia", color: "edr-green" },
     DJ: { label: "GL Djibouti", color: "blue" },
+    // The transit officer assigned to the shipment can post here too — both
+    // desks see it, and it is never attributed to either of them.
+    TRANSIT: { label: "Transit agent", color: "grape" },
   };
 
 function formatBytes(bytes: number): string {
@@ -99,6 +102,7 @@ export function GlExchangePanel({ entityId }: GlExchangePanelProps) {
     () => ({
       et: documents.filter((d) => d.side === "ET").length,
       dj: documents.filter((d) => d.side === "DJ").length,
+      transit: documents.filter((d) => d.side === "TRANSIT").length,
       shared: documents.filter((d) => d.visibleToCustomer).length,
     }),
     [documents],
@@ -141,6 +145,11 @@ export function GlExchangePanel({ entityId }: GlExchangePanelProps) {
             <Badge variant="light" color="blue" radius="sm" tt="none">
               {stats.dj} from GL Djibouti
             </Badge>
+            {stats.transit > 0 ? (
+              <Badge variant="light" color="grape" radius="sm" tt="none">
+                {stats.transit} from the transit agent
+              </Badge>
+            ) : null}
             <Badge variant="light" color="gray" radius="sm" tt="none">
               {stats.shared} visible to customer
             </Badge>
diff --git a/apps/edr-freight-web/backoffice/src/components/contracts/PhasedClearanceActionPanel.tsx b/apps/edr-freight-web/backoffice/src/components/contracts/PhasedClearanceActionPanel.tsx
index 07ca7f735..313645db3 100644
--- a/apps/edr-freight-web/backoffice/src/components/contracts/PhasedClearanceActionPanel.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/contracts/PhasedClearanceActionPanel.tsx
@@ -782,7 +782,7 @@ export function PhasedClearanceActionPanel({
 
             <Stepper.Step
               label="T1 transport documents"
-              description="GL Djibouti uploads after the gate pass is secured"
+              description="GL Djibouti uploads after the train departs"
               icon={
                 t1Uploaded || clearance.t1?.closed ? (
                   <CheckCircle2 size={14} />
diff --git a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
index 22266212e..62fecd600 100644
--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
+++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
@@ -662,6 +662,8 @@ export const RULE_ENGINE_RESOURCES: RuleEngineResourceConfig[] = [
     cardTitleKey: "name",
     columns: [
       { id: "name", header: "Name", accessorKey: "name" },
+      { id: "email", header: "Email", accessorKey: "email" },
+      { id: "phoneNumber", header: "Phone", accessorKey: "phoneNumber" },
       { id: "validFrom", header: "Valid from", accessorKey: "validFrom", format: "date" },
       { id: "validTo", header: "Valid to", accessorKey: "validTo", format: "date" },
       {
diff --git a/apps/edr-freight-web/portal/src/App.tsx b/apps/edr-freight-web/portal/src/App.tsx
index f224b3959..5391fa150 100644
--- a/apps/edr-freight-web/portal/src/App.tsx
+++ b/apps/edr-freight-web/portal/src/App.tsx
@@ -71,6 +71,7 @@ import {
 } from "./pages/shipping-line";
 import {
   TransitAgentBookingsPage,
+  TransitAgentBookingDetailPage,
   TransitAgentOverviewPage,
 } from "./pages/transit-agent";
 import FaqPage from "./pages/support/FaqPage";
@@ -545,6 +546,10 @@ const App = () => {
                     path="/transit-agent/bookings"
                     element={<TransitAgentBookingsPage />}
                   />
+                  <Route
+                    path="/transit-agent/bookings/:id"
+                    element={<TransitAgentBookingDetailPage />}
+                  />
                 </Route>
               </Route>
             )}
diff --git a/apps/edr-freight-web/portal/src/components/contracts/PortalMultiFileDropzone.tsx b/apps/edr-freight-web/portal/src/components/contracts/PortalMultiFileDropzone.tsx
new file mode 100644
index 000000000..060b85e75
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/components/contracts/PortalMultiFileDropzone.tsx
@@ -0,0 +1,248 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  ActionIcon,
+  Box,
+  Group,
+  Stack,
+  Text,
+  ThemeIcon,
+  UnstyledButton,
+} from "@mantine/core";
+import { FileText, Plus, Trash2, UploadCloud } from "lucide-react";
+
+import { BORDER, GREEN, INK } from "@/pages/contracts/contract-ui";
+
+export interface PortalMultiFileDropzoneProps {
+  label: string;
+  description?: string;
+  files: File[];
+  onChange: (next: File[]) => void;
+  accept?: string;
+  disabled?: boolean;
+  /** Hint under the drop area, e.g. "PDF or image". */
+  acceptHint?: string;
+}
+
+export function formatBytes(bytes: number | null | undefined): string {
+  if (!bytes) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
+  return `${parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;
+}
+
+function isImageFile(file: File): boolean {
+  if (file.type.startsWith("image/")) return true;
+  const ext = file.name.split(".").pop()?.toLowerCase() ?? "";
+  return ["png", "jpg", "jpeg", "webp", "gif", "bmp", "svg"].includes(ext);
+}
+
+/** Stable identity for a staged file — two picks of the same file dedupe. */
+const fileKey = (f: File) => `${f.name}:${f.size}:${f.lastModified}`;
+
+/**
+ * Multi-file counterpart of `PortalFileDropzone`: the same drop area, but the
+ * picker keeps a list. Picking again APPENDS (deduplicated by name+size+mtime),
+ * so an officer can gather documents across several picks before uploading.
+ */
+export function PortalMultiFileDropzone({
+  label,
+  description,
+  files,
+  onChange,
+  accept = "application/pdf,image/*",
+  disabled = false,
+  acceptHint = "PDF or image",
+}: PortalMultiFileDropzoneProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragOver, setDragOver] = useState(false);
+
+  // One object URL per staged image, revoked when the list changes.
+  const thumbs = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const f of files) {
+      if (isImageFile(f)) map.set(fileKey(f), URL.createObjectURL(f));
+    }
+    return map;
+  }, [files]);
+
+  useEffect(() => {
+    return () => {
+      for (const url of thumbs.values()) URL.revokeObjectURL(url);
+    };
+  }, [thumbs]);
+
+  const add = (incoming: File[]) => {
+    if (disabled || incoming.length === 0) return;
+    const seen = new Set(files.map(fileKey));
+    const next = [...files];
+    for (const f of incoming) {
+      const key = fileKey(f);
+      if (seen.has(key)) continue;
+      seen.add(key);
+      next.push(f);
+    }
+    onChange(next);
+  };
+
+  const remove = (target: File) =>
+    onChange(files.filter((f) => fileKey(f) !== fileKey(target)));
+
+  const openPicker = () => {
+    if (disabled) return;
+    // Reset so re-picking the same file after removal still fires onChange.
+    if (inputRef.current) inputRef.current.value = "";
+    inputRef.current?.click();
+  };
+
+  const hasFiles = files.length > 0;
+
+  return (
+    <Stack gap={8}>
+      <Box>
+        <Text fz={13} fw={700} style={{ color: INK }}>
+          {label}
+        </Text>
+        {description ? (
+          <Text fz={12} c="dimmed" mt={2}>
+            {description}
+          </Text>
+        ) : null}
+      </Box>
+
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        accept={accept}
+        hidden
+        disabled={disabled}
+        onChange={(e) => add(Array.from(e.target.files ?? []))}
+      />
+
+      <Box
+        onDragOver={(e) => {
+          e.preventDefault();
+          if (!disabled) setDragOver(true);
+        }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setDragOver(false);
+          add(Array.from(e.dataTransfer.files ?? []));
+        }}
+        onClick={openPicker}
+        style={{
+          borderRadius: 14,
+          border: `2px dashed ${dragOver ? GREEN : BORDER}`,
+          background: dragOver ? "#F2FBF6" : "#FAFCFE",
+          padding: hasFiles ? "16px 20px" : "28px 20px",
+          textAlign: "center",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.6 : 1,
+          transition: "border-color 120ms ease, background 120ms ease, padding 120ms ease",
+        }}
+      >
+        <Stack gap={8} align="center">
+          <ThemeIcon
+            variant="light"
+            color={dragOver ? "edr-green" : hasFiles ? "edr-green" : "gray"}
+            radius="xl"
+            size={hasFiles ? 40 : 48}
+          >
+            {hasFiles ? <Plus size={20} /> : <UploadCloud size={24} />}
+          </ThemeIcon>
+          <Box>
+            <Text fz={13} fw={600} style={{ color: INK }}>
+              {dragOver
+                ? "Drop to add"
+                : hasFiles
+                  ? "Add more files"
+                  : "Drag & drop your files here"}
+            </Text>
+            <Text fz={12} c="dimmed" mt={4}>
+              or <span style={{ color: GREEN, fontWeight: 700 }}>browse</span> —{" "}
+              {acceptHint}. Add as many as you need.
+            </Text>
+          </Box>
+        </Stack>
+      </Box>
+
+      {hasFiles ? (
+        <Stack gap={6}>
+          <Group justify="space-between" px={2}>
+            <Text fz={11} fw={700} c="edr-green" tt="uppercase">
+              {files.length} file{files.length === 1 ? "" : "s"} ready to upload
+            </Text>
+            <UnstyledButton
+              onClick={() => onChange([])}
+              disabled={disabled}
+              style={{ fontSize: 11.5, color: "#6B7C8E", fontWeight: 600 }}
+            >
+              Clear all
+            </UnstyledButton>
+          </Group>
+          {files.map((f) => {
+            const key = fileKey(f);
+            const thumb = thumbs.get(key);
+            return (
+              <Group
+                key={key}
+                gap={12}
+                wrap="nowrap"
+                p="xs"
+                style={{
+                  borderRadius: 12,
+                  border: `1px solid ${GREEN}`,
+                  background: "linear-gradient(135deg, #F2FBF6 0%, #fff 75%)",
+                  minWidth: 0,
+                }}
+              >
+                {thumb ? (
+                  <Box
+                    style={{
+                      width: 40,
+                      height: 40,
+                      flexShrink: 0,
+                      borderRadius: 8,
+                      overflow: "hidden",
+                      border: `1px solid ${BORDER}`,
+                    }}
+                  >
+                    <img
+                      src={thumb}
+                      alt=""
+                      style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                    />
+                  </Box>
+                ) : (
+                  <ThemeIcon variant="light" color="edr-green" radius="md" size={40}>
+                    <FileText size={18} />
+                  </ThemeIcon>
+                )}
+                <Box style={{ minWidth: 0, flex: 1 }}>
+                  <Text fz={13} fw={600} style={{ color: INK }} truncate>
+                    {f.name}
+                  </Text>
+                  <Text fz={11} c="dimmed">
+                    {formatBytes(f.size)}
+                  </Text>
+                </Box>
+                <ActionIcon
+                  variant="subtle"
+                  color="red"
+                  radius="md"
+                  aria-label={`Remove ${f.name}`}
+                  onClick={() => remove(f)}
+                  disabled={disabled}
+                >
+                  <Trash2 size={15} />
+                </ActionIcon>
+              </Group>
+            );
+          })}
+        </Stack>
+      ) : null}
+    </Stack>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/transit-agent/ClearanceWorkflowFilesPanel.tsx b/apps/edr-freight-web/portal/src/pages/transit-agent/ClearanceWorkflowFilesPanel.tsx
new file mode 100644
index 000000000..a0e34a6ad
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/transit-agent/ClearanceWorkflowFilesPanel.tsx
@@ -0,0 +1,166 @@
+import {
+  Badge,
+  Box,
+  Button,
+  Card,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
+import { Download, Eye, FileText } from "lucide-react";
+import type { Freight } from "@edr/types";
+import { isViewable } from "@edr/ui-common";
+
+import { fetchViewableFile } from "@/services/files.service";
+
+const CATEGORY_LABELS: Record<
+  Freight.ClearanceWorkflowFileCategory,
+  string
+> = {
+  declaration: "Declaration",
+  draft_declaration: "Draft declaration",
+  duty: "Duty & taxes",
+  transit: "Transit",
+  djibouti: "Djibouti",
+};
+
+const CATEGORY_ORDER: Freight.ClearanceWorkflowFileCategory[] = [
+  "draft_declaration",
+  "declaration",
+  "duty",
+  "transit",
+  "djibouti",
+];
+
+const OWNER_LABELS: Record<Freight.ClearanceWorkflowFileOwner, string> = {
+  customer: "Customer",
+  gl_et: "GL Ethiopia",
+  gl_dj: "GL Djibouti",
+};
+
+export interface ClearanceWorkflowFilesPanelProps {
+  files: Freight.ClearanceWorkflowFile[];
+  onView: (file: { name: string; url: string }) => void;
+  onDownload?: (file: { id: string; name: string }) => void;
+  title?: string;
+}
+
+export function ClearanceWorkflowFilesPanel({
+  files,
+  onView,
+  onDownload,
+  title = "Customs workflow documents",
+}: ClearanceWorkflowFilesPanelProps) {
+  if (files.length === 0) return null;
+
+  const grouped = CATEGORY_ORDER.map((category) => ({
+    category,
+    label: CATEGORY_LABELS[category],
+    items: files.filter((f) => f.category === category),
+  })).filter((g) => g.items.length > 0);
+
+  return (
+    <Card withBorder radius="md" p="md">
+      <Group gap={10} mb="sm" wrap="nowrap">
+        <ThemeIcon variant="light" color="edr-green" radius="md" size={32}>
+          <FileText size={16} />
+        </ThemeIcon>
+        <Text fw={600} fz={15}>
+          {title}
+        </Text>
+      </Group>
+      <Stack gap="md">
+        {grouped.map((group) => (
+          <Box key={group.category}>
+            <Text size="xs" fw={700} c="dimmed" tt="uppercase" mb={8}>
+              {group.label}
+            </Text>
+            <Stack gap={8}>
+              {group.items.map((item) => (
+                <WorkflowFileRow
+                  key={item.code}
+                  item={item}
+                  onView={onView}
+                  onDownload={onDownload}
+                />
+              ))}
+            </Stack>
+          </Box>
+        ))}
+      </Stack>
+    </Card>
+  );
+}
+
+function WorkflowFileRow({
+  item,
+  onView,
+  onDownload,
+}: {
+  item: Freight.ClearanceWorkflowFile;
+  onView: (file: { name: string; url: string }) => void;
+  onDownload?: (file: { id: string; name: string }) => void;
+}) {
+  const file = item.file;
+  if (!file) return null;
+
+  const canPreview = isViewable({ name: file.name, url: "" });
+
+  return (
+    <Paper withBorder radius="md" p="sm">
+      <Group justify="space-between" wrap="nowrap" align="center">
+        <Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={36}>
+            <FileText size={17} />
+          </ThemeIcon>
+          <Box style={{ minWidth: 0 }}>
+            <Text size="sm" fw={600} truncate>
+              {item.label}
+            </Text>
+            <Group gap={6} wrap="nowrap" mt={2}>
+              <Badge size="xs" variant="light" color="gray" radius="sm" tt="none">
+                {OWNER_LABELS[item.uploadedBy]}
+              </Badge>
+              <Text size="xs" c="dimmed" truncate>
+                {file.name}
+              </Text>
+            </Group>
+          </Box>
+        </Group>
+        <Group gap={6} wrap="nowrap">
+          {canPreview ? (
+            <Tooltip label="Preview">
+              <Button
+                size="compact-xs"
+                variant="default"
+                radius="md"
+                leftSection={<Eye size={13} />}
+                onClick={() =>
+                  void fetchViewableFile(file.id, file.name).then(onView)
+                }
+              >
+                View
+              </Button>
+            </Tooltip>
+          ) : null}
+          {onDownload ? (
+            <Tooltip label="Download">
+              <Button
+                size="compact-xs"
+                variant="light"
+                radius="md"
+                leftSection={<Download size={13} />}
+                onClick={() => onDownload({ id: file.id, name: file.name })}
+              >
+                Download
+              </Button>
+            </Tooltip>
+          ) : null}
+        </Group>
+      </Group>
+    </Paper>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/transit-agent/TransitAgentBookingDetailPage.tsx b/apps/edr-freight-web/portal/src/pages/transit-agent/TransitAgentBookingDetailPage.tsx
new file mode 100644
index 000000000..0808814cc
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/transit-agent/TransitAgentBookingDetailPage.tsx
@@ -0,0 +1,1188 @@
+import {
+  Alert,
+  Anchor,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  Grid,
+  Group,
+  Loader,
+  Modal,
+  Paper,
+  Stack,
+  Tabs,
+  Text,
+  TextInput,
+  ThemeIcon,
+  Timeline,
+  Title,
+  Tooltip,
+} from "@mantine/core";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import {
+  AlertCircle,
+  AlertTriangle,
+  ArrowLeft,
+  Building2,
+  CheckCircle2,
+  CircleDot,
+  ClipboardList,
+  Download,
+  Eye,
+  EyeOff,
+  FileText,
+  History,
+  MessageSquareWarning,
+  Send,
+  Ship,
+  Receipt,
+  Share2,
+  Train,
+  Upload,
+  UserCheck,
+} from "lucide-react";
+import { useNavigate, useParams } from "react-router-dom";
+import type { Freight } from "@edr/types";
+
+import { isViewable } from "@edr/ui-common";
+
+import { useFileViewer } from "@/hooks/useFileViewer";
+import {
+  downloadStoredFile,
+  fetchViewableFile,
+} from "@/services/files.service";
+import { ClearanceWorkflowFilesPanel } from "@/pages/transit-agent/ClearanceWorkflowFilesPanel";
+import { TransitClearanceActionPanel } from "@/pages/transit-agent/TransitClearanceActionPanel";
+import {
+  TransitExportDocumentsPanel,
+  TransitImportDocumentsPanel,
+} from "@/pages/transit-agent/TransitDocumentsPanel";
+import { transitAssignmentsService } from "@/services/transit-assignments.service";
+import { bookingsService } from "@/services/bookings.service";
+import { useState } from "react";
+import toast from "react-hot-toast";
+
+const BACK_TO = "/transit-agent/bookings";
+
+const prettyStatus = (s?: string | null) =>
+  (s ?? "")
+    .toLowerCase()
+    .replace(/_/g, " ")
+    .replace(/^\w/, (c) => c.toUpperCase());
+
+const formatDate = (value?: string | null): string =>
+  value ? new Date(value).toLocaleString() : "—";
+
+/** Minutes as "5h 30m" — the raw integer is unreadable in a grid. */
+function formatMinutes(minutes: number | null | undefined): string {
+  if (minutes == null) return "—";
+  const hours = Math.floor(minutes / 60);
+  const rest = minutes % 60;
+  return hours ? `${hours}h ${rest}m` : `${rest}m`;
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  NOT_STARTED: "gray",
+  IN_PROGRESS: "blue",
+  FINISHED: "edr-green",
+};
+
+/** Icon + color per action family; unknown actions fall back to a neutral dot. */
+function eventMeta(action: string): { icon: typeof Upload; color: string } {
+  if (
+    action === "DOC_APPROVED" ||
+    action.endsWith("_ACCEPTED") ||
+    action.endsWith("_FINALIZED") ||
+    action.endsWith("_CONFIRMED")
+  )
+    return { icon: CheckCircle2, color: "edr-green" };
+  if (
+    action === "DOC_QUERIED" ||
+    action.includes("CHANGE_REQUESTED") ||
+    action.includes("AMENDMENT")
+  )
+    return { icon: MessageSquareWarning, color: "red" };
+  if (action.startsWith("CHARGE_"))
+    return {
+      icon: Receipt,
+      color: action === "CHARGE_PAID" ? "edr-green" : "orange",
+    };
+  if (action.includes("TRANSIT_ASSIGNEE")) return { icon: UserCheck, color: "blue" };
+  if (action.includes("ORDER")) return { icon: Ship, color: "blue" };
+  if (action.includes("SENT")) return { icon: Send, color: "blue" };
+  if (action.includes("UPLOAD") || action.includes("SUBMITTED"))
+    return { icon: Upload, color: "blue" };
+  if (action.includes("DOC")) return { icon: FileText, color: "gray" };
+  return { icon: CircleDot, color: "gray" };
+}
+
+const ACTOR_BADGE: Record<
+  Freight.ClearanceHistoryEvent["actorType"],
+  { label: string; color: string }
+> = {
+  STAFF: { label: "Staff", color: "blue" },
+  CUSTOMER: { label: "Customer", color: "grape" },
+  SYSTEM: { label: "System", color: "gray" },
+};
+
+const SIDES: Record<
+  Freight.GlExchangeDocument["side"],
+  { label: string; color: string }
+> = {
+  ET: { label: "GL Ethiopia", color: "edr-green" },
+  DJ: { label: "GL Djibouti", color: "blue" },
+  TRANSIT: { label: "Transit agent", color: "grape" },
+};
+
+function formatBytes(bytes: number): string {
+  if (!bytes) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${parseFloat((bytes / 1024 ** i).toFixed(1))} ${units[i]}`;
+}
+
+const formatDateTime = (value?: string | null): string =>
+  value
+    ? new Date(value).toLocaleString("en-GB", {
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+      })
+    : "—";
+
+/** Review state → badge, matching the GL review section's scale. */
+const REVIEW_META: Record<string, { label: string; color: string }> = {
+  APPROVED: { label: "Approved", color: "edr-green" },
+  QUERIED: { label: "Queried", color: "red" },
+  PENDING: { label: "Pending review", color: "yellow" },
+};
+
+/**
+ * The customer's clearance documents — what the shipment was cleared on.
+ *
+ * Read-only here: approving and querying are GL Ethiopia's, and the agent's
+ * token would be refused. Every attached file is viewable and downloadable,
+ * which is the point of the panel for the officer handling the shipment.
+ */
+function CustomerDocumentsCard({
+  documents,
+  loading,
+  onView,
+}: {
+  documents: Freight.ClearanceDocument[];
+  loading: boolean;
+  onView: (file: { name: string; url: string }) => void;
+}) {
+  const attached = documents.filter((d) => d.file);
+
+  return (
+    <Card withBorder radius="md" p="md">
+      <Group gap={10} mb="sm" wrap="nowrap" justify="space-between">
+        <Group gap={10} wrap="nowrap">
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={32}>
+            <FileText size={16} />
+          </ThemeIcon>
+          <Text fw={600} fz={15}>
+            Customer documents
+          </Text>
+        </Group>
+        {attached.length > 0 ? (
+          <Badge size="sm" variant="light" color="gray" radius="sm">
+            {attached.length}
+          </Badge>
+        ) : null}
+      </Group>
+
+      {loading ? (
+        <Group py="lg" justify="center">
+          <Loader size="sm" color="edr-green" />
+        </Group>
+      ) : documents.length === 0 ? (
+        <Text fz={13} c="dimmed">
+          No customer documents on this shipment.
+        </Text>
+      ) : (
+        <Stack gap={8}>
+          {documents.map((doc) => {
+            const meta = doc.reviewStatus
+              ? REVIEW_META[doc.reviewStatus]
+              : null;
+            return (
+              <Paper key={`${doc.settingCode}:${doc.fileKey}`} withBorder radius="md" p="sm">
+                <Group justify="space-between" wrap="nowrap" align="flex-start" gap="sm">
+                  <Group gap={10} wrap="nowrap" align="flex-start" style={{ minWidth: 0 }}>
+                    <ThemeIcon
+                      variant="light"
+                      color={doc.file ? "edr-green" : "gray"}
+                      radius="md"
+                      size={36}
+                    >
+                      <FileText size={16} />
+                    </ThemeIcon>
+                    <Box style={{ minWidth: 0 }}>
+                      <Group gap={6} wrap="nowrap">
+                        <Text size="sm" fw={600} truncate>
+                          {doc.label}
+                        </Text>
+                        {doc.required ? (
+                          <Badge size="xs" variant="light" color="gray" radius="sm" tt="none">
+                            Required
+                          </Badge>
+                        ) : null}
+                        {meta ? (
+                          <Badge size="xs" variant="light" color={meta.color} radius="sm" tt="none">
+                            {meta.label}
+                          </Badge>
+                        ) : null}
+                      </Group>
+                      {doc.file ? (
+                        <Text size="xs" c="dimmed" mt={3} truncate>
+                          {doc.file.name}
+                          {doc.uploadedAt ? ` · ${formatDateTime(doc.uploadedAt)}` : ""}
+                        </Text>
+                      ) : (
+                        <Text size="xs" c="dimmed" mt={3}>
+                          Not uploaded yet
+                        </Text>
+                      )}
+                      {/* GL's query reason — the officer needs to know why a
+                          document was sent back, not just that it was. */}
+                      {doc.reviewStatus === "QUERIED" && doc.note ? (
+                        <Text fz="12px" c="red.8" mt={3}>
+                          {doc.note}
+                        </Text>
+                      ) : null}
+                    </Box>
+                  </Group>
+
+                  {doc.file ? (
+                    <Group gap={6} wrap="nowrap">
+                      {isViewable({ name: doc.file.name, url: "" }) ? (
+                        <Tooltip label="Preview">
+                          <Button
+                            size="compact-xs"
+                            variant="default"
+                            radius="md"
+                            leftSection={<Eye size={13} />}
+                            onClick={() =>
+                              void fetchViewableFile(
+                                doc.file!.id,
+                                doc.file!.name,
+                              ).then(onView)
+                            }
+                          >
+                            View
+                          </Button>
+                        </Tooltip>
+                      ) : null}
+                      <Tooltip label="Download">
+                        <Button
+                          size="compact-xs"
+                          variant="light"
+                          radius="md"
+                          leftSection={<Download size={13} />}
+                          onClick={() =>
+                            void downloadStoredFile(doc.file!.id, doc.file!.name)
+                          }
+                        >
+                          Download
+                        </Button>
+                      </Tooltip>
+                    </Group>
+                  ) : null}
+                </Group>
+              </Paper>
+            );
+          })}
+        </Stack>
+      )}
+    </Card>
+  );
+}
+
+/**
+ * Share a document into the GL Ethiopia ↔ GL Djibouti exchange.
+ *
+ * The API stamps the post as the TRANSIT side from the session, so the agent
+ * cannot post as either desk. `visibleToCustomer` additionally surfaces the
+ * document in the customer's own portal — off by default, since most transit
+ * paperwork is between the desks.
+ */
+function ShareExchangeModal({
+  opened,
+  bookingId,
+  onClose,
+  onShared,
+}: {
+  opened: boolean;
+  bookingId: string;
+  onClose: () => void;
+  onShared: () => void;
+}) {
+  const [file, setFile] = useState<File | null>(null);
+  const [title, setTitle] = useState("");
+  const [visibleToCustomer, setVisibleToCustomer] = useState(false);
+
+  const close = () => {
+    setFile(null);
+    setTitle("");
+    setVisibleToCustomer(false);
+    onClose();
+  };
+
+  const submit = useMutation({
+    mutationFn: () =>
+      transitAssignmentsService.shareExchangeDocument(bookingId, {
+        file: file!,
+        title,
+        visibleToCustomer,
+      }),
+    onSuccess: () => {
+      toast.success("Document shared with both GL desks");
+      onShared();
+      close();
+    },
+    onError: (e: unknown) =>
+      toast.error(e instanceof Error ? e.message : "Could not share document"),
+  });
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={close}
+      radius="md"
+      size="md"
+      title={
+        <Group gap={8}>
+          <Share2 size={18} />
+          <Text fw={700}>Share a document</Text>
+        </Group>
+      }
+    >
+      <Stack gap="md">
+        <Text size="sm" c="dimmed">
+          Both Global Logistics desks see this immediately. Only you can edit or
+          remove what you post.
+        </Text>
+
+        <TextInput
+          label="Title"
+          placeholder="What is this document?"
+          value={title}
+          onChange={(e) => setTitle(e.currentTarget.value)}
+          required
+          withAsterisk
+        />
+
+        <Stack gap={6}>
+          <Text fz={13} fw={600}>
+            File
+          </Text>
+          <input
+            type="file"
+            onChange={(e) => setFile(e.currentTarget.files?.[0] ?? null)}
+            style={{
+              border: "1px dashed var(--mantine-color-gray-4)",
+              borderRadius: 8,
+              padding: 10,
+              fontSize: 12.5,
+              background: "var(--mantine-color-gray-0)",
+            }}
+          />
+          {file ? (
+            <Text fz={11.5} c="dimmed">
+              {file.name} · {formatBytes(file.size)}
+            </Text>
+          ) : null}
+        </Stack>
+
+        <Checkbox
+          label="Also make this visible to the customer"
+          description="Off by default — transit paperwork usually stays between the desks."
+          checked={visibleToCustomer}
+          onChange={(e) => setVisibleToCustomer(e.currentTarget.checked)}
+        />
+
+        <Group justify="flex-end" gap="sm">
+          <Button variant="default" onClick={close} disabled={submit.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="edr-green"
+            loading={submit.isPending}
+            disabled={!file || title.trim().length === 0}
+            leftSection={<Upload size={16} />}
+            onClick={() => submit.mutate()}
+          >
+            Share
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+/** Empty-state block, matching the GL detail page's dashed panel. */
+function EmptyPanel({ icon: Icon, children }: { icon: typeof FileText; children: React.ReactNode }) {
+  return (
+    <Box
+      py={48}
+      style={{
+        borderRadius: 12,
+        border: "1px dashed var(--mantine-color-gray-4)",
+        background: "var(--mantine-color-gray-0)",
+        textAlign: "center",
+      }}
+    >
+      <Stack gap={8} align="center">
+        <ThemeIcon variant="light" color="gray" radius="xl" size={48}>
+          <Icon size={22} />
+        </ThemeIcon>
+        <Text size="sm" c="dimmed" maw={380}>
+          {children}
+        </Text>
+      </Stack>
+    </Box>
+  );
+}
+
+/** Bordered section with an icon header — the portal's SectionCard equivalent. */
+function SectionCard({
+  icon: Icon,
+  title,
+  children,
+}: {
+  icon: typeof FileText;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Card withBorder radius="md" p="md">
+      <Group gap={10} mb="sm" wrap="nowrap">
+        <ThemeIcon variant="light" color="edr-green" radius="md" size={32}>
+          <Icon size={16} />
+        </ThemeIcon>
+        <Text fw={600} fz={15}>
+          {title}
+        </Text>
+      </Group>
+      {children}
+    </Card>
+  );
+}
+
+function FieldRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <Group justify="space-between" wrap="nowrap" align="flex-start" gap="md">
+      <Text fz={12.5} c="edr-muted" style={{ flexShrink: 0 }}>
+        {label}
+      </Text>
+      <Box style={{ textAlign: "right", minWidth: 0 }}>{value}</Box>
+    </Group>
+  );
+}
+
+/**
+ * A transit agent's view of one assigned shipment, mirroring the backoffice's
+ * GL Djibouti clearance detail page tab for tab.
+ *
+ * Every tab here is READ-ONLY except the agent's own documents and progress.
+ * The clearance reads are authorized server-side by the assignment itself (see
+ * `assertTransitAgentScope` in the API) — this page never re-derives that rule,
+ * so a tab cannot show something the API would refuse.
+ */
+export default function TransitAgentBookingDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { view, viewer } = useFileViewer();
+  const [shareOpen, setShareOpen] = useState(false);
+
+  const assignmentQuery = useQuery({
+    queryKey: ["transit-assignment", id],
+    queryFn: () => transitAssignmentsService.getById(id!),
+    enabled: Boolean(id),
+  });
+
+  const assignment = assignmentQuery.data;
+  const bookingId = assignment?.bookingId;
+
+  // The clearance grid drives both the workflow and documents tabs.
+  const clearanceQuery = useQuery({
+    queryKey: ["transit-clearance", bookingId],
+    queryFn: () => bookingsService.getClearance(bookingId!),
+    enabled: Boolean(bookingId),
+  });
+
+  const historyQuery = useQuery({
+    queryKey: ["transit-clearance-history", bookingId],
+    queryFn: () => transitAssignmentsService.clearanceHistory(bookingId!),
+    enabled: Boolean(bookingId),
+  });
+
+  const exchangeQuery = useQuery({
+    queryKey: ["transit-gl-exchange", bookingId],
+    queryFn: () => transitAssignmentsService.glExchange(bookingId!),
+    enabled: Boolean(bookingId),
+  });
+
+  const incidentsQuery = useQuery({
+    queryKey: ["transit-incidents", bookingId],
+    queryFn: () => transitAssignmentsService.incidents(bookingId!),
+    enabled: Boolean(bookingId),
+  });
+
+  if (assignmentQuery.isPending) {
+    return (
+      <Box px="lg" py="lg" mx="auto" w="100%" maw={1600}>
+        <Stack align="center" py={80}>
+          <Loader color="edr-green" />
+          <Text c="dimmed">Loading shipment…</Text>
+        </Stack>
+      </Box>
+    );
+  }
+
+  if (assignmentQuery.isError || !assignment) {
+    return (
+      <Box px="lg" py="lg" mx="auto" w="100%" maw={1600}>
+        <Alert color="red" icon={<AlertCircle size={16} />}>
+          Could not load this shipment. It may no longer be assigned to you.
+        </Alert>
+      </Box>
+    );
+  }
+
+  const booking = assignment.booking;
+  const clearance = clearanceQuery.data;
+  const workflowFiles = clearance?.workflowFiles ?? [];
+  const workflowFileCount = workflowFiles.filter((f) => f.file).length;
+  const docCount = assignment.files?.length ?? 0;
+  const isImport = booking?.tradeDirection === "IMPORT";
+
+  // What the customer supplied, as the GL review section scopes it — the GL
+  // side of the grid is staff paperwork the officer does not action.
+  const customerDocuments = (clearance?.documents ?? []).filter(
+    (d) => d.uploadedBy === "customer",
+  );
+  const exchangeDocs = exchangeQuery.data ?? [];
+  const exchangeStats = {
+    et: exchangeDocs.filter((d) => d.side === "ET").length,
+    dj: exchangeDocs.filter((d) => d.side === "DJ").length,
+    transit: exchangeDocs.filter((d) => d.side === "TRANSIT").length,
+    shared: exchangeDocs.filter((d) => d.visibleToCustomer).length,
+  };
+  const historyEvents = historyQuery.data ?? [];
+
+  return (
+    <Box px="lg" py="lg" mx="auto" w="100%" maw={1600}>
+      <Stack gap="lg">
+        {/* ── Header ───────────────────────────────────────────────── */}
+        <Stack gap="sm">
+          <Group gap={6}>
+            <Anchor
+              fz={12.5}
+              c="edr-muted"
+              onClick={() => navigate(BACK_TO)}
+              style={{ cursor: "pointer" }}
+            >
+              My bookings
+            </Anchor>
+            <Text fz={12.5} c="edr-muted">
+              /
+            </Text>
+            <Text fz={12.5} c="edr-text">
+              {booking?.reference ?? "—"}
+            </Text>
+          </Group>
+
+          <Group justify="space-between" align="flex-start" gap="md">
+            <Group gap="sm" align="center" wrap="nowrap" style={{ minWidth: 0 }}>
+              <Button
+                variant="subtle"
+                color="gray"
+                px={8}
+                onClick={() => navigate(BACK_TO)}
+                aria-label="Go back"
+              >
+                <ArrowLeft size={18} />
+              </Button>
+              <div style={{ minWidth: 0, maxWidth: 640 }}>
+                <Group gap="sm" align="center" wrap="nowrap">
+                  <Title order={2} className="truncate" style={{ minWidth: 0 }}>
+                    {booking?.reference ?? "Shipment"}
+                  </Title>
+                  {booking?.tradeDirection ? (
+                    <Badge
+                      variant="light"
+                      color={isImport ? "edr-green" : "gray"}
+                      radius="sm"
+                    >
+                      {prettyStatus(booking.tradeDirection)}
+                    </Badge>
+                  ) : null}
+                  <Badge
+                    variant="light"
+                    radius="sm"
+                    color={STATUS_COLOR[assignment.status] ?? "gray"}
+                  >
+                    {prettyStatus(assignment.status)}
+                  </Badge>
+                </Group>
+                <Group gap={5} wrap="nowrap" mt={4}>
+                  <Building2 size={12} className="shrink-0 text-edr-muted" />
+                  <Text c="dimmed" size="sm" className="truncate">
+                    {assignment.customerName ?? "—"}
+                  </Text>
+                </Group>
+              </div>
+            </Group>
+
+          </Group>
+        </Stack>
+
+        <Tabs defaultValue="workflow" keepMounted={false}>
+          <Tabs.List mb="md">
+            <Tabs.Tab value="workflow" leftSection={<ClipboardList size={14} />}>
+              Clearance workflow
+            </Tabs.Tab>
+            <Tabs.Tab
+              value="documents"
+              leftSection={<FileText size={14} />}
+              rightSection={
+                workflowFileCount > 0 ? (
+                  <Badge size="xs" variant="light" color="edr-green" circle>
+                    {workflowFileCount}
+                  </Badge>
+                ) : undefined
+              }
+            >
+              Customs documents (all steps)
+            </Tabs.Tab>
+            <Tabs.Tab value="exchange" leftSection={<Share2 size={14} />}>
+              Document exchange
+            </Tabs.Tab>
+            <Tabs.Tab value="history" leftSection={<History size={14} />}>
+              History
+            </Tabs.Tab>
+            <Tabs.Tab value="incidents" leftSection={<AlertTriangle size={14} />}>
+              Incidents
+            </Tabs.Tab>
+          </Tabs.List>
+
+          {/* ── Clearance workflow ─────────────────────────────────── */}
+          <Tabs.Panel value="workflow">
+            {/* The officer's own uploads with their timings, ahead of the
+                read-only grid: RO / gate pass / Djibouti T1 for exports,
+                DO / T1 for imports. */}
+            {clearance && bookingId && booking?.tradeDirection ? (
+              <Box mb="md">
+                {booking.tradeDirection === "IMPORT" ? (
+                  <TransitImportDocumentsPanel
+                    bookingId={bookingId}
+                    clearance={clearance}
+                    history={historyEvents}
+                    onView={view}
+                    onChanged={() => void assignmentQuery.refetch()}
+                  />
+                ) : (
+                  <TransitExportDocumentsPanel
+                    bookingId={bookingId}
+                    clearance={clearance}
+                    history={historyEvents}
+                    onView={view}
+                    onChanged={() => void assignmentQuery.refetch()}
+                  />
+                )}
+              </Box>
+            ) : null}
+            <Grid>
+              <Grid.Col span={{ base: 12, lg: 7 }}>
+                <SectionCard icon={ClipboardList} title="Clearance status">
+                  {clearanceQuery.isPending ? (
+                    <Group py="lg" justify="center">
+                      <Loader size="sm" color="edr-green" />
+                    </Group>
+                  ) : clearanceQuery.isError ? (
+                    <Alert color="red" variant="light" icon={<AlertCircle size={16} />}>
+                      Clearance details are not available for this shipment.
+                    </Alert>
+                  ) : (
+                    <Stack gap={10}>
+                      <FieldRow
+                        label="Clearance phase"
+                        value={
+                          <Text fz={13} fw={500}>
+                            {prettyStatus(clearance?.phase) || "—"}
+                          </Text>
+                        }
+                      />
+                      <FieldRow
+                        label="Booking status"
+                        value={
+                          <Badge size="sm" variant="light" radius="sm">
+                            {prettyStatus(booking?.status) || "—"}
+                          </Badge>
+                        }
+                      />
+                      <FieldRow
+                        label="Shipment"
+                        value={
+                          <Badge
+                            size="sm"
+                            variant="light"
+                            radius="sm"
+                            color={
+                              booking?.schedulingStatus === "DISPATCHED"
+                                ? "teal"
+                                : "blue"
+                            }
+                          >
+                            {prettyStatus(booking?.schedulingStatus) || "—"}
+                          </Badge>
+                        }
+                      />
+                      <FieldRow
+                        label="Vessel arrival"
+                        value={
+                          <Text fz={13}>
+                            {formatDate(clearance?.vesselArrivalDate)}
+                          </Text>
+                        }
+                      />
+                      <FieldRow
+                        label="DO collected"
+                        value={
+                          <Text fz={13}>
+                            {formatDate(clearance?.doCollectedDate)}
+                          </Text>
+                        }
+                      />
+                    </Stack>
+                  )}
+                </SectionCard>
+
+                <Box mt="md">
+                  <CustomerDocumentsCard
+                    documents={customerDocuments}
+                    loading={clearanceQuery.isPending}
+                    onView={view}
+                  />
+                </Box>
+              </Grid.Col>
+
+              <Grid.Col span={{ base: 12, lg: 5 }}>
+                <Stack gap="md">
+                  <SectionCard icon={Train} title="My assignment">
+                    <Stack gap={10}>
+                      <FieldRow
+                        label="My status"
+                        value={
+                          <Badge
+                            size="sm"
+                            variant="light"
+                            radius="sm"
+                            color={STATUS_COLOR[assignment.status] ?? "gray"}
+                          >
+                            {prettyStatus(assignment.status)}
+                          </Badge>
+                        }
+                      />
+                      <FieldRow
+                        label="Assigned"
+                        value={<Text fz={13}>{formatDate(assignment.assignedAt)}</Text>}
+                      />
+                      <FieldRow
+                        label="Started"
+                        value={<Text fz={13}>{formatDate(assignment.startedAt)}</Text>}
+                      />
+                      <FieldRow
+                        label="Finished"
+                        value={<Text fz={13}>{formatDate(assignment.finishedAt)}</Text>}
+                      />
+                      <FieldRow
+                        label="Time after arrival"
+                        value={
+                          <Text fz={13}>
+                            {formatMinutes(assignment.timeAfterTrainArrives)}
+                          </Text>
+                        }
+                      />
+                      <FieldRow
+                        label="My documents"
+                        value={<Text fz={13}>{docCount || "—"}</Text>}
+                      />
+                      {assignment.note ? (
+                        <FieldRow
+                          label="My note"
+                          value={<Text fz={13}>{assignment.note}</Text>}
+                        />
+                      ) : null}
+                    </Stack>
+                  </SectionCard>
+
+                  <TransitClearanceActionPanel
+                    bookingId={bookingId!}
+                    clearance={clearance}
+                    tradeDirection={booking?.tradeDirection}
+                    onChanged={() => void assignmentQuery.refetch()}
+                  />
+
+                  <SectionCard icon={Building2} title="Customer">
+                    <Text fz={13}>{assignment.customerName ?? "—"}</Text>
+                  </SectionCard>
+                </Stack>
+              </Grid.Col>
+            </Grid>
+          </Tabs.Panel>
+
+          {/* ── Customs documents (all steps) ──────────────────────── */}
+          {/* ── Customs documents (all steps) ──────────────────────── */}
+          <Tabs.Panel value="documents">
+            {clearanceQuery.isPending ? (
+              <Group justify="center" py="xl" gap={10}>
+                <Loader size="sm" color="edr-green" />
+                <Text c="dimmed">Loading documents…</Text>
+              </Group>
+            ) : workflowFileCount > 0 ? (
+              <ClearanceWorkflowFilesPanel
+                files={workflowFiles}
+                title="Customs documents (all steps)"
+                onView={view}
+                onDownload={(f) => void downloadStoredFile(f.id, f.name)}
+              />
+            ) : (
+              <EmptyPanel icon={FileText}>
+                No customs workflow documents uploaded yet. Files from
+                Ethiopia-side clearance and the Djibouti desk's DO/RO uploads
+                will appear here.
+              </EmptyPanel>
+            )}
+          </Tabs.Panel>
+
+          {/* ── Document exchange ──────────────────────────────────── */}
+          <Tabs.Panel value="exchange">
+            <Stack gap="md">
+              <Paper withBorder radius="md" p="md">
+                <Group justify="space-between" wrap="nowrap" gap="sm">
+                <Group gap={12} wrap="nowrap" style={{ minWidth: 0 }}>
+                  <ThemeIcon variant="light" color="edr-green" radius="md" size={44}>
+                    <Share2 size={20} />
+                  </ThemeIcon>
+                  <Box style={{ minWidth: 0 }}>
+                    <Text fw={700} fz={16}>
+                      Document exchange
+                    </Text>
+                    <Text size="xs" c="dimmed">
+                      Documents shared with both Global Logistics desks for
+                      this shipment. Anything you share here is visible to GL
+                      Ethiopia and GL Djibouti immediately.
+                    </Text>
+                  </Box>
+                </Group>
+                  <Button
+                    color="edr-green"
+                    radius="md"
+                    leftSection={<Upload size={16} />}
+                    onClick={() => setShareOpen(true)}
+                  >
+                    Share document
+                  </Button>
+                </Group>
+
+                {exchangeDocs.length > 0 ? (
+                  <Group gap={8} mt="md">
+                    <Badge variant="light" color="edr-green" radius="sm" tt="none">
+                      {exchangeStats.et} from GL Ethiopia
+                    </Badge>
+                    <Badge variant="light" color="blue" radius="sm" tt="none">
+                      {exchangeStats.dj} from GL Djibouti
+                    </Badge>
+                    <Badge variant="light" color="grape" radius="sm" tt="none">
+                      {exchangeStats.transit} from you
+                    </Badge>
+                    <Badge variant="light" color="gray" radius="sm" tt="none">
+                      {exchangeStats.shared} visible to customer
+                    </Badge>
+                  </Group>
+                ) : null}
+              </Paper>
+
+              {exchangeQuery.isPending ? (
+                <Group justify="center" py={40} gap={10}>
+                  <Loader size="sm" color="edr-green" />
+                  <Text size="sm" c="dimmed">
+                    Loading shared documents…
+                  </Text>
+                </Group>
+              ) : exchangeQuery.isError ? (
+                <Text size="sm" c="red">
+                  Could not load the shared documents.
+                </Text>
+              ) : exchangeDocs.length === 0 ? (
+                <EmptyPanel icon={FileText}>
+                  Nothing shared yet. Anything either desk uploads — scans,
+                  correspondence, corrected forms — appears here.
+                </EmptyPanel>
+              ) : (
+                <Stack gap={8}>
+                  {exchangeDocs.map((doc) => {
+                    const side = SIDES[doc.side];
+                    const canPreview = isViewable({
+                      name: doc.file.name,
+                      url: "",
+                    });
+                    return (
+                      <Paper key={doc.id} withBorder radius="md" p="sm">
+                        <Group
+                          justify="space-between"
+                          wrap="nowrap"
+                          align="flex-start"
+                          gap="sm"
+                        >
+                          <Group
+                            gap={12}
+                            wrap="nowrap"
+                            align="flex-start"
+                            style={{ minWidth: 0 }}
+                          >
+                            <ThemeIcon
+                              variant="light"
+                              color={side.color}
+                              radius="md"
+                              size={40}
+                            >
+                              <FileText size={18} />
+                            </ThemeIcon>
+                            <Box style={{ minWidth: 0 }}>
+                              <Group gap={8} wrap="nowrap">
+                                <Text size="sm" fw={700} truncate>
+                                  {doc.title}
+                                </Text>
+                                <Badge
+                                  size="xs"
+                                  variant="light"
+                                  color={side.color}
+                                  radius="sm"
+                                  tt="none"
+                                >
+                                  {side.label}
+                                </Badge>
+                                <Badge
+                                  size="xs"
+                                  variant="light"
+                                  color={doc.visibleToCustomer ? "teal" : "gray"}
+                                  radius="sm"
+                                  tt="none"
+                                  leftSection={
+                                    doc.visibleToCustomer ? (
+                                      <Eye size={11} />
+                                    ) : (
+                                      <EyeOff size={11} />
+                                    )
+                                  }
+                                >
+                                  {doc.visibleToCustomer
+                                    ? "Visible to customer"
+                                    : "GL only"}
+                                </Badge>
+                              </Group>
+                              <Text size="xs" c="dimmed" mt={4} truncate>
+                                {doc.file.name} · {formatBytes(doc.file.size)} ·{" "}
+                                {doc.uploadedByName ?? "Global Logistics"} ·{" "}
+                                {formatDateTime(doc.uploadedAt)}
+                              </Text>
+                            </Box>
+                          </Group>
+
+                          <Group gap={6} wrap="nowrap">
+                            {canPreview ? (
+                              <Tooltip label="Preview">
+                                <Button
+                                  size="compact-xs"
+                                  variant="default"
+                                  radius="md"
+                                  leftSection={<Eye size={13} />}
+                                  onClick={() =>
+                                    void fetchViewableFile(
+                                      doc.file.id,
+                                      doc.file.name,
+                                    ).then(view)
+                                  }
+                                >
+                                  View
+                                </Button>
+                              </Tooltip>
+                            ) : null}
+                            <Tooltip label="Download">
+                              <Button
+                                size="compact-xs"
+                                variant="light"
+                                radius="md"
+                                leftSection={<Download size={13} />}
+                                onClick={() =>
+                                  void downloadStoredFile(
+                                    doc.file.id,
+                                    doc.file.name,
+                                  )
+                                }
+                              >
+                                Download
+                              </Button>
+                            </Tooltip>
+                          </Group>
+                        </Group>
+                      </Paper>
+                    );
+                  })}
+                </Stack>
+              )}
+            </Stack>
+          </Tabs.Panel>
+
+
+          {/* ── History ────────────────────────────────────────────── */}
+          <Tabs.Panel value="history">
+            {historyQuery.isPending ? (
+              <Group justify="center" py="xl" gap={10}>
+                <Loader size="sm" color="edr-green" />
+                <Text c="dimmed">Loading history…</Text>
+              </Group>
+            ) : historyQuery.isError ? (
+              <Alert color="red" variant="light" icon={<AlertCircle size={16} />}>
+                History is not available for this shipment.
+              </Alert>
+            ) : historyEvents.length === 0 ? (
+              <Paper withBorder radius="md" p="lg">
+                <Text size="sm" c="dimmed">
+                  No clearance actions recorded yet. Actions from now on —
+                  approvals, queries, workflow steps, charges — appear here
+                  automatically.
+                </Text>
+              </Paper>
+            ) : (
+              <Paper withBorder radius="md" p="lg" maw={760}>
+                <Timeline
+                  bulletSize={22}
+                  lineWidth={2}
+                  active={historyEvents.length - 1}
+                  color="gray"
+                >
+                  {historyEvents.map((ev) => {
+                    const meta = eventMeta(ev.action);
+                    const Icon = meta.icon;
+                    const actor = ACTOR_BADGE[ev.actorType];
+                    const note =
+                      typeof ev.metadata?.note === "string"
+                        ? ev.metadata.note
+                        : null;
+                    return (
+                      <Timeline.Item
+                        key={ev.id}
+                        color={meta.color}
+                        bullet={<Icon size={12} />}
+                        title={
+                          <Group gap={8} wrap="wrap">
+                            <Text fz="13px" fw={600} c="edr-text" lh={1.35}>
+                              {ev.label}
+                            </Text>
+                            <Badge
+                              size="xs"
+                              variant="light"
+                              color={actor.color}
+                              radius="sm"
+                            >
+                              {actor.label}
+                            </Badge>
+                          </Group>
+                        }
+                      >
+                        <Text fz="11.5px" c="dimmed">
+                          {ev.actorName ? `${ev.actorName} · ` : ""}
+                          {formatDateTime(ev.at)}
+                        </Text>
+                        {note ? (
+                          <Text fz="12px" c="red.8" mt={2}>
+                            {note}
+                          </Text>
+                        ) : null}
+                      </Timeline.Item>
+                    );
+                  })}
+                </Timeline>
+              </Paper>
+            )}
+          </Tabs.Panel>
+
+          {/* ── Incidents ──────────────────────────────────────────── */}
+          <Tabs.Panel value="incidents">
+            <SectionCard icon={AlertTriangle} title="Incident reports">
+              <Stack gap="sm">
+                <Text size="sm" c="dimmed">
+                  Container or seal issues discovered during clearance handling.
+                  Logged by the Djibouti desk — read-only here.
+                </Text>
+                {incidentsQuery.isPending ? (
+                  <Group py="lg" justify="center">
+                    <Loader size="sm" color="edr-green" />
+                  </Group>
+                ) : incidentsQuery.isError ? (
+                  <Alert color="red" variant="light" icon={<AlertCircle size={16} />}>
+                    Incident reports are not available for this shipment.
+                  </Alert>
+                ) : (incidentsQuery.data ?? []).length > 0 ? (
+                  <Stack gap="xs">
+                    {(incidentsQuery.data ?? []).map(
+                      (inc: Freight.IClearanceIncident) => (
+                        <Card key={inc.id} withBorder radius="md" p="sm">
+                          <Group gap={10} wrap="nowrap" align="flex-start">
+                            <ThemeIcon variant="light" color="red" radius="md" size={32}>
+                              <AlertTriangle size={15} />
+                            </ThemeIcon>
+                            <Box style={{ minWidth: 0 }}>
+                              <Text fz={13} fw={600}>
+                                {prettyStatus(inc.incidentType)}
+                              </Text>
+                              {inc.description ? (
+                                <Text fz={12.5} c="edr-text" mt={2}>
+                                  {inc.description}
+                                </Text>
+                              ) : null}
+                              <Text fz={11} c="edr-muted" mt={3}>
+                                {formatDate(inc.createdAt)}
+                              </Text>
+                            </Box>
+                          </Group>
+                        </Card>
+                      ),
+                    )}
+                  </Stack>
+                ) : (
+                  <Group gap={8}>
+                    <CheckCircle2 size={15} className="text-edr-muted" />
+                    <Text fz={13} c="dimmed">
+                      No incidents reported for this shipment.
+                    </Text>
+                  </Group>
+                )}
+              </Stack>
+            </SectionCard>
+          </Tabs.Panel>
+        </Tabs>
+      </Stack>
+
+      <ShareExchangeModal
+        opened={shareOpen}
+        bookingId={bookingId!}
+        onClose={() => setShareOpen(false)}
+        onShared={() => void exchangeQuery.refetch()}
+      />
+
+      {viewer}
+    </Box>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/transit-agent/TransitAgentBookingsPage.tsx b/apps/edr-freight-web/portal/src/pages/transit-agent/TransitAgentBookingsPage.tsx
index 4e86a2de0..fba9f354e 100644
--- a/apps/edr-freight-web/portal/src/pages/transit-agent/TransitAgentBookingsPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/transit-agent/TransitAgentBookingsPage.tsx
@@ -1,76 +1,65 @@
 import {
-  Alert,
+  ActionIcon,
+  Badge,
   Box,
   Button,
   Card,
-  Center,
   Group,
-  Loader,
-  Pagination,
   Select,
-  SimpleGrid,
+  Skeleton,
   Stack,
-  Table,
   Text,
   TextInput,
+  ThemeIcon,
   Title,
-  Tooltip,
+  UnstyledButton,
 } from "@mantine/core";
-import { useDebouncedValue } from "@mantine/hooks";
+import { useDebouncedValue, useInterval } from "@mantine/hooks";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
-  AlertCircle,
+  DataTable,
+  usePagination,
+  type ColumnDef,
+  type DataTableFooterProps,
+} from "@edr/ui-common";
+import type { LucideIcon } from "lucide-react";
+import {
+  ArrowUpRight,
+  Building2,
   CheckCircle2,
+  ChevronRight,
   Clock3,
-  FileText,
-  Lock,
+  Inbox,
+  Layers,
+  PackageCheck,
   Paperclip,
+  RefreshCw,
   Search,
+  ShipWheel,
   Train,
+  Truck,
   X,
 } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Pagination } from "@mantine/core";
 
-import { cv } from "@/pages/MyPortalPage/constants";
-import TransitAgentDocumentsModal from "@/pages/transit-agent/TransitAgentDocumentsModal";
 import {
   transitAssignmentsService,
   type TransitAssignment,
   type TransitAssignmentStatus,
 } from "@/services/transit-assignments.service";
+import "./transit-bookings-table.css";
 
-const PAGE_SIZE = 8;
+/** Matches the GL Djibouti queue's header cell treatment. */
+const headerCell =
+  "whitespace-nowrap text-[10px] font-semibold uppercase tracking-[0.08em] text-edr-muted";
 
-const PAGE_SIZE_OPTIONS = [
-  { value: "8", label: "8 / page" },
-  { value: "20", label: "20 / page" },
-  { value: "50", label: "50 / page" },
-];
-
-/** Status pills use the portal's soft-tint / strong-ink pairs, not raw Mantine colours. */
-const STATUS_META: Record<
-  TransitAssignmentStatus,
-  { label: string; bg: string; fg: string }
-> = {
-  NOT_STARTED: {
-    label: "Not started",
-    bg: "edr-slate-soft",
-    fg: "edr-slate",
-  },
-  IN_PROGRESS: { label: "In progress", bg: "edr-blue-soft", fg: "edr-blue" },
-  FINISHED: { label: "Finished", bg: "edr-soft", fg: "edr-green.7" },
-};
-
-const STATUS_OPTIONS = [
-  { value: "NOT_STARTED", label: "Not started" },
-  { value: "IN_PROGRESS", label: "In progress" },
-  { value: "FINISHED", label: "Finished" },
-];
-
-const SHIPMENT_OPTIONS = [
-  { value: "DISPATCHED", label: "Dispatched (in transit)" },
-  { value: "SCHEDULED", label: "Scheduled" },
-];
+const prettyStatus = (s?: string | null) =>
+  (s ?? "")
+    .toLowerCase()
+    .replace(/_/g, " ")
+    .replace(/^\w/, (c) => c.toUpperCase());
 
 /** Minutes as "5h 30m" — the raw integer is unreadable in a grid. */
 function formatMinutes(minutes: number | null): string {
@@ -80,375 +69,723 @@ function formatMinutes(minutes: number | null): string {
   return hours ? `${hours}h ${rest}m` : `${rest}m`;
 }
 
-/** Sentence-cases a SCREAMING_SNAKE enum for display. */
-function humanize(value?: string | null): string {
-  if (!value) return "—";
-  const spaced = value.toLowerCase().replace(/_/g, " ");
-  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+const STATUS_META: Record<
+  TransitAssignmentStatus,
+  { label: string; color: string }
+> = {
+  NOT_STARTED: { label: "Not started", color: "gray" },
+  IN_PROGRESS: { label: "In progress", color: "blue" },
+  FINISHED: { label: "Finished", color: "edr-green" },
+};
+
+/** Booking scheduling state → badge tint, mirroring the GL queue's scale. */
+function shipmentColor(status?: string | null): string {
+  switch (status) {
+    case "DISPATCHED":
+      return "teal";
+    case "SCHEDULED":
+      return "blue";
+    case "MANUAL_ONLY":
+      return "orange";
+    default:
+      return "gray";
+  }
 }
 
-function SummaryTile({
-  icon,
-  label,
-  value,
-  soft,
-}: {
-  icon: React.ReactNode;
-  label: string;
-  value: number | string;
-  soft: string;
-}) {
+const SHIPMENT_OPTIONS = [
+  { value: "DISPATCHED", label: "Dispatched (in transit)" },
+  { value: "SCHEDULED", label: "Scheduled" },
+];
+
+// ── Tabs ─────────────────────────────────────────────────────────────────────
+
+type TabKey = "all" | "NOT_STARTED" | "IN_PROGRESS" | "FINISHED";
+
+const TABS: { key: TabKey; label: string; icon: LucideIcon }[] = [
+  { key: "all", label: "All", icon: Layers },
+  { key: "NOT_STARTED", label: "Not started", icon: Clock3 },
+  { key: "IN_PROGRESS", label: "In progress", icon: Train },
+  { key: "FINISHED", label: "Finished", icon: CheckCircle2 },
+];
+
+// ── Shell pieces ─────────────────────────────────────────────────────────────
+// Ported from the backoffice's `components/page/*`, which the portal does not
+// have. Kept local rather than promoted to @edr/ui-common: one consumer.
+
+function LivePill({ updatedAt }: { updatedAt: number }) {
+  // Re-render every 30s so "Xm ago" keeps ticking between refetches.
+  const [, setTick] = useState(0);
+  useInterval(() => setTick((t) => t + 1), 30_000, { autoInvoke: true });
+  const mins = Math.max(0, Math.round((Date.now() - updatedAt) / 60_000));
+  const label = !updatedAt
+    ? "Connecting…"
+    : mins < 1
+      ? "Live · updated just now"
+      : `Live · updated ${mins}m ago`;
   return (
-    <Box className="rounded-[20px] border border-edr-border bg-edr-card" p={16}>
-      <Group gap={12} wrap="nowrap">
-        <Box
-          className="flex size-10 shrink-0 items-center justify-center rounded-xl"
-          style={{ background: cv(soft) }}
-        >
-          {icon}
-        </Box>
-        <Box className="min-w-0">
-          <Text
-            fz={22}
-            fw={800}
-            lh={1.1}
-            c="edr-text"
-            className="tracking-tight"
-          >
-            {value}
-          </Text>
-          <Text fz={11} fw={600} c="edr-muted" truncate>
-            {label}
-          </Text>
-        </Box>
-      </Group>
-    </Box>
+    <span className="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-edr-soft px-2.5 py-1 text-[11px] font-medium text-edr-green-7">
+      <span className="size-1.5 rounded-full bg-edr-green-7" />
+      {label}
+    </span>
   );
 }
 
+function Spark({ values, color }: { values: number[]; color: string }) {
+  const max = Math.max(1, ...values);
+  return (
+    <div className="flex h-[26px] shrink-0 items-end gap-[3px]" aria-hidden>
+      {values.map((v, i) => (
+        <div
+          key={i}
+          className="w-1 rounded-sm"
+          style={{
+            height: Math.max(3, Math.round((v / max) * 26)),
+            background: `var(--mantine-color-${color}-7)`,
+            opacity: i === values.length - 1 ? 0.9 : 0.28,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface KpiItem {
+  label: string;
+  value: number | string;
+  icon: LucideIcon;
+  color: string;
+  spark?: number[];
+  hint?: string;
+}
+
+/** One bordered card split into cells, matching the GL queue's KPI strip. */
+function KpiStrip({
+  items,
+  loading = false,
+}: {
+  items: KpiItem[];
+  loading?: boolean;
+}) {
+  return (
+    <Card withBorder shadow="sm" radius="lg" p={0} className="overflow-hidden">
+      <div className="flex flex-col sm:flex-row">
+        {items.slice(0, 5).map((item, index) => {
+          const Icon = item.icon;
+          return (
+            <div
+              key={item.label}
+              className={[
+                "flex min-w-0 flex-1 flex-col justify-center gap-2 px-[18px] py-4",
+                index > 0
+                  ? "border-t border-edr-border sm:border-l sm:border-t-0"
+                  : "",
+              ].join(" ")}
+            >
+              <div className="flex items-center gap-2">
+                <div
+                  className="flex size-7 shrink-0 items-center justify-center rounded-lg"
+                  style={{
+                    background: `var(--mantine-color-${item.color}-0)`,
+                    color: `var(--mantine-color-${item.color}-7)`,
+                  }}
+                >
+                  <Icon size={14} strokeWidth={2} />
+                </div>
+                <Text fz={12} fw={500} c="edr-muted" truncate>
+                  {item.label}
+                </Text>
+              </div>
+
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex min-w-0 items-center gap-2">
+                  {loading ? (
+                    <Skeleton height={28} width={64} radius="sm" />
+                  ) : (
+                    <Text
+                      fw={600}
+                      fz={27}
+                      lh={1}
+                      c="edr-text"
+                      style={{ letterSpacing: "-0.03em" }}
+                      truncate
+                    >
+                      {item.value}
+                    </Text>
+                  )}
+                  {!loading && item.hint ? (
+                    <span
+                      className="inline-flex shrink-0 items-center gap-1 rounded-full px-[7px] py-[2px] text-[10px] font-medium leading-none"
+                      style={{
+                        background: "var(--mantine-color-edr-green-0)",
+                        color: "var(--mantine-color-edr-green-7)",
+                      }}
+                    >
+                      <ArrowUpRight size={10} />
+                      {item.hint}
+                    </span>
+                  ) : null}
+                </div>
+                {item.spark?.length ? (
+                  <Spark values={item.spark} color={item.color} />
+                ) : null}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </Card>
+  );
+}
+
+/** DataTable footer: row range left, rows-per-page + pager right. */
+function TablePager<T>({
+  table,
+  pagination,
+  noun = "rows",
+  pageSizes = [10, 25, 50],
+}: DataTableFooterProps<T> & { noun?: string; pageSizes?: number[] }) {
+  const pageIndex = pagination.pageIndex ?? 0;
+  const pageSize = pagination.pageSize ?? 10;
+  const total = pagination.totalCount ?? 0;
+  const pageCount = Math.max(
+    1,
+    pagination.pageCount ?? Math.ceil(total / pageSize),
+  );
+  const start = total === 0 ? 0 : pageIndex * pageSize + 1;
+  const end = Math.min((pageIndex + 1) * pageSize, total);
+
+  return (
+    <Group
+      justify="space-between"
+      gap="sm"
+      wrap="wrap"
+      px="md"
+      py={10}
+      style={{ borderTop: "1px solid var(--mantine-color-edr-divider-6)" }}
+    >
+      <Text fz={12} c="edr-muted">
+        Showing {start}–{end} of {total} {noun}
+      </Text>
+      <Group gap="sm" wrap="nowrap">
+        <Group gap={6} wrap="nowrap">
+          <Text fz={12} c="edr-muted">
+            Rows
+          </Text>
+          <Select
+            size="xs"
+            w={70}
+            radius="md"
+            value={String(pageSize)}
+            data={pageSizes.map(String)}
+            onChange={(v) => v && table.setPageSize(Number(v))}
+            allowDeselect={false}
+            comboboxProps={{ withinPortal: true }}
+            aria-label="Rows per page"
+          />
+        </Group>
+        <div className="h-5 w-px bg-edr-border" />
+        <Pagination
+          size="sm"
+          radius="md"
+          color="edr-ink"
+          total={pageCount}
+          value={pageIndex + 1}
+          onChange={(p) => table.setPageIndex(p - 1)}
+          siblings={1}
+          boundaries={1}
+        />
+      </Group>
+    </Group>
+  );
+}
+
+// ── Page ─────────────────────────────────────────────────────────────────────
+
 /**
  * The transit agent's work list: every booking assigned to them, with the
- * document action for each.
+ * document action for each. Laid out to match the backoffice's GL Djibouti
+ * clearance queue — same header, KPI strip, tab bar, filter bar and table.
  *
- * Filtering and paging are server-side — the roster grows without bound, so
- * neither can depend on holding every row in the browser. Uploading is gated on
- * the API's own `canUploadDocuments`, never re-derived here, so a row's action
- * cannot promise something the server will reject.
+ * Filtering and paging stay SERVER-side (unlike the GL queue, which holds its
+ * whole queue in the browser): this roster grows without bound. The tab and
+ * the status filter therefore feed one server parameter, and the tab counts
+ * come from a separate stats call rather than from the current page.
+ *
+ * Uploading is gated on the API's own `canUploadDocuments`, never re-derived
+ * here, so a row's action cannot promise something the server will reject.
  */
 export default function TransitAgentBookingsPage() {
-  const [active, setActive] = useState<TransitAssignment | null>(null);
-  const [search, setSearch] = useState("");
-  const [debouncedSearch] = useDebouncedValue(search, 300);
-  const [status, setStatus] = useState<string | null>(null);
+  const navigate = useNavigate();
+  const [query, setQuery] = useState("");
+  const [debouncedQuery] = useDebouncedValue(query, 300);
+  const [tab, setTab] = useState<TabKey>("all");
   const [shipment, setShipment] = useState<string | null>(null);
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(PAGE_SIZE);
+  const { pagination, setPagination } = usePagination({ pageSize: 10 });
+
+  const resetPage = useCallback(
+    () => setPagination({ pageIndex: 0, pageSize: pagination.pageSize }),
+    [setPagination, pagination.pageSize],
+  );
 
   // Any filter change invalidates the current page number: staying on page 3 of
   // a freshly narrowed result set shows an empty table.
   useEffect(() => {
-    setPage(1);
-  }, [debouncedSearch, status, shipment, pageSize]);
+    resetPage();
+  }, [debouncedQuery, tab, shipment, resetPage]);
 
-  const query = useQuery({
+  const status = tab === "all" ? undefined : (tab as TransitAssignmentStatus);
+
+  const {
+    data,
+    isPending,
+    isError,
+    error,
+    isFetching,
+    dataUpdatedAt,
+    refetch,
+  } = useQuery({
     queryKey: [
       "transit-assignments",
-      { search: debouncedSearch, status, shipment, page, pageSize },
+      {
+        search: debouncedQuery,
+        status,
+        shipment,
+        page: pagination.pageIndex + 1,
+        pageSize: pagination.pageSize,
+      },
     ],
     queryFn: () =>
       transitAssignmentsService.list({
-        search: debouncedSearch || undefined,
-        status: (status as TransitAssignmentStatus) ?? undefined,
+        search: debouncedQuery || undefined,
+        status,
         schedulingStatus: shipment ?? undefined,
-        page,
-        pageSize,
+        page: pagination.pageIndex + 1,
+        pageSize: pagination.pageSize,
       }),
     // Keeps the previous page visible while the next one loads, so paging does
     // not flash an empty table.
     placeholderData: keepPreviousData,
   });
 
-  const items = query.data?.items ?? [];
-  const meta = query.data?.meta;
-  const hasFilters = !!(debouncedSearch || status || shipment);
+  // KPIs describe the WHOLE roster, not the current page — deriving them from
+  // a paginated slice would under-report the agent's real workload.
+  const { data: stats, isPending: statsPending } = useQuery({
+    queryKey: ["transit-assignments", "stats"],
+    queryFn: () => transitAssignmentsService.stats(),
+  });
 
-  // Counts describe the CURRENT PAGE, and say so — deriving totals from a
-  // paginated slice would quietly under-report the agent's real workload.
-  const pageCounts = useMemo(
+  const items = data?.items ?? [];
+  const meta = data?.meta;
+  const total = meta?.total ?? 0;
+  const pageCount = meta?.totalPages ?? 1;
+  const hasFilters = Boolean(query || shipment || tab !== "all");
+
+  // Counts come from `/stats`, which spans the whole roster. They are NOT read
+  // off `stats.items` (capped at 12 server-side) nor off the current page —
+  // either would under-report the agent's real workload.
+  const tabCounts = useMemo<Record<TabKey, number>>(
     () => ({
-      open: items.filter((a) => a.status !== "FINISHED").length,
-      uploadable: items.filter((a) => a.canUploadDocuments).length,
-      documents: items.reduce((sum, a) => sum + (a.files?.length ?? 0), 0),
+      all: stats?.totals.assignments ?? 0,
+      NOT_STARTED: stats?.totals.notStarted ?? 0,
+      IN_PROGRESS: stats?.totals.inProgress ?? 0,
+      FINISHED: stats?.totals.finished ?? 0,
     }),
-    [items],
+    [stats],
   );
 
-  const clearFilters = () => {
-    setSearch("");
-    setStatus(null);
+  const clearFilters = useCallback(() => {
+    setQuery("");
     setShipment(null);
-  };
+    setTab("all");
+    resetPage();
+  }, [resetPage]);
+
+  const columns: ColumnDef<TransitAssignment, unknown>[] = useMemo(
+    () => [
+      {
+        id: "booking",
+        header: () => <span className={headerCell}>Booking</span>,
+        cell: ({ row }) => {
+          const r = row.original;
+          return (
+            <div className="flex items-center gap-2.5 py-1">
+              <div className="flex size-[30px] shrink-0 items-center justify-center rounded-[9px] bg-edr-divider text-edr-muted">
+                <PackageCheck size={15} strokeWidth={1.75} />
+              </div>
+              <div className="min-w-0">
+                <Text fz={13} fw={600} c="edr-text">
+                  {r.booking?.reference ?? "—"}
+                </Text>
+                <Group gap={4} wrap="nowrap" align="flex-start">
+                  <Building2
+                    size={10}
+                    className="mt-[3px] shrink-0 text-edr-muted opacity-70"
+                  />
+                  <Text fz={11} c="edr-muted" className="cell-wrap">
+                    {r.customerName ?? "—"}
+                  </Text>
+                </Group>
+              </div>
+            </div>
+          );
+        },
+      },
+      {
+        id: "shipment",
+        header: () => <span className={headerCell}>Shipment</span>,
+        cell: ({ row }) => {
+          const b = row.original.booking;
+          const isImport = b?.tradeDirection === "IMPORT";
+          const Icon = isImport ? Truck : ShipWheel;
+          return (
+            <Stack gap={5} py={2}>
+              <Badge
+                size="sm"
+                variant="light"
+                radius="sm"
+                color={shipmentColor(b?.schedulingStatus)}
+              >
+                {prettyStatus(b?.schedulingStatus) || "—"}
+              </Badge>
+              {b?.tradeDirection ? (
+                <span
+                  className="inline-flex w-fit items-center gap-1 rounded-[5px] px-1.5 py-[2px] text-[10px] font-medium leading-none"
+                  style={{
+                    background: `var(--mantine-color-${isImport ? "blue" : "teal"}-0)`,
+                    color: `var(--mantine-color-${isImport ? "blue" : "teal"}-7)`,
+                  }}
+                >
+                  <Icon size={10} />
+                  {prettyStatus(b.tradeDirection)}
+                </span>
+              ) : null}
+            </Stack>
+          );
+        },
+      },
+      {
+        id: "status",
+        header: () => <span className={headerCell}>My status</span>,
+        cell: ({ row }) => {
+          const m = STATUS_META[row.original.status];
+          return (
+            <Badge size="sm" variant="light" color={m.color} radius="sm">
+              {m.label}
+            </Badge>
+          );
+        },
+      },
+      {
+        id: "docs",
+        header: () => <span className={headerCell}>Docs</span>,
+        cell: ({ row }) => {
+          const count = row.original.files?.length ?? 0;
+          return (
+            <Group gap={5} wrap="nowrap">
+              <Paperclip size={12} className="shrink-0 text-edr-muted" />
+              <Text fz={12.5} c={count ? "edr-text" : "edr-muted"}>
+                {count || "—"}
+              </Text>
+            </Group>
+          );
+        },
+      },
+      {
+        id: "elapsed",
+        header: () => <span className={headerCell}>Time after arrival</span>,
+        cell: ({ row }) => (
+          <Group gap={5} wrap="nowrap">
+            <Clock3 size={12} className="shrink-0 text-edr-muted" />
+            <Text fz={11.5} c="edr-muted">
+              {formatMinutes(row.original.timeAfterTrainArrives)}
+            </Text>
+          </Group>
+        ),
+      },
+      {
+        id: "chevron",
+        size: 40,
+        header: "",
+        cell: () => (
+          <Group justify="flex-end" pr="xs">
+            <ChevronRight size={16} className="text-edr-muted" />
+          </Group>
+        ),
+      },
+    ],
+    [],
+  );
 
   return (
-    <Stack gap="lg" p={{ base: 16, sm: 24, lg: 32 }}>
-      <Stack gap={4}>
-        <Title order={2}>Bookings</Title>
-        <Text fz={13} c="edr-muted">
-          Shipments assigned to you for transit. Documents can be uploaded once
-          a booking is dispatched, and are locked when you finish it.
-        </Text>
-      </Stack>
-
-      <SimpleGrid cols={{ base: 1, xs: 2, sm: 4 }} spacing="sm">
-        <SummaryTile
-          icon={<Train size={18} color={cv("edr-blue")} strokeWidth={2} />}
-          label={meta ? "Assigned to you" : "Assigned"}
-          value={meta?.total ?? "—"}
-          soft="edr-blue-soft"
-        />
-        <SummaryTile
-          icon={
-            <Clock3 size={18} color={cv("edr-amber-text")} strokeWidth={2} />
-          }
-          label="Open on this page"
-          value={pageCounts.open}
-          soft="edr-amber-soft"
-        />
-        <SummaryTile
-          icon={
-            <CheckCircle2 size={18} color={cv("edr-green.7")} strokeWidth={2} />
-          }
-          label="Ready for documents"
-          value={pageCounts.uploadable}
-          soft="edr-soft"
-        />
-        <SummaryTile
-          icon={<Paperclip size={18} color={cv("edr-slate")} strokeWidth={2} />}
-          label="Documents on this page"
-          value={pageCounts.documents}
-          soft="edr-slate-soft"
-        />
-      </SimpleGrid>
-
-      <Card withBorder radius="md" p="md">
-        <Group gap="sm" align="flex-end" wrap="wrap">
-          <TextInput
-            flex="1 1 240px"
-            label="Search"
-            placeholder="Booking reference or customer"
-            leftSection={<Search size={15} />}
-            value={search}
-            onChange={(e) => setSearch(e.currentTarget.value)}
-          />
-          <Select
-            w={190}
-            label="My status"
-            placeholder="Any"
-            data={STATUS_OPTIONS}
-            value={status}
-            onChange={setStatus}
-            clearable
-          />
-          <Select
-            w={210}
-            label="Shipment"
-            placeholder="Any"
-            data={SHIPMENT_OPTIONS}
-            value={shipment}
-            onChange={setShipment}
-            clearable
-          />
-          {hasFilters ? (
-            <Button
-              variant="subtle"
-              color="edr-slate"
-              leftSection={<X size={15} />}
-              onClick={clearFilters}
-            >
-              Clear
-            </Button>
-          ) : null}
-        </Group>
-      </Card>
-
-      {query.isPending ? (
-        <Center py="xl">
-          <Loader size="sm" color="edr-green" />
-        </Center>
-      ) : query.isError ? (
-        <Alert color="red" variant="light" icon={<AlertCircle size={16} />}>
-          {(query.error as Error).message}
-        </Alert>
-      ) : items.length === 0 ? (
-        <Card withBorder radius="md" py={64}>
-          <Stack align="center" gap="xs">
-            <FileText size={28} opacity={0.4} />
-            <Text fz={13} c="edr-muted">
-              {hasFilters
-                ? "No bookings match these filters."
-                : "No bookings have been assigned to you yet."}
+    <Box px="lg" py="lg" mx="auto" w="100%" maw={1600}>
+      <Stack gap="lg">
+        {/* ── Header ───────────────────────────────────────────────── */}
+        <Group justify="space-between" align="flex-start" gap="md">
+          <div style={{ minWidth: 0, maxWidth: 640 }}>
+            <Group gap="sm" align="center" wrap="nowrap">
+              <Title order={2} className="truncate" style={{ minWidth: 0 }}>
+                Bookings
+              </Title>
+              <LivePill updatedAt={dataUpdatedAt} />
+            </Group>
+            <Text c="dimmed" size="sm" mt={4}>
+              Shipments assigned to you for transit. Documents can be uploaded
+              once a booking is dispatched, and are locked when you finish it.
             </Text>
-            {hasFilters ? (
-              <Button variant="subtle" size="compact-sm" onClick={clearFilters}>
-                Clear filters
-              </Button>
-            ) : null}
-          </Stack>
-        </Card>
-      ) : (
-        <Card withBorder radius="md" p={0}>
-          <Table.ScrollContainer minWidth={880}>
-            <Table striped highlightOnHover verticalSpacing="sm">
-              <Table.Thead>
-                <Table.Tr>
-                  <Table.Th>Booking</Table.Th>
-                  <Table.Th>Customer</Table.Th>
-                  <Table.Th>Shipment</Table.Th>
-                  <Table.Th>My status</Table.Th>
-                  <Table.Th ta="center">Docs</Table.Th>
-                  <Table.Th>Time after arrival</Table.Th>
-                  <Table.Th />
-                </Table.Tr>
-              </Table.Thead>
-              <Table.Tbody>
-                {items.map((assignment) => {
-                  const statusMeta = STATUS_META[assignment.status];
-                  const docCount = assignment.files?.length ?? 0;
-                  const locked = !assignment.canUploadDocuments;
-                  return (
-                    <Table.Tr key={assignment.id}>
-                      <Table.Td>
-                        <Text size="sm" fw={600}>
-                          {assignment.booking?.reference ?? "—"}
-                        </Text>
-                      </Table.Td>
-                      <Table.Td style={{ maxWidth: 260 }}>
-                        <Tooltip
-                          label={assignment.customerName ?? "—"}
-                          disabled={!assignment.customerName}
-                          multiline
-                          w={280}
-                        >
-                          <Text size="sm" truncate>
-                            {assignment.customerName ?? "—"}
-                          </Text>
-                        </Tooltip>
-                      </Table.Td>
-                      <Table.Td>
-                        <Group gap={7} wrap="nowrap">
-                          <Box
-                            className="size-1.5 shrink-0 rounded-full"
-                            style={{
-                              background:
-                                assignment.booking?.schedulingStatus ===
-                                "DISPATCHED"
-                                  ? cv("edr-blue-dot")
-                                  : cv("edr-step-idle"),
-                            }}
-                          />
-                          <Text fz={12} c="edr-text">
-                            {humanize(assignment.booking?.schedulingStatus)}
-                          </Text>
-                        </Group>
-                      </Table.Td>
-                      <Table.Td>
-                        <Box
-                          px={9}
-                          py={3}
-                          className="inline-flex w-fit rounded-full"
-                          style={{ background: cv(statusMeta.bg) }}
-                        >
-                          <Text
-                            fz={10}
-                            fw={700}
-                            style={{ color: cv(statusMeta.fg) }}
-                          >
-                            {statusMeta.label}
-                          </Text>
-                        </Box>
-                      </Table.Td>
-                      <Table.Td ta="center">
-                        <Text size="sm" c={docCount ? undefined : "dimmed"}>
-                          {docCount || "—"}
-                        </Text>
-                      </Table.Td>
-                      <Table.Td>
-                        <Text fz={13} c="edr-muted">
-                          {formatMinutes(assignment.timeAfterTrainArrives)}
-                        </Text>
-                      </Table.Td>
-                      <Table.Td>
-                        <Group justify="flex-end" wrap="nowrap">
-                          <Button
-                            size="compact-sm"
-                            variant={locked ? "subtle" : "light"}
-                            color={locked ? "gray" : undefined}
-                            leftSection={
-                              locked ? (
-                                <Lock size={13} />
-                              ) : (
-                                <FileText size={13} />
-                              )
-                            }
-                            onClick={() => setActive(assignment)}
-                          >
-                            {locked ? "View" : "Documents"}
-                          </Button>
-                        </Group>
-                      </Table.Td>
-                    </Table.Tr>
-                  );
-                })}
-              </Table.Tbody>
-            </Table>
-          </Table.ScrollContainer>
+          </div>
+          <Button
+            variant="default"
+            radius="md"
+            size="sm"
+            leftSection={<RefreshCw size={14} />}
+            loading={isFetching}
+            onClick={() => void refetch()}
+          >
+            Refresh
+          </Button>
+        </Group>
 
-          {meta ? (
+        <KpiStrip
+          loading={statsPending}
+          items={[
+            {
+              label: "Assigned to you",
+              value: stats?.totals.assignments ?? 0,
+              icon: Train,
+              color: "blue",
+            },
+            {
+              label: "Open",
+              value: stats?.totals.open ?? 0,
+              icon: Clock3,
+              color: "yellow",
+            },
+            {
+              label: "Uploads due",
+              value: stats?.totals.actionNeeded ?? 0,
+              icon: CheckCircle2,
+              color: "edr-green",
+            },
+            {
+              label: "Documents filed",
+              value: stats
+                ? stats.documents.ro +
+                  stats.documents.do +
+                  stats.documents.t1 +
+                  stats.documents.gatePass +
+                  stats.documents.djiboutiT1 +
+                  stats.documents.own
+                : 0,
+              icon: Paperclip,
+              color: "gray",
+            },
+          ]}
+        />
+
+        <Card
+          p={0}
+          withBorder
+          shadow="sm"
+          radius="lg"
+          style={{ overflow: "hidden" }}
+        >
+          <Stack gap={0}>
+            {/* ── Tabs ─────────────────────────────────────────────── */}
             <Group
               justify="space-between"
-              p="md"
-              wrap="wrap"
-              gap="sm"
+              align="stretch"
+              px="md"
+              h={46}
+              wrap="nowrap"
               style={{
-                borderTop: "1px solid var(--mantine-color-default-border)",
+                borderBottom: "1px solid var(--mantine-color-edr-border-6)",
               }}
             >
-              <Group gap="xs" wrap="nowrap">
-                <Text fz={13} c="edr-muted">
-                  Showing {(meta.page - 1) * meta.pageSize + 1}–
-                  {Math.min(meta.page * meta.pageSize, meta.total)} of{" "}
-                  {meta.total}
-                </Text>
-                <Select
-                  size="xs"
-                  w={110}
-                  aria-label="Rows per page"
-                  data={PAGE_SIZE_OPTIONS}
-                  value={String(pageSize)}
-                  onChange={(v) => setPageSize(Number(v) || PAGE_SIZE)}
-                  allowDeselect={false}
-                />
+              <Group gap={2} wrap="nowrap" align="stretch">
+                {TABS.map((t) => {
+                  const isActive = tab === t.key;
+                  const Icon = t.icon;
+                  return (
+                    <UnstyledButton
+                      key={t.key}
+                      onClick={() => {
+                        setTab(t.key);
+                        resetPage();
+                      }}
+                      px={13}
+                      className="flex items-center gap-2 transition-colors"
+                      style={{
+                        borderBottom: `2px solid ${
+                          isActive
+                            ? "var(--mantine-color-edr-green-6)"
+                            : "transparent"
+                        }`,
+                        marginBottom: -1,
+                      }}
+                      aria-pressed={isActive}
+                    >
+                      <Icon
+                        size={14}
+                        style={{
+                          color: isActive
+                            ? "var(--mantine-color-edr-green-6)"
+                            : "var(--mantine-color-gray-5)",
+                        }}
+                      />
+                      <Text
+                        fz={13}
+                        fw={isActive ? 600 : 500}
+                        c={isActive ? "edr-text" : "edr-muted"}
+                      >
+                        {t.label}
+                      </Text>
+                      <span
+                        className="rounded-full px-1.5 py-px text-[10.5px] font-semibold leading-[1.4]"
+                        style={{
+                          background: isActive
+                            ? "var(--mantine-color-edr-green-0)"
+                            : "var(--mantine-color-gray-1)",
+                          color: isActive
+                            ? "var(--mantine-color-edr-green-7)"
+                            : "var(--mantine-color-edr-muted-6)",
+                        }}
+                      >
+                        {tabCounts[t.key]}
+                      </span>
+                    </UnstyledButton>
+                  );
+                })}
               </Group>
-              {/* Rendered even on a single page: the control disappearing as
-                  the result set shrinks reads as a broken table rather than as
-                  "there is only one page". */}
-              <Pagination
-                size="sm"
-                value={meta.page}
-                total={meta.totalPages}
-                onChange={setPage}
-                withEdges
-                disabled={meta.totalPages <= 1}
-              />
+              <Text
+                fz={12}
+                c="edr-muted"
+                className="self-center whitespace-nowrap"
+              >
+                {total} record{total !== 1 ? "s" : ""}
+              </Text>
             </Group>
-          ) : null}
-        </Card>
-      )}
 
-      <TransitAgentDocumentsModal
-        assignment={active}
-        onClose={() => setActive(null)}
-      />
-    </Stack>
+            {/* ── Filter bar ───────────────────────────────────────── */}
+            <Group
+              gap={9}
+              px="md"
+              py={12}
+              wrap="wrap"
+              style={{
+                borderBottom: "1px solid var(--mantine-color-edr-divider-6)",
+              }}
+            >
+              <TextInput
+                placeholder="Search booking reference or customer…"
+                leftSection={<Search size={15} />}
+                value={query}
+                onChange={(e) => setQuery(e.currentTarget.value)}
+                rightSection={
+                  query ? (
+                    <ActionIcon
+                      size="sm"
+                      color="gray"
+                      radius="md"
+                      variant="transparent"
+                      onClick={() => setQuery("")}
+                      aria-label="Clear search"
+                    >
+                      <X size={14} />
+                    </ActionIcon>
+                  ) : null
+                }
+                radius="md"
+                size="sm"
+                styles={{
+                  input: { background: "var(--mantine-color-gray-0)" },
+                }}
+                style={{ flex: 1, minWidth: 220 }}
+              />
+              <Select
+                placeholder="Shipment"
+                data={SHIPMENT_OPTIONS}
+                value={shipment}
+                onChange={setShipment}
+                clearable
+                radius="md"
+                size="sm"
+                w={210}
+                comboboxProps={{ withinPortal: true }}
+                aria-label="Filter by shipment state"
+              />
+              {hasFilters ? (
+                <Button
+                  variant="subtle"
+                  color="gray"
+                  size="compact-sm"
+                  radius="md"
+                  leftSection={<X size={14} />}
+                  onClick={clearFilters}
+                >
+                  Clear
+                </Button>
+              ) : null}
+            </Group>
+
+            {!isPending && !isError && total === 0 ? (
+              <Stack align="center" gap={8} py={48}>
+                <ThemeIcon variant="light" color="gray" radius="xl" size={48}>
+                  <Inbox size={22} />
+                </ThemeIcon>
+                <Text c="dimmed">
+                  {hasFilters
+                    ? "No bookings match these filters."
+                    : "No bookings have been assigned to you yet."}
+                </Text>
+                {hasFilters ? (
+                  <Button
+                    variant="light"
+                    color="gray"
+                    size="compact-sm"
+                    radius="md"
+                    onClick={clearFilters}
+                  >
+                    Clear filters
+                  </Button>
+                ) : null}
+              </Stack>
+            ) : (
+              <Box w="100%" miw={0}>
+                <DataTable<TransitAssignment, unknown>
+                  columns={columns}
+                  data={items}
+                  status={
+                    isPending ? "loading" : isError ? "error" : "success"
+                  }
+                  error={
+                    isError
+                      ? {
+                          message: (error as Error).message,
+                          onRetry: () => void refetch(),
+                        }
+                      : undefined
+                  }
+                  onRowClick={(row) => navigate(`/transit-agent/bookings/${row.id}`)}
+                  pagination={{
+                    pageIndex: pagination.pageIndex,
+                    pageSize: pagination.pageSize,
+                    pageCount,
+                    totalCount: total,
+                  }}
+                  tableOptions={{
+                    state: { pagination },
+                    onPaginationChange: setPagination,
+                    manualPagination: true,
+                    pageCount,
+                  }}
+                  containerClassName="edr-transit-table border-0 shadow-none rounded-none bg-transparent"
+                  footer={(p) => <TablePager {...p} noun="bookings" />}
+                />
+              </Box>
+            )}
+          </Stack>
+        </Card>
+      </Stack>
+    </Box>
   );
 }
diff --git a/apps/edr-freight-web/portal/src/pages/transit-agent/TransitAgentOverviewPage.tsx b/apps/edr-freight-web/portal/src/pages/transit-agent/TransitAgentOverviewPage.tsx
index 4db8c305c..0e62ec710 100644
--- a/apps/edr-freight-web/portal/src/pages/transit-agent/TransitAgentOverviewPage.tsx
+++ b/apps/edr-freight-web/portal/src/pages/transit-agent/TransitAgentOverviewPage.tsx
@@ -1,14 +1,21 @@
-import { Box, Button, Center, Group, Loader, Stack, Text } from "@mantine/core";
+import { Box, Button, Center, Group, Loader, Stack, Text, Tooltip } from "@mantine/core";
 import { useQuery } from "@tanstack/react-query";
 import {
   AlertCircle,
   ArrowRight,
-  FileCheck2,
-  FileX2,
-  Paperclip,
-  Play,
-  Target,
+  CheckCircle2,
+  Clock3,
+  FileStack,
+  FileText,
+  Hourglass,
+  MapPin,
+  PackageCheck,
+  Route,
+  Ship,
+  ShieldCheck,
   Timer,
+  Train,
+  Upload,
 } from "lucide-react";
 import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
@@ -17,23 +24,53 @@ import { Card } from "@/pages/MyPortalPage/components";
 import { cv } from "@/pages/MyPortalPage/constants";
 import {
   transitAssignmentsService,
+  type TransitDocumentKind,
   type TransitStatItem,
   type TransitStats,
+  type TransitTimingKey,
+  type TransitTimingSummary,
 } from "@/services/transit-assignments.service";
 
-/** Minutes as a compact "3h 10m" / "45m" — raw integers are unreadable in a grid. */
-function formatMinutes(minutes: number | null): string {
-  if (minutes === null) return "—";
-  const h = Math.floor(minutes / 60);
+// ── Formatting ───────────────────────────────────────────────────────────────
+
+/** Minutes as "2d 4h", "3h 10m", "45m" — raw integers are unreadable in a grid. */
+function formatMinutes(minutes: number | null | undefined): string {
+  if (minutes === null || minutes === undefined) return "—";
+  if (minutes < 1) return "<1m";
+  const d = Math.floor(minutes / 1440);
+  const h = Math.floor((minutes % 1440) / 60);
   const m = minutes % 60;
-  return h ? `${h}h${m ? ` ${m}m` : ""}` : `${m}m`;
+  if (d) return `${d}d${h ? ` ${h}h` : ""}`;
+  if (h) return `${h}h${m ? ` ${m}m` : ""}`;
+  return `${m}m`;
 }
 
 /** Split a duration so the number and its unit can be styled apart. */
 function splitDuration(minutes: number | null): [string, string] {
   if (minutes === null) return ["—", ""];
   if (minutes < 90) return [String(minutes), "min"];
-  return [(minutes / 60).toFixed(1), "hrs"];
+  if (minutes < 2880) return [(minutes / 60).toFixed(1), "hrs"];
+  return [(minutes / 1440).toFixed(1), "days"];
+}
+
+function formatStamp(value?: string | null): string {
+  if (!value) return "—";
+  return new Date(value).toLocaleString(undefined, {
+    day: "numeric",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+/** "3h ago" / "2d ago" — for the action list, where recency is the point. */
+function ago(value?: string | null): string | null {
+  if (!value) return null;
+  const minutes = Math.max(
+    Math.floor((Date.now() - new Date(value).getTime()) / 60_000),
+    0,
+  );
+  return `${formatMinutes(minutes)} ago`;
 }
 
 const pctOf = (part: number, total: number) =>
@@ -49,7 +86,81 @@ const TONES: Record<Tone, { soft: string; ink: string }> = {
   red: { soft: cv("edr-red-soft"), ink: cv("edr-red") },
 };
 
-/** Section heading shared by every panel, so the rhythm stays identical. */
+const DOC_ICON: Record<TransitDocumentKind, typeof FileText> = {
+  ro: Ship,
+  do: PackageCheck,
+  t1: FileStack,
+  gate_pass: ShieldCheck,
+  djibouti_t1: FileStack,
+};
+
+/** Every timing the API measures, with the copy that explains each one. */
+const TIMINGS: Array<{
+  key: TransitTimingKey;
+  label: string;
+  caption: string;
+  icon: typeof Timer;
+  tone: Tone;
+  direction?: "IMPORT" | "EXPORT";
+}> = [
+  {
+    key: "transit",
+    label: "Transit time",
+    caption: "train departure → arrival",
+    icon: Route,
+    tone: "blue",
+  },
+  {
+    key: "declarationToRo",
+    label: "Declaration → RO",
+    caption: "customs declaration → Release Order",
+    icon: Ship,
+    tone: "green",
+    direction: "EXPORT",
+  },
+  {
+    key: "arrivalToGatePass",
+    label: "Arrival → gate pass",
+    caption: "train arrival → first gate pass",
+    icon: ShieldCheck,
+    tone: "green",
+    direction: "EXPORT",
+  },
+  {
+    key: "arrivalToDjiboutiT1",
+    label: "Arrival → Djibouti T1",
+    caption: "train arrival → first Djibouti T1",
+    icon: FileStack,
+    tone: "green",
+    direction: "EXPORT",
+  },
+  {
+    key: "bookingToDo",
+    label: "Booking → DO",
+    caption: "booking created → Delivery Order",
+    icon: PackageCheck,
+    tone: "green",
+    direction: "IMPORT",
+  },
+  {
+    key: "departureToT1",
+    label: "Departure → T1",
+    caption: "train departure → T1 documents",
+    icon: FileStack,
+    tone: "green",
+    direction: "IMPORT",
+  },
+  {
+    key: "arrivalToFinish",
+    label: "Arrival → finished",
+    caption: "train arrival → assignment finished",
+    icon: CheckCircle2,
+    tone: "amber",
+  },
+];
+
+// ── Pieces ───────────────────────────────────────────────────────────────────
+
 function PanelHead({
   title,
   hint,
@@ -76,23 +187,18 @@ function PanelHead({
   );
 }
 
-/**
- * One headline metric. Built on the portal's own KPI language — soft icon chip,
- * tight numeral, muted label — rather than a generic bordered box per stat.
- */
-function Kpi({
+/** One headline count: soft icon chip, tight numeral, muted label. */
+function CountKpi({
   icon: Icon,
   label,
   value,
-  unit,
   caption,
   tone,
   divider,
 }: {
   icon: typeof Timer;
   label: string;
-  value: string;
-  unit: string;
+  value: number;
   caption: string;
   tone: Tone;
   divider?: boolean;
@@ -114,22 +220,9 @@ function Kpi({
           <Icon size={18} color={t.ink} strokeWidth={2} />
         </Box>
         <Box className="min-w-0">
-          <Group gap={5} align="baseline" wrap="nowrap">
-            <Text
-              fz={26}
-              fw={800}
-              lh={1.05}
-              c="edr-text"
-              className="tracking-tight"
-            >
-              {value}
-            </Text>
-            {unit ? (
-              <Text fz={12} fw={600} c="edr-muted">
-                {unit}
-              </Text>
-            ) : null}
-          </Group>
+          <Text fz={26} fw={800} lh={1.05} c="edr-text" className="tracking-tight">
+            {value}
+          </Text>
           <Text fz={12} fw={600} c="edr-text" mt={6} truncate>
             {label}
           </Text>
@@ -142,75 +235,363 @@ function Kpi({
   );
 }
 
+/** One measured duration: the median headline, with the spread underneath. */
+function TimingKpi({
+  icon: Icon,
+  label,
+  caption,
+  summary,
+  tone,
+}: {
+  icon: typeof Timer;
+  label: string;
+  caption: string;
+  summary: TransitTimingSummary;
+  tone: Tone;
+}) {
+  const t = TONES[summary.measured ? tone : "slate"];
+  const [value, unit] = splitDuration(summary.median);
+  return (
+    <Box
+      className="rounded-2xl border border-edr-border p-4"
+      style={{ background: summary.measured ? "#fff" : cv("edr-slate-soft2") }}
+    >
+      <Group gap={10} wrap="nowrap" align="center" mb={10}>
+        <Box
+          className="flex size-8 shrink-0 items-center justify-center rounded-lg"
+          style={{ background: t.soft }}
+        >
+          <Icon size={15} color={t.ink} strokeWidth={2} />
+        </Box>
+        <Box className="min-w-0">
+          <Text fz={12} fw={700} c="edr-text" truncate>
+            {label}
+          </Text>
+          <Text fz={10.5} c="edr-muted" truncate>
+            {caption}
+          </Text>
+        </Box>
+      </Group>
+      <Group gap={5} align="baseline" wrap="nowrap">
+        <Text fz={24} fw={800} lh={1.05} c="edr-text" className="tracking-tight">
+          {value}
+        </Text>
+        {unit ? (
+          <Text fz={12} fw={600} c="edr-muted">
+            {unit}
+          </Text>
+        ) : null}
+        <Text fz={11} c="edr-muted" ml={4}>
+          median
+        </Text>
+      </Group>
+      <Text fz={11} c="edr-muted" mt={6}>
+        {summary.measured
+          ? `${summary.measured} measured · fastest ${formatMinutes(summary.fastest)} · slowest ${formatMinutes(summary.slowest)}`
+          : "Nothing measured yet"}
+      </Text>
+    </Box>
+  );
+}
+
+function DirectionChip({ direction }: { direction: "IMPORT" | "EXPORT" }) {
+  const tone: Tone = direction === "EXPORT" ? "green" : "blue";
+  return (
+    <Box
+      px={7}
+      py={2}
+      className="shrink-0 rounded-md"
+      style={{ background: TONES[tone].soft }}
+    >
+      <Text fz={10} fw={700} style={{ color: TONES[tone].ink }}>
+        {direction === "EXPORT" ? "EXP" : "IMP"}
+      </Text>
+    </Box>
+  );
+}
+
+/** Where a shipment is on the rail leg, from its own stamps. */
+function movementOf(item: TransitStatItem): { label: string; tone: Tone } {
+  if (item.status === "FINISHED") return { label: "Finished", tone: "green" };
+  if (item.arrivedAt) return { label: "Arrived", tone: "green" };
+  if (item.departedAt) return { label: "In transit", tone: "blue" };
+  return { label: "Awaiting departure", tone: "slate" };
+}
+
+/** A small "+3h 20m" chip for one document's offset from its reference event. */
+function OffsetChip({
+  icon: Icon,
+  minutes,
+  title,
+  tone = "green",
+}: {
+  icon: typeof FileText;
+  minutes: number | null;
+  title: string;
+  tone?: Tone;
+}) {
+  if (minutes === null) return null;
+  const t = TONES[minutes < 0 ? "slate" : tone];
+  return (
+    <Tooltip label={title} withArrow>
+      <Group
+        gap={4}
+        px={6}
+        py={2}
+        wrap="nowrap"
+        className="rounded-md"
+        style={{ background: t.soft }}
+      >
+        <Icon size={10} color={t.ink} />
+        <Text fz={10} fw={700} style={{ color: t.ink }} className="font-mono">
+          {minutes < 0 ? "−" : "+"}
+          {formatMinutes(Math.abs(minutes))}
+        </Text>
+      </Group>
+    </Tooltip>
+  );
+}
+
 /**
- * One booking's arrival→clearance track: a pickup-lag segment followed by the
- * clearance work, both on one shared scale so rows compare directly.
+ * One shipment's rail leg on a shared scale — departure to arrival — with the
+ * paperwork timed against it. A still-rolling train shows its time so far.
  */
-function TimelineRow({
+function MovementRow({
   item,
   scaleMax,
+  onOpen,
 }: {
   item: TransitStatItem;
   scaleMax: number;
+  onOpen: () => void;
 }) {
-  const pickup = item.pickupMinutes ?? 0;
-  const total = item.clearanceMinutes;
-  const work = total !== null ? Math.max(total - pickup, 0) : 0;
-  const pct = (v: number) => `${Math.min((v / scaleMax) * 100, 100)}%`;
-
-  const tone: Tone =
-    total === null
-      ? "slate"
-      : total <= 120
-        ? "green"
-        : total <= 360
-          ? "amber"
-          : "red";
+  const movement = movementOf(item);
+  const transit =
+    item.timings.transit ??
+    (item.departedAt
+      ? Math.floor((Date.now() - new Date(item.departedAt).getTime()) / 60_000)
+      : null);
+  const live = item.timings.transit === null && item.departedAt !== null;
+  const width = transit !== null ? `${Math.min((transit / scaleMax) * 100, 100)}%` : "0%";
+  const isExport = item.tradeDirection === "EXPORT";
 
   return (
-    <Group gap="md" wrap="nowrap">
-      <Box className="w-[132px] shrink-0">
-        <Text fz={12} fw={700} c="edr-text" className="font-mono">
-          {item.reference?.replace("BK-2026-", "…") ?? "—"}
-        </Text>
-        <Text fz={10} c="edr-muted" truncate>
-          {item.customerName ?? "—"}
-        </Text>
-      </Box>
-
-      <Box className="flex h-8 flex-1 items-center overflow-hidden rounded-lg bg-edr-slate-soft2">
-        {pickup > 0 ? (
-          <Box
-            className="h-8 shrink-0"
-            style={{ width: pct(pickup), background: cv("edr-blue-dot") }}
-          />
-        ) : null}
-        {total !== null ? (
-          <Box
-            className="h-8 shrink-0"
-            style={{ width: pct(work), background: TONES[tone].ink }}
-          />
-        ) : (
-          <Text fz={10} c="edr-muted" pl="sm">
-            {item.status === "NOT_STARTED" ? "not started" : "in progress"}
+    <Box
+      onClick={onOpen}
+      className="cursor-pointer rounded-xl px-2 py-3 transition-colors hover:bg-edr-slate-soft2"
+    >
+      <Group gap="md" wrap="nowrap" align="center">
+        <Box className="w-[190px] shrink-0">
+          <Group gap={6} wrap="nowrap">
+            <DirectionChip direction={item.tradeDirection} />
+            <Text fz={12} fw={700} c="edr-text" className="font-mono" truncate>
+              {item.reference ?? "—"}
+            </Text>
+          </Group>
+          <Text fz={10.5} c="edr-muted" truncate mt={2}>
+            {item.customerName ?? "—"}
+            {item.trainLabel ? ` · ${item.trainLabel}` : ""}
           </Text>
-        )}
-      </Box>
+        </Box>
 
-      <Text
-        fz={12}
-        fw={700}
-        className="w-14 shrink-0 text-right font-mono"
-        style={{ color: total === null ? cv("edr-muted") : TONES[tone].ink }}
-      >
-        {formatMinutes(total)}
-      </Text>
+        <Box className="w-[118px] shrink-0">
+          <Text fz={10} c="edr-muted">
+            Departed
+          </Text>
+          <Text fz={11.5} fw={600} c="edr-text">
+            {formatStamp(item.departedAt)}
+          </Text>
+        </Box>
+
+        <Box className="relative flex h-7 flex-1 items-center overflow-hidden rounded-lg bg-edr-slate-soft2">
+          {transit !== null ? (
+            <Box
+              className="h-7 shrink-0 rounded-lg"
+              style={{
+                width,
+                background: live ? cv("edr-blue-dot") : TONES.blue.ink,
+                opacity: live ? 0.55 : 1,
+              }}
+            />
+          ) : null}
+          <Text
+            fz={10.5}
+            fw={700}
+            className="absolute left-2 font-mono"
+            style={{ color: transit !== null ? "#fff" : cv("edr-muted") }}
+          >
+            {transit === null
+              ? "not departed"
+              : live
+                ? `${formatMinutes(transit)} so far`
+                : formatMinutes(transit)}
+          </Text>
+        </Box>
+
+        <Box className="w-[118px] shrink-0">
+          <Text fz={10} c="edr-muted">
+            Arrived
+          </Text>
+          <Text fz={11.5} fw={600} c="edr-text">
+            {item.arrivedAt ? formatStamp(item.arrivedAt) : live ? "in transit" : "—"}
+          </Text>
+        </Box>
+
+        <Group gap={4} wrap="nowrap" className="w-[210px] shrink-0 justify-end">
+          {isExport ? (
+            <>
+              <OffsetChip
+                icon={Ship}
+                minutes={item.timings.declarationToRo}
+                title="Release Order after the customs declaration"
+              />
+              <OffsetChip
+                icon={ShieldCheck}
+                minutes={item.timings.arrivalToGatePass}
+                title="First gate pass after arrival"
+              />
+              <OffsetChip
+                icon={FileStack}
+                minutes={item.timings.arrivalToDjiboutiT1}
+                title="First Djibouti T1 after arrival"
+              />
+            </>
+          ) : (
+            <>
+              <OffsetChip
+                icon={PackageCheck}
+                minutes={item.timings.bookingToDo}
+                title="Delivery Order after the booking was created"
+              />
+              <OffsetChip
+                icon={FileStack}
+                minutes={item.timings.departureToT1}
+                title="T1 documents after train departure"
+              />
+            </>
+          )}
+          <Box
+            px={8}
+            py={3}
+            className="shrink-0 rounded-full"
+            style={{ background: TONES[movement.tone].soft }}
+          >
+            <Text fz={10} fw={700} style={{ color: TONES[movement.tone].ink }}>
+              {movement.label}
+            </Text>
+          </Box>
+        </Group>
+      </Group>
+    </Box>
+  );
+}
+
+/** A shipment that needs an upload now, with the context that makes it urgent. */
+function ActionRow({ item, onOpen }: { item: TransitStatItem; onOpen: () => void }) {
+  const doc = item.nextAction.document ?? "ro";
+  const Icon = DOC_ICON[doc];
+  // The reference event for this upload — what the clock is running from.
+  const since =
+    doc === "ro"
+      ? { label: "declared", at: item.declaredAt }
+      : doc === "do"
+        ? { label: "booked", at: item.bookingCreatedAt }
+        : doc === "t1"
+          ? { label: "departed", at: item.departedAt }
+          : { label: "arrived", at: item.arrivedAt };
+  const waited = since.at
+    ? Math.floor((Date.now() - new Date(since.at).getTime()) / 60_000)
+    : null;
+  const tone: Tone = waited === null ? "slate" : waited > 720 ? "red" : waited > 240 ? "amber" : "green";
+
+  return (
+    <Group
+      justify="space-between"
+      wrap="nowrap"
+      gap="md"
+      px={24}
+      py={12}
+      className="border-t border-edr-divider"
+    >
+      <Group gap={12} wrap="nowrap" className="min-w-0 flex-1">
+        <Box
+          className="flex size-9 shrink-0 items-center justify-center rounded-xl"
+          style={{ background: TONES[tone].soft }}
+        >
+          <Icon size={16} color={TONES[tone].ink} />
+        </Box>
+        <Box className="min-w-0">
+          <Group gap={6} wrap="nowrap">
+            <DirectionChip direction={item.tradeDirection} />
+            <Text fz={12.5} fw={700} c="edr-text" className="font-mono" truncate>
+              {item.reference ?? "—"}
+            </Text>
+            <Text fz={12} c="edr-muted" truncate>
+              {item.customerName ?? "—"}
+            </Text>
+          </Group>
+          <Text fz={11.5} c="edr-muted" mt={2} truncate>
+            <Text span fw={600} c="edr-text">
+              {item.nextAction.label}
+            </Text>
+            {since.at ? ` · ${since.label} ${ago(since.at)}` : ""}
+          </Text>
+        </Box>
+      </Group>
+      <Group gap={10} wrap="nowrap" className="shrink-0">
+        {waited !== null ? (
+          <Text fz={12} fw={700} className="font-mono" style={{ color: TONES[tone].ink }}>
+            {formatMinutes(waited)}
+          </Text>
+        ) : null}
+        <Button
+          size="compact-sm"
+          color="edr-green"
+          radius="md"
+          leftSection={<Upload size={13} />}
+          onClick={onOpen}
+        >
+          Upload
+        </Button>
+      </Group>
     </Group>
   );
 }
 
-/** A single SLA band as a labelled proportional bar. */
-function SlaBar({
+function DocCountRow({
+  icon: Icon,
+  label,
+  count,
+  pending,
+}: {
+  icon: typeof FileText;
+  label: string;
+  count: number;
+  pending: number;
+}) {
+  return (
+    <Group justify="space-between" wrap="nowrap">
+      <Group gap={8} wrap="nowrap">
+        <Icon size={14} color={cv("edr-muted")} />
+        <Text fz={12.5} c="edr-text">
+          {label}
+        </Text>
+      </Group>
+      <Group gap={8} wrap="nowrap">
+        {pending > 0 ? (
+          <Text fz={11} fw={700} style={{ color: cv("edr-amber-text") }}>
+            {pending} pending
+          </Text>
+        ) : null}
+        <Text fz={12.5} fw={700} c="edr-text" className="w-6 text-right font-mono">
+          {count}
+        </Text>
+      </Group>
+    </Group>
+  );
+}
+
+function StageBar({
   label,
   count,
   total,
@@ -226,10 +607,7 @@ function SlaBar({
     <Box>
       <Group justify="space-between" mb={6} wrap="nowrap">
         <Group gap={8} wrap="nowrap">
-          <Box
-            className="size-2 shrink-0 rounded-full"
-            style={{ background: TONES[tone].ink }}
-          />
+          <Box className="size-2 shrink-0 rounded-full" style={{ background: TONES[tone].ink }} />
           <Text fz={12} fw={600} c="edr-text">
             {label}
           </Text>
@@ -239,48 +617,61 @@ function SlaBar({
         </Text>
       </Group>
       <Box className="h-1.5 overflow-hidden rounded-full bg-edr-slate-soft2">
-        <Box
-          className="h-full rounded-full"
-          style={{ width: `${pct}%`, background: TONES[tone].ink }}
-        />
+        <Box className="h-full rounded-full" style={{ width: `${pct}%`, background: TONES[tone].ink }} />
       </Box>
     </Box>
   );
 }
 
+// ── Page ─────────────────────────────────────────────────────────────────────
+
 /**
- * The transit agent's dashboard: how quickly documents are filed after the
- * train dispatches and arrives.
+ * The transit agent's home: where each shipment is on the rail leg, what
+ * paperwork is due next, and how long each document takes measured from the
+ * event that unlocks it — the train's departure and arrival, the customs
+ * declaration, the booking's creation.
  *
- * Every figure comes from `GET /transit-assignments/my/stats`, which derives
- * them from timestamps that already exist. The page renders what the API
- * measured rather than recomputing, so the two cannot disagree.
+ * Every figure comes from `GET /transit-assignments/my/stats`, derived there
+ * from timestamps that already exist. The page renders what the API measured
+ * rather than recomputing, so the two cannot disagree.
  */
 export default function TransitAgentOverviewPage() {
   const navigate = useNavigate();
   const query = useQuery({
     queryKey: ["transit-stats"],
     queryFn: transitAssignmentsService.stats,
+    refetchInterval: 60_000,
   });
 
   const s: TransitStats | undefined = query.data;
 
-  const timeline = useMemo(
-    () =>
-      (s?.items ?? [])
-        .filter((i) => i.schedulingStatus === "DISPATCHED")
-        .slice(0, 6),
+  const actions = useMemo(
+    () => (s?.items ?? []).filter((i) => i.nextAction.kind === "upload"),
+    [s],
+  );
+  const movements = useMemo(
+    () => (s?.items ?? []).filter((i) => i.departedAt || i.status !== "FINISHED").slice(0, 8),
     [s],
   );
 
-  // One shared scale, capped at 6h: a single 47h outlier would otherwise
-  // compress every other row into an invisible sliver.
+  // One shared scale: the longest completed transit, padded — a single
+  // multi-day outlier is capped so the others do not vanish into a sliver.
   const scaleMax = useMemo(() => {
-    const measured = timeline
-      .map((i) => i.clearanceMinutes)
+    const measured = movements
+      .map((i) => i.timings.transit)
       .filter((v): v is number => v !== null);
-    return Math.min(Math.max(...measured, 120) * 1.15, 360);
-  }, [timeline]);
+    return Math.min(Math.max(...measured, 360) * 1.15, 4320);
+  }, [movements]);
+
+  // Show only the timings that can apply to this agent's mix of shipments.
+  const timingCards = useMemo(() => {
+    if (!s) return [];
+    return TIMINGS.filter(
+      (t) =>
+        !t.direction ||
+        (t.direction === "EXPORT" ? s.totals.exports > 0 : s.totals.imports > 0),
+    );
+  }, [s]);
 
   if (query.isPending) {
     return (
@@ -297,8 +688,7 @@ export default function TransitAgentOverviewPage() {
           <Group gap="sm">
             <AlertCircle size={18} color={cv("edr-red")} />
             <Text fz={14} c="edr-text">
-              {(query.error as Error)?.message ??
-                "Could not load your overview."}
+              {(query.error as Error)?.message ?? "Could not load your overview."}
             </Text>
           </Group>
         </Card>
@@ -306,15 +696,9 @@ export default function TransitAgentOverviewPage() {
     );
   }
 
-  const { totals, performance, sla, coverage } = s;
-  const [medianValue, medianUnit] = splitDuration(
-    performance.medianClearanceMinutes,
-  );
-  const [pickupValue, pickupUnit] = splitDuration(
-    performance.medianPickupMinutes,
-  );
-  const uncovered = coverage.dispatched - coverage.withDocuments;
-  const coveragePct = pctOf(coverage.withDocuments, coverage.dispatched);
+  const { totals, timings, documents, pending } = s;
+  const openDetail = (item: TransitStatItem) => navigate(`/transit-agent/bookings/${item.id}`);
+  const waiting = s.items.filter((i) => i.nextAction.kind === "wait");
 
   return (
     <Box className="bg-edr-bg" p={{ base: 16, sm: 24, lg: 32 }}>
@@ -322,238 +706,276 @@ export default function TransitAgentOverviewPage() {
         <Group justify="space-between" align="end" wrap="wrap" gap="sm">
           <Box>
             <Text fz={26} fw={800} c="edr-text" className="tracking-tight">
-              Clearance performance
+              Transit overview
             </Text>
             <Text fz={13} c="edr-muted" mt={4}>
-              How fast documents are filed after the train dispatches and
-              arrives
+              Where your shipments are on the rail leg, what paperwork is due,
+              and how long each document takes from the moment it unlocks
             </Text>
           </Box>
-          {totals.open > 0 ? (
-            <Group
-              gap={8}
-              px={12}
-              py={7}
-              className="rounded-full"
-              style={{ background: cv("edr-soft") }}
-              wrap="nowrap"
+          <Group gap="sm" wrap="nowrap">
+            {totals.actionNeeded > 0 ? (
+              <Group
+                gap={8}
+                px={12}
+                py={7}
+                className="rounded-full"
+                style={{ background: cv("edr-amber-soft") }}
+                wrap="nowrap"
+              >
+                <Box className="size-1.5 rounded-full" style={{ background: cv("edr-amber-text") }} />
+                <Text fz={12} fw={700} style={{ color: cv("edr-amber-text") }}>
+                  {totals.actionNeeded} upload{totals.actionNeeded === 1 ? "" : "s"} due
+                </Text>
+              </Group>
+            ) : totals.open > 0 ? (
+              <Group
+                gap={8}
+                px={12}
+                py={7}
+                className="rounded-full"
+                style={{ background: cv("edr-soft") }}
+                wrap="nowrap"
+              >
+                <Box className="size-1.5 rounded-full" style={{ background: cv("edr-green.6") }} />
+                <Text fz={12} fw={700} style={{ color: cv("edr-green.7") }}>
+                  {totals.open} active · paperwork up to date
+                </Text>
+              </Group>
+            ) : null}
+            <Button
+              variant="default"
+              radius="md"
+              rightSection={<ArrowRight size={14} />}
+              onClick={() => navigate("/transit-agent/bookings")}
             >
-              <Box
-                className="size-1.5 rounded-full"
-                style={{ background: cv("edr-green.6") }}
-              />
-              <Text fz={12} fw={700} style={{ color: cv("edr-green.7") }}>
-                {totals.open} active now
-              </Text>
-            </Group>
-          ) : null}
+              All bookings
+            </Button>
+          </Group>
         </Group>
 
+        {/* ── Where the shipments are ──────────────────────────────── */}
         <Card>
-          <Box className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-            <Kpi
-              icon={Timer}
-              label="Median clearance"
-              value={medianValue}
-              unit={medianUnit}
-              caption={`across ${performance.measured} finished`}
-              tone="green"
+          <Box className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-5">
+            <CountKpi
+              icon={Train}
+              label="Assigned to you"
+              value={totals.assignments}
+              caption={`${totals.exports} export · ${totals.imports} import`}
+              tone="slate"
             />
-            <Kpi
-              icon={Play}
-              label="Pickup lag"
-              value={pickupValue}
-              unit={pickupUnit}
-              caption="arrival → work started"
+            <CountKpi
+              icon={Hourglass}
+              label="Awaiting departure"
+              value={totals.awaitingDeparture}
+              caption="open, train not yet departed"
+              tone="slate"
+              divider
+            />
+            <CountKpi
+              icon={Route}
+              label="In transit"
+              value={totals.inTransit}
+              caption="departed, not yet arrived"
               tone="blue"
               divider
             />
-            <Kpi
-              icon={Paperclip}
-              label="Documents filed"
-              value={String(totals.documents)}
-              unit="files"
-              caption={`across ${totals.assignments} bookings`}
-              tone={uncovered > 0 ? "amber" : "green"}
+            <CountKpi
+              icon={MapPin}
+              label="Arrived"
+              value={totals.arrived}
+              caption="at destination, still open"
+              tone="green"
               divider
             />
-            <Kpi
-              icon={Target}
-              label="On-time rate"
-              value={
-                performance.onTimeRate === null
-                  ? "—"
-                  : String(performance.onTimeRate)
-              }
-              unit={performance.onTimeRate === null ? "" : "%"}
-              caption="cleared within 6h"
-              tone="green"
+            <CountKpi
+              icon={Upload}
+              label="Uploads due"
+              value={totals.actionNeeded}
+              caption="documents you can file now"
+              tone={totals.actionNeeded > 0 ? "amber" : "green"}
               divider
             />
           </Box>
         </Card>
 
-        <Box className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-          <Box className="lg:col-span-2">
-            <Card>
-              <PanelHead
-                title="Arrival → clearance"
-                hint="Time from the train arriving to documents filed"
-                right={
-                  <Group gap={14} wrap="nowrap">
-                    {(
-                      [
-                        [cv("edr-blue-dot"), "pickup"],
-                        [cv("edr-green.7"), "cleared"],
-                        [cv("edr-red"), "breach"],
-                      ] as const
-                    ).map(([color, label]) => (
-                      <Group gap={6} key={label} wrap="nowrap">
-                        <Box
-                          className="size-2 rounded-sm"
-                          style={{ background: color }}
-                        />
-                        <Text fz={11} c="edr-muted">
-                          {label}
-                        </Text>
-                      </Group>
-                    ))}
-                  </Group>
-                }
+        {/* ── Timings ──────────────────────────────────────────────── */}
+        <Card>
+          <PanelHead
+            title="How long each step takes"
+            hint="Median across your shipments, each measured from the event that unlocks it. A replaced document counts from its last update."
+          />
+          <Box className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            {timingCards.map((t) => (
+              <TimingKpi
+                key={t.key}
+                icon={t.icon}
+                label={t.label}
+                caption={t.caption}
+                summary={timings[t.key]}
+                tone={t.tone}
               />
-              {timeline.length === 0 ? (
-                <Text fz={13} c="edr-muted" ta="center" py={40}>
-                  No dispatched bookings yet.
-                </Text>
+            ))}
+          </Box>
+        </Card>
+
+        <Box className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+          {/* ── Action needed ────────────────────────────────────── */}
+          <Box className="lg:col-span-2">
+            <Card padding={0}>
+              <Box px={24} pt={20} pb={14}>
+                <PanelHead
+                  title="Paperwork due now"
+                  hint="Uploads the detail page will accept right now, oldest wait first"
+                  right={
+                    <Text fz={11} c="edr-muted">
+                      {waiting.length} waiting on the train or the desk
+                    </Text>
+                  }
+                />
+              </Box>
+              {actions.length === 0 ? (
+                <Box px={24} pb={24}>
+                  <Group
+                    gap={10}
+                    p={14}
+                    align="start"
+                    wrap="nowrap"
+                    className="rounded-xl"
+                    style={{ background: cv("edr-soft") }}
+                  >
+                    <CheckCircle2 size={16} color={cv("edr-green.7")} className="shrink-0" />
+                    <Box>
+                      <Text fz={12.5} fw={700} style={{ color: cv("edr-green.7") }}>
+                        Nothing to upload right now.
+                      </Text>
+                      <Text fz={11.5} lh={1.5} c="edr-muted" mt={2}>
+                        {waiting.length > 0
+                          ? `${waiting.length} shipment${waiting.length === 1 ? " is" : "s are"} waiting on a declaration or on the train — they will appear here the moment an upload unlocks.`
+                          : "Every shipment assigned to you has its paperwork complete."}
+                      </Text>
+                    </Box>
+                  </Group>
+                </Box>
               ) : (
-                <Stack gap={14}>
-                  {timeline.map((item) => (
-                    <TimelineRow
-                      key={item.id}
-                      item={item}
-                      scaleMax={scaleMax}
-                    />
-                  ))}
-                </Stack>
+                <Box pb={6}>
+                  {[...actions]
+                    .sort((a, b) => {
+                      const ref = (i: TransitStatItem) =>
+                        i.nextAction.document === "ro"
+                          ? i.declaredAt
+                          : i.nextAction.document === "do"
+                            ? i.bookingCreatedAt
+                            : i.nextAction.document === "t1"
+                              ? i.departedAt
+                              : i.arrivedAt;
+                      return (ref(a) ?? "9").localeCompare(ref(b) ?? "9");
+                    })
+                    .map((item) => (
+                      <ActionRow key={item.id} item={item} onOpen={() => openDetail(item)} />
+                    ))}
+                </Box>
               )}
             </Card>
           </Box>
 
+          {/* ── Documents + stages ───────────────────────────────── */}
           <Stack gap="md">
             <Card>
               <PanelHead
-                title="Clearance SLA"
+                title="Documents on file"
+                hint="Across every shipment assigned to you"
                 right={
                   <Text fz={11} c="edr-muted">
-                    {performance.measured} measured
+                    {documents.ro + documents.do + documents.t1 + documents.gatePass + documents.djiboutiT1 + documents.own}{" "}
+                    files
                   </Text>
                 }
               />
-              <Stack gap={14}>
-                <SlaBar
-                  label="Under 2h"
-                  count={sla.under2h}
-                  total={performance.measured}
-                  tone="green"
-                />
-                <SlaBar
-                  label="2h – 6h"
-                  count={sla.under6h}
-                  total={performance.measured}
-                  tone="amber"
-                />
-                <SlaBar
-                  label="Over 6h"
-                  count={sla.over6h}
-                  total={performance.measured}
-                  tone="red"
-                />
+              <Stack gap={10}>
+                {totals.exports > 0 ? (
+                  <>
+                    <DocCountRow icon={Ship} label="Release Orders" count={documents.ro} pending={pending.ro} />
+                    <DocCountRow icon={ShieldCheck} label="Gate passes" count={documents.gatePass} pending={pending.gatePass} />
+                    <DocCountRow icon={FileStack} label="Djibouti T1" count={documents.djiboutiT1} pending={pending.djiboutiT1} />
+                  </>
+                ) : null}
+                {totals.imports > 0 ? (
+                  <>
+                    <DocCountRow icon={PackageCheck} label="Delivery Orders" count={documents.do} pending={pending.do} />
+                    <DocCountRow icon={FileStack} label="T1 documents" count={documents.t1} pending={pending.t1} />
+                  </>
+                ) : null}
+                <DocCountRow icon={FileText} label="Your own documents" count={documents.own} pending={0} />
               </Stack>
             </Card>
 
             <Card>
               <PanelHead
-                title="Document coverage"
-                hint="Dispatched bookings with evidence filed"
+                title="Shipment stages"
+                right={
+                  <Text fz={11} c="edr-muted">
+                    {totals.assignments} total
+                  </Text>
+                }
               />
-              <Group align="baseline" gap={6} mb={10}>
-                <Text
-                  fz={30}
-                  fw={800}
-                  lh={1}
-                  c="edr-text"
-                  className="tracking-tight"
-                >
-                  {coveragePct}%
-                </Text>
-                <Text fz={12} c="edr-muted">
-                  {coverage.withDocuments} of {coverage.dispatched}
-                </Text>
-              </Group>
-              <Box className="mb-4 h-2 overflow-hidden rounded-full bg-edr-slate-soft2">
-                <Box
-                  className="h-full rounded-full"
-                  style={{
-                    width: `${coveragePct}%`,
-                    background:
-                      uncovered > 0 ? cv("edr-amber-text") : cv("edr-green.6"),
-                  }}
-                />
-              </Box>
-              {uncovered > 0 ? (
-                <Group
-                  gap={10}
-                  p={12}
-                  align="start"
-                  wrap="nowrap"
-                  className="mb-4 rounded-xl"
-                  style={{ background: cv("edr-amber-soft") }}
-                >
-                  <FileX2
-                    size={15}
-                    color={cv("edr-amber-text")}
-                    className="shrink-0"
-                  />
-                  <Text
-                    fz={11}
-                    lh={1.5}
-                    style={{ color: cv("edr-amber-text") }}
-                  >
-                    {uncovered} dispatched booking
-                    {uncovered === 1 ? " has" : "s have"} no documents filed.
-                  </Text>
-                </Group>
-              ) : (
-                <Group
-                  gap={10}
-                  p={12}
-                  align="start"
-                  wrap="nowrap"
-                  className="mb-4 rounded-xl"
-                  style={{ background: cv("edr-soft") }}
-                >
-                  <FileCheck2
-                    size={15}
-                    color={cv("edr-green.7")}
-                    className="shrink-0"
-                  />
-                  <Text fz={11} lh={1.5} style={{ color: cv("edr-green.7") }}>
-                    Every dispatched booking has evidence filed.
-                  </Text>
-                </Group>
-              )}
-              <Button
-                fullWidth
-                color="edr-green"
-                rightSection={<ArrowRight size={15} />}
-                onClick={() => navigate("/transit-agent/bookings")}
-              >
-                {uncovered > 0 ? "File missing documents" : "Open bookings"}
-              </Button>
+              <Stack gap={14}>
+                <StageBar label="Awaiting departure" count={totals.awaitingDeparture} total={totals.assignments} tone="slate" />
+                <StageBar label="In transit" count={totals.inTransit} total={totals.assignments} tone="blue" />
+                <StageBar label="Arrived, open" count={totals.arrived} total={totals.assignments} tone="amber" />
+                <StageBar label="Finished" count={totals.finished} total={totals.assignments} tone="green" />
+              </Stack>
             </Card>
           </Stack>
         </Box>
 
+        {/* ── Train movements ──────────────────────────────────────── */}
+        <Card padding={0}>
+          <Box px={24} pt={20} pb={6}>
+            <PanelHead
+              title="Train movements"
+              hint="Departure to arrival for each shipment, with its paperwork timed against the train"
+              right={
+                <Group gap={14} wrap="nowrap">
+                  {(
+                    [
+                      [TONES.blue.ink, "arrived"],
+                      [cv("edr-blue-dot"), "still rolling"],
+                      [TONES.green.soft, "doc offset"],
+                    ] as const
+                  ).map(([color, label]) => (
+                    <Group gap={6} key={label} wrap="nowrap">
+                      <Box className="size-2 rounded-sm" style={{ background: color }} />
+                      <Text fz={11} c="edr-muted">
+                        {label}
+                      </Text>
+                    </Group>
+                  ))}
+                </Group>
+              }
+            />
+          </Box>
+          {movements.length === 0 ? (
+            <Text fz={13} c="edr-muted" ta="center" py={40}>
+              No shipments on the rail yet.
+            </Text>
+          ) : (
+            <Box px={16} pb={12} className="overflow-x-auto">
+              <Stack gap={2} className="min-w-[900px]">
+                {movements.map((item) => (
+                  <MovementRow
+                    key={item.id}
+                    item={item}
+                    scaleMax={scaleMax}
+                    onOpen={() => openDetail(item)}
+                  />
+                ))}
+              </Stack>
+            </Box>
+          )}
+        </Card>
+
+        {/* ── Recent assignments ───────────────────────────────────── */}
         <Card padding={0}>
           <Box px={24} pt={20} pb={14}>
             <PanelHead
@@ -565,88 +987,62 @@ export default function TransitAgentOverviewPage() {
               }
             />
           </Box>
-          <Box>
-            {s.items.slice(0, 6).map((item) => (
+          {s.items.slice(0, 8).map((item) => {
+            const movement = movementOf(item);
+            return (
               <Group
                 key={item.id}
                 justify="space-between"
                 px={24}
-                py={14}
+                py={12}
                 wrap="nowrap"
-                className="border-t border-edr-divider"
+                className="cursor-pointer border-t border-edr-divider hover:bg-edr-slate-soft2"
+                onClick={() => openDetail(item)}
               >
                 <Group gap="md" wrap="nowrap" className="min-w-0 flex-1">
-                  <Text
-                    fz={12}
-                    fw={600}
-                    c="edr-text"
-                    className="w-[132px] font-mono"
-                  >
+                  <DirectionChip direction={item.tradeDirection} />
+                  <Text fz={12} fw={600} c="edr-text" className="w-[132px] font-mono" truncate>
                     {item.reference ?? "—"}
                   </Text>
-                  <Box
-                    px={9}
-                    py={3}
-                    className="shrink-0 rounded-full"
-                    style={{
-                      background:
-                        item.status === "FINISHED"
-                          ? cv("edr-soft")
-                          : item.status === "IN_PROGRESS"
-                            ? cv("edr-blue-soft")
-                            : cv("edr-slate-soft"),
-                    }}
-                  >
-                    <Text
-                      fz={10}
-                      fw={700}
-                      style={{
-                        color:
-                          item.status === "FINISHED"
-                            ? cv("edr-green.7")
-                            : item.status === "IN_PROGRESS"
-                              ? cv("edr-blue")
-                              : cv("edr-slate"),
-                      }}
-                    >
-                      {item.status === "FINISHED"
-                        ? "Finished"
-                        : item.status === "IN_PROGRESS"
-                          ? "In progress"
-                          : "Not started"}
+                  <Box px={9} py={3} className="shrink-0 rounded-full" style={{ background: TONES[movement.tone].soft }}>
+                    <Text fz={10} fw={700} style={{ color: TONES[movement.tone].ink }}>
+                      {movement.label}
                     </Text>
                   </Box>
                   <Text fz={12} c="edr-muted" truncate>
                     {item.customerName ?? "—"}
                   </Text>
                 </Group>
-                <Group gap={22} wrap="nowrap" className="shrink-0">
-                  <Text fz={12} c="edr-muted" className="font-mono">
-                    {formatMinutes(item.clearanceMinutes)}
-                  </Text>
-                  <Group gap={6} wrap="nowrap" className="w-10">
-                    {item.documentCount > 0 ? (
-                      <FileCheck2 size={13} color={cv("edr-green.6")} />
-                    ) : (
-                      <FileX2 size={13} color={cv("edr-step-idle")} />
-                    )}
-                    <Text
-                      fz={12}
-                      className="font-mono"
-                      style={{
-                        color:
-                          item.documentCount > 0
-                            ? cv("edr-green.7")
-                            : cv("edr-muted"),
-                      }}
-                    >
-                      {item.documentCount}
+                <Group gap={18} wrap="nowrap" className="shrink-0">
+                  <Group gap={6} wrap="nowrap">
+                    <Clock3 size={12} color={cv("edr-muted")} />
+                    <Text fz={11.5} c="edr-muted" className="font-mono">
+                      {item.arrivedAt
+                        ? `arrived ${ago(item.arrivedAt)}`
+                        : item.departedAt
+                          ? `departed ${ago(item.departedAt)}`
+                          : `assigned ${ago(item.assignedAt)}`}
                     </Text>
                   </Group>
+                  <Text
+                    fz={11.5}
+                    fw={600}
+                    className="w-[170px] truncate text-right"
+                    style={{
+                      color:
+                        item.nextAction.kind === "upload"
+                          ? cv("edr-amber-text")
+                          : item.nextAction.kind === "done"
+                            ? cv("edr-green.7")
+                            : cv("edr-muted"),
+                    }}
+                  >
+                    {item.nextAction.label}
+                  </Text>
                 </Group>
               </Group>
-            ))}
-          </Box>
+            );
+          })}
         </Card>
       </Stack>
     </Box>
diff --git a/apps/edr-freight-web/portal/src/pages/transit-agent/TransitClearanceActionPanel.tsx b/apps/edr-freight-web/portal/src/pages/transit-agent/TransitClearanceActionPanel.tsx
new file mode 100644
index 000000000..3fe55cfb8
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/transit-agent/TransitClearanceActionPanel.tsx
@@ -0,0 +1,434 @@
+import {
+  Alert,
+  Box,
+  Button,
+  Card,
+  Group,
+  Modal,
+  Progress,
+  Stack,
+  Stepper,
+  Text,
+  Textarea,
+  ThemeIcon,
+} from "@mantine/core";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  AlertTriangle,
+  ArrowRight,
+  CheckCircle2,
+  Ship,
+  X,
+} from "lucide-react";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import type { Freight } from "@edr/types";
+import { isReleaseOrderFileCode } from "@edr/types";
+
+import { transitAssignmentsService } from "@/services/transit-assignments.service";
+
+interface WizardStep {
+  label: string;
+  description: string;
+  done: boolean;
+}
+
+type MilestoneRow = { milestoneCode?: string | null; status?: string | null };
+
+/** SKIPPED counts as done — a step that does not apply must not stall the flow. */
+function isMilestoneDone(
+  milestones: MilestoneRow[] | undefined,
+  code: string,
+): boolean {
+  const m = milestones?.find((x) => x.milestoneCode === code);
+  return m?.status === "COMPLETED" || m?.status === "SKIPPED";
+}
+
+/**
+ * The clearance stepper a transit agent sees on a shipment assigned to them,
+ * laid out as the backoffice's clearance action panel is, plus the RO
+ * amendment request. The uploads themselves (DO, RO, T1, gate pass, Djibouti
+ * T1) live in the transit documents panel, where their timings are shown.
+ *
+ * The steps are rendered from the clearance payload rather than re-derived.
+ */
+export function TransitClearanceActionPanel({
+  bookingId,
+  clearance,
+  tradeDirection,
+  onChanged,
+}: {
+  bookingId: string;
+  clearance?: Freight.ClearanceView;
+  tradeDirection?: string | null;
+  onChanged: () => void;
+}) {
+  const queryClient = useQueryClient();
+  const [amendOpen, setAmendOpen] = useState(false);
+
+  const isImport = tradeDirection === "IMPORT";
+  const workflowFiles = clearance?.workflowFiles ?? [];
+  const hasRo = workflowFiles.some(
+    (f) => isReleaseOrderFileCode(f.code) && f.file,
+  );
+  const roHoldReason = clearance?.roHoldReason ?? null;
+
+  const refresh = () => {
+    void queryClient.invalidateQueries({ queryKey: ["transit-clearance"] });
+    void queryClient.invalidateQueries({
+      queryKey: ["transit-clearance-history"],
+    });
+    onChanged();
+  };
+
+  // ── Steps ────────────────────────────────────────────────────────────────
+  // The same wizards the GL Djibouti desk sees: 12 import steps, 11 export.
+  // Every `done` reads off the clearance payload — milestones, booking
+  // milestones, or a server-set flag — so a step can never claim to be
+  // complete when the server does not consider it so.
+  // This page is always booking-scoped, and for a booking the clearance view's
+  // milestones ARE the booking milestones — the GL detail page passes the same
+  // array for both on its `kind === "booking"` branch.
+  const ms = clearance?.milestones;
+  const done = (code: string) => isMilestoneDone(ms, code);
+  const bookingDone = (code: string) => isMilestoneDone(ms, code);
+  const dutyRequired = clearance?.dutyRequired ?? false;
+
+  const steps: WizardStep[] = isImport
+    ? [
+        {
+          label: "Customer documents",
+          description: "Reviewed and approved by GL Ethiopia",
+          done: done("DOCUMENTS_APPROVED"),
+        },
+        {
+          label: "Request transit assignee",
+          description: clearance?.transitAssignee?.name
+            ? `Transit assignee: ${clearance.transitAssignee.name}`
+            : "GL Djibouti names the officer handling this shipment",
+          done: Boolean(clearance?.transitAssignee?.name),
+        },
+        {
+          label: "Draft declaration",
+          description: "Customer accepts the estimated price",
+          done: done("DRAFT_DECLARATION_ACCEPTED") || done("DECLARED"),
+        },
+        {
+          label: "Customs declaration",
+          description: "GL Ethiopia uploads declaration documents",
+          done: done("DECLARED"),
+        },
+        {
+          label: "Duty & tax",
+          description: "Amount advised and notice attached",
+          // A shipment with no duty due skips this rather than stalling on it.
+          done: !dutyRequired || done("DUTY_TAXES_ADVISED"),
+        },
+        {
+          label: "Customer payment",
+          description: "Customer uploads the duty payment slip",
+          done: !dutyRequired || done("DUTY_TAX_PAID"),
+        },
+        {
+          label: "Transit Permit",
+          description: "Transit permit documents uploaded",
+          done: done("TRANSIT_PERMIT_UPLOADED"),
+        },
+        {
+          label: "Finalize pre-clearance",
+          description: "GL Ethiopia hands off to GL Djibouti",
+          done: Boolean(clearance?.preClearanceFinalized),
+        },
+        {
+          label: "Delivery Order",
+          description: "You upload the DO with its collection dates",
+          done: done("DO_COLLECTED"),
+        },
+        {
+          label: "Create booking",
+          description: "GL Ethiopia books for the customer",
+          done: Boolean(clearance?.t1) || bookingDone("FREIGHT_PAYMENT_SETTLED"),
+        },
+        {
+          label: "Freight payment",
+          description: "Customer pays the train and service charges",
+          done: bookingDone("FREIGHT_PAYMENT_SETTLED"),
+        },
+        {
+          label: "Gate pass",
+          description: "Secured after payment and wagon allocation",
+          done: Boolean(clearance?.gatepassGranted),
+        },
+      ]
+    : [
+        {
+          label: "Customer documents",
+          description: "Reviewed and approved by GL Ethiopia",
+          done: done("DOCUMENTS_APPROVED"),
+        },
+        {
+          label: "Request transit assignee",
+          description: clearance?.transitAssignee?.name
+            ? `Transit assignee: ${clearance.transitAssignee.name}`
+            : "GL Djibouti names the officer handling this shipment",
+          done: Boolean(clearance?.transitAssignee?.name),
+        },
+        {
+          label: "Customs declaration",
+          description: "GL Ethiopia uploads — releases the export",
+          done: done("DECLARED"),
+        },
+        {
+          label: "Release Order",
+          description: "You upload the RO with the vessel departure date",
+          done: done("RELEASE_ORDER_SECURED") || hasRo,
+        },
+        {
+          label: "Create booking",
+          description: "GL Ethiopia books for the customer",
+          done: bookingDone("FREIGHT_PAYMENT_SETTLED") || Boolean(clearance?.t1),
+        },
+        {
+          label: "Payment & wagon allocation",
+          description: "Customer pays; operations allocates wagons",
+          done:
+            bookingDone("FREIGHT_PAYMENT_SETTLED") &&
+            (bookingDone("WAGON_ALLOCATED") ||
+              Boolean(clearance?.train?.wagonAllocated)),
+        },
+        {
+          label: "Transport document",
+          description: "GL Ethiopia uploads after wagon allocation",
+          done: bookingDone("EXPORT_TRANSPORT_ISSUED"),
+        },
+        {
+          label: "Train to Djibouti",
+          description: "Departure and arrival",
+          done: Boolean(clearance?.train?.arrivedAt),
+        },
+        {
+          label: "Accept T1",
+          description: "You close the T1 once the train arrives",
+          done: Boolean(clearance?.t1Closed),
+        },
+        {
+          label: "Gate pass",
+          description: "Secured on the train schedule after arrival",
+          done: Boolean(clearance?.gatepassGranted),
+        },
+        {
+          label: "Offload",
+          description: "Cargo comes off the train",
+          done: Boolean(clearance?.offloaded ?? clearance?.offload?.offloaded),
+        },
+      ];
+
+  // The wizard sits on the FIRST step not yet done — matching the GL desk's
+  // "Step N of M", which counts the step being worked on, not the ones behind it.
+  const firstPending = steps.findIndex((s) => !s.done);
+  const activeStep = firstPending === -1 ? steps.length : firstPending;
+  const percent = Math.round((activeStep / steps.length) * 100);
+  const currentStep = steps[activeStep] ?? null;
+
+  return (
+    <>
+      <Card withBorder radius="md" p={0} style={{ overflow: "hidden" }}>
+        {/* Header: title, "Step N of M", and the progress bar — the GL desk's
+            own wizard chrome. */}
+        <Group
+          justify="space-between"
+          wrap="nowrap"
+          px={18}
+          py={12}
+          style={{ borderBottom: "1px solid var(--mantine-color-edr-divider-6)" }}
+        >
+          <Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
+            <ThemeIcon variant="light" color="edr-green" radius="md" size={32}>
+              <Ship size={16} />
+            </ThemeIcon>
+            <Box style={{ minWidth: 0 }}>
+              <Text fw={700} fz={14} c="edr-text">
+                {isImport
+                  ? "Import pre-booking clearance"
+                  : "Export customs clearance"}
+              </Text>
+              <Text fz={11.5} c="dimmed">
+                Step {Math.min(activeStep + 1, steps.length)} of {steps.length}
+                {currentStep ? ` · ${currentStep.label}` : ""}
+              </Text>
+            </Box>
+          </Group>
+          <Group gap={8} wrap="nowrap" style={{ flexShrink: 0 }}>
+            <Progress
+              value={percent}
+              color="edr-green"
+              radius="xl"
+              size={6}
+              w={110}
+            />
+            <Text fz={11.5} c="#67788A" fw={600}>
+              {percent}%
+            </Text>
+          </Group>
+        </Group>
+
+        {/* Whose desk the flow is sitting on right now. */}
+        {clearance?.nextAction ? (
+          <Group
+            gap={10}
+            wrap="nowrap"
+            px={18}
+            py={12}
+            style={{
+              background: "#E9F1FC",
+              borderBottom: "1px solid #EFF3F7",
+            }}
+          >
+            <ArrowRight size={15} color="#1D6FD1" style={{ flexShrink: 0 }} />
+            <Text
+              fz={10.5}
+              fw={700}
+              lts="0.4px"
+              c="#1D6FD1"
+              style={{ flexShrink: 0 }}
+            >
+              {clearance.nextAction.actor.replace("_", " ").toUpperCase()}
+            </Text>
+            <Text fz={11.5} fw={600} c="edr-text" style={{ minWidth: 0 }}>
+              {clearance.nextAction.action}
+            </Text>
+          </Group>
+        ) : null}
+
+        <Box p="md">
+          {roHoldReason ? (
+            <Alert
+              color="red"
+              variant="light"
+              mb="sm"
+              icon={<AlertTriangle size={16} />}
+              title="RO amendment hold"
+            >
+              {roHoldReason}
+            </Alert>
+          ) : null}
+
+          <Stepper
+            active={activeStep}
+            orientation="vertical"
+            size="sm"
+            iconSize={26}
+            allowNextStepsSelect={false}
+            mb="md"
+          >
+            {steps.map((s) => (
+              <Stepper.Step
+                key={s.label}
+                label={s.label}
+                description={s.description}
+                icon={s.done ? <CheckCircle2 size={14} /> : undefined}
+              />
+            ))}
+          </Stepper>
+
+          {/* Every upload (DO, RO, T1, gate pass, Djibouti T1) lives in the
+              transit documents panel above the grid, where its timings are
+              shown; only the RO amendment request stays here. */}
+          <Stack gap={8}>
+          {!isImport ? (
+            <Button
+              variant="subtle"
+              color="red"
+              radius="md"
+              leftSection={<AlertTriangle size={15} />}
+              onClick={() => setAmendOpen(true)}
+            >
+              Request RO amendment
+            </Button>
+          ) : null}
+          </Stack>
+        </Box>
+      </Card>
+
+      <RoAmendmentModal
+        opened={amendOpen}
+        bookingId={bookingId}
+        onClose={() => setAmendOpen(false)}
+        onSuccess={refresh}
+      />
+    </>
+  );
+}
+
+function RoAmendmentModal({
+  opened,
+  bookingId,
+  onClose,
+  onSuccess,
+}: {
+  opened: boolean;
+  bookingId: string;
+  onClose: () => void;
+  onSuccess: () => void;
+}) {
+  const [note, setNote] = useState("");
+
+  const submit = useMutation({
+    mutationFn: () =>
+      transitAssignmentsService.requestRoAmendment(bookingId, note.trim()),
+    onSuccess: () => {
+      toast.success("RO amendment requested");
+      setNote("");
+      onSuccess();
+      onClose();
+    },
+    onError: (e: unknown) =>
+      toast.error(e instanceof Error ? e.message : "Request failed"),
+  });
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      radius="md"
+      size="md"
+      title={
+        <Group gap={8}>
+          <AlertTriangle size={18} />
+          <Text fw={700}>Request RO amendment</Text>
+        </Group>
+      }
+    >
+      <Stack gap="md">
+        <Alert color="orange" variant="light" icon={<AlertTriangle size={16} />}>
+          This puts the shipment on hold until GL Ethiopia amends the Release
+          Order.
+        </Alert>
+        <Textarea
+          label="What needs to change?"
+          placeholder="Describe the correction needed on the Release Order"
+          minRows={3}
+          autosize
+          value={note}
+          onChange={(e) => setNote(e.currentTarget.value)}
+          required
+          withAsterisk
+        />
+        <Group justify="flex-end" gap="sm">
+          <Button variant="default" onClick={onClose} disabled={submit.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="red"
+            loading={submit.isPending}
+            disabled={note.trim().length === 0}
+            leftSection={<X size={16} />}
+            onClick={() => submit.mutate()}
+          >
+            Request amendment
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/transit-agent/TransitDocumentsPanel.tsx b/apps/edr-freight-web/portal/src/pages/transit-agent/TransitDocumentsPanel.tsx
new file mode 100644
index 000000000..d8cc23f49
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/transit-agent/TransitDocumentsPanel.tsx
@@ -0,0 +1,1736 @@
+import {
+  ActionIcon,
+  Alert,
+  Badge,
+  Box,
+  Button,
+  Card,
+  Group,
+  Modal,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
+import { DateInput } from "@mantine/dates";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  AlertTriangle,
+  ArrowRight,
+  CheckCircle2,
+  Clock3,
+  Download,
+  Eye,
+  FileCheck2,
+  FileStack,
+  FileText,
+  Lock,
+  MapPin,
+  PackageCheck,
+  Ship,
+  ShieldCheck,
+  Timer,
+  Train,
+  Trash2,
+  Upload,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import type { Freight } from "@edr/types";
+import {
+  isDeliveryOrderFileCode,
+  isDjiboutiT1FileCode,
+  isGatePassFileCode,
+  isReleaseOrderFileCode,
+  isT1TransportFileCode,
+} from "@edr/types";
+import { isViewable } from "@edr/ui-common";
+
+import {
+  PortalMultiFileDropzone,
+  formatBytes,
+} from "@/components/contracts/PortalMultiFileDropzone";
+import { BORDER, GREEN, INK, MUTED } from "@/pages/contracts/contract-ui";
+import {
+  downloadStoredFile,
+  fetchViewableFile,
+} from "@/services/files.service";
+import { transitAssignmentsService } from "@/services/transit-assignments.service";
+
+// ── Time helpers ─────────────────────────────────────────────────────────────
+
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+/** "Sep 2, 2026, 14:05" — the officer reads these against a clock, not a calendar. */
+function formatStamp(value?: string | null): string {
+  if (!value) return "—";
+  return new Date(value).toLocaleString(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+}
+
+/** Signed duration in ms → "2d 4h 13m", "45m", "<1m". */
+function formatDuration(ms: number): string {
+  const abs = Math.abs(ms);
+  if (abs < MINUTE) return "<1m";
+  const days = Math.floor(abs / DAY);
+  const hours = Math.floor((abs % DAY) / HOUR);
+  const minutes = Math.floor((abs % HOUR) / MINUTE);
+  const parts: string[] = [];
+  if (days) parts.push(`${days}d`);
+  if (hours) parts.push(`${hours}h`);
+  if (minutes || parts.length === 0) parts.push(`${minutes}m`);
+  return parts.join(" ");
+}
+
+/** Elapsed between two stamps; null when either is missing. */
+function elapsed(from?: string | null, to?: string | null): string | null {
+  if (!from || !to) return null;
+  return formatDuration(new Date(to).getTime() - new Date(from).getTime());
+}
+
+/**
+ * How far an upload sits from a train event. "after" is the normal case; a
+ * document filed BEFORE the event (paperwork prepared in advance) is labeled
+ * so, never shown as a negative number.
+ */
+function offsetFrom(
+  base: string | null | undefined,
+  at: string | null | undefined,
+  event: string,
+): { text: string; late: boolean } | null {
+  if (!base || !at) return null;
+  const diff = new Date(at).getTime() - new Date(base).getTime();
+  return diff >= 0
+    ? { text: `${formatDuration(diff)} after ${event}`, late: false }
+    : { text: `${formatDuration(diff)} before ${event}`, late: true };
+}
+
+const latestOf = (stamps: Array<string | null | undefined>): string | null =>
+  stamps.reduce<string | null>(
+    (max, s) => (s && (!max || s > max) ? s : max),
+    null,
+  );
+
+const earliestOf = (stamps: Array<string | null | undefined>): string | null =>
+  stamps.reduce<string | null>(
+    (min, s) => (s && (!min || s < min) ? s : min),
+    null,
+  );
+
+/** Newest history event for an action, or null. History is newest-first. */
+function latestEvent(
+  history: Freight.ClearanceHistoryEvent[],
+  action: string,
+): Freight.ClearanceHistoryEvent | null {
+  return history.find((e) => e.action === action) ?? null;
+}
+
+// ── Small presentational pieces ──────────────────────────────────────────────
+
+/** One figure in a stat strip: label, big value, optional footnote. */
+function Stat({
+  icon: Icon,
+  label,
+  value,
+  hint,
+  tone = "default",
+}: {
+  icon: typeof Clock3;
+  label: string;
+  value: React.ReactNode;
+  hint?: React.ReactNode;
+  tone?: "default" | "green" | "blue" | "orange" | "muted";
+}) {
+  const color =
+    tone === "green"
+      ? "edr-green"
+      : tone === "blue"
+        ? "blue"
+        : tone === "orange"
+          ? "orange"
+          : "gray";
+  return (
+    <Paper
+      radius="md"
+      p="sm"
+      style={{
+        border: `1px solid ${BORDER}`,
+        background: tone === "muted" ? "#FAFCFE" : "#fff",
+        minWidth: 0,
+      }}
+    >
+      <Group gap={8} wrap="nowrap" mb={6}>
+        <ThemeIcon variant="light" color={color} radius="md" size={26}>
+          <Icon size={14} />
+        </ThemeIcon>
+        <Text fz={11} fw={700} c="dimmed" tt="uppercase" lts="0.3px" truncate>
+          {label}
+        </Text>
+      </Group>
+      <Text fz={15} fw={700} style={{ color: INK }} truncate>
+        {value}
+      </Text>
+      {hint ? (
+        <Text fz={11.5} c="dimmed" mt={2} truncate>
+          {hint}
+        </Text>
+      ) : null}
+    </Paper>
+  );
+}
+
+function OffsetChip({
+  offset,
+  color,
+}: {
+  offset: { text: string; late: boolean } | null;
+  color: string;
+}) {
+  if (!offset) return null;
+  return (
+    <Badge
+      size="xs"
+      variant="light"
+      radius="sm"
+      tt="none"
+      color={offset.late ? "gray" : color}
+      leftSection={<Timer size={10} />}
+    >
+      {offset.text}
+    </Badge>
+  );
+}
+
+/** A stored document row: name, stamp, train offsets, view / download / remove. */
+function StoredDocumentRow({
+  item,
+  train,
+  onView,
+  onRemove,
+  removing,
+}: {
+  item: Freight.ClearanceWorkflowFile;
+  train?: Freight.ClearanceTrainState | null;
+  onView: (file: { name: string; url: string; mimeType?: string | null }) => void;
+  onRemove?: (file: { id: string; name: string }) => void;
+  removing?: boolean;
+}) {
+  const file = item.file;
+  if (!file) return null;
+  const canPreview = isViewable({ name: file.name, url: "" });
+  const uploadedAt = file.uploadedAt ?? null;
+
+  return (
+    <Paper radius="md" p="sm" style={{ border: `1px solid ${BORDER}` }}>
+      <Group justify="space-between" wrap="nowrap" align="flex-start" gap="sm">
+        <Group gap={10} wrap="nowrap" style={{ minWidth: 0, flex: 1 }}>
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={38}>
+            <FileText size={17} />
+          </ThemeIcon>
+          <Box style={{ minWidth: 0 }}>
+            <Group gap={6} wrap="nowrap">
+              <Text size="sm" fw={600} truncate style={{ color: INK }}>
+                {item.label}
+              </Text>
+              {file.size ? (
+                <Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
+                  · {formatBytes(file.size)}
+                </Text>
+              ) : null}
+            </Group>
+            <Text size="xs" c="dimmed" truncate>
+              {file.name}
+            </Text>
+            <Group gap={6} mt={6} wrap="wrap">
+              <Badge
+                size="xs"
+                variant="outline"
+                color="gray"
+                radius="sm"
+                tt="none"
+                leftSection={<Clock3 size={10} />}
+              >
+                {formatStamp(uploadedAt)}
+              </Badge>
+              {train ? (
+                <>
+                  <OffsetChip
+                    offset={offsetFrom(train.departedAt, uploadedAt, "departure")}
+                    color="blue"
+                  />
+                  <OffsetChip
+                    offset={offsetFrom(train.arrivedAt, uploadedAt, "arrival")}
+                    color="edr-green"
+                  />
+                </>
+              ) : null}
+            </Group>
+          </Box>
+        </Group>
+        <Group gap={4} wrap="nowrap" style={{ flexShrink: 0 }}>
+          {canPreview ? (
+            <Tooltip label="Preview" withArrow>
+              <ActionIcon
+                variant="default"
+                radius="md"
+                aria-label="Preview"
+                onClick={() =>
+                  void fetchViewableFile(file.id, file.name).then(onView)
+                }
+              >
+                <Eye size={15} />
+              </ActionIcon>
+            </Tooltip>
+          ) : null}
+          <Tooltip label="Download" withArrow>
+            <ActionIcon
+              variant="default"
+              radius="md"
+              aria-label="Download"
+              onClick={() => void downloadStoredFile(file.id, file.name)}
+            >
+              <Download size={15} />
+            </ActionIcon>
+          </Tooltip>
+          {onRemove ? (
+            <Tooltip label="Remove" withArrow>
+              <ActionIcon
+                variant="subtle"
+                color="red"
+                radius="md"
+                aria-label="Remove"
+                loading={removing}
+                onClick={() => onRemove({ id: file.id, name: file.name })}
+              >
+                <Trash2 size={15} />
+              </ActionIcon>
+            </Tooltip>
+          ) : null}
+        </Group>
+      </Group>
+    </Paper>
+  );
+}
+
+function EmptyDocs({ icon: Icon, children }: { icon: typeof FileText; children: React.ReactNode }) {
+  return (
+    <Box
+      py="lg"
+      px="md"
+      style={{
+        borderRadius: 12,
+        border: `1px dashed ${BORDER}`,
+        background: "#FAFCFE",
+        textAlign: "center",
+      }}
+    >
+      <Stack gap={6} align="center">
+        <ThemeIcon variant="light" color="gray" radius="xl" size={40}>
+          <Icon size={18} />
+        </ThemeIcon>
+        <Text size="sm" c="dimmed" maw={360}>
+          {children}
+        </Text>
+      </Stack>
+    </Box>
+  );
+}
+
+/** Card chrome shared by the three document sections. */
+function DocumentCard({
+  icon: Icon,
+  title,
+  subtitle,
+  status,
+  action,
+  children,
+}: {
+  icon: typeof FileText;
+  title: string;
+  subtitle: string;
+  status?: React.ReactNode;
+  action?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <Card withBorder radius="md" p={0} style={{ overflow: "hidden", height: "100%" }}>
+      <Group
+        justify="space-between"
+        wrap="nowrap"
+        align="flex-start"
+        px={18}
+        py={14}
+        gap="md"
+        style={{ borderBottom: `1px solid ${BORDER}` }}
+      >
+        <Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={36}>
+            <Icon size={18} />
+          </ThemeIcon>
+          <Box style={{ minWidth: 0 }}>
+            <Group gap={8} wrap="nowrap">
+              <Text fw={700} fz={14.5} style={{ color: INK }}>
+                {title}
+              </Text>
+              {status}
+            </Group>
+            <Text fz={11.5} c="dimmed">
+              {subtitle}
+            </Text>
+          </Box>
+        </Group>
+        {action ? <Box style={{ flexShrink: 0 }}>{action}</Box> : null}
+      </Group>
+      <Box p="md">{children}</Box>
+    </Card>
+  );
+}
+
+// ── Train timeline strip ─────────────────────────────────────────────────────
+
+function TrainStrip({ train }: { train?: Freight.ClearanceTrainState | null }) {
+  const departed = train?.departedAt ?? null;
+  const arrived = train?.arrivedAt ?? null;
+  const transit = elapsed(departed, arrived);
+  const sinceDeparture =
+    departed && !arrived ? formatDuration(Date.now() - new Date(departed).getTime()) : null;
+  const sinceArrival = arrived
+    ? formatDuration(Date.now() - new Date(arrived).getTime())
+    : null;
+
+  return (
+    <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
+      <Stat
+        icon={Train}
+        label="Train departed"
+        value={departed ? formatStamp(departed) : "Not departed"}
+        hint={
+          departed
+            ? "Loaded onto the train"
+            : train?.wagonAllocated
+              ? "Wagons allocated — awaiting departure"
+              : "Awaiting wagon allocation"
+        }
+        tone={departed ? "blue" : "muted"}
+      />
+      <Stat
+        icon={MapPin}
+        label="Arrived at Djibouti"
+        value={arrived ? formatStamp(arrived) : departed ? "In transit" : "—"}
+        hint={
+          arrived
+            ? `${sinceArrival} ago`
+            : sinceDeparture
+              ? `${sinceDeparture} since departure`
+              : "Arrival is recorded by operations"
+        }
+        tone={arrived ? "green" : "muted"}
+      />
+      <Stat
+        icon={Timer}
+        label="Transit time"
+        value={transit ?? (sinceDeparture ? `${sinceDeparture} so far` : "—")}
+        hint={transit ? "Departure → arrival" : "Measured once the train arrives"}
+        tone={transit ? "green" : "muted"}
+      />
+    </SimpleGrid>
+  );
+}
+
+// ── Release Order card ───────────────────────────────────────────────────────
+
+function ReleaseOrderCard({
+  bookingId,
+  clearance,
+  history,
+  onView,
+  onChanged,
+}: {
+  bookingId: string;
+  clearance: Freight.ClearanceView;
+  history: Freight.ClearanceHistoryEvent[];
+  onView: (file: { name: string; url: string; mimeType?: string | null }) => void;
+  onChanged: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const roFiles = (clearance.workflowFiles ?? []).filter(
+    (f) => isReleaseOrderFileCode(f.code) && f.file,
+  );
+  const hasRo = roFiles.length > 0;
+
+  // The customs declaration is the gate: the API refuses an RO before it.
+  const declaredMilestone = clearance.milestones?.find(
+    (m) => m.milestoneCode === "DECLARED",
+  );
+  const declared =
+    declaredMilestone?.status === "COMPLETED" ||
+    declaredMilestone?.status === "SKIPPED";
+  const declaredAt =
+    declaredMilestone?.triggeredAt ??
+    latestEvent(history, "DECLARATION_UPLOADED")?.at ??
+    null;
+
+  // "Uploaded" is the latest stamp on the current RO set — replacing the RO
+  // stores a fresh batch, so this is always the last update, as required.
+  const roEvents = history.filter((e) => e.action === "RELEASE_ORDER_UPLOADED");
+  const roAt =
+    latestOf(roFiles.map((f) => f.file?.uploadedAt)) ?? roEvents[0]?.at ?? null;
+  const roUpdated = roEvents.length > 1;
+  const declarationToRo = elapsed(declaredAt, roAt);
+  const secured =
+    clearance.milestones?.find((m) => m.milestoneCode === "RELEASE_ORDER_SECURED")
+      ?.status === "COMPLETED";
+  const hold = clearance.roHoldReason ?? null;
+
+  const status = hold ? (
+    <Badge size="xs" color="red" variant="light" radius="sm" tt="none">
+      On hold
+    </Badge>
+  ) : secured ? (
+    <Badge
+      size="xs"
+      color="edr-green"
+      variant="light"
+      radius="sm"
+      tt="none"
+      leftSection={<CheckCircle2 size={10} />}
+    >
+      Secured
+    </Badge>
+  ) : hasRo ? (
+    <Badge size="xs" color="orange" variant="light" radius="sm" tt="none">
+      Uploaded
+    </Badge>
+  ) : declared ? (
+    <Badge size="xs" color="blue" variant="light" radius="sm" tt="none">
+      Ready to upload
+    </Badge>
+  ) : (
+    <Badge
+      size="xs"
+      color="gray"
+      variant="light"
+      radius="sm"
+      tt="none"
+      leftSection={<Lock size={10} />}
+    >
+      Waiting for declaration
+    </Badge>
+  );
+
+  return (
+    <>
+      <DocumentCard
+        icon={Ship}
+        title="Release Order"
+        subtitle="Filed with the vessel departure date once GL Ethiopia uploads the customs declaration"
+        status={status}
+        action={
+          <Tooltip
+            label="The customs declaration has not been uploaded yet"
+            disabled={declared}
+            withArrow
+          >
+            <Button
+              color="edr-green"
+              radius="md"
+              size="sm"
+              leftSection={hasRo ? <FileCheck2 size={15} /> : <Upload size={15} />}
+              disabled={!declared}
+              onClick={() => setOpen(true)}
+            >
+              {hasRo ? "Replace Release Order" : "Upload Release Order"}
+            </Button>
+          </Tooltip>
+        }
+      >
+        <Stack gap="md">
+          {hold ? (
+            <Alert
+              color="red"
+              variant="light"
+              icon={<AlertTriangle size={16} />}
+              title="RO amendment hold"
+            >
+              {hold}
+            </Alert>
+          ) : null}
+
+          <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
+            <Stat
+              icon={FileText}
+              label="Declaration uploaded"
+              value={declaredAt ? formatStamp(declaredAt) : declared ? "Done" : "Pending"}
+              hint={declared ? "By GL Ethiopia — RO unlocked" : "Unlocks the Release Order"}
+              tone={declared ? "green" : "muted"}
+            />
+            <Stat
+              icon={Ship}
+              label={roUpdated ? "RO last updated" : "RO uploaded"}
+              value={roAt ? formatStamp(roAt) : "Not yet"}
+              hint={
+                roAt
+                  ? clearance.vesselDepartureDate
+                    ? `Vessel departs ${clearance.vesselDepartureDate}`
+                    : roUpdated
+                      ? `Replaced ${roEvents.length - 1}×`
+                      : "First upload"
+                  : "Upload to record the time"
+              }
+              tone={roAt ? "green" : "muted"}
+            />
+            <Stat
+              icon={Timer}
+              label="Declaration → RO"
+              value={declarationToRo ?? "—"}
+              hint={
+                declarationToRo
+                  ? roUpdated
+                    ? "Measured to the last update"
+                    : "Time to secure the RO"
+                  : "Measured once the RO is uploaded"
+              }
+              tone={declarationToRo ? "blue" : "muted"}
+            />
+          </SimpleGrid>
+
+          {hasRo ? (
+            <Stack gap={8}>
+              {roFiles.map((item) => (
+                <StoredDocumentRow key={item.code} item={item} onView={onView} />
+              ))}
+            </Stack>
+          ) : (
+            <EmptyDocs icon={Ship}>
+              {declared
+                ? "No Release Order on file yet. Upload the RO and confirm the vessel departure date."
+                : "The Release Order can be uploaded as soon as the customs declaration is on file."}
+            </EmptyDocs>
+          )}
+        </Stack>
+      </DocumentCard>
+
+      <ReleaseOrderModal
+        opened={open}
+        bookingId={bookingId}
+        replaceMode={hasRo}
+        vesselDepartureDate={clearance.vesselDepartureDate ?? null}
+        onClose={() => setOpen(false)}
+        onSuccess={onChanged}
+      />
+    </>
+  );
+}
+
+/** `YYYY-MM-DD` in local time — the API column is a DATE, so no UTC shift. */
+function toIsoDate(value: Date | null): string | null {
+  if (!value) return null;
+  const tz = value.getTimezoneOffset() * 60000;
+  return new Date(value.getTime() - tz).toISOString().slice(0, 10);
+}
+
+function ReleaseOrderModal({
+  opened,
+  bookingId,
+  replaceMode,
+  vesselDepartureDate,
+  onClose,
+  onSuccess,
+}: {
+  opened: boolean;
+  bookingId: string;
+  replaceMode: boolean;
+  vesselDepartureDate: string | null;
+  onClose: () => void;
+  onSuccess: () => void;
+}) {
+  const [files, setFiles] = useState<File[]>([]);
+  const [vesselDate, setVesselDate] = useState<Date | null>(
+    vesselDepartureDate ? new Date(vesselDepartureDate) : null,
+  );
+  const today = useMemo(() => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }, []);
+
+  const close = () => {
+    setFiles([]);
+    onClose();
+  };
+
+  const submit = useMutation({
+    mutationFn: () =>
+      transitAssignmentsService.uploadReleaseOrder(
+        bookingId,
+        files,
+        toIsoDate(vesselDate)!,
+      ),
+    onSuccess: (result) => {
+      // The API answers with a hold instead of an error when the vessel date is
+      // too soon — say so rather than reporting a clean success.
+      if (result?.hold) {
+        toast.error(result.holdReason ?? "Vessel date too soon");
+      } else {
+        toast.success(replaceMode ? "Release Order updated" : "Release Order uploaded");
+      }
+      onSuccess();
+      close();
+    },
+    onError: (e: unknown) =>
+      toast.error(e instanceof Error ? e.message : "Upload failed"),
+  });
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={close}
+      radius="md"
+      size="lg"
+      title={
+        <Group gap={8}>
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={30}>
+            <Ship size={16} />
+          </ThemeIcon>
+          <Text fw={700}>
+            {replaceMode ? "Replace Release Order" : "Upload Release Order"}
+          </Text>
+        </Group>
+      }
+    >
+      <Stack gap="md">
+        <Text size="sm" c="dimmed">
+          Upload the Release Order and confirm the vessel departure date. The
+          upload time is recorded and measured against the customs declaration.
+          {replaceMode
+            ? " Replacing removes the current RO files and records a new time."
+            : ""}
+        </Text>
+
+        <DateInput
+          label="Vessel departure date"
+          placeholder="Select date"
+          value={vesselDate}
+          onChange={(v) => setVesselDate(v ? new Date(v) : null)}
+          minDate={today}
+          size="sm"
+          radius="md"
+          required
+          withAsterisk
+        />
+
+        <PortalMultiFileDropzone
+          label="Release Order files"
+          description="Scanned RO pages or the port's PDF. Every file in this batch replaces what is on file."
+          files={files}
+          onChange={setFiles}
+        />
+
+        <Group justify="flex-end" gap="sm">
+          <Button variant="default" radius="md" onClick={close} disabled={submit.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="edr-green"
+            radius="md"
+            loading={submit.isPending}
+            disabled={files.length === 0 || !vesselDate}
+            leftSection={<Upload size={16} />}
+            onClick={() => submit.mutate()}
+          >
+            {replaceMode ? "Replace RO" : "Upload RO"}
+            {files.length > 1 ? ` (${files.length} files)` : ""}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+// ── Gate pass / Djibouti T1 cards ────────────────────────────────────────────
+
+type ArrivalKind = "gate_pass" | "djibouti_t1";
+
+const ARRIVAL_SETS: Record<
+  ArrivalKind,
+  {
+    title: string;
+    subtitle: string;
+    icon: typeof FileText;
+    matches: (code: string) => boolean;
+    upload: (bookingId: string, files: File[]) => Promise<{ uploaded: number }>;
+    empty: string;
+    modalHint: string;
+  }
+> = {
+  gate_pass: {
+    title: "Gate pass",
+    subtitle: "Port gate pass documents collected at Djibouti",
+    icon: ShieldCheck,
+    matches: isGatePassFileCode,
+    upload: transitAssignmentsService.uploadGatePassDocuments,
+    empty:
+      "No gate pass documents yet. Add each pass as you collect it — every upload is time-stamped.",
+    modalHint: "Gate pass scans or photos. You can add more later.",
+  },
+  djibouti_t1: {
+    title: "Djibouti T1",
+    subtitle: "T1 transit documents issued at Djibouti customs",
+    icon: FileStack,
+    matches: isDjiboutiT1FileCode,
+    upload: transitAssignmentsService.uploadDjiboutiT1Documents,
+    empty:
+      "No Djibouti T1 documents yet. Add each T1 as customs issues it — every upload is time-stamped.",
+    modalHint: "T1 scans or photos. You can add more later.",
+  },
+};
+
+function ArrivalDocumentsCard({
+  kind,
+  bookingId,
+  clearance,
+  onView,
+  onChanged,
+}: {
+  kind: ArrivalKind;
+  bookingId: string;
+  clearance: Freight.ClearanceView;
+  onView: (file: { name: string; url: string; mimeType?: string | null }) => void;
+  onChanged: () => void;
+}) {
+  const set = ARRIVAL_SETS[kind];
+  const [open, setOpen] = useState(false);
+  const [removingId, setRemovingId] = useState<string | null>(null);
+
+  const items = (clearance.workflowFiles ?? []).filter(
+    (f) => set.matches(f.code) && f.file,
+  );
+  const train = clearance.train ?? null;
+  const stamps = items.map((i) => i.file?.uploadedAt);
+  const firstAt = earliestOf(stamps);
+  const lastAt = latestOf(stamps);
+  const arrivalToFirst = elapsed(train?.arrivedAt, firstAt);
+  const departureToFirst = elapsed(train?.departedAt, firstAt);
+
+  const remove = useMutation({
+    mutationFn: (file: { id: string; name: string }) => {
+      setRemovingId(file.id);
+      return transitAssignmentsService.removeTransitDocument(bookingId, file.id);
+    },
+    onSuccess: (_r, file) => {
+      toast.success(`Removed ${file.name}`);
+      onChanged();
+    },
+    onError: (e: unknown) =>
+      toast.error(e instanceof Error ? e.message : "Could not remove the document"),
+    onSettled: () => setRemovingId(null),
+  });
+
+  return (
+    <>
+      <DocumentCard
+        icon={set.icon}
+        title={set.title}
+        subtitle={set.subtitle}
+        status={
+          items.length > 0 ? (
+            <Badge size="xs" color="edr-green" variant="light" radius="sm" tt="none">
+              {items.length} on file
+            </Badge>
+          ) : (
+            <Badge size="xs" color="gray" variant="light" radius="sm" tt="none">
+              None yet
+            </Badge>
+          )
+        }
+        action={
+          <Button
+            color="edr-green"
+            radius="md"
+            size="sm"
+            variant={items.length > 0 ? "light" : "filled"}
+            leftSection={<Upload size={15} />}
+            onClick={() => setOpen(true)}
+          >
+            {items.length > 0 ? "Add documents" : "Upload documents"}
+          </Button>
+        }
+      >
+        <Stack gap="md">
+          <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
+            <Stat
+              icon={Clock3}
+              label="First uploaded"
+              value={firstAt ? formatStamp(firstAt) : "—"}
+              hint={
+                arrivalToFirst
+                  ? `${arrivalToFirst} after arrival`
+                  : departureToFirst
+                    ? `${departureToFirst} after departure`
+                    : "Measured against the train"
+              }
+              tone={firstAt ? "green" : "muted"}
+            />
+            <Stat
+              icon={Clock3}
+              label="Latest uploaded"
+              value={lastAt ? formatStamp(lastAt) : "—"}
+              hint={
+                lastAt && lastAt !== firstAt
+                  ? `${elapsed(firstAt, lastAt)} after the first`
+                  : lastAt
+                    ? "Single upload so far"
+                    : "No uploads yet"
+              }
+              tone={lastAt ? "green" : "muted"}
+            />
+            <Stat
+              icon={Train}
+              label={train?.arrivedAt ? "Since arrival" : "Since departure"}
+              value={
+                train?.arrivedAt
+                  ? formatDuration(Date.now() - new Date(train.arrivedAt).getTime())
+                  : train?.departedAt
+                    ? formatDuration(Date.now() - new Date(train.departedAt).getTime())
+                    : "—"
+              }
+              hint={
+                train?.arrivedAt
+                  ? `Arrived ${formatStamp(train.arrivedAt)}`
+                  : train?.departedAt
+                    ? `Departed ${formatStamp(train.departedAt)}`
+                    : "Train not departed yet"
+              }
+              tone={train?.arrivedAt ? "blue" : "muted"}
+            />
+          </SimpleGrid>
+
+          {items.length > 0 ? (
+            <Stack gap={8}>
+              {items.map((item) => (
+                <StoredDocumentRow
+                  key={item.code}
+                  item={item}
+                  train={train}
+                  onView={onView}
+                  onRemove={(f) => remove.mutate(f)}
+                  removing={removingId === item.file?.id}
+                />
+              ))}
+            </Stack>
+          ) : (
+            <EmptyDocs icon={set.icon}>{set.empty}</EmptyDocs>
+          )}
+        </Stack>
+      </DocumentCard>
+
+      <ArrivalUploadModal
+        kind={kind}
+        opened={open}
+        bookingId={bookingId}
+        existing={items.length}
+        onClose={() => setOpen(false)}
+        onSuccess={onChanged}
+      />
+    </>
+  );
+}
+
+function ArrivalUploadModal({
+  kind,
+  opened,
+  bookingId,
+  existing,
+  onClose,
+  onSuccess,
+}: {
+  kind: ArrivalKind;
+  opened: boolean;
+  bookingId: string;
+  existing: number;
+  onClose: () => void;
+  onSuccess: () => void;
+}) {
+  const set = ARRIVAL_SETS[kind];
+  const [files, setFiles] = useState<File[]>([]);
+  const Icon = set.icon;
+
+  const close = () => {
+    setFiles([]);
+    onClose();
+  };
+
+  const submit = useMutation({
+    mutationFn: () => set.upload(bookingId, files),
+    onSuccess: (r) => {
+      toast.success(
+        `${r.uploaded} ${set.title} document${r.uploaded === 1 ? "" : "s"} uploaded`,
+      );
+      onSuccess();
+      close();
+    },
+    onError: (e: unknown) =>
+      toast.error(e instanceof Error ? e.message : "Upload failed"),
+  });
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={close}
+      radius="md"
+      size="lg"
+      title={
+        <Group gap={8}>
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={30}>
+            <Icon size={16} />
+          </ThemeIcon>
+          <Text fw={700}>
+            {existing > 0 ? `Add ${set.title} documents` : `Upload ${set.title} documents`}
+          </Text>
+        </Group>
+      }
+    >
+      <Stack gap="md">
+        <Text size="sm" c="dimmed">
+          {existing > 0
+            ? `${existing} already on file — these are added alongside them. `
+            : ""}
+          Each file is stamped with its upload time and measured against the
+          train's departure and arrival.
+        </Text>
+
+        <PortalMultiFileDropzone
+          label={`${set.title} files`}
+          description={set.modalHint}
+          files={files}
+          onChange={setFiles}
+        />
+
+        <Group justify="flex-end" gap="sm">
+          <Button variant="default" radius="md" onClick={close} disabled={submit.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="edr-green"
+            radius="md"
+            loading={submit.isPending}
+            disabled={files.length === 0}
+            leftSection={<Upload size={16} />}
+            onClick={() => submit.mutate()}
+          >
+            Upload{files.length > 0 ? ` ${files.length} file${files.length === 1 ? "" : "s"}` : ""}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+// ── Delivery Order card (import) ─────────────────────────────────────────────
+
+function DeliveryOrderCard({
+  bookingId,
+  clearance,
+  history,
+  onView,
+  onChanged,
+}: {
+  bookingId: string;
+  clearance: Freight.ClearanceView;
+  history: Freight.ClearanceHistoryEvent[];
+  onView: (file: { name: string; url: string; mimeType?: string | null }) => void;
+  onChanged: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const doFiles = (clearance.workflowFiles ?? []).filter(
+    (f) => isDeliveryOrderFileCode(f.code) && f.file,
+  );
+  const hasDo = doFiles.length > 0;
+
+  // The DO clock starts when the booking is created. "Uploaded" is the latest
+  // stamp on the current DO set — replacing stores a fresh batch, so it is
+  // always the last update.
+  const createdAt = clearance.bookingCreatedAt ?? null;
+  const doEvents = history.filter((e) => e.action === "DELIVERY_ORDER_UPLOADED");
+  const doAt =
+    latestOf(doFiles.map((f) => f.file?.uploadedAt)) ?? doEvents[0]?.at ?? null;
+  const doUpdated = doEvents.length > 1;
+  const bookingToDo = elapsed(createdAt, doAt);
+  const collected =
+    clearance.milestones?.find((m) => m.milestoneCode === "DO_COLLECTED")
+      ?.status === "COMPLETED";
+
+  const status = collected ? (
+    <Badge
+      size="xs"
+      color="edr-green"
+      variant="light"
+      radius="sm"
+      tt="none"
+      leftSection={<CheckCircle2 size={10} />}
+    >
+      Collected
+    </Badge>
+  ) : hasDo ? (
+    <Badge size="xs" color="orange" variant="light" radius="sm" tt="none">
+      Uploaded
+    </Badge>
+  ) : (
+    <Badge size="xs" color="blue" variant="light" radius="sm" tt="none">
+      Ready to upload
+    </Badge>
+  );
+
+  return (
+    <>
+      <DocumentCard
+        icon={PackageCheck}
+        title="Delivery Order"
+        subtitle="Collected at the Djibouti port, filed with the vessel arrival and collection dates"
+        status={status}
+        action={
+          <Button
+            color="edr-green"
+            radius="md"
+            size="sm"
+            leftSection={hasDo ? <FileCheck2 size={15} /> : <Upload size={15} />}
+            onClick={() => setOpen(true)}
+          >
+            {hasDo ? "Replace Delivery Order" : "Upload Delivery Order"}
+          </Button>
+        }
+      >
+        <Stack gap="md">
+          <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
+            <Stat
+              icon={Clock3}
+              label="Booking created"
+              value={createdAt ? formatStamp(createdAt) : "—"}
+              hint="The DO clock starts here"
+              tone={createdAt ? "blue" : "muted"}
+            />
+            <Stat
+              icon={PackageCheck}
+              label={doUpdated ? "DO last updated" : "DO uploaded"}
+              value={doAt ? formatStamp(doAt) : "Not yet"}
+              hint={
+                doAt
+                  ? clearance.doCollectedDate
+                    ? `Collected ${clearance.doCollectedDate} · vessel ${clearance.vesselArrivalDate ?? "—"}`
+                    : doUpdated
+                      ? `Replaced ${doEvents.length - 1}×`
+                      : "First upload"
+                  : "Upload to record the time"
+              }
+              tone={doAt ? "green" : "muted"}
+            />
+            <Stat
+              icon={Timer}
+              label="Booking → DO"
+              value={bookingToDo ?? "—"}
+              hint={
+                bookingToDo
+                  ? doUpdated
+                    ? "Measured to the last update"
+                    : "Time to collect the DO"
+                  : "Measured once the DO is uploaded"
+              }
+              tone={bookingToDo ? "blue" : "muted"}
+            />
+          </SimpleGrid>
+
+          {hasDo ? (
+            <Stack gap={8}>
+              {doFiles.map((item) => (
+                <StoredDocumentRow key={item.code} item={item} onView={onView} />
+              ))}
+            </Stack>
+          ) : (
+            <EmptyDocs icon={PackageCheck}>
+              No Delivery Order on file yet. Upload the DO and record when the
+              vessel arrived and when the DO was collected.
+            </EmptyDocs>
+          )}
+        </Stack>
+      </DocumentCard>
+
+      <DeliveryOrderModal
+        opened={open}
+        bookingId={bookingId}
+        replaceMode={hasDo}
+        vesselArrivalDate={clearance.vesselArrivalDate ?? null}
+        doCollectedDate={clearance.doCollectedDate ?? null}
+        onClose={() => setOpen(false)}
+        onSuccess={onChanged}
+      />
+    </>
+  );
+}
+
+function DeliveryOrderModal({
+  opened,
+  bookingId,
+  replaceMode,
+  vesselArrivalDate,
+  doCollectedDate,
+  onClose,
+  onSuccess,
+}: {
+  opened: boolean;
+  bookingId: string;
+  replaceMode: boolean;
+  vesselArrivalDate: string | null;
+  doCollectedDate: string | null;
+  onClose: () => void;
+  onSuccess: () => void;
+}) {
+  const [files, setFiles] = useState<File[]>([]);
+  const [vesselArrival, setVesselArrival] = useState<Date | null>(
+    vesselArrivalDate ? new Date(vesselArrivalDate) : null,
+  );
+  const [collected, setCollected] = useState<Date | null>(
+    doCollectedDate ? new Date(doCollectedDate) : null,
+  );
+
+  // The DO cannot be collected before the vessel docked.
+  const outOfOrder =
+    Boolean(vesselArrival && collected) &&
+    (toIsoDate(collected) ?? "") < (toIsoDate(vesselArrival) ?? "");
+  const datesComplete = Boolean(vesselArrival && collected) && !outOfOrder;
+
+  const close = () => {
+    setFiles([]);
+    onClose();
+  };
+
+  const submit = useMutation({
+    mutationFn: () =>
+      transitAssignmentsService.uploadDeliveryOrder(bookingId, files, {
+        vesselArrivalDate: toIsoDate(vesselArrival)!,
+        doCollectedDate: toIsoDate(collected)!,
+      }),
+    onSuccess: () => {
+      toast.success(replaceMode ? "Delivery Order updated" : "Delivery Order uploaded");
+      onSuccess();
+      close();
+    },
+    onError: (e: unknown) =>
+      toast.error(e instanceof Error ? e.message : "Upload failed"),
+  });
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={close}
+      radius="md"
+      size="lg"
+      title={
+        <Group gap={8}>
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={30}>
+            <PackageCheck size={16} />
+          </ThemeIcon>
+          <Text fw={700}>
+            {replaceMode ? "Replace Delivery Order" : "Upload Delivery Order"}
+          </Text>
+        </Group>
+      }
+    >
+      <Stack gap="md">
+        <Text size="sm" c="dimmed">
+          Upload the Djibouti Delivery Order and record when the vessel arrived
+          and when the DO was collected. The upload time is recorded and
+          measured from the booking's creation.
+          {replaceMode
+            ? " Replacing removes the current DO files and records a new time."
+            : ""}
+        </Text>
+
+        <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="sm">
+          <DateInput
+            label="Vessel arrival date"
+            placeholder="Select date"
+            value={vesselArrival}
+            onChange={(v) => setVesselArrival(v ? new Date(v) : null)}
+            size="sm"
+            radius="md"
+            required
+            withAsterisk
+          />
+          <DateInput
+            label="DO collected date"
+            placeholder="Select date"
+            value={collected}
+            onChange={(v) => setCollected(v ? new Date(v) : null)}
+            minDate={vesselArrival ?? undefined}
+            size="sm"
+            radius="md"
+            required
+            withAsterisk
+            error={outOfOrder ? "Cannot be before the vessel arrival date." : undefined}
+          />
+        </SimpleGrid>
+
+        <PortalMultiFileDropzone
+          label="Delivery Order files"
+          description="Scanned DO pages or the port's PDF. Every file in this batch replaces what is on file."
+          files={files}
+          onChange={setFiles}
+          accept="*/*"
+          acceptHint="any file type"
+        />
+
+        <Group justify="flex-end" gap="sm">
+          <Button variant="default" radius="md" onClick={close} disabled={submit.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="edr-green"
+            radius="md"
+            loading={submit.isPending}
+            disabled={files.length === 0 || !datesComplete}
+            leftSection={<Upload size={16} />}
+            onClick={() => submit.mutate()}
+          >
+            {replaceMode ? "Replace DO" : "Upload DO"}
+            {files.length > 1 ? ` (${files.length} files)` : ""}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+// ── T1 transport documents card (import) ────────────────────────────────────
+
+function ImportT1Card({
+  bookingId,
+  clearance,
+  history,
+  onView,
+  onChanged,
+}: {
+  bookingId: string;
+  clearance: Freight.ClearanceView;
+  history: Freight.ClearanceHistoryEvent[];
+  onView: (file: { name: string; url: string; mimeType?: string | null }) => void;
+  onChanged: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const t1Files = (clearance.workflowFiles ?? []).filter(
+    (f) => isT1TransportFileCode(f.code) && f.file,
+  );
+  const hasT1 = t1Files.length > 0;
+  const train = clearance.train ?? null;
+  const departed = Boolean(train?.departedAt);
+  const closed = Boolean(clearance.t1Closed);
+
+  // Replacing stores a fresh batch, so the latest stamp is the last update.
+  const t1Events = history.filter((e) => e.action === "T1_DOCUMENTS_UPLOADED");
+  const t1At = latestOf(t1Files.map((f) => f.file?.uploadedAt)) ?? null;
+  const t1Updated = t1Events.length > 1;
+  const departureToT1 = elapsed(train?.departedAt, t1At);
+  const arrivalToT1 = elapsed(train?.arrivedAt, t1At);
+
+  const status = closed ? (
+    <Badge
+      size="xs"
+      color="edr-green"
+      variant="light"
+      radius="sm"
+      tt="none"
+      leftSection={<CheckCircle2 size={10} />}
+    >
+      Closed by GL Ethiopia
+    </Badge>
+  ) : hasT1 ? (
+    <Badge size="xs" color="orange" variant="light" radius="sm" tt="none">
+      Uploaded
+    </Badge>
+  ) : departed ? (
+    <Badge size="xs" color="blue" variant="light" radius="sm" tt="none">
+      Ready to upload
+    </Badge>
+  ) : (
+    <Badge
+      size="xs"
+      color="gray"
+      variant="light"
+      radius="sm"
+      tt="none"
+      leftSection={<Lock size={10} />}
+    >
+      Waiting for departure
+    </Badge>
+  );
+
+  const locked = !departed || closed;
+
+  return (
+    <>
+      <DocumentCard
+        icon={FileStack}
+        title="T1 transport documents"
+        subtitle="Filed once the train departs Djibouti; final once GL Ethiopia closes the T1"
+        status={status}
+        action={
+          <Tooltip
+            label={
+              closed
+                ? "GL Ethiopia has closed the T1 — documents are final"
+                : "The train has not departed yet"
+            }
+            disabled={!locked}
+            withArrow
+          >
+            <Button
+              color="edr-green"
+              radius="md"
+              size="sm"
+              leftSection={hasT1 ? <FileCheck2 size={15} /> : <Upload size={15} />}
+              disabled={locked}
+              onClick={() => setOpen(true)}
+            >
+              {hasT1 ? "Replace T1 documents" : "Upload T1 documents"}
+            </Button>
+          </Tooltip>
+        }
+      >
+        <Stack gap="md">
+          <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
+            <Stat
+              icon={Train}
+              label="Train departed"
+              value={train?.departedAt ? formatStamp(train.departedAt) : "Not departed"}
+              hint={departed ? "T1 upload unlocked" : "Unlocks the T1 upload"}
+              tone={departed ? "blue" : "muted"}
+            />
+            <Stat
+              icon={FileStack}
+              label={t1Updated ? "T1 last updated" : "T1 uploaded"}
+              value={t1At ? formatStamp(t1At) : "Not yet"}
+              hint={
+                t1At
+                  ? closed && clearance.t1ClosedAt
+                    ? `Closed ${formatStamp(clearance.t1ClosedAt)}`
+                    : t1Updated
+                      ? `Replaced ${t1Events.length - 1}×`
+                      : "First upload"
+                  : "Upload to record the time"
+              }
+              tone={t1At ? "green" : "muted"}
+            />
+            <Stat
+              icon={Timer}
+              label={arrivalToT1 ? "Arrival → T1" : "Departure → T1"}
+              value={arrivalToT1 ?? departureToT1 ?? "—"}
+              hint={
+                arrivalToT1
+                  ? `${departureToT1} after departure`
+                  : departureToT1
+                    ? train?.arrivedAt
+                      ? "Filed before arrival"
+                      : "Train still in transit"
+                    : "Measured once the T1 is uploaded"
+              }
+              tone={arrivalToT1 || departureToT1 ? "blue" : "muted"}
+            />
+          </SimpleGrid>
+
+          {hasT1 ? (
+            <Stack gap={8}>
+              {t1Files.map((item) => (
+                <StoredDocumentRow key={item.code} item={item} train={train} onView={onView} />
+              ))}
+            </Stack>
+          ) : (
+            <EmptyDocs icon={FileStack}>
+              {departed
+                ? "No T1 transport documents yet. Upload the T1 set — every file is time-stamped against departure and arrival."
+                : "T1 transport documents can be uploaded as soon as the train departs Djibouti."}
+            </EmptyDocs>
+          )}
+        </Stack>
+      </DocumentCard>
+
+      <ImportT1Modal
+        opened={open}
+        bookingId={bookingId}
+        replaceMode={hasT1}
+        onClose={() => setOpen(false)}
+        onSuccess={onChanged}
+      />
+    </>
+  );
+}
+
+function ImportT1Modal({
+  opened,
+  bookingId,
+  replaceMode,
+  onClose,
+  onSuccess,
+}: {
+  opened: boolean;
+  bookingId: string;
+  replaceMode: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}) {
+  const [files, setFiles] = useState<File[]>([]);
+
+  const close = () => {
+    setFiles([]);
+    onClose();
+  };
+
+  const submit = useMutation({
+    mutationFn: () => transitAssignmentsService.uploadT1Documents(bookingId, files),
+    onSuccess: () => {
+      toast.success(replaceMode ? "T1 documents updated" : "T1 documents uploaded");
+      onSuccess();
+      close();
+    },
+    onError: (e: unknown) =>
+      toast.error(e instanceof Error ? e.message : "Upload failed"),
+  });
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={close}
+      radius="md"
+      size="lg"
+      title={
+        <Group gap={8}>
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={30}>
+            <FileStack size={16} />
+          </ThemeIcon>
+          <Text fw={700}>
+            {replaceMode ? "Replace T1 transport documents" : "Upload T1 transport documents"}
+          </Text>
+        </Group>
+      }
+    >
+      <Stack gap="md">
+        <Text size="sm" c="dimmed">
+          Upload the T1 set for this shipment. Every file is stamped with its
+          upload time and measured against the train's departure and arrival.
+          {replaceMode
+            ? " Replacing removes the current T1 files and records a new time."
+            : ""}
+        </Text>
+
+        <PortalMultiFileDropzone
+          label="T1 transport documents"
+          description="Scans or photos of the T1 set. Every file in this batch replaces what is on file."
+          files={files}
+          onChange={setFiles}
+          accept="*/*"
+          acceptHint="any file type"
+        />
+
+        <Group justify="flex-end" gap="sm">
+          <Button variant="default" radius="md" onClick={close} disabled={submit.isPending}>
+            Cancel
+          </Button>
+          <Button
+            color="edr-green"
+            radius="md"
+            loading={submit.isPending}
+            disabled={files.length === 0}
+            leftSection={<Upload size={16} />}
+            onClick={() => submit.mutate()}
+          >
+            {replaceMode ? "Replace T1" : "Upload T1"}
+            {files.length > 1 ? ` (${files.length} files)` : ""}
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+// ── Panel ────────────────────────────────────────────────────────────────────
+
+/** Header card shared by both directions: title, flow hint, train strip. */
+function PanelHeader({
+  title,
+  subtitle,
+  flow,
+  train,
+}: {
+  title: string;
+  subtitle: string;
+  flow: string[];
+  train?: Freight.ClearanceTrainState | null;
+}) {
+  return (
+    <Card withBorder radius="md" p="md">
+      <Group justify="space-between" wrap="nowrap" align="flex-start" mb="sm" gap="md">
+        <Group gap={12} wrap="nowrap" style={{ minWidth: 0 }}>
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={44}>
+            <Train size={20} />
+          </ThemeIcon>
+          <Box style={{ minWidth: 0 }}>
+            <Text fw={700} fz={16} style={{ color: INK }}>
+              {title}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {subtitle}
+            </Text>
+          </Box>
+        </Group>
+        <Group gap={6} wrap="nowrap" style={{ flexShrink: 0 }}>
+          {flow.map((step, i) => (
+            <Group key={step} gap={6} wrap="nowrap">
+              {i > 0 ? <ArrowRight size={12} color={MUTED} /> : null}
+              <Text
+                fz={11}
+                fw={700}
+                c={i === flow.length - 1 ? GREEN : MUTED}
+                tt="uppercase"
+                lts="0.3px"
+              >
+                {step}
+              </Text>
+            </Group>
+          ))}
+        </Group>
+      </Group>
+      <TrainStrip train={train} />
+    </Card>
+  );
+}
+
+/**
+ * The transit agent's import paperwork on one shipment: the Delivery Order
+ * (timed from the booking's creation) and the T1 transport documents
+ * (unlocked by train departure, timed against departure and arrival). Both
+ * are replace-as-a-batch sets, so the stamps shown are always the last update.
+ */
+export function TransitImportDocumentsPanel({
+  bookingId,
+  clearance,
+  history,
+  onView,
+  onChanged,
+}: {
+  bookingId: string;
+  clearance: Freight.ClearanceView;
+  history: Freight.ClearanceHistoryEvent[];
+  onView: (file: { name: string; url: string; mimeType?: string | null }) => void;
+  onChanged: () => void;
+}) {
+  const queryClient = useQueryClient();
+
+  const refresh = () => {
+    void queryClient.invalidateQueries({ queryKey: ["transit-clearance"] });
+    void queryClient.invalidateQueries({ queryKey: ["transit-clearance-history"] });
+    onChanged();
+  };
+
+  return (
+    <Stack gap="md">
+      <PanelHeader
+        title="Import transit documents"
+        subtitle="Your paperwork on this shipment, with every upload time recorded against the booking and the train."
+        flow={["Booking", "DO", "Departure", "T1"]}
+        train={clearance.train}
+      />
+
+      <DeliveryOrderCard
+        bookingId={bookingId}
+        clearance={clearance}
+        history={history}
+        onView={onView}
+        onChanged={refresh}
+      />
+
+      <ImportT1Card
+        bookingId={bookingId}
+        clearance={clearance}
+        history={history}
+        onView={onView}
+        onChanged={refresh}
+      />
+    </Stack>
+  );
+}
+
+
+/**
+ * The transit agent's export paperwork on one shipment: the Release Order
+ * (gated on the customs declaration, timed from it), and the gate pass and
+ * Djibouti T1 sets collected around train arrival (each file timed against
+ * the train's departure and arrival).
+ *
+ * Every timestamp here comes from the server — file `uploadedAt` stamps,
+ * milestone `triggeredAt`, the train state — so what the officer sees is what
+ * the desk and the customer's reports will also see.
+ */
+export function TransitExportDocumentsPanel({
+  bookingId,
+  clearance,
+  history,
+  onView,
+  onChanged,
+}: {
+  bookingId: string;
+  clearance: Freight.ClearanceView;
+  history: Freight.ClearanceHistoryEvent[];
+  onView: (file: { name: string; url: string; mimeType?: string | null }) => void;
+  onChanged: () => void;
+}) {
+  const queryClient = useQueryClient();
+
+  const refresh = () => {
+    void queryClient.invalidateQueries({ queryKey: ["transit-clearance"] });
+    void queryClient.invalidateQueries({ queryKey: ["transit-clearance-history"] });
+    onChanged();
+  };
+
+  return (
+    <Stack gap="md">
+      <PanelHeader
+        title="Export transit documents"
+        subtitle="Your paperwork on this shipment, with every upload time recorded against the declaration and the train."
+        flow={["Declaration", "RO", "Arrival"]}
+        train={clearance.train}
+      />
+
+      <ReleaseOrderCard
+        bookingId={bookingId}
+        clearance={clearance}
+        history={history}
+        onView={onView}
+        onChanged={refresh}
+      />
+
+      <SimpleGrid cols={{ base: 1, lg: 2 }} spacing="md">
+        <ArrivalDocumentsCard
+          kind="gate_pass"
+          bookingId={bookingId}
+          clearance={clearance}
+          onView={onView}
+          onChanged={refresh}
+        />
+        <ArrivalDocumentsCard
+          kind="djibouti_t1"
+          bookingId={bookingId}
+          clearance={clearance}
+          onView={onView}
+          onChanged={refresh}
+        />
+      </SimpleGrid>
+    </Stack>
+  );
+}
diff --git a/apps/edr-freight-web/portal/src/pages/transit-agent/index.ts b/apps/edr-freight-web/portal/src/pages/transit-agent/index.ts
index 663743845..c2cd69030 100644
--- a/apps/edr-freight-web/portal/src/pages/transit-agent/index.ts
+++ b/apps/edr-freight-web/portal/src/pages/transit-agent/index.ts
@@ -1,2 +1,3 @@
 export { default as TransitAgentOverviewPage } from "./TransitAgentOverviewPage";
 export { default as TransitAgentBookingsPage } from "./TransitAgentBookingsPage";
+export { default as TransitAgentBookingDetailPage } from "./TransitAgentBookingDetailPage";
diff --git a/apps/edr-freight-web/portal/src/pages/transit-agent/transit-bookings-table.css b/apps/edr-freight-web/portal/src/pages/transit-agent/transit-bookings-table.css
new file mode 100644
index 000000000..81779f15f
--- /dev/null
+++ b/apps/edr-freight-web/portal/src/pages/transit-agent/transit-bookings-table.css
@@ -0,0 +1,150 @@
+/*
+ * Scoped to .edr-transit-table — the DataTable container div on the
+ * transit agent bookings list. Mirrors the portal's /bookings table
+ * (bookings-table.css): content-sized columns with a 100px floor, no
+ * truncation, horizontal scroll when the table outgrows the card, sticky
+ * header row and a sticky shadowed action column.
+ */
+.edr-transit-table {
+  overflow-x: auto;
+  max-width: 100%;
+  min-width: 0;
+}
+
+/*
+ * width: max-content — the table is exactly as wide as its columns' content
+ * needs, never squeezed to fit the viewport; the container scrolls instead.
+ * min-width: 100% keeps it filling the card when content is narrow.
+ */
+.edr-transit-table table {
+  table-layout: auto;
+  width: max-content;
+  min-width: 100%;
+}
+
+/* 100px floor, no ceiling: cells grow to fit their text, nothing is clipped. */
+.edr-transit-table th,
+.edr-transit-table td:not([colspan]) {
+  min-width: 100px;
+  max-width: none;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+/*
+ * Booking (col 1) and Contract (col 2) carry free-text company/contract names.
+ * Cap those two columns and let their content wrap onto 2+ lines so a very long
+ * name (e.g. "SHAFICI PHARMACEUTICAL MEDICAL SUPPLIES WHOLESALER PARTINERSHIP")
+ * stacks inside its own cell instead of shoving the next column off-screen.
+ * Everything below the header row so the header labels still sit on one line.
+ */
+.edr-transit-table tbody td:not([colspan]):nth-child(1) {
+  max-width: 240px;
+  white-space: normal;
+}
+.edr-transit-table tbody td:not([colspan]):nth-child(2) {
+  max-width: 200px;
+  white-space: normal;
+}
+
+/*
+ * Mantine Badge caps itself at max-width: 100%; inside an auto-layout table
+ * cell that resolves against min-content and clips the label. Let badges size
+ * to their text so the column grows to fit them.
+ */
+.edr-transit-table .mantine-Badge-root {
+  max-width: none;
+}
+
+/*
+ * Opt-out for long free text (company/customer names). The blanket nowrap rule
+ * above keeps every cell on one line so columns size to content; a very long
+ * name would otherwise force the column absurdly wide. Mark such text with
+ * `cell-wrap` to cap it and wrap onto 2+ lines instead of pushing the layout.
+ */
+.edr-transit-table .cell-wrap,
+.edr-transit-table .mantine-Group-root > .cell-wrap {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  min-width: 0;
+  max-width: 100%;
+  line-height: 1.3;
+}
+
+/*
+ * Mantine Group's preventGrowOverflow caps every child at 100%/N of the cell.
+ * In an auto-width table cell that resolves against min-content and collapses
+ * the badges/text in the Type, Route and Status columns to nothing. Let group
+ * children size to their content; the column grows and the container scrolls.
+ */
+.edr-transit-table .mantine-Group-root > * {
+  max-width: none;
+  flex-shrink: 0;
+}
+
+/* Sticky header row. */
+.edr-transit-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+/*
+ * Sticky action column, shrunk to its content. The width overrides the inline
+ * width DataTable stamps from tanstack's column size — hence !important.
+ * `:not([colspan])` keeps the full-width error/empty rows out.
+ */
+.edr-transit-table th:last-child,
+.edr-transit-table td:last-child:not([colspan]) {
+  width: 1% !important;
+  min-width: 0;
+  position: sticky;
+  right: 0;
+  box-shadow: -10px 0 14px -8px rgba(16, 32, 47, 0.12);
+}
+
+/*
+ * Sticky cells sit above the scrolling ones, so they need their own opaque
+ * background or the columns underneath show through.
+ */
+.edr-transit-table td:last-child:not([colspan]) {
+  background: var(--mantine-color-body);
+  z-index: 2;
+}
+
+/* Row hover uses the tailwind `hover:bg-accent` class on the <tr>. */
+.edr-transit-table tbody tr:hover td:last-child:not([colspan]) {
+  background: #f7fbf9;
+}
+
+/* Header cell is sticky on both axes — it must outrank the body's sticky column. */
+.edr-transit-table th:last-child {
+  background: var(--mantine-color-gray-0);
+  z-index: 3;
+}
+
+/* ── Design pass: flat head band, 64px rows, hairline dividers ─────────── */
+.edr-transit-table thead th {
+  height: 38px;
+  padding-top: 0;
+  padding-bottom: 0;
+  background: var(--mantine-color-gray-0);
+  border-bottom: 1px solid var(--mantine-color-edr-divider-6);
+}
+
+.edr-transit-table tbody td:not([colspan]) {
+  height: 64px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--mantine-color-edr-divider-6);
+}
+
+.edr-transit-table tbody tr:last-child td:not([colspan]) {
+  border-bottom: 0;
+}
+
+.edr-transit-table tbody tr:hover td {
+  background: #f7fbf9;
+}
diff --git a/apps/edr-freight-web/portal/src/services/transit-assignments.service.ts b/apps/edr-freight-web/portal/src/services/transit-assignments.service.ts
index 31b633add..9dfed7b59 100644
--- a/apps/edr-freight-web/portal/src/services/transit-assignments.service.ts
+++ b/apps/edr-freight-web/portal/src/services/transit-assignments.service.ts
@@ -1,3 +1,5 @@
+import type { Freight } from "@edr/types";
+
 import { client } from "@/utils/api";
 
 const BASE = "/api/transit-assignments/my";
@@ -65,42 +67,91 @@ export interface TransitAssignmentListResult {
   meta: { total: number; page: number; pageSize: number; totalPages: number };
 }
 
-/** One row behind the overview's timeline and activity list. */
+export type TransitTradeDirection = "IMPORT" | "EXPORT";
+export type TransitDocumentKind = "ro" | "do" | "t1" | "gate_pass" | "djibouti_t1";
+
+/** What the officer should do next on a shipment — mirrors the detail page's gates. */
+export interface TransitNextAction {
+  kind: "upload" | "wait" | "done";
+  label: string;
+  document?: TransitDocumentKind;
+}
+
+/** Minutes, or null when nothing has been measured yet — never zero. */
+export interface TransitTimingSummary {
+  median: number | null;
+  fastest: number | null;
+  slowest: number | null;
+  measured: number;
+}
+
+export type TransitTimingKey =
+  | "transit"
+  | "declarationToRo"
+  | "bookingToDo"
+  | "departureToT1"
+  | "arrivalToT1"
+  | "arrivalToGatePass"
+  | "arrivalToDjiboutiT1"
+  | "arrivalToFinish";
+
+/** One shipment on the overview: train stamps, document stamps, derived timings. */
 export interface TransitStatItem {
   id: string;
+  bookingId: string;
   reference: string | null;
   customerName: string | null;
+  tradeDirection: TransitTradeDirection;
   status: TransitAssignmentStatus;
   schedulingStatus: string | null;
-  transitMinutes: number | null;
-  pickupMinutes: number | null;
-  clearanceMinutes: number | null;
-  documentCount: number;
+  trainLabel: string | null;
+  assignedAt: string;
+  startedAt: string | null;
+  finishedAt: string | null;
+  bookingCreatedAt: string | null;
+  departedAt: string | null;
+  arrivedAt: string | null;
+  declaredAt: string | null;
+  roAt: string | null;
+  doAt: string | null;
+  t1At: string | null;
+  t1Closed: boolean;
+  gatePassAt: string | null;
+  djiboutiT1At: string | null;
+  documents: {
+    ro: number;
+    do: number;
+    t1: number;
+    gatePass: number;
+    djiboutiT1: number;
+    own: number;
+  };
+  timings: Record<TransitTimingKey, number | null>;
+  nextAction: TransitNextAction;
 }
 
 /**
- * Overview figures, all derived server-side from existing timestamps. Every
- * duration is minutes, and null means "not measurable yet" rather than zero —
- * an unfinished assignment has no clearance time.
+ * Overview figures, all derived server-side from existing timestamps: the
+ * train's departure and arrival, clearance milestones, and each document's
+ * upload time (a replaced batch counts from its last update).
  */
 export interface TransitStats {
   totals: {
     assignments: number;
     open: number;
+    notStarted: number;
+    inProgress: number;
     finished: number;
-    readyForDocuments: number;
-    documents: number;
+    imports: number;
+    exports: number;
+    awaitingDeparture: number;
+    inTransit: number;
+    arrived: number;
+    actionNeeded: number;
   };
-  performance: {
-    medianClearanceMinutes: number | null;
-    medianPickupMinutes: number | null;
-    fastestClearanceMinutes: number | null;
-    slowestClearanceMinutes: number | null;
-    onTimeRate: number | null;
-    measured: number;
-  };
-  sla: { under2h: number; under6h: number; over6h: number };
-  coverage: { dispatched: number; withDocuments: number };
+  timings: Record<TransitTimingKey, TransitTimingSummary>;
+  documents: TransitStatItem["documents"];
+  pending: { ro: number; do: number; t1: number; gatePass: number; djiboutiT1: number };
   items: TransitStatItem[];
 }
 
@@ -169,4 +220,162 @@ export const transitAssignmentsService = {
     const { data } = await client.post(`${BASE}/${id}/submit`, input);
     return data.data ?? data;
   },
+
+  // ── Clearance reads for an assigned booking ──────────────────────────────
+  // These hit the shared booking/contract endpoints, not `/my`. The API scopes
+  // them to shipments this agent is assigned to and 404s anything else, so the
+  // booking id below is safe to pass straight through.
+
+  /** Clearance action history — reviews, workflow steps, charges (newest first). */
+  clearanceHistory: async (
+    bookingId: string,
+  ): Promise<Freight.ClearanceHistoryEvent[]> => {
+    const { data } = await client.get(
+      `/api/bookings/${bookingId}/clearance/history`,
+    );
+    return data.data ?? data;
+  },
+
+  /** GL Ethiopia ↔ GL Djibouti shared document thread (read-only here). */
+  glExchange: async (
+    bookingId: string,
+  ): Promise<Freight.GlExchangeDocument[]> => {
+    const { data } = await client.get(`/api/gl-exchange/${bookingId}`);
+    return data.data ?? data;
+  },
+
+  /** Cargo exception / damage reports logged against the shipment. */
+  incidents: async (bookingId: string): Promise<Freight.IClearanceIncident[]> => {
+    const { data } = await client.get(
+      `/api/contracts/bookings/${bookingId}/incidents`,
+    );
+    return data.data ?? data;
+  },
+
+  // ── Djibouti-desk writes, filed by the assigned agent ────────────────────
+  // The API gates these on the assignment (see `assertPortalClearanceAccess`),
+  // so an agent can only ever write to a shipment handed to them.
+
+  /** Delivery Order (imports). Both dates are required by the API. */
+  uploadDeliveryOrder: async (
+    bookingId: string,
+    files: File[],
+    dates: { vesselArrivalDate: string; doCollectedDate: string },
+  ): Promise<void> => {
+    const form = new FormData();
+    for (const f of files) form.append("files", f);
+    form.append("vesselArrivalDate", dates.vesselArrivalDate);
+    form.append("doCollectedDate", dates.doCollectedDate);
+    await client.post(
+      `/api/bookings/${bookingId}/clearance/delivery-order`,
+      form,
+      { headers: { "Content-Type": "multipart/form-data" } },
+    );
+  },
+
+  /**
+   * Release Order (exports). The API may answer with a HOLD rather than an
+   * error when the vessel date is too soon — surfaced, not swallowed.
+   */
+  uploadReleaseOrder: async (
+    bookingId: string,
+    files: File[],
+    vesselDepartureDate: string,
+  ): Promise<{ hold?: boolean; holdReason?: string | null }> => {
+    const form = new FormData();
+    for (const f of files) form.append("files", f);
+    form.append("vesselDepartureDate", vesselDepartureDate);
+    const { data } = await client.post(
+      `/api/bookings/${bookingId}/clearance/release-order`,
+      form,
+      { headers: { "Content-Type": "multipart/form-data" } },
+    );
+    return data.data ?? data;
+  },
+
+  /** Ask GL Ethiopia to amend the RO — puts the shipment on hold. */
+  requestRoAmendment: async (
+    bookingId: string,
+    note: string,
+  ): Promise<void> => {
+    await client.post(`/api/bookings/${bookingId}/clearance/ro-amendment`, {
+      note,
+    });
+  },
+
+  /**
+   * Share a document with both GL desks. Posted as the TRANSIT side, so it is
+   * never credited to a desk. `visibleToCustomer` additionally surfaces it in
+   * the customer's own portal.
+   */
+  shareExchangeDocument: async (
+    bookingId: string,
+    input: { file: File; title: string; visibleToCustomer: boolean },
+  ): Promise<Freight.GlExchangeDocument> => {
+    const form = new FormData();
+    form.append("file", input.file);
+    form.append("title", input.title.trim());
+    form.append("visibleToCustomer", String(input.visibleToCustomer));
+    const { data } = await client.post(`/api/gl-exchange/${bookingId}`, form, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+    return data.data ?? data;
+  },
+
+  // ── Export arrival paperwork (gate pass / Djibouti T1) ───────────────────
+  // Append-only multi-file sets: each call ADDS files, and a file is removed on
+  // its own. The clearance view returns them under `workflowFiles` with the
+  // `gate_pass_*` / `djibouti_t1_*` codes and an `uploadedAt` stamp per file.
+
+  uploadGatePassDocuments: async (
+    bookingId: string,
+    files: File[],
+  ): Promise<{ uploaded: number }> => {
+    const form = new FormData();
+    for (const f of files) form.append("files", f);
+    const { data } = await client.post(
+      `/api/bookings/${bookingId}/clearance/gate-pass-documents`,
+      form,
+      { headers: { "Content-Type": "multipart/form-data" } },
+    );
+    return data.data ?? data;
+  },
+
+  uploadDjiboutiT1Documents: async (
+    bookingId: string,
+    files: File[],
+  ): Promise<{ uploaded: number }> => {
+    const form = new FormData();
+    for (const f of files) form.append("files", f);
+    const { data } = await client.post(
+      `/api/bookings/${bookingId}/clearance/djibouti-t1-documents`,
+      form,
+      { headers: { "Content-Type": "multipart/form-data" } },
+    );
+    return data.data ?? data;
+  },
+
+  /** Remove one gate pass / Djibouti T1 file. Other document kinds are refused. */
+  removeTransitDocument: async (
+    bookingId: string,
+    fileId: string,
+  ): Promise<void> => {
+    await client.delete(
+      `/api/bookings/${bookingId}/clearance/transit-documents/${fileId}`,
+    );
+  },
+
+  /** T1 transit documents (import); locked once GL Ethiopia closes the T1. */
+  uploadT1Documents: async (
+    bookingId: string,
+    files: File[],
+  ): Promise<void> => {
+    const form = new FormData();
+    for (const f of files) form.append("files", f);
+    await client.post(
+      `/api/contracts/bookings/${bookingId}/t1-documents`,
+      form,
+      { headers: { "Content-Type": "multipart/form-data" } },
+    );
+  },
 };
diff --git a/packages/types/src/freight/clearance-files.catalog.ts b/packages/types/src/freight/clearance-files.catalog.ts
index 8fa50cba4..9a4468af0 100644
--- a/packages/types/src/freight/clearance-files.catalog.ts
+++ b/packages/types/src/freight/clearance-files.catalog.ts
@@ -99,7 +99,16 @@ export interface ClearanceWorkflowFile {
   label: string;
   uploadedBy: ClearanceWorkflowFileOwner;
   category: ClearanceWorkflowFileCategory;
-  file: { id: string; name: string; url: string } | null;
+  file: {
+    id: string;
+    name: string;
+    url: string;
+    /** When this file record was stored — a replaced batch carries the new stamp. */
+    uploadedAt?: string | null;
+    updatedAt?: string | null;
+    size?: number | null;
+    mimeType?: string | null;
+  } | null;
 }
 
 const CATALOG_BY_CODE = new Map(
@@ -239,6 +248,39 @@ export function exportTransportFileLabel(code: string, index?: number): string {
   return code;
 }
 
+// ── Transit agent arrival paperwork (export) ────────────────────────────────
+// Filed by the assigned transit officer at Djibouti around train arrival. Both
+// are append-only multi-file sets: each upload adds files, and a file can be
+// removed on its own, unlike the DO/RO batches that replace as a whole.
+
+/** Multi-file Djibouti gate pass uploads use `gate_pass_0`, `gate_pass_1`, … */
+export const GATE_PASS_FILE_PREFIX = "gate_pass_";
+
+export function isGatePassFileCode(code: string | null | undefined): boolean {
+  if (!code) return false;
+  return code.toLowerCase().startsWith(GATE_PASS_FILE_PREFIX);
+}
+
+export function gatePassFileLabel(index?: number): string {
+  return index != null ? `Gate pass ${index + 1}` : "Gate pass";
+}
+
+/** Multi-file Djibouti T1 uploads use `djibouti_t1_0`, `djibouti_t1_1`, … */
+export const DJIBOUTI_T1_FILE_PREFIX = "djibouti_t1_";
+
+export function isDjiboutiT1FileCode(code: string | null | undefined): boolean {
+  if (!code) return false;
+  return code.toLowerCase().startsWith(DJIBOUTI_T1_FILE_PREFIX);
+}
+
+export function djiboutiT1FileLabel(index?: number): string {
+  return index != null ? `Djibouti T1 ${index + 1}` : "Djibouti T1";
+}
+
+/** The two transit-agent arrival document sets, keyed by the API route segment. */
+export const TRANSIT_ARRIVAL_DOCUMENT_KINDS = ["gate_pass", "djibouti_t1"] as const;
+export type TransitArrivalDocumentKind = (typeof TRANSIT_ARRIVAL_DOCUMENT_KINDS)[number];
+
 export function catalogEntriesForTradeDirection(
   tradeDirection: string,
 ): ClearanceWorkflowFileCatalogEntry[] {
diff --git a/packages/types/src/freight/index.ts b/packages/types/src/freight/index.ts
index 5d3afc956..f1ac43c6e 100644
--- a/packages/types/src/freight/index.ts
+++ b/packages/types/src/freight/index.ts
@@ -1155,8 +1155,11 @@ export interface GlExchangeDocument {
   /** Booking or contract id the document is attached to. */
   entityId: string;
   title: string;
-  /** Desk that uploaded it. */
-  side: "ET" | "DJ";
+  /**
+   * Who uploaded it: either Global Logistics desk, or the transit agent
+   * assigned to the shipment. Both desks see all three.
+   */
+  side: "ET" | "DJ" | "TRANSIT";
   visibleToCustomer: boolean;
   uploadedById: string | null;
   uploadedByName: string | null;
@@ -1174,6 +1177,8 @@ export interface GlExchangeDocument {
 
 /** The clearance view for a booking, driving both portals' clearance UI. */
 export interface ClearanceView {
+  /** When the booking was created — the import DO clock starts here. */
+  bookingCreatedAt?: string | null;
   status: string;
   includesCustoms: boolean;
   inputCode: string | null;