@consilioweb/payload-support 0.9.13 → 0.10.1

package/dist/views/TicketInboxView/client.js

@@ -4,30 +4,22 @@ import { useState, useEffect, useCallback } from 'react';
 import { useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
+import { StatusPill } from '../shared/StatusPill.js';
+import { computeSlaState, formatSlaRemaining } from '../shared/sla.js';
 import s from '../../styles/TicketInbox.module.scss';
 
-const STATUS_DOTS = {
-  open: "#22c55e",
-  waiting_client: "#eab308",
-  resolved: "#94a3b8"
-};
-const STATUS_LABEL_KEYS = {
-  open: "inbox.tabs.open",
-  waiting_client: "inbox.tabs.waiting",
-  resolved: "inbox.tabs.resolved"
-};
 const PRIORITY_COLORS = {
-  urgent: "#ef4444",
-  high: "#f97316",
-  normal: "transparent",
-  low: "transparent"
+  urgent: "var(--theme-error-500)",
+  high: "var(--theme-warning-500)",
+  normal: "var(--theme-info-500, #2a6bd8)",
+  low: "var(--theme-elevation-400)"
 };
-const CATEGORY_LABEL_KEYS = {
-  bug: "ticket.category.bug",
-  content: "ticket.category.content",
-  feature: "ticket.category.feature",
-  question: "ticket.category.question",
-  hosting: "ticket.category.hosting"
+const STATUS_VARIANT = {
+  open: "open",
+  waiting_client: "pending",
+  pending: "pending",
+  resolved: "resolved",
+  closed: "closed"
 };
 function relativeTime(dateStr) {
   const diff = Date.now() - new Date(dateStr).getTime();
@@ -47,12 +39,12 @@ const TicketInboxClient = () => {
   const [loading, setLoading] = useState(true);
   const [tab, setTab] = useState(() => {
     const urlTab = searchParams.get("tab");
-    if (urlTab && ["all", "open", "waiting_client", "resolved"].includes(urlTab)) return urlTab;
+    if (urlTab && ["all", "open", "waiting_client", "resolved", "sla_breach"].includes(urlTab)) return urlTab;
     return "all";
   });
   useEffect(() => {
     const urlTab = searchParams.get("tab");
-    if (urlTab && ["all", "open", "waiting_client", "resolved"].includes(urlTab)) {
+    if (urlTab && ["all", "open", "waiting_client", "resolved", "sla_breach"].includes(urlTab)) {
       setTab(urlTab);
     } else if (!urlTab) {
       setTab("all");
@@ -60,7 +52,7 @@ const TicketInboxClient = () => {
   }, [searchParams]);
   const [search, setSearch] = useState("");
   const [sort, setSort] = useState("-updatedAt");
-  const [counts, setCounts] = useState({ all: 0, open: 0, waiting: 0, resolved: 0 });
+  const [counts, setCounts] = useState({ all: 0, open: 0, waiting: 0, resolved: 0, breach: 0 });
   const [selectedIdx, setSelectedIdx] = useState(-1);
   const [checkedIds, setCheckedIds] = useState(/* @__PURE__ */ new Set());
   const [bulkAction, setBulkAction] = useState("");
@@ -93,8 +85,32 @@ const TicketInboxClient = () => {
     setBulkProcessing(false);
   };
   const fetchTickets = useCallback(async () => {
-    const params = [`limit=30`, `sort=${sort}`, `depth=1`, `select[id]=true`, `select[ticketNumber]=true`, `select[subject]=true`, `select[status]=true`, `select[priority]=true`, `select[category]=true`, `select[client]=true`, `select[updatedAt]=true`, `select[lastClientMessageAt]=true`, `select[lastAdminReadAt]=true`];
-    if (tab !== "all") params.push(`where[status][equals]=${tab}`);
+    const params = [
+      `limit=30`,
+      `sort=${sort}`,
+      `depth=1`,
+      `select[id]=true`,
+      `select[ticketNumber]=true`,
+      `select[subject]=true`,
+      `select[status]=true`,
+      `select[priority]=true`,
+      `select[category]=true`,
+      `select[client]=true`,
+      `select[updatedAt]=true`,
+      `select[lastClientMessageAt]=true`,
+      `select[lastAdminReadAt]=true`,
+      `select[slaFirstResponseDue]=true`,
+      `select[slaFirstResponseBreached]=true`,
+      `select[slaResolutionDue]=true`,
+      `select[slaResolutionBreached]=true`,
+      `select[firstResponseAt]=true`
+    ];
+    if (tab === "sla_breach") {
+      params.push(`where[or][0][slaFirstResponseBreached][equals]=true`);
+      params.push(`where[or][1][slaResolutionBreached][equals]=true`);
+    } else if (tab !== "all") {
+      params.push(`where[status][equals]=${tab}`);
+    }
     if (search.trim()) {
       params.push(`where[or][0][subject][contains]=${encodeURIComponent(search)}`);
       params.push(`where[or][1][ticketNumber][contains]=${encodeURIComponent(search)}`);
@@ -120,14 +136,21 @@ const TicketInboxClient = () => {
   useEffect(() => {
     const fetchCounts = async () => {
       try {
-        const [all, openRes, waiting, resolved] = await Promise.all([
+        const [all, openRes, waiting, resolved, breach] = await Promise.all([
           fetch("/api/tickets?limit=0&depth=0", { credentials: "include" }),
           fetch("/api/tickets?limit=0&depth=0&where[status][equals]=open", { credentials: "include" }),
           fetch("/api/tickets?limit=0&depth=0&where[status][equals]=waiting_client", { credentials: "include" }),
-          fetch("/api/tickets?limit=0&depth=0&where[status][equals]=resolved", { credentials: "include" })
+          fetch("/api/tickets?limit=0&depth=0&where[status][equals]=resolved", { credentials: "include" }),
+          fetch("/api/tickets?limit=0&depth=0&where[or][0][slaFirstResponseBreached][equals]=true&where[or][1][slaResolutionBreached][equals]=true", { credentials: "include" })
         ]);
-        const [a, o, w, r] = await Promise.all([all.json(), openRes.json(), waiting.json(), resolved.json()]);
-        setCounts({ all: a.totalDocs || 0, open: o.totalDocs || 0, waiting: w.totalDocs || 0, resolved: r.totalDocs || 0 });
+        const [a, o, w, r, b] = await Promise.all([all.json(), openRes.json(), waiting.json(), resolved.json(), breach.json()]);
+        setCounts({
+          all: a.totalDocs || 0,
+          open: o.totalDocs || 0,
+          waiting: w.totalDocs || 0,
+          resolved: r.totalDocs || 0,
+          breach: b.totalDocs || 0
+        });
       } catch {
       }
     };
@@ -159,11 +182,22 @@ const TicketInboxClient = () => {
     { key: "all", label: t("inbox.tabs.all"), count: counts.all },
     { key: "open", label: t("inbox.tabs.open"), count: counts.open },
     { key: "waiting_client", label: t("inbox.tabs.waiting"), count: counts.waiting },
+    { key: "sla_breach", label: t("inbox.tabs.slaBreach"), count: counts.breach, alert: true },
     { key: "resolved", label: t("inbox.tabs.resolved"), count: counts.resolved }
   ];
   return /* @__PURE__ */ jsxs("div", { className: s.page, children: [
     /* @__PURE__ */ jsxs("div", { className: s.header, children: [
-      /* @__PURE__ */ jsx("h1", { className: s.title, children: t("inbox.title") }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: s.title, children: t("inbox.title") }),
+        /* @__PURE__ */ jsxs("p", { className: s.subtitle, children: [
+          tickets.length > 0 && `${tickets.length} sur ${counts.all} \xB7 `,
+          counts.breach > 0 ? /* @__PURE__ */ jsxs("span", { className: s.subtitleBreach, children: [
+            counts.breach,
+            " SLA d\xE9pass\xE9",
+            counts.breach > 1 ? "s" : ""
+          ] }) : /* @__PURE__ */ jsx("span", { children: "Aucun SLA en alerte" })
+        ] })
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: s.headerRight, children: [
         /* @__PURE__ */ jsxs("div", { className: s.searchWrap, children: [
           /* @__PURE__ */ jsxs("svg", { className: s.searchIcon, width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
@@ -185,25 +219,26 @@ const TicketInboxClient = () => {
         /* @__PURE__ */ jsx(Link, { href: "/admin/support/new-ticket", className: s.newTicketBtn, children: t("inbox.newTicketBtn") })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: s.tabs, children: tabs.map((tk) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: `${s.tab} ${tab === tk.key ? s.tabActive : ""}`,
-        onClick: () => {
-          setTab(tk.key);
-          setSelectedIdx(-1);
+    /* @__PURE__ */ jsx("div", { className: s.tabs, role: "tablist", children: tabs.map((tk) => {
+      const isAlert = tk.alert && tk.count > 0;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          role: "tab",
+          "aria-selected": tab === tk.key,
+          className: `${s.tab} ${tab === tk.key ? s.tabActive : ""} ${isAlert ? s.tabAlert : ""}`,
+          onClick: () => {
+            setTab(tk.key);
+            setSelectedIdx(-1);
+          },
+          children: [
+            tk.label,
+            /* @__PURE__ */ jsx("span", { className: `${s.tabCount} ${isAlert ? s.tabCountAlert : ""}`, children: tk.count })
+          ]
         },
-        children: [
-          tk.label,
-          /* @__PURE__ */ jsxs("span", { className: s.tabCount, children: [
-            "(",
-            tk.count,
-            ")"
-          ] })
-        ]
-      },
-      tk.key
-    )) }),
+        tk.key
+      );
+    }) }),
     /* @__PURE__ */ jsx("div", { className: s.sortRow, children: checkedIds.size > 0 ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flex: 1 }, children: [
       /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--theme-text)" }, children: checkedIds.size > 1 ? t("inbox.selectedPlural", { count: String(checkedIds.size) }) : t("inbox.selected", { count: String(checkedIds.size) }) }),
       /* @__PURE__ */ jsx("button", { className: s.sortSelect, onClick: () => handleBulkAction("close"), disabled: bulkProcessing, children: t("inbox.closeAction") }),
@@ -233,11 +268,19 @@ const TicketInboxClient = () => {
       const displayClient = clientName ? `${clientName}${clientCompany ? `, ${clientCompany}` : ""}` : "\u2014";
       const isUnread = tk.lastClientMessageAt && (!tk.lastAdminReadAt || new Date(tk.lastClientMessageAt) > new Date(tk.lastAdminReadAt));
       const priorityColor = PRIORITY_COLORS[tk.priority] || "transparent";
+      const sla = computeSlaState(tk);
+      const isBreach = sla.state === "breach";
+      const statusVariant = STATUS_VARIANT[tk.status] || "open";
       return /* @__PURE__ */ jsxs(
         "a",
         {
           href: `/admin/support/ticket?id=${tk.id}`,
-          className: `${s.row} ${idx === selectedIdx ? s.rowSelected : ""}`,
+          className: [
+            s.row,
+            idx === selectedIdx ? s.rowSelected : "",
+            isUnread ? s.rowUnread : "",
+            isBreach ? s.rowBreach : ""
+          ].filter(Boolean).join(" "),
           onClick: (e) => {
             e.preventDefault();
             window.location.href = `/admin/support/ticket?id=${tk.id}`;
@@ -250,20 +293,36 @@ const TicketInboxClient = () => {
                 checked: checkedIds.has(tk.id),
                 onClick: (e) => e.stopPropagation(),
                 onChange: () => toggleCheck(tk.id),
-                style: { width: 14, height: 14, cursor: "pointer", accentColor: "#2563eb" }
+                className: s.rowCheck,
+                "aria-label": `S\xE9lectionner ${tk.ticketNumber}`
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: s.priorityDot,
+                style: { background: priorityColor },
+                "aria-label": `Priorit\xE9 ${tk.priority}`,
+                title: `Priorit\xE9 ${tk.priority}`
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: s.statusDot, style: { backgroundColor: STATUS_DOTS[tk.status] || "#94a3b8" } }),
-            /* @__PURE__ */ jsx("span", { className: s.statusText, children: t(STATUS_LABEL_KEYS[tk.status] || "ticket.status.open") }),
+            /* @__PURE__ */ jsx(StatusPill, { status: isBreach ? "sla-breach" : statusVariant }),
             /* @__PURE__ */ jsx("span", { className: s.ticketNum, children: tk.ticketNumber }),
             /* @__PURE__ */ jsx("span", { className: s.subject, children: tk.subject }),
             /* @__PURE__ */ jsx("span", { className: s.client, children: displayClient }),
-            tk.category ? /* @__PURE__ */ jsxs("span", { className: s.categoryChip, children: [
-              "[",
-              t(CATEGORY_LABEL_KEYS[tk.category] || "ticket.category.bug"),
-              "]"
-            ] }) : /* @__PURE__ */ jsx("span", {}),
-            /* @__PURE__ */ jsx("div", { className: s.priorityBar, style: { backgroundColor: priorityColor } }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: [
+                  s.slaCell,
+                  sla.state === "breach" ? s.slaBreach : "",
+                  sla.state === "warn" ? s.slaWarn : "",
+                  sla.state === "ok" ? s.slaOk : ""
+                ].filter(Boolean).join(" "),
+                title: sla.due ? new Date(sla.due).toLocaleString("fr-FR") : "",
+                children: formatSlaRemaining(sla.remainingMs)
+              }
+            ),
             /* @__PURE__ */ jsx("span", { className: s.timeAgo, children: relativeTime(tk.updatedAt) }),
             isUnread ? /* @__PURE__ */ jsx("div", { className: s.unreadDot }) : /* @__PURE__ */ jsx("span", {})
           ]

package/dist/views/shared/StatusPill.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var s = require('./StatusPill.module.scss');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var s__default = /*#__PURE__*/_interopDefault(s);
+
+const VARIANT_MAP = {
+  open: { cls: s__default.default.open, defaultLabel: "Ouvert" },
+  pending: { cls: s__default.default.pending, defaultLabel: "En attente" },
+  waiting_client: { cls: s__default.default.pending, defaultLabel: "Attente client" },
+  resolved: { cls: s__default.default.resolved, defaultLabel: "R\xE9solu" },
+  closed: { cls: s__default.default.neutral, defaultLabel: "Ferm\xE9" },
+  escalated: { cls: s__default.default.escalated, defaultLabel: "Escalad\xE9" },
+  "sla-breach": { cls: s__default.default.breach, defaultLabel: "SLA d\xE9pass\xE9" }
+};
+const StatusPill = ({ status, label, className }) => {
+  const v = VARIANT_MAP[status] || VARIANT_MAP.open;
+  const text = label ?? v.defaultLabel;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: [s__default.default.pill, v.cls, className].filter(Boolean).join(" "),
+      role: "status",
+      "aria-label": `Statut : ${text}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.dot, "aria-hidden": true }),
+        text
+      ]
+    }
+  );
+};
+
+exports.StatusPill = StatusPill;

package/dist/views/shared/StatusPill.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import s from './StatusPill.module.scss';
+
+const VARIANT_MAP = {
+  open: { cls: s.open, defaultLabel: "Ouvert" },
+  pending: { cls: s.pending, defaultLabel: "En attente" },
+  waiting_client: { cls: s.pending, defaultLabel: "Attente client" },
+  resolved: { cls: s.resolved, defaultLabel: "R\xE9solu" },
+  closed: { cls: s.neutral, defaultLabel: "Ferm\xE9" },
+  escalated: { cls: s.escalated, defaultLabel: "Escalad\xE9" },
+  "sla-breach": { cls: s.breach, defaultLabel: "SLA d\xE9pass\xE9" }
+};
+const StatusPill = ({ status, label, className }) => {
+  const v = VARIANT_MAP[status] || VARIANT_MAP.open;
+  const text = label ?? v.defaultLabel;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: [s.pill, v.cls, className].filter(Boolean).join(" "),
+      role: "status",
+      "aria-label": `Statut : ${text}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: s.dot, "aria-hidden": true }),
+        text
+      ]
+    }
+  );
+};
+
+export { StatusPill };

package/dist/views/shared/StatusPill.module.scss

@@ -0,0 +1,66 @@
+// StatusPill — sémantique unique des statuts ticket
+// Tous les fonds/couleurs sont mappés sur les --theme-* Payload natifs
+// via color-mix() pour rester cohérent en light/dark.
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 22px;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  line-height: 1;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+// ---------- Variants ----------
+// Each variant uses color-mix on Payload's theme tokens so dark/light just works.
+
+.open {
+  background: color-mix(in srgb, var(--theme-success-500, #2dbf86) 12%, transparent);
+  color: var(--theme-success-500, #16a34a);
+}
+
+.pending {
+  background: color-mix(in srgb, var(--theme-warning-500, #e9a23a) 14%, transparent);
+  color: var(--theme-warning-500, #c97a0a);
+}
+
+.resolved {
+  background: color-mix(in srgb, var(--theme-elevation-500, #7a7a7a) 14%, transparent);
+  color: var(--theme-elevation-600, #5e5e5e);
+}
+
+.neutral {
+  background: var(--theme-elevation-100, #f3f3f3);
+  color: var(--theme-elevation-600, #5e5e5e);
+}
+
+.escalated {
+  background: color-mix(in srgb, var(--theme-error-500, #c4392c) 14%, transparent);
+  color: var(--theme-error-500, #c4392c);
+}
+
+.breach {
+  background: color-mix(in srgb, var(--theme-error-500, #c4392c) 14%, transparent);
+  color: var(--theme-error-500, #c4392c);
+  border-color: color-mix(in srgb, var(--theme-error-500, #c4392c) 30%, transparent);
+}
+
+[data-theme='dark'] {
+  .open     { color: var(--theme-success-500, #2dbf86); }
+  .pending  { color: var(--theme-warning-500, #e9a23a); }
+  .escalated, .breach { color: var(--theme-error-500, #ed5f51); }
+}

package/dist/views/shared/index.cjs

@@ -5,6 +5,8 @@ var adminTokens = require('./adminTokens');
 var AdminViewHeader = require('./AdminViewHeader');
 var Skeleton = require('./Skeleton');
 var config = require('./config');
+var StatusPill = require('./StatusPill');
+var sla = require('./sla');
 
 
 
@@ -56,3 +58,15 @@ Object.defineProperty(exports, "saveFeatures", {
   enumerable: true,
   get: function () { return config.saveFeatures; }
 });
+Object.defineProperty(exports, "StatusPill", {
+  enumerable: true,
+  get: function () { return StatusPill.StatusPill; }
+});
+Object.defineProperty(exports, "computeSlaState", {
+  enumerable: true,
+  get: function () { return sla.computeSlaState; }
+});
+Object.defineProperty(exports, "formatSlaRemaining", {
+  enumerable: true,
+  get: function () { return sla.formatSlaRemaining; }
+});

package/dist/views/shared/index.js

@@ -3,3 +3,5 @@ export { V, btnStyle } from './adminTokens.js';
 export { AdminViewHeader } from './AdminViewHeader.js';
 export { Skeleton, SkeletonCard, SkeletonDashboard, SkeletonTable, SkeletonText } from './Skeleton.js';
 export { DEFAULT_FEATURES, getFeatures, saveFeatures } from './config.js';
+export { StatusPill } from './StatusPill.js';
+export { computeSlaState, formatSlaRemaining } from './sla.js';

package/dist/views/shared/sla.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+const HOUR_MS = 36e5;
+const MINUTE_MS = 6e4;
+function computeSlaState(t, now = /* @__PURE__ */ new Date()) {
+  const hasFirstResponse = !!t.firstResponseAt;
+  const dueRaw = hasFirstResponse ? t.slaResolutionDue : t.slaFirstResponseDue;
+  const breached = hasFirstResponse ? !!t.slaResolutionBreached : !!t.slaFirstResponseBreached;
+  if (!dueRaw) return { state: "none", remainingMs: null, due: null };
+  const dueDate = new Date(dueRaw);
+  if (Number.isNaN(dueDate.getTime())) return { state: "none", remainingMs: null, due: null };
+  const remaining = dueDate.getTime() - now.getTime();
+  if (breached || remaining < 0) {
+    return { state: "breach", remainingMs: remaining, due: dueRaw };
+  }
+  if (remaining < HOUR_MS) {
+    return { state: "warn", remainingMs: remaining, due: dueRaw };
+  }
+  return { state: "ok", remainingMs: remaining, due: dueRaw };
+}
+function formatSlaRemaining(remainingMs) {
+  if (remainingMs == null) return "\u2014";
+  const abs = Math.abs(remainingMs);
+  const sign = remainingMs < 0 ? "\u2212" : "";
+  if (abs < HOUR_MS) {
+    const m2 = Math.floor(abs / MINUTE_MS);
+    return `${sign}${m2}m`;
+  }
+  const h = Math.floor(abs / HOUR_MS);
+  const m = Math.floor(abs % HOUR_MS / MINUTE_MS);
+  if (h < 24) return `${sign}${h}h${m > 0 ? ` ${String(m).padStart(2, "0")}` : ""}`;
+  const d = Math.floor(h / 24);
+  return `${sign}${d}j`;
+}
+
+exports.computeSlaState = computeSlaState;
+exports.formatSlaRemaining = formatSlaRemaining;

package/dist/views/shared/sla.js

@@ -0,0 +1,34 @@
+const HOUR_MS = 36e5;
+const MINUTE_MS = 6e4;
+function computeSlaState(t, now = /* @__PURE__ */ new Date()) {
+  const hasFirstResponse = !!t.firstResponseAt;
+  const dueRaw = hasFirstResponse ? t.slaResolutionDue : t.slaFirstResponseDue;
+  const breached = hasFirstResponse ? !!t.slaResolutionBreached : !!t.slaFirstResponseBreached;
+  if (!dueRaw) return { state: "none", remainingMs: null, due: null };
+  const dueDate = new Date(dueRaw);
+  if (Number.isNaN(dueDate.getTime())) return { state: "none", remainingMs: null, due: null };
+  const remaining = dueDate.getTime() - now.getTime();
+  if (breached || remaining < 0) {
+    return { state: "breach", remainingMs: remaining, due: dueRaw };
+  }
+  if (remaining < HOUR_MS) {
+    return { state: "warn", remainingMs: remaining, due: dueRaw };
+  }
+  return { state: "ok", remainingMs: remaining, due: dueRaw };
+}
+function formatSlaRemaining(remainingMs) {
+  if (remainingMs == null) return "\u2014";
+  const abs = Math.abs(remainingMs);
+  const sign = remainingMs < 0 ? "\u2212" : "";
+  if (abs < HOUR_MS) {
+    const m2 = Math.floor(abs / MINUTE_MS);
+    return `${sign}${m2}m`;
+  }
+  const h = Math.floor(abs / HOUR_MS);
+  const m = Math.floor(abs % HOUR_MS / MINUTE_MS);
+  if (h < 24) return `${sign}${h}h${m > 0 ? ` ${String(m).padStart(2, "0")}` : ""}`;
+  const d = Math.floor(h / 24);
+  return `${sign}${d}j`;
+}
+
+export { computeSlaState, formatSlaRemaining };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consilioweb/payload-support",
-  "version": "0.9.13",
+  "version": "0.10.1",
   "description": "Payload CMS plugin — professional support & ticketing system with AI, SLA, time tracking, live chat, and more",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/TicketConversation/locales/en.json

@@ -108,8 +108,16 @@
       "all": "All",
       "open": "Open",
       "waiting": "Waiting",
+      "slaBreach": "SLA breached",
       "resolved": "Resolved"
     },
+    "slaColumn": "SLA",
+    "slaBanner": {
+      "breached": "SLA breached",
+      "responseAwaitedFor": "Response awaited for {{duration}}",
+      "target": "Target: {{target}}",
+      "escalate": "Escalate"
+    },
     "sort": {
       "newest": "Sort by: Newest",
       "oldest": "Sort by: Oldest",

package/src/components/TicketConversation/locales/fr.json

@@ -108,7 +108,15 @@
       "all": "Tous",
       "open": "Ouverts",
       "waiting": "Attente",
-      "resolved": "Resolus"
+      "slaBreach": "SLA dépassé",
+      "resolved": "Résolus"
+    },
+    "slaColumn": "SLA",
+    "slaBanner": {
+      "breached": "SLA dépassé",
+      "responseAwaitedFor": "Réponse attendue depuis {{duration}}",
+      "target": "Cible : {{target}}",
+      "escalate": "Escalader"
     },
     "sort": {
       "newest": "Tri : Recents",