@consilioweb/payload-support 0.8.2 → 0.9.4

package/dist/views/PendingEmailsView/client.js

@@ -1,117 +1,371 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useCallback, useEffect } from 'react';
+import { Inbox, Paperclip, ChevronUp, ChevronDown, Plus, Link2, X, Search } from 'lucide-react';
+import { SkeletonDashboard } from '../shared/Skeleton.js';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
+import styles from '../../styles/PendingEmails.module.scss';
 
 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 < 1) return "\xE0 l'instant";
   if (mins < 60) return `il y a ${mins}min`;
   const hours = Math.floor(mins / 60);
   if (hours < 24) return `il y a ${hours}h`;
-  return `il y a ${Math.floor(hours / 24)}j`;
+  const days = Math.floor(hours / 24);
+  return `il y a ${days}j`;
 }
-function EmailCard({ email, onProcess, processing, t }) {
-  const [expanded, setExpanded] = useState(false);
-  const [showLinkModal, setShowLinkModal] = useState(false);
-  const [linkSearch, setLinkSearch] = useState("");
-  const [linkResults, setLinkResults] = useState([]);
-  const isPending = email.status === "pending";
-  const preview = email.body.slice(0, 200) + (email.body.length > 200 ? "..." : "");
-  const suggestions = email.suggestedTickets || [];
-  useEffect(() => {
-    if (!linkSearch || linkSearch.length < 2) {
-      setLinkResults([]);
+function TicketSearchModal({
+  suggestions,
+  onSelect,
+  onClose
+}) {
+  const [search, setSearch] = useState("");
+  const [results, setResults] = useState([]);
+  const [searching, setSearching] = useState(false);
+  const doSearch = useCallback(async (q) => {
+    if (q.length < 2) {
+      setResults([]);
       return;
     }
-    const timer = setTimeout(async () => {
-      try {
-        const res = await fetch(`/api/tickets?where[or][0][ticketNumber][contains]=${encodeURIComponent(linkSearch)}&where[or][1][subject][contains]=${encodeURIComponent(linkSearch)}&limit=10&sort=-updatedAt&depth=0`);
-        if (res.ok) {
-          const data = await res.json();
-          setLinkResults(data.docs.map((d) => ({ id: d.id, ticketNumber: d.ticketNumber, subject: d.subject })));
+    setSearching(true);
+    try {
+      const res = await fetch(`/api/tickets?where[or][0][ticketNumber][contains]=${encodeURIComponent(q)}&where[or][1][subject][contains]=${encodeURIComponent(q)}&limit=10&sort=-updatedAt&depth=0`);
+      if (res.ok) {
+        const data = await res.json();
+        setResults(data.docs.map((d) => ({
+          id: d.id,
+          ticketNumber: d.ticketNumber,
+          subject: d.subject
+        })));
+      }
+    } catch {
+    }
+    setSearching(false);
+  }, []);
+  useEffect(() => {
+    const timer = setTimeout(() => doSearch(search), 300);
+    return () => clearTimeout(timer);
+  }, [search, doSearch]);
+  const scoreClass = (score) => score >= 0.7 ? styles.scoreHigh : score >= 0.5 ? styles.scoreMedium : styles.scoreLow;
+  return /* @__PURE__ */ jsx("div", { className: styles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { className: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.modalHeader, children: [
+      /* @__PURE__ */ jsx("h3", { className: styles.modalTitle, children: "Rattacher a un ticket" }),
+      /* @__PURE__ */ jsx("button", { onClick: onClose, className: styles.modalClose, children: /* @__PURE__ */ jsx(X, { size: 20 }) })
+    ] }),
+    suggestions.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles.sectionBlock, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.sectionLabel, children: "Suggestions" }),
+      suggestions.map((s) => /* @__PURE__ */ jsxs("button", { onClick: () => onSelect(s.id), className: styles.resultRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.resultTicketNum, children: s.ticketNumber }),
+        /* @__PURE__ */ jsx("span", { className: styles.resultSubject, children: s.subject }),
+        /* @__PURE__ */ jsxs("span", { className: `${styles.scoreBadge} ${scoreClass(s.score)}`, children: [
+          Math.round(s.score * 100),
+          "%"
+        ] })
+      ] }, s.id))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.searchWrap, children: [
+      /* @__PURE__ */ jsx(Search, { size: 16, className: styles.searchIcon }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Rechercher un ticket (TK-0042, sujet...)...",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          className: styles.searchInput
         }
-      } catch (err) {
-        console.warn("[support] ticket search error:", err);
+      )
+    ] }),
+    searching && /* @__PURE__ */ jsx("div", { className: styles.searchingHint, children: "Recherche..." }),
+    results.map((r) => /* @__PURE__ */ jsxs("button", { onClick: () => onSelect(r.id), className: styles.resultRow, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.resultTicketNum, children: r.ticketNumber }),
+      /* @__PURE__ */ jsx("span", { className: styles.resultSubject, children: r.subject })
+    ] }, r.id)),
+    search.length >= 2 && !searching && results.length === 0 && /* @__PURE__ */ jsx("div", { className: styles.noResults, children: "Aucun ticket trouve" })
+  ] }) });
+}
+function ClientPickerModal({
+  defaultEmail,
+  detectedClient,
+  onSelect,
+  onClose
+}) {
+  const [search, setSearch] = useState("");
+  const [results, setResults] = useState([]);
+  const [searching, setSearching] = useState(false);
+  const [showCreate, setShowCreate] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [newClient, setNewClient] = useState({ firstName: "", lastName: "", email: defaultEmail, company: "" });
+  const [createError, setCreateError] = useState("");
+  const doSearch = useCallback(async (q) => {
+    if (q.length < 2) {
+      setResults([]);
+      return;
+    }
+    setSearching(true);
+    try {
+      const res = await fetch(`/api/support-clients?where[or][0][email][contains]=${encodeURIComponent(q)}&where[or][1][firstName][contains]=${encodeURIComponent(q)}&where[or][2][lastName][contains]=${encodeURIComponent(q)}&where[or][3][company][contains]=${encodeURIComponent(q)}&limit=10&sort=-updatedAt&depth=0`);
+      if (res.ok) {
+        const data = await res.json();
+        setResults(data.docs.map((d) => ({
+          id: d.id,
+          firstName: d.firstName,
+          lastName: d.lastName,
+          email: d.email,
+          company: d.company
+        })));
       }
-    }, 300);
+    } catch {
+    }
+    setSearching(false);
+  }, []);
+  useEffect(() => {
+    const timer = setTimeout(() => doSearch(search), 300);
     return () => clearTimeout(timer);
-  }, [linkSearch]);
-  const S = {
-    card: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)", marginBottom: 12, opacity: processing ? 0.5 : 1 },
-    senderName: { fontWeight: 600, fontSize: 14 },
-    senderEmail: { fontSize: 12, color: "var(--theme-elevation-500)" },
-    subject: { fontWeight: 600, fontSize: 13, marginTop: 4 },
-    meta: { fontSize: 12, color: "var(--theme-elevation-400)", marginTop: 2 },
-    body: { fontSize: 13, color: "var(--theme-text)", padding: "8px 0", whiteSpace: "pre-wrap", lineHeight: 1.5 },
-    actions: { display: "flex", gap: 8, marginTop: 8 },
-    btn: { padding: "6px 14px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, fontWeight: 600, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
-    btnCreate: { background: "#2563eb", color: "#fff", border: "none" },
-    btnIgnore: { color: "#dc2626", borderColor: "#dc2626" },
-    overlay: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 100 },
-    modal: { background: "var(--theme-elevation-0)", borderRadius: 12, padding: 24, maxWidth: 480, width: "100%", maxHeight: "80vh", overflowY: "auto" }
+  }, [search, doSearch]);
+  const handleCreate = async () => {
+    setCreateError("");
+    if (!newClient.email.trim() || !newClient.firstName.trim() || !newClient.company.trim()) {
+      setCreateError("Email, prenom et entreprise sont obligatoires");
+      return;
+    }
+    setCreating(true);
+    try {
+      const res = await fetch("/api/support-clients", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email: newClient.email.trim(),
+          firstName: newClient.firstName.trim(),
+          lastName: newClient.lastName.trim() || void 0,
+          company: newClient.company.trim(),
+          password: crypto.randomUUID()
+        })
+      });
+      if (res.ok) {
+        const data = await res.json();
+        onSelect(data.doc.id);
+      } else {
+        const err = await res.json().catch(() => ({}));
+        setCreateError(err.errors?.[0]?.message || "Erreur lors de la creation");
+      }
+    } catch {
+      setCreateError("Erreur reseau");
+    }
+    setCreating(false);
   };
