@consilioweb/payload-support 0.8.2 → 0.9.5

package/src/views/EmailTrackingView/client.tsx

@@ -4,18 +4,41 @@ 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 }
+interface EmailLog {
+  id: number
+  status: 'success' | 'ignored' | 'error'
+  action?: string
+  senderEmail?: 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' },
+const STATUS_CFG: Record<string, { label: string; bg: string; color: string }> = {
+  success: { label: 'Succès', bg: '#dcfce7', color: '#16a34a' },
+  error: { label: 'Erreur', bg: '#fef2f2', color: '#dc2626' },
+  ignored: { label: 'Ignoré', 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' }) }
+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()
@@ -29,94 +52,111 @@ export const EmailTrackingClient: React.FC = () => {
   const [page, setPage] = useState(1)
   const [hasMore, setHasMore] = useState(false)
   const [totalDocs, setTotalDocs] = useState(0)
+  const LIMIT = 30
+
+  const fetchStats = useCallback(async () => {
+    try { const r = await fetch(`/api/support/email-stats?days=${dateRange}`); if (r.ok) setStats(await r.json()) } catch {}
+  }, [dateRange])
 
-  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) }
+    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=${LIMIT}&page=${page}&depth=0`)
+      if (r.ok) { const d = await r.json(); setLogs(d.docs); setHasMore(d.hasNextPage); setTotalDocs(d.totalDocs) }
+    } catch {}
     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)' },
-  }
+  const tabsList: Array<{ key: StatusTab; label: string; count?: number }> = [
+    { key: 'all', label: t('emailTracking.tabs.all'), count: stats?.total },
+    { key: 'success', label: t('emailTracking.tabs.success'), count: stats?.success },
+    { key: 'error', label: t('emailTracking.tabs.errors'), count: stats?.errors },
+    { key: 'ignored', label: t('emailTracking.tabs.ignored'), count: stats?.ignored },
+  ]
+
+  if (loading && !stats) return <div className={s.loading}>{t('common.loading')}</div>
 
   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 className={s.page}>
+      <div className={s.header}><h1 className={s.title}>{t('emailTracking.title')}</h1></div>
+
+      {/* Stats */}
+      <div className={s.statGrid}>
+        <div className={s.statCard}><div className={s.statLabel}>{t('emailTracking.stats.emailsSent')}</div><div className={s.statValue}>{stats?.total ?? '—'}</div></div>
+        <div className={s.statCard}><div className={s.statLabel}>{t('emailTracking.stats.successRate')}</div><div className={s.statValue}>{stats ? `${stats.successRate}` : '—'}<span className={s.statUnit}>%</span></div></div>
+        <div className={s.statCard}><div className={s.statLabel}>{t('emailTracking.stats.errors')}</div><div className={s.statValue}>{stats?.errors ?? '—'}</div></div>
+        <div className={s.statCard}><div className={s.statLabel}>{t('emailTracking.stats.avgTime')}</div><div className={s.statValue}>{stats ? stats.avgProcessingTime : '—'}<span className={s.statUnit}>ms</span></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>
+      {/* Filters */}
+      <div className={s.filters}>
+        <div className={s.tabs}>
+          {tabsList.map((t) => (
+            <button key={t.key} className={`${s.tab} ${tab === t.key ? s.tabActive : ''}`} onClick={() => setTab(t.key)}>
+              {t.label} {typeof t.count === 'number' && <span style={{ marginLeft: 4, opacity: 0.6 }}>({t.count})</span>}
+            </button>
           ))}
         </div>
-        <div style={{ display: 'flex', gap: 4 }}>
+        <div className={s.dateRangeGroup}>
           {([7, 30, 90] as DateRange[]).map((v) => (
-            <button key={v} style={{ ...S.dateBtn, ...(dateRange === v ? S.dateBtnActive : {}) }} onClick={() => setDateRange(v)}>{v}j</button>
+            <button key={v} className={`${s.dateRangeBtn} ${dateRange === v ? s.dateRangeActive : ''}`} 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)' }} />
+        <input type="text" className={s.searchInput} placeholder={t('emailTracking.searchPlaceholder')} value={search} onChange={(e) => setSearch(e.target.value)} />
       </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>
-        )}
+      {/* Table */}
+      {logs.length === 0 ? (
+        <div className={s.empty}>{t('emailTracking.noLogs')}</div>
+      ) : (
+        <table className={s.table}>
+          <thead>
+            <tr><th>{t('emailTracking.tableHeaders.date')}</th><th>{t('emailTracking.tableHeaders.recipient')}</th><th>{t('emailTracking.tableHeaders.subject')}</th><th>{t('emailTracking.tableHeaders.ticket')}</th><th>{t('emailTracking.tableHeaders.status')}</th><th>{t('emailTracking.tableHeaders.action')}</th><th style={{ 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' && log.errorMessage ? 'pointer' : 'default' }}>
+                  <td style={{ fontSize: 12, whiteSpace: 'nowrap' }}>{fmtDate(log.createdAt)}</td>
+                  <td style={{ maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={log.recipientEmail}>{log.recipientEmail || '—'}</td>
+                  <td style={{ maxWidth: 250, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={log.subject}>{log.subject || '—'}</td>
+                  <td>{log.ticketNumber ? <span className={s.ticketLink}>{log.ticketNumber}</span> : '—'}</td>
+                  <td><span className={s.statusBadge} style={{ background: STATUS_CFG[log.status]?.bg, color: STATUS_CFG[log.status]?.color }}>{STATUS_CFG[log.status]?.label || log.status}</span></td>
+                  <td style={{ fontSize: 12 }}>{log.action || '—'}</td>
+                  <td style={{ textAlign: 'right' }}>
+                    {log.processingTimeMs != null ? (
+                      <span className={`${s.processingTime} ${log.processingTimeMs > 2000 ? s.timeSlow : log.processingTimeMs > 500 ? s.timeMedium : s.timeFast}`}>{log.processingTimeMs}ms</span>
+                    ) : '—'}
+                    {log.status === 'error' && log.errorMessage && (
+                      <button className={s.expandBtn} onClick={(e) => { e.stopPropagation(); setExpandedRow(expandedRow === log.id ? null : log.id) }}>
+                        {expandedRow === log.id ? '▴' : '▾'}
+                      </button>
+                    )}
+                  </td>
+                </tr>
+                {expandedRow === log.id && log.errorMessage && (
+                  <tr><td colSpan={7}><div className={s.errorDetail}>Erreur{log.httpStatus ? ` (HTTP ${log.httpStatus})` : ''}: {log.errorMessage}</div></td></tr>
+                )}
+              </React.Fragment>
+            ))}
+          </tbody>
+        </table>
+      )}
 
+      {/* Pagination */}
       {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 className={s.pagination}>
+          <button className={s.pageBtn} onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>{t('common.previous')}</button>
+          <span style={{ fontSize: 12, color: 'var(--theme-elevation-500)', alignSelf: 'center' }}>{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/ImportConversationView/client.tsx

@@ -2,11 +2,32 @@
 
 import React, { useState, useCallback, useRef } from 'react'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
-import s from '../../styles/ImportConversation.module.scss'
+import styles 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 }
+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()
@@ -20,112 +41,276 @@ export function ImportConversationClient() {
   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)
+    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.onload = (e) => {
+      const content = e.target?.result as string
+      setMarkdown(content)
+    }
     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 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) }
+    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 lors de l\'analyse')
+        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) }
+    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 lors de l\'import')
+        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 },
-  }
+  const reset = useCallback(() => {
+    setMarkdown('')
+    setFileName('')
+    setPreview(null)
+    setResult(null)
+    setError('')
+    if (fileRef.current) fileRef.current.value = ''
+  }, [])
+
+  const dropzoneClass = isDragOver
+    ? styles.dropzoneDragOver
+    : markdown
+      ? styles.dropzoneHasFile
+      : styles.dropzone
 
   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 className={styles.page}>
+      {/* Header */}
+      <div className={styles.header}>
+        <div>
+          <h1 className={styles.title}>{t('import.title')}</h1>
+        </div>
+        {result && (
+          <button onClick={reset} className={styles.btnPrimary}>
+            {t('import.newImport')}
+          </button>
+        )}
       </div>
 
+      {/* Drop zone */}
       {!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
+          className={dropzoneClass}
+          onDragOver={(e) => {
+            e.preventDefault()
+            setIsDragOver(true)
+          }}
+          onDragLeave={() => setIsDragOver(false)}
+          onDrop={onDrop}
+          onClick={() => fileRef.current?.click()}
+        >
+          <div className={styles.dropzoneIcon}>&#8593;</div>
+          <p className={styles.dropzoneText}>
+            {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 className={styles.fileName}>{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>}
+      {/* Error */}
+      {error && (
+        <div className={styles.resultError}>
+          <div className={styles.resultTitleError}>
+            &#9888; Erreur
+          </div>
+          <p className={styles.errorText}>{error}</p>
+        </div>
+      )}
 
+      {/* Actions */}
       {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 className={styles.btnRow}>
+          <button onClick={doPreview} disabled={loading} className={styles.btnAmber}>
+            <span className={styles.btnContent}>
+              &#128065; {loading ? t('import.analyzing') : t('import.preview')}
+            </span>
+          </button>
         </div>
       )}
 
+      {/* Preview */}
       {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 className={styles.section}>
+            <div className={styles.sectionTitle}>
+              &#128100; {t('import.client')}
+            </div>
+            <div className={styles.infoRow}>
+              <span className={styles.infoLabel}>{t('import.name')}</span>
+              <span className={styles.infoValue}>{preview.client.name}</span>
+            </div>
+            <div className={styles.infoRow}>
+              <span className={styles.infoLabel}>{t('import.email')}</span>
+              <span className={styles.infoValue}>{preview.client.email}</span>
+            </div>
+            <div className={styles.infoRow}>
+              <span className={styles.infoLabel}>{t('import.company')}</span>
+              <span className={styles.infoValue}>{preview.client.company}</span>
+            </div>
+            <div className={styles.infoRow}>
+              <span className={styles.infoLabel}>{t('import.parsing')}</span>
+              <span className={styles.infoValue}>
+                <span className={styles.badgeInfo}>
+                  {preview.parseMethod === 'structured' ? t('import.parsingRegex') : t('import.parsingAi')}
+                </span>
+              </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 className={styles.section}>
+            <div className={styles.sectionTitle}>
+              &#128172; {preview.subject}
+              <span className={styles.sectionTitleRight}>
+                {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 key={i} className={msg.from === 'admin' ? styles.msgAdmin : styles.msgClient}>
+                <div className={styles.msgHeader}>
+                  <span className={styles.msgAuthor}>
+                    {msg.from === 'admin' ? '>> ' : '<< '}
+                    {msg.name}
+                  </span>
+                  <span className={styles.msgDate}>{msg.date}</span>
                 </div>
-                <div style={{ fontSize: 13 }}>{msg.preview}</div>
+                <div className={styles.msgPreview}>{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 className={styles.btnRow}>
+            <button onClick={() => setPreview(null)} className={styles.btnMuted}>
+              {t('common.cancel')}
+            </button>
+            <button onClick={doImport} disabled={loading} className={styles.btnGreen}>
+              <span className={styles.btnContent}>
+                &#10140; {loading ? t('import.importing') : t('import.importButton', { count: String(preview.messageCount) })}
+              </span>
+            </button>
           </div>
         </>
       )}
 
+      {/* Result */}
       {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 className={styles.resultSuccess}>
+          <div className={styles.resultTitleSuccess}>
+            &#10003; {t('import.resultTitle')}
+          </div>
+          <div className={styles.infoRow}>
+            <span className={styles.infoLabel}>{t('import.resultTicket')}</span>
+            <span className={styles.infoValue}>
+              <a href={`/admin/support/ticket?id=${result.ticketId}`} className={styles.link}>
+                {result.ticketNumber}
+              </a>
+            </span>
+          </div>
+          <div className={styles.infoRow}>
+            <span className={styles.infoLabel}>{t('import.resultClient')}</span>
+            <span className={styles.infoValue}>
+              {result.clientName} ({result.clientEmail})
+              {result.isNewClient && <span className={styles.badgeNew} style={{ marginLeft: 8 }}>{t('import.resultNew')}</span>}
+            </span>
+          </div>
+          <div className={styles.infoRow}>
+            <span className={styles.infoLabel}>{t('import.resultCompany')}</span>
+            <span className={styles.infoValue}>{result.clientCompany}</span>
+          </div>
+          <div className={styles.infoRow}>
+            <span className={styles.infoLabel}>{t('import.resultMessages')}</span>
+            <span className={styles.infoValue}>{t('import.resultImported', { count: String(result.messagesImported) })}</span>
+          </div>
         </div>
       )}
     </div>