@consilioweb/payload-support 0.15.0 → 1.0.0

package/src/views/CrmView/client.tsx

@@ -71,14 +71,14 @@ function formatDuration(minutes: number): string {
   return `${h}h${m}m`
 }
 
-function timeAgo(dateStr: string): string {
+function timeAgo(dateStr: string, tFn: (k: string, vars?: Record<string, string | number>) => string): string {
   const diff = Date.now() - new Date(dateStr).getTime()
   const days = Math.floor(diff / 86400000)
-  if (days === 0) return "Aujourd'hui"
-  if (days === 1) return 'Hier'
-  if (days < 30) return `Il y a ${days}j`
+  if (days === 0) return tFn('crm.timeAgo.today')
+  if (days === 1) return tFn('crm.timeAgo.yesterday')
+  if (days < 30) return tFn('crm.timeAgo.daysAgo', { count: days })
   const months = Math.floor(days / 30)
-  return `Il y a ${months} mois`
+  return tFn('crm.timeAgo.monthsAgo', { count: months })
 }
 
 function getStatColorClass(key: string, detail: ClientDetail['stats']): string {
@@ -416,7 +416,7 @@ export const CrmClient: React.FC = () => {
                   { key: 'open', label: t('crm.stats.openTickets'), value: String(detail.stats.openTickets) },
                   { key: 'resolved', label: t('crm.stats.resolvedTickets'), value: String(detail.stats.resolvedTickets) },
                   { key: 'time', label: t('crm.stats.timeSpent'), value: formatDuration(detail.stats.totalTimeMinutes) },
-                  { key: 'activity', label: t('crm.stats.lastActivity'), value: detail.stats.lastActivity ? timeAgo(detail.stats.lastActivity) : '-' },
+                  { key: 'activity', label: t('crm.stats.lastActivity'), value: detail.stats.lastActivity ? timeAgo(detail.stats.lastActivity, t) : '-' },
                 ].map((stat) => (
                   <div key={stat.key} className={styles.statCard}>
                     <div className={styles.statLabel}>{stat.label}</div>
@@ -554,7 +554,7 @@ export const CrmClient: React.FC = () => {
                             </span>
                           </td>
                           <td className={styles.ticketDate}>
-                            {timeAgo(tk.createdAt)}
+                            {timeAgo(tk.createdAt, t)}
                           </td>
                         </tr>
                       ))}

package/src/views/EmailTrackingView/client.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useCallback } from 'react'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import { DATE_LOCALE } from '../shared/dateLocale'
 import s from '../../styles/EmailTracking.module.scss'
 
 interface EmailLog {
@@ -30,14 +31,14 @@ interface Stats {
 type StatusTab = 'all' | 'success' | 'error' | 'ignored'
 type DateRange = 7 | 30 | 90
 
-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' },
+const STATUS_CFG: Record<string, { labelKey: string; bg: string; color: string }> = {
+  success: { labelKey: 'logs.statusSuccess', bg: '#dcfce7', color: '#16a34a' },
+  error: { labelKey: 'emailTracking.errorLabel', bg: '#fef2f2', color: '#dc2626' },
+  ignored: { labelKey: 'logs.statusIgnored', 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' })
+  return new Date(d).toLocaleDateString(DATE_LOCALE, { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' })
 }
 
 export const EmailTrackingClient: React.FC = () => {
@@ -129,7 +130,7 @@ export const EmailTrackingClient: React.FC = () => {
                   <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><span className={s.statusBadge} style={{ background: STATUS_CFG[log.status]?.bg, color: STATUS_CFG[log.status]?.color }}>{STATUS_CFG[log.status]?.labelKey ? t(STATUS_CFG[log.status].labelKey) : log.status}</span></td>
                   <td style={{ fontSize: 12 }}>{log.action || '—'}</td>
                   <td style={{ textAlign: 'right' }}>
                     {log.processingTimeMs != null ? (

package/src/views/ImportConversationView/client.tsx

@@ -96,13 +96,13 @@ export function ImportConversationClient() {
 
       const data = await res.json()
       if (!res.ok) {
-        setError(data.error || 'Erreur lors de l\'analyse')
+        setError(data.error || t('import.analyzeError'))
         return
       }
 
       setPreview(data)
     } catch {
-      setError('Erreur reseau')
+      setError(t('import.networkError'))
     } finally {
       setLoading(false)
     }
@@ -122,14 +122,14 @@ export function ImportConversationClient() {
 
       const data = await res.json()
       if (!res.ok) {
-        setError(data.error || 'Erreur lors de l\'import')
+        setError(data.error || t('import.importError'))
         return
       }
 
       setResult(data)
       setPreview(null)
     } catch {
-      setError('Erreur reseau')
+      setError(t('import.networkError'))
     } finally {
       setLoading(false)
     }

package/src/views/LogsView/client.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { useSearchParams } from 'next/navigation'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import { DATE_LOCALE } from '../shared/dateLocale'
 import s from '../../styles/Logs.module.scss'
 
 type LogType = 'email' | 'auth'
@@ -26,7 +27,7 @@ interface LogEntry {
 }
 
 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' })
+  return new Date(d).toLocaleDateString(DATE_LOCALE, { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' })
 }
 
 export const LogsClient: React.FC = () => {
@@ -83,7 +84,7 @@ export const LogsClient: React.FC = () => {
         <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} onClick={() => handlePurge(90)}>{t('logs.purge90')}</button>
           <button className={`${s.purgeBtn} ${s.purgeBtnDanger}`} onClick={() => handlePurge(0)}>{t('logs.purgeAll')}</button>
         </div>
       </div>

package/src/views/NewTicketView/client.tsx

@@ -190,7 +190,7 @@ export const NewTicketClient: React.FC = () => {
           <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>
+              <option value="">{t('newTicket.noProject')}</option>
               {projects.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
             </select>
           </div>

package/src/views/PendingEmailsView/client.tsx

@@ -32,15 +32,15 @@ interface PendingEmail {
 
 type Tab = 'pending' | 'processed' | 'ignored'
 
-function timeAgo(dateStr: string): string {
+function timeAgo(dateStr: string, tFn: (k: string, vars?: Record<string, string | number>) => string): string {
   const diff = Date.now() - new Date(dateStr).getTime()
   const mins = Math.floor(diff / 60000)
-  if (mins < 1) return "à l'instant"
-  if (mins < 60) return `il y a ${mins}min`
+  if (mins < 1) return tFn('pendingEmails.timeAgo.justNow')
+  if (mins < 60) return tFn('pendingEmails.timeAgo.minutesAgo', { count: mins })
   const hours = Math.floor(mins / 60)
-  if (hours < 24) return `il y a ${hours}h`
+  if (hours < 24) return tFn('pendingEmails.timeAgo.hoursAgo', { count: hours })
   const days = Math.floor(hours / 24)
-  return `il y a ${days}j`
+  return tFn('pendingEmails.timeAgo.daysAgo', { count: days })
 }
 
 function TicketSearchModal({
@@ -333,6 +333,7 @@ function EmailCard({
   onProcess: (action: 'create_ticket' | 'add_to_ticket' | 'ignore', ticketId?: number, clientId?: number) => void
   processing: boolean
 }) {
+  const { t } = useTranslation()
   const [expanded, setExpanded] = useState(false)
   const [showLinkModal, setShowLinkModal] = useState(false)
   const [showClientPicker, setShowClientPicker] = useState(false)
@@ -364,7 +365,7 @@ function EmailCard({
           </div>
           <div className={styles.cardSubject}>{email.subject}</div>
           <div className={styles.cardMeta}>
-            <span>{timeAgo(email.createdAt)}</span>
+            <span>{timeAgo(email.createdAt, t)}</span>
             {attachmentCount > 0 && (
               <span className={styles.attachment}>
                 <Paperclip size={12} /> {attachmentCount} PJ

package/src/views/SupportDashboardView/client.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react'
 import Link from 'next/link'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import { DATE_LOCALE } from '../shared/dateLocale'
 import styles from '../../styles/SupportDashboard.module.scss'
 
 // ─── Types ──────────────────────────────────────────────────
@@ -14,6 +15,7 @@ interface Stats {
   byCategory: Record<string, number>
   createdLast7Days: number
   createdLast30Days: number
+  volumeByDay?: Array<{ date: string; count: number }>
   avgResponseTimeHours: number | null
   avgResolutionTimeHours: number | null
   totalTimeMinutes: number
@@ -92,6 +94,7 @@ function StatCard({ label, value, trend, accentColor, onClick }: {
   accentColor?: string
   onClick?: () => void
 }) {
+  const { t } = useTranslation()
   const style = accentColor ? { '--stat-accent': accentColor } as React.CSSProperties : undefined
   const Tag = onClick ? 'button' : 'div'
 
@@ -114,7 +117,7 @@ function StatCard({ label, value, trend, accentColor, onClick }: {
       )}
       {trend && trend.dir === 'neutral' && (
         <div className={`${styles.statTrend} ${styles.neutral}`}>
-          — stable
+          {t('dashboard.stable')}
         </div>
       )}
     </Tag>
@@ -144,6 +147,7 @@ function VolumeChart({ data }: { data: { label: string; value: number }[] }) {
 }
 
 function CSATRing({ score, count }: { score: number; count: number }) {
+  const { t } = useTranslation()
   // Ring progress: score is out of 5
   const pct = score > 0 ? (score / 5) * 100 : 0
   const radius = 42
@@ -171,10 +175,10 @@ function CSATRing({ score, count }: { score: number; count: number }) {
       </div>
       <div className={styles.csatMeta}>
         <div className={styles.csatLabel}>
-          {score > 0 ? `${score.toFixed(1)} / 5` : 'Pas de données'}
+          {score > 0 ? `${score.toFixed(1)} / 5` : t('dashboard.csat.noData')}
         </div>
         <div className={styles.csatSub}>
-          {count > 0 ? `${count} avis recueillis` : 'Aucun avis'}
+          {count > 0 ? t('dashboard.csat.reviews', { count }) : t('dashboard.csat.noReviews')}
         </div>
       </div>
     </div>
@@ -195,6 +199,7 @@ function formatSlaTime(minutes: number): string {
 }
 
 function SlaSection() {
+  const { t } = useTranslation()
   const [sla, setSla] = useState<SlaData | null>(null)
   const [slaLoading, setSlaLoading] = useState(true)
 
@@ -216,8 +221,8 @@ function SlaSection() {
   if (slaLoading) {
     return (
       <div className={styles.slaSection}>
-        <h2 className={styles.slaSectionTitle}>SLA</h2>
-        <div className={styles.slaLoading}>Chargement...</div>
+        <h2 className={styles.slaSectionTitle}>{t('dashboard.slaTitle')}</h2>
+        <div className={styles.slaLoading}>{t('dashboard.sla.loading')}</div>
       </div>
     )
   }
@@ -230,7 +235,7 @@ function SlaSection() {
 
   return (
     <div className={styles.slaSection}>
-      <h2 className={styles.slaSectionTitle}>SLA</h2>
+      <h2 className={styles.slaSectionTitle}>{t('dashboard.slaTitle')}</h2>
       <div className={styles.slaGrid}>
         {/* Breached */}
         <div className={`${styles.slaCard} ${styles.slaBreach}`}>
@@ -241,14 +246,14 @@ function SlaSection() {
                 <line x1="12" y1="9" x2="12" y2="13" />
                 <line x1="12" y1="17" x2="12.01" y2="17" />
               </svg>
-              En breach
+              {t('dashboard.sla.breached')}
             </h3>
             <span className={`${styles.slaCount} ${styles.slaCountBreach}`}>
               {sla.breached.length}
             </span>
           </div>
           {sla.breached.length === 0 ? (
-            <div className={styles.slaEmpty}>Aucun ticket en breach</div>
+            <div className={styles.slaEmpty}>{t('dashboard.sla.noBreached')}</div>
           ) : (
             <ul className={styles.slaList}>
               {sla.breached.map((ticket) => {
@@ -284,14 +289,14 @@ function SlaSection() {
                 <circle cx="12" cy="12" r="10" />
                 <polyline points="12 6 12 12 16 14" />
               </svg>
-              À risque
+              {t('dashboard.sla.atRisk')}
             </h3>
             <span className={`${styles.slaCount} ${styles.slaCountRisk}`}>
               {sla.atRisk.length}
             </span>
           </div>
           {sla.atRisk.length === 0 ? (
-            <div className={styles.slaEmpty}>Aucun ticket à risque</div>
+            <div className={styles.slaEmpty}>{t('dashboard.sla.noAtRisk')}</div>
           ) : (
             <ul className={styles.slaList}>
               {sla.atRisk.map((ticket) => {
@@ -313,7 +318,7 @@ function SlaSection() {
                       <span className={styles.slaItemSubject}>{ticket.subject}</span>
                     </div>
                     <span className={`${styles.slaItemTime} ${styles.slaTimeRisk}`}>
-                      {formatSlaTime(remainingMin)} restant
+                      {t('dashboard.sla.remaining', { time: formatSlaTime(remainingMin) })}
                     </span>
                   </li>
                 )
@@ -372,17 +377,12 @@ export const SupportDashboardClient: React.FC = () => {
     return () => window.removeEventListener('focus', onFocus)
   }, [fetchData, sessionExpired])
 
-  // Generate fake daily volume from available stats (7 synthetic bars)
+  // Real daily volume for the last 7 days (from admin-stats.volumeByDay).
   const volumeData = useMemo(() => {
-    if (!stats) return []
-    const avg = stats.createdLast7Days
-    const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
-    // Distribute the 7-day total across days with some variation
-    const base = Math.max(Math.floor(avg / 7), 0)
-    return days.map((label, i) => ({
-      label,
-      // Simple deterministic variation based on index
-      value: Math.max(base + ((i * 3 + 1) % 5) - 2, 0),
+    if (!stats?.volumeByDay?.length) return []
+    return stats.volumeByDay.map((d) => ({
+      label: new Date(d.date).toLocaleDateString(DATE_LOCALE, { weekday: 'short' }),
+      value: d.count,
     }))
   }, [stats])
 

package/src/views/TicketDetailView/NextActionItem.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import React, { useState } from 'react'
+import s from '../../styles/TicketDetail.module.scss'
+
+const labelMap: Record<string, string> = { now: 'Maintenant', today: "Aujourd'hui", 'this-week': 'Cette semaine' }
+
+export function NextActionItem({ action, index, onToggle }: { action: any; index: number; onToggle: (done: boolean) => Promise<void> }) {
+  const [pending, setPending] = useState(false)
+  const done = !!action.done
+  return (
+    <li className={s.aiCardNextAction}>
+      <button
+        type="button"
+        className={`${s.aiCardNextCheck} ${done ? s.aiCardNextCheckDone : ''}`}
+        onClick={async () => {
+          setPending(true)
+          try { await onToggle(!done) } finally { setPending(false) }
+        }}
+        aria-pressed={done}
+        aria-label={done ? 'Marquer non fait' : 'Marquer fait'}
+        disabled={pending}
+      >
+        {done && <span aria-hidden>✓</span>}
+      </button>
+      <span className={`${s.aiCardNextLabel} ${done ? s.aiCardNextLabelDone : ''}`}>{action.label}</span>
+      <span className={s.aiCardNextWhen}>{labelMap[action.priority] || action.priority}</span>
+    </li>
+  )
+}

package/src/views/TicketDetailView/RewriteDropdown.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import React, { useState, useEffect, useRef } from 'react'
+import { REWRITE_STYLES } from './constants'
+
+export const RewriteDropdown: React.FC<{
+  disabled: boolean
+  loading: boolean
+  onSelect: (style: string) => void
+  toolbarBtnClass?: string
+}> = ({ disabled, loading, onSelect, toolbarBtnClass }) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const close = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [open])
+
+  return (
+    <div ref={ref} style={{ position: 'relative', display: 'inline-block' }}>
+      <button
+        type="button"
+        className={toolbarBtnClass}
+        onClick={() => setOpen(!open)}
+        disabled={disabled}
+        style={{ fontSize: 11, fontWeight: 700, padding: '4px 10px', width: 'auto', display: 'flex', alignItems: 'center', gap: 4 }}
+      >
+        {loading ? '...' : '✏️ Reformuler'}
+        {!loading && <span style={{ fontSize: 9, opacity: 0.6 }}>▼</span>}
+      </button>
+      {open && !disabled && !loading && (
+        <div style={{
+          position: 'absolute', bottom: '100%', left: 0, marginBottom: 4,
+          background: '#fff', border: '1px solid #e5e7eb', borderRadius: 8,
+          boxShadow: '0 4px 16px rgba(0,0,0,0.12)', zIndex: 100, minWidth: 180, overflow: 'hidden',
+        }}>
+          {REWRITE_STYLES.map((style) => (
+            <button
+              key={style.id}
+              type="button"
+              onClick={() => { setOpen(false); onSelect(style.id) }}
+              style={{
+                display: 'flex', flexDirection: 'column', width: '100%', padding: '8px 12px',
+                border: 'none', background: 'transparent', cursor: 'pointer', textAlign: 'left',
+                borderBottom: '1px solid #f3f4f6',
+              }}
+              onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = '#f9fafb' }}
+              onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent' }}
+            >
+              <span style={{ fontSize: 12, fontWeight: 600 }}>{style.label}</span>
+              <span style={{ fontSize: 10, color: '#9ca3af' }}>{style.desc}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}