-  return /* @__PURE__ */ jsxs("div", { style: S.card, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("span", { style: S.senderName, children: email.senderName || email.senderEmail }),
-      email.senderName && /* @__PURE__ */ jsxs("span", { style: S.senderEmail, children: [
-        " <",
-        email.senderEmail,
-        ">"
+  const clientLabel = (c) => {
+    const parts = [c.firstName, c.lastName].filter(Boolean).join(" ");
+    return parts ? `${parts}${c.company ? ` \u2014 ${c.company}` : ""}` : c.email || "";
+  };
+  return /* @__PURE__ */ jsx("div", { className: styles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { className: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.modalHeader, children: [
+      /* @__PURE__ */ jsx("h3", { className: styles.modalTitle, children: "Choisir un client" }),
+      /* @__PURE__ */ jsx("button", { onClick: onClose, className: styles.modalClose, children: /* @__PURE__ */ jsx(X, { size: 20 }) })
+    ] }),
+    detectedClient && /* @__PURE__ */ jsxs("div", { className: styles.sectionBlock, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.sectionLabel, children: "Client detecte" }),
+      /* @__PURE__ */ jsxs("button", { onClick: () => onSelect(detectedClient.id), className: styles.detectedRow, children: [
+        /* @__PURE__ */ jsxs("span", { className: styles.detectedLabel, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.detectedName, children: clientLabel(detectedClient) }),
+          detectedClient.email && /* @__PURE__ */ jsx("span", { className: styles.detectedEmail, children: detectedClient.email })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: styles.useBtn, children: "Utiliser" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: S.subject, children: email.subject }),
-    /* @__PURE__ */ jsxs("div", { style: S.meta, children: [
-      timeAgo(email.createdAt),
-      " ",
-      email.attachments?.length ? `-- ${email.attachments.length} PJ` : ""
+    /* @__PURE__ */ jsxs("div", { className: styles.searchWrap, children: [
+      /* @__PURE__ */ jsx(Search, { size: 16, className: styles.searchIcon }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Rechercher un client (nom, email, entreprise)...",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          className: styles.searchInput
+        }
+      )
+    ] }),
+    searching && /* @__PURE__ */ jsx("div", { className: styles.searchingHint, children: "Recherche..." }),
+    results.map((r) => /* @__PURE__ */ jsx("button", { onClick: () => onSelect(r.id), className: styles.resultRow, children: /* @__PURE__ */ jsxs("span", { className: styles.clientResultLabel, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.clientResultName, children: clientLabel(r) }),
+      r.email && /* @__PURE__ */ jsx("span", { className: styles.clientResultEmail, children: r.email })
+    ] }) }, r.id)),
+    search.length >= 2 && !searching && results.length === 0 && /* @__PURE__ */ jsx("div", { className: styles.noResults, children: "Aucun client trouve" }),
+    /* @__PURE__ */ jsx("div", { className: styles.separator, children: /* @__PURE__ */ jsxs("button", { onClick: () => setShowCreate(!showCreate), className: styles.createToggle, children: [
+      /* @__PURE__ */ jsx(Plus, { size: 14 }),
+      showCreate ? "Annuler la creation" : "Creer un nouveau client"
+    ] }) }),
+    showCreate && /* @__PURE__ */ jsxs("div", { className: styles.createForm, children: [
+      createError && /* @__PURE__ */ jsx("div", { className: styles.formError, children: createError }),
+      /* @__PURE__ */ jsxs("div", { className: styles.createFormRow, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Prenom *",
+            value: newClient.firstName,
+            onChange: (e) => setNewClient((p) => ({ ...p, firstName: e.target.value })),
+            className: styles.formInputHalf
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Nom",
+            value: newClient.lastName,
+            onChange: (e) => setNewClient((p) => ({ ...p, lastName: e.target.value })),
+            className: styles.formInputHalf
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "email",
+          placeholder: "Email *",
+          value: newClient.email,
+          onChange: (e) => setNewClient((p) => ({ ...p, email: e.target.value })),
+          className: styles.formInput
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Entreprise *",
+          value: newClient.company,
+          onChange: (e) => setNewClient((p) => ({ ...p, company: e.target.value })),
+          className: styles.formInput
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { onClick: handleCreate, disabled: creating, className: styles.submitBtn, children: creating ? "Creation..." : "Creer et utiliser" })
+    ] })
+  ] }) });
+}
+function EmailCard({
+  email,
+  onProcess,
+  processing
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [showLinkModal, setShowLinkModal] = useState(false);
+  const [showClientPicker, setShowClientPicker] = useState(false);
+  const attachmentCount = email.attachments?.length || 0;
+  const preview = email.body.slice(0, 200) + (email.body.length > 200 ? "..." : "");
+  const suggestions = email.suggestedTickets || [];
+  const isPending = email.status === "pending";
+  const processedTicketNumber = typeof email.processedTicket === "object" ? email.processedTicket?.ticketNumber : null;
+  const suggestionClass = (score) => score >= 0.7 ? styles.suggestionHigh : score >= 0.5 ? styles.suggestionMedium : styles.suggestionLow;
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.card} ${processing ? styles.cardProcessing : ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.cardHeader, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.cardInfo, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.senderRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.senderName, children: email.senderName || email.senderEmail }),
+          email.senderName && /* @__PURE__ */ jsxs("span", { className: styles.senderEmail, children: [
+            "<",
+            email.senderEmail,
+            ">"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.cardSubject, children: email.subject }),
+        /* @__PURE__ */ jsxs("div", { className: styles.cardMeta, children: [
+          /* @__PURE__ */ jsx("span", { children: timeAgo(email.createdAt) }),
+          attachmentCount > 0 && /* @__PURE__ */ jsxs("span", { className: styles.attachment, children: [
+            /* @__PURE__ */ jsx(Paperclip, { size: 12 }),
+            " ",
+            attachmentCount,
+            " PJ"
+          ] })
+        ] })
+      ] }),
+      !isPending && /* @__PURE__ */ jsxs("div", { className: `${styles.statusBadge} ${email.status === "processed" ? styles.statusProcessed : styles.statusIgnored}`, children: [
+        email.processedAction === "ticket_created" && `Ticket cree${processedTicketNumber ? ` (${processedTicketNumber})` : ""}`,
+        email.processedAction === "message_added" && `Rattache${processedTicketNumber ? ` a ${processedTicketNumber}` : ""}`,
+        email.processedAction === "ignored" && "Ignore"
+      ] })
     ] }),
