@dainamite/cpq 0.5.0 → 0.6.0

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

@@ -1,15 +1,27 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { useRouter, useParams, useSearchParams } from "next/navigation";
 import ArcQuoteConfigurator from "./_components/ArcQuoteConfigurator.js";
 import { StatusPath } from "../../../../components/StatusPath.js";
-import { ArrowRight, ExternalLink, Plus } from "lucide-react";
+import { ArrowRight, ExternalLink, Plus, RotateCcw } from "lucide-react";
 import { Alert, AlertTitle, AlertDescription } 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 { NumberInput } from "../../../../components/NumberInput.js";
+import { ChargeBreakdownTable } from "../../../../components/ChargeBreakdownTable.js";
+import { PricingSummaryCard } from "../../../../components/PricingSummaryCard.js";
+import { ArcLineDiff, LineActionBadge } from "../../../../components/ArcLineDiff.js";
+import { ADJUST_PRICE_FEATURE } from "../../../../lib/priceAdjustmentView.js";
+import { arcRecurringDelta } from "../../../../lib/quoteSummaryView.js";
+import { usePriceAdjustments } from "./_components/usePriceAdjustments.js";
+import { PriceAdjustmentsPanel } from "./_components/PriceAdjustmentsPanel.js";
+import { ArcLineRemovalProvider, useArcLineRemoval, useArcLineRemovalUi } from "./_components/arcLineRemoval.js";
+import { AdjustChargeAction, DiscountLineAction, ManualAdjustmentActions, PriceAdjustmentProvider, usePriceAdjustmentUi } from "./_components/priceAdjustmentContext.js";
+import { useGrantedFeatures } from "../../../../components/useGrantedFeatures.js";
+import { canRecalculateQuote, QUOTE_MANAGE_FEATURE } from "../../../../lib/quotePermissions.js";
 import {
   formatStatusLabel,
   quoteCpqStatusMap
@@ -17,18 +29,6 @@ import {
 function fmt(amount, currency) {
   return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount);
 }
-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);
-}
 async function apiJson(url, init) {
   const res = await fetch(url, init);
   const json = await res.json();
@@ -82,20 +82,22 @@ function MoreActionsDropdown({ items }) {
 }
 function buildMoreActions({
   recalculate,
+  canRecalculate,
   submitting,
   deletable,
   onDelete,
   deleting
 }) {
-  const items = [
-    {
+  const items = [];
+  if (canRecalculate) {
+    items.push({
       id: "recalculate",
       label: "Recalculate",
       onSelect: recalculate,
       loading: submitting,
       disabled: submitting
-    }
-  ];
+    });
+  }
   if (deletable) {
     items.push({
       id: "delete",
@@ -113,7 +115,9 @@ function CpqQuoteDetailPage(props) {
   const searchParams = useSearchParams();
   const cpqConfigId = props.params?.id ?? urlParams?.id;
   const isNew = cpqConfigId === "new";
+  const t = useT();
   const [cpqQuote, setCpqQuote] = React.useState(null);
+  const grantedFeatures = useGrantedFeatures([QUOTE_MANAGE_FEATURE, ADJUST_PRICE_FEATURE]);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
   const [submitting, setSubmitting] = React.useState(false);
@@ -156,6 +160,20 @@ function CpqQuoteDetailPage(props) {
     if (!cpqConfigId || isNew) return;
     void loadArcTargets();
   }, [cpqConfigId, isNew, loadArcTargets]);
+  const reloadQuote = React.useCallback(async () => {
+    try {
+      setCpqQuote(await apiJson(`/api/cpq/quotes/${cpqConfigId}`));
+    } catch (err) {
+      setError(err.message);
+    }
+  }, [cpqConfigId]);
+  const priceAdjustments = usePriceAdjustments({
+    quote: isNew ? null : cpqQuote,
+    quoteType: arcQuoteType,
+    canAdjust: grantedFeatures.includes(QUOTE_MANAGE_FEATURE) && grantedFeatures.includes(ADJUST_PRICE_FEATURE),
+    onQuote: setCpqQuote,
+    reloadQuote
+  });
   React.useEffect(() => {
     if (isNew) {
       const quoteId = searchParams.get("quoteId");
@@ -265,16 +283,13 @@ function CpqQuoteDetailPage(props) {
       setSubmitting(false);
     }
   };
-  const removeItem = async (lineId) => {
-    if (!cpqQuote) return;
-    try {
-      setError(null);
-      const result = await apiJson(`/api/cpq/quotes/${cpqQuote.id}/items/${lineId}`, { method: "DELETE" });
-      setCpqQuote(result);
-    } catch (err) {
-      setError(err.message);
-    }
-  };
+  const lineRemoval = useArcLineRemoval({
+    quote: isNew ? null : cpqQuote,
+    quoteType: arcQuoteType,
+    onQuote: setCpqQuote,
+    onError: setError
+  });
+  const removeItem = lineRemoval.remove;
   const recalculate = async () => {
     if (!cpqQuote) return;
     try {
@@ -350,7 +365,7 @@ function CpqQuoteDetailPage(props) {
   };
   const startAddOffering = () => {
     resetConfigState();
-    setAddingTargetSubIds(arcTargets.map((t) => t.subscriptionId));
+    setAddingTargetSubIds(arcTargets.map((t2) => t2.subscriptionId));
     loadOfferings();
     setView("add-offering");
   };
@@ -413,13 +428,16 @@ function CpqQuoteDetailPage(props) {
     ] });
   }
   const { pricingSummary: summary, currencyCode: currency } = cpqQuote;
+  const arcDelta = arcQuoteType === "amend" || arcQuoteType === "renew" ? arcRecurringDelta(cpqQuote.lines) : null;
   const arcEditable = ["new", "incomplete", "ready"].includes(cpqQuote.cpqStatus);
-  const isMergeRenew = arcQuoteType === "renew" && arcTargets.length >= 2 && arcTargets.every((t) => t.mergeAction === "absorb");
+  const isMergeRenew = arcQuoteType === "renew" && arcTargets.length >= 2 && arcTargets.every((t2) => t2.mergeAction === "absorb");
   const arcTargetCodeMap = /* @__PURE__ */ new Map();
-  for (const t of arcTargets) {
-    if (t.subscription?.code) arcTargetCodeMap.set(t.subscriptionId, t.subscription.code);
+  for (const t2 of arcTargets) {
+    if (t2.subscription?.code) arcTargetCodeMap.set(t2.subscriptionId, t2.subscription.code);
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+  return /* @__PURE__ */ jsx(PriceAdjustmentProvider, { value: priceAdjustments.ui, children: /* @__PURE__ */ jsx(ArcLineRemovalProvider, { value: lineRemoval.ui, children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    priceAdjustments.elements,
+    lineRemoval.ConfirmDialogElement,
     arcDrawerOpen && /* @__PURE__ */ jsx(
       ArcQuoteConfigurator,
       {
@@ -495,6 +513,7 @@ function CpqQuoteDetailPage(props) {
               {
                 items: buildMoreActions({
                   recalculate,
+                  canRecalculate: canRecalculateQuote(grantedFeatures, cpqQuote.cpqStatus),
                   submitting,
                   deletable: !["accepted", "rejected", "cancelled"].includes(cpqQuote.cpqStatus),
                   onDelete: () => setShowDeleteConfirm(true),
@@ -530,17 +549,17 @@ function CpqQuoteDetailPage(props) {
       arcTargets.length === 1 ? "" : "s",
       ":",
       " ",
-      arcTargets.map((t, i) => /* @__PURE__ */ jsxs("span", { children: [
+      arcTargets.map((t2, i) => /* @__PURE__ */ jsxs("span", { children: [
         i > 0 && ", ",
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => router.push(`/backend/cpq/inventory/subscriptions/${t.subscriptionId}`),
+            onClick: () => router.push(`/backend/cpq/inventory/subscriptions/${t2.subscriptionId}`),
             className: "text-brand-violet hover:underline",
-            children: t.subscription?.code ?? t.subscriptionId.slice(0, 8)
+            children: t2.subscription?.code ?? t2.subscriptionId.slice(0, 8)
           }
         )
-      ] }, t.id)),
+      ] }, t2.id)),
       isMergeRenew && /* @__PURE__ */ jsx("span", { className: "ml-2 text-status-warning-text font-medium", children: "\u2022 Merging into a new contract" })
     ] }) }) }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3", children: [
@@ -566,32 +585,7 @@ function CpqQuoteDetailPage(props) {
       ] })
     ] }) }),
     view === "summary" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__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 sm:grid-cols-4 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(summary.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(summary.mrcTotal, currency) })
-          ] }),
-          summary.usageTotalEstimated != null && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Usage (est.)" }),
-            /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold font-mono", children: fmt(summary.usageTotalEstimated, currency) })
-          ] }),
-          summary.usageCharges.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Usage Charges" }),
-            summary.usageCharges.map((uc, i) => /* @__PURE__ */ jsxs("p", { className: "text-xs mt-0.5", children: [
-              uc.chargeName,
-              ": ",
-              fmt(uc.unitPrice, currency),
-              "/unit"
-            ] }, i))
-          ] })
-        ] })
-      ] }),
+      /* @__PURE__ */ jsx(PricingSummaryCard, { summary, currency, arcDelta }),
       !cpqQuote.validationResult.valid && /* @__PURE__ */ jsxs(Alert, { variant: "warning", children: [
         /* @__PURE__ */ jsx(AlertTitle, { children: "Validation Issues" }),
         /* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsx("span", { className: "text-xs space-y-0.5 block", children: cpqQuote.validationResult.errors.map((e, i) => /* @__PURE__ */ jsxs("span", { className: "block", children: [
@@ -599,6 +593,13 @@ function CpqQuoteDetailPage(props) {
           e.message
         ] }, i)) }) })
       ] }),
