@consilioweb/payload-support 0.16.0 → 1.0.0

package/src/views/TicketingSettingsView/client.tsx

@@ -179,32 +179,36 @@ async function saveSignatureToAPI(signature: string): Promise<boolean> {
   }
 }
 
-const FEATURE_LIST: FeatureConfig[] = [
-  // Core
-  { key: 'canned', label: 'Réponses rapides', description: 'Templates de réponses pré-enregistrées avec variables dynamiques', category: 'core' },
-  { key: 'scheduledReplies', label: 'Réponses programmées', description: 'Envoyer une réponse à une date/heure future', category: 'core' },
-  { key: 'activityLog', label: 'Journal d\'activité', description: 'Timeline des actions sur chaque ticket (changements de statut, assignation...)', category: 'core' },
-  // Communication
-  { key: 'emailTracking', label: 'Suivi des emails', description: 'Tracking d\'envoi et d\'ouverture des notifications email', category: 'communication' },
-  { key: 'chat', label: 'Live Chat', description: 'Chat en temps réel avec conversion en ticket', category: 'communication' },
-  { key: 'externalMessages', label: 'Messages externes', description: 'Ajouter manuellement des messages reçus par email, SMS, WhatsApp...', category: 'communication' },
-  // Productivity
-  { key: 'ai', label: 'Intelligence Artificielle', description: 'Analyse de sentiment, synthèse, suggestion de réponse, reformulation', category: 'productivity' },
-  { key: 'timeTracking', label: 'Suivi du temps', description: 'Timer, entrées manuelles, facturation', category: 'productivity' },
-{ key: 'satisfaction', label: 'Enquêtes satisfaction', description: 'Score CSAT après résolution du ticket', category: 'productivity' },
-  // Advanced
-  { key: 'merge', label: 'Fusion de tickets', description: 'Combiner deux tickets en un seul', category: 'advanced' },
-  { key: 'splitTicket', label: 'Extraction de message', description: 'Extraire un message en nouveau ticket lié', category: 'advanced' },
-  { key: 'snooze', label: 'Snooze', description: 'Masquer temporairement un ticket et rappel automatique', category: 'advanced' },
-  { key: 'clientHistory', label: 'Historique client', description: 'Tickets passés, projets et notes internes du client', category: 'advanced' },
-]
-
-const CATEGORIES = [
-  { key: 'core', label: 'Fonctionnalités de base', color: V.blue },
-  { key: 'communication', label: 'Communication', color: V.green },
-  { key: 'productivity', label: 'Productivité', color: V.amber },
-  { key: 'advanced', label: 'Avancé', color: '#7c3aed' },
-]
+function getFeatureList(t: (key: string) => string): FeatureConfig[] {
+  return [
+    // Core
+    { key: 'canned', label: t('settingsView.features.canned.label'), description: t('settingsView.features.canned.description'), category: 'core' },
+    { key: 'scheduledReplies', label: t('settingsView.features.scheduledReplies.label'), description: t('settingsView.features.scheduledReplies.description'), category: 'core' },
+    { key: 'activityLog', label: t('settingsView.features.activityLog.label'), description: t('settingsView.features.activityLog.description'), category: 'core' },
+    // Communication
+    { key: 'emailTracking', label: t('settingsView.features.emailTracking.label'), description: t('settingsView.features.emailTracking.description'), category: 'communication' },
+    { key: 'chat', label: t('settingsView.features.chat.label'), description: t('settingsView.features.chat.description'), category: 'communication' },
+    { key: 'externalMessages', label: t('settingsView.features.externalMessages.label'), description: t('settingsView.features.externalMessages.description'), category: 'communication' },
+    // Productivity
+    { key: 'ai', label: t('settingsView.features.ai.label'), description: t('settingsView.features.ai.description'), category: 'productivity' },
+    { key: 'timeTracking', label: t('settingsView.features.timeTracking.label'), description: t('settingsView.features.timeTracking.description'), category: 'productivity' },
+    { key: 'satisfaction', label: t('settingsView.features.satisfaction.label'), description: t('settingsView.features.satisfaction.description'), category: 'productivity' },
+    // Advanced
+    { key: 'merge', label: t('settingsView.features.merge.label'), description: t('settingsView.features.merge.description'), category: 'advanced' },
+    { key: 'splitTicket', label: t('settingsView.features.splitTicket.label'), description: t('settingsView.features.splitTicket.description'), category: 'advanced' },
+    { key: 'snooze', label: t('settingsView.features.snooze.label'), description: t('settingsView.features.snooze.description'), category: 'advanced' },
+    { key: 'clientHistory', label: t('settingsView.features.clientHistory.label'), description: t('settingsView.features.clientHistory.description'), category: 'advanced' },
+  ]
+}
+
+function getCategories(t: (key: string) => string) {
+  return [
+    { key: 'core', label: t('settingsView.categories.core'), color: V.blue },
+    { key: 'communication', label: t('settingsView.categories.communication'), color: V.green },
+    { key: 'productivity', label: t('settingsView.categories.productivity'), color: V.amber },
+    { key: 'advanced', label: t('settingsView.categories.advanced'), color: '#7c3aed' },
+  ]
+}
 
 /* ============================================
  * Small reusable components
@@ -295,6 +299,8 @@ const FieldRow: React.FC<{
 
 export const TicketingSettingsClient: React.FC = () => {
   const { t } = useTranslation()
+  const FEATURE_LIST = React.useMemo(() => getFeatureList(t), [t])
+  const CATEGORIES = React.useMemo(() => getCategories(t), [t])
   const [features, setFeatures] = useState<TicketingFeatures>(() => getFeatures())
   const [settings, setSettings] = useState<AllSettings>(DEFAULT_SETTINGS)
   const [signature, setSignature] = useState('')
@@ -459,16 +465,16 @@ export const TicketingSettingsClient: React.FC = () => {
        * SECTION 2 — Email Configuration
        * ======================================== */}
       <CollapsibleSection
