@dainamite/cpq 0.2.2

package/dist/modules/cpq/backend/cpq/orders/[id]/page.js

@@ -0,0 +1,677 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useRouter, useParams } from "next/navigation";
+import { ArrowRight, ExternalLink, Play, X } from "lucide-react";
+import { Alert } from "@open-mercato/ui/primitives/alert";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Tag } from "@open-mercato/ui/primitives/tag";
+import { FormHeader } from "@open-mercato/ui/backend/forms";
+import {
+  formatStatusLabel,
+  orderCpqStatusMap
+} from "../../../../components/statusMaps.js";
+import { StatusPath } from "../../../../components/StatusPath.js";
+const ARC_BADGE_VARIANTS = {
+  amend: "brand",
+  renew: "success",
+  cancel: "error"
+};
+const RULE_TYPE_LABELS = {
+  discount_percent: "% discount",
+  discount_absolute: "fixed discount",
+  surcharge_percent: "% surcharge",
+  surcharge_absolute: "fixed surcharge",
+  price_override: "override"
+};
+function fmtRuleValue(adj, currency) {
+  if (adj.ruleType === "discount_percent" || adj.ruleType === "surcharge_percent") return `${adj.value}%`;
+  if (currency) return fmt(adj.value, currency);
+  return String(adj.value);
+}
+function fmt(amount, currency) {
+  return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount);
+}
+async function apiJson(url, init) {
+  const res = await fetch(url, init);
+  const json = await res.json();
+  if (!res.ok) throw new Error(json?.error ?? `Request failed (${res.status})`);
+  return json;
+}
+function CpqOrderDetailPage(props) {
+  const router = useRouter();
+  const urlParams = useParams();
+  const cpqOrderId = props.params?.id ?? urlParams?.id;
+  const [order, setOrder] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [activating, setActivating] = React.useState(false);
+  const [expandedLines, setExpandedLines] = React.useState(/* @__PURE__ */ new Set());
+  const [pricingDetail, setPricingDetail] = React.useState(null);
+  const [customerName, setCustomerName] = React.useState(null);
+  const [linkedSubscriptions, setLinkedSubscriptions] = React.useState([]);
+  const fetchLinkedSubscriptions = React.useCallback(
+    async (orderConfigId, sourceQuoteId) => {
+      const byOrderId = fetch(
+        `/api/cpq/inventory/subscriptions?sourceOrderId=${orderConfigId}&pageSize=10`
+      ).then((r) => r.ok ? r.json() : null).then((d) => d?.items ?? (Array.isArray(d) ? d : [])).catch(() => []);
+      const byTargets = sourceQuoteId ? fetch(`/api/cpq/quotes/${sourceQuoteId}/target-subscriptions`).then((r) => r.ok ? r.json() : null).then(async (d) => {
+        const targets = d?.items ?? [];
+        const fetched = await Promise.all(
+          targets.map(
+            (t) => fetch(`/api/cpq/inventory/subscriptions?id=${t.subscriptionId}`).then((r) => r.ok ? r.json() : null).catch(() => null)
+          )
+        );
+        return fetched.filter(Boolean);
+      }).catch(() => []) : Promise.resolve([]);
+      const [a, b] = await Promise.all([byOrderId, byTargets]);
+      const seen = /* @__PURE__ */ new Set();
+      const merged = [];
+      for (const sub of [...a, ...b]) {
+        if (!sub || seen.has(sub.id)) continue;
+        seen.add(sub.id);
+        merged.push({ id: sub.id, name: sub.name, code: sub.code, status: sub.status });
+      }
+      setLinkedSubscriptions(merged);
+    },
+    []
+  );
+  React.useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        const result = await apiJson(`/api/cpq/orders/${cpqOrderId}`);
+        if (!cancelled) {
+          setOrder(result);
+          fetch(`/api/customers/companies?id=${result.customerId}&pageSize=1`).then((r) => r.json()).then((data) => {
+            const items = data.items ?? data ?? [];
+            const c = items[0];
+            if (c && !cancelled) setCustomerName(c.display_name || c.displayName || c.name || null);
+          }).catch(() => {
+          });
+          if (result.cpqStatus === "active" || result.cpqStatus === "fulfilled") {
+            void fetchLinkedSubscriptions(result.id, result.sourceQuoteId);
+          }
+        }
+      } catch (err) {
+        if (!cancelled) setError(err.message);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [cpqOrderId, fetchLinkedSubscriptions]);
+  const activateOrder = async () => {
+    if (!order) return;
+    try {
+      setActivating(true);
+      setError(null);
+      const result = await apiJson(`/api/cpq/orders/${order.id}/activate`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({})
+      });
+      setOrder(result);
+      void fetchLinkedSubscriptions(result.id, result.sourceQuoteId);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setActivating(false);
+    }
+  };
+  const cancelOrder = async () => {
+    if (!order) return;
+    try {
+      setError(null);
+      const result = await apiJson(`/api/cpq/orders/${order.id}/status`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ targetStatus: "cancelled" })
+      });
+      setOrder(result);
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+  const toggleLine = (id) => {
+    setExpandedLines((prev) => {
+      const n = new Set(prev);
+      n.has(id) ? n.delete(id) : n.add(id);
+      return n;
+    });
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 py-12 justify-center text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      " Loading\u2026"
+    ] });
+  }
+  if (!order) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => router.push("/backend/cpq/orders"), className: "text-sm text-muted-foreground hover:text-foreground", children: "\u2190 Back to Orders" }),
+      error && /* @__PURE__ */ jsx(ErrorBanner, { message: error }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: "Order not found." })
+    ] });
+  }
+  const canActivate = order.cpqStatus === "draft" || order.cpqStatus === "pending_activation";
+  const canCancel = order.cpqStatus === "draft" || order.cpqStatus === "pending_activation" || order.cpqStatus === "active";
+  const currency = order.currencyCode;
+  const togglePricingDetail = (lineIdx, chargeIdx) => {
+    setPricingDetail(
+      (prev) => prev?.lineIdx === lineIdx && prev?.chargeIdx === chargeIdx ? null : { lineIdx, chargeIdx }
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx(
+      FormHeader,
+      {
+        mode: "detail",
+        backHref: "/backend/cpq/orders",
+        backLabel: "Back to CPQ Orders",
+        entityTypeLabel: "CPQ Order",
+        title: order.orderNumber || order.orderId.slice(0, 8),
+        statusBadge: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-1", children: [
+          /* @__PURE__ */ jsx(Tag, { variant: orderCpqStatusMap[order.cpqStatus] ?? "neutral", dot: true, children: formatStatusLabel(order.cpqStatus) }),
+          order.quoteType && order.quoteType !== "new" && /* @__PURE__ */ jsx(Tag, { variant: ARC_BADGE_VARIANTS[order.quoteType] ?? "neutral", className: "uppercase", children: order.quoteType })
+        ] }),
+        actionsContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: () => router.push(`/backend/sales/orders/${order.orderId}`),
+              children: [
+                /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5" }),
+                "View Sales Order"
+              ]
+            }
+          ),
+          order.sourceQuoteId && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: () => router.push(`/backend/cpq/quotes/${order.sourceQuoteId}`),
+              children: "Source Quote"
+            }
+          ),
+          canActivate && /* @__PURE__ */ jsxs(Button, { type: "button", onClick: activateOrder, disabled: activating, children: [
+            activating ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }),
+            "Activate"
+          ] }),
+          canCancel && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "destructive-outline", onClick: cancelOrder, children: [
+            /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+            "Cancel"
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-wrap", children: /* @__PURE__ */ jsx(
+      StatusPath,
+      {
+        current: order.cpqStatus,
+        path: ["draft", "pending_activation", "active", "fulfilled"],
+        terminals: ["cancelled"],
+        statusMap: orderCpqStatusMap,
+        ariaLabel: "Order status path"
+      }
+    ) }),
+    error && /* @__PURE__ */ jsx(ErrorBanner, { message: error, onDismiss: () => setError(null) }),
+    linkedSubscriptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: linkedSubscriptions.map((sub) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rounded-lg border bg-card p-4 flex items-center gap-4",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 space-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Linked Subscription" }),
+              /* @__PURE__ */ jsx(
+                Tag,
+                {
+                  variant: sub.status === "active" ? "success" : "info",
+                  dot: true,
+                  className: "text-[10px] px-1.5",
+                  children: sub.status
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium", children: [
+              sub.name,
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground font-mono text-xs", children: [
+                "(",
+                sub.code,
+                ")"
+              ] })
+            ] }),
+            order.activatedAt && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              "Activated on ",
+              new Date(order.activatedAt).toLocaleString()
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: () => router.push(`/backend/cpq/inventory/subscriptions/${sub.id}`),
+              children: [
+                /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" }),
+                "Open"
+              ]
+            }
+          )
+        ]
+      },
+      sub.id
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3", children: [
+      /* @__PURE__ */ jsx(MetaCard, { label: "Customer", children: customerName ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: customerName }) : /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs text-muted-foreground", children: [
+        order.customerId.slice(0, 8),
+        "\u2026"
+      ] }) }),
+      /* @__PURE__ */ jsx(MetaCard, { label: "Created", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: new Date(order.createdAt).toLocaleDateString() }) }),
+      /* @__PURE__ */ jsx(MetaCard, { label: "Currency", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: currency }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-3", children: "Pricing Summary" }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Non-Recurring (NRC)" }),
+          /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold font-mono", children: fmt(order.pricingSummary.nrcTotal, currency) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Monthly Recurring (MRC)" }),
+          /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold font-mono", children: fmt(order.pricingSummary.mrcTotal, currency) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      OrderLineTree,
+      {
+        lines: order.lines,
+        currency,
+        expandedLines,
+        pricingDetail,
+        onToggleLine: toggleLine,
+        onTogglePricingDetail: togglePricingDetail
+      }
+    )
+  ] });
+}
+function MetaCard({ label, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm", children })
+  ] });
+}
+function OrderLineTree({
+  lines,
+  currency,
+  expandedLines,
+  pricingDetail,
+  onToggleLine,
+  onTogglePricingDetail
+}) {
+  const rootLines = lines.filter((l) => !l.parentLineId);
+  const childrenByParent = /* @__PURE__ */ new Map();
+  for (const line of lines) {
+    if (line.parentLineId) {
+      const arr = childrenByParent.get(line.parentLineId) ?? [];
+      arr.push(line);
+      childrenByParent.set(line.parentLineId, arr);
+    }
+  }
+  const indexOf = /* @__PURE__ */ new Map();
+  lines.forEach((l, i) => indexOf.set(l.lineId, i));
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium mb-2 px-1", children: [
+      "Line Items (",
+      lines.length,
+      ")"
+    ] }),
+    lines.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground", children: "No line items." }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card divide-y", children: rootLines.map((line) => {
+      const isBundle = line.offeringType === "bundle";
+      const children = childrenByParent.get(line.lineId) ?? [];
+      const isExpanded = expandedLines.has(line.lineId);
+      const lineIdx = indexOf.get(line.lineId) ?? 0;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          OrderLineRow,
+          {
+            line,
+            lineIdx,
+            currency,
+            isExpanded,
+            isBundle,
+            childCount: children.length,
+            indent: 0,
+            pricingDetail,
+            onToggle: () => onToggleLine(line.lineId),
+            onTogglePricingDetail
+          }
+        ),
+        isBundle && isExpanded && children.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-t border-dashed border-brand-violet/30 bg-brand-violet/5", children: [
+          /* @__PURE__ */ jsx("div", { className: "px-6 py-1.5", children: /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-medium text-brand-violet uppercase tracking-wider", children: [
+            "Bundle Components (",
+            children.length,
+            ")"
+          ] }) }),
+          children.map((child) => {
+            const childIdx = indexOf.get(child.lineId) ?? 0;
+            return /* @__PURE__ */ jsx(
+              OrderLineRow,
+              {
+                line: child,
+                lineIdx: childIdx,
+                currency,
+                isExpanded: expandedLines.has(child.lineId),
+                isBundle: false,
+                childCount: 0,
+                indent: 1,
+                pricingDetail,
+                onToggle: () => onToggleLine(child.lineId),
+                onTogglePricingDetail
+              },
+              child.lineId
+            );
+          })
+        ] })
+      ] }, line.lineId);
+    }) })
+  ] });
+}
+function OrderLineRow({ line, lineIdx, currency, isExpanded, isBundle, childCount, indent, pricingDetail, onToggle, onTogglePricingDetail }) {
+  const paddingLeft = indent > 0 ? `${indent * 2 + 1}rem` : void 0;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center gap-3 px-4 py-3 hover:bg-muted/30 transition-colors cursor-pointer",
+        style: paddingLeft ? { paddingLeft } : void 0,
+        onClick: onToggle,
+        children: [
+          /* @__PURE__ */ jsx("button", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx("svg", { className: `h-4 w-4 transition-transform ${isExpanded ? "rotate-90" : ""}`, fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }) }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            indent > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "\u2514" }),
+            isBundle && /* @__PURE__ */ jsx(Tag, { variant: "brand", className: "px-1.5 text-xs", children: "bundle" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: line.offeringName }),
+            line.quantity > 1 && /* @__PURE__ */ jsxs("span", { className: "rounded bg-muted px-1.5 py-0.5 text-xs font-medium", children: [
+              "\xD7",
+              line.quantity
+            ] }),
+            /* @__PURE__ */ jsx(Tag, { variant: "info", className: "px-1.5 text-xs", children: line.action }),
+            isBundle && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              childCount,
+              " component",
+              childCount !== 1 ? "s" : ""
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right text-xs space-y-0.5", children: [
+            line.nrcTotal > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "NRC " }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: fmt(line.nrcTotal, currency) })
+            ] }),
+            line.mrcTotal > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "MRC " }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: fmt(line.mrcTotal, currency) })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    isExpanded && (() => {
+      const internalKeys = /* @__PURE__ */ new Set(["_arcMirroredName", "_arcMirroredFromItemId", "offeringName"]);
+      const visibleConfigEntries = Object.entries(line.configuration).filter(
+        ([key]) => !internalKeys.has(key)
+      );
+      const hasConfig = visibleConfigEntries.length > 0;
+      const hasCharges = line.charges.length > 0;
+      const hasTerm = !!(line.startDate || line.termMonths || line.endDate);
+      const hasArcDiff = !!line.arcSource;
+      const mirroredFromItemId = line.configuration?._arcMirroredFromItemId ?? null;
+      const isEmpty = !hasConfig && !hasCharges && !hasTerm && !hasArcDiff;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "border-t bg-muted/10 px-12 py-3 space-y-3",
+          style: paddingLeft ? { paddingLeft: `calc(${paddingLeft} + 2rem)` } : void 0,
+          children: [
+            hasArcDiff && /* @__PURE__ */ jsx(ArcLineDiff, { line, currency }),
+            isEmpty ? /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                "No detailed breakdown for this line.",
+                mirroredFromItemId && " Mirrored from existing subscription item."
+              ] }),
+              (line.nrcTotal > 0 || line.mrcTotal > 0) && /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+                line.nrcTotal > 0 && /* @__PURE__ */ jsxs("span", { children: [
+                  "NRC ",
+                  /* @__PURE__ */ jsx("span", { className: "font-mono font-medium text-foreground", children: fmt(line.nrcTotal, currency) })
+                ] }),
+                line.mrcTotal > 0 && /* @__PURE__ */ jsxs("span", { children: [
+                  "MRC ",
+                  /* @__PURE__ */ jsx("span", { className: "font-mono font-medium text-foreground", children: fmt(line.mrcTotal, currency) })
+                ] })
+              ] })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              hasConfig && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Configuration" }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1", children: visibleConfigEntries.map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "text-xs", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                    key,
+                    ": "
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "font-medium", children: String(value) })
+                ] }, key)) })
+              ] }),
+              hasCharges && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1", children: "Charges" }),
+                /* @__PURE__ */ jsx(
+                  ChargeBreakdown,
+                  {
+                    line,
+                    lineIdx,
+                    currency,
+                    pricingDetail,
+                    onTogglePricingDetail
+                  }
+                )
+              ] }),
+              hasTerm && /* @__PURE__ */ jsxs("div", { className: "flex gap-4 text-xs text-muted-foreground", children: [
+                line.startDate && /* @__PURE__ */ jsxs("span", { children: [
+                  "Start: ",
+                  new Date(line.startDate).toLocaleDateString()
+                ] }),
+                line.termMonths && /* @__PURE__ */ jsxs("span", { children: [
+                  "Term: ",
+                  line.termMonths,
+                  "mo"
+                ] }),
+                line.endDate && /* @__PURE__ */ jsxs("span", { children: [
+                  "End: ",
+                  new Date(line.endDate).toLocaleDateString()
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      );
+    })()
+  ] });
+}
+function ChargeBreakdown({ line, lineIdx, currency, pricingDetail, onTogglePricingDetail }) {
+  return /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: "Charge" }),
+      /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: "Type" }),
+      /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: "Unit Price" }),
+      /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: "Qty" }),
+      /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: "Total" }),
+      /* @__PURE__ */ jsx("th", { className: "w-8" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: line.charges.map((c, i) => {
+      const hasDetail = !!(c.breakdown?.tiers?.length || c.adjustments?.length);
+      const isDetailOpen = pricingDetail?.lineIdx === lineIdx && pricingDetail?.chargeIdx === i;
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsxs("tr", { className: "border-t border-dashed border-border/50", children: [
+          /* @__PURE__ */ jsx("td", { className: "py-1", children: c.chargeName ?? "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 uppercase", children: c.chargeType ?? "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: c.unitPrice != null ? fmt(c.unitPrice, currency) : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: c.quantity ?? "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: c.totalPrice != null ? fmt(c.totalPrice, currency) : c.note ?? "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 text-center", children: hasDetail && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onTogglePricingDetail(lineIdx, i),
+              className: "inline-flex items-center justify-center rounded p-0.5 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+              title: "Show pricing breakdown",
+              children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" }) })
+            }
+          ) })
+        ] }),
+        isDetailOpen && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 6, className: "pb-3 pt-1", children: /* @__PURE__ */ jsxs("div", { className: "rounded border bg-background p-3 space-y-3 text-xs", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("span", { className: "font-semibold text-sm", children: [
+              "Pricing Details \u2014 ",
+              c.chargeName
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: c.pricingMethod ?? "flat" })
+          ] }),
+          c.breakdown?.tiers && c.breakdown.tiers.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium text-muted-foreground mb-1", children: "Tier Breakdown" }),
+            /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-muted-foreground", children: [
+                /* @__PURE__ */ jsx("th", { className: "text-left py-0.5 font-medium", children: "Tier" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Range" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Price/Unit" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Qty" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Subtotal" })
+              ] }) }),
+              /* @__PURE__ */ jsxs("tbody", { children: [
+                c.breakdown.tiers.map((t) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-border/30", children: [
+                  /* @__PURE__ */ jsx("td", { className: "py-0.5", children: t.tier }),
+                  /* @__PURE__ */ jsxs("td", { className: "py-0.5 text-right font-mono", children: [
+                    t.from,
+                    "\u2013",
+                    t.to
+                  ] }),
+                  /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmt(t.pricePerUnit, currency) }),
+                  /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: t.quantity }),
+                  /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmt(t.subtotal, currency) })
+                ] }, t.tier)),
+                /* @__PURE__ */ jsxs("tr", { className: "border-t font-medium", children: [
+                  /* @__PURE__ */ jsx("td", { colSpan: 4, className: "py-0.5 text-right", children: "Tiered Total" }),
+                  /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmt(c.breakdown.tiers.reduce((s, t) => s + t.subtotal, 0), currency) })
+                ] })
+              ] })
+            ] })
+          ] }),
+          c.adjustments && c.adjustments.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium text-muted-foreground mb-1", children: "Applied Price Rules" }),
+            /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-muted-foreground", children: [
+                /* @__PURE__ */ jsx("th", { className: "text-left py-0.5 font-medium", children: "Rule" }),
+                /* @__PURE__ */ jsx("th", { className: "text-left py-0.5 font-medium", children: "Type" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Value" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Before" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "After" }),
+                /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: "Delta" })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { children: c.adjustments.map((adj, ai) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-border/30", children: [
+                /* @__PURE__ */ jsx("td", { className: "py-0.5", children: adj.ruleName }),
+                /* @__PURE__ */ jsx("td", { className: "py-0.5", children: RULE_TYPE_LABELS[adj.ruleType] ?? adj.ruleType }),
+                /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmtRuleValue(adj, currency) }),
+                /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmt(adj.unitPriceBefore, currency) }),
+                /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmt(adj.unitPriceAfter, currency) }),
+                /* @__PURE__ */ jsxs("td", { className: `py-0.5 text-right font-mono ${adj.delta < 0 ? "text-destructive" : adj.delta > 0 ? "text-status-success-text" : ""}`, children: [
+                  adj.delta > 0 ? "+" : "",
+                  fmt(adj.delta, currency)
+                ] })
+              ] }, ai)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1 border-t text-sm font-semibold", children: [
+            /* @__PURE__ */ jsx("span", { children: "Final Total" }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono", children: c.totalPrice != null ? fmt(c.totalPrice, currency) : "\u2014" })
+          ] })
+        ] }) }) })
+      ] }, i);
+    }) })
+  ] });
+}
+function Spinner() {
+  return /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
+  ] });
+}
+function ErrorBanner({ message, onDismiss }) {
+  return /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "flex-1", children: message }),
+    onDismiss && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onDismiss,
+        className: "text-destructive/70 hover:text-destructive text-sm font-bold",
+        "aria-label": "Dismiss",
+        children: "\xD7"
+      }
+    )
+  ] });
+}
+function ArcLineDiff({ line, currency }) {
+  const src = line.arcSource;
+  if (!src) return null;
+  const isCancel = line.action === "cancel";
+  const beforeMrc = src.mrcAmount;
+  const beforeNrc = src.nrcAmount;
+  const beforeQty = src.quantity;
+  const afterMrc = isCancel ? 0 : line.mrcTotal;
+  const afterNrc = isCancel ? 0 : line.nrcTotal;
+  const afterQty = isCancel ? 0 : line.quantity;
+  const mrcDelta = afterMrc - beforeMrc;
+  const nrcDelta = afterNrc - beforeNrc;
+  const qtyDelta = afterQty - beforeQty;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-1.5", children: "Change Preview" }),
+    /* @__PURE__ */ jsx("div", { className: "rounded border bg-background overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+      /* @__PURE__ */ jsx("thead", { className: "bg-muted/40", children: /* @__PURE__ */ jsxs("tr", { className: "text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("th", { className: "text-left px-3 py-1.5 font-medium" }),
+        /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-1.5 font-medium", children: "Before" }),
+        /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-1.5 font-medium", children: "After" }),
+        /* @__PURE__ */ jsx("th", { className: "text-right px-3 py-1.5 font-medium", children: "\u0394" })
+      ] }) }),
+      /* @__PURE__ */ jsxs("tbody", { children: [
+        /* @__PURE__ */ jsx(ArcDiffRow, { label: "Quantity", before: beforeQty, after: afterQty, delta: qtyDelta, currency: null, dimAfter: isCancel }),
+        /* @__PURE__ */ jsx(ArcDiffRow, { label: "MRC", before: beforeMrc, after: afterMrc, delta: mrcDelta, currency, dimAfter: isCancel }),
+        /* @__PURE__ */ jsx(ArcDiffRow, { label: "NRC", before: beforeNrc, after: afterNrc, delta: nrcDelta, currency, dimAfter: isCancel })
+      ] })
+    ] }) }),
+    isCancel && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-1 italic", children: "Cancellation \u2014 item will be terminated on activation." })
+  ] });
+}
+function ArcDiffRow({
+  label,
+  before,
+  after,
+  delta,
+  currency,
+  dimAfter
+}) {
+  const fmtVal = (v) => currency ? fmt(v, currency) : String(v);
+  const showDelta = delta !== 0;
+  return /* @__PURE__ */ jsxs("tr", { className: "border-t border-dashed border-border/40", children: [
+    /* @__PURE__ */ jsx("td", { className: "px-3 py-1 text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("td", { className: "px-3 py-1 text-right font-mono", children: fmtVal(before) }),
+    /* @__PURE__ */ jsx("td", { className: `px-3 py-1 text-right font-mono ${dimAfter ? "text-muted-foreground line-through" : ""}`, children: fmtVal(after) }),
+    /* @__PURE__ */ jsx("td", { className: `px-3 py-1 text-right font-mono font-medium ${showDelta ? delta > 0 ? "text-status-success-text" : "text-destructive" : "text-muted-foreground"}`, children: showDelta ? `${delta > 0 ? "+" : ""}${fmtVal(delta)}` : "\u2014" })
+  ] });
+}
+export {
+  CpqOrderDetailPage as default
+};
+//# sourceMappingURL=page.js.map