+      arcQuoteType === "amend" && cpqQuote.lines.some((l) => l.action !== "cancel" && l.configuration?._arcRepriced === true) && /* @__PURE__ */ jsxs(Alert, { status: "information", style: "lighter", children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: t("cpq.quotes.arc.repricedTitle", "Some existing items use the current catalog price") }),
+        /* @__PURE__ */ jsx(AlertDescription, { children: t(
+          "cpq.quotes.arc.repricedDescription",
+          "Reconfigured lines were re-priced at today's catalog price. Negotiated prices from the subscription are not carried over to reconfigured lines yet."
+        ) })
+      ] }),
       /* @__PURE__ */ jsx(
         QuoteLineTree,
         {
@@ -615,6 +616,17 @@ function CpqQuoteDetailPage(props) {
             pricingDetail?.lineIdx === lineIdx && pricingDetail?.chargeIdx === chargeIdx ? null : { lineIdx, chargeIdx }
           )
         }
+      ),
+      /* @__PURE__ */ jsx(
+        PriceAdjustmentsPanel,
+        {
+          quoteId: cpqQuote.id,
+          items: priceAdjustments.items,
+          total: priceAdjustments.total,
+          lines: cpqQuote.lines,
+          currency,
+          errorsById: priceAdjustments.errorsById
+        }
       )
     ] }),
     view === "add-offering" && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -640,10 +652,10 @@ function CpqQuoteDetailPage(props) {
         attributes,
         config,
         quantity,
-        arcTargetOptions: arcTargets.length >= 2 && !addingToParentLineId ? arcTargets.map((t) => ({
-          subscriptionId: t.subscriptionId,
-          code: t.subscription?.code ?? t.subscriptionId.slice(0, 8),
-          name: t.subscription?.name ?? null
+        arcTargetOptions: arcTargets.length >= 2 && !addingToParentLineId ? arcTargets.map((t2) => ({
+          subscriptionId: t2.subscriptionId,
+          code: t2.subscription?.code ?? t2.subscriptionId.slice(0, 8),
+          name: t2.subscription?.name ?? null
         })) : null,
         arcSelectedTargetIds: addingTargetSubIds,
         onArcTargetToggle: (subId) => {
@@ -685,7 +697,7 @@ function CpqQuoteDetailPage(props) {
         submitting
       }
     )
-  ] });
+  ] }) }) });
 }
 function QuoteLineTree({ lines, currency, expandedLines, pricingDetail, targetCodes, onToggleLine, onEditLine, onRemoveLine, onAddComponent, onTogglePricingDetail }) {
   const [bundleTrees, setBundleTrees] = React.useState(/* @__PURE__ */ new Map());
@@ -889,20 +901,48 @@ function BundleSlotPanel({ bundleTree, treeLoading, children, allLines, currency
   ] });
 }
 function QuoteLineRow({ line, lineIdx, currency, isExpanded, pricingDetail, isBundle, childCount, indent, targetCodes, onToggle, onEdit, onRemove, onAddComponent, onTogglePricingDetail }) {
+  const t = useT();
+  const adjustmentUi = usePriceAdjustmentUi();
+  const removalUi = useArcLineRemovalUi();
+  const isRemoved = removalUi?.isRemoved(line) ?? false;
   const paddingLeft = indent > 0 ? `${indent * 2 + 1}rem` : void 0;
+  const chargeActions = {
+    reasonLabels: adjustmentUi?.reasonLabels,
+    renderChargeActions: (charge) => /* @__PURE__ */ jsx(AdjustChargeAction, { line, charge }),
+    renderManualActions: (adjustmentId) => /* @__PURE__ */ jsx(ManualAdjustmentActions, { adjustmentId })
+  };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3 hover:bg-muted/30 transition-colors", style: paddingLeft ? { paddingLeft } : void 0, children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-3 px-4 py-3 hover:bg-muted/30 transition-colors ${isRemoved ? "bg-muted/20" : ""}`, style: paddingLeft ? { paddingLeft } : void 0, "data-testid": "cpq-quote-line", "data-removed": isRemoved ? "true" : void 0, children: [
       /* @__PURE__ */ jsx("button", { onClick: onToggle, 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__ */ jsxs("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 }),
+          /* @__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(ActionBadge, { action: line.action }),
+          /* @__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
+            }
+          ),
+          !isRemoved && line.configuration?._arcPriceFrozen === true && /* @__PURE__ */ jsx(
+            Tag,
+            {
+              variant: "neutral",
+              className: "px-1.5 text-xs",
+              title: t(
+                "cpq.quotes.arc.priceKeptHint",
+                "Price kept from the subscription \u2014 it changes only if you reconfigure this line"
+              ),
+              children: t("cpq.quotes.arc.priceKept", "price kept")
+            }
+          ),
           targetCodes.size >= 2 && line.targetSubscriptionId && targetCodes.get(line.targetSubscriptionId) && /* @__PURE__ */ jsxs(
             Tag,
             {
@@ -915,7 +955,7 @@ function QuoteLineRow({ line, lineIdx, currency, isExpanded, pricingDetail, isBu
               ]
             }
           ),
-          line.isConfigured ? /* @__PURE__ */ jsx(Tag, { variant: "success", className: "px-1.5 text-xs", children: "configured" }) : /* @__PURE__ */ jsx(Tag, { variant: "warning", className: "px-1.5 text-xs", children: "incomplete" }),
+          isRemoved ? null : line.isConfigured ? /* @__PURE__ */ jsx(Tag, { variant: "success", className: "px-1.5 text-xs", children: "configured" }) : /* @__PURE__ */ jsx(Tag, { variant: "warning", className: "px-1.5 text-xs", children: "incomplete" }),
           isBundle && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
             childCount,
             " component",
@@ -925,6 +965,10 @@ function QuoteLineRow({ line, lineIdx, currency, isExpanded, pricingDetail, isBu
         line.validationErrors && line.validationErrors.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-0.5", children: line.validationErrors[0].message })
       ] }),
       /* @__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__ */ jsx("span", { className: "text-muted-foreground", children: "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__ */ jsx("span", { className: "font-mono font-medium", children: fmt(line.nrcTotal, currency) })
@@ -934,65 +978,33 @@ function QuoteLineRow({ line, lineIdx, currency, isExpanded, pricingDetail, isBu
           /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: fmt(line.mrcTotal, currency) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+      isRemoved ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 shrink-0", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: () => removalUi?.restore(line.lineId),
+          title: t("cpq.quotes.arc.restoreHint", "Keep this item on the subscription"),
+          "data-testid": "cpq-line-restore",
+          children: [
+            /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" }),
+            t("cpq.quotes.arc.restore", "Restore")
+          ]
+        }
+      ) }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+        /* @__PURE__ */ jsx(DiscountLineAction, { line }),
         onAddComponent && /* @__PURE__ */ jsx("button", { onClick: onAddComponent, className: "rounded p-1.5 text-muted-foreground hover:text-primary hover:bg-primary/5 transition-colors", title: "Add Component", children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m7.5-7.5h-15" }) }) }),
         /* @__PURE__ */ jsx("button", { onClick: onEdit, className: "rounded p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors", title: "Edit", children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" }) }) }),
         /* @__PURE__ */ jsx("button", { onClick: onRemove, className: "rounded p-1.5 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors", title: "Remove", children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" }) }) })
       ] })
     ] }),
-    isExpanded && line.arcSource && /* @__PURE__ */ jsx(ArcLineDiff, { line, currency }),
-    isExpanded && !isBundle && line.charges.length > 0 && /* @__PURE__ */ jsx(ChargeBreakdown, { line, lineIdx, currency, pricingDetail, onTogglePricingDetail }),
-    isExpanded && isBundle && line.charges.length > 0 && /* @__PURE__ */ jsx(ChargeBreakdown, { line, lineIdx, currency, pricingDetail, onTogglePricingDetail }),
+    isExpanded && !isBundle && line.charges.length > 0 && /* @__PURE__ */ jsx(ChargeBreakdown, { line, lineIdx, currency, pricingDetail, onTogglePricingDetail, ...chargeActions }),
+    isExpanded && isBundle && line.charges.length > 0 && /* @__PURE__ */ jsx(ChargeBreakdown, { line, lineIdx, currency, pricingDetail, onTogglePricingDetail, ...chargeActions }),
+    isExpanded && line.arcSource && /* @__PURE__ */ jsx("div", { className: "border-t bg-muted/10 px-12 py-2", children: /* @__PURE__ */ jsx(ArcLineDiff, { line, currency }) }),
     isExpanded && line.charges.length === 0 && !line.arcSource && /* @__PURE__ */ jsx(LineSummaryFallback, { line, currency })
   ] });
 }
-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 fmtVal = (v, asCurrency) => asCurrency ? fmt(v, currency) : String(v);
-  const rows = [
-    { label: "Quantity", before: beforeQty, after: afterQty, asCurrency: false },
-    { label: "MRC", before: beforeMrc, after: afterMrc, asCurrency: true },
-    { label: "NRC", before: beforeNrc, after: afterNrc, asCurrency: true }
-  ];
-  return /* @__PURE__ */ jsxs("div", { className: "border-t bg-muted/10 px-12 py-2 space-y-1.5", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", 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__ */ jsx("tbody", { children: rows.map((r) => {
-        const delta = r.after - r.before;
-        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: r.label }),
-          /* @__PURE__ */ jsx("td", { className: "px-3 py-1 text-right font-mono", children: fmtVal(r.before, r.asCurrency) }),
-          /* @__PURE__ */ jsx("td", { className: `px-3 py-1 text-right font-mono ${isCancel ? "text-muted-foreground line-through" : ""}`, children: fmtVal(r.after, r.asCurrency) }),
-          /* @__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, r.asCurrency)}` : "\u2014" })
-        ] }, r.label);
-      }) })
-    ] }) }),
-    isCancel && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive italic", children: "Cancellation \u2014 item will be terminated on activation." })
-  ] });
-}
-function ActionBadge({ action }) {
-  const variantByAction = {
-    add: "info",
-    modify: "warning",
-    cancel: "error"
-  };
-  return /* @__PURE__ */ jsx(Tag, { variant: variantByAction[action], className: "px-1.5 text-xs", children: action });
-}
 function LineSummaryFallback({ line, currency }) {
   const hasTotals = line.nrcTotal > 0 || line.mrcTotal > 0;
   const mirroredFromItemId = line.configuration?._arcMirroredFromItemId ?? null;
@@ -1013,105 +1025,16 @@ function LineSummaryFallback({ line, currency }) {
     ] })
   ] });
 }
-function ChargeBreakdown({ line, lineIdx, currency, pricingDetail, onTogglePricingDetail }) {
-  return /* @__PURE__ */ jsx("div", { className: "border-t bg-muted/10 px-12 py-2", children: /* @__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 }),
-          /* @__PURE__ */ jsx("td", { className: "py-1 uppercase", children: c.chargeType }),
-          /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: fmt(c.unitPrice, currency) }),
-          /* @__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 ChargeBreakdown({ line, lineIdx, pricingDetail, onTogglePricingDetail, ...tableProps }) {
+  return /* @__PURE__ */ jsx("div", { className: "border-t bg-muted/10 px-12 py-2", children: /* @__PURE__ */ jsx(
+    ChargeBreakdownTable,
+    {
+      charges: line.charges,
+      openDetailIndex: pricingDetail?.lineIdx === lineIdx ? pricingDetail.chargeIdx : null,
+      onToggleDetail: (chargeIdx) => onTogglePricingDetail(lineIdx, chargeIdx),
+      ...tableProps
+    }
+  ) });
 }
 function Spinner() {
   return /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [