@consilioweb/payload-support 0.8.2 → 0.9.5

package/dist/views/ImportConversationView/client.cjs

@@ -3,6 +3,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var useTranslation = require('../../components/TicketConversation/hooks/useTranslation');
+var styles = require('../../styles/ImportConversation.module.scss');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 function ImportConversationClient() {
   const { t } = useTranslation.useTranslation();
@@ -29,33 +34,43 @@ function ImportConversationClient() {
     setPreview(null);
     const reader = new FileReader();
     reader.onload = (e) => {
-      setMarkdown(e.target?.result);
+      const content = e.target?.result;
+      setMarkdown(content);
     };
     reader.readAsText(file);
   }, []);
-  const onDrop = react.useCallback((e) => {
-    e.preventDefault();
-    setIsDragOver(false);
-    const file = e.dataTransfer.files[0];
-    if (file) handleFile(file);
-  }, [handleFile]);
-  const onFileChange = react.useCallback((e) => {
-    const file = e.target.files?.[0];
-    if (file) handleFile(file);
-  }, [handleFile]);
+  const onDrop = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      const file = e.dataTransfer.files[0];
+      if (file) handleFile(file);
+    },
+    [handleFile]
+  );
+  const onFileChange = react.useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (file) handleFile(file);
+    },
+    [handleFile]
+  );
   const doPreview = react.useCallback(async () => {
     if (!markdown) return;
     setLoading(true);
     setError("");
     setPreview(null);
     try {
-      const res = await fetch("/api/support/import-conversation", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ markdown, previewOnly: true }) });
+      const res = await fetch("/api/support/import-conversation", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ markdown, previewOnly: true })
+      });
       const data = await res.json();
       if (!res.ok) {
-        setError(data.error || "Erreur");
+        setError(data.error || "Erreur lors de l'analyse");
         return;
       }
-      ;
       setPreview(data);
     } catch {
       setError("Erreur reseau");
@@ -68,13 +83,16 @@ function ImportConversationClient() {
     setLoading(true);
     setError("");
     try {
-      const res = await fetch("/api/support/import-conversation", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ markdown }) });
+      const res = await fetch("/api/support/import-conversation", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ markdown })
+      });
       const data = await res.json();
       if (!res.ok) {
-        setError(data.error || "Erreur");
+        setError(data.error || "Erreur lors de l'import");
         return;
       }
-      ;
       setResult(data);
       setPreview(null);
     } catch {
@@ -91,112 +109,127 @@ function ImportConversationClient() {
     setError("");
     if (fileRef.current) fileRef.current.value = "";
   }, []);
