@consilioweb/payload-support 0.5.1

package/src/views/EmailTrackingView/client.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import s from '../../styles/EmailTracking.module.scss'
+
+interface EmailLog { id: number; status: 'success' | 'ignored' | 'error'; action?: string; subject?: string; recipientEmail?: string; ticketNumber?: string; errorMessage?: string; httpStatus?: number; processingTimeMs?: number; createdAt: string }
+interface Stats { total: number; success: number; errors: number; ignored: number; successRate: number; avgProcessingTime: number }
+type StatusTab = 'all' | 'success' | 'error' | 'ignored'
+type DateRange = 7 | 30 | 90
+
+const STATUS_CFG: Record<string, { key: string; bg: string; color: string }> = {
+  success: { key: 'emailTracking.status.success', bg: '#dcfce7', color: '#16a34a' },
+  error: { key: 'emailTracking.status.error', bg: '#fef2f2', color: '#dc2626' },
+  ignored: { key: 'emailTracking.status.ignored', bg: '#f3f4f6', color: '#6b7280' },
+}
+
+function fmtDate(d: string): string { return new Date(d).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' }) }
+
+export const EmailTrackingClient: React.FC = () => {
+  const { t } = useTranslation()
+  const [logs, setLogs] = useState<EmailLog[]>([])
+  const [stats, setStats] = useState<Stats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [tab, setTab] = useState<StatusTab>('all')
+  const [dateRange, setDateRange] = useState<DateRange>(7)
+  const [search, setSearch] = useState('')
+  const [expandedRow, setExpandedRow] = useState<number | null>(null)
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(false)
+  const [totalDocs, setTotalDocs] = useState(0)
+
+  const fetchStats = useCallback(async () => { try { const r = await fetch(`/api/support/email-stats?days=${dateRange}`); if (r.ok) setStats(await r.json()) } catch (err) { console.warn('[support] fetchStats error:', err) } }, [dateRange])
+  const fetchLogs = useCallback(async () => {
+    const cutoff = new Date(Date.now() - dateRange * 86400000).toISOString()
+    const where = [`where[createdAt][greater_than]=${cutoff}`]
+    if (tab !== 'all') where.push(`where[status][equals]=${tab}`)
+    if (search.trim()) { where.push(`where[or][0][recipientEmail][contains]=${encodeURIComponent(search)}`, `where[or][1][subject][contains]=${encodeURIComponent(search)}`) }
+    try { const r = await fetch(`/api/email-logs?${where.join('&')}&sort=-createdAt&limit=30&page=${page}&depth=0`); if (r.ok) { const d = await r.json(); setLogs(d.docs); setHasMore(d.hasNextPage); setTotalDocs(d.totalDocs) } } catch (err) { console.warn('[support] fetchLogs error:', err) }
+    setLoading(false)
+  }, [dateRange, tab, search, page])
+
+  useEffect(() => { setLoading(true); setPage(1) }, [dateRange, tab, search])
+  useEffect(() => { fetchStats(); fetchLogs() }, [fetchStats, fetchLogs])
+
+  const S: Record<string, React.CSSProperties> = {
+    page: { padding: '20px 30px', maxWidth: 1100, margin: '0 auto' },
+    statGrid: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 20 },
+    statCard: { padding: '12px 16px', borderRadius: 8, border: '1px solid var(--theme-elevation-150)' },
+    statLabel: { fontSize: 11, color: 'var(--theme-elevation-500)' },
+    statValue: { fontSize: 22, fontWeight: 700, color: 'var(--theme-text)' },
+    filters: { display: 'flex', gap: 12, alignItems: 'center', marginBottom: 16, flexWrap: 'wrap' as const },
+    tab: { padding: '4px 10px', borderRadius: 6, border: 'none', background: 'none', cursor: 'pointer', fontSize: 12, color: 'var(--theme-elevation-500)' },
+    tabActive: { background: 'var(--theme-elevation-100)', fontWeight: 700, color: 'var(--theme-text)' },
+    dateBtn: { padding: '4px 8px', borderRadius: 4, border: '1px solid var(--theme-elevation-200)', fontSize: 11, cursor: 'pointer', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)' },
+    dateBtnActive: { background: '#2563eb', color: '#fff', borderColor: '#2563eb' },
+    table: { width: '100%', borderCollapse: 'collapse' as const, fontSize: 13 },
+    th: { textAlign: 'left' as const, padding: '6px 8px', borderBottom: '1px solid var(--theme-elevation-200)', fontSize: 11, color: 'var(--theme-elevation-500)' },
+    td: { padding: '6px 8px', borderBottom: '1px solid var(--theme-elevation-100)' },
+    badge: { padding: '2px 6px', borderRadius: 4, fontSize: 11, fontWeight: 600 },
+    btn: { padding: '4px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 11, cursor: 'pointer', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)' },
+  }
+
+  return (
+    <div style={S.page}>
+      <h1 style={{ fontSize: 22, fontWeight: 700, marginBottom: 16, color: 'var(--theme-text)' }}>{t('emailTracking.title')}</h1>
+
+      <div style={S.statGrid}>
+        <div style={S.statCard}><div style={S.statLabel}>{t('emailTracking.stats.emailsSent')}</div><div style={S.statValue}>{stats?.total ?? '--'}</div></div>
+        <div style={S.statCard}><div style={S.statLabel}>{t('emailTracking.stats.successRate')}</div><div style={S.statValue}>{stats ? `${stats.successRate}%` : '--'}</div></div>
+        <div style={S.statCard}><div style={S.statLabel}>{t('emailTracking.stats.errors')}</div><div style={S.statValue}>{stats?.errors ?? '--'}</div></div>
+        <div style={S.statCard}><div style={S.statLabel}>{t('emailTracking.stats.avgTime')}</div><div style={S.statValue}>{stats ? `${stats.avgProcessingTime}ms` : '--'}</div></div>
+      </div>
+
+      <div style={S.filters}>
+        <div style={{ display: 'flex', gap: 4 }}>
+          {(['all', 'success', 'error', 'ignored'] as StatusTab[]).map((st) => (
+            <button key={st} style={{ ...S.tab, ...(tab === st ? S.tabActive : {}) }} onClick={() => setTab(st)}>{t(`emailTracking.tabs.${st === 'error' ? 'errors' : st}`)}</button>
+          ))}
+        </div>
+        <div style={{ display: 'flex', gap: 4 }}>
+          {([7, 30, 90] as DateRange[]).map((v) => (
+            <button key={v} style={{ ...S.dateBtn, ...(dateRange === v ? S.dateBtnActive : {}) }} onClick={() => setDateRange(v)}>{v}j</button>
+          ))}
+        </div>
+        <input type="text" placeholder={t('emailTracking.searchPlaceholder')} value={search} onChange={(e) => setSearch(e.target.value)} style={{ padding: '6px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 12, color: 'var(--theme-text)', background: 'var(--theme-elevation-0)' }} />
+      </div>
+
+      {loading ? <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('common.loading')}</div>
+        : logs.length === 0 ? <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('emailTracking.noLogs')}</div>
+        : (
+          <table style={S.table}>
+            <thead><tr><th style={S.th}>{t('emailTracking.tableHeaders.date')}</th><th style={S.th}>{t('emailTracking.tableHeaders.recipient')}</th><th style={S.th}>{t('emailTracking.tableHeaders.subject')}</th><th style={S.th}>{t('emailTracking.tableHeaders.ticket')}</th><th style={S.th}>{t('emailTracking.tableHeaders.status')}</th><th style={S.th}>{t('emailTracking.tableHeaders.action')}</th><th style={{ ...S.th, textAlign: 'right' }}>{t('emailTracking.tableHeaders.time')}</th></tr></thead>
+            <tbody>
+              {logs.map((log) => (
+                <React.Fragment key={log.id}>
+                  <tr onClick={() => log.status === 'error' && log.errorMessage ? setExpandedRow(expandedRow === log.id ? null : log.id) : null} style={{ cursor: log.status === 'error' ? 'pointer' : 'default' }}>
+                    <td style={{ ...S.td, fontSize: 12, whiteSpace: 'nowrap' }}>{fmtDate(log.createdAt)}</td>
+                    <td style={{ ...S.td, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{log.recipientEmail || '--'}</td>
+                    <td style={{ ...S.td, maxWidth: 250, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{log.subject || '--'}</td>
+                    <td style={S.td}>{log.ticketNumber || '--'}</td>
+                    <td style={S.td}><span style={{ ...S.badge, background: STATUS_CFG[log.status]?.bg, color: STATUS_CFG[log.status]?.color }}>{STATUS_CFG[log.status]?.key ? t(STATUS_CFG[log.status].key) : log.status}</span></td>
+                    <td style={{ ...S.td, fontSize: 12 }}>{log.action || '--'}</td>
+                    <td style={{ ...S.td, textAlign: 'right' }}>{log.processingTimeMs != null ? <span style={{ fontFamily: 'monospace', fontSize: 12, color: log.processingTimeMs > 2000 ? '#dc2626' : '#16a34a' }}>{log.processingTimeMs}ms</span> : '--'}</td>
+                  </tr>
+                  {expandedRow === log.id && log.errorMessage && (
+                    <tr><td colSpan={7}><div style={{ padding: '8px 12px', background: '#fef2f2', borderRadius: 6, fontSize: 12, color: '#dc2626' }}>Erreur{log.httpStatus ? ` (HTTP ${log.httpStatus})` : ''}: {log.errorMessage}</div></td></tr>
+                  )}
+                </React.Fragment>
+              ))}
+            </tbody>
+          </table>
+        )}
+
+      {totalDocs > 0 && (
+        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 16, alignItems: 'center' }}>
+          <button style={S.btn} onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>{t('common.previous')}</button>
+          <span style={{ fontSize: 12, color: 'var(--theme-elevation-500)' }}>{t('common.page')} {page} -- {totalDocs} {t('common.results')}</span>
+          <button style={S.btn} onClick={() => setPage((p) => p + 1)} disabled={!hasMore}>{t('common.next')}</button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/views/EmailTrackingView/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 { EmailTrackingClient } from './client'
+
+export const EmailTrackingView: 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="EmailTrackingView">
+        <EmailTrackingClient />
+      </AdminErrorBoundary>
+    </DefaultTemplate>
+  )
+}
+
+export default EmailTrackingView

package/src/views/ImportConversationView/client.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import React, { useState, useCallback, useRef } from 'react'
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import s from '../../styles/ImportConversation.module.scss'
+
+interface PreviewMessage { from: 'client' | 'admin'; name: string; date: string; preview: string }
+interface PreviewData { client: { email: string; name: string; company: string }; subject: string; messageCount: number; messages: PreviewMessage[]; parseMethod: string }
+interface ImportResult { ticketNumber: string; ticketId: number; clientEmail: string; clientName: string; clientCompany: string; isNewClient: boolean; messagesImported: number }
+
+export function ImportConversationClient() {
+  const { t } = useTranslation()
+  const [markdown, setMarkdown] = useState('')
+  const [fileName, setFileName] = useState('')
+  const [isDragOver, setIsDragOver] = useState(false)
+  const [preview, setPreview] = useState<PreviewData | null>(null)
+  const [result, setResult] = useState<ImportResult | null>(null)
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const fileRef = useRef<HTMLInputElement>(null)
+
+  const handleFile = useCallback((file: File) => {
+    if (!file.name.endsWith('.md') && !file.name.endsWith('.txt')) { setError(t('import.formatError')); return }
+    if (file.size > 512_000) { setError(t('import.sizeError')); return }
+    setError(''); setFileName(file.name); setResult(null); setPreview(null)
+    const reader = new FileReader()
+    reader.onload = (e) => { setMarkdown(e.target?.result as string) }
+    reader.readAsText(file)
+  }, [])
+
+  const onDrop = useCallback((e: React.DragEvent) => { e.preventDefault(); setIsDragOver(false); const file = e.dataTransfer.files[0]; if (file) handleFile(file) }, [handleFile])
+  const onFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => { const file = e.target.files?.[0]; if (file) handleFile(file) }, [handleFile])
+
+  const doPreview = useCallback(async () => {
+    if (!markdown) return; setLoading(true); setError(''); setPreview(null)
+    try { const res = await fetch('/api/support/import-conversation', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ markdown, previewOnly: true }) }); const data = await res.json(); if (!res.ok) { setError(data.error || 'Erreur'); return }; setPreview(data) } catch { setError('Erreur reseau') } finally { setLoading(false) }
+  }, [markdown])
+
+  const doImport = useCallback(async () => {
+    if (!markdown) return; setLoading(true); setError('')
+    try { const res = await fetch('/api/support/import-conversation', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ markdown }) }); const data = await res.json(); if (!res.ok) { setError(data.error || 'Erreur'); return }; setResult(data); setPreview(null) } catch { setError('Erreur reseau') } finally { setLoading(false) }
+  }, [markdown])
+
+  const reset = useCallback(() => { setMarkdown(''); setFileName(''); setPreview(null); setResult(null); setError(''); if (fileRef.current) fileRef.current.value = '' }, [])
+
+  const S: Record<string, React.CSSProperties> = {
+    page: { padding: '20px 30px', maxWidth: 720, margin: '0 auto' },
+    dropzone: { border: '2px dashed var(--theme-elevation-300)', borderRadius: 12, padding: 40, textAlign: 'center' as const, cursor: 'pointer', transition: 'all 150ms' },
+    dropzoneDragOver: { border: '2px dashed #2563eb', borderRadius: 12, padding: 40, textAlign: 'center' as const, cursor: 'pointer', background: '#eff6ff' },
+    dropzoneHasFile: { border: '2px solid #22c55e', borderRadius: 12, padding: 40, textAlign: 'center' as const, cursor: 'pointer', background: '#f0fdf4' },
+    btn: { padding: '8px 16px', borderRadius: 8, border: '1px solid var(--theme-elevation-200)', fontSize: 13, cursor: 'pointer', background: 'var(--theme-elevation-0)', color: 'var(--theme-text)', fontWeight: 600 },
+    btnPrimary: { padding: '8px 16px', borderRadius: 8, border: 'none', fontSize: 13, cursor: 'pointer', background: '#2563eb', color: '#fff', fontWeight: 600 },
+    btnGreen: { padding: '8px 16px', borderRadius: 8, border: 'none', fontSize: 13, cursor: 'pointer', background: '#16a34a', color: '#fff', fontWeight: 600 },
+    btnAmber: { padding: '8px 16px', borderRadius: 8, border: 'none', fontSize: 13, cursor: 'pointer', background: '#d97706', color: '#fff', fontWeight: 600 },
+    section: { padding: 16, borderRadius: 10, border: '1px solid var(--theme-elevation-150)', marginBottom: 12 },
+    infoRow: { display: 'flex', justifyContent: 'space-between', padding: '4px 0', fontSize: 13 },
+    infoLabel: { color: 'var(--theme-elevation-500)' },
+    infoValue: { fontWeight: 600, color: 'var(--theme-text)' },
+    msgAdmin: { padding: '8px 12px', borderRadius: 8, background: '#dbeafe', marginBottom: 6 },
+    msgClient: { padding: '8px 12px', borderRadius: 8, background: 'var(--theme-elevation-50)', marginBottom: 6 },
+    resultSuccess: { padding: 20, borderRadius: 10, border: '2px solid #22c55e', background: '#f0fdf4' },
+    resultError: { padding: 16, borderRadius: 10, border: '1px solid #fecaca', background: '#fef2f2', color: '#dc2626', marginBottom: 12 },
+  }
+
+  return (
+    <div style={S.page}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
+        <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0 }}>{t('import.title')}</h1>
+        {result && <button onClick={reset} style={S.btnPrimary}>{t('import.newImport')}</button>}
+      </div>
+
+      {!result && (
+        <div style={isDragOver ? S.dropzoneDragOver : markdown ? S.dropzoneHasFile : S.dropzone} onDragOver={(e) => { e.preventDefault(); setIsDragOver(true) }} onDragLeave={() => setIsDragOver(false)} onDrop={onDrop} onClick={() => fileRef.current?.click()}>
+          <div style={{ fontSize: 24, marginBottom: 8 }}>&#8593;</div>
+          <p style={{ fontSize: 14, color: 'var(--theme-text)' }}>{markdown ? t('import.dropzoneLoaded') : t('import.dropzoneText')}</p>
+          {!markdown && <p style={{ fontSize: 12, color: 'var(--theme-elevation-400)', marginTop: 8 }}>{t('import.acceptedFormats')}</p>}
+          {fileName && <p style={{ fontSize: 12, fontWeight: 600, marginTop: 8 }}>{fileName}</p>}
+          <input ref={fileRef} type="file" accept=".md,.txt" onChange={onFileChange} style={{ display: 'none' }} />
+        </div>
+      )}
+
+      {error && <div style={S.resultError}><strong>{t('common.error')}</strong><p style={{ margin: '4px 0 0' }}>{error}</p></div>}
+
+      {markdown && !preview && !result && (
+        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 16 }}>
+          <button onClick={doPreview} disabled={loading} style={S.btnAmber}>{loading ? t('import.analyzing') : t('import.preview')}</button>
+        </div>
+      )}
+
+      {preview && (
+        <>
+          <div style={S.section}>
+            <div style={{ fontWeight: 700, marginBottom: 8 }}>{t('import.client')}</div>
+            <div style={S.infoRow}><span style={S.infoLabel}>{t('import.name')}</span><span style={S.infoValue}>{preview.client.name}</span></div>
+            <div style={S.infoRow}><span style={S.infoLabel}>{t('import.email')}</span><span style={S.infoValue}>{preview.client.email}</span></div>
+            <div style={S.infoRow}><span style={S.infoLabel}>{t('import.company')}</span><span style={S.infoValue}>{preview.client.company}</span></div>
+            <div style={S.infoRow}><span style={S.infoLabel}>{t('import.parsing')}</span><span style={S.infoValue}>{preview.parseMethod === 'structured' ? t('import.parsingRegex') : t('import.parsingAi')}</span></div>
+          </div>
+
+          <div style={S.section}>
+            <div style={{ fontWeight: 700, marginBottom: 8, display: 'flex', justifyContent: 'space-between' }}>
+              <span>{preview.subject}</span><span style={{ color: 'var(--theme-elevation-500)', fontSize: 12 }}>{preview.messageCount} {t('import.messages')}</span>
+            </div>
+            {preview.messages.map((msg, i) => (
+              <div key={i} style={msg.from === 'admin' ? S.msgAdmin : S.msgClient}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
+                  <span style={{ fontWeight: 600 }}>{msg.from === 'admin' ? '>> ' : '<< '}{msg.name}</span>
+                  <span style={{ color: 'var(--theme-elevation-400)' }}>{msg.date}</span>
+                </div>
+                <div style={{ fontSize: 13 }}>{msg.preview}</div>
+              </div>
+            ))}
+          </div>
+
+          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 12 }}>
+            <button onClick={() => setPreview(null)} style={S.btn}>{t('common.cancel')}</button>
+            <button onClick={doImport} disabled={loading} style={S.btnGreen}>{loading ? t('import.importing') : t('import.importButton', { count: String(preview.messageCount) })}</button>
+          </div>
+        </>
+      )}
+
+      {result && (
+        <div style={S.resultSuccess}>
+          <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 12, color: '#166534' }}>{t('import.resultTitle')}</div>
+          <div style={S.infoRow}><span style={S.infoLabel}>{t('import.resultTicket')}</span><span style={S.infoValue}><a href={`/admin/support/ticket?id=${result.ticketId}`} style={{ color: '#2563eb' }}>{result.ticketNumber}</a></span></div>
+          <div style={S.infoRow}><span style={S.infoLabel}>{t('import.resultClient')}</span><span style={S.infoValue}>{result.clientName} ({result.clientEmail}){result.isNewClient && <span style={{ marginLeft: 8, padding: '1px 6px', borderRadius: 4, background: '#dbeafe', color: '#1e40af', fontSize: 10 }}>{t('import.resultNew')}</span>}</span></div>
+          <div style={S.infoRow}><span style={S.infoLabel}>{t('import.resultCompany')}</span><span style={S.infoValue}>{result.clientCompany}</span></div>
+          <div style={S.infoRow}><span style={S.infoLabel}>{t('import.resultMessages')}</span><span style={S.infoValue}>{t('import.resultImported', { count: String(result.messagesImported) })}</span></div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/views/ImportConversationView/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 { ImportConversationClient } from './client'
+
+export const ImportConversationView: 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="ImportConversationView">
+        <ImportConversationClient />
+      </AdminErrorBoundary>
+    </DefaultTemplate>
+  )
+}
+
+export default ImportConversationView

