@consilioweb/payload-support 5.0.0 → 6.0.0

package/src/styles/TicketDetail.module.scss

@@ -52,7 +52,7 @@
   font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
   font-size: 12px;
   font-weight: 400;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -64,7 +64,7 @@
 
   > .ticketNumberCat,
   > .ticketNumberSource {
-    color: var(--theme-text-tertiary, var(--theme-elevation-500));
+    color: var(--theme-text-tertiary, var(--theme-elevation-650));
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -194,7 +194,7 @@
   text-transform: uppercase;
   letter-spacing: 0.08em;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   margin: 0 0 12px;
   display: flex;
   justify-content: space-between;
@@ -353,7 +353,7 @@
   font-size: 11px;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   white-space: nowrap;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -450,7 +450,7 @@
   font-size: 11px;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
 }
 
 // Pills "Interne" / "Solution" — pill style, 22px height
@@ -499,7 +499,7 @@
   margin-top: 4px;
   font-size: 11px;
   font-weight: 500;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   opacity: 0;
   transition: opacity 80ms ease;
 }
@@ -514,7 +514,7 @@
   font-size: 11px;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   display: inline-flex;
   align-items: center;
   height: auto;
@@ -749,7 +749,7 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   font-size: 11px;
   font-weight: 500;
   margin-left: auto;
@@ -910,7 +910,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-size: 13px;
   font-weight: 600;
   padding: 0;
@@ -941,7 +941,7 @@
 
 .activityContent { flex: 1; min-width: 0; }
 .activityText { font-weight: 500; color: var(--theme-text); font-size: 12px; }
-.activityTime { font-size: 11px; color: var(--theme-elevation-500); margin-top: 1px; }
+.activityTime { font-size: 11px; color: var(--theme-elevation-650); margin-top: 1px; }
 
 // ─── DROPDOWN ───
 .dropdown { position: relative; display: inline-block; }
@@ -1055,7 +1055,7 @@
 
 .splitPreview {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 0 0 16px;
   line-height: 1.5;
   max-height: 80px;
@@ -1092,7 +1092,7 @@
   background: none;
   font-size: 13px;
   font-weight: 600;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   cursor: pointer;
   &:hover { background: var(--theme-elevation-100); }
 }
@@ -1145,7 +1145,7 @@
   cursor: pointer;
   font-size: 11px;
   line-height: 1;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   padding: 0;
   display: inline-flex;
   align-items: center;
@@ -1166,7 +1166,7 @@
   font-size: 11px;
   font-weight: 500;
   line-height: 1;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   cursor: pointer;
   transition: border-color 80ms ease, color 80ms ease;
   &:hover {
@@ -1607,7 +1607,7 @@
   align-items: center;
   gap: 6px;
   font-size: 10px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 .previousTicketsStatus {
@@ -1755,7 +1755,7 @@
   text-transform: uppercase;
   letter-spacing: 0.08em;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   margin: 12px 0 8px;
 }
 .aiCardNextActions {
@@ -1805,13 +1805,13 @@
 }
 .aiCardNextLabelDone {
   text-decoration: line-through;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
 }
 .aiCardNextWhen {
   font-size: 11px;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   flex-shrink: 0;
 }
 
@@ -1856,12 +1856,12 @@
   margin: 0 2px;
 }
 .ticketNumberCat {
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
   font-weight: 400;
 }
 .ticketNumberSource {
-  color: var(--theme-text-tertiary, var(--theme-elevation-500));
+  color: var(--theme-text-tertiary, var(--theme-elevation-650));
   font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
   display: inline-flex;
   align-items: center;

package/src/styles/TicketInbox.module.scss

@@ -26,7 +26,7 @@
 
 .subtitle {
   font-size: 13px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 2px 0 0;
 }
 
@@ -125,7 +125,7 @@
   padding: 0 12px;
   font-size: 13px;
   font-weight: 500;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   background: none;
   border: none;
   border-radius: 6px;
@@ -155,7 +155,7 @@
   padding: 0 6px;
   font-size: 11px;
   font-weight: 600;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   background: var(--theme-elevation-200);
   border-radius: 999px;
 }
