@consilioweb/payload-support 0.8.2 → 0.9.4

package/dist/views/SupportDashboardView/client.js

@@ -3,6 +3,7 @@ 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.js';
+import styles from '../../styles/SupportDashboard.module.scss';
 
 function formatResponseTime(hours) {
   if (hours == null) return "--";
@@ -30,17 +31,80 @@ function computeTrend(current, previous) {
   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,
-      "%"
+function StatCard({ label, value, trend, accentColor, onClick }) {
+  const style = accentColor ? { "--stat-accent": accentColor } : void 0;
+  const Tag = onClick ? "button" : "div";
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      className: styles.statCard,
+      style,
+      onClick,
+      type: onClick ? "button" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.statLabel, children: label }),
+        /* @__PURE__ */ jsx("div", { className: styles.statValueRow, children: /* @__PURE__ */ jsx("span", { className: styles.statValue, children: value }) }),
+        trend && trend.dir !== "neutral" && /* @__PURE__ */ jsxs("div", { className: `${styles.statTrend} ${styles[trend.dir]}`, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.trendArrow, children: trend.dir === "up" ? "\u2191" : "\u2193" }),
+          trend.pct,
+          "%"
+        ] }),
+        trend && trend.dir === "neutral" && /* @__PURE__ */ jsx("div", { className: `${styles.statTrend} ${styles.neutral}`, children: "\u2014 stable" })
+      ]
+    }
+  );
+}
+function VolumeChart({ data }) {
+  const max = Math.max(...data.map((d) => d.value), 1);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: styles.volumeChart, children: data.map((d, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.volumeBar,
+        style: { height: `${Math.max(d.value / max * 100, 5)}%` },
+        title: `${d.label}: ${d.value}`
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.volumeLabels, children: [
+      /* @__PURE__ */ jsx("span", { children: data[0]?.label }),
+      /* @__PURE__ */ jsx("span", { children: data[data.length - 1]?.label })
+    ] })
+  ] });
+}
+function CSATRing({ score, count }) {
+  const pct = score > 0 ? score / 5 * 100 : 0;
+  const radius = 42;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - pct / 100 * circumference;
+  const color = score >= 4 ? "#22c55e" : score >= 3 ? "#f59e0b" : score > 0 ? "#ef4444" : "#94a3b8";
+  return /* @__PURE__ */ jsxs("div", { className: styles.csatContainer, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.csatRing, children: [
+      /* @__PURE__ */ jsxs("svg", { width: "100", height: "100", viewBox: "0 0 100 100", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: radius, fill: "none", stroke: "var(--theme-elevation-150, #e2e8f0)", strokeWidth: "6" }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "50",
+            cy: "50",
+            r: radius,
+            fill: "none",
+            stroke: color,
+            strokeWidth: "6",
+            strokeLinecap: "round",
+            strokeDasharray: circumference,
+            strokeDashoffset,
+            transform: "rotate(-90 50 50)",
+            style: { transition: "stroke-dashoffset 600ms ease" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.csatValue, children: score > 0 ? score.toFixed(1) : "--" })
     ] }),
-    trend && trend.dir === "neutral" && /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "#6b7280", marginTop: 4 }, children: "-- stable" })
+    /* @__PURE__ */ jsxs("div", { className: styles.csatMeta, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.csatLabel, children: score > 0 ? `${score.toFixed(1)} / 5` : "Pas de donn\xE9es" }),
+      /* @__PURE__ */ jsx("div", { className: styles.csatSub, children: count > 0 ? `${count} avis recueillis` : "Aucun avis" })
+    ] })
   ] });
 }
 function formatSlaTime(minutes) {
@@ -54,14 +118,15 @@ function formatSlaTime(minutes) {
   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());
+        if (res.ok) {
+          setSla(await res.json());
+        }
       } catch {
       }
       setSlaLoading(false);
@@ -70,58 +135,96 @@ function SlaSection() {
     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 (slaLoading) {
+    return /* @__PURE__ */ jsxs("div", { className: styles.slaSection, children: [
+      /* @__PURE__ */ jsx("h2", { className: styles.slaSectionTitle, children: "SLA" }),
+      /* @__PURE__ */ jsx("div", { className: styles.slaLoading, children: "Chargement..." })
+    ] });
+  }
   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 })
