@consilioweb/payload-support 0.10.0 → 0.11.0

package/src/views/TicketDetailView/client.tsx

@@ -14,8 +14,14 @@ 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 }
@@ -111,6 +117,31 @@ const RewriteDropdown: React.FC<{
   )
 }
 
+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>
+  )
+}
+
 export const TicketDetailClient: React.FC = () => {
   const { t } = useTranslation()
   const searchParams = useSearchParams()
@@ -134,6 +165,7 @@ export const TicketDetailClient: React.FC = () => {
   const [isInternal, setIsInternal] = useState(false)
   const [notifyClient, setNotifyClient] = useState(true)
   const [sendAsClient, setSendAsClient] = useState(false)
+  const [fromAlias, setFromAlias] = useState<string>('')
   // Inline message edit
   const [editingMsgId, setEditingMsgId] = useState<string | number | null>(null)
   const [editingBody, setEditingBody] = useState('')
@@ -145,12 +177,25 @@ export const TicketDetailClient: React.FC = () => {
   const [showMenu, setShowMenu] = useState(false)
 const [clientTyping, setClientTyping] = useState(false)
   const [aiReplying, setAiReplying] = useState(false)
+  const [aiSuggestion, setAiSuggestion] = useState<string | null>(null)
   const [aiRewriting, setAiRewriting] = useState(false)
   const [sentiment, setSentiment] = useState<{ emoji: string; label: string; color: string } | null>(null)
   const [statusUpdating, setStatusUpdating] = useState(false)
-  const [showActivity, setShowActivity] = useState(false)
+  // Sidebar tabs (overview | client | activity) — persisted in localStorage
+  type SidebarTab = 'overview' | 'client' | 'activity'
+  const [sidebarTab, setSidebarTab] = useState<SidebarTab>(() => {
+    if (typeof window === 'undefined') return 'overview'
+    const v = localStorage.getItem('support_sidebar_tab')
+    return v === 'client' || v === 'activity' ? v : 'overview'
+  })
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    localStorage.setItem('support_sidebar_tab', sidebarTab)
+  }, [sidebarTab])
+  // Previous tickets of the same client (loaded only for the "client" tab)
+  const [previousTickets, setPreviousTickets] = useState<Array<{ id: number; subject?: string; status?: string; createdAt: string }>>([])
   // Client Intelligence
-  const [clientSummary, setClientSummary] = useState<{ summary: string; recurringTopics?: { topic: string; count: number }[]; keyFacts?: string[] } | null>(null)
+  const [clientSummary, setClientSummary] = useState<{ id?: string | number; summary: string; recurringTopics?: { topic: string; count: number }[]; keyFacts?: string[]; nextActions?: Array<{ id?: string; label: string; priority?: 'now' | 'today' | 'this-week'; done?: boolean }> } | null>(null)
   const [summaryLoading, setSummaryLoading] = useState(false)
   const [timerRunning, setTimerRunning] = useState(() => {
     if (typeof window === 'undefined' || !ticketId) return false
@@ -231,6 +276,21 @@ const [clientTyping, setClientTyping] = useState(false)
       .catch(() => {})
       .finally(() => setSummaryLoading(false))
   }, [ticket?.id]) // eslint-disable-line react-hooks/exhaustive-deps
+  // Fetch previous tickets of the same client when "Client" tab is active
+  useEffect(() => {
+    if (sidebarTab !== 'client' || !ticket || !ticketId) return
+    const clientId = typeof ticket.client === 'object' ? (ticket.client as { id?: number })?.id : ticket.client
+    if (!clientId) return
+    let aborted = false
+    fetch(
+      `/api/tickets?where[client][equals]=${clientId}&where[id][not_equals]=${ticketId}&limit=5&sort=-createdAt&depth=0`,
+      { credentials: 'include' },
+    )
+      .then((r) => (r.ok ? r.json() : null))
+      .then((d) => { if (!aborted && d?.docs) setPreviousTickets(d.docs) })
+      .catch(() => {})
+    return () => { aborted = true }
+  }, [sidebarTab, ticket?.id, ticketId]) // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => { // Poll 10s
     if (!ticketId || loading) return
     const iv = setInterval(async () => {
@@ -410,10 +470,11 @@ const [clientTyping, setClientTyping] = useState(false)
           ...(finalHtml ? { bodyHtml: finalHtml } : {}),
           authorType: sendAsClient ? 'client' : 'admin',
           ...(sendAsClient && client ? { authorClient: client.id } : {}),
+          ...(fromAlias && !sendAsClient ? { fromAlias } : {}),
           isInternal: sendAsClient ? false : isInternal,
           skipNotification: sendAsClient || isInternal || !notifyClient,
         }) })
