@dainamite/cpq 0.5.0 → 0.7.0

package/dist/modules/cpq/components/ChargeBreakdownTable.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Info } from "lucide-react";
+import { SimpleTooltip } from "@open-mercato/ui/primitives/tooltip";
+import { Tag } from "@open-mercato/ui/primitives/tag";
+import { DepthBadge, PriceWaterfall } from "./PriceWaterfall.js";
+import { ADJUSTMENT_ERROR_FALLBACKS } from "../lib/priceAdjustmentView.js";
+import { formatMoney } from "../lib/formatMoney.js";
+function PriceColumnHeader({ label, hint }) {
+  return /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: /* @__PURE__ */ jsx(SimpleTooltip, { content: hint, size: "sm", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 cursor-help", tabIndex: 0, "aria-label": `${label}: ${hint}`, children: [
+    label,
+    /* @__PURE__ */ jsx(Info, { className: "h-3 w-3", "aria-hidden": true })
+  ] }) }) });
+}
+function ChargeBreakdownTable({
+  charges,
+  currency,
+  openDetailIndex,
+  onToggleDetail,
+  reasonLabels,
+  renderChargeActions,
+  renderManualActions
+}) {
+  const t = useT();
+  return /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", "data-testid": "cpq-charge-breakdown", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: t("cpq.charges.charge", "Charge") }),
+      /* @__PURE__ */ jsx("th", { className: "text-left py-1 font-medium", children: t("cpq.charges.type", "Type") }),
+      /* @__PURE__ */ jsx(
+        PriceColumnHeader,
+        {
+          label: t("cpq.priceAdjustments.listUnit", "List"),
+          hint: t("cpq.priceAdjustments.listUnitHint", "Catalog unit price from the pricing table, before any price rules or manual adjustments.")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PriceColumnHeader,
+        {
+          label: t("cpq.priceAdjustments.standardUnit", "Standard"),
+          hint: t("cpq.priceAdjustments.standardUnitHint", "Unit price after automatic price rules (e.g. volume or segment discounts), before manual adjustments.")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PriceColumnHeader,
+        {
+          label: t("cpq.priceAdjustments.offerUnit", "Offer"),
+          hint: t("cpq.priceAdjustments.offerUnitHint", "Final unit price quoted to the customer, after price rules and manual adjustments. The badge shows the total change vs list.")
+        }
+      ),
+      /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: t("cpq.charges.qty", "Qty") }),
+      /* @__PURE__ */ jsx("th", { className: "text-right py-1 font-medium", children: t("cpq.charges.total", "Total") }),
+      /* @__PURE__ */ jsx("th", { className: "w-16" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: charges.map((c, i) => {
+      const hasDetail = !!(c.breakdown?.tiers?.length || c.adjustments?.length);
+      const isDetailOpen = openDetailIndex === i;
+      const listUnit = c.listUnitPrice ?? c.unitPrice;
+      const standardUnit = c.standardUnitPrice ?? c.unitPrice;
+      const errors = c.adjustmentErrors ?? [];
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsxs("tr", { className: "border-t border-dashed border-border/50", children: [
+          /* @__PURE__ */ jsxs("td", { className: "py-1", children: [
+            /* @__PURE__ */ jsx("span", { children: c.chargeName }),
+            errors.length > 0 && /* @__PURE__ */ jsx(Tag, { variant: "warning", className: "ml-1.5 px-1.5 text-xs", "data-testid": "cpq-adjustment-invalid", children: t("cpq.priceAdjustments.invalidReason", "Invalid: {reason}", {
+              reason: t(`cpq.priceAdjustments.errors.${errors[0].code}`, ADJUSTMENT_ERROR_FALLBACKS[errors[0].code] ?? errors[0].code)
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 uppercase", children: c.chargeType }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono text-muted-foreground", children: formatMoney(listUnit, currency) }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono text-muted-foreground", children: formatMoney(standardUnit, currency) }),
+          /* @__PURE__ */ jsx("td", { className: "py-1 text-right font-mono", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(DepthBadge, { before: listUnit, after: c.unitPrice }),
+            formatMoney(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 ? formatMoney(c.totalPrice, currency) : c.note ?? "\u2014" }),
+          /* @__PURE__ */ jsxs("td", { className: "py-1 text-right whitespace-nowrap", children: [
+            renderChargeActions?.(c),
+            hasDetail && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onToggleDetail(i),
+                className: "inline-flex items-center justify-center rounded p-0.5 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+                title: t("cpq.priceAdjustments.showBreakdown", "Show price breakdown"),
+                children: /* @__PURE__ */ jsx(Info, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ] })
+        ] }),
+        isDetailOpen && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 8, className: "pb-3 pt-1", children: /* @__PURE__ */ jsx(ChargePricingDetail, { charge: c, currency, reasonLabels, renderManualActions }) }) })
+      ] }, i);
+    }) })
+  ] });
+}
+function ChargePricingDetail({ charge: c, currency, reasonLabels, renderManualActions }) {
+  const t = useT();
+  const tiers = c.breakdown?.tiers ?? [];
+  return /* @__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__ */ jsx("span", { className: "font-semibold text-sm", children: t("cpq.charges.pricingDetailsFor", "Pricing Details \u2014 {name}", { name: c.chargeName }) }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: c.pricingMethod ?? "flat" })
+    ] }),
+    tiers.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "font-medium text-muted-foreground mb-1", children: t("cpq.charges.tierBreakdown", "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: t("cpq.charges.tier", "Tier") }),
+          /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: t("cpq.charges.range", "Range") }),
+          /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: t("cpq.charges.pricePerUnit", "Price/Unit") }),
+          /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: t("cpq.charges.qty", "Qty") }),
+          /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: t("cpq.charges.subtotal", "Subtotal") })
+        ] }) }),
+        /* @__PURE__ */ jsxs("tbody", { children: [
+          tiers.map((tier) => /* @__PURE__ */ jsxs("tr", { className: "border-t border-border/30", children: [
+            /* @__PURE__ */ jsx("td", { className: "py-0.5", children: tier.tier }),
+            /* @__PURE__ */ jsxs("td", { className: "py-0.5 text-right font-mono", children: [
+              tier.from,
+              "\u2013",
+              tier.to
+            ] }),
+            /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: formatMoney(tier.pricePerUnit, currency) }),
+            /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: tier.quantity }),
+            /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: formatMoney(tier.subtotal, currency) })
+          ] }, tier.tier)),
+          /* @__PURE__ */ jsxs("tr", { className: "border-t font-medium", children: [
+            /* @__PURE__ */ jsx("td", { colSpan: 4, className: "py-0.5 text-right", children: t("cpq.charges.tieredTotal", "Tiered Total") }),
+            /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: formatMoney(tiers.reduce((sum, tier) => sum + tier.subtotal, 0), currency) })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "font-medium text-muted-foreground mb-1", children: t("cpq.priceAdjustments.waterfall.title", "Price waterfall") }),
+      /* @__PURE__ */ jsx(PriceWaterfall, { charge: c, currency, reasonLabels, renderManualActions })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1 border-t text-sm font-semibold", children: [
+      /* @__PURE__ */ jsx("span", { children: t("cpq.charges.finalTotal", "Final Total") }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono", children: c.totalPrice != null ? formatMoney(c.totalPrice, currency) : "\u2014" })
+    ] })
+  ] });
+}
+export {
+  ChargeBreakdownTable
+};
+//# sourceMappingURL=ChargeBreakdownTable.js.map

