@dainamite/cpq 0.5.0 → 0.7.0

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

@@ -12,34 +12,44 @@ import {
   orderCpqStatusMap
 } from "../../../../components/statusMaps.js";
 import { StatusPath } from "../../../../components/StatusPath.js";
+import { ChargeBreakdownTable } from "../../../../components/ChargeBreakdownTable.js";
+import { PricingSummaryCard } from "../../../../components/PricingSummaryCard.js";
+import { ArcLineDiff, LineActionBadge } from "../../../../components/ArcLineDiff.js";
+import { arcRecurringDelta } from "../../../../lib/quoteSummaryView.js";
+import { isArcCancelledLine } from "../../../../services/arcLineRemoval.js";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function toChargeRow(c) {
+  return { ...c, chargeName: c.chargeName ?? "\u2014", chargeType: c.chargeType ?? "mrc", unitPrice: c.unitPrice ?? 0, totalPrice: c.totalPrice ?? null };
+}
 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 quoteTypeLabel(t, quoteType) {
+  switch (quoteType) {
+    case "amend":
+      return t("cpq.quotes.type.amend", "amend");
+    case "renew":
+      return t("cpq.quotes.type.renew", "renew");
+    case "cancel":
+      return t("cpq.quotes.type.cancel", "cancel");
+    default:
+      return quoteType;
+  }
 }
 function fmt(amount, currency) {
   return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount);
 }