+  const navigateToTicket = (id) => {
+    window.location.href = `/admin/support/ticket?id=${id}`;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.slaSection, children: [
+    /* @__PURE__ */ jsx("h2", { className: styles.slaSectionTitle, children: "SLA" }),
+    /* @__PURE__ */ jsxs("div", { className: styles.slaGrid, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${styles.slaCard} ${styles.slaBreach}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.slaCardHeader, children: [
+          /* @__PURE__ */ jsxs("h3", { className: `${styles.slaCardTitle} ${styles.slaCardTitleBreach}`, children: [
+            /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
             ] }),
-            /* @__PURE__ */ jsxs("span", { style: { color: "#dc2626", fontWeight: 600, fontSize: 12 }, children: [
-              "+",
-              formatSlaTime(overdueMin)
-            ] })
-          ] }, ticket.id);
+            "En breach"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: `${styles.slaCount} ${styles.slaCountBreach}`, children: sla.breached.length })
+        ] }),
+        sla.breached.length === 0 ? /* @__PURE__ */ jsx("div", { className: styles.slaEmpty, children: "Aucun ticket en breach" }) : /* @__PURE__ */ jsx("ul", { className: styles.slaList, children: sla.breached.map((ticket) => {
+          const now = /* @__PURE__ */ new Date();
+          const created = new Date(ticket.createdAt);
+          const overdueMin = Math.round((now.getTime() - created.getTime()) / 6e4);
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: styles.slaItem,
+              onClick: () => navigateToTicket(ticket.id),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.slaItemLeft, children: [
+                  /* @__PURE__ */ jsxs("span", { className: styles.slaItemNum, children: [
+                    "#",
+                    ticket.ticketNumber
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: styles.slaItemSubject, children: ticket.subject })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: `${styles.slaItemTime} ${styles.slaTimeBreach}`, 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 })
+      /* @__PURE__ */ jsxs("div", { className: `${styles.slaCard} ${styles.slaRisk}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.slaCardHeader, children: [
+          /* @__PURE__ */ jsxs("h3", { className: `${styles.slaCardTitle} ${styles.slaCardTitleRisk}`, children: [
+            /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+            ] }),
+            "\xC0 risque"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: `${styles.slaCount} ${styles.slaCountRisk}`, 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);
+        sla.atRisk.length === 0 ? /* @__PURE__ */ jsx("div", { className: styles.slaEmpty, children: "Aucun ticket \xE0 risque" }) : /* @__PURE__ */ jsx("ul", { className: styles.slaList, children: sla.atRisk.map((ticket) => {
+          const now = /* @__PURE__ */ new Date();
+          const created = new Date(ticket.createdAt);
+          const elapsedMin = Math.round((now.getTime() - created.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);
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: styles.slaItem,
+              onClick: () => navigateToTicket(ticket.id),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.slaItemLeft, children: [
+                  /* @__PURE__ */ jsxs("span", { className: styles.slaItemNum, children: [
+                    "#",
+                    ticket.ticketNumber
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: styles.slaItemSubject, children: ticket.subject })
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: `${styles.slaItemTime} ${styles.slaTimeRisk}`, children: [
+                  formatSlaTime(remainingMin),
+                  " restant"
+                ] })
+              ]
+            },
+            ticket.id
+          );
         }) })
       ] })
     ] })
@@ -168,24 +271,34 @@ const SupportDashboardClient = () => {
   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 days = ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
     const base = Math.max(Math.floor(avg / 7), 0);
     return days.map((label, i) => ({
       label,
+      // Simple deterministic variation based on index
       value: Math.max(base + (i * 3 + 1) % 5 - 2, 0)
     }));
-  }, [stats, t]);
+  }, [stats]);
   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)) })
+    return /* @__PURE__ */ jsxs("div", { className: styles.page, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+        /* @__PURE__ */ jsx("h1", { className: styles.title, children: t("dashboard.title") }),
+        /* @__PURE__ */ jsx("p", { className: styles.subtitle, children: t("dashboard.loadingMetrics") })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.statsRow, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx("div", { className: styles.skeletonCard }, i)) }),
+      /* @__PURE__ */ jsxs("div", { className: styles.middleGrid, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.skeletonTable }),
+        /* @__PURE__ */ jsxs("div", { className: styles.rightColumn, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.skeletonChart }),
+          /* @__PURE__ */ jsx("div", { className: styles.skeletonChart })
+        ] })
+      ] })
     ] });
   }
   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: [
+    return /* @__PURE__ */ jsx("div", { className: styles.page, children: /* @__PURE__ */ jsxs("div", { className: styles.errorState, children: [
       /* @__PURE__ */ jsx("strong", { children: t("dashboard.loadError") }),
-      /* @__PURE__ */ jsx("p", { children: sessionExpired ? t("common.sessionExpired") : t("dashboard.cannotLoadStats") })
+      sessionExpired ? t("common.sessionExpired") : t("dashboard.cannotLoadStats")
     ] }) });
   }
   const openCount = stats.byStatus.open || 0;
@@ -197,98 +310,123 @@ const SupportDashboardClient = () => {
     if (typeof ticket.client === "string") return ticket.client;
     return ticket.client.company || ticket.client.firstName || "--";
   };
-  const statusDotColor = (status) => {
+  const getStatusDotClass = (status) => {
     switch (status) {
       case "open":
-        return "#22c55e";
+        return styles.statusDotOpen;
       case "waiting_client":
-        return "#eab308";
+        return styles.statusDotWaiting;
       case "resolved":
-        return "#94a3b8";
+        return styles.statusDotResolved;
       default:
-        return "#94a3b8";
+        return "";
     }
   };
-  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") })
+  return /* @__PURE__ */ jsxs("div", { className: styles.page, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsx("h1", { className: styles.title, children: t("dashboard.title") }),
+      /* @__PURE__ */ jsx("p", { className: styles.subtitle, 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", { className: styles.statsRow, 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__ */ jsxs("div", { className: styles.middleGrid, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.panel, children: [
+        /* @__PURE__ */ jsx("h2", { className: styles.panelTitle, children: t("dashboard.activeTickets") }),
+        tickets.length === 0 ? /* @__PURE__ */ jsx("div", { className: styles.emptyTable, children: t("dashboard.noActiveTickets") }) : /* @__PURE__ */ jsxs("table", { className: styles.ticketTable, 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("th", { children: t("dashboard.tableHeaders.status") }),
+            /* @__PURE__ */ jsx("th", { children: t("dashboard.tableHeaders.number") }),
+            /* @__PURE__ */ jsx("th", { children: t("dashboard.tableHeaders.subject") }),
+            /* @__PURE__ */ jsx("th", { children: t("dashboard.tableHeaders.client") }),
+            /* @__PURE__ */ jsx("th", { children: t("dashboard.tableHeaders.modified") }),
+            /* @__PURE__ */ jsx("th", {})
           ] }) }),
-          /* @__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__ */ jsx("tbody", { children: tickets.map((tk) => /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              onClick: () => {
+                window.location.href = `/admin/support/ticket?id=${tk.id}`;
+              },
+              children: [
+                /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: `${styles.statusDot} ${getStatusDotClass(tk.status)}` }) }),
+                /* @__PURE__ */ jsxs("td", { className: styles.ticketNum, children: [
+                  "#",
+                  tk.ticketNumber
+                ] }),
+                /* @__PURE__ */ jsx("td", { className: styles.ticketSubject, children: tk.subject }),
+                /* @__PURE__ */ jsx("td", { className: styles.ticketClient, children: getClientName(tk) }),
+                /* @__PURE__ */ jsx("td", { className: styles.ticketTime, children: timeAgo(tk.updatedAt) }),
+                /* @__PURE__ */ jsx("td", { className: styles.ticketArrow, children: "\u2192" })
+              ]
+            },
+            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", { className: styles.rightColumn, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.panel, children: [
+          /* @__PURE__ */ jsx("h2", { className: styles.panelTitle, children: t("dashboard.volume7days") }),
+          /* @__PURE__ */ jsx(VolumeChart, { data: volumeData })
         ] }),
-        /* @__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__ */ jsxs("div", { className: styles.panel, children: [
+          /* @__PURE__ */ jsx("h2", { className: styles.panelTitle, children: t("dashboard.csat") }),
+          /* @__PURE__ */ jsx(CSATRing, { score: stats.satisfactionAvg, count: stats.satisfactionCount })
         ] })
       ] })
     ] }),
     /* @__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: [
+    /* @__PURE__ */ jsxs("div", { className: styles.actionsRow, children: [
+      /* @__PURE__ */ jsx(Link, { href: "/admin/support/new-ticket", className: styles.actionBtn, children: t("dashboard.newTicketAction") }),
+      /* @__PURE__ */ jsxs(Link, { href: "/admin/support/emails", className: styles.actionBtn, 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" })
+        stats.pendingEmailsCount > 0 ? /* @__PURE__ */ jsx("span", { className: `${styles.badge} ${styles.badgeRed}`, children: stats.pendingEmailsCount }) : /* @__PURE__ */ jsx("span", { className: `${styles.badge} ${styles.badgeGreen}`, 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") })
+      /* @__PURE__ */ jsx(Link, { href: "/admin/support/crm", className: styles.actionBtn, children: t("dashboard.crm") }),
+      /* @__PURE__ */ jsx(Link, { href: "/admin/support/billing", className: styles.actionBtn, children: t("dashboard.preBilling") }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "/api/support/export-csv",
+          className: styles.actionBtn,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: t("dashboard.exportCsv")
+        }
+      )
     ] })
   ] });
 };