-    suggestions.length > 0 && isPending && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, marginTop: 6, flexWrap: "wrap" }, children: suggestions.map((s2) => /* @__PURE__ */ jsxs("span", { style: { padding: "2px 8px", borderRadius: 4, fontSize: 11, background: s2.score >= 0.7 ? "#dcfce7" : "#fef3c7", color: s2.score >= 0.7 ? "#166534" : "#92400e" }, children: [
+    suggestions.length > 0 && isPending && /* @__PURE__ */ jsx("div", { className: styles.suggestions, children: suggestions.map((s) => /* @__PURE__ */ jsxs("span", { className: `${styles.suggestionChip} ${suggestionClass(s.score)}`, children: [
       "Similaire a ",
-      s2.ticketNumber,
+      s.ticketNumber,
       " (",
-      Math.round(s2.score * 100),
+      Math.round(s.score * 100),
       "%)"
-    ] }, s2.id)) }),
-    /* @__PURE__ */ jsx("div", { style: S.body, children: expanded ? email.body : preview }),
-    email.body.length > 200 && /* @__PURE__ */ jsx("button", { onClick: () => setExpanded(!expanded), style: { ...S.btn, fontSize: 11, padding: "2px 8px" }, children: expanded ? t("pendingEmails.collapse") : t("pendingEmails.expand") }),
-    isPending && /* @__PURE__ */ jsxs("div", { style: S.actions, children: [
-      /* @__PURE__ */ jsx("button", { onClick: () => {
-        const clientId = typeof email.client === "object" && email.client ? email.client.id : void 0;
-        onProcess("create_ticket", void 0, clientId);
-      }, disabled: processing, style: { ...S.btn, ...S.btnCreate }, children: t("pendingEmails.actions.createTicket") }),
-      /* @__PURE__ */ jsx("button", { onClick: () => setShowLinkModal(true), disabled: processing, style: S.btn, children: t("pendingEmails.actions.linkToTicket") }),
-      /* @__PURE__ */ jsx("button", { onClick: () => onProcess("ignore"), disabled: processing, style: { ...S.btn, ...S.btnIgnore }, children: t("pendingEmails.actions.ignore") })
+    ] }, s.id)) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.bodySection, children: [
+      /* @__PURE__ */ jsx("div", { className: `${styles.bodyText} ${expanded ? styles.bodyExpanded : ""}`, children: expanded ? email.body : preview }),
+      email.body.length > 200 && /* @__PURE__ */ jsx("button", { onClick: () => setExpanded(!expanded), className: styles.expandBtn, children: expanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChevronUp, { size: 14 }),
+        " Reduire"
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChevronDown, { size: 14 }),
+        " Voir tout"
+      ] }) })
     ] }),
