677 lines
34 KiB
TypeScript
677 lines
34 KiB
TypeScript
import { permissions } from "@mrp/shared";
|
|
import type { SalesDocumentDetailDto, SalesDocumentStatus, SalesOrderPlanningDto, SalesOrderPlanningNodeDto } from "@mrp/shared/dist/sales/types.js";
|
|
import type { ShipmentSummaryDto } from "@mrp/shared/dist/shipping/types.js";
|
|
import { useEffect, useState } from "react";
|
|
import { Link, useNavigate, useParams } from "react-router-dom";
|
|
|
|
import { useAuth } from "../../auth/AuthProvider";
|
|
import { api, ApiError } from "../../lib/api";
|
|
import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
|
|
import { salesConfigs, salesStatusOptions, type SalesDocumentEntity } from "./config";
|
|
import { SalesStatusBadge } from "./SalesStatusBadge";
|
|
import { ShipmentStatusBadge } from "../shipping/ShipmentStatusBadge";
|
|
|
|
function PlanningNodeCard({ node }: { node: SalesOrderPlanningNodeDto }) {
|
|
return (
|
|
<div className="rounded-3xl border border-line/70 bg-page/60 p-3" style={{ marginLeft: node.level * 12 }}>
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<div className="font-semibold text-text">
|
|
{node.itemSku} <span className="text-muted">{node.itemName}</span>
|
|
</div>
|
|
<div className="mt-1 text-xs text-muted">
|
|
Demand {node.grossDemand} {node.unitOfMeasure} · Type {node.itemType}
|
|
{node.bomQuantityPerParent !== null ? ` · Qty/parent ${node.bomQuantityPerParent}` : ""}
|
|
</div>
|
|
</div>
|
|
<div className="text-right text-xs text-muted">
|
|
<div>Linked WO {node.linkedWorkOrderSupply}</div>
|
|
<div>Linked PO {node.linkedPurchaseSupply}</div>
|
|
<div>Stock {node.supplyFromStock}</div>
|
|
<div>Open WO {node.supplyFromOpenWorkOrders}</div>
|
|
<div>Open PO {node.supplyFromOpenPurchaseOrders}</div>
|
|
<div>Build {node.recommendedBuildQuantity}</div>
|
|
<div>Buy {node.recommendedPurchaseQuantity}</div>
|
|
{node.uncoveredQuantity > 0 ? <div>Uncovered {node.uncoveredQuantity}</div> : null}
|
|
</div>
|
|
</div>
|
|
{node.children.length > 0 ? (
|
|
<div className="mt-3 space-y-3">
|
|
{node.children.map((child) => (
|
|
<PlanningNodeCard key={`${child.itemId}-${child.level}-${child.itemSku}-${child.grossDemand}`} node={child} />
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function SalesDetailPage({ entity }: { entity: SalesDocumentEntity }) {
|
|
const { token, user } = useAuth();
|
|
const navigate = useNavigate();
|
|
const { quoteId, orderId } = useParams();
|
|
const config = salesConfigs[entity];
|
|
const documentId = entity === "quote" ? quoteId : orderId;
|
|
const [document, setDocument] = useState<SalesDocumentDetailDto | null>(null);
|
|
const [status, setStatus] = useState(`Loading ${config.singularLabel.toLowerCase()}...`);
|
|
const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
|
|
const [isConverting, setIsConverting] = useState(false);
|
|
const [isOpeningPdf, setIsOpeningPdf] = useState(false);
|
|
const [isApproving, setIsApproving] = useState(false);
|
|
const [shipments, setShipments] = useState<ShipmentSummaryDto[]>([]);
|
|
const [planning, setPlanning] = useState<SalesOrderPlanningDto | null>(null);
|
|
const [pendingConfirmation, setPendingConfirmation] = useState<
|
|
| {
|
|
kind: "status" | "approve" | "convert";
|
|
title: string;
|
|
description: string;
|
|
impact: string;
|
|
recovery: string;
|
|
confirmLabel: string;
|
|
confirmationLabel?: string;
|
|
confirmationValue?: string;
|
|
nextStatus?: SalesDocumentStatus;
|
|
}
|
|
| null
|
|
>(null);
|
|
|
|
const canManage = user?.permissions.includes(permissions.salesWrite) ?? false;
|
|
const canManageShipping = user?.permissions.includes(permissions.shippingWrite) ?? false;
|
|
const canReadShipping = user?.permissions.includes(permissions.shippingRead) ?? false;
|
|
const canManageManufacturing = user?.permissions.includes(permissions.manufacturingWrite) ?? false;
|
|
const canManagePurchasing = user?.permissions.includes(permissions.purchasingWrite) ?? false;
|
|
|
|
useEffect(() => {
|
|
if (!token || !documentId) {
|
|
return;
|
|
}
|
|
|
|
const loader = entity === "quote" ? api.getQuote(token, documentId) : api.getSalesOrder(token, documentId);
|
|
const planningLoader = entity === "order" ? api.getSalesOrderPlanning(token, documentId) : Promise.resolve(null);
|
|
Promise.all([loader, planningLoader])
|
|
.then(([nextDocument, nextPlanning]) => {
|
|
setDocument(nextDocument);
|
|
setPlanning(nextPlanning);
|
|
setStatus(`${config.singularLabel} loaded.`);
|
|
if (entity === "order" && canReadShipping) {
|
|
api.getShipments(token, { salesOrderId: nextDocument.id }).then(setShipments).catch(() => setShipments([]));
|
|
}
|
|
})
|
|
.catch((error: unknown) => {
|
|
const message = error instanceof ApiError ? error.message : `Unable to load ${config.singularLabel.toLowerCase()}.`;
|
|
setStatus(message);
|
|
});
|
|
}, [canReadShipping, config.singularLabel, documentId, entity, token]);
|
|
|
|
if (!document) {
|
|
return <div className="rounded-[28px] border border-line/70 bg-surface/90 p-4 text-sm text-muted shadow-panel">{status}</div>;
|
|
}
|
|
|
|
const activeDocument = document;
|
|
|
|
function buildWorkOrderRecommendationLink(itemId: string, quantity: number) {
|
|
const params = new URLSearchParams({
|
|
itemId,
|
|
salesOrderId: activeDocument.id,
|
|
quantity: quantity.toString(),
|
|
status: "DRAFT",
|
|
notes: `Generated from sales order ${activeDocument.documentNumber} demand planning.`,
|
|
});
|
|
|
|
return `/manufacturing/work-orders/new?${params.toString()}`;
|
|
}
|
|
|
|
function buildPurchaseRecommendationLink(itemId?: string, vendorId?: string | null) {
|
|
const params = new URLSearchParams();
|
|
params.set("planningOrderId", activeDocument.id);
|
|
if (itemId) {
|
|
params.set("itemId", itemId);
|
|
}
|
|
if (vendorId) {
|
|
params.set("vendorId", vendorId);
|
|
}
|
|
|
|
return `/purchasing/orders/new?${params.toString()}`;
|
|
}
|
|
|
|
async function applyStatusChange(nextStatus: SalesDocumentStatus) {
|
|
if (!token) {
|
|
return;
|
|
}
|
|
|
|
setIsUpdatingStatus(true);
|
|
setStatus(`Updating ${config.singularLabel.toLowerCase()} status...`);
|
|
|
|
try {
|
|
const nextDocument =
|
|
entity === "quote"
|
|
? await api.updateQuoteStatus(token, activeDocument.id, nextStatus)
|
|
: await api.updateSalesOrderStatus(token, activeDocument.id, nextStatus);
|
|
setDocument(nextDocument);
|
|
setStatus(`${config.singularLabel} status updated. Review revisions and downstream workflows if the document moved into a terminal or customer-visible state.`);
|
|
} catch (error: unknown) {
|
|
const message = error instanceof ApiError ? error.message : `Unable to update ${config.singularLabel.toLowerCase()} status.`;
|
|
setStatus(message);
|
|
} finally {
|
|
setIsUpdatingStatus(false);
|
|
}
|
|
}
|
|
|
|
async function applyConvert() {
|
|
if (!token || entity !== "quote") {
|
|
return;
|
|
}
|
|
|
|
setIsConverting(true);
|
|
setStatus("Converting quote to sales order...");
|
|
|
|
try {
|
|
const order = await api.convertQuoteToSalesOrder(token, activeDocument.id);
|
|
navigate(`/sales/orders/${order.id}`);
|
|
} catch (error: unknown) {
|
|
const message = error instanceof ApiError ? error.message : "Unable to convert quote to sales order.";
|
|
setStatus(message);
|
|
setIsConverting(false);
|
|
}
|
|
}
|
|
|
|
async function handleOpenPdf() {
|
|
if (!token) {
|
|
return;
|
|
}
|
|
|
|
setIsOpeningPdf(true);
|
|
setStatus(`Rendering ${config.singularLabel.toLowerCase()} PDF...`);
|
|
|
|
try {
|
|
const blob =
|
|
entity === "quote"
|
|
? await api.getQuotePdf(token, activeDocument.id)
|
|
: await api.getSalesOrderPdf(token, activeDocument.id);
|
|
const objectUrl = URL.createObjectURL(blob);
|
|
window.open(objectUrl, "_blank", "noopener,noreferrer");
|
|
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
|
|
setStatus(`${config.singularLabel} PDF ready.`);
|
|
} catch (error: unknown) {
|
|
const message = error instanceof ApiError ? error.message : `Unable to render ${config.singularLabel.toLowerCase()} PDF.`;
|
|
setStatus(message);
|
|
} finally {
|
|
setIsOpeningPdf(false);
|
|
}
|
|
}
|
|
|
|
async function applyApprove() {
|
|
if (!token) {
|
|
return;
|
|
}
|
|
|
|
setIsApproving(true);
|
|
setStatus(`Approving ${config.singularLabel.toLowerCase()}...`);
|
|
|
|
try {
|
|
const nextDocument =
|
|
entity === "quote" ? await api.approveQuote(token, activeDocument.id) : await api.approveSalesOrder(token, activeDocument.id);
|
|
setDocument(nextDocument);
|
|
setStatus(`${config.singularLabel} approved. The approval stamp is now part of the document history and downstream teams can act on it immediately.`);
|
|
} catch (error: unknown) {
|
|
const message = error instanceof ApiError ? error.message : `Unable to approve ${config.singularLabel.toLowerCase()}.`;
|
|
setStatus(message);
|
|
} finally {
|
|
setIsApproving(false);
|
|
}
|
|
}
|
|
|
|
function handleStatusChange(nextStatus: SalesDocumentStatus) {
|
|
const label = salesStatusOptions.find((option) => option.value === nextStatus)?.label ?? nextStatus;
|
|
setPendingConfirmation({
|
|
kind: "status",
|
|
title: `Set ${config.singularLabel.toLowerCase()} to ${label}`,
|
|
description: `Update ${activeDocument.documentNumber} from ${activeDocument.status} to ${nextStatus}.`,
|
|
impact:
|
|
nextStatus === "CLOSED"
|
|
? "This closes the document operationally and can change customer-facing execution assumptions and downstream follow-up expectations."
|
|
: nextStatus === "APPROVED"
|
|
? "This marks the document ready for downstream action and becomes part of the approval history."
|
|
: "This changes the operational state used by downstream workflows and audit/revision history.",
|
|
recovery: "If this status is set in error, return the document to the correct state and verify the latest revision history.",
|
|
confirmLabel: `Set ${label}`,
|
|
confirmationLabel: nextStatus === "CLOSED" ? "Type document number to confirm:" : undefined,
|
|
confirmationValue: nextStatus === "CLOSED" ? activeDocument.documentNumber : undefined,
|
|
nextStatus,
|
|
});
|
|
}
|
|
|
|
function handleApprove() {
|
|
setPendingConfirmation({
|
|
kind: "approve",
|
|
title: `Approve ${config.singularLabel.toLowerCase()}`,
|
|
description: `Approve ${activeDocument.documentNumber} for ${activeDocument.customerName}.`,
|
|
impact: "Approval records the approver and timestamp and signals that downstream execution can proceed.",
|
|
recovery: "If approval was granted by mistake, change the document status and review the revision trail for follow-up.",
|
|
confirmLabel: "Approve document",
|
|
});
|
|
}
|
|
|
|
function handleConvert() {
|
|
setPendingConfirmation({
|
|
kind: "convert",
|
|
title: "Convert quote to sales order",
|
|
description: `Create a sales order from quote ${activeDocument.documentNumber}.`,
|
|
impact: "This creates a new sales order record and can trigger planning, purchasing, manufacturing, and shipping follow-up work.",
|
|
recovery: "Review the new order immediately after creation. If conversion was premature, move the resulting order to the correct status and coordinate with downstream teams.",
|
|
confirmLabel: "Convert quote",
|
|
confirmationLabel: "Type quote number to confirm:",
|
|
confirmationValue: activeDocument.documentNumber,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<section className="space-y-4">
|
|
<div className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">{config.detailEyebrow}</p>
|
|
<h3 className="mt-2 text-xl font-bold text-text">{activeDocument.documentNumber}</h3>
|
|
<p className="mt-1 text-sm text-text">{activeDocument.customerName}</p>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
<SalesStatusBadge status={activeDocument.status} />
|
|
<span className="inline-flex items-center rounded-full border border-line/70 px-2 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-muted">
|
|
Rev {activeDocument.currentRevisionNumber}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Link to={config.routeBase} 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 {config.collectionLabel.toLowerCase()}
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={handleOpenPdf}
|
|
disabled={isOpeningPdf}
|
|
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"
|
|
>
|
|
{isOpeningPdf ? "Rendering PDF..." : "Open PDF"}
|
|
</button>
|
|
{canManage ? (
|
|
<>
|
|
<Link to={`${config.routeBase}/${activeDocument.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">
|
|
Edit {config.singularLabel.toLowerCase()}
|
|
</Link>
|
|
{activeDocument.status !== "APPROVED" ? (
|
|
<button
|
|
type="button"
|
|
onClick={handleApprove}
|
|
disabled={isApproving}
|
|
className="inline-flex items-center justify-center rounded-2xl border border-emerald-400/40 px-2 py-2 text-sm font-semibold text-emerald-700 disabled:cursor-not-allowed disabled:opacity-60 dark:text-emerald-300"
|
|
>
|
|
{isApproving ? "Approving..." : "Approve"}
|
|
</button>
|
|
) : null}
|
|
{entity === "quote" ? (
|
|
<button
|
|
type="button"
|
|
onClick={handleConvert}
|
|
disabled={isConverting}
|
|
className="inline-flex items-center justify-center rounded-2xl border border-emerald-400/40 px-2 py-2 text-sm font-semibold text-emerald-700 disabled:cursor-not-allowed disabled:opacity-60 dark:text-emerald-300"
|
|
>
|
|
{isConverting ? "Converting..." : "Convert to sales order"}
|
|
</button>
|
|
) : null}
|
|
{entity === "order" && canManageShipping ? (
|
|
<Link to={`/shipping/shipments/new?orderId=${activeDocument.id}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
|
|
New shipment
|
|
</Link>
|
|
) : null}
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{canManage ? (
|
|
<section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Quick Actions</p>
|
|
<p className="mt-2 text-sm text-muted">Update document status without opening the full editor.</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{salesStatusOptions.map((option) => (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
onClick={() => handleStatusChange(option.value)}
|
|
disabled={isUpdatingStatus || activeDocument.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-[24px] 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">Issue Date</p>
|
|
<div className="mt-2 text-base font-bold text-text">{new Date(activeDocument.issueDate).toLocaleDateString()}</div>
|
|
</article>
|
|
<article className="rounded-[24px] 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">Expires</p>
|
|
<div className="mt-2 text-base font-bold text-text">{activeDocument.expiresAt ? new Date(activeDocument.expiresAt).toLocaleDateString() : "N/A"}</div>
|
|
</article>
|
|
<article className="rounded-[24px] 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">Lines</p>
|
|
<div className="mt-2 text-base font-bold text-text">{activeDocument.lineCount}</div>
|
|
</article>
|
|
<article className="rounded-[24px] 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">Approval</p>
|
|
<div className="mt-2 text-base font-bold text-text">{activeDocument.approvedAt ? new Date(activeDocument.approvedAt).toLocaleDateString() : "Pending"}</div>
|
|
<div className="mt-1 text-xs text-muted">{activeDocument.approvedByName ?? "No approver recorded"}</div>
|
|
</article>
|
|
</section>
|
|
<section className="grid gap-3 xl:grid-cols-4">
|
|
<article className="rounded-[24px] 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">Discount</p>
|
|
<div className="mt-2 text-base font-bold text-text">-${activeDocument.discountAmount.toFixed(2)}</div>
|
|
<div className="mt-1 text-xs text-muted">{activeDocument.discountPercent.toFixed(2)}%</div>
|
|
</article>
|
|
<article className="rounded-[24px] 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">Tax</p>
|
|
<div className="mt-2 text-base font-bold text-text">${activeDocument.taxAmount.toFixed(2)}</div>
|
|
<div className="mt-1 text-xs text-muted">{activeDocument.taxPercent.toFixed(2)}%</div>
|
|
</article>
|
|
<article className="rounded-[24px] 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">Freight</p>
|
|
<div className="mt-2 text-base font-bold text-text">${activeDocument.freightAmount.toFixed(2)}</div>
|
|
</article>
|
|
<article className="rounded-[24px] 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">Total</p>
|
|
<div className="mt-2 text-base font-bold text-text">${activeDocument.total.toFixed(2)}</div>
|
|
</article>
|
|
</section>
|
|
<section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Revision History</p>
|
|
<p className="mt-2 text-sm text-muted">Automatic snapshots are recorded when the document changes status, content, or approval state.</p>
|
|
</div>
|
|
</div>
|
|
{activeDocument.revisions.length === 0 ? (
|
|
<div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
|
|
No revisions have been recorded yet.
|
|
</div>
|
|
) : (
|
|
<div className="mt-6 space-y-3">
|
|
{activeDocument.revisions.map((revision) => (
|
|
<article key={revision.id} className="rounded-3xl 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">Rev {revision.revisionNumber}</div>
|
|
<div className="mt-1 text-sm text-text">{revision.reason}</div>
|
|
</div>
|
|
<div className="text-right text-xs text-muted">
|
|
<div>{new Date(revision.createdAt).toLocaleString()}</div>
|
|
<div className="mt-1">{revision.createdByName ?? "System"}</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
<div className="grid gap-3 xl:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)]">
|
|
<article className="rounded-[28px] 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">Customer</p>
|
|
<dl className="mt-5 grid gap-3">
|
|
<div>
|
|
<dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Account</dt>
|
|
<dd className="mt-1 text-sm text-text">{activeDocument.customerName}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Email</dt>
|
|
<dd className="mt-1 text-sm text-text">{activeDocument.customerEmail}</dd>
|
|
</div>
|
|
</dl>
|
|
</article>
|
|
<article className="rounded-[28px] 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">Notes</p>
|
|
<p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{activeDocument.notes || "No notes recorded for this document."}</p>
|
|
</article>
|
|
</div>
|
|
<section className="rounded-[28px] 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">Line Items</p>
|
|
{activeDocument.lines.length === 0 ? (
|
|
<div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
|
|
No line items have been added yet.
|
|
</div>
|
|
) : (
|
|
<div className="mt-6 overflow-hidden rounded-2xl border border-line/70">
|
|
<table className="min-w-full divide-y divide-line/70 text-sm">
|
|
<thead className="bg-page/80 text-left text-muted">
|
|
<tr>
|
|
<th className="px-2 py-2">Item</th>
|
|
<th className="px-2 py-2">Description</th>
|
|
<th className="px-2 py-2">Qty</th>
|
|
<th className="px-2 py-2">UOM</th>
|
|
<th className="px-2 py-2">Unit Price</th>
|
|
<th className="px-2 py-2">Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-line/70 bg-surface">
|
|
{activeDocument.lines.map((line: SalesDocumentDetailDto["lines"][number]) => (
|
|
<tr key={line.id}>
|
|
<td className="px-2 py-2">
|
|
<div className="font-semibold text-text">{line.itemSku}</div>
|
|
<div className="mt-1 text-xs text-muted">{line.itemName}</div>
|
|
</td>
|
|
<td className="px-2 py-2 text-muted">{line.description}</td>
|
|
<td className="px-2 py-2 text-muted">{line.quantity}</td>
|
|
<td className="px-2 py-2 text-muted">{line.unitOfMeasure}</td>
|
|
<td className="px-2 py-2 text-muted">${line.unitPrice.toFixed(2)}</td>
|
|
<td className="px-2 py-2 text-muted">${line.lineTotal.toFixed(2)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</section>
|
|
{entity === "order" && planning ? (
|
|
<section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Demand Planning</p>
|
|
<h3 className="mt-2 text-lg font-bold text-text">Net build and buy requirements</h3>
|
|
<p className="mt-2 max-w-3xl text-sm text-muted">
|
|
Sales-order demand is netted against available stock, active reservations, open work orders, and open purchase orders before new build or buy quantities are recommended.
|
|
</p>
|
|
</div>
|
|
<div className="text-right text-xs text-muted">
|
|
<div>Generated {new Date(planning.generatedAt).toLocaleString()}</div>
|
|
<div>Status {planning.status}</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 grid gap-3 xl:grid-cols-4">
|
|
<article className="rounded-[24px] border border-line/70 bg-page/70 px-3 py-3">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Build Recommendations</p>
|
|
<div className="mt-2 text-base font-bold text-text">{planning.summary.totalBuildQuantity}</div>
|
|
<div className="mt-1 text-xs text-muted">{planning.summary.buildRecommendationCount} items</div>
|
|
</article>
|
|
<article className="rounded-[24px] border border-line/70 bg-page/70 px-3 py-3">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Purchase Recommendations</p>
|
|
<div className="mt-2 text-base font-bold text-text">{planning.summary.totalPurchaseQuantity}</div>
|
|
<div className="mt-1 text-xs text-muted">{planning.summary.purchaseRecommendationCount} items</div>
|
|
</article>
|
|
<article className="rounded-[24px] border border-line/70 bg-page/70 px-3 py-3">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Uncovered</p>
|
|
<div className="mt-2 text-base font-bold text-text">{planning.summary.totalUncoveredQuantity}</div>
|
|
<div className="mt-1 text-xs text-muted">{planning.summary.uncoveredItemCount} items</div>
|
|
</article>
|
|
<article className="rounded-[24px] border border-line/70 bg-page/70 px-3 py-3">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Planned Items</p>
|
|
<div className="mt-2 text-base font-bold text-text">{planning.summary.itemCount}</div>
|
|
<div className="mt-1 text-xs text-muted">{planning.summary.lineCount} sales lines</div>
|
|
</article>
|
|
</div>
|
|
<div className="mt-5 overflow-hidden rounded-2xl border border-line/70">
|
|
<table className="min-w-full divide-y divide-line/70 text-sm">
|
|
<thead className="bg-page/80 text-left text-muted">
|
|
<tr>
|
|
<th className="px-2 py-2">Item</th>
|
|
<th className="px-2 py-2">Gross</th>
|
|
<th className="px-2 py-2">Linked WO</th>
|
|
<th className="px-2 py-2">Linked PO</th>
|
|
<th className="px-2 py-2">Available</th>
|
|
<th className="px-2 py-2">Open WO</th>
|
|
<th className="px-2 py-2">Open PO</th>
|
|
<th className="px-2 py-2">Build</th>
|
|
<th className="px-2 py-2">Buy</th>
|
|
<th className="px-2 py-2">Uncovered</th>
|
|
<th className="px-2 py-2">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-line/70 bg-surface">
|
|
{planning.items.map((item) => (
|
|
<tr key={item.itemId}>
|
|
<td className="px-2 py-2">
|
|
<div className="font-semibold text-text">{item.itemSku}</div>
|
|
<div className="mt-1 text-xs text-muted">{item.itemName}</div>
|
|
</td>
|
|
<td className="px-2 py-2 text-muted">{item.grossDemand}</td>
|
|
<td className="px-2 py-2 text-muted">{item.linkedWorkOrderSupply}</td>
|
|
<td className="px-2 py-2 text-muted">{item.linkedPurchaseSupply}</td>
|
|
<td className="px-2 py-2 text-muted">{item.availableQuantity}</td>
|
|
<td className="px-2 py-2 text-muted">{item.openWorkOrderSupply}</td>
|
|
<td className="px-2 py-2 text-muted">{item.openPurchaseSupply}</td>
|
|
<td className="px-2 py-2 text-muted">{item.recommendedBuildQuantity}</td>
|
|
<td className="px-2 py-2 text-muted">{item.recommendedPurchaseQuantity}</td>
|
|
<td className="px-2 py-2 text-muted">{item.uncoveredQuantity}</td>
|
|
<td className="px-2 py-2">
|
|
<div className="flex flex-wrap gap-2">
|
|
{canManageManufacturing && item.recommendedBuildQuantity > 0 ? (
|
|
<Link
|
|
to={buildWorkOrderRecommendationLink(item.itemId, item.recommendedBuildQuantity)}
|
|
className="rounded-2xl border border-line/70 px-2 py-1 text-xs font-semibold text-text"
|
|
>
|
|
Draft WO
|
|
</Link>
|
|
) : null}
|
|
{canManagePurchasing && item.recommendedPurchaseQuantity > 0 ? (
|
|
<Link
|
|
to={buildPurchaseRecommendationLink(item.itemId)}
|
|
className="rounded-2xl border border-line/70 px-2 py-1 text-xs font-semibold text-text"
|
|
>
|
|
Draft PO
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{canManagePurchasing && planning.summary.purchaseRecommendationCount > 0 ? (
|
|
<div className="mt-4 flex justify-end">
|
|
<Link to={buildPurchaseRecommendationLink()} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-3 py-2 text-sm font-semibold text-text">
|
|
Draft purchase order from recommendations
|
|
</Link>
|
|
</div>
|
|
) : null}
|
|
<div className="mt-5 space-y-3">
|
|
{planning.lines.map((line) => (
|
|
<div key={line.lineId} className="rounded-3xl border border-line/70 bg-page/60 p-3">
|
|
<div className="mb-3">
|
|
<div className="font-semibold text-text">
|
|
{line.itemSku} <span className="text-muted">{line.itemName}</span>
|
|
</div>
|
|
<div className="mt-1 text-xs text-muted">
|
|
Sales-order line demand: {line.quantity} {line.unitOfMeasure}
|
|
</div>
|
|
</div>
|
|
<PlanningNodeCard node={line.rootNode} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
{entity === "order" && canReadShipping ? (
|
|
<section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Shipping</p>
|
|
<p className="mt-2 text-sm text-muted">Shipment records currently tied to this sales order.</p>
|
|
</div>
|
|
{canManageShipping ? (
|
|
<Link to={`/shipping/shipments/new?orderId=${activeDocument.id}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
|
|
Create shipment
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
{shipments.length === 0 ? (
|
|
<div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
|
|
No shipments have been created for this sales order yet.
|
|
</div>
|
|
) : (
|
|
<div className="mt-6 space-y-3">
|
|
{shipments.map((shipment) => (
|
|
<Link key={shipment.id} to={`/shipping/shipments/${shipment.id}`} className="block rounded-3xl 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">{shipment.shipmentNumber}</div>
|
|
<div className="mt-1 text-xs text-muted">{shipment.carrier || "Carrier not set"} · {shipment.trackingNumber || "No tracking"}</div>
|
|
</div>
|
|
<ShipmentStatusBadge status={shipment.status} />
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
) : null}
|
|
<ConfirmActionDialog
|
|
open={pendingConfirmation != null}
|
|
title={pendingConfirmation?.title ?? "Confirm sales action"}
|
|
description={pendingConfirmation?.description ?? ""}
|
|
impact={pendingConfirmation?.impact}
|
|
recovery={pendingConfirmation?.recovery}
|
|
confirmLabel={pendingConfirmation?.confirmLabel ?? "Confirm"}
|
|
confirmationLabel={pendingConfirmation?.confirmationLabel}
|
|
confirmationValue={pendingConfirmation?.confirmationValue}
|
|
isConfirming={
|
|
(pendingConfirmation?.kind === "status" && isUpdatingStatus) ||
|
|
(pendingConfirmation?.kind === "approve" && isApproving) ||
|
|
(pendingConfirmation?.kind === "convert" && isConverting)
|
|
}
|
|
onClose={() => {
|
|
if (!isUpdatingStatus && !isApproving && !isConverting) {
|
|
setPendingConfirmation(null);
|
|
}
|
|
}}
|
|
onConfirm={async () => {
|
|
if (!pendingConfirmation) {
|
|
return;
|
|
}
|
|
|
|
if (pendingConfirmation.kind === "status" && pendingConfirmation.nextStatus) {
|
|
await applyStatusChange(pendingConfirmation.nextStatus);
|
|
setPendingConfirmation(null);
|
|
return;
|
|
}
|
|
|
|
if (pendingConfirmation.kind === "approve") {
|
|
await applyApprove();
|
|
setPendingConfirmation(null);
|
|
return;
|
|
}
|
|
|
|
if (pendingConfirmation.kind === "convert") {
|
|
await applyConvert();
|
|
setPendingConfirmation(null);
|
|
}
|
|
}}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|