-  const S = {
-    page: { padding: "20px 30px", maxWidth: 720, margin: "0 auto" },
-    dropzone: { border: "2px dashed var(--theme-elevation-300)", borderRadius: 12, padding: 40, textAlign: "center", cursor: "pointer", transition: "all 150ms" },
-    dropzoneDragOver: { border: "2px dashed #2563eb", borderRadius: 12, padding: 40, textAlign: "center", cursor: "pointer", background: "#eff6ff" },
-    dropzoneHasFile: { border: "2px solid #22c55e", borderRadius: 12, padding: 40, textAlign: "center", cursor: "pointer", background: "#f0fdf4" },
-    btn: { padding: "8px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)", fontWeight: 600 },
-    btnPrimary: { padding: "8px 16px", borderRadius: 8, border: "none", fontSize: 13, cursor: "pointer", background: "#2563eb", color: "#fff", fontWeight: 600 },
-    btnGreen: { padding: "8px 16px", borderRadius: 8, border: "none", fontSize: 13, cursor: "pointer", background: "#16a34a", color: "#fff", fontWeight: 600 },
-    btnAmber: { padding: "8px 16px", borderRadius: 8, border: "none", fontSize: 13, cursor: "pointer", background: "#d97706", color: "#fff", fontWeight: 600 },
-    section: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)", marginBottom: 12 },
-    infoRow: { display: "flex", justifyContent: "space-between", padding: "4px 0", fontSize: 13 },
-    infoLabel: { color: "var(--theme-elevation-500)" },
-    infoValue: { fontWeight: 600, color: "var(--theme-text)" },
-    msgAdmin: { padding: "8px 12px", borderRadius: 8, background: "#dbeafe", marginBottom: 6 },
-    msgClient: { padding: "8px 12px", borderRadius: 8, background: "var(--theme-elevation-50)", marginBottom: 6 },
-    resultSuccess: { padding: 20, borderRadius: 10, border: "2px solid #22c55e", background: "#f0fdf4" },
-    resultError: { padding: 16, borderRadius: 10, border: "1px solid #fecaca", background: "#fef2f2", color: "#dc2626", marginBottom: 12 }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.page, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { fontSize: 22, fontWeight: 700, margin: 0 }, children: t("import.title") }),
-      result && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: reset, style: S.btnPrimary, children: t("import.newImport") })
-    ] }),
-    !result && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: isDragOver ? S.dropzoneDragOver : markdown ? S.dropzoneHasFile : S.dropzone, onDragOver: (e) => {
-      e.preventDefault();
-      setIsDragOver(true);
-    }, onDragLeave: () => setIsDragOver(false), onDrop, onClick: () => fileRef.current?.click(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 24, marginBottom: 8 }, children: "\u2191" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 14, color: "var(--theme-text)" }, children: markdown ? t("import.dropzoneLoaded") : t("import.dropzoneText") }),
-      !markdown && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 12, color: "var(--theme-elevation-400)", marginTop: 8 }, children: t("import.acceptedFormats") }),
-      fileName && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 12, fontWeight: 600, marginTop: 8 }, children: fileName }),
-      /* @__PURE__ */ jsxRuntime.jsx("input", { ref: fileRef, type: "file", accept: ".md,.txt", onChange: onFileChange, style: { display: "none" } })
+  const dropzoneClass = isDragOver ? styles__default.default.dropzoneDragOver : markdown ? styles__default.default.dropzoneHasFile : styles__default.default.dropzone;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.page, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: styles__default.default.title, children: t("import.title") }) }),
+      result && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: reset, className: styles__default.default.btnPrimary, children: t("import.newImport") })
     ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.resultError, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: t("common.error") }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "4px 0 0" }, children: error })
+    !result && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: dropzoneClass,
+        onDragOver: (e) => {
+          e.preventDefault();
+          setIsDragOver(true);
+        },
+        onDragLeave: () => setIsDragOver(false),
+        onDrop,
+        onClick: () => fileRef.current?.click(),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.dropzoneIcon, children: "\u2191" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles__default.default.dropzoneText, children: markdown ? t("import.dropzoneLoaded") : t("import.dropzoneText") }),
+          !markdown && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 12, color: "var(--theme-elevation-400)", marginTop: 8 }, children: t("import.acceptedFormats") }),
+          fileName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles__default.default.fileName, children: fileName }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: fileRef,
+              type: "file",
+              accept: ".md,.txt",
+              onChange: onFileChange,
+              style: { display: "none" }
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.resultError, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultTitleError, children: "\u26A0 Erreur" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles__default.default.errorText, children: error })
     ] }),