package/dist/modules/cpq/components/ChargeBreakdownTable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/cpq/components/ChargeBreakdownTable.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Info } from 'lucide-react'\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\nimport { Tag } from '@open-mercato/ui/primitives/tag'\nimport { DepthBadge, PriceWaterfall } from './PriceWaterfall'\nimport { ADJUSTMENT_ERROR_FALLBACKS, type WaterfallChargeInput } from '../lib/priceAdjustmentView'\nimport { formatMoney } from '../lib/formatMoney'\n\ntype TierBreakdownEntry = { tier: number; from: number; to: number; pricePerUnit: number; quantity: number; subtotal: number }\n\n/** One priced charge as stored on a quote or order line. */\nexport type ChargeRowView = WaterfallChargeInput & {\n  chargeName: string\n  quantity?: number | null\n  note?: string | null\n  breakdown?: { tiers: TierBreakdownEntry[] } | null\n  adjustmentErrors?: Array<{ code: string }>\n}\n\n/** Right-aligned price column header with an explanatory hover tooltip. */\nfunction PriceColumnHeader({ label, hint }: { label: string; hint: string }) {\n  return (\n    <th className=\"text-right py-1 font-medium\">\n      <SimpleTooltip content={hint} size=\"sm\">\n        <span className=\"inline-flex items-center gap-1 cursor-help\" tabIndex={0} aria-label={`${label}: ${hint}`}>\n          {label}\n          <Info className=\"h-3 w-3\" aria-hidden />\n        </span>\n      </SimpleTooltip>\n    </th>\n  )\n}\n\n/**\n * Charge table shared by the quote and order detail pages: list / standard /\n * offer unit prices with depth badge, and a per-charge pricing detail (tiers +\n * price waterfall). Editing hooks are optional render props.\n */\nexport function ChargeBreakdownTable<C extends ChargeRowView>({\n  charges,\n  currency,\n  openDetailIndex,\n  onToggleDetail,\n  reasonLabels,\n  renderChargeActions,\n  renderManualActions,\n}: {\n  charges: C[]\n  currency: string\n  openDetailIndex: number | null\n  onToggleDetail: (chargeIndex: number) => void\n  reasonLabels?: Record<string, string>\n  renderChargeActions?: (charge: C) => React.ReactNode\n  renderManualActions?: (adjustmentId: string) => React.ReactNode\n}) {\n  const t = useT()\n  return (\n    <table className=\"w-full text-xs\" data-testid=\"cpq-charge-breakdown\">\n      <thead>\n        <tr className=\"text-muted-foreground\">\n          <th className=\"text-left py-1 font-medium\">{t('cpq.charges.charge', 'Charge')}</th>\n          <th className=\"text-left py-1 font-medium\">{t('cpq.charges.type', 'Type')}</th>\n          <PriceColumnHeader\n            label={t('cpq.priceAdjustments.listUnit', 'List')}\n            hint={t('cpq.priceAdjustments.listUnitHint', 'Catalog unit price from the pricing table, before any price rules or manual adjustments.')}\n          />\n          <PriceColumnHeader\n            label={t('cpq.priceAdjustments.standardUnit', 'Standard')}\n            hint={t('cpq.priceAdjustments.standardUnitHint', 'Unit price after automatic price rules (e.g. volume or segment discounts), before manual adjustments.')}\n          />\n          <PriceColumnHeader\n            label={t('cpq.priceAdjustments.offerUnit', 'Offer')}\n            hint={t('cpq.priceAdjustments.offerUnitHint', 'Final unit price quoted to the customer, after price rules and manual adjustments. The badge shows the total change vs list.')}\n          />\n          <th className=\"text-right py-1 font-medium\">{t('cpq.charges.qty', 'Qty')}</th>\n          <th className=\"text-right py-1 font-medium\">{t('cpq.charges.total', 'Total')}</th>\n          <th className=\"w-16\" />\n        </tr>\n      </thead>\n      <tbody>\n        {charges.map((c, i) => {\n          const hasDetail = !!(c.breakdown?.tiers?.length || c.adjustments?.length)\n          const isDetailOpen = openDetailIndex === i\n          const listUnit = c.listUnitPrice ?? c.unitPrice\n          const standardUnit = c.standardUnitPrice ?? c.unitPrice\n          const errors = c.adjustmentErrors ?? []\n          return (\n            <React.Fragment key={i}>\n              <tr className=\"border-t border-dashed border-border/50\">\n                <td className=\"py-1\">\n                  <span>{c.chargeName}</span>\n                  {errors.length > 0 && (\n                    <Tag variant=\"warning\" className=\"ml-1.5 px-1.5 text-xs\" data-testid=\"cpq-adjustment-invalid\">\n                      {t('cpq.priceAdjustments.invalidReason', 'Invalid: {reason}', {\n                        reason: t(`cpq.priceAdjustments.errors.${errors[0].code}`, ADJUSTMENT_ERROR_FALLBACKS[errors[0].code] ?? errors[0].code),\n                      })}\n                    </Tag>\n                  )}\n                </td>\n                <td className=\"py-1 uppercase\">{c.chargeType}</td>\n                <td className=\"py-1 text-right font-mono text-muted-foreground\">{formatMoney(listUnit, currency)}</td>\n                <td className=\"py-1 text-right font-mono text-muted-foreground\">{formatMoney(standardUnit, currency)}</td>\n                <td className=\"py-1 text-right font-mono\">\n                  <span className=\"inline-flex items-center gap-1\">\n                    <DepthBadge before={listUnit} after={c.unitPrice} />\n                    {formatMoney(c.unitPrice, currency)}\n                  </span>\n                </td>\n                <td className=\"py-1 text-right font-mono\">{c.quantity ?? '\u2014'}</td>\n                <td className=\"py-1 text-right font-mono\">{c.totalPrice != null ? formatMoney(c.totalPrice, currency) : c.note ?? '\u2014'}</td>\n                <td className=\"py-1 text-right whitespace-nowrap\">\n                  {renderChargeActions?.(c)}\n                  {hasDetail && (\n                    <button\n                      type=\"button\"\n                      onClick={() => onToggleDetail(i)}\n                      className=\"inline-flex items-center justify-center rounded p-0.5 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors\"\n                      title={t('cpq.priceAdjustments.showBreakdown', 'Show price breakdown')}\n                    >\n                      <Info className=\"h-3.5 w-3.5\" />\n                    </button>\n                  )}\n                </td>\n              </tr>\n              {isDetailOpen && (\n                <tr>\n                  <td colSpan={8} className=\"pb-3 pt-1\">\n                    <ChargePricingDetail charge={c} currency={currency} reasonLabels={reasonLabels} renderManualActions={renderManualActions} />\n                  </td>\n                </tr>\n              )}\n            </React.Fragment>\n          )\n        })}\n      </tbody>\n    </table>\n  )\n}\n\nfunction ChargePricingDetail({ charge: c, currency, reasonLabels, renderManualActions }: {\n  charge: ChargeRowView\n  currency: string\n  reasonLabels?: Record<string, string>\n  renderManualActions?: (adjustmentId: string) => React.ReactNode\n}) {\n  const t = useT()\n  const tiers = c.breakdown?.tiers ?? []\n  return (\n    <div className=\"rounded border bg-background p-3 space-y-3 text-xs\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"font-semibold text-sm\">{t('cpq.charges.pricingDetailsFor', 'Pricing Details \u2014 {name}', { name: c.chargeName })}</span>\n        <span className=\"text-muted-foreground\">{c.pricingMethod ?? 'flat'}</span>\n      </div>\n\n      {tiers.length > 0 && (\n        <div>\n          <div className=\"font-medium text-muted-foreground mb-1\">{t('cpq.charges.tierBreakdown', 'Tier Breakdown')}</div>\n          <table className=\"w-full\">\n            <thead>\n              <tr className=\"text-muted-foreground\">\n                <th className=\"text-left py-0.5 font-medium\">{t('cpq.charges.tier', 'Tier')}</th>\n                <th className=\"text-right py-0.5 font-medium\">{t('cpq.charges.range', 'Range')}</th>\n                <th className=\"text-right py-0.5 font-medium\">{t('cpq.charges.pricePerUnit', 'Price/Unit')}</th>\n                <th className=\"text-right py-0.5 font-medium\">{t('cpq.charges.qty', 'Qty')}</th>\n                <th className=\"text-right py-0.5 font-medium\">{t('cpq.charges.subtotal', 'Subtotal')}</th>\n              </tr>\n            </thead>\n            <tbody>\n              {tiers.map((tier) => (\n                <tr key={tier.tier} className=\"border-t border-border/30\">\n                  <td className=\"py-0.5\">{tier.tier}</td>\n                  <td className=\"py-0.5 text-right font-mono\">{tier.from}\u2013{tier.to}</td>\n                  <td className=\"py-0.5 text-right font-mono\">{formatMoney(tier.pricePerUnit, currency)}</td>\n                  <td className=\"py-0.5 text-right font-mono\">{tier.quantity}</td>\n                  <td className=\"py-0.5 text-right font-mono\">{formatMoney(tier.subtotal, currency)}</td>\n                </tr>\n              ))}\n              <tr className=\"border-t font-medium\">\n                <td colSpan={4} className=\"py-0.5 text-right\">{t('cpq.charges.tieredTotal', 'Tiered Total')}</td>\n                <td className=\"py-0.5 text-right font-mono\">\n                  {formatMoney(tiers.reduce((sum, tier) => sum + tier.subtotal, 0), currency)}\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      )}\n\n      <div>\n        <div className=\"font-medium text-muted-foreground mb-1\">{t('cpq.priceAdjustments.waterfall.title', 'Price waterfall')}</div>\n        <PriceWaterfall charge={c} currency={currency} reasonLabels={reasonLabels} renderManualActions={renderManualActions} />\n      </div>\n\n      <div className=\"flex items-center justify-between pt-1 border-t text-sm font-semibold\">\n        <span>{t('cpq.charges.finalTotal', 'Final Total')}</span>\n        <span className=\"font-mono\">{c.totalPrice != null ? formatMoney(c.totalPrice, currency) : '\u2014'}</span>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/cpq/components/PriceWaterfall.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { Tag } from "@open-mercato/ui/primitives/tag";
+import {
+  discountDepth,
+  formatDepth,
+  waterfallRows
+} from "../lib/priceAdjustmentView.js";
+function money(amount, currency) {
+  return new Intl.NumberFormat("en-US", { style: "currency", currency }).format(amount);
+}
+const TYPE_FALLBACKS = {
+  discount_percent: "% discount",
+  discount_absolute: "amount off",
+  surcharge_percent: "% surcharge",
+  surcharge_absolute: "fixed surcharge",
+  price_override: "price override"
+};
+function DepthBadge({ before, after, title }) {
+  const label = formatDepth(discountDepth(before, after));
+  if (!label) return null;
+  return /* @__PURE__ */ jsx(Tag, { variant: "neutral", className: "px-1.5 text-xs font-mono", title, children: label });
+}
+function PriceWaterfall({ charge, currency, reasonLabels, renderManualActions }) {
+  const t = useT();
+  const rows = waterfallRows(charge);
+  const fmtValue = (ruleType, value) => ruleType.endsWith("_percent") ? `${value}%` : money(value, currency);
+  return /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", "data-testid": "cpq-price-waterfall", 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: t("cpq.priceAdjustments.waterfall.step", "Step") }),
+      /* @__PURE__ */ jsx("th", { className: "text-left py-0.5 font-medium", children: t("cpq.priceAdjustments.waterfall.source", "Source") }),
+      /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: t("cpq.priceAdjustments.waterfall.value", "Value") }),
+      /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: t("cpq.priceAdjustments.waterfall.delta", "Delta") }),
+      /* @__PURE__ */ jsx("th", { className: "text-right py-0.5 font-medium", children: t("cpq.priceAdjustments.waterfall.unitPrice", "Unit price") }),
+      renderManualActions && /* @__PURE__ */ jsx("th", { className: "w-16" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => {
+      if (row.kind === "list" || row.kind === "standard" || row.kind === "offer") {
+        const label = row.kind === "list" ? t("cpq.priceAdjustments.waterfall.list", "List price") : row.kind === "standard" ? t("cpq.priceAdjustments.waterfall.standard", "Standard price") : t("cpq.priceAdjustments.waterfall.offer", "Offer price");
+        return /* @__PURE__ */ jsxs("tr", { className: `border-t border-border/30 ${row.kind === "offer" ? "font-semibold" : "font-medium"}`, children: [
+          /* @__PURE__ */ jsx("td", { className: "py-0.5", colSpan: 4, children: label }),
+          /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: money(row.unitPrice, currency) }),
+          renderManualActions && /* @__PURE__ */ jsx("td", {})
+        ] }, `${row.kind}-${index}`);
+      }
+      const source = row.kind === "rule" ? t("cpq.priceAdjustments.waterfall.ruleSource", "Price rule: {name}", { name: row.label }) : t("cpq.priceAdjustments.waterfall.manualSource", "Negotiated: {reason}", {
+        reason: reasonLabels?.[row.reasonCode ?? ""] ?? row.reasonCode ?? row.label
+      });
+      return /* @__PURE__ */ jsxs("tr", { className: "border-t border-border/30", children: [
+        /* @__PURE__ */ jsx("td", { className: "py-0.5 pl-3 text-muted-foreground", children: t(`cpq.priceAdjustments.types.${row.ruleType}`, TYPE_FALLBACKS[row.ruleType] ?? row.ruleType) }),
+        /* @__PURE__ */ jsx("td", { className: "py-0.5", children: source }),
+        /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: fmtValue(row.ruleType, row.value) }),
+        /* @__PURE__ */ jsxs("td", { className: "py-0.5 text-right font-mono", children: [
+          row.delta > 0 ? "+" : "",
+          money(row.delta, currency)
+        ] }),
+        /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right font-mono", children: money(row.unitPriceAfter, currency) }),
+        renderManualActions && /* @__PURE__ */ jsx("td", { className: "py-0.5 text-right", children: row.kind === "manual" && row.adjustmentId ? renderManualActions(row.adjustmentId) : null })
+      ] }, `${row.kind}-${index}`);
+    }) })
+  ] });
+}
+export {
+  DepthBadge,
+  PriceWaterfall
+};
+//# sourceMappingURL=PriceWaterfall.js.map

