Localize shared modal, overlay and deployment-progress components.

Localize the confirm modal, delete button, deleting overlays/modal, the
build-progress modal, deployment progress bar/manager and the resource
upgrade modal via a shared components dictionary. Build-phase labels now
resolve from the dictionary; deleting overlays take name/kind and build
their own localized message (callers updated).

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

frontend/src/app/[lang]/dashboard/admin/apps/page.tsx

@@ -12,7 +12,6 @@ import { DeleteButtonLabel } from '@/components/delete-button-label';
 import {
   DeletingCardOverlay,
   DeletingTableRowOverlay,
-  deletingResourceMessage,
   deletingRowContentClass,
 } from '@/components/deleting-overlay';
 import { TruncatedText } from '@/components/truncated-text';
@@ -442,7 +441,8 @@ export default function AdminAppsPage() {
                       {rowDeleting && (
                         <DeletingTableRowOverlay
                           colSpan={8}
-                          message={deletingResourceMessage('application', app.name)}
+                          name={app.name}
+                          kind="application"
                         />
                       )}
                     </tr>
@@ -467,7 +467,7 @@ export default function AdminAppsPage() {
                   className={`relative card space-y-3 ${lifecycle === 'suspended' ? 'border-amber-200/80' : lifecycle === 'pending_deletion' ? 'border-red-200/80' : ''} ${cardDeleting ? 'bg-gray-50' : ''}`}
                 >
                   {cardDeleting && (
-                    <DeletingCardOverlay message={deletingResourceMessage('application', app.name)} />
+                    <DeletingCardOverlay name={app.name} kind="application" />
                   )}
                   <div className={cardDeleting ? deletingRowContentClass : undefined}>
                   <div className="flex items-start justify-between gap-3">

frontend/src/app/[lang]/dashboard/apps/page.tsx

@@ -11,7 +11,6 @@ import { useConfirm } from '@/components/confirm-modal';
 import { DeleteButtonLabel } from '@/components/delete-button-label';
 import {
   DeletingTableRowOverlay,
-  deletingResourceMessage,
   deletingRowContentClass,
 } from '@/components/deleting-overlay';
 import { filterApplications } from '@/lib/product-type';
@@ -203,7 +202,8 @@ export default function AppsPage() {
                       {rowDeleting && (
                         <DeletingTableRowOverlay
                           colSpan={6}
-                          message={deletingResourceMessage('application', app.name)}
+                          name={app.name}
+                          kind="application"
                         />
                       )}
                     </tr>

frontend/src/app/[lang]/dashboard/services/page.tsx

@@ -12,7 +12,6 @@ import { useConfirm } from '@/components/confirm-modal';
 import { DeleteButtonLabel } from '@/components/delete-button-label';
 import {
   DeletingCardOverlay,
-  deletingResourceMessage,
   deletingRowContentClass,
 } from '@/components/deleting-overlay';
 import { filterManagedServices } from '@/lib/product-type';
@@ -140,7 +139,7 @@ export default function ServicesPage() {
                 } ${lifecycle === 'pending_deletion' ? 'border-l-4 border-l-red-400' : ''} ${cardDeleting ? 'bg-gray-50' : ''}`}
               >
                 {cardDeleting && (
-                  <DeletingCardOverlay message={deletingResourceMessage('service', svc.name)} />
+                  <DeletingCardOverlay name={svc.name} kind="service" />
                 )}
                 <div
                   className={`flex flex-col sm:flex-row sm:items-center gap-4 flex-1 w-full min-w-0 ${cardDeleting ? deletingRowContentClass : ''}`}

frontend/src/components/build-progress-modal.tsx

@@ -4,6 +4,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
 import { Loader2, Upload, Hammer, Rocket, CheckCircle, XCircle, X, Minimize2 } from 'lucide-react';
 import { toast } from 'react-toastify';
+import { useT } from '@/i18n/I18nProvider';
+import type { Dictionary } from '@/i18n/dictionaries/fa';
 
 export interface BuildProgress {
   phase: 'uploading' | 'building' | 'deploying' | 'done' | 'failed' | 'cancelled';
@@ -19,15 +21,21 @@ function formatBytes(bytes?: number): string {
   return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
 }
 
+// Icon + colour per build phase. The human-facing label comes from the
+// dictionary (components.buildPhases), keyed by the same phase name.
 export const phaseConfig = {
-  uploading: { label: 'Uploading source to cluster', icon: Upload, bg: 'bg-blue-500' },
+  uploading: { icon: Upload, bg: 'bg-blue-500' },
-  building: { label: 'Building Docker image', icon: Hammer, bg: 'bg-amber-500' },
+  building: { icon: Hammer, bg: 'bg-amber-500' },
-  deploying: { label: 'Deploying to Kubernetes', icon: Rocket, bg: 'bg-purple-500' },
+  deploying: { icon: Rocket, bg: 'bg-purple-500' },
-  done: { label: 'Deployment complete', icon: CheckCircle, bg: 'bg-green-500' },
+  done: { icon: CheckCircle, bg: 'bg-green-500' },
-  failed: { label: 'Deployment failed', icon: XCircle, bg: 'bg-red-500' },
+  failed: { icon: XCircle, bg: 'bg-red-500' },
-  cancelled: { label: 'Deployment cancelled', icon: XCircle, bg: 'bg-gray-500' },
+  cancelled: { icon: XCircle, bg: 'bg-gray-500' },
 };
 
+export function buildPhaseLabel(phase: BuildProgress['phase'], t: Dictionary): string {
+  return (t.components.buildPhases as Record<string, string>)[phase] ?? phase;
+}
+
 export function BuildProgressModal({
   appId,
   appName,
@@ -39,18 +47,20 @@ export function BuildProgressModal({
   progress: BuildProgress;
   onMinimize: () => void;
 }) {
+  const t = useT();
+  const c = t.components;
   const queryClient = useQueryClient();
 
   const cancelMutation = useMutation({
     mutationFn: () => api.post(`/deployments/applications/${appId}/cancel`),
     onSuccess: () => {
-      toast.success('Deployment cancelled');
+      toast.success(c.deploymentCancelled);
       queryClient.invalidateQueries({ queryKey: ['application', appId] });
       queryClient.invalidateQueries({ queryKey: ['deployments', appId] });
       queryClient.invalidateQueries({ queryKey: ['build-progress', appId] });
       queryClient.invalidateQueries({ queryKey: ['applications'] });
     },
-    onError: () => toast.error('Failed to cancel deployment'),
+    onError: () => toast.error(c.cancelDeploymentFailed),
   });
 
   const cfg = phaseConfig[progress.phase];
@@ -62,14 +72,14 @@ export function BuildProgressModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
       <div className="relative bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full mx-4 space-y-5">
-        <div className="absolute top-4 right-4 flex items-center gap-1">
+        <div className="absolute top-4 right-4 rtl:right-auto rtl:left-4 flex items-center gap-1">
           {isActive && (
             <button
               type="button"
               onClick={onMinimize}
               className="p-1.5 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors"
-              aria-label="Minimize and continue in background"
+              aria-label={c.minimizeAria}
-              title="Continue in background"
+              title={c.continueInBackground}
             >
               <Minimize2 className="w-5 h-5" />
             </button>
@@ -79,8 +89,8 @@ export function BuildProgressModal({
             onClick={() => cancelMutation.mutate()}
             disabled={isCancelling || progress.phase === 'failed' || progress.phase === 'cancelled'}
             className="p-1.5 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors disabled:opacity-50"
-            aria-label="Cancel deployment"
+            aria-label={c.cancelDeploymentAria}
-            title="Cancel deployment"
+            title={c.cancelDeploymentAria}
           >
             {isCancelling ? <Loader2 className="w-5 h-5 animate-spin" /> : <X className="w-5 h-5" />}
           </button>
@@ -92,7 +102,7 @@ export function BuildProgressModal({
           ) : (
             <PhaseIcon className={`w-12 h-12 ${progress.phase === 'cancelled' ? 'text-gray-500' : 'text-red-500'} mx-auto mb-3`} />
           )}
-          <h3 className="text-lg font-semibold text-gray-900">{cfg.label}</h3>
+          <h3 className="text-lg font-semibold text-gray-900">{buildPhaseLabel(progress.phase, t)}</h3>
           {appName && <p className="text-sm font-medium text-gray-700 mt-1">{appName}</p>}
           {progress.message && (
             <p className="text-sm text-gray-500 mt-1">{progress.message}</p>
@@ -129,7 +139,7 @@ export function BuildProgressModal({
 
         {isActive && (
           <p className="text-xs text-gray-400 text-center">
-            Use minimize to keep working while deployment continues. Close (×) cancels the deployment.
+            {c.minimizeHint}
           </p>
         )}
       </div>

frontend/src/components/confirm-modal.tsx

@@ -2,6 +2,7 @@
 
 import { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';
 import { AlertTriangle, Trash2, Info, X } from 'lucide-react';
+import { useT } from '@/i18n/I18nProvider';
 
 /* ─── Types ────────────────────────────────────────────── */
 
@@ -32,6 +33,7 @@ export function useConfirm() {
 /* ─── Provider ─────────────────────────────────────────── */
 
 export function ModalProvider({ children }: { children: React.ReactNode }) {
+  const t = useT();
   const [state, setState] = useState<(ConfirmOptions & { open: boolean }) | null>(null);
   const resolveRef = useRef<((value: boolean) => void) | null>(null);
   const cancelBtnRef = useRef<HTMLButtonElement>(null);
@@ -140,13 +142,13 @@ export function ModalProvider({ children }: { children: React.ReactNode }) {
                 onClick={() => handleClose(false)}
                 className="btn-secondary"
               >
-                {state.cancelText || 'Cancel'}
+                {state.cancelText || t.common.cancel}
               </button>
               <button
                 onClick={() => handleClose(true)}
                 className={`inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-semibold text-sm transition-all duration-150 shadow-sm hover:shadow-md active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-offset-2 ${style.confirmBtn}`}
               >
-                {state.confirmText || 'Confirm'}
+                {state.confirmText || t.common.confirm}
               </button>
             </div>
           </div>

frontend/src/components/delete-button-label.tsx

@@ -1,14 +1,16 @@
 'use client';
 
 import { Clock } from 'lucide-react';
+import { useT } from '@/i18n/I18nProvider';
 
-export function DeleteButtonLabel({ loading, label = 'Delete' }: { loading?: boolean; label?: string }) {
+export function DeleteButtonLabel({ loading, label }: { loading?: boolean; label?: string }) {
+  const t = useT();
   if (loading) {
     return (
       <>
-        <Clock className="w-3 h-3 inline animate-spin" /> Deleting…
+        <Clock className="w-3 h-3 inline animate-spin" /> {t.components.deleting}
       </>
     );
   }
-  return <>{label}</>;
+  return <>{label ?? t.common.delete}</>;
 }

frontend/src/components/deleting-modal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Clock } from 'lucide-react';
+import { useT } from '@/i18n/I18nProvider';
 
 export function DeletingModal({
   open,
@@ -11,12 +12,13 @@ export function DeletingModal({
   resourceName: string;
   resourceKind?: 'application' | 'service';
 }) {
+  const t = useT();
   if (!open) return null;
 
   const detail =
     resourceKind === 'service'
-      ? 'Removing this service and its data from the cluster. This may take a minute.'
+      ? t.components.deletingModalDetailService
-      : 'Removing this application, deployments, and data from the cluster. This may take a minute.';
+      : t.components.deletingModalDetailApp;
 
   return (
     <div
@@ -31,13 +33,19 @@ export function DeletingModal({
           <Clock className="w-7 h-7 text-red-600 animate-spin" />
         </div>
         <h2 id="deleting-modal-title" className="text-lg font-semibold text-gray-900">
-          Deleting…
+          {t.components.deleting}
         </h2>
         <p className="text-sm text-gray-600">
-          <span className="font-semibold text-gray-900">{resourceName}</span> is being permanently removed.
+          {t.components.deletingModalBeingRemoved
+            .split('{name}')
+            .flatMap((part, i) =>
+              i === 0
+                ? [part]
+                : [<span key={i} className="font-semibold text-gray-900">{resourceName}</span>, part],
+            )}
         </p>
         <p className="text-xs text-gray-500">{detail}</p>
-        <p className="text-xs text-amber-700 font-medium pt-1">Please wait — do not close this page.</p>
+        <p className="text-xs text-amber-700 font-medium pt-1">{t.components.deletingModalWait}</p>
       </div>
     </div>
   );

frontend/src/components/deleting-overlay.tsx

@@ -1,15 +1,16 @@
 'use client';
 
 import { Clock } from 'lucide-react';
+import { useT } from '@/i18n/I18nProvider';
 
-export function deletingResourceMessage(
+type ResourceKind = 'application' | 'service';
-  kind: 'application' | 'service',
+
-  name?: string,
+/** Resolve the "Deleting …" message for a resource using the active dictionary. */
-): string {
+function useDeletingMessage(message: string | undefined, name: string | undefined, kind: ResourceKind) {
-  if (kind === 'service') {
+  const t = useT();
-    return name ? `Deleting “${name}”…` : 'Deleting service…';
+  if (message) return message;
-  }
+  if (name) return t.components.deletingNamed.replace('{name}', name);
-  return name ? `Deleting “${name}”…` : 'Deleting application…';
+  return kind === 'service' ? t.components.deletingService : t.components.deletingApplication;
 }
 
 /** Applied to row cells under the glass overlay so content stays visible but blurred. */
@@ -21,15 +22,21 @@ const glassPanelClass =
 
 /**
  * Glass overlay on a table row. Parent `<tr>` must be `relative`; render all `<td>` cells first,
- * then this as the last child while deleting.
+ * then this as the last child while deleting. Pass either an explicit `message`, or `name`/`kind`
+ * to have the localized message built for you.
  */
 export function DeletingTableRowOverlay({
   colSpan,
-  message = 'Deleting…',
+  message,
+  name,
+  kind = 'application',
 }: {
   colSpan: number;
   message?: string;
+  name?: string;
+  kind?: ResourceKind;
 }) {
+  const text = useDeletingMessage(message, name, kind);
   return (
     <td
       colSpan={colSpan}
@@ -39,25 +46,23 @@ export function DeletingTableRowOverlay({
     >
       <div className={glassPanelClass}>
         <Clock className="w-4 h-4 shrink-0 animate-spin text-red-600" />
-        <span>{message}</span>
+        <span>{text}</span>
       </div>
     </td>
   );
 }
 
-/** @deprecated Use DeletingTableRowOverlay on top of visible row cells */
-export function DeletingTableRowCell({
-  colSpan,
-  message = 'Deleting…',
-}: {
-  colSpan: number;
-  message?: string;
-}) {
-  return <DeletingTableRowOverlay colSpan={colSpan} message={message} />;
-}
-
 /** Full-card glass overlay while delete is in progress. Parent must be `relative`. */
-export function DeletingCardOverlay({ message = 'Deleting…' }: { message?: string }) {
+export function DeletingCardOverlay({
+  message,
+  name,
+  kind = 'application',
+}: {
+  message?: string;
+  name?: string;
+  kind?: ResourceKind;
+}) {
+  const text = useDeletingMessage(message, name, kind);
   return (
     <div
       className="absolute inset-0 z-20 flex items-center justify-center gap-2 rounded-xl bg-white/45 backdrop-blur-md text-sm font-semibold text-gray-900 ring-1 ring-inset ring-white/50"
@@ -65,7 +70,7 @@ export function DeletingCardOverlay({ message = 'Deleting…' }: { message?: str
       aria-busy="true"
     >
       <Clock className="w-4 h-4 shrink-0 animate-spin text-red-600" />
-      <span>{message}</span>
+      <span>{text}</span>
     </div>
   );
 }

frontend/src/components/deployment-progress-bar.tsx

@@ -4,7 +4,8 @@ import { useState, useEffect } from 'react';
 import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
 import type { Application } from '@/types';
 import type { BuildProgress } from '@/components/build-progress-modal';
-import { phaseConfig } from '@/components/build-progress-modal';
+import { buildPhaseLabel } from '@/components/build-progress-modal';
+import { useT } from '@/i18n/I18nProvider';
 
 type DeployingApp = {
   app: Application;
@@ -18,6 +19,7 @@ export function DeploymentProgressBar({
   items: DeployingApp[];
   onExpand: (appId: string) => void;
 }) {
+  const t = useT();
   const [index, setIndex] = useState(0);
 
   useEffect(() => {
@@ -29,7 +31,6 @@ export function DeploymentProgressBar({
   const current = items[index];
   const progress = current.progress;
   const phase = progress?.phase ?? 'building';
-  const cfg = phaseConfig[phase] ?? phaseConfig.building;
   const percent = progress?.percent ?? 0;
   const multiple = items.length > 1;
 
@@ -48,7 +49,7 @@ export function DeploymentProgressBar({
         }
       }}
       className="w-full bg-primary-600 text-white text-left hover:bg-primary-700 transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:ring-offset-2"
-      aria-label={`View deployment progress for ${current.app.name}`}
+      aria-label={t.components.viewProgressFor.replace('{name}', current.app.name)}
     >
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5 flex items-center gap-3">
         {multiple && (
@@ -59,7 +60,7 @@ export function DeploymentProgressBar({
               goPrev();
             }}
             className="p-1 rounded-lg hover:bg-white/15 shrink-0"
-            aria-label="Previous deployment"
+            aria-label={t.components.prevDeployment}
           >
             <ChevronLeft className="w-4 h-4" />
           </button>
@@ -77,7 +78,7 @@ export function DeploymentProgressBar({
             )}
           </span>
           <span className="text-xs text-primary-100 truncate block">
-            {cfg.label}
+            {buildPhaseLabel(phase, t)}
             {progress?.message ? ` · ${progress.message}` : ''}
           </span>
         </span>
@@ -99,7 +100,7 @@ export function DeploymentProgressBar({
               goNext();
             }}
             className="p-1 rounded-lg hover:bg-white/15 shrink-0"
-            aria-label="Next deployment"
+            aria-label={t.components.nextDeployment}
           >
             <ChevronRight className="w-4 h-4" />
           </button>

frontend/src/components/deployment-progress-manager.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useMemo } from 'react';
 import { usePathname } from 'next/navigation';
 import { useQuery, useQueries, keepPreviousData } from '@tanstack/react-query';
+import { useT } from '@/i18n/I18nProvider';
 import api from '@/lib/api';
 import type { Application } from '@/types';
 import { useAuthStore } from '@/lib/store';
@@ -41,6 +42,7 @@ function stubAppFromTrack(appId: string, appName: string): Application {
 }
 
 export function DeploymentProgressManager() {
+  const t = useT();
   const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
   const pathname = usePathname();
   const { minimized, focusedAppId, tracked, minimize, expand, stopTracking } =
@@ -143,7 +145,7 @@ export function DeploymentProgressManager() {
 
   const focusedProgress =
     focusedItem?.progress ??
-    ({ phase: 'building', percent: 0, message: 'Starting deployment…' } satisfies BuildProgress);
+    ({ phase: 'building', percent: 0, message: t.components.startingDeployment } satisfies BuildProgress);
 
   const showModal =
     !minimized &&

frontend/src/components/resource-upgrade-confirm-modal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { AlertTriangle, CheckCircle, Clock, CreditCard, Wallet } from 'lucide-react';
+import { useT } from '@/i18n/I18nProvider';
 
 export type UpgradeCostSummary = {
   proratedAmount: number;
@@ -24,6 +25,8 @@ export function ResourceUpgradeConfirmModal({
   onCancel: () => void;
   onConfirm: () => void;
 }) {
+  const t = useT();
+  const c = t.components;
   if (!open || !upgradeCostData) return null;
 
   const needsPay = upgradeCostData.proratedAmount > 0;
@@ -33,34 +36,32 @@ export function ResourceUpgradeConfirmModal({
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
       <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 animate-fade-in">
-        <h2 className="text-xl font-bold text-gray-900 mb-2">Confirm Resource Upgrade</h2>
+        <h2 className="text-xl font-bold text-gray-900 mb-2">{c.upgradeTitle}</h2>
         <p className="text-sm text-gray-500 mb-6">
-          {needsPay
+          {needsPay ? c.upgradeNeedsPay : c.upgradeNoCost}
-            ? 'This upgrade requires payment for the remaining billing period.'
-            : 'No additional cost for this change.'}
         </p>
 
         <div className="bg-gray-50 rounded-xl p-4 mb-6 space-y-3">
           <div className="flex items-center justify-between">
-            <span className="text-sm text-gray-600">Current hourly cost</span>
+            <span className="text-sm text-gray-600">{c.currentHourlyCost}</span>
             <span className="text-sm font-medium text-gray-900">
-              {upgradeCostData.currentCost.hourly.toLocaleString()} Toman/hour
+              {c.tomanPerHour.replace('{n}', upgradeCostData.currentCost.hourly.toLocaleString('en-US'))}
             </span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-sm text-gray-600">New hourly cost</span>
+            <span className="text-sm text-gray-600">{c.newHourlyCost}</span>
             <span className="text-sm font-medium text-gray-900">
-              {upgradeCostData.newCost.hourly.toLocaleString()} Toman/hour
+              {c.tomanPerHour.replace('{n}', upgradeCostData.newCost.hourly.toLocaleString('en-US'))}
             </span>
           </div>
           <div className="flex items-center justify-between">
-            <span className="text-sm text-gray-600">Remaining hours in period</span>
+            <span className="text-sm text-gray-600">{c.remainingHoursInPeriod}</span>
-            <span className="text-sm font-medium text-gray-900">{upgradeCostData.remainingHours} hours</span>
+            <span className="text-sm font-medium text-gray-900">{c.hoursUnit.replace('{n}', String(upgradeCostData.remainingHours))}</span>
           </div>
           <div className="border-t pt-3 flex items-center justify-between">
-            <span className="text-sm font-semibold text-gray-700">Prorated amount to pay</span>
+            <span className="text-sm font-semibold text-gray-700">{c.proratedAmountToPay}</span>
             <span className="text-lg font-bold text-primary-600">
-              {upgradeCostData.proratedAmount.toLocaleString()} Toman
+              {c.tomanUnit.replace('{n}', upgradeCostData.proratedAmount.toLocaleString('en-US'))}
             </span>
           </div>
         </div>
@@ -68,20 +69,21 @@ export function ResourceUpgradeConfirmModal({
         <div className="bg-blue-50 rounded-xl p-4 mb-6 flex items-center justify-between">
           <div className="flex items-center gap-3">
             <Wallet className="w-5 h-5 text-blue-500" />
-            <span className="text-sm text-blue-700">Wallet Balance</span>
+            <span className="text-sm text-blue-700">{c.walletBalance}</span>
           </div>
           <span className="text-lg font-bold text-blue-900">
-            {walletBalance?.toLocaleString() ?? 0} Toman
+            {c.tomanUnit.replace('{n}', (walletBalance ?? 0).toLocaleString('en-US'))}
           </span>
         </div>
 
         {walletShort && (
           <div className="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4">
             <p className="text-sm text-amber-700">
-              <AlertTriangle className="w-4 h-4 inline mr-1" />
+              <AlertTriangle className="w-4 h-4 inline mr-1 rtl:mr-0 rtl:ml-1" />
-              Wallet is short by{' '}
+              {c.walletShortBy.replace(
-              {(upgradeCostData.proratedAmount - (walletBalance ?? 0)).toLocaleString()} Toman. You can pay the
+                '{n}',
-              delta by gateway on the invoice page.
+                (upgradeCostData.proratedAmount - (walletBalance ?? 0)).toLocaleString('en-US'),
+              )}
             </p>
           </div>
         )}
@@ -92,7 +94,7 @@ export function ResourceUpgradeConfirmModal({
             onClick={onCancel}
             className="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl font-medium text-gray-700 hover:bg-gray-50 transition-all"
           >
-            Cancel
+            {t.common.cancel}
           </button>
           <button
             type="button"
@@ -102,15 +104,15 @@ export function ResourceUpgradeConfirmModal({
           >
             {isPending ? (
               <>
-                <Clock className="w-4 h-4 animate-spin" /> Applying…
+                <Clock className="w-4 h-4 animate-spin" /> {c.applying}
               </>
             ) : needsPay ? (
               <>
-                <CreditCard className="w-4 h-4" /> Create Invoice & Pay
+                <CreditCard className="w-4 h-4" /> {c.createInvoicePay}
               </>
             ) : (
               <>
-                <CheckCircle className="w-4 h-4" /> Apply Changes
+                <CheckCircle className="w-4 h-4" /> {c.applyChanges}
               </>
             )}
           </button>

frontend/src/i18n/dictionaries/en.ts

@@ -136,6 +136,50 @@ const en: Dictionary = {
     },
   },
 
+  components: {
+    deleting: 'Deleting…',
+    deletingNamed: 'Deleting “{name}”…',
+    deletingService: 'Deleting service…',
+    deletingApplication: 'Deleting application…',
+    deletingModalBeingRemoved: '“{name}” is being permanently removed.',
+    deletingModalDetailApp: 'Removing this application, deployments, and data from the cluster. This may take a minute.',
+    deletingModalDetailService: 'Removing this service and its data from the cluster. This may take a minute.',
+    deletingModalWait: 'Please wait — do not close this page.',
+    buildPhases: {
+      uploading: 'Uploading source to cluster',
+      building: 'Building Docker image',
+      deploying: 'Deploying to Kubernetes',
+      done: 'Deployment complete',
+      failed: 'Deployment failed',
+      cancelled: 'Deployment cancelled',
+    },
+    startingDeployment: 'Starting deployment…',
+    deploymentCancelled: 'Deployment cancelled',
+    cancelDeploymentFailed: 'Failed to cancel deployment',
+    minimizeHint: 'Use minimize to keep working while deployment continues. Close (×) cancels the deployment.',
+    continueInBackground: 'Continue in background',
+    minimizeAria: 'Minimize and continue in background',
+    cancelDeploymentAria: 'Cancel deployment',
+    viewProgressFor: 'View deployment progress for {name}',
+    prevDeployment: 'Previous deployment',
+    nextDeployment: 'Next deployment',
+    upgradeTitle: 'Confirm Resource Upgrade',
+    upgradeNeedsPay: 'This upgrade requires payment for the remaining billing period.',
+    upgradeNoCost: 'No additional cost for this change.',
+    currentHourlyCost: 'Current hourly cost',
+    newHourlyCost: 'New hourly cost',
+    remainingHoursInPeriod: 'Remaining hours in period',
+    proratedAmountToPay: 'Prorated amount to pay',
+    walletBalance: 'Wallet Balance',
+    tomanPerHour: '{n} Toman/hour',
+    hoursUnit: '{n} hours',
+    tomanUnit: '{n} Toman',
+    walletShortBy: 'Wallet is short by {n} Toman. You can pay the delta by gateway on the invoice page.',
+    applying: 'Applying…',
+    createInvoicePay: 'Create Invoice & Pay',
+    applyChanges: 'Apply Changes',
+  },
+
   nav: {
     sectionAdmin: 'Admin',
     sectionTechnical: 'Technical',

frontend/src/i18n/dictionaries/fa.ts

@@ -135,6 +135,50 @@ const fa = {
     },
   },
 
+  components: {
+    deleting: 'در حال حذف…',
+    deletingNamed: 'در حال حذف «{name}»…',
+    deletingService: 'در حال حذف سرویس…',
+    deletingApplication: 'در حال حذف اپلیکیشن…',
+    deletingModalBeingRemoved: '«{name}» برای همیشه حذف می‌شود.',
+    deletingModalDetailApp: 'این اپلیکیشن، دیپلوی‌ها و داده‌هایش از کلاستر حذف می‌شود. ممکن است یک دقیقه طول بکشد.',
+    deletingModalDetailService: 'این سرویس و داده‌هایش از کلاستر حذف می‌شود. ممکن است یک دقیقه طول بکشد.',
+    deletingModalWait: 'لطفاً صبر کن — این صفحه را نبند.',
+    buildPhases: {
+      uploading: 'آپلود سورس به کلاستر',
+      building: 'ساخت ایمیج داکر',
+      deploying: 'انتشار روی کوبرنتیز',
+      done: 'دیپلوی کامل شد',
+      failed: 'دیپلوی ناموفق بود',
+      cancelled: 'دیپلوی لغو شد',
+    },
+    startingDeployment: 'در حال شروع دیپلوی…',
+    deploymentCancelled: 'دیپلوی لغو شد',
+    cancelDeploymentFailed: 'لغو دیپلوی ناموفق بود',
+    minimizeHint: 'برای ادامهٔ کار حین دیپلوی، کوچک کن. بستن (×) دیپلوی را لغو می‌کند.',
+    continueInBackground: 'ادامه در پس‌زمینه',
+    minimizeAria: 'کوچک کن و در پس‌زمینه ادامه بده',
+    cancelDeploymentAria: 'لغو دیپلوی',
+    viewProgressFor: 'مشاهدهٔ پیشرفت دیپلوی برای {name}',
+    prevDeployment: 'دیپلوی قبلی',
+    nextDeployment: 'دیپلوی بعدی',
+    upgradeTitle: 'تأیید ارتقای منابع',
+    upgradeNeedsPay: 'این ارتقا نیازمند پرداخت برای بازهٔ باقی‌ماندهٔ صورت‌حساب است.',
+    upgradeNoCost: 'این تغییر هزینهٔ اضافه‌ای ندارد.',
+    currentHourlyCost: 'هزینهٔ ساعتی فعلی',
+    newHourlyCost: 'هزینهٔ ساعتی جدید',
+    remainingHoursInPeriod: 'ساعت‌های باقی‌مانده در بازه',
+    proratedAmountToPay: 'مبلغ تسهیم‌شده برای پرداخت',
+    walletBalance: 'موجودی کیف‌پول',
+    tomanPerHour: '{n} تومان/ساعت',
+    hoursUnit: '{n} ساعت',
+    tomanUnit: '{n} تومان',
+    walletShortBy: 'موجودی کیف‌پول {n} تومان کم است. می‌توانی مابه‌التفاوت را از طریق درگاه در صفحهٔ فاکتور پرداخت کنی.',
+    applying: 'در حال اعمال…',
+    createInvoicePay: 'ساخت فاکتور و پرداخت',
+    applyChanges: 'اعمال تغییرات',
+  },
+
   nav: {
     sectionAdmin: 'مدیریت',
     sectionTechnical: 'فنی',