@dainamite/cpq 0.5.0 → 0.7.0

package/src/modules/cpq/commands/price-adjustments.ts

@@ -0,0 +1,90 @@
+import { z } from 'zod'
+import { resolveAuditActor } from '../lib/auditActor'
+import { resolveTranslations } from '@open-mercato/shared/lib/i18n/server'
+import { extractUndoPayload } from '@open-mercato/shared/lib/commands/undo'
+import { registerCommand, type CommandHandler, type CommandRuntimeContext } from '@open-mercato/shared/lib/commands'
+import type { RbacService } from '@open-mercato/core/modules/auth/services/rbacService'
+import { cpqPriceAdjustmentInputSchema, cpqPriceAdjustmentPatchSchema } from '../data/price-adjustments'
+import { QuotingError } from '../services/cpqQuotingService'
+import type { CpqAdjustmentService, AdjustmentWriteResult, AdjustmentSnapshot } from '../services/priceAdjustments/adjustmentService'
+
+const id = z.string().uuid()
+const createSchema = z.object({ quoteId: id, adjustment: cpqPriceAdjustmentInputSchema }).strict()
+const updateSchema = z.object({ quoteId: id, adjustmentId: id, patch: cpqPriceAdjustmentPatchSchema }).strict()
+const deleteSchema = z.object({ quoteId: id, adjustmentId: id, expectedRevision: z.number().int().min(0).optional() }).strict()
+// Undo data is parsed independently of the original request and never trusted
+// to supply actor/scope. Its target is checked again under the aggregate lock.
+const snapshotSchema = z.object({
+  id, quoteConfigurationId: id, quoteId: id, tenantId: id, organizationId: id,
+  createdByUserId: id, createdAt: z.string().datetime(), updatedAt: z.string().datetime(),
+  deletedAt: z.string().datetime().nullable(), isActive: z.boolean(),
+  level: z.enum(['charge', 'line']), quoteLineId: id, chargeCode: z.string().nullish(),
+  chargeTypeFilter: z.enum(['nrc', 'mrc']).nullish(), adjustmentType: z.enum(['discount_percent', 'discount_absolute', 'price_override']),
+  value: z.number(), currencyCode: z.string().nullish(), reasonCode: z.string(), reasonNote: z.string().nullish(),
+})
+const undoSchema = z.object({ quoteId: id, before: snapshotSchema.nullable(), after: snapshotSchema })
+
+async function context(ctx: CommandRuntimeContext) {
+  // RBAC is checked for the authenticated subject (user or API key); the
+  // stored author must be a user id (uuid columns).
+  const subject = ctx.auth?.sub
+  const actor = resolveAuditActor(ctx.auth)
+  const tenantId = ctx.organizationScope?.tenantId ?? ctx.auth?.tenantId
+  const organizationId = ctx.selectedOrganizationId
+  if (!subject || !tenantId || !organizationId) throw new QuotingError(403, 'An authenticated tenant and organization are required')
+  if (!actor) throw new QuotingError(403, 'Price adjustments require a user or a user-bound API key')
+  const scope = { tenantId, organizationId }
+  const rbac = ctx.container.resolve<RbacService>('rbacService')
+  if (!(await rbac.userHasAllFeatures(subject, ['cpq.quotes.manage', 'cpq.quotes.adjust_price'], scope))) throw new QuotingError(403, 'Price adjustment permission required')
+  return { actor, scope, service: ctx.container.resolve<CpqAdjustmentService>('cpqAdjustmentService') }
+}
+
+async function buildLog(quoteId: string, result: AdjustmentWriteResult) {
+  const { translate } = await resolveTranslations()
+  return { actionLabel: translate('cpq.priceAdjustments.audit.adjust', 'Adjust quote price'), resourceKind: 'cpq.quote_price_adjustment', resourceId: result.adjustment.id,
+    tenantId: result.adjustment.tenantId, organizationId: result.adjustment.organizationId,
+    snapshotBefore: result.before, snapshotAfter: result.adjustment,
+    payload: { undo: { quoteId, before: result.before, after: result.adjustment } } }
+}
+
+async function undo({ logEntry, ctx }: Parameters<NonNullable<CommandHandler['undo']>>[0]) {
+  const envelope = undoSchema.safeParse(extractUndoPayload<unknown>(logEntry))
+  if (!envelope.success) throw new QuotingError(422, 'Invalid adjustment undo data')
+  const { actor, scope, service } = await context(ctx)
+  const { quoteId, before, after } = envelope.data
+  await service.undo(quoteId, after.id, before as AdjustmentSnapshot | null, after as AdjustmentSnapshot, actor, scope)
+}
+
+export const createAdjustmentCommand: CommandHandler<z.infer<typeof createSchema>, AdjustmentWriteResult> = {
+  id: 'cpq.quote_price_adjustment.create', isUndoable: true,
+  async execute(input, ctx) {
+    const parsed = createSchema.parse(input)
+    const { actor, scope, service } = await context(ctx)
+    return service.create(parsed.quoteId, parsed.adjustment, actor, scope)
+  },
+  buildLog: ({ input, result }) => buildLog(input.quoteId, result),
+  undo,
+}
+export const updateAdjustmentCommand: CommandHandler<z.infer<typeof updateSchema>, AdjustmentWriteResult> = {
+  id: 'cpq.quote_price_adjustment.update', isUndoable: true,
+  async execute(input, ctx) {
+    const parsed = updateSchema.parse(input)
+    const { actor, scope, service } = await context(ctx)
+    return service.update(parsed.quoteId, parsed.adjustmentId, parsed.patch, actor, scope)
+  },
+  buildLog: ({ input, result }) => buildLog(input.quoteId, result),
+  undo,
+}
+export const deleteAdjustmentCommand: CommandHandler<z.infer<typeof deleteSchema>, AdjustmentWriteResult> = {
+  id: 'cpq.quote_price_adjustment.delete', isUndoable: true,
+  async execute(input, ctx) {
+    const parsed = deleteSchema.parse(input)
+    const { actor, scope, service } = await context(ctx)
+    return service.remove(parsed.quoteId, parsed.adjustmentId, actor, scope, parsed.expectedRevision)
+  },
+  buildLog: ({ input, result }) => buildLog(input.quoteId, result),
+  undo,
+}
+registerCommand(createAdjustmentCommand)
+registerCommand(updateAdjustmentCommand)
+registerCommand(deleteAdjustmentCommand)

