@consilioweb/payload-support 0.5.2 → 0.6.0

package/dist/views/BillingView/client.js

@@ -0,0 +1,204 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useState, useCallback } from 'react';
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation';
+
+function formatDuration(minutes) {
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  if (h === 0) return `${m}min`;
+  if (m === 0) return `${h}h`;
+  return `${h}h ${m}min`;
+}
+function formatAmount(minutes, rate) {
+  return (minutes / 60 * rate).toFixed(2);
+}
+function getMonthRange(offset) {
+  const now = /* @__PURE__ */ new Date();
+  const start = new Date(now.getFullYear(), now.getMonth() + offset, 1);
+  const end = new Date(now.getFullYear(), now.getMonth() + offset + 1, 0);
+  return { from: start.toISOString().split("T")[0], to: end.toISOString().split("T")[0] };
+}
+function getQuarterRange(offset) {
+  const now = /* @__PURE__ */ new Date();
+  const q = Math.floor(now.getMonth() / 3) + offset;
+  const start = new Date(now.getFullYear(), q * 3, 1);
+  const end = new Date(now.getFullYear(), q * 3 + 3, 0);
+  return { from: start.toISOString().split("T")[0], to: end.toISOString().split("T")[0] };
+}
+const BillingClient = () => {
+  const { t } = useTranslation();
+  const [from, setFrom] = useState(() => getMonthRange(0).from);
+  const [to, setTo] = useState(() => getMonthRange(0).to);
+  const [projectId, setProjectId] = useState("");
+  const [rate, setRate] = useState(60);
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [projects, setProjects] = useState([]);
+  const [projectsLoaded, setProjectsLoaded] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const loadProjects = useCallback(async () => {
+    if (projectsLoaded) return;
+    try {
+      const res = await fetch("/api/projects?limit=100&depth=0&sort=name");
+      if (res.ok) {
+        const json = await res.json();
+        setProjects(json.docs?.map((p) => ({ id: p.id, name: p.name })) || []);
+      }
+    } catch (err) {
+      console.warn("[support] loadProjects error:", err);
+    }
+    setProjectsLoaded(true);
+  }, [projectsLoaded]);
+  React.useEffect(() => {
+    loadProjects();
+  }, [loadProjects]);
+  const fetchBilling = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({ from, to });
+      if (projectId) params.set("projectId", projectId);
+      const res = await fetch(`/api/support/billing?${params}`);
+      if (res.ok) setData(await res.json());
+    } catch (err) {
+      console.warn("[support] fetchBilling error:", err);
+    }
+    setLoading(false);
+  }, [from, to, projectId]);
+  const setPeriod = (range) => {
+    setFrom(range.from);
+    setTo(range.to);
+  };
+  const copyRecap = useCallback(() => {
+    if (!data) return;
+    const lines = [`PRE-FACTURATION -- Du ${from} au ${to}`, `Taux horaire : ${rate} EUR/h`, "=".repeat(50)];
+    for (const group of data.groups) {
+      lines.push("", `PROJET : ${group.project?.name || "Sans projet"}`);
+      if (group.client?.company) lines.push(`Client : ${group.client.company}`);
+      for (const ticket of group.tickets) {
+        lines.push(`  ${ticket.ticketNumber} -- ${ticket.subject}`);
+        for (const entry of ticket.entries) lines.push(`    ${entry.date} | ${formatDuration(entry.duration)} | ${entry.description || "-"}`);
+        lines.push(`    Sous-total : ${formatDuration(ticket.totalMinutes)} = ${formatAmount(ticket.totalMinutes, rate)} EUR`);
+      }
+    }
+    lines.push("", "=".repeat(50), `TOTAL : ${formatDuration(data.grandTotalMinutes)} = ${formatAmount(data.grandTotalMinutes, rate)} EUR`);
+    navigator.clipboard.writeText(lines.join("\n"));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, [data, from, to, rate]);
+  const S = {
+    page: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" },
+    filters: { marginBottom: 20 },
+    quickPeriod: { display: "flex", gap: 6, marginBottom: 8 },
+    btn: { padding: "6px 12px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
+    btnPrimary: { padding: "6px 12px", borderRadius: 6, border: "none", fontSize: 12, cursor: "pointer", background: "#2563eb", color: "#fff", fontWeight: 600 },
+    filterRow: { display: "flex", gap: 12, alignItems: "flex-end", flexWrap: "wrap" },
+    fieldGroup: { display: "flex", flexDirection: "column", gap: 4 },
+    label: { fontSize: 11, fontWeight: 600, color: "var(--theme-elevation-500)" },
+    input: { padding: "6px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" },
+    select: { padding: "6px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" },
+    groupCard: { marginBottom: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)", overflow: "hidden" },
+    groupHeader: { display: "flex", justifyContent: "space-between", padding: "12px 16px", background: "var(--theme-elevation-50)", borderBottom: "1px solid var(--theme-elevation-150)" },
+    table: { width: "100%", borderCollapse: "collapse", fontSize: 12 },
+    th: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" },
+    td: { padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-100)" },
+    grandTotal: { padding: 16, borderRadius: 10, border: "2px solid #2563eb", display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 16 }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsx("h1", { style: { fontSize: 22, fontWeight: 700, margin: 0 }, children: t("billing.title") }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: "var(--theme-elevation-500)", margin: "4px 0 0" }, children: t("billing.subtitle") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.filters, children: [
+      /* @__PURE__ */ jsxs("div", { style: S.quickPeriod, children: [
+        /* @__PURE__ */ jsx("button", { style: S.btnPrimary, onClick: () => setPeriod(getMonthRange(0)), children: t("billing.filters.thisMonth") }),
+        /* @__PURE__ */ jsx("button", { style: S.btn, onClick: () => setPeriod(getMonthRange(-1)), children: t("billing.filters.lastMonth") }),
+        /* @__PURE__ */ jsx("button", { style: S.btn, onClick: () => setPeriod(getQuarterRange(0)), children: t("billing.filters.thisQuarter") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: S.filterRow, children: [
+        /* @__PURE__ */ jsxs("div", { style: S.fieldGroup, children: [
+          /* @__PURE__ */ jsx("label", { style: S.label, children: t("billing.filters.from") }),
+          /* @__PURE__ */ jsx("input", { type: "date", value: from, onChange: (e) => setFrom(e.target.value), style: S.input })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: S.fieldGroup, children: [
+          /* @__PURE__ */ jsx("label", { style: S.label, children: t("billing.filters.to") }),
+          /* @__PURE__ */ jsx("input", { type: "date", value: to, onChange: (e) => setTo(e.target.value), style: S.input })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: S.fieldGroup, children: [
+          /* @__PURE__ */ jsx("label", { style: S.label, children: t("billing.filters.project") }),
+          /* @__PURE__ */ jsxs("select", { value: projectId, onChange: (e) => setProjectId(e.target.value), style: S.select, children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: t("common.all") }),
+            projects.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.name }, p.id))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: S.fieldGroup, children: [
+          /* @__PURE__ */ jsx("label", { style: S.label, children: t("billing.filters.hourlyRate") }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx("input", { type: "number", value: rate, onChange: (e) => setRate(Number(e.target.value)), style: { ...S.input, width: 70 }, min: 0 }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 11 }, children: t("billing.filters.rateUnit") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("button", { style: S.btnPrimary, onClick: fetchBilling, disabled: loading, children: loading ? t("billing.filters.loading") : t("billing.filters.load") })
+      ] })
+    ] }),
+    data && /* @__PURE__ */ jsx(Fragment, { children: data.groups.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("billing.empty") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      data.groups.map((group, gi) => /* @__PURE__ */ jsxs("div", { style: S.groupCard, children: [
+        /* @__PURE__ */ jsxs("div", { style: S.groupHeader, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 700 }, children: group.project?.name || "Sans projet" }),
+            group.client?.company && /* @__PURE__ */ jsxs("span", { style: { color: "var(--theme-elevation-500)" }, children: [
+              " -- ",
+              group.client.company
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { textAlign: "right" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontWeight: 700 }, children: formatDuration(group.totalMinutes) }),
+            /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#2563eb", fontWeight: 600 }, children: [
+              formatAmount(group.totalMinutes, rate),
+              " EUR"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("table", { style: S.table, children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { style: S.th, children: t("billing.table.ticketNumber") }),
+            /* @__PURE__ */ jsx("th", { style: S.th, children: t("billing.table.subject") }),
+            /* @__PURE__ */ jsx("th", { style: S.th, children: t("billing.table.date") }),
+            /* @__PURE__ */ jsx("th", { style: S.th, children: t("billing.table.duration") }),
+            /* @__PURE__ */ jsx("th", { style: S.th, children: t("billing.table.description") }),
+            /* @__PURE__ */ jsx("th", { style: { ...S.th, textAlign: "right" }, children: t("billing.table.amount") })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: group.tickets.map((ticket) => ticket.entries.map((entry, ei) => /* @__PURE__ */ jsxs("tr", { children: [
+            ei === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("td", { style: { ...S.td, fontWeight: 600 }, rowSpan: ticket.entries.length, children: /* @__PURE__ */ jsx("a", { href: `/admin/support/ticket?id=${ticket.id}`, style: { color: "#2563eb", textDecoration: "none" }, children: ticket.ticketNumber }) }),
+              /* @__PURE__ */ jsx("td", { style: S.td, rowSpan: ticket.entries.length, children: ticket.subject })
+            ] }),
+            /* @__PURE__ */ jsx("td", { style: S.td, children: entry.date }),
+            /* @__PURE__ */ jsx("td", { style: S.td, children: formatDuration(entry.duration) }),
+            /* @__PURE__ */ jsx("td", { style: S.td, children: entry.description || "-" }),
+            /* @__PURE__ */ jsxs("td", { style: { ...S.td, textAlign: "right", fontWeight: 600 }, children: [
+              formatAmount(entry.duration, rate),
+              " EUR"
+            ] })
+          ] }, `${ticket.id}-${ei}`))) })
+        ] })
+      ] }, gi)),
+      /* @__PURE__ */ jsxs("div", { style: S.grandTotal, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--theme-elevation-500)" }, children: t("billing.totals.billableTicketsPlural", { count: String(data.groups.reduce((s2, g) => s2 + g.tickets.length, 0)) }) }),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: 18, fontWeight: 700 }, children: [
+            t("billing.totals.total"),
+            " : ",
+            formatDuration(data.grandTotalMinutes),
+            " = ",
+            formatAmount(data.grandTotalMinutes, rate),
+            " EUR"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("button", { style: S.btnPrimary, onClick: copyRecap, children: copied ? t("billing.totals.copiedRecap") : t("billing.totals.copyRecap") })
+      ] })
+    ] }) })
+  ] });
+};
+
+export { BillingClient };

