@dainamite/cpq 0.5.0 → 0.7.0

package/src/modules/cpq/backend/cpq/price-rules/[id]/page.tsx

@@ -3,15 +3,9 @@ import * as React from 'react'
 import { useRouter, useParams } from 'next/navigation'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Tag } from '@open-mercato/ui/primitives/tag'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { NumberInput } from '../../../../components/NumberInput'
-
-const RULE_TYPE_LABELS: Record<string, string> = {
-  discount_percent: 'Discount %',
-  discount_absolute: 'Discount $',
-  surcharge_percent: 'Surcharge %',
-  surcharge_absolute: 'Surcharge $',
-  price_override: 'Override',
-}
+import { buildRuleTypeLabels } from '../PriceRuleForm'
 
 type PriceRule = {
   id: string
@@ -66,6 +60,8 @@ function ruleToForm(rule: PriceRule): FormData {
 }
 
 export default function PriceRuleDetailPage(props: { params?: { id?: string } }) {
+  const t = useT()
+  const ruleTypeLabels = React.useMemo(() => buildRuleTypeLabels(t), [t])
   const router = useRouter()
   const urlParams = useParams()
   const ruleId = (props.params?.id ?? urlParams?.id) as string
@@ -102,7 +98,7 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
     setError(null)
     fetch(`/api/cpq/price-rules?id=${ruleId}`)
       .then(async (r) => {
-        if (!r.ok) throw new Error('Not found')
+        if (!r.ok) throw new Error(t('cpq.priceRules.detail.notFound', 'Not found'))
         return r.json()
       })
       .then((data: PriceRule) => {
@@ -110,7 +106,7 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
       })
       .catch((err) => setError(err.message))
       .finally(() => setLoading(false))
-  }, [ruleId])
+  }, [ruleId, t])
 
   React.useEffect(() => { loadRule() }, [loadRule])
 
@@ -164,14 +160,14 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
       })
       if (!res.ok) {
         const err = await res.json()
-        throw new Error(err.error ?? 'Failed to update')
+        throw new Error(err.error ?? t('cpq.priceRules.errors.updateFailed', 'Failed to update'))
       }
       const updated = await res.json()
       setRule(updated)
       setEditing(false)
       setForm(null)
     } catch (err: unknown) {
-      setSaveError(err instanceof Error ? err.message : 'Unknown error')
+      setSaveError(err instanceof Error ? err.message : t('cpq.priceRules.errors.unknown', 'Unknown error'))
     } finally {
       setSaving(false)
     }
