mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-08 06:35:42 +00:00
DJbouti port Export Unloading
This commit is contained in:
hagiye
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user