-      if (res.ok) { setReplyBody(''); setReplyHtml(''); setIsInternal(false); setSendAsClient(false); setPendingFiles([]); editorRef.current?.clear(); fetchAll() }
+      if (res.ok) { setReplyBody(''); setReplyHtml(''); setIsInternal(false); setSendAsClient(false); setFromAlias(''); setPendingFiles([]); editorRef.current?.clear(); fetchAll() }
     } catch {} finally { setSending(false) }
   }
 
@@ -496,12 +557,38 @@ const [clientTyping, setClientTyping] = useState(false)
   }
 
   const handleAiSuggest = async () => {
-    if (messages.length === 0) return; setAiReplying(true)
+    if (messages.length === 0) return
+    setAiReplying(true)
     try {
-      const r = await fetch('/api/support/ai', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
-        body: JSON.stringify({ action: 'suggest_reply', messages: messages.slice(-10).map((m) => ({ authorType: m.authorType, body: m.body })), clientName: `${client?.firstName || ''} ${client?.lastName || ''}`.trim(), clientCompany: client?.company }) })
-      if (r.ok) { const d = await r.json(); if (d.reply) { setReplyBody(d.reply); setReplyHtml(d.reply.replace(/\n/g, '<br/>')); editorRef.current?.setContent(d.reply.replace(/\n/g, '<br/>')) } }
-    } catch {} finally { setAiReplying(false) }
+      const r = await fetch('/api/support/ai', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          action: 'suggest_reply',
+          messages: messages.slice(-10).map((m) => ({ authorType: m.authorType, body: m.body })),
+          clientName: `${client?.firstName || ''} ${client?.lastName || ''}`.trim(),
+          clientCompany: client?.company,
+        }),
+      })
+      if (r.ok) {
+        const d = await r.json()
+        // Show the suggestion in a preview banner instead of inserting directly into the editor
+        if (d.reply) setAiSuggestion(d.reply)
+      }
+    } catch {
+      /* silent */
+    } finally {
+      setAiReplying(false)
+    }
+  }
+
+  const handleAiSuggestionInsert = () => {
+    if (!aiSuggestion) return
+    setReplyBody(aiSuggestion)
+    setReplyHtml(aiSuggestion.replace(/\n/g, '<br/>'))
+    editorRef.current?.setContent(aiSuggestion.replace(/\n/g, '<br/>'))
+    setAiSuggestion(null)
   }
 
   const handleAiRewrite = async (style: string = 'auto') => {
@@ -684,7 +771,7 @@ const [clientTyping, setClientTyping] = useState(false)
                     </div>
                     <div className={s.messageContent}>
                       <div className={s.messageHeader}>
-                        <span className={s.messageAuthor}>{isAdmin ? 'Support' : msg.authorType === 'email' ? 'Email' : client?.firstName || 'Client'}</span>
+                        <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>}
@@ -776,6 +863,31 @@ const [clientTyping, setClientTyping] = useState(false)
             </div>
           )}
 
+          {/* AI suggestion preview banner — appears above composer, preserves user's draft */}
+          {aiSuggestion && (
+            <div className={s.aiSuggestionPreview} role="region" aria-label={t('composer.aiSuggestion.label')}>
+              <div className={s.aiSuggestionPreviewHeader}>
+                <span className={s.aiSuggestionIcon} aria-hidden>✨</span>
+                <span className={s.aiSuggestionLabel}>{t('composer.aiSuggestion.label')}</span>
+                <button
+                  type="button"
+                  className={s.aiSuggestionDismiss}
+                  onClick={() => setAiSuggestion(null)}
+                  aria-label={t('composer.aiSuggestion.ignore')}
+                >×</button>
+              </div>
+              <div className={s.aiSuggestionBody}>{aiSuggestion}</div>
+              <div className={s.aiSuggestionActions}>
+                <button type="button" className={s.aiSuggestionIgnore} onClick={() => setAiSuggestion(null)}>
+                  {t('composer.aiSuggestion.ignore')}
+                </button>
+                <button type="button" className={s.aiSuggestionInsert} onClick={handleAiSuggestionInsert}>
+                  {t('composer.aiSuggestion.insert')}
+                </button>
+              </div>
+            </div>
+          )}
+
           {/* COMPOSER */}
           <div
             className={`${s.composer} ${isInternal ? s.composerInternal : ''} ${composerDragOver ? s.composerDragOver : ''}`}
