doc compare

client/src/modules/sales/SalesDetailPage.tsx

@@ -7,6 +7,7 @@ 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";
@@ -46,6 +47,61 @@ function PlanningNodeCard({ node }: { node: SalesOrderPlanningNodeDto }) {
   );
 }
 
+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();
@@ -419,6 +475,37 @@ export function SalesDetailPage({ entity }: { entity: SalesDocumentEntity }) {
           </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>