package/dist/modules/cpq/components/PriceWaterfall.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/cpq/components/PriceWaterfall.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Tag } from '@open-mercato/ui/primitives/tag'\nimport {\n  discountDepth,\n  formatDepth,\n  waterfallRows,\n  type WaterfallChargeInput,\n} from '../lib/priceAdjustmentView'\n\nfunction money(amount: number, currency: string): string {\n  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)\n}\n\nconst TYPE_FALLBACKS: Record<string, string> = {\n  discount_percent: '% discount',\n  discount_absolute: 'amount off',\n  surcharge_percent: '% surcharge',\n  surcharge_absolute: 'fixed surcharge',\n  price_override: 'price override',\n}\n\n/** Signed depth badge: \"\u221220%\" for a discount, \"+5%\" for a surcharge; text, never colour only. */\nexport function DepthBadge({ before, after, title }: { before: number | null | undefined; after: number | null | undefined; title?: string }) {\n  const label = formatDepth(discountDepth(before, after))\n  if (!label) return null\n  return <Tag variant=\"neutral\" className=\"px-1.5 text-xs font-mono\" title={title}>{label}</Tag>\n}\n\nexport type PriceWaterfallProps = {\n  charge: WaterfallChargeInput & { chargeName?: string }\n  currency: string\n  /** Reason code \u2192 label; manual rows fall back to the code. */\n  reasonLabels?: Record<string, string>\n  /** Optional per-adjustment actions (edit / delete) rendered on manual rows. */\n  renderManualActions?: (adjustmentId: string) => React.ReactNode\n}\n\n/** Read-only list \u2192 rule \u2192 standard \u2192 manual \u2192 offer breakdown for one charge (unit prices). */\nexport function PriceWaterfall({ charge, currency, reasonLabels, renderManualActions }: PriceWaterfallProps) {\n  const t = useT()\n  const rows = waterfallRows(charge)\n  const fmtValue = (ruleType: string, value: number) =>\n    ruleType.endsWith('_percent') ? `${value}%` : money(value, currency)\n  return (\n    <table className=\"w-full text-xs\" data-testid=\"cpq-price-waterfall\">\n      <thead>\n        <tr className=\"text-muted-foreground\">\n          <th className=\"text-left py-0.5 font-medium\">{t('cpq.priceAdjustments.waterfall.step', 'Step')}</th>\n          <th className=\"text-left py-0.5 font-medium\">{t('cpq.priceAdjustments.waterfall.source', 'Source')}</th>\n          <th className=\"text-right py-0.5 font-medium\">{t('cpq.priceAdjustments.waterfall.value', 'Value')}</th>\n          <th className=\"text-right py-0.5 font-medium\">{t('cpq.priceAdjustments.waterfall.delta', 'Delta')}</th>\n          <th className=\"text-right py-0.5 font-medium\">{t('cpq.priceAdjustments.waterfall.unitPrice', 'Unit price')}</th>\n          {renderManualActions && <th className=\"w-16\" />}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row, index) => {\n          if (row.kind === 'list' || row.kind === 'standard' || row.kind === 'offer') {\n            const label = row.kind === 'list'\n              ? t('cpq.priceAdjustments.waterfall.list', 'List price')\n              : row.kind === 'standard'\n                ? t('cpq.priceAdjustments.waterfall.standard', 'Standard price')\n                : t('cpq.priceAdjustments.waterfall.offer', 'Offer price')\n            return (\n              <tr key={`${row.kind}-${index}`} className={`border-t border-border/30 ${row.kind === 'offer' ? 'font-semibold' : 'font-medium'}`}>\n                <td className=\"py-0.5\" colSpan={4}>{label}</td>\n                <td className=\"py-0.5 text-right font-mono\">{money(row.unitPrice, currency)}</td>\n                {renderManualActions && <td />}\n              </tr>\n            )\n          }\n          const source = row.kind === 'rule'\n            ? t('cpq.priceAdjustments.waterfall.ruleSource', 'Price rule: {name}', { name: row.label })\n            : t('cpq.priceAdjustments.waterfall.manualSource', 'Negotiated: {reason}', {\n                reason: reasonLabels?.[row.reasonCode ?? ''] ?? row.reasonCode ?? row.label,\n              })\n          return (\n            <tr key={`${row.kind}-${index}`} className=\"border-t border-border/30\">\n              <td className=\"py-0.5 pl-3 text-muted-foreground\">{t(`cpq.priceAdjustments.types.${row.ruleType}`, TYPE_FALLBACKS[row.ruleType] ?? row.ruleType)}</td>\n              <td className=\"py-0.5\">{source}</td>\n              <td className=\"py-0.5 text-right font-mono\">{fmtValue(row.ruleType, row.value)}</td>\n              <td className=\"py-0.5 text-right font-mono\">{row.delta > 0 ? '+' : ''}{money(row.delta, currency)}</td>\n              <td className=\"py-0.5 text-right font-mono\">{money(row.unitPriceAfter, currency)}</td>\n              {renderManualActions && (\n                <td className=\"py-0.5 text-right\">{row.kind === 'manual' && row.adjustmentId ? renderManualActions(row.adjustmentId) : null}</td>\n              )}\n            </tr>\n          )\n        })}\n      </tbody>\n    </table>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/cpq/components/PricingSummaryCard.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { formatDepth } from "../lib/priceAdjustmentView.js";
+import { chargeTypeDepths, formatChangePct } from "../lib/quoteSummaryView.js";
+import { formatMoney } from "../lib/formatMoney.js";
+function SummaryFigure({
+  label,
+  value,
+  note,
+  title,
+  size = "lg",
+  valueClassName,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-testid": testId, children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", title, children: label }),
+    /* @__PURE__ */ jsxs("p", { className: `${size === "lg" ? "text-lg" : "text-sm"} font-semibold font-mono ${valueClassName ?? ""}`, children: [
+      value,
+      note && /* @__PURE__ */ jsxs("span", { className: "ml-1.5 text-xs font-normal text-muted-foreground", children: [
+        "(",
+        note,
+        ")"
+      ] })
+    ] })
+  ] });
+}
+function PricingSummaryCard({ summary, currency, arcDelta }) {
+  const t = useT();
+  const typeDepths = chargeTypeDepths(summary);
+  const usageCharges = summary.usageCharges ?? [];
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", "data-testid": "cpq-pricing-summary", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium mb-3", children: t("cpq.quotes.summary.title", "Pricing Summary") }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: [
+      /* @__PURE__ */ jsx(
+        SummaryFigure,
+        {
+          label: t("cpq.quotes.summary.nrc", "Non-Recurring (NRC)"),
+          value: formatMoney(summary.nrcTotal, currency),
+          note: formatDepth(typeDepths.nrc),
+          testId: "cpq-summary-nrc"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SummaryFigure,
+        {
+          label: t("cpq.quotes.summary.mrc", "Monthly Recurring (MRC)"),
+          value: formatMoney(summary.mrcTotal, currency),
+          note: formatDepth(typeDepths.mrc),
+          testId: "cpq-summary-mrc"
+        }
+      ),
+      summary.dealValue && /* @__PURE__ */ jsx(
+        SummaryFigure,
+        {
+          label: t("cpq.priceAdjustments.summary.dealValue", "Deal value"),
+          title: t("cpq.priceAdjustments.summary.hint", "Deal value counts recurring charges over the term plus one-time charges; existing subscription items on change quotes are excluded."),
+          value: formatMoney(summary.dealValue.offer, currency),
+          note: formatDepth(summary.discountDepth?.total ?? null),
+          testId: "cpq-deal-value"
+        }
+      ),
+      summary.usageTotalEstimated != null && /* @__PURE__ */ jsx(
+        SummaryFigure,
+        {
+          label: t("cpq.quotes.summary.usageEstimated", "Usage (est.)"),
+          value: formatMoney(summary.usageTotalEstimated, currency)
+        }
+      ),
+      usageCharges.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("cpq.quotes.summary.usageCharges", "Usage Charges") }),
+        usageCharges.map((uc, i) => /* @__PURE__ */ jsx("p", { className: "text-xs mt-0.5", children: t("cpq.quotes.summary.usageChargeLine", "{name}: {price}/unit", { name: uc.chargeName, price: formatMoney(uc.unitPrice, currency) }) }, i))
+      ] })
+    ] }),
+    arcDelta && /* @__PURE__ */ jsxs("div", { className: "mt-4 grid grid-cols-2 sm:grid-cols-4 gap-4 border-t pt-3", "data-testid": "cpq-arc-delta", children: [
+      /* @__PURE__ */ jsx(
+        SummaryFigure,
+        {
+          size: "sm",
+          testId: "cpq-arc-current-mrc",
+          label: t("cpq.quotes.summary.arc.currentMrc", "Current MRC"),
+          value: formatMoney(arcDelta.currentMrc, currency)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SummaryFigure,
+        {
+          size: "sm",
+          testId: "cpq-arc-new-mrc",
+          label: t("cpq.quotes.summary.arc.newMrc", "New MRC"),
+          value: formatMoney(arcDelta.newMrc, currency)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SummaryFigure,
+        {
+          size: "sm",
+          testId: "cpq-arc-mrc-change",
+          label: t("cpq.quotes.summary.arc.mrcChange", "MRC change"),
+          value: `${arcDelta.delta > 0 ? "+" : ""}${formatMoney(arcDelta.delta, currency)}`,
+          valueClassName: arcDelta.delta > 0 ? "text-status-success-text" : arcDelta.delta < 0 ? "text-destructive" : void 0,
+          note: formatChangePct(arcDelta.deltaPct)
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  PricingSummaryCard,
+  SummaryFigure
+};
+//# sourceMappingURL=PricingSummaryCard.js.map

package/dist/modules/cpq/components/PricingSummaryCard.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/cpq/components/PricingSummaryCard.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { formatDepth } from '../lib/priceAdjustmentView'\nimport { chargeTypeDepths, formatChangePct, type ArcRecurringDelta } from '../lib/quoteSummaryView'\nimport { formatMoney } from '../lib/formatMoney'\n\n/** Pricing summary fields shared by quote and order results. Waterfall fields are absent on legacy snapshots. */\nexport type PricingSummaryView = {\n  nrcTotal: number\n  mrcTotal: number\n  listNrcTotal?: number\n  listMrcTotal?: number\n  dealValue?: { list: number; standard: number; offer: number }\n  discountDepth?: { total: number | null } | null\n  usageTotalEstimated?: number | null\n  usageCharges?: Array<{ chargeName: string; unitPrice: number }>\n}\n\nexport function SummaryFigure({\n  label,\n  value,\n  note,\n  title,\n  size = 'lg',\n  valueClassName,\n  testId,\n}: {\n  label: string\n  value: string\n  note?: string | null\n  title?: string\n  size?: 'lg' | 'sm'\n  valueClassName?: string\n  testId?: string\n}) {\n  return (\n    <div data-testid={testId}>\n      <p className=\"text-xs text-muted-foreground\" title={title}>{label}</p>\n      <p className={`${size === 'lg' ? 'text-lg' : 'text-sm'} font-semibold font-mono ${valueClassName ?? ''}`}>\n        {value}\n        {note && <span className=\"ml-1.5 text-xs font-normal text-muted-foreground\">({note})</span>}\n      </p>\n    </div>\n  )\n}\n\n/**\n * NRC / MRC / deal value with discount depth in brackets, plus the ARC\n * current \u2192 new MRC row on Amend / Renew documents. Shared by the quote and\n * order detail pages so both read the same.\n */\nexport function PricingSummaryCard({ summary, currency, arcDelta }: {\n  summary: PricingSummaryView\n  currency: string\n  arcDelta?: ArcRecurringDelta | null\n}) {\n  const t = useT()\n  const typeDepths = chargeTypeDepths(summary)\n  const usageCharges = summary.usageCharges ?? []\n  return (\n    <div className=\"rounded-lg border bg-card p-4\" data-testid=\"cpq-pricing-summary\">\n      <h3 className=\"text-sm font-medium mb-3\">{t('cpq.quotes.summary.title', 'Pricing Summary')}</h3>\n      <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n        <SummaryFigure\n          label={t('cpq.quotes.summary.nrc', 'Non-Recurring (NRC)')}\n          value={formatMoney(summary.nrcTotal, currency)}\n          note={formatDepth(typeDepths.nrc)}\n          testId=\"cpq-summary-nrc\"\n        />\n        <SummaryFigure\n          label={t('cpq.quotes.summary.mrc', 'Monthly Recurring (MRC)')}\n          value={formatMoney(summary.mrcTotal, currency)}\n          note={formatDepth(typeDepths.mrc)}\n          testId=\"cpq-summary-mrc\"\n        />\n        {summary.dealValue && (\n          <SummaryFigure\n            label={t('cpq.priceAdjustments.summary.dealValue', 'Deal value')}\n            title={t('cpq.priceAdjustments.summary.hint', 'Deal value counts recurring charges over the term plus one-time charges; existing subscription items on change quotes are excluded.')}\n            value={formatMoney(summary.dealValue.offer, currency)}\n            note={formatDepth(summary.discountDepth?.total ?? null)}\n            testId=\"cpq-deal-value\"\n          />\n        )}\n        {summary.usageTotalEstimated != null && (\n          <SummaryFigure\n            label={t('cpq.quotes.summary.usageEstimated', 'Usage (est.)')}\n            value={formatMoney(summary.usageTotalEstimated, currency)}\n          />\n        )}\n        {usageCharges.length > 0 && (\n          <div>\n            <p className=\"text-xs text-muted-foreground\">{t('cpq.quotes.summary.usageCharges', 'Usage Charges')}</p>\n            {usageCharges.map((uc, i) => (\n              <p key={i} className=\"text-xs mt-0.5\">{t('cpq.quotes.summary.usageChargeLine', '{name}: {price}/unit', { name: uc.chargeName, price: formatMoney(uc.unitPrice, currency) })}</p>\n            ))}\n          </div>\n        )}\n      </div>\n      {arcDelta && (\n        <div className=\"mt-4 grid grid-cols-2 sm:grid-cols-4 gap-4 border-t pt-3\" data-testid=\"cpq-arc-delta\">\n          <SummaryFigure\n            size=\"sm\"\n            testId=\"cpq-arc-current-mrc\"\n            label={t('cpq.quotes.summary.arc.currentMrc', 'Current MRC')}\n            value={formatMoney(arcDelta.currentMrc, currency)}\n          />\n          <SummaryFigure\n            size=\"sm\"\n            testId=\"cpq-arc-new-mrc\"\n            label={t('cpq.quotes.summary.arc.newMrc', 'New MRC')}\n            value={formatMoney(arcDelta.newMrc, currency)}\n          />\n          <SummaryFigure\n            size=\"sm\"\n            testId=\"cpq-arc-mrc-change\"\n            label={t('cpq.quotes.summary.arc.mrcChange', 'MRC change')}\n            value={`${arcDelta.delta > 0 ? '+' : ''}${formatMoney(arcDelta.delta, currency)}`}\n            valueClassName={arcDelta.delta > 0 ? 'text-status-success-text' : arcDelta.delta < 0 ? 'text-destructive' : undefined}\n            note={formatChangePct(arcDelta.deltaPct)}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/cpq/components/StatusPath.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronRight } from "lucide-react";
 import { Tag } from "@open-mercato/ui/primitives/tag";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { formatStatusLabel } from "./statusMaps.js";
 function StatusPath({
   current,
@@ -13,15 +14,16 @@ function StatusPath({
   onTransition,
   allowedTransitions,
   disabled,
-  ariaLabel = "Status path"
+  ariaLabel
 }) {
+  const t = useT();
   const sequence = React.useMemo(
     () => [...happyPath, ...terminals],
     [happyPath, terminals]
   );
   const currentIdx = sequence.findIndex((s) => s === current);
   const interactiveMode = typeof onTransition === "function";
-  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: "flex items-center gap-1.5 flex-wrap text-xs", children: sequence.map((status, idx) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel ?? t("cpq.statusPath.ariaLabel", "Status path"), className: "flex items-center gap-1.5 flex-wrap text-xs", children: sequence.map((status, idx) => {
     const reached = currentIdx >= 0 && idx <= currentIdx;
     const isCurrent = status === current;
     const variant = statusMap[status] ?? "neutral";
@@ -37,7 +39,7 @@ function StatusPath({
           type: "button",
           onClick: () => onTransition(status),
           "aria-current": isCurrent ? "step" : void 0,
-          title: `Transition to ${label}`,
+          title: t("cpq.statusPath.transitionTo", "Transition to {status}", { status: label }),
           className: wrapperClass,
           children: /* @__PURE__ */ jsx(Tag, { variant, dot: isCurrent, className: tagClass, children: label })
         }

package/dist/modules/cpq/components/StatusPath.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/modules/cpq/components/StatusPath.tsx"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { ChevronRight } from 'lucide-react'\nimport { Tag } from '@open-mercato/ui/primitives/tag'\nimport type { TagMap } from '@open-mercato/ui/primitives/tag'\nimport { formatStatusLabel } from './statusMaps'\n\n// Generic horizontal status breadcrumb shared by quotes, orders,\n// subscriptions, and assets. Each consumer passes its own `path`\n// (happy-path order) + `terminals` (off-path failure / cancellation\n// states always rendered at the end) + `statusMap` (status \u2192 Tag\n// variant for colours).\n//\n// Two interaction modes:\n//   - read-only: omit `onTransition`. Path renders as a progress\n//     indicator only.\n//   - interactive: pass `onTransition`. Every non-current step\n//     becomes a button that calls `onTransition(target)`. If\n//     `allowedTransitions` is provided, only those targets are\n//     clickable; otherwise all non-current steps are clickable.\n\ntype TagVariant = TagMap<string>[string]\n\nexport function StatusPath({\n  current,\n  path: happyPath,\n  terminals = [],\n  statusMap,\n  labels,\n  onTransition,\n  allowedTransitions,\n  disabled,\n  ariaLabel = 'Status path',\n}: {\n  current: string\n  /** Happy-path statuses in order. */\n  path: string[]\n  /** Off-path terminal statuses always rendered after the happy path. */\n  terminals?: string[]\n  /** Status \u2192 Tag variant. Missing entries fall back to \"neutral\". */\n  statusMap: Record<string, TagVariant>\n  /** Optional human labels (overrides `formatStatusLabel`). */\n  labels?: Record<string, string>\n  /** Click handler. Omit for read-only path. */\n  onTransition?: (target: string) => void\n  /** If set, only these targets are clickable. Else any non-current. */\n  allowedTransitions?: string[]\n  disabled?: boolean\n  ariaLabel?: string\n}) {\n  // Build the displayed sequence. Aliases can swap into the happy\n  // path slot (e.g. quote's `pre_approved` shown as `approved`). We\n  // don't handle aliasing here \u2014 consumers can swap entries in\n  // their own happyPath before passing it in.\n  const sequence = React.useMemo<string[]>(\n    () => [...happyPath, ...terminals],\n    [happyPath, terminals],\n  )\n\n  const currentIdx = sequence.findIndex((s) => s === current)\n  const interactiveMode = typeof onTransition === 'function'\n\n  return (\n    <nav aria-label={ariaLabel} className=\"flex items-center gap-1.5 flex-wrap text-xs\">\n      {sequence.map((status, idx) => {\n        const reached = currentIdx >= 0 && idx <= currentIdx\n        const isCurrent = status === current\n        const variant = statusMap[status] ?? 'neutral'\n        const label = labels?.[status] ?? formatStatusLabel(status)\n        const tagClass = isCurrent\n          ? 'ring-2 ring-primary/40'\n          : reached\n            ? ''\n            : 'opacity-60'\n        // Clickability: interactive mode + not current + not disabled\n        // + (no allowedTransitions list OR status is in the list).\n        const clickable =\n          interactiveMode &&\n          !isCurrent &&\n          !disabled &&\n          (allowedTransitions ? allowedTransitions.includes(status) : true)\n        const wrapperClass = clickable\n          ? 'cursor-pointer hover:ring-2 hover:ring-primary/30 rounded-full'\n          : ''\n\n        return (\n          <React.Fragment key={status}>\n            {idx > 0 && <ChevronRight className=\"h-3 w-3 text-muted-foreground shrink-0\" />}\n            {clickable ? (\n              <button\n                type=\"button\"\n                onClick={() => onTransition!(status)}\n                aria-current={isCurrent ? 'step' : undefined}\n                title={`Transition to ${label}`}\n                className={wrapperClass}\n              >\n                <Tag variant={variant} dot={isCurrent} className={tagClass}>\n                  {label}\n                </Tag>\n              </button>\n            ) : (\n              <Tag\n                variant={variant}\n                dot={isCurrent}\n                className={tagClass}\n                aria-current={isCurrent ? 'step' : undefined}\n              >\n                {label}\n              </Tag>\n            )}\n          </React.Fragment>\n        )\n      })}\n    </nav>\n  )\n}\n"],
-  "mappings": ";AAsFU,SACc,KADd;AArFV,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAC7B,SAAS,WAAW;AAEpB,SAAS,yBAAyB;AAkB3B,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,MAAM;AAAA,EACN,YAAY,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAgBG;AAKD,QAAM,WAAW,MAAM;AAAA,IACrB,MAAM,CAAC,GAAG,WAAW,GAAG,SAAS;AAAA,IACjC,CAAC,WAAW,SAAS;AAAA,EACvB;AAEA,QAAM,aAAa,SAAS,UAAU,CAAC,MAAM,MAAM,OAAO;AAC1D,QAAM,kBAAkB,OAAO,iBAAiB;AAEhD,SACE,oBAAC,SAAI,cAAY,WAAW,WAAU,+CACnC,mBAAS,IAAI,CAAC,QAAQ,QAAQ;AAC7B,UAAM,UAAU,cAAc,KAAK,OAAO;AAC1C,UAAM,YAAY,WAAW;AAC7B,UAAM,UAAU,UAAU,MAAM,KAAK;AACrC,UAAM,QAAQ,SAAS,MAAM,KAAK,kBAAkB,MAAM;AAC1D,UAAM,WAAW,YACb,2BACA,UACE,KACA;AAGN,UAAM,YACJ,mBACA,CAAC,aACD,CAAC,aACA,qBAAqB,mBAAmB,SAAS,MAAM,IAAI;AAC9D,UAAM,eAAe,YACjB,mEACA;AAEJ,WACE,qBAAC,MAAM,UAAN,EACE;AAAA,YAAM,KAAK,oBAAC,gBAAa,WAAU,0CAAyC;AAAA,MAC5E,YACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,aAAc,MAAM;AAAA,UACnC,gBAAc,YAAY,SAAS;AAAA,UACnC,OAAO,iBAAiB,KAAK;AAAA,UAC7B,WAAW;AAAA,UAEX,8BAAC,OAAI,SAAkB,KAAK,WAAW,WAAW,UAC/C,iBACH;AAAA;AAAA,MACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,KAAK;AAAA,UACL,WAAW;AAAA,UACX,gBAAc,YAAY,SAAS;AAAA,UAElC;AAAA;AAAA,MACH;AAAA,SAtBiB,MAwBrB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { ChevronRight } from 'lucide-react'\nimport { Tag } from '@open-mercato/ui/primitives/tag'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { TagMap } from '@open-mercato/ui/primitives/tag'\nimport { formatStatusLabel } from './statusMaps'\n\n// Generic horizontal status breadcrumb shared by quotes, orders,\n// subscriptions, and assets. Each consumer passes its own `path`\n// (happy-path order) + `terminals` (off-path failure / cancellation\n// states always rendered at the end) + `statusMap` (status \u2192 Tag\n// variant for colours).\n//\n// Two interaction modes:\n//   - read-only: omit `onTransition`. Path renders as a progress\n//     indicator only.\n//   - interactive: pass `onTransition`. Every non-current step\n//     becomes a button that calls `onTransition(target)`. If\n//     `allowedTransitions` is provided, only those targets are\n//     clickable; otherwise all non-current steps are clickable.\n\ntype TagVariant = TagMap<string>[string]\n\nexport function StatusPath({\n  current,\n  path: happyPath,\n  terminals = [],\n  statusMap,\n  labels,\n  onTransition,\n  allowedTransitions,\n  disabled,\n  ariaLabel,\n}: {\n  current: string\n  /** Happy-path statuses in order. */\n  path: string[]\n  /** Off-path terminal statuses always rendered after the happy path. */\n  terminals?: string[]\n  /** Status \u2192 Tag variant. Missing entries fall back to \"neutral\". */\n  statusMap: Record<string, TagVariant>\n  /** Optional human labels, already translated by the caller (overrides `formatStatusLabel`). */\n  labels?: Record<string, string>\n  /** Click handler. Omit for read-only path. */\n  onTransition?: (target: string) => void\n  /** If set, only these targets are clickable. Else any non-current. */\n  allowedTransitions?: string[]\n  disabled?: boolean\n  /** Translated accessible name; defaults to \"Status path\". */\n  ariaLabel?: string\n}) {\n  const t = useT()\n  // Build the displayed sequence. Aliases can swap into the happy\n  // path slot (e.g. quote's `pre_approved` shown as `approved`). We\n  // don't handle aliasing here \u2014 consumers can swap entries in\n  // their own happyPath before passing it in.\n  const sequence = React.useMemo<string[]>(\n    () => [...happyPath, ...terminals],\n    [happyPath, terminals],\n  )\n\n  const currentIdx = sequence.findIndex((s) => s === current)\n  const interactiveMode = typeof onTransition === 'function'\n\n  return (\n    <nav aria-label={ariaLabel ?? t('cpq.statusPath.ariaLabel', 'Status path')} className=\"flex items-center gap-1.5 flex-wrap text-xs\">\n      {sequence.map((status, idx) => {\n        const reached = currentIdx >= 0 && idx <= currentIdx\n        const isCurrent = status === current\n        const variant = statusMap[status] ?? 'neutral'\n        const label = labels?.[status] ?? formatStatusLabel(status)\n        const tagClass = isCurrent\n          ? 'ring-2 ring-primary/40'\n          : reached\n            ? ''\n            : 'opacity-60'\n        // Clickability: interactive mode + not current + not disabled\n        // + (no allowedTransitions list OR status is in the list).\n        const clickable =\n          interactiveMode &&\n          !isCurrent &&\n          !disabled &&\n          (allowedTransitions ? allowedTransitions.includes(status) : true)\n        const wrapperClass = clickable\n          ? 'cursor-pointer hover:ring-2 hover:ring-primary/30 rounded-full'\n          : ''\n\n        return (\n          <React.Fragment key={status}>\n            {idx > 0 && <ChevronRight className=\"h-3 w-3 text-muted-foreground shrink-0\" />}\n            {clickable ? (\n              <button\n                type=\"button\"\n                onClick={() => onTransition!(status)}\n                aria-current={isCurrent ? 'step' : undefined}\n                title={t('cpq.statusPath.transitionTo', 'Transition to {status}', { status: label })}\n                className={wrapperClass}\n              >\n                <Tag variant={variant} dot={isCurrent} className={tagClass}>\n                  {label}\n                </Tag>\n              </button>\n            ) : (\n              <Tag\n                variant={variant}\n                dot={isCurrent}\n                className={tagClass}\n                aria-current={isCurrent ? 'step' : undefined}\n              >\n                {label}\n              </Tag>\n            )}\n          </React.Fragment>\n        )\n      })}\n    </nav>\n  )\n}\n"],
+  "mappings": ";AAyFU,SACc,KADd;AAxFV,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAC7B,SAAS,WAAW;AACpB,SAAS,YAAY;AAErB,SAAS,yBAAyB;AAkB3B,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,MAAM;AAAA,EACN,YAAY,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAiBG;AACD,QAAM,IAAI,KAAK;AAKf,QAAM,WAAW,MAAM;AAAA,IACrB,MAAM,CAAC,GAAG,WAAW,GAAG,SAAS;AAAA,IACjC,CAAC,WAAW,SAAS;AAAA,EACvB;AAEA,QAAM,aAAa,SAAS,UAAU,CAAC,MAAM,MAAM,OAAO;AAC1D,QAAM,kBAAkB,OAAO,iBAAiB;AAEhD,SACE,oBAAC,SAAI,cAAY,aAAa,EAAE,4BAA4B,aAAa,GAAG,WAAU,+CACnF,mBAAS,IAAI,CAAC,QAAQ,QAAQ;AAC7B,UAAM,UAAU,cAAc,KAAK,OAAO;AAC1C,UAAM,YAAY,WAAW;AAC7B,UAAM,UAAU,UAAU,MAAM,KAAK;AACrC,UAAM,QAAQ,SAAS,MAAM,KAAK,kBAAkB,MAAM;AAC1D,UAAM,WAAW,YACb,2BACA,UACE,KACA;AAGN,UAAM,YACJ,mBACA,CAAC,aACD,CAAC,aACA,qBAAqB,mBAAmB,SAAS,MAAM,IAAI;AAC9D,UAAM,eAAe,YACjB,mEACA;AAEJ,WACE,qBAAC,MAAM,UAAN,EACE;AAAA,YAAM,KAAK,oBAAC,gBAAa,WAAU,0CAAyC;AAAA,MAC5E,YACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,aAAc,MAAM;AAAA,UACnC,gBAAc,YAAY,SAAS;AAAA,UACnC,OAAO,EAAE,+BAA+B,0BAA0B,EAAE,QAAQ,MAAM,CAAC;AAAA,UACnF,WAAW;AAAA,UAEX,8BAAC,OAAI,SAAkB,KAAK,WAAW,WAAW,UAC/C,iBACH;AAAA;AAAA,MACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,KAAK;AAAA,UACL,WAAW;AAAA,UACX,gBAAc,YAAY,SAAS;AAAA,UAElC;AAAA;AAAA,MACH;AAAA,SAtBiB,MAwBrB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/modules/cpq/components/useCpqRowActions.js

@@ -4,7 +4,7 @@ import { flash } from "@open-mercato/ui/backend/FlashMessages";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
 function useCpqRowActions(options) {
-  const { endpoint, entityName, editHref, onReload, canDelete } = options;
+  const { endpoint, editHref, onReload, canDelete } = options;
   const t = useT();
   const { confirm, ConfirmDialogElement } = useConfirmDialog();
   const deleteOne = React.useCallback(
@@ -22,25 +22,22 @@ function useCpqRowActions(options) {
     async (row) => {
       if (canDelete && !canDelete(row)) return;
       const confirmed = await confirm({
-        title: t(
-          "cpq.rowActions.deleteOne.confirm",
-          `Delete this ${entityName}?`
-        ),
+        title: t("cpq.rowActions.deleteOne.confirm", "Delete this item?"),
         variant: "destructive"
       });
       if (!confirmed) return;
       const ok = await deleteOne(row.id);
       if (!ok) {
         flash(
-          t("cpq.rowActions.deleteOne.error", `Failed to delete ${entityName}`),
+          t("cpq.rowActions.deleteOne.error", "Failed to delete the item"),
           "error"
         );
         return;
       }
-      flash(t("cpq.rowActions.deleteOne.success", `${entityName} deleted`), "success");
+      flash(t("cpq.rowActions.deleteOne.success", "Item deleted"), "success");
       onReload();
     },
-    [canDelete, confirm, deleteOne, entityName, onReload, t]
+    [canDelete, confirm, deleteOne, onReload, t]
   );
   const bulkDelete = React.useCallback(
     async (rows) => {
@@ -48,19 +45,13 @@ function useCpqRowActions(options) {
       const eligible = canDelete ? rows.filter(canDelete) : rows;
       if (!eligible.length) {
         flash(
-          t(
-            "cpq.rowActions.deleteBulk.noEligible",
-            `None of the selected ${entityName}s can be deleted in their current state.`
-          ),
+          t("cpq.rowActions.deleteBulk.noEligible", "None of the selected items can be deleted in their current state."),
           "error"
         );
         return { ok: false };
       }
       const confirmed = await confirm({
-        title: t(
-          "cpq.rowActions.deleteBulk.confirm",
-          `Delete ${eligible.length} ${entityName}${eligible.length > 1 ? "s" : ""}?`
-        ),
+        title: t("cpq.rowActions.deleteBulk.confirm", "Delete selected items ({count})?", { count: eligible.length }),
         variant: "destructive"
       });
       if (!confirmed) return { ok: false };
@@ -71,22 +62,19 @@ function useCpqRowActions(options) {
       }
       if (failed > 0) {
         flash(
-          t(
-            "cpq.rowActions.deleteBulk.partialError",
-            `Failed to delete ${failed} ${entityName}${failed > 1 ? "s" : ""}`
-          ),
+          t("cpq.rowActions.deleteBulk.partialError", "Failed to delete {count} of the selected items", { count: failed }),
           "error"
         );
       } else {
         flash(
-          t("cpq.rowActions.deleteBulk.success", `${entityName}s deleted`),
+          t("cpq.rowActions.deleteBulk.success", "Selected items deleted ({count})", { count: eligible.length }),
           "success"
         );
       }
       onReload();
       return { ok: failed === 0, affectedCount: eligible.length - failed };
     },
-    [canDelete, confirm, deleteOne, entityName, onReload, t]
+    [canDelete, confirm, deleteOne, onReload, t]
   );
   const buildItems = React.useCallback(
     (row, extras) => {