@consilioweb/payload-support 0.5.1

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

@@ -0,0 +1,84 @@
+import React from 'react'
+import { headers as getHeaders } from 'next/headers'
+import { getPayload } from 'payload'
+import configPromise from '@payload-config'
+import { DashboardClient } from './DashboardClient'
+
+export default async function SupportDashboardPage() {
+  const payload = await getPayload({ config: configPromise })
+  const headers = await getHeaders()
+  const { user } = await payload.auth({ headers })
+
+  if (!user) return null
+
+  const tickets = await payload.find({
+    collection: 'tickets',
+    where: {
+      client: { equals: user.id },
+    },
+    sort: '-updatedAt',
+    limit: 200,
+    depth: 1,
+    overrideAccess: false,
+    user,
+  })
+
+  // Fetch all messages for these tickets
+  const ticketIds = tickets.docs.map((t) => t.id)
+  const allMessages = ticketIds.length > 0
+    ? await payload.find({
+        collection: 'ticket-messages',
+        where: {
+          ticket: { in: ticketIds },
+        },
+        sort: '-createdAt',
+        limit: 500,
+        depth: 0,
+        overrideAccess: false,
+        user,
+      })
+    : { docs: [] }
+
+  // Build map of lastClientReadAt per ticket
+  const readAtMap: Record<string | number, string | null> = {}
+  for (const t of tickets.docs) {
+    readAtMap[t.id] = t.lastClientReadAt || null
+  }
+
+  // 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 }> = {}
+  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 }
+    } else {
+      ticketMeta[tid].count++
+    }
+  }
+
+  // Serialize tickets for client component
+  const serializedTickets = tickets.docs.map((ticket) => {
+    const meta = ticketMeta[ticket.id]
+    const isClosed = ticket.status === 'resolved'
+    return {
+      id: ticket.id,
+      ticketNumber: ticket.ticketNumber,
+      subject: ticket.subject,
+      status: ticket.status,
+      priority: ticket.priority,
+      category: ticket.category,
+      projectName: ticket.project && typeof ticket.project === 'object' ? ticket.project.name : null,
+      updatedAt: ticket.updatedAt,
+      createdAt: ticket.createdAt,
+      hasNewMessage: (meta?.hasNew && !isClosed) || false,
+      messageCount: meta?.count || 0,
+      totalTimeMinutes: ticket.totalTimeMinutes,
+      lastMessagePreview: meta?.lastMessagePreview || null,
+    }
+  })
+
+  return <DashboardClient tickets={serializedTickets} />
+}