-    showLinkModal && /* @__PURE__ */ jsx("div", { style: S.overlay, onClick: () => setShowLinkModal(false), children: /* @__PURE__ */ jsxs("div", { style: S.modal, onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 12px", fontSize: 16, fontWeight: 700 }, children: t("pendingEmails.linkModal.title") }),
-      suggestions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
-        /* @__PURE__ */ jsx("div", { style: { fontSize: 12, fontWeight: 600, marginBottom: 4, color: "var(--theme-elevation-500)" }, children: t("pendingEmails.linkModal.suggestions") }),
-        suggestions.map((s2) => /* @__PURE__ */ jsxs("button", { onClick: () => {
+    isPending && /* @__PURE__ */ jsxs("div", { className: styles.actions, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setShowClientPicker(true),
+          disabled: processing,
+          className: `${styles.actionBtn} ${styles.btnCreate}`,
+          children: [
+            /* @__PURE__ */ jsx(Plus, { size: 14 }),
+            "Creer un ticket"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setShowLinkModal(true),
+          disabled: processing,
+          className: `${styles.actionBtn} ${styles.btnLink}`,
+          children: [
+            /* @__PURE__ */ jsx(Link2, { size: 14 }),
+            "Rattacher a un ticket"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => onProcess("ignore"),
+          disabled: processing,
+          className: `${styles.actionBtn} ${styles.btnIgnore}`,
+          children: [
+            /* @__PURE__ */ jsx(X, { size: 14 }),
+            "Ignorer"
+          ]
+        }
+      )
+    ] }),
+    showLinkModal && /* @__PURE__ */ jsx(
+      TicketSearchModal,
+      {
+        suggestions,
+        onSelect: (ticketId) => {
           setShowLinkModal(false);
-          onProcess("add_to_ticket", s2.id);
-        }, style: { display: "block", width: "100%", padding: "8px 12px", border: "1px solid var(--theme-elevation-200)", borderRadius: 6, background: "var(--theme-elevation-0)", cursor: "pointer", textAlign: "left", marginBottom: 4, fontSize: 13 }, children: [
-          /* @__PURE__ */ jsx("strong", { children: s2.ticketNumber }),
-          " ",
-          s2.subject,
-          " ",
-          /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "#16a34a" }, children: [
-            Math.round(s2.score * 100),
-            "%"
-          ] })
-        ] }, s2.id))
-      ] }),
-      /* @__PURE__ */ jsx("input", { type: "text", placeholder: t("pendingEmails.linkModal.searchPlaceholder"), value: linkSearch, onChange: (e) => setLinkSearch(e.target.value), style: { width: "100%", padding: "8px 12px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 13, marginBottom: 8, color: "var(--theme-text)", background: "var(--theme-elevation-0)" } }),
-      linkResults.map((r) => /* @__PURE__ */ jsxs("button", { onClick: () => {
-        setShowLinkModal(false);
-        onProcess("add_to_ticket", r.id);
-      }, style: { display: "block", width: "100%", padding: "8px 12px", border: "1px solid var(--theme-elevation-200)", borderRadius: 6, background: "var(--theme-elevation-0)", cursor: "pointer", textAlign: "left", marginBottom: 4, fontSize: 13 }, children: [
-        /* @__PURE__ */ jsx("strong", { children: r.ticketNumber }),
-        " ",
-        r.subject
-      ] }, r.id))
-    ] }) })
+          onProcess("add_to_ticket", ticketId);
+        },
+        onClose: () => setShowLinkModal(false)
+      }
+    ),
+    showClientPicker && /* @__PURE__ */ jsx(
+      ClientPickerModal,
+      {
+        defaultEmail: email.senderEmail,
+        detectedClient: typeof email.client === "object" && email.client ? { id: email.client.id, firstName: email.client.firstName, lastName: email.client.lastName, email: email.client.email, company: email.client.company } : null,
+        onSelect: (clientId) => {
+          setShowClientPicker(false);
+          onProcess("create_ticket", void 0, clientId);
+        },
+        onClose: () => setShowClientPicker(false)
+      }
+    )
   ] });
 }
 const PendingEmailsClient = () => {
@@ -120,12 +374,15 @@ const PendingEmailsClient = () => {
   const [loading, setLoading] = useState(true);
   const [tab, setTab] = useState("pending");
   const [processing, setProcessing] = useState(null);
+  const [sessionExpired, setSessionExpired] = useState(false);
   const fetchEmails = useCallback(async () => {
     try {
       const res = await fetch(`/api/pending-emails?where[status][equals]=${tab}&sort=-createdAt&limit=50&depth=1`);
       if (res.ok) {
         const data = await res.json();
         setEmails(data.docs);
+      } else if (res.status === 401 || res.status === 403) {
+        setSessionExpired(true);
       }
     } catch {
     }
@@ -136,14 +393,24 @@ const PendingEmailsClient = () => {
     fetchEmails();
   }, [fetchEmails]);
   useEffect(() => {
-    if (tab !== "pending") return;
-    const iv = setInterval(fetchEmails, 3e4);
-    return () => clearInterval(iv);
-  }, [fetchEmails, tab]);
+    if (sessionExpired || tab !== "pending") return;
+    const interval = setInterval(fetchEmails, 3e4);
+    return () => clearInterval(interval);
+  }, [fetchEmails, sessionExpired, tab]);
+  useEffect(() => {
+    if (sessionExpired) return;
+    const onFocus = () => fetchEmails();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [fetchEmails, sessionExpired]);
   const handleProcess = async (emailId, action, ticketId, clientId) => {
     setProcessing(emailId);
     try {
-      const res = await fetch(`/api/support/pending-emails/${emailId}/process`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action, ticketId, clientId }) });
+      const res = await fetch(`/api/support/pending-emails/${emailId}/process`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action, ticketId, clientId })
+      });
       if (res.ok) {
         setEmails((prev) => prev.filter((e) => e.id !== emailId));
       } else {
@@ -155,17 +422,43 @@ const PendingEmailsClient = () => {
     }
     setProcessing(null);
   };
