@dainamite/cpq 0.5.0 → 0.6.0

package/src/modules/cpq/backend/cpq/quotes/page.meta.ts

@@ -10,7 +10,7 @@ export const metadata = {
   pageTitleKey: 'cpq.quotes.title',
   pageGroup: 'CPQ',
   pageGroupKey: 'customers~sales~cpq.nav.group',
-  pageOrder: 90,
+  pageOrder: 1,
   icon: quotesIcon,
   breadcrumb: [{ label: 'CPQ Quotes', labelKey: 'cpq.quotes.title' }],
 } as const

package/src/modules/cpq/ce.ts

@@ -1,6 +1,14 @@
 import type { CustomEntitySpec } from '@open-mercato/shared/modules/entities'
 
 const entities: CustomEntitySpec[] = [
+  {
+    id: 'cpq:cpq_quote_price_adjustment',
+    label: 'Quote Price Adjustment',
+    description: 'Negotiated charge or line discount on a quote.',
+    labelField: 'reasonCode',
+    showInSidebar: false,
+    fields: [],
+  },
   {
     id: 'cpq:cpq_product_specification',
     label: 'Product Specification',

package/src/modules/cpq/cli.ts

@@ -2,6 +2,7 @@ import type { ModuleCli } from '@open-mercato/shared/modules/registry'
 import { createRequestContainer } from '@open-mercato/shared/lib/di/container'
 import type { EntityManager } from '@mikro-orm/postgresql'
 import { seedCpqDemo } from './lib/seeds/demo'
+import { seedPriceAdjustmentDefaults } from './lib/priceAdjustmentDefaults'
 
 /**
  * `mercato cpq seed [--reset] [--tenant <id>] [--org <id>]`
@@ -86,4 +87,50 @@ const seed: ModuleCli = {
   },
 }
 
-export default [seed]
+/**
+ * `mercato cpq seed-price-adjustments [--tenant <id>] [--org <id>]`
+ *
+ * Upgrade step for tenants created before negotiated prices shipped: adds the
+ * `cpq.manual_price_adjustments` toggle and the `cpq.price_adjustment_reason`
+ * dictionary for every active organization (or one, with `--org` /
+ * `--tenant`). Idempotent — existing labels and toggle values are kept.
+ * Pair with `mercato auth sync-role-acls` for the `cpq.quotes.adjust_price` grant.
+ */
+const seedPriceAdjustments: ModuleCli = {
+  command: 'seed-price-adjustments',
+  async run(rest) {
+    const args = parseArgs(rest)
+    const container = await createRequestContainer()
+    const em = container.resolve<EntityManager>('em')
+    const scopes = await resolveAllScopes(em, args)
+    if (scopes.length === 0) {
+      console.error('[cpq seed-price-adjustments] No matching organization found.')
+      return
+    }
+    let failed = 0
+    for (const scope of scopes) {
+      try {
+        await seedPriceAdjustmentDefaults(em.fork(), scope)
+        console.log(`[cpq seed-price-adjustments] tenant=${scope.tenantId} org=${scope.organizationId} ✓`)
+      } catch (error) {
+        failed++
+        console.error(`[cpq seed-price-adjustments] tenant=${scope.tenantId} org=${scope.organizationId} failed`, error)
+      }
+    }
+    if (failed) process.exitCode = 1
+  },
+}
+
+async function resolveAllScopes(
+  em: EntityManager,
+  args: Record<string, string | boolean>,
+): Promise<Array<{ tenantId: string; organizationId: string }>> {
+  const { Organization } = await import('@open-mercato/core/modules/directory/data/entities')
+  const where: Record<string, unknown> = { isActive: true, deletedAt: null }
+  if (typeof args.org === 'string') where.id = args.org
+  if (typeof args.tenant === 'string') where.tenant = args.tenant
+  const orgs = await em.find(Organization, where as never, { orderBy: { createdAt: 'asc' } as never })
+  return orgs.map((org) => ({ organizationId: org.id, tenantId: org.tenant.id }))
+}
+
+export default [seed, seedPriceAdjustments]

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

@@ -0,0 +1,54 @@
+import type { CommandRuntimeContext } from '@open-mercato/shared/lib/commands'
+import { createAdjustmentCommand, updateAdjustmentCommand, deleteAdjustmentCommand } from '../price-adjustments'
+const quoteId = '11111111-1111-4111-8111-111111111111', adjustmentId = '22222222-2222-4222-8222-222222222222'
+const actor = '33333333-3333-4333-8333-333333333333', tenantId = '44444444-4444-4444-8444-444444444444', organizationId = '55555555-5555-4555-8555-555555555555'
+const adjustment = { level: 'charge' as const, quoteLineId: quoteId, chargeCode: 'fee', adjustmentType: 'price_override' as const, value: 80, currencyCode: 'USD', reasonCode: 'competitive_match' }
+function setup() {
+  const service = { create: jest.fn(), update: jest.fn(), remove: jest.fn(), undo: jest.fn() }
+  const userHasAllFeatures = jest.fn().mockResolvedValue(true)
+  const ctx = { auth: { sub: actor, tenantId }, selectedOrganizationId: organizationId,
+    container: { resolve: (name: string) => name === 'rbacService' ? { userHasAllFeatures } : service } } as unknown as CommandRuntimeContext
+  return { ctx, service, userHasAllFeatures }
+}
+it('uses authenticated actor/scope and immutable feature IDs for create/update/delete', async () => {
+  const { ctx, service, userHasAllFeatures } = setup()
+  await createAdjustmentCommand.execute({ quoteId, adjustment }, ctx)
+  expect(service.create).toHaveBeenCalledWith(quoteId, adjustment, actor, { tenantId, organizationId })
+  await updateAdjustmentCommand.execute({ quoteId, adjustmentId, patch: { value: 70 } }, ctx)
+  expect(service.update).toHaveBeenCalledWith(quoteId, adjustmentId, { value: 70 }, actor, { tenantId, organizationId })
+  await deleteAdjustmentCommand.execute({ quoteId, adjustmentId, expectedRevision: 2 }, ctx)
+  expect(service.remove).toHaveBeenCalledWith(quoteId, adjustmentId, actor, { tenantId, organizationId }, 2)
+  expect(userHasAllFeatures).toHaveBeenCalledWith(actor, ['cpq.quotes.manage', 'cpq.quotes.adjust_price'], { tenantId, organizationId })
+})
+it('refuses missing permissions and missing selected organization before a service write', async () => {
+  const { ctx, service, userHasAllFeatures } = setup()
+  userHasAllFeatures.mockResolvedValue(false)
+  await expect(createAdjustmentCommand.execute({ quoteId, adjustment }, ctx)).rejects.toMatchObject({ status: 403 })
+  userHasAllFeatures.mockResolvedValue(true)
+  await expect(createAdjustmentCommand.execute({ quoteId, adjustment }, { ...ctx, selectedOrganizationId: null })).rejects.toMatchObject({ status: 403 })
+  expect(service.create).not.toHaveBeenCalled()
+})
+it('reads undo data from the command bus redo envelope and rechecks authorization', async () => {
+  const { ctx, service, userHasAllFeatures } = setup()
+  const after = { id: adjustmentId, ...adjustment, quoteConfigurationId: quoteId, quoteId, tenantId, organizationId,
+    createdByUserId: actor, createdAt: '2026-11-10T00:00:00.000Z', updatedAt: '2026-11-10T00:00:00.000Z', deletedAt: null, isActive: true }
+  await createAdjustmentCommand.undo!({ input: { quoteId, adjustment }, ctx, logEntry: { commandPayload: { value: { undo: { quoteId, before: null, after } } } } })
+  expect(service.undo).toHaveBeenCalledWith(quoteId, adjustmentId, null, after, actor, { tenantId, organizationId })
+  userHasAllFeatures.mockResolvedValue(false)
+  await expect(createAdjustmentCommand.undo!({ input: { quoteId, adjustment }, ctx, logEntry: { commandPayload: { undo: { quoteId, before: null, after } } } })).rejects.toMatchObject({ status: 403 })
+})
+it('rejects malformed undo data instead of silently succeeding', async () => {
+  const { ctx, service } = setup()
+  await expect(deleteAdjustmentCommand.undo!({ input: { quoteId, adjustmentId }, ctx, logEntry: { commandPayload: {} } })).rejects.toMatchObject({ status: 422 })
+  expect(service.undo).not.toHaveBeenCalled()
+})
+it('authorizes an API key by its subject but records its owning user; refuses keys without a user', async () => {
+  const { ctx, service, userHasAllFeatures } = setup()
+  const keyCtx = { ...ctx, auth: { sub: 'api_key:k1', userId: actor, tenantId } } as unknown as CommandRuntimeContext
+  await createAdjustmentCommand.execute({ quoteId, adjustment }, keyCtx)
+  expect(userHasAllFeatures).toHaveBeenCalledWith('api_key:k1', ['cpq.quotes.manage', 'cpq.quotes.adjust_price'], { tenantId, organizationId })
+  expect(service.create).toHaveBeenCalledWith(quoteId, adjustment, actor, { tenantId, organizationId })
+  const orphanKey = { ...ctx, auth: { sub: 'api_key:k2', tenantId } } as unknown as CommandRuntimeContext
+  await expect(createAdjustmentCommand.execute({ quoteId, adjustment }, orphanKey)).rejects.toMatchObject({ status: 403 })
+  expect(service.create).toHaveBeenCalledTimes(1)
+})

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: 'MRC', before: src.mrcAmount, after: isCancel ? 0 : line.mrcTotal, asCurrency: true },
+    { label: '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,201 @@
+'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.invalid', 'Invalid')}: {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.pricingDetails', 'Pricing Details')} — {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,94 @@
+'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.rule', 'Price rule')}: ${row.label}`
+            : `${t('cpq.priceAdjustments.waterfall.manual', 'Negotiated')}: ${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>
+  )
+}