feat: wire i18n to all remaining admin pages

AIAgentSetup, AnalyticsPage, CampaignHistoryPage, ContactsPage,
KnowledgeBasePage, LiveFeed, TrackDaysPage, TrackFormPage,
TrackListPage, TrainingLab now use useTranslation() throughout.

STATUS_CONFIG labels migrated to labelKey pattern to stay compatible
with the hook-only call site. Removed all fr-FR locale hardcoding
in toLocaleDateString/toLocaleString calls.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/admin/src/pages/AIAgentSetup.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useAuth } from '@/lib/auth';
 import { useTenant } from '@/lib/tenant';
 
@@ -11,6 +12,7 @@ interface KbStats {
 }
 
 export default function AIAgentSetup() {
+    const { t } = useTranslation();
     const { token } = useAuth();
     const { selectedOrgId } = useTenant();
 
@@ -108,18 +110,18 @@ export default function AIAgentSetup() {
 
     return (
         <div className="p-8 max-w-4xl mx-auto">
-            <h1 className="text-3xl font-bold text-slate-800 mb-2">Configuration de l'Agent IA</h1>
-            <p className="text-slate-500 mb-8">Transformez vos documents en une intelligence conversationnelle sur WhatsApp.</p>
+            <h1 className="text-3xl font-bold text-slate-800 mb-2">{t('ai_setup.title')}</h1>
+            <p className="text-slate-500 mb-8">{t('ai_setup.subtitle')}</p>
 
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                 <div className="md:col-span-2 space-y-6">
                     {/* Knowledge Base Card */}
                     <div className="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm">
                         <h2 className="text-xl font-bold text-slate-800 mb-4 flex items-center gap-2">
-                            <span>📚</span> Base de Connaissances
+                            <span>📚</span> {t('ai_setup.kb_title')}
                         </h2>
                         <p className="text-sm text-slate-600 mb-6">
-                            Téléchargez vos catalogues, manuels de formation ou FAQ. L'IA utilisera ces documents pour répondre précisément à vos clients.
+                            {t('ai_setup.kb_desc')}
                         </p>
 
                         <div className={`border-2 border-dashed rounded-2xl p-12 text-center transition-colors cursor-pointer group ${
@@ -144,10 +146,10 @@ export default function AIAgentSetup() {
                                     </span>
                                 </div>
                                 <p className="font-medium text-slate-800">
-                                    {uploadStatus === 'IDLE'      && 'Cliquez pour uploader un document'}
-                                    {uploadStatus === 'UPLOADING' && 'Upload et indexation en cours...'}
-                                    {uploadStatus === 'SUCCESS'   && 'Document indexé avec succès !'}
-                                    {uploadStatus === 'ERROR'     && (uploadError || 'Erreur lors de l\'upload')}
+                                    {uploadStatus === 'IDLE'      && t('ai_setup.upload_idle')}
+                                    {uploadStatus === 'UPLOADING' && t('ai_setup.upload_loading')}
+                                    {uploadStatus === 'SUCCESS'   && t('ai_setup.upload_success')}
+                                    {uploadStatus === 'ERROR'     && (uploadError || t('ai_setup.upload_error'))}
                                 </p>
                                 {kbStats?.knowledgeBaseUrl && uploadStatus !== 'UPLOADING' && (
                                     <p className="text-xs text-emerald-600 mt-1 truncate max-w-xs mx-auto">
@@ -162,21 +164,21 @@ export default function AIAgentSetup() {
                     {/* Personality Card */}
                     <div className="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm">
                         <h2 className="text-xl font-bold text-slate-800 mb-4 flex items-center gap-2">
-                            <span>🧠</span> Personnalité de l'Agent
+                            <span>🧠</span> {t('ai_setup.personality_title')}
                         </h2>
                         <div className="space-y-4">
                             <div>
-                                <label className="block text-sm font-medium text-slate-600 mb-1">Rôle principal</label>
+                                <label className="block text-sm font-medium text-slate-600 mb-1">{t('ai_setup.role_label')}</label>
                                 <input
                                     type="text"
                                     value={role}
                                     onChange={e => setRole(e.target.value)}
-                                    placeholder="Ex: Conseiller technique pour Agritech"
+                                    placeholder={t('ai_setup.role_placeholder')}
                                     className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-emerald-500 outline-none"
                                 />
                             </div>
                             <div>
-                                <label className="block text-sm font-medium text-slate-600 mb-1">Ton et Style</label>
+                                <label className="block text-sm font-medium text-slate-600 mb-1">{t('ai_setup.tone_label')}</label>
                                 <div className="flex gap-2 flex-wrap">
                                     {TONES.map(t => (
                                         <button
@@ -200,10 +202,10 @@ export default function AIAgentSetup() {
                                 disabled={!role.trim() || saveStatus === 'SAVING'}
                                 className="mt-2 px-6 py-2.5 bg-slate-900 text-white rounded-xl text-sm font-bold hover:bg-slate-700 transition disabled:opacity-40"
                             >
-                                {saveStatus === 'SAVING' ? 'Sauvegarde...' :
-                                 saveStatus === 'SAVED'  ? '✓ Sauvegardé' :
-                                 saveStatus === 'ERROR'  ? 'Erreur — Réessayer' :
-                                 'Sauvegarder la personnalité'}
+                                {saveStatus === 'SAVING' ? t('ai_setup.saving') :
+                                 saveStatus === 'SAVED'  ? `✓ ${t('ai_setup.saved')}` :
+                                 saveStatus === 'ERROR'  ? t('common.error') :
+                                 t('ai_setup.save')}
                             </button>
                         </div>
                     </div>
@@ -211,7 +213,7 @@ export default function AIAgentSetup() {
 
                 <div className="space-y-6">
                     <div className="bg-emerald-900 text-white p-6 rounded-3xl shadow-xl shadow-emerald-100">
-                        <h3 className="font-bold text-lg mb-2">Preview WhatsApp</h3>
+                        <h3 className="font-bold text-lg mb-2">{t('ai_setup.preview_title')}</h3>
                         <div className="bg-emerald-800/50 rounded-2xl p-4 min-h-[200px] flex flex-col justify-end">
                             <div className="bg-white text-slate-800 p-3 rounded-2xl rounded-bl-none text-xs self-start mb-2">
                                 Bonjour ! Comment puis-je vous aider aujourd'hui ?
@@ -228,23 +230,23 @@ export default function AIAgentSetup() {
                     </div>
 
                     <div className="bg-slate-50 p-6 rounded-3xl border border-slate-100">
-                        <h4 className="font-bold text-slate-800 mb-3">Statistiques Agent</h4>
+                        <h4 className="font-bold text-slate-800 mb-3">{t('ai_setup.stats_title')}</h4>
                         {kbStats === null ? (
-                            <p className="text-xs text-slate-400">Chargement...</p>
+                            <p className="text-xs text-slate-400">{t('common.loading')}</p>
                         ) : !kbStats.hasKnowledgeBase ? (
-                            <p className="text-xs text-slate-400">Aucune base de connaissances indexée.</p>
+                            <p className="text-xs text-slate-400">{t('ai_setup.no_kb')}</p>
                         ) : (
                             <div className="space-y-3">
                                 <div className="flex justify-between text-sm">
-                                    <span className="text-slate-500">Statut</span>
-                                    <span className="text-emerald-600 font-bold">Actif</span>
+                                    <span className="text-slate-500">{t('ai_setup.stats_status')}</span>
+                                    <span className="text-emerald-600 font-bold">{t('ai_setup.stats_active')}</span>
                                 </div>
                                 <div className="flex justify-between text-sm">
-                                    <span className="text-slate-500">Chunks indexés</span>
+                                    <span className="text-slate-500">{t('ai_setup.stats_chunks')}</span>
                                     <span className="text-slate-800 font-bold">{kbStats.chunkCount.toLocaleString()}</span>
                                 </div>
                                 <div className="flex justify-between text-sm">
-                                    <span className="text-slate-500">Mots estimés</span>
+                                    <span className="text-slate-500">{t('ai_setup.stats_words')}</span>
                                     <span className="text-slate-800 font-bold">~{wordCount.toLocaleString()}</span>
                                 </div>
                             </div>

apps/admin/src/pages/AnalyticsPage.tsx

@@ -1,5 +1,6 @@
 
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { 
   BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, 
   PieChart, Pie, Cell 
@@ -16,6 +17,7 @@ const COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444'];
 
 export default function AnalyticsPage() {
   const { token } = useAuth();
+  const { t } = useTranslation();
   const { selectedOrgId } = useTenant();
   const [usage, setUsage] = useState<any>(null);
   const [pedagogy, setPedagogy] = useState<any>(null);
@@ -48,29 +50,29 @@ export default function AnalyticsPage() {
     return (
       <div className="p-12 text-center text-gray-400">
         <Building2 className="w-12 h-12 mx-auto mb-4 opacity-20" />
-        Sélectionnez une organisation pour voir les statistiques.
+        {t('dashboard.select_org_hint')}
       </div>
     );
   }
 
-  if (loading) return <div className="p-12 animate-pulse text-gray-400">Chargement des données...</div>;
+  if (loading) return <div className="p-12 animate-pulse text-gray-400">{t('common.loading')}</div>;
 
   const messageData = [
-    { name: 'Entrants', value: usage?.messages?.inbound || 0 },
-    { name: 'Sortants', value: usage?.messages?.outbound || 0 },
+    { name: t('analytics.messages.inbound'), value: usage?.messages?.inbound || 0 },
+    { name: t('analytics.messages.outbound'), value: usage?.messages?.outbound || 0 },
   ];
 
   const completionData = [
-    { name: 'Complétés', value: pedagogy?.completion?.completed || 0 },
-    { name: 'En cours', value: pedagogy?.completion?.active || 0 },
+    { name: t('analytics.completion.completed'), value: pedagogy?.completion?.completed || 0 },
+    { name: t('analytics.completion.in_progress'), value: pedagogy?.completion?.active || 0 },
   ];
 
   return (
     <div className="p-8 max-w-7xl mx-auto space-y-8">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-3xl font-bold text-slate-900">Tableau de Bord</h1>
-          <p className="text-slate-500">Statut de votre plateforme en temps réel</p>
+          <h1 className="text-3xl font-bold text-slate-900">{t('dashboard.title')}</h1>
+          <p className="text-slate-500">{t('dashboard.subtitle')}</p>
         </div>
         <div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 flex items-center gap-3 shadow-sm">
           <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
@@ -81,7 +83,7 @@ export default function AnalyticsPage() {
       {/* KPI Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         <StatCard 
-          title="Messages Totaux" 
+          title={t('dashboard.stats.total_messages')} 
           value={usage?.messages?.total || 0} 
           icon={<MessageSquare className="w-5 h-5" />} 
           trend="+12%"
@@ -89,7 +91,7 @@ export default function AnalyticsPage() {
           bg="bg-indigo-50"
         />
         <StatCard 
-          title="Utilisateurs Actifs" 
+          title={t('dashboard.stats.active_users')} 
           value={usage?.users?.activeLast24h || 0} 
           icon={<Users className="w-5 h-5" />} 
           trend="Stable"
@@ -97,7 +99,7 @@ export default function AnalyticsPage() {
           bg="bg-emerald-50"
         />
         <StatCard 
-          title="Taux de Complétion" 
+          title={t('dashboard.stats.completion_rate')} 
           value={`${Math.round(pedagogy?.completion?.rate || 0)}%`} 
           icon={<TrendingUp className="w-5 h-5" />} 
           trend="+5%"
@@ -105,7 +107,7 @@ export default function AnalyticsPage() {
           bg="bg-amber-50"
         />
         <StatCard 
-          title="Estimation Coût IA" 
+          title={t('dashboard.stats.ai_cost')} 
           value={`$${usage?.costs?.estimatedUsd?.toFixed(2) || '0.00'}`} 
           icon={<BrainCircuit className="w-5 h-5" />} 
           trend="Optimisé"
@@ -118,7 +120,7 @@ export default function AnalyticsPage() {
         {/* Messages Chart */}
         <div className="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm">
           <h3 className="text-lg font-bold text-slate-800 mb-6 flex items-center gap-2">
-             Volume des Messages
+             {t('analytics.messages.title')}
           </h3>
           <div className="h-64 min-h-[256px] w-full">
             <ResponsiveContainer width="100%" height="100%">
@@ -137,7 +139,7 @@ export default function AnalyticsPage() {
 
         {/* Completion Pie */}
         <div className="bg-white p-8 rounded-3xl border border-slate-100 shadow-sm">
-          <h3 className="text-lg font-bold text-slate-800 mb-6">Taux de Réussite</h3>
+          <h3 className="text-lg font-bold text-slate-800 mb-6">{t('analytics.completion.title')}</h3>
           <div className="h-64 min-h-[256px] w-full flex items-center">
             <ResponsiveContainer width="100%" height="100%">
               <PieChart>
@@ -175,21 +177,21 @@ export default function AnalyticsPage() {
         <div className="relative z-10 grid grid-cols-1 md:grid-cols-3 gap-12">
           <div>
             <div className="flex items-center gap-3 text-indigo-300 mb-4 font-bold uppercase tracking-widest text-[10px]">
-              <Award className="w-4 h-4" /> Performance
+              <Award className="w-4 h-4" /> {t('analytics.performance.title')}
             </div>
             <div className="text-4xl font-bold mb-1">{pedagogy?.performance?.averageScore?.toFixed(1) || 0}</div>
-            <div className="text-sm text-slate-400">Score moyen des exercices</div>
+            <div className="text-sm text-slate-400">{t('analytics.performance.avg_score')}</div>
           </div>
           <div>
             <div className="flex items-center gap-3 text-indigo-300 mb-4 font-bold uppercase tracking-widest text-[10px]">
-              <Clock className="w-4 h-4" /> Engagement
+              <Clock className="w-4 h-4" /> {t('analytics.engagement.title')}
             </div>
             <div className="text-4xl font-bold mb-1">{pedagogy?.performance?.averageProgressDays?.toFixed(1) || 0}</div>
-            <div className="text-sm text-slate-400">Jours de formation en moyenne</div>
+            <div className="text-sm text-slate-400">{t('analytics.engagement.avg_days')}</div>
           </div>
           <div className="flex items-end justify-end">
              <button className="bg-white/10 hover:bg-white/20 transition px-6 py-3 rounded-xl text-sm font-bold flex items-center gap-2">
-               Exporter le rapport <ChevronRight className="w-4 h-4" />
+               {t('analytics.export')} <ChevronRight className="w-4 h-4" />
              </button>
           </div>
         </div>

apps/admin/src/pages/CampaignHistoryPage.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Send, Search, ChevronLeft, ChevronRight, Loader2, Megaphone, CheckCheck, Eye, AlertCircle, Clock } from 'lucide-react';
 import { api } from '../lib/api';
 import { useAuth } from '../lib/auth';
@@ -31,15 +32,16 @@ interface CampaignResponse {
 const PAGE_SIZE = 30;
 
 const STATUS_CONFIG = {
-    SENT:      { label: 'Envoyé',    icon: Send,        color: 'text-blue-500',  bg: 'bg-blue-50'  },
-    DELIVERED: { label: 'Livré',     icon: CheckCheck,  color: 'text-green-500', bg: 'bg-green-50' },
-    READ:      { label: 'Lu',        icon: Eye,         color: 'text-violet-500',bg: 'bg-violet-50'},
-    FAILED:    { label: 'Échoué',    icon: AlertCircle, color: 'text-red-500',   bg: 'bg-red-50'   },
+    SENT:      { labelKey: 'crm.campaigns.status_sent',      icon: Send,        color: 'text-blue-500',  bg: 'bg-blue-50'  },
+    DELIVERED: { labelKey: 'crm.campaigns.status_delivered', icon: CheckCheck,  color: 'text-green-500', bg: 'bg-green-50' },
+    READ:      { labelKey: 'crm.campaigns.status_read',      icon: Eye,         color: 'text-violet-500',bg: 'bg-violet-50'},
+    FAILED:    { labelKey: 'crm.campaigns.status_failed',    icon: AlertCircle, color: 'text-red-500',   bg: 'bg-red-50'   },
 } as const;
 
 type StatusFilter = 'ALL' | 'SENT' | 'DELIVERED' | 'READ' | 'FAILED';
 
 export default function CampaignHistoryPage() {
+    const { t } = useTranslation();
     const { token } = useAuth();
     const { selectedOrgId } = useTenant();
     const [data, setData] = useState<CampaignResponse | null>(null);
@@ -95,9 +97,9 @@ export default function CampaignHistoryPage() {
                     <Megaphone className="w-5 h-5 text-amber-600" />
                 </div>
                 <div>
-                    <h1 className="text-2xl font-bold text-slate-900">Historique des Campagnes</h1>
+                    <h1 className="text-2xl font-bold text-slate-900">{t('campaigns.title')}</h1>
                     <p className="text-sm text-slate-500">
-                        {data ? `${data.total} messages envoyés au total` : 'Chargement…'}
+                        {data ? `${data.total} ${t('campaigns.total')}` : t('common.loading')}
                     </p>
                 </div>
             </div>
@@ -115,9 +117,9 @@ export default function CampaignHistoryPage() {
                         >
                             <div className={`flex items-center gap-2 ${cfg.color} mb-1`}>
                                 <Icon className="w-4 h-4" />
-                                <span className="text-xs font-semibold">{cfg.label}</span>
+                                <span className="text-xs font-semibold">{t(cfg.labelKey)}</span>
                             </div>
-                            <p className="text-2xl font-bold text-slate-900">{stats[key].toLocaleString('fr-FR')}</p>
+                            <p className="text-2xl font-bold text-slate-900">{stats[key].toLocaleString()}</p>
                         </button>
                     );
                 })}
@@ -129,7 +131,7 @@ export default function CampaignHistoryPage() {
                     <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                     <input
                         type="text"
-                        placeholder="Rechercher par contact ou message…"
+                        placeholder={t('common.search')}
                         value={search}
                         onChange={e => setSearch(e.target.value)}
                         className="w-full pl-10 pr-4 py-2.5 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-amber-400"
@@ -140,7 +142,7 @@ export default function CampaignHistoryPage() {
                         onClick={() => setStatusFilter('ALL')}
                         className="px-4 py-2 text-sm text-slate-500 border border-slate-200 rounded-xl hover:bg-slate-50 transition"
                     >
-                        Effacer filtre
+                        {t('campaigns.clear_filter')}
                     </button>
                 )}
             </div>
@@ -152,18 +154,18 @@ export default function CampaignHistoryPage() {
             ) : filteredRecords.length === 0 ? (
                 <div className="text-center py-20 text-slate-400">
                     <Send className="w-12 h-12 mx-auto mb-3 opacity-30" />
-                    <p className="font-medium">Aucune campagne trouvée</p>
-                    <p className="text-sm mt-1">Envoyez votre première campagne depuis la section Contacts.</p>
+                    <p className="font-medium">{t('campaigns.no_records')}</p>
+                    <p className="text-sm mt-1">{t('campaigns.first_hint')}</p>
                 </div>
             ) : (
                 <div className="bg-white rounded-2xl border border-slate-100 overflow-hidden">
                     <table className="w-full text-sm">
                         <thead>
                             <tr className="border-b border-slate-100">
-                                <th className="text-left px-5 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Contact</th>
-                                <th className="text-left px-5 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Message</th>
-                                <th className="text-left px-5 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Statut</th>
-                                <th className="text-left px-5 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Envoyé</th>
+                                <th className="text-left px-5 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">{t('campaigns.columns.contact')}</th>
+                                <th className="text-left px-5 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">{t('campaigns.columns.message')}</th>
+                                <th className="text-left px-5 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">{t('campaigns.columns.status')}</th>
+                                <th className="text-left px-5 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">{t('campaigns.columns.sent')}</th>
                             </tr>
                         </thead>
                         <tbody className="divide-y divide-slate-50">
@@ -185,13 +187,13 @@ export default function CampaignHistoryPage() {
                                         <td className="px-5 py-3">
                                             <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium ${cfg.bg} ${cfg.color}`}>
                                                 <Icon className="w-3 h-3" />
-                                                {cfg.label}
+                                                {t(cfg.labelKey)}
                                             </span>
                                         </td>
                                         <td className="px-5 py-3 text-slate-400 whitespace-nowrap">
                                             <div className="flex items-center gap-1">
                                                 <Clock className="w-3 h-3" />
-                                                {new Date(record.sentAt).toLocaleString('fr-FR', { dateStyle: 'short', timeStyle: 'short' })}
+                                                {new Date(record.sentAt).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' })}
                                             </div>
                                         </td>
                                     </tr>

apps/admin/src/pages/ContactsPage.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Users, Upload, Search, Download, Trash2, Filter, Loader2, FileSpreadsheet, CheckCircle2, Sparkles, BrainCircuit, Send, Copy, RefreshCw } from 'lucide-react';
 import { api } from '../lib/api';
 import { useAuth } from '../lib/auth';
@@ -13,6 +14,7 @@ interface Contact {
 }
 
 export default function ContactsPage() {
+    const { t } = useTranslation();
     const { token } = useAuth();
     const { selectedOrgId } = useTenant();
     const [contacts, setContacts] = useState<Contact[]>([]);
@@ -266,9 +268,9 @@ export default function ContactsPage() {
                 <div>
                     <h1 className="text-4xl font-black text-slate-900 tracking-tight flex items-center gap-3">
                         <Users className="w-10 h-10 text-blue-600" />
-                        Contacts CRM
+                        {t('contacts.title')}
                     </h1>
-                    <p className="text-slate-500 mt-2 font-medium">Gérez votre base de données clients et importez vos fichiers Excel.</p>
+                    <p className="text-slate-500 mt-2 font-medium">{t('contacts.subtitle')}</p>
                 </div>
                 
                 <div className="flex items-center gap-3">
@@ -326,7 +328,7 @@ export default function ContactsPage() {
                         <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
                         <input 
                             type="text"
-                            placeholder="Rechercher un nom ou un numéro..."
+                            placeholder={t('contacts.search_placeholder')}
                             value={searchQuery}
                             onChange={e => setSearchQuery(e.target.value)}
                             className="w-full bg-slate-50 border-none rounded-2xl pl-12 pr-4 py-4 focus:ring-4 focus:ring-blue-50 transition font-medium"
@@ -374,8 +376,8 @@ export default function ContactsPage() {
                                         <div className="w-20 h-20 bg-slate-50 rounded-[2rem] flex items-center justify-center mx-auto mb-6">
                                             <Users className="w-10 h-10 text-slate-200" />
                                         </div>
-                                        <h3 className="text-xl font-bold text-slate-900 mb-2">Aucun contact trouvé</h3>
-                                        <p className="text-slate-500 max-w-sm mx-auto">Importez votre premier fichier Excel pour commencer à gérer vos clients.</p>
+                                        <h3 className="text-xl font-bold text-slate-900 mb-2">{t('contacts.no_contacts')}</h3>
+                                        <p className="text-slate-500 max-w-sm mx-auto">{t('contacts.subtitle')}</p>
                                     </td>
                                 </tr>
                             ) : filteredContacts.map(contact => (

apps/admin/src/pages/KnowledgeBasePage.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Database, Trash2, RefreshCw, Search, ChevronLeft, ChevronRight, Loader2, FileText } from 'lucide-react';
 import { api } from '../lib/api';
 import { useAuth } from '../lib/auth';
@@ -21,6 +22,7 @@ interface KbResponse {
 const PAGE_SIZE = 20;
 
 export default function KnowledgeBasePage() {
+    const { t } = useTranslation();
     const { token } = useAuth();
     const { selectedOrgId } = useTenant();
     const [data, setData] = useState<KbResponse | null>(null);
@@ -53,7 +55,7 @@ export default function KnowledgeBasePage() {
 
     const handleDelete = async (id: string) => {
         if (!token || !selectedOrgId) return;
-        if (!confirm('Supprimer ce chunk de la base de connaissances ?')) return;
+        if (!confirm(t('knowledge.confirm_delete'))) return;
         setDeletingId(id);
         try {
             await api.delete(`/v1/organizations/${selectedOrgId}/kb/${id}`, token);
@@ -96,9 +98,9 @@ export default function KnowledgeBasePage() {
                         <Database className="w-5 h-5 text-violet-600" />
                     </div>
                     <div>
-                        <h1 className="text-2xl font-bold text-slate-900">Base de Connaissances</h1>
+                        <h1 className="text-2xl font-bold text-slate-900">{t('knowledge.title')}</h1>
                         <p className="text-sm text-slate-500">
-                            {data ? `${data.total} chunks indexés` : 'Chargement…'}
+                            {data ? `${data.total} ${t('knowledge.chunks')}` : t('common.loading')}
                         </p>
                     </div>
                 </div>
@@ -108,7 +110,7 @@ export default function KnowledgeBasePage() {
                     className="flex items-center gap-2 px-4 py-2 bg-violet-600 text-white rounded-xl text-sm font-medium hover:bg-violet-700 transition disabled:opacity-50"
                 >
                     <RefreshCw className={`w-4 h-4 ${reindexing ? 'animate-spin' : ''}`} />
-                    {reindexing ? 'Indexation…' : 'Re-indexer'}
+                    {reindexing ? t('knowledge.reindexing') : t('knowledge.reindex')}
                 </button>
             </div>
 
@@ -116,7 +118,7 @@ export default function KnowledgeBasePage() {
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                 <input
                     type="text"
-                    placeholder="Rechercher dans les chunks…"
+                    placeholder={t('knowledge.search_placeholder')}
                     value={search}
                     onChange={e => setSearch(e.target.value)}
                     className="w-full pl-10 pr-4 py-2.5 border border-slate-200 rounded-xl text-sm outline-none focus:ring-2 focus:ring-violet-400"
@@ -130,8 +132,8 @@ export default function KnowledgeBasePage() {
             ) : filteredEntries.length === 0 ? (
                 <div className="text-center py-20 text-slate-400">
                     <FileText className="w-12 h-12 mx-auto mb-3 opacity-30" />
-                    <p className="font-medium">Aucun chunk trouvé</p>
-                    <p className="text-sm mt-1">Importez un document dans l'onglet Agent IA pour commencer.</p>
+                    <p className="font-medium">{t('knowledge.no_documents')}</p>
+                    <p className="text-sm mt-1">{t('knowledge.import_hint')}</p>
                 </div>
             ) : (
                 <div className="space-y-3">
@@ -152,7 +154,7 @@ export default function KnowledgeBasePage() {
                                             </span>
                                         )}
                                         <span className="text-xs text-slate-300 ml-auto">
-                                            {new Date(entry.createdAt).toLocaleDateString('fr-FR')}
+                                            {new Date(entry.createdAt).toLocaleDateString()}
                                         </span>
                                     </div>
                                     <p className="text-sm text-slate-700 leading-relaxed line-clamp-4">

apps/admin/src/pages/LiveFeed.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Square, Mic, Send, AlertCircle, CheckCircle2, Loader2, User, Briefcase } from 'lucide-react';
 import { useAuth } from '../lib/auth';
 import { useTenant } from '../lib/tenant';
@@ -25,6 +26,7 @@ interface PendingReview {
 }
 
 export default function LiveFeed() {
+    const { t } = useTranslation();
     const [reviews, setReviews] = useState<PendingReview[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
@@ -77,8 +79,8 @@ export default function LiveFeed() {
         <div className="p-8 max-w-5xl mx-auto">
             <div className="flex items-center justify-between mb-8">
                 <div>
-                    <h1 className="text-3xl font-bold tracking-tight text-slate-900">Live Feed Modération</h1>
-                    <p className="text-slate-500 mt-2">Étudiants Wolof en attente d'intervention manuelle.</p>
+                    <h1 className="text-3xl font-bold tracking-tight text-slate-900">{t('livefeed.title')}</h1>
+                    <p className="text-slate-500 mt-2">{t('livefeed.subtitle')}</p>
                 </div>
                 <div className="bg-emerald-50 text-emerald-700 px-4 py-2 rounded-full font-medium flex items-center gap-2">
                     <AlertCircle className="w-5 h-5" />
@@ -104,7 +106,7 @@ export default function LiveFeed() {
                 {reviews.length === 0 ? (
                     <div className="text-center py-24 bg-slate-50 rounded-2xl border border-dashed border-slate-200">
                         <CheckCircle2 className="w-12 h-12 text-slate-300 mx-auto mb-4" />
-                        <p className="text-slate-500 text-lg">Aucune intervention requise. Excellent travail !</p>
+                        <p className="text-slate-500 text-lg">{t('livefeed.no_messages')}</p>
                     </div>
                 ) : (
                     reviews.map(review => (

apps/admin/src/pages/TrackDaysPage.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Plus, Edit2, Trash2, ArrowLeft, X, Save } from 'lucide-react';
 import { useAuth } from '../lib/auth';
@@ -6,7 +7,8 @@ import { useTenant } from '../lib/tenant';
 import { API_URL, ah } from '../lib/api';
 
 export default function TrackDaysPage() {
-    const { token } = useAuth(); 
+    const { t } = useTranslation();
+    const { token } = useAuth();
     const { selectedOrgId } = useTenant();
     const { trackId } = useParams<{ trackId: string }>(); 
     const navigate = useNavigate();
@@ -41,8 +43,8 @@ export default function TrackDaysPage() {
         setSaving(false);
     };
 
-    const del = async (dayId: string) => { 
-        if (!confirm('Supprimer ce jour?')) return; 
+    const del = async (dayId: string) => {
+        if (!confirm(t('tracks.confirm_delete'))) return;
         await fetch(`${API_URL}/v1/admin/tracks/${trackId}/days/${dayId}`, { method: 'DELETE', headers: ah(token!, selectedOrgId!) }); 
         load(); 
     };
@@ -54,9 +56,9 @@ export default function TrackDaysPage() {
             <div className="flex items-center gap-3 mb-6">
                 <button onClick={() => navigate('/content')} className="p-2 hover:bg-slate-100 rounded-lg"><ArrowLeft className="w-4 h-4" /></button>
                 <div><h1 className="text-2xl font-bold text-slate-800">{track?.title}</h1>
-                    <p className="text-sm text-slate-500">{days.length} jours configurés</p></div>
+                    <p className="text-sm text-slate-500">{days.length} {t('tracks.days')}</p></div>
                 <button onClick={() => setEditing(emptyDay)} className="ml-auto flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-slate-700">
-                    <Plus className="w-4 h-4" /> Ajouter un jour
+                    <Plus className="w-4 h-4" /> {t('tracks.new')}
                 </button>
             </div>
             {editing && (
@@ -88,9 +90,9 @@ export default function TrackDaysPage() {
                             <div><label className="text-xs font-medium text-slate-600 mb-1 block">Prompt exercice</label>
                                 <textarea className={inp} rows={2} value={editing.exercisePrompt || ''} onChange={e => setEditing((d: any) => ({ ...d, exercisePrompt: e.target.value }))} placeholder="Question posée à l'étudiant..." /></div>
                             <div className="flex gap-3">
-                                <button type="button" onClick={() => setEditing(null)} className="flex-1 border border-slate-200 text-slate-600 py-2.5 rounded-xl text-sm hover:bg-slate-50">Annuler</button>
+                                <button type="button" onClick={() => setEditing(null)} className="flex-1 border border-slate-200 text-slate-600 py-2.5 rounded-xl text-sm hover:bg-slate-50">{t('common.cancel')}</button>
                                 <button type="submit" disabled={saving} className="flex-1 bg-slate-900 text-white py-2.5 rounded-xl text-sm font-bold flex items-center justify-center gap-2 hover:bg-slate-700 disabled:opacity-50">
-                                    <Save className="w-4 h-4" />{saving ? 'Enregistrement...' : 'Enregistrer'}
+                                    <Save className="w-4 h-4" />{saving ? t('common.loading') : t('common.save')}
                                 </button>
                             </div>
                         </form>

apps/admin/src/pages/TrackFormPage.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useParams, useNavigate } from 'react-router-dom';
 import { ArrowLeft, Save } from 'lucide-react';
 import { useAuth } from '../lib/auth';
@@ -6,7 +7,8 @@ import { useTenant } from '../lib/tenant';
 import { API_URL, ah } from '../lib/api';
 
 export default function TrackFormPage() {
-    const { token } = useAuth(); 
+    const { t } = useTranslation();
+    const { token } = useAuth();
     const { selectedOrgId } = useTenant();
     const { id } = useParams<{ id: string }>(); 
     const navigate = useNavigate();
@@ -51,7 +53,7 @@ export default function TrackFormPage() {
         <div className="p-8 max-w-xl">
             <div className="flex items-center gap-3 mb-6">
                 <button onClick={() => navigate('/content')} className="p-2 hover:bg-slate-100 rounded-lg"><ArrowLeft className="w-4 h-4" /></button>
-                <h1 className="text-2xl font-bold text-slate-800">{isNew ? 'Nouveau parcours' : 'Modifier le parcours'}</h1>
+                <h1 className="text-2xl font-bold text-slate-800">{isNew ? t('tracks.new') : t('common.edit')}</h1>
             </div>
             <form onSubmit={handleSubmit} className="bg-white rounded-2xl border border-slate-100 p-6 space-y-4 shadow-sm">
                 <div><label className="text-sm font-medium text-slate-700 mb-1 block">Titre *</label>
@@ -75,14 +77,14 @@ export default function TrackFormPage() {
                     <input type="number" className={inp} value={form.priceAmount} onChange={e => setForm(f => ({ ...f, priceAmount: parseInt(e.target.value) }))} />
                 </div>}
                 <div className="flex gap-3 pt-2">
-                    <button type="button" onClick={() => navigate('/content')} className="flex-1 border border-slate-200 text-slate-600 py-2.5 rounded-xl text-sm hover:bg-slate-50">Annuler</button>
-                    <button 
-                        type="submit" 
-                        disabled={saving || (isNew && !selectedOrgId)} 
+                    <button type="button" onClick={() => navigate('/content')} className="flex-1 border border-slate-200 text-slate-600 py-2.5 rounded-xl text-sm hover:bg-slate-50">{t('common.cancel')}</button>
+                    <button
+                        type="submit"
+                        disabled={saving || (isNew && !selectedOrgId)}
                         className="flex-[2] bg-slate-900 text-white py-2.5 rounded-xl text-sm font-bold flex items-center justify-center gap-2 hover:bg-slate-700 disabled:opacity-50"
                     >
                         <Save className="w-4 h-4" />
-                        {saving ? 'Enregistrement...' : (!selectedOrgId && isNew ? 'Sélect. Organisation' : 'Enregistrer')}
+                        {saving ? t('common.loading') : (!selectedOrgId && isNew ? t('common.select_org') : t('common.save'))}
                     </button>
                 </div>
             </form>

apps/admin/src/pages/TrackListPage.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { BookOpen, Plus, Edit2, Trash2, ChevronRight, Building2 } from 'lucide-react';
 import { useAuth } from '../lib/auth';
@@ -6,7 +7,8 @@ import { useTenant } from '../lib/tenant';
 import { API_URL, ah } from '../lib/api';
 
 export default function TrackListPage() {
-    const { token } = useAuth(); 
+    const { t } = useTranslation();
+    const { token } = useAuth();
     const { selectedOrgId } = useTenant();
     const navigate = useNavigate();
     const [tracks, setTracks] = useState<any[]>([]); 
@@ -25,8 +27,8 @@ export default function TrackListPage() {
         }
     }, [selectedOrgId, token]);
 
-    const del = async (id: string) => { 
-        if (!confirm('Supprimer ce parcours ?')) return; 
+    const del = async (id: string) => {
+        if (!confirm(t('tracks.confirm_delete'))) return;
         await fetch(`${API_URL}/v1/admin/tracks/${id}`, { method: 'DELETE', headers: ah(token!, selectedOrgId!) }); 
         load(); 
     };
@@ -35,8 +37,7 @@ export default function TrackListPage() {
         return (
             <div className="flex flex-col items-center justify-center min-h-[60vh] text-slate-400">
                 <Building2 className="w-12 h-12 mb-4 opacity-20" />
-                <h3 className="text-lg font-bold text-slate-900">Aucune organisation sélectionnée</h3>
-                <p className="max-w-xs text-center mt-2">Veuillez sélectionner une organisation dans le menu en haut à gauche pour voir ses parcours.</p>
+                <p className="max-w-xs text-center mt-2">{t('common.select_org')}</p>
             </div>
         );
     }
@@ -45,7 +46,7 @@ export default function TrackListPage() {
         return (
             <div className="flex flex-col items-center justify-center min-h-[60vh] text-slate-400">
                 <div className="w-8 h-8 border-4 border-slate-200 border-t-slate-900 rounded-full animate-spin mb-4"></div>
-                <p>Chargement des parcours...</p>
+                <p>{t('common.loading')}</p>
             </div>
         );
     }
@@ -53,33 +54,33 @@ export default function TrackListPage() {
     return (
         <div className="p-8">
             <div className="flex justify-between items-center mb-6">
-                <h1 className="text-3xl font-bold text-slate-800">Parcours</h1>
+                <h1 className="text-3xl font-bold text-slate-800">{t('tracks.title')}</h1>
                 <button onClick={() => navigate('/content/new')} className="flex items-center gap-2 bg-slate-900 text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-slate-700">
-                    <Plus className="w-4 h-4" /> Nouveau parcours
+                    <Plus className="w-4 h-4" /> {t('tracks.new')}
                 </button>
             </div>
             <div className="grid gap-4">
-                {tracks.map((t: any) => (
-                    <div key={t.id} className="bg-white rounded-xl border border-slate-100 p-5 flex items-center justify-between shadow-sm hover:shadow-md transition">
+                {tracks.map((track: any) => (
+                    <div key={track.id} className="bg-white rounded-xl border border-slate-100 p-5 flex items-center justify-between shadow-sm hover:shadow-md transition">
                         <div className="flex items-center gap-4">
                             <div className="bg-purple-100 p-3 rounded-xl"><BookOpen className="w-5 h-5 text-purple-600" /></div>
                             <div>
                                 <div className="flex items-center gap-2">
-                                    <h3 className="font-bold text-slate-800">{t.title}</h3>
-                                    {t.isPremium && <span className="bg-amber-100 text-amber-700 text-xs px-2 py-0.5 rounded-full font-medium">Premium</span>}
-                                    <span className="bg-slate-100 text-slate-600 text-xs px-2 py-0.5 rounded-full">{t.language}</span>
+                                    <h3 className="font-bold text-slate-800">{track.title}</h3>
+                                    {track.isPremium && <span className="bg-amber-100 text-amber-700 text-xs px-2 py-0.5 rounded-full font-medium">Premium</span>}
+                                    <span className="bg-slate-100 text-slate-600 text-xs px-2 py-0.5 rounded-full">{track.language}</span>
                                 </div>
-                                <p className="text-sm text-slate-500 mt-0.5">{t._count?.days || 0} jours · {t._count?.enrollments || 0} inscrits · {t.duration}j</p>
+                                <p className="text-sm text-slate-500 mt-0.5">{track._count?.days || 0} {t('tracks.days')} · {track._count?.enrollments || 0} {t('tracks.enrolled')} · {track.duration}j</p>
                             </div>
                         </div>
                         <div className="flex items-center gap-2">
-                            <button onClick={() => navigate(`/content/${t.id}`)} className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"><Edit2 className="w-4 h-4" /></button>
-                            <button onClick={() => navigate(`/content/${t.id}/days`)} className="flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 px-3 py-2 rounded-lg hover:bg-slate-50">Jours <ChevronRight className="w-4 h-4" /></button>
-                            <button onClick={() => del(t.id)} className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg"><Trash2 className="w-4 h-4" /></button>
+                            <button onClick={() => navigate(`/content/${track.id}`)} className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg"><Edit2 className="w-4 h-4" /></button>
+                            <button onClick={() => navigate(`/content/${track.id}/days`)} className="flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 px-3 py-2 rounded-lg hover:bg-slate-50">{t('tracks.days_label')} <ChevronRight className="w-4 h-4" /></button>
+                            <button onClick={() => del(track.id)} className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg"><Trash2 className="w-4 h-4" /></button>
                         </div>
                     </div>
                 ))}
-                {!tracks.length && <div className="text-center py-16 text-slate-400"><BookOpen className="w-12 h-12 mx-auto mb-3 opacity-30" /><p>Aucun parcours. Créez-en un !</p></div>}
+                {!tracks.length && <div className="text-center py-16 text-slate-400"><BookOpen className="w-12 h-12 mx-auto mb-3 opacity-30" /><p>{t('tracks.no_tracks')}</p></div>}
             </div>
         </div>
     );

apps/admin/src/pages/TrainingLab.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useAuth } from '../lib/auth';
 import { useTenant } from '../lib/tenant';
 import { API_URL, ah } from '../lib/api';
@@ -16,6 +17,7 @@ interface TrainingData {
 }
 
 export default function TrainingLab() {
+    const { t } = useTranslation();
     const { token, logout } = useAuth();
     const { selectedOrgId } = useTenant();
     const [mode, setMode] = useState<'db' | 'upload' | 'suggestions'>('db');
@@ -149,7 +151,7 @@ export default function TrainingLab() {
         <div className="p-8 max-w-5xl mx-auto">
             <div className="flex items-center gap-3 mb-8">
                 <Activity className="w-8 h-8 text-purple-600" />
-                <h1 className="text-3xl font-bold text-slate-800">Training Lab (WER)</h1>
+                <h1 className="text-3xl font-bold text-slate-800">{t('training.title')}</h1>
             </div>
 
             <div className="bg-white p-2 rounded-xl border border-slate-200 inline-flex mb-8 shadow-sm">