@@ -793,7 +905,7 @@ const [clientTyping, setClientTyping] = useState(false)
                     onClick={handleAiSuggest}
                     disabled={aiReplying || messages.length === 0}
                   >
-                    {aiReplying ? '…' : `✨ ${t('detail.iaSuggestion')}`}
+                    {aiReplying ? `⏳ ${t('composer.aiSuggestion.loading')}` : `✨ ${t('detail.iaSuggestion')}`}
                   </button>
                   <RewriteDropdown disabled={aiRewriting || !replyBody.trim()} loading={aiRewriting} onSelect={(style) => handleAiRewrite(style)} toolbarBtnClass={s.toolbarBtn} />
                 </>
@@ -878,6 +990,18 @@ const [clientTyping, setClientTyping] = useState(false)
                   <option value="admin">En tant que : Support</option>
                   <option value="client">En tant que : Client</option>
                 </select>
+                {!sendAsClient && (
+                  <select
+                    className={s.composerAliasSelect}
+                    value={fromAlias}
+                    onChange={(e) => setFromAlias(e.target.value)}
+                    aria-label={t('composer.aliases.label')}
+                    title={t('composer.aliases.tooltip')}
+                  >
+                    <option value="">{t('composer.aliases.self')}</option>
+                    {ALIASES.map(a => <option key={a.value} value={a.value}>{a.label}</option>)}
+                  </select>
+                )}
                 {!sendAsClient && (
                   <>
                     <label><input type="checkbox" checked={isInternal} onChange={(e) => setIsInternal(e.target.checked)} /> {t('detail.internalNote')}</label>
@@ -897,6 +1021,49 @@ const [clientTyping, setClientTyping] = useState(false)
 
         {/* RIGHT: Sidebar */}
         <div className={s.sidebar}>
+          {/* Sticky tabs: Overview / Client / Activity */}
+          <nav role="tablist" aria-label={t('detail.sidebar.tabs.overview')} className={s.sidebarTabs}>
+            <button
+              type="button"
+              role="tab"
+              id="sidebar-tab-overview"
+              aria-selected={sidebarTab === 'overview'}
+              aria-controls="sidebar-panel-overview"
+              tabIndex={sidebarTab === 'overview' ? 0 : -1}
+              className={`${s.sidebarTab} ${sidebarTab === 'overview' ? s.sidebarTabActive : ''}`}
+              onClick={() => setSidebarTab('overview')}
+            >
+              {t('detail.sidebar.tabs.overview')}
+            </button>
+            <button
+              type="button"
+              role="tab"
+              id="sidebar-tab-client"
+              aria-selected={sidebarTab === 'client'}
+              aria-controls="sidebar-panel-client"
+              tabIndex={sidebarTab === 'client' ? 0 : -1}
+              className={`${s.sidebarTab} ${sidebarTab === 'client' ? s.sidebarTabActive : ''}`}
+              onClick={() => setSidebarTab('client')}
+            >
+              {t('detail.sidebar.tabs.client')}
+            </button>
+            <button
+              type="button"
+              role="tab"
+              id="sidebar-tab-activity"
+              aria-selected={sidebarTab === 'activity'}
+              aria-controls="sidebar-panel-activity"
+              tabIndex={sidebarTab === 'activity' ? 0 : -1}
+              className={`${s.sidebarTab} ${sidebarTab === 'activity' ? s.sidebarTabActive : ''}`}
+              onClick={() => setSidebarTab('activity')}
+            >
+              {t('detail.sidebar.tabs.activity')}
+            </button>
+          </nav>
+
+          {/* ===== TAB: OVERVIEW ===== */}
+          {sidebarTab === 'overview' && (
+          <div role="tabpanel" id="sidebar-panel-overview" aria-labelledby="sidebar-tab-overview">
           {client && (
             <div className={s.sideSection}>
               <div className={s.clientCard}>
@@ -939,6 +1106,39 @@ const [clientTyping, setClientTyping] = useState(false)
                   ))}
                 </ul>
               )}
+              {clientSummary?.nextActions && clientSummary.nextActions.length > 0 && (
+                <>
+                  <h5 className={s.aiCardNextTitle}>{t('detail.aiCard.nextActions.title')}</h5>
+                  <ul className={s.aiCardNextActions}>
+                    {clientSummary.nextActions.map((action: any, i: number) => (
+                      <NextActionItem
+                        key={action.id || `na-${i}`}
+                        action={action}
+                        index={i}
+                        onToggle={async (done) => {
+                          const updatedActions = (clientSummary.nextActions || []).map((a: any, j: number) =>
+                            j === i ? { ...a, done } : a,
+                          )
+                          // PATCH client-summaries to persist
+                          if (clientSummary.id != null) {
+                            try {
+                              await fetch(`/api/client-summaries/${clientSummary.id}`, {
+                                method: 'PATCH',
+                                credentials: 'include',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({ nextActions: updatedActions }),
+                              })
+                            } catch {
+                              /* keep local state updated even if persist fails */
+                            }
+                          }
+                          setClientSummary({ ...clientSummary, nextActions: updatedActions })
+                        }}
+                      />
+                    ))}
+                  </ul>
+                </>
+              )}
             </div>
           )}
 
