@consilioweb/payload-support 0.5.1

package/src/portal/auth/tickets/detail/CloseTicketButton.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export function CloseTicketButton({ ticketId }: { ticketId: number | string }) {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+  const [confirming, setConfirming] = useState(false)
+
+  const handleClose = async () => {
+    if (!confirming) {
+      setConfirming(true)
+      return
+    }
+
+    setLoading(true)
+    try {
+      const res = await fetch(`/api/tickets/${ticketId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ status: 'resolved' }),
+      })
+
+      if (res.ok) {
+        router.refresh()
+      }
+    } catch (err) {
+      console.warn('[CloseTicketButton] Failed to close ticket:', err)
+    } finally {
+      setLoading(false)
+      setConfirming(false)
+    }
+  }
+
+  return (
+    <button
+      onClick={handleClose}
+      disabled={loading}
+      className={`inline-flex items-center gap-1.5 rounded-xl border px-3.5 py-2 text-sm font-semibold transition-all disabled:opacity-50 ${
+        confirming
+          ? 'border-red-200 dark:border-red-800/50 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30'
+          : 'border-emerald-200 dark:border-emerald-800/50 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900/30'
+      }`}
+    >
+      {loading ? (
+        <>
+          <svg className="h-3.5 w-3.5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+          </svg>
+          Fermeture...
+        </>
+      ) : confirming ? (
+        <>
+          <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-3.5 w-3.5">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="15" y1="9" x2="9" y2="15" />
+            <line x1="9" y1="9" x2="15" y2="15" />
+          </svg>
+          Confirmer ?
+        </>
+      ) : (
+        <>
+          <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-3.5 w-3.5">
+            <polyline points="20,6 9,17 4,12" />
+          </svg>
+          R&eacute;solu
+        </>
+      )}
+    </button>
+  )
+}

package/src/portal/auth/tickets/detail/CollapsibleMessages.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import React, { useState } from 'react'
+
+interface CollapsibleMessagesProps {
+  children: React.ReactNode[]
+}
+
+const VISIBLE_COUNT = 3
+
+export const CollapsibleMessages: React.FC<CollapsibleMessagesProps> = ({ children }) => {
+  const [collapsed, setCollapsed] = useState(true)
+
+  if (!children || children.length <= VISIBLE_COUNT) {
+    return <>{children}</>
+  }
+
+  const hiddenCount = children.length - VISIBLE_COUNT
+  const lastMessages = children.slice(-VISIBLE_COUNT)
+
+  if (collapsed) {
+    return (
+      <>
+        <button
+          onClick={() => setCollapsed(false)}
+          className="no-print w-full rounded-2xl border-2 border-dashed border-gray-300 px-4 py-3 text-center text-sm font-semibold text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-600"
+        >
+          Voir les {hiddenCount} message{hiddenCount > 1 ? 's' : ''} précédent{hiddenCount > 1 ? 's' : ''}
+        </button>
+        {lastMessages}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => setCollapsed(true)}
+        className="no-print w-full rounded-2xl border-2 border-dashed border-gray-300 px-4 py-3 text-center text-sm font-semibold text-gray-400 transition-colors hover:border-gray-400 hover:text-gray-600"
+      >
+        Masquer les anciens messages
+      </button>
+      {children}
+    </>
+  )
+}

package/src/portal/auth/tickets/detail/MarkSolutionButton.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export function MarkSolutionButton({
+  messageId,
+  isSolution,
+}: {
+  messageId: number | string
+  isSolution: boolean
+}) {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+
+  const handleToggle = async () => {
+    setLoading(true)
+    try {
+      await fetch(`/api/ticket-messages/${messageId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ isSolution: !isSolution }),
+      })
+      router.refresh()
+    } catch (err) {
+      console.warn('[MarkSolutionButton] Failed to toggle solution:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <button
+      onClick={handleToggle}
+      disabled={loading}
+      className={`mt-2 flex items-center gap-1 rounded-lg px-2 py-1 text-xs font-bold transition-all ${
+        isSolution
+          ? 'border-2 border-green-500 bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+          : 'border-2 border-gray-200 text-gray-400 hover:border-green-500 hover:text-green-600 dark:border-gray-600 dark:hover:border-green-500'
+      } disabled:opacity-50`}
+      title={isSolution ? 'Retirer le marquage solution' : 'Marquer comme solution'}
+    >
+      <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.5 w-3.5">
+        <polyline points="20,6 9,17 4,12" />
+      </svg>
+      {isSolution ? 'Solution' : 'Marquer comme solution'}
+    </button>
+  )
+}

package/src/portal/auth/tickets/detail/MessageActions.tsx