-    markdown && !preview && !result && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "center", marginTop: 16 }, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: doPreview, disabled: loading, style: S.btnAmber, children: loading ? t("import.analyzing") : t("import.preview") }) }),
+    markdown && !preview && !result && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.btnRow, children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: doPreview, disabled: loading, className: styles__default.default.btnAmber, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.btnContent, children: [
+      "\u{1F441} ",
+      loading ? t("import.analyzing") : t("import.preview")
+    ] }) }) }),
     preview && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.section, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 700, marginBottom: 8 }, children: t("import.client") }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.infoRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoLabel, children: t("import.name") }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoValue, children: preview.client.name })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.section, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.sectionTitle, children: [
+          "\u{1F464} ",
+          t("import.client")
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.infoRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoLabel, children: t("import.email") }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoValue, children: preview.client.email })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.infoRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoLabel, children: t("import.name") }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoValue, children: preview.client.name })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.infoRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoLabel, children: t("import.company") }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoValue, children: preview.client.company })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.infoRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoLabel, children: t("import.email") }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoValue, children: preview.client.email })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.infoRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoLabel, children: t("import.parsing") }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoValue, children: preview.parseMethod === "structured" ? t("import.parsingRegex") : t("import.parsingAi") })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.infoRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoLabel, children: t("import.company") }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoValue, children: preview.client.company })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.infoRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoLabel, children: t("import.parsing") }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoValue, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badgeInfo, children: preview.parseMethod === "structured" ? t("import.parsingRegex") : t("import.parsingAi") }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.section, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontWeight: 700, marginBottom: 8, display: "flex", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: preview.subject }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "var(--theme-elevation-500)", fontSize: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.section, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.sectionTitle, children: [
+          "\u{1F4AC} ",
+          preview.subject,
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sectionTitleRight, children: [
             preview.messageCount,
             " ",
             t("import.messages")
           ] })
         ] }),
-        preview.messages.map((msg, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: msg.from === "admin" ? S.msgAdmin : S.msgClient, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 4 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600 }, children: [
+        preview.messages.map((msg, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: msg.from === "admin" ? styles__default.default.msgAdmin : styles__default.default.msgClient, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.msgHeader, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.msgAuthor, children: [
               msg.from === "admin" ? ">> " : "<< ",
               msg.name
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--theme-elevation-400)" }, children: msg.date })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.msgDate, children: msg.date })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13 }, children: msg.preview })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.msgPreview, children: msg.preview })
         ] }, i))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 12 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPreview(null), style: S.btn, children: t("common.cancel") }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: doImport, disabled: loading, style: S.btnGreen, children: loading ? t("import.importing") : t("import.importButton", { count: String(preview.messageCount) }) })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.btnRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPreview(null), className: styles__default.default.btnMuted, children: t("common.cancel") }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: doImport, disabled: loading, className: styles__default.default.btnGreen, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.btnContent, children: [
+          "\u279C ",
+          loading ? t("import.importing") : t("import.importButton", { count: String(preview.messageCount) })
+        ] }) })
       ] })
     ] }),
-    result && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.resultSuccess, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 700, fontSize: 16, marginBottom: 12, color: "#166534" }, children: t("import.resultTitle") }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.infoRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoLabel, children: t("import.resultTicket") }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoValue, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: `/admin/support/ticket?id=${result.ticketId}`, style: { color: "#2563eb" }, children: result.ticketNumber }) })
+    result && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.resultSuccess, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.resultTitleSuccess, children: [
+        "\u2713 ",
+        t("import.resultTitle")
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.infoRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoLabel, children: t("import.resultTicket") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoValue, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: `/admin/support/ticket?id=${result.ticketId}`, className: styles__default.default.link, children: result.ticketNumber }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.infoRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoLabel, children: t("import.resultClient") }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: S.infoValue, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.infoRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoLabel, children: t("import.resultClient") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.infoValue, children: [
           result.clientName,
           " (",
           result.clientEmail,
           ")",
-          result.isNewClient && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: 8, padding: "1px 6px", borderRadius: 4, background: "#dbeafe", color: "#1e40af", fontSize: 10 }, children: t("import.resultNew") })
+          result.isNewClient && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badgeNew, style: { marginLeft: 8 }, children: t("import.resultNew") })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.infoRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoLabel, children: t("import.resultCompany") }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoValue, children: result.clientCompany })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.infoRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoLabel, children: t("import.resultCompany") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoValue, children: result.clientCompany })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: S.infoRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoLabel, children: t("import.resultMessages") }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: S.infoValue, children: t("import.resultImported", { count: String(result.messagesImported) }) })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.infoRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoLabel, children: t("import.resultMessages") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.infoValue, children: t("import.resultImported", { count: String(result.messagesImported) }) })
       ] })
     ] })
   ] });

package/dist/views/ImportConversationView/client.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useCallback } from 'react';
 import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation.js';
