@consilioweb/payload-support 0.8.1 → 0.9.4

package/dist/views/EmailTrackingView/client.cjs

@@ -3,15 +3,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var useTranslation = require('../../components/TicketConversation/hooks/useTranslation');
+var s = require('../../styles/EmailTracking.module.scss');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var s__default = /*#__PURE__*/_interopDefault(s);
 
 const STATUS_CFG = {
-  success: { key: "emailTracking.status.success", bg: "#dcfce7", color: "#16a34a" },
-  error: { key: "emailTracking.status.error", bg: "#fef2f2", color: "#dc2626" },
-  ignored: { key: "emailTracking.status.ignored", bg: "#f3f4f6", color: "#6b7280" }
+  success: { label: "Succ\xE8s", bg: "#dcfce7", color: "#16a34a" },
+  error: { label: "Erreur", bg: "#fef2f2", color: "#dc2626" },
+  ignored: { label: "Ignor\xE9", bg: "#f3f4f6", color: "#6b7280" }
 };
 function fmtDate(d) {
   return new Date(d).toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "2-digit", hour: "2-digit", minute: "2-digit" });
@@ -28,12 +30,12 @@ const EmailTrackingClient = () => {
   const [page, setPage] = React.useState(1);
   const [hasMore, setHasMore] = React.useState(false);
   const [totalDocs, setTotalDocs] = React.useState(0);
+  const LIMIT = 30;
   const fetchStats = React.useCallback(async () => {
     try {
       const r = await fetch(`/api/support/email-stats?days=${dateRange}`);
       if (r.ok) setStats(await r.json());
-    } catch (err) {
-      console.warn("[support] fetchStats error:", err);
+    } catch {
     }
   }, [dateRange]);
   const fetchLogs = React.useCallback(async () => {
@@ -44,15 +46,14 @@ const EmailTrackingClient = () => {
       where.push(`where[or][0][recipientEmail][contains]=${encodeURIComponent(search)}`, `where[or][1][subject][contains]=${encodeURIComponent(search)}`);
     }
     try {
-      const r = await fetch(`/api/email-logs?${where.join("&")}&sort=-createdAt&limit=30&page=${page}&depth=0`);
+      const r = await fetch(`/api/email-logs?${where.join("&")}&sort=-createdAt&limit=${LIMIT}&page=${page}&depth=0`);
       if (r.ok) {
         const d = await r.json();
         setLogs(d.docs);
         setHasMore(d.hasNextPage);
         setTotalDocs(d.totalDocs);
       }
-    } catch (err) {
-      console.warn("[support] fetchLogs error:", err);
+    } catch {
     }
     setLoading(false);
   }, [dateRange, tab, search, page]);
@@ -64,75 +65,85 @@ const EmailTrackingClient = () => {
     fetchStats();
     fetchLogs();
   }, [fetchStats, fetchLogs]);