-  const tabs = [{ key: "pending", label: t("pendingEmails.tabs.pending") }, { key: "processed", label: t("pendingEmails.tabs.processed") }, { key: "ignored", label: t("pendingEmails.tabs.ignored") }];
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "20px 30px", maxWidth: 900, margin: "0 auto" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h1", { style: { fontSize: 22, fontWeight: 700, margin: 0, color: "var(--theme-text)" }, children: t("pendingEmails.title") }),
-        /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: "var(--theme-elevation-500)", margin: "4px 0 0" }, children: t("pendingEmails.subtitle") })
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: styles.loadingWrap, children: /* @__PURE__ */ jsx(SkeletonDashboard, {}) });
+  }
+  const tabs = [
+    { key: "pending", label: t("pendingEmails.tabs.pending") },
+    { key: "processed", label: t("pendingEmails.tabs.processed") },
+    { key: "ignored", label: t("pendingEmails.tabs.ignored") }
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: styles.page, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.headerLeft, children: [
+        /* @__PURE__ */ jsxs("h1", { className: styles.title, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.titleIcon, children: /* @__PURE__ */ jsx(Inbox, { size: 24 }) }),
+          t("pendingEmails.title")
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: styles.subtitle, children: t("pendingEmails.subtitle") })
       ] }),