@@ -205,18 +201,18 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
   }
 
   if (loading) {
-    return <div className="text-sm text-muted-foreground py-12 text-center">Loading...</div>
+    return <div className="text-sm text-muted-foreground py-12 text-center">{t('cpq.common.loading', 'Loading...')}</div>
   }
 
   if (error || !rule) {
     return (
       <div className="space-y-4 py-12 text-center">
-        <div className="text-sm text-destructive">{error ?? 'Rule not found'}</div>
+        <div className="text-sm text-destructive">{error ?? t('cpq.priceRules.detail.ruleNotFound', 'Rule not found')}</div>
         <button
           onClick={() => router.push('/backend/cpq/price-rules')}
           className="text-sm text-primary hover:underline"
         >
-          &larr; Back to Price Rules
+          ← {t('cpq.priceRules.detail.backToList', 'Back to Price Rules')}
         </button>
       </div>
     )
@@ -224,6 +220,8 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
 
   const cond = rule.applicabilityCondition as { attribute?: string; operator?: string; value?: string } | null
   const offering = rule.productOfferingId ? offeringLookup.get(rule.productOfferingId) : null
+  // `{name}` is left unresolved so the rule name can be rendered in <strong>.
+  const deleteConfirmParts = t('cpq.priceRules.detail.deleteConfirm', 'Are you sure you want to delete {name}?').split('{name}')
 
   return (
     <div className="space-y-6">
@@ -234,30 +232,32 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
             onClick={() => router.push('/backend/cpq/price-rules')}
             className="text-sm text-muted-foreground hover:text-foreground transition-colors"
           >
-            &larr; Back
+            ← {t('cpq.common.back', 'Back')}
           </button>
           <h1 className="text-2xl font-bold">{rule.name}</h1>
           <Tag variant={rule.isActive ? 'success' : 'neutral'} dot>
-            {rule.isActive ? 'Active' : 'Inactive'}
+            {rule.isActive ? t('cpq.common.active', 'Active') : t('cpq.common.inactive', 'Inactive')}
           </Tag>
         </div>
         <div className="flex items-center gap-2">
           <Button type="button" variant="outline" onClick={handleToggleActive}>
-            {rule.isActive ? 'Deactivate' : 'Activate'}
+            {rule.isActive
+              ? t('cpq.priceRules.detail.deactivate', 'Deactivate')
+              : t('cpq.priceRules.detail.activate', 'Activate')}
           </Button>
           {!editing && (
             <button
               onClick={startEdit}
               className="rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90"
             >
-              Edit
+              {t('cpq.common.edit', 'Edit')}
             </button>
           )}
           <button
             onClick={() => setShowDeleteConfirm(true)}
             className="rounded-md border border-destructive/30 px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10 transition-colors"
           >
-            Delete
+            {t('cpq.common.delete', 'Delete')}
           </button>
         </div>
       </div>
@@ -265,20 +265,26 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
       {/* Delete confirmation */}
       {showDeleteConfirm && (
         <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4 flex items-center justify-between">
-          <span className="text-sm">Are you sure you want to delete <strong>{rule.name}</strong>?</span>
+          <span className="text-sm">
+            {deleteConfirmParts[0]}
+            <strong>{rule.name}</strong>
+            {deleteConfirmParts[1]}
+          </span>
           <div className="flex gap-2">
             <button
               onClick={handleDelete}
               disabled={deleting}
               className="rounded-md bg-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50"
             >
-              {deleting ? 'Deleting...' : 'Yes, Delete'}
+              {deleting
+                ? t('cpq.priceRules.detail.deleting', 'Deleting...')
+                : t('cpq.priceRules.detail.confirmDelete', 'Yes, Delete')}
             </button>
             <button
               onClick={() => setShowDeleteConfirm(false)}
               className="rounded-md border px-3 py-1.5 text-sm font-medium hover:bg-muted/50"
             >
-              Cancel
+              {t('cpq.common.cancel', 'Cancel')}
             </button>
           </div>
         </div>
@@ -287,32 +293,32 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
       {/* Edit mode */}
       {editing && form ? (
         <div className="rounded-lg border bg-card p-6 space-y-4">
-          <h2 className="text-lg font-semibold">Edit Rule</h2>
+          <h2 className="text-lg font-semibold">{t('cpq.priceRules.form.editTitle', 'Edit Rule')}</h2>
           {saveError && <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">{saveError}</div>}
           <div className="grid grid-cols-2 gap-4">
             <label className="space-y-1">
-              <span className="text-sm font-medium">Code</span>
+              <span className="text-sm font-medium">{t('cpq.priceRules.form.code', 'Code')}</span>
               <input className="w-full rounded-md border bg-muted/30 px-3 py-2 text-sm" value={rule.code} disabled />
             </label>
             <label className="space-y-1">
-              <span className="text-sm font-medium">Name</span>
+              <span className="text-sm font-medium">{t('cpq.priceRules.form.name', 'Name')}</span>
               <input className="w-full rounded-md border px-3 py-2 text-sm" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
             </label>
             <label className="space-y-1">
-              <span className="text-sm font-medium">Rule Type</span>
+              <span className="text-sm font-medium">{t('cpq.priceRules.form.ruleType', 'Rule Type')}</span>
               <select className="w-full rounded-md border px-3 py-2 text-sm" value={form.ruleType} onChange={(e) => setForm({ ...form, ruleType: e.target.value })}>
-                {Object.entries(RULE_TYPE_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+                {Object.entries(ruleTypeLabels).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
               </select>
             </label>
             <label className="space-y-1">
-              <span className="text-sm font-medium">Value</span>
+              <span className="text-sm font-medium">{t('cpq.priceRules.form.value', 'Value')}</span>
               <NumberInput
                 value={form.value === '' ? null : Number(form.value)}
                 onChange={(n) => setForm({ ...form, value: n == null ? '' : String(n) })}
               />
             </label>
             <label className="space-y-1">
-              <span className="text-sm font-medium">Sort Order</span>
+              <span className="text-sm font-medium">{t('cpq.priceRules.form.sortOrder', 'Sort Order')}</span>
               <NumberInput
                 integer
                 value={form.sortOrder === '' ? null : Number(form.sortOrder)}
@@ -320,52 +326,52 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
               />
             </label>
             <label className="space-y-1">
-              <span className="text-sm font-medium">Description</span>
-              <input className="w-full rounded-md border px-3 py-2 text-sm" placeholder="Optional" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
+              <span className="text-sm font-medium">{t('cpq.priceRules.form.description', 'Description')}</span>
+              <input className="w-full rounded-md border px-3 py-2 text-sm" placeholder={t('cpq.priceRules.form.descriptionPlaceholder', 'Optional')} value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
             </label>
             <label className="space-y-1">
-              <span className="text-sm font-medium">Charge Type Filter</span>
+              <span className="text-sm font-medium">{t('cpq.priceRules.form.chargeTypeFilter', 'Charge Type Filter')}</span>
               <select className="w-full rounded-md border px-3 py-2 text-sm" value={form.chargeTypeFilter} onChange={(e) => setForm({ ...form, chargeTypeFilter: e.target.value })}>
-                <option value="">All charge types</option>
-                <option value="nrc">NRC only</option>
-                <option value="mrc">MRC only</option>
-                <option value="usage">Usage only</option>
+                <option value="">{t('cpq.priceRules.form.allChargeTypes', 'All charge types')}</option>
+                <option value="nrc">{t('cpq.priceRules.form.nrcOnly', 'NRC only')}</option>
+                <option value="mrc">{t('cpq.priceRules.form.mrcOnly', 'MRC only')}</option>
+                <option value="usage">{t('cpq.priceRules.form.usageOnly', 'Usage only')}</option>
               </select>
             </label>
             <label className="space-y-1">
-              <span className="text-sm font-medium">Charge Code Filter</span>
-              <input className="w-full rounded-md border px-3 py-2 text-sm" placeholder="e.g. setup_fee (leave empty for all)" value={form.chargeCodeFilter} onChange={(e) => setForm({ ...form, chargeCodeFilter: e.target.value })} />
+              <span className="text-sm font-medium">{t('cpq.priceRules.form.chargeCodeFilter', 'Charge Code Filter')}</span>
+              <input className="w-full rounded-md border px-3 py-2 text-sm" placeholder={t('cpq.priceRules.form.chargeCodeFilterPlaceholder', 'e.g. setup_fee (leave empty for all)')} value={form.chargeCodeFilter} onChange={(e) => setForm({ ...form, chargeCodeFilter: e.target.value })} />
             </label>
             <label className="space-y-1 col-span-2">
-              <span className="text-sm font-medium">Product Offering</span>
+              <span className="text-sm font-medium">{t('cpq.priceRules.form.productOffering', 'Product Offering')}</span>
               <select className="w-full rounded-md border px-3 py-2 text-sm" value={form.productOfferingId} onChange={(e) => setForm({ ...form, productOfferingId: e.target.value })}>
-                <option value="">Global (all products)</option>
+                <option value="">{t('cpq.priceRules.form.globalAllProducts', 'Global (all products)')}</option>
                 {offerings.map((o) => <option key={o.id} value={o.id}>{o.name} ({o.code})</option>)}
               </select>
             </label>
             <div className="col-span-2 space-y-1">
-              <span className="text-sm font-medium">Applicability Condition</span>
-              <span className="ml-2 text-xs text-muted-foreground">(optional)</span>
+              <span className="text-sm font-medium">{t('cpq.priceRules.form.applicabilityCondition', 'Applicability Condition')}</span>
+              <span className="ml-2 text-xs text-muted-foreground">{t('cpq.priceRules.form.optionalHint', '(optional)')}</span>
               <div className="grid grid-cols-3 gap-2">
-                <input className="w-full rounded-md border px-3 py-2 text-sm" placeholder="Attribute (e.g. port_size)" value={form.conditionAttribute} onChange={(e) => setForm({ ...form, conditionAttribute: e.target.value })} />
+                <input className="w-full rounded-md border px-3 py-2 text-sm" placeholder={t('cpq.priceRules.form.conditionAttributePlaceholder', 'Attribute (e.g. port_size)')} value={form.conditionAttribute} onChange={(e) => setForm({ ...form, conditionAttribute: e.target.value })} />
                 <select className="w-full rounded-md border px-3 py-2 text-sm" value={form.conditionOperator} onChange={(e) => setForm({ ...form, conditionOperator: e.target.value })}>
-                  <option value="eq">equals (=)</option>
-                  <option value="neq">not equals (&#8800;)</option>
+                  <option value="eq">{t('cpq.priceRules.form.operatorEq', 'equals (=)')}</option>
+                  <option value="neq">{t('cpq.priceRules.form.operatorNeq', 'not equals (≠)')}</option>
                 </select>
-                <input className="w-full rounded-md border px-3 py-2 text-sm" placeholder="Value" value={form.conditionValue} onChange={(e) => setForm({ ...form, conditionValue: e.target.value })} />
+                <input className="w-full rounded-md border px-3 py-2 text-sm" placeholder={t('cpq.priceRules.form.conditionValuePlaceholderShort', 'Value')} value={form.conditionValue} onChange={(e) => setForm({ ...form, conditionValue: e.target.value })} />
               </div>
             </div>
           </div>
           <label className="flex items-center gap-2 text-sm">
             <input type="checkbox" checked={form.isActive} onChange={(e) => setForm({ ...form, isActive: e.target.checked })} />
-            Active
+            {t('cpq.common.active', 'Active')}
           </label>
           <div className="flex gap-2">
             <button onClick={handleSave} disabled={saving} className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50">
-              {saving ? 'Saving...' : 'Save Changes'}
+              {saving ? t('cpq.common.saving', 'Saving...') : t('cpq.priceRules.detail.saveChanges', 'Save Changes')}
             </button>
             <button onClick={cancelEdit} className="rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted/50">
-              Cancel
+              {t('cpq.common.cancel', 'Cancel')}
             </button>
           </div>
         </div>
@@ -374,29 +380,29 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {/* Main info */}
           <div className="rounded-lg border bg-card p-6 space-y-4">
-            <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">Rule Configuration</h2>
+            <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">{t('cpq.priceRules.detail.ruleConfiguration', 'Rule Configuration')}</h2>
             <dl className="space-y-3">
               <div className="flex justify-between">
-                <dt className="text-sm text-muted-foreground">Code</dt>
+                <dt className="text-sm text-muted-foreground">{t('cpq.priceRules.detail.code', 'Code')}</dt>
                 <dd className="text-sm font-mono">{rule.code}</dd>
               </div>
               <div className="flex justify-between border-t pt-3">
-                <dt className="text-sm text-muted-foreground">Rule Type</dt>
-                <dd className="text-sm font-medium">{RULE_TYPE_LABELS[rule.ruleType] ?? rule.ruleType}</dd>
+                <dt className="text-sm text-muted-foreground">{t('cpq.priceRules.detail.ruleType', 'Rule Type')}</dt>
+                <dd className="text-sm font-medium">{ruleTypeLabels[rule.ruleType] ?? rule.ruleType}</dd>
               </div>
               <div className="flex justify-between border-t pt-3">
-                <dt className="text-sm text-muted-foreground">Value</dt>
+                <dt className="text-sm text-muted-foreground">{t('cpq.priceRules.detail.value', 'Value')}</dt>
                 <dd className="text-sm font-mono font-medium">
                   {rule.ruleType.includes('percent') ? `${rule.value}%` : rule.ruleType === 'price_override' ? `= $${rule.value}` : `$${rule.value}`}
                 </dd>
               </div>
               <div className="flex justify-between border-t pt-3">
-                <dt className="text-sm text-muted-foreground">Sort Order</dt>
+                <dt className="text-sm text-muted-foreground">{t('cpq.priceRules.detail.sortOrder', 'Sort Order')}</dt>
                 <dd className="text-sm font-mono">{rule.sortOrder}</dd>
               </div>
               {rule.description && (
                 <div className="border-t pt-3">
-                  <dt className="text-sm text-muted-foreground mb-1">Description</dt>
+                  <dt className="text-sm text-muted-foreground mb-1">{t('cpq.priceRules.detail.description', 'Description')}</dt>
                   <dd className="text-sm">{rule.description}</dd>
                 </div>
               )}
@@ -405,10 +411,10 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
 
           {/* Scope & Filters */}
           <div className="rounded-lg border bg-card p-6 space-y-4">
-            <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">Scope &amp; Filters</h2>
+            <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">{t('cpq.priceRules.detail.scopeAndFilters', 'Scope & Filters')}</h2>
             <dl className="space-y-3">
               <div className="flex justify-between">
-                <dt className="text-sm text-muted-foreground">Scope</dt>
+                <dt className="text-sm text-muted-foreground">{t('cpq.priceRules.detail.scope', 'Scope')}</dt>
                 <dd className="text-sm">
                   {offering ? (
                     <span className="inline-flex items-center gap-1.5">
@@ -419,28 +425,28 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
                   ) : (
                     <span className="inline-flex items-center gap-1.5">
                       <span className="inline-block w-2 h-2 rounded-full bg-muted-foreground" />
-                      Global (all offerings)
+                      {t('cpq.priceRules.detail.globalAllOfferings', 'Global (all offerings)')}
                     </span>
                   )}
                 </dd>
               </div>
               <div className="flex justify-between border-t pt-3">
-                <dt className="text-sm text-muted-foreground">Charge Type</dt>
-                <dd className="text-sm">{rule.chargeTypeFilter ? rule.chargeTypeFilter.toUpperCase() : 'All types'}</dd>
+                <dt className="text-sm text-muted-foreground">{t('cpq.priceRules.detail.chargeType', 'Charge Type')}</dt>
+                <dd className="text-sm">{rule.chargeTypeFilter ? rule.chargeTypeFilter.toUpperCase() : t('cpq.priceRules.detail.allTypes', 'All types')}</dd>
               </div>
               <div className="flex justify-between border-t pt-3">
-                <dt className="text-sm text-muted-foreground">Charge Code</dt>
-                <dd className="text-sm font-mono">{rule.chargeCodeFilter ?? 'All charges'}</dd>
+                <dt className="text-sm text-muted-foreground">{t('cpq.priceRules.detail.chargeCode', 'Charge Code')}</dt>
+                <dd className="text-sm font-mono">{rule.chargeCodeFilter ?? t('cpq.priceRules.detail.allCharges', 'All charges')}</dd>
               </div>
               <div className="border-t pt-3">
-                <dt className="text-sm text-muted-foreground mb-1">Applicability Condition</dt>
+                <dt className="text-sm text-muted-foreground mb-1">{t('cpq.priceRules.detail.applicabilityCondition', 'Applicability Condition')}</dt>
                 <dd className="text-sm">
                   {cond?.attribute ? (
                     <code className="rounded bg-muted px-2 py-0.5 text-xs">
                       {cond.attribute} {cond.operator === 'neq' ? '≠' : '='} {cond.value ?? '""'}
                     </code>
                   ) : (
-                    <span className="text-muted-foreground">No condition (always applies)</span>
+                    <span className="text-muted-foreground">{t('cpq.priceRules.detail.noCondition', 'No condition (always applies)')}</span>
                   )}
                 </dd>
               </div>
@@ -449,18 +455,18 @@ export default function PriceRuleDetailPage(props: { params?: { id?: string } })
 
           {/* Metadata */}
           <div className="rounded-lg border bg-card p-6 space-y-4 lg:col-span-2">
-            <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">Metadata</h2>
+            <h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">{t('cpq.priceRules.detail.metadata', 'Metadata')}</h2>
             <dl className="flex gap-8 text-sm">
               <div>
-                <dt className="text-muted-foreground">Created</dt>
+                <dt className="text-muted-foreground">{t('cpq.priceRules.detail.created', 'Created')}</dt>
                 <dd>{new Date(rule.createdAt).toLocaleString()}</dd>
               </div>
               <div>
-                <dt className="text-muted-foreground">Updated</dt>
+                <dt className="text-muted-foreground">{t('cpq.priceRules.detail.updated', 'Updated')}</dt>
                 <dd>{new Date(rule.updatedAt).toLocaleString()}</dd>
               </div>
               <div>
-                <dt className="text-muted-foreground">ID</dt>
+                <dt className="text-muted-foreground">{t('cpq.priceRules.detail.id', 'ID')}</dt>
                 <dd className="font-mono text-xs">{rule.id}</dd>
               </div>
             </dl>

package/src/modules/cpq/backend/cpq/price-rules/page.tsx

@@ -9,7 +9,7 @@ import type { FilterDef, FilterValues } from '@open-mercato/ui/backend/FilterBar
 import { CpqListView, useCpqListData } from '../../../components/CpqListView'
 import {
   PriceRuleForm,
-  RULE_TYPE_LABELS,
+  buildRuleTypeLabels,
   emptyPriceRuleForm,
   priceRuleFormToPayload,
   type PriceRule,
@@ -62,18 +62,20 @@ export default function PriceRulesPage() {
       .catch(() => {})
   }, [])
 
+  const ruleTypeLabels = React.useMemo(() => buildRuleTypeLabels(t), [t])
+
   const ruleTypeOptions = React.useMemo(
-    () => Object.entries(RULE_TYPE_LABELS).map(([value, label]) => ({ value, label })),
-    [],
+    () => Object.entries(ruleTypeLabels).map(([value, label]) => ({ value, label })),
+    [ruleTypeLabels],
   )
 
   const chargeTypeOptions = React.useMemo(
     () => [
-      { value: 'nrc', label: 'NRC' },
-      { value: 'mrc', label: 'MRC' },
-      { value: 'usage', label: 'Usage' },
+      { value: 'nrc', label: t('cpq.priceRules.chargeTypes.nrc', 'NRC') },
+      { value: 'mrc', label: t('cpq.priceRules.chargeTypes.mrc', 'MRC') },
+      { value: 'usage', label: t('cpq.priceRules.chargeTypes.usage', 'Usage') },
     ],
-    [],
+    [t],
   )
 
   const filters = React.useMemo<FilterDef[]>(
@@ -122,16 +124,20 @@ export default function PriceRulesPage() {
       })
       if (!res.ok) {
         const err = await res.json()
-        throw new Error(err.details ? JSON.stringify(err.details) : err.error ?? 'Failed to create')
+        throw new Error(
+          err.details
+            ? JSON.stringify(err.details)
+            : err.error ?? t('cpq.priceRules.errors.createFailed', 'Failed to create'),
+        )
       }
       setShowForm(false)
       data.reload()
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Unknown error')
+      setError(err instanceof Error ? err.message : t('cpq.priceRules.errors.unknown', 'Unknown error'))
     } finally {
       setSaving(false)
     }
-  }, [data, form])
+  }, [data, form, t])
 
   const columns = React.useMemo<ColumnDef<PriceRule>[]>(
     () => [
@@ -154,7 +160,7 @@ export default function PriceRulesPage() {
         accessorKey: 'ruleType',
         header: t('cpq.priceRules.table.type', 'Type'),
         cell: ({ row }) => (
-          <span>{RULE_TYPE_LABELS[row.original.ruleType] ?? row.original.ruleType}</span>
+          <span>{ruleTypeLabels[row.original.ruleType] ?? row.original.ruleType}</span>
         ),
       },
       {
@@ -168,8 +174,9 @@ export default function PriceRulesPage() {
         cell: ({ row }) => (
           <span className="text-xs">
             {row.original.productOfferingId
-              ? row.original.productOfferingName ?? 'Product-scoped'
-              : 'Global'}
+              ? row.original.productOfferingName ??
+                t('cpq.priceRules.scope.productScoped', 'Product-scoped')
+              : t('cpq.priceRules.scope.global', 'Global')}
           </span>
         ),
       },
@@ -201,12 +208,14 @@ export default function PriceRulesPage() {
         header: t('cpq.priceRules.table.status', 'Status'),
         cell: ({ row }) => (
           <Tag variant={row.original.isActive ? 'success' : 'neutral'} dot>
-            {row.original.isActive ? 'Active' : 'Inactive'}
+            {row.original.isActive
+              ? t('cpq.common.active', 'Active')
+              : t('cpq.common.inactive', 'Inactive')}
           </Tag>
         ),
       },
     ],
-    [t],
+    [ruleTypeLabels, t],
   )
 
   return (
@@ -245,7 +254,7 @@ export default function PriceRulesPage() {
       }
       emptyState={
         <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
-          No price rules found. Click &quot;Create Rule&quot; to add one.
+          {t('cpq.priceRules.empty', 'No price rules found. Click "Create Rule" to add one.')}
         </div>
       }
     />

package/src/modules/cpq/backend/cpq/pricing/[id]/EntriesEditor.tsx

@@ -11,6 +11,7 @@ import {
   SelectValue,
 } from '@open-mercato/ui/primitives/select'
 import { Trash2 } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 
 // ─── Types ──────────────────────────────────────────────────────
 
@@ -54,6 +55,7 @@ export function EntriesEditor({
   initialEntries: Entry[]
   onSaved: (entries: Entry[]) => void
 }) {
+  const t = useT()
   const [drafts, setDrafts] = React.useState<DraftEntry[]>(() =>
     initialEntries.map((e) => ({ ...e, _state: null, _localId: e.id })),
   )
@@ -142,7 +144,7 @@ export function EntriesEditor({
         })
         if (!res.ok) {
           const body = await res.json().catch(() => ({}))
-          return { ok: false, error: body.error ?? 'Failed to create entries' }
+          return { ok: false, error: body.error ?? t('cpq.pricing.entries.errors.createFailed', 'Failed to create entries') }
         }
       }
 
@@ -164,7 +166,7 @@ export function EntriesEditor({
         })
         if (!res.ok) {
           const body = await res.json().catch(() => ({}))
-          return { ok: false, error: body.error ?? `Failed to update entry ${d.id}` }
+          return { ok: false, error: body.error ?? t('cpq.pricing.entries.errors.updateFailed', 'Failed to update entry {id}', { id: d.id }) }
         }
       }
 
@@ -178,13 +180,13 @@ export function EntriesEditor({
         })
         if (!res.ok) {
           const body = await res.json().catch(() => ({}))
-          return { ok: false, error: body.error ?? `Failed to delete entry ${d.id}` }
+          return { ok: false, error: body.error ?? t('cpq.pricing.entries.errors.deleteFailed', 'Failed to delete entry {id}', { id: d.id }) }
         }
       }
 
       return { ok: true }
     } catch (err) {
-      return { ok: false, error: err instanceof Error ? err.message : 'Failed to save entries' }
+      return { ok: false, error: err instanceof Error ? err.message : t('cpq.pricing.entries.errors.saveFailed', 'Failed to save entries') }
     } finally {
       setSaving(false)
     }
@@ -208,26 +210,26 @@ export function EntriesEditor({
     <div className="space-y-3">
       <div className="flex items-center justify-between">
         <h2 className="text-lg font-semibold">
-          Entries ({visibleDrafts.length})
+          {t('cpq.pricing.entries.title', 'Entries ({count})', { count: visibleDrafts.length })}
         </h2>
         <div className="flex items-center gap-2">
           {mode === 'view' ? (
             <Button type="button" variant="outline" size="sm" onClick={() => setMode('edit')}>
-              Edit Entries
+              {t('cpq.pricing.entries.edit', 'Edit Entries')}
             </Button>
           ) : (
             <>
               <Button type="button" variant="outline" size="sm" onClick={() => addRow(false)}>
-                + Add Row
+                {t('cpq.pricing.entries.addRow', '+ Add Row')}
               </Button>
               <Button type="button" variant="outline" size="sm" onClick={() => addRow(true)}>
-                + Add Tier
+                {t('cpq.pricing.entries.addTier', '+ Add Tier')}
               </Button>
               <Button type="button" size="sm" onClick={handleSave} disabled={saving || !dirty}>
-                {saving ? 'Saving...' : 'Save'}
+                {saving ? t('cpq.common.saving', 'Saving...') : t('cpq.common.save', 'Save')}
               </Button>
               <Button type="button" variant="outline" size="sm" onClick={cancelEdit} disabled={saving}>
-                Cancel
+                {t('cpq.common.cancel', 'Cancel')}
               </Button>
             </>
           )}
@@ -239,8 +241,11 @@ export function EntriesEditor({
       {visibleDrafts.length === 0 ? (
         <div className="rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground">
           {mode === 'edit'
-            ? 'No entries yet — use "+ Add Row" (dimensions lookup) or "+ Add Tier" (range lookup).'
-            : 'No entries in this pricing table.'}
+            ? t(
+                'cpq.pricing.entries.emptyEditing',
+                'No entries yet — use "+ Add Row" (dimensions lookup) or "+ Add Tier" (range lookup).',
+              )
+            : t('cpq.pricing.entries.empty', 'No entries in this pricing table.')}
         </div>
       ) : (
         <div className="rounded-lg border overflow-x-auto">
@@ -256,9 +261,9 @@ export function EntriesEditor({
                     prices they qualify, so the row reads "what → how much". */}
                 {hasTieredEntries && (
                   <>
-                    <th className="px-3 py-3 text-left font-medium whitespace-nowrap">Tier #</th>
-                    <th className="px-3 py-3 text-left font-medium whitespace-nowrap">Range From</th>
-                    <th className="px-3 py-3 text-left font-medium whitespace-nowrap">Range To</th>
+                    <th className="px-3 py-3 text-left font-medium whitespace-nowrap">{t('cpq.pricing.entries.tierNumber', 'Tier #')}</th>
+                    <th className="px-3 py-3 text-left font-medium whitespace-nowrap">{t('cpq.pricing.entries.rangeFrom', 'Range From')}</th>
+                    <th className="px-3 py-3 text-left font-medium whitespace-nowrap">{t('cpq.pricing.entries.rangeTo', 'Range To')}</th>
                   </>
                 )}
                 {table.priceColumns.map((col) => (
@@ -266,8 +271,8 @@ export function EntriesEditor({
                     {col.label}
                   </th>
                 ))}
-                <th className="px-3 py-3 text-left font-medium">Currency</th>
-                {mode === 'edit' && <th className="px-3 py-3 w-8" aria-label="Actions" />}
+                <th className="px-3 py-3 text-left font-medium">{t('cpq.pricing.entries.currency', 'Currency')}</th>
+                {mode === 'edit' && <th className="px-3 py-3 w-8" aria-label={t('cpq.pricing.entries.actions', 'Actions')} />}
               </tr>
             </thead>
             <tbody>
@@ -307,6 +312,7 @@ function EntryRow({
   onChange: (patch: Partial<DraftEntry>) => void
   onDelete: () => void
 }) {
+  const t = useT()
   const readOnly = mode === 'view'
   const rowBg = entry._state === 'new'
     ? 'bg-success/5'
@@ -421,7 +427,7 @@ function EntryRow({
             type="button"
             onClick={onDelete}
             className="text-destructive hover:bg-destructive/10 rounded p-1"
-            aria-label="Delete row"
+            aria-label={t('cpq.pricing.entries.deleteRow', 'Delete row')}
           >
             <Trash2 className="h-4 w-4" />
           </button>