@consilioweb/payload-support 0.8.2 → 0.9.5

package/dist/views/TicketInboxView/client.cjs

@@ -5,10 +5,12 @@ var react = require('react');
 var navigation = require('next/navigation');
 var Link = require('next/link');
 var useTranslation = require('../../components/TicketConversation/hooks/useTranslation');
+var s = require('../../styles/TicketInbox.module.scss');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var Link__default = /*#__PURE__*/_interopDefault(Link);
+var s__default = /*#__PURE__*/_interopDefault(s);
 
 const STATUS_DOTS = {
   open: "#22c55e",
@@ -54,6 +56,14 @@ const TicketInboxClient = () => {
     if (urlTab && ["all", "open", "waiting_client", "resolved"].includes(urlTab)) return urlTab;
     return "all";
   });
+  react.useEffect(() => {
+    const urlTab = searchParams.get("tab");
+    if (urlTab && ["all", "open", "waiting_client", "resolved"].includes(urlTab)) {
+      setTab(urlTab);
+    } else if (!urlTab) {
+      setTab("all");
+    }
+  }, [searchParams]);
   const [search, setSearch] = react.useState("");
   const [sort, setSort] = react.useState("-updatedAt");
   const [counts, setCounts] = react.useState({ all: 0, open: 0, waiting: 0, resolved: 0 });
@@ -157,70 +167,54 @@ const TicketInboxClient = () => {
     { key: "waiting_client", label: t("inbox.tabs.waiting"), count: counts.waiting },
     { key: "resolved", label: t("inbox.tabs.resolved"), count: counts.resolved }
   ];
-  const S = {
-    page: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" },
-    header: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 },
-    title: { fontSize: 24, fontWeight: 700, margin: 0, color: "var(--theme-text)" },
-    headerRight: { display: "flex", gap: 10, alignItems: "center" },
-    searchWrap: { position: "relative", display: "flex", alignItems: "center" },
-    searchInput: { padding: "6px 12px 6px 30px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, background: "var(--theme-elevation-0)", color: "var(--theme-text)", width: 200 },
-    newTicketBtn: { padding: "7px 14px", borderRadius: 8, background: "#2563eb", color: "#fff", fontSize: 13, fontWeight: 600, textDecoration: "none", whiteSpace: "nowrap" },
-    tabsRow: { display: "flex", gap: 4, marginBottom: 12, borderBottom: "1px solid var(--theme-elevation-200)", paddingBottom: 8 },
-    tab: { padding: "6px 12px", borderRadius: 6, border: "none", background: "none", cursor: "pointer", fontSize: 13, color: "var(--theme-elevation-500)", fontWeight: 500 },
-    tabActive: { background: "var(--theme-elevation-100)", color: "var(--theme-text)", fontWeight: 700 },
-    sortRow: { display: "flex", alignItems: "center", marginBottom: 12 },
-    sortSelect: { padding: "4px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, background: "var(--theme-elevation-0)", color: "var(--theme-text)", cursor: "pointer" },
-    loading: { padding: 40, textAlign: "center", color: "#94a3b8" },
-    empty: { padding: 60, textAlign: "center", color: "#94a3b8" },
-    list: { display: "flex", flexDirection: "column", gap: 1 },
-    row: { display: "grid", gridTemplateColumns: "20px 10px 60px 70px 1fr 140px 80px 4px 50px 10px", gap: 8, alignItems: "center", padding: "10px 12px", borderRadius: 8, textDecoration: "none", color: "var(--theme-text)", fontSize: 13, cursor: "pointer", transition: "background 100ms", background: "var(--theme-elevation-0)" },
-    statusDot: { width: 8, height: 8, borderRadius: "50%" },
-    priorityBar: { width: 4, height: 20, borderRadius: 2 },
-    unreadDot: { width: 8, height: 8, borderRadius: "50%", background: "#2563eb" },
-    keyboardHints: { display: "flex", gap: 12, marginTop: 16, fontSize: 11, color: "var(--theme-elevation-400)" }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.page, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: S.title, children: t("inbox.title") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.headerRight, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.searchWrap, children: /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "text",
-            style: S.searchInput,
-            placeholder: t("inbox.searchPlaceholder"),
-            value: search,
-            onChange: (e) => setSearch(e.target.value)
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: "/admin/support/new-ticket", style: S.newTicketBtn, children: t("inbox.newTicketBtn") })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.page, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: s__default.default.title, children: t("inbox.title") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.headerRight, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.searchWrap, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: s__default.default.searchIcon, width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 11l3.5 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              className: s__default.default.searchInput,
+              placeholder: t("inbox.searchPlaceholder"),
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.searchHint, children: "\u2318K" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: "/admin/support/new-ticket", className: s__default.default.newTicketBtn, children: t("inbox.newTicketBtn") })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.tabsRow, children: tabs.map((tb) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.tabs, children: tabs.map((tk) => /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
-        style: { ...S.tab, ...tab === tb.key ? S.tabActive : {} },
+        className: `${s__default.default.tab} ${tab === tk.key ? s__default.default.tabActive : ""}`,
         onClick: () => {
-          setTab(tb.key);
+          setTab(tk.key);
           setSelectedIdx(-1);
         },
         children: [
-          tb.label,
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { opacity: 0.6 }, children: [
+          tk.label,
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.tabCount, children: [
             "(",
-            tb.count,
+            tk.count,
             ")"
           ] })
         ]
       },
