@consilioweb/payload-support 0.8.2 → 0.9.5

package/src/views/LogsView/client.tsx

@@ -17,6 +17,7 @@ interface LogEntry {
   errorMessage?: string
   httpStatus?: number
   processingTimeMs?: number
+  // Auth log fields
   email?: string
   success?: boolean
   ip?: string
@@ -61,78 +62,112 @@ export const LogsClient: React.FC = () => {
   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
+    const label = days === 0 ? t('logs.purgeAllLabel') : t('logs.purgeDaysLabel', { days: String(days) })
+    if (!window.confirm(t('logs.purgeConfirm', { label, collection }))) 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() }
+      if (res.ok) {
+        const d = await res.json()
+        setPurgeResult(t('logs.purgeResult', { count: String(d.purged) }))
+        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 className={s.page}>
+      <div className={s.header}>
+        <h1 className={s.title}>{logType === 'email' ? t('logs.title') : t('logs.titleAuth')}</h1>
+        <div className={s.headerActions}>
+          <button className={s.purgeBtn} onClick={() => handlePurge(7)}>{t('logs.purge7')}</button>
+          <button className={s.purgeBtn} onClick={() => handlePurge(30)}>{t('logs.purge30')}</button>
+          <button className={s.purgeBtn} onClick={() => handlePurge(90)}>Purger +90j</button>
+          <button className={`${s.purgeBtn} ${s.purgeBtnDanger}`} 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>
+      {/* Tabs */}
+      <div className={s.tabs}>
+        <button className={`${s.tab} ${logType === 'email' ? s.tabActive : ''}`} onClick={() => setLogType('email')}>
+          {t('logs.tabs.email')} ({logType === 'email' ? totalDocs : '...'})
+        </button>
+        <button className={`${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>}
+      {purgeResult && <div className={s.purgeResult}>{purgeResult}</div>}
 
       {loading ? (
-        <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('common.loading')}</div>
+        <div className={s.loading}>{t('common.loading')}</div>
       ) : logs.length === 0 ? (
-        <div style={{ padding: 40, textAlign: 'center', color: '#94a3b8' }}>{t('logs.noLogs')}</div>
+        <div className={s.empty}>{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>
+        <table className={s.table}>
+          <thead>
+            <tr>
+              <th>{t('logs.tableHeaders.date')}</th>
+              <th>{t('logs.tableHeaders.status')}</th>
+              <th>{t('logs.tableHeaders.recipient')}</th>
+              <th>{t('logs.tableHeaders.subject')}</th>
+              <th>{t('logs.tableHeaders.action')}</th>
+              <th style={{ 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>
+                <td className={s.mono}>{fmtDate(log.createdAt)}</td>
+                <td>
+                  <span className={s.badge} style={{
+                    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 className={s.truncate} title={log.recipientEmail}>{log.recipientEmail || '—'}</td>
+                <td className={s.truncate} title={log.subject}>{log.subject || '—'}</td>
+                <td style={{ fontSize: 12, color: 'var(--theme-elevation-500)' }}>{log.action || '—'}</td>
+                <td style={{ textAlign: 'right' }}>
+                  {log.processingTimeMs != null ? (
+                    <span className={s.mono} style={{ color: log.processingTimeMs > 2000 ? '#dc2626' : log.processingTimeMs > 500 ? '#d97706' : '#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>
+        <table className={s.table}>
+          <thead>
+            <tr>
+              <th>{t('logs.tableHeaders.date')}</th>
+              <th>{t('logs.tableHeaders.status')}</th>
+              <th>{t('logs.tableHeaders.email')}</th>
+              <th>{t('logs.tableHeaders.ip')}</th>
+              <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>
+                <td className={s.mono}>{fmtDate(log.createdAt)}</td>
+                <td>
+                  <span className={s.badge} style={{
+                    background: log.success ? '#dcfce7' : '#fef2f2',
+                    color: log.success ? '#16a34a' : '#dc2626',
+                  }}>
+                    {log.success ? t('logs.statusSuccess') : t('logs.statusFailed')}
+                  </span>
+                </td>
+                <td className={s.mono}>{log.email || '—'}</td>
+                <td className={s.mono}>{log.ip || '—'}</td>
+                <td className={s.truncate} style={{ fontSize: 11 }}>{log.userAgent || '—'}</td>
               </tr>
             ))}
           </tbody>
@@ -140,10 +175,10 @@ export const LogsClient: React.FC = () => {
       )}
 
       {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 className={s.pagination}>
+          <button className={s.pageBtn} onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>{t('common.previous')}</button>
+          <span className={s.pageInfo}>{t('common.page')} {page} — {totalDocs} {t('common.results')}</span>
+          <button className={s.pageBtn} onClick={() => setPage((p) => p + 1)} disabled={!hasMore}>{t('common.next')}</button>
         </div>
       )}
     </div>

package/src/views/NewTicketView/client.tsx

@@ -48,7 +48,7 @@ export const NewTicketClient: React.FC = () => {
       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) }
+      } catch {}
     }, 300)
     return () => clearTimeout(timer)
   }, [clientSearch])
@@ -70,6 +70,7 @@ export const NewTicketClient: React.FC = () => {
 
     setSubmitting(true)
     try {
+      // Create ticket
       const res = await fetch('/api/tickets', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -93,6 +94,7 @@ export const NewTicketClient: React.FC = () => {
 
       const ticket = await res.json()
 
+      // Create first message if description provided
       if (description.trim()) {
         await fetch('/api/ticket-messages', {
           method: 'POST',
@@ -115,66 +117,48 @@ export const NewTicketClient: React.FC = () => {
     }
   }
 
-  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 className={s.page}>
+      <div className={s.header}>
+        <Link href="/admin/support/inbox" className={s.backLink}>&larr; {t('newTicket.backToInbox')}</Link>
+        <h1 className={s.title}>{t('newTicket.title')}</h1>
+        <p className={s.subtitle}>{t('newTicket.subtitle')}</p>
       </div>
 
-      {error && <div style={S.error}>{error}</div>}
+      {error && <div className={s.error}>{error}</div>}
 
-      <form onSubmit={handleSubmit}>
+      <form className={s.form} onSubmit={handleSubmit}>
         {/* Client search */}
-        <div style={S.fieldGroup}>
-          <label style={S.label}>{t('newTicket.clientLabel')} <span style={S.required}>*</span></label>
+        <div className={s.fieldGroup}>
+          <label className={s.label}>{t('newTicket.clientLabel')} <span className={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}
+                {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' }}>
+            <div className={s.searchWrap}>
               <input
                 type="text"
-                style={S.input}
+                className={s.input}
                 placeholder={t('newTicket.clientSearchPlaceholder')}
                 value={clientSearch}
                 onChange={(e) => setClientSearch(e.target.value)}
+                style={{ width: '100%' }}
               />
               {clientResults.length > 0 && (
-                <div style={S.searchResults}>
+                <div className={s.searchResults}>
                   {clientResults.map((c) => (
-                    <div key={c.id} style={S.searchItem} onClick={() => {
+                    <div key={c.id} className={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>
+                      <strong>{c.firstName} {c.lastName}</strong> — {c.company} <span style={{ color: 'var(--theme-elevation-400)', fontSize: 12 }}>{c.email}</span>
                     </div>
                   ))}
                 </div>
@@ -184,41 +168,41 @@ export const NewTicketClient: React.FC = () => {
         </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 className={s.fieldGroup}>
+          <label className={s.label}>{t('newTicket.subjectLabel')} <span className={s.required}>*</span></label>
+          <input type="text" className={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)}>
+        <div className={s.row3}>
+          <div className={s.fieldGroup}>
+            <label className={s.label}>{t('newTicket.categoryLabel')}</label>
+            <select className={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)}>
+          <div className={s.fieldGroup}>
+            <label className={s.label}>{t('newTicket.priorityLabel')}</label>
+            <select className={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>
+          <div className={s.fieldGroup}>
+            <label className={s.label}>{t('newTicket.projectLabel')}</label>
+            <select className={s.select} value={projectId || ''} onChange={(e) => setProjectId(e.target.value ? Number(e.target.value) : null)}>
+              <option value="">— Aucun —</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 className={s.fieldGroup}>
+          <label className={s.label}>{t('newTicket.descriptionLabel')}</label>
+          <textarea className={s.textarea} placeholder={t('newTicket.descriptionPlaceholder')} value={description} onChange={(e) => setDescription(e.target.value)} />
         </div>
 
-        <button type="submit" style={S.submitBtn} disabled={submitting}>
+        <button type="submit" className={s.submitBtn} disabled={submitting}>
           {submitting ? t('newTicket.submitting') : t('newTicket.submitButton')}
         </button>
       </form>