@consilioweb/payload-support 0.5.1

package/src/views/NewTicketView/client.tsx

@@ -0,0 +1,227 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import s from '../../styles/NewTicket.module.scss'
+
+interface ClientOption { id: number; firstName?: string; lastName?: string; company?: string; email?: string }
+interface ProjectOption { id: number; name: string }
+
+const CATEGORY_KEYS = [
+  { value: '', key: 'ticket.category.select' },
+  { value: 'bug', key: 'ticket.category.bugFull' },
+  { value: 'content', key: 'ticket.category.contentFull' },
+  { value: 'feature', key: 'ticket.category.featureFull' },
+  { value: 'question', key: 'ticket.category.questionFull' },
+  { value: 'hosting', key: 'ticket.category.hostingFull' },
+]
+
+const PRIORITY_KEYS = [
+  { value: 'low', key: 'ticket.priority.low' },
+  { value: 'normal', key: 'ticket.priority.normal' },
+  { value: 'high', key: 'ticket.priority.high' },
+  { value: 'urgent', key: 'ticket.priority.urgent' },
+]
+
+export const NewTicketClient: React.FC = () => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const [subject, setSubject] = useState('')
+  const [description, setDescription] = useState('')
+  const [category, setCategory] = useState('')
+  const [priority, setPriority] = useState('normal')
+  const [clientSearch, setClientSearch] = useState('')
+  const [clientId, setClientId] = useState<number | null>(null)
+  const [clientResults, setClientResults] = useState<ClientOption[]>([])
+  const [selectedClient, setSelectedClient] = useState<ClientOption | null>(null)
+  const [projectId, setProjectId] = useState<number | null>(null)
+  const [projects, setProjects] = useState<ProjectOption[]>([])
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState('')
+
+  // Search clients
+  useEffect(() => {
+    if (clientSearch.length < 2) { setClientResults([]); return }
+    const timer = setTimeout(async () => {
+      try {
+        const res = await fetch(`/api/support-clients?where[or][0][email][contains]=${encodeURIComponent(clientSearch)}&where[or][1][firstName][contains]=${encodeURIComponent(clientSearch)}&where[or][2][company][contains]=${encodeURIComponent(clientSearch)}&limit=8&depth=0`, { credentials: 'include' })
+        if (res.ok) { const d = await res.json(); setClientResults(d.docs || []) }
+      } catch (err) { console.warn('[support] client search error:', err) }
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [clientSearch])
+
+  // Fetch projects
+  useEffect(() => {
+    fetch('/api/projects?where[status][equals]=active&limit=50&depth=0', { credentials: 'include' })
+      .then((r) => r.json())
+      .then((d) => setProjects(d.docs || []))
+      .catch(() => {})
+  }, [])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError('')
+
+    if (!subject.trim()) { setError(t('newTicket.errors.subjectRequired')); return }
+    if (!clientId) { setError(t('newTicket.errors.clientRequired')); return }
+
+    setSubmitting(true)
+    try {
+      const res = await fetch('/api/tickets', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          subject: subject.trim(),
+          client: clientId,
+          category: category || undefined,
+          priority,
+          project: projectId || undefined,
+          source: 'admin',
+          status: 'open',
+        }),
+      })
+
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}))
+        setError(d.errors?.[0]?.message || t('newTicket.errors.creationError'))
+        return
+      }
+
+      const ticket = await res.json()
+
+      if (description.trim()) {
+        await fetch('/api/ticket-messages', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+          body: JSON.stringify({
+            ticket: ticket.doc.id,
+            body: description.trim(),
+            authorType: 'admin',
+            isInternal: false,
+          }),
+        })
+      }
+
+      router.push(`/admin/support/ticket?id=${ticket.doc.id}`)
+    } catch {
+      setError(t('newTicket.errors.networkError'))
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const S: Record<string, React.CSSProperties> = {
+    page: { padding: '20px 30px', maxWidth: 720, margin: '0 auto' },
+    header: { marginBottom: 24 },
+    backLink: { fontSize: 13, color: '#2563eb', textDecoration: 'none' },
+    title: { fontSize: 24, fontWeight: 700, margin: '8px 0 4px', color: 'var(--theme-text)' },
+    subtitle: { fontSize: 14, color: 'var(--theme-elevation-500)' },
+    error: { padding: '10px 14px', borderRadius: 8, background: '#fef2f2', color: '#dc2626', fontSize: 13, marginBottom: 16, border: '1px solid #fecaca' },
+    fieldGroup: { marginBottom: 16 },
+    label: { display: 'block', fontSize: 13, fontWeight: 600, marginBottom: 6, color: 'var(--theme-text)' },
+    required: { color: '#dc2626' },
+    input: { width: '100%', padding: '8px 12px', borderRadius: 8, border: '1px solid var(--theme-elevation-200)', fontSize: 13, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' },
+    select: { width: '100%', padding: '8px 12px', borderRadius: 8, border: '1px solid var(--theme-elevation-200)', fontSize: 13, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' },
+    textarea: { width: '100%', padding: '8px 12px', borderRadius: 8, border: '1px solid var(--theme-elevation-200)', fontSize: 13, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)', minHeight: 120, fontFamily: 'inherit', resize: 'vertical' as const },
+    row3: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 16 },
+    submitBtn: { padding: '10px 20px', borderRadius: 8, background: '#2563eb', color: '#fff', fontSize: 14, fontWeight: 600, border: 'none', cursor: 'pointer' },
+    searchResults: { position: 'absolute' as const, top: '100%', left: 0, right: 0, background: 'var(--theme-elevation-0)', border: '1px solid var(--theme-elevation-200)', borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.1)', zIndex: 50, maxHeight: 200, overflowY: 'auto' as const },
+    searchItem: { padding: '8px 12px', cursor: 'pointer', fontSize: 13, borderBottom: '1px solid var(--theme-elevation-100)' },
+  }
+
+  return (
+    <div style={S.page}>
+      <div style={S.header}>
+        <Link href="/admin/support/inbox" style={S.backLink}>&larr; {t('newTicket.backToInbox')}</Link>
+        <h1 style={S.title}>{t('newTicket.title')}</h1>
+        <p style={S.subtitle}>{t('newTicket.subtitle')}</p>
+      </div>
+
+      {error && <div style={S.error}>{error}</div>}
+
+      <form onSubmit={handleSubmit}>
+        {/* Client search */}
+        <div style={S.fieldGroup}>
+          <label style={S.label}>{t('newTicket.clientLabel')} <span style={S.required}>*</span></label>
+          {selectedClient ? (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderRadius: 10, border: '1px solid var(--theme-elevation-200)', background: 'var(--theme-elevation-50)' }}>
+              <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--theme-text)' }}>
+                {selectedClient.firstName} {selectedClient.lastName} -- {selectedClient.company}
+              </span>
+              <span style={{ fontSize: 12, color: 'var(--theme-elevation-500)' }}>{selectedClient.email}</span>
+              <button type="button" onClick={() => { setSelectedClient(null); setClientId(null); setClientSearch('') }} style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--theme-elevation-400)', fontSize: 16 }}>&times;</button>
+            </div>
+          ) : (
+            <div style={{ position: 'relative' }}>
+              <input
+                type="text"
+                style={S.input}
+                placeholder={t('newTicket.clientSearchPlaceholder')}
+                value={clientSearch}
+                onChange={(e) => setClientSearch(e.target.value)}
+              />
+              {clientResults.length > 0 && (
+                <div style={S.searchResults}>
+                  {clientResults.map((c) => (
+                    <div key={c.id} style={S.searchItem} onClick={() => {
+                      setSelectedClient(c)
+                      setClientId(c.id)
+                      setClientSearch('')
+                      setClientResults([])
+                    }}>
+                      <strong>{c.firstName} {c.lastName}</strong> -- {c.company} <span style={{ color: 'var(--theme-elevation-400)', fontSize: 12 }}>{c.email}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Subject */}
+        <div style={S.fieldGroup}>
+          <label style={S.label}>{t('newTicket.subjectLabel')} <span style={S.required}>*</span></label>
+          <input type="text" style={S.input} placeholder={t('newTicket.subjectPlaceholder')} value={subject} onChange={(e) => setSubject(e.target.value)} />
+        </div>
+
+        {/* Category + Priority + Project */}
+        <div style={S.row3}>
+          <div style={S.fieldGroup}>
+            <label style={S.label}>{t('newTicket.categoryLabel')}</label>
+            <select style={S.select} value={category} onChange={(e) => setCategory(e.target.value)}>
+              {CATEGORY_KEYS.map((c) => <option key={c.value} value={c.value}>{t(c.key)}</option>)}
+            </select>
+          </div>
+          <div style={S.fieldGroup}>
+            <label style={S.label}>{t('newTicket.priorityLabel')}</label>
+            <select style={S.select} value={priority} onChange={(e) => setPriority(e.target.value)}>
+              {PRIORITY_KEYS.map((p) => <option key={p.value} value={p.value}>{t(p.key)}</option>)}
+            </select>
+          </div>
+          <div style={S.fieldGroup}>
+            <label style={S.label}>{t('newTicket.projectLabel')}</label>
+            <select style={S.select} value={projectId || ''} onChange={(e) => setProjectId(e.target.value ? Number(e.target.value) : null)}>
+              <option value="">{t('ticket.noProject')}</option>
+              {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+            </select>
+          </div>
+        </div>
+
+        {/* Description */}
+        <div style={S.fieldGroup}>
+          <label style={S.label}>{t('newTicket.descriptionLabel')}</label>
+          <textarea style={S.textarea} placeholder={t('newTicket.descriptionPlaceholder')} value={description} onChange={(e) => setDescription(e.target.value)} />
+        </div>
+
+        <button type="submit" style={S.submitBtn} disabled={submitting}>
+          {submitting ? t('newTicket.submitting') : t('newTicket.submitButton')}
+        </button>
+      </form>
+    </div>
+  )
+}

package/src/views/NewTicketView/index.tsx

@@ -0,0 +1,30 @@
+import type { AdminViewServerProps } from 'payload'
+import { DefaultTemplate } from '@payloadcms/next/templates'
+import { redirect } from 'next/navigation'
+import React from 'react'
+import { AdminErrorBoundary } from '../shared/ErrorBoundary'
+import { NewTicketClient } from './client'
+
+export const NewTicketView: React.FC<AdminViewServerProps> = ({ initPageResult }) => {
+  const { req, visibleEntities } = initPageResult
+  if (!req.user) redirect('/admin/login')
+
+  return (
+    <DefaultTemplate
+      i18n={req.i18n}
+      locale={initPageResult.locale}
+      params={{}}
+      payload={req.payload}
+      permissions={initPageResult.permissions}
+      searchParams={{}}
+      user={req.user}
+      visibleEntities={visibleEntities}
+    >
+      <AdminErrorBoundary viewName="NewTicketView">
+        <NewTicketClient />
+      </AdminErrorBoundary>
+    </DefaultTemplate>
+  )
+}
+
+export default NewTicketView

package/src/views/PendingEmailsView/client.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import s from '../../styles/PendingEmails.module.scss'
+
+interface SuggestedTicket { id: number; ticketNumber: string; subject: string; score: number }
+interface PendingEmail {
+  id: number; senderEmail: string; senderName?: string; subject: string; body: string
+  client?: { id: number; firstName?: string; lastName?: string; email?: string; company?: string } | number
+  attachments?: Array<{ file: { id: number; filename?: string } | number }>
+  status: 'pending' | 'processed' | 'ignored'
+  processedAction?: 'ticket_created' | 'message_added' | 'ignored'
+  processedTicket?: { id: number; ticketNumber?: string } | number
+  suggestedTickets?: SuggestedTicket[]
+  createdAt: string
+}
+
+type Tab = 'pending' | 'processed' | 'ignored'
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime()
+  const mins = Math.floor(diff / 60000)
+  if (mins < 1) return "a l'instant"
+  if (mins < 60) return `il y a ${mins}min`
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `il y a ${hours}h`
+  return `il y a ${Math.floor(hours / 24)}j`
+}
+
+function EmailCard({ email, onProcess, processing, t }: { email: PendingEmail; onProcess: (action: 'create_ticket' | 'add_to_ticket' | 'ignore', ticketId?: number, clientId?: number) => void; processing: boolean; t: (key: string, vars?: Record<string, string | number>) => string }) {
+  const [expanded, setExpanded] = useState(false)
+  const [showLinkModal, setShowLinkModal] = useState(false)
+  const [linkSearch, setLinkSearch] = useState('')
+  const [linkResults, setLinkResults] = useState<Array<{ id: number; ticketNumber: string; subject: string }>>([])
+  const isPending = email.status === 'pending'
+  const preview = email.body.slice(0, 200) + (email.body.length > 200 ? '...' : '')
+  const suggestions = email.suggestedTickets || []
+
+  useEffect(() => {
+    if (!linkSearch || linkSearch.length < 2) { setLinkResults([]); return }
+    const timer = setTimeout(async () => {
+      try {
+        const res = await fetch(`/api/tickets?where[or][0][ticketNumber][contains]=${encodeURIComponent(linkSearch)}&where[or][1][subject][contains]=${encodeURIComponent(linkSearch)}&limit=10&sort=-updatedAt&depth=0`)
+        if (res.ok) { const data = await res.json(); setLinkResults(data.docs.map((d: Record<string, unknown>) => ({ id: d.id, ticketNumber: d.ticketNumber, subject: d.subject }))) }
+      } catch (err) { console.warn('[support] ticket search error:', err) }
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [linkSearch])
+
+  const S: Record<string, React.CSSProperties> = {
+    card: { padding: 16, borderRadius: 10, border: '1px solid var(--theme-elevation-150)', marginBottom: 12, opacity: processing ? 0.5 : 1 },
+    senderName: { fontWeight: 600, fontSize: 14 },
+    senderEmail: { fontSize: 12, color: 'var(--theme-elevation-500)' },
+    subject: { fontWeight: 600, fontSize: 13, marginTop: 4 },
+    meta: { fontSize: 12, color: 'var(--theme-elevation-400)', marginTop: 2 },
+    body: { fontSize: 13, color: 'var(--theme-text)', padding: '8px 0', whiteSpace: 'pre-wrap' as const, lineHeight: 1.5 },
+    actions: { display: 'flex', gap: 8, marginTop: 8 },
+    btn: { padding: '6px 14px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, fontWeight: 600, cursor: 'pointer', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)' },
+    btnCreate: { background: '#2563eb', color: '#fff', border: 'none' },
+    btnIgnore: { color: '#dc2626', borderColor: '#dc2626' },
+    overlay: { position: 'fixed' as const, inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100 },
+    modal: { background: 'var(--theme-elevation-0)', borderRadius: 12, padding: 24, maxWidth: 480, width: '100%', maxHeight: '80vh', overflowY: 'auto' as const },
+  }
+
+  return (
+    <div style={S.card}>
+      <div>
+        <span style={S.senderName}>{email.senderName || email.senderEmail}</span>
+        {email.senderName && <span style={S.senderEmail}> &lt;{email.senderEmail}&gt;</span>}
+      </div>
+      <div style={S.subject}>{email.subject}</div>
+      <div style={S.meta}>{timeAgo(email.createdAt)} {email.attachments?.length ? `-- ${email.attachments.length} PJ` : ''}</div>
+
+      {suggestions.length > 0 && isPending && (
+        <div style={{ display: 'flex', gap: 6, marginTop: 6, flexWrap: 'wrap' }}>
+          {suggestions.map((s) => (
+            <span key={s.id} style={{ padding: '2px 8px', borderRadius: 4, fontSize: 11, background: s.score >= 0.7 ? '#dcfce7' : '#fef3c7', color: s.score >= 0.7 ? '#166534' : '#92400e' }}>
+              Similaire a {s.ticketNumber} ({Math.round(s.score * 100)}%)
+            </span>
+          ))}
+        </div>
+      )}
+
+      <div style={S.body}>{expanded ? email.body : preview}</div>
+      {email.body.length > 200 && <button onClick={() => setExpanded(!expanded)} style={{ ...S.btn, fontSize: 11, padding: '2px 8px' }}>{expanded ? t('pendingEmails.collapse') : t('pendingEmails.expand')}</button>}
+
+      {isPending && (
+        <div style={S.actions}>
+          <button onClick={() => {
+            const clientId = typeof email.client === 'object' && email.client ? email.client.id : undefined
+            onProcess('create_ticket', undefined, clientId)
+          }} disabled={processing} style={{ ...S.btn, ...S.btnCreate }}>{t('pendingEmails.actions.createTicket')}</button>
+          <button onClick={() => setShowLinkModal(true)} disabled={processing} style={S.btn}>{t('pendingEmails.actions.linkToTicket')}</button>
+          <button onClick={() => onProcess('ignore')} disabled={processing} style={{ ...S.btn, ...S.btnIgnore }}>{t('pendingEmails.actions.ignore')}</button>
+        </div>
+      )}
+
+      {showLinkModal && (
+        <div style={S.overlay} onClick={() => setShowLinkModal(false)}>
+          <div style={S.modal} onClick={(e) => e.stopPropagation()}>
+            <h3 style={{ margin: '0 0 12px', fontSize: 16, fontWeight: 700 }}>{t('pendingEmails.linkModal.title')}</h3>
+            {suggestions.length > 0 && (
+              <div style={{ marginBottom: 12 }}>
+                <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 4, color: 'var(--theme-elevation-500)' }}>{t('pendingEmails.linkModal.suggestions')}</div>
+                {suggestions.map((s) => (
+                  <button key={s.id} onClick={() => { setShowLinkModal(false); onProcess('add_to_ticket', s.id) }} style={{ display: 'block', width: '100%', padding: '8px 12px', border: '1px solid var(--theme-elevation-200)', borderRadius: 6, background: 'var(--theme-elevation-0)', cursor: 'pointer', textAlign: 'left', marginBottom: 4, fontSize: 13 }}>
+                    <strong>{s.ticketNumber}</strong> {s.subject} <span style={{ fontSize: 11, color: '#16a34a' }}>{Math.round(s.score * 100)}%</span>
+                  </button>
+                ))}
+              </div>
+            )}
+            <input type="text" placeholder={t('pendingEmails.linkModal.searchPlaceholder')} value={linkSearch} onChange={(e) => setLinkSearch(e.target.value)} style={{ width: '100%', padding: '8px 12px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 13, marginBottom: 8, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} />
+            {linkResults.map((r) => (
+              <button key={r.id} onClick={() => { setShowLinkModal(false); onProcess('add_to_ticket', r.id) }} style={{ display: 'block', width: '100%', padding: '8px 12px', border: '1px solid var(--theme-elevation-200)', borderRadius: 6, background: 'var(--theme-elevation-0)', cursor: 'pointer', textAlign: 'left', marginBottom: 4, fontSize: 13 }}>
+                <strong>{r.ticketNumber}</strong> {r.subject}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const PendingEmailsClient: React.FC = () => {
+  const { t } = useTranslation()
+  const [emails, setEmails] = useState<PendingEmail[]>([])
+  const [loading, setLoading] = useState(true)
+  const [tab, setTab] = useState<Tab>('pending')
+  const [processing, setProcessing] = useState<number | null>(null)
+
+  const fetchEmails = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/pending-emails?where[status][equals]=${tab}&sort=-createdAt&limit=50&depth=1`)
+      if (res.ok) { const data = await res.json(); setEmails(data.docs) }
+    } catch { /* ignore */ }
+    setLoading(false)
+  }, [tab])
+
+  useEffect(() => { setLoading(true); fetchEmails() }, [fetchEmails])
+  useEffect(() => { if (tab !== 'pending') return; const iv = setInterval(fetchEmails, 30000); return () => clearInterval(iv) }, [fetchEmails, tab])
+
+  const handleProcess = async (emailId: number, action: 'create_ticket' | 'add_to_ticket' | 'ignore', ticketId?: number, clientId?: number) => {
+    setProcessing(emailId)
+    try {
+      const res = await fetch(`/api/support/pending-emails/${emailId}/process`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action, ticketId, clientId }) })
+      if (res.ok) { setEmails((prev) => prev.filter((e) => e.id !== emailId)) }
+      else { const err = await res.json().catch(() => ({ error: 'Unknown error' })); alert(`Erreur : ${err.error || res.statusText}`) }
+    } catch { alert('Erreur reseau') }
+    setProcessing(null)
+  }
+
+  const tabs: { key: Tab; label: string }[] = [{ key: 'pending', label: t('pendingEmails.tabs.pending') }, { key: 'processed', label: t('pendingEmails.tabs.processed') }, { key: 'ignored', label: t('pendingEmails.tabs.ignored') }]
+
+  return (
+    <div style={{ padding: '20px 30px', maxWidth: 900, margin: '0 auto' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+        <div>
+          <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0, color: 'var(--theme-text)' }}>{t('pendingEmails.title')}</h1>
+          <p style={{ fontSize: 13, color: 'var(--theme-elevation-500)', margin: '4px 0 0' }}>{t('pendingEmails.subtitle')}</p>
+        </div>
+        {tab === 'pending' && emails.length > 0 && <span style={{ padding: '4px 10px', borderRadius: 10, background: '#fef2f2', color: '#dc2626', fontSize: 12, fontWeight: 700 }}>{t('pendingEmails.pendingCount', { count: String(emails.length) })}</span>}
+      </div>
+
+      <div style={{ display: 'flex', gap: 4, marginBottom: 16 }}>
+        {tabs.map((tb) => (
+          <button key={tb.key} onClick={() => setTab(tb.key)} style={{ padding: '6px 12px', borderRadius: 6, border: 'none', background: tab === tb.key ? 'var(--theme-elevation-100)' : 'none', cursor: 'pointer', fontSize: 13, fontWeight: tab === tb.key ? 700 : 500, color: tab === tb.key ? 'var(--theme-text)' : 'var(--theme-elevation-500)' }}>{tb.label}</button>
+        ))}
+      </div>
+
+      {loading ? <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('common.loading')}</div>
+        : emails.length === 0 ? <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t(`pendingEmails.empty.${tab}`)}</div>
+        : emails.map((email) => <EmailCard key={email.id} email={email} onProcess={(action, ticketId, clientId) => handleProcess(email.id, action, ticketId, clientId)} processing={processing === email.id} t={t} />)}
+    </div>
+  )
+}

package/src/views/PendingEmailsView/index.tsx

@@ -0,0 +1,33 @@
+import type { AdminViewServerProps } from 'payload'
+import { DefaultTemplate } from '@payloadcms/next/templates'
+import { redirect } from 'next/navigation'
+import React from 'react'
+import { AdminErrorBoundary } from '../shared/ErrorBoundary'
+import { PendingEmailsClient } from './client'
+
+export const PendingEmailsView: React.FC<AdminViewServerProps> = ({ initPageResult }) => {
+  const { req, visibleEntities } = initPageResult
+
+  if (!req.user) {
+    redirect('/admin/login')
+  }
+
+  return (
+    <DefaultTemplate
+      i18n={req.i18n}
+      locale={initPageResult.locale}
+      params={{}}
+      payload={req.payload}
+      permissions={initPageResult.permissions}
+      searchParams={{}}
+      user={req.user}
+      visibleEntities={visibleEntities}
+    >
+      <AdminErrorBoundary viewName="PendingEmailsView">
+        <PendingEmailsClient />
+      </AdminErrorBoundary>
+    </DefaultTemplate>
+  )
+}
+
+export default PendingEmailsView