@consilioweb/payload-support 0.10.1 → 0.12.0

package/dist/views/TicketDetailView/client.cjs

@@ -18,6 +18,10 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var Link__default = /*#__PURE__*/_interopDefault(Link);
 var s__default = /*#__PURE__*/_interopDefault(s);
 
+const ALIASES = [
+  { value: "Support Consilioweb", label: "En tant que : Support Consilioweb" },
+  { value: "contact@consilioweb.fr", label: "En tant que : contact@consilioweb.fr" }
+];
 const STATUS_STYLE = {
   open: { bg: "#dbeafe", color: "#1e40af" },
   waiting_client: { bg: "#fef3c7", color: "#92400e" },
@@ -119,6 +123,34 @@ const RewriteDropdown = ({ disabled, loading, onSelect, toolbarBtnClass }) => {
     )) })
   ] });
 };
+function NextActionItem({ action, index, onToggle }) {
+  const [pending, setPending] = React.useState(false);
+  const labelMap = { now: "Maintenant", today: "Aujourd'hui", "this-week": "Cette semaine" };
+  const done = !!action.done;
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: s__default.default.aiCardNextAction, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: `${s__default.default.aiCardNextCheck} ${done ? s__default.default.aiCardNextCheckDone : ""}`,
+        onClick: async () => {
+          setPending(true);
+          try {
+            await onToggle(!done);
+          } finally {
+            setPending(false);
+          }
+        },
+        "aria-pressed": done,
+        "aria-label": done ? "Marquer non fait" : "Marquer fait",
+        disabled: pending,
+        children: done && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: "\u2713" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${s__default.default.aiCardNextLabel} ${done ? s__default.default.aiCardNextLabelDone : ""}`, children: action.label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiCardNextWhen, children: labelMap[action.priority] || action.priority })
+  ] });
+}
 const TicketDetailClient = () => {
   const { t } = useTranslation.useTranslation();
   const searchParams = navigation.useSearchParams();
@@ -140,6 +172,7 @@ const TicketDetailClient = () => {
   const [isInternal, setIsInternal] = React.useState(false);
   const [notifyClient, setNotifyClient] = React.useState(true);
   const [sendAsClient, setSendAsClient] = React.useState(false);
+  const [fromAlias, setFromAlias] = React.useState("");
   const [editingMsgId, setEditingMsgId] = React.useState(null);
   const [editingBody, setEditingBody] = React.useState("");
   const [editingHtml, setEditingHtml] = React.useState("");
@@ -149,10 +182,20 @@ const TicketDetailClient = () => {
   const [showMenu, setShowMenu] = React.useState(false);
   const [clientTyping, setClientTyping] = React.useState(false);
   const [aiReplying, setAiReplying] = React.useState(false);
+  const [aiSuggestion, setAiSuggestion] = React.useState(null);
   const [aiRewriting, setAiRewriting] = React.useState(false);
   const [sentiment, setSentiment] = React.useState(null);
   const [statusUpdating, setStatusUpdating] = React.useState(false);
-  const [showActivity, setShowActivity] = React.useState(false);
+  const [sidebarTab, setSidebarTab] = React.useState(() => {
+    if (typeof window === "undefined") return "overview";
+    const v = localStorage.getItem("support_sidebar_tab");
+    return v === "client" || v === "activity" ? v : "overview";
+  });
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    localStorage.setItem("support_sidebar_tab", sidebarTab);
+  }, [sidebarTab]);
+  const [previousTickets, setPreviousTickets] = React.useState([]);
   const [clientSummary, setClientSummary] = React.useState(null);
   const [summaryLoading, setSummaryLoading] = React.useState(false);
   const [timerRunning, setTimerRunning] = React.useState(() => {
@@ -229,6 +272,22 @@ const TicketDetailClient = () => {
     }).catch(() => {
     }).finally(() => setSummaryLoading(false));
   }, [ticket?.id]);
+  React.useEffect(() => {
+    if (sidebarTab !== "client" || !ticket || !ticketId) return;
+    const clientId = typeof ticket.client === "object" ? ticket.client?.id : ticket.client;
+    if (!clientId) return;
+    let aborted = false;
+    fetch(
+      `/api/tickets?where[client][equals]=${clientId}&where[id][not_equals]=${ticketId}&limit=5&sort=-createdAt&depth=0`,
+      { credentials: "include" }
+    ).then((r) => r.ok ? r.json() : null).then((d) => {
+      if (!aborted && d?.docs) setPreviousTickets(d.docs);
+    }).catch(() => {
+    });
+    return () => {
+      aborted = true;
+    };
+  }, [sidebarTab, ticket?.id, ticketId]);
   React.useEffect(() => {
     if (!ticketId || loading) return;
     const iv = setInterval(async () => {
@@ -432,6 +491,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
           ...finalHtml ? { bodyHtml: finalHtml } : {},
           authorType: sendAsClient ? "client" : "admin",
           ...sendAsClient && client ? { authorClient: client.id } : {},
+          ...fromAlias && !sendAsClient ? { fromAlias } : {},
           isInternal: sendAsClient ? false : isInternal,
           skipNotification: sendAsClient || isInternal || !notifyClient
         })
@@ -441,6 +501,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
         setReplyHtml("");
         setIsInternal(false);
         setSendAsClient(false);
+        setFromAlias("");
         setPendingFiles([]);
         editorRef.current?.clear();
         fetchAll();
@@ -535,21 +596,29 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
         method: "POST",
         headers: { "Content-Type": "application/json" },
         credentials: "include",
-        body: JSON.stringify({ action: "suggest_reply", messages: messages.slice(-10).map((m) => ({ authorType: m.authorType, body: m.body })), clientName: `${client?.firstName || ""} ${client?.lastName || ""}`.trim(), clientCompany: client?.company })
+        body: JSON.stringify({
+          action: "suggest_reply",
+          messages: messages.slice(-10).map((m) => ({ authorType: m.authorType, body: m.body })),
+          clientName: `${client?.firstName || ""} ${client?.lastName || ""}`.trim(),
+          clientCompany: client?.company
+        })
       });
       if (r.ok) {
         const d = await r.json();
-        if (d.reply) {
-          setReplyBody(d.reply);
-          setReplyHtml(d.reply.replace(/\n/g, "<br/>"));
-          editorRef.current?.setContent(d.reply.replace(/\n/g, "<br/>"));
-        }
+        if (d.reply) setAiSuggestion(d.reply);
       }
     } catch {
     } finally {
       setAiReplying(false);
     }
   };
+  const handleAiSuggestionInsert = () => {
+    if (!aiSuggestion) return;
+    setReplyBody(aiSuggestion);
+    setReplyHtml(aiSuggestion.replace(/\n/g, "<br/>"));
+    editorRef.current?.setContent(aiSuggestion.replace(/\n/g, "<br/>"));
+    setAiSuggestion(null);
+  };
   const handleAiRewrite = async (style = "auto") => {
     if (!replyBody.trim()) return;
     setAiRewriting(true);
@@ -643,8 +712,22 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.topBar, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: "/admin/support/inbox", className: s__default.default.backLink, "aria-label": "Retour \xE0 la bo\xEEte de r\xE9ception", children: "\u2190" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.ticketMeta, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.ticketNumber, children: ticket.ticketNumber }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.ticketSubject, children: ticket.subject })
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.ticketNumber, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: ticket.ticketNumber }),
+          ticket.category ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.ticketNumberSep, children: "\xB7" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.ticketNumberCat, children: ticket.category })
+          ] }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.ticketNumberSep, children: "\xB7" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.ticketNumberSource, "aria-label": t("detail.source"), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3 7 9 6 9-6" })
+            ] }),
+            ticket.source === "email" ? "Email" : ticket.source || t("ticket.source.portal")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: s__default.default.ticketSubject, children: ticket.subject })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.topBarRight, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("select", { className: s__default.default.statusChip, style: { background: st.bg, color: st.color }, value: ticket.status || "open", onChange: (e) => handleStatusChange(e.target.value), disabled: statusUpdating, "aria-label": t("ticket.status.label"), children: [
@@ -749,7 +832,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.messageContent, children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.messageHeader, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.messageAuthor, children: isAdmin ? "Support" : msg.authorType === "email" ? "Email" : client?.firstName || "Client" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.messageAuthor, children: msg.fromAlias || (isAdmin ? "Support" : msg.authorType === "email" ? "Email" : client?.firstName || "Client") }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.messageTime, children: timeAgo(msg.createdAt) }),
                     msg.isInternal && /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.badge, style: { background: "#fef3c7", color: "#92400e" }, children: "Interne" }),
                     msg.isSolution && /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.badge, style: { background: "#dcfce7", color: "#166534" }, children: "Solution" }),
@@ -835,6 +918,27 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
           ] }),
           t("detail.typing", { name: client?.firstName || "Client" })
         ] }),
+        aiSuggestion && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.aiSuggestionPreview, role: "region", "aria-label": t("composer.aiSuggestion.label"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.aiSuggestionPreviewHeader, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiSuggestionIcon, "aria-hidden": true, children: "\u2728" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiSuggestionLabel, children: t("composer.aiSuggestion.label") }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: s__default.default.aiSuggestionDismiss,
+                onClick: () => setAiSuggestion(null),
+                "aria-label": t("composer.aiSuggestion.ignore"),
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.aiSuggestionBody, children: aiSuggestion }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.aiSuggestionActions, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: s__default.default.aiSuggestionIgnore, onClick: () => setAiSuggestion(null), children: t("composer.aiSuggestion.ignore") }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: s__default.default.aiSuggestionInsert, onClick: handleAiSuggestionInsert, children: t("composer.aiSuggestion.insert") })
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -856,7 +960,7 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                       "aria-label": t("detail.iaSuggestion"),
                       onClick: handleAiSuggest,
                       disabled: aiReplying || messages.length === 0,
-                      children: aiReplying ? "\u2026" : `\u2728 ${t("detail.iaSuggestion")}`
+                      children: aiReplying ? `\u23F3 ${t("composer.aiSuggestion.loading")}` : `\u2728 ${t("detail.iaSuggestion")}`
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(RewriteDropdown, { disabled: aiRewriting || !replyBody.trim(), loading: aiRewriting, onSelect: (style) => handleAiRewrite(style), toolbarBtnClass: s__default.default.toolbarBtn })
@@ -914,39 +1018,41 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                   cannedResponses.map((cr) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(cr.id), children: cr.title }, cr.id))
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                index.RichTextEditor,
-                {
-                  ref: editorRef,
-                  onChange: (html, text) => {
-                    setReplyHtml(html);
-                    setReplyBody(text);
-                  },
-                  placeholder: isInternal ? t("composer.placeholderInternal") : t("composer.placeholderReplyTo", { name: client?.firstName || "client" }),
-                  minHeight: 100,
-                  borderColor: "transparent",
-                  onFileUpload: async (file) => {
-                    try {
-                      const formData = new FormData();
-                      formData.append("file", file);
-                      formData.append("_payload", JSON.stringify({ alt: file.name }));
-                      const ur = await fetch("/api/media", { method: "POST", credentials: "include", body: formData });
-                      if (!ur.ok) return null;
-                      const ud = await ur.json();
-                      return ud.doc?.url || null;
-                    } catch {
-                      return null;
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.composerBox, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  index.RichTextEditor,
+                  {
+                    ref: editorRef,
+                    onChange: (html, text) => {
+                      setReplyHtml(html);
+                      setReplyBody(text);
+                    },
+                    placeholder: isInternal ? t("composer.placeholderInternal") : t("composer.placeholderReplyTo", { name: client?.firstName || "client" }),
+                    minHeight: 100,
+                    borderColor: "transparent",
+                    onFileUpload: async (file) => {
+                      try {
+                        const formData = new FormData();
+                        formData.append("file", file);
+                        formData.append("_payload", JSON.stringify({ alt: file.name }));
+                        const ur = await fetch("/api/media", { method: "POST", credentials: "include", body: formData });
+                        if (!ur.ok) return null;
+                        const ud = await ur.json();
+                        return ud.doc?.url || null;
+                      } catch {
+                        return null;
+                      }
                     }
                   }
-                }
-              ),
-              pendingFiles.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.uploadPreview, children: pendingFiles.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.uploadPreviewItem, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  "PJ ",
-                  f.name
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.uploadRemoveBtn, "aria-label": `Retirer ${f.name}`, onClick: () => setPendingFiles((prev) => prev.filter((_, j) => j !== i)), children: "\xD7" })
-              ] }, i)) }),
+                ),
+                pendingFiles.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.uploadPreview, children: pendingFiles.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.uploadPreviewItem, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    "PJ ",
+                    f.name
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.uploadRemoveBtn, "aria-label": `Retirer ${f.name}`, onClick: () => setPendingFiles((prev) => prev.filter((_, j) => j !== i)), children: "\xD7" })
+                ] }, i)) })
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.composerFooter, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.composerOptions, children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(
@@ -968,6 +1074,20 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
                       ]
                     }
                   ),
+                  !sendAsClient && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "select",
+                    {
+                      className: s__default.default.composerAliasSelect,
+                      value: fromAlias,
+                      onChange: (e) => setFromAlias(e.target.value),
+                      "aria-label": t("composer.aliases.label"),
+                      title: t("composer.aliases.tooltip"),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: t("composer.aliases.self") }),
+                        ALIASES.map((a) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: a.value, children: a.label }, a.value))
+                      ]
+                    }
+                  ),
                   !sendAsClient && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
                       /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: isInternal, onChange: (e) => setIsInternal(e.target.checked) }),
@@ -992,294 +1112,396 @@ ${uploadedLinks.join("\n")}` : replyBody.trim() || "[Contenu enrichi]";
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sidebar, children: [
-        client && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientCard, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.clientAvatar, children: initials }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientInfo, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientName, children: [
-                client.firstName,
-                " ",
-                client.lastName
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.clientCompany, children: client.company }),
-              /* @__PURE__ */ jsxRuntime.jsx("a", { href: `mailto:${client.email}`, className: s__default.default.clientEmail, children: client.email })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientActions, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: `/admin/collections/support-clients/${client.id}`, className: s__default.default.smallBtn, children: t("client.clientSheet") }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.smallBtn, onClick: () => window.open(`/api/admin/impersonate?clientId=${client.id}`, "_blank"), children: t("client.clientPortal") })
-          ] })
-        ] }),
-        clientSummary && clientSummary.summary && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${s__default.default.sideSection} ${s__default.default.aiCard}`, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.aiCardTitle, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiCardIcon, "aria-hidden": true, children: "\u2728" }),
-            "Synth\xE8se client"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: s__default.default.aiCardLead, children: clientSummary.summary }),
-          clientSummary.recurringTopics && clientSummary.recurringTopics.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.aiCardChips, children: clientSummary.recurringTopics.slice(0, 5).map((tp, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiChip, children: tp.topic }, `tp-${i}`)) }),
-          clientSummary.keyFacts && clientSummary.keyFacts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: s__default.default.aiCardFacts, children: clientSummary.keyFacts.slice(0, 4).map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: s__default.default.aiCardFact, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiCardDot, "aria-hidden": true }),
-            f
-          ] }, `kf-${i}`)) })
+        /* @__PURE__ */ jsxRuntime.jsxs("nav", { role: "tablist", "aria-label": t("detail.sidebar.tabs.overview"), className: s__default.default.sidebarTabs, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              id: "sidebar-tab-overview",
+              "aria-selected": sidebarTab === "overview",
+              "aria-controls": "sidebar-panel-overview",
+              tabIndex: sidebarTab === "overview" ? 0 : -1,
+              className: `${s__default.default.sidebarTab} ${sidebarTab === "overview" ? s__default.default.sidebarTabActive : ""}`,
+              onClick: () => setSidebarTab("overview"),
+              children: t("detail.sidebar.tabs.overview")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              id: "sidebar-tab-client",
+              "aria-selected": sidebarTab === "client",
+              "aria-controls": "sidebar-panel-client",
+              tabIndex: sidebarTab === "client" ? 0 : -1,
+              className: `${s__default.default.sidebarTab} ${sidebarTab === "client" ? s__default.default.sidebarTabActive : ""}`,
+              onClick: () => setSidebarTab("client"),
+              children: t("detail.sidebar.tabs.client")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              id: "sidebar-tab-activity",
+              "aria-selected": sidebarTab === "activity",
+              "aria-controls": "sidebar-panel-activity",
+              tabIndex: sidebarTab === "activity" ? 0 : -1,
+              className: `${s__default.default.sidebarTab} ${sidebarTab === "activity" ? s__default.default.sidebarTabActive : ""}`,
+              onClick: () => setSidebarTab("activity"),
+              children: t("detail.sidebar.tabs.activity")
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSectionTitle, children: t("detail.details") }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideField, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideLabel, children: t("detail.priority") }),
-            /* @__PURE__ */ jsxRuntime.jsxs("select", { className: s__default.default.sideSelect, value: ticket.priority || "normal", onChange: (e) => handleFieldPatch("priority", e.target.value), "aria-label": t("detail.priority"), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "low", children: t("ticket.priority.low") }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "normal", children: t("ticket.priority.normal") }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "high", children: t("ticket.priority.high") }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "urgent", children: t("ticket.priority.urgent") })
+        sidebarTab === "overview" && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "tabpanel", id: "sidebar-panel-overview", "aria-labelledby": "sidebar-tab-overview", children: [
+          client && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientCard, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.clientAvatar, children: initials }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientInfo, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientName, children: [
+                  client.firstName,
+                  " ",
+                  client.lastName
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.clientCompany, children: client.company }),
+                /* @__PURE__ */ jsxRuntime.jsx("a", { href: `mailto:${client.email}`, className: s__default.default.clientEmail, children: client.email })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientActions, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: `/admin/collections/support-clients/${client.id}`, className: s__default.default.smallBtn, children: t("client.clientSheet") }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.smallBtn, onClick: () => window.open(`/api/admin/impersonate?clientId=${client.id}`, "_blank"), children: t("client.clientPortal") })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideField, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideLabel, children: t("detail.category") }),
-            /* @__PURE__ */ jsxRuntime.jsxs("select", { className: s__default.default.sideSelect, value: ticket.category || "", onChange: (e) => handleFieldPatch("category", e.target.value), "aria-label": t("detail.category"), children: [
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "\u2014" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "bug", children: t("ticket.category.bug") }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "content", children: t("ticket.category.content") }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "feature", children: t("ticket.category.feature") }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "question", children: t("ticket.category.question") }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "hosting", children: t("ticket.category.hosting") })
+          clientSummary && clientSummary.summary && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${s__default.default.sideSection} ${s__default.default.aiCard}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.aiCardTitle, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiCardIcon, "aria-hidden": true, children: "\u2728" }),
+              "Synth\xE8se client"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: s__default.default.aiCardLead, children: clientSummary.summary }),
+            clientSummary.recurringTopics && clientSummary.recurringTopics.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.aiCardChips, children: clientSummary.recurringTopics.slice(0, 5).map((tp, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiChip, children: tp.topic }, `tp-${i}`)) }),
+            clientSummary.keyFacts && clientSummary.keyFacts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: s__default.default.aiCardFacts, children: clientSummary.keyFacts.slice(0, 4).map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: s__default.default.aiCardFact, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.aiCardDot, "aria-hidden": true }),
+              f
+            ] }, `kf-${i}`)) }),
+            clientSummary?.nextActions && clientSummary.nextActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h5", { className: s__default.default.aiCardNextTitle, children: t("detail.aiCard.nextActions.title") }),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: s__default.default.aiCardNextActions, children: clientSummary.nextActions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                NextActionItem,
+                {
+                  action,
+                  index: i,
+                  onToggle: async (done) => {
+                    const updatedActions = (clientSummary.nextActions || []).map(
+                      (a, j) => j === i ? { ...a, done } : a
+                    );
+                    if (clientSummary.id != null) {
+                      try {
+                        await fetch(`/api/client-summaries/${clientSummary.id}`, {
+                          method: "PATCH",
+                          credentials: "include",
+                          headers: { "Content-Type": "application/json" },
+                          body: JSON.stringify({ nextActions: updatedActions })
+                        });
+                      } catch {
+                      }
+                    }
+                    setClientSummary({ ...clientSummary, nextActions: updatedActions });
+                  }
+                },
+                action.id || `na-${i}`
+              )) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideField, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideLabel, children: t("detail.source") }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideValue, children: ticket.source || t("ticket.source.portal") })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSectionTitle, children: t("detail.details") }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideField, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideLabel, children: t("detail.priority") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("select", { className: s__default.default.sideSelect, value: ticket.priority || "normal", onChange: (e) => handleFieldPatch("priority", e.target.value), "aria-label": t("detail.priority"), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "low", children: t("ticket.priority.low") }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "normal", children: t("ticket.priority.normal") }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "high", children: t("ticket.priority.high") }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "urgent", children: t("ticket.priority.urgent") })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideField, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideLabel, children: t("detail.category") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("select", { className: s__default.default.sideSelect, value: ticket.category || "", onChange: (e) => handleFieldPatch("category", e.target.value), "aria-label": t("detail.category"), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "\u2014" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "bug", children: t("ticket.category.bug") }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "content", children: t("ticket.category.content") }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "feature", children: t("ticket.category.feature") }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "question", children: t("ticket.category.question") }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "hosting", children: t("ticket.category.hosting") })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideField, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideLabel, children: t("detail.source") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideValue, children: ticket.source || t("ticket.source.portal") })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideField, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideLabel, children: t("detail.assigned") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideValue, children: typeof ticket.assignedTo === "object" && ticket.assignedTo ? ticket.assignedTo.firstName || "Admin" : "\u2014" })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideField, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideLabel, children: t("detail.assigned") }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.sideValue, children: typeof ticket.assignedTo === "object" && ticket.assignedTo ? ticket.assignedTo.firstName || "Admin" : "\u2014" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSectionTitle, children: t("detail.tags") }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.tagsWrap, children: [
-            tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.tagChip, children: [
-              tag,
-              /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.tagRemove, "aria-label": `Retirer le tag ${tag}`, onClick: () => handleRemoveTag(tag), children: "\xD7" })
-            ] }, tag)),
-            addingTag ? /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                className: s__default.default.tagInput,
-                value: newTagValue,
-                onChange: (e) => setNewTagValue(e.target.value),
-                onKeyDown: (e) => {
-                  if (e.key === "Enter") handleAddTag();
-                  if (e.key === "Escape") {
-                    setAddingTag(false);
-                    setNewTagValue("");
+          features.timeTracking && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSectionTitle, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("detail.time") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--theme-text)", fontWeight: 600, textTransform: "none", letterSpacing: 0 }, children: totalMin > 0 ? `${Math.floor(totalMin / 60)}h${String(totalMin % 60).padStart(2, "0")} ${t("detail.total")}` : "0min" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.timer, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${s__default.default.timerDisplay} ${timerRunning ? s__default.default.timerActive : ""}`, children: [
+                String(Math.floor(timerSeconds / 60)).padStart(2, "0"),
+                ":",
+                String(timerSeconds % 60).padStart(2, "0")
+              ] }),
+              !timerRunning ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.timerBtn, onClick: () => setTimerRunning(true), "aria-label": "D\xE9marrer le timer", children: timerSeconds > 0 ? "\u25B6" : "\u25B6 Go" }) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.timerBtn, onClick: () => setTimerRunning(false), "aria-label": "Mettre en pause le timer", children: "\u23F8 Pause" }),
+              timerSeconds >= 60 && !timerRunning && /* @__PURE__ */ jsxRuntime.jsxs("button", { className: s__default.default.timerBtn, onClick: () => {
+                handleTimerSave();
+                localStorage.removeItem(`timer-sec-${ticketId}`);
+                localStorage.removeItem(`timer-run-${ticketId}`);
+              }, "aria-label": "Sauvegarder le temps", children: [
+                "\u{1F4BE} ",
+                Math.round(timerSeconds / 60),
+                "m"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.timerBar, "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.timerBarFill, style: { width: `${Math.min(100, (totalMin + Math.floor(timerSeconds / 60)) / 120 * 100)}%` } }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, marginTop: 8, alignItems: "center" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("input", { type: "number", min: "1", placeholder: "min", style: { width: 60, padding: "4px 8px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, id: "manual-time-input" }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.timerBtn, onClick: async () => {
+                const input = document.getElementById("manual-time-input");
+                const mins = Number(input?.value);
+                if (!mins || mins < 1 || !ticketId) return;
+                try {
+                  await fetch("/api/time-entries", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ ticket: Number(ticketId), duration: mins, date: (/* @__PURE__ */ new Date()).toISOString(), description: "Saisie manuelle" }) });
+                  if (input) input.value = "";
+                  fetchAll();
+                } catch {
+                }
+              }, style: { fontSize: 11 }, children: "+ Ajouter" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 8, fontSize: 11, color: "var(--theme-elevation-500)" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "2px 0", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Facturable" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: async () => {
+                      const newVal = ticket.billable === false ? true : false;
+                      try {
+                        await fetch(`/api/tickets/${ticketId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ billable: newVal }) });
+                        fetchAll();
+                      } catch {
+                      }
+                    },
+                    style: { fontWeight: 600, color: ticket.billable !== false ? "#16a34a" : "#dc2626", background: "none", border: "none", cursor: "pointer", fontSize: 11, textDecoration: "underline" },
+                    children: ticket.billable !== false ? "Oui" : "Non"
                   }
-                },
-                onBlur: handleAddTag,
-                placeholder: "Tag...",
-                autoFocus: true
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.tagAddBtn, onClick: () => setAddingTag(true), "aria-label": "Ajouter un tag", children: "+ Tag" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSectionTitle, children: "Facturation" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12 }, children: "Type" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "select",
+                )
+              ] }),
+              totalMin > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "2px 0" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Montant estim\xE9" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 700, color: "var(--theme-text)" }, children: [
+                  (totalMin / 60 * 60).toFixed(0),
+                  "\u20AC"
+                ] })
+              ] })
+            ] }),
+            timeEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8, fontSize: 11 }, children: timeEntries.slice(0, 6).map((e) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "3px 0", color: "var(--theme-elevation-500)" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(e.date).toLocaleDateString("fr-FR", { day: "numeric", month: "short" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { title: e.description, style: { fontWeight: 600, cursor: e.description ? "help" : "default" }, children: [
+                e.duration,
+                "min"
+              ] })
+            ] }, e.id)) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSectionTitle, children: t("detail.tags") }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.tagsWrap, children: [
+              tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.tagChip, children: [
+                tag,
+                /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.tagRemove, "aria-label": `Retirer le tag ${tag}`, onClick: () => handleRemoveTag(tag), children: "\xD7" })
+              ] }, tag)),
+              addingTag ? /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
                 {
-                  value: ticket?.billingType || "hourly",
-                  onChange: async (e) => {
-                    try {
-                      await fetch(`/api/tickets/${ticketId}`, {
-                        method: "PATCH",
-                        credentials: "include",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({ billingType: e.target.value })
-                      });
-                      fetchAll();
-                    } catch {
+                  className: s__default.default.tagInput,
+                  value: newTagValue,
+                  onChange: (e) => setNewTagValue(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") handleAddTag();
+                    if (e.key === "Escape") {
+                      setAddingTag(false);
+                      setNewTagValue("");
                     }
                   },
-                  style: { fontSize: 12, padding: "4px 8px", borderRadius: 6, border: "1px solid #e5e7eb", background: "#fff" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "hourly", children: "Au temps" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "flat", children: "Forfait" })
-                  ]
+                  onBlur: handleAddTag,
+                  placeholder: "Tag...",
+                  autoFocus: true
                 }
-              )
-            ] }),
-            ticket?.billingType === "flat" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12 }, children: "Montant forfait" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
+              ) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.tagAddBtn, onClick: () => setAddingTag(true), "aria-label": "Ajouter un tag", children: "+ Tag" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSectionTitle, children: "Facturation" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12 }, children: "Type" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "select",
                   {
-                    type: "number",
-                    defaultValue: ticket?.flatRateAmount ?? "",
-                    placeholder: "0",
-                    onBlur: async (e) => {
-                      const val = e.target.value ? Number(e.target.value) : null;
+                    value: ticket?.billingType || "hourly",
+                    onChange: async (e) => {
                       try {
                         await fetch(`/api/tickets/${ticketId}`, {
                           method: "PATCH",
                           credentials: "include",
                           headers: { "Content-Type": "application/json" },
-                          body: JSON.stringify({ flatRateAmount: val })
+                          body: JSON.stringify({ billingType: e.target.value })
                         });
                         fetchAll();
                       } catch {
                       }
                     },
-                    style: { fontSize: 12, padding: "4px 8px", borderRadius: 6, border: "1px solid #e5e7eb", width: 80, textAlign: "right" }
+                    style: { fontSize: 12, padding: "4px 8px", borderRadius: 6, border: "1px solid #e5e7eb", background: "#fff" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "hourly", children: "Au temps" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "flat", children: "Forfait" })
+                    ]
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#9ca3af" }, children: "\u20AC" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12 }, children: "Montant factur\xE9" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
+                )
+              ] }),
+              ticket?.billingType === "flat" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12 }, children: "Montant forfait" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "number",
+                      defaultValue: ticket?.flatRateAmount ?? "",
+                      placeholder: "0",
+                      onBlur: async (e) => {
+                        const val = e.target.value ? Number(e.target.value) : null;
+                        try {
+                          await fetch(`/api/tickets/${ticketId}`, {
+                            method: "PATCH",
+                            credentials: "include",
+                            headers: { "Content-Type": "application/json" },
+                            body: JSON.stringify({ flatRateAmount: val })
+                          });
+                          fetchAll();
+                        } catch {
+                        }
+                      },
+                      style: { fontSize: 12, padding: "4px 8px", borderRadius: 6, border: "1px solid #e5e7eb", width: 80, textAlign: "right" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#9ca3af" }, children: "\u20AC" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12 }, children: "Montant factur\xE9" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "number",
+                      defaultValue: ticket?.billedAmount ?? "",
+                      placeholder: "0",
+                      onBlur: async (e) => {
+                        const val = e.target.value ? Number(e.target.value) : null;
+                        try {
+                          await fetch(`/api/tickets/${ticketId}`, {
+                            method: "PATCH",
+                            credentials: "include",
+                            headers: { "Content-Type": "application/json" },
+                            body: JSON.stringify({ billedAmount: val })
+                          });
+                          fetchAll();
+                        } catch {
+                        }
+                      },
+                      style: { fontSize: 12, padding: "4px 8px", borderRadius: 6, border: "1px solid #e5e7eb", width: 80, textAlign: "right" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#9ca3af" }, children: "\u20AC" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12 }, children: "Paiement" }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "select",
                   {
-                    type: "number",
-                    defaultValue: ticket?.billedAmount ?? "",
-                    placeholder: "0",
-                    onBlur: async (e) => {
-                      const val = e.target.value ? Number(e.target.value) : null;
+                    value: ticket?.paymentStatus || "unpaid",
+                    onChange: async (e) => {
                       try {
                         await fetch(`/api/tickets/${ticketId}`, {
                           method: "PATCH",
                           credentials: "include",
                           headers: { "Content-Type": "application/json" },
-                          body: JSON.stringify({ billedAmount: val })
+                          body: JSON.stringify({ paymentStatus: e.target.value })
                         });
                         fetchAll();
                       } catch {
                       }
                     },
-                    style: { fontSize: 12, padding: "4px 8px", borderRadius: 6, border: "1px solid #e5e7eb", width: 80, textAlign: "right" }
+                    style: { fontSize: 12, padding: "4px 8px", borderRadius: 6, border: "1px solid #e5e7eb", background: "#fff" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "unpaid", children: "Non pay\xE9" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "partial", children: "Partiel" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "paid", children: "Pay\xE9" })
+                    ]
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#9ca3af" }, children: "\u20AC" })
+                )
               ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12 }, children: "Paiement" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "select",
-                {
-                  value: ticket?.paymentStatus || "unpaid",
-                  onChange: async (e) => {
-                    try {
-                      await fetch(`/api/tickets/${ticketId}`, {
-                        method: "PATCH",
-                        credentials: "include",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({ paymentStatus: e.target.value })
-                      });
-                      fetchAll();
-                    } catch {
-                    }
-                  },
-                  style: { fontSize: 12, padding: "4px 8px", borderRadius: 6, border: "1px solid #e5e7eb", background: "#fff" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "unpaid", children: "Non pay\xE9" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "partial", children: "Partiel" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "paid", children: "Pay\xE9" })
-                  ]
-                }
-              )
             ] })
-          ] })
-        ] }),
-        features.timeTracking && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSectionTitle, children: [
-            t("detail.time"),
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 700, fontSize: 13, color: "#d97706" }, children: totalMin > 0 ? `${Math.floor(totalMin / 60)}h${String(totalMin % 60).padStart(2, "0")} ${t("detail.total")}` : "0min" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.timer, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${s__default.default.timerDisplay} ${timerRunning ? s__default.default.timerActive : ""}`, children: [
-              String(Math.floor(timerSeconds / 60)).padStart(2, "0"),
-              ":",
-              String(timerSeconds % 60).padStart(2, "0")
+          summaryLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSection, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-400)", textAlign: "center", padding: 8 }, children: "\u2728 Chargement de la synth\xE8se\u2026" }) })
+        ] }),
+        sidebarTab === "client" && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "tabpanel", id: "sidebar-panel-client", "aria-labelledby": "sidebar-tab-client", children: [
+          client && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientCard, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.clientAvatar, children: initials }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientInfo, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientName, children: [
+                  client.firstName,
+                  " ",
+                  client.lastName
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.clientCompany, children: client.company }),
+                /* @__PURE__ */ jsxRuntime.jsx("a", { href: `mailto:${client.email}`, className: s__default.default.clientEmail, children: client.email }),
+                client.phone && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `tel:${client.phone}`, className: s__default.default.clientEmail, children: client.phone })
+              ] })
             ] }),
