@consilioweb/payload-support 0.16.0 → 1.1.0

package/src/views/TicketDetailView/client.tsx

@@ -9,138 +9,13 @@ import { CodeBlockInserter } from '../../components/TicketConversation/component
 import { getFeatures } from '../shared/config'
 import { computeSlaState, formatSlaRemaining } from '../shared/sla'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import { DATE_LOCALE } from '../shared/dateLocale'
 import s from '../../styles/TicketDetail.module.scss'
-
-interface Message {
-  id: string | number; body: string; bodyHtml?: string; authorType: 'client' | 'admin' | 'email'
-  isInternal?: boolean; isSolution?: boolean; createdAt: string; fromChat?: boolean
-  fromAlias?: string
-  attachments?: Array<{ file: { id: number; url?: string; filename?: string; mimeType?: string } | number }>
-}
-
-const ALIASES: Array<{ value: string; label: string }> = [
-  { value: 'Support Consilioweb', label: 'En tant que : Support Consilioweb' },
-  { value: 'contact@consilioweb.fr', label: 'En tant que : contact@consilioweb.fr' },
-]
-interface ClientInfo { id: number; company: string; firstName: string; lastName: string; email: string; phone?: string }
-interface TimeEntry { id: string | number; duration: number; description?: string; date: string }
-interface ActivityEntry { id: string | number; action: string; detail?: string; actorType?: string; createdAt: string }
-
-const STATUS_STYLE: Record<string, { bg: string; color: string }> = {
-  open: { bg: '#dbeafe', color: '#1e40af' },
-  waiting_client: { bg: '#fef3c7', color: '#92400e' },
-  resolved: { bg: '#dcfce7', color: '#166534' },
-}
-
-function timeAgo(d: string): string {
-  const date = new Date(d), now = new Date()
-  if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })
-  const y = new Date(now); y.setDate(y.getDate() - 1)
-  if (date.toDateString() === y.toDateString()) return `Hier, ${date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`
-  return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
-}
-
-function dateLabel(d: string): string {
-  const date = new Date(d), now = new Date()
-  if (date.toDateString() === now.toDateString()) return "Aujourd'hui"
-  const y = new Date(now); y.setDate(y.getDate() - 1)
-  if (date.toDateString() === y.toDateString()) return 'Hier'
-  return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long' })
-}
-
-// ── Rewrite style dropdown ──────────────────────────────────────────────
-const REWRITE_STYLES = [
-  { id: 'auto', label: '✏️ Auto', desc: 'Garde le ton actuel' },
-  { id: 'tutoyer', label: '👋 Tutoyer', desc: 'Passe en tu' },
-  { id: 'vouvoyer', label: '🎩 Vouvoyer', desc: 'Passe en vous' },
-  { id: 'formel', label: '💼 Formel', desc: 'Ton professionnel' },
-  { id: 'amical', label: '😊 Amical', desc: 'Ton chaleureux' },
-  { id: 'court', label: '⚡ Court', desc: 'Version concise' },
-]
-
-const RewriteDropdown: React.FC<{
-  disabled: boolean
-  loading: boolean
-  onSelect: (style: string) => void
-  toolbarBtnClass?: string
-}> = ({ disabled, loading, onSelect, toolbarBtnClass }) => {
-  const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!open) return
-    const close = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
-    }
-    document.addEventListener('mousedown', close)
-    return () => document.removeEventListener('mousedown', close)
-  }, [open])
-
-  return (
-    <div ref={ref} style={{ position: 'relative', display: 'inline-block' }}>
-      <button
-        type="button"
-        className={toolbarBtnClass}
-        onClick={() => setOpen(!open)}
-        disabled={disabled}
-        style={{ fontSize: 11, fontWeight: 700, padding: '4px 10px', width: 'auto', display: 'flex', alignItems: 'center', gap: 4 }}
-      >
-        {loading ? '...' : '✏️ Reformuler'}
-        {!loading && <span style={{ fontSize: 9, opacity: 0.6 }}>▼</span>}
-      </button>
-      {open && !disabled && !loading && (
-        <div style={{
-          position: 'absolute', bottom: '100%', left: 0, marginBottom: 4,
-          background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8,
-          boxShadow: '0 4px 16px rgba(0,0,0,0.12)', zIndex: 100, minWidth: 180, overflow: 'hidden',
-        }}>
-          {REWRITE_STYLES.map((style) => (
-            <button
-              key={style.id}
-              type="button"
-              onClick={() => { setOpen(false); onSelect(style.id) }}
-              style={{
-                display: 'flex', flexDirection: 'column', width: '100%', padding: '8px 12px',
-                border: 'none', background: 'transparent', cursor: 'pointer', textAlign: 'left',
-                borderBottom: '1px solid #f3f4f6',
-              }}
-              onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = '#f9fafb' }}
-              onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent' }}
-            >
-              <span style={{ fontSize: 12, fontWeight: 600 }}>{style.label}</span>
-              <span style={{ fontSize: 10, color: '#9ca3af' }}>{style.desc}</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function NextActionItem({ action, index, onToggle }: { action: any; index: number; onToggle: (done: boolean) => Promise<void> }) {
-  const [pending, setPending] = useState(false)
-  const labelMap: Record<string, string> = { now: 'Maintenant', today: "Aujourd'hui", 'this-week': 'Cette semaine' }
-  const done = !!action.done
-  return (
-    <li className={s.aiCardNextAction}>
-      <button
-        type="button"
-        className={`${s.aiCardNextCheck} ${done ? s.aiCardNextCheckDone : ''}`}
-        onClick={async () => {
-          setPending(true)
-          try { await onToggle(!done) } finally { setPending(false) }
-        }}
-        aria-pressed={done}
-        aria-label={done ? 'Marquer non fait' : 'Marquer fait'}
-        disabled={pending}
-      >
-        {done && <span aria-hidden>✓</span>}
-      </button>
-      <span className={`${s.aiCardNextLabel} ${done ? s.aiCardNextLabelDone : ''}`}>{action.label}</span>
-      <span className={s.aiCardNextWhen}>{labelMap[action.priority] || action.priority}</span>
-    </li>
-  )
-}
+import type { Message, ClientInfo, TimeEntry, ActivityEntry } from './types'
+import { ALIASES, STATUS_STYLE } from './constants'
+import { timeAgo, dateLabel } from './helpers'
+import { RewriteDropdown } from './RewriteDropdown'
+import { NextActionItem } from './NextActionItem'
 
 export const TicketDetailClient: React.FC = () => {
   const { t } = useTranslation()
@@ -663,7 +538,7 @@ const [clientTyping, setClientTyping] = useState(false)
     <div className={s.page}>
       {/* TOP BAR — detail__header maquette : back-btn + (id+meta + title) + quick-actions */}
       <div className={s.topBar}>
-        <Link href="/admin/support/inbox" className={s.backLink} aria-label="Retour à la boîte de réception">&larr;</Link>
+        <Link href="/admin/support/inbox" className={s.backLink} aria-label={t('detail.backToInbox')}>&larr;</Link>
         <div className={s.ticketMeta}>
           {/* detail__id : ticketNumber · category · source email */}
           <span className={s.ticketNumber}>
@@ -717,7 +592,7 @@ const [clientTyping, setClientTyping] = useState(false)
         })
         if (slaInfo.state !== 'breach') return null
         const duration = formatSlaRemaining(slaInfo.remainingMs).replace(/^−/, '')
-        const target = slaInfo.due ? new Date(slaInfo.due).toLocaleString('fr-FR', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' }) : ''
+        const target = slaInfo.due ? new Date(slaInfo.due).toLocaleString(DATE_LOCALE, { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' }) : ''
         return (
           <div className={s.slaBanner} role="alert">
             <span className={s.slaBannerIcon} aria-hidden>
@@ -787,17 +662,17 @@ const [clientTyping, setClientTyping] = useState(false)
                       <div className={s.messageHeader}>
                         <span className={s.messageAuthor}>{msg.fromAlias || (isAdmin ? 'Support' : msg.authorType === 'email' ? 'Email' : client?.firstName || 'Client')}</span>
                         <span className={s.messageTime}>{timeAgo(msg.createdAt)}</span>
-                        {msg.isInternal && <span className={s.badge} style={{ background: '#fef3c7', color: '#92400e' }}>Interne</span>}
-                        {msg.isSolution && <span className={s.badge} style={{ background: '#dcfce7', color: '#166534' }}>Solution</span>}
+                        {msg.isInternal && <span className={s.badge} style={{ background: '#fef3c7', color: '#92400e' }}>{t('detail.badgeInternal')}</span>}
+                        {msg.isSolution && <span className={s.badge} style={{ background: '#dcfce7', color: '#166534' }}>{t('detail.badgeSolution')}</span>}
                         <span className={s.messageMeta}>
                           {isAdmin && !msg.isInternal && (() => {
                             const ext = msg as unknown as { emailOpenedAt?: string; emailSentAt?: string }
                             if (ext.emailOpenedAt) {
-                              const d = new Date(ext.emailOpenedAt).toLocaleString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
+                              const d = new Date(ext.emailOpenedAt).toLocaleString(DATE_LOCALE, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
                               return <span style={{ color: '#16a34a', cursor: 'help' }} title={`Ouvert le ${d}`}>✓✓ Lu {d}</span>
                             }
                             if (ext.emailSentAt) {
-                              const d = new Date(ext.emailSentAt).toLocaleString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
+                              const d = new Date(ext.emailSentAt).toLocaleString(DATE_LOCALE, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
                               return <span style={{ color: '#2563eb', cursor: 'help' }} title={`Envoyé le ${d}`}>✓ Envoyé {d}</span>
                             }
                             return <span style={{ color: '#94a3b8' }}>✓</span>
@@ -810,7 +685,7 @@ const [clientTyping, setClientTyping] = useState(false)
                             ref={editEditorRef}
                             initialValue={editingHtml}
                             onChange={(html, text) => { setEditingHtml(html); setEditingBody(text) }}
-                            placeholder="Éditer le message..."
+                            placeholder={t('detail.editPlaceholder')}
                             minHeight={120}
                             onFileUpload={async (file) => {
                               try {
@@ -825,8 +700,8 @@ const [clientTyping, setClientTyping] = useState(false)
                             }}
                           />
                           <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
-                            <button onClick={cancelEditMessage} disabled={editSaving} style={{ padding: '5px 12px', fontSize: 12, borderRadius: 5, border: '1px solid var(--theme-elevation-200)', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)', cursor: 'pointer' }}>Annuler</button>
-                            <button onClick={saveEditMessage} disabled={editSaving || !editingBody.trim()} style={{ padding: '5px 12px', fontSize: 12, fontWeight: 600, borderRadius: 5, border: 'none', background: '#2563eb', color: '#fff', cursor: editSaving ? 'wait' : 'pointer', opacity: editSaving ? 0.6 : 1 }}>{editSaving ? 'Sauvegarde…' : 'Enregistrer'}</button>
+                            <button onClick={cancelEditMessage} disabled={editSaving} style={{ padding: '5px 12px', fontSize: 12, borderRadius: 5, border: '1px solid var(--theme-elevation-200)', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)', cursor: 'pointer' }}>{t('common.cancel')}</button>
+                            <button onClick={saveEditMessage} disabled={editSaving || !editingBody.trim()} style={{ padding: '5px 12px', fontSize: 12, fontWeight: 600, borderRadius: 5, border: 'none', background: '#2563eb', color: '#fff', cursor: editSaving ? 'wait' : 'pointer', opacity: editSaving ? 0.6 : 1 }}>{editSaving ? t('detail.editSaving') : t('detail.editSave')}</button>
                           </div>
                         </div>
                       ) : (msg as unknown as { deletedAt?: string }).deletedAt ? (
@@ -855,7 +730,7 @@ const [clientTyping, setClientTyping] = useState(false)
                     {/* Hover actions — icon buttons with aria-labels (#7) */}
                     {editingMsgId !== msg.id && !(msg as unknown as { deletedAt?: string }).deletedAt && (
                       <div className={s.messageActions}>
-                        <button className={s.actionIcon} title="Éditer" aria-label="Éditer le message" onClick={() => startEditMessage(msg)} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>Éditer</button>
+                        <button className={s.actionIcon} title={t('detail.editMessage')} aria-label={t('detail.editMessageLabel')} onClick={() => startEditMessage(msg)} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>{t('detail.editMessage')}</button>
                         {/* #2 — Undo toast instead of confirm() */}
                         <button className={`${s.actionIcon} ${s.danger}`} title={t('actions.deleteMessage')} aria-label={t('actions.deleteMessage')} onClick={() => handleDeleteMessage(msg.id)} style={{ fontSize: 11, width: 'auto', padding: '4px 8px' }}>{t('actions.deleteMessage')}</button>
                         {/* #2 — Split modal instead of prompt() */}
@@ -942,7 +817,7 @@ const [clientTyping, setClientTyping] = useState(false)
                   onChange={(e) => { const id = Number(e.target.value); if (id) handleApplyMacro(id); e.target.value = '' }}
                   disabled={applyingMacro}
                   style={{ marginLeft: 0 }}
-                  aria-label="Appliquer une macro"
+                  aria-label={t('detail.macros')}
                 >
                   <option value="">{applyingMacro ? t('detail.applyingMacro') : t('detail.macros')}</option>
                   {macros.map((m) => <option key={m.id} value={m.id}>{m.name}</option>)}
@@ -951,7 +826,7 @@ const [clientTyping, setClientTyping] = useState(false)
               <span className={s.toolbarDivider} />
               {/* #9 — "Canned" -> "Réponses types" */}
               {features.canned && cannedResponses.length > 0 && (
-                <select className={s.cannedSelect} aria-label="Réponses types" onChange={(e) => {
+                <select className={s.cannedSelect} aria-label={t('detail.cannedResponses')} onChange={(e) => {
                   const cr = cannedResponses.find((c) => String(c.id) === e.target.value)
                   if (cr) { let b = cr.body; if (client) { b = b.replace(/\{\{client\.firstName\}\}/g, client.firstName).replace(/\{\{client\.company\}\}/g, client.company) }; setReplyBody(b); setReplyHtml(b.replace(/\n/g, '<br/>')); editorRef.current?.setContent(b.replace(/\n/g, '<br/>')) }
                   e.target.value = ''
@@ -986,8 +861,8 @@ const [clientTyping, setClientTyping] = useState(false)
                 <div className={s.uploadPreview}>
                   {pendingFiles.map((f, i) => (
                     <div key={i} className={s.uploadPreviewItem}>
-                      <span>PJ {f.name}</span>
-                      <button className={s.uploadRemoveBtn} aria-label={`Retirer ${f.name}`} onClick={() => setPendingFiles((prev) => prev.filter((_, j) => j !== i))}>&times;</button>
+                      <span>{t('detail.uploadItem', { name: f.name })}</span>
+                      <button className={s.uploadRemoveBtn} aria-label={t('detail.removeUpload', { name: f.name })} onClick={() => setPendingFiles((prev) => prev.filter((_, j) => j !== i))}>&times;</button>
                     </div>
                   ))}
                 </div>
@@ -1004,8 +879,8 @@ const [clientTyping, setClientTyping] = useState(false)
                   }}
                   style={{ fontSize: '12px', padding: '4px 8px', fontWeight: 600, borderRadius: 6, border: '1px solid var(--theme-elevation-200)', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)' }}
                 >
-                  <option value="admin">En tant que : Support</option>
-                  <option value="client">En tant que : Client</option>
+                  <option value="admin">{t('detail.sendAsSupport')}</option>
+                  <option value="client">{t('detail.sendAsClient')}</option>
                 </select>
                 {!sendAsClient && (
                   <select
@@ -1030,7 +905,7 @@ const [clientTyping, setClientTyping] = useState(false)
                 <kbd>⌘</kbd><kbd>↵</kbd>
               </span>
               <button className={`${s.sendBtn} ${isInternal ? s.sendBtnInternal : ''}`} onClick={handleSend} disabled={sending || !replyBody.trim()} data-action="send-reply">
-                {sending ? t('detail.sending') : sendAsClient ? 'Ajouter message client' : isInternal ? t('detail.sendNote') : t('detail.sendReply')}
+                {sending ? t('detail.sending') : sendAsClient ? t('detail.addClientMessage') : isInternal ? t('detail.sendNote') : t('detail.sendReply')}
               </button>
             </div>
           </div>
@@ -1103,7 +978,7 @@ const [clientTyping, setClientTyping] = useState(false)
             <div className={`${s.sideSection} ${s.aiCard}`}>
               <div className={s.aiCardTitle}>
                 <span className={s.aiCardIcon} aria-hidden>✨</span>
-                Synthèse client
+                {t('detail.aiCard.title')}
               </div>
               <p className={s.aiCardLead}>{clientSummary.summary}</p>
               {clientSummary.recurringTopics && clientSummary.recurringTopics.length > 0 && (
@@ -1200,12 +1075,12 @@ const [clientTyping, setClientTyping] = useState(false)
                   {String(Math.floor(timerSeconds / 60)).padStart(2, '0')}:{String(timerSeconds % 60).padStart(2, '0')}
                 </span>
                 {!timerRunning ? (
-                  <button className={s.timerBtn} onClick={() => setTimerRunning(true)} aria-label="Démarrer le timer">{timerSeconds > 0 ? '▶' : '▶ Go'}</button>
+                  <button className={s.timerBtn} onClick={() => setTimerRunning(true)} aria-label={t('detail.timerStart')}>{timerSeconds > 0 ? '▶' : '▶ Go'}</button>
                 ) : (
-                  <button className={`${s.timerBtn} ${s.timerBtnRunning}`} onClick={() => setTimerRunning(false)} aria-label="Mettre en pause le timer">⏸ Pause</button>
+                  <button className={`${s.timerBtn} ${s.timerBtnRunning}`} onClick={() => setTimerRunning(false)} aria-label={t('detail.timerPause')}>⏸ Pause</button>
                 )}
                 {timerSeconds >= 60 && !timerRunning && (
-                  <button className={`${s.timerBtn} ${s.timerBtnGhost}`} onClick={() => { handleTimerSave(); localStorage.removeItem(`timer-sec-${ticketId}`); localStorage.removeItem(`timer-run-${ticketId}`) }} aria-label="Sauvegarder le temps">💾 {Math.round(timerSeconds / 60)}m</button>
+                  <button className={`${s.timerBtn} ${s.timerBtnGhost}`} onClick={() => { handleTimerSave(); localStorage.removeItem(`timer-sec-${ticketId}`); localStorage.removeItem(`timer-run-${ticketId}`) }} aria-label={t('detail.timerSave')}>💾 {Math.round(timerSeconds / 60)}m</button>
                 )}
               </div>
               {/* Progress bar (tt__bar maquette) — full = 120 min reference */}
@@ -1224,12 +1099,12 @@ const [clientTyping, setClientTyping] = useState(false)
                     if (input) input.value = ''
                     fetchAll()
                   } catch {}
-                }} style={{ fontSize: 11 }}>+ Ajouter</button>
+                }} style={{ fontSize: 11 }}>{t('detail.addTime')}</button>
               </div>
               {/* Billing info */}
               <div style={{ marginTop: 8, fontSize: 11, color: 'var(--theme-elevation-500)' }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0', alignItems: 'center' }}>
-                  <span>Facturable</span>
+                  <span>{t('detail.billing.billable')}</span>
                   <button
                     onClick={async () => {
                       const newVal = ticket.billable === false ? true : false
@@ -1237,12 +1112,12 @@ const [clientTyping, setClientTyping] = useState(false)
                     }}
                     style={{ fontWeight: 600, color: (ticket.billable !== false) ? '#16a34a' : '#dc2626', background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, textDecoration: 'underline' }}
                   >
-                    {(ticket.billable !== false) ? 'Oui' : 'Non'}
+                    {(ticket.billable !== false) ? t('detail.billing.yes') : t('detail.billing.no')}
                   </button>
                 </div>
                 {totalMin > 0 && (
                   <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }}>
-                    <span>Montant estimé</span>
+                    <span>{t('detail.billing.estimatedAmount')}</span>
                     <span style={{ fontWeight: 700, color: 'var(--theme-text)' }}>{((totalMin / 60) * 60).toFixed(0)}€</span>
                   </div>
                 )}
@@ -1252,7 +1127,7 @@ const [clientTyping, setClientTyping] = useState(false)
                 <div style={{ marginTop: 8, fontSize: 11 }}>
                   {timeEntries.slice(0, 6).map((e) => (
                     <div key={e.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', color: 'var(--theme-elevation-500)' }}>
-                      <span>{new Date(e.date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}</span>
+                      <span>{new Date(e.date).toLocaleDateString(DATE_LOCALE, { day: 'numeric', month: 'short' })}</span>
                       <span title={e.description} style={{ fontWeight: 600, cursor: e.description ? 'help' : 'default' }}>{e.duration}min</span>
                     </div>
                   ))}
@@ -1268,7 +1143,7 @@ const [clientTyping, setClientTyping] = useState(false)
               {tags.map((tag) => (
                 <span key={tag} className={s.tagChip}>
                   {tag}
-                  <button className={s.tagRemove} aria-label={`Retirer le tag ${tag}`} onClick={() => handleRemoveTag(tag)}>&times;</button>
+                  <button className={s.tagRemove} aria-label={t('detail.removeTag', { tag })} onClick={() => handleRemoveTag(tag)}>&times;</button>
                 </span>
               ))}
               {addingTag ? (
@@ -1278,21 +1153,21 @@ const [clientTyping, setClientTyping] = useState(false)
                   onChange={(e) => setNewTagValue(e.target.value)}
                   onKeyDown={(e) => { if (e.key === 'Enter') handleAddTag(); if (e.key === 'Escape') { setAddingTag(false); setNewTagValue('') } }}
                   onBlur={handleAddTag}
-                  placeholder="Tag..."
+                  placeholder={t('detail.tagPlaceholder')}
                   autoFocus
                 />
               ) : (
-                <button className={s.tagAddBtn} onClick={() => setAddingTag(true)} aria-label="Ajouter un tag">+ Tag</button>
+                <button className={s.tagAddBtn} onClick={() => setAddingTag(true)} aria-label={t('detail.addTag')}>{t('detail.addTagBtn')}</button>
               )}
             </div>
           </div>
 
           {/* ===== BILLING ===== */}
           <div className={s.sideSection}>
-            <div className={s.sideSectionTitle}>Facturation</div>
+            <div className={s.sideSectionTitle}>{t('detail.billing.title')}</div>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <span style={{ fontSize: 12 }}>Type</span>
+                <span style={{ fontSize: 12 }}>{t('detail.billing.type')}</span>
                 <select
                   value={(ticket as any)?.billingType || 'hourly'}
                   onChange={async (e) => {
@@ -1307,13 +1182,13 @@ const [clientTyping, setClientTyping] = useState(false)
                   }}
                   style={{ fontSize: 12, padding: '4px 8px', borderRadius: 6, border: '1px solid #e5e7eb', background: '#fff' }}
                 >
-                  <option value="hourly">Au temps</option>
-                  <option value="flat">Forfait</option>
+                  <option value="hourly">{t('detail.billing.hourly')}</option>
+                  <option value="flat">{t('detail.billing.flat')}</option>
                 </select>
               </div>
               {(ticket as any)?.billingType === 'flat' && (
                 <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                  <span style={{ fontSize: 12 }}>Montant forfait</span>
+                  <span style={{ fontSize: 12 }}>{t('detail.billing.flatAmount')}</span>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                     <input
                       type="number"
@@ -1337,7 +1212,7 @@ const [clientTyping, setClientTyping] = useState(false)
                 </div>
               )}
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <span style={{ fontSize: 12 }}>Montant facturé</span>
+                <span style={{ fontSize: 12 }}>{t('detail.billing.billedAmount')}</span>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                   <input
                     type="number"
@@ -1360,7 +1235,7 @@ const [clientTyping, setClientTyping] = useState(false)
                 </div>
               </div>
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                <span style={{ fontSize: 12 }}>Paiement</span>
+                <span style={{ fontSize: 12 }}>{t('detail.billing.payment')}</span>
                 <select
                   value={(ticket as any)?.paymentStatus || 'unpaid'}
                   onChange={async (e) => {
@@ -1375,9 +1250,9 @@ const [clientTyping, setClientTyping] = useState(false)
                   }}
                   style={{ fontSize: 12, padding: '4px 8px', borderRadius: 6, border: '1px solid #e5e7eb', background: '#fff' }}
                 >
-                  <option value="unpaid">Non payé</option>
-                  <option value="partial">Partiel</option>
-                  <option value="paid">Payé</option>
+                  <option value="unpaid">{t('detail.billing.unpaid')}</option>
+                  <option value="partial">{t('detail.billing.partial')}</option>
+                  <option value="paid">{t('detail.billing.paid')}</option>
                 </select>
               </div>
             </div>
@@ -1385,7 +1260,7 @@ const [clientTyping, setClientTyping] = useState(false)
 
           {summaryLoading && (
             <div className={s.sideSection}>
-              <div style={{ fontSize: 11, color: 'var(--theme-elevation-400)', textAlign: 'center', padding: 8 }}>✨ Chargement de la synthèse…</div>
+              <div style={{ fontSize: 11, color: 'var(--theme-elevation-400)', textAlign: 'center', padding: 8 }}>{t('detail.loadingSummary')}</div>
             </div>
           )}
           </div>
@@ -1426,7 +1301,7 @@ const [clientTyping, setClientTyping] = useState(false)
                           <span className={s.previousTicketsSubject}>{pt.subject || `#${pt.id}`}</span>
                           <span className={s.previousTicketsMeta}>
                             {pt.status ? <span className={s.previousTicketsStatus}>{pt.status}</span> : null}
-                            <span className={s.previousTicketsDate}>{new Date(pt.createdAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' })}</span>
+                            <span className={s.previousTicketsDate}>{new Date(pt.createdAt).toLocaleDateString(DATE_LOCALE, { day: 'numeric', month: 'short', year: 'numeric' })}</span>
                           </span>
                         </Link>
                       </li>
@@ -1470,28 +1345,28 @@ const [clientTyping, setClientTyping] = useState(false)
 {/* #2 — Undo delete toast */}
       {undoToast && (
         <div className={s.undoToast} role="alert">
-          <span>Message supprimé</span>
-          <button className={s.undoBtn} onClick={handleUndoDelete}>Annuler</button>
+          <span>{t('detail.messageDeletedToast')}</span>
+          <button className={s.undoBtn} onClick={handleUndoDelete}>{t('common.cancel')}</button>
         </div>
       )}
 
       {/* #2 — Split ticket modal */}
       {splitModal && (
         <div className={s.splitOverlay} onClick={(e) => { if (e.target === e.currentTarget) { setSplitModal(null); setSplitSubject('') } }}>
-          <div className={s.splitModal} role="dialog" aria-label="Extraire dans un nouveau ticket">
-            <h3 className={s.splitTitle}>Extraire dans un nouveau ticket</h3>
+          <div className={s.splitModal} role="dialog" aria-label={t('actions.extractToNewTicket')}>
+            <h3 className={s.splitTitle}>{t('actions.extractToNewTicket')}</h3>
             <div className={s.splitPreview}>{splitModal.preview}</div>
             <input
               className={s.splitInput}
               value={splitSubject}
               onChange={(e) => setSplitSubject(e.target.value)}
               onKeyDown={(e) => { if (e.key === 'Enter') handleSplitConfirm() }}
-              placeholder="Sujet du nouveau ticket..."
+              placeholder={t('detail.split.subjectPlaceholder')}
               autoFocus
             />
             <div className={s.splitActions}>
-              <button className={s.splitCancelBtn} onClick={() => { setSplitModal(null); setSplitSubject('') }}>Annuler</button>
-              <button className={s.splitConfirmBtn} onClick={handleSplitConfirm} disabled={!splitSubject.trim()}>Créer le ticket</button>
+              <button className={s.splitCancelBtn} onClick={() => { setSplitModal(null); setSplitSubject('') }}>{t('common.cancel')}</button>
+              <button className={s.splitConfirmBtn} onClick={handleSplitConfirm} disabled={!splitSubject.trim()}>{t('detail.split.createBtn')}</button>
             </div>
           </div>
         </div>

package/src/views/TicketDetailView/constants.ts

@@ -0,0 +1,23 @@
+// "Send as" aliases — host-configured via NEXT_PUBLIC_SUPPORT_SEND_ALIASES
+// (comma-separated). Kept config-driven so the plugin carries no hardcoded
+// brand identity. Empty by default: the composer then offers only "self".
+export const ALIASES: Array<{ value: string; label: string }> = (process.env.NEXT_PUBLIC_SUPPORT_SEND_ALIASES || '')
+  .split(',')
+  .map((v) => v.trim())
+  .filter(Boolean)
+  .map((value) => ({ value, label: `En tant que : ${value}` }))
+
+export const STATUS_STYLE: Record<string, { bg: string; color: string }> = {
+  open: { bg: '#dbeafe', color: '#1e40af' },
+  waiting_client: { bg: '#fef3c7', color: '#92400e' },
+  resolved: { bg: '#dcfce7', color: '#166534' },
+}
+
+export const REWRITE_STYLES = [
+  { id: 'auto', label: '✏️ Auto', desc: 'Garde le ton actuel' },
+  { id: 'tutoyer', label: '👋 Tutoyer', desc: 'Passe en tu' },
+  { id: 'vouvoyer', label: '🎩 Vouvoyer', desc: 'Passe en vous' },
+  { id: 'formel', label: '💼 Formel', desc: 'Ton professionnel' },
+  { id: 'amical', label: '😊 Amical', desc: 'Ton chaleureux' },
+  { id: 'court', label: '⚡ Court', desc: 'Version concise' },
+]

package/src/views/TicketDetailView/helpers.ts

@@ -0,0 +1,17 @@
+import { DATE_LOCALE } from '../shared/dateLocale'
+
+export function timeAgo(d: string): string {
+  const date = new Date(d), now = new Date()
+  if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString(DATE_LOCALE, { hour: '2-digit', minute: '2-digit' })
+  const y = new Date(now); y.setDate(y.getDate() - 1)
+  if (date.toDateString() === y.toDateString()) return `Hier, ${date.toLocaleTimeString(DATE_LOCALE, { hour: '2-digit', minute: '2-digit' })}`
+  return date.toLocaleDateString(DATE_LOCALE, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
+}
+
+export function dateLabel(d: string): string {
+  const date = new Date(d), now = new Date()
+  if (date.toDateString() === now.toDateString()) return "Aujourd'hui"
+  const y = new Date(now); y.setDate(y.getDate() - 1)
+  if (date.toDateString() === y.toDateString()) return 'Hier'
+  return date.toLocaleDateString(DATE_LOCALE, { day: 'numeric', month: 'long' })
+}

package/src/views/TicketDetailView/types.ts

@@ -0,0 +1,10 @@
+export interface Message {
+  id: string | number; body: string; bodyHtml?: string; authorType: 'client' | 'admin' | 'email'
+  isInternal?: boolean; isSolution?: boolean; createdAt: string; fromChat?: boolean
+  fromAlias?: string
+  attachments?: Array<{ file: { id: number; url?: string; filename?: string; mimeType?: string } | number }>
+}
+
+export interface ClientInfo { id: number; company: string; firstName: string; lastName: string; email: string; phone?: string }
+export interface TimeEntry { id: string | number; duration: number; description?: string; date: string }
+export interface ActivityEntry { id: string | number; action: string; detail?: string; actorType?: string; createdAt: string }

package/src/views/TicketInboxView/client.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect, useCallback } from 'react'
 import { useSearchParams } from 'next/navigation'
 import Link from 'next/link'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import { DATE_LOCALE } from '../shared/dateLocale'
 import { StatusPill } from '../shared/StatusPill'
 import { computeSlaState, formatSlaRemaining } from '../shared/sla'
 import s from '../../styles/TicketInbox.module.scss'
@@ -45,16 +46,16 @@ const STATUS_VARIANT: Record<string, 'open' | 'pending' | 'resolved' | 'closed'>
   closed: 'closed',
 }
 
-function relativeTime(dateStr: string): string {
+function relativeTime(dateStr: string, tFn: (k: string) => string): string {
   const diff = Date.now() - new Date(dateStr).getTime()
   const mins = Math.floor(diff / 60000)
-  if (mins < 1) return 'maintenant'
+  if (mins < 1) return tFn('inbox.timeAgo.now')
   if (mins < 60) return `${mins}m`
   const hours = Math.floor(mins / 60)
   if (hours < 24) return `${hours}h`
   const days = Math.floor(hours / 24)
   if (days < 7) return `${days}j`
-  return new Date(dateStr).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
+  return new Date(dateStr).toLocaleDateString(DATE_LOCALE, { day: 'numeric', month: 'short' })
 }
 
 export const TicketInboxClient: React.FC = () => {
@@ -138,6 +139,9 @@ export const TicketInboxClient: React.FC = () => {
       params.push(`where[or][0][subject][contains]=${encodeURIComponent(search)}`)
       params.push(`where[or][1][ticketNumber][contains]=${encodeURIComponent(search)}`)
     }
+    // Hide snoozed tickets (snoozeUntil in the future); they resurface automatically once due.
+    params.push(`where[and][0][or][0][snoozeUntil][exists]=false`)
+    params.push(`where[and][0][or][1][snoozeUntil][less_than_equal]=${encodeURIComponent(new Date().toISOString())}`)
     try {
       const url = `/api/tickets?${params.join('&')}`
       const res = await fetch(url, { credentials: 'include' })
@@ -159,12 +163,14 @@ export const TicketInboxClient: React.FC = () => {
   useEffect(() => {
     const fetchCounts = async () => {
       try {
+        // Exclude snoozed tickets from the counts too (mirrors the list query).
+        const sn = `where[and][0][or][0][snoozeUntil][exists]=false&where[and][0][or][1][snoozeUntil][less_than_equal]=${encodeURIComponent(new Date().toISOString())}`
         const [all, openRes, waiting, resolved, breach] = await Promise.all([
-          fetch('/api/tickets?limit=0&depth=0', { credentials: 'include' }),
-          fetch('/api/tickets?limit=0&depth=0&where[status][equals]=open', { credentials: 'include' }),
-          fetch('/api/tickets?limit=0&depth=0&where[status][equals]=waiting_client', { credentials: 'include' }),
-          fetch('/api/tickets?limit=0&depth=0&where[status][equals]=resolved', { credentials: 'include' }),
-          fetch('/api/tickets?limit=0&depth=0&where[or][0][slaFirstResponseBreached][equals]=true&where[or][1][slaResolutionBreached][equals]=true', { credentials: 'include' }),
+          fetch(`/api/tickets?limit=0&depth=0&${sn}`, { credentials: 'include' }),
+          fetch(`/api/tickets?limit=0&depth=0&where[status][equals]=open&${sn}`, { credentials: 'include' }),
+          fetch(`/api/tickets?limit=0&depth=0&where[status][equals]=waiting_client&${sn}`, { credentials: 'include' }),
+          fetch(`/api/tickets?limit=0&depth=0&where[status][equals]=resolved&${sn}`, { credentials: 'include' }),
+          fetch(`/api/tickets?limit=0&depth=0&where[or][0][slaFirstResponseBreached][equals]=true&where[or][1][slaResolutionBreached][equals]=true&${sn}`, { credentials: 'include' }),
         ])
         const [a, o, w, r, b] = await Promise.all([all.json(), openRes.json(), waiting.json(), resolved.json(), breach.json()])
         setCounts({
@@ -339,11 +345,11 @@ export const TicketInboxClient: React.FC = () => {
                     sla.state === 'warn' ? s.slaWarn : '',
                     sla.state === 'ok' ? s.slaOk : '',
                   ].filter(Boolean).join(' ')}
-                  title={sla.due ? new Date(sla.due).toLocaleString('fr-FR') : ''}
+                  title={sla.due ? new Date(sla.due).toLocaleString(DATE_LOCALE) : ''}
                 >
                   {formatSlaRemaining(sla.remainingMs)}
                 </span>
-                <span className={s.timeAgo}>{relativeTime(tk.updatedAt)}</span>
+                <span className={s.timeAgo}>{relativeTime(tk.updatedAt, t)}</span>
                 {isUnread ? <div className={s.unreadDot} /> : <span />}
               </a>
             )