+import styles from '../../styles/ImportConversation.module.scss';
 
 function ImportConversationClient() {
   const { t } = useTranslation();
@@ -28,33 +29,43 @@ function ImportConversationClient() {
     setPreview(null);
     const reader = new FileReader();
     reader.onload = (e) => {
-      setMarkdown(e.target?.result);
+      const content = e.target?.result;
+      setMarkdown(content);
     };
     reader.readAsText(file);
   }, []);
-  const onDrop = useCallback((e) => {
-    e.preventDefault();
-    setIsDragOver(false);
-    const file = e.dataTransfer.files[0];
-    if (file) handleFile(file);
-  }, [handleFile]);
-  const onFileChange = useCallback((e) => {
-    const file = e.target.files?.[0];
-    if (file) handleFile(file);
-  }, [handleFile]);
+  const onDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      const file = e.dataTransfer.files[0];
+      if (file) handleFile(file);
+    },
+    [handleFile]
+  );
+  const onFileChange = useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (file) handleFile(file);
+    },
+    [handleFile]
+  );
   const doPreview = useCallback(async () => {
     if (!markdown) return;
     setLoading(true);
     setError("");
     setPreview(null);
     try {
-      const res = await fetch("/api/support/import-conversation", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ markdown, previewOnly: true }) });
+      const res = await fetch("/api/support/import-conversation", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ markdown, previewOnly: true })
+      });
       const data = await res.json();
       if (!res.ok) {
-        setError(data.error || "Erreur");
+        setError(data.error || "Erreur lors de l'analyse");
         return;
       }
-      ;
       setPreview(data);
     } catch {
       setError("Erreur reseau");
@@ -67,13 +78,16 @@ function ImportConversationClient() {
     setLoading(true);
     setError("");
     try {
-      const res = await fetch("/api/support/import-conversation", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ markdown }) });
+      const res = await fetch("/api/support/import-conversation", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ markdown })
+      });
       const data = await res.json();
       if (!res.ok) {
-        setError(data.error || "Erreur");
+        setError(data.error || "Erreur lors de l'import");
         return;
       }
-      ;
       setResult(data);
       setPreview(null);
     } catch {
@@ -90,112 +104,127 @@ function ImportConversationClient() {
     setError("");
     if (fileRef.current) fileRef.current.value = "";
   }, []);