-  const S = {
-    page: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" },
-    statGrid: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 20 },
-    statCard: { padding: "12px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-150)" },
-    statLabel: { fontSize: 11, color: "var(--theme-elevation-500)" },
-    statValue: { fontSize: 22, fontWeight: 700, color: "var(--theme-text)" },
-    filters: { display: "flex", gap: 12, alignItems: "center", marginBottom: 16, flexWrap: "wrap" },
-    tab: { padding: "4px 10px", borderRadius: 6, border: "none", background: "none", cursor: "pointer", fontSize: 12, color: "var(--theme-elevation-500)" },
-    tabActive: { background: "var(--theme-elevation-100)", fontWeight: 700, color: "var(--theme-text)" },
-    dateBtn: { padding: "4px 8px", borderRadius: 4, border: "1px solid var(--theme-elevation-200)", fontSize: 11, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
-    dateBtnActive: { background: "#2563eb", color: "#fff", borderColor: "#2563eb" },
-    table: { width: "100%", borderCollapse: "collapse", fontSize: 13 },
-    th: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" },
-    td: { padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-100)" },
-    badge: { padding: "2px 6px", borderRadius: 4, fontSize: 11, fontWeight: 600 },
-    btn: { padding: "4px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 11, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)" }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.page, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: 22, fontWeight: 700, marginBottom: 16, color: "var(--theme-text)" }, children: t("emailTracking.title") }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.statGrid, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.statCard, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.statLabel, children: t("emailTracking.stats.emailsSent") }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.statValue, children: stats?.total ?? "--" })
+  const tabsList = [
+    { key: "all", label: t("emailTracking.tabs.all"), count: stats?.total },
+    { key: "success", label: t("emailTracking.tabs.success"), count: stats?.success },
+    { key: "error", label: t("emailTracking.tabs.errors"), count: stats?.errors },
+    { key: "ignored", label: t("emailTracking.tabs.ignored"), count: stats?.ignored }
+  ];
+  if (loading && !stats) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.loading, children: t("common.loading") });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.page, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: s__default.default.title, children: t("emailTracking.title") }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.statGrid, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.statCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.statLabel, children: t("emailTracking.stats.emailsSent") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.statValue, children: stats?.total ?? "\u2014" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.statCard, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.statLabel, children: t("emailTracking.stats.successRate") }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.statValue, children: stats ? `${stats.successRate}%` : "--" })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.statCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.statLabel, children: t("emailTracking.stats.successRate") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.statValue, children: [
+          stats ? `${stats.successRate}` : "\u2014",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.statUnit, children: "%" })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.statCard, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.statLabel, children: t("emailTracking.stats.errors") }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.statValue, children: stats?.errors ?? "--" })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.statCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.statLabel, children: t("emailTracking.stats.errors") }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.statValue, children: stats?.errors ?? "\u2014" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.statCard, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.statLabel, children: t("emailTracking.stats.avgTime") }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.statValue, children: stats ? `${stats.avgProcessingTime}ms` : "--" })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.statCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.statLabel, children: t("emailTracking.stats.avgTime") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.statValue, children: [
+          stats ? stats.avgProcessingTime : "\u2014",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.statUnit, children: "ms" })
+        ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.filters, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: ["all", "success", "error", "ignored"].map((st) => /* @__PURE__ */ jsxRuntime.jsx("button", { style: { ...S.tab, ...tab === st ? S.tabActive : {} }, onClick: () => setTab(st), children: t(`emailTracking.tabs.${st === "error" ? "errors" : st}`) }, st)) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 4 }, children: [7, 30, 90].map((v) => /* @__PURE__ */ jsxRuntime.jsxs("button", { style: { ...S.dateBtn, ...dateRange === v ? S.dateBtnActive : {} }, onClick: () => setDateRange(v), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.filters, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.tabs, children: tabsList.map((t2) => /* @__PURE__ */ jsxRuntime.jsxs("button", { className: `${s__default.default.tab} ${tab === t2.key ? s__default.default.tabActive : ""}`, onClick: () => setTab(t2.key), children: [
+        t2.label,
+        " ",
+        typeof t2.count === "number" && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { marginLeft: 4, opacity: 0.6 }, children: [
+          "(",
+          t2.count,
+          ")"
+        ] })
+      ] }, t2.key)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.dateRangeGroup, children: [7, 30, 90].map((v) => /* @__PURE__ */ jsxRuntime.jsxs("button", { className: `${s__default.default.dateRangeBtn} ${dateRange === v ? s__default.default.dateRangeActive : ""}`, onClick: () => setDateRange(v), children: [
         v,
         "j"
       ] }, v)) }),
-      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", placeholder: t("emailTracking.searchPlaceholder"), value: search, onChange: (e) => setSearch(e.target.value), style: { padding: "6px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" } })
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", className: s__default.default.searchInput, placeholder: t("emailTracking.searchPlaceholder"), value: search, onChange: (e) => setSearch(e.target.value) })
     ] }),