-            !timerRunning ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.timerBtn, onClick: () => setTimerRunning(true), style: { color: "#dc2626", borderColor: "#dc2626" }, "aria-label": "D\xE9marrer le timer", children: timerSeconds > 0 ? "\u25B6" : "\u25B6 Go" }) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.timerBtn, onClick: () => setTimerRunning(false), "aria-label": "Mettre en pause le timer", children: "\u23F8" }),
-            timerSeconds >= 60 && !timerRunning && /* @__PURE__ */ jsxRuntime.jsxs("button", { className: s__default.default.timerBtn, onClick: () => {
-              handleTimerSave();
-              localStorage.removeItem(`timer-sec-${ticketId}`);
-              localStorage.removeItem(`timer-run-${ticketId}`);
-            }, style: { color: "#16a34a", borderColor: "#16a34a" }, "aria-label": "Sauvegarder le temps", children: [
-              "\u{1F4BE} ",
-              Math.round(timerSeconds / 60),
-              "m"
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.clientActions, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Link__default.default, { href: `/admin/collections/support-clients/${client.id}`, className: s__default.default.smallBtn, children: t("client.clientSheet") }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.smallBtn, onClick: () => window.open(`/api/admin/impersonate?clientId=${client.id}`, "_blank"), children: t("client.clientPortal") })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, marginTop: 8, alignItems: "center" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("input", { type: "number", min: "1", placeholder: "min", style: { width: 60, padding: "4px 8px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" }, id: "manual-time-input" }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { className: s__default.default.timerBtn, onClick: async () => {
-              const input = document.getElementById("manual-time-input");
-              const mins = Number(input?.value);
-              if (!mins || mins < 1 || !ticketId) return;
-              try {
-                await fetch("/api/time-entries", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ ticket: Number(ticketId), duration: mins, date: (/* @__PURE__ */ new Date()).toISOString(), description: "Saisie manuelle" }) });
-                if (input) input.value = "";
-                fetchAll();
-              } catch {
-              }
-            }, style: { fontSize: 11 }, children: "+ Ajouter" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 8, fontSize: 11, color: "var(--theme-elevation-500)" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "2px 0", alignItems: "center" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Facturable" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: async () => {
-                    const newVal = ticket.billable === false ? true : false;
-                    try {
-                      await fetch(`/api/tickets/${ticketId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ billable: newVal }) });
-                      fetchAll();
-                    } catch {
-                    }
-                  },
-                  style: { fontWeight: 600, color: ticket.billable !== false ? "#16a34a" : "#dc2626", background: "none", border: "none", cursor: "pointer", fontSize: 11, textDecoration: "underline" },
-                  children: ticket.billable !== false ? "Oui" : "Non"
-                }
-              )
-            ] }),
-            totalMin > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "2px 0" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Montant estim\xE9" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 700, color: "var(--theme-text)" }, children: [
-                (totalMin / 60 * 60).toFixed(0),
-                "\u20AC"
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSectionTitle, children: t("detail.sidebar.previousTickets") }),
+            previousTickets.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.previousTicketsEmpty, children: "\u2014" }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: s__default.default.previousTicketsList, children: previousTickets.map((pt) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: s__default.default.previousTicketsItem, children: /* @__PURE__ */ jsxRuntime.jsxs(Link__default.default, { href: `/admin/collections/tickets/${pt.id}`, className: s__default.default.previousTicketsLink, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.previousTicketsSubject, children: pt.subject || `#${pt.id}` }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: s__default.default.previousTicketsMeta, children: [
+                pt.status ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.previousTicketsStatus, children: pt.status }) : null,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: s__default.default.previousTicketsDate, children: new Date(pt.createdAt).toLocaleDateString("fr-FR", { day: "numeric", month: "short", year: "numeric" }) })
               ] })