-  const S = {
-    page: { padding: "20px 30px", maxWidth: 720, margin: "0 auto" },
-    dropzone: { border: "2px dashed var(--theme-elevation-300)", borderRadius: 12, padding: 40, textAlign: "center", cursor: "pointer", transition: "all 150ms" },
-    dropzoneDragOver: { border: "2px dashed #2563eb", borderRadius: 12, padding: 40, textAlign: "center", cursor: "pointer", background: "#eff6ff" },
-    dropzoneHasFile: { border: "2px solid #22c55e", borderRadius: 12, padding: 40, textAlign: "center", cursor: "pointer", background: "#f0fdf4" },
-    btn: { padding: "8px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)", fontWeight: 600 },
-    btnPrimary: { padding: "8px 16px", borderRadius: 8, border: "none", fontSize: 13, cursor: "pointer", background: "#2563eb", color: "#fff", fontWeight: 600 },
-    btnGreen: { padding: "8px 16px", borderRadius: 8, border: "none", fontSize: 13, cursor: "pointer", background: "#16a34a", color: "#fff", fontWeight: 600 },
-    btnAmber: { padding: "8px 16px", borderRadius: 8, border: "none", fontSize: 13, cursor: "pointer", background: "#d97706", color: "#fff", fontWeight: 600 },
-    section: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)", marginBottom: 12 },
-    infoRow: { display: "flex", justifyContent: "space-between", padding: "4px 0", fontSize: 13 },
-    infoLabel: { color: "var(--theme-elevation-500)" },
-    infoValue: { fontWeight: 600, color: "var(--theme-text)" },
-    msgAdmin: { padding: "8px 12px", borderRadius: 8, background: "#dbeafe", marginBottom: 6 },
-    msgClient: { padding: "8px 12px", borderRadius: 8, background: "var(--theme-elevation-50)", marginBottom: 6 },
-    resultSuccess: { padding: 20, borderRadius: 10, border: "2px solid #22c55e", background: "#f0fdf4" },
-    resultError: { padding: 16, borderRadius: 10, border: "1px solid #fecaca", background: "#fef2f2", color: "#dc2626", marginBottom: 12 }
-  };
-  return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }, children: [
-      /* @__PURE__ */ jsx("h1", { style: { fontSize: 22, fontWeight: 700, margin: 0 }, children: t("import.title") }),
-      result && /* @__PURE__ */ jsx("button", { onClick: reset, style: S.btnPrimary, children: t("import.newImport") })
-    ] }),
-    !result && /* @__PURE__ */ jsxs("div", { style: isDragOver ? S.dropzoneDragOver : markdown ? S.dropzoneHasFile : S.dropzone, onDragOver: (e) => {
-      e.preventDefault();
-      setIsDragOver(true);
-    }, onDragLeave: () => setIsDragOver(false), onDrop, onClick: () => fileRef.current?.click(), children: [
-      /* @__PURE__ */ jsx("div", { style: { fontSize: 24, marginBottom: 8 }, children: "\u2191" }),
-      /* @__PURE__ */ jsx("p", { style: { fontSize: 14, color: "var(--theme-text)" }, children: markdown ? t("import.dropzoneLoaded") : t("import.dropzoneText") }),
-      !markdown && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "var(--theme-elevation-400)", marginTop: 8 }, children: t("import.acceptedFormats") }),
-      fileName && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, fontWeight: 600, marginTop: 8 }, children: fileName }),
-      /* @__PURE__ */ jsx("input", { ref: fileRef, type: "file", accept: ".md,.txt", onChange: onFileChange, style: { display: "none" } })
+  const dropzoneClass = isDragOver ? styles.dropzoneDragOver : markdown ? styles.dropzoneHasFile : styles.dropzone;
+  return /* @__PURE__ */ jsxs("div", { className: styles.page, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h1", { className: styles.title, children: t("import.title") }) }),
+      result && /* @__PURE__ */ jsx("button", { onClick: reset, className: styles.btnPrimary, children: t("import.newImport") })
     ] }),
-    error && /* @__PURE__ */ jsxs("div", { style: S.resultError, children: [
-      /* @__PURE__ */ jsx("strong", { children: t("common.error") }),
-      /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0" }, children: error })
+    !result && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: dropzoneClass,
+        onDragOver: (e) => {
+          e.preventDefault();
+          setIsDragOver(true);
+        },
+        onDragLeave: () => setIsDragOver(false),
+        onDrop,
+        onClick: () => fileRef.current?.click(),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles.dropzoneIcon, children: "\u2191" }),
+          /* @__PURE__ */ jsx("p", { className: styles.dropzoneText, children: markdown ? t("import.dropzoneLoaded") : t("import.dropzoneText") }),
+          !markdown && /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "var(--theme-elevation-400)", marginTop: 8 }, children: t("import.acceptedFormats") }),
+          fileName && /* @__PURE__ */ jsx("p", { className: styles.fileName, children: fileName }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileRef,
+              type: "file",
+              accept: ".md,.txt",
+              onChange: onFileChange,
+              style: { display: "none" }
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxs("div", { className: styles.resultError, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.resultTitleError, children: "\u26A0 Erreur" }),
+      /* @__PURE__ */ jsx("p", { className: styles.errorText, children: error })
     ] }),
