@consilioweb/payload-support 0.10.0 → 0.11.0

package/src/endpoints/transfer-ticket.ts

@@ -0,0 +1,248 @@
+import type { Endpoint } from 'payload'
+import type { CollectionSlugs } from '../utils/slugs'
+import { handleAuthError, AuthError } from '../utils/auth'
+import { escapeHtml, emailWrapper, emailButton, emailParagraph } from '../utils/emailTemplate'
+import { readSupportSettings } from '../utils/readSettings'
+
+// Simple RFC-5322 style sanity check — same level of strictness as the
+// portal forms used elsewhere in the plugin. Server-side validation only;
+// the client is expected to validate too.
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+const MAX_TRANSFERS_PER_DAY = 5
+
+/**
+ * POST /api/support/tickets/:id/transfer
+ *
+ * Authenticated endpoint — accepts admin OR the ticket's owner (support-clients).
+ * Sends a recap of the ticket conversation to an external email address.
+ *
+ * Body: { email: string, includeAttachments?: boolean, message?: string }
+ *
+ * Behaviour:
+ *  - Verifies access (ownership or admin)
+ *  - Renders an HTML recap : subject, status, timeline (no internal notes), attachments as links
+ *  - Sends via payload.sendEmail
+ *  - Logs the action in `email-logs` (action='transfer') when that collection exists
+ *  - Rate-limited to 5 transfers per ticket per 24h
+ */
+export function createTransferTicketEndpoint(slugs: CollectionSlugs): Endpoint {
+  return {
+    path: '/support/tickets/:id/transfer',
+    method: 'post',
+    handler: async (req) => {
+      try {
+        if (!req.user) throw new AuthError('Authentication required', 401)
+
+        const idRaw = req.routeParams?.id as string | undefined
+        if (!idRaw) return Response.json({ error: 'missing-id' }, { status: 400 })
+        const ticketId = Number(idRaw)
+        if (Number.isNaN(ticketId)) return Response.json({ error: 'invalid-id' }, { status: 400 })
+
+        let body: { email?: string; includeAttachments?: boolean; message?: string }
+        try {
+          body = await req.json!()
+        } catch {
+          return Response.json({ error: 'Invalid JSON body' }, { status: 400 })
+        }
+
+        const email = (body.email || '').trim().toLowerCase()
+        if (!email || !EMAIL_RE.test(email) || email.length > 254) {
+          return Response.json({ error: 'Email invalide' }, { status: 400 })
+        }
+        const includeAttachments = body.includeAttachments !== false
+        const customMessage = typeof body.message === 'string' ? body.message.slice(0, 1000) : ''
+
+        const payload = req.payload
+
+        // Load ticket (ownership check happens here too)
+        const ticket = await payload.findByID({
+          collection: slugs.tickets as any,
+          id: ticketId,
+          depth: 1,
+          overrideAccess: true,
+        }) as any
+        if (!ticket) return Response.json({ error: 'Ticket introuvable' }, { status: 404 })
+
+        const isAdmin = req.user.collection === slugs.users
+        const isOwner =
+          req.user.collection === slugs.supportClients &&
+          (typeof ticket.client === 'object'
+            ? ticket.client?.id === req.user.id
+            : ticket.client === req.user.id)
+        if (!isAdmin && !isOwner) {
+          return Response.json({ error: 'Forbidden' }, { status: 403 })
+        }
+
+        // Rate limit: count transfers in last 24h for this ticket
+        try {
+          const since = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()
+          const existing = await payload.count({
+            collection: slugs.emailLogs as any,
+            where: {
+              and: [
+                { action: { equals: 'transfer' } },
+                { ticketNumber: { equals: ticket.ticketNumber || `#${ticketId}` } },
+                { createdAt: { greater_than: since } },
+              ],
+            },
+            overrideAccess: true,
+          })
+          if (existing.totalDocs >= MAX_TRANSFERS_PER_DAY) {
+            return Response.json(
+              { error: `Limite atteinte (${MAX_TRANSFERS_PER_DAY} transferts par 24h sur ce ticket)` },
+              { status: 429 },
+            )
+          }
+        } catch {
+          // emailLogs collection may not exist (feature disabled). Skip silently.
+        }
+
+        // Fetch non-internal messages, ordered chronologically
+        const messages = await payload.find({
+          collection: slugs.ticketMessages as any,
+          where: {
+            and: [
+              { ticket: { equals: ticketId } },
+              { isInternal: { equals: false } },
+            ],
+          },
+          sort: 'createdAt',
+          limit: 200,
+          depth: 1,
+          overrideAccess: true,
+        })
+
+        const baseUrl = process.env.NEXT_PUBLIC_SERVER_URL || ''
+        const ticketNumber = (ticket.ticketNumber as string) || `#${ticketId}`
+        const subject = (ticket.subject as string) || 'Ticket'
+        const statusLabel = statusToLabel(ticket.status)
+
+        // Build timeline HTML
+        const timelineHtml = messages.docs.map((m: any) => {
+          const date = m.createdAt
+            ? new Date(m.createdAt).toLocaleString('fr-FR', { timeZone: 'Europe/Paris' })
+            : ''
+          const authorLabel = m.authorType === 'admin'
+            ? 'Équipe support'
+            : (m.authorClient && typeof m.authorClient === 'object'
+                ? `${m.authorClient.firstName || ''} ${m.authorClient.lastName || ''}`.trim() || 'Client'
+                : 'Client')
+
+          // Plain-text body; we escape HTML for safety in external recaps
+          const bodyText = (m.body as string) || ''
+          const bodyHtml = escapeHtml(bodyText).replace(/\n/g, '<br/>')
+
+          let attachmentsHtml = ''
+          if (includeAttachments && Array.isArray(m.attachments) && m.attachments.length > 0) {
+            const items = m.attachments
+              .map((a: any) => {
+                const f = a?.file
+                if (!f || typeof f !== 'object') return ''
+                const url = f.url ? (f.url.startsWith('http') ? f.url : `${baseUrl}${f.url}`) : ''
+                const name = f.filename || f.title || 'pièce jointe'
+                if (!url) return `<li>${escapeHtml(name)} (lien indisponible)</li>`
+                return `<li><a href="${escapeHtml(url)}">${escapeHtml(name)}</a></li>`
+              })
+              .filter(Boolean)
+              .join('')
+            if (items) {
+              attachmentsHtml = `<ul style="margin: 8px 0 0 0; padding-left: 20px; font-size: 13px; color: #475569;">${items}</ul>`
+            }
+          }
+
+          return `
+            <div style="margin: 0 0 16px 0; padding: 14px 16px; border-left: 3px solid #e2e8f0; background: #f8fafc; border-radius: 0 8px 8px 0;">
+              <div style="margin-bottom: 8px; font-size: 12px; color: #64748b;">
+                <strong style="color: #0f172a;">${escapeHtml(authorLabel)}</strong>
+                ${date ? ` &middot; ${escapeHtml(date)}` : ''}
+              </div>
+              <div style="font-size: 14px; line-height: 1.6; color: #1e293b; white-space: pre-wrap;">${bodyHtml || '<em>(message vide)</em>'}</div>
+              ${attachmentsHtml}
+            </div>
+          `
+        }).join('')
+
+        const customMessageHtml = customMessage
+          ? `<div style="margin: 0 0 24px 0; padding: 16px; background: #fef9c3; border: 1px solid #fde047; border-radius: 8px;">
+              <div style="font-size: 12px; font-weight: 700; text-transform: uppercase; color: #854d0e; margin-bottom: 6px;">Message du transmetteur</div>
+              <div style="font-size: 14px; color: #422006; white-space: pre-wrap;">${escapeHtml(customMessage)}</div>
+            </div>`
+          : ''
+
+        const settings = await readSupportSettings(payload).catch(() => null)
+        const replyTo = settings?.email?.replyToAddress || process.env.SUPPORT_REPLY_TO || ''
+
+        const html = emailWrapper(
+          `Récapitulatif ticket ${ticketNumber}`,
+          [
+            emailParagraph(`Bonjour,`),
+            emailParagraph(
+              `Voici le récapitulatif du ticket <strong>${escapeHtml(ticketNumber)}</strong> — <em>${escapeHtml(subject)}</em>.`,
+            ),
+            customMessageHtml,
+            `<table cellpadding="0" cellspacing="0" border="0" style="margin: 0 0 24px 0;">
+              <tr><td style="padding: 4px 12px 4px 0; font-size: 12px; text-transform: uppercase; color: #64748b; font-weight: 700;">Sujet</td><td style="padding: 4px 0; font-size: 14px; color: #0f172a;">${escapeHtml(subject)}</td></tr>
+              <tr><td style="padding: 4px 12px 4px 0; font-size: 12px; text-transform: uppercase; color: #64748b; font-weight: 700;">Statut</td><td style="padding: 4px 0; font-size: 14px; color: #0f172a;">${escapeHtml(statusLabel)}</td></tr>
+              <tr><td style="padding: 4px 12px 4px 0; font-size: 12px; text-transform: uppercase; color: #64748b; font-weight: 700;">Numéro</td><td style="padding: 4px 0; font-size: 14px; color: #0f172a;">${escapeHtml(ticketNumber)}</td></tr>
+            </table>`,
+            `<h2 style="margin: 24px 0 12px 0; font-size: 16px; color: #0f172a;">Conversation</h2>`,
+            timelineHtml || emailParagraph('<em>Aucun échange à afficher.</em>'),
+            baseUrl
+              ? emailButton('Voir le ticket', `${baseUrl}/support/tickets/${ticketId}`)
+              : '',
+            emailParagraph(
+              `<span style="font-size: 12px; color: #94a3b8;">Ce récapitulatif a été transmis depuis l'espace support. Ne répondez pas à cet email — utilisez le lien ci-dessus pour échanger.</span>`,
+            ),
+          ].join(''),
+        )
+
+        await payload.sendEmail({
+          to: email,
+          ...(replyTo ? { replyTo } : {}),
+          subject: `Récapitulatif support — ${ticketNumber} ${subject}`,
+          html,
+        })
+
+        // Log the transfer (best-effort)
+        try {
+          await payload.create({
+            collection: slugs.emailLogs as any,
+            data: {
+              status: 'success',
+              action: 'transfer',
+              senderEmail:
+                req.user.collection === slugs.supportClients
+                  ? (req.user as any).email
+                  : (req.user as any).email,
+              recipientEmail: email,
+              subject: `Transfert ${ticketNumber}`,
+              ticketNumber,
+            },
+            overrideAccess: true,
+          })
+        } catch {
+          // emailLogs may not be enabled — silently skip
+        }
+
+        return Response.json({ ok: true, sentTo: email })
+      } catch (err) {
+        const authResponse = handleAuthError(err)
+        if (authResponse) return authResponse
+        console.error('[support/transfer-ticket] Error:', err)
+        return Response.json({ error: 'Internal server error' }, { status: 500 })
+      }
+    },
+  }
+}
+
+function statusToLabel(status: unknown): string {
+  switch (status) {
+    case 'open': return 'Ouvert'
+    case 'waiting_client': return 'En attente du client'
+    case 'resolved': return 'Résolu'
+    case 'closed': return 'Clôturé'
+    case 'escalated': return 'Escaladé'
+    default: return String(status || '—')
+  }
+}