package/src/modules/cpq/components/ArcLineDiff.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import { formatMoney } from '../lib/formatMoney'
+
+export type LineAction = 'add' | 'modify' | 'cancel'
+
+const ACTION_VARIANTS: Record<LineAction, 'info' | 'warning' | 'error'> = {
+  add: 'info',
+  modify: 'warning',
+  cancel: 'error',
+}
+
+/** Coloured add / modify / cancel tag on quote and order lines. */
+export function LineActionBadge({ action, label, title }: { action: string; label?: string; title?: string }) {
+  const variant = ACTION_VARIANTS[action as LineAction] ?? 'info'
+  return (
+    <Tag variant={variant} className="px-1.5 text-xs" title={title}>
+      {label ?? action}
+    </Tag>
+  )
+}
+
+export type ArcDiffLine = {
+  action: string
+  quantity: number
+  nrcTotal: number
+  mrcTotal: number
+  arcSource: { mrcAmount: number; nrcAmount: number; quantity: number } | null
+}
+
+/** Before / after / Δ preview for a line that changes an existing subscription item. */
+export function ArcLineDiff({ line, currency }: { line: ArcDiffLine; currency: string }) {
+  const t = useT()
+  const src = line.arcSource
+  if (!src) return null
+  const isCancel = line.action === 'cancel'
+  const rows: Array<{ label: string; before: number; after: number; asCurrency: boolean }> = [
+    { label: t('cpq.arc.diff.quantity', 'Quantity'), before: src.quantity, after: isCancel ? 0 : line.quantity, asCurrency: false },
+    { label: t('cpq.arc.diff.mrc', 'MRC'), before: src.mrcAmount, after: isCancel ? 0 : line.mrcTotal, asCurrency: true },
+    { label: t('cpq.arc.diff.nrc', 'NRC'), before: src.nrcAmount, after: isCancel ? 0 : line.nrcTotal, asCurrency: true },
+  ]
+  const fmtVal = (value: number, asCurrency: boolean) => (asCurrency ? formatMoney(value, currency) : String(value))
+
+  return (
+    <div className="space-y-1.5" data-testid="cpq-arc-line-diff">
+      <p className="text-xs font-medium text-muted-foreground">{t('cpq.arc.diff.title', 'Change Preview')}</p>
+      <div className="rounded border bg-background overflow-hidden">
+        <table className="w-full text-xs">
+          <thead className="bg-muted/40">
+            <tr className="text-muted-foreground">
+              <th className="text-left px-3 py-1.5 font-medium" />
+              <th className="text-right px-3 py-1.5 font-medium">{t('cpq.arc.diff.before', 'Before')}</th>
+              <th className="text-right px-3 py-1.5 font-medium">{t('cpq.arc.diff.after', 'After')}</th>
+              <th className="text-right px-3 py-1.5 font-medium">Δ</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((r) => {
+              const delta = r.after - r.before
+              const showDelta = delta !== 0
+              return (
+                <tr key={r.label} className="border-t border-dashed border-border/40">
+                  <td className="px-3 py-1 text-muted-foreground">{r.label}</td>
+                  <td className="px-3 py-1 text-right font-mono">{fmtVal(r.before, r.asCurrency)}</td>
+                  <td className={`px-3 py-1 text-right font-mono ${isCancel ? 'text-muted-foreground line-through' : ''}`}>
+                    {fmtVal(r.after, r.asCurrency)}
+                  </td>
+                  <td className={`px-3 py-1 text-right font-mono font-medium ${showDelta ? (delta > 0 ? 'text-status-success-text' : 'text-destructive') : 'text-muted-foreground'}`}>
+                    {showDelta ? `${delta > 0 ? '+' : ''}${fmtVal(delta, r.asCurrency)}` : '—'}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+      {isCancel && (
+        <p className="text-xs text-destructive italic">
+          {t('cpq.arc.diff.cancelNote', 'Cancellation — item will be terminated on activation.')}
+        </p>
+      )}
+    </div>
+  )
+}

package/src/modules/cpq/components/ChargeBreakdownTable.tsx

@@ -0,0 +1,203 @@
+'use client'
+
+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'
+import { ADJUSTMENT_ERROR_FALLBACKS, type WaterfallChargeInput } from '../lib/priceAdjustmentView'
+import { formatMoney } from '../lib/formatMoney'
+
+type TierBreakdownEntry = { tier: number; from: number; to: number; pricePerUnit: number; quantity: number; subtotal: number }
+
+/** One priced charge as stored on a quote or order line. */
+export type ChargeRowView = WaterfallChargeInput & {
+  chargeName: string
+  quantity?: number | null
+  note?: string | null
+  breakdown?: { tiers: TierBreakdownEntry[] } | null
+  adjustmentErrors?: Array<{ code: string }>
+}
+
+/** Right-aligned price column header with an explanatory hover tooltip. */
+function PriceColumnHeader({ label, hint }: { label: string; hint: string }) {
+  return (
+    <th className="text-right py-1 font-medium">
+      <SimpleTooltip content={hint} size="sm">
+        <span className="inline-flex items-center gap-1 cursor-help" tabIndex={0} aria-label={`${label}: ${hint}`}>
+          {label}
+          <Info className="h-3 w-3" aria-hidden />
+        </span>
+      </SimpleTooltip>
+    </th>
+  )
+}
+
+/**
+ * Charge table shared by the quote and order detail pages: list / standard /
+ * offer unit prices with depth badge, and a per-charge pricing detail (tiers +
+ * price waterfall). Editing hooks are optional render props.
+ */
+export function ChargeBreakdownTable<C extends ChargeRowView>({
+  charges,
+  currency,
+  openDetailIndex,
+  onToggleDetail,
+  reasonLabels,
+  renderChargeActions,
+  renderManualActions,
+}: {
+  charges: C[]
+  currency: string
+  openDetailIndex: number | null
+  onToggleDetail: (chargeIndex: number) => void
+  reasonLabels?: Record<string, string>
+  renderChargeActions?: (charge: C) => React.ReactNode
+  renderManualActions?: (adjustmentId: string) => React.ReactNode
+}) {
+  const t = useT()
+  return (
+    <table className="w-full text-xs" data-testid="cpq-charge-breakdown">
+      <thead>
+        <tr className="text-muted-foreground">
+          <th className="text-left py-1 font-medium">{t('cpq.charges.charge', 'Charge')}</th>
+          <th className="text-left py-1 font-medium">{t('cpq.charges.type', 'Type')}</th>
+          <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.')}
+          />
+          <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.')}
+          />
+          <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.')}
+          />
+          <th className="text-right py-1 font-medium">{t('cpq.charges.qty', 'Qty')}</th>
+          <th className="text-right py-1 font-medium">{t('cpq.charges.total', 'Total')}</th>
+          <th className="w-16" />
+        </tr>
+      </thead>
+      <tbody>
+        {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 (
+            <React.Fragment key={i}>
+              <tr className="border-t border-dashed border-border/50">
+                <td className="py-1">
+                  <span>{c.chargeName}</span>
+                  {errors.length > 0 && (
+                    <Tag variant="warning" className="ml-1.5 px-1.5 text-xs" data-testid="cpq-adjustment-invalid">
+                      {t('cpq.priceAdjustments.invalidReason', 'Invalid: {reason}', {
+                        reason: t(`cpq.priceAdjustments.errors.${errors[0].code}`, ADJUSTMENT_ERROR_FALLBACKS[errors[0].code] ?? errors[0].code),
+                      })}
+                    </Tag>
+                  )}
+                </td>
+                <td className="py-1 uppercase">{c.chargeType}</td>
+                <td className="py-1 text-right font-mono text-muted-foreground">{formatMoney(listUnit, currency)}</td>
+                <td className="py-1 text-right font-mono text-muted-foreground">{formatMoney(standardUnit, currency)}</td>
+                <td className="py-1 text-right font-mono">
+                  <span className="inline-flex items-center gap-1">
+                    <DepthBadge before={listUnit} after={c.unitPrice} />
+                    {formatMoney(c.unitPrice, currency)}
+                  </span>
+                </td>
+                <td className="py-1 text-right font-mono">{c.quantity ?? '—'}</td>
+                <td className="py-1 text-right font-mono">{c.totalPrice != null ? formatMoney(c.totalPrice, currency) : c.note ?? '—'}</td>
+                <td className="py-1 text-right whitespace-nowrap">
+                  {renderChargeActions?.(c)}
+                  {hasDetail && (
+                    <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')}
+                    >
+                      <Info className="h-3.5 w-3.5" />
+                    </button>
+                  )}
+                </td>
+              </tr>
+              {isDetailOpen && (
+                <tr>
+                  <td colSpan={8} className="pb-3 pt-1">
+                    <ChargePricingDetail charge={c} currency={currency} reasonLabels={reasonLabels} renderManualActions={renderManualActions} />
+                  </td>
+                </tr>
+              )}
+            </React.Fragment>
+          )
+        })}
+      </tbody>
+    </table>
+  )
+}
+
+function ChargePricingDetail({ charge: c, currency, reasonLabels, renderManualActions }: {
+  charge: ChargeRowView
+  currency: string
+  reasonLabels?: Record<string, string>
+  renderManualActions?: (adjustmentId: string) => React.ReactNode
+}) {
+  const t = useT()
+  const tiers = c.breakdown?.tiers ?? []
+  return (
+    <div className="rounded border bg-background p-3 space-y-3 text-xs">
+      <div className="flex items-center justify-between">
+        <span className="font-semibold text-sm">{t('cpq.charges.pricingDetailsFor', 'Pricing Details — {name}', { name: c.chargeName })}</span>
+        <span className="text-muted-foreground">{c.pricingMethod ?? 'flat'}</span>
+      </div>
+
+      {tiers.length > 0 && (
+        <div>
+          <div className="font-medium text-muted-foreground mb-1">{t('cpq.charges.tierBreakdown', 'Tier Breakdown')}</div>
+          <table className="w-full">
+            <thead>
+              <tr className="text-muted-foreground">
+                <th className="text-left py-0.5 font-medium">{t('cpq.charges.tier', 'Tier')}</th>
+                <th className="text-right py-0.5 font-medium">{t('cpq.charges.range', 'Range')}</th>
+                <th className="text-right py-0.5 font-medium">{t('cpq.charges.pricePerUnit', 'Price/Unit')}</th>
+                <th className="text-right py-0.5 font-medium">{t('cpq.charges.qty', 'Qty')}</th>
+                <th className="text-right py-0.5 font-medium">{t('cpq.charges.subtotal', 'Subtotal')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {tiers.map((tier) => (
+                <tr key={tier.tier} className="border-t border-border/30">
+                  <td className="py-0.5">{tier.tier}</td>
+                  <td className="py-0.5 text-right font-mono">{tier.from}–{tier.to}</td>
+                  <td className="py-0.5 text-right font-mono">{formatMoney(tier.pricePerUnit, currency)}</td>
+                  <td className="py-0.5 text-right font-mono">{tier.quantity}</td>
+                  <td className="py-0.5 text-right font-mono">{formatMoney(tier.subtotal, currency)}</td>
+                </tr>
+              ))}
+              <tr className="border-t font-medium">
+                <td colSpan={4} className="py-0.5 text-right">{t('cpq.charges.tieredTotal', 'Tiered Total')}</td>
+                <td className="py-0.5 text-right font-mono">
+                  {formatMoney(tiers.reduce((sum, tier) => sum + tier.subtotal, 0), currency)}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <div>
+        <div className="font-medium text-muted-foreground mb-1">{t('cpq.priceAdjustments.waterfall.title', 'Price waterfall')}</div>
+        <PriceWaterfall charge={c} currency={currency} reasonLabels={reasonLabels} renderManualActions={renderManualActions} />
+      </div>
+
+      <div className="flex items-center justify-between pt-1 border-t text-sm font-semibold">
+        <span>{t('cpq.charges.finalTotal', 'Final Total')}</span>
+        <span className="font-mono">{c.totalPrice != null ? formatMoney(c.totalPrice, currency) : '—'}</span>
+      </div>
+    </div>
+  )
+}

package/src/modules/cpq/components/PriceWaterfall.tsx

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

package/src/modules/cpq/components/PricingSummaryCard.tsx

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

package/src/modules/cpq/components/StatusPath.tsx

@@ -2,6 +2,7 @@
 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 type { TagMap } from '@open-mercato/ui/primitives/tag'
 import { formatStatusLabel } from './statusMaps'
 
@@ -30,7 +31,7 @@ export function StatusPath({
   onTransition,
   allowedTransitions,
   disabled,
-  ariaLabel = 'Status path',
+  ariaLabel,
 }: {
   current: string
   /** Happy-path statuses in order. */
@@ -39,15 +40,17 @@ export function StatusPath({
   terminals?: string[]
   /** Status → Tag variant. Missing entries fall back to "neutral". */
   statusMap: Record<string, TagVariant>
-  /** Optional human labels (overrides `formatStatusLabel`). */
+  /** Optional human labels, already translated by the caller (overrides `formatStatusLabel`). */
   labels?: Record<string, string>
   /** Click handler. Omit for read-only path. */
   onTransition?: (target: string) => void
   /** If set, only these targets are clickable. Else any non-current. */
   allowedTransitions?: string[]
   disabled?: boolean
+  /** Translated accessible name; defaults to "Status path". */
   ariaLabel?: string
 }) {
+  const t = useT()
   // Build the displayed sequence. Aliases can swap into the happy
   // path slot (e.g. quote's `pre_approved` shown as `approved`). We
   // don't handle aliasing here — consumers can swap entries in
@@ -61,7 +64,7 @@ export function StatusPath({
   const interactiveMode = typeof onTransition === 'function'
 
   return (
-    <nav aria-label={ariaLabel} className="flex items-center gap-1.5 flex-wrap text-xs">
+    <nav aria-label={ariaLabel ?? t('cpq.statusPath.ariaLabel', 'Status path')} className="flex items-center gap-1.5 flex-wrap text-xs">
       {sequence.map((status, idx) => {
         const reached = currentIdx >= 0 && idx <= currentIdx
         const isCurrent = status === current
@@ -91,7 +94,7 @@ export function StatusPath({
                 type="button"
                 onClick={() => onTransition!(status)}
                 aria-current={isCurrent ? 'step' : undefined}
-                title={`Transition to ${label}`}
+                title={t('cpq.statusPath.transitionTo', 'Transition to {status}', { status: label })}
                 className={wrapperClass}
               >
                 <Tag variant={variant} dot={isCurrent} className={tagClass}>