@@ -969,6 +1169,72 @@ const [clientTyping, setClientTyping] = useState(false)
             <div className={s.sideField}><span className={s.sideLabel}>{t('detail.assigned')}</span><span className={s.sideValue}>{typeof ticket.assignedTo === 'object' && ticket.assignedTo ? (ticket.assignedTo as { firstName?: string }).firstName || 'Admin' : '—'}</span></div>
           </div>
 
+          {features.timeTracking && (
+            <div className={s.sideSection}>
+              <div className={s.sideSectionTitle}>{t('detail.time')} <span style={{ fontWeight: 700, fontSize: 13, color: '#d97706' }}>{totalMin > 0 ? `${Math.floor(totalMin / 60)}h${String(totalMin % 60).padStart(2, '0')} ${t('detail.total')}` : '0min'}</span></div>
+              {/* Timer */}
+              <div className={s.timer}>
+                <span className={`${s.timerDisplay} ${timerRunning ? s.timerActive : ''}`}>
+                  {String(Math.floor(timerSeconds / 60)).padStart(2, '0')}:{String(timerSeconds % 60).padStart(2, '0')}
+                </span>
+                {!timerRunning ? (
+                  <button className={s.timerBtn} onClick={() => setTimerRunning(true)} style={{ color: '#dc2626', borderColor: '#dc2626' }} aria-label="Démarrer le timer">{timerSeconds > 0 ? '▶' : '▶ Go'}</button>
+                ) : (
+                  <button className={s.timerBtn} onClick={() => setTimerRunning(false)} aria-label="Mettre en pause le timer">⏸</button>
+                )}
+                {timerSeconds >= 60 && !timerRunning && (
+                  <button className={s.timerBtn} onClick={() => { handleTimerSave(); localStorage.removeItem(`timer-sec-${ticketId}`); localStorage.removeItem(`timer-run-${ticketId}`) }} style={{ color: '#16a34a', borderColor: '#16a34a' }} aria-label="Sauvegarder le temps">💾 {Math.round(timerSeconds / 60)}m</button>
+                )}
+              </div>
+              {/* Manual time entry */}
+              <div style={{ display: 'flex', gap: 6, marginTop: 8, alignItems: 'center' }}>
+                <input type="number" min="1" placeholder="min" style={{ width: 60, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} id="manual-time-input" />
+                <button className={s.timerBtn} onClick={async () => {
+                  const input = document.getElementById('manual-time-input') as HTMLInputElement
+                  const mins = Number(input?.value)
+                  if (!mins || mins < 1 || !ticketId) return
+                  try {
+                    await fetch('/api/time-entries', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ ticket: Number(ticketId), duration: mins, date: new Date().toISOString(), description: 'Saisie manuelle' }) })
+                    if (input) input.value = ''
+                    fetchAll()
+                  } catch {}
+                }} style={{ fontSize: 11 }}>+ Ajouter</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>
+                  <button
+                    onClick={async () => {
+                      const newVal = ticket.billable === false ? true : false
+                      try { await fetch(`/api/tickets/${ticketId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ billable: newVal }) }); fetchAll() } catch {}
+                    }}
+                    style={{ fontWeight: 600, color: (ticket.billable !== false) ? '#16a34a' : '#dc2626', background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, textDecoration: 'underline' }}
+                  >
+                    {(ticket.billable !== false) ? 'Oui' : 'Non'}
+                  </button>
+                </div>
+                {totalMin > 0 && (
+                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }}>
+                    <span>Montant estimé</span>
+                    <span style={{ fontWeight: 700, color: 'var(--theme-text)' }}>{((totalMin / 60) * 60).toFixed(0)}€</span>
+                  </div>
+                )}
+              </div>
+              {/* Time entries */}
+              {timeEntries.length > 0 && (
+                <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 title={e.description} style={{ fontWeight: 600, cursor: e.description ? 'help' : 'default' }}>{e.duration}min</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
           {/* #6 — Tags section */}
           <div className={s.sideSection}>
             <div className={s.sideSectionTitle}>{t('detail.tags')}</div>
@@ -1091,94 +1357,85 @@ const [clientTyping, setClientTyping] = useState(false)
             </div>
           </div>
 
-          {features.timeTracking && (
+          {summaryLoading && (
             <div className={s.sideSection}>
-              <div className={s.sideSectionTitle}>{t('detail.time')} <span style={{ fontWeight: 700, fontSize: 13, color: '#d97706' }}>{totalMin > 0 ? `${Math.floor(totalMin / 60)}h${String(totalMin % 60).padStart(2, '0')} ${t('detail.total')}` : '0min'}</span></div>
-              {/* Timer */}
-              <div className={s.timer}>
-                <span className={`${s.timerDisplay} ${timerRunning ? s.timerActive : ''}`}>
-                  {String(Math.floor(timerSeconds / 60)).padStart(2, '0')}:{String(timerSeconds % 60).padStart(2, '0')}
-                </span>
-                {!timerRunning ? (
-                  <button className={s.timerBtn} onClick={() => setTimerRunning(true)} style={{ color: '#dc2626', borderColor: '#dc2626' }} aria-label="Démarrer le timer">{timerSeconds > 0 ? '▶' : '▶ Go'}</button>
-                ) : (
-                  <button className={s.timerBtn} onClick={() => setTimerRunning(false)} aria-label="Mettre en pause le timer">⏸</button>
-                )}
-                {timerSeconds >= 60 && !timerRunning && (
-                  <button className={s.timerBtn} onClick={() => { handleTimerSave(); localStorage.removeItem(`timer-sec-${ticketId}`); localStorage.removeItem(`timer-run-${ticketId}`) }} style={{ color: '#16a34a', borderColor: '#16a34a' }} aria-label="Sauvegarder le temps">💾 {Math.round(timerSeconds / 60)}m</button>
-                )}
-              </div>
-              {/* Manual time entry */}
-              <div style={{ display: 'flex', gap: 6, marginTop: 8, alignItems: 'center' }}>
-                <input type="number" min="1" placeholder="min" style={{ width: 60, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} id="manual-time-input" />
-                <button className={s.timerBtn} onClick={async () => {
-                  const input = document.getElementById('manual-time-input') as HTMLInputElement
-                  const mins = Number(input?.value)
-                  if (!mins || mins < 1 || !ticketId) return
-                  try {
-                    await fetch('/api/time-entries', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ ticket: Number(ticketId), duration: mins, date: new Date().toISOString(), description: 'Saisie manuelle' }) })
-                    if (input) input.value = ''
-                    fetchAll()
-                  } catch {}
-                }} style={{ fontSize: 11 }}>+ Ajouter</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>
-                  <button
-                    onClick={async () => {
-                      const newVal = ticket.billable === false ? true : false
-                      try { await fetch(`/api/tickets/${ticketId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ billable: newVal }) }); fetchAll() } catch {}
-                    }}
-                    style={{ fontWeight: 600, color: (ticket.billable !== false) ? '#16a34a' : '#dc2626', background: 'none', border: 'none', cursor: 'pointer', fontSize: 11, textDecoration: 'underline' }}
-                  >
-                    {(ticket.billable !== false) ? 'Oui' : 'Non'}
-                  </button>
-                </div>
-                {totalMin > 0 && (
-                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }}>
-                    <span>Montant estimé</span>
-                    <span style={{ fontWeight: 700, color: 'var(--theme-text)' }}>{((totalMin / 60) * 60).toFixed(0)}€</span>
-                  </div>
-                )}
-              </div>
-              {/* Time entries */}
-              {timeEntries.length > 0 && (
-                <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 title={e.description} style={{ fontWeight: 600, cursor: e.description ? 'help' : 'default' }}>{e.duration}min</span>
-                    </div>
-                  ))}
-                </div>
-              )}
+              <div style={{ fontSize: 11, color: 'var(--theme-elevation-400)', textAlign: 'center', padding: 8 }}>✨ Chargement de la synthèse…</div>
             </div>
           )}
