@codemind.ec/medusa-plugin-invoice 1.0.0 → 1.0.1

package/.medusa/server/src/admin/index.js

@@ -4,12 +4,20 @@ const adminSdk = require("@medusajs/admin-sdk");
 const ui = require("@medusajs/ui");
 const Medusa = require("@medusajs/js-sdk");
 const react = require("react");
+const icons = require("@medusajs/icons");
 const reactQuery = require("@tanstack/react-query");
+const reactRouterDom = require("react-router-dom");
 const reactHookForm = require("react-hook-form");
 const zod = require("@medusajs/framework/zod");
+const CodeMirror = require("@uiw/react-codemirror");
+const langHtml = require("@codemirror/lang-html");
+const themeOneDark = require("@codemirror/theme-one-dark");
+const Handlebars = require("handlebars");
 require("@medusajs/admin-shared");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Medusa__default = /* @__PURE__ */ _interopDefault(Medusa);
+const CodeMirror__default = /* @__PURE__ */ _interopDefault(CodeMirror);
+const Handlebars__default = /* @__PURE__ */ _interopDefault(Handlebars);
 const sdk = new Medusa__default.default({
   baseUrl: "/",
   debug: false,
@@ -64,17 +72,94 @@ const OrderInvoiceWidget = ({ data: order }) => {
 adminSdk.defineWidgetConfig({
   zone: "order.details.side.before"
 });
+const TYPE_LABELS = {
+  order_invoice: "Comprobante de Pedido",
+  quote_proforma: "Cotización Proforma"
+};
+const InvoiceTemplatesPage = () => {
+  const navigate = reactRouterDom.useNavigate();
+  const queryClient = reactQuery.useQueryClient();
+  const { data, isLoading } = reactQuery.useQuery({
+    queryFn: () => sdk.client.fetch("/admin/invoice-templates"),
+    queryKey: ["invoice-templates"]
+  });
+  const deleteMutation = reactQuery.useMutation({
+    mutationFn: (id) => sdk.client.fetch(`/admin/invoice-templates/${id}`, { method: "DELETE" }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["invoice-templates"] });
+      ui.toast.success("Plantilla eliminada");
+    },
+    onError: () => {
+      ui.toast.error("No se pudo eliminar la plantilla");
+    }
+  });
+  const templates = (data == null ? void 0 : data.invoice_templates) ?? [];
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", children: "Plantillas de Documentos" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => navigate("/invoice-config"), children: "Configuración" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: () => navigate("/invoice-templates/new"), children: "+ Nueva Plantilla" })
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: 40 }, children: "Cargando..." }) : templates.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: 40, color: "#6c757d" }, children: "No hay plantillas. Se crearán automáticamente al reiniciar el servidor." }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Nombre" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Slug" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Tipo" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Estado" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Actualizado" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { style: { textAlign: "right" }, children: "Acciones" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Body, { children: templates.map((tpl) => /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Table.Row,
+        {
+          onClick: () => navigate(`/invoice-templates/${tpl.id}`),
+          style: { cursor: "pointer" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: tpl.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx("code", { style: { fontSize: 12 }, children: tpl.slug }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: TYPE_LABELS[tpl.type] ?? tpl.type }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: tpl.is_default ? /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "blue", children: "Por defecto" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "grey", children: "Personalizada" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: new Date(tpl.updated_at).toLocaleDateString("es-ES") }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { style: { textAlign: "right" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Button,
+              {
+                variant: "danger",
+                size: "small",
+                disabled: tpl.is_default,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (confirm("¿Eliminar esta plantilla?")) {
+                    deleteMutation.mutate(tpl.id);
+                  }
+                },
+                children: "Eliminar"
+              }
+            ) })
+          ]
+        },
+        tpl.id
+      )) })
+    ] })
+  ] });
+};
+const config$1 = adminSdk.defineRouteConfig({
+  label: "Plantillas PDF",
+  icon: icons.DocumentText
+});
 zod.z.object({
   company_name: zod.z.string().optional(),
   company_ruc: zod.z.string().optional(),
   company_address: zod.z.string().optional(),
   company_phone: zod.z.string().optional(),
-  company_email: zod.z.string().email().optional(),
-  company_logo: zod.z.string().url().optional(),
+  company_email: zod.z.string().email().optional().or(zod.z.literal("")),
+  company_logo: zod.z.string().optional(),
   notes: zod.z.string().optional(),
   admin_notification_email: zod.z.string().email().optional().or(zod.z.literal(""))
 });
 const InvoiceConfigPage = () => {
+  const navigate = reactRouterDom.useNavigate();
   const { data, isLoading, refetch } = reactQuery.useQuery({
     queryFn: () => sdk.client.fetch("/admin/invoice-config"),
     queryKey: ["invoice-config"]
@@ -87,6 +172,9 @@ const InvoiceConfigPage = () => {
     onSuccess: () => {
       refetch();
       ui.toast.success("Configuración actualizada exitosamente");
+    },
+    onError: () => {
+      ui.toast.error("Error al guardar la configuración");
     }
   });
   const getFormDefaultValues = react.useCallback(() => {
@@ -111,16 +199,23 @@ const InvoiceConfigPage = () => {
     if (!file) {
       return;
     }
-    const { files } = await sdk.admin.upload.create({
-      files: [file]
-    });
-    form.setValue("company_logo", files[0].url);
+    try {
+      const { files } = await sdk.admin.upload.create({
+        files: [file]
+      });
+      form.setValue("company_logo", files[0].url);
+    } catch (error) {
+      ui.toast.error("Error al subir el logo. Verifica que el archivo sea una imagen válida.");
+    }
   };
   react.useEffect(() => {
     form.reset(getFormDefaultValues());
   }, [getFormDefaultValues]);
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", children: "Configuración de Comprobante" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", children: "Configuración de Comprobante" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => navigate("/invoice-templates"), children: "Gestionar Plantillas" })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "form",
       {
@@ -249,6 +344,396 @@ const InvoiceConfigPage = () => {
 const config = adminSdk.defineRouteConfig({
   label: "Comprobante de Pedido"
 });
+const NewTemplatePage = () => {
+  const navigate = reactRouterDom.useNavigate();
+  const [name, setName] = react.useState("");
+  const [slug, setSlug] = react.useState("");
+  const [type, setType] = react.useState("order_invoice");
+  const createMutation = reactQuery.useMutation({
+    mutationFn: (payload) => sdk.client.fetch("/admin/invoice-templates", {
+      method: "POST",
+      body: payload
+    }),
+    onSuccess: (data) => {
+      ui.toast.success("Plantilla creada");
+      navigate(`/invoice-templates/${data.invoice_template.id}`);
+    },
+    onError: () => {
+      ui.toast.error("Error al crear la plantilla");
+    }
+  });
+  const handleCreate = () => {
+    if (!name || !slug) {
+      ui.toast.error("Nombre y slug son requeridos");
+      return;
+    }
+    createMutation.mutate({
+      name,
+      slug,
+      type,
+      html_content: getDefaultHtml(type)
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", style: { marginBottom: 24 }, children: "Nueva Plantilla" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16, maxWidth: 500 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "name", children: "Nombre" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Input, { id: "name", value: name, onChange: (e) => setName(e.target.value), placeholder: "Ej: Mi Comprobante" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "slug", children: "Slug (identificador único)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            id: "slug",
+            value: slug,
+            onChange: (e) => setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, "_")),
+            placeholder: "Ej: my_custom_invoice"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "type", children: "Tipo de documento" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { value: type, onValueChange: setType, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, { placeholder: "Seleccionar tipo" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Select.Content, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: "order_invoice", children: "Comprobante de Pedido" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Item, { value: "quote_proforma", children: "Cotización Proforma" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, marginTop: 16 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: () => navigate("/invoice-templates"), children: "Cancelar" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: handleCreate, isLoading: createMutation.isPending, children: "Crear Plantilla" })
+      ] })
+    ] })
+  ] });
+};
+function getDefaultHtml(type) {
+  if (type === "quote_proforma") {
+    return `<!DOCTYPE html>
+<html>
+<head><style>body { font-family: Helvetica, sans-serif; }</style></head>
+<body>
+<h1>COTIZACIÓN {{quote_number}}</h1>
+<p>Fecha: {{date_str}}</p>
+<p>Servicio: {{service_name}}</p>
+<!-- Personaliza tu plantilla aquí -->
+</body>
+</html>`;
+  }
+  return `<!DOCTYPE html>
+<html>
+<head><style>body { font-family: Helvetica, sans-serif; }</style></head>
+<body>
+<h1>COMPROBANTE {{invoice_id}}</h1>
+<p>Fecha: {{invoice_date}}</p>
+<p>Empresa: {{company_name}}</p>
+<!-- Personaliza tu plantilla aquí -->
+</body>
+</html>`;
+}
+const VARIABLES = {
+  order_invoice: [
+    "company_name",
+    "company_ruc",
+    "company_address",
+    "company_phone",
+    "company_email",
+    "company_logo_base64",
+    "invoice_id",
+    "invoice_date",
+    "order_display_id",
+    "order_date",
+    "billing_address",
+    "shipping_address",
+    "cedula",
+    "subtotal",
+    "tax_total",
+    "shipping_total",
+    "discount_total",
+    "total",
+    "is_home_delivery",
+    "notes",
+    "{{#each items}}",
+    "this.title",
+    "this.variant_title",
+    "this.quantity",
+    "this.unit_price",
+    "this.total",
+    "{{/each}}"
+  ],
+  quote_proforma: [
+    "company_name",
+    "company_website",
+    "quote_number",
+    "date_str",
+    "service_name",
+    "is_home_delivery",
+    "{{#each config_fields}}",
+    "this.label",
+    "this.value",
+    "{{/each}}",
+    "{{#each breakdown}}",
+    "this.label",
+    "this.total_formatted",
+    "{{/each}}",
+    "totals.subtotal_formatted",
+    "totals.extras_formatted",
+    "totals.discount_formatted",
+    "totals.shipping_formatted",
+    "totals.taxes_provided",
+    "totals.taxes_formatted",
+    "totals.total_formatted",
+    "{{#each includes_left}}",
+    "{{#each includes_right}}",
+    "{{#each contact_rows}}",
+    "this.label",
+    "this.value",
+    "{{/each}}"
+  ]
+};
+const SAMPLE_DATA = {
+  order_invoice: {
+    company_name: "Mi Empresa",
+    company_ruc: "1234567890001",
+    company_address: "Av. Principal 123, Quito",
+    company_phone: "+593 99 123 4567",
+    company_email: "info@miempresa.com",
+    company_logo_base64: "",
+    invoice_id: "INV-000001",
+    invoice_date: "19/06/2025",
+    order_display_id: "000042",
+    order_date: "18/06/2025",
+    billing_address: "Juan Pérez\nCalle Ejemplo 456\nQuito, Pichincha",
+    shipping_address: "Juan Pérez\nCalle Ejemplo 456\nQuito, Pichincha",
+    cedula: "1712345678",
+    items: [
+      { title: "Producto ejemplo", variant_title: "Grande", quantity: "2", unit_price: "$25.00", total: "$50.00" },
+      { title: "Otro producto", variant_title: "", quantity: "1", unit_price: "$15.00", total: "$15.00" }
+    ],
+    subtotal: "$65.00",
+    tax_total: "$7.80",
+    shipping_total: "$5.00",
+    discount_total: "",
+    total: "$77.80",
+    is_home_delivery: false,
+    notes: "Gracias por su compra."
+  },
+  quote_proforma: {
+    company_name: "Mi Empresa",
+    company_website: "www.miempresa.com",
+    quote_number: "QP-2025-0001",
+    date_str: "19/06/2025",
+    service_name: "SERVICIO DE EJEMPLO",
+    config_fields: [
+      { label: "Nro. personas", value: "50" },
+      { label: "Menú", value: "Premium" }
+    ],
+    breakdown: [
+      { label: "Servicio base", total_formatted: "$500.00" },
+      { label: "Extras", total_formatted: "$100.00" }
+    ],
+    totals: {
+      subtotal_formatted: "$500.00",
+      extras_formatted: "$100.00",
+      discount: 0,
+      discount_formatted: "",
+      shipping: 25,
+      shipping_formatted: "$25.00",
+      taxes_provided: true,
+      taxes_formatted: "$75.00",
+      total_formatted: "700.00"
+    },
+    is_home_delivery: false,
+    includes: ["Vajilla", "Mantelería", "Personal", "Montaje"],
+    includes_left: ["Vajilla", "Personal"],
+    includes_right: ["Mantelería", "Montaje"],
+    contact_rows: [
+      { label: "Nombre", value: "María García" },
+      { label: "Email", value: "maria@ejemplo.com" }
+    ]
+  }
+};
+const TemplateEditorPage = () => {
+  const { id } = reactRouterDom.useParams();
+  const navigate = reactRouterDom.useNavigate();
+  const queryClient = reactQuery.useQueryClient();
+  const editorRef = react.useRef(null);
+  const { data, isLoading } = reactQuery.useQuery({
+    queryFn: () => sdk.client.fetch(`/admin/invoice-templates/${id}`),
+    queryKey: ["invoice-template", id],
+    enabled: !!id
+  });
+  const template = data == null ? void 0 : data.invoice_template;
+  const [name, setName] = react.useState("");
+  const [htmlContent, setHtmlContent] = react.useState("");
+  const [showVariables, setShowVariables] = react.useState(false);
+  react.useEffect(() => {
+    if (template) {
+      setName(template.name);
+      setHtmlContent(template.html_content);
+    }
+  }, [template]);
+  const saveMutation = reactQuery.useMutation({
+    mutationFn: (payload) => sdk.client.fetch(`/admin/invoice-templates/${id}`, {
+      method: "POST",
+      body: payload
+    }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["invoice-template", id] });
+      ui.toast.success("Plantilla guardada");
+    },
+    onError: () => {
+      ui.toast.error("Error al guardar");
+    }
+  });
+  const handleSave = () => {
+    saveMutation.mutate({ name, html_content: htmlContent });
+  };
+  const handlePreviewPdf = async () => {
+    try {
+      const response = await fetch(`/admin/invoice-templates/${id}/preview`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "include"
+      });
+      if (!response.ok) throw new Error("Preview failed");
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      window.open(url, "_blank");
+    } catch {
+      ui.toast.error("Error al generar preview PDF");
+    }
+  };
+  const handleRestoreDefault = async () => {
+    if (!(template == null ? void 0 : template.is_default)) return;
+    if (!confirm("¿Restaurar la plantilla a su contenido original?")) return;
+    try {
+      const res = await sdk.client.fetch(
+        `/admin/invoice-templates/${id}/restore`,
+        { method: "POST" }
+      );
+      ui.toast.success("Plantilla restaurada");
+      queryClient.invalidateQueries({ queryKey: ["invoice-template", id] });
+    } catch {
+      ui.toast.error("Error al restaurar. La función de restaurar aún no está implementada.");
+    }
+  };
+  const previewHtml = react.useMemo(() => {
+    if (!htmlContent || !template) return "";
+    try {
+      const compiled = Handlebars__default.default.compile(htmlContent);
+      return compiled(SAMPLE_DATA[template.type] ?? {});
+    } catch {
+      return `<div style="color:red;padding:20px;">Error en la plantilla Handlebars</div>`;
+    }
+  }, [htmlContent, template]);
+  const insertVariable = react.useCallback((variable) => {
+    const isBlock = variable.startsWith("{{#") || variable.startsWith("{{/");
+    const insertion = isBlock ? variable : `{{${variable}}}`;
+    setHtmlContent((prev) => prev + insertion);
+  }, []);
+  const availableVars = template ? VARIABLES[template.type] ?? [] : [];
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: 40 }, children: "Cargando..." }) });
+  }
+  if (!template) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: 40 }, children: "Plantilla no encontrada" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: () => navigate("/invoice-templates"), children: "← Volver" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Input,
+          {
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            style: { fontWeight: "bold", fontSize: 16 }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("code", { style: { fontSize: 12, color: "#6c757d" }, children: [
+          template.slug,
+          " (",
+          template.type,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+        template.is_default && /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: handleRestoreDefault, children: "Restaurar Default" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: () => setShowVariables(!showVariables), children: showVariables ? "Ocultar Variables" : "Variables" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", size: "small", onClick: handlePreviewPdf, children: "Preview PDF" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: handleSave, isLoading: saveMutation.isPending, children: "Guardar" })
+      ] })
+    ] }),
+    showVariables && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      background: "#f8f9fa",
+      border: "1px solid #e2e8f0",
+      borderRadius: 8,
+      padding: 12,
+      marginBottom: 16,
+      display: "flex",
+      flexWrap: "wrap",
+      gap: 6
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { style: { width: "100%", marginBottom: 4 }, children: "Variables Handlebars — click para insertar:" }),
+      availableVars.map((v, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => insertVariable(v),
+          style: {
+            background: v.startsWith("{{") ? "#e2e8f0" : "#dbeafe",
+            border: "1px solid #cbd5e0",
+            borderRadius: 4,
+            padding: "2px 8px",
+            fontSize: 11,
+            cursor: "pointer",
+            fontFamily: "monospace"
+          },
+          children: v.startsWith("{{") ? v : `{{${v}}}`
+        },
+        i
+      ))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 16, height: "calc(100vh - 260px)" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { style: { marginBottom: 8 }, children: "Editor HTML + Handlebars" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, border: "1px solid #e2e8f0", borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          CodeMirror__default.default,
+          {
+            ref: editorRef,
+            value: htmlContent,
+            onChange: (value) => setHtmlContent(value),
+            extensions: [langHtml.html()],
+            theme: themeOneDark.oneDark,
+            height: "100%",
+            style: { height: "100%" }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { style: { marginBottom: 8 }, children: "Preview en vivo (datos de ejemplo)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+          flex: 1,
+          border: "1px solid #e2e8f0",
+          borderRadius: 8,
+          overflow: "auto",
+          background: "#fff"
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "iframe",
+          {
+            srcDoc: previewHtml,
+            style: { width: "100%", height: "100%", border: "none" },
+            sandbox: "allow-same-origin",
+            title: "Template Preview"
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+};
 const i18nTranslations0 = {};
 const widgetModule = { widgets: [
   {
@@ -258,9 +743,21 @@ const widgetModule = { widgets: [
 ] };
 const routeModule = {
   routes: [
+    {
+      Component: InvoiceTemplatesPage,
+      path: "/invoice-templates"
+    },
     {
       Component: InvoiceConfigPage,
       path: "/invoice-config"
+    },
+    {
+      Component: NewTemplatePage,
+      path: "/invoice-templates/new"
+    },
+    {
+      Component: TemplateEditorPage,
+      path: "/invoice-templates/:id"
     }
   ]
 };
@@ -273,6 +770,14 @@ const menuItemModule = {
       nested: void 0,
       rank: void 0,
       translationNs: void 0
+    },
+    {
+      label: config$1.label,
+      icon: config$1.icon,
+      path: "/invoice-templates",
+      nested: void 0,
+      rank: void 0,
+      translationNs: void 0
     }
   ]
 };