@@ -0,0 +1,158 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+const EDIT_WINDOW_MS = 5 * 60 * 1000 // 5 minutes
+
+export function MessageActions({
+  messageId,
+  body,
+  createdAt,
+}: {
+  messageId: number
+  body: string
+  createdAt: string
+}) {
+  const router = useRouter()
+  const [editing, setEditing] = useState(false)
+  const [editText, setEditText] = useState(body)
+  const [saving, setSaving] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+
+  const elapsed = Date.now() - new Date(createdAt).getTime()
+  const canEdit = elapsed < EDIT_WINDOW_MS
+
+  if (!canEdit) return null
+
+  const remainingMin = Math.max(0, Math.ceil((EDIT_WINDOW_MS - elapsed) / 60000))
+
+  const handleSave = async () => {
+    if (!editText.trim() || editText === body) {
+      setEditing(false)
+      return
+    }
+    setSaving(true)
+    try {
+      const res = await fetch(`/api/ticket-messages/${messageId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          body: editText.trim(),
+          editedAt: new Date().toISOString(),
+        }),
+      })
+      if (res.ok) {
+        setEditing(false)
+        router.refresh()
+      }
+    } catch { /* ignore */ }
+    setSaving(false)
+  }
+
+  const handleDelete = async () => {
+    setSaving(true)
+    try {
+      const res = await fetch(`/api/ticket-messages/${messageId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          body: '[Message supprimé]',
+          bodyHtml: '',
+          deletedAt: new Date().toISOString(),
+        }),
+      })
+      if (res.ok) {
+        setConfirmDelete(false)
+        router.refresh()
+      }
+    } catch { /* ignore */ }
+    setSaving(false)
+  }
+
+  if (editing) {
+    return (
+      <div className="mt-2 space-y-2">
+        <textarea
+          value={editText}
+          onChange={(e) => setEditText(e.target.value)}
+          rows={3}
+          className="w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 px-3 py-2 text-sm text-slate-900 dark:text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"
+        />
+        <div className="flex gap-2">
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="rounded-md bg-blue-600 px-3 py-1 text-xs font-semibold text-white hover:bg-blue-700 disabled:opacity-50"
+          >
+            {saving ? 'Enregistrement...' : 'Enregistrer'}
+          </button>
+          <button
+            onClick={() => { setEditing(false); setEditText(body) }}
+            className="rounded-md border border-slate-300 dark:border-slate-600 px-3 py-1 text-xs font-semibold text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800"
+          >
+            Annuler
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (confirmDelete) {
+    return (
+      <div className="mt-2 flex items-center gap-2">
+        <span className="text-xs text-red-500">Supprimer ce message ?</span>
+        <button
+          onClick={handleDelete}
+          disabled={saving}
+          className="rounded-md bg-red-600 px-2.5 py-1 text-xs font-semibold text-white hover:bg-red-700 disabled:opacity-50"
+        >
+          {saving ? '...' : 'Confirmer'}
+        </button>
+        <button
+          onClick={() => setConfirmDelete(false)}
+          className="rounded-md border border-slate-300 dark:border-slate-600 px-2.5 py-1 text-xs text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800"
+        >
+          Annuler
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mt-1.5 flex items-center gap-3">
+      <button
+        onClick={() => setEditing(true)}
+        className="text-[11px] font-medium text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+      >
+        Modifier
+      </button>
+      <button
+        onClick={() => setConfirmDelete(true)}
+        className="text-[11px] font-medium text-slate-400 hover:text-red-500 transition-colors"
+      >
+        Supprimer
+      </button>
+      <span className="text-[10px] text-slate-300 dark:text-slate-600">{remainingMin}min restantes</span>
+    </div>
+  )
+}
+
+export function EditedBadge({ editedAt }: { editedAt?: string | null }) {
+  if (!editedAt) return null
+  return (
+    <span className="ml-2 text-[10px] text-slate-400 dark:text-slate-500 italic">
+      (modifié)
+    </span>
+  )
+}
+
+export function DeletedMessage() {
+  return (
+    <div className="italic text-sm text-slate-400 dark:text-slate-500">
+      Ce message a été supprimé.
+    </div>
+  )
+}

package/src/portal/auth/tickets/detail/PrintButton.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+export function PrintButton() {
+  return (
+    <button
+      onClick={() => window.print()}
+      className="no-print rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-600 hover:bg-slate-50 transition-colors"
+      title="Exporter en PDF"
+    >
+      <svg className="h-4 w-4 inline mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+      </svg>
+      PDF
+    </button>
+  )
+}

package/src/portal/auth/tickets/detail/ReadReceipt.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+const TZ = 'Europe/Paris'
+
+export function ReadReceipt({
+  lastAdminReadAt,
+  messageCreatedAt,
+}: {
+  lastAdminReadAt?: string | null
+  messageCreatedAt: string
+}) {
+  if (!lastAdminReadAt) return null
+
+  const readTime = new Date(lastAdminReadAt).getTime()
+  const msgTime = new Date(messageCreatedAt).getTime()
+
+  // Only show "Lu" if the admin read after this message was created
+  if (readTime < msgTime) return null
+
+  const readDate = new Date(lastAdminReadAt)
+  const formatted = readDate.toLocaleTimeString('fr-FR', {
+    hour: '2-digit',
+    minute: '2-digit',
+    timeZone: TZ,
+  })
+
+  return (
+    <div className="mt-1 text-right">
+      <span className="text-[10px] text-blue-400 dark:text-blue-500 font-medium">
+        Lu {formatted}
+      </span>
+    </div>
+  )
+}

package/src/portal/auth/tickets/detail/ReopenTicketButton.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+export function ReopenTicketButton({ ticketId }: { ticketId: number | string }) {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+  const [confirming, setConfirming] = useState(false)
+
+  const handleReopen = async () => {
+    if (!confirming) {
+      setConfirming(true)
+      return
+    }
+
+    setLoading(true)
+    try {
+      const res = await fetch(`/api/tickets/${ticketId}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ status: 'open' }),
+      })
+
+      if (res.ok) {
+        router.refresh()
+      }
+    } catch (err) {
+      console.warn('[ReopenTicketButton] Failed to reopen ticket:', err)
+    } finally {
+      setLoading(false)
+      setConfirming(false)
+    }
+  }
+
+  return (
+    <button
+      onClick={handleReopen}
+      disabled={loading}
+      className={`inline-flex items-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-semibold transition-all disabled:opacity-50 ${
+        confirming
+          ? 'border-emerald-200 dark:border-emerald-800/50 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 hover:bg-emerald-100 dark:hover:bg-emerald-900/30'
+          : 'border-blue-200 dark:border-blue-800/50 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/30'
+      }`}
+    >
+      {loading ? (
+        <>
+          <svg className="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+          </svg>
+          R&eacute;ouverture...
+        </>
+      ) : confirming ? (
+        <>
+          <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">
+            <polyline points="23 4 23 10 17 10" />
+            <path d="M20.49 15a9 9 0 11-2.12-9.36L23 10" />
+          </svg>
+          Confirmer ?
+        </>
+      ) : (
+        <>
+          <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">
+            <polyline points="23 4 23 10 17 10" />
+            <path d="M20.49 15a9 9 0 11-2.12-9.36L23 10" />
+          </svg>
+          Rouvrir le ticket
+        </>
+      )}
+    </button>
+  )
+}

package/src/portal/auth/tickets/detail/SatisfactionForm.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import React, { useState } from 'react'
+
+export function SatisfactionForm({ ticketId }: { ticketId: number | string }) {
+  const [rating, setRating] = useState(0)
+  const [hoveredRating, setHoveredRating] = useState(0)
+  const [comment, setComment] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (rating === 0) {
+      setError('Veuillez sélectionner une note.')
+      return
+    }
+
+    setLoading(true)
+    setError('')
+
+    try {
+      const res = await fetch('/api/support/satisfaction', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          ticketId,
+          rating,
+          ...(comment.trim() ? { comment: comment.trim() } : {}),
+        }),
+      })
+
+      if (res.ok) {
+        setSubmitted(true)
+      } else {
+        const data = await res.json()
+        setError(data.error || 'Erreur lors de l\'envoi.')
+      }
+    } catch {
+      setError('Erreur de connexion.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (submitted) {
+    return (
+      <div className="rounded-2xl border border-emerald-200 dark:border-emerald-800/50 bg-gradient-to-br from-emerald-50 to-green-50 dark:from-emerald-900/20 dark:to-green-900/20 p-6 text-center">
+        <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-emerald-500 shadow-lg shadow-emerald-500/20">
+          <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-5 w-5 text-white">
+            <polyline points="20,6 9,17 4,12" />
+          </svg>
+        </div>
+        <p className="text-base font-bold text-emerald-900 dark:text-emerald-200">Merci pour votre avis !</p>
+        <p className="mt-1 text-sm text-emerald-600 dark:text-emerald-400">Votre retour nous aide &agrave; nous am&eacute;liorer.</p>
+      </div>
+    )
+  }
+
+  const stars = [1, 2, 3, 4, 5]
+  const labels = ['Très insatisfait', 'Insatisfait', 'Correct', 'Satisfait', 'Très satisfait']
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className="rounded-2xl border border-amber-200/80 dark:border-amber-800/50 bg-gradient-to-br from-amber-50/80 to-orange-50/40 dark:from-amber-900/10 dark:to-orange-900/10 p-5 sm:p-6 shadow-sm"
+    >
+      <div className="mb-1 flex items-center gap-2">
+        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30">
+          <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-amber-600 dark:text-amber-400">
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+          </svg>
+        </div>
+        <h3 className="text-base font-bold text-slate-900 dark:text-white">Comment s&apos;est pass&eacute; le support ?</h3>
+      </div>
+      <p className="mb-5 ml-10 text-sm text-slate-500 dark:text-slate-400">Votre avis nous aide &agrave; am&eacute;liorer notre service.</p>
+
+      {error && (
+        <div className="mb-4 flex items-center gap-2 rounded-xl border border-red-200 dark:border-red-800/50 bg-red-50 dark:bg-red-900/20 px-4 py-3 text-sm text-red-700 dark:text-red-400">
+          <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 flex-shrink-0">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="15" y1="9" x2="9" y2="15" />
+            <line x1="9" y1="9" x2="15" y2="15" />
+          </svg>
+          {error}
+        </div>
+      )}
+
+      {/* Star rating */}
+      <div className="mb-1 flex items-center gap-0.5">
+        {stars.map((star) => (
+          <button
+            key={star}
+            type="button"
+            onClick={() => setRating(star)}
+            onMouseEnter={() => setHoveredRating(star)}
+            onMouseLeave={() => setHoveredRating(0)}
+            className="rounded-lg p-1 transition-all hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400"
+          >
+            <svg
+              className={`h-8 w-8 transition-colors ${
+                star <= (hoveredRating || rating)
+                  ? 'fill-amber-400 text-amber-400'
+                  : 'fill-slate-200 dark:fill-slate-600 text-slate-300 dark:text-slate-500'
+              }`}
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
+              />
+            </svg>
+          </button>
+        ))}
+      </div>
+      {(hoveredRating || rating) > 0 && (
+        <p className="mb-4 text-xs font-medium text-slate-500 dark:text-slate-400">
+          {labels[(hoveredRating || rating) - 1]}
+        </p>
+      )}
+      {(hoveredRating || rating) === 0 && <div className="mb-4" />}
+
+      {/* Comment */}
+      <textarea
+        rows={3}
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
+        placeholder="Un commentaire ? (optionnel)"
+        className="mb-4 w-full resize-y rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 text-sm text-slate-900 dark:text-slate-200 placeholder-slate-400 dark:placeholder-slate-500 outline-none transition-all focus:border-blue-400 dark:focus:border-blue-500 focus:ring-2 focus:ring-blue-400/20 dark:focus:ring-blue-500/20"
+      />
+
+      <button
+        type="submit"
+        disabled={loading || rating === 0}
+        className="inline-flex items-center gap-2 rounded-xl bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md disabled:opacity-40 disabled:cursor-not-allowed"
+      >
+        {loading ? (
+          <>
+            <svg className="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+            </svg>
+            Envoi...
+          </>
+        ) : (
+          'Envoyer mon avis'
+        )}
+      </button>
+    </form>
+  )
+}

package/src/portal/auth/tickets/detail/TicketPolling.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+const POLL_INTERVAL = 30_000 // 30 seconds
+
+/**
+ * Polls for new messages on the current ticket.
+ * Uses Payload REST API to check message count, then triggers a router.refresh()
+ * if new messages are detected. Stops polling on session expiry (401/403).
+ */
+export function TicketPolling({
+  ticketId,
+  messageCount,
+}: {
+  ticketId: number | string
+  messageCount: number
+}) {
+  const router = useRouter()
+  const lastCount = useRef(messageCount)
+  const [sessionExpired, setSessionExpired] = useState(false)
+
+  useEffect(() => {
+    lastCount.current = messageCount
+  }, [messageCount])
+
+  useEffect(() => {
+    if (sessionExpired) return
+
+    const interval = setInterval(async () => {
+      try {
+        const res = await fetch(
+          `/api/ticket-messages?where[ticket][equals]=${ticketId}&limit=0&depth=0`,
+          { credentials: 'include' },
+        )
+        if (res.status === 401 || res.status === 403) {
+          setSessionExpired(true)
+          return
+        }
+        if (!res.ok) return
+
+        const data = await res.json()
+        if (data.totalDocs > lastCount.current) {
+          lastCount.current = data.totalDocs
+          router.refresh()
+        }
+      } catch (err) {
+        console.warn('[TicketPolling] Poll failed:', err)
+      }
+    }, POLL_INTERVAL)
+
+    return () => clearInterval(interval)
+  }, [ticketId, router, sessionExpired])
+
+  return null
+}