@consilioweb/payload-support 0.16.0 → 1.0.0

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>
+  )
+}