package/dist/views/BillingView/index.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { DefaultTemplate } from '@payloadcms/next/templates';
+import { redirect } from 'next/navigation';
+import { AdminErrorBoundary } from '../shared/ErrorBoundary';
+import { BillingClient } from './client';
+
+const BillingView = ({ initPageResult }) => {
+  const { req, visibleEntities } = initPageResult;
+  if (!req.user) {
+    redirect("/admin/login");
+  }
+  return /* @__PURE__ */ jsx(
+    DefaultTemplate,
+    {
+      i18n: req.i18n,
+      locale: initPageResult.locale,
+      params: {},
+      payload: req.payload,
+      permissions: initPageResult.permissions,
+      searchParams: {},
+      user: req.user,
+      visibleEntities,
+      children: /* @__PURE__ */ jsx(AdminErrorBoundary, { viewName: "BillingView", children: /* @__PURE__ */ jsx(BillingClient, {}) })
+    }
+  );
+};
+var BillingView_default = BillingView;
+
+export { BillingView, BillingView_default as default };

package/dist/views/ChatView/client.js

@@ -0,0 +1,252 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation';
+
+const ChatViewClient = () => {
+  const { t } = useTranslation();
+  const [sessions, setSessions] = useState({ active: [], closed: [] });
+  const [selectedSession, setSelectedSession] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [sending, setSending] = useState(false);
+  const [showClosed, setShowClosed] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [cannedResponses, setCannedResponses] = useState([]);
+  const messagesEndRef = useRef(null);
+  const lastFetchRef = useRef(null);
+  const [sessionExpired, setSessionExpired] = useState(false);
+  const sessionsESRef = useRef(null);
+  const messagesESRef = useRef(null);
+  const fetchSessions = useCallback(async () => {
+    try {
+      const res = await fetch("/api/support/admin-chat");
+      if (res.status === 401 || res.status === 403) {
+        setSessionExpired(true);
+        return;
+      }
+      if (res.ok) {
+        const data = await res.json();
+        setSessions({ active: data.active || [], closed: data.closed || [] });
+      }
+    } catch {
+    }
+    setLoading(false);
+  }, []);
+  useEffect(() => {
+    if (sessionExpired) return;
+    fetchSessions();
+    if (typeof EventSource !== "undefined") {
+      const es = new EventSource("/api/support/admin-chat-stream");
+      sessionsESRef.current = es;
+      es.onmessage = (event) => {
+        try {
+          const parsed = JSON.parse(event.data);
+          if (parsed.type === "sessions" && parsed.data) {
+            setSessions({ active: parsed.data.active || [], closed: parsed.data.closed || [] });
+            setLoading(false);
+          }
+        } catch {
+        }
+      };
+      es.onerror = () => {
+        es.close();
+        sessionsESRef.current = null;
+        const iv2 = setInterval(fetchSessions, 5e3);
+        return () => clearInterval(iv2);
+      };
+      return () => {
+        es.close();
+        sessionsESRef.current = null;
+      };
+    }
+    const iv = setInterval(fetchSessions, 5e3);
+    return () => clearInterval(iv);
+  }, [fetchSessions, sessionExpired]);
+  useEffect(() => {
+    fetch("/api/canned-responses?sort=sortOrder&limit=50&depth=0", { credentials: "include" }).then((res) => res.ok ? res.json() : null).then((data) => {
+      if (data?.docs) setCannedResponses(data.docs);
+    }).catch(() => {
+    });
+  }, []);
+  useEffect(() => {
+    if (!selectedSession) return;
+    const fetchMessages = async () => {
+      try {
+        const after = lastFetchRef.current || "";
+        const url = `/api/support/admin-chat?session=${selectedSession}${after ? `&after=${after}` : ""}`;
+        const res = await fetch(url);
+        if (res.ok) {
+          const data = await res.json();
+          if (!lastFetchRef.current) {
+            setMessages(data.messages || []);
+          } else if (data.messages?.length > 0) {
+            setMessages((prev) => {
+              const ids = new Set(prev.map((m) => m.id));
+              const newMsgs = data.messages.filter((m) => !ids.has(m.id));
+              return newMsgs.length > 0 ? [...prev, ...newMsgs] : prev;
+            });
+          }
+          if (data.messages?.length > 0) {
+            lastFetchRef.current = data.messages[data.messages.length - 1].createdAt;
+          }
+        }
+      } catch {
+      }
+    };
+    lastFetchRef.current = null;
+    fetchMessages();
+    if (typeof EventSource !== "undefined") {
+      const es = new EventSource(`/api/support/admin-chat-stream?session=${selectedSession}`);
+      messagesESRef.current = es;
+      es.onmessage = (event) => {
+        try {
+          const parsed = JSON.parse(event.data);
+          if (parsed.type === "messages" && parsed.data?.length > 0) {
+            setMessages((prev) => {
+              const ids = new Set(prev.map((m) => m.id));
+              const newMsgs = parsed.data.filter((m) => !ids.has(m.id));
+              return newMsgs.length > 0 ? [...prev, ...newMsgs] : prev;
+            });
+          }
+        } catch {
+        }
+      };
+      es.onerror = () => {
+        es.close();
+        messagesESRef.current = null;
+        const iv2 = setInterval(fetchMessages, 3e3);
+        fetchMessages._fallbackIv = iv2;
+      };
+      return () => {
+        es.close();
+        messagesESRef.current = null;
+        if (fetchMessages._fallbackIv) clearInterval(fetchMessages._fallbackIv);
+      };
+    }
+    const iv = setInterval(fetchMessages, 3e3);
+    return () => clearInterval(iv);
+  }, [selectedSession]);
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const sendMessage = async (e) => {
+    e.preventDefault();
+    if (!input.trim() || !selectedSession || sending) return;
+    setSending(true);
+    try {
+      const res = await fetch("/api/support/admin-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "send", session: selectedSession, message: input.trim() }) });
+      if (res.ok) {
+        const data = await res.json();
+        setMessages((prev) => [...prev, data.message]);
+        lastFetchRef.current = data.message.createdAt;
+        setInput("");
+      }
+    } catch {
+    }
+    setSending(false);
+  };
+  const closeSession = async () => {
+    if (!selectedSession) return;
+    try {
+      await fetch("/api/support/admin-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "close", session: selectedSession }) });
+      setSelectedSession(null);
+      fetchSessions();
+    } catch {
+    }
+  };
+  const getClientName = (client) => {
+    if (typeof client === "number") return `Client #${client}`;
+    const parts = [client.firstName, client.lastName].filter(Boolean);
+    if (parts.length > 0) return parts.join(" ");
+    return client.email || `Client #${client.id}`;
+  };
+  const displayedSessions = showClosed ? sessions.closed : sessions.active;
+  const S = {
+    page: { padding: "20px 30px", maxWidth: 1200, margin: "0 auto" },
+    container: { display: "grid", gridTemplateColumns: "320px 1fr", gap: 16, minHeight: "calc(100vh - 300px)" },
+    sidebar: { borderRight: "1px solid var(--theme-elevation-200)" },
+    sessionItem: { display: "block", width: "100%", padding: "10px 14px", border: "none", background: "none", cursor: "pointer", textAlign: "left", borderBottom: "1px solid var(--theme-elevation-100)", fontSize: 13 },
+    sessionActive: { background: "var(--theme-elevation-50)" },
+    chatPanel: { display: "flex", flexDirection: "column" },
+    messagesArea: { flex: 1, overflowY: "auto", padding: "12px 0" },
+    bubble: { maxWidth: "70%", padding: "8px 12px", borderRadius: 10, marginBottom: 8, fontSize: 14 },
+    bubbleAgent: { background: "#dbeafe", color: "#1e3a5f", marginLeft: "auto" },
+    bubbleClient: { background: "var(--theme-elevation-100)", color: "var(--theme-text)" },
+    bubbleSystem: { margin: "4px auto", padding: "4px 12px", fontSize: 11, color: "#6b7280", textAlign: "center" },
+    composer: { borderTop: "1px solid var(--theme-elevation-200)", padding: "8px 0" },
+    composerInput: { flex: 1, padding: "8px 12px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
+    sendBtn: { padding: "8px 16px", borderRadius: 8, background: "#2563eb", color: "#fff", border: "none", fontWeight: 600, cursor: "pointer", fontSize: 13 },
+    tabsRow: { display: "flex", gap: 4, padding: "8px 14px", borderBottom: "1px solid var(--theme-elevation-200)" },
+    tab: { padding: "4px 10px", borderRadius: 6, border: "none", background: "none", cursor: "pointer", fontSize: 12, color: "var(--theme-elevation-500)" },
+    tabActive: { background: "var(--theme-elevation-100)", fontWeight: 700, color: "var(--theme-text)" }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsx("h1", { style: { fontSize: 22, fontWeight: 700, margin: 0, color: "var(--theme-text)" }, children: t("chat.title") }),
+      /* @__PURE__ */ jsx("p", { style: { color: "var(--theme-elevation-500)", fontSize: 13, margin: "4px 0 0" }, children: sessions.active.length !== 1 ? t("chat.sessionCountPlural", { count: String(sessions.active.length) }) : t("chat.sessionCount", { count: String(sessions.active.length) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.container, children: [
+      /* @__PURE__ */ jsxs("div", { style: S.sidebar, children: [
+        /* @__PURE__ */ jsxs("div", { style: S.tabsRow, children: [
+          /* @__PURE__ */ jsxs("button", { onClick: () => setShowClosed(false), style: { ...S.tab, ...!showClosed ? S.tabActive : {} }, children: [
+            t("chat.tabs.active"),
+            " (",
+            sessions.active.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxs("button", { onClick: () => setShowClosed(true), style: { ...S.tab, ...showClosed ? S.tabActive : {} }, children: [
+            t("chat.tabs.closed"),
+            " (",
+            sessions.closed.length,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { children: loading ? /* @__PURE__ */ jsx("div", { style: { padding: 20, textAlign: "center", color: "#94a3b8" }, children: t("common.loading") }) : displayedSessions.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: 20, textAlign: "center", color: "#94a3b8" }, children: showClosed ? t("chat.noSessionClosed") : t("chat.noSessionActive") }) : displayedSessions.map((s2) => /* @__PURE__ */ jsxs("button", { onClick: () => setSelectedSession(s2.session), style: { ...S.sessionItem, ...selectedSession === s2.session ? S.sessionActive : {} }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: getClientName(s2.client) }),
+            s2.unreadCount > 0 && /* @__PURE__ */ jsx("span", { style: { padding: "1px 6px", borderRadius: 10, background: "#dc2626", color: "#fff", fontSize: 10, fontWeight: 700 }, children: s2.unreadCount })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--theme-elevation-500)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: s2.lastMessage }),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: 11, color: "var(--theme-elevation-400)", marginTop: 2 }, children: [
+            new Date(s2.lastMessageAt).toLocaleString("fr-FR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" }),
+            " -- ",
+            s2.messageCount,
+            " ",
+            t("chat.msg")
+          ] })
+        ] }, s2.session)) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: S.chatPanel, children: !selectedSession ? /* @__PURE__ */ jsx("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "#94a3b8", fontSize: 14 }, children: t("chat.selectSession") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 14px", borderBottom: "1px solid var(--theme-elevation-200)" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontFamily: "monospace", fontSize: 12, color: "var(--theme-elevation-500)" }, children: selectedSession }),
+          /* @__PURE__ */ jsx("button", { onClick: closeSession, style: { padding: "4px 12px", borderRadius: 6, border: "1px solid #dc2626", background: "none", color: "#dc2626", fontSize: 12, cursor: "pointer" }, children: t("chat.closeChat") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: S.messagesArea, children: [
+          messages.map((msg) => /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: msg.senderType === "agent" ? "row-reverse" : "row", padding: "2px 14px" }, children: msg.senderType === "system" ? /* @__PURE__ */ jsx("div", { style: S.bubbleSystem, children: msg.message }) : /* @__PURE__ */ jsxs("div", { style: { ...S.bubble, ...msg.senderType === "agent" ? S.bubbleAgent : S.bubbleClient }, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 600, marginBottom: 2 }, children: msg.senderType === "agent" ? t("chat.you") : t("chat.clientLabel") }),
+            /* @__PURE__ */ jsx("div", { children: msg.message }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: 10, color: msg.senderType === "agent" ? "#1e40af" : "var(--theme-elevation-400)", marginTop: 2 }, children: new Date(msg.createdAt).toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" }) })
+          ] }) }, msg.id)),
+          /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+        ] }),
+        /* @__PURE__ */ jsxs("form", { onSubmit: sendMessage, style: S.composer, children: [
+          cannedResponses.length > 0 && /* @__PURE__ */ jsxs("select", { onChange: (e) => {
+            const cr = cannedResponses.find((c) => String(c.id) === e.target.value);
+            if (cr) setInput(cr.body);
+            e.target.value = "";
+          }, style: { padding: "4px 8px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 11, marginBottom: 6, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: t("chat.quickReply") }),
+            cannedResponses.map((cr) => /* @__PURE__ */ jsx("option", { value: String(cr.id), children: cr.title }, cr.id))
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ jsx("input", { type: "text", value: input, onChange: (e) => setInput(e.target.value), placeholder: t("chat.inputPlaceholder"), maxLength: 2e3, style: S.composerInput, autoFocus: true }),
+            /* @__PURE__ */ jsx("button", { type: "submit", disabled: !input.trim() || sending, style: S.sendBtn, children: t("chat.sendButton") })
+          ] })
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+
+export { ChatViewClient };

package/dist/views/ChatView/index.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { DefaultTemplate } from '@payloadcms/next/templates';
+import { redirect } from 'next/navigation';
+import { AdminErrorBoundary } from '../shared/ErrorBoundary';
+import { ChatViewClient } from './client';
+
+const ChatView = ({ initPageResult }) => {
+  const { req, visibleEntities } = initPageResult;
+  if (!req.user) {
+    redirect("/admin/login");
+  }
+  return /* @__PURE__ */ jsx(
+    DefaultTemplate,
+    {
+      i18n: req.i18n,
+      locale: initPageResult.locale,
+      params: {},
+      payload: req.payload,
+      permissions: initPageResult.permissions,
+      searchParams: {},
+      user: req.user,
+      visibleEntities,
+      children: /* @__PURE__ */ jsx(AdminErrorBoundary, { viewName: "ChatView", children: /* @__PURE__ */ jsx(ChatViewClient, {}) })
+    }
+  );
+};
+var ChatView_default = ChatView;
+
+export { ChatView, ChatView_default as default };