package/src/portal/auth/faq/FAQSearch.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import React, { useState, useMemo } from 'react'
+
+interface Article {
+  id: string
+  title: string
+  category: string
+  slug: string
+}
+
+export function FAQSearch({ articles }: { articles: Article[] }) {
+  const [query, setQuery] = useState('')
+  const [isFocused, setIsFocused] = useState(false)
+
+  const results = useMemo(() => {
+    if (!query.trim()) return []
+    const q = query.toLowerCase()
+    return articles.filter((a) => a.title.toLowerCase().includes(q))
+  }, [query, articles])
+
+  const showResults = query.trim().length > 0
+
+  return (
+    <div className="relative mb-10">
+      {/* Search input */}
+      <div className={`relative rounded-2xl border bg-white dark:bg-slate-800/50 shadow-sm backdrop-blur-sm transition-all duration-200 ${
+        isFocused
+          ? 'border-blue-500 ring-4 ring-blue-500/10 shadow-md'
+          : 'border-slate-200 dark:border-slate-700/50 hover:border-slate-300 dark:hover:border-slate-600'
+      }`}>
+        <div className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className={`h-5 w-5 transition-colors duration-200 ${isFocused ? 'text-blue-500' : 'text-slate-400 dark:text-slate-500'}`}>
+            <path fillRule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clipRule="evenodd" />
+          </svg>
+        </div>
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          placeholder="Rechercher un article..."
+          className="w-full bg-transparent py-4 pl-12 pr-4 text-sm text-slate-900 dark:text-white placeholder:text-slate-400 dark:placeholder:text-slate-500 outline-none"
+        />
+        {query && (
+          <button
+            type="button"
+            onClick={() => setQuery('')}
+            className="absolute right-3 top-1/2 -translate-y-1/2 flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-600 dark:hover:text-slate-300"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
+              <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {/* Search results dropdown */}
+      {showResults && (
+        <div className="mt-2 rounded-xl border border-slate-200 dark:border-slate-700/50 bg-white dark:bg-slate-800 shadow-lg">
+          {results.length === 0 ? (
+            <div className="flex flex-col items-center py-8 px-4">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="mb-2 h-8 w-8 text-slate-300 dark:text-slate-600">
+                <path fillRule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clipRule="evenodd" />
+              </svg>
+              <p className="text-sm font-medium text-slate-500 dark:text-slate-400">
+                Aucun resultat pour &laquo;&nbsp;{query}&nbsp;&raquo;
+              </p>
+              <p className="mt-1 text-xs text-slate-400 dark:text-slate-500">Essayez avec d&apos;autres mots-cles</p>
+            </div>
+          ) : (
+            <div className="divide-y divide-slate-100 dark:divide-slate-700/50">
+              <div className="px-4 py-2.5">
+                <p className="text-xs font-medium text-slate-400 dark:text-slate-500">
+                  {results.length} resultat{results.length > 1 ? 's' : ''}
+                </p>
+              </div>
+              {results.map((r) => (
+                <button
+                  key={r.id}
+                  onClick={() => {
+                    // Find and open the details element
+                    const details = document.querySelectorAll('details')
+                    details.forEach((d) => {
+                      const summary = d.querySelector('summary span')
+                      if (summary?.textContent === r.title) {
+                        d.open = true
+                        d.scrollIntoView({ behavior: 'smooth', block: 'center' })
+                      }
+                    })
+                    setQuery('')
+                  }}
+                  className="group flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-slate-50 dark:hover:bg-slate-700/50"
+                >
+                  <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-slate-100 dark:bg-slate-700 transition-colors group-hover:bg-blue-50 dark:group-hover:bg-blue-900/30">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4 text-slate-400 group-hover:text-blue-500 transition-colors">
+                      <path fillRule="evenodd" d="M4.25 2A2.25 2.25 0 002 4.25v11.5A2.25 2.25 0 004.25 18h11.5A2.25 2.25 0 0018 15.75V4.25A2.25 2.25 0 0015.75 2H4.25zm4.03 6.28a.75.75 0 00-1.06-1.06L4.97 9.47a.75.75 0 000 1.06l2.25 2.25a.75.75 0 001.06-1.06L6.56 10l1.72-1.72zm2.44-1.06a.75.75 0 011.06 0l2.25 2.25a.75.75 0 010 1.06l-2.25 2.25a.75.75 0 11-1.06-1.06L12.44 10l-1.72-1.72a.75.75 0 010-1.06z" clipRule="evenodd" />
+                    </svg>
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                      {r.title}
+                    </p>
+                  </div>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4 flex-shrink-0 text-slate-300 dark:text-slate-600 transition-colors group-hover:text-blue-400">
+                    <path fillRule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clipRule="evenodd" />
+                  </svg>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,199 @@
+import React from 'react'
+import { getPayload } from 'payload'
+import configPromise from '@payload-config'
+import Link from 'next/link'
+import { RichText } from '@payloadcms/richtext-lexical/react'
+import { FAQSearch } from './FAQSearch'
+
+export const revalidate = 300
+
+const categoryConfig: Record<string, { label: string; icon: React.ReactNode; color: string }> = {
+  'getting-started': {
+    label: 'Premiers pas',
+    color: 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600 dark:text-emerald-400',
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
+        <path fillRule="evenodd" d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+  tickets: {
+    label: 'Tickets & Support',
+    color: 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400',
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
+        <path fillRule="evenodd" d="M5.25 2A2.25 2.25 0 003 4.25v2.879a2.25 2.25 0 00.659 1.59l7.5 7.502a2.25 2.25 0 003.182 0l2.879-2.879a2.25 2.25 0 000-3.182l-7.5-7.502A2.25 2.25 0 008.129 2H5.25zM6.5 6a.5.5 0 100-1 .5.5 0 000 1z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+  account: {
+    label: 'Compte & Profil',
+    color: 'bg-violet-50 dark:bg-violet-900/20 text-violet-600 dark:text-violet-400',
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
+        <path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.493a1.23 1.23 0 00.41 1.412A9.957 9.957 0 0010 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 00-13.074.003z" />
+      </svg>
+    ),
+  },
+  billing: {
+    label: 'Facturation',
+    color: 'bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400',
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
+        <path fillRule="evenodd" d="M2.5 4A1.5 1.5 0 001 5.5V6h18v-.5A1.5 1.5 0 0017.5 4h-15zM19 8.5H1v6A1.5 1.5 0 002.5 16h15a1.5 1.5 0 001.5-1.5v-6zM3 13.25a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zm4.75-.75a.75.75 0 000 1.5h3.5a.75.75 0 000-1.5h-3.5z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+  technical: {
+    label: 'Technique',
+    color: 'bg-slate-100 dark:bg-slate-700/50 text-slate-600 dark:text-slate-400',
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
+        <path fillRule="evenodd" d="M7.84 1.804A1 1 0 018.82 1h2.36a1 1 0 01.98.804l.331 1.652a6.993 6.993 0 011.929 1.115l1.598-.54a1 1 0 011.186.447l1.18 2.044a1 1 0 01-.205 1.251l-1.267 1.113a7.047 7.047 0 010 2.228l1.267 1.113a1 1 0 01.206 1.25l-1.18 2.045a1 1 0 01-1.187.447l-1.598-.54a6.993 6.993 0 01-1.929 1.115l-.33 1.652a1 1 0 01-.98.804H8.82a1 1 0 01-.98-.804l-.331-1.652a6.993 6.993 0 01-1.929-1.115l-1.598.54a1 1 0 01-1.186-.447l-1.18-2.044a1 1 0 01.205-1.251l1.267-1.114a7.05 7.05 0 010-2.227L1.821 7.773a1 1 0 01-.206-1.25l1.18-2.045a1 1 0 011.187-.447l1.598.54A6.993 6.993 0 017.51 3.456l.33-1.652zM10 13a3 3 0 100-6 3 3 0 000 6z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+  general: {
+    label: 'General',
+    color: 'bg-sky-50 dark:bg-sky-900/20 text-sky-600 dark:text-sky-400',
+    icon: (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
+        <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clipRule="evenodd" />
+      </svg>
+    ),
+  },
+}
+
+export default async function FAQPage() {
+  const payload = await getPayload({ config: configPromise })
+
+  const articles = await payload.find({
+    collection: 'knowledge-base',
+    where: { published: { equals: true } },
+    sort: 'sortOrder',
+    limit: 200,
+    depth: 0,
+  })
+
+  // Group by category
+  const grouped: Record<string, typeof articles.docs> = {}
+  for (const article of articles.docs) {
+    const cat = (article.category as string) || 'general'
+    if (!grouped[cat]) grouped[cat] = []
+    grouped[cat]!.push(article)
+  }
+
+  const totalArticles = articles.docs.length
+  const totalCategories = Object.keys(grouped).length
+
+  return (
+    <div className="mx-auto max-w-4xl px-4 pb-12">
+      {/* Back navigation */}
+      <Link
+        href="/support/dashboard"
+        className="group mb-8 inline-flex items-center gap-2 text-sm font-medium text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4 transition-transform group-hover:-translate-x-0.5">
+          <path fillRule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clipRule="evenodd" />
+        </svg>
+        Retour aux tickets
+      </Link>
+
+      {/* Hero header */}
+      <div className="mb-10 text-center">
+        <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-50 dark:bg-blue-900/20">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-7 w-7 text-blue-600 dark:text-blue-400">
+            <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z" clipRule="evenodd" />
+          </svg>
+        </div>
+        <h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-4xl">
+          Base de connaissances
+        </h1>
+        <p className="mx-auto mt-3 max-w-lg text-base text-slate-500 dark:text-slate-400">
+          Trouvez des reponses a vos questions parmi nos {totalArticles} articles
+          {totalCategories > 1 && ` dans ${totalCategories} categories`}.
+        </p>
+      </div>
+
+      {/* Search */}
+      <FAQSearch articles={articles.docs.map((a) => ({
+        id: String(a.id),
+        title: a.title,
+        category: a.category as string,
+        slug: a.slug,
+      }))} />
+
+      {/* Categories */}
+      <div className="space-y-10">
+        {Object.entries(grouped).map(([cat, items]) => {
+          const config = categoryConfig[cat] || {
+            label: cat,
+            color: 'bg-slate-100 dark:bg-slate-700/50 text-slate-600 dark:text-slate-400',
+            icon: (
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
+                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clipRule="evenodd" />
+              </svg>
+            ),
+          }
+          return (
+            <section key={cat}>
+              {/* Category header */}
+              <div className="mb-4 flex items-center gap-3">
+                <div className={`flex h-9 w-9 items-center justify-center rounded-xl ${config.color}`}>
+                  {config.icon}
+                </div>
+                <div>
+                  <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{config.label}</h2>
+                  <p className="text-xs text-slate-400 dark:text-slate-500">{items.length} article{items.length > 1 ? 's' : ''}</p>
+                </div>
+              </div>
+
+              {/* Articles */}
+              <div className="space-y-2">
+                {items.map((article) => (
+                  <details
+                    key={article.id}
+                    className="group rounded-xl border border-slate-200 dark:border-slate-700/50 bg-white dark:bg-slate-800/50 shadow-sm transition-all duration-200 hover:border-slate-300 dark:hover:border-slate-600 open:shadow-md"
+                  >
+                    <summary className="flex cursor-pointer items-center justify-between gap-4 px-5 py-4 text-sm font-semibold text-slate-900 dark:text-white list-none [&::-webkit-details-marker]:hidden">
+                      <span className="leading-relaxed">{article.title}</span>
+                      <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-slate-100 dark:bg-slate-700 transition-colors group-open:bg-blue-50 dark:group-open:bg-blue-900/30">
+                        <svg
+                          className="h-4 w-4 text-slate-400 transition-transform duration-200 group-open:rotate-180 group-open:text-blue-600 dark:group-open:text-blue-400"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                          strokeWidth={2}
+                        >
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                        </svg>
+                      </div>
+                    </summary>
+                    <div className="border-t border-slate-100 dark:border-slate-700/50 px-5 py-4">
+                      <div className="prose prose-sm prose-slate dark:prose-invert max-w-none prose-p:text-slate-600 dark:prose-p:text-slate-300 prose-p:leading-relaxed prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline">
+                        {article.body && <RichText data={article.body} />}
+                      </div>
+                    </div>
+                  </details>
+                ))}
+              </div>
+            </section>
+          )
+        })}
+      </div>
+
+      {/* Empty state */}
+      {articles.docs.length === 0 && (
+        <div className="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-700 py-16 px-6">
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-700">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-6 w-6 text-slate-400">
+              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clipRule="evenodd" />
+            </svg>
+          </div>
+          <p className="text-base font-semibold text-slate-900 dark:text-white">Aucun article pour le moment</p>
+          <p className="mt-1 text-sm text-slate-400 dark:text-slate-500">Les articles FAQ seront bientot disponibles.</p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/portal/auth/layout.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { headers as getHeaders } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { getPayload } from 'payload'
+import configPromise from '@payload-config'
+import { SupportHeader } from './SupportHeader'
+import { ChatWidget } from './ChatWidget'
+import { ChatbotWidget } from './ChatbotWidget'
+
+export const dynamic = 'force-dynamic'
+
+export type SupportUser = {
+  id: number
+  email: string
+  company: string
+  firstName: string
+  lastName: string
+  collection: 'support-clients'
+}
+
+function isSupportUser(user: unknown): user is SupportUser {
+  return typeof user === 'object' && user !== null && 'company' in user
+}
+
+async function getSupportUser(): Promise<SupportUser | null> {
+  try {
+    const payload = await getPayload({ config: configPromise })
+    const headers = await getHeaders()
+
+    // Use Payload's auth to verify the JWT from cookies
+    const { user } = await payload.auth({ headers })
+
+    if (user && isSupportUser(user)) {
+      return user
+    }
+
+    return null
+  } catch (error) {
+    console.error('[support-layout] Failed to get user:', error)
+    return null
+  }
+}
+
+export default async function SupportAuthLayout({ children }: { children: React.ReactNode }) {
+  const user = await getSupportUser()
+
+  if (!user) {
+    redirect('/support/login')
+  }
+
+  return (
+    <>
+      <SupportHeader user={user} />
+      <main className="mx-auto w-full max-w-screen-2xl px-6 py-8 sm:px-10 lg:px-16 dark:text-white">
+        {children}
+      </main>
+      <ChatbotWidget />
+      <ChatWidget />
+    </>
+  )
+}