@dainamite/cpq 0.5.0 → 0.7.0

package/src/modules/cpq/backend/cpq/orders/[id]/page.tsx

@@ -12,6 +12,12 @@ import {
   type OrderCpqStatus,
 } from '../../../../components/statusMaps'
 import { StatusPath } from '../../../../components/StatusPath'
+import { ChargeBreakdownTable, type ChargeRowView } from '../../../../components/ChargeBreakdownTable'
+import { PricingSummaryCard, type PricingSummaryView } from '../../../../components/PricingSummaryCard'
+import { ArcLineDiff, LineActionBadge } from '../../../../components/ArcLineDiff'
+import { arcRecurringDelta } from '../../../../lib/quoteSummaryView'
+import { isArcCancelledLine } from '../../../../services/arcLineRemoval'
+import { useT, type TranslateFn } from '@open-mercato/shared/lib/i18n/context'
 
 // ─── Types ───────────────────────────────────────────────────────
 
@@ -24,7 +30,7 @@ type ArcLineSource = {
 }
 
 type TierBreakdownEntry = { tier: number; from: number; to: number; pricePerUnit: number; quantity: number; subtotal: number }
-type RuleAdjustment = { ruleCode: string; ruleName: string; ruleType: string; value: number; unitPriceBefore: number; unitPriceAfter: number; delta: number }
+type RuleAdjustment = { ruleCode: string; ruleName: string; ruleType: string; value: number; unitPriceBefore: number; unitPriceAfter: number; delta: number; origin?: 'rule' | 'manual'; adjustmentId?: string; reasonCode?: string }
 
 type ResolvedCharge = {
   chargeName?: string
@@ -36,6 +42,15 @@ type ResolvedCharge = {
   note?: string | null
   breakdown?: { tiers: TierBreakdownEntry[] } | null
   adjustments?: RuleAdjustment[] | null
+  listUnitPrice?: number
+  listTotalPrice?: number | null
+  standardUnitPrice?: number
+  standardTotalPrice?: number | null
+}
+
+/** Order lines carry the quote's stored waterfall verbatim (no recalculation at conversion). */
+function toChargeRow(c: ResolvedCharge): ChargeRowView {
+  return { ...c, chargeName: c.chargeName ?? '—', chargeType: (c.chargeType ?? 'mrc') as 'nrc' | 'mrc' | 'usage', unitPrice: c.unitPrice ?? 0, totalPrice: c.totalPrice ?? null }
 }
 
 type OrderLineResult = {
@@ -68,11 +83,7 @@ type OrderResult = {
   sourceQuoteId: string | null
   quoteType: string
   currencyCode: string
-  pricingSummary: {
-    nrcTotal: number
-    mrcTotal: number
-    currencyCode: string
-  }
+  pricingSummary: PricingSummaryView & { currencyCode: string }
   activatedAt: string | null
   createdAt: string
   lines: OrderLineResult[]
@@ -84,19 +95,19 @@ const ARC_BADGE_VARIANTS: Record<string, 'brand' | 'success' | 'error'> = {
   cancel: 'error',
 }
 
-const RULE_TYPE_LABELS: Record<string, string> = {
-  discount_percent: '% discount',
-  discount_absolute: 'fixed discount',
-  surcharge_percent: '% surcharge',
-  surcharge_absolute: 'fixed surcharge',
-  price_override: 'override',
+function quoteTypeLabel(t: TranslateFn, quoteType: string): string {
+  switch (quoteType) {
+    case 'amend':
+      return t('cpq.quotes.type.amend', 'amend')
+    case 'renew':
+      return t('cpq.quotes.type.renew', 'renew')
+    case 'cancel':
+      return t('cpq.quotes.type.cancel', 'cancel')
+    default:
+      return quoteType
+  }
 }
 
-function fmtRuleValue(adj: RuleAdjustment, currency?: string): string {
-  if (adj.ruleType === 'discount_percent' || adj.ruleType === 'surcharge_percent') return `${adj.value}%`
-  if (currency) return fmt(adj.value, currency)
-  return String(adj.value)
-}
 
 // ─── Constants ───────────────────────────────────────────────────
 
@@ -104,10 +115,10 @@ function fmt(amount: number, currency: string): string {
   return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount)
 }
 
-async function apiJson<T>(url: string, init?: RequestInit): Promise<T> {
+async function apiJson<T>(t: TranslateFn, url: string, init?: RequestInit): Promise<T> {
   const res = await fetch(url, init)
   const json = await res.json()
-  if (!res.ok) throw new Error(json?.error ?? `Request failed (${res.status})`)
+  if (!res.ok) throw new Error(json?.error ?? t('cpq.common.requestFailed', 'Request failed ({status})', { status: res.status }))
   return json as T
 }
 
@@ -115,6 +126,7 @@ async function apiJson<T>(url: string, init?: RequestInit): Promise<T> {
 
 export default function CpqOrderDetailPage(props: { params?: { id?: string } }) {
   const router = useRouter()
+  const t = useT()
   const urlParams = useParams()
   const cpqOrderId = (props.params?.id ?? urlParams?.id) as string
 
@@ -153,8 +165,8 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
             .then(async (d) => {
               const targets: Array<{ subscriptionId: string }> = d?.items ?? []
               const fetched = await Promise.all(
-                targets.map((t) =>
-                  fetch(`/api/cpq/inventory/subscriptions?id=${t.subscriptionId}`)
+                targets.map((target) =>
+                  fetch(`/api/cpq/inventory/subscriptions?id=${target.subscriptionId}`)
                     .then((r) => (r.ok ? r.json() : null))
                     .catch(() => null),
                 ),
@@ -183,7 +195,7 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
     let cancelled = false
     async function load() {
       try {
-        const result = await apiJson<OrderResult>(`/api/cpq/orders/${cpqOrderId}`)
+        const result = await apiJson<OrderResult>(t, `/api/cpq/orders/${cpqOrderId}`)
         if (!cancelled) {
           setOrder(result)
           fetch(`/api/customers/companies?id=${result.customerId}&pageSize=1`)
@@ -206,14 +218,14 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
     }
     load()
     return () => { cancelled = true }
-  }, [cpqOrderId, fetchLinkedSubscriptions])
+  }, [cpqOrderId, fetchLinkedSubscriptions, t])
 
   const activateOrder = async () => {
     if (!order) return
     try {
       setActivating(true)
       setError(null)
-      const result = await apiJson<OrderResult>(`/api/cpq/orders/${order.id}/activate`, {
+      const result = await apiJson<OrderResult>(t, `/api/cpq/orders/${order.id}/activate`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({}),
@@ -231,7 +243,7 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
     if (!order) return
     try {
       setError(null)
-      const result = await apiJson<OrderResult>(`/api/cpq/orders/${order.id}/status`, {
+      const result = await apiJson<OrderResult>(t, `/api/cpq/orders/${order.id}/status`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ targetStatus: 'cancelled' }),
@@ -251,7 +263,7 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
   if (loading) {
     return (
       <div className="flex items-center gap-2 py-12 justify-center text-sm text-muted-foreground">
-        <Spinner /> Loading…
+        <Spinner /> {t('cpq.orders.detail.loading', 'Loading…')}
       </div>
     )
   }
@@ -259,9 +271,9 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
   if (!order) {
     return (
       <div className="space-y-4">
-        <button onClick={() => router.push('/backend/cpq/orders')} className="text-sm text-muted-foreground hover:text-foreground">← Back to Orders</button>
+        <button onClick={() => router.push('/backend/cpq/orders')} className="text-sm text-muted-foreground hover:text-foreground">{t('cpq.orders.detail.backToOrders', '← Back to Orders')}</button>
         {error && <ErrorBanner message={error} />}
-        <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">Order not found.</div>
+        <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">{t('cpq.orders.detail.notFound', 'Order not found.')}</div>
       </div>
     )
   }
@@ -288,8 +300,8 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
       <FormHeader
         mode="detail"
         backHref="/backend/cpq/orders"
-        backLabel="Back to CPQ Orders"
-        entityTypeLabel="CPQ Order"
+        backLabel={t('cpq.orders.detail.backLabel', 'Back to CPQ Orders')}
+        entityTypeLabel={t('cpq.orders.detail.entityType', 'CPQ Order')}
         title={order.orderNumber || order.orderId.slice(0, 8)}
         statusBadge={
           <div className="flex flex-wrap items-center gap-2 pt-1">
@@ -298,7 +310,7 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
             </Tag>
             {order.quoteType && order.quoteType !== 'new' && (
               <Tag variant={ARC_BADGE_VARIANTS[order.quoteType] ?? 'neutral'} className="uppercase">
-                {order.quoteType}
+                {quoteTypeLabel(t, order.quoteType)}
               </Tag>
             )}
           </div>
@@ -311,7 +323,7 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
               onClick={() => router.push(`/backend/sales/orders/${order.orderId}`)}
             >
               <ExternalLink className="h-3.5 w-3.5" />
-              View Sales Order
+              {t('cpq.orders.detail.viewSalesOrder', 'View Sales Order')}
             </Button>
             {order.sourceQuoteId && (
               <Button
@@ -319,19 +331,19 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
                 variant="outline"
                 onClick={() => router.push(`/backend/cpq/quotes/${order.sourceQuoteId}`)}
               >
-                Source Quote
+                {t('cpq.orders.detail.sourceQuote', 'Source Quote')}
               </Button>
             )}
             {canActivate && (
               <Button type="button" onClick={activateOrder} disabled={activating}>
                 {activating ? <Spinner /> : <Play className="h-4 w-4" />}
-                Activate
+                {t('cpq.orders.detail.activate', 'Activate')}
               </Button>
             )}
             {canCancel && (
               <Button type="button" variant="destructive-outline" onClick={cancelOrder}>
                 <X className="h-4 w-4" />
-                Cancel
+                {t('cpq.common.cancel', 'Cancel')}
               </Button>
             )}
           </>
@@ -350,7 +362,7 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
           path={['draft', 'pending_activation', 'active', 'fulfilled']}
           terminals={['cancelled']}
           statusMap={orderCpqStatusMap}
-          ariaLabel="Order status path"
+          ariaLabel={t('cpq.orders.detail.statusPath', 'Order status path')}
         />
       </div>
 
@@ -370,7 +382,7 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
               <div className="flex-1 min-w-0 space-y-1">
                 <div className="flex items-center gap-2 flex-wrap">
                   <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
-                    Linked Subscription
+                    {t('cpq.orders.detail.linkedSubscription', 'Linked Subscription')}
                   </span>
                   <Tag
                     variant={sub.status === 'active' ? 'success' : 'info'}
@@ -386,7 +398,7 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
                 </div>
                 {order.activatedAt && (
                   <div className="text-xs text-muted-foreground">
-                    Activated on {new Date(order.activatedAt).toLocaleString()}
+                    {t('cpq.orders.detail.activatedOn', 'Activated on {date}', { date: new Date(order.activatedAt).toLocaleString() })}
                   </div>
                 )}
               </div>
@@ -396,7 +408,7 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
                 onClick={() => router.push(`/backend/cpq/inventory/subscriptions/${sub.id}`)}
               >
                 <ArrowRight className="h-3.5 w-3.5" />
-                Open
+                {t('cpq.orders.actions.open', 'Open')}
               </Button>
             </div>
           ))}
@@ -405,7 +417,7 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
 
       {/* Meta cards — secondary reference info, matches the quote layout. */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-        <MetaCard label="Customer">
+        <MetaCard label={t('cpq.orders.detail.meta.customer', 'Customer')}>
           {customerName ? (
             <span className="font-medium">{customerName}</span>
           ) : (
@@ -414,32 +426,26 @@ export default function CpqOrderDetailPage(props: { params?: { id?: string } })
             </span>
           )}
         </MetaCard>
-        <MetaCard label="Created">
+        <MetaCard label={t('cpq.orders.detail.meta.created', 'Created')}>
           <span className="font-medium">{new Date(order.createdAt).toLocaleDateString()}</span>
         </MetaCard>
-        <MetaCard label="Currency">
+        <MetaCard label={t('cpq.orders.detail.meta.currency', 'Currency')}>
           <span className="font-medium">{currency}</span>
         </MetaCard>
       </div>
 
-      {/* Pricing Summary Card */}
-      <div className="rounded-lg border bg-card p-4">
-        <h3 className="text-sm font-medium mb-3">Pricing Summary</h3>
-        <div className="grid grid-cols-2 gap-4">
-          <div>
-            <p className="text-xs text-muted-foreground">Non-Recurring (NRC)</p>
-            <p className="text-lg font-semibold font-mono">{fmt(order.pricingSummary.nrcTotal, currency)}</p>
-          </div>
-          <div>
-            <p className="text-xs text-muted-foreground">Monthly Recurring (MRC)</p>
-            <p className="text-lg font-semibold font-mono">{fmt(order.pricingSummary.mrcTotal, currency)}</p>
-          </div>
-        </div>
-      </div>
+      <PricingSummaryCard
+        summary={order.pricingSummary}
+        currency={currency}
+        arcDelta={order.quoteType === 'amend' || order.quoteType === 'renew'
+          ? arcRecurringDelta(order.lines.map((l) => ({ ...l, action: l.action as 'add' | 'modify' | 'cancel' })))
+          : null}
+      />
 
       {/* Order Lines */}
       <OrderLineTree
         lines={order.lines}
+        quoteType={order.quoteType}
         currency={currency}
         expandedLines={expandedLines}
         pricingDetail={pricingDetail}
@@ -465,6 +471,7 @@ function MetaCard({ label, children }: { label: string; children: React.ReactNod
 
 function OrderLineTree({
   lines,
+  quoteType,
   currency,
   expandedLines,
   pricingDetail,
@@ -472,12 +479,14 @@ function OrderLineTree({
   onTogglePricingDetail,
 }: {
   lines: OrderLineResult[]
+  quoteType: string
   currency: string
   expandedLines: Set<string>
   pricingDetail: { lineIdx: number; chargeIdx: number } | null
   onToggleLine: (id: string) => void
   onTogglePricingDetail: (lineIdx: number, chargeIdx: number) => void
 }) {
+  const t = useT()
   const rootLines = lines.filter((l) => !l.parentLineId)
   const childrenByParent = new Map<string, OrderLineResult[]>()
   for (const line of lines) {
@@ -495,10 +504,10 @@ function OrderLineTree({
 
   return (
     <div>
-      <h3 className="text-sm font-medium mb-2 px-1">Line Items ({lines.length})</h3>
+      <h3 className="text-sm font-medium mb-2 px-1">{t('cpq.orders.detail.lineItems', 'Line Items ({count})', { count: lines.length })}</h3>
       {lines.length === 0 ? (
         <div className="rounded-lg border bg-card py-8 text-center text-sm text-muted-foreground">
-          No line items.
+          {t('cpq.orders.detail.noLineItems', 'No line items.')}
         </div>
       ) : (
         <div className="rounded-lg border bg-card divide-y">
@@ -512,6 +521,7 @@ function OrderLineTree({
                 <OrderLineRow
                   line={line}
                   lineIdx={lineIdx}
+                  quoteType={quoteType}
                   currency={currency}
                   isExpanded={isExpanded}
                   isBundle={isBundle}
@@ -524,7 +534,7 @@ function OrderLineTree({
                 {isBundle && isExpanded && children.length > 0 && (
                   <div className="border-t border-dashed border-brand-violet/30 bg-brand-violet/5">
                     <div className="px-6 py-1.5">
-                      <span className="text-[10px] font-medium text-brand-violet uppercase tracking-wider">Bundle Components ({children.length})</span>
+                      <span className="text-[10px] font-medium text-brand-violet uppercase tracking-wider">{t('cpq.lines.bundleComponents', 'Bundle Components ({count})', { count: children.length })}</span>
                     </div>
                     {children.map((child) => {
                       const childIdx = indexOf.get(child.lineId) ?? 0
@@ -533,6 +543,7 @@ function OrderLineTree({
                           key={child.lineId}
                           line={child}
                           lineIdx={childIdx}
+                          quoteType={quoteType}
                           currency={currency}
                           isExpanded={expandedLines.has(child.lineId)}
                           isBundle={false}
@@ -555,20 +566,26 @@ function OrderLineTree({
   )
 }
 
-function OrderLineRow({ line, lineIdx, currency, isExpanded, isBundle, childCount, indent, pricingDetail, onToggle, onTogglePricingDetail }: {
-  line: OrderLineResult; lineIdx: number; currency: string; isExpanded: boolean; isBundle: boolean; childCount: number; indent: number
+function OrderLineRow({ line, lineIdx, quoteType, currency, isExpanded, isBundle, childCount, indent, pricingDetail, onToggle, onTogglePricingDetail }: {
+  line: OrderLineResult; lineIdx: number; quoteType: string; currency: string; isExpanded: boolean; isBundle: boolean; childCount: number; indent: number
   pricingDetail: { lineIdx: number; chargeIdx: number } | null
   onToggle: () => void
   onTogglePricingDetail: (lineIdx: number, chargeIdx: number) => void
 }) {
+  const t = useT()
   const paddingLeft = indent > 0 ? `${indent * 2 + 1}rem` : undefined
+  // Same presentation as the quote page: an existing item removed on an
+  // Amend / Renew quote reads as "remove", struck through.
+  const isRemoved = isArcCancelledLine(line, quoteType)
 
   return (
     <div>
       <div
-        className="flex items-center gap-3 px-4 py-3 hover:bg-muted/30 transition-colors cursor-pointer"
+        className={`flex items-center gap-3 px-4 py-3 hover:bg-muted/30 transition-colors cursor-pointer ${isRemoved ? 'bg-muted/20' : ''}`}
         style={paddingLeft ? { paddingLeft } : undefined}
         onClick={onToggle}
+        data-testid="cpq-order-line"
+        data-removed={isRemoved ? 'true' : undefined}
       >
         <button className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground">
           <svg className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
@@ -580,23 +597,39 @@ function OrderLineRow({ line, lineIdx, currency, isExpanded, isBundle, childCoun
           <div className="flex items-center gap-2">
             {indent > 0 && <span className="text-muted-foreground text-xs">└</span>}
             {isBundle && (
-              <Tag variant="brand" className="px-1.5 text-xs">bundle</Tag>
+              <Tag variant="brand" className="px-1.5 text-xs">{t('cpq.lines.bundle', 'bundle')}</Tag>
             )}
-            <span className="font-medium text-sm">{line.offeringName}</span>
+            <span className={`font-medium text-sm ${isRemoved ? 'text-muted-foreground line-through' : ''}`}>{line.offeringName}</span>
             {line.quantity > 1 && <span className="rounded bg-muted px-1.5 py-0.5 text-xs font-medium">×{line.quantity}</span>}
-            <Tag variant="info" className="px-1.5 text-xs">{line.action}</Tag>
-            {isBundle && <span className="text-xs text-muted-foreground">{childCount} component{childCount !== 1 ? 's' : ''}</span>}
+            <LineActionBadge
+              action={line.action}
+              label={isRemoved ? t('cpq.quotes.arc.lineRemoved', 'remove') : undefined}
+              title={isRemoved ? t('cpq.quotes.arc.lineRemovedHint', 'This item is cancelled on the subscription when the order is activated') : undefined}
+            />
+            {isBundle && (
+              <span className="text-xs text-muted-foreground">
+                {childCount !== 1
+                  ? t('cpq.lines.componentCount.other', '{count} components', { count: childCount })
+                  : t('cpq.lines.componentCount.one', '{count} component', { count: childCount })}
+              </span>
+            )}
           </div>
         </div>
 
         <div className="shrink-0 text-right text-xs space-y-0.5">
-          {line.nrcTotal > 0 && <div><span className="text-muted-foreground">NRC </span><span className="font-mono font-medium">{fmt(line.nrcTotal, currency)}</span></div>}
-          {line.mrcTotal > 0 && <div><span className="text-muted-foreground">MRC </span><span className="font-mono font-medium">{fmt(line.mrcTotal, currency)}</span></div>}
+          {isRemoved && line.arcSource && line.arcSource.mrcAmount > 0 && (
+            <div>
+              <span className="text-muted-foreground">{t('cpq.lines.mrc', 'MRC')} </span>
+              <span className="font-mono text-muted-foreground line-through">{fmt(line.arcSource.mrcAmount, currency)}</span>
+            </div>
+          )}
+          {line.nrcTotal > 0 && <div><span className="text-muted-foreground">{t('cpq.lines.nrc', 'NRC')} </span><span className="font-mono font-medium">{fmt(line.nrcTotal, currency)}</span></div>}
+          {line.mrcTotal > 0 && <div><span className="text-muted-foreground">{t('cpq.lines.mrc', 'MRC')} </span><span className="font-mono font-medium">{fmt(line.mrcTotal, currency)}</span></div>}
         </div>
       </div>
 
       {isExpanded && (() => {
-        const internalKeys = new Set(['_arcMirroredName', '_arcMirroredFromItemId', 'offeringName'])
+        const internalKeys = new Set(['_arcMirroredName', '_arcMirroredFromItemId', '_arcPriceFrozen', '_arcRepriced', 'offeringName'])
         const visibleConfigEntries = Object.entries(line.configuration).filter(
           ([key]) => !internalKeys.has(key),
         )
@@ -612,22 +645,20 @@ function OrderLineRow({ line, lineIdx, currency, isExpanded, isBundle, childCoun
             className="border-t bg-muted/10 px-12 py-3 space-y-3"
             style={paddingLeft ? { paddingLeft: `calc(${paddingLeft} + 2rem)` } : undefined}
           >
-            {hasArcDiff && (
-              <ArcLineDiff line={line} currency={currency} />
-            )}
             {isEmpty ? (
               <div className="text-xs text-muted-foreground space-y-1">
                 <div>
-                  No detailed breakdown for this line.
-                  {mirroredFromItemId && ' Mirrored from existing subscription item.'}
+                  {t('cpq.orders.detail.noBreakdown', 'No detailed breakdown for this line.')}
+                  {mirroredFromItemId && ' '}
+                  {mirroredFromItemId && t('cpq.orders.detail.mirroredItem', 'Mirrored from existing subscription item.')}
                 </div>
                 {(line.nrcTotal > 0 || line.mrcTotal > 0) && (
                   <div className="flex gap-4">
                     {line.nrcTotal > 0 && (
-                      <span>NRC <span className="font-mono font-medium text-foreground">{fmt(line.nrcTotal, currency)}</span></span>
+                      <span>{t('cpq.lines.nrc', 'NRC')} <span className="font-mono font-medium text-foreground">{fmt(line.nrcTotal, currency)}</span></span>
                     )}
                     {line.mrcTotal > 0 && (
-                      <span>MRC <span className="font-mono font-medium text-foreground">{fmt(line.mrcTotal, currency)}</span></span>
+                      <span>{t('cpq.lines.mrc', 'MRC')} <span className="font-mono font-medium text-foreground">{fmt(line.mrcTotal, currency)}</span></span>
                     )}
                   </div>
                 )}
@@ -636,7 +667,7 @@ function OrderLineRow({ line, lineIdx, currency, isExpanded, isBundle, childCoun
               <>
                 {hasConfig && (
                   <div>
-                    <p className="text-xs font-medium text-muted-foreground mb-1">Configuration</p>
+                    <p className="text-xs font-medium text-muted-foreground mb-1">{t('cpq.lines.configuration', 'Configuration')}</p>
                     <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1">
                       {visibleConfigEntries.map(([key, value]) => (
                         <div key={key} className="text-xs">
@@ -649,25 +680,24 @@ function OrderLineRow({ line, lineIdx, currency, isExpanded, isBundle, childCoun
                 )}
 
                 {hasCharges && (
-                  <div>
-                    <p className="text-xs font-medium text-muted-foreground mb-1">Charges</p>
-                    <ChargeBreakdown
-                      line={line}
-                      lineIdx={lineIdx}
-                      currency={currency}
-                      pricingDetail={pricingDetail}
-                      onTogglePricingDetail={onTogglePricingDetail}
-                    />
-                  </div>
+                  <ChargeBreakdownTable
+                    charges={line.charges.map(toChargeRow)}
+                    currency={currency}
+                    openDetailIndex={pricingDetail?.lineIdx === lineIdx ? pricingDetail.chargeIdx : null}
+                    onToggleDetail={(chargeIdx) => onTogglePricingDetail(lineIdx, chargeIdx)}
+                  />
                 )}
 
                 {hasTerm && (
                   <div className="flex gap-4 text-xs text-muted-foreground">
-                    {line.startDate && <span>Start: {new Date(line.startDate).toLocaleDateString()}</span>}
-                    {line.termMonths && <span>Term: {line.termMonths}mo</span>}
-                    {line.endDate && <span>End: {new Date(line.endDate).toLocaleDateString()}</span>}
+                    {line.startDate && <span>{t('cpq.lines.term.start', 'Start: {date}', { date: new Date(line.startDate).toLocaleDateString() })}</span>}
+                    {line.termMonths && <span>{t('cpq.lines.term.months', 'Term: {months}mo', { months: line.termMonths })}</span>}
+                    {line.endDate && <span>{t('cpq.lines.term.end', 'End: {date}', { date: new Date(line.endDate).toLocaleDateString() })}</span>}
                   </div>
                 )}
+
+                {/* XD-250 ARC: before/after preview below the charges, as on the quote. */}
+                {hasArcDiff && <ArcLineDiff line={line} currency={currency} />}
               </>
             )}
           </div>
@@ -677,144 +707,6 @@ function OrderLineRow({ line, lineIdx, currency, isExpanded, isBundle, childCoun
   )
 }
 
-// Charge breakdown table with the waterfall ("show pricing details")
-// toggle. Same shape as the quote page so a charge looks identical on
-// both surfaces, including tier-by-tier subtotals and any price-rule
-// adjustments that fired during calculation.
-function ChargeBreakdown({ line, lineIdx, currency, pricingDetail, onTogglePricingDetail }: {
-  line: OrderLineResult; lineIdx: number; currency: string
-  pricingDetail: { lineIdx: number; chargeIdx: number } | null
-  onTogglePricingDetail: (lineIdx: number, chargeIdx: number) => void
-}) {
-  return (
-    <table className="w-full text-xs">
-      <thead>
-        <tr className="text-muted-foreground">
-          <th className="text-left py-1 font-medium">Charge</th>
-          <th className="text-left py-1 font-medium">Type</th>
-          <th className="text-right py-1 font-medium">Unit Price</th>
-          <th className="text-right py-1 font-medium">Qty</th>
-          <th className="text-right py-1 font-medium">Total</th>
-          <th className="w-8" />
-        </tr>
-      </thead>
-      <tbody>
-        {line.charges.map((c, i) => {
-          const hasDetail = !!(c.breakdown?.tiers?.length || c.adjustments?.length)
-          const isDetailOpen = pricingDetail?.lineIdx === lineIdx && pricingDetail?.chargeIdx === i
-          return (
-            <React.Fragment key={i}>
-              <tr className="border-t border-dashed border-border/50">
-                <td className="py-1">{c.chargeName ?? '—'}</td>
-                <td className="py-1 uppercase">{c.chargeType ?? '—'}</td>
-                <td className="py-1 text-right font-mono">{c.unitPrice != null ? fmt(c.unitPrice, currency) : '—'}</td>
-                <td className="py-1 text-right font-mono">{c.quantity ?? '—'}</td>
-                <td className="py-1 text-right font-mono">{c.totalPrice != null ? fmt(c.totalPrice, currency) : c.note ?? '—'}</td>
-                <td className="py-1 text-center">
-                  {hasDetail && (
-                    <button
-                      onClick={() => onTogglePricingDetail(lineIdx, i)}
-                      className="inline-flex items-center justify-center rounded p-0.5 hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
-                      title="Show pricing breakdown"
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-3.5 h-3.5">
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
-                      </svg>
-                    </button>
-                  )}
-                </td>
-              </tr>
-              {isDetailOpen && (
-                <tr>
-                  <td colSpan={6} className="pb-3 pt-1">
-                    <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">Pricing Details — {c.chargeName}</span>
-                        <span className="text-muted-foreground">{c.pricingMethod ?? 'flat'}</span>
-                      </div>
-
-                      {c.breakdown?.tiers && c.breakdown.tiers.length > 0 && (
-                        <div>
-                          <div className="font-medium text-muted-foreground mb-1">Tier Breakdown</div>
-                          <table className="w-full">
-                            <thead>
-                              <tr className="text-muted-foreground">
-                                <th className="text-left py-0.5 font-medium">Tier</th>
-                                <th className="text-right py-0.5 font-medium">Range</th>
-                                <th className="text-right py-0.5 font-medium">Price/Unit</th>
-                                <th className="text-right py-0.5 font-medium">Qty</th>
-                                <th className="text-right py-0.5 font-medium">Subtotal</th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              {c.breakdown.tiers.map((t) => (
-                                <tr key={t.tier} className="border-t border-border/30">
-                                  <td className="py-0.5">{t.tier}</td>
-                                  <td className="py-0.5 text-right font-mono">{t.from}–{t.to}</td>
-                                  <td className="py-0.5 text-right font-mono">{fmt(t.pricePerUnit, currency)}</td>
-                                  <td className="py-0.5 text-right font-mono">{t.quantity}</td>
-                                  <td className="py-0.5 text-right font-mono">{fmt(t.subtotal, currency)}</td>
-                                </tr>
-                              ))}
-                              <tr className="border-t font-medium">
-                                <td colSpan={4} className="py-0.5 text-right">Tiered Total</td>
-                                <td className="py-0.5 text-right font-mono">
-                                  {fmt(c.breakdown.tiers.reduce((s, t) => s + t.subtotal, 0), currency)}
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </div>
-                      )}
-
-                      {c.adjustments && c.adjustments.length > 0 && (
-                        <div>
-                          <div className="font-medium text-muted-foreground mb-1">Applied Price Rules</div>
-                          <table className="w-full">
-                            <thead>
-                              <tr className="text-muted-foreground">
-                                <th className="text-left py-0.5 font-medium">Rule</th>
-                                <th className="text-left py-0.5 font-medium">Type</th>
-                                <th className="text-right py-0.5 font-medium">Value</th>
-                                <th className="text-right py-0.5 font-medium">Before</th>
-                                <th className="text-right py-0.5 font-medium">After</th>
-                                <th className="text-right py-0.5 font-medium">Delta</th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              {c.adjustments.map((adj, ai) => (
-                                <tr key={ai} className="border-t border-border/30">
-                                  <td className="py-0.5">{adj.ruleName}</td>
-                                  <td className="py-0.5">{RULE_TYPE_LABELS[adj.ruleType] ?? adj.ruleType}</td>
-                                  <td className="py-0.5 text-right font-mono">{fmtRuleValue(adj, currency)}</td>
-                                  <td className="py-0.5 text-right font-mono">{fmt(adj.unitPriceBefore, currency)}</td>
-                                  <td className="py-0.5 text-right font-mono">{fmt(adj.unitPriceAfter, currency)}</td>
-                                  <td className={`py-0.5 text-right font-mono ${adj.delta < 0 ? 'text-destructive' : adj.delta > 0 ? 'text-status-success-text' : ''}`}>
-                                    {adj.delta > 0 ? '+' : ''}{fmt(adj.delta, currency)}
-                                  </td>
-                                </tr>
-                              ))}
-                            </tbody>
-                          </table>
-                        </div>
-                      )}
-
-                      <div className="flex items-center justify-between pt-1 border-t text-sm font-semibold">
-                        <span>Final Total</span>
-                        <span className="font-mono">{c.totalPrice != null ? fmt(c.totalPrice, currency) : '—'}</span>
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              )}
-            </React.Fragment>
-          )
-        })}
-      </tbody>
-    </table>
-  )
-}
-
 function Spinner() {
   return (
     <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
@@ -825,6 +717,7 @@ function Spinner() {
 }
 
 function ErrorBanner({ message, onDismiss }: { message: string; onDismiss?: () => void }) {
+  const t = useT()
   return (
     <Alert variant="destructive" className="flex items-start gap-2">
       <span className="flex-1">{message}</span>
@@ -832,7 +725,7 @@ function ErrorBanner({ message, onDismiss }: { message: string; onDismiss?: () =
         <button
           onClick={onDismiss}
           className="text-destructive/70 hover:text-destructive text-sm font-bold"
-          aria-label="Dismiss"
+          aria-label={t('cpq.common.dismiss', 'Dismiss')}
         >
           ×
         </button>
@@ -840,82 +733,3 @@ function ErrorBanner({ message, onDismiss }: { message: string; onDismiss?: () =
     </Alert>
   )
 }
-
-// XD-250 ARC: side-by-side "Before / After" snapshot for a quote / order line
-// that mirrors an existing subscription item. "Before" comes from the live
-// CpqInventorySubscriptionItem at render time; "After" is what the line will
-// apply on activation. For 'cancel' lines the after column is greyed out.
-function ArcLineDiff({ line, currency }: { line: OrderLineResult; currency: string }) {
-  const src = line.arcSource
-  if (!src) return null
-  const isCancel = line.action === 'cancel'
-
-  const beforeMrc = src.mrcAmount
-  const beforeNrc = src.nrcAmount
-  const beforeQty = src.quantity
-  const afterMrc = isCancel ? 0 : line.mrcTotal
-  const afterNrc = isCancel ? 0 : line.nrcTotal
-  const afterQty = isCancel ? 0 : line.quantity
-  const mrcDelta = afterMrc - beforeMrc
-  const nrcDelta = afterNrc - beforeNrc
-  const qtyDelta = afterQty - beforeQty
-
-  return (
-    <div>
-      <p className="text-xs font-medium text-muted-foreground mb-1.5">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">Before</th>
-              <th className="text-right px-3 py-1.5 font-medium">After</th>
-              <th className="text-right px-3 py-1.5 font-medium">Δ</th>
-            </tr>
-          </thead>
-          <tbody>
-            <ArcDiffRow label="Quantity" before={beforeQty} after={afterQty} delta={qtyDelta} currency={null} dimAfter={isCancel} />
-            <ArcDiffRow label="MRC" before={beforeMrc} after={afterMrc} delta={mrcDelta} currency={currency} dimAfter={isCancel} />
-            <ArcDiffRow label="NRC" before={beforeNrc} after={afterNrc} delta={nrcDelta} currency={currency} dimAfter={isCancel} />
-          </tbody>
-        </table>
-      </div>
-      {isCancel && (
-        <p className="text-xs text-destructive mt-1 italic">
-          Cancellation — item will be terminated on activation.
-        </p>
-      )}
-    </div>
-  )
-}
-
-function ArcDiffRow({
-  label,
-  before,
-  after,
-  delta,
-  currency,
-  dimAfter,
-}: {
-  label: string
-  before: number
-  after: number
-  delta: number
-  currency: string | null
-  dimAfter: boolean
-}) {
-  const fmtVal = (v: number) => (currency ? fmt(v, currency) : String(v))
-  const showDelta = delta !== 0
-  return (
-    <tr className="border-t border-dashed border-border/40">
-      <td className="px-3 py-1 text-muted-foreground">{label}</td>
-      <td className="px-3 py-1 text-right font-mono">{fmtVal(before)}</td>
-      <td className={`px-3 py-1 text-right font-mono ${dimAfter ? 'text-muted-foreground line-through' : ''}`}>
-        {fmtVal(after)}
-      </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)}` : '—'}
-      </td>
-    </tr>
-  )
-}