-      tb.key
+      tk.key
     )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.sortRow, children: checkedIds.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flex: 1 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sortRow, children: checkedIds.size > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flex: 1 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--theme-text)" }, children: checkedIds.size > 1 ? t("inbox.selectedPlural", { count: String(checkedIds.size) }) : t("inbox.selected", { count: String(checkedIds.size) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { style: S.sortSelect, onClick: () => handleBulkAction("close"), disabled: bulkProcessing, children: t("inbox.closeAction") }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { style: S.sortSelect, onClick: () => handleBulkAction("reopen"), disabled: bulkProcessing, children: t("inbox.reopenAction") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("select", { style: S.sortSelect, value: bulkAction, onChange: (e) => {
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.sortSelect, onClick: () => handleBulkAction("close"), disabled: bulkProcessing, children: t("inbox.closeAction") }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.sortSelect, onClick: () => handleBulkAction("reopen"), disabled: bulkProcessing, children: t("inbox.reopenAction") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("select", { className: s__default.default.sortSelect, value: bulkAction, onChange: (e) => {
         if (e.target.value) handleBulkAction(e.target.value);
         setBulkAction("");
       }, children: [
@@ -228,25 +222,28 @@ const TicketInboxClient = () => {
         /* @__PURE__ */ jsxRuntime.jsx("option", { value: "set_priority", children: t("inbox.changePriority") }),
         /* @__PURE__ */ jsxRuntime.jsx("option", { value: "delete", children: t("inbox.deleteAction") })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { style: { ...S.sortSelect, marginLeft: "auto" }, onClick: () => setCheckedIds(/* @__PURE__ */ new Set()), children: t("inbox.deselect") })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("select", { style: S.sortSelect, value: sort, onChange: (e) => setSort(e.target.value), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.sortSelect, onClick: () => setCheckedIds(/* @__PURE__ */ new Set()), style: { marginLeft: "auto" }, children: t("inbox.deselect") })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("select", { className: s__default.default.sortSelect, value: sort, onChange: (e) => setSort(e.target.value), children: [
       /* @__PURE__ */ jsxRuntime.jsx("option", { value: "-updatedAt", children: t("inbox.sort.newest") }),
       /* @__PURE__ */ jsxRuntime.jsx("option", { value: "updatedAt", children: t("inbox.sort.oldest") }),
       /* @__PURE__ */ jsxRuntime.jsx("option", { value: "-createdAt", children: t("inbox.sort.created") }),
       /* @__PURE__ */ jsxRuntime.jsx("option", { value: "priority", children: t("inbox.sort.priority") })
     ] }) }),
-    loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.loading, children: t("common.loading") }) : tickets.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.empty, children: t("inbox.empty") }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.list, children: tickets.map((tk, idx) => {
+    loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.loading, children: t("common.loading") }) : tickets.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.empty, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.emptyIcon, children: "--" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.emptyText, children: t("inbox.empty") })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.list, children: tickets.map((tk, idx) => {
       const clientObj = typeof tk.client === "object" ? tk.client : null;
       const clientName = clientObj ? `${clientObj.firstName || ""} ${clientObj.lastName || ""}`.trim() : "";
       const clientCompany = clientObj?.company || "";
-      const displayClient = clientName ? `${clientName}${clientCompany ? `, ${clientCompany}` : ""}` : "--";
+      const displayClient = clientName ? `${clientName}${clientCompany ? `, ${clientCompany}` : ""}` : "\u2014";
       const isUnread = tk.lastClientMessageAt && (!tk.lastAdminReadAt || new Date(tk.lastClientMessageAt) > new Date(tk.lastAdminReadAt));
       const priorityColor = PRIORITY_COLORS[tk.priority] || "transparent";
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "a",
         {
           href: `/admin/support/ticket?id=${tk.id}`,
-          style: { ...S.row, ...idx === selectedIdx ? { background: "var(--theme-elevation-100)" } : {} },
+          className: `${s__default.default.row} ${idx === selectedIdx ? s__default.default.rowSelected : ""}`,
           onClick: (e) => {
             e.preventDefault();
             window.location.href = `/admin/support/ticket?id=${tk.id}`;
@@ -262,25 +259,25 @@ const TicketInboxClient = () => {
                 style: { width: 14, height: 14, cursor: "pointer", accentColor: "#2563eb" }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...S.statusDot, backgroundColor: STATUS_DOTS[tk.status] || "#94a3b8" } }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 11, color: "var(--theme-elevation-500)" }, children: STATUS_LABEL_KEYS[tk.status] ? t(STATUS_LABEL_KEYS[tk.status]) : tk.status }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: 12, color: "var(--theme-elevation-400)" }, children: tk.ticketNumber }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: tk.subject }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "var(--theme-elevation-500)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: displayClient }),
