Localize shared resource-field components.

Add a components.res resource-label set and move the database workload
resources and optional-service resource-field components onto it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/components/database-workload-resources.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Database } from 'lucide-react';
+import { useT } from '@/i18n/I18nProvider';
 
 export interface DatabaseWorkloadValues {
   cpuRequest: string;
@@ -16,15 +17,16 @@ export function DatabaseWorkloadResources({
   values: DatabaseWorkloadValues;
   onChange: (patch: Partial<DatabaseWorkloadValues>) => void;
 }) {
+  const r = useT().components.res;
   return (
     <div className="p-4 bg-blue-50/50 border border-blue-200 rounded-xl space-y-4">
       <div className="flex items-center gap-2">
         <Database className="w-5 h-5 text-blue-500" />
-        <h3 className="text-sm font-semibold text-gray-800">Database resources</h3>
+        <h3 className="text-sm font-semibold text-gray-800">{r.databaseResources}</h3>
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
-          <label className="block text-xs text-gray-500 mb-1">CPU request</label>
+          <label className="block text-xs text-gray-500 mb-1">{r.cpuRequest}</label>
           <select
             className="input-field text-sm"
             value={values.cpuRequest}
@@ -37,7 +39,7 @@ export function DatabaseWorkloadResources({
           </select>
         </div>
         <div>
-          <label className="block text-xs text-gray-500 mb-1">CPU limit</label>
+          <label className="block text-xs text-gray-500 mb-1">{r.cpuLimit}</label>
           <select
             className="input-field text-sm"
             value={values.cpuLimit}
@@ -45,12 +47,12 @@ export function DatabaseWorkloadResources({
           >
             <option value="250m">250m</option>
             <option value="500m">500m</option>
-            <option value="1">1 core</option>
+            <option value="1">{r.oneCore}</option>
-            <option value="2">2 cores</option>
+            <option value="2">{r.twoCores}</option>
           </select>
         </div>
         <div>
-          <label className="block text-xs text-gray-500 mb-1">Memory request</label>
+          <label className="block text-xs text-gray-500 mb-1">{r.memoryRequest}</label>
           <select
             className="input-field text-sm"
             value={values.memoryRequest}
@@ -63,7 +65,7 @@ export function DatabaseWorkloadResources({
           </select>
         </div>
         <div>
-          <label className="block text-xs text-gray-500 mb-1">Memory limit</label>
+          <label className="block text-xs text-gray-500 mb-1">{r.memoryLimit}</label>
           <select
             className="input-field text-sm"
             value={values.memoryLimit}

frontend/src/components/optional-service-resource-fields.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Server } from 'lucide-react';
+import { useT } from '@/i18n/I18nProvider';
 import type { OptionalServiceResourceConfig } from '@/types';
 
 export function OptionalServiceResourceFields({
@@ -20,6 +21,7 @@ export function OptionalServiceResourceFields({
   readOnly?: boolean;
   onChange: (patch: Partial<OptionalServiceResourceConfig>) => void;
 }) {
+  const r = useT().components.res;
   const storageStr = String(config.storageGi);
   const setStorage = (gb: number) => onChange({ storageGi: Math.max(0, gb) });
 
@@ -31,7 +33,7 @@ export function OptionalServiceResourceFields({
       </h3>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <div>
-          <label className="block text-xs text-gray-500 mb-1">CPU limit</label>
+          <label className="block text-xs text-gray-500 mb-1">{r.cpuLimit}</label>
           <select
             className="input-field text-sm"
             disabled={readOnly}
@@ -40,12 +42,12 @@ export function OptionalServiceResourceFields({
           >
             <option value="200m">200m</option>
             <option value="500m">500m</option>
-            <option value="1">1 core</option>
+            <option value="1">{r.oneCore}</option>
-            <option value="2">2 cores</option>
+            <option value="2">{r.twoCores}</option>
           </select>
         </div>
         <div>
-          <label className="block text-xs text-gray-500 mb-1">Memory limit</label>
+          <label className="block text-xs text-gray-500 mb-1">{r.memoryLimit}</label>
           <select
             className="input-field text-sm"
             disabled={readOnly}
@@ -59,7 +61,7 @@ export function OptionalServiceResourceFields({
           </select>
         </div>
         <div className="sm:col-span-2">
-          <label className="block text-xs text-gray-500 mb-1">Storage (GB)</label>
+          <label className="block text-xs text-gray-500 mb-1">{r.storageGb}</label>
           <div className="flex items-center gap-2">
             <button
               type="button"

frontend/src/i18n/dictionaries/en.ts

@@ -178,6 +178,16 @@ const en: Dictionary = {
     applying: 'Applying…',
     createInvoicePay: 'Create Invoice & Pay',
     applyChanges: 'Apply Changes',
+    res: {
+      databaseResources: 'Database resources',
+      cpuRequest: 'CPU request',
+      cpuLimit: 'CPU limit',
+      memoryRequest: 'Memory request',
+      memoryLimit: 'Memory limit',
+      oneCore: '1 core',
+      twoCores: '2 cores',
+      storageGb: 'Storage (GB)',
+    },
   },
 
   nav: {

frontend/src/i18n/dictionaries/fa.ts

@@ -177,6 +177,16 @@ const fa = {
     applying: 'در حال اعمال…',
     createInvoicePay: 'ساخت فاکتور و پرداخت',
     applyChanges: 'اعمال تغییرات',
+    res: {
+      databaseResources: 'منابع دیتابیس',
+      cpuRequest: 'درخواست CPU',
+      cpuLimit: 'محدودیت CPU',
+      memoryRequest: 'درخواست حافظه',
+      memoryLimit: 'محدودیت حافظه',
+      oneCore: '۱ هسته',
+      twoCores: '۲ هسته',
+      storageGb: 'فضای ذخیره (GB)',
+    },
   },
 
   nav: {