@oondemand/oon-core-front 0.4.27 → 0.4.29

package/dist/index.js

@@ -7,7 +7,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/app/OonApp.tsx
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 import { RouterProvider } from "react-router-dom";
 
 // src/api/createRestClient.ts
@@ -5089,147 +5089,750 @@ function CorePage2({ page, registry }) {
 }
 
 // src/components/CoreTransactionalEmail.tsx
-import { useState as useState18 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo11, useState as useState18 } from "react";
 import { Badge as Badge5, Box as Box22, Button as Button16, Flex as Flex15, Heading as Heading13, Input as Input10, Stack as Stack9, Text as Text23, Textarea as Textarea3 } from "@chakra-ui/react";
 import { useMutation as useMutation5, useQuery as useQuery11, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
 import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+var EMPTY_SCHEMA = '{\n  "type": "object",\n  "additionalProperties": false,\n  "properties": {}\n}';
+var EMPTY_DRAFT = {
+  code: "",
+  name: "",
+  subject: "",
+  htmlContent: "",
+  textContent: "",
+  variablesSchema: EMPTY_SCHEMA,
+  locale: "pt-BR"
+};
 function errorMessage(error) {
   return error?.response?.data?.message || error?.message || "N\xE3o foi poss\xEDvel concluir a opera\xE7\xE3o.";
 }
 function color(status) {
-  if (["active", "provider_accepted"].includes(String(status))) return "green";
-  if (["degraded", "failed", "dead_letter"].includes(String(status))) return "red";
+  if (["active", "provider_accepted", "valid"].includes(String(status))) return "green";
+  if (["degraded", "invalid", "failed", "dead_letter"].includes(String(status))) return "red";
   return "yellow";
 }
+function prettyDate(value3) {
+  return value3 ? new Intl.DateTimeFormat("pt-BR", { dateStyle: "short", timeStyle: "short" }).format(new Date(value3)) : "Ainda n\xE3o executado";
+}
+function sampleVariables(schema) {
+  const properties = schema?.properties || {};
+  const values = {};
+  for (const [key, definition] of Object.entries(properties)) {
+    if (definition.type === "number" || definition.type === "integer") values[key] = 0;
+    else if (definition.type === "boolean") values[key] = false;
+    else if (definition.type === "array") values[key] = [];
+    else if (definition.type === "object") values[key] = {};
+    else values[key] = "";
+  }
+  return JSON.stringify(values, null, 2);
+}
+function parseObject(source, message) {
+  try {
+    const value3 = JSON.parse(source);
+    if (!value3 || typeof value3 !== "object" || Array.isArray(value3)) throw new Error(message);
+    return value3;
+  } catch {
+    throw new Error(message);
+  }
+}
 function CoreTransactionalEmail() {
   const { http } = useOonApi();
   const cache = useQueryClient7();
   const [tab, setTab] = useState18("config");
-  const [draft, setDraft] = useState18({ apiKey: "", senderEmail: "", senderName: "", replyTo: "", testRecipient: "" });
   const [error, setError] = useState18("");
-  const [templateDraft, setTemplateDraft] = useState18({ code: "", name: "", subject: "", htmlContent: "", textContent: "", variablesSchema: '{\n  "type": "object",\n  "additionalProperties": false\n}', locale: "pt-BR" });
-  const [templateTest, setTemplateTest] = useState18({ code: "", to: "", variables: "{}" });
-  const health = useQuery11({ queryKey: ["transactional-email", "health"], queryFn: async () => (await http.get("/core/transactional-email/health")).data });
-  const configuration = useQuery11({ queryKey: ["transactional-email", "configuration"], queryFn: async () => (await http.get("/core/transactional-email/configuration")).data.configuration });
-  const templates = useQuery11({ queryKey: ["transactional-email", "templates"], queryFn: async () => (await http.get("/core/transactional-email/templates")).data.results, enabled: tab === "templates" });
-  const dispatches = useQuery11({ queryKey: ["transactional-email", "dispatches"], queryFn: async () => (await http.get("/core/transactional-email/dispatches")).data.results, enabled: tab === "dispatches", refetchInterval: 1e4 });
-  const save = useMutation5({ mutationFn: async () => (await http.put("/core/transactional-email/configuration", { ...draft, enabled: true })).data, onSuccess: () => {
-    setDraft((value3) => ({ ...value3, apiKey: "" }));
+  const [notice, setNotice] = useState18("");
+  const [configurationDraft, setConfigurationDraft] = useState18({
+    apiKey: "",
+    senderEmail: "",
+    senderName: "",
+    replyTo: ""
+  });
+  const [configurationTestRecipient, setConfigurationTestRecipient] = useState18("");
+  const [loadedConfigurationKey, setLoadedConfigurationKey] = useState18("");
+  const [templateDraft, setTemplateDraft] = useState18(EMPTY_DRAFT);
+  const [editingBase, setEditingBase] = useState18(null);
+  const [previewTarget, setPreviewTarget] = useState18(null);
+  const [previewVariables, setPreviewVariables] = useState18("{}");
+  const [testTarget, setTestTarget] = useState18(null);
+  const [templateTest, setTemplateTest] = useState18({ to: "", variables: "{}" });
+  const health = useQuery11({
+    queryKey: ["transactional-email", "health"],
+    queryFn: async () => (await http.get("/core/transactional-email/health")).data
+  });
+  const configuration = useQuery11({
+    queryKey: ["transactional-email", "configuration"],
+    queryFn: async () => (await http.get("/core/transactional-email/configuration")).data.configuration
+  });
+  const templates = useQuery11({
+    queryKey: ["transactional-email", "templates"],
+    queryFn: async () => (await http.get("/core/transactional-email/templates")).data.results,
+    enabled: tab === "templates"
+  });
+  const dispatches = useQuery11({
+    queryKey: ["transactional-email", "dispatches"],
+    queryFn: async () => (await http.get("/core/transactional-email/dispatches")).data.results,
+    enabled: tab === "dispatches",
+    refetchInterval: 1e4
+  });
+  const config = configuration.data;
+  const configurationKey = [
+    config?.updatedAt,
+    config?.senderEmail,
+    config?.senderName,
+    config?.replyTo,
+    config?.fingerprint
+  ].join("|");
+  useEffect11(() => {
+    if (!config || configurationKey === loadedConfigurationKey) return;
+    setConfigurationDraft({
+      apiKey: "",
+      senderEmail: config.senderEmail || "",
+      senderName: config.senderName || "",
+      replyTo: config.replyTo || ""
+    });
+    setConfigurationTestRecipient((value3) => value3 || config.senderEmail || "");
+    setLoadedConfigurationKey(configurationKey);
+  }, [config, configurationKey, loadedConfigurationKey]);
+  const groupedTemplates = useMemo11(() => {
+    var _a;
+    const groups = {};
+    for (const item of templates.data || []) (groups[_a = item.code] || (groups[_a] = [])).push(item);
+    return Object.entries(groups);
+  }, [templates.data]);
+  const saveConfiguration = useMutation5({
+    mutationFn: async () => {
+      const payload = {
+        senderEmail: configurationDraft.senderEmail,
+        senderName: configurationDraft.senderName,
+        replyTo: configurationDraft.replyTo,
+        enabled: true
+      };
+      if (configurationDraft.apiKey.trim()) payload.apiKey = configurationDraft.apiKey.trim();
+      return (await http.put("/core/transactional-email/configuration", payload)).data;
+    },
+    onSuccess: () => {
+      setConfigurationDraft((value3) => ({ ...value3, apiKey: "" }));
+      setError("");
+      setNotice("Dados do remetente salvos. A credencial armazenada foi preservada.");
+      cache.invalidateQueries({ queryKey: ["transactional-email"] });
+    },
+    onError: (reason) => {
+      setNotice("");
+      setError(errorMessage(reason));
+    }
+  });
+  const testConfiguration = useMutation5({
+    mutationFn: async () => (await http.post("/core/transactional-email/configuration/test", {
+      recipient: configurationTestRecipient
+    })).data,
+    onSuccess: () => {
+      setError("");
+      setNotice("Teste enviado. Consulte a caixa do destinat\xE1rio e a aba Envios.");
+      cache.invalidateQueries({ queryKey: ["transactional-email"] });
+    },
+    onError: (reason) => {
+      setNotice("");
+      setError(errorMessage(reason));
+      cache.invalidateQueries({ queryKey: ["transactional-email"] });
+    }
+  });
+  const createVersion = useMutation5({
+    mutationFn: async () => http.post(
+      "/core/transactional-email/templates/" + templateDraft.code + "/versions",
+      {
+        ...templateDraft,
+        variablesSchema: parseObject(templateDraft.variablesSchema, "JSON Schema inv\xE1lido."),
+        attachmentsPolicy: { allowed: false }
+      }
+    ),
+    onSuccess: () => {
+      setError("");
+      setNotice("Nova vers\xE3o salva como rascunho. Ela ainda n\xE3o est\xE1 ativa.");
+      setEditingBase(null);
+      setTemplateDraft(EMPTY_DRAFT);
+      cache.invalidateQueries({ queryKey: ["transactional-email", "templates"] });
+    },
+    onError: (reason) => {
+      setNotice("");
+      setError(errorMessage(reason));
+    }
+  });
+  const activate = useMutation5({
+    mutationFn: async (item) => http.post(
+      "/core/transactional-email/templates/" + item.code + "/versions/" + item.version + "/activate"
+    ),
+    onSuccess: () => {
+      setError("");
+      setNotice("Vers\xE3o ativada manualmente.");
+      cache.invalidateQueries({ queryKey: ["transactional-email", "templates"] });
+    },
+    onError: (reason) => {
+      setNotice("");
+      setError(errorMessage(reason));
+    }
+  });
+  const preview = useMutation5({
+    mutationFn: async (request) => (await http.post(
+      "/core/transactional-email/templates/" + request.code + "/preview",
+      {
+        version: request.version,
+        definition: request.definition,
+        variables: request.variables
+      }
+    )).data,
+    onSuccess: () => {
+      setError("");
+      setNotice("");
+    },
+    onError: (reason) => {
+      setNotice("");
+      setError(errorMessage(reason));
+    }
+  });
+  const testTemplate = useMutation5({
+    mutationFn: async () => {
+      if (!testTarget) throw new Error("Selecione uma vers\xE3o para testar.");
+      return http.post("/core/transactional-email/templates/" + testTarget.code + "/test", {
+        version: testTarget.version,
+        to: templateTest.to,
+        variables: parseObject(templateTest.variables, "JSON de vari\xE1veis inv\xE1lido.")
+      });
+    },
+    onSuccess: () => {
+      setError("");
+      setNotice("Teste da vers\xE3o " + testTarget?.version + " enfileirado sem alterar a vers\xE3o ativa.");
+      cache.invalidateQueries({ queryKey: ["transactional-email", "dispatches"] });
+    },
+    onError: (reason) => {
+      setNotice("");
+      setError(errorMessage(reason));
+    }
+  });
+  const retry = useMutation5({
+    mutationFn: async (id) => http.post("/core/transactional-email/dispatches/" + id + "/retry"),
+    onSuccess: () => cache.invalidateQueries({ queryKey: ["transactional-email", "dispatches"] }),
+    onError: (reason) => setError(errorMessage(reason))
+  });
+  function useAsBase(item) {
+    setEditingBase(item);
+    setTemplateDraft({
+      code: item.code,
+      name: item.name,
+      subject: item.subject,
+      htmlContent: item.htmlContent,
+      textContent: item.textContent,
+      variablesSchema: JSON.stringify(item.variablesSchema || {}, null, 2),
+      locale: item.locale || "pt-BR"
+    });
+    setNotice("Vers\xE3o " + item.version + " carregada como base. Ao salvar, uma nova vers\xE3o em rascunho ser\xE1 criada.");
     setError("");
-    cache.invalidateQueries({ queryKey: ["transactional-email"] });
-  }, onError: (reason) => setError(errorMessage(reason)) });
-  const retry = useMutation5({ mutationFn: async (id) => http.post(`/core/transactional-email/dispatches/${id}/retry`), onSuccess: () => cache.invalidateQueries({ queryKey: ["transactional-email", "dispatches"] }), onError: (reason) => setError(errorMessage(reason)) });
-  const createVersion = useMutation5({ mutationFn: async () => http.post(`/core/transactional-email/templates/${templateDraft.code}/versions`, { ...templateDraft, variablesSchema: JSON.parse(templateDraft.variablesSchema), attachmentsPolicy: { allowed: false } }), onSuccess: () => {
+  }
+  function selectPreview(item) {
+    setPreviewTarget(item);
+    setPreviewVariables(sampleVariables(item.variablesSchema));
+    preview.reset();
     setError("");
-    cache.invalidateQueries({ queryKey: ["transactional-email", "templates"] });
-  }, onError: (reason) => setError(errorMessage(reason)) });
-  const activate = useMutation5({ mutationFn: async (item) => http.post(`/core/transactional-email/templates/${item.code}/versions/${item.version}/activate`), onSuccess: () => cache.invalidateQueries({ queryKey: ["transactional-email", "templates"] }), onError: (reason) => setError(errorMessage(reason)) });
-  const testTemplate = useMutation5({ mutationFn: async () => http.post(`/core/transactional-email/templates/${templateTest.code}/test`, { to: templateTest.to, variables: JSON.parse(templateTest.variables) }), onSuccess: () => {
+    setNotice("");
+  }
+  function renderSavedPreview() {
+    if (!previewTarget) return;
+    try {
+      preview.mutate({
+        code: previewTarget.code,
+        version: previewTarget.version,
+        variables: parseObject(previewVariables, "JSON de vari\xE1veis inv\xE1lido.")
+      });
+    } catch (reason) {
+      setError(errorMessage(reason));
+    }
+  }
+  function renderDraftPreview() {
+    try {
+      const variablesSchema = parseObject(templateDraft.variablesSchema, "JSON Schema inv\xE1lido.");
+      preview.mutate({
+        code: templateDraft.code,
+        definition: {
+          ...templateDraft,
+          variablesSchema,
+          attachmentsPolicy: { allowed: false }
+        },
+        variables: parseObject(previewVariables, "JSON de vari\xE1veis inv\xE1lido.")
+      });
+      setPreviewTarget(null);
+    } catch (reason) {
+      setError(errorMessage(reason));
+    }
+  }
+  function selectTest(item) {
+    setTestTarget(item);
+    setTemplateTest((value3) => ({
+      to: value3.to || config?.senderEmail || "",
+      variables: sampleVariables(item.variablesSchema)
+    }));
     setError("");
-    cache.invalidateQueries({ queryKey: ["transactional-email", "dispatches"] });
-  }, onError: (reason) => setError(errorMessage(reason)) });
-  const config = configuration.data;
+    setNotice("");
+  }
+  function activateVersion(item) {
+    const confirmed = window.confirm(
+      "Ativar " + item.code + " v" + item.version + "? A vers\xE3o ativa atual ser\xE1 arquivada."
+    );
+    if (confirmed) activate.mutate(item);
+  }
   return /* @__PURE__ */ jsxs23(Stack9, { gap: 5, children: [
     /* @__PURE__ */ jsxs23(Flex15, { justify: "space-between", align: "center", wrap: "wrap", gap: 3, children: [
       /* @__PURE__ */ jsxs23(Box22, { children: [
         /* @__PURE__ */ jsx31(Heading13, { size: "lg", children: "E-mail transacional" }),
-        /* @__PURE__ */ jsx31(Text23, { color: "gray.600", children: "Configura\xE7\xE3o, templates e fila de envio deste App." })
+        /* @__PURE__ */ jsx31(Text23, { color: "gray.600", children: "Configure o remetente, revise vers\xF5es e valide cada envio antes da ativa\xE7\xE3o." })
       ] }),
       /* @__PURE__ */ jsx31(Badge5, { colorPalette: color(health.data?.status), children: health.data?.status || "carregando" })
     ] }),
-    /* @__PURE__ */ jsx31(Flex15, { gap: 2, children: [["config", "Configura\xE7\xE3o"], ["templates", "Templates"], ["dispatches", "Envios"]].map(([id, label]) => /* @__PURE__ */ jsx31(Button16, { size: "sm", variant: tab === id ? "solid" : "outline", onClick: () => setTab(id), children: label }, id)) }),
-    error ? /* @__PURE__ */ jsx31(Box22, { borderWidth: "1px", borderColor: "red.200", bg: "red.50", p: 3, borderRadius: "md", children: /* @__PURE__ */ jsx31(Text23, { color: "red.700", children: error }) }) : null,
-    tab === "config" ? /* @__PURE__ */ jsx31(Box22, { borderWidth: "1px", borderRadius: "lg", p: 5, children: /* @__PURE__ */ jsxs23(Stack9, { gap: 4, children: [
-      /* @__PURE__ */ jsxs23(Flex15, { gap: 2, wrap: "wrap", children: [
-        /* @__PURE__ */ jsx31(Badge5, { colorPalette: config?.credentialConfigured ? "green" : "yellow", children: config?.credentialConfigured ? `Chave ${config.apiKeyMasked}` : "Chave pendente" }),
-        /* @__PURE__ */ jsx31(Badge5, { children: config?.connectionStatus || "n\xE3o testada" })
+    /* @__PURE__ */ jsx31(Flex15, { gap: 2, wrap: "wrap", children: [
+      ["config", "Configura\xE7\xE3o"],
+      ["templates", "Templates"],
+      ["dispatches", "Envios"]
+    ].map(([id, label]) => /* @__PURE__ */ jsx31(Button16, { size: "sm", variant: tab === id ? "solid" : "outline", onClick: () => setTab(id), children: label }, id)) }),
+    error ? /* @__PURE__ */ jsx31(Box22, { role: "alert", borderWidth: "1px", borderColor: "red.200", bg: "red.50", p: 3, borderRadius: "md", children: /* @__PURE__ */ jsx31(Text23, { color: "red.700", children: error }) }) : null,
+    notice ? /* @__PURE__ */ jsx31(Box22, { role: "status", borderWidth: "1px", borderColor: "green.200", bg: "green.50", p: 3, borderRadius: "md", children: /* @__PURE__ */ jsx31(Text23, { color: "green.800", children: notice }) }) : null,
+    tab === "config" ? /* @__PURE__ */ jsxs23(Stack9, { gap: 4, children: [
+      /* @__PURE__ */ jsxs23(Box22, { borderWidth: "1px", borderRadius: "lg", p: { base: 4, md: 5 }, children: [
+        /* @__PURE__ */ jsxs23(Flex15, { justify: "space-between", align: "start", gap: 3, wrap: "wrap", mb: 5, children: [
+          /* @__PURE__ */ jsxs23(Box22, { children: [
+            /* @__PURE__ */ jsx31(Heading13, { size: "sm", children: "Remetente e credencial" }),
+            /* @__PURE__ */ jsx31(Text23, { fontSize: "sm", color: "gray.600", children: "Altere os dados abaixo sem informar novamente a API key j\xE1 protegida." })
+          ] }),
+          /* @__PURE__ */ jsxs23(Flex15, { gap: 2, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx31(Badge5, { colorPalette: config?.credentialConfigured ? "green" : "yellow", children: config?.credentialConfigured ? "Chave " + config.apiKeyMasked : "Chave pendente" }),
+            /* @__PURE__ */ jsx31(Badge5, { colorPalette: color(config?.connectionStatus), children: config?.connectionStatus || "n\xE3o testada" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs23(Stack9, { gap: 4, children: [
+          /* @__PURE__ */ jsxs23(Box22, { children: [
+            /* @__PURE__ */ jsx31("label", { htmlFor: "transactional-sender-email", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "E-mail do remetente" }),
+            /* @__PURE__ */ jsx31(
+              Input10,
+              {
+                id: "transactional-sender-email",
+                type: "email",
+                mt: 1,
+                value: configurationDraft.senderEmail,
+                onChange: (event) => setConfigurationDraft({ ...configurationDraft, senderEmail: event.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs23(Box22, { children: [
+            /* @__PURE__ */ jsx31("label", { htmlFor: "transactional-sender-name", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "Nome do remetente" }),
+            /* @__PURE__ */ jsx31(
+              Input10,
+              {
+                id: "transactional-sender-name",
+                mt: 1,
+                value: configurationDraft.senderName,
+                onChange: (event) => setConfigurationDraft({ ...configurationDraft, senderName: event.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs23(Box22, { children: [
+            /* @__PURE__ */ jsx31("label", { htmlFor: "transactional-reply-to", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "Responder para" }),
+            /* @__PURE__ */ jsx31(
+              Input10,
+              {
+                id: "transactional-reply-to",
+                type: "email",
+                mt: 1,
+                placeholder: "Opcional",
+                value: configurationDraft.replyTo,
+                onChange: (event) => setConfigurationDraft({ ...configurationDraft, replyTo: event.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs23(Box22, { borderWidth: "1px", borderRadius: "md", p: 4, bg: "gray.50", children: [
+            /* @__PURE__ */ jsx31("label", { htmlFor: "transactional-api-key", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "Trocar API key" }),
+            /* @__PURE__ */ jsx31(Text23, { fontSize: "xs", color: "gray.600", mb: 2, children: "Deixe em branco para manter a chave atual. O valor nunca ser\xE1 exibido depois de salvo." }),
+            /* @__PURE__ */ jsx31(
+              Input10,
+              {
+                id: "transactional-api-key",
+                type: "password",
+                autoComplete: "new-password",
+                placeholder: "Nova API key SendGrid",
+                bg: "white",
+                value: configurationDraft.apiKey,
+                onChange: (event) => setConfigurationDraft({ ...configurationDraft, apiKey: event.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx31(
+            Button16,
+            {
+              alignSelf: "start",
+              loading: saveConfiguration.isPending,
+              onClick: () => saveConfiguration.mutate(),
+              children: "Salvar altera\xE7\xF5es"
+            }
+          )
+        ] })
       ] }),
-      /* @__PURE__ */ jsx31(Input10, { type: "password", autoComplete: "new-password", placeholder: "Nova API key SendGrid (write-only)", value: draft.apiKey, onChange: (event) => setDraft({ ...draft, apiKey: event.target.value }) }),
-      /* @__PURE__ */ jsx31(Input10, { placeholder: config?.senderEmail || "Remetente", value: draft.senderEmail, onChange: (event) => setDraft({ ...draft, senderEmail: event.target.value }) }),
-      /* @__PURE__ */ jsx31(Input10, { placeholder: config?.senderName || "Nome do remetente", value: draft.senderName, onChange: (event) => setDraft({ ...draft, senderName: event.target.value }) }),
-      /* @__PURE__ */ jsx31(Input10, { placeholder: config?.replyTo || "Reply-to", value: draft.replyTo, onChange: (event) => setDraft({ ...draft, replyTo: event.target.value }) }),
-      /* @__PURE__ */ jsx31(Input10, { placeholder: "Destinat\xE1rio do envio de teste", value: draft.testRecipient, onChange: (event) => setDraft({ ...draft, testRecipient: event.target.value }) }),
-      /* @__PURE__ */ jsx31(Button16, { alignSelf: "start", loading: save.isPending, onClick: () => save.mutate(), children: "Validar e ativar" })
-    ] }) }) : null,
-    tab === "templates" ? /* @__PURE__ */ jsxs23(Stack9, { gap: 4, children: [
-      /* @__PURE__ */ jsxs23(Box22, { borderWidth: "1px", borderRadius: "lg", p: 5, children: [
-        /* @__PURE__ */ jsx31(Heading13, { size: "sm", mb: 3, children: "Nova vers\xE3o em rascunho" }),
-        /* @__PURE__ */ jsxs23(Stack9, { gap: 3, children: [
-          /* @__PURE__ */ jsxs23(Flex15, { gap: 3, wrap: "wrap", children: [
-            /* @__PURE__ */ jsx31(Input10, { flex: "1", minW: "180px", placeholder: "C\xF3digo declarado", value: templateDraft.code, onChange: (event) => setTemplateDraft({ ...templateDraft, code: event.target.value }) }),
-            /* @__PURE__ */ jsx31(Input10, { flex: "2", minW: "220px", placeholder: "Nome", value: templateDraft.name, onChange: (event) => setTemplateDraft({ ...templateDraft, name: event.target.value }) })
+      /* @__PURE__ */ jsxs23(Box22, { borderWidth: "1px", borderRadius: "lg", p: { base: 4, md: 5 }, children: [
+        /* @__PURE__ */ jsx31(Heading13, { size: "sm", children: "Teste de entrega" }),
+        /* @__PURE__ */ jsx31(Text23, { fontSize: "sm", color: "gray.600", mb: 4, children: "Refa\xE7a o teste com a chave e o remetente atualmente salvos." }),
+        /* @__PURE__ */ jsxs23(Flex15, { gap: 3, align: "end", wrap: "wrap", children: [
+          /* @__PURE__ */ jsxs23(Box22, { flex: "1", minW: "240px", children: [
+            /* @__PURE__ */ jsx31("label", { htmlFor: "transactional-test-recipient", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "Destinat\xE1rio do teste" }),
+            /* @__PURE__ */ jsx31(
+              Input10,
+              {
+                id: "transactional-test-recipient",
+                type: "email",
+                mt: 1,
+                value: configurationTestRecipient,
+                onChange: (event) => setConfigurationTestRecipient(event.target.value)
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx31(Input10, { placeholder: "Assunto Handlebars", value: templateDraft.subject, onChange: (event) => setTemplateDraft({ ...templateDraft, subject: event.target.value }) }),
-          /* @__PURE__ */ jsx31(Textarea3, { placeholder: "HTML", value: templateDraft.htmlContent, onChange: (event) => setTemplateDraft({ ...templateDraft, htmlContent: event.target.value }) }),
-          /* @__PURE__ */ jsx31(Textarea3, { placeholder: "Texto simples", value: templateDraft.textContent, onChange: (event) => setTemplateDraft({ ...templateDraft, textContent: event.target.value }) }),
-          /* @__PURE__ */ jsx31(Textarea3, { "aria-label": "JSON Schema das vari\xE1veis", value: templateDraft.variablesSchema, onChange: (event) => setTemplateDraft({ ...templateDraft, variablesSchema: event.target.value }) }),
-          /* @__PURE__ */ jsx31(Button16, { alignSelf: "start", loading: createVersion.isPending, onClick: () => {
-            try {
-              JSON.parse(templateDraft.variablesSchema);
-              createVersion.mutate();
-            } catch {
-              setError("JSON Schema inv\xE1lido.");
+          /* @__PURE__ */ jsx31(
+            Button16,
+            {
+              variant: "outline",
+              loading: testConfiguration.isPending,
+              disabled: !config?.credentialConfigured,
+              onClick: () => testConfiguration.mutate(),
+              children: "Enviar novo teste"
             }
-          }, children: "Salvar rascunho" })
+          )
+        ] }),
+        /* @__PURE__ */ jsxs23(Text23, { mt: 3, fontSize: "xs", color: "gray.600", children: [
+          "\xDAltimo teste: ",
+          prettyDate(config?.lastTestAt),
+          config?.lastError ? " \xB7 " + config.lastError : ""
+        ] })
+      ] })
+    ] }) : null,
+    tab === "templates" ? /* @__PURE__ */ jsxs23(Stack9, { gap: 5, children: [
+      /* @__PURE__ */ jsxs23(Box22, { borderWidth: "1px", borderRadius: "lg", p: { base: 4, md: 5 }, children: [
+        /* @__PURE__ */ jsxs23(Flex15, { justify: "space-between", align: "start", gap: 3, wrap: "wrap", mb: 4, children: [
+          /* @__PURE__ */ jsxs23(Box22, { children: [
+            /* @__PURE__ */ jsx31(Heading13, { size: "sm", children: "Templates e vers\xF5es" }),
+            /* @__PURE__ */ jsx31(Text23, { fontSize: "sm", color: "gray.600", children: "Visualize, use uma vers\xE3o como base ou envie um teste sem alterar a publica\xE7\xE3o atual." })
+          ] }),
+          /* @__PURE__ */ jsx31(
+            Button16,
+            {
+              size: "sm",
+              variant: "outline",
+              onClick: () => {
+                setEditingBase(null);
+                setTemplateDraft(EMPTY_DRAFT);
+                setNotice("");
+              },
+              children: "Novo template"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs23(Stack9, { gap: 4, children: [
+          groupedTemplates.map(([code, versions]) => /* @__PURE__ */ jsxs23(Box22, { borderWidth: "1px", borderRadius: "md", overflow: "hidden", children: [
+            /* @__PURE__ */ jsxs23(Flex15, { px: 4, py: 3, bg: "gray.50", justify: "space-between", align: "center", gap: 3, wrap: "wrap", children: [
+              /* @__PURE__ */ jsxs23(Box22, { children: [
+                /* @__PURE__ */ jsx31(Text23, { fontWeight: "bold", children: versions[0]?.name || code }),
+                /* @__PURE__ */ jsxs23(Text23, { fontSize: "xs", color: "gray.600", children: [
+                  code,
+                  " \xB7 ",
+                  versions.length,
+                  " vers\xE3o(\xF5es)"
+                ] })
+              ] }),
+              versions.find((item) => item.status === "active") ? /* @__PURE__ */ jsxs23(Badge5, { colorPalette: "green", children: [
+                "ativa v",
+                versions.find((item) => item.status === "active")?.version
+              ] }) : /* @__PURE__ */ jsx31(Badge5, { colorPalette: "yellow", children: "sem vers\xE3o ativa" })
+            ] }),
+            /* @__PURE__ */ jsx31(Stack9, { gap: 0, children: versions.map((item) => /* @__PURE__ */ jsxs23(
+              Flex15,
+              {
+                px: 4,
+                py: 3,
+                borderTopWidth: "1px",
+                justify: "space-between",
+                align: "center",
+                gap: 3,
+                wrap: "wrap",
+                children: [
+                  /* @__PURE__ */ jsxs23(Box22, { minW: "220px", flex: "1", children: [
+                    /* @__PURE__ */ jsxs23(Flex15, { gap: 2, align: "center", wrap: "wrap", children: [
+                      /* @__PURE__ */ jsxs23(Text23, { fontWeight: "semibold", children: [
+                        "Vers\xE3o ",
+                        item.version
+                      ] }),
+                      /* @__PURE__ */ jsx31(Badge5, { colorPalette: color(item.status), children: item.status }),
+                      /* @__PURE__ */ jsx31(Badge5, { variant: "outline", children: item.origin })
+                    ] }),
+                    /* @__PURE__ */ jsx31(Text23, { mt: 1, fontSize: "sm", color: "gray.700", children: item.subject }),
+                    /* @__PURE__ */ jsx31(Text23, { fontSize: "xs", color: "gray.500", children: prettyDate(item.createdAt) })
+                  ] }),
+                  /* @__PURE__ */ jsxs23(Flex15, { gap: 2, wrap: "wrap", children: [
+                    /* @__PURE__ */ jsx31(Button16, { size: "xs", variant: "outline", onClick: () => selectPreview(item), children: "Visualizar" }),
+                    /* @__PURE__ */ jsx31(Button16, { size: "xs", variant: "outline", onClick: () => useAsBase(item), children: "Usar como base" }),
+                    /* @__PURE__ */ jsx31(Button16, { size: "xs", variant: "outline", onClick: () => selectTest(item), children: "Enviar teste" }),
+                    item.status !== "active" ? /* @__PURE__ */ jsx31(
+                      Button16,
+                      {
+                        size: "xs",
+                        loading: activate.isPending,
+                        onClick: () => activateVersion(item),
+                        children: "Ativar vers\xE3o"
+                      }
+                    ) : null
+                  ] })
+                ]
+              },
+              item._id
+            )) })
+          ] }, code)),
+          !templates.isLoading && !templates.data?.length ? /* @__PURE__ */ jsx31(Text23, { children: "Nenhum template declarado." }) : null
         ] })
       ] }),
-      templates.data?.map((item) => /* @__PURE__ */ jsxs23(Box22, { borderWidth: "1px", borderRadius: "lg", p: 4, children: [
-        /* @__PURE__ */ jsxs23(Flex15, { justify: "space-between", gap: 3, children: [
+      /* @__PURE__ */ jsxs23(Box22, { borderWidth: "1px", borderRadius: "lg", p: { base: 4, md: 5 }, children: [
+        /* @__PURE__ */ jsxs23(Flex15, { justify: "space-between", gap: 3, align: "start", wrap: "wrap", mb: 4, children: [
           /* @__PURE__ */ jsxs23(Box22, { children: [
-            /* @__PURE__ */ jsx31(Text23, { fontWeight: "semibold", children: item.name }),
-            /* @__PURE__ */ jsxs23(Text23, { fontSize: "sm", color: "gray.600", children: [
-              item.code,
-              " \xB7 vers\xE3o ",
-              item.version,
-              " \xB7 origem ",
-              item.origin
+            /* @__PURE__ */ jsx31(Heading13, { size: "sm", children: editingBase ? "Nova vers\xE3o a partir de " + editingBase.code + " v" + editingBase.version : "Nova vers\xE3o em rascunho" }),
+            /* @__PURE__ */ jsx31(Text23, { fontSize: "sm", color: "gray.600", children: "Salvar sempre cria uma nova vers\xE3o e nunca a ativa automaticamente." })
+          ] }),
+          editingBase ? /* @__PURE__ */ jsx31(Button16, { size: "sm", variant: "ghost", onClick: () => {
+            setEditingBase(null);
+            setTemplateDraft(EMPTY_DRAFT);
+          }, children: "Cancelar edi\xE7\xE3o" }) : null
+        ] }),
+        /* @__PURE__ */ jsxs23(Stack9, { gap: 3, children: [
+          /* @__PURE__ */ jsxs23(Flex15, { gap: 3, wrap: "wrap", children: [
+            /* @__PURE__ */ jsxs23(Box22, { flex: "1", minW: "180px", children: [
+              /* @__PURE__ */ jsx31("label", { htmlFor: "template-code", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "C\xF3digo" }),
+              /* @__PURE__ */ jsx31(
+                Input10,
+                {
+                  id: "template-code",
+                  mt: 1,
+                  disabled: Boolean(editingBase),
+                  value: templateDraft.code,
+                  onChange: (event) => setTemplateDraft({ ...templateDraft, code: event.target.value })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs23(Box22, { flex: "2", minW: "220px", children: [
+              /* @__PURE__ */ jsx31("label", { htmlFor: "template-name", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "Nome" }),
+              /* @__PURE__ */ jsx31(
+                Input10,
+                {
+                  id: "template-name",
+                  mt: 1,
+                  value: templateDraft.name,
+                  onChange: (event) => setTemplateDraft({ ...templateDraft, name: event.target.value })
+                }
+              )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs23(Stack9, { align: "end", children: [
-            /* @__PURE__ */ jsx31(Badge5, { colorPalette: color(item.status), children: item.status }),
-            item.status !== "active" ? /* @__PURE__ */ jsx31(Button16, { size: "xs", loading: activate.isPending, onClick: () => activate.mutate(item), children: item.status === "archived" ? "Reverter para esta vers\xE3o" : "Ativar" }) : null
+          /* @__PURE__ */ jsxs23(Box22, { children: [
+            /* @__PURE__ */ jsx31("label", { htmlFor: "template-subject", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "Assunto Handlebars" }),
+            /* @__PURE__ */ jsx31(
+              Input10,
+              {
+                id: "template-subject",
+                mt: 1,
+                value: templateDraft.subject,
+                onChange: (event) => setTemplateDraft({ ...templateDraft, subject: event.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs23(Box22, { children: [
+            /* @__PURE__ */ jsx31("label", { htmlFor: "template-html", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "HTML" }),
+            /* @__PURE__ */ jsx31(
+              Textarea3,
+              {
+                id: "template-html",
+                mt: 1,
+                minH: "240px",
+                fontFamily: "mono",
+                value: templateDraft.htmlContent,
+                onChange: (event) => setTemplateDraft({ ...templateDraft, htmlContent: event.target.value })
+              }
+            ),
+            /* @__PURE__ */ jsx31(Text23, { fontSize: "xs", color: "gray.600", children: "Imagens embutidas com data:image/*;base64 s\xE3o aceitas; URLs remotas continuam bloqueadas." })
+          ] }),
+          /* @__PURE__ */ jsxs23(Box22, { children: [
+            /* @__PURE__ */ jsx31("label", { htmlFor: "template-text", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "Texto simples" }),
+            /* @__PURE__ */ jsx31(
+              Textarea3,
+              {
+                id: "template-text",
+                mt: 1,
+                minH: "120px",
+                value: templateDraft.textContent,
+                onChange: (event) => setTemplateDraft({ ...templateDraft, textContent: event.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs23(Box22, { children: [
+            /* @__PURE__ */ jsx31("label", { htmlFor: "template-schema", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "JSON Schema das vari\xE1veis" }),
+            /* @__PURE__ */ jsx31(
+              Textarea3,
+              {
+                id: "template-schema",
+                mt: 1,
+                minH: "180px",
+                fontFamily: "mono",
+                value: templateDraft.variablesSchema,
+                onChange: (event) => setTemplateDraft({ ...templateDraft, variablesSchema: event.target.value })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs23(Flex15, { gap: 2, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx31(
+              Button16,
+              {
+                loading: createVersion.isPending,
+                onClick: () => {
+                  try {
+                    parseObject(templateDraft.variablesSchema, "JSON Schema inv\xE1lido.");
+                    createVersion.mutate();
+                  } catch (reason) {
+                    setError(errorMessage(reason));
+                  }
+                },
+                children: "Salvar nova vers\xE3o"
+              }
+            ),
+            /* @__PURE__ */ jsx31(
+              Button16,
+              {
+                variant: "outline",
+                loading: preview.isPending,
+                disabled: !templateDraft.code,
+                onClick: renderDraftPreview,
+                children: "Pr\xE9-visualizar rascunho"
+              }
+            )
           ] })
-        ] }),
-        /* @__PURE__ */ jsx31(Text23, { mt: 2, fontSize: "sm", children: item.subject })
-      ] }, item._id)),
-      !templates.isLoading && !templates.data?.length ? /* @__PURE__ */ jsx31(Text23, { children: "Nenhum template declarado." }) : null,
-      /* @__PURE__ */ jsxs23(Box22, { borderWidth: "1px", borderRadius: "lg", p: 5, children: [
-        /* @__PURE__ */ jsx31(Heading13, { size: "sm", mb: 3, children: "Envio de teste" }),
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs23(Box22, { borderWidth: "1px", borderRadius: "lg", p: { base: 4, md: 5 }, children: [
+        /* @__PURE__ */ jsx31(Heading13, { size: "sm", children: "Pr\xE9-visualiza\xE7\xE3o" }),
+        /* @__PURE__ */ jsx31(Text23, { fontSize: "sm", color: "gray.600", mb: 4, children: previewTarget ? previewTarget.code + " \xB7 vers\xE3o " + previewTarget.version : "Pr\xE9via do conte\xFAdo em edi\xE7\xE3o" }),
         /* @__PURE__ */ jsxs23(Stack9, { gap: 3, children: [
-          /* @__PURE__ */ jsx31(Input10, { placeholder: "C\xF3digo do template ativo", value: templateTest.code, onChange: (event) => setTemplateTest({ ...templateTest, code: event.target.value }) }),
-          /* @__PURE__ */ jsx31(Input10, { type: "email", placeholder: "Destinat\xE1rio", value: templateTest.to, onChange: (event) => setTemplateTest({ ...templateTest, to: event.target.value }) }),
-          /* @__PURE__ */ jsx31(Textarea3, { "aria-label": "Vari\xE1veis do teste", value: templateTest.variables, onChange: (event) => setTemplateTest({ ...templateTest, variables: event.target.value }) }),
-          /* @__PURE__ */ jsx31(Button16, { alignSelf: "start", loading: testTemplate.isPending, onClick: () => {
-            try {
-              JSON.parse(templateTest.variables);
-              testTemplate.mutate();
-            } catch {
-              setError("JSON de vari\xE1veis inv\xE1lido.");
+          /* @__PURE__ */ jsxs23(Box22, { children: [
+            /* @__PURE__ */ jsx31("label", { htmlFor: "preview-variables", style: { fontSize: "0.875rem", fontWeight: 600 }, children: "Vari\xE1veis de exemplo" }),
+            /* @__PURE__ */ jsx31(
+              Textarea3,
+              {
+                id: "preview-variables",
+                mt: 1,
+                minH: "120px",
+                fontFamily: "mono",
+                value: previewVariables,
+                onChange: (event) => setPreviewVariables(event.target.value)
+              }
+            )
+          ] }),
+          previewTarget ? /* @__PURE__ */ jsx31(Button16, { alignSelf: "start", variant: "outline", loading: preview.isPending, onClick: renderSavedPreview, children: "Atualizar pr\xE9via" }) : null,
+          preview.data ? /* @__PURE__ */ jsxs23(Stack9, { gap: 3, children: [
+            /* @__PURE__ */ jsxs23(Box22, { bg: "gray.50", borderWidth: "1px", borderRadius: "md", p: 3, children: [
+              /* @__PURE__ */ jsx31(Text23, { fontSize: "xs", color: "gray.600", children: "Assunto renderizado" }),
+              /* @__PURE__ */ jsx31(Text23, { fontWeight: "semibold", children: preview.data.subject })
+            ] }),
+            /* @__PURE__ */ jsxs23(Box22, { children: [
+              /* @__PURE__ */ jsx31(Text23, { fontSize: "sm", fontWeight: "semibold", mb: 1, children: "HTML" }),
+              /* @__PURE__ */ jsx31(
+                "iframe",
+                {
+                  title: "Pr\xE9-visualiza\xE7\xE3o segura do template",
+                  sandbox: "",
+                  srcDoc: preview.data.html,
+                  style: { width: "100%", minHeight: 360, border: "1px solid #E2E8F0", borderRadius: 8, background: "white" }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs23(Box22, { children: [
+              /* @__PURE__ */ jsx31(Text23, { fontSize: "sm", fontWeight: "semibold", mb: 1, children: "Texto simples" }),
+              /* @__PURE__ */ jsx31(Box22, { as: "pre", whiteSpace: "pre-wrap", borderWidth: "1px", borderRadius: "md", p: 3, fontSize: "sm", children: preview.data.text })
+            ] })
+          ] }) : /* @__PURE__ */ jsx31(Text23, { fontSize: "sm", color: "gray.600", children: "Selecione uma vers\xE3o ou use \u201CPr\xE9-visualizar rascunho\u201D." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs23(Box22, { borderWidth: "1px", borderRadius: "lg", p: { base: 4, md: 5 }, children: [
+        /* @__PURE__ */ jsx31(Heading13, { size: "sm", children: "Envio de teste da vers\xE3o" }),
+        /* @__PURE__ */ jsx31(Text23, { fontSize: "sm", color: "gray.600", mb: 4, children: testTarget ? testTarget.code + " \xB7 vers\xE3o " + testTarget.version + " \xB7 " + testTarget.status : "Escolha \u201CEnviar teste\u201D em uma vers\xE3o da lista." }),
+        /* @__PURE__ */ jsxs23(Stack9, { gap: 3, children: [
+          /* @__PURE__ */ jsx31(
+            Input10,
+            {
+              type: "email",
+              "aria-label": "Destinat\xE1rio do teste do template",
+              placeholder: "Destinat\xE1rio",
+              value: templateTest.to,
+              onChange: (event) => setTemplateTest({ ...templateTest, to: event.target.value })
+            }
+          ),
+          /* @__PURE__ */ jsx31(
+            Textarea3,
+            {
+              "aria-label": "Vari\xE1veis do teste do template",
+              minH: "120px",
+              fontFamily: "mono",
+              value: templateTest.variables,
+              onChange: (event) => setTemplateTest({ ...templateTest, variables: event.target.value })
+            }
+          ),
+          /* @__PURE__ */ jsx31(
+            Button16,
+            {
+              alignSelf: "start",
+              loading: testTemplate.isPending,
+              disabled: !testTarget,
+              onClick: () => {
+                try {
+                  parseObject(templateTest.variables, "JSON de vari\xE1veis inv\xE1lido.");
+                  testTemplate.mutate();
+                } catch (reason) {
+                  setError(errorMessage(reason));
+                }
+              },
+              children: "Enfileirar teste desta vers\xE3o"
             }
-          }, children: "Enfileirar teste" })
+          )
         ] })
       ] })
     ] }) : null,
-    tab === "dispatches" ? /* @__PURE__ */ jsx31(Stack9, { gap: 3, children: dispatches.data?.map((item) => /* @__PURE__ */ jsx31(Box22, { borderWidth: "1px", borderRadius: "lg", p: 4, children: /* @__PURE__ */ jsxs23(Flex15, { justify: "space-between", gap: 3, align: "start", children: [
-      /* @__PURE__ */ jsxs23(Box22, { children: [
-        /* @__PURE__ */ jsx31(Text23, { fontWeight: "semibold", children: item.templateCode }),
-        /* @__PURE__ */ jsxs23(Text23, { fontSize: "sm", color: "gray.600", children: [
-          item.correlationId,
-          " \xB7 ",
-          item.attempts,
-          " tentativa(s)"
+    tab === "dispatches" ? /* @__PURE__ */ jsxs23(Stack9, { gap: 3, children: [
+      /* @__PURE__ */ jsxs23(Flex15, { justify: "space-between", align: "center", gap: 3, wrap: "wrap", children: [
+        /* @__PURE__ */ jsxs23(Box22, { children: [
+          /* @__PURE__ */ jsx31(Heading13, { size: "sm", children: "Envios recentes" }),
+          /* @__PURE__ */ jsx31(Text23, { fontSize: "sm", color: "gray.600", children: "A lista \xE9 atualizada automaticamente a cada 10 segundos." })
         ] }),
-        item.lastError?.message ? /* @__PURE__ */ jsxs23(Text23, { color: "red.600", fontSize: "sm", children: [
-          item.lastError.code,
-          ": ",
-          item.lastError.message
-        ] }) : null
+        /* @__PURE__ */ jsx31(Button16, { size: "sm", variant: "outline", onClick: () => dispatches.refetch(), children: "Atualizar agora" })
       ] }),
-      /* @__PURE__ */ jsxs23(Stack9, { align: "end", children: [
-        /* @__PURE__ */ jsx31(Badge5, { colorPalette: color(item.status), children: item.status }),
-        item.status === "dead_letter" ? /* @__PURE__ */ jsx31(Button16, { size: "xs", loading: retry.isPending, onClick: () => retry.mutate(item._id), children: "Reprocessar" }) : null
-      ] })
-    ] }) }, item._id)) }) : null
+      dispatches.data?.map((item) => /* @__PURE__ */ jsx31(Box22, { borderWidth: "1px", borderRadius: "lg", p: 4, children: /* @__PURE__ */ jsxs23(Flex15, { justify: "space-between", gap: 3, align: "start", wrap: "wrap", children: [
+        /* @__PURE__ */ jsxs23(Box22, { children: [
+          /* @__PURE__ */ jsxs23(Text23, { fontWeight: "semibold", children: [
+            item.templateCode,
+            item.templateVersion ? " \xB7 vers\xE3o " + item.templateVersion : ""
+          ] }),
+          /* @__PURE__ */ jsxs23(Text23, { fontSize: "sm", color: "gray.600", children: [
+            item.correlationId,
+            " \xB7 ",
+            item.attempts,
+            " tentativa(s) \xB7 ",
+            prettyDate(item.createdAt)
+          ] }),
+          item.lastError?.message ? /* @__PURE__ */ jsxs23(Text23, { color: "red.600", fontSize: "sm", children: [
+            item.lastError.code,
+            ": ",
+            item.lastError.message
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs23(Stack9, { align: "end", children: [
+          /* @__PURE__ */ jsx31(Badge5, { colorPalette: color(item.status), children: item.status }),
+          item.status === "dead_letter" ? /* @__PURE__ */ jsx31(Button16, { size: "xs", loading: retry.isPending, onClick: () => retry.mutate(item._id), children: "Reprocessar" }) : null
+        ] })
+      ] }) }, item._id)),
+      !dispatches.isLoading && !dispatches.data?.length ? /* @__PURE__ */ jsx31(Text23, { children: "Nenhum envio recente." }) : null
+    ] }) : null
   ] });
 }
 
@@ -5364,7 +5967,8 @@ import { Box as Box24, Button as Button17, Flex as Flex17, Spacer as Spacer2, Te
 import { Outlet, useNavigate as useNavigate2 } from "react-router-dom";
 
 // src/shell/Sidebar.tsx
-import { Box as Box23, Flex as Flex16, Image, Stack as Stack10, Text as Text24 } from "@chakra-ui/react";
+import { Box as Box23, Flex as Flex16, Image, Spinner as Spinner4, Stack as Stack10, Text as Text24 } from "@chakra-ui/react";
+import { useState as useState19 } from "react";
 import { NavLink } from "react-router-dom";
 import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
 function groupBySection(items) {
@@ -5376,6 +5980,80 @@ function groupBySection(items) {
   }
   return Array.from(groups.entries());
 }
+function launchAppCode(action) {
+  const match = /^launch-app:([a-z][a-z0-9-]{2,62})$/.exec(String(action || ""));
+  return match?.[1] || "";
+}
+function errorMessage2(error) {
+  const value3 = error;
+  return value3?.response?.data?.error?.message || value3?.response?.data?.message || value3?.message || "N\xE3o foi poss\xEDvel abrir o App.";
+}
+function PlatformAppMenuItem({ item, appCode }) {
+  const { http } = useOonApi();
+  const [opening, setOpening] = useState19(false);
+  const [launchError, setLaunchError] = useState19("");
+  async function launch() {
+    if (opening) return;
+    const popup = window.open("about:blank", "_blank");
+    if (!popup) {
+      setLaunchError("Permita pop-ups para abrir o App em uma nova aba.");
+      return;
+    }
+    popup.opener = null;
+    setOpening(true);
+    setLaunchError("");
+    try {
+      const home = (await http.get("/portal/home")).data;
+      const target = home.platformApps.find((candidate) => candidate.app.codigo === appCode);
+      if (!target || target.action !== "open") {
+        throw new Error(`${target?.app.nome || item.label} ainda n\xE3o est\xE1 dispon\xEDvel.`);
+      }
+      const response = await http.post("/portal/launch", {
+        appCode,
+        environment: target.deployment.environment
+      });
+      if (!response.data.openUrl) {
+        throw new Error("A autoriza\xE7\xE3o de abertura n\xE3o retornou uma URL.");
+      }
+      popup.location.replace(response.data.openUrl);
+    } catch (error) {
+      popup.close();
+      setLaunchError(errorMessage2(error));
+    } finally {
+      setOpening(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs24(Box23, { width: "100%", children: [
+    /* @__PURE__ */ jsxs24(
+      Flex16,
+      {
+        as: "button",
+        width: "100%",
+        align: "center",
+        justify: { base: "center", lg: "flex-start" },
+        gap: 3,
+        px: { base: 2, lg: 3 },
+        py: "10px",
+        borderRadius: "9px",
+        fontSize: "13px",
+        fontWeight: "500",
+        color: "#46545C",
+        cursor: opening ? "wait" : "pointer",
+        "aria-disabled": opening,
+        pointerEvents: opening ? "none" : "auto",
+        title: item.label,
+        "aria-label": `Abrir ${item.label} em uma nova aba`,
+        onClick: () => void launch(),
+        _hover: { bg: "#F8F9FA", color: "brand.700" },
+        children: [
+          opening ? /* @__PURE__ */ jsx33(Spinner4, { size: "xs" }) : /* @__PURE__ */ jsx33(Box23, { w: "7px", h: "7px", borderRadius: "full", bg: "gray.300" }),
+          /* @__PURE__ */ jsx33(Text24, { display: { base: "none", lg: "block" }, lineClamp: 1, children: item.label })
+        ]
+      }
+    ),
+    launchError ? /* @__PURE__ */ jsx33(Text24, { role: "alert", px: 3, py: 1, fontSize: "10px", color: "red.600", children: launchError }) : null
+  ] });
+}
 function Sidebar({ app, menu, registry }) {
   const { hasPermission } = useOonAuth();
   const visible = menu.filter((item) => !item.hidden && hasPermission(item.permissions));
@@ -5435,6 +6113,8 @@ function Sidebar({ app, menu, registry }) {
           items.map((item) => {
             const CustomMenuItem = resolveComponent(registry, item.renderer, "menuRenderers");
             if (CustomMenuItem) return /* @__PURE__ */ jsx33(CustomMenuItem, { item }, item.href);
+            const appCode = launchAppCode(item.action);
+            if (appCode) return /* @__PURE__ */ jsx33(PlatformAppMenuItem, { item, appCode }, item.href);
             return /* @__PURE__ */ jsx33(NavLink, { to: item.href, end: item.href === "/", title: item.label, children: ({ isActive }) => /* @__PURE__ */ jsxs24(
               Flex16,
               {
@@ -5468,7 +6148,7 @@ function Sidebar({ app, menu, registry }) {
 // package.json
 var package_default = {
   name: "@oondemand/oon-core-front",
-  version: "0.4.27",
+  version: "0.4.29",
   repository: {
     type: "git",
     url: "git+https://github.com/oondemand/oon-platform.git",
@@ -5923,7 +6603,7 @@ function AppAccessGuard({ children }) {
 }
 
 // src/security/LoginPage.tsx
-import { useState as useState19 } from "react";
+import { useState as useState20 } from "react";
 import { Box as Box26, Button as Button19, Flex as Flex19, Heading as Heading15, Input as Input11, SimpleGrid as SimpleGrid6, Text as Text27, VStack as VStack5 } from "@chakra-ui/react";
 import { Link as Link3, Navigate as Navigate2, useLocation as useLocation4 } from "react-router-dom";
 import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
@@ -5954,13 +6634,13 @@ function tenantUrl(path, tenantId) {
 function LoginPage({ app, onboardingEnabled = false }) {
   const { status, login } = useOonAuth();
   const location = useLocation4();
-  const [email, setEmail] = useState19("");
-  const [password, setPassword] = useState19("");
-  const [submitting, setSubmitting] = useState19(false);
-  const [message, setMessage] = useState19(null);
-  const [tenants, setTenants] = useState19([]);
-  const [selectorMode, setSelectorMode] = useState19(false);
-  const [openingTenant, setOpeningTenant] = useState19(null);
+  const [email, setEmail] = useState20("");
+  const [password, setPassword] = useState20("");
+  const [submitting, setSubmitting] = useState20(false);
+  const [message, setMessage] = useState20(null);
+  const [tenants, setTenants] = useState20([]);
+  const [selectorMode, setSelectorMode] = useState20(false);
+  const [openingTenant, setOpeningTenant] = useState20(null);
   const redirect = safeRedirect(location.search);
   if (status === "authenticated" && !selectorMode) return /* @__PURE__ */ jsx38(Navigate2, { to: redirect, replace: true });
   if (status === "forbidden") return /* @__PURE__ */ jsx38(Navigate2, { to: "/acesso-negado", replace: true });
@@ -6048,16 +6728,16 @@ function LoginPage({ app, onboardingEnabled = false }) {
 }
 
 // src/security/FirstAccessPage.tsx
-import { useState as useState20 } from "react";
+import { useState as useState21 } from "react";
 import { Box as Box27, Button as Button20, Flex as Flex20, Heading as Heading16, Input as Input12, Text as Text28, VStack as VStack6 } from "@chakra-ui/react";
 import { Navigate as Navigate3 } from "react-router-dom";
 import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 function FirstAccessPage() {
   const { status, completeFirstAccess } = useOonAuth();
-  const [password, setPassword] = useState20("");
-  const [confirm, setConfirm] = useState20("");
-  const [submitting, setSubmitting] = useState20(false);
-  const [message, setMessage] = useState20(null);
+  const [password, setPassword] = useState21("");
+  const [confirm, setConfirm] = useState21("");
+  const [submitting, setSubmitting] = useState21(false);
+  const [message, setMessage] = useState21(null);
   if (status === "authenticated") return /* @__PURE__ */ jsx39(Navigate3, { to: "/", replace: true });
   if (status === "unauthenticated") return /* @__PURE__ */ jsx39(Navigate3, { to: "/login", replace: true });
   if (status === "forbidden") return /* @__PURE__ */ jsx39(Navigate3, { to: "/acesso-negado", replace: true });
@@ -6101,7 +6781,7 @@ function FirstAccessPage() {
 }
 
 // src/security/ActivationPage.tsx
-import { useEffect as useEffect11, useState as useState21 } from "react";
+import { useEffect as useEffect12, useState as useState22 } from "react";
 import { Box as Box28, Button as Button21, Heading as Heading17, Input as Input13, Text as Text29, VStack as VStack7 } from "@chakra-ui/react";
 import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
 function encodeBasicCredentials2(email, password) {
@@ -6113,22 +6793,22 @@ function encodeBasicCredentials2(email, password) {
 function ActivationPage() {
   const { http } = useOonApi();
   const activation = useActivation();
-  const [step, setStep] = useState21(1);
-  const [config, setConfig] = useState21(null);
-  const [code, setCode] = useState21("");
-  const [preview, setPreview] = useState21(null);
-  const [global, setGlobal] = useState21({});
-  const [app, setApp] = useState21({});
-  const [rootEmail, setRootEmail] = useState21("");
-  const [rootPassword, setRootPassword] = useState21("");
-  const [devName, setDevName] = useState21("");
-  const [devEmail, setDevEmail] = useState21("");
-  const [devPassword, setDevPassword] = useState21("");
-  const [showCodeFlow, setShowCodeFlow] = useState21(false);
-  const [devResult, setDevResult] = useState21(null);
-  const [error, setError] = useState21(null);
-  const [submitting, setSubmitting] = useState21(false);
-  useEffect11(() => {
+  const [step, setStep] = useState22(1);
+  const [config, setConfig] = useState22(null);
+  const [code, setCode] = useState22("");
+  const [preview, setPreview] = useState22(null);
+  const [global, setGlobal] = useState22({});
+  const [app, setApp] = useState22({});
+  const [rootEmail, setRootEmail] = useState22("");
+  const [rootPassword, setRootPassword] = useState22("");
+  const [devName, setDevName] = useState22("");
+  const [devEmail, setDevEmail] = useState22("");
+  const [devPassword, setDevPassword] = useState22("");
+  const [showCodeFlow, setShowCodeFlow] = useState22(false);
+  const [devResult, setDevResult] = useState22(null);
+  const [error, setError] = useState22(null);
+  const [submitting, setSubmitting] = useState22(false);
+  useEffect12(() => {
     http.get("/ativacao/configuracao").then((response) => {
       setConfig(response.data);
       setGlobal(response.data.defaults || {});
@@ -6136,7 +6816,7 @@ function ActivationPage() {
       () => setError("N\xE3o foi poss\xEDvel carregar a configura\xE7\xE3o de ativa\xE7\xE3o.")
     );
   }, [http]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (activation.status === "active") {
       window.location.replace("/login");
     }
@@ -6610,7 +7290,7 @@ function localLoginUrl() {
   return `/login?redirect=${encodeURIComponent(current)}`;
 }
 function OonApp({ config }) {
-  const { http, storage, tenantStorage, router } = useMemo11(() => {
+  const { http, storage, tenantStorage, router } = useMemo12(() => {
     const storage2 = createTokenStorage(config.app.id);
     const tenantStorage2 = createTenantStorage(config.app.id);
     const externalLoginUrl = config.auth?.loginUrl ?? config.api.meusAppsUrl;
@@ -6900,7 +7580,7 @@ function startFromManifest(manifest, runtime) {
 import { Stack as Stack16 } from "@chakra-ui/react";
 
 // src/components/CoreIntegration.tsx
-import { useEffect as useEffect12, useState as useState22 } from "react";
+import { useEffect as useEffect13, useState as useState23 } from "react";
 import { Badge as Badge6, Box as Box29, Button as Button22, Flex as Flex21, Heading as Heading18, Input as Input14, Stack as Stack11, Text as Text30 } from "@chakra-ui/react";
 import { useMutation as useMutation6, useQuery as useQuery12 } from "@tanstack/react-query";
 import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
@@ -7065,7 +7745,7 @@ function ExecutionDetails({ execution }) {
 }
 function ProviderConfigurationPanel({ provider }) {
   const { http } = useOonApi();
-  const [draft, setDraft] = useState22({
+  const [draft, setDraft] = useState23({
     instanceId: "default",
     label: provider.label,
     active: true,
@@ -7084,7 +7764,7 @@ function ProviderConfigurationPanel({ provider }) {
     queryFn: async () => (await http.get(`/integrations/providers/${provider.key}/mappings`)).data
   });
   const selected = (configuration.data ?? []).find((item) => item.instanceId === draft.instanceId);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!selected) return;
     setDraft((current) => ({
       ...current,
@@ -7292,7 +7972,7 @@ function ProviderConfigurationPanel({ provider }) {
 }
 function CoreIntegration({ label = "Integra\xE7\xF5es" }) {
   const { http } = useOonApi();
-  const [expandedExecutionId, setExpandedExecutionId] = useState22(null);
+  const [expandedExecutionId, setExpandedExecutionId] = useState23(null);
   const providers = useQuery12({
     queryKey: ["core-integrations", "health"],
     queryFn: async () => (await http.get("/integrations/health")).data?.results ?? []
@@ -7551,7 +8231,7 @@ function CoreIntegrationMappings() {
 }
 
 // src/components/CoreIntegrationTickets.tsx
-import { useEffect as useEffect13, useMemo as useMemo12, useState as useState23 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo13, useState as useState24 } from "react";
 import { Badge as Badge8, Box as Box31, Button as Button23, Flex as Flex23, Heading as Heading20, Input as Input15, Stack as Stack13, Text as Text32 } from "@chakra-ui/react";
 import { useMutation as useMutation7, useQuery as useQuery14 } from "@tanstack/react-query";
 import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -7777,14 +8457,14 @@ function TicketCard({
 }
 function CoreIntegrationTickets({ provider = "omie" }) {
   const { http } = useOonApi();
-  const [view, setView] = useState23("list");
-  const [status, setStatus] = useState23("");
-  const [searchInput, setSearchInput] = useState23("");
-  const [search, setSearch] = useState23("");
-  const [page, setPage] = useState23(1);
-  const [expandedId, setExpandedId] = useState23(null);
+  const [view, setView] = useState24("list");
+  const [status, setStatus] = useState24("");
+  const [searchInput, setSearchInput] = useState24("");
+  const [search, setSearch] = useState24("");
+  const [page, setPage] = useState24(1);
+  const [expandedId, setExpandedId] = useState24(null);
   const limit = view === "board" ? 200 : 25;
-  useEffect13(() => {
+  useEffect14(() => {
     const timeout = window.setTimeout(() => {
       setSearch(searchInput.trim());
       setPage(1);
@@ -7827,12 +8507,12 @@ function CoreIntegrationTickets({ provider = "omie" }) {
       await queue.refetch();
     }
   });
-  useEffect13(() => {
+  useEffect14(() => {
     const totalPages2 = queue.data?.pagination?.totalPages ?? 1;
     if (page > totalPages2) setPage(Math.max(1, totalPages2));
   }, [page, queue.data?.pagination?.totalPages]);
   const tickets = queue.data?.results ?? [];
-  const grouped = useMemo12(() => Object.fromEntries(
+  const grouped = useMemo13(() => Object.fromEntries(
     TICKET_STATUSES.map((ticketStatus) => [ticketStatus, tickets.filter((ticket) => ticket.status === ticketStatus)])
   ), [tickets]);
   if (queue.isLoading) return /* @__PURE__ */ jsx48(LoadingScreen, {});
@@ -8043,11 +8723,11 @@ function CoreIntegrationTickets({ provider = "omie" }) {
 }
 
 // src/components/CoreOmieIntegrationWorkspace.tsx
-import { useState as useState25 } from "react";
+import { useState as useState26 } from "react";
 import { Button as Button25, Flex as Flex25, Stack as Stack15 } from "@chakra-ui/react";
 
 // src/components/CoreOmieIntegration.tsx
-import { useEffect as useEffect14, useState as useState24 } from "react";
+import { useEffect as useEffect15, useState as useState25 } from "react";
 import { Badge as Badge9, Box as Box32, Button as Button24, Flex as Flex24, Heading as Heading21, Input as Input16, Stack as Stack14, Text as Text33 } from "@chakra-ui/react";
 import { useMutation as useMutation8, useQuery as useQuery15 } from "@tanstack/react-query";
 import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
@@ -8119,7 +8799,7 @@ function OmieConfigurationTab() {
     queryKey: ["core-omie", "configuration"],
     queryFn: async () => (await http.get("/integrations/providers/omie/configuration")).data?.instances ?? []
   });
-  const [draft, setDraft] = useState24({
+  const [draft, setDraft] = useState25({
     instanceId: "default",
     label: "Omie",
     active: true,
@@ -8129,7 +8809,7 @@ function OmieConfigurationTab() {
     appSecret: ""
   });
   const selected = (configuration.data ?? []).find((item) => item.instanceId === draft.instanceId) ?? configuration.data?.[0];
-  useEffect14(() => {
+  useEffect15(() => {
     if (!selected) return;
     setDraft((current) => ({
       ...current,
@@ -8436,8 +9116,8 @@ function OmieSynchronizationTab() {
 }
 function OmieWebhooksTab() {
   const { http } = useOonApi();
-  const [instanceId, setInstanceId] = useState24("default");
-  const [copied, setCopied] = useState24(false);
+  const [instanceId, setInstanceId] = useState25("default");
+  const [copied, setCopied] = useState25(false);
   const configuration = useQuery15({
     queryKey: ["core-omie", "configuration"],
     queryFn: async () => (await http.get("/integrations/providers/omie/configuration")).data?.instances ?? []
@@ -8470,7 +9150,7 @@ function OmieWebhooksTab() {
       await Promise.all([access.refetch(), configuration.refetch()]);
     }
   });
-  useEffect14(() => {
+  useEffect15(() => {
     const first = configuration.data?.[0]?.instanceId;
     if (first && !configuration.data?.some((item) => item.instanceId === instanceId)) setInstanceId(first);
   }, [configuration.data, instanceId]);
@@ -8571,7 +9251,7 @@ function diagnosticMessage3(value3) {
 }
 function OmieHistoryTab() {
   const { http } = useOonApi();
-  const [expandedId, setExpandedId] = useState24(null);
+  const [expandedId, setExpandedId] = useState25(null);
   const history = useQuery15({
     queryKey: ["core-omie", "history"],
     queryFn: async () => (await http.get("/integrations/history", {
@@ -8694,7 +9374,7 @@ var TABS = [
   { id: "history", label: "Hist\xF3rico" }
 ];
 function CoreOmieIntegration() {
-  const [tab, setTab] = useState24("configuration");
+  const [tab, setTab] = useState25("configuration");
   return /* @__PURE__ */ jsxs33(Stack14, { gap: 5, children: [
     /* @__PURE__ */ jsxs33(Box32, { children: [
       /* @__PURE__ */ jsx49(Heading21, { size: "lg", children: "Integra\xE7\xE3o Omie" }),
@@ -8720,7 +9400,7 @@ function CoreOmieIntegration() {
 // src/components/CoreOmieIntegrationWorkspace.tsx
 import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
 function CoreOmieIntegrationWorkspace() {
-  const [view, setView] = useState25("integration");
+  const [view, setView] = useState26("integration");
   return /* @__PURE__ */ jsxs34(Stack15, { gap: 4, children: [
     /* @__PURE__ */ jsxs34(Flex25, { gap: 2, wrap: "wrap", borderBottomWidth: "1px", pb: 2, children: [
       /* @__PURE__ */ jsx50(
@@ -8848,14 +9528,14 @@ function CoreCurrency({ model = "Moeda", label = "Multi-moedas", endpoint = "/mo
 }
 
 // src/components/CoreAssistant.tsx
-import { useState as useState26 } from "react";
+import { useState as useState27 } from "react";
 import { Box as Box33, Button as Button27, Flex as Flex27, Heading as Heading23, Input as Input17, Stack as Stack18, Text as Text35 } from "@chakra-ui/react";
 import { useMutation as useMutation10 } from "@tanstack/react-query";
 import { jsx as jsx53, jsxs as jsxs37 } from "react/jsx-runtime";
 function CoreAssistant({ assistantCode, label = "Assistente", entity, endpoint = "/assistant-runs" }) {
   const { http } = useOonApi();
-  const [messages, setMessages] = useState26([]);
-  const [input, setInput] = useState26("");
+  const [messages, setMessages] = useState27([]);
+  const [input, setInput] = useState27("");
   const ask = useMutation10({
     mutationFn: async (message) => {
       const { data } = await http.post(