-    loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("common.loading") }) : logs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("emailTracking.noLogs") }) : /* @__PURE__ */ jsxRuntime.jsxs("table", { style: S.table, children: [
+    logs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.empty, children: t("emailTracking.noLogs") }) : /* @__PURE__ */ jsxRuntime.jsxs("table", { className: s__default.default.table, children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.date") }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.recipient") }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.subject") }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.ticket") }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.status") }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.action") }),
-        /* @__PURE__ */ jsxRuntime.jsx("th", { style: { ...S.th, textAlign: "right" }, children: t("emailTracking.tableHeaders.time") })
+        /* @__PURE__ */ jsxRuntime.jsx("th", { children: t("emailTracking.tableHeaders.date") }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { children: t("emailTracking.tableHeaders.recipient") }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { children: t("emailTracking.tableHeaders.subject") }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { children: t("emailTracking.tableHeaders.ticket") }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { children: t("emailTracking.tableHeaders.status") }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { children: t("emailTracking.tableHeaders.action") }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { style: { textAlign: "right" }, children: t("emailTracking.tableHeaders.time") })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: logs.map((log) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("tr", { onClick: () => log.status === "error" && log.errorMessage ? setExpandedRow(expandedRow === log.id ? null : log.id) : null, style: { cursor: log.status === "error" ? "pointer" : "default" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...S.td, fontSize: 12, whiteSpace: "nowrap" }, children: fmtDate(log.createdAt) }),
-          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...S.td, maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: log.recipientEmail || "--" }),
-          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...S.td, maxWidth: 250, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: log.subject || "--" }),
-          /* @__PURE__ */ jsxRuntime.jsx("td", { style: S.td, children: log.ticketNumber || "--" }),
-          /* @__PURE__ */ jsxRuntime.jsx("td", { style: S.td, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...S.badge, background: STATUS_CFG[log.status]?.bg, color: STATUS_CFG[log.status]?.color }, children: STATUS_CFG[log.status]?.key ? t(STATUS_CFG[log.status].key) : log.status }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...S.td, fontSize: 12 }, children: log.action || "--" }),
-          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...S.td, textAlign: "right" }, children: log.processingTimeMs != null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontFamily: "monospace", fontSize: 12, color: log.processingTimeMs > 2e3 ? "#dc2626" : "#16a34a" }, children: [
-            log.processingTimeMs,
-            "ms"
-          ] }) : "--" })
+        /* @__PURE__ */ jsxRuntime.jsxs("tr", { onClick: () => log.status === "error" && log.errorMessage ? setExpandedRow(expandedRow === log.id ? null : log.id) : null, style: { cursor: log.status === "error" && log.errorMessage ? "pointer" : "default" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: fmtDate(log.createdAt) }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, title: log.recipientEmail, children: log.recipientEmail || "\u2014" }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { maxWidth: 250, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, title: log.subject, children: log.subject || "\u2014" }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: log.ticketNumber ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.ticketLink, children: log.ticketNumber }) : "\u2014" }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.statusBadge, style: { background: STATUS_CFG[log.status]?.bg, color: STATUS_CFG[log.status]?.color }, children: STATUS_CFG[log.status]?.label || log.status }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { fontSize: 12 }, children: log.action || "\u2014" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("td", { style: { textAlign: "right" }, children: [
+            log.processingTimeMs != null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${s__default.default.processingTime} ${log.processingTimeMs > 2e3 ? s__default.default.timeSlow : log.processingTimeMs > 500 ? s__default.default.timeMedium : s__default.default.timeFast}`, children: [
+              log.processingTimeMs,
+              "ms"
+            ] }) : "\u2014",
+            log.status === "error" && log.errorMessage && /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.expandBtn, onClick: (e) => {
+              e.stopPropagation();
+              setExpandedRow(expandedRow === log.id ? null : log.id);
+            }, children: expandedRow === log.id ? "\u25B4" : "\u25BE" })
+          ] })
         ] }),
-        expandedRow === log.id && log.errorMessage && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "8px 12px", background: "#fef2f2", borderRadius: 6, fontSize: 12, color: "#dc2626" }, children: [
+        expandedRow === log.id && log.errorMessage && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.errorDetail, children: [
           "Erreur",
           log.httpStatus ? ` (HTTP ${log.httpStatus})` : "",
           ": ",
@@ -140,18 +151,18 @@ const EmailTrackingClient = () => {
         ] }) }) })
       ] }, log.id)) })
     ] }),
-    totalDocs > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "center", gap: 12, marginTop: 16, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { style: S.btn, onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1, children: t("common.previous") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 12, color: "var(--theme-elevation-500)" }, children: [
+    totalDocs > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.pagination, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.pageBtn, onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1, children: t("common.previous") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 12, color: "var(--theme-elevation-500)", alignSelf: "center" }, children: [
         t("common.page"),
         " ",
         page,
-        " -- ",
+        " \u2014 ",
         totalDocs,
         " ",
         t("common.results")
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { style: S.btn, onClick: () => setPage((p) => p + 1), disabled: !hasMore, children: t("common.next") })
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.pageBtn, onClick: () => setPage((p) => p + 1), disabled: !hasMore, children: t("common.next") })
     ] })
   ] });
 };

package/dist/views/EmailTrackingView/client.js

@@ -1,12 +1,13 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
+import s from '../../styles/EmailTracking.module.scss';
 
 const STATUS_CFG = {
-  success: { key: "emailTracking.status.success", bg: "#dcfce7", color: "#16a34a" },
-  error: { key: "emailTracking.status.error", bg: "#fef2f2", color: "#dc2626" },
-  ignored: { key: "emailTracking.status.ignored", bg: "#f3f4f6", color: "#6b7280" }
+  success: { label: "Succ\xE8s", bg: "#dcfce7", color: "#16a34a" },
+  error: { label: "Erreur", bg: "#fef2f2", color: "#dc2626" },
+  ignored: { label: "Ignor\xE9", bg: "#f3f4f6", color: "#6b7280" }
 };
 function fmtDate(d) {
   return new Date(d).toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "2-digit", hour: "2-digit", minute: "2-digit" });
@@ -23,12 +24,12 @@ const EmailTrackingClient = () => {
   const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(false);
   const [totalDocs, setTotalDocs] = useState(0);
+  const LIMIT = 30;
   const fetchStats = useCallback(async () => {
     try {
       const r = await fetch(`/api/support/email-stats?days=${dateRange}`);
       if (r.ok) setStats(await r.json());
-    } catch (err) {
-      console.warn("[support] fetchStats error:", err);
+    } catch {
     }
   }, [dateRange]);
   const fetchLogs = useCallback(async () => {
@@ -39,15 +40,14 @@ const EmailTrackingClient = () => {
       where.push(`where[or][0][recipientEmail][contains]=${encodeURIComponent(search)}`, `where[or][1][subject][contains]=${encodeURIComponent(search)}`);
     }
     try {
-      const r = await fetch(`/api/email-logs?${where.join("&")}&sort=-createdAt&limit=30&page=${page}&depth=0`);
+      const r = await fetch(`/api/email-logs?${where.join("&")}&sort=-createdAt&limit=${LIMIT}&page=${page}&depth=0`);
       if (r.ok) {
         const d = await r.json();
         setLogs(d.docs);
         setHasMore(d.hasNextPage);
         setTotalDocs(d.totalDocs);
       }
-    } catch (err) {
-      console.warn("[support] fetchLogs error:", err);
+    } catch {
     }
     setLoading(false);
   }, [dateRange, tab, search, page]);
@@ -59,75 +59,85 @@ const EmailTrackingClient = () => {
     fetchStats();
     fetchLogs();
   }, [fetchStats, fetchLogs]);
-  const S = {
-    page: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" },
-    statGrid: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 20 },
-    statCard: { padding: "12px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-150)" },
-    statLabel: { fontSize: 11, color: "var(--theme-elevation-500)" },
-    statValue: { fontSize: 22, fontWeight: 700, color: "var(--theme-text)" },
-    filters: { display: "flex", gap: 12, alignItems: "center", marginBottom: 16, flexWrap: "wrap" },
-    tab: { padding: "4px 10px", borderRadius: 6, border: "none", background: "none", cursor: "pointer", fontSize: 12, color: "var(--theme-elevation-500)" },
-    tabActive: { background: "var(--theme-elevation-100)", fontWeight: 700, color: "var(--theme-text)" },
-    dateBtn: { padding: "4px 8px", borderRadius: 4, border: "1px solid var(--theme-elevation-200)", fontSize: 11, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
-    dateBtnActive: { background: "#2563eb", color: "#fff", borderColor: "#2563eb" },
-    table: { width: "100%", borderCollapse: "collapse", fontSize: 13 },
-    th: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" },
-    td: { padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-100)" },
-    badge: { padding: "2px 6px", borderRadius: 4, fontSize: 11, fontWeight: 600 },
-    btn: { padding: "4px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 11, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)" }
-  };
-  return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
-    /* @__PURE__ */ jsx("h1", { style: { fontSize: 22, fontWeight: 700, marginBottom: 16, color: "var(--theme-text)" }, children: t("emailTracking.title") }),
-    /* @__PURE__ */ jsxs("div", { style: S.statGrid, children: [
-      /* @__PURE__ */ jsxs("div", { style: S.statCard, children: [
-        /* @__PURE__ */ jsx("div", { style: S.statLabel, children: t("emailTracking.stats.emailsSent") }),
-        /* @__PURE__ */ jsx("div", { style: S.statValue, children: stats?.total ?? "--" })
+  const tabsList = [
+    { key: "all", label: t("emailTracking.tabs.all"), count: stats?.total },
+    { key: "success", label: t("emailTracking.tabs.success"), count: stats?.success },
+    { key: "error", label: t("emailTracking.tabs.errors"), count: stats?.errors },
+    { key: "ignored", label: t("emailTracking.tabs.ignored"), count: stats?.ignored }
+  ];
+  if (loading && !stats) return /* @__PURE__ */ jsx("div", { className: s.loading, children: t("common.loading") });
+  return /* @__PURE__ */ jsxs("div", { className: s.page, children: [
+    /* @__PURE__ */ jsx("div", { className: s.header, children: /* @__PURE__ */ jsx("h1", { className: s.title, children: t("emailTracking.title") }) }),
+    /* @__PURE__ */ jsxs("div", { className: s.statGrid, children: [
+      /* @__PURE__ */ jsxs("div", { className: s.statCard, children: [
+        /* @__PURE__ */ jsx("div", { className: s.statLabel, children: t("emailTracking.stats.emailsSent") }),
+        /* @__PURE__ */ jsx("div", { className: s.statValue, children: stats?.total ?? "\u2014" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.statCard, children: [
-        /* @__PURE__ */ jsx("div", { style: S.statLabel, children: t("emailTracking.stats.successRate") }),
-        /* @__PURE__ */ jsx("div", { style: S.statValue, children: stats ? `${stats.successRate}%` : "--" })
+      /* @__PURE__ */ jsxs("div", { className: s.statCard, children: [
+        /* @__PURE__ */ jsx("div", { className: s.statLabel, children: t("emailTracking.stats.successRate") }),
+        /* @__PURE__ */ jsxs("div", { className: s.statValue, children: [
+          stats ? `${stats.successRate}` : "\u2014",
+          /* @__PURE__ */ jsx("span", { className: s.statUnit, children: "%" })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.statCard, children: [
-        /* @__PURE__ */ jsx("div", { style: S.statLabel, children: t("emailTracking.stats.errors") }),
-        /* @__PURE__ */ jsx("div", { style: S.statValue, children: stats?.errors ?? "--" })
+      /* @__PURE__ */ jsxs("div", { className: s.statCard, children: [
+        /* @__PURE__ */ jsx("div", { className: s.statLabel, children: t("emailTracking.stats.errors") }),
+        /* @__PURE__ */ jsx("div", { className: s.statValue, children: stats?.errors ?? "\u2014" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.statCard, children: [
-        /* @__PURE__ */ jsx("div", { style: S.statLabel, children: t("emailTracking.stats.avgTime") }),
-        /* @__PURE__ */ jsx("div", { style: S.statValue, children: stats ? `${stats.avgProcessingTime}ms` : "--" })
+      /* @__PURE__ */ jsxs("div", { className: s.statCard, children: [
+        /* @__PURE__ */ jsx("div", { className: s.statLabel, children: t("emailTracking.stats.avgTime") }),
+        /* @__PURE__ */ jsxs("div", { className: s.statValue, children: [
+          stats ? stats.avgProcessingTime : "\u2014",
+          /* @__PURE__ */ jsx("span", { className: s.statUnit, children: "ms" })
+        ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: S.filters, children: [
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: ["all", "success", "error", "ignored"].map((st) => /* @__PURE__ */ jsx("button", { style: { ...S.tab, ...tab === st ? S.tabActive : {} }, onClick: () => setTab(st), children: t(`emailTracking.tabs.${st === "error" ? "errors" : st}`) }, st)) }),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: [7, 30, 90].map((v) => /* @__PURE__ */ jsxs("button", { style: { ...S.dateBtn, ...dateRange === v ? S.dateBtnActive : {} }, onClick: () => setDateRange(v), children: [
+    /* @__PURE__ */ jsxs("div", { className: s.filters, children: [
+      /* @__PURE__ */ jsx("div", { className: s.tabs, children: tabsList.map((t2) => /* @__PURE__ */ jsxs("button", { className: `${s.tab} ${tab === t2.key ? s.tabActive : ""}`, onClick: () => setTab(t2.key), children: [
+        t2.label,
+        " ",
+        typeof t2.count === "number" && /* @__PURE__ */ jsxs("span", { style: { marginLeft: 4, opacity: 0.6 }, children: [
+          "(",
+          t2.count,
+          ")"
+        ] })
+      ] }, t2.key)) }),
+      /* @__PURE__ */ jsx("div", { className: s.dateRangeGroup, children: [7, 30, 90].map((v) => /* @__PURE__ */ jsxs("button", { className: `${s.dateRangeBtn} ${dateRange === v ? s.dateRangeActive : ""}`, onClick: () => setDateRange(v), children: [
         v,
         "j"
       ] }, v)) }),
-      /* @__PURE__ */ jsx("input", { type: "text", placeholder: t("emailTracking.searchPlaceholder"), value: search, onChange: (e) => setSearch(e.target.value), style: { padding: "6px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" } })
+      /* @__PURE__ */ jsx("input", { type: "text", className: s.searchInput, placeholder: t("emailTracking.searchPlaceholder"), value: search, onChange: (e) => setSearch(e.target.value) })
     ] }),
-    loading ? /* @__PURE__ */ jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("common.loading") }) : logs.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("emailTracking.noLogs") }) : /* @__PURE__ */ jsxs("table", { style: S.table, children: [
+    logs.length === 0 ? /* @__PURE__ */ jsx("div", { className: s.empty, children: t("emailTracking.noLogs") }) : /* @__PURE__ */ jsxs("table", { className: s.table, children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.date") }),
-        /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.recipient") }),
-        /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.subject") }),
-        /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.ticket") }),
-        /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.status") }),
-        /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.action") }),
-        /* @__PURE__ */ jsx("th", { style: { ...S.th, textAlign: "right" }, children: t("emailTracking.tableHeaders.time") })
+        /* @__PURE__ */ jsx("th", { children: t("emailTracking.tableHeaders.date") }),
+        /* @__PURE__ */ jsx("th", { children: t("emailTracking.tableHeaders.recipient") }),
+        /* @__PURE__ */ jsx("th", { children: t("emailTracking.tableHeaders.subject") }),
+        /* @__PURE__ */ jsx("th", { children: t("emailTracking.tableHeaders.ticket") }),
+        /* @__PURE__ */ jsx("th", { children: t("emailTracking.tableHeaders.status") }),
+        /* @__PURE__ */ jsx("th", { children: t("emailTracking.tableHeaders.action") }),
+        /* @__PURE__ */ jsx("th", { style: { textAlign: "right" }, children: t("emailTracking.tableHeaders.time") })
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: logs.map((log) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        /* @__PURE__ */ jsxs("tr", { onClick: () => log.status === "error" && log.errorMessage ? setExpandedRow(expandedRow === log.id ? null : log.id) : null, style: { cursor: log.status === "error" ? "pointer" : "default" }, children: [
-          /* @__PURE__ */ jsx("td", { style: { ...S.td, fontSize: 12, whiteSpace: "nowrap" }, children: fmtDate(log.createdAt) }),
-          /* @__PURE__ */ jsx("td", { style: { ...S.td, maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: log.recipientEmail || "--" }),
-          /* @__PURE__ */ jsx("td", { style: { ...S.td, maxWidth: 250, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: log.subject || "--" }),
-          /* @__PURE__ */ jsx("td", { style: S.td, children: log.ticketNumber || "--" }),
-          /* @__PURE__ */ jsx("td", { style: S.td, children: /* @__PURE__ */ jsx("span", { style: { ...S.badge, background: STATUS_CFG[log.status]?.bg, color: STATUS_CFG[log.status]?.color }, children: STATUS_CFG[log.status]?.key ? t(STATUS_CFG[log.status].key) : log.status }) }),
-          /* @__PURE__ */ jsx("td", { style: { ...S.td, fontSize: 12 }, children: log.action || "--" }),
-          /* @__PURE__ */ jsx("td", { style: { ...S.td, textAlign: "right" }, children: log.processingTimeMs != null ? /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace", fontSize: 12, color: log.processingTimeMs > 2e3 ? "#dc2626" : "#16a34a" }, children: [
-            log.processingTimeMs,
-            "ms"
-          ] }) : "--" })
+        /* @__PURE__ */ jsxs("tr", { onClick: () => log.status === "error" && log.errorMessage ? setExpandedRow(expandedRow === log.id ? null : log.id) : null, style: { cursor: log.status === "error" && log.errorMessage ? "pointer" : "default" }, children: [
+          /* @__PURE__ */ jsx("td", { style: { fontSize: 12, whiteSpace: "nowrap" }, children: fmtDate(log.createdAt) }),
+          /* @__PURE__ */ jsx("td", { style: { maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, title: log.recipientEmail, children: log.recipientEmail || "\u2014" }),
+          /* @__PURE__ */ jsx("td", { style: { maxWidth: 250, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, title: log.subject, children: log.subject || "\u2014" }),
+          /* @__PURE__ */ jsx("td", { children: log.ticketNumber ? /* @__PURE__ */ jsx("span", { className: s.ticketLink, children: log.ticketNumber }) : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: s.statusBadge, style: { background: STATUS_CFG[log.status]?.bg, color: STATUS_CFG[log.status]?.color }, children: STATUS_CFG[log.status]?.label || log.status }) }),
+          /* @__PURE__ */ jsx("td", { style: { fontSize: 12 }, children: log.action || "\u2014" }),
+          /* @__PURE__ */ jsxs("td", { style: { textAlign: "right" }, children: [
+            log.processingTimeMs != null ? /* @__PURE__ */ jsxs("span", { className: `${s.processingTime} ${log.processingTimeMs > 2e3 ? s.timeSlow : log.processingTimeMs > 500 ? s.timeMedium : s.timeFast}`, children: [
+              log.processingTimeMs,
+              "ms"
+            ] }) : "\u2014",
+            log.status === "error" && log.errorMessage && /* @__PURE__ */ jsx("button", { className: s.expandBtn, onClick: (e) => {
+              e.stopPropagation();
+              setExpandedRow(expandedRow === log.id ? null : log.id);
+            }, children: expandedRow === log.id ? "\u25B4" : "\u25BE" })
+          ] })
         ] }),
-        expandedRow === log.id && log.errorMessage && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxs("div", { style: { padding: "8px 12px", background: "#fef2f2", borderRadius: 6, fontSize: 12, color: "#dc2626" }, children: [
+        expandedRow === log.id && log.errorMessage && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxs("div", { className: s.errorDetail, children: [
           "Erreur",
           log.httpStatus ? ` (HTTP ${log.httpStatus})` : "",
           ": ",
@@ -135,18 +145,18 @@ const EmailTrackingClient = () => {
         ] }) }) })
       ] }, log.id)) })
     ] }),
-    totalDocs > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "center", gap: 12, marginTop: 16, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx("button", { style: S.btn, onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1, children: t("common.previous") }),
-      /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--theme-elevation-500)" }, children: [
+    totalDocs > 0 && /* @__PURE__ */ jsxs("div", { className: s.pagination, children: [
+      /* @__PURE__ */ jsx("button", { className: s.pageBtn, onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1, children: t("common.previous") }),
+      /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--theme-elevation-500)", alignSelf: "center" }, children: [
         t("common.page"),
         " ",
         page,
-        " -- ",
+        " \u2014 ",
         totalDocs,
         " ",
         t("common.results")
       ] }),
-      /* @__PURE__ */ jsx("button", { style: S.btn, onClick: () => setPage((p) => p + 1), disabled: !hasMore, children: t("common.next") })
+      /* @__PURE__ */ jsx("button", { className: s.pageBtn, onClick: () => setPage((p) => p + 1), disabled: !hasMore, children: t("common.next") })
     ] })
   ] });
 };