-    markdown && !preview && !result && /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", marginTop: 16 }, children: /* @__PURE__ */ jsx("button", { onClick: doPreview, disabled: loading, style: S.btnAmber, children: loading ? t("import.analyzing") : t("import.preview") }) }),
+    markdown && !preview && !result && /* @__PURE__ */ jsx("div", { className: styles.btnRow, children: /* @__PURE__ */ jsx("button", { onClick: doPreview, disabled: loading, className: styles.btnAmber, children: /* @__PURE__ */ jsxs("span", { className: styles.btnContent, children: [
+      "\u{1F441} ",
+      loading ? t("import.analyzing") : t("import.preview")
+    ] }) }) }),
     preview && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { style: S.section, children: [
-        /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, marginBottom: 8 }, children: t("import.client") }),
-        /* @__PURE__ */ jsxs("div", { style: S.infoRow, children: [
-          /* @__PURE__ */ jsx("span", { style: S.infoLabel, children: t("import.name") }),
-          /* @__PURE__ */ jsx("span", { style: S.infoValue, children: preview.client.name })
+      /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.sectionTitle, children: [
+          "\u{1F464} ",
+          t("import.client")
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.infoRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.infoLabel, children: t("import.name") }),
+          /* @__PURE__ */ jsx("span", { className: styles.infoValue, children: preview.client.name })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: S.infoRow, children: [
-          /* @__PURE__ */ jsx("span", { style: S.infoLabel, children: t("import.email") }),
-          /* @__PURE__ */ jsx("span", { style: S.infoValue, children: preview.client.email })
+        /* @__PURE__ */ jsxs("div", { className: styles.infoRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.infoLabel, children: t("import.email") }),
+          /* @__PURE__ */ jsx("span", { className: styles.infoValue, children: preview.client.email })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: S.infoRow, children: [
-          /* @__PURE__ */ jsx("span", { style: S.infoLabel, children: t("import.company") }),
-          /* @__PURE__ */ jsx("span", { style: S.infoValue, children: preview.client.company })
+        /* @__PURE__ */ jsxs("div", { className: styles.infoRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.infoLabel, children: t("import.company") }),
+          /* @__PURE__ */ jsx("span", { className: styles.infoValue, children: preview.client.company })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: S.infoRow, children: [
-          /* @__PURE__ */ jsx("span", { style: S.infoLabel, children: t("import.parsing") }),
-          /* @__PURE__ */ jsx("span", { style: S.infoValue, children: preview.parseMethod === "structured" ? t("import.parsingRegex") : t("import.parsingAi") })
+        /* @__PURE__ */ jsxs("div", { className: styles.infoRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.infoLabel, children: t("import.parsing") }),
+          /* @__PURE__ */ jsx("span", { className: styles.infoValue, children: /* @__PURE__ */ jsx("span", { className: styles.badgeInfo, children: preview.parseMethod === "structured" ? t("import.parsingRegex") : t("import.parsingAi") }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.section, children: [
-        /* @__PURE__ */ jsxs("div", { style: { fontWeight: 700, marginBottom: 8, display: "flex", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ jsx("span", { children: preview.subject }),
-          /* @__PURE__ */ jsxs("span", { style: { color: "var(--theme-elevation-500)", fontSize: 12 }, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.sectionTitle, children: [
+          "\u{1F4AC} ",
+          preview.subject,
+          /* @__PURE__ */ jsxs("span", { className: styles.sectionTitleRight, children: [
             preview.messageCount,
             " ",
             t("import.messages")
           ] })
         ] }),
-        preview.messages.map((msg, i) => /* @__PURE__ */ jsxs("div", { style: msg.from === "admin" ? S.msgAdmin : S.msgClient, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 4 }, children: [
-            /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
+        preview.messages.map((msg, i) => /* @__PURE__ */ jsxs("div", { className: msg.from === "admin" ? styles.msgAdmin : styles.msgClient, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.msgHeader, children: [
+            /* @__PURE__ */ jsxs("span", { className: styles.msgAuthor, children: [
               msg.from === "admin" ? ">> " : "<< ",
               msg.name
             ] }),
-            /* @__PURE__ */ jsx("span", { style: { color: "var(--theme-elevation-400)" }, children: msg.date })
+            /* @__PURE__ */ jsx("span", { className: styles.msgDate, children: msg.date })
           ] }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 13 }, children: msg.preview })
+          /* @__PURE__ */ jsx("div", { className: styles.msgPreview, children: msg.preview })
         ] }, i))
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 12 }, children: [
-        /* @__PURE__ */ jsx("button", { onClick: () => setPreview(null), style: S.btn, children: t("common.cancel") }),
-        /* @__PURE__ */ jsx("button", { onClick: doImport, disabled: loading, style: S.btnGreen, children: loading ? t("import.importing") : t("import.importButton", { count: String(preview.messageCount) }) })
+      /* @__PURE__ */ jsxs("div", { className: styles.btnRow, children: [
+        /* @__PURE__ */ jsx("button", { onClick: () => setPreview(null), className: styles.btnMuted, children: t("common.cancel") }),
+        /* @__PURE__ */ jsx("button", { onClick: doImport, disabled: loading, className: styles.btnGreen, children: /* @__PURE__ */ jsxs("span", { className: styles.btnContent, children: [
+          "\u279C ",
+          loading ? t("import.importing") : t("import.importButton", { count: String(preview.messageCount) })
+        ] }) })
       ] })
     ] }),
-    result && /* @__PURE__ */ jsxs("div", { style: S.resultSuccess, children: [
-      /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 16, marginBottom: 12, color: "#166534" }, children: t("import.resultTitle") }),
-      /* @__PURE__ */ jsxs("div", { style: S.infoRow, children: [
-        /* @__PURE__ */ jsx("span", { style: S.infoLabel, children: t("import.resultTicket") }),
-        /* @__PURE__ */ jsx("span", { style: S.infoValue, children: /* @__PURE__ */ jsx("a", { href: `/admin/support/ticket?id=${result.ticketId}`, style: { color: "#2563eb" }, children: result.ticketNumber }) })
+    result && /* @__PURE__ */ jsxs("div", { className: styles.resultSuccess, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.resultTitleSuccess, children: [
+        "\u2713 ",
+        t("import.resultTitle")
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.infoRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.infoLabel, children: t("import.resultTicket") }),
+        /* @__PURE__ */ jsx("span", { className: styles.infoValue, children: /* @__PURE__ */ jsx("a", { href: `/admin/support/ticket?id=${result.ticketId}`, className: styles.link, children: result.ticketNumber }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.infoRow, children: [
-        /* @__PURE__ */ jsx("span", { style: S.infoLabel, children: t("import.resultClient") }),
-        /* @__PURE__ */ jsxs("span", { style: S.infoValue, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.infoRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.infoLabel, children: t("import.resultClient") }),
+        /* @__PURE__ */ jsxs("span", { className: styles.infoValue, children: [
           result.clientName,
           " (",
           result.clientEmail,
           ")",
-          result.isNewClient && /* @__PURE__ */ jsx("span", { style: { marginLeft: 8, padding: "1px 6px", borderRadius: 4, background: "#dbeafe", color: "#1e40af", fontSize: 10 }, children: t("import.resultNew") })
+          result.isNewClient && /* @__PURE__ */ jsx("span", { className: styles.badgeNew, style: { marginLeft: 8 }, children: t("import.resultNew") })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.infoRow, children: [
-        /* @__PURE__ */ jsx("span", { style: S.infoLabel, children: t("import.resultCompany") }),
-        /* @__PURE__ */ jsx("span", { style: S.infoValue, children: result.clientCompany })
+      /* @__PURE__ */ jsxs("div", { className: styles.infoRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.infoLabel, children: t("import.resultCompany") }),
+        /* @__PURE__ */ jsx("span", { className: styles.infoValue, children: result.clientCompany })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: S.infoRow, children: [
-        /* @__PURE__ */ jsx("span", { style: S.infoLabel, children: t("import.resultMessages") }),
-        /* @__PURE__ */ jsx("span", { style: S.infoValue, children: t("import.resultImported", { count: String(result.messagesImported) }) })
+      /* @__PURE__ */ jsxs("div", { className: styles.infoRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.infoLabel, children: t("import.resultMessages") }),
+        /* @__PURE__ */ jsx("span", { className: styles.infoValue, children: t("import.resultImported", { count: String(result.messagesImported) }) })
       ] })
     ] })
   ] });