-            ] })
-          ] }),
-          timeEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 8, fontSize: 11 }, children: timeEntries.slice(0, 6).map((e) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", padding: "3px 0", color: "var(--theme-elevation-500)" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(e.date).toLocaleDateString("fr-FR", { day: "numeric", month: "short" }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { title: e.description, style: { fontWeight: 600, cursor: e.description ? "help" : "default" }, children: [
-              e.duration,
-              "min"
-            ] })
-          ] }, e.id)) })
+            ] }) }, pt.id)) })
+          ] })
         ] }),
-        features.activityLog && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSectionTitle, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: s__default.default.collapseBtn, onClick: () => setShowActivity(!showActivity), "aria-label": showActivity ? "Masquer le journal" : "Afficher le journal", children: [
-            "Activit\xE9 ",
-            showActivity ? "\u25BE" : "\u25B8"
-          ] }) }),
-          showActivity && activityLog.slice(0, 8).map((a) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.activityItem, children: [
+        sidebarTab === "activity" && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tabpanel", id: "sidebar-panel-activity", "aria-labelledby": "sidebar-tab-activity", children: features.activityLog ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.sideSection, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSectionTitle, children: t("detail.activity") }),
+          activityLog.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.previousTicketsEmpty, children: "\u2014" }) : activityLog.slice(0, 30).map((a) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.activityItem, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.activityDot, style: { backgroundColor: a.actorType === "admin" ? "#2563eb" : a.actorType === "system" ? "#6b7280" : "#16a34a" } }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.activityContent, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.activityText, children: (a.detail || a.action).slice(0, 60) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.activityText, children: (a.detail || a.action).slice(0, 120) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.activityTime, children: timeAgo(a.createdAt) })
             ] })
           ] }, a.id))
-        ] }),
-        summaryLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSection, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-400)", textAlign: "center", padding: 8 }, children: "\u2728 Chargement de la synth\xE8se\u2026" }) })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.sideSection, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: s__default.default.previousTicketsEmpty, children: "\u2014" }) }) })
       ] })
     ] }),
     undoToast && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s__default.default.undoToast, role: "alert", children: [