@consilioweb/payload-support 0.9.12 → 0.10.0

package/src/styles/TicketInbox.module.scss

@@ -18,9 +18,21 @@
 
 .title {
   font-size: 24px;
-  font-weight: 800;
+  font-weight: 700;
   color: var(--theme-text);
   margin: 0;
+  line-height: 1.2;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: var(--theme-elevation-500);
+  margin: 2px 0 0;
+}
+
+.subtitleBreach {
+  color: var(--theme-error-500, #c4392c);
+  font-weight: 600;
 }
 
 .headerRight {
@@ -56,8 +68,8 @@
 
   &:focus {
     outline: none;
-    border-color: #2563eb;
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
+    border-color: var(--theme-info-500, #2a6bd8);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-info-500, #2a6bd8) 18%, transparent);
   }
 
   &::placeholder { color: var(--theme-elevation-400); }
@@ -78,50 +90,84 @@
 .newTicketBtn {
   padding: 8px 18px;
   border-radius: 8px;
-  border: 1px solid var(--theme-elevation-200);
-  background: var(--theme-elevation-0, #fff);
-  color: var(--theme-text);
+  border: 1px solid var(--theme-text);
+  background: var(--theme-text);
+  color: var(--theme-bg, #fff);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: all 100ms;
   text-decoration: none;
-  &:hover { background: var(--theme-elevation-100); }
+  &:hover {
+    background: var(--theme-elevation-800);
+    border-color: var(--theme-elevation-800);
+  }
 }
 
-// Filter tabs
+// Filter tabs / segments
 .tabs {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
   gap: 0;
-  border-bottom: 1px solid var(--theme-elevation-150, #f1f5f9);
-  margin-bottom: 0;
+  background: var(--theme-elevation-100);
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 8px;
+  padding: 2px;
+  margin: 4px 0 6px;
+  flex-wrap: wrap;
 }
 
 .tab {
-  padding: 10px 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 12px;
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--theme-elevation-500);
   background: none;
   border: none;
-  border-bottom: 2px solid transparent;
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 100ms;
+  transition: background 100ms, color 100ms;
   white-space: nowrap;
 
   &:hover { color: var(--theme-text); }
 
   &.tabActive {
     color: var(--theme-text);
-    border-bottom-color: #2563eb;
+    background: var(--theme-elevation-0, #fff);
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
+  }
+
+  &.tabAlert:not(.tabActive) {
+    color: var(--theme-error-500, #c4392c);
   }
 }
 
 .tabCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
   font-size: 11px;
-  font-weight: 700;
-  color: var(--theme-elevation-400);
-  margin-left: 4px;
+  font-weight: 600;
+  color: var(--theme-elevation-500);
+  background: var(--theme-elevation-200);
+  border-radius: 999px;
+}
+
+.tabActive .tabCount {
+  background: var(--theme-elevation-100);
+  color: var(--theme-text);
+}
+
+.tabCountAlert {
+  color: var(--theme-error-500, #c4392c) !important;
+  background: color-mix(in srgb, var(--theme-error-500, #c4392c) 12%, transparent) !important;
 }
 
 .sortRow {
@@ -147,54 +193,73 @@
   flex-direction: column;
 }
 
+// Layout : check | priority-dot | StatusPill | ticket# | subject | client | sla | updated | unread
 .row {
   display: grid;
-  grid-template-columns: 18px 16px 70px 50px 1fr 180px 100px 80px 100px 12px;
-  gap: 10px;
+  grid-template-columns: 18px 12px 110px 80px 1fr 200px 90px 90px 12px;
+  gap: 12px;
   align-items: center;
-  padding: 11px 12px;
-  border-bottom: 1px solid var(--theme-elevation-100, #f8fafc);
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--theme-elevation-100, #f3f3f3);
   cursor: pointer;
-  transition: background 60ms;
+  transition: background 80ms ease;
   text-decoration: none;
   color: inherit;
+  position: relative;
 
   &:hover { background: var(--theme-elevation-50); }
 
   @media (max-width: 900px) {
-    grid-template-columns: 16px 60px 1fr 100px 80px;
+    grid-template-columns: 16px 110px 1fr 80px 80px;
   }
 }
 
 .rowSelected {
-  background: #eff6ff;
-  border-left: 3px solid #2563eb;
-  padding-left: 9px;
+  background: var(--theme-elevation-100);
+}
+
+.rowUnread {
+  background: linear-gradient(90deg, color-mix(in srgb, var(--theme-info-500, #2a6bd8) 8%, transparent) 0, transparent 6px);
+
+  .subject { font-weight: 700; }
 }
 
-.statusDot {
+.rowBreach::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--theme-error-500, #c4392c);
+}
+
+.rowCheck {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  accent-color: var(--theme-text);
+}
+
+.priorityDot {
+  display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
 }
 
-.statusText {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--theme-elevation-500);
-}
-
 .ticketNum {
   font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
   font-size: 11px;
   color: var(--theme-elevation-400);
   font-weight: 500;
+  letter-spacing: 0.02em;
 }
 
 .subject {
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--theme-text);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -209,35 +274,32 @@
   white-space: nowrap;
 }
 
-.categoryChip {
+// SLA cell — color reflects state (computed in computeSlaState)
+.slaCell {
   font-size: 11px;
-  font-weight: 600;
-  color: var(--theme-elevation-500);
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: var(--theme-elevation-100);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  color: var(--theme-elevation-400);
   white-space: nowrap;
 }
-
-.priorityBar {
-  width: 4px;
-  height: 18px;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
+.slaOk     { color: var(--theme-elevation-400); }
+.slaWarn   { color: var(--theme-warning-500, #c97a0a); font-weight: 600; }
+.slaBreach { color: var(--theme-error-500, #c4392c); font-weight: 700; }
 
 .timeAgo {
   font-size: 12px;
   color: var(--theme-elevation-400);
   white-space: nowrap;
   text-align: right;
+  font-variant-numeric: tabular-nums;
 }
 
 .unreadDot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
-  background: #2563eb;
+  background: var(--theme-info-500, #2a6bd8);
   flex-shrink: 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>