-async function apiJson(url, init) {
+async function apiJson(t, 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})`);
+  if (!res.ok) throw new Error(json?.error ?? t("cpq.common.requestFailed", "Request failed ({status})", { status: res.status }));
   return json;
 }
 function CpqOrderDetailPage(props) {
   const router = useRouter();
+  const t = useT();
   const urlParams = useParams();
   const cpqOrderId = props.params?.id ?? urlParams?.id;
   const [order, setOrder] = React.useState(null);
@@ -59,7 +69,7 @@ function CpqOrderDetailPage(props) {
         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)
+            (target) => fetch(`/api/cpq/inventory/subscriptions?id=${target.subscriptionId}`).then((r) => r.ok ? r.json() : null).catch(() => null)
           )
         );
         return fetched.filter(Boolean);
@@ -80,7 +90,7 @@ function CpqOrderDetailPage(props) {
     let cancelled = false;
     async function load() {
       try {
-        const result = await apiJson(`/api/cpq/orders/${cpqOrderId}`);
+        const result = await apiJson(t, `/api/cpq/orders/${cpqOrderId}`);
         if (!cancelled) {
           setOrder(result);
           fetch(`/api/customers/companies?id=${result.customerId}&pageSize=1`).then((r) => r.json()).then((data) => {
@@ -103,13 +113,13 @@ function CpqOrderDetailPage(props) {
     return () => {
       cancelled = true;
     };
-  }, [cpqOrderId, fetchLinkedSubscriptions]);
+  }, [cpqOrderId, fetchLinkedSubscriptions, t]);
   const activateOrder = async () => {
     if (!order) return;
     try {
       setActivating(true);
       setError(null);
-      const result = await apiJson(`/api/cpq/orders/${order.id}/activate`, {
+      const result = await apiJson(t, `/api/cpq/orders/${order.id}/activate`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({})
@@ -126,7 +136,7 @@ function CpqOrderDetailPage(props) {
     if (!order) return;
     try {
       setError(null);
-      const result = await apiJson(`/api/cpq/orders/${order.id}/status`, {
+      const result = await apiJson(t, `/api/cpq/orders/${order.id}/status`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ targetStatus: "cancelled" })
@@ -146,14 +156,15 @@ function CpqOrderDetailPage(props) {
   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"
+      " ",
+      t("cpq.orders.detail.loading", "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" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => router.push("/backend/cpq/orders"), className: "text-sm text-muted-foreground hover:text-foreground", children: t("cpq.orders.detail.backToOrders", "\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." })
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", children: t("cpq.orders.detail.notFound", "Order not found.") })
     ] });
   }
   const canActivate = order.cpqStatus === "draft" || order.cpqStatus === "pending_activation";
@@ -170,12 +181,12 @@ function CpqOrderDetailPage(props) {
       {
         mode: "detail",
         backHref: "/backend/cpq/orders",
-        backLabel: "Back to CPQ Orders",
-        entityTypeLabel: "CPQ Order",
+        backLabel: t("cpq.orders.detail.backLabel", "Back to CPQ Orders"),
+        entityTypeLabel: t("cpq.orders.detail.entityType", "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 })
+          order.quoteType && order.quoteType !== "new" && /* @__PURE__ */ jsx(Tag, { variant: ARC_BADGE_VARIANTS[order.quoteType] ?? "neutral", className: "uppercase", children: quoteTypeLabel(t, order.quoteType) })
         ] }),
         actionsContent: /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(
@@ -186,7 +197,7 @@ function CpqOrderDetailPage(props) {
               onClick: () => router.push(`/backend/sales/orders/${order.orderId}`),
               children: [
                 /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5" }),
-                "View Sales Order"
+                t("cpq.orders.detail.viewSalesOrder", "View Sales Order")
               ]
             }
           ),
@@ -196,16 +207,16 @@ function CpqOrderDetailPage(props) {
               type: "button",
               variant: "outline",
               onClick: () => router.push(`/backend/cpq/quotes/${order.sourceQuoteId}`),
-              children: "Source Quote"
+              children: t("cpq.orders.detail.sourceQuote", "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"
+            t("cpq.orders.detail.activate", "Activate")
           ] }),
           canCancel && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "destructive-outline", onClick: cancelOrder, children: [
             /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-            "Cancel"
+            t("cpq.common.cancel", "Cancel")
           ] })
         ] })
       }
@@ -217,7 +228,7 @@ function CpqOrderDetailPage(props) {
         path: ["draft", "pending_activation", "active", "fulfilled"],
         terminals: ["cancelled"],
         statusMap: orderCpqStatusMap,
-        ariaLabel: "Order status path"
+        ariaLabel: t("cpq.orders.detail.statusPath", "Order status path")
       }
     ) }),
     error && /* @__PURE__ */ jsx(ErrorBanner, { message: error, onDismiss: () => setError(null) }),
@@ -228,7 +239,7 @@ function CpqOrderDetailPage(props) {
         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("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: t("cpq.orders.detail.linkedSubscription", "Linked Subscription") }),
               /* @__PURE__ */ jsx(
                 Tag,
                 {
@@ -248,10 +259,7 @@ function CpqOrderDetailPage(props) {
                 ")"
               ] })
             ] }),
-            order.activatedAt && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
-              "Activated on ",
-              new Date(order.activatedAt).toLocaleString()
-            ] })
+            order.activatedAt && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: t("cpq.orders.detail.activatedOn", "Activated on {date}", { date: new Date(order.activatedAt).toLocaleString() }) })
           ] }),
           /* @__PURE__ */ jsxs(
             Button,
@@ -261,7 +269,7 @@ function CpqOrderDetailPage(props) {
               onClick: () => router.push(`/backend/cpq/inventory/subscriptions/${sub.id}`),
               children: [
                 /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" }),
-                "Open"
+                t("cpq.orders.actions.open", "Open")
               ]
             }
           )
@@ -270,30 +278,26 @@ function CpqOrderDetailPage(props) {
       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: [
+      /* @__PURE__ */ jsx(MetaCard, { label: t("cpq.orders.detail.meta.customer", "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(MetaCard, { label: t("cpq.orders.detail.meta.created", "Created"), children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: new Date(order.createdAt).toLocaleDateString() }) }),
+      /* @__PURE__ */ jsx(MetaCard, { label: t("cpq.orders.detail.meta.currency", "Currency"), children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: currency }) })
     ] }),
+    /* @__PURE__ */ jsx(
+      PricingSummaryCard,
+      {
+        summary: order.pricingSummary,
+        currency,
+        arcDelta: order.quoteType === "amend" || order.quoteType === "renew" ? arcRecurringDelta(order.lines.map((l) => ({ ...l, action: l.action }))) : null
+      }
+    ),
     /* @__PURE__ */ jsx(
       OrderLineTree,
       {
         lines: order.lines,
+        quoteType: order.quoteType,
         currency,
         expandedLines,
         pricingDetail,
@@ -311,12 +315,14 @@ function MetaCard({ label, children }) {
 }
 function OrderLineTree({
   lines,
+  quoteType,
   currency,
   expandedLines,
   pricingDetail,
   onToggleLine,
   onTogglePricingDetail
 }) {
+  const t = useT();
   const rootLines = lines.filter((l) => !l.parentLineId);
   const childrenByParent = /* @__PURE__ */ new Map();
   for (const line of lines) {
@@ -329,12 +335,8 @@ function OrderLineTree({
   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) => {
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-2 px-1", children: t("cpq.orders.detail.lineItems", "Line Items ({count})", { count: lines.length }) }),
+    lines.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground", children: t("cpq.orders.detail.noLineItems", "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);
@@ -345,6 +347,7 @@ function OrderLineTree({
           {
             line,
             lineIdx,
+            quoteType,
             currency,
             isExpanded,
             isBundle,
@@ -356,11 +359,7 @@ function OrderLineTree({
           }
         ),
         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,
-            ")"
-          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "px-6 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-brand-violet uppercase tracking-wider", children: t("cpq.lines.bundleComponents", "Bundle Components ({count})", { count: children.length }) }) }),
           children.map((child) => {
             const childIdx = indexOf.get(child.lineId) ?? 0;
             return /* @__PURE__ */ jsx(
@@ -368,6 +367,7 @@ function OrderLineTree({
               {
                 line: child,
                 lineIdx: childIdx,
+                quoteType,
                 currency,
                 isExpanded: expandedLines.has(child.lineId),
                 isBundle: false,
@@ -385,39 +385,59 @@ function OrderLineTree({
     }) })
   ] });
 }
-function OrderLineRow({ line, lineIdx, currency, isExpanded, isBundle, childCount, indent, pricingDetail, onToggle, onTogglePricingDetail }) {
+function OrderLineRow({ line, lineIdx, quoteType, currency, isExpanded, isBundle, childCount, indent, pricingDetail, onToggle, onTogglePricingDetail }) {
+  const t = useT();
   const paddingLeft = indent > 0 ? `${indent * 2 + 1}rem` : void 0;
+  const isRemoved = isArcCancelledLine(line, quoteType);
   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",
+        className: `flex items-center gap-3 px-4 py-3 hover:bg-muted/30 transition-colors cursor-pointer ${isRemoved ? "bg-muted/20" : ""}`,
         style: paddingLeft ? { paddingLeft } : void 0,
         onClick: onToggle,
+        "data-testid": "cpq-order-line",
+        "data-removed": isRemoved ? "true" : void 0,
         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 }),
+            isBundle && /* @__PURE__ */ jsx(Tag, { variant: "brand", className: "px-1.5 text-xs", children: t("cpq.lines.bundle", "bundle") }),
+            /* @__PURE__ */ jsx("span", { className: `font-medium text-sm ${isRemoved ? "text-muted-foreground line-through" : ""}`, 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__ */ jsx(
+              LineActionBadge,
+              {
+                action: line.action,
+                label: isRemoved ? t("cpq.quotes.arc.lineRemoved", "remove") : void 0,
+                title: isRemoved ? t("cpq.quotes.arc.lineRemovedHint", "This item is cancelled on the subscription when the order is activated") : void 0
+              }
+            ),
+            isBundle && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: childCount !== 1 ? t("cpq.lines.componentCount.other", "{count} components", { count: childCount }) : t("cpq.lines.componentCount.one", "{count} component", { count: childCount }) })
           ] }) }),
           /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right text-xs space-y-0.5", children: [
+            isRemoved && line.arcSource && line.arcSource.mrcAmount > 0 && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                t("cpq.lines.mrc", "MRC"),
+                " "
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground line-through", children: fmt(line.arcSource.mrcAmount, currency) })
+            ] }),
             line.nrcTotal > 0 && /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "NRC " }),
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                t("cpq.lines.nrc", "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__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                t("cpq.lines.mrc", "MRC"),
+                " "
+              ] }),
               /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: fmt(line.mrcTotal, currency) })
             ] })
           ] })
@@ -425,7 +445,7 @@ function OrderLineRow({ line, lineIdx, currency, isExpanded, isBundle, childCoun
       }
     ),
     isExpanded && (() => {
-      const internalKeys = /* @__PURE__ */ new Set(["_arcMirroredName", "_arcMirroredFromItemId", "offeringName"]);
+      const internalKeys = /* @__PURE__ */ new Set(["_arcMirroredName", "_arcMirroredFromItemId", "_arcPriceFrozen", "_arcRepriced", "offeringName"]);
       const visibleConfigEntries = Object.entries(line.configuration).filter(
         ([key]) => !internalKeys.has(key)
       );
@@ -435,174 +455,61 @@ function OrderLineRow({ line, lineIdx, currency, isExpanded, isBundle, childCoun
       const hasArcDiff = !!line.arcSource;
       const mirroredFromItemId = line.configuration?._arcMirroredFromItemId ?? null;
       const isEmpty = !hasConfig && !hasCharges && !hasTerm && !hasArcDiff;
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsx(
         "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
-                  }
-                )
+          children: isEmpty ? /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              t("cpq.orders.detail.noBreakdown", "No detailed breakdown for this line."),
+              mirroredFromItemId && " ",
+              mirroredFromItemId && t("cpq.orders.detail.mirroredItem", "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: [
+                t("cpq.lines.nrc", "NRC"),
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "font-mono font-medium text-foreground", children: fmt(line.nrcTotal, currency) })
               ] }),
-              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()
-                ] })
+              line.mrcTotal > 0 && /* @__PURE__ */ jsxs("span", { children: [
+                t("cpq.lines.mrc", "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: t("cpq.lines.configuration", "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__ */ jsx(
+              ChargeBreakdownTable,
+              {
+                charges: line.charges.map(toChargeRow),
+                currency,
+                openDetailIndex: pricingDetail?.lineIdx === lineIdx ? pricingDetail.chargeIdx : null,
+                onToggleDetail: (chargeIdx) => onTogglePricingDetail(lineIdx, chargeIdx)
+              }
+            ),
+            hasTerm && /* @__PURE__ */ jsxs("div", { className: "flex gap-4 text-xs text-muted-foreground", children: [
+              line.startDate && /* @__PURE__ */ jsx("span", { children: t("cpq.lines.term.start", "Start: {date}", { date: new Date(line.startDate).toLocaleDateString() }) }),
+              line.termMonths && /* @__PURE__ */ jsx("span", { children: t("cpq.lines.term.months", "Term: {months}mo", { months: line.termMonths }) }),
+              line.endDate && /* @__PURE__ */ jsx("span", { children: t("cpq.lines.term.end", "End: {date}", { date: new Date(line.endDate).toLocaleDateString() }) })
+            ] }),
+            hasArcDiff && /* @__PURE__ */ jsx(ArcLineDiff, { line, currency })
+          ] })
         }
       );
     })()
   ] });
 }
-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" }),
@@ -610,6 +517,7 @@ function Spinner() {
   ] });
 }
 function ErrorBanner({ message, onDismiss }) {
+  const t = useT();
   return /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className: "flex items-start gap-2", children: [
     /* @__PURE__ */ jsx("span", { className: "flex-1", children: message }),
     onDismiss && /* @__PURE__ */ jsx(
@@ -617,60 +525,12 @@ function ErrorBanner({ message, onDismiss }) {
       {
         onClick: onDismiss,
         className: "text-destructive/70 hover:text-destructive text-sm font-bold",
-        "aria-label": "Dismiss",
+        "aria-label": t("cpq.common.dismiss", "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
 };