mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-30 04:08:11 +00:00
feat(warehouse): Receive Import/Export tabs with bulk receive + load-passed-export
- Backend: GET eligible-bookings?direction, POST receive-bulk, POST load-passed-export (reuse autoUnload/autoLoad patterns; no train-schedule/wagon logic changed) - Frontend: ReceiveInventoryModal split into Import/Export tabs with eligible PAID bookings table, select-all/bulk receive, and Load Passed Export Items button - Single-booking receive and all existing inventory row actions preserved Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hagernesh
@@ -1,71 +1,66 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Button, Group, Modal, NumberInput, Select, Stack, Textarea, TextInput } from '@mantine/core';
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Button,
|
||||
Checkbox,
|
||||
Group,
|
||||
Loader,
|
||||
Modal,
|
||||
NumberInput,
|
||||
Select,
|
||||
Stack,
|
||||
Table,
|
||||
Tabs,
|
||||
Text,
|
||||
Textarea,
|
||||
TextInput,
|
||||
} from '@mantine/core';
|
||||
import { Info, PackageSearch, Truck } from 'lucide-react';
|
||||
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import {
|
||||
useBulkReceive,
|
||||
useEligibleBookings,
|
||||
useLoadPassedExport,
|
||||
useReceiveInventory,
|
||||
useWarehouseYards,
|
||||
useWarehouseZones,
|
||||
useWarehouses,
|
||||
} from '@/hooks/useWarehouses';
|
||||
import type { ReceiveInventoryPayload } from '@/types/warehouse';
|
||||
import type { BulkReceiveResult, LoadPassedExportResult, ReceiveInventoryPayload } from '@/types/warehouse';
|
||||
import { BookingSelect } from './BookingSelect';
|
||||
import { extractErrorMessage } from './options';
|
||||
import { extractErrorMessage, formatNumber } from './options';
|
||||
|
||||
interface ReceiveInventoryModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
/** When supplied the booking field is locked to this booking. */
|
||||
/** When supplied the modal locks to a single booking (legacy single-receive). */
|
||||
bookingId?: string;
|
||||
bookingLabel?: string;
|
||||
onReceived?: () => void;
|
||||
}
|
||||
|
||||
interface FormState {
|
||||
bookingId: string;
|
||||
interface Location {
|
||||
warehouseId: string;
|
||||
yardId: string;
|
||||
zoneId: string;
|
||||
quantity: number | '';
|
||||
weight: number | '';
|
||||
volume: number | '';
|
||||
notes: string;
|
||||
}
|
||||
|
||||
const emptyForm = (bookingId?: string): FormState => ({
|
||||
bookingId: bookingId ?? '',
|
||||
warehouseId: '',
|
||||
yardId: '',
|
||||
zoneId: '',
|
||||
quantity: '',
|
||||
weight: '',
|
||||
volume: '',
|
||||
notes: '',
|
||||
});
|
||||
|
||||
export function ReceiveInventoryModal({
|
||||
opened,
|
||||
onClose,
|
||||
bookingId,
|
||||
bookingLabel,
|
||||
onReceived,
|
||||
}: ReceiveInventoryModalProps) {
|
||||
const { toast } = useToast();
|
||||
const receiveMutation = useReceiveInventory();
|
||||
const [form, setForm] = useState<FormState>(emptyForm(bookingId));
|
||||
|
||||
useEffect(() => {
|
||||
if (opened) setForm(emptyForm(bookingId));
|
||||
}, [opened, bookingId]);
|
||||
|
||||
// Cascading data — only ACTIVE warehouses are selectable for receiving.
|
||||
/** Cascading Warehouse → Yard → Zone selectors (ACTIVE only). */
|
||||
function LocationSelects({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: Location;
|
||||
onChange: (next: Location) => void;
|
||||
}) {
|
||||
const warehousesQuery = useWarehouses({ status: 'ACTIVE' });
|
||||
const yardsQuery = useWarehouseYards(form.warehouseId || undefined);
|
||||
const zonesQuery = useWarehouseZones(form.yardId || undefined);
|
||||
const yardsQuery = useWarehouseYards(value.warehouseId || undefined);
|
||||
const zonesQuery = useWarehouseZones(value.yardId || undefined);
|
||||
|
||||
const warehouseOptions = useMemo(
|
||||
() =>
|
||||
(warehousesQuery.data ?? []).map((w) => ({ value: w.id, label: `${w.name} (${w.code})` })),
|
||||
() => (warehousesQuery.data ?? []).map((w) => ({ value: w.id, label: `${w.name} (${w.code})` })),
|
||||
[warehousesQuery.data],
|
||||
);
|
||||
const yardOptions = useMemo(
|
||||
@@ -83,10 +78,307 @@ export function ReceiveInventoryModal({
|
||||
[zonesQuery.data],
|
||||
);
|
||||
|
||||
const submitting = receiveMutation.isPending;
|
||||
return (
|
||||
<Group grow align="flex-end">
|
||||
<Select
|
||||
label="Warehouse"
|
||||
placeholder={warehousesQuery.isLoading ? 'Loading…' : 'Select warehouse'}
|
||||
required
|
||||
searchable
|
||||
data={warehouseOptions}
|
||||
value={value.warehouseId || null}
|
||||
onChange={(v) => onChange({ warehouseId: v ?? '', yardId: '', zoneId: '' })}
|
||||
/>
|
||||
<Select
|
||||
label="Yard"
|
||||
placeholder={!value.warehouseId ? 'Select warehouse first' : 'Select yard'}
|
||||
required
|
||||
searchable
|
||||
disabled={!value.warehouseId}
|
||||
data={yardOptions}
|
||||
value={value.yardId || null}
|
||||
onChange={(v) => onChange({ ...value, yardId: v ?? '', zoneId: '' })}
|
||||
/>
|
||||
<Select
|
||||
label="Zone"
|
||||
placeholder={!value.yardId ? 'Select yard first' : 'Select zone'}
|
||||
required
|
||||
searchable
|
||||
disabled={!value.yardId}
|
||||
data={zoneOptions}
|
||||
value={value.zoneId || null}
|
||||
onChange={(v) => onChange({ ...value, zoneId: v ?? '' })}
|
||||
/>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
/** One tab: eligible PAID bookings for a direction, with bulk receive (+ export load). */
|
||||
function EligibleTab({
|
||||
direction,
|
||||
location,
|
||||
enabled,
|
||||
onChanged,
|
||||
}: {
|
||||
direction: 'IMPORT' | 'EXPORT';
|
||||
location: Location;
|
||||
enabled: boolean;
|
||||
onChanged?: () => void;
|
||||
}) {
|
||||
const { toast } = useToast();
|
||||
const { data: rows = [], isLoading } = useEligibleBookings(direction, enabled);
|
||||
const bulkReceive = useBulkReceive();
|
||||
const loadPassed = useLoadPassedExport();
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
|
||||
const locationReady = Boolean(location.warehouseId && location.yardId && location.zoneId);
|
||||
const allSelected = rows.length > 0 && selected.size === rows.length;
|
||||
const someSelected = selected.size > 0 && !allSelected;
|
||||
|
||||
const toggleAll = () =>
|
||||
setSelected(allSelected ? new Set() : new Set(rows.map((r) => r.id)));
|
||||
const toggleOne = (id: string) =>
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.has(id) ? next.delete(id) : next.add(id);
|
||||
return next;
|
||||
});
|
||||
|
||||
const receive = async (bookingIds: string[]) => {
|
||||
if (!locationReady) {
|
||||
toast({ variant: 'destructive', title: 'Select warehouse, yard and zone first' });
|
||||
return;
|
||||
}
|
||||
if (bookingIds.length === 0) {
|
||||
toast({ variant: 'destructive', title: 'Select at least one booking' });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = (await bulkReceive.mutateAsync({ direction, ...location, bookingIds })) as {
|
||||
data: BulkReceiveResult;
|
||||
};
|
||||
const r = res.data;
|
||||
toast({
|
||||
title: `${r.receivedCount} received`,
|
||||
description: r.skippedCount ? `${r.skippedCount} skipped` : undefined,
|
||||
});
|
||||
setSelected(new Set());
|
||||
onChanged?.();
|
||||
} catch (error) {
|
||||
toast({ variant: 'destructive', title: 'Receive failed', description: extractErrorMessage(error) });
|
||||
}
|
||||
};
|
||||
|
||||
const loadPassedExport = async () => {
|
||||
try {
|
||||
const res = (await loadPassed.mutateAsync(undefined)) as { data: LoadPassedExportResult };
|
||||
const r = res.data;
|
||||
toast({
|
||||
title: `${r.loadedCount} loaded`,
|
||||
description: r.skippedCount ? `${r.skippedCount} skipped — inspection not passed` : undefined,
|
||||
});
|
||||
onChanged?.();
|
||||
} catch (error) {
|
||||
toast({ variant: 'destructive', title: 'Load failed', description: extractErrorMessage(error) });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Stack gap="sm" mt="sm">
|
||||
<Group justify="space-between">
|
||||
<Text size="sm" c="dimmed">
|
||||
Selected: <b>{selected.size}</b> / {rows.length} eligible
|
||||
</Text>
|
||||
<Group gap="xs">
|
||||
{direction === 'EXPORT' && (
|
||||
<Button
|
||||
size="compact-sm"
|
||||
variant="light"
|
||||
color="teal"
|
||||
leftSection={<Truck size={14} />}
|
||||
loading={loadPassed.isPending}
|
||||
onClick={loadPassedExport}
|
||||
>
|
||||
Load Passed Export Items
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="compact-sm"
|
||||
variant="default"
|
||||
disabled={!locationReady || rows.length === 0}
|
||||
loading={bulkReceive.isPending}
|
||||
onClick={() => receive(rows.map((r) => r.id))}
|
||||
>
|
||||
Receive All Eligible
|
||||
</Button>
|
||||
<Button
|
||||
size="compact-sm"
|
||||
disabled={!locationReady || selected.size === 0}
|
||||
loading={bulkReceive.isPending}
|
||||
onClick={() => receive([...selected])}
|
||||
>
|
||||
Receive Selected
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
{!locationReady && (
|
||||
<Alert icon={<Info size={16} />} color="orange" variant="light">
|
||||
<Text size="sm">Select a warehouse, yard and zone above before receiving.</Text>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{isLoading ? (
|
||||
<Group justify="center" py="lg">
|
||||
<Loader size="sm" />
|
||||
</Group>
|
||||
) : rows.length === 0 ? (
|
||||
<Text c="dimmed" ta="center" py="lg" size="sm">
|
||||
No eligible PAID {direction.toLowerCase()} bookings to receive.
|
||||
</Text>
|
||||
) : (
|
||||
<Table.ScrollContainer minWidth={900}>
|
||||
<Table highlightOnHover verticalSpacing="xs" striped>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th w={40}>
|
||||
<Checkbox
|
||||
aria-label="Select all"
|
||||
checked={allSelected}
|
||||
indeterminate={someSelected}
|
||||
onChange={toggleAll}
|
||||
/>
|
||||
</Table.Th>
|
||||
<Table.Th>Booking</Table.Th>
|
||||
<Table.Th>Customer</Table.Th>
|
||||
<Table.Th>Origin</Table.Th>
|
||||
<Table.Th>Destination</Table.Th>
|
||||
<Table.Th>Freight</Table.Th>
|
||||
<Table.Th>Cargo</Table.Th>
|
||||
<Table.Th>Weight</Table.Th>
|
||||
<Table.Th>Payment</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{rows.map((r) => (
|
||||
<Table.Tr key={r.id}>
|
||||
<Table.Td>
|
||||
<Checkbox
|
||||
aria-label={`Select ${r.reference}`}
|
||||
checked={selected.has(r.id)}
|
||||
onChange={() => toggleOne(r.id)}
|
||||
/>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" fw={600}>
|
||||
{r.reference}
|
||||
</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.cargo ?? '—'}</Table.Td>
|
||||
<Table.Td>{formatNumber(Number(r.weight))}</Table.Td>
|
||||
<Table.Td>
|
||||
<Badge color="green" variant="light" size="sm">
|
||||
{r.paymentStatus}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Table.ScrollContainer>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
/** New bulk Receive: Import / Export tabs with eligible PAID bookings. */
|
||||
function BulkReceiveModal({ opened, onClose, onReceived }: ReceiveInventoryModalProps) {
|
||||
const [location, setLocation] = useState<Location>({ warehouseId: '', yardId: '', zoneId: '' });
|
||||
const [tab, setTab] = useState<'IMPORT' | 'EXPORT'>('IMPORT');
|
||||
|
||||
useEffect(() => {
|
||||
if (opened) setLocation({ warehouseId: '', yardId: '', zoneId: '' });
|
||||
}, [opened]);
|
||||
|
||||
return (
|
||||
<Modal opened={opened} onClose={onClose} title="Receive at warehouse" centered size="80rem">
|
||||
<Stack gap="md">
|
||||
<LocationSelects value={location} onChange={setLocation} />
|
||||
|
||||
<Tabs value={tab} onChange={(v) => setTab((v as 'IMPORT' | 'EXPORT') ?? 'IMPORT')}>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab value="IMPORT" leftSection={<PackageSearch size={16} />}>
|
||||
Import
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab value="EXPORT" leftSection={<Truck size={16} />}>
|
||||
Export
|
||||
</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Panel value="IMPORT">
|
||||
<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.Panel>
|
||||
</Tabs>
|
||||
|
||||
<Group justify="flex-end" mt="sm">
|
||||
<Button variant="default" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
interface SingleFormState {
|
||||
warehouseId: string;
|
||||
yardId: string;
|
||||
zoneId: string;
|
||||
quantity: number | '';
|
||||
weight: number | '';
|
||||
volume: number | '';
|
||||
notes: string;
|
||||
}
|
||||
|
||||
/** Legacy single-booking receive — used when a specific bookingId is supplied. */
|
||||
function SingleBookingReceiveModal({
|
||||
opened,
|
||||
onClose,
|
||||
bookingId,
|
||||
bookingLabel,
|
||||
onReceived,
|
||||
}: ReceiveInventoryModalProps) {
|
||||
const { toast } = useToast();
|
||||
const receiveMutation = useReceiveInventory();
|
||||
const [selectedBooking, setSelectedBooking] = useState(bookingId ?? '');
|
||||
const [form, setForm] = useState<SingleFormState>({
|
||||
warehouseId: '',
|
||||
yardId: '',
|
||||
zoneId: '',
|
||||
quantity: '',
|
||||
weight: '',
|
||||
volume: '',
|
||||
notes: '',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (opened) {
|
||||
setSelectedBooking(bookingId ?? '');
|
||||
setForm({ warehouseId: '', yardId: '', zoneId: '', quantity: '', weight: '', volume: '', notes: '' });
|
||||
}
|
||||
}, [opened, bookingId]);
|
||||
|
||||
const location: Location = { warehouseId: form.warehouseId, yardId: form.yardId, zoneId: form.zoneId };
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.bookingId.trim()) {
|
||||
if (!selectedBooking.trim()) {
|
||||
toast({ variant: 'destructive', title: 'Booking is required' });
|
||||
return;
|
||||
}
|
||||
@@ -98,9 +390,8 @@ export function ReceiveInventoryModal({
|
||||
toast({ variant: 'destructive', title: 'Quantity and weight are required' });
|
||||
return;
|
||||
}
|
||||
|
||||
const payload: ReceiveInventoryPayload = {
|
||||
bookingId: form.bookingId.trim(),
|
||||
bookingId: selectedBooking.trim(),
|
||||
warehouseId: form.warehouseId,
|
||||
yardId: form.yardId,
|
||||
zoneId: form.zoneId,
|
||||
@@ -109,10 +400,9 @@ export function ReceiveInventoryModal({
|
||||
volume: form.volume === '' ? undefined : Number(form.volume),
|
||||
notes: form.notes.trim() || undefined,
|
||||
};
|
||||
|
||||
try {
|
||||
await receiveMutation.mutateAsync(payload);
|
||||
toast({ title: 'Inventory received', description: 'Status set to ARRIVED_AT_WAREHOUSE' });
|
||||
toast({ title: 'Inventory received' });
|
||||
onReceived?.();
|
||||
onClose();
|
||||
} catch (error) {
|
||||
@@ -126,46 +416,10 @@ export function ReceiveInventoryModal({
|
||||
{bookingId ? (
|
||||
<TextInput label="Booking" value={bookingLabel ?? bookingId} readOnly />
|
||||
) : (
|
||||
<BookingSelect
|
||||
label="Booking"
|
||||
value={form.bookingId}
|
||||
onChange={(v) => setForm((f) => ({ ...f, bookingId: v }))}
|
||||
/>
|
||||
<BookingSelect label="Booking" value={selectedBooking} onChange={setSelectedBooking} />
|
||||
)}
|
||||
|
||||
<Select
|
||||
label="Warehouse"
|
||||
placeholder={warehousesQuery.isLoading ? 'Loading…' : 'Select warehouse'}
|
||||
required
|
||||
searchable
|
||||
data={warehouseOptions}
|
||||
value={form.warehouseId || null}
|
||||
onChange={(value) =>
|
||||
setForm((f) => ({ ...f, warehouseId: value ?? '', yardId: '', zoneId: '' }))
|
||||
}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Yard"
|
||||
placeholder={!form.warehouseId ? 'Select a warehouse first' : 'Select yard'}
|
||||
required
|
||||
searchable
|
||||
disabled={!form.warehouseId}
|
||||
data={yardOptions}
|
||||
value={form.yardId || null}
|
||||
onChange={(value) => setForm((f) => ({ ...f, yardId: value ?? '', zoneId: '' }))}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Zone"
|
||||
placeholder={!form.yardId ? 'Select a yard first' : 'Select zone'}
|
||||
required
|
||||
searchable
|
||||
disabled={!form.yardId}
|
||||
data={zoneOptions}
|
||||
value={form.zoneId || null}
|
||||
onChange={(value) => setForm((f) => ({ ...f, zoneId: value ?? '' }))}
|
||||
/>
|
||||
<LocationSelects value={location} onChange={(next) => setForm((f) => ({ ...f, ...next }))} />
|
||||
|
||||
<Group grow>
|
||||
<NumberInput
|
||||
@@ -197,14 +451,17 @@ export function ReceiveInventoryModal({
|
||||
autosize
|
||||
minRows={2}
|
||||
value={form.notes}
|
||||
onChange={(e) => { const v = e.currentTarget.value; setForm((f) => ({ ...f, notes: v })); }}
|
||||
onChange={(e) => {
|
||||
const v = e.currentTarget.value;
|
||||
setForm((f) => ({ ...f, notes: v }));
|
||||
}}
|
||||
/>
|
||||
|
||||
<Group justify="flex-end" mt="sm">
|
||||
<Button variant="default" onClick={onClose} disabled={submitting}>
|
||||
<Button variant="default" onClick={onClose} disabled={receiveMutation.isPending}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} loading={submitting}>
|
||||
<Button onClick={handleSubmit} loading={receiveMutation.isPending}>
|
||||
Receive inventory
|
||||
</Button>
|
||||
</Group>
|
||||
@@ -212,3 +469,8 @@ export function ReceiveInventoryModal({
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export function ReceiveInventoryModal(props: ReceiveInventoryModalProps) {
|
||||
// Locked to a booking → legacy single receive; otherwise the Import/Export bulk flow.
|
||||
return props.bookingId ? <SingleBookingReceiveModal {...props} /> : <BulkReceiveModal {...props} />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user