@open-mercato/ui 0.6.6-develop.6519.1.bdc91fb755 → 0.6.6-develop.6520.1.55df6df792

package/src/backend/custom-fields/FieldDefinitionsEditor.tsx

@@ -15,6 +15,7 @@ import {
   SelectValue,
 } from '../../primitives/select'
 import { CUSTOM_FIELD_KINDS } from '@open-mercato/shared/modules/entities/kinds'
+import { useOptionalT } from '@open-mercato/shared/lib/i18n/context'
 import { FieldRegistry } from '../fields/registry'
 import { slugify } from '@open-mercato/shared/lib/slugify'
 import { useConfirmDialog } from '../confirm-dialog'
@@ -70,11 +71,6 @@ export type FieldDefinitionsEditorProps = {
   translate?: (key: string, fallback: string) => string
 }
 
-const DEFAULT_KIND_OPTIONS = CUSTOM_FIELD_KINDS.map((k) => ({
-  value: k,
-  label: k.charAt(0).toUpperCase() + k.slice(1),
-}))
-
 const DEFAULT_VALUE_NONE = '__open_mercato_no_default__'
 
 function getDefaultValueNoneOptionValue(options: CustomFieldOptionDto[]): string {
@@ -158,14 +154,10 @@ export function FieldDefinitionsEditor({
   definitions,
   errors,
   deletedKeys,
-  kindOptions = DEFAULT_KIND_OPTIONS,
+  kindOptions,
   orderNotice,
-  infoNote = (
-    <div className="text-xs text-muted-foreground mt-2">
-      Supported kinds: text, multiline, integer, float, boolean, select (with options/optionsUrl), currency (fixed currencies list), relation (with related entity and options URL).
-    </div>
-  ),
-  addButtonLabel = 'Add Field',
+  infoNote,
+  addButtonLabel,
   fieldsets = [],
   activeFieldset = null,
   onActiveFieldsetChange,
@@ -187,7 +179,33 @@ export function FieldDefinitionsEditor({
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
   const dragIndex = React.useRef<number | null>(null)
   const hasFieldsets = fieldsets.length > 0
-  const t = React.useCallback((key: string, fallback: string) => (translate ? translate(key, fallback) : fallback), [translate])
+  const contextT = useOptionalT()
+  const t = React.useCallback(
+    (key: string, fallback: string) => {
+      if (translate) return translate(key, fallback)
+      if (contextT) return contextT(key, fallback)
+      return fallback
+    },
+    [translate, contextT],
+  )
+  const resolvedKindOptions = React.useMemo(
+    () =>
+      kindOptions ??
+      CUSTOM_FIELD_KINDS.map((kind) => ({
+        value: kind,
+        label: t(`entities.customFields.editor.kindOption.${kind}`, kind.charAt(0).toUpperCase() + kind.slice(1)),
+      })),
+    [kindOptions, t],
+  )
+  const resolvedInfoNote = infoNote !== undefined ? infoNote : (
+    <div className="text-xs text-muted-foreground mt-2">
+      {t(
+        'entities.customFields.editor.supportedKindsNote',
+        'Supported kinds: text, multiline, integer, float, boolean, select (with options/optionsUrl), currency (fixed currencies list), relation (with related entity and options URL).',
+      )}
+    </div>
+  )
+  const resolvedAddButtonLabel = addButtonLabel ?? t('entities.customFields.editor.addField', 'Add Field')
   const resolvedActiveFieldset = React.useMemo(() => {
     if (!hasFieldsets) return activeFieldset ?? null
     if (activeFieldset === null) return null
@@ -237,7 +255,7 @@ export function FieldDefinitionsEditor({
   const handleAddFieldset = () => {
     if (!onFieldsetsChange) return
     const code = ensureUniqueFieldsetCode(`fieldset_${fieldsets.length + 1}`, fieldsets)
-    const nextFieldsets = [...fieldsets, { code, label: 'New fieldset', icon: 'layers' }]
+    const nextFieldsets = [...fieldsets, { code, label: t('entities.customFields.editor.newFieldsetLabel', 'New fieldset'), icon: 'layers' }]
     onFieldsetsChange(nextFieldsets)
     onActiveFieldsetChange?.(code)
   }
@@ -246,8 +264,8 @@ export function FieldDefinitionsEditor({
     if (!onFieldsetsChange) return
     if (!resolvedActiveFieldset) return
     const confirmed = await confirm({
-      title: `Delete fieldset "${resolvedActiveFieldset}"?`,
-      text: 'This will move its fields to Unassigned.',
+      title: t('entities.customFields.editor.deleteFieldsetTitle', 'Delete fieldset "{code}"?').replace('{code}', resolvedActiveFieldset),
+      text: t('entities.customFields.editor.deleteFieldsetText', 'This will move its fields to Unassigned.'),
       variant: 'destructive',
     })
     if (!confirmed) return
@@ -309,13 +327,13 @@ export function FieldDefinitionsEditor({
       {hasFieldsets ? (
         <div className="rounded border bg-card p-3 space-y-3">
           <div className="flex flex-wrap items-center gap-2">
-            <label className="text-xs font-medium text-muted-foreground">Fieldset</label>
+            <label className="text-xs font-medium text-muted-foreground">{t('entities.customFields.fieldsetSelectorLabel', 'Fieldset')}</label>
             <Select
               value={resolvedActiveFieldset || undefined}
               onValueChange={(value) => handleActiveFieldsetChange(value ?? '')}
             >
               <SelectTrigger size="sm" className="w-auto min-w-[10rem]">
-                <SelectValue placeholder="Unassigned fields" />
+                <SelectValue placeholder={t('entities.customFields.editor.unassignedFields', 'Unassigned fields')} />
               </SelectTrigger>
               <SelectContent>
                 {fieldsets.map((fs) => (
@@ -331,7 +349,7 @@ export function FieldDefinitionsEditor({
               onClick={handleAddFieldset}
               className="text-xs"
             >
-              <Plus className="h-3.5 w-3.5" /> Add
+              <Plus className="h-3.5 w-3.5" /> {t('entities.customFields.editor.add', 'Add')}
             </Button>
             <Button
               variant="outline"
@@ -340,12 +358,12 @@ export function FieldDefinitionsEditor({
               disabled={!resolvedActiveFieldset}
               className="text-xs"
             >
-              <Trash2 className="h-3.5 w-3.5" /> Delete
+              <Trash2 className="h-3.5 w-3.5" /> {t('entities.customFields.editor.delete', 'Delete')}
             </Button>
           </div>
           {resolvedActiveFieldset && activeFieldsetConfig ? (
             <div className="grid grid-cols-1 md:grid-cols-4 gap-3">
-              <FormField label="Code">
+              <FormField label={t('entities.customFields.editor.code', 'Code')}>
                 <Input
                   size="sm"
                   inputClassName="font-mono"
@@ -353,14 +371,14 @@ export function FieldDefinitionsEditor({
                   onChange={(event) => handleFieldsetCodeInput(activeFieldsetConfig.code, event.target.value)}
                 />
               </FormField>
-              <FormField label="Label">
+              <FormField label={t('entities.customFields.editor.label', 'Label')}>
                 <Input
                   size="sm"
                   value={activeFieldsetConfig.label}
                   onChange={(event) => handleFieldsetPatch(activeFieldsetConfig.code, { label: event.target.value })}
                 />
               </FormField>
-              <FormField label="Icon">
+              <FormField label={t('entities.customFields.editor.icon', 'Icon')}>
                 <Select
                   value={activeFieldsetConfig.icon || undefined}
                   onValueChange={(value) =>
@@ -370,18 +388,18 @@ export function FieldDefinitionsEditor({
                   }
                 >
                   <SelectTrigger size="sm">
-                    <SelectValue placeholder="Default" />
+                    <SelectValue placeholder={t('entities.customFields.editor.defaultOption', 'Default')} />
                   </SelectTrigger>
                   <SelectContent>
                     {FIELDSET_ICON_OPTIONS.map((option) => (
                       <SelectItem key={option.value} value={option.value}>
-                        {option.label}
+                        {t(`entities.customFields.editor.iconOption.${option.value}`, option.label)}
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
               </FormField>
-              <FormField label="Description">
+              <FormField label={t('entities.customFields.editor.description', 'Description')}>
                 <Input
                   size="sm"
                   value={activeFieldsetConfig.description ?? ''}
@@ -396,18 +414,18 @@ export function FieldDefinitionsEditor({
               disabled={!canToggleSingleFieldset}
               checked={singleFieldsetChecked}
               onCheckedChange={(checked) => onSingleFieldsetPerRecordChange?.(checked === true)}
-              label="Single fieldset per entity"
+              label={t('entities.customFields.editor.singleFieldsetPerEntity', 'Single fieldset per entity')}
               containerClassName="text-xs"
               contentClassName="gap-1 [&_label]:text-xs [&_label]:font-normal"
             />
             {!canToggleSingleFieldset ? (
-              <span className="text-xs text-muted-foreground">(add at least two fieldsets to toggle)</span>
+              <span className="text-xs text-muted-foreground">{t('entities.customFields.editor.singleFieldsetToggleHint', '(add at least two fieldsets to toggle)')}</span>
             ) : null}
           </div>
         </div>
       ) : (
         <div className="rounded border border-dashed bg-muted/30 p-4 text-sm text-muted-foreground flex flex-col gap-3">
-          <div>No fieldsets defined yet. Fieldsets let you group custom fields for different variants of the same entity (e.g., Fashion vs. Sport products).</div>
+          <div>{t('entities.customFields.editor.noFieldsets', 'No fieldsets defined yet. Fieldsets let you group custom fields for different variants of the same entity (e.g., Fashion vs. Sport products).')}</div>
           <div>
             <Button
               variant="outline"
@@ -415,7 +433,7 @@ export function FieldDefinitionsEditor({
               onClick={handleAddFieldset}
             >
               <Plus className="h-4 w-4" />
-              Add first fieldset
+              {t('entities.customFields.editor.addFirstFieldset', 'Add first fieldset')}
             </Button>
           </div>
         </div>
@@ -423,7 +441,9 @@ export function FieldDefinitionsEditor({
       {orderNotice?.dirty && (
         <div className="sticky top-0 z-sticky -mt-1 -mb-1">
           <div className="inline-flex items-center gap-2 text-xs px-2 py-1 rounded border border-status-warning-border bg-status-warning-bg text-status-warning-text shadow-sm">
-            {orderNotice?.saving ? 'Saving order…' : (orderNotice?.message ?? 'Reordered — saving soon')}
+            {orderNotice?.saving
+              ? t('entities.customFields.editor.savingOrder', 'Saving order…')
+              : (orderNotice?.message ?? t('entities.customFields.editor.reorderedSavingSoon', 'Reordered — saving soon'))}
           </div>
         </div>
       )}
@@ -462,7 +482,7 @@ export function FieldDefinitionsEditor({
           <FieldDefinitionCard
             definition={definition}
             error={errors?.[index]}
-            kindOptions={kindOptions}
+            kindOptions={resolvedKindOptions}
             onChange={(next) => onDefinitionChange(index, next)}
             onRemove={() => onRemoveField(index)}
             allowFieldsetSelection={hasFieldsets}
@@ -482,12 +502,12 @@ export function FieldDefinitionsEditor({
           size="sm"
           onClick={onAddField}
         >
-          <Plus className="h-4 w-4" /> {addButtonLabel}
+          <Plus className="h-4 w-4" /> {resolvedAddButtonLabel}
         </Button>
-        {infoNote}
+        {resolvedInfoNote}
         {deletedKeys && deletedKeys.length > 0 && onRestoreField ? (
           <div className="text-xs text-muted-foreground mt-2">
-            Restore deleted fields:{' '}
+            {t('entities.customFields.editor.restoreDeletedFields', 'Restore deleted fields:')}{' '}
             {deletedKeys.map((key, idx) => (
               <span key={key}>
                 <Button
@@ -669,7 +689,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
     if (!currentFieldsetValue) return
     const code = slugifyFieldsetCode(groupDraft.code || '')
     if (!code) {
-      setGroupError('Group code is required.')
+      setGroupError(t('entities.customFields.editor.groupCodeRequired', 'Group code is required.'))
       return
     }
     const group: FieldsetGroup = {
@@ -725,7 +745,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
     const value = optionValueDraft.trim()
     const label = optionLabelDraft.trim()
     if (!value) {
-      setOptionFormError('Value is required')
+      setOptionFormError(t('entities.customFields.editor.valueRequired', 'Value is required'))
       return
     }
     setOptionFormError(null)
@@ -749,30 +769,30 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
           <span className="inline-flex items-center justify-center h-5 w-5 rounded hover:bg-muted cursor-grab active:cursor-grabbing">
             <GripVertical className="h-4 w-4 opacity-70" />
           </span>
-          Drag to reorder
+          {t('entities.customFields.editor.dragToReorder', 'Drag to reorder')}
         </div>
         <div className="flex items-center gap-3">
           <CheckboxField
             size="sm"
             checked={local.isActive !== false}
             onCheckedChange={(checked) => { apply({ isActive: checked === true }, true) }}
-            label="Active"
+            label={t('entities.customFields.editor.active', 'Active')}
             containerClassName="text-sm"
             contentClassName="gap-1 [&_label]:text-sm [&_label]:font-normal"
           />
           {onTranslate && (
-            <IconButton variant="outline" size="sm" onClick={onTranslate} aria-label="Translate field">
+            <IconButton variant="outline" size="sm" onClick={onTranslate} aria-label={t('entities.customFields.editor.translateField', 'Translate field')}>
               <Languages className="h-4 w-4" />
             </IconButton>
           )}
-          <IconButton variant="outline" size="sm" onClick={onRemove} aria-label="Remove field">
+          <IconButton variant="outline" size="sm" onClick={onRemove} aria-label={t('entities.customFields.editor.removeField', 'Remove field')}>
             <Trash2 className="h-4 w-4" />
           </IconButton>
         </div>
       </div>
 
       <div className="mt-3 grid grid-cols-1 md:grid-cols-12 gap-3 items-center">
-        <FormField label="Key" error={error?.key} className="md:col-span-6">
+        <FormField label={t('entities.customFields.editor.key', 'Key')} error={error?.key} className="md:col-span-6">
           <Input
             inputClassName="font-mono"
             placeholder="snake_case"
@@ -781,7 +801,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
             onBlur={commit}
           />
         </FormField>
-        <FormField label="Kind" error={error?.kind} className="md:col-span-6">
+        <FormField label={t('entities.customFields.editor.kind', 'Kind')} error={error?.kind} className="md:col-span-6">
           <Select
             value={local.kind || undefined}
             onValueChange={(value) => { apply({ kind: value ?? '' }, true) }}
@@ -803,13 +823,13 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
       {allowFieldsetSelection ? (
         <div className="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
           <div>
-            <label className="text-xs">Assign to fieldset</label>
+            <label className="text-xs">{t('entities.customFields.editor.assignToFieldset', 'Assign to fieldset')}</label>
             <Select
               value={currentFieldsetValue || undefined}
               onValueChange={(value) => handleFieldsetSelect(value ?? '')}
             >
               <SelectTrigger>
-                <SelectValue placeholder="Unassigned" />
+                <SelectValue placeholder={t('entities.customFields.editor.unassigned', 'Unassigned')} />
               </SelectTrigger>
               <SelectContent>
                 {(fieldsets || []).map((fs) => (
@@ -823,7 +843,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
           {currentFieldsetValue ? (
             <div>
               <div className="flex items-center justify-between">
-                <label className="text-xs">Group</label>
+                <label className="text-xs">{t('entities.customFields.editor.group', 'Group')}</label>
               </div>
               <div className="flex items-center gap-2 mt-1">
                 <Select
@@ -831,7 +851,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                   onValueChange={(value) => handleGroupSelect(value ?? '')}
                 >
                   <SelectTrigger className="flex-1">
-                    <SelectValue placeholder="No group" />
+                    <SelectValue placeholder={t('entities.customFields.editor.noGroup', 'No group')} />
                   </SelectTrigger>
                   <SelectContent>
                     {groupOptions.map((group) => (
@@ -845,7 +865,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                   variant="outline"
                   className="text-muted-foreground"
                   onClick={() => handleOpenGroupDialog()}
-                  aria-label="Create group"
+                  aria-label={t('entities.customFields.editor.createGroup', 'Create group')}
                 >
                   <Plus className="h-4 w-4" />
                 </IconButton>
@@ -853,7 +873,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                   variant="outline"
                   className="text-muted-foreground"
                   onClick={() => handleOpenGroupDialog()}
-                  aria-label="Edit groups"
+                  aria-label={t('entities.customFields.editor.editGroups', 'Edit groups')}
                 >
                   <Cog className="h-4 w-4" />
                 </IconButton>
@@ -864,14 +884,14 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
       ) : null}
 
       <div className="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
-        <FormField label="Label">
+        <FormField label={t('entities.customFields.editor.label', 'Label')}>
           <Input
             value={typeof local.configJson?.label === 'string' ? local.configJson.label : ''}
             onChange={(event) => apply({ configJson: { ...(local.configJson || {}), label: event.target.value } })}
             onBlur={commit}
           />
         </FormField>
-        <FormField label="Description">
+        <FormField label={t('entities.customFields.editor.description', 'Description')}>
           <Input
             value={typeof local.configJson?.description === 'string' ? local.configJson.description : ''}
             onChange={(event) => apply({ configJson: { ...(local.configJson || {}), description: event.target.value } })}
@@ -882,18 +902,18 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
         {(local.kind === 'text' || local.kind === 'multiline') && (
           <>
             <div>
-              <label className="text-xs">Editor</label>
+              <label className="text-xs">{t('entities.customFields.editor.editor', 'Editor')}</label>
               <Select
                 value={typeof local.configJson?.editor === 'string' && local.configJson.editor ? local.configJson.editor : undefined}
                 onValueChange={(value) => { apply({ configJson: { ...(local.configJson || {}), editor: value || undefined } }, true) }}
               >
                 <SelectTrigger>
-                  <SelectValue placeholder="Default" />
+                  <SelectValue placeholder={t('entities.customFields.editor.defaultOption', 'Default')} />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="markdown">Markdown (UIW)</SelectItem>
-                  <SelectItem value="simpleMarkdown">Simple Markdown</SelectItem>
-                  <SelectItem value="htmlRichText">HTML Rich Text</SelectItem>
+                  <SelectItem value="markdown">{t('entities.customFields.editor.editorMarkdown', 'Markdown (UIW)')}</SelectItem>
+                  <SelectItem value="simpleMarkdown">{t('entities.customFields.editor.editorSimpleMarkdown', 'Simple Markdown')}</SelectItem>
+                  <SelectItem value="htmlRichText">{t('entities.customFields.editor.editorHtmlRichText', 'HTML Rich Text')}</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -903,13 +923,13 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                   size="sm"
                   checked={!!local.configJson?.multi}
                   onCheckedChange={(checked) => { apply({ configJson: { ...(local.configJson || {}), multi: checked === true } }, true) }}
-                  label="Multiple"
+                  label={t('entities.customFields.editor.multiple', 'Multiple')}
                   containerClassName="md:col-span-2"
                   contentClassName="gap-1 [&_label]:text-xs [&_label]:font-normal"
                 />
                 {!!local.configJson?.multi && (
                   <div className="md:col-span-2">
-                    <label className="text-xs">Multi-select input style</label>
+                    <label className="text-xs">{t('entities.customFields.editor.multiSelectInputStyle', 'Multi-select input style')}</label>
                     <Select
                       value={local.configJson?.input === 'listbox' ? 'listbox' : 'default'}
                       onValueChange={(value) => {
@@ -923,8 +943,8 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
-                        <SelectItem value="default">Default</SelectItem>
-                        <SelectItem value="listbox">Listbox (searchable)</SelectItem>
+                        <SelectItem value="default">{t('entities.customFields.editor.defaultOption', 'Default')}</SelectItem>
+                        <SelectItem value="listbox">{t('entities.customFields.editor.listboxSearchable', 'Listbox (searchable)')}</SelectItem>
                       </SelectContent>
                     </Select>
                   </div>
@@ -936,7 +956,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
 
         {local.kind === 'select' && (
           <div className="md:col-span-6 space-y-3">
-            <label className="text-xs">Options</label>
+            <label className="text-xs">{t('entities.customFields.editor.options', 'Options')}</label>
             <div className="space-y-2">
               {resolvedOptions.length > 0 ? (
                 resolvedOptions.map((option, idx) => (
@@ -953,14 +973,14 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                       size="xs"
                       className="text-destructive hover:text-destructive/80"
                       onClick={() => handleRemoveOption(idx)}
-                      aria-label="Remove option"
+                      aria-label={t('entities.customFields.editor.removeOption', 'Remove option')}
                     >
                       <Trash2 className="h-3.5 w-3.5" />
                     </IconButton>
                   </div>
                 ))
               ) : (
-                <span className="text-xs text-muted-foreground">No options defined.</span>
+                <span className="text-xs text-muted-foreground">{t('entities.customFields.editor.noOptionsDefined', 'No options defined.')}</span>
               )}
             </div>
             <div className="flex justify-end">
@@ -971,7 +991,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                 onClick={handleOpenOptionDialog}
               >
                 <Plus className="h-3.5 w-3.5" />
-                Add option
+                {t('entities.customFields.editor.addOption', 'Add option')}
               </Button>
             </div>
           </div>
@@ -979,7 +999,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
 
         {(local.kind === 'select' || local.kind === 'relation') && (
           <>
-            <FormField label="Options URL">
+            <FormField label={t('entities.customFields.editor.optionsUrl', 'Options URL')}>
               <Input
                 placeholder="/api/..."
                 value={typeof local.configJson?.optionsUrl === 'string' ? local.configJson.optionsUrl : ''}
@@ -988,7 +1008,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
               />
             </FormField>
             {local.kind === 'relation' && (
-              <FormField label="Related Entity ID">
+              <FormField label={t('entities.customFields.editor.relatedEntityId', 'Related Entity ID')}>
                 <Input
                   inputClassName="font-mono"
                   placeholder="module:entity"
@@ -1015,7 +1035,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
 
         {local.kind === 'currency' && (
           <div className="md:col-span-2">
-            <label className="text-xs">Options source</label>
+            <label className="text-xs">{t('entities.customFields.editor.optionsSource', 'Options source')}</label>
             <div className="rounded border bg-muted px-2 py-1 text-xs text-muted-foreground">
               /api/currencies/options
             </div>
@@ -1023,9 +1043,9 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
         )}
 
         {(local.kind === 'integer' || local.kind === 'float') && (
-          <FormField label="Units (optional)" className="md:col-span-2">
+          <FormField label={t('entities.customFields.editor.unitsOptional', 'Units (optional)')} className="md:col-span-2">
             <Input
-              placeholder="kg, cm, etc."
+              placeholder={t('entities.customFields.editor.unitsPlaceholder', 'kg, cm, etc.')}
               value={typeof local.configJson?.unit === 'string' ? local.configJson.unit : ''}
               onChange={(event) => apply({ configJson: { ...(local.configJson || {}), unit: event.target.value } })}
               onBlur={commit}
@@ -1036,7 +1056,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
 
       <div className="mt-3 pt-3 border-t">
         <div className="flex items-center justify-between mb-2">
-          <label className="text-sm font-medium">Validation rules</label>
+          <label className="text-sm font-medium">{t('entities.customFields.editor.validationRules', 'Validation rules')}</label>
           <Button
             variant="outline"
             size="sm"
@@ -1044,13 +1064,13 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
             onClick={() => {
               apply((current) => {
                 const list = Array.isArray(current.configJson?.validation) ? [...current.configJson.validation] : []
-                list.push({ rule: 'required', message: 'This field is required' } as any)
+                list.push({ rule: 'required', message: t('entities.customFields.editor.ruleRequiredMessage', 'This field is required') } as any)
                 return { configJson: { ...(current.configJson || {}), validation: list } }
               }, true)
             }}
           >
             <Plus className="h-3.5 w-3.5" />
-            Add rule
+            {t('entities.customFields.editor.addRule', 'Add rule')}
           </Button>
         </div>
         <div className="space-y-2">
@@ -1089,7 +1109,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
               </div>
               <div className="md:col-span-4">
                 <Input
-                  placeholder={rule?.rule === 'regex' ? 'Pattern (e.g. ^[a-z]+$)' : (['lt','lte','gt','gte'].includes(rule?.rule) ? 'Number' : '—')}
+                  placeholder={rule?.rule === 'regex' ? t('entities.customFields.editor.rulePatternPlaceholder', 'Pattern (e.g. ^[a-z]+$)') : (['lt','lte','gt','gte'].includes(rule?.rule) ? t('entities.customFields.editor.ruleNumberPlaceholder', 'Number') : '—')}
                   value={rule?.param ?? ''}
                   onChange={(event) => {
                     const value = ['lt','lte','gt','gte'].includes(rule?.rule) ? Number(event.target.value) : event.target.value
@@ -1106,7 +1126,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
               </div>
               <div className="md:col-span-4">
                 <Input
-                  placeholder="Error message"
+                  placeholder={t('entities.customFields.editor.ruleErrorMessagePlaceholder', 'Error message')}
                   value={rule?.message || ''}
                   onChange={(event) => {
                     const message = event.target.value
@@ -1124,7 +1144,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                 <IconButton
                   variant="outline"
                   size="sm"
-                  aria-label="Remove rule"
+                  aria-label={t('entities.customFields.editor.removeRule', 'Remove rule')}
                   onClick={() => {
                     apply((current) => {
                       const list = Array.isArray(current.configJson?.validation) ? [...current.configJson.validation] : []
@@ -1139,7 +1159,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
             </div>
           ))}
           {(!Array.isArray(local.configJson?.validation) || local.configJson!.validation.length === 0) && (
-            <div className="text-xs text-muted-foreground">No validation rules defined.</div>
+            <div className="text-xs text-muted-foreground">{t('entities.customFields.editor.noValidationRules', 'No validation rules defined.')}</div>
           )}
         </div>
       </div>
@@ -1303,11 +1323,11 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
     >
       <DialogContent className="max-w-sm">
         <DialogHeader>
-          <DialogTitle>Add option</DialogTitle>
-          <DialogDescription>Provide the stored value and optional label shown to users.</DialogDescription>
+          <DialogTitle>{t('entities.customFields.editor.addOption', 'Add option')}</DialogTitle>
+          <DialogDescription>{t('entities.customFields.editor.addOptionDescription', 'Provide the stored value and optional label shown to users.')}</DialogDescription>
         </DialogHeader>
         <div className="space-y-4 py-2">
-          <FormField label="Value" error={optionFormError ?? undefined}>
+          <FormField label={t('entities.customFields.editor.value', 'Value')} error={optionFormError ?? undefined}>
             <Input
               inputClassName="font-mono"
               placeholder="unique_value"
@@ -1318,9 +1338,9 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
               }}
             />
           </FormField>
-          <FormField label="Label">
+          <FormField label={t('entities.customFields.editor.label', 'Label')}>
             <Input
-              placeholder="Label shown to users (optional)"
+              placeholder={t('entities.customFields.editor.optionLabelPlaceholder', 'Label shown to users (optional)')}
               value={optionLabelDraft}
               onChange={(event) => setOptionLabelDraft(event.target.value)}
             />
@@ -1328,10 +1348,10 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
         </div>
         <DialogFooter>
           <Button variant="outline" size="sm" onClick={handleCloseOptionDialog}>
-            Cancel
+            {t('entities.customFields.editor.cancel', 'Cancel')}
           </Button>
           <Button size="sm" onClick={handleAddOption}>
-            Add option
+            {t('entities.customFields.editor.addOption', 'Add option')}
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -1349,13 +1369,19 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
     >
       <DialogContent className="max-w-md">
         <DialogHeader>
-          <DialogTitle>{editingGroupCode ? 'Edit group' : 'New group'}</DialogTitle>
+          <DialogTitle>
+            {editingGroupCode
+              ? t('entities.customFields.editor.editGroup', 'Edit group')
+              : t('entities.customFields.editor.newGroup', 'New group')}
+          </DialogTitle>
           <DialogDescription>
-            {editingGroupCode ? 'Update the selected group for this fieldset.' : 'Add a reusable group for this fieldset.'}
+            {editingGroupCode
+              ? t('entities.customFields.editor.editGroupDescription', 'Update the selected group for this fieldset.')
+              : t('entities.customFields.editor.newGroupDescription', 'Add a reusable group for this fieldset.')}
           </DialogDescription>
         </DialogHeader>
         <div className="space-y-3">
-          <FormField label="Group code" error={groupError ?? undefined} disabled={!!editingGroupCode}>
+          <FormField label={t('entities.customFields.editor.groupCode', 'Group code')} error={groupError ?? undefined} disabled={!!editingGroupCode}>
             <Input
               inputClassName="font-mono"
               value={groupDraft.code}
@@ -1364,26 +1390,26 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                 if (groupError) setGroupError(null)
               }}
               disabled={!!editingGroupCode}
-              placeholder="e.g. buying_committee"
+              placeholder={t('entities.customFields.editor.groupCodePlaceholder', 'e.g. buying_committee')}
             />
           </FormField>
-          <FormField label="Label">
+          <FormField label={t('entities.customFields.editor.label', 'Label')}>
             <Input
               value={groupDraft.title}
               onChange={(event) => setGroupDraft((prev) => ({ ...prev, title: event.target.value }))}
-              placeholder="Buying committee"
+              placeholder={t('entities.customFields.editor.groupLabelPlaceholder', 'Buying committee')}
             />
           </FormField>
-          <FormField label="Hint">
+          <FormField label={t('entities.customFields.editor.hint', 'Hint')}>
             <Input
               value={groupDraft.hint}
               onChange={(event) => setGroupDraft((prev) => ({ ...prev, hint: event.target.value }))}
-              placeholder="Visible to merchandisers"
+              placeholder={t('entities.customFields.editor.groupHintPlaceholder', 'Visible to merchandisers')}
             />
           </FormField>
           {currentFieldsetValue && groupOptions.length > 0 ? (
             <div>
-              <div className="text-xs font-medium mb-1">Existing groups</div>
+              <div className="text-xs font-medium mb-1">{t('entities.customFields.editor.existingGroups', 'Existing groups')}</div>
               <div className="space-y-2 max-h-40 overflow-y-auto">
                 {groupOptions.map((group) => (
                   <div key={group.code} className="flex items-center justify-between rounded border px-3 py-2 text-sm">
@@ -1400,7 +1426,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                         size="xs"
                         className="text-muted-foreground hover:text-foreground"
                         onClick={() => handleEditGroupEntry(group)}
-                        aria-label={`Edit ${group.code}`}
+                        aria-label={t('entities.customFields.editor.editGroupAria', 'Edit {code}').replace('{code}', group.code)}
                       >
                         <Pencil className="h-4 w-4" />
                       </IconButton>
@@ -1409,7 +1435,7 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
                         size="xs"
                         className="text-destructive hover:text-destructive/80"
                         onClick={() => handleRemoveGroupEntry(group.code)}
-                        aria-label={`Delete ${group.code}`}
+                        aria-label={t('entities.customFields.editor.deleteGroupAria', 'Delete {code}').replace('{code}', group.code)}
                       >
                         <Trash2 className="h-4 w-4" />
                       </IconButton>
@@ -1422,10 +1448,10 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard({
         </div>
         <DialogFooter>
           <Button variant="outline" size="sm" onClick={() => setGroupDialogOpen(false)}>
-            Cancel
+            {t('entities.customFields.editor.cancel', 'Cancel')}
           </Button>
           <Button size="sm" onClick={handleGroupDialogSubmit}>
-            Save group
+            {t('entities.customFields.editor.saveGroup', 'Save group')}
           </Button>
         </DialogFooter>
       </DialogContent>