@consilioweb/payload-support 0.9.12 → 0.10.0

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`
+}