569 lines
28 KiB
TypeScript
569 lines
28 KiB
TypeScript
import { permissions } from "@mrp/shared";
|
|
import type { WarehouseLocationOptionDto } from "@mrp/shared/dist/inventory/types.js";
|
|
import type { ShipmentDetailDto, ShipmentPickInput, ShipmentStatus, ShipmentSummaryDto } from "@mrp/shared/dist/shipping/types.js";
|
|
import { useEffect, useState } from "react";
|
|
import { Link, useParams } from "react-router-dom";
|
|
|
|
import { useAuth } from "../../auth/AuthProvider";
|
|
import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
|
|
import { FileAttachmentsPanel } from "../../components/FileAttachmentsPanel";
|
|
import { api, ApiError } from "../../lib/api";
|
|
import { shipmentStatusOptions } from "./config";
|
|
import { ShipmentStatusBadge } from "./ShipmentStatusBadge";
|
|
|
|
function buildInitialPickForm(
|
|
shipment: ShipmentDetailDto | null,
|
|
locationOptions: WarehouseLocationOptionDto[],
|
|
current?: ShipmentPickInput
|
|
): ShipmentPickInput {
|
|
const remainingLine = shipment?.lines.find((line) => line.remainingQuantity > 0) ?? shipment?.lines[0] ?? null;
|
|
const fallbackLocation =
|
|
locationOptions.find((location) => location.warehouseId === current?.warehouseId) ?? locationOptions[0] ?? null;
|
|
|
|
return {
|
|
salesOrderLineId: current?.salesOrderLineId && shipment?.lines.some((line) => line.salesOrderLineId === current.salesOrderLineId)
|
|
? current.salesOrderLineId
|
|
: remainingLine?.salesOrderLineId ?? "",
|
|
warehouseId: current?.warehouseId || fallbackLocation?.warehouseId || "",
|
|
locationId: current?.locationId || fallbackLocation?.locationId || "",
|
|
quantity: current?.quantity ?? Math.min(remainingLine?.remainingQuantity ?? 1, 1),
|
|
notes: current?.notes ?? "",
|
|
};
|
|
}
|
|
|
|
function formatDateTime(value: string) {
|
|
return new Date(value).toLocaleString();
|
|
}
|
|
|
|
export function ShipmentDetailPage() {
|
|
const { token, user } = useAuth();
|
|
const { shipmentId } = useParams();
|
|
const [shipment, setShipment] = useState<ShipmentDetailDto | null>(null);
|
|
const [relatedShipments, setRelatedShipments] = useState<ShipmentSummaryDto[]>([]);
|
|
const [locationOptions, setLocationOptions] = useState<WarehouseLocationOptionDto[]>([]);
|
|
const [pickForm, setPickForm] = useState<ShipmentPickInput>({
|
|
salesOrderLineId: "",
|
|
warehouseId: "",
|
|
locationId: "",
|
|
quantity: 1,
|
|
notes: "",
|
|
});
|
|
const [status, setStatus] = useState("Loading shipment...");
|
|
const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
|
|
const [isPostingPick, setIsPostingPick] = useState(false);
|
|
const [activeDocumentAction, setActiveDocumentAction] = useState<"packing-slip" | "label" | "bol" | null>(null);
|
|
const [pendingConfirmation, setPendingConfirmation] = useState<
|
|
| {
|
|
title: string;
|
|
description: string;
|
|
impact: string;
|
|
recovery: string;
|
|
confirmLabel: string;
|
|
confirmationLabel?: string;
|
|
confirmationValue?: string;
|
|
nextStatus: ShipmentStatus;
|
|
}
|
|
| null
|
|
>(null);
|
|
|
|
const canManage = user?.permissions.includes(permissions.shippingWrite) ?? false;
|
|
|
|
async function loadShipmentDetail(activeToken: string, activeShipmentId: string) {
|
|
const [nextShipment, nextLocationOptions] = await Promise.all([
|
|
api.getShipment(activeToken, activeShipmentId),
|
|
canManage ? api.getWarehouseLocationOptions(activeToken) : Promise.resolve<WarehouseLocationOptionDto[]>([]),
|
|
]);
|
|
const shipments = await api.getShipments(activeToken, { salesOrderId: nextShipment.salesOrderId });
|
|
|
|
setShipment(nextShipment);
|
|
setLocationOptions(nextLocationOptions);
|
|
setRelatedShipments(shipments.filter((candidate) => candidate.id !== activeShipmentId));
|
|
setPickForm((current) => buildInitialPickForm(nextShipment, nextLocationOptions, current));
|
|
setStatus("Shipment loaded.");
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!token || !shipmentId) {
|
|
return;
|
|
}
|
|
|
|
loadShipmentDetail(token, shipmentId).catch((error: unknown) => {
|
|
const message = error instanceof ApiError ? error.message : "Unable to load shipment.";
|
|
setStatus(message);
|
|
});
|
|
}, [shipmentId, token, canManage]);
|
|
|
|
const selectedLine = shipment?.lines.find((line) => line.salesOrderLineId === pickForm.salesOrderLineId) ?? null;
|
|
const availableLocations = locationOptions.filter((location) => !pickForm.warehouseId || location.warehouseId === pickForm.warehouseId);
|
|
const warehouseOptions = Array.from(
|
|
new Map(locationOptions.map((location) => [location.warehouseId, { id: location.warehouseId, label: `${location.warehouseCode} · ${location.warehouseName}` }])).values()
|
|
);
|
|
const totalOrderedQuantity = shipment?.lines.reduce((sum, line) => sum + line.orderedQuantity, 0) ?? 0;
|
|
const totalPickedQuantity = shipment?.lines.reduce((sum, line) => sum + line.pickedQuantity, 0) ?? 0;
|
|
|
|
async function applyStatusChange(nextStatus: ShipmentStatus) {
|
|
if (!token || !shipment) {
|
|
return;
|
|
}
|
|
|
|
setIsUpdatingStatus(true);
|
|
setStatus("Updating shipment status...");
|
|
try {
|
|
const nextShipment = await api.updateShipmentStatus(token, shipment.id, nextStatus);
|
|
setShipment(nextShipment);
|
|
setPickForm((current) => buildInitialPickForm(nextShipment, locationOptions, current));
|
|
setStatus("Shipment status updated. Verify carrier paperwork, inventory issue progress, and sales-order expectations.");
|
|
} catch (error: unknown) {
|
|
const message = error instanceof ApiError ? error.message : "Unable to update shipment status.";
|
|
setStatus(message);
|
|
} finally {
|
|
setIsUpdatingStatus(false);
|
|
}
|
|
}
|
|
|
|
function handleStatusChange(nextStatus: ShipmentStatus) {
|
|
if (!shipment) {
|
|
return;
|
|
}
|
|
|
|
const label = shipmentStatusOptions.find((option) => option.value === nextStatus)?.label ?? nextStatus;
|
|
setPendingConfirmation({
|
|
title: `Set shipment to ${label}`,
|
|
description: `Update shipment ${shipment.shipmentNumber} from ${shipment.status} to ${nextStatus}.`,
|
|
impact:
|
|
nextStatus === "DELIVERED"
|
|
? "This marks delivery complete and can affect customer communication, project delivery status, and shipment closeout review."
|
|
: nextStatus === "SHIPPED"
|
|
? "This marks the shipment as outbound and should only happen after stock has been picked and packed from real inventory locations."
|
|
: "This changes the logistics state used by related shipping and sales workflows.",
|
|
recovery: "If the status is wrong, return the shipment to the correct state and confirm pick quantities still match the physical shipment.",
|
|
confirmLabel: `Set ${label}`,
|
|
confirmationLabel: nextStatus === "DELIVERED" ? "Type shipment number to confirm:" : undefined,
|
|
confirmationValue: nextStatus === "DELIVERED" ? shipment.shipmentNumber : undefined,
|
|
nextStatus,
|
|
});
|
|
}
|
|
|
|
async function handleOpenDocument(kind: "packing-slip" | "label" | "bol") {
|
|
if (!token || !shipment) {
|
|
return;
|
|
}
|
|
|
|
setActiveDocumentAction(kind);
|
|
setStatus(
|
|
kind === "packing-slip"
|
|
? "Rendering packing slip PDF..."
|
|
: kind === "label"
|
|
? "Rendering shipping label PDF..."
|
|
: "Rendering bill of lading PDF..."
|
|
);
|
|
try {
|
|
const blob =
|
|
kind === "packing-slip"
|
|
? await api.getShipmentPackingSlipPdf(token, shipment.id)
|
|
: kind === "label"
|
|
? await api.getShipmentLabelPdf(token, shipment.id)
|
|
: await api.getShipmentBillOfLadingPdf(token, shipment.id);
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
window.open(objectUrl, "_blank", "noopener,noreferrer");
|
|
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
|
|
setStatus(
|
|
kind === "packing-slip"
|
|
? "Packing slip PDF rendered."
|
|
: kind === "label"
|
|
? "Shipping label PDF rendered."
|
|
: "Bill of lading PDF rendered."
|
|
);
|
|
} catch (error: unknown) {
|
|
const message =
|
|
error instanceof ApiError
|
|
? error.message
|
|
: kind === "packing-slip"
|
|
? "Unable to render packing slip PDF."
|
|
: kind === "label"
|
|
? "Unable to render shipping label PDF."
|
|
: "Unable to render bill of lading PDF.";
|
|
setStatus(message);
|
|
} finally {
|
|
setActiveDocumentAction(null);
|
|
}
|
|
}
|
|
|
|
async function handlePostPick() {
|
|
if (!token || !shipment || !selectedLine) {
|
|
return;
|
|
}
|
|
|
|
setIsPostingPick(true);
|
|
setStatus("Posting shipment pick and issuing stock...");
|
|
try {
|
|
const nextShipment = await api.postShipmentPick(token, shipment.id, {
|
|
...pickForm,
|
|
quantity: Number(pickForm.quantity),
|
|
});
|
|
setShipment(nextShipment);
|
|
setPickForm(buildInitialPickForm(nextShipment, locationOptions));
|
|
setStatus("Shipment pick posted. Inventory was issued from the selected stock location.");
|
|
} catch (error: unknown) {
|
|
const message = error instanceof ApiError ? error.message : "Unable to post shipment pick.";
|
|
setStatus(message);
|
|
} finally {
|
|
setIsPostingPick(false);
|
|
}
|
|
}
|
|
|
|
if (!shipment) {
|
|
return <div className="rounded-[20px] border border-line/70 bg-surface/90 p-4 text-sm text-muted shadow-panel">{status}</div>;
|
|
}
|
|
|
|
return (
|
|
<section className="space-y-4">
|
|
<div className="surface-panel">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
|
|
<div>
|
|
<p className="section-kicker">SHIPMENT</p>
|
|
<h3 className="module-title">{shipment.shipmentNumber}</h3>
|
|
<p className="mt-1 text-sm text-text">{shipment.salesOrderNumber} / {shipment.customerName}</p>
|
|
<div className="mt-3 flex flex-wrap items-center gap-3">
|
|
<ShipmentStatusBadge status={shipment.status} />
|
|
<span className="text-xs text-muted">{status}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Link to="/shipping/shipments" className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Back to shipments</Link>
|
|
<Link to={`/sales/orders/${shipment.salesOrderId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Open sales order</Link>
|
|
<button type="button" onClick={() => handleOpenDocument("packing-slip")} disabled={activeDocumentAction !== null} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">
|
|
{activeDocumentAction === "packing-slip" ? "Rendering PDF..." : "Open packing slip"}
|
|
</button>
|
|
<button type="button" onClick={() => handleOpenDocument("label")} disabled={activeDocumentAction !== null} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">
|
|
{activeDocumentAction === "label" ? "Rendering PDF..." : "Open shipping label"}
|
|
</button>
|
|
<button type="button" onClick={() => handleOpenDocument("bol")} disabled={activeDocumentAction !== null} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">
|
|
{activeDocumentAction === "bol" ? "Rendering PDF..." : "Open bill of lading"}
|
|
</button>
|
|
{canManage ? (
|
|
<Link to={`/shipping/shipments/${shipment.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">Edit shipment</Link>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{canManage ? (
|
|
<section className="surface-panel">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<p className="section-kicker">QUICK ACTIONS</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{shipmentStatusOptions.map((option) => (
|
|
<button key={option.value} type="button" onClick={() => handleStatusChange(option.value)} disabled={isUpdatingStatus || shipment.status === option.value} className="rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
<section className="grid gap-3 xl:grid-cols-4">
|
|
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Carrier</p>
|
|
<div className="mt-2 text-base font-bold text-text">{shipment.carrier || "Not set"}</div>
|
|
</article>
|
|
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Ordered Units</p>
|
|
<div className="mt-2 text-base font-bold text-text">{totalOrderedQuantity}</div>
|
|
</article>
|
|
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Picked Units</p>
|
|
<div className="mt-2 text-base font-bold text-text">{totalPickedQuantity}</div>
|
|
</article>
|
|
<article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Packages</p>
|
|
<div className="mt-2 text-base font-bold text-text">{shipment.packageCount}</div>
|
|
</article>
|
|
</section>
|
|
|
|
<div className="grid gap-3 xl:grid-cols-[minmax(0,1.3fr)_minmax(340px,0.9fr)]">
|
|
<article className="surface-panel">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="section-kicker">SHIPMENT LINES</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-line/60 text-sm">
|
|
<thead>
|
|
<tr className="text-left text-xs uppercase tracking-[0.16em] text-muted">
|
|
<th className="pb-3 pr-3 font-semibold">Item</th>
|
|
<th className="pb-3 pr-3 font-semibold">Description</th>
|
|
<th className="pb-3 pr-3 font-semibold">Ordered</th>
|
|
<th className="pb-3 pr-3 font-semibold">Picked</th>
|
|
<th className="pb-3 font-semibold">Remaining</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-line/50">
|
|
{shipment.lines.map((line) => (
|
|
<tr key={line.salesOrderLineId}>
|
|
<td className="py-3 pr-3 align-top">
|
|
<div className="font-semibold text-text">{line.itemSku}</div>
|
|
<div className="text-xs text-muted">{line.itemName}</div>
|
|
</td>
|
|
<td className="py-3 pr-3 align-top text-text">{line.description}</td>
|
|
<td className="py-3 pr-3 align-top text-text">{line.orderedQuantity} {line.unitOfMeasure}</td>
|
|
<td className="py-3 pr-3 align-top text-text">{line.pickedQuantity} {line.unitOfMeasure}</td>
|
|
<td className="py-3 align-top">
|
|
<span className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${line.remainingQuantity > 0 ? "bg-amber-500/15 text-amber-700 dark:text-amber-300" : "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"}`}>
|
|
{line.remainingQuantity} {line.unitOfMeasure}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</article>
|
|
|
|
<article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Timing</p>
|
|
<dl className="mt-5 grid gap-3">
|
|
<div>
|
|
<dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Ship Date</dt>
|
|
<dd className="mt-1 text-sm text-text">{shipment.shipDate ? new Date(shipment.shipDate).toLocaleDateString() : "Not set"}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Created</dt>
|
|
<dd className="mt-1 text-sm text-text">{formatDateTime(shipment.createdAt)}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Updated</dt>
|
|
<dd className="mt-1 text-sm text-text">{formatDateTime(shipment.updatedAt)}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Tracking</dt>
|
|
<dd className="mt-1 text-sm text-text">{shipment.trackingNumber || "Not set"}</dd>
|
|
</div>
|
|
</dl>
|
|
</article>
|
|
</div>
|
|
|
|
{canManage ? (
|
|
<section className="surface-panel">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
|
|
<div>
|
|
<p className="section-kicker">PICK AND ISSUE FROM STOCK</p>
|
|
</div>
|
|
<div className="rounded-[16px] border border-line/70 bg-page/60 px-3 py-2 text-xs text-muted">
|
|
Select the sales-order line, source location, and quantity you are physically picking.
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-5">
|
|
<label className="flex flex-col gap-2 text-sm text-text">
|
|
<span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Shipment line</span>
|
|
<select
|
|
value={pickForm.salesOrderLineId}
|
|
onChange={(event) => {
|
|
const nextLine = shipment.lines.find((line) => line.salesOrderLineId === event.target.value) ?? null;
|
|
setPickForm((current) => ({
|
|
...current,
|
|
salesOrderLineId: event.target.value,
|
|
quantity: Math.min(nextLine?.remainingQuantity ?? 1, 1),
|
|
}));
|
|
}}
|
|
className="rounded-2xl border border-line/70 bg-page px-3 py-2 text-sm text-text outline-none"
|
|
>
|
|
{shipment.lines.map((line) => (
|
|
<option key={line.salesOrderLineId} value={line.salesOrderLineId}>
|
|
{line.itemSku} / remaining {line.remainingQuantity} {line.unitOfMeasure}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label className="flex flex-col gap-2 text-sm text-text">
|
|
<span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Warehouse</span>
|
|
<select
|
|
value={pickForm.warehouseId}
|
|
onChange={(event) => {
|
|
const nextWarehouseId = event.target.value;
|
|
const nextLocation = locationOptions.find((location) => location.warehouseId === nextWarehouseId) ?? null;
|
|
setPickForm((current) => ({
|
|
...current,
|
|
warehouseId: nextWarehouseId,
|
|
locationId: nextLocation?.locationId ?? "",
|
|
}));
|
|
}}
|
|
className="rounded-2xl border border-line/70 bg-page px-3 py-2 text-sm text-text outline-none"
|
|
>
|
|
{warehouseOptions.map((warehouse) => (
|
|
<option key={warehouse.id} value={warehouse.id}>
|
|
{warehouse.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label className="flex flex-col gap-2 text-sm text-text">
|
|
<span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Location</span>
|
|
<select
|
|
value={pickForm.locationId}
|
|
onChange={(event) => setPickForm((current) => ({ ...current, locationId: event.target.value }))}
|
|
className="rounded-2xl border border-line/70 bg-page px-3 py-2 text-sm text-text outline-none"
|
|
>
|
|
{availableLocations.map((location) => (
|
|
<option key={location.locationId} value={location.locationId}>
|
|
{location.warehouseCode} / {location.locationCode} / {location.locationName}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<label className="flex flex-col gap-2 text-sm text-text">
|
|
<span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Quantity</span>
|
|
<input
|
|
type="number"
|
|
min={0.0001}
|
|
step="any"
|
|
value={pickForm.quantity}
|
|
onChange={(event) => setPickForm((current) => ({ ...current, quantity: Number(event.target.value) }))}
|
|
className="rounded-2xl border border-line/70 bg-page px-3 py-2 text-sm text-text outline-none"
|
|
/>
|
|
</label>
|
|
<label className="flex flex-col gap-2 text-sm text-text">
|
|
<span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Notes</span>
|
|
<input
|
|
type="text"
|
|
value={pickForm.notes}
|
|
onChange={(event) => setPickForm((current) => ({ ...current, notes: event.target.value }))}
|
|
className="rounded-2xl border border-line/70 bg-page px-3 py-2 text-sm text-text outline-none"
|
|
placeholder="Picker, carton, or handling notes"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<div className="mt-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="text-sm text-muted">
|
|
{selectedLine
|
|
? `Remaining on selected line: ${selectedLine.remainingQuantity} ${selectedLine.unitOfMeasure}.`
|
|
: "Select a shipment line to issue inventory."}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => void handlePostPick()}
|
|
disabled={
|
|
isPostingPick ||
|
|
!selectedLine ||
|
|
selectedLine.remainingQuantity <= 0 ||
|
|
!pickForm.warehouseId ||
|
|
!pickForm.locationId ||
|
|
pickForm.quantity <= 0
|
|
}
|
|
className="inline-flex items-center justify-center rounded-2xl bg-brand px-4 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60"
|
|
>
|
|
{isPostingPick ? "Issuing stock..." : "Post shipment pick"}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
|
|
<div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_minmax(320px,0.9fr)]">
|
|
<article className="surface-panel">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="section-kicker">PICK HISTORY</p>
|
|
</div>
|
|
</div>
|
|
{shipment.picks.length === 0 ? (
|
|
<div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
|
|
No shipment picks have been posted yet.
|
|
</div>
|
|
) : (
|
|
<div className="mt-5 space-y-3">
|
|
{shipment.picks.map((pick) => (
|
|
<div key={pick.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<div className="font-semibold text-text">{pick.itemSku} / {pick.itemName}</div>
|
|
<div className="mt-1 text-xs text-muted">
|
|
{pick.quantity} issued from {pick.warehouseCode} / {pick.locationCode}
|
|
</div>
|
|
</div>
|
|
<div className="text-right text-xs text-muted">
|
|
<div>{pick.createdByName}</div>
|
|
<div className="mt-1">{formatDateTime(pick.createdAt)}</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 text-sm text-text">{pick.notes || "No pick notes."}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</article>
|
|
|
|
<article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Shipment Notes</p>
|
|
<p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{shipment.notes || "No notes recorded for this shipment."}</p>
|
|
</article>
|
|
</div>
|
|
|
|
<section className="surface-panel">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="section-kicker">RELATED SHIPMENTS</p>
|
|
</div>
|
|
{canManage ? (
|
|
<Link to={`/shipping/shipments/new?orderId=${shipment.salesOrderId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Add another shipment</Link>
|
|
) : null}
|
|
</div>
|
|
{relatedShipments.length === 0 ? (
|
|
<div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No additional shipments exist for this sales order.</div>
|
|
) : (
|
|
<div className="mt-6 space-y-3">
|
|
{relatedShipments.map((related) => (
|
|
<Link key={related.id} to={`/shipping/shipments/${related.id}`} className="block rounded-[18px] border border-line/70 bg-page/60 p-3 transition hover:bg-page/80">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<div className="font-semibold text-text">{related.shipmentNumber}</div>
|
|
<div className="mt-1 text-xs text-muted">{related.carrier || "Carrier not set"} / {related.trackingNumber || "No tracking"}</div>
|
|
</div>
|
|
<ShipmentStatusBadge status={related.status} />
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<FileAttachmentsPanel
|
|
ownerType="SHIPMENT"
|
|
ownerId={shipment.id}
|
|
eyebrow="Logistics Attachments"
|
|
title="Shipment files"
|
|
description="Store carrier paperwork, signed delivery records, bills of lading, and related logistics support files on the shipment record."
|
|
emptyMessage="No logistics attachments have been uploaded for this shipment yet."
|
|
/>
|
|
|
|
<ConfirmActionDialog
|
|
open={pendingConfirmation != null}
|
|
title={pendingConfirmation?.title ?? "Confirm shipment action"}
|
|
description={pendingConfirmation?.description ?? ""}
|
|
impact={pendingConfirmation?.impact}
|
|
recovery={pendingConfirmation?.recovery}
|
|
confirmLabel={pendingConfirmation?.confirmLabel ?? "Confirm"}
|
|
confirmationLabel={pendingConfirmation?.confirmationLabel}
|
|
confirmationValue={pendingConfirmation?.confirmationValue}
|
|
isConfirming={isUpdatingStatus}
|
|
onClose={() => {
|
|
if (!isUpdatingStatus) {
|
|
setPendingConfirmation(null);
|
|
}
|
|
}}
|
|
onConfirm={async () => {
|
|
if (!pendingConfirmation) {
|
|
return;
|
|
}
|
|
|
|
await applyStatusChange(pendingConfirmation.nextStatus);
|
|
setPendingConfirmation(null);
|
|
}}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|