DJbouti port Export Unloading

apps/edr-freight-web/backoffice/src/App.tsx

@@ -63,6 +63,7 @@ import LastMilePage from "./pages/operations/LastMilePage";
 import TrainDetailPage from "./pages/trains/TrainDetailPage";
 import ArrivalQueuePage from "./pages/warehouses/ArrivalQueuePage";
 import DispatchQueuePage from "./pages/warehouses/DispatchQueuePage";
+import ExportDjiboutiUnloadingQueuePage from "./pages/warehouses/ExportDjiboutiUnloadingQueuePage";
 import InventoryInquiryPage from "./pages/warehouses/InventoryInquiryPage";
 import LoadedInventoryPage from "./pages/warehouses/LoadedInventoryPage";
 import LoadingQueuePage from "./pages/warehouses/LoadingQueuePage";
@@ -224,6 +225,11 @@ const buildSidebarSections = (demoItems: SidebarItem[]): SidebarSection[] => [
         href: "/dashboard/dispatch-queue",
         icon: <Send />,
       },
+      {
+        label: "Djibouti Unloading",
+        href: "/dashboard/export-djibouti-unloading",
+        icon: <PackageOpen />,
+      },
       {
         label: "Inventory Inquiry",
         href: "/dashboard/inventory-inquiry",
@@ -383,6 +389,7 @@ const App = () => {
         <Route path="loading-queue" element={<LoadingQueuePage />} />
         <Route path="loaded-inventory" element={<LoadedInventoryPage />} />
         <Route path="dispatch-queue" element={<DispatchQueuePage />} />
+        <Route path="export-djibouti-unloading" element={<ExportDjiboutiUnloadingQueuePage />} />
         <Route path="inventory-inquiry" element={<InventoryInquiryPage />} />
         <Route path="warehouse-rules" element={<WarehouseRulesPage />} />
         <Route path="warehouse-fee-invoices" element={<WarehouseInvoicesPage />} />

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

@@ -4,6 +4,7 @@ import {
   ClipboardCheck,
   PackageCheck,
   PackagePlus,
+  PackageOpen,
   Send,
   Truck,
   Warehouse,
@@ -17,12 +18,16 @@ import { formatDate, humanizeEnum } from './options';
 
 const activityIcon: Record<ActivityType, React.ReactNode> = {
   INVENTORY_RECEIVED: <PackagePlus size={14} />,
+  INVENTORY_UNLOADED: <PackageOpen size={14} />,
   INVENTORY_STORED: <Warehouse size={14} />,
   INVENTORY_MOVED: <ArrowRightLeft size={14} />,
   INVENTORY_RESERVED: <ClipboardCheck size={14} />,
   READY_FOR_LOADING: <PackageCheck size={14} />,
   INVENTORY_LOADED: <Truck size={14} />,
   INVENTORY_DISPATCHED: <Send size={14} />,
+  READY_FOR_PICKUP: <PackageCheck size={14} />,
+  INVENTORY_RELEASED: <Send size={14} />,
+  INVENTORY_DELIVERED: <PackageCheck size={14} />,
 };
 
 export function ActivityTimeline({ inventoryId }: { inventoryId: string }) {

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

@@ -54,6 +54,7 @@ export function WarehouseStatusBadge({ status }: { status: WarehouseStatus }) {
 
 const inventoryStatusColor: Record<InventoryStatus, string> = {
   UNLOADED: "indigo",
+  UNLOADED_AT_DJIBOUTI_PORT: "edr-green",
   RECEIVED: "yellow",
   STORED: "blue",
   RESERVED: "grape",

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

@@ -331,6 +331,10 @@ export const URL_CONSTANTS = {
     IMPORT_AUTO_UNLOAD_ARRIVED: '/warehouse-inventory/import/auto-unload-arrived-bookings',
     IMPORT_UNLOADED_QUEUE: '/warehouse-inventory/import/unloaded-queue',
     IMPORT_PICKUP_READY_QUEUE: '/warehouse-inventory/import/pickup-ready-queue',
+    EXPORT_DJIBOUTI_ARRIVAL_QUEUE: '/warehouse-inventory/export/djibouti-arrival-queue',
+    EXPORT_DJIBOUTI_TRAIN_ITEMS: (scheduleId: string) =>
+      `/warehouse-inventory/export/djibouti-trains/${scheduleId}/items`,
+    EXPORT_AUTO_UNLOAD_AT_DJIBOUTI: '/warehouse-inventory/export/auto-unload-at-djibouti',
   },
 
   WAREHOUSE_LOADINGS: {

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

@@ -282,6 +282,28 @@ export function useImportTrainItems(scheduleId?: string) {
 export const useAutoUnloadArrivedBookings = () =>
   useInventoryMutation((scheduleId: string) => warehouseService.autoUnloadArrivedBookings(scheduleId));
 
+/** Arrived EXPORT trains at Djibouti-side ports. Read-only. */
+export function useExportDjiboutiArrivalQueue(enabled = true) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', 'export-djibouti-arrival-queue'],
+    queryFn: () => warehouseService.exportDjiboutiArrivalQueue().then((r) => r.data),
+    enabled,
+  });
+}
+
+/** Assigned export bookings/items for a Djibouti-side arrived export train. Read-only. */
+export function useExportDjiboutiTrainItems(scheduleId?: string) {
+  return useQuery({
+    queryKey: ['warehouse-inventory', 'export-djibouti-train-items', scheduleId],
+    queryFn: () => warehouseService.exportDjiboutiTrainItems(scheduleId as string).then((r) => r.data),
+    enabled: Boolean(scheduleId),
+  });
+}
+
+/** Unload eligible export items assigned to an arrived Djibouti-side train. */
+export const useAutoUnloadExportAtDjibouti = () =>
+  useInventoryMutation((scheduleId: string) => warehouseService.autoUnloadExportAtDjibouti(scheduleId));
+
 /** IMPORT inventory in the Unloaded Queue (UNLOADED / destination inspection). Read-only. */
 export function useImportUnloadedQueue(enabled = true) {
   return useQuery({

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

@@ -0,0 +1,353 @@
+import { Fragment, useState } from 'react';
+import {
+  Badge,
+  Button,
+  Card,
+  Container,
+  Group,
+  Loader,
+  Modal,
+  Stack,
+  Table,
+  Tabs,
+  Text,
+} from '@mantine/core';
+import { useNavigate } from 'react-router-dom';
+import { ChevronDown, ChevronRight, Eye, History, PackageOpen, Truck } from 'lucide-react';
+
+import { PageHeader } from '@/components/page';
+import Breadcrumbs from '@/components/ui/Breadcrumbs';
+import {
+  ActivityTimeline,
+  InventoryMovementHistoryTable,
+  VisualEmptyState,
+  WarehouseHero,
+  formatDate,
+  formatNumber,
+} from '@/components/warehouses';
+import {
+  useAutoUnloadExportAtDjibouti,
+  useExportDjiboutiArrivalQueue,
+  useExportDjiboutiTrainItems,
+} from '@/hooks/useWarehouses';
+import { useToast } from '@/hooks/use-toast';
+import type {
+  AutoUnloadExportDjiboutiResult,
+  ExportTrain,
+  ExportTrainItem,
+} from '@/types/warehouse';
+
+const getErrorMessage = (error: unknown) => {
+  if (error && typeof error === 'object' && 'response' in error) {
+    const response = (error as { response?: { data?: { message?: unknown } } }).response;
+    const message = response?.data?.message;
+    if (Array.isArray(message)) return message.join(', ');
+    if (typeof message === 'string') return message;
+  }
+  return error instanceof Error ? error.message : undefined;
+};
+
+const statusColor = (status?: string | null) => {
+  if (status === 'UNLOADED_AT_DJIBOUTI_PORT') return 'green';
+  if (status === 'ARRIVED_AT_DJIBOUTI' || status === 'ARRIVED') return 'blue';
+  if (status === 'FAILED') return 'red';
+  if (status === 'SKIPPED') return 'orange';
+  return 'gray';
+};
+
+const statusLabel = (status?: string | null) =>
+  status === 'UNLOADED_AT_DJIBOUTI_PORT'
+    ? 'Unloaded at Djibouti Port'
+    : (status ?? 'PENDING').replace(/_/g, ' ');
+
+function ExportTrainDetailRows({
+  scheduleId,
+  onOpenHistory,
+}: {
+  scheduleId: string;
+  onOpenHistory: (inventoryId: string) => void;
+}) {
+  const navigate = useNavigate();
+  const { data: items = [], isLoading } = useExportDjiboutiTrainItems(scheduleId);
+
+  if (isLoading) {
+    return (
+      <Group justify="center" py="md">
+        <Loader size="sm" />
+      </Group>
+    );
+  }
+
+  if (items.length === 0) {
+    return (
+      <Text c="dimmed" ta="center" py="md" size="sm">
+        No assigned export bookings found for this train.
+      </Text>
+    );
+  }
+
+  return (
+    <Table.ScrollContainer minWidth={1320}>
+      <Table highlightOnHover verticalSpacing="xs">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Booking ID</Table.Th>
+            <Table.Th>Booking Reference</Table.Th>
+            <Table.Th>Customer ID</Table.Th>
+            <Table.Th>Customer Name</Table.Th>
+            <Table.Th>Item Type</Table.Th>
+            <Table.Th>Container Number</Table.Th>
+            <Table.Th>Cargo Type</Table.Th>
+            <Table.Th>Weight</Table.Th>
+            <Table.Th>Origin</Table.Th>
+            <Table.Th>Destination</Table.Th>
+            <Table.Th>Train Schedule</Table.Th>
+            <Table.Th>Arrival Time at Djibouti</Table.Th>
+            <Table.Th>Current Status</Table.Th>
+            <Table.Th ta="right">Actions</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {items.map((item: ExportTrainItem) => (
+            <Table.Tr key={`${item.bookingId}-${item.itemType}-${item.itemId ?? item.inventoryId ?? 'item'}`}>
+              <Table.Td>{item.bookingId.slice(0, 8)}</Table.Td>
+              <Table.Td>
+                <Text size="sm" fw={600}>
+                  {item.bookingReference ?? '-'}
+                </Text>
+              </Table.Td>
+              <Table.Td>{item.customerId?.slice(0, 8) ?? '-'}</Table.Td>
+              <Table.Td>{item.customerName ?? '-'}</Table.Td>
+              <Table.Td>{item.itemType}</Table.Td>
+              <Table.Td>{item.containerNumber ?? '-'}</Table.Td>
+              <Table.Td>{item.cargoType ?? '-'}</Table.Td>
+              <Table.Td>{formatNumber(item.weight)}</Table.Td>
+              <Table.Td>{item.origin ?? '-'}</Table.Td>
+              <Table.Td>{item.destination ?? '-'}</Table.Td>
+              <Table.Td>{item.trainSchedule ?? '-'}</Table.Td>
+              <Table.Td>{formatDate(item.arrivalTime)}</Table.Td>
+              <Table.Td>
+                <Badge variant="light" color={statusColor(item.currentStatus)} size="sm">
+                  {statusLabel(item.currentStatus)}
+                </Badge>
+              </Table.Td>
+              <Table.Td>
+                <Group gap="xs" justify="flex-end" wrap="nowrap">
+                  <Button
+                    size="compact-xs"
+                    variant="light"
+                    leftSection={<Eye size={14} />}
+                    onClick={() => navigate(`/dashboard/booking-requests/${item.bookingId}`)}
+                  >
+                    View
+                  </Button>
+                  <Button
+                    size="compact-xs"
+                    variant="light"
+                    color="gray"
+                    leftSection={<History size={14} />}
+                    disabled={!item.inventoryId}
+                    onClick={() => item.inventoryId && onOpenHistory(item.inventoryId)}
+                  >
+                    Movement
+                  </Button>
+                </Group>
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
+  );
+}
+
+export default function ExportDjiboutiUnloadingQueuePage() {
+  const { toast } = useToast();
+  const { data: trains = [], isLoading } = useExportDjiboutiArrivalQueue();
+  const autoUnload = useAutoUnloadExportAtDjibouti();
+  const [openScheduleId, setOpenScheduleId] = useState<string | null>(null);
+  const [busyScheduleId, setBusyScheduleId] = useState<string | null>(null);
+  const [historyInventoryId, setHistoryInventoryId] = useState<string | null>(null);
+
+  const unloadTrain = async (train: ExportTrain) => {
+    setBusyScheduleId(train.scheduleId);
+    try {
+      const res = (await autoUnload.mutateAsync(train.scheduleId)) as {
+        data: AutoUnloadExportDjiboutiResult;
+      };
+      const result = res.data;
+      const details = [
+        result.skippedCount ? `${result.skippedCount} skipped` : '',
+        result.failedCount ? `${result.failedCount} failed` : '',
+      ]
+        .filter(Boolean)
+        .join(', ');
+
+      toast({
+        title: `${result.unloadedCount} export item(s) unloaded`,
+        description: details || `${train.trainNumber ?? 'Train'} unloaded at Djibouti Port.`,
+      });
+    } catch (error) {
+      toast({
+        variant: 'destructive',
+        title: 'Auto unload failed',
+        description: getErrorMessage(error),
+      });
+    } finally {
+      setBusyScheduleId(null);
+    }
+  };
+
+  return (
+    <Container size="xxl" py="lg">
+      <Breadcrumbs items={[{ label: 'Djibouti Arrival / Unloading Queue' }]} />
+
+      <Stack gap="lg" mt="sm">
+        <PageHeader
+          title="Djibouti Arrival / Unloading Queue"
+          subtitle="Arrived export trains at Djibouti-side destinations ready for unloading."
+        />
+
+        <WarehouseHero
+          variant="train"
+          secondaryVariant="container"
+          title="Export Unloading at Djibouti Port"
+          subtitle="Review arrived export trains and unload eligible assigned export items."
+        />
+
+        <Card withBorder radius="md" padding="lg">
+          <Group justify="space-between" mb="md">
+            <Text fw={600}>{trains.length} arrived export train(s)</Text>
+            <Text size="sm" c="dimmed">
+              Open a train to review assigned export items, then auto unload it.
+            </Text>
+          </Group>
+
+          {isLoading ? (
+            <Group justify="center" py="xl">
+              <Loader />
+            </Group>
+          ) : trains.length === 0 ? (
+            <VisualEmptyState
+              variant="train"
+              title="No arrived export trains"
+              description="Export trains appear here after arriving at Djibouti, Doraleh, DMP, DCT, or Nagad."
+            />
+          ) : (
+            <Table.ScrollContainer minWidth={1180}>
+              <Table verticalSpacing="sm" highlightOnHover striped>
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>Train Schedule ID</Table.Th>
+                    <Table.Th>Train Number</Table.Th>
+                    <Table.Th>Route</Table.Th>
+                    <Table.Th>Origin</Table.Th>
+                    <Table.Th>Destination</Table.Th>
+                    <Table.Th>Departure Time</Table.Th>
+                    <Table.Th>Arrival Time</Table.Th>
+                    <Table.Th ta="center">Total Bookings</Table.Th>
+                    <Table.Th ta="center">Total Containers</Table.Th>
+                    <Table.Th ta="center">Total Cargoes</Table.Th>
+                    <Table.Th>Current Status</Table.Th>
+                    <Table.Th ta="right">Actions</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {trains.map((train: ExportTrain) => {
+                    const isOpen = openScheduleId === train.scheduleId;
+                    return (
+                      <Fragment key={train.scheduleId}>
+                        <Table.Tr>
+                          <Table.Td>{train.scheduleId.slice(0, 8)}</Table.Td>
+                          <Table.Td>
+                            <Text size="sm" fw={700}>
+                              {train.trainNumber ?? '-'}
+                            </Text>
+                          </Table.Td>
+                          <Table.Td>{train.route ?? '-'}</Table.Td>
+                          <Table.Td>{train.origin ?? '-'}</Table.Td>
+                          <Table.Td>{train.destination ?? '-'}</Table.Td>
+                          <Table.Td>{formatDate(train.departureTime)}</Table.Td>
+                          <Table.Td>{formatDate(train.arrivalTime)}</Table.Td>
+                          <Table.Td ta="center">{train.totalBookings}</Table.Td>
+                          <Table.Td ta="center">{train.totalContainers}</Table.Td>
+                          <Table.Td ta="center">{train.totalCargoes}</Table.Td>
+                          <Table.Td>
+                            <Badge variant="light" color={statusColor(train.status)} size="sm">
+                              {statusLabel(train.status)}
+                            </Badge>
+                          </Table.Td>
+                          <Table.Td>
+                            <Group gap="xs" justify="flex-end" wrap="nowrap">
+                              <Button
+                                size="compact-xs"
+                                variant="light"
+                                leftSection={
+                                  isOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />
+                                }
+                                onClick={() => setOpenScheduleId(isOpen ? null : train.scheduleId)}
+                              >
+                                Open
+                              </Button>
+                              <Button
+                                size="compact-xs"
+                                color="green"
+                                leftSection={
+                                  busyScheduleId === train.scheduleId ? (
+                                    <PackageOpen size={14} />
+                                  ) : (
+                                    <Truck size={14} />
+                                  )
+                                }
+                                loading={busyScheduleId === train.scheduleId}
+                                onClick={() => unloadTrain(train)}
+                              >
+                                Auto Unload Export Items
+                              </Button>
+                            </Group>
+                          </Table.Td>
+                        </Table.Tr>
+                        {isOpen && (
+                          <Table.Tr>
+                            <Table.Td colSpan={12} bg="var(--mantine-color-gray-0)">
+                              <ExportTrainDetailRows
+                                scheduleId={train.scheduleId}
+                                onOpenHistory={setHistoryInventoryId}
+                              />
+                            </Table.Td>
+                          </Table.Tr>
+                        )}
+                      </Fragment>
+                    );
+                  })}
+                </Table.Tbody>
+              </Table>
+            </Table.ScrollContainer>
+          )}
+        </Card>
+      </Stack>
+
+      <Modal
+        opened={Boolean(historyInventoryId)}
+        onClose={() => setHistoryInventoryId(null)}
+        title="Movement history"
+        size="xl"
+      >
+        {historyInventoryId ? (
+          <Tabs defaultValue="activity">
+            <Tabs.List>
+              <Tabs.Tab value="activity">Activity</Tabs.Tab>
+              <Tabs.Tab value="movements">Movements</Tabs.Tab>
+            </Tabs.List>
+            <Tabs.Panel value="activity" pt="md">
+              <ActivityTimeline inventoryId={historyInventoryId} />
+            </Tabs.Panel>
+            <Tabs.Panel value="movements" pt="md">
+              <InventoryMovementHistoryTable inventoryId={historyInventoryId} />
+            </Tabs.Panel>
+          </Tabs>
+        ) : null}
+      </Modal>
+    </Container>
+  );
+}

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

@@ -37,6 +37,9 @@ import type {
   BulkInspectResult,
   ReadyToLoadRow,
   BulkDispatchResult,
+  AutoUnloadExportDjiboutiResult,
+  ExportTrain,
+  ExportTrainItem,
   ImportTrain,
   ImportTrainItem,
   ImportUnloadedItem,
@@ -167,6 +170,17 @@ export const warehouseService = {
     apiClient.get<ImportUnloadedItem[]>(URL_CONSTANTS.WAREHOUSE_INVENTORY.IMPORT_UNLOADED_QUEUE),
   importPickupReadyQueue: () =>
     apiClient.get<ImportUnloadedItem[]>(URL_CONSTANTS.WAREHOUSE_INVENTORY.IMPORT_PICKUP_READY_QUEUE),
+  exportDjiboutiArrivalQueue: () =>
+    apiClient.get<ExportTrain[]>(URL_CONSTANTS.WAREHOUSE_INVENTORY.EXPORT_DJIBOUTI_ARRIVAL_QUEUE),
+  exportDjiboutiTrainItems: (scheduleId: string) =>
+    apiClient.get<ExportTrainItem[]>(
+      URL_CONSTANTS.WAREHOUSE_INVENTORY.EXPORT_DJIBOUTI_TRAIN_ITEMS(scheduleId),
+    ),
+  autoUnloadExportAtDjibouti: (scheduleId: string) =>
+    apiClient.post<AutoUnloadExportDjiboutiResult>(
+      URL_CONSTANTS.WAREHOUSE_INVENTORY.EXPORT_AUTO_UNLOAD_AT_DJIBOUTI,
+      { scheduleId },
+    ),
   move: (id: string, payload: MoveInventoryPayload) =>
     apiClient.post<WarehouseInventoryItem>(URL_CONSTANTS.WAREHOUSE_INVENTORY.MOVE(id), payload),
   movements: (id: string) =>

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

@@ -24,6 +24,7 @@ export type WarehouseZoneType = (typeof WAREHOUSE_ZONE_TYPES)[number];
 
 export const INVENTORY_STATUSES = [
   'UNLOADED',
+  'UNLOADED_AT_DJIBOUTI_PORT',
   'RECEIVED',
   'STORED',
   'RESERVED',
@@ -56,6 +57,7 @@ export type InventoryAction =
  */
 export const INVENTORY_NEXT_ACTION: Record<InventoryStatus, InventoryAction | null> = {
   UNLOADED: 'store',
+  UNLOADED_AT_DJIBOUTI_PORT: null,
   RECEIVED: 'store',
   STORED: 'reserve',
   RESERVED: 'ready-for-loading',
@@ -236,12 +238,16 @@ export interface InventoryMovement {
 
 export const ACTIVITY_TYPES = [
   'INVENTORY_RECEIVED',
+  'INVENTORY_UNLOADED',
   'INVENTORY_STORED',
   'INVENTORY_MOVED',
   'INVENTORY_RESERVED',
   'READY_FOR_LOADING',
   'INVENTORY_LOADED',
   'INVENTORY_DISPATCHED',
+  'READY_FOR_PICKUP',
+  'INVENTORY_RELEASED',
+  'INVENTORY_DELIVERED',
 ] as const;
 export type ActivityType = (typeof ACTIVITY_TYPES)[number];
 
@@ -419,6 +425,7 @@ export interface ImportTrain {
   route: string | null;
   origin: string | null;
   destination: string | null;
+  departureTime?: string | null;
   arrivalTime: string | null;
   totalBookings: number;
   totalContainers: number;
@@ -433,6 +440,44 @@ export interface AutoUnloadArrivedResult {
   results: { bookingId: string; inventoryId?: string; status: string; reason?: string }[];
 }
 
+export type ExportTrain = ImportTrain & {
+  departureTime: string | null;
+};
+
+export interface ExportTrainItem {
+  bookingId: string;
+  bookingReference: string | null;
+  customerId: string | null;
+  customerName: string | null;
+  itemType: 'CONTAINER' | 'CARGO';
+  itemId: string | null;
+  inventoryId: string | null;
+  containerNumber: string | null;
+  cargoType: string | null;
+  weight: number | null;
+  origin: string | null;
+  destination: string | null;
+  trainSchedule: string | null;
+  arrivalTime: string | null;
+  currentStatus: string | null;
+}
+
+export interface AutoUnloadExportDjiboutiResult {
+  unloadedCount: number;
+  skippedCount: number;
+  failedCount: number;
+  results: Array<{
+    bookingId: string;
+    itemType: 'CONTAINER' | 'CARGO';
+    itemId?: string | null;
+    inventoryId?: string;
+    containerNumber?: string | null;
+    status: string;
+    message?: string;
+    reason?: string;
+  }>;
+}
+
 export interface ImportUnloadedItem {
   id: string;
   bookingId: string | null;