package/src/index.ts

@@ -50,4 +50,5 @@ export {
   createSlaPoliciesCollection,
   createMacrosCollection,
   createTicketStatusesCollection,
+  createTicketCollaboratorsCollection,
 } from './collections'

package/src/plugin.ts

@@ -21,6 +21,8 @@ import {
   createMacrosCollection,
   createTicketStatusesCollection,
   createClientSummariesCollection,
+  createTicketFeedbackCollection,
+  createTicketCollaboratorsCollection,
 } from './collections'
 
 function viewConfig(component: string, path: string): AdminViewConfig {
@@ -86,6 +88,8 @@ export function supportPlugin(config?: SupportPluginConfig): Plugin {
       createTicketActivityLogCollection(slugs),
       createSatisfactionSurveysCollection(slugs),
       createKnowledgeBaseCollection(slugs),
+      createTicketFeedbackCollection(slugs, { notificationSlug: config?.notificationSlug }),
+      createTicketCollaboratorsCollection(slugs),
     ]
 
     // Auth logs (conditional)

package/src/portal/auth/ChatWidget.tsx

@@ -10,7 +10,18 @@ interface ChatMessage {
   agent?: { firstName?: string; lastName?: string } | null
 }
 
+// The legacy live-chat FAB is disabled by default in the refonte (May 2026).
+// To re-enable it, set NEXT_PUBLIC_ENABLE_CHAT_WIDGET=true in the host app env.
+const CHAT_WIDGET_ENABLED = process.env.NEXT_PUBLIC_ENABLE_CHAT_WIDGET === 'true'
+
+// Wrapper: returns null synchronously when disabled, so we never mount the inner
+// component (and its hooks/effects/polling) in production by default.
 export function ChatWidget() {
+  if (!CHAT_WIDGET_ENABLED) return null
+  return <ChatWidgetInner />
+}
+
+function ChatWidgetInner() {
   const [isOpen, setIsOpen] = useState(false)
   const [session, setSession] = useState<string | null>(null)
   const [messages, setMessages] = useState<ChatMessage[]>([])

package/src/portal/auth/dashboard/DashboardClient.tsx

@@ -17,6 +17,40 @@ interface TicketData {
   messageCount: number
   totalTimeMinutes: number | null | undefined
   lastMessagePreview: string | null | undefined
+  lastMessageAuthorType?: string | null
+}
+
+type NextStep = 'you' | 'us' | 'done'
+
+// Compute the "next-step" badge for a ticket:
+// - resolved  → done
+// - last message from client (or hasNewMessage = false but status non resolved) → us
+// - hasNewMessage (admin replied, client hasn't read) → you
+function computeNextStep(t: TicketData): NextStep {
+  if (t.status === 'resolved') return 'done'
+  if (t.hasNewMessage) return 'you'
+  // If the last message is from the client (or email), we're waiting on support
+  if (t.lastMessageAuthorType === 'client' || t.lastMessageAuthorType === 'email') return 'us'
+  // Default: ball is in client's court (e.g. ticket just created with admin reply already read)
+  return 'you'
+}
+
+const nextStepConfig: Record<NextStep, { label: string; cls: string; icon: 'arrow' | 'clock' | 'check' }> = {
+  you: {
+    label: 'A vous de jouer',
+    cls: 'bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-950/40 dark:text-blue-300 dark:ring-blue-400/20',
+    icon: 'arrow',
+  },
+  us: {
+    label: 'On revient vers vous',
+    cls: 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-950/40 dark:text-amber-300 dark:ring-amber-400/20',
+    icon: 'clock',
+  },
+  done: {
+    label: 'Resolu',
+    cls: 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-950/40 dark:text-emerald-300 dark:ring-emerald-400/20',
+    icon: 'check',
+  },
 }
 
 const statusConfig: Record<string, { label: string; dot: string; bg: string }> = {
@@ -165,31 +199,32 @@ export function DashboardClient({ tickets }: { tickets: TicketData[] }) {
 
   const resetPage = () => setCurrentPage(1)
 
-  // Stats
-  const stats = useMemo(() => {
-    return {
-      total: tickets.length,
-      active: activeTickets.length,
-      archived: archivedTickets.length,
-      newMessages: tickets.filter((t) => t.hasNewMessage).length,
-    }
-  }, [tickets, activeTickets, archivedTickets])
-
   const activeFilterCount = [filterStatus, filterCategory, filterProject].filter(Boolean).length
 
   return (
     <div className="space-y-6">
-      {/* Page header */}
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">Mes tickets</h1>
-          <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
-            Suivez et gerez vos demandes de support
-          </p>
+      {/* Promoted SLA hero with single CTA "Nouveau ticket" */}
+      <section
+        aria-label="Engagement de service"
+        className="flex flex-col gap-4 rounded-2xl border border-blue-100 bg-gradient-to-br from-blue-50 via-blue-50/60 to-white px-5 py-5 dark:border-blue-900/60 dark:from-blue-950/40 dark:via-blue-950/20 dark:to-slate-900 sm:flex-row sm:items-center sm:justify-between sm:px-6 sm:py-6"
+      >
+        <div className="flex items-start gap-4">
+          <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-2xl bg-blue-600/10 text-2xl dark:bg-blue-500/20">
+            <span aria-hidden>✨</span>
+          </div>
+          <div className="min-w-0">
+            <h1 className="text-xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-2xl">
+              Reponse en moins de 2h
+            </h1>
+            <p className="mt-1 text-sm text-slate-600 dark:text-slate-300">
+              Notre engagement : une premiere reponse rapide a chacune de vos demandes,{' '}
+              <span className="text-slate-500 dark:text-slate-400">en jours ouvres</span>.
+            </p>
+          </div>
         </div>
         <Link
           href="/support/tickets/new"
-          className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md active:scale-[0.98]"
+          className="inline-flex flex-shrink-0 items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md active:scale-[0.98]"
         >
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
             <line x1="12" y1="5" x2="12" y2="19" />
@@ -197,83 +232,13 @@ export function DashboardClient({ tickets }: { tickets: TicketData[] }) {
           </svg>
           Nouveau ticket
         </Link>
-      </div>
-
-      {/* Stats row */}
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-        <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
-          <div className="flex items-center gap-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-50 dark:bg-blue-950/40">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-4 w-4 text-blue-600 dark:text-blue-400">
-                <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
-                <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
-              </svg>
-            </div>
-            <div>
-              <p className="text-xl font-bold text-slate-900 dark:text-white">{stats.active}</p>
-              <p className="text-xs text-slate-500 dark:text-slate-400">Actifs</p>
-            </div>
-          </div>
-        </div>
-
-        {stats.newMessages > 0 && (
-          <div className="rounded-xl border border-blue-200 bg-blue-50/50 p-4 dark:border-blue-800 dark:bg-blue-950/30">
-            <div className="flex items-center gap-2">
-              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/50">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-4 w-4 text-blue-600 dark:text-blue-400">
-                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-                </svg>
-              </div>
-              <div>
-                <p className="text-xl font-bold text-blue-700 dark:text-blue-300">{stats.newMessages}</p>
-                <p className="text-xs text-blue-600 dark:text-blue-400">Non lus</p>
-              </div>
-            </div>
-          </div>
-        )}
-
-        <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
-          <div className="flex items-center gap-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100 dark:bg-slate-800">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-4 w-4 text-slate-500 dark:text-slate-400">
-                <rect x="3" y="3" width="7" height="7" />
-                <rect x="14" y="3" width="7" height="7" />
-                <rect x="14" y="14" width="7" height="7" />
-                <rect x="3" y="14" width="7" height="7" />
-              </svg>
-            </div>
-            <div>
-              <p className="text-xl font-bold text-slate-900 dark:text-white">{stats.total}</p>
-              <p className="text-xs text-slate-500 dark:text-slate-400">Total</p>
-            </div>
-          </div>
-        </div>
+      </section>
 
-        <div className="rounded-xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900">
-          <div className="flex items-center gap-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100 dark:bg-slate-800">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-4 w-4 text-slate-400 dark:text-slate-500">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
-            </div>
-            <div>
-              <p className="text-xl font-bold text-slate-900 dark:text-white">{stats.archived}</p>
-              <p className="text-xs text-slate-500 dark:text-slate-400">Archives</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Response time banner */}
-      <div className="flex items-center gap-3 rounded-lg border border-blue-100 bg-blue-50/50 px-4 py-3 dark:border-blue-900/50 dark:bg-blue-950/20">
-        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/50">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4 text-blue-600 dark:text-blue-400">
-            <circle cx="12" cy="12" r="10" />
-            <polyline points="12 6 12 12 16 14" />
-          </svg>
-        </div>
-        <p className="text-sm text-blue-700 dark:text-blue-300">
-          Notre temps de reponse moyen est de <strong>moins de 2h</strong> en jours ouvres.
+      {/* Page title */}
+      <div>
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-white">Mes tickets</h2>
+        <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+          Suivez et gerez vos demandes de support
         </p>
       </div>
 
@@ -498,6 +463,8 @@ export function DashboardClient({ tickets }: { tickets: TicketData[] }) {
               const status = statusConfig[ticket.status || 'open'] || statusConfig.open
               const priority = priorityConfig[ticket.priority || 'normal']
               const category = ticket.category ? categoryLabels[ticket.category] : null
+              const nextStep = computeNextStep(ticket)
+              const nextStepCfg = nextStepConfig[nextStep]
 
               return (
                 <Link
@@ -540,12 +507,31 @@ export function DashboardClient({ tickets }: { tickets: TicketData[] }) {
 
                     {/* Tags row (mobile friendly) */}
                     <div className="mt-2 flex flex-wrap items-center gap-1.5">
-                      <span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium ring-1 ring-inset ${status.bg}`}>
-                        {status.label}
+                      {/* Next-step badge replaces the raw status — orients the user */}
+                      <span className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[11px] font-semibold ring-1 ring-inset ${nextStepCfg.cls}`}>
+                        {nextStepCfg.icon === 'arrow' && (
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" aria-hidden>
+                            <line x1="12" y1="19" x2="12" y2="5" />
+                            <polyline points="5 12 12 5 19 12" />
+                          </svg>
+                        )}
+                        {nextStepCfg.icon === 'clock' && (
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" aria-hidden>
+                            <circle cx="12" cy="12" r="10" />
+                            <polyline points="12 6 12 12 16 14" />
+                          </svg>
+                        )}
+                        {nextStepCfg.icon === 'check' && (
+                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3" aria-hidden>
+                            <polyline points="20 6 9 17 4 12" />
+                          </svg>
+                        )}
+                        {nextStepCfg.label}
                       </span>
-                      {ticket.hasNewMessage && (
-                        <span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-0.5 text-[11px] font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-950/40 dark:text-blue-400 dark:ring-blue-400/20">
-                          Nouveau message
+                      {/* Raw status only shown when not resolved (next-step "done" already conveys resolved) */}
+                      {nextStep !== 'done' && (
+                        <span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium ring-1 ring-inset ${status.bg}`}>
+                          {status.label}
                         </span>
                       )}
                       {category && (

package/src/portal/auth/dashboard/page.tsx

@@ -46,14 +46,22 @@ export default async function SupportDashboardPage() {
   }
 
   // Build message meta per ticket (allMessages sorted by -createdAt, so first entry per ticket is the latest)
-  const ticketMeta: Record<string | number, { hasNew: boolean; count: number; lastMessagePreview: string }> = {}
+  const ticketMeta: Record<
+    string | number,
+    { hasNew: boolean; count: number; lastMessagePreview: string; lastMessageAuthorType: string | null }
+  > = {}
   for (const msg of allMessages.docs) {
     const tid = typeof msg.ticket === 'object' ? msg.ticket.id : msg.ticket
     if (!ticketMeta[tid]) {
       const lastRead = readAtMap[tid]
       const isUnread = msg.authorType === 'admin' && (!lastRead || new Date(msg.createdAt) > new Date(lastRead))
       const preview = (msg.body || '').replace(/\n/g, ' ').slice(0, 80)
-      ticketMeta[tid] = { hasNew: isUnread, count: 1, lastMessagePreview: preview }
+      ticketMeta[tid] = {
+        hasNew: isUnread,
+        count: 1,
+        lastMessagePreview: preview,
+        lastMessageAuthorType: msg.authorType || null,
+      }
     } else {
       ticketMeta[tid].count++
     }
@@ -77,6 +85,7 @@ export default async function SupportDashboardPage() {
       messageCount: meta?.count || 0,
       totalTimeMinutes: ticket.totalTimeMinutes,
       lastMessagePreview: meta?.lastMessagePreview || null,
+      lastMessageAuthorType: meta?.lastMessageAuthorType || null,
     }
   })