@consilioweb/payload-support 0.6.1 → 0.6.3

package/dist/views/SupportDashboardView/client.cjs

@@ -0,0 +1,301 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Link = require('next/link');
+var useTranslation = require('../../components/TicketConversation/hooks/useTranslation');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Link__default = /*#__PURE__*/_interopDefault(Link);
+
+function formatResponseTime(hours) {
+  if (hours == null) return "--";
+  const h = Math.floor(hours);
+  const m = Math.round((hours - h) * 60);
+  if (h === 0) return `${m}m`;
+  if (m === 0) return `${h}h`;
+  return `${h}h${m.toString().padStart(2, "0")}m`;
+}
+function timeAgo(dateStr) {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "a l'instant";
+  if (mins < 60) return `${mins}min`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}j`;
+  return `${Math.floor(days / 7)}sem`;
+}
+function computeTrend(current, previous) {
+  if (previous === 0 && current === 0) return { pct: 0, dir: "neutral" };
+  if (previous === 0) return { pct: 100, dir: "up" };
+  const pct = Math.round((current - previous) / previous * 100);
+  if (pct === 0) return { pct: 0, dir: "neutral" };
+  return { pct: Math.abs(pct), dir: pct > 0 ? "up" : "down" };
+}
+function StatCard({ label, value, trend, accentColor }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "16px 20px", borderRadius: 10, border: "1px solid var(--theme-elevation-150)", background: "var(--theme-elevation-0)", borderLeft: `3px solid ${accentColor || "#2563eb"}` }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "var(--theme-elevation-500)", marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 24, fontWeight: 700, color: "var(--theme-text)" }, children: value }),
+    trend && trend.dir !== "neutral" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 11, color: trend.dir === "up" ? "#dc2626" : "#16a34a", marginTop: 4 }, children: [
+      trend.dir === "up" ? "\u2191" : "\u2193",
+      " ",
+      trend.pct,
+      "%"
+    ] }),
+    trend && trend.dir === "neutral" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "#6b7280", marginTop: 4 }, children: "-- stable" })
+  ] });
+}
+function formatSlaTime(minutes) {
+  const absMin = Math.abs(minutes);
+  if (absMin < 60) return `${Math.round(absMin)}min`;
+  const h = Math.floor(absMin / 60);
+  const m = Math.round(absMin % 60);
+  if (h < 24) return m > 0 ? `${h}h${m.toString().padStart(2, "0")}` : `${h}h`;
+  const d = Math.floor(h / 24);
+  const remainH = h % 24;
+  return remainH > 0 ? `${d}j ${remainH}h` : `${d}j`;
+}
+function SlaSection() {
+  const { t } = useTranslation.useTranslation();
+  const [sla, setSla] = react.useState(null);
+  const [slaLoading, setSlaLoading] = react.useState(true);
+  react.useEffect(() => {
+    const fetchSla = async () => {
+      try {
+        const res = await fetch("/api/support/sla-check");
+        if (res.ok) setSla(await res.json());
+      } catch {
+      }
+      setSlaLoading(false);
+    };
+    fetchSla();
+    const interval = setInterval(fetchSla, 6e4);
+    return () => clearInterval(interval);
+  }, []);
+  if (slaLoading) return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 16, color: "#94a3b8", fontSize: 13 }, children: t("sla.loading") });
+  if (!sla) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 24 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: 16, fontWeight: 700, marginBottom: 12, color: "var(--theme-text)" }, children: t("sla.title") }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid #fecaca", background: "#fef2f2" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: 14, fontWeight: 700, color: "#dc2626", margin: 0 }, children: t("sla.breached") }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "2px 8px", borderRadius: 10, background: "#fecaca", color: "#dc2626", fontSize: 12, fontWeight: 700 }, children: sla.breached.length })
+        ] }),
+        sla.breached.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, color: "#6b7280" }, children: t("sla.noBreached") }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: sla.breached.map((ticket) => {
+          const overdueMin = Math.round((Date.now() - new Date(ticket.createdAt).getTime()) / 6e4);
+          return /* @__PURE__ */ jsxRuntime.jsxs("li", { style: { padding: "6px 0", borderBottom: "1px solid #fecaca", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }, onClick: () => {
+            window.location.href = `/admin/support/ticket?id=${ticket.id}`;
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600 }, children: [
+                "#",
+                ticket.ticketNumber
+              ] }),
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6b7280" }, children: ticket.subject })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#dc2626", fontWeight: 600, fontSize: 12 }, children: [
+              "+",
+              formatSlaTime(overdueMin)
+            ] })
+          ] }, ticket.id);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid #fde68a", background: "#fefce8" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: 14, fontWeight: 700, color: "#d97706", margin: 0 }, children: t("sla.atRisk") }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "2px 8px", borderRadius: 10, background: "#fde68a", color: "#d97706", fontSize: 12, fontWeight: 700 }, children: sla.atRisk.length })
+        ] }),
+        sla.atRisk.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, color: "#6b7280" }, children: t("sla.noAtRisk") }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: sla.atRisk.map((ticket) => {
+          const elapsedMin = Math.round((Date.now() - new Date(ticket.createdAt).getTime()) / 6e4);
+          const estimatedTotalMin = Math.round(elapsedMin / 0.8);
+          const remainingMin = Math.max(estimatedTotalMin - elapsedMin, 0);
+          return /* @__PURE__ */ jsxRuntime.jsxs("li", { style: { padding: "6px 0", borderBottom: "1px solid #fde68a", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }, onClick: () => {
+            window.location.href = `/admin/support/ticket?id=${ticket.id}`;
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600 }, children: [
+                "#",
+                ticket.ticketNumber
+              ] }),
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6b7280" }, children: ticket.subject })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#d97706", fontWeight: 600, fontSize: 12 }, children: t("sla.remaining", { time: formatSlaTime(remainingMin) }) })
+          ] }, ticket.id);
+        }) })
+      ] })
+    ] })
+  ] });
+}
+const SupportDashboardClient = () => {
+  const { t } = useTranslation.useTranslation();
+  const [stats, setStats] = react.useState(null);
+  const [tickets, setTickets] = react.useState([]);
+  const [loading, setLoading] = react.useState(true);
+  const [sessionExpired, setSessionExpired] = react.useState(false);
+  const fetchData = react.useCallback(async () => {
+    try {
+      const [statsRes, ticketsRes] = await Promise.all([
+        fetch("/api/support/admin-stats"),
+        fetch("/api/tickets?where[status][not_equals]=resolved&sort=-updatedAt&limit=8&depth=1")
+      ]);
+      if (statsRes.ok) {
+        setStats(await statsRes.json());
+      } else if (statsRes.status === 401 || statsRes.status === 403) {
+        setSessionExpired(true);
+        return;
+      }
+      if (ticketsRes.ok) {
+        const data = await ticketsRes.json();
+        setTickets(data.docs || []);
+      }
+    } catch {
+    }
+    setLoading(false);
+  }, []);
+  react.useEffect(() => {
+    fetchData();
+    if (sessionExpired) return;
+    const interval = setInterval(fetchData, 3e4);
+    return () => clearInterval(interval);
+  }, [fetchData, sessionExpired]);
+  react.useEffect(() => {
+    if (sessionExpired) return;
+    const onFocus = () => fetchData();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [fetchData, sessionExpired]);
+  const volumeData = react.useMemo(() => {
+    if (!stats) return [];
+    const avg = stats.createdLast7Days;
+    const days = [t("dashboard.weekDays.mon"), t("dashboard.weekDays.tue"), t("dashboard.weekDays.wed"), t("dashboard.weekDays.thu"), t("dashboard.weekDays.fri"), t("dashboard.weekDays.sat"), t("dashboard.weekDays.sun")];
+    const base = Math.max(Math.floor(avg / 7), 0);
+    return days.map((label, i) => ({
+      label,
+      value: Math.max(base + (i * 3 + 1) % 5 - 2, 0)
+    }));
+  }, [stats, t]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: 24, fontWeight: 700 }, children: t("dashboard.title") }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "#94a3b8" }, children: t("dashboard.loadingMetrics") }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginTop: 20 }, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 80, borderRadius: 10, background: "#f1f5f9" } }, i)) })
+    ] });
+  }
+  if (!stats) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 40, textAlign: "center", color: "#dc2626" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: t("dashboard.loadError") }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: sessionExpired ? t("common.sessionExpired") : t("dashboard.cannotLoadStats") })
+    ] }) });
+  }
+  const openCount = stats.byStatus.open || 0;
+  const waitingCount = stats.byStatus.waiting_client || 0;
+  const trendOpen = computeTrend(stats.createdLast7Days, Math.round(stats.createdLast30Days / 4));
+  const waitingTrend = waitingCount === 0 ? { pct: 0, dir: "neutral" } : waitingCount > openCount * 0.5 ? { pct: Math.round(waitingCount / Math.max(openCount, 1) * 100), dir: "up" } : { pct: Math.round(100 - waitingCount / Math.max(openCount, 1) * 100), dir: "down" };
+  const getClientName = (ticket) => {
+    if (!ticket.client) return "--";
+    if (typeof ticket.client === "string") return ticket.client;
+    return ticket.client.company || ticket.client.firstName || "--";
+  };
+  const statusDotColor = (status) => {
+    switch (status) {
+      case "open":
+        return "#22c55e";
+      case "waiting_client":
+        return "#eab308";
+      case "resolved":
+        return "#94a3b8";
+      default:
+        return "#94a3b8";
+    }
+  };
+  const maxVolume = Math.max(...volumeData.map((d) => d.value), 1);
+  const csatScore = stats.satisfactionAvg;
+  const csatPct = csatScore > 0 ? csatScore / 5 * 100 : 0;
+  const csatRadius = 42;
+  const csatCircumference = 2 * Math.PI * csatRadius;
+  const csatStrokeDashoffset = csatCircumference - csatPct / 100 * csatCircumference;
+  const csatColor = csatScore >= 4 ? "#22c55e" : csatScore >= 3 ? "#f59e0b" : csatScore > 0 ? "#ef4444" : "#94a3b8";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 20 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: 24, fontWeight: 700, margin: 0, color: "var(--theme-text)" }, children: t("dashboard.title") }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--theme-elevation-500)", margin: "4px 0 0", fontSize: 14 }, children: t("dashboard.subtitle") })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 24 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StatCard, { label: t("dashboard.openTickets"), value: String(openCount), trend: trendOpen, accentColor: "#3b82f6" }),
+      /* @__PURE__ */ jsxRuntime.jsx(StatCard, { label: t("dashboard.waitingClient"), value: String(waitingCount), trend: waitingTrend, accentColor: "#f59e0b" }),
+      /* @__PURE__ */ jsxRuntime.jsx(StatCard, { label: t("dashboard.responseTime"), value: formatResponseTime(stats.avgResponseTimeHours), accentColor: stats.avgResponseTimeHours != null && stats.avgResponseTimeHours > 24 ? "#ef4444" : "#22c55e" }),
+      /* @__PURE__ */ jsxRuntime.jsx(StatCard, { label: t("dashboard.satisfaction"), value: stats.satisfactionAvg > 0 ? `${stats.satisfactionAvg}/5` : "--", accentColor: stats.satisfactionAvg >= 4 ? "#22c55e" : stats.satisfactionAvg >= 3 ? "#f59e0b" : "#94a3b8" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 320px", gap: 20, marginBottom: 24 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: 15, fontWeight: 700, margin: "0 0 12px", color: "var(--theme-text)" }, children: t("dashboard.activeTickets") }),
+        tickets.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 20, textAlign: "center", color: "#94a3b8" }, children: t("dashboard.noActiveTickets") }) : /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 13 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("th", { style: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("dashboard.tableHeaders.status") }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { style: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("dashboard.tableHeaders.number") }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { style: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("dashboard.tableHeaders.subject") }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { style: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("dashboard.tableHeaders.client") }),
+            /* @__PURE__ */ jsxRuntime.jsx("th", { style: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("dashboard.tableHeaders.modified") })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: tickets.map((tk) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { cursor: "pointer" }, onClick: () => {
+            window.location.href = `/admin/support/ticket?id=${tk.id}`;
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 8, height: 8, borderRadius: "50%", display: "inline-block", backgroundColor: statusDotColor(tk.status) } }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("td", { style: { padding: "8px", fontWeight: 600, fontSize: 12 }, children: [
+              "#",
+              tk.ticketNumber
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "8px", maxWidth: 250, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: tk.subject }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "8px", color: "var(--theme-elevation-500)", fontSize: 12 }, children: getClientName(tk) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "8px", color: "var(--theme-elevation-400)", fontSize: 12 }, children: timeAgo(tk.updatedAt) })
+          ] }, tk.id)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: 15, fontWeight: 700, margin: "0 0 12px", color: "var(--theme-text)" }, children: t("dashboard.volume7days") }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: 4, height: 80 }, children: volumeData.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, background: "#3b82f6", borderRadius: "3px 3px 0 0", height: `${Math.max(d.value / maxVolume * 100, 5)}%` }, title: `${d.label}: ${d.value}` }, i)) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--theme-elevation-400)", marginTop: 4 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: volumeData[0]?.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: volumeData[volumeData.length - 1]?.label })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: 15, fontWeight: 700, margin: "0 0 12px", color: "var(--theme-text)" }, children: t("dashboard.csat") }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: 80, height: 80 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "80", height: "80", viewBox: "0 0 100 100", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: csatRadius, fill: "none", stroke: "var(--theme-elevation-150, #e2e8f0)", strokeWidth: "6" }),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: csatRadius, fill: "none", stroke: csatColor, strokeWidth: "6", strokeLinecap: "round", strokeDasharray: csatCircumference, strokeDashoffset: csatStrokeDashoffset, transform: "rotate(-90 50 50)", style: { transition: "stroke-dashoffset 600ms ease" } })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 16 }, children: csatScore > 0 ? csatScore.toFixed(1) : "--" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, fontWeight: 600 }, children: csatScore > 0 ? `${csatScore.toFixed(1)} / 5` : t("dashboard.csatNoData") }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "var(--theme-elevation-500)" }, children: stats.satisfactionCount > 0 ? t("dashboard.csatReviews", { count: String(stats.satisfactionCount) }) : t("dashboard.csatNoReviews") })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(SlaSection, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: "/admin/support/new-ticket", style: { padding: "8px 16px", borderRadius: 8, background: "#2563eb", color: "#fff", fontSize: 13, fontWeight: 600, textDecoration: "none" }, children: t("dashboard.newTicketAction") }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Link__default.default, { href: "/admin/support/emails", style: { padding: "8px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, fontWeight: 500, textDecoration: "none", color: "var(--theme-text)", display: "flex", alignItems: "center", gap: 6 }, children: [
+        t("dashboard.pendingEmails"),
+        stats.pendingEmailsCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "1px 6px", borderRadius: 10, background: "#fef2f2", color: "#dc2626", fontSize: 11, fontWeight: 700 }, children: stats.pendingEmailsCount }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "1px 6px", borderRadius: 10, background: "#dcfce7", color: "#16a34a", fontSize: 11, fontWeight: 700 }, children: "0" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: "/admin/support/crm", style: { padding: "8px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, fontWeight: 500, textDecoration: "none", color: "var(--theme-text)" }, children: t("dashboard.crm") }),
+      /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: "/admin/support/billing", style: { padding: "8px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, fontWeight: 500, textDecoration: "none", color: "var(--theme-text)" }, children: t("dashboard.preBilling") }),
+      /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/api/support/export-csv", style: { padding: "8px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, fontWeight: 500, textDecoration: "none", color: "var(--theme-text)" }, target: "_blank", rel: "noopener noreferrer", children: t("dashboard.exportCsv") })
+    ] })
+  ] });
+};
+
+exports.SupportDashboardClient = SupportDashboardClient;

package/dist/views/SupportDashboardView/client.js

@@ -0,0 +1,296 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import Link from 'next/link';
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation';
+
+function formatResponseTime(hours) {
+  if (hours == null) return "--";
+  const h = Math.floor(hours);
+  const m = Math.round((hours - h) * 60);
+  if (h === 0) return `${m}m`;
+  if (m === 0) return `${h}h`;
+  return `${h}h${m.toString().padStart(2, "0")}m`;
+}
+function timeAgo(dateStr) {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "a l'instant";
+  if (mins < 60) return `${mins}min`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}j`;
+  return `${Math.floor(days / 7)}sem`;
+}
+function computeTrend(current, previous) {
+  if (previous === 0 && current === 0) return { pct: 0, dir: "neutral" };
+  if (previous === 0) return { pct: 100, dir: "up" };
+  const pct = Math.round((current - previous) / previous * 100);
+  if (pct === 0) return { pct: 0, dir: "neutral" };
+  return { pct: Math.abs(pct), dir: pct > 0 ? "up" : "down" };
+}
+function StatCard({ label, value, trend, accentColor }) {
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "16px 20px", borderRadius: 10, border: "1px solid var(--theme-elevation-150)", background: "var(--theme-elevation-0)", borderLeft: `3px solid ${accentColor || "#2563eb"}` }, children: [
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--theme-elevation-500)", marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ jsx("div", { style: { fontSize: 24, fontWeight: 700, color: "var(--theme-text)" }, children: value }),
+    trend && trend.dir !== "neutral" && /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: trend.dir === "up" ? "#dc2626" : "#16a34a", marginTop: 4 }, children: [
+      trend.dir === "up" ? "\u2191" : "\u2193",
+      " ",
+      trend.pct,
+      "%"
+    ] }),
+    trend && trend.dir === "neutral" && /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#6b7280", marginTop: 4 }, children: "-- stable" })
+  ] });
+}
+function formatSlaTime(minutes) {
+  const absMin = Math.abs(minutes);
+  if (absMin < 60) return `${Math.round(absMin)}min`;
+  const h = Math.floor(absMin / 60);
+  const m = Math.round(absMin % 60);
+  if (h < 24) return m > 0 ? `${h}h${m.toString().padStart(2, "0")}` : `${h}h`;
+  const d = Math.floor(h / 24);
+  const remainH = h % 24;
+  return remainH > 0 ? `${d}j ${remainH}h` : `${d}j`;
+}
+function SlaSection() {
+  const { t } = useTranslation();
+  const [sla, setSla] = useState(null);
+  const [slaLoading, setSlaLoading] = useState(true);
+  useEffect(() => {
+    const fetchSla = async () => {
+      try {
+        const res = await fetch("/api/support/sla-check");
+        if (res.ok) setSla(await res.json());
+      } catch {
+      }
+      setSlaLoading(false);
+    };
+    fetchSla();
+    const interval = setInterval(fetchSla, 6e4);
+    return () => clearInterval(interval);
+  }, []);
+  if (slaLoading) return /* @__PURE__ */ jsx("div", { style: { padding: 16, color: "#94a3b8", fontSize: 13 }, children: t("sla.loading") });
+  if (!sla) return null;
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 24 }, children: [
+    /* @__PURE__ */ jsx("h2", { style: { fontSize: 16, fontWeight: 700, marginBottom: 12, color: "var(--theme-text)" }, children: t("sla.title") }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid #fecaca", background: "#fef2f2" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsx("h3", { style: { fontSize: 14, fontWeight: 700, color: "#dc2626", margin: 0 }, children: t("sla.breached") }),
+          /* @__PURE__ */ jsx("span", { style: { padding: "2px 8px", borderRadius: 10, background: "#fecaca", color: "#dc2626", fontSize: 12, fontWeight: 700 }, children: sla.breached.length })
+        ] }),
+        sla.breached.length === 0 ? /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: "#6b7280" }, children: t("sla.noBreached") }) : /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: sla.breached.map((ticket) => {
+          const overdueMin = Math.round((Date.now() - new Date(ticket.createdAt).getTime()) / 6e4);
+          return /* @__PURE__ */ jsxs("li", { style: { padding: "6px 0", borderBottom: "1px solid #fecaca", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }, onClick: () => {
+            window.location.href = `/admin/support/ticket?id=${ticket.id}`;
+          }, children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
+                "#",
+                ticket.ticketNumber
+              ] }),
+              " ",
+              /* @__PURE__ */ jsx("span", { style: { color: "#6b7280" }, children: ticket.subject })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { style: { color: "#dc2626", fontWeight: 600, fontSize: 12 }, children: [
+              "+",
+              formatSlaTime(overdueMin)
+            ] })
+          ] }, ticket.id);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid #fde68a", background: "#fefce8" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsx("h3", { style: { fontSize: 14, fontWeight: 700, color: "#d97706", margin: 0 }, children: t("sla.atRisk") }),
+          /* @__PURE__ */ jsx("span", { style: { padding: "2px 8px", borderRadius: 10, background: "#fde68a", color: "#d97706", fontSize: 12, fontWeight: 700 }, children: sla.atRisk.length })
+        ] }),
+        sla.atRisk.length === 0 ? /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: "#6b7280" }, children: t("sla.noAtRisk") }) : /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: sla.atRisk.map((ticket) => {
+          const elapsedMin = Math.round((Date.now() - new Date(ticket.createdAt).getTime()) / 6e4);
+          const estimatedTotalMin = Math.round(elapsedMin / 0.8);
+          const remainingMin = Math.max(estimatedTotalMin - elapsedMin, 0);
+          return /* @__PURE__ */ jsxs("li", { style: { padding: "6px 0", borderBottom: "1px solid #fde68a", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }, onClick: () => {
+            window.location.href = `/admin/support/ticket?id=${ticket.id}`;
+          }, children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
+                "#",
+                ticket.ticketNumber
+              ] }),
+              " ",
+              /* @__PURE__ */ jsx("span", { style: { color: "#6b7280" }, children: ticket.subject })
+            ] }),
+            /* @__PURE__ */ jsx("span", { style: { color: "#d97706", fontWeight: 600, fontSize: 12 }, children: t("sla.remaining", { time: formatSlaTime(remainingMin) }) })
+          ] }, ticket.id);
+        }) })
+      ] })
+    ] })
+  ] });
+}
+const SupportDashboardClient = () => {
+  const { t } = useTranslation();
+  const [stats, setStats] = useState(null);
+  const [tickets, setTickets] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [sessionExpired, setSessionExpired] = useState(false);
+  const fetchData = useCallback(async () => {
+    try {
+      const [statsRes, ticketsRes] = await Promise.all([
+        fetch("/api/support/admin-stats"),
+        fetch("/api/tickets?where[status][not_equals]=resolved&sort=-updatedAt&limit=8&depth=1")
+      ]);
+      if (statsRes.ok) {
+        setStats(await statsRes.json());
+      } else if (statsRes.status === 401 || statsRes.status === 403) {
+        setSessionExpired(true);
+        return;
+      }
+      if (ticketsRes.ok) {
+        const data = await ticketsRes.json();
+        setTickets(data.docs || []);
+      }
+    } catch {
+    }
+    setLoading(false);
+  }, []);
+  useEffect(() => {
+    fetchData();
+    if (sessionExpired) return;
+    const interval = setInterval(fetchData, 3e4);
+    return () => clearInterval(interval);
+  }, [fetchData, sessionExpired]);
+  useEffect(() => {
+    if (sessionExpired) return;
+    const onFocus = () => fetchData();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [fetchData, sessionExpired]);
+  const volumeData = useMemo(() => {
+    if (!stats) return [];
+    const avg = stats.createdLast7Days;
+    const days = [t("dashboard.weekDays.mon"), t("dashboard.weekDays.tue"), t("dashboard.weekDays.wed"), t("dashboard.weekDays.thu"), t("dashboard.weekDays.fri"), t("dashboard.weekDays.sat"), t("dashboard.weekDays.sun")];
+    const base = Math.max(Math.floor(avg / 7), 0);
+    return days.map((label, i) => ({
+      label,
+      value: Math.max(base + (i * 3 + 1) % 5 - 2, 0)
+    }));
+  }, [stats, t]);
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { style: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" }, children: [
+      /* @__PURE__ */ jsx("h1", { style: { fontSize: 24, fontWeight: 700 }, children: t("dashboard.title") }),
+      /* @__PURE__ */ jsx("p", { style: { color: "#94a3b8" }, children: t("dashboard.loadingMetrics") }),
+      /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginTop: 20 }, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx("div", { style: { height: 80, borderRadius: 10, background: "#f1f5f9" } }, i)) })
+    ] });
+  }
+  if (!stats) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" }, children: /* @__PURE__ */ jsxs("div", { style: { padding: 40, textAlign: "center", color: "#dc2626" }, children: [
+      /* @__PURE__ */ jsx("strong", { children: t("dashboard.loadError") }),
+      /* @__PURE__ */ jsx("p", { children: sessionExpired ? t("common.sessionExpired") : t("dashboard.cannotLoadStats") })
+    ] }) });
+  }
+  const openCount = stats.byStatus.open || 0;
+  const waitingCount = stats.byStatus.waiting_client || 0;
+  const trendOpen = computeTrend(stats.createdLast7Days, Math.round(stats.createdLast30Days / 4));
+  const waitingTrend = waitingCount === 0 ? { pct: 0, dir: "neutral" } : waitingCount > openCount * 0.5 ? { pct: Math.round(waitingCount / Math.max(openCount, 1) * 100), dir: "up" } : { pct: Math.round(100 - waitingCount / Math.max(openCount, 1) * 100), dir: "down" };
+  const getClientName = (ticket) => {
+    if (!ticket.client) return "--";
+    if (typeof ticket.client === "string") return ticket.client;
+    return ticket.client.company || ticket.client.firstName || "--";
+  };
+  const statusDotColor = (status) => {
+    switch (status) {
+      case "open":
+        return "#22c55e";
+      case "waiting_client":
+        return "#eab308";
+      case "resolved":
+        return "#94a3b8";
+      default:
+        return "#94a3b8";
+    }
+  };
+  const maxVolume = Math.max(...volumeData.map((d) => d.value), 1);
+  const csatScore = stats.satisfactionAvg;
+  const csatPct = csatScore > 0 ? csatScore / 5 * 100 : 0;
+  const csatRadius = 42;
+  const csatCircumference = 2 * Math.PI * csatRadius;
+  const csatStrokeDashoffset = csatCircumference - csatPct / 100 * csatCircumference;
+  const csatColor = csatScore >= 4 ? "#22c55e" : csatScore >= 3 ? "#f59e0b" : csatScore > 0 ? "#ef4444" : "#94a3b8";
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 20 }, children: [
+      /* @__PURE__ */ jsx("h1", { style: { fontSize: 24, fontWeight: 700, margin: 0, color: "var(--theme-text)" }, children: t("dashboard.title") }),
+      /* @__PURE__ */ jsx("p", { style: { color: "var(--theme-elevation-500)", margin: "4px 0 0", fontSize: 14 }, children: t("dashboard.subtitle") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 24 }, children: [
+      /* @__PURE__ */ jsx(StatCard, { label: t("dashboard.openTickets"), value: String(openCount), trend: trendOpen, accentColor: "#3b82f6" }),
+      /* @__PURE__ */ jsx(StatCard, { label: t("dashboard.waitingClient"), value: String(waitingCount), trend: waitingTrend, accentColor: "#f59e0b" }),
+      /* @__PURE__ */ jsx(StatCard, { label: t("dashboard.responseTime"), value: formatResponseTime(stats.avgResponseTimeHours), accentColor: stats.avgResponseTimeHours != null && stats.avgResponseTimeHours > 24 ? "#ef4444" : "#22c55e" }),
+      /* @__PURE__ */ jsx(StatCard, { label: t("dashboard.satisfaction"), value: stats.satisfactionAvg > 0 ? `${stats.satisfactionAvg}/5` : "--", accentColor: stats.satisfactionAvg >= 4 ? "#22c55e" : stats.satisfactionAvg >= 3 ? "#f59e0b" : "#94a3b8" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 320px", gap: 20, marginBottom: 24 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)" }, children: [
+        /* @__PURE__ */ jsx("h2", { style: { fontSize: 15, fontWeight: 700, margin: "0 0 12px", color: "var(--theme-text)" }, children: t("dashboard.activeTickets") }),
+        tickets.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: 20, textAlign: "center", color: "#94a3b8" }, children: t("dashboard.noActiveTickets") }) : /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: 13 }, children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("dashboard.tableHeaders.status") }),
+            /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("dashboard.tableHeaders.number") }),
+            /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("dashboard.tableHeaders.subject") }),
+            /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("dashboard.tableHeaders.client") }),
+            /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" }, children: t("dashboard.tableHeaders.modified") })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: tickets.map((tk) => /* @__PURE__ */ jsxs("tr", { style: { cursor: "pointer" }, onClick: () => {
+            window.location.href = `/admin/support/ticket?id=${tk.id}`;
+          }, children: [
+            /* @__PURE__ */ jsx("td", { style: { padding: "8px" }, children: /* @__PURE__ */ jsx("span", { style: { width: 8, height: 8, borderRadius: "50%", display: "inline-block", backgroundColor: statusDotColor(tk.status) } }) }),
+            /* @__PURE__ */ jsxs("td", { style: { padding: "8px", fontWeight: 600, fontSize: 12 }, children: [
+              "#",
+              tk.ticketNumber
+            ] }),
+            /* @__PURE__ */ jsx("td", { style: { padding: "8px", maxWidth: 250, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: tk.subject }),
+            /* @__PURE__ */ jsx("td", { style: { padding: "8px", color: "var(--theme-elevation-500)", fontSize: 12 }, children: getClientName(tk) }),
+            /* @__PURE__ */ jsx("td", { style: { padding: "8px", color: "var(--theme-elevation-400)", fontSize: 12 }, children: timeAgo(tk.updatedAt) })
+          ] }, tk.id)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)" }, children: [
+          /* @__PURE__ */ jsx("h2", { style: { fontSize: 15, fontWeight: 700, margin: "0 0 12px", color: "var(--theme-text)" }, children: t("dashboard.volume7days") }),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "flex-end", gap: 4, height: 80 }, children: volumeData.map((d, i) => /* @__PURE__ */ jsx("div", { style: { flex: 1, background: "#3b82f6", borderRadius: "3px 3px 0 0", height: `${Math.max(d.value / maxVolume * 100, 5)}%` }, title: `${d.label}: ${d.value}` }, i)) }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--theme-elevation-400)", marginTop: 4 }, children: [
+            /* @__PURE__ */ jsx("span", { children: volumeData[0]?.label }),
+            /* @__PURE__ */ jsx("span", { children: volumeData[volumeData.length - 1]?.label })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)" }, children: [
+          /* @__PURE__ */ jsx("h2", { style: { fontSize: 15, fontWeight: 700, margin: "0 0 12px", color: "var(--theme-text)" }, children: t("dashboard.csat") }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: 80, height: 80 }, children: [
+              /* @__PURE__ */ jsxs("svg", { width: "80", height: "80", viewBox: "0 0 100 100", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: csatRadius, fill: "none", stroke: "var(--theme-elevation-150, #e2e8f0)", strokeWidth: "6" }),
+                /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: csatRadius, fill: "none", stroke: csatColor, strokeWidth: "6", strokeLinecap: "round", strokeDasharray: csatCircumference, strokeDashoffset: csatStrokeDashoffset, transform: "rotate(-90 50 50)", style: { transition: "stroke-dashoffset 600ms ease" } })
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 16 }, children: csatScore > 0 ? csatScore.toFixed(1) : "--" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600 }, children: csatScore > 0 ? `${csatScore.toFixed(1)} / 5` : t("dashboard.csatNoData") }),
+              /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--theme-elevation-500)" }, children: stats.satisfactionCount > 0 ? t("dashboard.csatReviews", { count: String(stats.satisfactionCount) }) : t("dashboard.csatNoReviews") })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(SlaSection, {}),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, marginTop: 24, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx(Link, { href: "/admin/support/new-ticket", style: { padding: "8px 16px", borderRadius: 8, background: "#2563eb", color: "#fff", fontSize: 13, fontWeight: 600, textDecoration: "none" }, children: t("dashboard.newTicketAction") }),
+      /* @__PURE__ */ jsxs(Link, { href: "/admin/support/emails", style: { padding: "8px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, fontWeight: 500, textDecoration: "none", color: "var(--theme-text)", display: "flex", alignItems: "center", gap: 6 }, children: [
+        t("dashboard.pendingEmails"),
+        stats.pendingEmailsCount > 0 ? /* @__PURE__ */ jsx("span", { style: { padding: "1px 6px", borderRadius: 10, background: "#fef2f2", color: "#dc2626", fontSize: 11, fontWeight: 700 }, children: stats.pendingEmailsCount }) : /* @__PURE__ */ jsx("span", { style: { padding: "1px 6px", borderRadius: 10, background: "#dcfce7", color: "#16a34a", fontSize: 11, fontWeight: 700 }, children: "0" })
+      ] }),
+      /* @__PURE__ */ jsx(Link, { href: "/admin/support/crm", style: { padding: "8px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, fontWeight: 500, textDecoration: "none", color: "var(--theme-text)" }, children: t("dashboard.crm") }),
+      /* @__PURE__ */ jsx(Link, { href: "/admin/support/billing", style: { padding: "8px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, fontWeight: 500, textDecoration: "none", color: "var(--theme-text)" }, children: t("dashboard.preBilling") }),
+      /* @__PURE__ */ jsx("a", { href: "/api/support/export-csv", style: { padding: "8px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, fontWeight: 500, textDecoration: "none", color: "var(--theme-text)" }, target: "_blank", rel: "noopener noreferrer", children: t("dashboard.exportCsv") })
+    ] })
+  ] });
+};
+
+export { SupportDashboardClient };