@consilioweb/payload-support 0.15.0 → 1.0.0

package/src/utils/invoicePdf.ts

@@ -0,0 +1,88 @@
+import PDFDocument from 'pdfkit'
+
+export interface InvoiceLine {
+  ticketNumber: string
+  subject: string
+  client: string
+  minutes: number
+  amount: number
+}
+
+export interface InvoiceData {
+  from: string
+  to: string
+  projectId?: string | null
+  lines: InvoiceLine[]
+  totalMinutes: number
+  totalAmount: number
+}
+
+const fmtAmount = (n: number) => `${n.toFixed(2)} EUR`
+const fmtTime = (min: number) => `${Math.floor(min / 60)}h${String(min % 60).padStart(2, '0')}`
+
+/**
+ * Render a real (binary) PDF invoice from billing data, using pdfkit. Returns the
+ * complete PDF as a Buffer (suitable for an HTTP `application/pdf` response).
+ */
+export function generateInvoicePdf(data: InvoiceData): Promise<Buffer> {
+  return new Promise((resolve, reject) => {
+    try {
+      const doc = new PDFDocument({ size: 'A4', margin: 50 })
+      const chunks: Buffer[] = []
+      doc.on('data', (c: Buffer) => chunks.push(c))
+      doc.on('end', () => resolve(Buffer.concat(chunks)))
+      doc.on('error', reject)
+
+      // Header
+      doc.fillColor('#0f172a').fontSize(22).text('Invoice / Pre-billing')
+      doc.moveDown(0.2)
+      doc.fillColor('#64748b').fontSize(10)
+        .text(`Period: ${data.from} -> ${data.to}${data.projectId ? `   ·   Project #${data.projectId}` : ''}`)
+      doc.moveDown(1)
+
+      // Column layout (x positions)
+      const X = { ticket: 50, subject: 130, client: 320, time: 430, amount: 500 }
+      const drawRow = (r: { ticket: string; subject: string; client: string; time: string; amount: string }, opts?: { header?: boolean; total?: boolean }) => {
+        const y = doc.y
+        doc.fontSize(opts?.header ? 9 : 10).fillColor(opts?.header ? '#475569' : '#0f172a')
+        if (opts?.total) doc.font('Helvetica-Bold')
+        doc.text(r.ticket, X.ticket, y, { width: X.subject - X.ticket - 6 })
+        doc.text(r.subject, X.subject, y, { width: X.client - X.subject - 6 })
+        doc.text(r.client, X.client, y, { width: X.time - X.client - 6 })
+        doc.text(r.time, X.time, y, { width: X.amount - X.time - 6, align: 'right' })
+        doc.text(r.amount, X.amount, y, { width: 545 - X.amount, align: 'right' })
+        doc.font('Helvetica')
+        doc.moveDown(0.4)
+      }
+
+      drawRow({ ticket: 'Ticket', subject: 'Subject', client: 'Client', time: 'Time', amount: 'Amount' }, { header: true })
+      doc.moveTo(50, doc.y).lineTo(545, doc.y).strokeColor('#e2e8f0').stroke()
+      doc.moveDown(0.3)
+
+      for (const l of data.lines) {
+        if (doc.y > 760) doc.addPage()
+        drawRow({
+          ticket: l.ticketNumber || '',
+          subject: l.subject || '',
+          client: l.client || '',
+          time: fmtTime(l.minutes),
+          amount: fmtAmount(l.amount),
+        })
+      }
+
+      doc.moveTo(50, doc.y).lineTo(545, doc.y).strokeColor('#0f172a').stroke()
+      doc.moveDown(0.3)
+      drawRow({
+        ticket: '',
+        subject: `Total (${data.lines.length} ticket${data.lines.length > 1 ? 's' : ''})`,
+        client: '',
+        time: fmtTime(data.totalMinutes),
+        amount: fmtAmount(data.totalAmount),
+      }, { total: true })
+
+      doc.end()
+    } catch (err) {
+      reject(err as Error)
+    }
+  })
+}

package/src/utils/notificationQueue.ts

@@ -0,0 +1,36 @@
+import type { Payload } from 'payload'
+import type { CollectionSlugs } from './slugs'
+import { dbCreate } from './db'
+
+export interface QueuedNotification {
+  client: number | string
+  type: string
+  title: string
+  message: string
+  ticket?: number | string
+}
+
+/**
+ * Queue a client notification for later digest delivery (best-effort). Used when
+ * the client opted into `daily`/`weekly` notification frequency instead of immediate.
+ */
+export async function queueClientNotification(
+  payload: Payload,
+  slugs: CollectionSlugs,
+  item: QueuedNotification,
+): Promise<void> {
+  try {
+    await dbCreate(payload, slugs.notificationQueue, {
+      data: {
+        client: item.client,
+        type: item.type,
+        title: item.title,
+        message: item.message,
+        ...(item.ticket ? { ticket: item.ticket } : {}),
+      },
+      overrideAccess: true,
+    })
+  } catch (err) {
+    console.error('[support] Failed to queue client notification:', err)
+  }
+}

package/src/utils/readSettings.ts

@@ -1,4 +1,5 @@
 import type { Payload } from 'payload'
+import { dbFind } from './db'
 
 const PREF_KEY = 'support-settings'
 const USER_PREFS_KEY_PREFIX = 'support-user-prefs'
@@ -27,16 +28,31 @@ export const DEFAULT_USER_PREFS: UserPrefs = {
   signature: '',
 }
 
+// In-process cache: readSupportSettings is hit many times per ticket mutation
+// (the afterChange hook chain). The settings doc changes rarely, so a short TTL
+// + explicit invalidation on save (endpoints/settings.ts) avoids redundant DB
+// reads of the same `payload-preferences` row.
+let settingsCache: { value: SupportSettings; ts: number } | null = null
+const SETTINGS_TTL_MS = 60_000
+
+/** Invalidate the settings cache — call right after writing support settings. */
+export function invalidateSupportSettingsCache(): void {
+  settingsCache = null
+}
+
 export async function readSupportSettings(payload: Payload): Promise<SupportSettings> {
+  if (settingsCache && Date.now() - settingsCache.ts < SETTINGS_TTL_MS) {
+    return settingsCache.value
+  }
+  let value: SupportSettings = { ...DEFAULT_SETTINGS }
   try {
-    const prefs = await payload.find({
-      collection: 'payload-preferences' as any,
+    const prefs = await dbFind(payload, 'payload-preferences', {
       where: { key: { equals: PREF_KEY } },
       limit: 1, depth: 0, overrideAccess: true,
     })
     if (prefs.docs.length > 0) {
       const stored = prefs.docs[0].value as Partial<SupportSettings>
-      return {
+      value = {
         email: { ...DEFAULT_SETTINGS.email, ...stored.email },
         ai: { ...DEFAULT_SETTINGS.ai, ...stored.ai },
         sla: { ...DEFAULT_SETTINGS.sla, ...stored.sla },
@@ -44,14 +60,14 @@ export async function readSupportSettings(payload: Payload): Promise<SupportSett
       }
     }
   } catch { /* fallback to defaults */ }
-  return { ...DEFAULT_SETTINGS }
+  settingsCache = { value, ts: Date.now() }
+  return value
 }
 
 export async function readUserPrefs(payload: Payload, userId: string | number): Promise<UserPrefs> {
   try {
     const key = `${USER_PREFS_KEY_PREFIX}-${userId}`
-    const prefs = await payload.find({
-      collection: 'payload-preferences' as any,
+    const prefs = await dbFind(payload, 'payload-preferences', {
       where: { key: { equals: key } },
       limit: 1, depth: 0, overrideAccess: true,
     })

package/src/utils/sanitizeHtml.ts

@@ -0,0 +1,57 @@
+import sanitizeHtml from 'sanitize-html'
+
+/**
+ * Allow-list sanitizer for user/agent-submitted rich message content (`bodyHtml`).
+ *
+ * `bodyHtml` is rendered with `dangerouslySetInnerHTML` in BOTH the portal and the
+ * admin views, so unsanitized HTML is a stored-XSS vector: a client could inject
+ * a payload that runs in an agent's session → session theft → cross-client access.
+ *
+ * Applied server-side on write (TicketMessages `beforeChange`). Strips <script>,
+ * <iframe>/<embed>/<object>, inline event handlers (`on*`) and `javascript:` URIs,
+ * and restricts inline styles to a safe property/value allow-list (no `url()` /
+ * `expression()`).
+ */
+const OPTIONS: sanitizeHtml.IOptions = {
+  allowedTags: [
+    'p', 'br', 'b', 'strong', 'i', 'em', 'u', 's', 'strike', 'del', 'ins', 'mark',
+    'a', 'ul', 'ol', 'li', 'blockquote', 'code', 'pre', 'kbd', 'span', 'div',
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'img',
+    'table', 'thead', 'tbody', 'tr', 'th', 'td',
+  ],
+  allowedAttributes: {
+    a: ['href', 'title', 'target', 'rel'],
+    img: ['src', 'alt', 'title', 'width', 'height'],
+    code: ['class'],
+    pre: ['class'],
+    span: ['class'],
+    '*': ['style'],
+  },
+  allowedSchemes: ['http', 'https', 'mailto', 'tel'],
+  allowedSchemesByTag: { img: ['http', 'https', 'data'] },
+  allowProtocolRelative: false,
+  disallowedTagsMode: 'discard',
+  // Force safe rel on links opening a new tab (defense against tabnabbing).
+  transformTags: {
+    a: sanitizeHtml.simpleTransform('a', { rel: 'noopener noreferrer nofollow' }, true),
+  },
+  // Only allow CSS that cannot carry a script payload.
+  allowedStyles: {
+    '*': {
+      color: [/^#(0x)?[0-9a-f]+$/i, /^rgb\(\s*(\d{1,3}\s*,\s*){2}\d{1,3}\s*\)$/i, /^[a-z-]+$/i],
+      'background-color': [/^#(0x)?[0-9a-f]+$/i, /^rgb\(\s*(\d{1,3}\s*,\s*){2}\d{1,3}\s*\)$/i, /^[a-z-]+$/i],
+      'text-align': [/^(left|right|center|justify)$/],
+      'font-weight': [/^(normal|bold|[1-9]00)$/],
+      'font-style': [/^(normal|italic)$/],
+      'text-decoration': [/^(underline|line-through|none)$/],
+    },
+  },
+}
+
+/**
+ * Sanitize a rich-HTML message body. Returns the input unchanged when empty.
+ */
+export function sanitizeMessageHtml(html: string): string {
+  if (!html) return html
+  return sanitizeHtml(html, OPTIONS)
+}

package/src/utils/slugs.ts

@@ -20,6 +20,9 @@ export interface CollectionSlugs {
   macros: string
   ticketStatuses: string
   ticketFeedback: string
+  notificationQueue: string
+  automationRules: string
+  supportTeams: string
   users: string
   media: string
 }
@@ -42,6 +45,9 @@ export const DEFAULT_SLUGS: CollectionSlugs = {
   macros: 'macros',
   ticketStatuses: 'ticket-statuses',
   ticketFeedback: 'ticket-feedback',
+  notificationQueue: 'notification-queue',
+  automationRules: 'automation-rules',
+  supportTeams: 'support-teams',
   users: 'users',
   media: 'media',
 }

package/src/utils/teamAccess.ts

@@ -0,0 +1,27 @@
+import type { Payload } from 'payload'
+import type { CollectionSlugs } from './slugs'
+import { dbFind } from './db'
+
+/** Team scoping is opt-in — off by default so existing installs are unaffected. */
+export function isTeamScopingEnabled(): boolean {
+  return process.env.SUPPORT_TEAM_SCOPING === '1' || process.env.SUPPORT_TEAM_SCOPING === 'true'
+}
+
+/** Resolve the team IDs an agent belongs to. */
+export async function resolveAgentTeamIds(
+  payload: Payload,
+  slugs: CollectionSlugs,
+  userId: number | string,
+): Promise<Array<number | string>> {
+  try {
+    const teams = await dbFind(payload, slugs.supportTeams, {
+      where: { members: { in: [userId] } },
+      limit: 200,
+      depth: 0,
+      overrideAccess: true,
+    })
+    return teams.docs.map((t) => (t as { id: number | string }).id)
+  } catch {
+    return []
+  }
+}

package/src/utils/ticketAccess.ts

@@ -0,0 +1,53 @@
+import type { Payload } from 'payload'
+import type { CollectionSlugs } from './slugs'
+import { dbFind } from './db'
+
+/**
+ * Resolve the set of ticket IDs a support-client may access: tickets they own
+ * (`client = id`) plus tickets they collaborate on (`ticket-collaborators` table).
+ *
+ * Used as a SECURITY BOUNDARY for child collections (messages, activity log):
+ * callers constrain `ticket IN (...)` instead of relying on a nested relationship
+ * filter (`'ticket.client'`), whose behaviour through the SQLite/Drizzle adapter
+ * is not guaranteed. Mirrors the owner/collaborator resolution in `Tickets.ts`.
+ *
+ * Returns an empty array when the client has no accessible tickets — callers MUST
+ * treat that as "deny" (e.g. filter on a sentinel id) rather than "allow all".
+ */
+export async function resolveAccessibleTicketIds(
+  payload: Payload,
+  slugs: CollectionSlugs,
+  clientId: number | string,
+): Promise<Array<number | string>> {
+  const ids = new Set<number | string>()
+
+  try {
+    const owned = await dbFind(payload, slugs.tickets, {
+      where: { client: { equals: clientId } },
+      limit: 5000,
+      depth: 0,
+      overrideAccess: true,
+    })
+    for (const t of owned.docs) ids.add(t.id as number | string)
+  } catch {
+    // ignore — fall through with whatever we resolved
+  }
+
+  try {
+    const collab = await dbFind(payload, 'ticket-collaborators', {
+      where: { client: { equals: clientId } },
+      limit: 1000,
+      depth: 0,
+      overrideAccess: true,
+    })
+    for (const r of collab.docs) {
+      const row = r as { ticket?: number | string | { id?: number | string } }
+      const tid = typeof row.ticket === 'object' ? row.ticket?.id : row.ticket
+      if (tid !== undefined && tid !== null) ids.add(tid)
+    }
+  } catch {
+    // ticket-collaborators may not exist on older deployments — owner-only fallback
+  }
+
+  return Array.from(ids)
+}

package/src/utils/webhookDispatcher.ts

@@ -1,6 +1,7 @@
 import crypto from 'crypto'
 import type { BasePayload } from 'payload'
 import type { CollectionSlugs } from './slugs'
+import { dbFind, dbUpdate } from './db'
 
 type WebhookEvent = 'ticket_created' | 'ticket_resolved' | 'ticket_replied' | 'sla_breached'
 
@@ -32,8 +33,7 @@ async function _dispatch(
   slugs: CollectionSlugs,
 ): Promise<void> {
   try {
-    const { docs: endpoints } = await payload.find({
-      collection: slugs.webhookEndpoints as any,
+    const { docs: endpoints } = await dbFind(payload, slugs.webhookEndpoints, {
       where: {
         and: [
           { active: { equals: true } },
@@ -86,8 +86,7 @@ async function _sendToEndpoint(
     })
 
     // Update last triggered info on the endpoint
-    await payload.update({
-      collection: slugs.webhookEndpoints as any,
+    await dbUpdate(payload, slugs.webhookEndpoints, {
       id: endpoint.id,
       data: {
         lastTriggeredAt: new Date().toISOString(),
@@ -104,8 +103,7 @@ async function _sendToEndpoint(
 
     // Still update with error status
     try {
-      await payload.update({
-        collection: slugs.webhookEndpoints as any,
+      await dbUpdate(payload, slugs.webhookEndpoints, {
         id: endpoint.id,
         data: {
           lastTriggeredAt: new Date().toISOString(),

package/src/views/BillingView/client.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useCallback } from 'react'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import { DATE_LOCALE } from '../shared/dateLocale'
 import styles from '../../styles/BillingView.module.scss'
 
 interface BillingEntry {
@@ -215,28 +216,30 @@ export const BillingClient: React.FC = () => {
   const copyRecap = useCallback(() => {
     if (!data) return
     const lines: string[] = []
-    lines.push(`PRE-FACTURATION — Du ${from} au ${to}`)
-    lines.push(`Taux horaire : ${rate} EUR/h`)
+    lines.push(t('billing.recap.header', { from, to }))
+    lines.push(t('billing.recap.hourlyRate', { rate: String(rate) }))
     lines.push('='.repeat(50))
 
     for (const group of visibleGroups) {
       lines.push('')
-      lines.push(`PROJET : ${group.project?.name || 'Sans projet'}`)
-      if (group.client?.company) lines.push(`Client : ${group.client.company}`)
+      lines.push(group.project?.name
+        ? t('billing.recap.project', { name: group.project.name })
+        : t('billing.recap.project', { name: t('billing.recap.noProject') }))
+      if (group.client?.company) lines.push(t('billing.recap.client', { company: group.client.company }))
       lines.push('-'.repeat(40))
 
       for (const ticket of group.tickets) {
-        const flag = ticket.hasNoTimeEntries ? ' [AUCUN TEMPS SAISI]' : ''
+        const flag = ticket.hasNoTimeEntries ? t('billing.recap.noTime') : ''
         lines.push(`  ${ticket.ticketNumber} — ${ticket.subject}${flag}`)
         for (const entry of ticket.entries) {
           lines.push(`    ${entry.date} | ${formatDuration(entry.duration)} | ${entry.description || '-'}`)
         }
         if (ticket.entries.length > 0) {
           const ticketAmount = ticket.billedAmount || Number(formatAmount(ticket.totalMinutes, rate))
-          lines.push(`    Sous-total : ${formatDuration(ticket.totalMinutes)} = ${ticketAmount.toFixed(2)} EUR${ticket.billedAmount ? ' (forfait)' : ''}`)
+          lines.push(`    ${t('billing.recap.subtotal')} : ${formatDuration(ticket.totalMinutes)} = ${ticketAmount.toFixed(2)}${t('billing.recap.eur')}${ticket.billedAmount ? t('billing.recap.forfait') : ''}`)
         }
         if (ticket.aiSummary) {
-          lines.push('    Detail des actions :')
+          lines.push(`    ${t('billing.recap.actionDetails')} :`)
           for (const detailLine of ticket.aiSummary.split('\n')) {
             lines.push(`    ${detailLine}`)
           }
@@ -245,17 +248,17 @@ export const BillingClient: React.FC = () => {
       const groupAmount = group.totalBilledAmount > 0
         ? group.totalBilledAmount
         : Number(formatAmount(group.totalMinutes, rate))
-      lines.push(`  Total projet : ${formatDuration(group.totalMinutes)} = ${groupAmount.toFixed(2)} EUR`)
+      lines.push(`  ${t('billing.recap.projectTotal')} : ${formatDuration(group.totalMinutes)} = ${groupAmount.toFixed(2)}${t('billing.recap.eur')}`)
     }
 
     lines.push('')
     lines.push('='.repeat(50))
-    lines.push(`TOTAL GENERAL : ${formatDuration(data.grandTotalMinutes)} = ${formatAmount(data.grandTotalMinutes, rate)} EUR`)
+    lines.push(`${t('billing.recap.grandTotal')} : ${formatDuration(data.grandTotalMinutes)} = ${formatAmount(data.grandTotalMinutes, rate)}${t('billing.recap.eur')}`)
 
     navigator.clipboard.writeText(lines.join('\n'))
     setCopied(true)
     setTimeout(() => setCopied(false), 2000)
-  }, [data, visibleGroups, from, to, rate])
+  }, [data, visibleGroups, from, to, rate, t])
 
   const copyTicketSummary = useCallback((ticket: BillingTicket) => {
     const lines = [`${ticket.ticketNumber} — ${ticket.subject}`]
@@ -324,11 +327,13 @@ export const BillingClient: React.FC = () => {
           {data.ticketsWithoutTime > 0 && (
             <div className={styles.warningBanner}>
               <span>
-                <strong>{data.ticketsWithoutTime}</strong> ticket{data.ticketsWithoutTime > 1 ? 's' : ''} actif{data.ticketsWithoutTime > 1 ? 's' : ''} sans temps saisi sur la periode.
+                {data.ticketsWithoutTime > 1
+                  ? t('billing.warningTicketsPlural', { count: String(data.ticketsWithoutTime) })
+                  : t('billing.warningTickets', { count: String(data.ticketsWithoutTime) })}
               </span>
               <label className={styles.toggleLabel}>
                 <input type="checkbox" checked={hideEmpty} onChange={(e) => setHideEmpty(e.target.checked)} />
-                <span>Masquer ces tickets</span>
+                <span>{t('billing.hideEmpty')}</span>
               </label>
             </div>
           )}
@@ -341,7 +346,7 @@ export const BillingClient: React.FC = () => {
                 <div key={gi} className={styles.groupCard}>
                   <div className={styles.groupHeader}>
                     <div>
-                      <span className={styles.groupName}>{group.project?.name || 'Sans projet'}</span>
+                      <span className={styles.groupName}>{group.project?.name || t('billing.noProject')}</span>
                       {group.client?.company && (
                         <span className={styles.groupClient}>— {group.client.company}</span>
                       )}
@@ -350,7 +355,7 @@ export const BillingClient: React.FC = () => {
                       <div className={styles.groupDuration}>{formatDuration(group.totalMinutes)}</div>
                       {group.totalBilledAmount > 0 ? (
                         <>
-                          <div className={styles.groupAmountBilled}>{group.totalBilledAmount.toFixed(2)} EUR facture</div>
+                          <div className={styles.groupAmountBilled}>{group.totalBilledAmount.toFixed(2)} EUR {t('billing.groupAmountBilled')}</div>
                           <div className={styles.groupAmountStrike}>{formatAmount(group.totalMinutes, rate)} EUR (temps)</div>
                         </>
                       ) : (
@@ -377,16 +382,16 @@ export const BillingClient: React.FC = () => {
                               })
                             }}
                             className={styles.checkbox}
-                            title="Tout cocher/decocher"
+                            title={t('billing.tableCheckboxTitle')}
                           />
                         </th>
-                        <th className={styles.th}>N° Ticket</th>
-                        <th className={styles.thLeft}>Sujet</th>
-                        <th className={styles.th}>Date</th>
-                        <th className={styles.th}>Duree</th>
-                        <th className={styles.thLeft}>Description</th>
-                        <th className={styles.th}>Montant</th>
-                        <th className={styles.th}>Facture</th>
+                        <th className={styles.th}>{t('billing.tableHeaders.number')}</th>
+                        <th className={styles.thLeft}>{t('billing.tableHeaders.subject')}</th>
+                        <th className={styles.th}>{t('billing.tableHeaders.date')}</th>
+                        <th className={styles.th}>{t('billing.tableHeaders.duration')}</th>
+                        <th className={styles.thLeft}>{t('billing.tableHeaders.description')}</th>
+                        <th className={styles.th}>{t('billing.tableHeaders.amount')}</th>
+                        <th className={styles.th}>{t('billing.tableHeaders.billed')}</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -403,7 +408,7 @@ export const BillingClient: React.FC = () => {
                                 checked={isBilled}
                                 onChange={() => toggleBilled(ticket.id)}
                                 className={styles.checkbox}
-                                title={isBilled ? 'Marquer comme non facture' : 'Marquer comme facture'}
+                                title={isBilled ? t('billing.markUnbilledTitle') : t('billing.markBilledTitle')}
                               />
                             </td>
                             <td className={`${styles.td} ${styles.bold} ${isBilled ? styles.strikethrough : ''}`} rowSpan={rowSpan}>
@@ -413,7 +418,7 @@ export const BillingClient: React.FC = () => {
                               <button
                                 className={styles.summaryBtn}
                                 onClick={() => toggleSummary(ticket.id)}
-                                title={isExpanded ? 'Masquer le detail' : 'Afficher le detail IA'}
+                                title={isExpanded ? t('billing.summaryToggleHide') : t('billing.summaryToggleShow')}
                               >
                                 {isExpanded ? '▼' : '▶'} IA
                               </button>
@@ -421,8 +426,8 @@ export const BillingClient: React.FC = () => {
                             <td className={`${styles.tdLeft} ${isBilled ? styles.strikethrough : ''}`} rowSpan={rowSpan}>
                               {ticket.subject}
                               {ticket.hasNoTimeEntries && (
-                                <span className={styles.noTimeBadge} title="Aucun temps saisi sur la periode">
-                                  ⚠ Aucun temps saisi
+                                <span className={styles.noTimeBadge} title={t('billing.noTimeBadgeTitle')}>
+                                  {t('billing.noTimeBadge')}
                                 </span>
                               )}
                             </td>
@@ -439,7 +444,7 @@ export const BillingClient: React.FC = () => {
                             >
                               {renderTicketHeaderCells()}
                               <td className={`${styles.td} ${styles.secondary}`} colSpan={5}>
-                                <em>Pas de saisie de temps. Verifier si du temps a ete oublie.</em>
+                                <em>{t('billing.noTimeRow')}</em>
                               </td>
                             </tr>,
                           )
@@ -477,11 +482,11 @@ export const BillingClient: React.FC = () => {
                             <tr key={`${ticket.id}-summary`} className={styles.summaryRow}>
                               <td colSpan={8} className={styles.summaryCell}>
                                 <div className={styles.summaryHeader}>
-                                  <strong>Synthese IA des actions</strong>
+                                  <strong>{t('billing.summaryTitle')}</strong>
                                   <div className={styles.summaryActions}>
                                     {ticket.aiSummaryGeneratedAt && (
                                       <span className={styles.summaryMeta}>
-                                        Genere le {new Date(ticket.aiSummaryGeneratedAt).toLocaleString('fr-FR')}
+                                        {t('billing.summaryGeneratedAt', { date: new Date(ticket.aiSummaryGeneratedAt).toLocaleString(DATE_LOCALE) })}
                                       </span>
                                     )}
                                     {ticket.aiSummary && (
@@ -489,7 +494,7 @@ export const BillingClient: React.FC = () => {
                                         className={styles.summaryAction}
                                         onClick={() => copyTicketSummary(ticket)}
                                       >
-                                        Copier
+                                        {t('billing.summaryCopy')}
                                       </button>
                                     )}
                                     <button
@@ -498,20 +503,20 @@ export const BillingClient: React.FC = () => {
                                       disabled={isRegenerating}
                                     >
                                       {isRegenerating
-                                        ? 'Generation...'
-                                        : ticket.aiSummary ? 'Regenerer' : 'Generer'}
+                                        ? t('billing.summaryGenerating')
+                                        : ticket.aiSummary ? t('billing.summaryRegenerate') : t('billing.summaryGenerate')}
                                     </button>
                                   </div>
                                 </div>
                                 {ticket.aiSummaryStatus === 'pending' && !ticket.aiSummary ? (
                                   <div className={styles.summaryEmpty}>
-                                    Generation en cours en arriere-plan. Cliquer sur "Generer" pour forcer.
+                                    {t('billing.summaryPending')}
                                   </div>
                                 ) : ticket.aiSummary ? (
                                   <pre className={styles.summaryText}>{ticket.aiSummary}</pre>
                                 ) : (
                                   <div className={styles.summaryEmpty}>
-                                    Pas de synthese disponible. La synthese est generee automatiquement quand le ticket passe en "resolu", ou manuellement via le bouton "Generer".
+                                    {t('billing.summaryEmpty')}
                                   </div>
                                 )}
                               </td>
@@ -529,15 +534,22 @@ export const BillingClient: React.FC = () => {
               <div className={styles.grandTotal}>
                 <div>
                   <div className={styles.totalMeta}>
-                    {totalTickets} ticket{totalTickets > 1 ? 's' : ''} affiche{totalTickets > 1 ? 's' : ''}
+                    {totalTickets > 1
+                      ? t('billing.ticketsDisplayedPlural', { count: String(totalTickets) })
+                      : t('billing.ticketsDisplayed', { count: String(totalTickets) })}
                     {billedTickets.size > 0 && (
                       <span className={styles.totalChecked}>
-                        ({allTicketIds.filter((id) => billedTickets.has(id)).length} coche{allTicketIds.filter((id) => billedTickets.has(id)).length > 1 ? 's' : ''})
+                        {(() => {
+                          const checkedCount = allTicketIds.filter((id) => billedTickets.has(id)).length
+                          return checkedCount > 1
+                            ? `(${t('billing.ticketsCheckedPlural', { count: String(checkedCount) })})`
+                            : `(${t('billing.ticketsChecked', { count: String(checkedCount) })})`
+                        })()}
                       </span>
                     )}
                   </div>
                   <div className={styles.totalAmount}>
-                    Total : {formatDuration(data.grandTotalMinutes)} ={' '}
+                    {t('billing.totalLabel')} : {formatDuration(data.grandTotalMinutes)} ={' '}
                     {data.grandTotalBilledAmount > 0
                       ? `${data.grandTotalBilledAmount.toFixed(2)} EUR`
                       : `${formatAmount(data.grandTotalMinutes, rate)} EUR`

package/src/views/ChatView/client.tsx

@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
+import { DATE_LOCALE } from '../shared/dateLocale'
 import styles from '../../styles/ChatView.module.scss'
 
 interface ChatSession {
@@ -255,7 +256,7 @@ export const ChatViewClient: React.FC = () => {
                   ) : s.lastMessage}
                 </div>
                 <div className={styles.sessionMeta}>
-                  {new Date(s.lastMessageAt).toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}
+                  {new Date(s.lastMessageAt).toLocaleString(DATE_LOCALE, { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}
                   {' · '}{s.messageCount} {t('chat.msg')}
                 </div>
               </button>
@@ -306,7 +307,7 @@ export const ChatViewClient: React.FC = () => {
                               : msg.message.replace(/Note:\s*[★☆]+\s*\(\d\/5\)\s*/, '').replace('Commentaire: ', '')}
                           </div>
                           <div className={styles.ratingMeta}>
-                            {t('chat.clientReview')} · {new Date(msg.createdAt).toLocaleString('fr-FR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}
+                            {t('chat.clientReview')} · {new Date(msg.createdAt).toLocaleString(DATE_LOCALE, { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })}
                           </div>
                         </div>
                       ) : (
@@ -325,7 +326,7 @@ export const ChatViewClient: React.FC = () => {
                           {msg.message}
                         </div>
                         <div className={styles.bubbleTime}>
-                          {new Date(msg.createdAt).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}
+                          {new Date(msg.createdAt).toLocaleTimeString(DATE_LOCALE, { hour: '2-digit', minute: '2-digit' })}
                         </div>
                       </div>
                     )}