@consilioweb/payload-support 0.9.12 → 0.10.0

package/dist/views/TicketInboxView/client.cjs

@@ -5,6 +5,7 @@ var react = require('react');
 var navigation = require('next/navigation');
 var Link = require('next/link');
 var useTranslation = require('../../components/TicketConversation/hooks/useTranslation');
+var shared = require('../shared');
 var s = require('../../styles/TicketInbox.module.scss');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,28 +13,18 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var Link__default = /*#__PURE__*/_interopDefault(Link);
 var s__default = /*#__PURE__*/_interopDefault(s);
 
-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();
@@ -53,12 +44,12 @@ const TicketInboxClient = () => {
   const [loading, setLoading] = react.useState(true);
   const [tab, setTab] = react.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";
   });
   react.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");
@@ -66,7 +57,7 @@ const TicketInboxClient = () => {
   }, [searchParams]);
   const [search, setSearch] = react.useState("");
   const [sort, setSort] = react.useState("-updatedAt");
-  const [counts, setCounts] = react.useState({ all: 0, open: 0, waiting: 0, resolved: 0 });
+  const [counts, setCounts] = react.useState({ all: 0, open: 0, waiting: 0, resolved: 0, breach: 0 });
   const [selectedIdx, setSelectedIdx] = react.useState(-1);
   const [checkedIds, setCheckedIds] = react.useState(/* @__PURE__ */ new Set());
   const [bulkAction, setBulkAction] = react.useState("");
@@ -99,8 +90,32 @@ const TicketInboxClient = () => {
     setBulkProcessing(false);
   };
   const fetchTickets = react.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)}`);
@@ -126,14 +141,21 @@ const TicketInboxClient = () => {
   react.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 {
       }
     };
@@ -165,11 +187,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__ */ jsxRuntime.jsxs("div", { className: s__default.default.page, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: s__default.default.title, children: t("inbox.title") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: s__default.default.title, children: t("inbox.title") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: s__default.default.subtitle, children: [
+          tickets.length > 0 && `${tickets.length} sur ${counts.all} \xB7 `,
+          counts.breach > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.subtitleBreach, children: [
+            counts.breach,
+            " SLA d\xE9pass\xE9",
+            counts.breach > 1 ? "s" : ""
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Aucun SLA en alerte" })
+        ] })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.headerRight, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.searchWrap, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: s__default.default.searchIcon, width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
@@ -191,25 +224,26 @@ const TicketInboxClient = () => {
         /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: "/admin/support/new-ticket", className: s__default.default.newTicketBtn, children: t("inbox.newTicketBtn") })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.tabs, children: tabs.map((tk) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        className: `${s__default.default.tab} ${tab === tk.key ? s__default.default.tabActive : ""}`,
-        onClick: () => {
-          setTab(tk.key);
-          setSelectedIdx(-1);
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.tabs, role: "tablist", children: tabs.map((tk) => {
+      const isAlert = tk.alert && tk.count > 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          role: "tab",
+          "aria-selected": tab === tk.key,
+          className: `${s__default.default.tab} ${tab === tk.key ? s__default.default.tabActive : ""} ${isAlert ? s__default.default.tabAlert : ""}`,
+          onClick: () => {
+            setTab(tk.key);
+            setSelectedIdx(-1);
+          },
+          children: [
+            tk.label,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${s__default.default.tabCount} ${isAlert ? s__default.default.tabCountAlert : ""}`, children: tk.count })
+          ]
         },
-        children: [
-          tk.label,
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.tabCount, children: [
-            "(",
-            tk.count,
-            ")"
-          ] })
-        ]
-      },
-      tk.key
-    )) }),
+        tk.key
+      );
+    }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sortRow, children: checkedIds.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flex: 1 }, children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("button", { className: s__default.default.sortSelect, onClick: () => handleBulkAction("close"), disabled: bulkProcessing, children: t("inbox.closeAction") }),
@@ -239,11 +273,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 = shared.computeSlaState(tk);
+      const isBreach = sla.state === "breach";
+      const statusVariant = STATUS_VARIANT[tk.status] || "open";
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "a",
         {
           href: `/admin/support/ticket?id=${tk.id}`,
-          className: `${s__default.default.row} ${idx === selectedIdx ? s__default.default.rowSelected : ""}`,
+          className: [
+            s__default.default.row,
+            idx === selectedIdx ? s__default.default.rowSelected : "",
+            isUnread ? s__default.default.rowUnread : "",
+            isBreach ? s__default.default.rowBreach : ""
+          ].filter(Boolean).join(" "),
           onClick: (e) => {
             e.preventDefault();
             window.location.href = `/admin/support/ticket?id=${tk.id}`;
@@ -256,20 +298,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__default.default.rowCheck,
+                "aria-label": `S\xE9lectionner ${tk.ticketNumber}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: s__default.default.priorityDot,
+                style: { background: priorityColor },
+                "aria-label": `Priorit\xE9 ${tk.priority}`,
+                title: `Priorit\xE9 ${tk.priority}`
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.statusDot, style: { backgroundColor: STATUS_DOTS[tk.status] || "#94a3b8" } }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.statusText, children: t(STATUS_LABEL_KEYS[tk.status] || "ticket.status.open") }),
+            /* @__PURE__ */ jsxRuntime.jsx(shared.StatusPill, { status: isBreach ? "sla-breach" : statusVariant }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.ticketNum, children: tk.ticketNumber }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.subject, children: tk.subject }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.client, children: displayClient }),
-            tk.category ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.categoryChip, children: [
-              "[",
-              t(CATEGORY_LABEL_KEYS[tk.category] || "ticket.category.bug"),
-              "]"
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.priorityBar, style: { backgroundColor: priorityColor } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: [
+                  s__default.default.slaCell,
+                  sla.state === "breach" ? s__default.default.slaBreach : "",
+                  sla.state === "warn" ? s__default.default.slaWarn : "",
+                  sla.state === "ok" ? s__default.default.slaOk : ""
+                ].filter(Boolean).join(" "),
+                title: sla.due ? new Date(sla.due).toLocaleString("fr-FR") : "",
+                children: shared.formatSlaRemaining(sla.remainingMs)
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.timeAgo, children: relativeTime(tk.updatedAt) }),
             isUnread ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.unreadDot }) : /* @__PURE__ */ jsxRuntime.jsx("span", {})
           ]

package/dist/views/TicketInboxView/client.js

@@ -4,30 +4,21 @@ 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 { computeSlaState, StatusPill, formatSlaRemaining } from '../shared.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 +38,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 +51,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 +84,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 +135,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 +181,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 +218,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 +267,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 +292,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 };