@dainamite/cpq 0.6.0 → 0.7.0

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

@@ -10,16 +10,24 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@open-mercato/ui/primitives/select'
+import { useT, type TranslateFn } from '@open-mercato/shared/lib/i18n/context'
 import { NumberInput } from '../../../components/NumberInput'
 
 // ─── Shared types ────────────────────────────────────────────────
 
-export const RULE_TYPE_LABELS: Record<string, string> = {
-  discount_percent: 'Discount %',
-  discount_absolute: 'Discount $',
-  surcharge_percent: 'Surcharge %',
-  surcharge_absolute: 'Surcharge $',
-  price_override: 'Override',
+/**
+ * Display labels for price-rule types, keyed by the persisted `ruleType`
+ * value. Single translatable source shared by the list, the create form and
+ * the detail page — call inside render with the component's `t`.
+ */
+export function buildRuleTypeLabels(t: TranslateFn): Record<string, string> {
+  return {
+    discount_percent: t('cpq.priceRules.ruleTypes.discountPercent', 'Discount %'),
+    discount_absolute: t('cpq.priceRules.ruleTypes.discountAbsolute', 'Discount $'),
+    surcharge_percent: t('cpq.priceRules.ruleTypes.surchargePercent', 'Surcharge %'),
+    surcharge_absolute: t('cpq.priceRules.ruleTypes.surchargeAbsolute', 'Surcharge $'),
+    price_override: t('cpq.priceRules.ruleTypes.priceOverride', 'Override'),
+  }
 }
 
 export type PriceRuleApplicabilityCondition = {
@@ -145,15 +153,17 @@ export function PriceRuleForm({
   onSave,
   onCancel,
 }: PriceRuleFormProps) {
+  const t = useT()
+  const ruleTypeLabels = buildRuleTypeLabels(t)
   return (
     <div className="rounded-lg border bg-card p-6 space-y-4">
-      <h2 className="text-lg font-semibold">{editingId ? 'Edit Rule' : 'New Rule'}</h2>
+      <h2 className="text-lg font-semibold">{editingId ? t('cpq.priceRules.form.editTitle', 'Edit Rule') : t('cpq.priceRules.form.newTitle', 'New Rule')}</h2>
       {error && (
         <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">{error}</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
             value={form.code}
             onChange={(e) => onFormChange({ ...form, code: e.target.value })}
@@ -161,14 +171,14 @@ export function PriceRuleForm({
           />
         </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
             value={form.name}
             onChange={(e) => onFormChange({ ...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
             value={form.ruleType}
             onValueChange={(value) => onFormChange({ ...form, ruleType: value })}
@@ -177,7 +187,7 @@ export function PriceRuleForm({
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              {Object.entries(RULE_TYPE_LABELS).map(([k, v]) => (
+              {Object.entries(ruleTypeLabels).map(([k, v]) => (
                 <SelectItem key={k} value={k}>
                   {v}
                 </SelectItem>
@@ -186,14 +196,14 @@ export function PriceRuleForm({
           </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) => onFormChange({ ...form, value: n == null ? '' : String(n) })}
           />
         </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
             value={form.chargeTypeFilter || '__all__'}
             onValueChange={(value) =>
@@ -204,23 +214,23 @@ export function PriceRuleForm({
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="__all__">All charge types</SelectItem>
-              <SelectItem value="nrc">NRC only</SelectItem>
-              <SelectItem value="mrc">MRC only</SelectItem>
-              <SelectItem value="usage">Usage only</SelectItem>
+              <SelectItem value="__all__">{t('cpq.priceRules.form.allChargeTypes', 'All charge types')}</SelectItem>
+              <SelectItem value="nrc">{t('cpq.priceRules.form.nrcOnly', 'NRC only')}</SelectItem>
+              <SelectItem value="mrc">{t('cpq.priceRules.form.mrcOnly', 'MRC only')}</SelectItem>
+              <SelectItem value="usage">{t('cpq.priceRules.form.usageOnly', 'Usage only')}</SelectItem>
             </SelectContent>
           </Select>
         </label>
         <label className="space-y-1">
-          <span className="text-sm font-medium">Charge Code Filter</span>
+          <span className="text-sm font-medium">{t('cpq.priceRules.form.chargeCodeFilter', 'Charge Code Filter')}</span>
           <Input
-            placeholder="e.g. setup_fee (leave empty for all)"
+            placeholder={t('cpq.priceRules.form.chargeCodeFilterPlaceholder', 'e.g. setup_fee (leave empty for all)')}
             value={form.chargeCodeFilter}
             onChange={(e) => onFormChange({ ...form, chargeCodeFilter: e.target.value })}
           />
         </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)}
@@ -228,15 +238,15 @@ export function PriceRuleForm({
           />
         </label>
         <label className="space-y-1">
-          <span className="text-sm font-medium">Description</span>
+          <span className="text-sm font-medium">{t('cpq.priceRules.form.description', 'Description')}</span>
           <Input
-            placeholder="Optional"
+            placeholder={t('cpq.priceRules.form.descriptionPlaceholder', 'Optional')}
             value={form.description}
             onChange={(e) => onFormChange({ ...form, description: 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
             value={form.productOfferingId || '__global__'}
             onValueChange={(value) =>
@@ -247,7 +257,7 @@ export function PriceRuleForm({
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="__global__">Global (all products)</SelectItem>
+              <SelectItem value="__global__">{t('cpq.priceRules.form.globalAllProducts', 'Global (all products)')}</SelectItem>
               {offerings.map((o) => (
                 <SelectItem key={o.id} value={o.id}>
                   {o.name} ({o.code})
@@ -256,17 +266,17 @@ export function PriceRuleForm({
             </SelectContent>
           </Select>
           <span className="text-xs text-muted-foreground">
-            Leave as &quot;Global&quot; to apply to all products, or select a specific offering
+            {t('cpq.priceRules.form.productOfferingHint', 'Leave as "Global" to apply to all products, or select a specific offering')}
           </span>
         </label>
         <div className="col-span-2 space-y-1">
-          <span className="text-sm font-medium">Applicability Condition</span>
+          <span className="text-sm font-medium">{t('cpq.priceRules.form.applicabilityCondition', 'Applicability Condition')}</span>
           <span className="ml-2 text-xs text-muted-foreground">
-            (optional — only apply when a product attribute matches)
+            {t('cpq.priceRules.form.applicabilityConditionHint', '(optional — only apply when a product attribute matches)')}
           </span>
           <div className="grid grid-cols-3 gap-2">
             <Input
-              placeholder="Attribute (e.g. port_size)"
+              placeholder={t('cpq.priceRules.form.conditionAttributePlaceholder', 'Attribute (e.g. port_size)')}
               value={form.conditionAttribute}
               onChange={(e) => onFormChange({ ...form, conditionAttribute: e.target.value })}
             />
@@ -278,12 +288,12 @@ export function PriceRuleForm({
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="eq">equals (=)</SelectItem>
-                <SelectItem value="neq">not equals (≠)</SelectItem>
+                <SelectItem value="eq">{t('cpq.priceRules.form.operatorEq', 'equals (=)')}</SelectItem>
+                <SelectItem value="neq">{t('cpq.priceRules.form.operatorNeq', 'not equals (≠)')}</SelectItem>
               </SelectContent>
             </Select>
             <Input
-              placeholder="Value (e.g. 100G)"
+              placeholder={t('cpq.priceRules.form.conditionValuePlaceholder', 'Value (e.g. 100G)')}
               value={form.conditionValue}
               onChange={(e) => onFormChange({ ...form, conditionValue: e.target.value })}
             />
@@ -295,14 +305,18 @@ export function PriceRuleForm({
           checked={form.isActive}
           onCheckedChange={(checked) => onFormChange({ ...form, isActive: checked === true })}
         />
-        Active
+        {t('cpq.common.active', 'Active')}
       </label>
       <div className="flex gap-2">
         <Button type="button" onClick={onSave} disabled={saving}>
-          {saving ? 'Saving...' : editingId ? 'Update' : 'Create'}
+          {saving
+            ? t('cpq.common.saving', 'Saving...')
+            : editingId
+              ? t('cpq.priceRules.form.update', 'Update')
+              : t('cpq.priceRules.form.create', 'Create')}
         </Button>
         <Button type="button" variant="outline" onClick={onCancel}>
-          Cancel
+          {t('cpq.common.cancel', 'Cancel')}
         </Button>
       </div>
     </div>

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

@@ -4,6 +4,6 @@ export const metadata = {
   navHidden: true,
   breadcrumb: [
     { label: 'Price Rules', labelKey: 'cpq.priceRules.list.title', href: '/backend/cpq/price-rules' },
-    { label: 'Rule Detail' },
+    { label: 'Rule Detail', labelKey: 'cpq.priceRules.detail.breadcrumb' },
   ],
 } as const

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>