@consilioweb/payload-support 0.10.1 → 0.12.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') => {
@@ -574,12 +661,26 @@ const [clientTyping, setClientTyping] = useState(false)
 
   return (
     <div className={s.page}>
-      {/* TOP BAR */}
+      {/* 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>
         <div className={s.ticketMeta}>
-          <span className={s.ticketNumber}>{ticket.ticketNumber as string}</span>
-          <span className={s.ticketSubject}>{ticket.subject as string}</span>
+          {/* detail__id : ticketNumber · category · source email */}
+          <span className={s.ticketNumber}>
+            <span>{ticket.ticketNumber as string}</span>
+            {ticket.category ? (
+              <>
+                <span className={s.ticketNumberSep}>·</span>
+                <span className={s.ticketNumberCat}>{ticket.category as string}</span>
+              </>
+            ) : null}
+            <span className={s.ticketNumberSep}>·</span>
+            <span className={s.ticketNumberSource} aria-label={t('detail.source')}>
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden><rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" /></svg>
+              {(ticket.source as string) === 'email' ? 'Email' : (ticket.source as string) || t('ticket.source.portal')}
+            </span>
+          </span>
+          <h1 className={s.ticketSubject}>{ticket.subject as string}</h1>
         </div>
         <div className={s.topBarRight}>
           <select className={s.statusChip} style={{ background: st.bg, color: st.color }} value={(ticket.status as string) || 'open'} onChange={(e) => handleStatusChange(e.target.value)} disabled={statusUpdating} aria-label={t('ticket.status.label')}>
@@ -684,7 +785,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 +877,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 +919,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} />
                 </>
@@ -835,35 +961,38 @@ const [clientTyping, setClientTyping] = useState(false)
                 </select>
               )}
             </div>
-            <RichTextEditor
-              ref={editorRef}
-              onChange={(html, text) => { setReplyHtml(html); setReplyBody(text) }}
-              placeholder={isInternal ? t('composer.placeholderInternal') : t('composer.placeholderReplyTo', { name: client?.firstName || 'client' })}
-              minHeight={100}
-              borderColor="transparent"
-              onFileUpload={async (file) => {
-                try {
-                  const formData = new FormData()
-                  formData.append('file', file)
-                  formData.append('_payload', JSON.stringify({ alt: file.name }))
-                  const ur = await fetch('/api/media', { method: 'POST', credentials: 'include', body: formData })
-                  if (!ur.ok) return null
-                  const ud = await ur.json()
-                  return ud.doc?.url || null
-                } catch { return null }
-              }}
-            />
-            {/* #5 — File upload preview */}
-            {pendingFiles.length > 0 && (
-              <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>
-                  </div>
-                ))}
-              </div>
-            )}
+            {/* composerBox (composer__box maquette) : wrap the Lexical RTE with maquette box style */}
+            <div className={s.composerBox}>
+              <RichTextEditor
+                ref={editorRef}
+                onChange={(html, text) => { setReplyHtml(html); setReplyBody(text) }}
+                placeholder={isInternal ? t('composer.placeholderInternal') : t('composer.placeholderReplyTo', { name: client?.firstName || 'client' })}
+                minHeight={100}
+                borderColor="transparent"
+                onFileUpload={async (file) => {
+                  try {
+                    const formData = new FormData()
+                    formData.append('file', file)
+                    formData.append('_payload', JSON.stringify({ alt: file.name }))
+                    const ur = await fetch('/api/media', { method: 'POST', credentials: 'include', body: formData })
+                    if (!ur.ok) return null
+                    const ud = await ur.json()
+                    return ud.doc?.url || null
+                  } catch { return null }
+                }}
+              />
+              {/* #5 — File upload preview */}
+              {pendingFiles.length > 0 && (
+                <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>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
             <div className={s.composerFooter}>
               <div className={s.composerOptions}>
                 <select
@@ -878,6 +1007,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 +1038,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 +1123,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 +1186,81 @@ 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}>
+                <span>{t('detail.time')}</span>
+                <span style={{ color: 'var(--theme-text)', fontWeight: 600, textTransform: 'none', letterSpacing: 0 }}>
+                  {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)} aria-label="Démarrer le timer">{timerSeconds > 0 ? '▶' : '▶ Go'}</button>
+                ) : (
+                  <button className={s.timerBtn} onClick={() => setTimerRunning(false)} aria-label="Mettre en pause le timer">⏸ Pause</button>
+                )}
+                {timerSeconds >= 60 && !timerRunning && (
+                  <button className={s.timerBtn} onClick={() => { handleTimerSave(); localStorage.removeItem(`timer-sec-${ticketId}`); localStorage.removeItem(`timer-run-${ticketId}`) }} aria-label="Sauvegarder le temps">💾 {Math.round(timerSeconds / 60)}m</button>
+                )}
+              </div>
+              {/* Progress bar (tt__bar maquette) — full = 120 min reference */}
+              <div className={s.timerBar} aria-hidden>
+                <div className={s.timerBarFill} style={{ width: `${Math.min(100, ((totalMin + Math.floor(timerSeconds / 60)) / 120) * 100)}%` }} />
+              </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 +1383,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>