-      tab === "pending" && emails.length > 0 && /* @__PURE__ */ jsx("span", { style: { padding: "4px 10px", borderRadius: 10, background: "#fef2f2", color: "#dc2626", fontSize: 12, fontWeight: 700 }, children: t("pendingEmails.pendingCount", { count: String(emails.length) }) })
+      tab === "pending" && emails.length > 0 && /* @__PURE__ */ jsx("span", { className: styles.pendingBadge, children: t("pendingEmails.pendingCount", { count: String(emails.length) }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4, marginBottom: 16 }, children: tabs.map((tb) => /* @__PURE__ */ jsx("button", { onClick: () => setTab(tb.key), style: { padding: "6px 12px", borderRadius: 6, border: "none", background: tab === tb.key ? "var(--theme-elevation-100)" : "none", cursor: "pointer", fontSize: 13, fontWeight: tab === tb.key ? 700 : 500, color: tab === tb.key ? "var(--theme-text)" : "var(--theme-elevation-500)" }, children: tb.label }, tb.key)) }),
-    loading ? /* @__PURE__ */ jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("common.loading") }) : emails.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t(`pendingEmails.empty.${tab}`) }) : emails.map((email) => /* @__PURE__ */ jsx(EmailCard, { email, onProcess: (action, ticketId, clientId) => handleProcess(email.id, action, ticketId, clientId), processing: processing === email.id, t }, email.id))
+    /* @__PURE__ */ jsx("div", { className: styles.tabs, children: tabs.map((tk) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setTab(tk.key),
+        className: `${styles.tab} ${tab === tk.key ? styles.tabActive : ""}`,
+        children: tk.label
+      },
+      tk.key
+    )) }),
+    emails.length === 0 ? /* @__PURE__ */ jsx("div", { className: styles.empty, children: tab === "pending" ? t("pendingEmails.empty.pending") : tab === "processed" ? t("pendingEmails.empty.processed") : t("pendingEmails.empty.ignored") }) : emails.map((email) => /* @__PURE__ */ jsx(
+      EmailCard,
+      {
+        email,
+        onProcess: (action, ticketId, clientId) => handleProcess(email.id, action, ticketId, clientId),
+        processing: processing === email.id
+      },
+      email.id
+    ))
   ] });
 };