feat(warehouse): route-based receive direction + Export Receive Queue (Batch 2)

- Direction derived from route via existing deriveTradeDirection (eligible-bookings,
  bulk receive guard, getBookingDirection) instead of stored trade_direction
- Export tab sub-tabs (Receive Queue + Ready-to-Load/Loaded/Dispatch placeholders)
- Receive Queue: full column set + per-row Receive; eligible-bookings adds customerId
- create/update warehouse: map DB errors to 400; dashboard: distinct per-status colors

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hagernesh
2026-06-20 10:26:50 +00:00
parent 0005b2edb3
commit b7a831b063
5 changed files with 174 additions and 63 deletions

View File

@@ -237,7 +237,7 @@ function EligibleTab({
No eligible PAID {direction.toLowerCase()} bookings to receive.
</Text>
) : (
<Table.ScrollContainer minWidth={900}>
<Table.ScrollContainer minWidth={1700}>
<Table highlightOnHover verticalSpacing="xs" striped>
<Table.Thead>
<Table.Tr>
@@ -249,14 +249,20 @@ function EligibleTab({
onChange={toggleAll}
/>
</Table.Th>
<Table.Th>Booking</Table.Th>
<Table.Th>Customer</Table.Th>
<Table.Th>Booking Ref</Table.Th>
<Table.Th>Booking ID</Table.Th>
<Table.Th>Customer ID</Table.Th>
<Table.Th>Customer Name</Table.Th>
<Table.Th>Origin</Table.Th>
<Table.Th>Destination</Table.Th>
<Table.Th>Freight</Table.Th>
<Table.Th>Cargo</Table.Th>
<Table.Th>Route</Table.Th>
<Table.Th>Container #</Table.Th>
<Table.Th>Cargo Type</Table.Th>
<Table.Th>Weight</Table.Th>
<Table.Th>Payment</Table.Th>
<Table.Th>Current Status</Table.Th>
<Table.Th>Inspection</Table.Th>
<Table.Th ta="right">Actions</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
@@ -274,10 +280,19 @@ function EligibleTab({
{r.reference}
</Text>
</Table.Td>
<Table.Td>
<Text size="xs" c="dimmed">{r.id.slice(0, 8)}</Text>
</Table.Td>
<Table.Td>
<Text size="xs" c="dimmed">{r.customerId ? `${r.customerId.slice(0, 8)}` : '—'}</Text>
</Table.Td>
<Table.Td>{r.customer ?? '—'}</Table.Td>
<Table.Td>{r.origin ?? '—'}</Table.Td>
<Table.Td>{r.destination ?? '—'}</Table.Td>
<Table.Td>{r.freightType ?? '—'}</Table.Td>
<Table.Td>
{r.origin || r.destination ? `${r.origin ?? '?'}${r.destination ?? '?'}` : '—'}
</Table.Td>
<Table.Td></Table.Td>
<Table.Td>{r.cargo ?? '—'}</Table.Td>
<Table.Td>{formatNumber(Number(r.weight))}</Table.Td>
<Table.Td>
@@ -285,6 +300,23 @@ function EligibleTab({
{r.paymentStatus}
</Badge>
</Table.Td>
<Table.Td>
<Badge color="gray" variant="light" size="sm">
{r.status ?? '—'}
</Badge>
</Table.Td>
<Table.Td></Table.Td>
<Table.Td ta="right">
<Button
size="compact-xs"
variant="light"
disabled={!locationReady}
loading={bulkReceive.isPending}
onClick={() => receive([r.id])}
>
Receive
</Button>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
@@ -323,7 +355,33 @@ function BulkReceiveModal({ opened, onClose, onReceived }: ReceiveInventoryModal
<EligibleTab direction="IMPORT" location={location} enabled={opened} onChanged={onReceived} />
</Tabs.Panel>
<Tabs.Panel value="EXPORT">
<EligibleTab direction="EXPORT" location={location} enabled={opened} onChanged={onReceived} />
<Tabs defaultValue="receive-queue" mt="xs">
<Tabs.List>
<Tabs.Tab value="receive-queue">Receive Queue</Tabs.Tab>
<Tabs.Tab value="ready-to-load">Ready To Load</Tabs.Tab>
<Tabs.Tab value="loaded">Loaded</Tabs.Tab>
<Tabs.Tab value="dispatch-queue">Dispatch Queue</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="receive-queue">
<EligibleTab direction="EXPORT" location={location} enabled={opened} onChanged={onReceived} />
</Tabs.Panel>
<Tabs.Panel value="ready-to-load">
<Text c="dimmed" ta="center" py="lg" size="sm">
Ready To Load coming in the next batch.
</Text>
</Tabs.Panel>
<Tabs.Panel value="loaded">
<Text c="dimmed" ta="center" py="lg" size="sm">
Loaded coming in the next batch.
</Text>
</Tabs.Panel>
<Tabs.Panel value="dispatch-queue">
<Text c="dimmed" ta="center" py="lg" size="sm">
Dispatch Queue coming in the next batch.
</Text>
</Tabs.Panel>
</Tabs>
</Tabs.Panel>
</Tabs>

View File

@@ -23,15 +23,15 @@ interface WarehouseDashboardChartsProps {
}
const ORANGE = '#f08c00';
const GREEN = '#5bbf4a';
const GREEN = '#22c55e'; // green from bookings
/** Inventory lifecycle status series — alternating orange / light green. */
/** Inventory lifecycle status series — one distinct color per status (aligned with status badges). */
const STATUS_SERIES = [
{ key: 'stored', label: 'Stored', color: ORANGE },
{ key: 'reserved', label: 'Reserved', color: GREEN },
{ key: 'readyForLoading', label: 'Ready', color: ORANGE },
{ key: 'loaded', label: 'Loaded', color: GREEN },
{ key: 'dispatched', label: 'Dispatched', color: ORANGE },
{ key: 'stored', label: 'Stored', color: '#228be6' }, // blue
{ key: 'reserved', label: 'Reserved', color: '#ae3ec9' }, // grape
{ key: 'readyForLoading', label: 'Ready', color: '#f08c00' }, // orange
{ key: 'loaded', label: 'Loaded', color: '#12b886' }, // teal
{ key: 'dispatched', label: 'Dispatched', color: GREEN }, // green (bookings)
] as const;
type Granularity = 'week' | 'month' | 'year';
@@ -157,8 +157,8 @@ export function WarehouseDashboardCharts({ data }: WarehouseDashboardChartsProps
outerRadius={95}
paddingAngle={2}
>
{statusData.map((entry, i) => (
<Cell key={entry.name} fill={i % 2 === 0 ? ORANGE : GREEN} />
{statusData.map((entry) => (
<Cell key={entry.name} fill={entry.color} />
))}
</Pie>
<Tooltip />

View File

@@ -336,6 +336,7 @@ export interface DeliverInventoryPayload {
export interface EligibleBooking {
id: string;
reference: string;
customerId: string | null;
customer: string | null;
direction: string;
origin: string | null;