feat: production deployment - full update with providers, admin, glossaries, pricing, tests

Major changes across backend, frontend, infrastructure:
- Provider system with model selection (Google, DeepL, OpenAI, Ollama, Google Cloud)
- Admin panel: user management, pricing, settings
- Glossary system with CSV import/export
- Subscription and tier quota management
- Security hardening (rate limiting, API key auth, path traversal fixes)
- Docker compose for dev, prod, and IONOS deployment
- Alembic migrations for new tables
- Frontend: dashboard, pricing page, landing page, i18n (en/fr)
- Test suite and verification scripts

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

frontend/src/app/dashboard/translate/FileDropZone.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { useRef } from 'react';
-import { Upload } from 'lucide-react';
+import { Upload, FileSpreadsheet, FileText, Presentation } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
 import type { UseFileUploadReturn } from './types';
 
 interface FileDropZoneProps {
@@ -11,40 +12,72 @@ interface FileDropZoneProps {
 
 export function FileDropZone({ upload }: FileDropZoneProps) {
   const inputRef = useRef<HTMLInputElement>(null);
+  const { t } = useI18n();
 
-  const handleClick = () => {
-    inputRef.current?.click();
-  };
+  const handleClick = () => inputRef.current?.click();
 
   return (
     <div
+      role="button"
+      tabIndex={0}
+      aria-label={t('dashboard.translate.dropzone.uploadAria')}
       className={cn(
-        'relative flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed px-6 py-10 transition-colors cursor-pointer',
+        'relative flex flex-col items-center justify-center gap-6 rounded-2xl border-2 border-dashed',
+        'min-h-[320px] cursor-pointer select-none transition-all duration-200 px-8 py-12',
         upload.isDragOver
-          ? 'border-primary bg-primary/5'
-          : 'border-border bg-muted/30 hover:border-muted-foreground/30'
+          ? 'border-primary bg-primary/8 scale-[1.01]'
+          : 'border-border bg-muted/20 hover:border-primary/50 hover:bg-muted/40'
       )}
       onDragOver={upload.handleDragOver}
       onDragLeave={upload.handleDragLeave}
       onDrop={upload.handleDrop}
       onClick={handleClick}
+      onKeyDown={(e) => e.key === 'Enter' || e.key === ' ' ? handleClick() : undefined}
     >
-      <div className="flex size-12 items-center justify-center rounded-xl bg-secondary">
-        <Upload className="size-5 text-muted-foreground" />
+      {/* Icon */}
+      <div className={cn(
+        'flex size-20 items-center justify-center rounded-2xl transition-colors',
+        upload.isDragOver ? 'bg-primary/15' : 'bg-secondary'
+      )}>
+        <Upload className={cn(
+          'size-9 transition-colors',
+          upload.isDragOver ? 'text-primary' : 'text-muted-foreground'
+        )} />
       </div>
-      <div className="flex flex-col items-center gap-1">
-        <p className="text-sm font-medium text-foreground">
-          Drag & drop your .xlsx, .docx, or .pptx file here
+
+      {/* Text */}
+      <div className="flex flex-col items-center gap-2 text-center">
+        <p className="text-lg font-semibold text-foreground">
+          {t('dashboard.translate.dropzone.title')}
+        </p>
+        <p className="text-sm text-muted-foreground">
+          {t('dashboard.translate.dropzone.subtitle')}
         </p>
-        <p className="text-xs text-muted-foreground">or click to browse</p>
       </div>
+
+      {/* Format badges */}
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <span className="flex items-center gap-1.5 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs font-medium text-muted-foreground">
+          <FileSpreadsheet className="size-3.5 text-green-500" />
+          Excel (.xlsx)
+        </span>
+        <span className="flex items-center gap-1.5 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs font-medium text-muted-foreground">
+          <FileText className="size-3.5 text-blue-500" />
+          Word (.docx)
+        </span>
+        <span className="flex items-center gap-1.5 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs font-medium text-muted-foreground">
+          <Presentation className="size-3.5 text-orange-500" />
+          PowerPoint (.pptx)
+        </span>
+      </div>
+
       <input
         ref={inputRef}
         type="file"
         accept=".xlsx,.docx,.pptx"
         className="hidden"
         onChange={upload.handleFileSelect}
-        aria-label="Upload file"
+        aria-label={t('dashboard.translate.dropzone.uploadAria')}
       />
     </div>
   );

frontend/src/app/dashboard/translate/LanguageSelector.tsx

@@ -8,6 +8,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { useI18n } from '@/lib/i18n';
 import type { Language } from './types';
 
 interface LanguageSelectorProps {
@@ -29,36 +30,36 @@ export function LanguageSelector({
   onSourceChange,
   onTargetChange,
 }: LanguageSelectorProps) {
+  const { t } = useI18n();
+
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-3">
       {error && (
-        <div className="flex items-center gap-2 rounded-md bg-destructive/10 px-3 py-2 text-xs text-destructive">
-          <AlertCircle className="size-3.5" />
-          <span>Failed to load languages: {error}</span>
+        <div className="flex items-center gap-2 rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
+          <AlertCircle className="size-3.5 shrink-0" />
+          <span>{t('dashboard.translate.language.loadErrorPrefix')} {error}</span>
         </div>
       )}
-      <div className="flex items-center gap-3">
+
+      <div className="flex items-end gap-3">
+        {/* Source language */}
         <div className="flex flex-1 flex-col gap-1.5">
-          <label className="text-xs font-medium text-muted-foreground">
-            Source Language
+          <label className="text-sm font-medium text-foreground">
+            {t('dashboard.translate.language.source')}
           </label>
-          <Select 
-            value={sourceLang} 
-            onValueChange={onSourceChange}
-            disabled={isLoading}
-          >
-            <SelectTrigger className="w-full">
+          <Select value={sourceLang} onValueChange={onSourceChange} disabled={isLoading}>
+            <SelectTrigger className="h-11 w-full">
               {isLoading ? (
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 text-muted-foreground">
                   <Loader2 className="size-3.5 animate-spin" />
-                  <span className="text-muted-foreground">Loading...</span>
+                  <span>{t('dashboard.translate.language.loading')}</span>
                 </div>
               ) : (
-                <SelectValue placeholder="Auto-detect" />
+                <SelectValue placeholder={t('dashboard.translate.language.autoDetect')} />
               )}
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="auto">Auto-detect</SelectItem>
+              <SelectItem value="auto">{t('dashboard.translate.language.autoDetect')}</SelectItem>
               {languages.map((lang) => (
                 <SelectItem key={lang.code} value={lang.code}>
                   {lang.name}
@@ -68,25 +69,25 @@ export function LanguageSelector({
           </Select>
         </div>
 
-        <ArrowRight className="mt-5 size-4 shrink-0 text-muted-foreground" />
+        {/* Arrow — flips in RTL via rtl: variant */}
+        <div className="mb-2 flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+          <ArrowRight className="size-4 rtl:rotate-180" />
+        </div>
 
+        {/* Target language */}
         <div className="flex flex-1 flex-col gap-1.5">
-          <label className="text-xs font-medium text-muted-foreground">
-            Target Language
+          <label className="text-sm font-medium text-foreground">
+            {t('dashboard.translate.language.target')}
           </label>
-          <Select 
-            value={targetLang} 
-            onValueChange={onTargetChange}
-            disabled={isLoading}
-          >
-            <SelectTrigger className="w-full">
+          <Select value={targetLang} onValueChange={onTargetChange} disabled={isLoading}>
+            <SelectTrigger className="h-11 w-full">
               {isLoading ? (
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 text-muted-foreground">
                   <Loader2 className="size-3.5 animate-spin" />
-                  <span className="text-muted-foreground">Loading...</span>
+                  <span>{t('dashboard.translate.language.loading')}</span>
                 </div>
               ) : (
-                <SelectValue placeholder="Select language" />
+                <SelectValue placeholder={t('dashboard.translate.language.selectPlaceholder')} />
               )}
             </SelectTrigger>
             <SelectContent>

frontend/src/app/dashboard/translate/ProviderSelector.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { Loader2, CheckCircle2, Lock } from 'lucide-react';
+import { Loader2, CheckCircle2, Lock, Sparkles } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
 import type { Provider, AvailableProvider } from './types';
 
 interface ProviderSelectorProps {
@@ -19,20 +20,21 @@ export function ProviderSelector({
   isLoadingProviders,
   isPro,
 }: ProviderSelectorProps) {
+  const { t } = useI18n();
+
   if (isLoadingProviders) {
     return (
-      <div className="flex items-center gap-2 text-xs text-muted-foreground">
-        <Loader2 className="size-3.5 animate-spin" />
-        <span>Loading providers…</span>
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Loader2 className="size-4 animate-spin" />
+        <span>{t('dashboard.translate.provider.loading')}</span>
       </div>
     );
   }
 
   if (availableProviders.length === 0) {
     return (
-      <p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700">
-        No providers are configured. Ask your administrator to enable at least one in the
-        admin settings.
+      <p className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-800/50 dark:bg-amber-950/30 dark:text-amber-400">
+        {t('dashboard.translate.provider.noneConfigured')}
       </p>
     );
   }
@@ -49,60 +51,86 @@ export function ProviderSelector({
         disabled={locked}
         onClick={() => !locked && onProviderChange(p.id)}
         className={cn(
-          'flex w-full items-center justify-between rounded-lg border px-3 py-2.5 text-left text-sm transition-colors',
+          'flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-start transition-all duration-150',
           isSelected
-            ? 'border-primary bg-primary/5 text-primary'
+            ? 'border-primary bg-primary/8 ring-1 ring-primary/30'
             : locked
-            ? 'cursor-not-allowed border-border/40 bg-muted/30 text-muted-foreground'
-            : 'border-border/60 bg-background hover:border-primary/40 hover:bg-muted/40'
+            ? 'cursor-not-allowed border-border/40 bg-muted/20 opacity-60'
+            : 'border-border/60 bg-background hover:border-primary/40 hover:bg-muted/30 active:scale-[0.99]'
         )}
       >
-        <div className="flex flex-col">
-          <span className="font-medium leading-tight">{p.label}</span>
-          <span className="text-xs text-muted-foreground">{p.description}</span>
+        {/* Selection indicator */}
+        <div className={cn(
+          'flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors',
+          isSelected ? 'border-primary bg-primary' : 'border-border/60'
+        )}>
+          {isSelected && <div className="size-2 rounded-full bg-primary-foreground" />}
+        </div>
+
+        {/* Label + description */}
+        <div className="flex flex-1 flex-col gap-0.5 min-w-0">
+          <span className={cn(
+            'text-sm font-medium leading-tight',
+            isSelected ? 'text-primary' : locked ? 'text-muted-foreground' : 'text-foreground'
+          )}>
+            {p.label}
+          </span>
+          <span className="text-xs text-muted-foreground leading-snug">
+            {p.description}
+          </span>
           {p.mode === 'llm' && p.model && (
-            <span className="mt-0.5 text-[10px] font-mono text-muted-foreground/80" title="Modèle configuré par l'admin">
-              Modèle : {p.model}
+            <span className="mt-0.5 text-[10px] font-mono text-muted-foreground/70">
+              {t('dashboard.translate.provider.modelTitle')} {p.model}
             </span>
           )}
         </div>
+
+        {/* Right badge */}
         {locked ? (
-          <Lock className="size-3.5 shrink-0 text-muted-foreground/60" />
+          <Lock className="size-4 shrink-0 text-muted-foreground/50" />
         ) : isSelected ? (
-          <CheckCircle2 className="size-4 shrink-0 text-primary" />
+          <CheckCircle2 className="size-5 shrink-0 text-primary" />
         ) : null}
       </button>
     );
   };
 
   return (
-    <div className="space-y-3">
-      <p className="text-xs font-medium text-muted-foreground">Translation Provider</p>
+    <div className="flex flex-col gap-3">
+      <p className="text-sm font-medium text-foreground">
+        {t('dashboard.translate.provider.sectionTitle')}
+      </p>
 
-      {/* Classic providers — available to everyone */}
+      {/* Classic providers */}
       {classicProviders.length > 0 && (
-        <div className="space-y-1.5">
+        <div className="flex flex-col gap-2">
           {classicProviders.map((p) => renderCard(p, false))}
         </div>
       )}
 
       {/* LLM providers — Pro only */}
       {llmProviders.length > 0 && (
-        <div className="space-y-1.5">
+        <div className="flex flex-col gap-2">
           <div className="flex items-center gap-2">
             <div className="h-px flex-1 bg-border/50" />
-            <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-              LLM · Context-Aware {!isPro && '· Pro'}
+            <span className="flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+              <Sparkles className="size-3" />
+              {t('dashboard.translate.provider.llmDivider')}
+              {!isPro && (
+                <span className="ms-1 rounded bg-primary/10 px-1 py-0.5 text-primary">
+                  {t('dashboard.translate.provider.llmDividerPro')}
+                </span>
+              )}
             </span>
             <div className="h-px flex-1 bg-border/50" />
           </div>
           {llmProviders.map((p) => renderCard(p, !isPro))}
           {!isPro && (
-            <p className="text-xs text-muted-foreground">
-              <a href="/pricing" className="text-primary hover:underline">
-                Upgrade to Pro
+            <p className="text-xs text-muted-foreground text-center">
+              <a href="/pricing" className="text-primary hover:underline font-medium">
+                {t('dashboard.translate.provider.upgrade')}
               </a>{' '}
-              to use LLM-powered translation.
+              {t('dashboard.translate.provider.upgradeSuffix')}
             </p>
           )}
         </div>

frontend/src/app/dashboard/translate/TranslationComplete.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
-import { CheckCircle, Download, Plus, Loader2 } from 'lucide-react';
-import { Card, CardContent } from '@/components/ui/card';
+import { CheckCircle2, Download, Plus, Loader2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useNotification } from '@/components/ui/notification';
+import { useI18n } from '@/lib/i18n';
+import { API_BASE } from '@/lib/config';
 
 interface TranslationCompleteProps {
   jobId: string;
@@ -12,8 +13,6 @@ interface TranslationCompleteProps {
   onNewTranslation: () => void;
 }
 
-const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
-
 export function TranslationComplete({
   jobId,
   fileName,
@@ -21,133 +20,126 @@ export function TranslationComplete({
 }: TranslationCompleteProps) {
   const [isDownloading, setIsDownloading] = useState(false);
   const { success, error } = useNotification();
+  const { t } = useI18n();
   const blobUrlRef = useRef<string | null>(null);
 
   const handleDownload = async () => {
     setIsDownloading(true);
-
     try {
       const token = localStorage.getItem('token');
       const headers: Record<string, string> = {};
-      if (token) {
-        headers['Authorization'] = `Bearer ${token}`;
-      }
+      if (token) headers['Authorization'] = `Bearer ${token}`;
 
       const response = await fetch(`${API_BASE}/api/v1/download/${jobId}`, { headers });
 
       if (!response.ok) {
-        let errorMessage = 'Download failed';
+        let msg = t('dashboard.translate.complete.toastFailDesc');
         try {
-          const errorData = await response.json();
-          errorMessage = errorData.message || errorData.error || errorMessage;
-        } catch {
-          // Response not JSON
-        }
-        throw new Error(errorMessage);
+          const body = await response.json();
+          msg = body.message || body.error || msg;
+        } catch { /* not JSON */ }
+        throw new Error(msg);
       }
 
       const contentDisposition = response.headers.get('Content-Disposition');
       let downloadFilename = 'translated_document';
-      
       if (contentDisposition) {
-        const filenameMatch = contentDisposition.match(/filename\*?=['"]?(?:UTF-\d['"]*)?([^;\r\n"']+)/i);
-        if (filenameMatch && filenameMatch[1]) {
-          downloadFilename = filenameMatch[1];
-        }
+        const match = contentDisposition.match(/filename\*?=['"]?(?:UTF-\d['"]*)?([^;\r\n"']+)/i);
+        if (match?.[1]) downloadFilename = match[1];
       } else if (fileName) {
         const ext = fileName.split('.').pop() || '';
-        const baseName = fileName.replace(/\.[^.]+$/, '');
-        downloadFilename = `${baseName}_translated.${ext}`;
+        const base = fileName.replace(/\.[^.]+$/, '');
+        downloadFilename = `${base}_translated.${ext}`;
       }
 
       const blob = await response.blob();
       const url = URL.createObjectURL(blob);
       blobUrlRef.current = url;
-      
+
       const a = document.createElement('a');
       a.href = url;
       a.download = downloadFilename;
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
-      
+
       setTimeout(() => {
-        if (blobUrlRef.current) {
-          URL.revokeObjectURL(blobUrlRef.current);
-          blobUrlRef.current = null;
-        }
+        if (blobUrlRef.current) { URL.revokeObjectURL(blobUrlRef.current); blobUrlRef.current = null; }
       }, 1000);
 
       success({
-        title: 'Download Complete',
-        description: `${downloadFilename} has been downloaded successfully.`,
+        title: t('dashboard.translate.complete.toastOkTitle'),
+        description: t('dashboard.translate.complete.toastOkDesc', { name: downloadFilename }),
       });
     } catch (err) {
       error({
-        title: 'Download Failed',
-        description: err instanceof Error ? err.message : 'Failed to download the translated file.',
+        title: t('dashboard.translate.complete.toastFailTitle'),
+        description: err instanceof Error ? err.message : t('dashboard.translate.complete.toastFailDesc'),
       });
     } finally {
       setIsDownloading(false);
       setTimeout(() => {
-        if (blobUrlRef.current) {
-          URL.revokeObjectURL(blobUrlRef.current);
-          blobUrlRef.current = null;
-        }
+        if (blobUrlRef.current) { URL.revokeObjectURL(blobUrlRef.current); blobUrlRef.current = null; }
       }, 5000);
     }
   };
 
   useEffect(() => {
     return () => {
-      if (blobUrlRef.current) {
-        URL.revokeObjectURL(blobUrlRef.current);
-        blobUrlRef.current = null;
-      }
+      if (blobUrlRef.current) { URL.revokeObjectURL(blobUrlRef.current); blobUrlRef.current = null; }
     };
   }, []);
 
   return (
-    <Card className="border-success/40 bg-gradient-to-br from-success/10 to-success/5 overflow-hidden">
-      <CardContent className="p-6 text-center">
-        <div className="w-14 h-14 mx-auto mb-4 rounded-full bg-success/20 flex items-center justify-center">
-          <CheckCircle className="w-8 h-8 text-success" />
-        </div>
-        
-        <h3 className="text-lg font-semibold mb-2">Translation Complete!</h3>
-        <p className="text-sm text-muted-foreground mb-5">
-          {fileName ? `"${fileName}" has been translated successfully.` : 'Your document has been translated successfully.'}
+    <div className="flex w-full max-w-md flex-col items-center gap-8 rounded-2xl border border-border bg-card p-8 text-center shadow-sm">
+      {/* Success icon */}
+      <div className="flex size-20 items-center justify-center rounded-full bg-green-500/15">
+        <CheckCircle2 className="size-10 text-green-500" />
+      </div>
+
+      {/* Text */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-xl font-bold text-foreground">
+          {t('dashboard.translate.complete.title')}
+        </h3>
+        <p className="text-sm text-muted-foreground">
+          {fileName
+            ? t('dashboard.translate.complete.descNamed', { name: fileName })
+            : t('dashboard.translate.complete.descGeneric')}
         </p>
-        
-        <div className="flex flex-col sm:flex-row gap-3 justify-center">
-          <Button
-            onClick={handleDownload}
-            disabled={isDownloading}
-            className="gap-2"
-          >
-            {isDownloading ? (
-              <>
-                <Loader2 className="w-4 h-4 animate-spin" />
-                Downloading...
-              </>
-            ) : (
-              <>
-                <Download className="w-4 h-4" />
-                Download Translated File
-              </>
-            )}
-          </Button>
-          
-          <Button
-            variant="outline"
-            onClick={onNewTranslation}
-            className="gap-2"
-          >
-            <Plus className="w-4 h-4" />
-            New Translation
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
+      </div>
+
+      {/* Actions — stacked column so text is never cut */}
+      <div className="flex w-full flex-col gap-3">
+        <Button
+          size="lg"
+          className="h-12 w-full gap-2 text-base font-semibold"
+          onClick={handleDownload}
+          disabled={isDownloading}
+        >
+          {isDownloading ? (
+            <>
+              <Loader2 className="size-5 animate-spin" />
+              {t('dashboard.translate.complete.downloading')}
+            </>
+          ) : (
+            <>
+              <Download className="size-5" />
+              {t('dashboard.translate.complete.download')}
+            </>
+          )}
+        </Button>
+
+        <Button
+          variant="outline"
+          size="lg"
+          className="h-11 w-full gap-2"
+          onClick={onNewTranslation}
+        >
+          <Plus className="size-4" />
+          {t('dashboard.translate.complete.newTranslation')}
+        </Button>
+      </div>
+    </div>
   );
 }

frontend/src/app/dashboard/translate/TranslationProgress.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { AlertTriangle, Loader2, Clock, WifiOff } from 'lucide-react';
 import { Progress } from '@/components/ui/progress';
+import { useI18n } from '@/lib/i18n';
 
 interface TranslationProgressProps {
   progress: number;
@@ -14,15 +15,6 @@ interface TranslationProgressProps {
   isCompleted?: boolean;
 }
 
-function formatTimeRemaining(seconds: number | null): string {
-  if (seconds === null || seconds <= 0) return '';
-  if (seconds < 60) return `${seconds}s remaining`;
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = seconds % 60;
-  if (remainingSeconds === 0) return `${minutes} min remaining`;
-  return `${minutes}m ${remainingSeconds}s remaining`;
-}
-
 export function TranslationProgress({
   progress,
   currentStep,
@@ -32,8 +24,7 @@ export function TranslationProgress({
   isUploading = false,
   isCompleted = false,
 }: TranslationProgressProps) {
-  // Disable CSS transition on the very first render so that when progress
-  // resets from a previous job's 100% → 0%, there is no visible backward sweep.
+  const { t } = useI18n();
   const [animate, setAnimate] = useState(false);
   const prevProgressRef = useRef(progress);
 
@@ -41,25 +32,40 @@ export function TranslationProgress({
     if (progress > 0) {
       setAnimate(true);
     } else if (progress === 0) {
-      // Momentarily cut the transition to snap to 0, then re-enable.
       setAnimate(false);
-      const t = setTimeout(() => setAnimate(true), 50);
-      return () => clearTimeout(t);
+      const tid = setTimeout(() => setAnimate(true), 50);
+      return () => clearTimeout(tid);
     }
     prevProgressRef.current = progress;
   }, [progress]);
 
+  function formatTimeRemaining(seconds: number | null): string {
+    if (seconds === null || seconds <= 0) return '';
+    if (seconds < 60)
+      return t('dashboard.translate.progress.timeSeconds', { seconds: String(seconds) });
+    const minutes = Math.floor(seconds / 60);
+    const remaining = seconds % 60;
+    if (remaining === 0)
+      return t('dashboard.translate.progress.timeMinutes', { minutes: String(minutes) });
+    return t('dashboard.translate.progress.timeMixed', {
+      minutes: String(minutes),
+      seconds: String(remaining),
+    });
+  }
+
   if (error) {
     return (
-      <div 
-        className="rounded-lg bg-destructive/10 border border-destructive/30 p-4"
+      <div
+        className="rounded-xl bg-destructive/10 border border-destructive/20 p-5"
         role="alert"
         aria-live="assertive"
       >
         <div className="flex items-start gap-3">
-          <AlertTriangle className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" aria-hidden="true" />
+          <AlertTriangle className="size-5 text-destructive shrink-0 mt-0.5" aria-hidden />
           <div>
-            <p className="text-sm font-medium text-destructive mb-1">Translation Failed</p>
+            <p className="text-sm font-semibold text-destructive mb-1">
+              {t('dashboard.translate.progress.failedTitle')}
+            </p>
             <p className="text-sm text-destructive/80">{error}</p>
           </div>
         </div>
@@ -68,40 +74,48 @@ export function TranslationProgress({
   }
 
   const timeRemaining = formatTimeRemaining(estimatedRemaining);
-  // Only show "Connection lost" when polling was active and then stopped —
-  // never during the initial upload phase.
   const showConnectionLost = !isPolling && !isCompleted && !isUploading;
 
   return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between text-sm">
-        <span className="text-muted-foreground flex items-center gap-2">
-          <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
-          {currentStep || 'Processing...'}
-        </span>
-        <span className="text-primary font-medium tabular-nums" aria-live="polite">
-          {Math.round(progress)}%
-        </span>
+    <div className="flex flex-col items-center gap-6 py-4">
+      {/* Animated spinner */}
+      <div className="flex size-16 items-center justify-center rounded-full bg-primary/10">
+        <Loader2 className="size-8 animate-spin text-primary" aria-hidden />
       </div>
-      <Progress
-        value={progress}
-        animate={animate}
-        className="h-2"
-        aria-label="Translation progress"
-        aria-valuenow={Math.round(progress)}
-        aria-valuemin={0}
-        aria-valuemax={100}
-      />
+
+      {/* Status text */}
+      <div className="flex flex-col items-center gap-1 text-center">
+        <p className="text-base font-medium text-foreground">
+          {currentStep || t('dashboard.translate.progress.processingFallback')}
+        </p>
+        {timeRemaining && (
+          <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
+            <Clock className="size-3.5" aria-hidden />
+            {timeRemaining}
+          </p>
+        )}
+      </div>
+
+      {/* Progress bar + percentage */}
+      <div className="w-full max-w-md space-y-2">
+        <Progress
+          value={progress}
+          animate={animate}
+          className="h-3 rounded-full"
+          aria-label={t('dashboard.translate.progress.ariaProgress')}
+          aria-valuenow={Math.round(progress)}
+          aria-valuemin={0}
+          aria-valuemax={100}
+        />
+        <p className="text-end text-sm font-semibold tabular-nums text-primary" aria-live="polite">
+          {Math.round(progress)} %
+        </p>
+      </div>
+
       {showConnectionLost && (
-        <div className="flex items-center gap-2 text-xs text-amber-600">
-          <WifiOff className="h-3 w-3" aria-hidden="true" />
-          <span>Connection lost. Retrying...</span>
-        </div>
-      )}
-      {timeRemaining && (
-        <div className="flex items-center gap-2 text-xs text-muted-foreground">
-          <Clock className="h-3 w-3" aria-hidden="true" />
-          <span>{timeRemaining}</span>
+        <div className="flex items-center gap-2 text-xs text-amber-600 dark:text-amber-400">
+          <WifiOff className="size-3.5" aria-hidden />
+          <span>{t('dashboard.translate.progress.connectionLost')}</span>
         </div>
       )}
     </div>

frontend/src/app/dashboard/translate/page.tsx

@@ -1,11 +1,20 @@
 'use client';
 
 import { useEffect, useRef } from 'react';
-import { Languages, ShieldCheck, Clock, ArrowRight, RotateCcw, Loader2 } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import {
+  ShieldCheck,
+  Clock,
+  ArrowRight,
+  RotateCcw,
+  Loader2,
+  FileSpreadsheet,
+  FileText,
+  Presentation,
+  Upload,
+  X,
+} from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { FileDropZone } from './FileDropZone';
-import { FilePreview } from './FilePreview';
 import { useFileUpload } from './useFileUpload';
 import { useTranslationConfig } from './useTranslationConfig';
 import { useTranslationSubmit } from './useTranslationSubmit';
@@ -14,187 +23,290 @@ import { ProviderSelector } from './ProviderSelector';
 import { TranslationProgress } from './TranslationProgress';
 import { TranslationComplete } from './TranslationComplete';
 import { useNotification } from '@/components/ui/notification';
+import { useI18n } from '@/lib/i18n';
 
+/* ── helpers ─────────────────────────────────────────────────────── */
+const FILE_ICONS: Record<string, React.ElementType> = {
+  xlsx: FileSpreadsheet,
+  docx: FileText,
+  pptx: Presentation,
+};
+const FILE_COLORS: Record<string, string> = {
+  xlsx: 'text-green-500',
+  docx: 'text-blue-500',
+  pptx: 'text-orange-500',
+};
+
+function fmt(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+
+/* ── Compact file strip ──────────────────────────────────────────── */
+function FileStrip({
+  file,
+  onRemove,
+  onReplace,
+}: {
+  file: File;
+  onRemove: () => void;
+  onReplace: () => void;
+}) {
+  const { t } = useI18n();
+  const ext = file.name.split('.').pop()?.toLowerCase() ?? '';
+  const FileIcon = FILE_ICONS[ext] ?? FileText;
+  const color = FILE_COLORS[ext] ?? 'text-muted-foreground';
+
+  return (
+    <div className="flex items-center gap-3 rounded-xl border border-border bg-muted/30 px-4 py-3">
+      <FileIcon className={`size-5 shrink-0 ${color}`} />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <span className="truncate text-sm font-semibold text-foreground">{file.name}</span>
+        <span className="text-xs text-muted-foreground">{fmt(file.size)} · .{ext.toUpperCase()}</span>
+      </div>
+      <button
+        type="button"
+        onClick={onReplace}
+        className="flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground transition hover:bg-secondary hover:text-foreground"
+      >
+        <Upload className="size-3.5" />
+        {t('dashboard.translate.dropzone.replaceFile')}
+      </button>
+      <button
+        type="button"
+        aria-label="Remove"
+        onClick={onRemove}
+        className="flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition hover:bg-secondary hover:text-foreground"
+      >
+        <X className="size-4" />
+      </button>
+    </div>
+  );
+}
+
+/* ── Trust row ───────────────────────────────────────────────────── */
+function TrustRow() {
+  const { t } = useI18n();
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-4 text-xs text-muted-foreground">
+      <span className="flex items-center gap-1.5">
+        <ShieldCheck className="size-3.5" />
+        {t('dashboard.translate.trust.zeroRetention')}
+      </span>
+      <span className="h-3 w-px bg-border" aria-hidden />
+      <span className="flex items-center gap-1.5">
+        <Clock className="size-3.5" />
+        {t('dashboard.translate.trust.deletedAfter')}
+      </span>
+    </div>
+  );
+}
+
+/* ── Page ────────────────────────────────────────────────────────── */
 export default function TranslatePage() {
   const upload = useFileUpload();
   const config = useTranslationConfig(!!upload.file);
   const submit = useTranslationSubmit();
   const { error: showError } = useNotification();
+  const { t } = useI18n();
   const lastErrorRef = useRef<string | null>(null);
+  const replaceInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (submit.error && submit.error !== lastErrorRef.current) {
+      lastErrorRef.current = submit.error;
+      showError({
+        title: t('dashboard.translate.errorNotificationTitle'),
+        description: submit.error,
+      });
+    }
+  }, [submit.error, showError, t]);
 
   const handleTranslate = async () => {
     if (!upload.file || !config.isConfigValid) return;
     await submit.submitTranslation(upload.file, config.getConfig());
   };
 
-  useEffect(() => {
-    if (submit.error && submit.error !== lastErrorRef.current) {
-      lastErrorRef.current = submit.error;
-      showError({
-        title: 'Translation Error',
-        description: submit.error,
-      });
-    }
-  }, [submit.error, showError]);
-
   const handleNewTranslation = () => {
     submit.reset();
     upload.removeFile();
   };
 
-  const isConfiguring = upload.file && submit.status === 'idle' && !submit.isSubmitting;
-  const isProcessing = (submit.status === 'processing' || submit.isSubmitting) && submit.status !== 'completed';
+  const isConfiguring = !!upload.file && submit.status === 'idle' && !submit.isSubmitting;
+  const isProcessing =
+    (submit.status === 'processing' || submit.isSubmitting) && submit.status !== 'completed';
   const isCompleted = submit.status === 'completed';
   const isFailed = submit.status === 'failed';
 
-  return (
-    <div className="mx-auto max-w-xl px-4 py-6 lg:px-8">
-      <Card className="border-border/70 shadow-lg">
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <Languages className="size-5" />
-            Office Translator
-          </CardTitle>
-          <CardDescription>
-            Upload an Excel, Word, or PowerPoint file to translate
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-4">
-          {upload.file && !isProcessing && !isCompleted && (
-            <div className="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-success/40 bg-success/5 px-6 py-4">
-              <FilePreview file={upload.file} onRemove={upload.removeFile} />
-            </div>
-          )}
-
-          {!upload.file && !isProcessing && !isCompleted && (
-            <FileDropZone upload={upload} />
-          )}
-
-          {upload.error && !isProcessing && !isCompleted && (
-            <p className="text-sm text-destructive">{upload.error}</p>
-          )}
-
-          {isConfiguring && (
-            <>
-              <div className="my-2 flex items-center gap-2">
-                <div className="h-px flex-1 bg-border" />
-                <span className="text-xs text-muted-foreground">Configuration</span>
-                <div className="h-px flex-1 bg-border" />
-              </div>
-
-              <LanguageSelector
-                sourceLang={config.sourceLang}
-                targetLang={config.targetLang}
-                languages={config.languages}
-                isLoading={config.isLoadingLanguages}
-                error={config.languagesError}
-                onSourceChange={config.setSourceLang}
-                onTargetChange={config.setTargetLang}
-              />
-
-              <ProviderSelector
-                provider={config.provider}
-                onProviderChange={config.setProvider}
-                availableProviders={config.availableProviders}
-                isLoadingProviders={config.isLoadingProviders}
-                isPro={config.isPro}
-              />
-
-              <Button
-                size="lg"
-                className="w-full text-sm font-semibold"
-                disabled={!config.isConfigValid || submit.isSubmitting}
-                onClick={handleTranslate}
-              >
-                {submit.isSubmitting ? (
-                  <>
-                    <Loader2 className="mr-2 size-4 animate-spin" />
-                    Uploading...
-                  </>
-                ) : (
-                  <>
-                    Translate Document
-                    <ArrowRight className="ml-2 size-4" />
-                  </>
-                )}
-              </Button>
-            </>
-          )}
-
-          {isProcessing && !isCompleted && (
-            <>
-              <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
-                <span>File: {submit.fileName || upload.file?.name}</span>
-              </div>
-              <TranslationProgress
-                progress={submit.progress}
-                currentStep={submit.currentStep || (submit.isSubmitting ? 'Uploading file...' : 'Starting translation...')}
-                estimatedRemaining={submit.estimatedRemaining}
-                error={null}
-                isPolling={submit.isPolling}
-                isUploading={submit.isSubmitting}
-                isCompleted={false}
-              />
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleNewTranslation}
-                className="w-full mt-2"
-              >
-                <RotateCcw className="mr-2 size-4" />
-                Cancel
-              </Button>
-            </>
-          )}
-
-          {isCompleted && submit.jobId && (
-            <TranslationComplete
-              jobId={submit.jobId}
-              fileName={submit.fileName}
-              onNewTranslation={handleNewTranslation}
-            />
-          )}
-
-          {isFailed && (
-            <>
-              <TranslationProgress
-                progress={submit.progress}
-                currentStep={submit.currentStep}
-                estimatedRemaining={submit.estimatedRemaining}
-                error={submit.error}
-                isPolling={false}
-                isCompleted={false}
-              />
-              <Button
-                variant="outline"
-                onClick={handleNewTranslation}
-                className="w-full mt-2"
-              >
-                <RotateCcw className="mr-2 size-4" />
-                Try Again
-              </Button>
-            </>
-          )}
-
-          {!upload.file && !isProcessing && !isCompleted && !isFailed && (
-            <p className="text-xs text-muted-foreground">
-              Supported formats: Excel (.xlsx), Word (.docx), PowerPoint (.pptx)
-            </p>
-          )}
-        </CardContent>
-      </Card>
-
-      <div className="flex items-center justify-center gap-4 mt-4 text-xs text-muted-foreground">
-        <div className="flex items-center gap-1.5">
-          <ShieldCheck className="size-3.5" />
-          <span>Zero Data Retention</span>
+  /* ── STATE: No file ─────────────────────────────────────────────── */
+  if (!upload.file && !isProcessing && !isCompleted && !isFailed) {
+    return (
+      <div className="flex h-full flex-col gap-6 overflow-y-auto p-6 lg:p-8">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight text-foreground">
+            {t('dashboard.translate.pageTitle')}
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            {t('dashboard.translate.pageSubtitle')}
+          </p>
         </div>
-        <div className="h-3 w-px bg-border" />
-        <div className="flex items-center gap-1.5">
-          <Clock className="size-3.5" />
-          <span>Files deleted after 60 min</span>
+        <div className="flex flex-1 flex-col">
+          <FileDropZone upload={upload} />
+          {upload.error && <p className="mt-2 text-sm text-destructive">{upload.error}</p>}
+        </div>
+        <TrustRow />
+      </div>
+    );
+  }
+
+  /* ── STATE: Configure — single column, full width ───────────────── */
+  if (isConfiguring) {
+    return (
+      <div className="flex h-full flex-col overflow-y-auto">
+        {/* Scrollable content */}
+        <div className="flex flex-1 flex-col gap-6 p-6 lg:p-8">
+          {/* Page title */}
+          <div>
+            <h1 className="text-xl font-bold tracking-tight text-foreground">
+              {t('dashboard.translate.pageTitle')}
+            </h1>
+          </div>
+
+          {/* File strip */}
+          <FileStrip
+            file={upload.file!}
+            onRemove={upload.removeFile}
+            onReplace={() => replaceInputRef.current?.click()}
+          />
+          <input
+            ref={replaceInputRef}
+            type="file"
+            accept=".xlsx,.docx,.pptx"
+            className="hidden"
+            onChange={upload.handleFileSelect}
+          />
+          {upload.error && <p className="text-sm text-destructive">{upload.error}</p>}
+
+          {/* Language selector — full width */}
+          <LanguageSelector
+            sourceLang={config.sourceLang}
+            targetLang={config.targetLang}
+            languages={config.languages}
+            isLoading={config.isLoadingLanguages}
+            error={config.languagesError}
+            onSourceChange={config.setSourceLang}
+            onTargetChange={config.setTargetLang}
+          />
+
+          {/* Provider selector — full width */}
+          <ProviderSelector
+            provider={config.provider}
+            onProviderChange={config.setProvider}
+            availableProviders={config.availableProviders}
+            isLoadingProviders={config.isLoadingProviders}
+            isPro={config.isPro}
+          />
+        </div>
+
+        {/* Sticky bottom bar: button + trust */}
+        <div className="shrink-0 border-t border-border/50 bg-background px-6 py-4 lg:px-8">
+          <Button
+            size="lg"
+            className="h-13 w-full gap-2 text-base font-semibold"
+            disabled={!config.isConfigValid || submit.isSubmitting}
+            onClick={handleTranslate}
+          >
+            {submit.isSubmitting ? (
+              <>
+                <Loader2 className="size-5 animate-spin" />
+                {t('dashboard.translate.actions.uploading')}
+              </>
+            ) : (
+              <>
+                {t('dashboard.translate.actions.translate')}
+                <ArrowRight className="size-5 rtl:rotate-180" />
+              </>
+            )}
+          </Button>
+          <div className="mt-3">
+            <TrustRow />
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  }
+
+  /* ── STATE: Processing ──────────────────────────────────────────── */
+  if (isProcessing) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-6 overflow-y-auto p-6">
+        {(submit.fileName || upload.file?.name) && (
+          <p className="text-sm text-muted-foreground">
+            {t('dashboard.translate.actions.filePrefix')}{' '}
+            <span className="font-medium text-foreground">
+              {submit.fileName || upload.file?.name}
+            </span>
+          </p>
+        )}
+        <div className="w-full max-w-md">
+          <TranslationProgress
+            progress={submit.progress}
+            currentStep={
+              submit.currentStep ||
+              (submit.isSubmitting
+                ? t('dashboard.translate.steps.uploading')
+                : t('dashboard.translate.steps.starting'))
+            }
+            estimatedRemaining={submit.estimatedRemaining}
+            error={null}
+            isPolling={submit.isPolling}
+            isUploading={submit.isSubmitting}
+            isCompleted={false}
+          />
+        </div>
+        <Button variant="outline" size="lg" onClick={handleNewTranslation} className="gap-2">
+          <RotateCcw className="size-4" />
+          {t('dashboard.translate.actions.cancel')}
+        </Button>
+      </div>
+    );
+  }
+
+  /* ── STATE: Complete ────────────────────────────────────────────── */
+  if (isCompleted && submit.jobId) {
+    return (
+      <div className="flex h-full items-center justify-center overflow-y-auto p-6">
+        <TranslationComplete
+          jobId={submit.jobId}
+          fileName={submit.fileName}
+          onNewTranslation={handleNewTranslation}
+        />
+      </div>
+    );
+  }
+
+  /* ── STATE: Failed ──────────────────────────────────────────────── */
+  if (isFailed) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-6 overflow-y-auto p-6">
+        <div className="w-full max-w-md">
+          <TranslationProgress
+            progress={submit.progress}
+            currentStep={submit.currentStep}
+            estimatedRemaining={submit.estimatedRemaining}
+            error={submit.error}
+            isPolling={false}
+            isCompleted={false}
+          />
+        </div>
+        <Button variant="outline" size="lg" onClick={handleNewTranslation} className="gap-2">
+          <RotateCcw className="size-4" />
+          {t('dashboard.translate.actions.tryAgain')}
+        </Button>
+      </div>
+    );
+  }
+
+  return null;
 }

frontend/src/app/dashboard/translate/useTranslationConfig.ts

@@ -9,9 +9,7 @@ import type {
   TranslationConfig,
   AvailableProvider,
 } from './types';
-
-
-const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+import { API_BASE } from '@/lib/config';
 
 /** Fallback when API fails — Google is always available server-side */
 const FALLBACK_PROVIDERS: AvailableProvider[] = [

frontend/src/app/dashboard/translate/useTranslationSubmit.ts

@@ -8,8 +8,7 @@ import type {
   TranslationSubmitResponse,
   TranslationStatusResponse 
 } from './types';
-
-const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+import { API_BASE } from '@/lib/config';
 const POLLING_INTERVAL_MS = 2000;
 const MAX_POLLING_FAILURES = 3;
 
@@ -58,6 +57,7 @@ export function useTranslationSubmit(): UseTranslationSubmitReturn {
       if (!response.ok) {
         if (response.status === 404) {
           stopPolling();
+          setIsSubmitting(false);
           setStatus('failed');
           setError('Translation job not found');
           return;
@@ -81,6 +81,7 @@ export function useTranslationSubmit(): UseTranslationSubmitReturn {
 
       if (job.status === 'completed' || job.status === 'failed') {
         stopPolling();
+        setIsSubmitting(false);
         if (job.status === 'failed') {
           setError(job.error_message || 'Translation failed');
         }
@@ -92,6 +93,7 @@ export function useTranslationSubmit(): UseTranslationSubmitReturn {
       
       if (pollingFailuresRef.current >= MAX_POLLING_FAILURES) {
         stopPolling();
+        setIsSubmitting(false);
         setStatus('failed');
         setError('Lost connection to translation service. Please check your internet connection and try again.');
       }