mrp/client/src/modules/sales/SalesDetailPage.tsx

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 { DocumentRevisionComparison } from "../../components/DocumentRevisionComparison";
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-[18px] 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>
  );
}

function formatCurrency(value: number) {
  return `$${value.toFixed(2)}`;
}

function mapSalesDocumentForComparison(
  document: Pick<
    SalesDocumentDetailDto,
    | "documentNumber"
    | "customerName"
    | "status"
    | "issueDate"
    | "expiresAt"
    | "approvedAt"
    | "approvedByName"
    | "discountAmount"
    | "discountPercent"
    | "taxAmount"
    | "taxPercent"
    | "freightAmount"
    | "subtotal"
    | "total"
    | "notes"
    | "lines"
  >
) {
  return {
    title: document.documentNumber,
    subtitle: document.customerName,
    status: document.status,
    metaFields: [
      { label: "Issue Date", value: new Date(document.issueDate).toLocaleDateString() },
      { label: "Expires", value: document.expiresAt ? new Date(document.expiresAt).toLocaleDateString() : "N/A" },
      { label: "Approval", value: document.approvedAt ? new Date(document.approvedAt).toLocaleDateString() : "Pending" },
      { label: "Approver", value: document.approvedByName ?? "No approver recorded" },
    ],
    totalFields: [
      { label: "Subtotal", value: formatCurrency(document.subtotal) },
      { label: "Discount", value: `${formatCurrency(document.discountAmount)} (${document.discountPercent.toFixed(2)}%)` },
      { label: "Tax", value: `${formatCurrency(document.taxAmount)} (${document.taxPercent.toFixed(2)}%)` },
      { label: "Freight", value: formatCurrency(document.freightAmount) },
      { label: "Total", value: formatCurrency(document.total) },
    ],
    notes: document.notes,
    lines: document.lines.map((line) => ({
      key: line.id || `${line.itemId}-${line.position}`,
      title: `${line.itemSku} | ${line.itemName}`,
      subtitle: line.description,
      quantity: `${line.quantity} ${line.unitOfMeasure}`,
      unitLabel: line.unitOfMeasure,
      amountLabel: formatCurrency(line.unitPrice),
      totalLabel: formatCurrency(line.lineTotal),
    })),
  };
}

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-[20px] 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.`,
    });
    if (activeDocument.linkedProjectId) {
      params.set("projectId", activeDocument.linkedProjectId);
    }

    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);
    }
    if (activeDocument.linkedProjectId) {
      params.set("projectId", activeDocument.linkedProjectId);
    }
    if (activeDocument.linkedProjectNumber) {
      params.set("projectNumber", activeDocument.linkedProjectNumber);
    }
    if (activeDocument.linkedProjectName) {
      params.set("projectName", activeDocument.linkedProjectName);
    }

    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="surface-panel">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <p className="section-kicker">{config.detailEyebrow.toUpperCase()}</p>
            <h3 className="module-title">{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="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">
              {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-[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">Issue Date</p>
          <div className="mt-2 text-base font-bold text-text">{new Date(activeDocument.issueDate).toLocaleDateString()}</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">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-[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">Lines</p>
          <div className="mt-2 text-base font-bold text-text">{activeDocument.lineCount}</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">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-[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">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-[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">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-[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">Freight</p>
          <div className="mt-2 text-base font-bold text-text">${activeDocument.freightAmount.toFixed(2)}</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">Total</p>
          <div className="mt-2 text-base font-bold text-text">${activeDocument.total.toFixed(2)}</div>
        </article>
      </section>
      <section className="surface-panel">
        <div className="flex items-center justify-between gap-3">
          <div>
            <p className="section-kicker">REVISION HISTORY</p>
          </div>
        </div>
        {activeDocument.revisions.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 revisions have been recorded yet.
          </div>
        ) : (
          <div className="mt-6 space-y-3">
            {activeDocument.revisions.map((revision) => (
              <article key={revision.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">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>
      {activeDocument.revisions.length > 0 ? (
        <DocumentRevisionComparison
          title="Revision Comparison"
          description="Compare a prior revision against the current document or another revision to see commercial and line-level changes."
          currentLabel="Current document"
          currentDocument={mapSalesDocumentForComparison(activeDocument)}
          revisions={activeDocument.revisions.map((revision) => ({
            id: revision.id,
            label: `Rev ${revision.revisionNumber}`,
            meta: `${new Date(revision.createdAt).toLocaleString()} | ${revision.createdByName ?? "System"}`,
          }))}
          getRevisionDocument={(revisionId) => {
            if (revisionId === "current") {
              return mapSalesDocumentForComparison(activeDocument);
            }

            const revision = activeDocument.revisions.find((entry) => entry.id === revisionId);
            if (!revision) {
              return mapSalesDocumentForComparison(activeDocument);
            }

            return mapSalesDocumentForComparison({
              ...revision.snapshot,
              lines: revision.snapshot.lines.map((line) => ({
                id: `${line.itemId}-${line.position}`,
                ...line,
              })),
            });
          }}
        />
      ) : null}
      <div className="grid gap-3 xl:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)]">
        <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">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-[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">Project Link</p>
          {activeDocument.linkedProjectId ? (
            <div className="mt-3 space-y-2">
              <Link to={`/projects/${activeDocument.linkedProjectId}`} className="inline-flex items-center rounded-2xl border border-line/70 px-3 py-2 text-sm font-semibold text-text hover:bg-page/70">
                {activeDocument.linkedProjectNumber} / {activeDocument.linkedProjectName}
              </Link>
              <p className="text-sm text-muted">This {entity === "quote" ? "quote" : "sales order"} is already linked to a project, and downstream WO/PO launches will carry that project context.</p>
            </div>
          ) : (
            <p className="mt-3 text-sm text-muted">No linked project is currently attached to this {entity === "quote" ? "quote" : "sales order"}.</p>
          )}
          <p className="mt-5 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-[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">Line Items</p>
        {activeDocument.lines.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 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="surface-panel">
          <div className="flex flex-wrap items-start justify-between gap-3">
            <div>
              <p className="section-kicker">DEMAND PLANNING</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-[18px] 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-[18px] 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-[18px] 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-[18px] 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-[18px] 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="surface-panel">
          <div className="flex items-center justify-between gap-3">
            <div>
              <p className="section-kicker">SHIPPING</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-[18px] 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-[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">{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>
  );
}