package/src/views/LogsView/client.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import React, { useState, useEffect, useCallback } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import s from '../../styles/Logs.module.scss'
+
+type LogType = 'email' | 'auth'
+
+interface LogEntry {
+  id: number
+  status?: string
+  action?: string
+  senderEmail?: string
+  subject?: string
+  recipientEmail?: string
+  errorMessage?: string
+  httpStatus?: number
+  processingTimeMs?: number
+  email?: string
+  success?: boolean
+  ip?: string
+  userAgent?: string
+  createdAt: string
+}
+
+function fmtDate(d: string): string {
+  return new Date(d).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' })
+}
+
+export const LogsClient: React.FC = () => {
+  const { t } = useTranslation()
+  const searchParams = useSearchParams()
+  const [logType, setLogType] = useState<LogType>(() => {
+    const t = searchParams.get('type')
+    return t === 'auth' ? 'auth' : 'email'
+  })
+  const [logs, setLogs] = useState<LogEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(false)
+  const [totalDocs, setTotalDocs] = useState(0)
+  const [purgeResult, setPurgeResult] = useState<string | null>(null)
+
+  const collection = logType === 'email' ? 'email-logs' : 'auth-logs'
+
+  const fetchLogs = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/${collection}?sort=-createdAt&limit=30&page=${page}&depth=0`, { credentials: 'include' })
+      if (res.ok) {
+        const d = await res.json()
+        setLogs(d.docs || [])
+        setHasMore(d.hasNextPage)
+        setTotalDocs(d.totalDocs)
+      }
+    } catch { /* silent */ }
+    setLoading(false)
+  }, [collection, page])
+
+  useEffect(() => { setLoading(true); setPage(1) }, [logType])
+  useEffect(() => { fetchLogs() }, [fetchLogs])
+
+  const handlePurge = async (days: number) => {
+    const label = days === 0 ? 'TOUS les logs' : `les logs de plus de ${days} jours`
+    if (!window.confirm(`Supprimer ${label} (${collection}) ? Cette action est irreversible.`)) return
+    try {
+      const res = await fetch(`/api/support/purge-logs?collection=${collection}&days=${days}`, { method: 'DELETE', credentials: 'include' })
+      if (res.ok) { const d = await res.json(); setPurgeResult(`${d.purged} log(s) supprime(s)`); setTimeout(() => setPurgeResult(null), 5000); fetchLogs() }
+    } catch { /* silent */ }
+  }
+
+  const S: Record<string, React.CSSProperties> = {
+    page: { padding: '20px 30px', maxWidth: 1100, margin: '0 auto' },
+    header: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 },
+    title: { fontSize: 22, fontWeight: 700, margin: 0, color: 'var(--theme-text)' },
+    tabsRow: { display: 'flex', gap: 4, marginBottom: 12 },
+    tab: { padding: '6px 12px', borderRadius: 6, border: 'none', background: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--theme-elevation-500)', fontWeight: 500 },
+    tabActive: { background: 'var(--theme-elevation-100)', color: 'var(--theme-text)', fontWeight: 700 },
+    purgeBtn: { padding: '4px 10px', borderRadius: 6, border: '1px solid var(--theme-elevation-200)', fontSize: 11, background: 'var(--theme-elevation-0)', cursor: 'pointer', color: 'var(--theme-text)' },
+    table: { width: '100%', borderCollapse: 'collapse' as const, fontSize: 13 },
+    th: { textAlign: 'left' as const, padding: '8px', borderBottom: '1px solid var(--theme-elevation-200)', fontSize: 11, color: 'var(--theme-elevation-500)' },
+    td: { padding: '8px', borderBottom: '1px solid var(--theme-elevation-100)' },
+    badge: { padding: '2px 8px', borderRadius: 4, fontSize: 11, fontWeight: 600 },
+    mono: { fontFamily: 'monospace', fontSize: 12 },
+  }
+
+  return (
+    <div style={S.page}>
+      <div style={S.header}>
+        <h1 style={S.title}>{logType === 'email' ? t('logs.title') : t('logs.titleAuth')}</h1>
+        <div style={{ display: 'flex', gap: 6 }}>
+          <button style={S.purgeBtn} onClick={() => handlePurge(7)}>{t('logs.purge7')}</button>
+          <button style={S.purgeBtn} onClick={() => handlePurge(30)}>{t('logs.purge30')}</button>
+          <button style={{ ...S.purgeBtn, color: '#dc2626', borderColor: '#dc2626' }} onClick={() => handlePurge(0)}>{t('logs.purgeAll')}</button>
+        </div>
+      </div>
+
+      <div style={S.tabsRow}>
+        <button style={{ ...S.tab, ...(logType === 'email' ? S.tabActive : {}) }} onClick={() => setLogType('email')}>{t('logs.tabs.email')} ({logType === 'email' ? totalDocs : '...'})</button>
+        <button style={{ ...S.tab, ...(logType === 'auth' ? S.tabActive : {}) }} onClick={() => setLogType('auth')}>{t('logs.tabs.auth')} ({logType === 'auth' ? totalDocs : '...'})</button>
+      </div>
+
+      {purgeResult && <div style={{ padding: '8px 14px', borderRadius: 6, background: '#dcfce7', color: '#166534', fontSize: 13, marginBottom: 12 }}>{purgeResult}</div>}
+
+      {loading ? (
+        <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('common.loading')}</div>
+      ) : logs.length === 0 ? (
+        <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('logs.noLogs')}</div>
+      ) : logType === 'email' ? (
+        <table style={S.table}>
+          <thead><tr><th style={S.th}>{t('logs.tableHeaders.date')}</th><th style={S.th}>{t('logs.tableHeaders.status')}</th><th style={S.th}>{t('logs.tableHeaders.recipient')}</th><th style={S.th}>{t('logs.tableHeaders.subject')}</th><th style={S.th}>{t('logs.tableHeaders.action')}</th><th style={{ ...S.th, textAlign: 'right' }}>{t('logs.tableHeaders.time')}</th></tr></thead>
+          <tbody>
+            {logs.map((log) => (
+              <tr key={log.id}>
+                <td style={{ ...S.td, ...S.mono }}>{fmtDate(log.createdAt)}</td>
+                <td style={S.td}><span style={{ ...S.badge, background: log.status === 'success' ? '#dcfce7' : log.status === 'error' ? '#fef2f2' : '#f3f4f6', color: log.status === 'success' ? '#16a34a' : log.status === 'error' ? '#dc2626' : '#6b7280' }}>{log.status === 'success' ? t('logs.statusSuccess') : log.status === 'error' ? t('logs.statusError') : t('logs.statusIgnored')}</span></td>
+                <td style={{ ...S.td, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={log.recipientEmail}>{log.recipientEmail || '--'}</td>
+                <td style={{ ...S.td, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={log.subject}>{log.subject || '--'}</td>
+                <td style={{ ...S.td, fontSize: 12, color: 'var(--theme-elevation-500)' }}>{log.action || '--'}</td>
+                <td style={{ ...S.td, textAlign: 'right' }}>{log.processingTimeMs != null ? <span style={{ ...S.mono, color: log.processingTimeMs > 2000 ? '#dc2626' : '#16a34a' }}>{log.processingTimeMs}ms</span> : '--'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ) : (
+        <table style={S.table}>
+          <thead><tr><th style={S.th}>{t('logs.tableHeaders.date')}</th><th style={S.th}>{t('logs.tableHeaders.status')}</th><th style={S.th}>{t('logs.tableHeaders.email')}</th><th style={S.th}>{t('logs.tableHeaders.ip')}</th><th style={S.th}>{t('logs.tableHeaders.userAgent')}</th></tr></thead>
+          <tbody>
+            {logs.map((log) => (
+              <tr key={log.id}>
+                <td style={{ ...S.td, ...S.mono }}>{fmtDate(log.createdAt)}</td>
+                <td style={S.td}><span style={{ ...S.badge, background: log.success ? '#dcfce7' : '#fef2f2', color: log.success ? '#16a34a' : '#dc2626' }}>{log.success ? t('logs.statusSuccess') : t('logs.statusFailed')}</span></td>
+                <td style={{ ...S.td, ...S.mono }}>{log.email || '--'}</td>
+                <td style={{ ...S.td, ...S.mono }}>{log.ip || '--'}</td>
+                <td style={{ ...S.td, fontSize: 11, maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{log.userAgent || '--'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+
+      {totalDocs > 0 && (
+        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 16, alignItems: 'center' }}>
+          <button style={S.purgeBtn} onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>{t('common.previous')}</button>
+          <span style={{ fontSize: 12, color: 'var(--theme-elevation-500)' }}>{t('common.page')} {page} -- {totalDocs} {t('common.results')}</span>
+          <button style={S.purgeBtn} onClick={() => setPage((p) => p + 1)} disabled={!hasMore}>{t('common.next')}</button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/views/LogsView/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 { LogsClient } from './client'
+
+export const LogsView: 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="LogsView">
+        <LogsClient />
+      </AdminErrorBoundary>
+    </DefaultTemplate>
+  )
+}
+
+export default LogsView