@consilioweb/payload-support 0.9.13 → 0.10.0

package/src/views/TicketDetailView/client.tsx

@@ -7,6 +7,7 @@ import { RichTextEditor, type RichTextEditorHandle } from '../../components/Rich
 import { hasCodeBlocks, MessageWithCodeBlocks, CodeBlockRendererHtml } from '../../components/TicketConversation/components/CodeBlock'
 import { CodeBlockInserter } from '../../components/TicketConversation/components/CodeBlockInserter'
 import { getFeatures } from '../shared/config'
+import { computeSlaState, formatSlaRemaining } from '../shared/sla'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
 import s from '../../styles/TicketDetail.module.scss'
 
@@ -604,6 +605,41 @@ const [clientTyping, setClientTyping] = useState(false)
         </div>
       </div>
 
+      {/* SLA BREACH BANNER */}
+      {(() => {
+        const slaInfo = computeSlaState({
+          slaFirstResponseDue: ticket.slaFirstResponseDue as string | null,
+          slaFirstResponseBreached: ticket.slaFirstResponseBreached as boolean | null,
+          slaResolutionDue: ticket.slaResolutionDue as string | null,
+          slaResolutionBreached: ticket.slaResolutionBreached as boolean | null,
+          firstResponseAt: ticket.firstResponseAt as string | null,
+        })
+        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' }) : ''
+        return (
+          <div className={s.slaBanner} role="alert">
+            <span className={s.slaBannerIcon} aria-hidden>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 9v4M12 17h.01" /><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" /></svg>
+            </span>
+            <div className={s.slaBannerBody}>
+              <strong>{t('inbox.slaBanner.breached')}</strong>
+              <span className={s.slaBannerSep}>—</span>
+              <span>{t('inbox.slaBanner.responseAwaitedFor', { duration })}</span>
+              {target && <span className={s.slaBannerTarget}>· {t('inbox.slaBanner.target', { target })}</span>}
+            </div>
+            <button
+              type="button"
+              className={s.slaBannerCta}
+              onClick={() => handleStatusChange('escalated' as any)}
+              aria-label={t('inbox.slaBanner.escalate')}
+            >
+              ↑ {t('inbox.slaBanner.escalate')}
+            </button>
+          </div>
+        )
+      })()}
+
       {/* PRESENCE BANNER */}
       {otherViewers.length > 0 && (
         <div style={{
@@ -632,9 +668,18 @@ const [clientTyping, setClientTyping] = useState(false)
               return (
                 <React.Fragment key={msg.id}>
                   {showDate && <div className={s.dateSeparator}><span className={s.dateSeparatorText}>{dateLabel(msg.createdAt)}</span></div>}
-                  <div className={`${s.message} ${msg.isInternal ? s.messageInternal : ''}`} style={isPendingDelete ? { opacity: 0.3, pointerEvents: 'none' } : undefined}>
+                  <div className={`${s.message} ${isAdmin ? s.messageAdmin : s.messageClient} ${msg.isInternal ? s.messageInternal : ''}`} style={isPendingDelete ? { opacity: 0.3, pointerEvents: 'none' } : undefined}>
                     {/* #10 — Client avatar purple */}
-                    <div className={s.avatar} style={{ backgroundColor: isAdmin ? '#2563eb' : msg.authorType === 'email' ? '#ea580c' : '#7c3aed' }}>
+                    <div
+                      className={s.avatar}
+                      style={{
+                        backgroundColor: isAdmin
+                          ? 'var(--theme-info-500, #2a6bd8)'
+                          : msg.authorType === 'email'
+                            ? 'var(--theme-warning-500, #c97a0a)'
+                            : 'var(--theme-accent-500, #6b46e8)',
+                      }}
+                    >
                       {isAdmin ? 'CW' : initials}
                     </div>
                     <div className={s.messageContent}>
@@ -741,7 +786,15 @@ const [clientTyping, setClientTyping] = useState(false)
             <div className={s.composerToolbar}>
               {features.ai && (
                 <>
-                  <button className={s.toolbarBtn} data-tooltip={t('detail.iaSuggestion')} aria-label={t('detail.iaSuggestion')} onClick={handleAiSuggest} disabled={aiReplying || messages.length === 0} style={{ fontSize: 11, fontWeight: 700, padding: '4px 10px', width: 'auto' }}>{aiReplying ? '...' : `✨ ${t('detail.iaSuggestion')}`}</button>
+                  <button
+                    className={`${s.toolbarBtn} ${s.toolbarBtnAi}`}
+                    data-tooltip={t('detail.iaSuggestion')}
+                    aria-label={t('detail.iaSuggestion')}
+                    onClick={handleAiSuggest}
+                    disabled={aiReplying || messages.length === 0}
+                  >
+                    {aiReplying ? '…' : `✨ ${t('detail.iaSuggestion')}`}
+                  </button>
                   <RewriteDropdown disabled={aiRewriting || !replyBody.trim()} loading={aiRewriting} onSelect={(style) => handleAiRewrite(style)} toolbarBtnClass={s.toolbarBtn} />
                 </>
               )}
@@ -832,6 +885,9 @@ const [clientTyping, setClientTyping] = useState(false)
                   </>
                 )}
               </div>
+              <span className={s.sendShortcut} aria-hidden>
+                <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')}
               </button>
@@ -858,6 +914,34 @@ const [clientTyping, setClientTyping] = useState(false)
             </div>
           )}
 
+          {/* AI client synthesis — promoted: highest-value briefing for the agent */}
+          {clientSummary && clientSummary.summary && (
+            <div className={`${s.sideSection} ${s.aiCard}`}>
+              <div className={s.aiCardTitle}>
+                <span className={s.aiCardIcon} aria-hidden>✨</span>
+                Synthèse client
+              </div>
+              <p className={s.aiCardLead}>{clientSummary.summary}</p>
+              {clientSummary.recurringTopics && clientSummary.recurringTopics.length > 0 && (
+                <div className={s.aiCardChips}>
+                  {clientSummary.recurringTopics.slice(0, 5).map((tp, i) => (
+                    <span key={`tp-${i}`} className={s.aiChip}>{tp.topic}</span>
+                  ))}
+                </div>
+              )}
+              {clientSummary.keyFacts && clientSummary.keyFacts.length > 0 && (
+                <ul className={s.aiCardFacts}>
+                  {clientSummary.keyFacts.slice(0, 4).map((f, i) => (
+                    <li key={`kf-${i}`} className={s.aiCardFact}>
+                      <span className={s.aiCardDot} aria-hidden />
+                      {f}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          )}
+
           {/* #1 — Editable sidebar fields */}
           <div className={s.sideSection}>
             <div className={s.sideSectionTitle}>{t('detail.details')}</div>
@@ -1092,32 +1176,9 @@ const [clientTyping, setClientTyping] = useState(false)
             </div>
           )}
 
-          {/* Client Intelligence (compact) */}
-          {clientSummary && clientSummary.summary && (
-            <div className={s.sideSection} style={{ background: 'linear-gradient(135deg, rgba(37,99,235,0.03) 0%, rgba(139,92,246,0.03) 100%)' }}>
-              <div className={s.sideSectionTitle} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                <span style={{ fontSize: 13 }}>🧠</span> Résumé client
-              </div>
-              <p style={{ margin: '0 0 8px', fontSize: 11, lineHeight: 1.6, color: '#374151' }}>{clientSummary.summary}</p>
-              {clientSummary.recurringTopics && clientSummary.recurringTopics.length > 0 && (
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 6 }}>
-                  {clientSummary.recurringTopics.slice(0, 3).map((tp, i) => (
-                    <span key={i} style={{ padding: '2px 8px', borderRadius: 10, background: 'rgba(37,99,235,0.08)', color: '#2563eb', fontSize: 10, fontWeight: 600 }}>{tp.topic}</span>
-                  ))}
-                </div>
-              )}
-              {clientSummary.keyFacts && clientSummary.keyFacts.length > 0 && (
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
-                  {clientSummary.keyFacts.slice(0, 3).map((f, i) => (
-                    <span key={i} style={{ padding: '2px 8px', borderRadius: 10, background: 'rgba(22,163,74,0.08)', color: '#16a34a', fontSize: 10, fontWeight: 600 }}>{f}</span>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
           {summaryLoading && (
             <div className={s.sideSection}>
-              <div style={{ fontSize: 11, color: '#94a3b8', textAlign: 'center', padding: 8 }}>🧠 Chargement résumé...</div>
+              <div style={{ fontSize: 11, color: 'var(--theme-elevation-400)', textAlign: 'center', padding: 8 }}>✨ Chargement de la synthèse…</div>
             </div>
           )}
         </div>

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 { StatusPill, computeSlaState, formatSlaRemaining } from '../shared'
 import s from '../../styles/TicketInbox.module.scss'
 
 interface Ticket {
@@ -18,35 +19,29 @@ interface Ticket {
   createdAt: string
   lastClientMessageAt?: string
   lastAdminReadAt?: string
+  // SLA fields (already declared on the Tickets collection)
+  slaFirstResponseDue?: string | null
+  slaFirstResponseBreached?: boolean | null
+  slaResolutionDue?: string | null
+  slaResolutionBreached?: boolean | null
+  firstResponseAt?: string | null
 }
 
-type Tab = 'all' | 'open' | 'waiting_client' | 'resolved'
-
-const STATUS_DOTS: Record<string, string> = {
-  open: '#22c55e',
-  waiting_client: '#eab308',
-  resolved: '#94a3b8',
-}
-
-const STATUS_LABEL_KEYS: Record<string, string> = {
-  open: 'inbox.tabs.open',
-  waiting_client: 'inbox.tabs.waiting',
-  resolved: 'inbox.tabs.resolved',
-}
+type Tab = 'all' | 'open' | 'waiting_client' | 'resolved' | 'sla_breach'
 
 const PRIORITY_COLORS: Record<string, string> = {
-  urgent: '#ef4444',
-  high: '#f97316',
-  normal: 'transparent',
-  low: 'transparent',
+  urgent: 'var(--theme-error-500)',
+  high: 'var(--theme-warning-500)',
+  normal: 'var(--theme-info-500, #2a6bd8)',
+  low: 'var(--theme-elevation-400)',
 }
 
-const CATEGORY_LABEL_KEYS: Record<string, string> = {
-  bug: 'ticket.category.bug',
-  content: 'ticket.category.content',
-  feature: 'ticket.category.feature',
-  question: 'ticket.category.question',
-  hosting: 'ticket.category.hosting',
+const STATUS_VARIANT: Record<string, 'open' | 'pending' | 'resolved' | 'closed'> = {
+  open: 'open',
+  waiting_client: 'pending',
+  pending: 'pending',
+  resolved: 'resolved',
+  closed: 'closed',
 }
 
 function relativeTime(dateStr: string): string {
@@ -68,13 +63,13 @@ export const TicketInboxClient: React.FC = () => {
   const [loading, setLoading] = useState(true)
   const [tab, setTab] = useState<Tab>(() => {
     const urlTab = searchParams.get('tab')
-    if (urlTab && ['all', 'open', 'waiting_client', 'resolved'].includes(urlTab)) return urlTab as Tab
+    if (urlTab && ['all', 'open', 'waiting_client', 'resolved', 'sla_breach'].includes(urlTab)) return urlTab as Tab
     return 'all'
   })
   // Sync tab with URL searchParams on navigation
   useEffect(() => {
     const urlTab = searchParams.get('tab')
-    if (urlTab && ['all', 'open', 'waiting_client', 'resolved'].includes(urlTab)) {
+    if (urlTab && ['all', 'open', 'waiting_client', 'resolved', 'sla_breach'].includes(urlTab)) {
       setTab(urlTab as Tab)
     } else if (!urlTab) {
       setTab('all')
@@ -82,7 +77,7 @@ export const TicketInboxClient: React.FC = () => {
   }, [searchParams])
   const [search, setSearch] = useState('')
   const [sort, setSort] = useState('-updatedAt')
-  const [counts, setCounts] = useState({ all: 0, open: 0, waiting: 0, resolved: 0 })
+  const [counts, setCounts] = useState({ all: 0, open: 0, waiting: 0, resolved: 0, breach: 0 })
   const [selectedIdx, setSelectedIdx] = useState(-1)
   const [checkedIds, setCheckedIds] = useState<Set<number>>(new Set())
   const [bulkAction, setBulkAction] = useState('')
@@ -121,8 +116,23 @@ export const TicketInboxClient: React.FC = () => {
   }
 
   const fetchTickets = useCallback(async () => {
-    const params = [`limit=30`, `sort=${sort}`, `depth=1`, `select[id]=true`, `select[ticketNumber]=true`, `select[subject]=true`, `select[status]=true`, `select[priority]=true`, `select[category]=true`, `select[client]=true`, `select[updatedAt]=true`, `select[lastClientMessageAt]=true`, `select[lastAdminReadAt]=true`]
-    if (tab !== 'all') params.push(`where[status][equals]=${tab}`)
+    const params = [
+      `limit=30`, `sort=${sort}`, `depth=1`,
+      `select[id]=true`, `select[ticketNumber]=true`, `select[subject]=true`,
+      `select[status]=true`, `select[priority]=true`, `select[category]=true`,
+      `select[client]=true`, `select[updatedAt]=true`,
+      `select[lastClientMessageAt]=true`, `select[lastAdminReadAt]=true`,
+      `select[slaFirstResponseDue]=true`, `select[slaFirstResponseBreached]=true`,
+      `select[slaResolutionDue]=true`, `select[slaResolutionBreached]=true`,
+      `select[firstResponseAt]=true`,
+    ]
+    if (tab === 'sla_breach') {
+      // Either first-response breached or resolution breached
+      params.push(`where[or][0][slaFirstResponseBreached][equals]=true`)
+      params.push(`where[or][1][slaResolutionBreached][equals]=true`)
+    } else if (tab !== 'all') {
+      params.push(`where[status][equals]=${tab}`)
+    }
     if (search.trim()) {
       params.push(`where[or][0][subject][contains]=${encodeURIComponent(search)}`)
       params.push(`where[or][1][ticketNumber][contains]=${encodeURIComponent(search)}`)
@@ -148,14 +158,21 @@ export const TicketInboxClient: React.FC = () => {
   useEffect(() => {
     const fetchCounts = async () => {
       try {
-        const [all, openRes, waiting, resolved] = await Promise.all([
+        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' }),
         ])
-        const [a, o, w, r] = await Promise.all([all.json(), openRes.json(), waiting.json(), resolved.json()])
-        setCounts({ all: a.totalDocs || 0, open: o.totalDocs || 0, waiting: w.totalDocs || 0, resolved: r.totalDocs || 0 })
+        const [a, o, w, r, b] = await Promise.all([all.json(), openRes.json(), waiting.json(), resolved.json(), breach.json()])
+        setCounts({
+          all: a.totalDocs || 0,
+          open: o.totalDocs || 0,
+          waiting: w.totalDocs || 0,
+          resolved: r.totalDocs || 0,
+          breach: b.totalDocs || 0,
+        })
       } catch { /* silent */ }
     }
     fetchCounts()
@@ -181,10 +198,11 @@ export const TicketInboxClient: React.FC = () => {
     return () => window.removeEventListener('keydown', handleKey)
   }, [tickets, selectedIdx])
 
-  const tabs: Array<{ key: Tab; label: string; count: number }> = [
+  const tabs: Array<{ key: Tab; label: string; count: number; alert?: boolean }> = [
     { key: 'all', label: t('inbox.tabs.all'), count: counts.all },
     { key: 'open', label: t('inbox.tabs.open'), count: counts.open },
     { key: 'waiting_client', label: t('inbox.tabs.waiting'), count: counts.waiting },
+    { key: 'sla_breach', label: t('inbox.tabs.slaBreach'), count: counts.breach, alert: true },
     { key: 'resolved', label: t('inbox.tabs.resolved'), count: counts.resolved },
   ]
 
@@ -192,7 +210,17 @@ export const TicketInboxClient: React.FC = () => {
     <div className={s.page}>
       {/* Header */}
       <div className={s.header}>
-        <h1 className={s.title}>{t('inbox.title')}</h1>
+        <div>
+          <h1 className={s.title}>{t('inbox.title')}</h1>
+          <p className={s.subtitle}>
+            {tickets.length > 0 && `${tickets.length} sur ${counts.all} · `}
+            {counts.breach > 0 ? (
+              <span className={s.subtitleBreach}>{counts.breach} SLA dépassé{counts.breach > 1 ? 's' : ''}</span>
+            ) : (
+              <span>Aucun SLA en alerte</span>
+            )}
+          </p>
+        </div>
         <div className={s.headerRight}>
           <div className={s.searchWrap}>
             <svg className={s.searchIcon} width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.5"/><path d="M11 11l3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
@@ -210,17 +238,22 @@ export const TicketInboxClient: React.FC = () => {
       </div>
 
       {/* Tabs */}
-      <div className={s.tabs}>
-        {tabs.map((tk) => (
-          <button
-            key={tk.key}
-            className={`${s.tab} ${tab === tk.key ? s.tabActive : ''}`}
-            onClick={() => { setTab(tk.key); setSelectedIdx(-1) }}
-          >
-            {tk.label}
-            <span className={s.tabCount}>({tk.count})</span>
-          </button>
-        ))}
+      <div className={s.tabs} role="tablist">
+        {tabs.map((tk) => {
+          const isAlert = tk.alert && tk.count > 0
+          return (
+            <button
+              key={tk.key}
+              role="tab"
+              aria-selected={tab === tk.key}
+              className={`${s.tab} ${tab === tk.key ? s.tabActive : ''} ${isAlert ? s.tabAlert : ''}`}
+              onClick={() => { setTab(tk.key); setSelectedIdx(-1) }}
+            >
+              {tk.label}
+              <span className={`${s.tabCount} ${isAlert ? s.tabCountAlert : ''}`}>{tk.count}</span>
+            </button>
+          )
+        })}
       </div>
 
       {/* Sort + Bulk */}
@@ -264,12 +297,20 @@ export const TicketInboxClient: React.FC = () => {
             const displayClient = clientName ? `${clientName}${clientCompany ? `, ${clientCompany}` : ''}` : '—'
             const isUnread = tk.lastClientMessageAt && (!tk.lastAdminReadAt || new Date(tk.lastClientMessageAt) > new Date(tk.lastAdminReadAt))
             const priorityColor = PRIORITY_COLORS[tk.priority] || 'transparent'
+            const sla = computeSlaState(tk)
+            const isBreach = sla.state === 'breach'
+            const statusVariant: 'open' | 'pending' | 'resolved' | 'closed' = STATUS_VARIANT[tk.status] || 'open'
 
             return (
               <a
                 key={tk.id}
                 href={`/admin/support/ticket?id=${tk.id}`}
-                className={`${s.row} ${idx === selectedIdx ? s.rowSelected : ''}`}
+                className={[
+                  s.row,
+                  idx === selectedIdx ? s.rowSelected : '',
+                  isUnread ? s.rowUnread : '',
+                  isBreach ? s.rowBreach : '',
+                ].filter(Boolean).join(' ')}
                 onClick={(e) => { e.preventDefault(); window.location.href = `/admin/support/ticket?id=${tk.id}` }}
               >
                 <input
@@ -277,15 +318,30 @@ export const TicketInboxClient: React.FC = () => {
                   checked={checkedIds.has(tk.id)}
                   onClick={(e) => e.stopPropagation()}
                   onChange={() => toggleCheck(tk.id)}
-                  style={{ width: 14, height: 14, cursor: 'pointer', accentColor: '#2563eb' }}
+                  className={s.rowCheck}
+                  aria-label={`Sélectionner ${tk.ticketNumber}`}
+                />
+                <span
+                  className={s.priorityDot}
+                  style={{ background: priorityColor }}
+                  aria-label={`Priorité ${tk.priority}`}
+                  title={`Priorité ${tk.priority}`}
                 />
-                <div className={s.statusDot} style={{ backgroundColor: STATUS_DOTS[tk.status] || '#94a3b8' }} />
-                <span className={s.statusText}>{t(STATUS_LABEL_KEYS[tk.status] || 'ticket.status.open')}</span>
+                <StatusPill status={isBreach ? 'sla-breach' : statusVariant} />
                 <span className={s.ticketNum}>{tk.ticketNumber}</span>
                 <span className={s.subject}>{tk.subject}</span>
                 <span className={s.client}>{displayClient}</span>
-                {tk.category ? <span className={s.categoryChip}>[{t(CATEGORY_LABEL_KEYS[tk.category] || 'ticket.category.bug')}]</span> : <span />}
-                <div className={s.priorityBar} style={{ backgroundColor: priorityColor }} />
+                <span
+                  className={[
+                    s.slaCell,
+                    sla.state === 'breach' ? s.slaBreach : '',
+                    sla.state === 'warn' ? s.slaWarn : '',
+                    sla.state === 'ok' ? s.slaOk : '',
+                  ].filter(Boolean).join(' ')}
+                  title={sla.due ? new Date(sla.due).toLocaleString('fr-FR') : ''}
+                >
+                  {formatSlaRemaining(sla.remainingMs)}
+                </span>
                 <span className={s.timeAgo}>{relativeTime(tk.updatedAt)}</span>
                 {isUnread ? <div className={s.unreadDot} /> : <span />}
               </a>

package/src/views/shared/StatusPill.module.scss

@@ -0,0 +1,66 @@
+// StatusPill — sémantique unique des statuts ticket
+// Tous les fonds/couleurs sont mappés sur les --theme-* Payload natifs
+// via color-mix() pour rester cohérent en light/dark.
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  line-height: 1;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+// ---------- Variants ----------
+// Each variant uses color-mix on Payload's theme tokens so dark/light just works.
+
+.open {
+  background: color-mix(in srgb, var(--theme-success-500, #2dbf86) 12%, transparent);
+  color: var(--theme-success-500, #16a34a);
+}
+
+.pending {
+  background: color-mix(in srgb, var(--theme-warning-500, #e9a23a) 14%, transparent);
+  color: var(--theme-warning-500, #c97a0a);
+}
+
+.resolved {
+  background: color-mix(in srgb, var(--theme-elevation-500, #7a7a7a) 14%, transparent);
+  color: var(--theme-elevation-600, #5e5e5e);
+}
+
+.neutral {
+  background: var(--theme-elevation-100, #f3f3f3);
+  color: var(--theme-elevation-600, #5e5e5e);
+}
+
+.escalated {
+  background: color-mix(in srgb, var(--theme-error-500, #c4392c) 14%, transparent);
+  color: var(--theme-error-500, #c4392c);
+}
+
+.breach {
+  background: color-mix(in srgb, var(--theme-error-500, #c4392c) 14%, transparent);
+  color: var(--theme-error-500, #c4392c);
+  border-color: color-mix(in srgb, var(--theme-error-500, #c4392c) 30%, transparent);
+}
+
+[data-theme='dark'] {
+  .open     { color: var(--theme-success-500, #2dbf86); }
+  .pending  { color: var(--theme-warning-500, #e9a23a); }
+  .escalated, .breach { color: var(--theme-error-500, #ed5f51); }
+}

package/src/views/shared/StatusPill.tsx

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

package/src/views/shared/index.ts

@@ -4,3 +4,7 @@ export { AdminViewHeader } from './AdminViewHeader'
 export { Skeleton, SkeletonText, SkeletonCard, SkeletonTable, SkeletonDashboard } from './Skeleton'
 export { getFeatures, saveFeatures, DEFAULT_FEATURES } from './config'
 export type { TicketingFeatures } from './config'
+export { StatusPill } from './StatusPill'
+export type { StatusPillProps, TicketStatusVariant } from './StatusPill'
+export { computeSlaState, formatSlaRemaining } from './sla'
+export type { SlaState } from './sla'

package/src/views/shared/sla.ts

@@ -0,0 +1,56 @@
+// SLA helpers — derive remaining time + visual state from ticket's
+// slaFirstResponseDue / slaFirstResponseBreached fields (already on Tickets).
+
+export type SlaState = 'ok' | 'warn' | 'breach' | 'none' | 'met'
+
+export interface SlaInput {
+  slaFirstResponseDue?: string | null
+  slaFirstResponseBreached?: boolean | null
+  firstResponseAt?: string | null
+  slaResolutionDue?: string | null
+  slaResolutionBreached?: boolean | null
+}
+
+const HOUR_MS = 3_600_000
+const MINUTE_MS = 60_000
+
+export function computeSlaState(t: SlaInput, now: Date = new Date()): {
+  state: SlaState
+  remainingMs: number | null
+  due: string | null
+} {
+  // Once first-response is met, fall back to resolution SLA.
+  const hasFirstResponse = !!t.firstResponseAt
+  const dueRaw = hasFirstResponse ? t.slaResolutionDue : t.slaFirstResponseDue
+  const breached = hasFirstResponse ? !!t.slaResolutionBreached : !!t.slaFirstResponseBreached
+
+  if (!dueRaw) return { state: 'none', remainingMs: null, due: null }
+
+  const dueDate = new Date(dueRaw)
+  if (Number.isNaN(dueDate.getTime())) return { state: 'none', remainingMs: null, due: null }
+
+  const remaining = dueDate.getTime() - now.getTime()
+
+  if (breached || remaining < 0) {
+    return { state: 'breach', remainingMs: remaining, due: dueRaw }
+  }
+  if (remaining < HOUR_MS) {
+    return { state: 'warn', remainingMs: remaining, due: dueRaw }
+  }
+  return { state: 'ok', remainingMs: remaining, due: dueRaw }
+}
+
+export function formatSlaRemaining(remainingMs: number | null): string {
+  if (remainingMs == null) return '—'
+  const abs = Math.abs(remainingMs)
+  const sign = remainingMs < 0 ? '−' : ''
+  if (abs < HOUR_MS) {
+    const m = Math.floor(abs / MINUTE_MS)
+    return `${sign}${m}m`
+  }
+  const h = Math.floor(abs / HOUR_MS)
+  const m = Math.floor((abs % HOUR_MS) / MINUTE_MS)
+  if (h < 24) return `${sign}${h}h${m > 0 ? ` ${String(m).padStart(2, '0')}` : ''}`
+  const d = Math.floor(h / 24)
+  return `${sign}${d}j`
+}