-            tk.category ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 11, color: "var(--theme-elevation-400)" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.statusDot, style: { backgroundColor: STATUS_DOTS[tk.status] || "#94a3b8" } }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.statusText, children: t(STATUS_LABEL_KEYS[tk.status] || "ticket.status.open") }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.ticketNum, children: tk.ticketNumber }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.subject, children: tk.subject }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.client, children: displayClient }),
+            tk.category ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.categoryChip, children: [
               "[",
-              CATEGORY_LABEL_KEYS[tk.category] ? t(CATEGORY_LABEL_KEYS[tk.category]) : tk.category,
+              t(CATEGORY_LABEL_KEYS[tk.category] || "ticket.category.bug"),
               "]"
             ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...S.priorityBar, backgroundColor: priorityColor } }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 11, color: "var(--theme-elevation-400)", textAlign: "right" }, children: relativeTime(tk.updatedAt) }),
-            isUnread ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: S.unreadDot }) : /* @__PURE__ */ jsxRuntime.jsx("span", {})
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.priorityBar, style: { backgroundColor: priorityColor } }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.timeAgo, children: relativeTime(tk.updatedAt) }),
+            isUnread ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.unreadDot }) : /* @__PURE__ */ jsxRuntime.jsx("span", {})
           ]
         },
         tk.id
       );
     }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.keyboardHints, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.keyboardHints, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("kbd", { children: "\u2191" }),
         /* @__PURE__ */ jsxRuntime.jsx("kbd", { children: "\u2193" }),

package/dist/views/TicketInboxView/client.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
+import s from '../../styles/TicketInbox.module.scss';
 
 const STATUS_DOTS = {
   open: "#22c55e",
@@ -49,6 +50,14 @@ const TicketInboxClient = () => {
     if (urlTab && ["all", "open", "waiting_client", "resolved"].includes(urlTab)) return urlTab;
     return "all";
   });
+  useEffect(() => {
+    const urlTab = searchParams.get("tab");
+    if (urlTab && ["all", "open", "waiting_client", "resolved"].includes(urlTab)) {
+      setTab(urlTab);
+    } else if (!urlTab) {
+      setTab("all");
+    }
+  }, [searchParams]);
   const [search, setSearch] = useState("");
   const [sort, setSort] = useState("-updatedAt");
   const [counts, setCounts] = useState({ all: 0, open: 0, waiting: 0, resolved: 0 });