+          </div>
+          )}
 
-          {features.activityLog && (
-            <div className={s.sideSection}>
-              <div className={s.sideSectionTitle}>
-                <button className={s.collapseBtn} onClick={() => setShowActivity(!showActivity)} aria-label={showActivity ? 'Masquer le journal' : 'Afficher le journal'}>
-                  Activité {showActivity ? '▾' : '▸'}
-                </button>
-              </div>
-              {showActivity && activityLog.slice(0, 8).map((a) => (
-                <div key={a.id} className={s.activityItem}>
-                  <div className={s.activityDot} style={{ backgroundColor: a.actorType === 'admin' ? '#2563eb' : a.actorType === 'system' ? '#6b7280' : '#16a34a' }} />
-                  <div className={s.activityContent}>
-                    <div className={s.activityText}>{(a.detail || a.action).slice(0, 60)}</div>
-                    <div className={s.activityTime}>{timeAgo(a.createdAt)}</div>
+          {/* ===== TAB: CLIENT (extended) ===== */}
+          {sidebarTab === 'client' && (
+            <div role="tabpanel" id="sidebar-panel-client" aria-labelledby="sidebar-tab-client">
+              {client && (
+                <div className={s.sideSection}>
+                  <div className={s.clientCard}>
+                    <div className={s.clientAvatar}>{initials}</div>
+                    <div className={s.clientInfo}>
+                      <div className={s.clientName}>{client.firstName} {client.lastName}</div>
+                      <div className={s.clientCompany}>{client.company}</div>
+                      <a href={`mailto:${client.email}`} className={s.clientEmail}>{client.email}</a>
+                      {client.phone && (
+                        <a href={`tel:${client.phone}`} className={s.clientEmail}>{client.phone}</a>
+                      )}
+                    </div>
+                  </div>
+                  <div className={s.clientActions}>
+                    <Link href={`/admin/collections/support-clients/${client.id}`} className={s.smallBtn}>{t('client.clientSheet')}</Link>
+                    <button className={s.smallBtn} onClick={() => window.open(`/api/admin/impersonate?clientId=${client.id}`, '_blank')}>{t('client.clientPortal')}</button>
                   </div>
                 </div>
-              ))}
+              )}
+
+              <div className={s.sideSection}>
+                <div className={s.sideSectionTitle}>{t('detail.sidebar.previousTickets')}</div>
+                {previousTickets.length === 0 ? (
+                  <div className={s.previousTicketsEmpty}>—</div>
+                ) : (
+                  <ul className={s.previousTicketsList}>
+                    {previousTickets.map((pt) => (
+                      <li key={pt.id} className={s.previousTicketsItem}>
+                        <Link href={`/admin/collections/tickets/${pt.id}`} className={s.previousTicketsLink}>
+                          <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>
+                        </Link>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
             </div>
           )}
 
-          {summaryLoading && (
-            <div className={s.sideSection}>
-              <div style={{ fontSize: 11, color: 'var(--theme-elevation-400)', textAlign: 'center', padding: 8 }}>✨ Chargement de la synthèse…</div>
+          {/* ===== TAB: ACTIVITY ===== */}
+          {sidebarTab === 'activity' && (
+            <div role="tabpanel" id="sidebar-panel-activity" aria-labelledby="sidebar-tab-activity">
+              {features.activityLog ? (
+                <div className={s.sideSection}>
+                  <div className={s.sideSectionTitle}>{t('detail.activity')}</div>
+                  {activityLog.length === 0 ? (
+                    <div className={s.previousTicketsEmpty}>—</div>
+                  ) : (
+                    activityLog.slice(0, 30).map((a) => (
+                      <div key={a.id} className={s.activityItem}>
+                        <div className={s.activityDot} style={{ backgroundColor: a.actorType === 'admin' ? '#2563eb' : a.actorType === 'system' ? '#6b7280' : '#16a34a' }} />
+                        <div className={s.activityContent}>
+                          <div className={s.activityText}>{(a.detail || a.action).slice(0, 120)}</div>
+                          <div className={s.activityTime}>{timeAgo(a.createdAt)}</div>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
+              ) : (
+                <div className={s.sideSection}>
+                  <div className={s.previousTicketsEmpty}>—</div>
+                </div>
+              )}
             </div>
           )}
         </div>

package/src/views/TicketInboxView/client.tsx

@@ -4,7 +4,8 @@ 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 { StatusPill, computeSlaState, formatSlaRemaining } from '../shared'
+import { StatusPill } from '../shared/StatusPill'
+import { computeSlaState, formatSlaRemaining } from '../shared/sla'
 import s from '../../styles/TicketInbox.module.scss'
 
 interface Ticket {