-        title="Configuration Email"
+        title={t('settingsView.emailConfig')}
         icon={<Mail size={16} />}
         color="#ea580c"
         defaultOpen={false}
       >
         <p className={ts.sectionDescription}>
-          Parametres d&apos;envoi des notifications email. L&apos;adresse SMTP est configuree via les variables d&apos;environnement du serveur.
+          {t('settingsView.emailDescription')}
         </p>
 
-        <FieldRow label="Adresse expediteur" description="Adresse email affichee dans le champ From">
+        <FieldRow label={t('settingsView.senderAddress')} description={t('settingsView.senderAddressDesc')}>
           <input
             type="email"
             value={settings.email.fromAddress}
@@ -478,7 +484,7 @@ export const TicketingSettingsClient: React.FC = () => {
           />
         </FieldRow>
 
-        <FieldRow label="Nom expediteur" description="Nom affiche a cote de l'adresse email">
+        <FieldRow label={t('settingsView.senderName')} description={t('settingsView.senderNameDesc')}>
           <input
             type="text"
             value={settings.email.fromName}
@@ -488,7 +494,7 @@ export const TicketingSettingsClient: React.FC = () => {
           />
         </FieldRow>
 
-        <FieldRow label="Adresse Reply-To" description="Si differente de l'adresse expediteur">
+        <FieldRow label={t('settingsView.replyTo')} description={t('settingsView.replyToDesc')}>
           <input
             type="email"
             value={settings.email.replyToAddress}
@@ -500,7 +506,7 @@ export const TicketingSettingsClient: React.FC = () => {
 
         <div className={ts.separator} />
 
-        <FieldRow label="Serveur SMTP" description="Configure via variables d'environnement">
+        <FieldRow label={t('settingsView.smtpServer')} description={t('settingsView.smtpServerDesc')}>
           <input
             type="text"
             value={smtpHost}
@@ -509,7 +515,7 @@ export const TicketingSettingsClient: React.FC = () => {
           />
         </FieldRow>
 
-        <FieldRow label="Port SMTP">
+        <FieldRow label={t('settingsView.smtpPort')}>
           <input
             type="text"
             value={smtpPort}
@@ -524,22 +530,21 @@ export const TicketingSettingsClient: React.FC = () => {
        * SECTION 3 — AI Configuration
        * ======================================== */}
       <CollapsibleSection
-        title="Intelligence Artificielle"
+        title={t('settingsView.aiTitle')}
         icon={<Bot size={16} />}
         color="#7c3aed"
         defaultOpen={false}
         badge={
           features.ai
-            ? <span className={ts.badge} style={{ backgroundColor: '#dcfce7', color: '#166534' }}>Active</span>
-            : <span className={ts.badge} style={{ backgroundColor: '#fee2e2', color: '#991b1b' }}>Inactive</span>
+            ? <span className={ts.badge} style={{ backgroundColor: '#dcfce7', color: '#166534' }}>{t('settingsView.aiBadgeActive')}</span>
+            : <span className={ts.badge} style={{ backgroundColor: '#fee2e2', color: '#991b1b' }}>{t('settingsView.aiBadgeInactive')}</span>
         }
       >
         <p className={ts.sectionDescription}>
-          Configurez le fournisseur d&apos;IA et activez/désactivez chaque fonctionnalité indépendamment.
-          Les fonctionnalités IA nécessitent que le flag &quot;Intelligence Artificielle&quot; soit actif dans la section précédente.
+          {t('settingsView.aiDescription')}
         </p>
 
-        <FieldRow label="Fournisseur" description="Service d'IA utilise pour l'analyse">
+        <FieldRow label={t('settingsView.aiProvider')} description={t('settingsView.aiProviderDesc')}>
           <select
             value={settings.ai.provider}
             onChange={(e) => updateAI('provider', e.target.value as AISettings['provider'])}
@@ -553,7 +558,7 @@ export const TicketingSettingsClient: React.FC = () => {
         </FieldRow>
 
         {settings.ai.provider !== 'ollama' && (
-          <FieldRow label="Cle API" description="Cle secrete du fournisseur (non stockee en clair)">
+          <FieldRow label={t('settingsView.aiApiKey')} description={t('settingsView.aiApiKeyDesc')}>
             <div className={ts.apiKeyRow}>
               <input
                 type={showApiKey ? 'text' : 'password'}
@@ -567,13 +572,13 @@ export const TicketingSettingsClient: React.FC = () => {
                 onClick={() => setShowApiKey(!showApiKey)}
                 className={ts.apiKeyToggle}
               >
-                {showApiKey ? 'Masquer' : 'Afficher'}
+                {showApiKey ? t('settingsView.hideKey') : t('settingsView.showKey')}
               </button>
             </div>
           </FieldRow>
         )}
 
-        <FieldRow label="Modele" description="Nom du modele a utiliser">
+        <FieldRow label={t('settingsView.aiModel')} description={t('settingsView.aiModelDesc')}>
           <input
             type="text"
             value={settings.ai.model}
@@ -586,14 +591,14 @@ export const TicketingSettingsClient: React.FC = () => {
         <div className={ts.separator} />
 
         <p className={ts.aiSubFeaturesLabel}>
-          Fonctionnalités IA individuelles
+          {t('settingsView.aiSubFeatures')}
         </p>
 
         {([
-          { key: 'enableSentiment' as const, label: 'Analyse de sentiment', desc: 'Detecte le niveau de frustration ou satisfaction du client' },
-          { key: 'enableSynthesis' as const, label: 'Synthese automatique', desc: 'Resume les conversations longues en quelques phrases' },
-          { key: 'enableSuggestion' as const, label: 'Suggestion de reponse', desc: 'Propose un brouillon de reponse base sur le contexte' },
-          { key: 'enableRewrite' as const, label: 'Reformulation', desc: 'Reformule un message pour le rendre plus professionnel' },
+          { key: 'enableSentiment' as const, label: t('settingsView.aiSentiment'), desc: t('settingsView.aiSentimentDesc') },
+          { key: 'enableSynthesis' as const, label: t('settingsView.aiSynthesis'), desc: t('settingsView.aiSynthesisDesc') },
+          { key: 'enableSuggestion' as const, label: t('settingsView.aiSuggestion'), desc: t('settingsView.aiSuggestionDesc') },
+          { key: 'enableRewrite' as const, label: t('settingsView.aiRewrite'), desc: t('settingsView.aiRewriteDesc') },
         ]).map((item) => (
           <div key={item.key} className={ts.aiToggleRow}>
             <Toggle
@@ -614,16 +619,16 @@ export const TicketingSettingsClient: React.FC = () => {
        * SECTION 4 — SLA Configuration
        * ======================================== */}
       <CollapsibleSection
-        title="SLA (Accords de niveau de service)"
+        title={t('settingsView.slaTitle')}
         icon={<Clock size={16} />}
         color="#0891b2"
         defaultOpen={false}
       >
         <p className={ts.sectionDescription}>
-          Definissez les delais de reponse et de resolution attendus. Ces seuils sont utilises pour le suivi de performance et les alertes d&apos;escalade.
+          {t('settingsView.slaDescription')}
         </p>
 
-        <FieldRow label="Premiere reponse" description="Délai maximum en minutes (défaut : 120 = 2h)">
+        <FieldRow label={t('settingsView.slaFirstResponse')} description={t('settingsView.slaFirstResponseDesc')}>
           <div className={ts.slaInline}>
             <input
               type="number"
@@ -633,12 +638,12 @@ export const TicketingSettingsClient: React.FC = () => {
               className={ts.numberInput}
             />
             <span className={ts.slaHint}>
-              minutes ({Math.floor(settings.sla.firstResponseMinutes / 60)}h{String(settings.sla.firstResponseMinutes % 60).padStart(2, '0')})
+              {t('settingsView.minutes')} ({Math.floor(settings.sla.firstResponseMinutes / 60)}h{String(settings.sla.firstResponseMinutes % 60).padStart(2, '0')})
             </span>
           </div>
         </FieldRow>
 
-        <FieldRow label="Résolution" description="Délai maximum en minutes (défaut : 1440 = 24h)">
+        <FieldRow label={t('settingsView.slaResolution')} description={t('settingsView.slaResolutionDesc')}>
           <div className={ts.slaInline}>
             <input
               type="number"
@@ -648,7 +653,7 @@ export const TicketingSettingsClient: React.FC = () => {
               className={ts.numberInput}
             />
             <span className={ts.slaHint}>
-              minutes ({Math.floor(settings.sla.resolutionMinutes / 60)}h{String(settings.sla.resolutionMinutes % 60).padStart(2, '0')})
+              {t('settingsView.minutes')} ({Math.floor(settings.sla.resolutionMinutes / 60)}h{String(settings.sla.resolutionMinutes % 60).padStart(2, '0')})
             </span>
           </div>
         </FieldRow>
@@ -661,16 +666,16 @@ export const TicketingSettingsClient: React.FC = () => {
             size="sm"
           />
           <div>
-            <span className={ts.inlineLabel}>Heures ouvrables uniquement</span>
+            <span className={ts.inlineLabel}>{t('settingsView.businessHoursOnly')}</span>
             <div className={ts.inlineDesc}>
-              Le decompte SLA est suspendu en dehors des heures de bureau (Lun-Ven, 9h-18h)
+              {t('settingsView.businessHoursDesc')}
             </div>
           </div>
         </div>
 
         <div className={ts.separator} />
 
-        <FieldRow label="Email d'escalade" description="Adresse notifiee en cas de depassement SLA">
+        <FieldRow label={t('settingsView.escalationEmail')} description={t('settingsView.escalationEmailDesc')}>
           <input
             type="email"
             value={settings.sla.escalationEmail}
@@ -685,7 +690,7 @@ export const TicketingSettingsClient: React.FC = () => {
        * SECTION 5 — Auto-Close
        * ======================================== */}
       <CollapsibleSection
-        title="Fermeture automatique"
+        title={t('settingsView.autoCloseTitle')}
         icon={<Timer size={16} />}
         color="#d97706"
         defaultOpen={false}
@@ -696,8 +701,7 @@ export const TicketingSettingsClient: React.FC = () => {
         }
       >
         <p className={ts.sectionDescription}>
-          Les tickets en attente client sans reponse seront automatiquement resolus apres le delai configure.
-          Un email de rappel est envoye avant la fermeture.
+          {t('settingsView.autoCloseDescription')}
         </p>
 
         <div className={ts.toggleRow} style={{ paddingBottom: 14 }}>
@@ -707,13 +711,13 @@ export const TicketingSettingsClient: React.FC = () => {
             color="#d97706"
           />
           <span className={ts.inlineLabel}>
-            Activer la fermeture automatique
+            {t('settingsView.autoCloseEnable')}
           </span>
         </div>
 
         {settings.autoClose.enabled && (
           <>
-            <FieldRow label="Delai avant fermeture" description="Nombre de jours sans reponse du client">
+            <FieldRow label={t('settingsView.autoCloseDelay')} description={t('settingsView.autoCloseDelayDesc')}>
               <div className={ts.slaInline}>
                 <input
                   type="number"
@@ -723,11 +727,11 @@ export const TicketingSettingsClient: React.FC = () => {
                   onChange={(e) => updateAutoClose('daysBeforeClose', parseInt(e.target.value) || 7)}
                   className={ts.numberInput}
                 />
-                <span className={ts.slaHint}>jours</span>
+                <span className={ts.slaHint}>{t('settingsView.days')}</span>
               </div>
             </FieldRow>
 
-            <FieldRow label="Rappel avant fermeture" description="Email de rappel envoye X jours avant">
+            <FieldRow label={t('settingsView.autoCloseReminder')} description={t('settingsView.autoCloseReminderDesc')}>
               <div className={ts.slaInline}>
                 <input
                   type="number"
@@ -738,7 +742,7 @@ export const TicketingSettingsClient: React.FC = () => {
                   className={ts.numberInput}
                 />
                 <span className={ts.slaHint}>
-                  jours avant (rappel a J-{settings.autoClose.reminderDaysBefore})
+                  {t('settingsView.autoCloseDaysBeforeReminder', { count: String(settings.autoClose.reminderDaysBefore) })}
                 </span>
               </div>
             </FieldRow>
@@ -757,9 +761,9 @@ export const TicketingSettingsClient: React.FC = () => {
         background: 'linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%)',
         border: '1px solid #c7d2fe',
       }}>
-        <div style={{ fontWeight: 700, fontSize: 15, color: '#1e293b' }}>Mes preferences</div>
+        <div style={{ fontWeight: 700, fontSize: 15, color: '#1e293b' }}>{t('settingsView.myPreferences')}</div>
         <div style={{ fontSize: 13, color: '#64748b', marginTop: 2 }}>
-          Ces reglages sont propres a votre compte et ne s&apos;appliquent qu&apos;a vous.
+          {t('settingsView.myPreferencesDesc')}
         </div>
       </div>
 
@@ -767,23 +771,23 @@ export const TicketingSettingsClient: React.FC = () => {
        * SECTION 6 — Locale (per-user)
        * ======================================== */}
       <CollapsibleSection
-        title="Langue et localisation"
+        title={t('settingsView.localeTitle')}
         icon={<Globe size={16} />}
         color="#16a34a"
         defaultOpen={false}
       >
         <p className={ts.sectionDescription}>
-          Langue de l&apos;interface du module de support et des notifications email envoyees aux clients.
+          {t('settingsView.localeDescription')}
         </p>
 
-        <FieldRow label="Langue" description="Langue principale du module">
+        <FieldRow label={t('settingsView.language')} description={t('settingsView.languageDesc')}>
           <select
             value={settings.locale.language}
             onChange={(e) => updateLocale('language', e.target.value as 'fr' | 'en')}
             className={ts.select}
           >
-            <option value="fr">Francais</option>
-            <option value="en">English</option>
+            <option value="fr">{t('settingsView.french')}</option>
+            <option value="en">{t('settingsView.english')}</option>
           </select>
         </FieldRow>
       </CollapsibleSection>
@@ -792,51 +796,50 @@ export const TicketingSettingsClient: React.FC = () => {
        * SECTION 7 — Email Signature
        * ======================================== */}
       <CollapsibleSection
-        title="Signature email"
+        title={t('settingsView.signatureTitle')}
         icon={<FileSignature size={16} />}
         color="#6366f1"
         defaultOpen={false}
       >
         <p className={ts.sectionDescription}>
-          Signature ajoutee automatiquement en bas de chaque reponse email envoyee au client.
-          Supporte le texte brut et le HTML basique.
+          {t('settingsView.signatureDescription')}
         </p>
 
         <textarea
           value={signature}
           onChange={(e) => { setSignature(e.target.value); setSaved(false) }}
-          placeholder="Cordialement,&#10;L'equipe ConsilioWEB"
+          placeholder={t('settingsView.signaturePlaceholder')}
           rows={6}
           className={ts.signatureTextarea}
         />
       </CollapsibleSection>
 
       {/* Purge logs section */}
-      <CollapsibleSection title="Purge des logs" icon={<Settings size={18} />} color="#ef4444" defaultOpen={false}>
+      <CollapsibleSection title={t('settingsView.purgeTitle')} icon={<Settings size={18} />} color="#ef4444" defaultOpen={false}>
         <p className={ts.sectionDescription}>
-          Supprimez les anciens logs pour libérer de l&apos;espace. Cette action est irréversible.
+          {t('settingsView.purgeDescription')}
         </p>
         <div className={ts.purgeGroup}>
           {['email-logs', 'auth-logs'].map((col) => (
             <div key={col} className={ts.purgeCategory}>
               <span className={ts.purgeCategoryLabel}>
-                {col === 'email-logs' ? 'Logs Email' : 'Logs Auth'}
+                {col === 'email-logs' ? t('settingsView.purgeEmailLogs') : t('settingsView.purgeAuthLogs')}
               </span>
               <div className={ts.purgeButtons}>
                 {[
-                  { label: '7 jours', days: 7 },
-                  { label: '30 jours', days: 30 },
-                  { label: '90 jours', days: 90 },
-                  { label: 'Tout', days: 0 },
+                  { label: t('settingsView.purge7days'), days: 7 },
+                  { label: t('settingsView.purge30days'), days: 30 },
+                  { label: t('settingsView.purge90days'), days: 90 },
+                  { label: t('settingsView.purgeAllLabel'), days: 0 },
                 ].map((opt) => (
                   <button
                     key={opt.days}
                     onClick={async () => {
-                      if (!window.confirm(`Supprimer les logs ${col} de plus de ${opt.days || 'tous les'} jours ?`)) return
+                      if (!window.confirm(t('settingsView.purgeConfirm', { collection: col, days: opt.days === 0 ? t('settingsView.purgeAllLabel') : String(opt.days) }))) return
                       try {
                         const res = await fetch(`/api/support/purge-logs?collection=${col}&days=${opt.days}`, { method: 'DELETE', credentials: 'include' })
-                        if (res.ok) { const d = await res.json(); alert(`${d.purged} log(s) supprimé(s)`) }
-                      } catch { alert('Erreur') }
+                        if (res.ok) { const d = await res.json(); alert(`${d.purged} ${t('settingsView.purgeDone')}`) }
+                      } catch { alert(t('import.errorTitle')) }
                     }}
                     style={{ ...btnStyle(opt.days === 0 ? '#ef4444' : 'var(--theme-elevation-500)', { small: true }), fontSize: 11 }}
                   >
@@ -852,14 +855,14 @@ export const TicketingSettingsClient: React.FC = () => {
       {/* Bottom save bar */}
       <div className={ts.bottomBar}>
         <button onClick={handleReset} style={btnStyle('var(--theme-elevation-400)', { small: true })}>
-          Réinitialiser tout
+          {t('settingsView.resetAll')}
         </button>
         <button
           onClick={handleSave}
           disabled={saving}
           style={btnStyle(saved ? V.green : V.blue, { small: true })}
         >
-          {saving ? 'Sauvegarde...' : saved ? '\u2713 Sauvegardé' : 'Sauvegarder les modifications'}
+          {saving ? t('settingsView.saving') : saved ? t('settingsView.saved2') : t('settingsView.saveChanges')}
         </button>
       </div>
     </div>

package/src/views/TimeDashboardView/client.tsx

@@ -84,14 +84,14 @@ export const TimeDashboardClient: React.FC = () => {
     for (const entry of entries) {
       let key: string
       if (groupBy === 'day') {
-        key = entry.date ? entry.date.split('T')[0] : 'Sans date'
+        key = entry.date ? entry.date.split('T')[0] : t('timeDashboard.noDate')
       } else if (groupBy === 'week') {
         const d = new Date(entry.date)
         key = `Semaine ${getWeekNumber(d)} (${MONTHS_FR[d.getMonth()]} ${d.getFullYear()})`
       } else {
         const ticket = typeof entry.ticket === 'object' ? entry.ticket : null
         const project = ticket && typeof ticket.project === 'object' ? ticket.project : null
-        key = project?.name || 'Sans projet'
+        key = project?.name || t('billing.noProject')
       }
 
       if (!map.has(key)) map.set(key, [])

package/src/views/shared/StatusPill.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React from 'react'
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
 import s from './StatusPill.module.scss'
 
 export type TicketStatusVariant =
@@ -18,24 +19,35 @@ export interface StatusPillProps {
   className?: string
 }
 
-const VARIANT_MAP: Record<string, { cls: string; defaultLabel: string }> = {
-  open:           { cls: s.open,      defaultLabel: 'Ouvert' },
-  pending:        { cls: s.pending,   defaultLabel: 'En attente' },
-  waiting_client: { cls: s.pending,   defaultLabel: 'Attente client' },
-  resolved:       { cls: s.resolved,  defaultLabel: 'Résolu' },
-  closed:         { cls: s.neutral,   defaultLabel: 'Fermé' },
-  escalated:      { cls: s.escalated, defaultLabel: 'Escaladé' },
-  'sla-breach':   { cls: s.breach,    defaultLabel: 'SLA dépassé' },
+const VARIANT_CLS: Record<string, string> = {
+  open:           s.open,
+  pending:        s.pending,
+  waiting_client: s.pending,
+  resolved:       s.resolved,
+  closed:         s.neutral,
+  escalated:      s.escalated,
+  'sla-breach':   s.breach,
+}
+
+const STATUS_I18N_KEY: Record<string, string> = {
+  open:           'ticket.status.open',
+  pending:        'ticket.status.pending',
+  waiting_client: 'ticket.status.waitingClient',
+  resolved:       'ticket.status.resolved',
+  closed:         'ticket.status.closed',
+  escalated:      'ticket.status.escalated',
+  'sla-breach':   'ticket.status.slaBreached',
 }
 
 export const StatusPill: React.FC<StatusPillProps> = ({ status, label, className }) => {
-  const v = VARIANT_MAP[status] || VARIANT_MAP.open
-  const text = label ?? v.defaultLabel
+  const { t } = useTranslation()
+  const cls = VARIANT_CLS[status] || VARIANT_CLS.open
+  const text = label ?? (STATUS_I18N_KEY[status] ? t(STATUS_I18N_KEY[status]) : status)
   return (
     <span
-      className={[s.pill, v.cls, className].filter(Boolean).join(' ')}
+      className={[s.pill, cls, className].filter(Boolean).join(' ')}
       role="status"
-      aria-label={`Statut : ${text}`}
+      aria-label={`${t('ticket.status.label')} : ${text}`}
     >
       <span className={s.dot} aria-hidden />
       {text}

package/src/views/shared/dateLocale.ts

@@ -0,0 +1,5 @@
+/**
+ * Default date locale constant for formatting functions.
+ * Extracted from user preferences at runtime when available.
+ */
+export const DATE_LOCALE = 'fr-FR'