@@ -152,70 +161,54 @@ const TicketInboxClient = () => {
     { key: "waiting_client", label: t("inbox.tabs.waiting"), count: counts.waiting },
     { key: "resolved", label: t("inbox.tabs.resolved"), count: counts.resolved }
   ];
-  const S = {
-    page: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" },
-    header: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 },
-    title: { fontSize: 24, fontWeight: 700, margin: 0, color: "var(--theme-text)" },
-    headerRight: { display: "flex", gap: 10, alignItems: "center" },
-    searchWrap: { position: "relative", display: "flex", alignItems: "center" },
-    searchInput: { padding: "6px 12px 6px 30px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, background: "var(--theme-elevation-0)", color: "var(--theme-text)", width: 200 },
-    newTicketBtn: { padding: "7px 14px", borderRadius: 8, background: "#2563eb", color: "#fff", fontSize: 13, fontWeight: 600, textDecoration: "none", whiteSpace: "nowrap" },
-    tabsRow: { display: "flex", gap: 4, marginBottom: 12, borderBottom: "1px solid var(--theme-elevation-200)", paddingBottom: 8 },
-    tab: { padding: "6px 12px", borderRadius: 6, border: "none", background: "none", cursor: "pointer", fontSize: 13, color: "var(--theme-elevation-500)", fontWeight: 500 },
-    tabActive: { background: "var(--theme-elevation-100)", color: "var(--theme-text)", fontWeight: 700 },
-    sortRow: { display: "flex", alignItems: "center", marginBottom: 12 },
-    sortSelect: { padding: "4px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, background: "var(--theme-elevation-0)", color: "var(--theme-text)", cursor: "pointer" },
-    loading: { padding: 40, textAlign: "center", color: "#94a3b8" },
-    empty: { padding: 60, textAlign: "center", color: "#94a3b8" },
-    list: { display: "flex", flexDirection: "column", gap: 1 },
-    row: { display: "grid", gridTemplateColumns: "20px 10px 60px 70px 1fr 140px 80px 4px 50px 10px", gap: 8, alignItems: "center", padding: "10px 12px", borderRadius: 8, textDecoration: "none", color: "var(--theme-text)", fontSize: 13, cursor: "pointer", transition: "background 100ms", background: "var(--theme-elevation-0)" },
-    statusDot: { width: 8, height: 8, borderRadius: "50%" },
-    priorityBar: { width: 4, height: 20, borderRadius: 2 },
-    unreadDot: { width: 8, height: 8, borderRadius: "50%", background: "#2563eb" },
-    keyboardHints: { display: "flex", gap: 12, marginTop: 16, fontSize: 11, color: "var(--theme-elevation-400)" }
-  };
-  return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
-    /* @__PURE__ */ jsxs("div", { style: S.header, children: [
-      /* @__PURE__ */ jsx("h1", { style: S.title, children: t("inbox.title") }),
-      /* @__PURE__ */ jsxs("div", { style: S.headerRight, children: [
-        /* @__PURE__ */ jsx("div", { style: S.searchWrap, children: /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            style: S.searchInput,
-            placeholder: t("inbox.searchPlaceholder"),
-            value: search,
-            onChange: (e) => setSearch(e.target.value)
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Link, { href: "/admin/support/new-ticket", style: S.newTicketBtn, children: t("inbox.newTicketBtn") })
+  return /* @__PURE__ */ jsxs("div", { className: s.page, children: [
+    /* @__PURE__ */ jsxs("div", { className: s.header, children: [
+      /* @__PURE__ */ jsx("h1", { className: s.title, children: t("inbox.title") }),
+      /* @__PURE__ */ jsxs("div", { className: s.headerRight, children: [
+        /* @__PURE__ */ jsxs("div", { className: s.searchWrap, children: [
+          /* @__PURE__ */ jsxs("svg", { className: s.searchIcon, width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.5" }),
+            /* @__PURE__ */ jsx("path", { d: "M11 11l3.5 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: s.searchInput,
+              placeholder: t("inbox.searchPlaceholder"),
+              value: search,
+              onChange: (e) => setSearch(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: s.searchHint, children: "\u2318K" })
+        ] }),
+        /* @__PURE__ */ jsx(Link, { href: "/admin/support/new-ticket", className: s.newTicketBtn, children: t("inbox.newTicketBtn") })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: S.tabsRow, children: tabs.map((tb) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: s.tabs, children: tabs.map((tk) => /* @__PURE__ */ jsxs(
       "button",
       {
-        style: { ...S.tab, ...tab === tb.key ? S.tabActive : {} },
+        className: `${s.tab} ${tab === tk.key ? s.tabActive : ""}`,
         onClick: () => {
-          setTab(tb.key);
+          setTab(tk.key);
           setSelectedIdx(-1);
         },
         children: [
-          tb.label,
-          " ",
-          /* @__PURE__ */ jsxs("span", { style: { opacity: 0.6 }, children: [
+          tk.label,
+          /* @__PURE__ */ jsxs("span", { className: s.tabCount, children: [
             "(",
-            tb.count,
+            tk.count,
             ")"
           ] })
         ]
       },
-      tb.key
+      tk.key
     )) }),
-    /* @__PURE__ */ jsx("div", { style: S.sortRow, children: checkedIds.size > 0 ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flex: 1 }, children: [
+    /* @__PURE__ */ jsx("div", { className: s.sortRow, children: checkedIds.size > 0 ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", flex: 1 }, children: [
       /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--theme-text)" }, children: checkedIds.size > 1 ? t("inbox.selectedPlural", { count: String(checkedIds.size) }) : t("inbox.selected", { count: String(checkedIds.size) }) }),
-      /* @__PURE__ */ jsx("button", { style: S.sortSelect, onClick: () => handleBulkAction("close"), disabled: bulkProcessing, children: t("inbox.closeAction") }),
-      /* @__PURE__ */ jsx("button", { style: S.sortSelect, onClick: () => handleBulkAction("reopen"), disabled: bulkProcessing, children: t("inbox.reopenAction") }),
-      /* @__PURE__ */ jsxs("select", { style: S.sortSelect, value: bulkAction, onChange: (e) => {
+      /* @__PURE__ */ jsx("button", { className: s.sortSelect, onClick: () => handleBulkAction("close"), disabled: bulkProcessing, children: t("inbox.closeAction") }),
+      /* @__PURE__ */ jsx("button", { className: s.sortSelect, onClick: () => handleBulkAction("reopen"), disabled: bulkProcessing, children: t("inbox.reopenAction") }),
+      /* @__PURE__ */ jsxs("select", { className: s.sortSelect, value: bulkAction, onChange: (e) => {
         if (e.target.value) handleBulkAction(e.target.value);
         setBulkAction("");
       }, children: [
@@ -223,25 +216,28 @@ const TicketInboxClient = () => {
         /* @__PURE__ */ jsx("option", { value: "set_priority", children: t("inbox.changePriority") }),
         /* @__PURE__ */ jsx("option", { value: "delete", children: t("inbox.deleteAction") })
       ] }),
-      /* @__PURE__ */ jsx("button", { style: { ...S.sortSelect, marginLeft: "auto" }, onClick: () => setCheckedIds(/* @__PURE__ */ new Set()), children: t("inbox.deselect") })
-    ] }) : /* @__PURE__ */ jsxs("select", { style: S.sortSelect, value: sort, onChange: (e) => setSort(e.target.value), children: [
+      /* @__PURE__ */ jsx("button", { className: s.sortSelect, onClick: () => setCheckedIds(/* @__PURE__ */ new Set()), style: { marginLeft: "auto" }, children: t("inbox.deselect") })
+    ] }) : /* @__PURE__ */ jsxs("select", { className: s.sortSelect, value: sort, onChange: (e) => setSort(e.target.value), children: [
       /* @__PURE__ */ jsx("option", { value: "-updatedAt", children: t("inbox.sort.newest") }),
       /* @__PURE__ */ jsx("option", { value: "updatedAt", children: t("inbox.sort.oldest") }),
       /* @__PURE__ */ jsx("option", { value: "-createdAt", children: t("inbox.sort.created") }),
       /* @__PURE__ */ jsx("option", { value: "priority", children: t("inbox.sort.priority") })
     ] }) }),
-    loading ? /* @__PURE__ */ jsx("div", { style: S.loading, children: t("common.loading") }) : tickets.length === 0 ? /* @__PURE__ */ jsx("div", { style: S.empty, children: t("inbox.empty") }) : /* @__PURE__ */ jsx("div", { style: S.list, children: tickets.map((tk, idx) => {
+    loading ? /* @__PURE__ */ jsx("div", { className: s.loading, children: t("common.loading") }) : tickets.length === 0 ? /* @__PURE__ */ jsxs("div", { className: s.empty, children: [
+      /* @__PURE__ */ jsx("div", { className: s.emptyIcon, children: "--" }),
+      /* @__PURE__ */ jsx("div", { className: s.emptyText, children: t("inbox.empty") })
+    ] }) : /* @__PURE__ */ jsx("div", { className: s.list, children: tickets.map((tk, idx) => {
       const clientObj = typeof tk.client === "object" ? tk.client : null;
       const clientName = clientObj ? `${clientObj.firstName || ""} ${clientObj.lastName || ""}`.trim() : "";
       const clientCompany = clientObj?.company || "";
-      const displayClient = clientName ? `${clientName}${clientCompany ? `, ${clientCompany}` : ""}` : "--";
+      const displayClient = clientName ? `${clientName}${clientCompany ? `, ${clientCompany}` : ""}` : "\u2014";
       const isUnread = tk.lastClientMessageAt && (!tk.lastAdminReadAt || new Date(tk.lastClientMessageAt) > new Date(tk.lastAdminReadAt));
       const priorityColor = PRIORITY_COLORS[tk.priority] || "transparent";
       return /* @__PURE__ */ jsxs(
         "a",
         {
           href: `/admin/support/ticket?id=${tk.id}`,
-          style: { ...S.row, ...idx === selectedIdx ? { background: "var(--theme-elevation-100)" } : {} },
+          className: `${s.row} ${idx === selectedIdx ? s.rowSelected : ""}`,
           onClick: (e) => {
             e.preventDefault();
             window.location.href = `/admin/support/ticket?id=${tk.id}`;
@@ -257,25 +253,25 @@ const TicketInboxClient = () => {
                 style: { width: 14, height: 14, cursor: "pointer", accentColor: "#2563eb" }
               }
             ),
-            /* @__PURE__ */ jsx("div", { style: { ...S.statusDot, backgroundColor: STATUS_DOTS[tk.status] || "#94a3b8" } }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--theme-elevation-500)" }, children: STATUS_LABEL_KEYS[tk.status] ? t(STATUS_LABEL_KEYS[tk.status]) : tk.status }),
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 12, color: "var(--theme-elevation-400)" }, children: tk.ticketNumber }),
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: tk.subject }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--theme-elevation-500)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: displayClient }),
-            tk.category ? /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "var(--theme-elevation-400)" }, children: [
+            /* @__PURE__ */ jsx("div", { className: s.statusDot, style: { backgroundColor: STATUS_DOTS[tk.status] || "#94a3b8" } }),
+            /* @__PURE__ */ jsx("span", { className: s.statusText, children: t(STATUS_LABEL_KEYS[tk.status] || "ticket.status.open") }),
+            /* @__PURE__ */ jsx("span", { className: s.ticketNum, children: tk.ticketNumber }),
+            /* @__PURE__ */ jsx("span", { className: s.subject, children: tk.subject }),
+            /* @__PURE__ */ jsx("span", { className: s.client, children: displayClient }),
+            tk.category ? /* @__PURE__ */ jsxs("span", { className: s.categoryChip, children: [
               "[",
-              CATEGORY_LABEL_KEYS[tk.category] ? t(CATEGORY_LABEL_KEYS[tk.category]) : tk.category,
+              t(CATEGORY_LABEL_KEYS[tk.category] || "ticket.category.bug"),
               "]"
             ] }) : /* @__PURE__ */ jsx("span", {}),
-            /* @__PURE__ */ jsx("div", { style: { ...S.priorityBar, backgroundColor: priorityColor } }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--theme-elevation-400)", textAlign: "right" }, children: relativeTime(tk.updatedAt) }),
-            isUnread ? /* @__PURE__ */ jsx("div", { style: S.unreadDot }) : /* @__PURE__ */ jsx("span", {})
+            /* @__PURE__ */ jsx("div", { className: s.priorityBar, style: { backgroundColor: priorityColor } }),
+            /* @__PURE__ */ jsx("span", { className: s.timeAgo, children: relativeTime(tk.updatedAt) }),
+            isUnread ? /* @__PURE__ */ jsx("div", { className: s.unreadDot }) : /* @__PURE__ */ jsx("span", {})
           ]
         },
         tk.id
       );
     }) }),
-    /* @__PURE__ */ jsxs("div", { style: S.keyboardHints, children: [
+    /* @__PURE__ */ jsxs("div", { className: s.keyboardHints, children: [
       /* @__PURE__ */ jsxs("span", { children: [
         /* @__PURE__ */ jsx("kbd", { children: "\u2191" }),
         /* @__PURE__ */ jsx("kbd", { children: "\u2193" }),

package/dist/views/TicketingSettingsView/client.cjs

@@ -6,7 +6,8 @@ var lucideReact = require('lucide-react');
 var adminTokens = require('../shared/adminTokens');
 var AdminViewHeader = require('../shared/AdminViewHeader');
 var config = require('../../components/TicketConversation/config');
-var ts = require('./TicketingSettings.module.scss');
+var useTranslation = require('../../components/TicketConversation/hooks/useTranslation');
+var ts = require('../../styles/TicketingSettings.module.scss');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -203,6 +204,7 @@ const FieldRow = ({ label, description, children }) => /* @__PURE__ */ jsxRuntim
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: ts__default.default.fieldContent, children })
 ] });
 const TicketingSettingsClient = () => {
+  const { t } = useTranslation.useTranslation();
   const [features, setFeatures] = react.useState(() => config.getFeatures());
   const [settings, setSettings] = react.useState(DEFAULT_SETTINGS);
   const [signature, setSignature] = react.useState("");
@@ -276,27 +278,27 @@ const TicketingSettingsClient = () => {
       AdminViewHeader.AdminViewHeader,
       {
         icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { size: 24 }),
-        title: "Configuration du module Support",
-        subtitle: `${enabledCount}/${totalCount} fonctionnalites activees`,
+        title: t("settingsView.configTitle"),
+        subtitle: t("settings.subtitle", { enabled: String(enabledCount), total: String(totalCount) }),
         actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleReset, style: adminTokens.btnStyle("var(--theme-elevation-400)", { small: true }), children: "Reinitialiser" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: handleReset, style: adminTokens.btnStyle("var(--theme-elevation-400)", { small: true }), children: t("settingsView.reset") }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: handleSave,
               disabled: saving,
               style: adminTokens.btnStyle(saved ? adminTokens.V.green : adminTokens.V.blue, { small: true }),
-              children: saving ? "..." : saved ? "\u2713 Sauvegarde" : "Sauvegarder"
+              children: saving ? "..." : saved ? t("settingsView.saved") : t("common.save")
             }
           )
         ] })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: ts__default.default.intro, children: "Configurez le module de support : fonctionnalit\xE9s, email, IA, SLA et fermeture automatique. Les changements prennent effet imm\xE9diatement apr\xE8s sauvegarde (rechargez la page du ticket)." }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: ts__default.default.intro, children: t("settingsView.intro") }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       CollapsibleSection,
       {
-        title: "Fonctionnalit\xE9s",
+        title: t("settingsView.features"),
         icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { size: 16 }),
         color: adminTokens.V.blue,
         badge: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: ts__default.default.badge, style: { backgroundColor: "#dbeafe", color: "#1e40af" }, children: [
@@ -305,7 +307,7 @@ const TicketingSettingsClient = () => {
           totalCount
         ] }),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: ts__default.default.sectionDescription, children: "Activez ou desactivez les fonctionnalites du module. Les fonctionnalites desactivees sont completement masquees de l'interface." }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: ts__default.default.sectionDescription, children: t("settingsView.featuresDescription") }),
           CATEGORIES.map((cat) => {
             const categoryFeatures = FEATURE_LIST.filter((f) => f.category === cat.key);
             return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ts__default.default.categoryGroup, children: [

package/dist/views/TicketingSettingsView/client.js

@@ -5,7 +5,8 @@ import { Settings, Mail, Bot, Clock, Timer, Globe, FileSignature } from 'lucide-
 import { V, btnStyle } from '../shared/adminTokens.js';
 import { AdminViewHeader } from '../shared/AdminViewHeader.js';
 import { getFeatures, saveFeatures, DEFAULT_FEATURES } from '../../components/TicketConversation/config.js';
-import ts from './TicketingSettings.module.scss';
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
+import ts from '../../styles/TicketingSettings.module.scss';
 
 const DEFAULT_SETTINGS = {
   email: {
@@ -198,6 +199,7 @@ const FieldRow = ({ label, description, children }) => /* @__PURE__ */ jsxs("div
   /* @__PURE__ */ jsx("div", { className: ts.fieldContent, children })
 ] });
 const TicketingSettingsClient = () => {
+  const { t } = useTranslation();
   const [features, setFeatures] = useState(() => getFeatures());
   const [settings, setSettings] = useState(DEFAULT_SETTINGS);
   const [signature, setSignature] = useState("");
@@ -271,27 +273,27 @@ const TicketingSettingsClient = () => {
       AdminViewHeader,
       {
         icon: /* @__PURE__ */ jsx(Settings, { size: 24 }),
-        title: "Configuration du module Support",
-        subtitle: `${enabledCount}/${totalCount} fonctionnalites activees`,
+        title: t("settingsView.configTitle"),
+        subtitle: t("settings.subtitle", { enabled: String(enabledCount), total: String(totalCount) }),
         actions: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-          /* @__PURE__ */ jsx("button", { onClick: handleReset, style: btnStyle("var(--theme-elevation-400)", { small: true }), children: "Reinitialiser" }),
+          /* @__PURE__ */ jsx("button", { onClick: handleReset, style: btnStyle("var(--theme-elevation-400)", { small: true }), children: t("settingsView.reset") }),
           /* @__PURE__ */ jsx(
             "button",
             {
               onClick: handleSave,
               disabled: saving,
               style: btnStyle(saved ? V.green : V.blue, { small: true }),
-              children: saving ? "..." : saved ? "\u2713 Sauvegarde" : "Sauvegarder"
+              children: saving ? "..." : saved ? t("settingsView.saved") : t("common.save")
             }
           )
         ] })
       }
     ),
-    /* @__PURE__ */ jsx("p", { className: ts.intro, children: "Configurez le module de support : fonctionnalit\xE9s, email, IA, SLA et fermeture automatique. Les changements prennent effet imm\xE9diatement apr\xE8s sauvegarde (rechargez la page du ticket)." }),
+    /* @__PURE__ */ jsx("p", { className: ts.intro, children: t("settingsView.intro") }),
     /* @__PURE__ */ jsxs(
       CollapsibleSection,
       {
-        title: "Fonctionnalit\xE9s",
+        title: t("settingsView.features"),
         icon: /* @__PURE__ */ jsx(Settings, { size: 16 }),
         color: V.blue,
         badge: /* @__PURE__ */ jsxs("span", { className: ts.badge, style: { backgroundColor: "#dbeafe", color: "#1e40af" }, children: [
@@ -300,7 +302,7 @@ const TicketingSettingsClient = () => {
           totalCount
         ] }),
         children: [
-          /* @__PURE__ */ jsx("p", { className: ts.sectionDescription, children: "Activez ou desactivez les fonctionnalites du module. Les fonctionnalites desactivees sont completement masquees de l'interface." }),
+          /* @__PURE__ */ jsx("p", { className: ts.sectionDescription, children: t("settingsView.featuresDescription") }),
           CATEGORIES.map((cat) => {
             const categoryFeatures = FEATURE_LIST.filter((f) => f.category === cat.key);
             return /* @__PURE__ */ jsxs("div", { className: ts.categoryGroup, children: [