@@ -179,7 +179,7 @@
 .sortSelect {
   font-size: 12px;
   font-weight: 600;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   background: none;
   border: none;
   cursor: pointer;
@@ -268,7 +268,7 @@
 
 .client {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -333,7 +333,7 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   font-size: 11px;
   font-weight: 500;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   display: flex;
   gap: 12px;
   z-index: 10;

package/src/styles/TicketingSettings.module.scss

@@ -15,7 +15,7 @@ $green: #16a34a;
 
 .intro {
   font-size: 13px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 0 0 24px;
   line-height: 1.6;
 }
@@ -59,7 +59,7 @@ $green: #16a34a;
 
 .sectionChevron {
   font-size: 16px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   transition: transform 150ms;
 
   &.open {
@@ -73,7 +73,7 @@ $green: #16a34a;
 
 .sectionDescription {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 0 0 16px;
   line-height: 1.5;
 }
@@ -97,7 +97,7 @@ $green: #16a34a;
 
 .fieldDescription {
   font-size: 11px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-weight: 400;
   margin-top: 2px;
 }
@@ -131,7 +131,7 @@ $green: #16a34a;
   border-radius: 6px;
   border: 1px solid var(--theme-elevation-300);
   font-size: 13px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   background-color: var(--theme-elevation-100);
   width: 100%;
   max-width: 400px;
@@ -179,7 +179,7 @@ $green: #16a34a;
 
 .inlineDesc {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 // ─── BADGE ───
@@ -251,7 +251,7 @@ $green: #16a34a;
 
 .featureDesc {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   line-height: 1.4;
 }
 
@@ -271,7 +271,7 @@ $green: #16a34a;
 
 .aiToggleDesc {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin-left: 8px;
 }
 
@@ -290,7 +290,7 @@ $green: #16a34a;
   background-color: transparent;
   cursor: pointer;
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   white-space: nowrap;
 }
 
@@ -303,7 +303,7 @@ $green: #16a34a;
 
 .slaHint {
   font-size: 12px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 // ─── AI SUB FEATURES LABEL ───

package/src/styles/TimeDashboard.module.scss

@@ -28,7 +28,7 @@
 }
 
 .subtitle {
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin: 4px 0 0;
   font-size: 14px;
 }
@@ -80,7 +80,7 @@
 .label {
   font-size: 11px;
   font-weight: 700;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   margin-bottom: 3px;
 }
 
@@ -146,7 +146,7 @@
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
 }
 
 .kpiValue {
@@ -201,7 +201,7 @@
   border: 1px solid var(--theme-elevation-300);
   border-radius: 8px;
   background: var(--theme-elevation-100);
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-size: 14px;
 }
 
@@ -257,13 +257,13 @@
 
 .tdSubject {
   padding: 6px 8px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-size: 12px;
 }
 
 .tdDescription {
   padding: 6px 8px;
-  color: var(--theme-elevation-500);
+  color: var(--theme-elevation-650);
   font-size: 12px;
 }
 

package/src/styles/_tokens.scss

@@ -1,6 +1,8 @@
 // Design tokens — based on Payload CMS CSS variables
 $text: var(--theme-text);
-$text-secondary: var(--theme-elevation-500);
+// elevation-650, not 500: Payload's dark theme skips the 500 step, leaving it
+// at rgb(128,128,128) — 3.62:1 light / 4.03:1 dark, below WCAG AA in both.
+$text-secondary: var(--theme-elevation-650);
 $text-muted: var(--theme-elevation-400);
 $bg: var(--theme-elevation-50);
 $bg-card: var(--theme-elevation-100);

package/src/types.ts

@@ -1,4 +1,5 @@
 import type { RateLimitStore } from './utils/rateLimiter'
+import type { RetentionConfig } from './utils/retention'
 import type { InboundEmailInput } from './utils/webhookSecurity'
 import type { Payload, PayloadRequest } from 'payload'
 
@@ -151,6 +152,25 @@ export interface SupportPluginConfig {
   /** Shared rate-limit storage. Defaults to process-local memory. */
   rateLimitStore?: RateLimitStore | 'payload'
 
+  /**
+   * Automatic retention of the two journals the plugin writes.
+   *
+   * The plugin registers a daily Payload Jobs task that deletes rows older
+   * than the configured number of days. Set a value to 0 to keep that journal
+   * forever (the manual `DELETE /api/support/purge-logs` endpoint stays
+   * available either way).
+   *
+   * Defaults: auth-logs 180 days, email-logs 365 days, cron `0 30 3 * * *`.
+   *
+   * `false` registers no task at all. That is the ONLY value that changes the
+   * schema footprint: registering a task turns Payload's job queue on, which
+   * adds the `payload-jobs` collection and the `payload-jobs-stats` global to
+   * an app that had no jobs — two tables you would have to migrate. Pass
+   * `false` if you would rather purge from your own cron, calling
+   * `DELETE /api/support/purge-logs`.
+   */
+  retention?: RetentionConfig | false
+
   /** Sequential ticket number formatting. */
   ticketNumber?: { prefix?: string; padding?: number }
 

package/src/utils/retention.ts

@@ -0,0 +1,111 @@
+import type { Payload, PayloadRequest } from 'payload'
+import type { CollectionSlugs } from './slugs'
+import { dbDelete } from './db'
+
+/**
+ * How long the two journals are kept, in days.
+ *
+ * Defaults follow the CNIL guidance the README documents: six months would be
+ * the floor for connection logs, a year is the ceiling usually accepted, and
+ * these two values sit inside that range while staying long enough to
+ * investigate an intrusion. Set a value to 0 to disable the automatic purge of
+ * that journal — never to mean "delete everything", which is what `days=0`
+ * means on the manual endpoint.
+ */
+export interface RetentionConfig {
+  /** Retention of `auth-logs` in days. `0` disables the scheduled purge. */
+  authLogsDays?: number
+  /** Retention of `email-logs` in days. `0` disables the scheduled purge. */
+  emailLogsDays?: number
+  /**
+   * Cron for the scheduled purge. Payload's cron takes an optional leading
+   * seconds field. Default: every day at 03:30.
+   */
+  cron?: string
+  /** Queue the scheduled job is pushed to. Default: `default`. */
+  queue?: string
+}
+
+export const DEFAULT_RETENTION = {
+  authLogsDays: 180,
+  emailLogsDays: 365,
+  cron: '0 30 3 * * *',
+  queue: 'default',
+} as const
+
+export const PURGE_LOGS_TASK_SLUG = 'support-purge-logs'
+
+/** Journals the purge is allowed to touch, keyed by their public name. */
+export function purgeableCollections(slugs: CollectionSlugs): Record<string, string> {
+  return {
+    'email-logs': slugs.emailLogs,
+    'auth-logs': slugs.authLogs,
+  }
+}
+
+/**
+ * Delete rows of `slug` created more than `days` days ago.
+ *
+ * `days <= 0` means "everything" and is only reachable from the manual
+ * admin-only endpoint. The scheduled task refuses it: a misconfigured cron
+ * that wipes the whole security journal every night is a far worse outcome
+ * than a journal that grows.
+ */
+export async function purgeOlderThan(
+  payload: Payload,
+  slug: string,
+  days: number,
+  req?: PayloadRequest,
+): Promise<number> {
+  const cutoff = days > 0 ? new Date(Date.now() - days * 86400000).toISOString() : null
+
+  const result = await dbDelete(payload, slug, {
+    where: cutoff
+      ? { createdAt: { less_than: cutoff } }
+      : { id: { exists: true } },
+    overrideAccess: true,
+    ...(req ? { req } : {}),
+  })
+
+  return Array.isArray(result?.docs) ? result.docs.length : 0
+}
+
+export interface ScheduledPurgeResult {
+  purged: Record<string, number>
+  skipped: string[]
+}
+
+/**
+ * The scheduled half of the purge. Never accepts `days <= 0`, and silently
+ * skips a journal whose collection is not registered (its feature flag is off).
+ */
+export async function runScheduledPurge(
+  payload: Payload,
+  slugs: CollectionSlugs,
+  retention: RetentionConfig | false | undefined,
+  req?: PayloadRequest,
+): Promise<ScheduledPurgeResult> {
+  if (retention === false) return { purged: {}, skipped: ['auth-logs', 'email-logs'] }
+
+  const plan: Array<[string, string, number]> = [
+    ['auth-logs', slugs.authLogs, retention?.authLogsDays ?? DEFAULT_RETENTION.authLogsDays],
+    ['email-logs', slugs.emailLogs, retention?.emailLogsDays ?? DEFAULT_RETENTION.emailLogsDays],
+  ]
+
+  const purged: Record<string, number> = {}
+  const skipped: string[] = []
+
+  for (const [name, slug, days] of plan) {
+    if (!Number.isFinite(days) || days <= 0) {
+      skipped.push(name)
+      continue
+    }
+    if (!(payload.collections as Record<string, unknown> | undefined)?.[slug]) {
+      skipped.push(name)
+      continue
+    }
+    purged[name] = await purgeOlderThan(payload, slug, days, req)
+  }
+
+  return { purged, skipped }
+}

package/src/utils/slugs.ts

@@ -58,6 +58,21 @@ export const DEFAULT_SLUGS: CollectionSlugs = {
   media: 'media',
 }
 
+/**
+ * Collections the plugin registers under a FIXED slug.
+ *
+ * Unlike everything in `CollectionSlugs`, these three hardcode their `slug`
+ * (ClientSummaries.ts, TicketCollaborators.ts, TicketFeedback.ts), so any code
+ * that reads or deletes their rows must use these literals rather than a
+ * configurable slug — otherwise an app that overrides `collectionSlugs` would
+ * address a collection that does not exist.
+ */
+export const FIXED_SLUGS = {
+  clientSummaries: 'client-summaries',
+  ticketCollaborators: 'ticket-collaborators',
+  ticketFeedback: 'ticket-feedback',
+} as const
+
 /**
  * Resolve collection slugs merging user overrides with defaults.
  */

package/src/views/BillingView/client.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useId } from 'react'
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation'
 import { DATE_LOCALE } from '../shared/dateLocale'
 import styles from '../../styles/BillingView.module.scss'
@@ -86,6 +86,12 @@ function getQuarterRange(offset: number): { from: string; to: string } {
 
 export const BillingClient: React.FC = () => {
   const { t } = useTranslation()
+  // The `<label>`s in the filter row already carry the translated text; they
+  // just were not associated with their control.
+  const fromId = useId()
+  const toId = useId()
+  const projectFilterId = useId()
+  const rateId = useId()
   const [from, setFrom] = useState(() => getMonthRange(0).from)
   const [to, setTo] = useState(() => getMonthRange(0).to)
   const [projectId, setProjectId] = useState('')
@@ -287,16 +293,16 @@ export const BillingClient: React.FC = () => {
 
         <div className={styles.filterRow}>
           <div className={styles.fieldGroup}>
-            <label className={styles.label}>{t('billing.filters.from')}</label>
-            <input type="date" value={from} onChange={(e) => setFrom(e.target.value)} className={styles.input} />
+            <label className={styles.label} htmlFor={fromId}>{t('billing.filters.from')}</label>
+            <input id={fromId} type="date" value={from} onChange={(e) => setFrom(e.target.value)} className={styles.input} />
           </div>
           <div className={styles.fieldGroup}>
-            <label className={styles.label}>{t('billing.filters.to')}</label>
-            <input type="date" value={to} onChange={(e) => setTo(e.target.value)} className={styles.input} />
+            <label className={styles.label} htmlFor={toId}>{t('billing.filters.to')}</label>
+            <input id={toId} type="date" value={to} onChange={(e) => setTo(e.target.value)} className={styles.input} />
           </div>
           <div className={styles.fieldGroup}>
-            <label className={styles.label}>{t('billing.filters.project')}</label>
-            <select value={projectId} onChange={(e) => setProjectId(e.target.value)} className={styles.select}>
+            <label className={styles.label} htmlFor={projectFilterId}>{t('billing.filters.project')}</label>
+            <select id={projectFilterId} value={projectId} onChange={(e) => setProjectId(e.target.value)} className={styles.select}>
               <option value="">{t('ticket.allProjects')}</option>
               {projects.map((p) => (
                 <option key={p.id} value={p.id}>{p.name}</option>
@@ -304,9 +310,10 @@ export const BillingClient: React.FC = () => {
             </select>
           </div>
           <div className={styles.fieldGroup}>
-            <label className={styles.label}>{t('billing.filters.hourlyRate')}</label>
+            <label className={styles.label} htmlFor={rateId}>{t('billing.filters.hourlyRate')}</label>
             <div className={styles.rateRow}>
               <input
+                id={rateId}
                 type="number"
                 value={rate}
                 onChange={(e) => setRate(Number(e.target.value))}
@@ -370,6 +377,7 @@ export const BillingClient: React.FC = () => {
                         <th className={styles.thCheckbox}>
                           <input
                             type="checkbox"
+                            aria-label={t('billing.tableCheckboxTitle')}
                             checked={group.tickets.every((t) => billedTickets.has(t.id))}
                             onChange={() => {
                               const ids = group.tickets.map((t) => t.id)
@@ -405,6 +413,7 @@ export const BillingClient: React.FC = () => {
                             <td className={styles.td} rowSpan={rowSpan} style={{ verticalAlign: 'middle' }}>
                               <input
                                 type="checkbox"
+                                aria-label={isBilled ? t('billing.markUnbilledTitle') : t('billing.markBilledTitle')}
                                 checked={isBilled}
                                 onChange={() => toggleBilled(ticket.id)}
                                 className={styles.checkbox}

package/src/views/ChatView/client.tsx

@@ -343,6 +343,7 @@ export const ChatViewClient: React.FC = () => {
               <form onSubmit={sendMessage} className={styles.composer}>
                 {cannedResponses.length > 0 && (
                   <select
+                    aria-label={t('chat.quickReply')}
                     onChange={(e) => {
                       const cr = cannedResponses.find((c) => String(c.id) === e.target.value)
                       if (cr) setInput(cr.body)
@@ -359,6 +360,7 @@ export const ChatViewClient: React.FC = () => {
                 <div className={styles.composerRow}>
                   <input
                     type="text"
+                    aria-label={t('chat.inputPlaceholder')}
                     value={input}
                     onChange={(e) => setInput(e.target.value)}
                     placeholder={t('chat.inputPlaceholder')}

package/src/views/CrmView/client.tsx

@@ -275,6 +275,7 @@ export const CrmClient: React.FC = () => {
           <div className={styles.sidebarSearch}>
             <input
               type="text"
+              aria-label={t('crm.searchLabel')}
               placeholder={t('crm.searchPlaceholder')}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -379,6 +380,7 @@ export const CrmClient: React.FC = () => {
                   </p>
                   <input
                     type="text"
+                    aria-label={t('crm.mergeTitle')}
                     value={mergeSearch}
                     onChange={(e) => setMergeSearch(e.target.value)}
                     placeholder={t('crm.mergeSearchPlaceholder')}