npm - @codemind.ec/medusa-plugin-invoice - Versions diffs - 1.0.6 → 1.2.0 - Mend

@codemind.ec/medusa-plugin-invoice 1.0.6 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/.medusa/server/src/admin/index.mjs CHANGED Viewed

@@ -1,13 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { defineWidgetConfig, defineRouteConfig } from "@medusajs/admin-sdk";
-import { Container, Heading, Text, Button, toast, Label, Input, Textarea, Table, Badge, Select } from "@medusajs/ui";
+import { Container, Heading, Text, Button, toast, Badge, Table, Label, Input, Textarea, Switch, Select } from "@medusajs/ui";
 import Medusa from "@medusajs/js-sdk";
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { useForm, FormProvider, Controller } from "react-hook-form";
-import { z } from "@medusajs/framework/zod";
+import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
 import { useNavigate, useParams } from "react-router-dom";
 import { DocumentText } from "@medusajs/icons";
+import { useForm, FormProvider, Controller } from "react-hook-form";
 import CodeMirror from "@uiw/react-codemirror";
 import { html } from "@codemirror/lang-html";
 import { oneDark } from "@codemirror/theme-one-dark";
@@ -67,202 +66,167 @@ const OrderInvoiceWidget = ({ data: order }) => {
 defineWidgetConfig({
   zone: "order.details.side.before"
 });
-z.object({
-  company_name: z.string().optional(),
-  company_ruc: z.string().optional(),
-  company_address: z.string().optional(),
-  company_phone: z.string().optional(),
-  company_email: z.string().email().optional().or(z.literal("")),
-  company_logo: z.string().optional(),
-  notes: z.string().optional(),
-  admin_notification_email: z.string().email().optional().or(z.literal(""))
-});
 const InvoiceConfigPage = () => {
   const navigate = useNavigate();
-  const { data, isLoading, refetch } = useQuery({
+  const { data: configData, isLoading: loadingConfigs } = useQuery({
     queryFn: () => sdk.client.fetch("/admin/invoice-config"),
-    queryKey: ["invoice-config"]
+    queryKey: ["invoice-configs"]
   });
-  const { mutateAsync, isPending } = useMutation({
-    mutationFn: (payload) => sdk.client.fetch("/admin/invoice-config", {
-      method: "POST",
-      body: payload
-    }),
+  const { data: templateData, isLoading: loadingTemplates } = useQuery({
+    queryFn: () => sdk.client.fetch("/admin/invoice-templates"),
+    queryKey: ["invoice-templates"]
+  });
+  const configs = (configData == null ? void 0 : configData.invoice_configs) ?? [];
+  const templates = (templateData == null ? void 0 : templateData.invoice_templates) ?? [];
+  const defaultCompany = configs.find((c) => c.is_default);
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-6 py-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Comprobantes y Cotizaciones" }),
+      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle mt-1", children: "Gestiona empresas emisoras y plantillas de documentos." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "border border-ui-border-base rounded-lg p-5 flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Empresas" }),
+          /* @__PURE__ */ jsx(Badge, { color: configs.length > 0 ? "blue" : "grey", children: configs.length })
+        ] }),
+        loadingConfigs ? /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle text-sm", children: "Cargando..." }) : defaultCompany ? /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle rounded-md p-3", children: [
+          /* @__PURE__ */ jsx(Text, { className: "text-sm font-medium", children: defaultCompany.company_name }),
+          defaultCompany.company_ruc && /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-subtle text-xs", children: [
+            "RUC: ",
+            defaultCompany.company_ruc
+          ] }),
+          /* @__PURE__ */ jsx(Badge, { color: "green", className: "mt-1", children: "Default" })
+        ] }) : /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle text-sm", children: "No hay empresas configuradas." }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            className: "mt-auto",
+            onClick: () => navigate("/invoice-config/companies"),
+            children: "Gestionar Empresas"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border border-ui-border-base rounded-lg p-5 flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Plantillas" }),
+          /* @__PURE__ */ jsx(Badge, { color: templates.length > 0 ? "blue" : "grey", children: templates.length })
+        ] }),
+        loadingTemplates ? /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle text-sm", children: "Cargando..." }) : templates.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-ui-bg-subtle rounded-md p-3 flex flex-col gap-1", children: [
+          templates.slice(0, 3).map((t) => /* @__PURE__ */ jsx(Text, { className: "text-sm", children: t.name }, t.id)),
+          templates.length > 3 && /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-subtle text-xs", children: [
+            "+",
+            templates.length - 3,
+            " más..."
+          ] })
+        ] }) : /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle text-sm", children: "No hay plantillas. Se crearán al reiniciar el servidor." }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            className: "mt-auto",
+            onClick: () => navigate("/invoice-config/invoice-templates"),
+            children: "Gestionar Plantillas"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+const config$1 = defineRouteConfig({
+  label: "Comprobantes y Cotizaciones"
+});
+const CompaniesPage = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { data, isLoading } = useQuery({
+    queryFn: () => sdk.client.fetch("/admin/invoice-config"),
+    queryKey: ["invoice-configs"]
+  });
+  const setDefaultMutation = useMutation({
+    mutationFn: (id) => sdk.client.fetch(`/admin/invoice-config/${id}/set-default`, { method: "POST" }),
     onSuccess: () => {
-      refetch();
-      toast.success("Configuración actualizada exitosamente");
+      queryClient.invalidateQueries({ queryKey: ["invoice-configs"] });
+      toast.success("Empresa marcada como default");
     },
-    onError: () => {
-      toast.error("Error al guardar la configuración");
-    }
+    onError: () => toast.error("Error al cambiar empresa default")
   });
-  const getFormDefaultValues = useCallback(() => {
-    return {
-      company_name: (data == null ? void 0 : data.invoice_config.company_name) || "",
-      company_ruc: (data == null ? void 0 : data.invoice_config.company_ruc) || "",
-      company_address: (data == null ? void 0 : data.invoice_config.company_address) || "",
-      company_phone: (data == null ? void 0 : data.invoice_config.company_phone) || "",
-      company_email: (data == null ? void 0 : data.invoice_config.company_email) || "",
-      company_logo: (data == null ? void 0 : data.invoice_config.company_logo) || "",
-      notes: (data == null ? void 0 : data.invoice_config.notes) || "",
-      admin_notification_email: (data == null ? void 0 : data.invoice_config.admin_notification_email) || ""
-    };
-  }, [data]);
-  const form = useForm({
-    defaultValues: getFormDefaultValues()
+  const deleteMutation = useMutation({
+    mutationFn: (id) => sdk.client.fetch(`/admin/invoice-config/${id}`, { method: "DELETE" }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["invoice-configs"] });
+      toast.success("Empresa eliminada");
+    },
+    onError: () => toast.error("No se pudo eliminar la empresa")
   });
-  const handleSubmit = form.handleSubmit((formData) => mutateAsync(formData));
-  const uploadLogo = async (event) => {
-    var _a;
-    const file = (_a = event.target.files) == null ? void 0 : _a[0];
-    if (!file) {
-      return;
-    }
-    try {
-      const { files } = await sdk.admin.upload.create({
-        files: [file]
-      });
-      form.setValue("company_logo", files[0].url);
-    } catch (error) {
-      toast.error("Error al subir el logo. Verifica que el archivo sea una imagen válida.");
-    }
-  };
-  useEffect(() => {
-    form.reset(getFormDefaultValues());
-  }, [getFormDefaultValues]);
+  const configs = (data == null ? void 0 : data.invoice_configs) ?? [];
   return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Configuración de Comprobante" }),
-      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => navigate("/invoice-config/invoice-templates"), children: "Gestionar Plantillas" })
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Empresas" }),
+        /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle text-sm mt-1", children: "Empresas emisoras de comprobantes y cotizaciones." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => navigate("/invoice-config"), children: "← Panel" }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => navigate("/invoice-config/companies/new"), children: "+ Nueva Empresa" })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit: handleSubmit,
-        className: "flex h-full flex-col overflow-hidden p-2 gap-2",
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-subtle border border-ui-border-base rounded-lg p-3 mb-2", children: /* @__PURE__ */ jsx(
-            Controller,
-            {
-              control: form.control,
-              name: "admin_notification_email",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-1", children: /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "📧 Email de Notificaciones (Admin)" }) }),
-                  /* @__PURE__ */ jsx(Input, { ...field, onChange: field.onChange, value: field.value, placeholder: "admin@mariquita.food" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-ui-fg-subtle text-xs", children: "Se enviarán notificaciones de nuevos pedidos y comprobantes de pago a este email." })
-                ] });
-              }
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            Controller,
-            {
-              control: form.control,
-              name: "company_name",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-1", children: /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Nombre de la Empresa" }) }),
-                  /* @__PURE__ */ jsx(Input, { ...field, onChange: field.onChange, value: field.value })
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Controller,
-            {
-              control: form.control,
-              name: "company_ruc",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-1", children: /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "RUC" }) }),
-                  /* @__PURE__ */ jsx(Input, { ...field, onChange: field.onChange, value: field.value, placeholder: "1234567890001" })
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Controller,
-            {
-              control: form.control,
-              name: "company_address",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-1", children: /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Dirección de la Empresa" }) }),
-                  /* @__PURE__ */ jsx(Textarea, { ...field })
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Controller,
-            {
-              control: form.control,
-              name: "company_phone",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-1", children: /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Teléfono de la Empresa" }) }),
-                  /* @__PURE__ */ jsx(Input, { ...field })
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Controller,
-            {
-              control: form.control,
-              name: "company_email",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-1", children: /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Email de la Empresa" }) }),
-                  /* @__PURE__ */ jsx(Input, { ...field })
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Controller,
-            {
-              control: form.control,
-              name: "notes",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-1", children: /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Notas" }) }),
-                  /* @__PURE__ */ jsx(Textarea, { ...field })
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Controller,
-            {
-              control: form.control,
-              name: "company_logo",
-              render: ({ field }) => {
-                return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-1", children: /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Logo de la Empresa" }) }),
-                  /* @__PURE__ */ jsx(Input, { type: "file", onChange: uploadLogo, className: "py-1" }),
-                  field.value && /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      src: field.value,
-                      alt: "Logo de la Empresa",
-                      className: "mt-2 h-24 w-24"
+    /* @__PURE__ */ jsx("div", { className: "px-6 pb-4", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "text-center py-10 text-ui-fg-subtle", children: "Cargando..." }) : configs.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-10 text-ui-fg-subtle", children: "No hay empresas configuradas." }) : /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Nombre" }),
+        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "RUC" }),
+        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Email" }),
+        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Teléfono" }),
+        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Estado" }),
+        /* @__PURE__ */ jsx(Table.HeaderCell, { style: { textAlign: "right" }, children: "Acciones" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Table.Body, { children: configs.map((cfg) => /* @__PURE__ */ jsxs(
+        Table.Row,
+        {
+          onClick: () => navigate(`/invoice-config/companies/${cfg.id}`),
+          style: { cursor: "pointer" },
+          children: [
+            /* @__PURE__ */ jsx(Table.Cell, { className: "font-medium", children: cfg.company_name }),
+            /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx("code", { className: "text-xs", children: cfg.company_ruc || "—" }) }),
+            /* @__PURE__ */ jsx(Table.Cell, { children: cfg.company_email }),
+            /* @__PURE__ */ jsx(Table.Cell, { children: cfg.company_phone }),
+            /* @__PURE__ */ jsx(Table.Cell, { children: cfg.is_default ? /* @__PURE__ */ jsx(Badge, { color: "green", children: "Default" }) : /* @__PURE__ */ jsx(Badge, { color: "grey", children: "—" }) }),
+            /* @__PURE__ */ jsx(Table.Cell, { style: { textAlign: "right" }, children: /* @__PURE__ */ jsx("div", { className: "flex gap-2 justify-end", children: !cfg.is_default && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  size: "small",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setDefaultMutation.mutate(cfg.id);
+                  },
+                  children: "Default"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "danger",
+                  size: "small",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    if (confirm("¿Eliminar esta empresa?")) {
+                      deleteMutation.mutate(cfg.id);
                     }
-                  )
-                ] });
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isLoading || isPending, children: "Guardar" })
-        ]
-      }
-    ) })
+                  },
+                  children: "Eliminar"
+                }
+              )
+            ] }) }) })
+          ]
+        },
+        cfg.id
+      )) })
+    ] }) })
   ] });
 };
-const config$1 = defineRouteConfig({
-  label: "Comprobante de Pedido"
-});
 const TYPE_LABELS = {
   order_invoice: "Comprobante de Pedido",
   quote_proforma: "Cotización Proforma"
@@ -274,6 +238,10 @@ const InvoiceTemplatesPage = () => {
     queryFn: () => sdk.client.fetch("/admin/invoice-templates"),
     queryKey: ["invoice-templates"]
   });
+  const { data: companiesData } = useQuery({
+    queryFn: () => sdk.client.fetch("/admin/invoice-config"),
+    queryKey: ["invoice-configs"]
+  });
   const deleteMutation = useMutation({
     mutationFn: (id) => sdk.client.fetch(`/admin/invoice-templates/${id}`, { method: "DELETE" }),
     onSuccess: () => {
@@ -285,19 +253,21 @@ const InvoiceTemplatesPage = () => {
     }
   });
   const templates = (data == null ? void 0 : data.invoice_templates) ?? [];
-  return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }, children: [
+  const companiesMap = new Map(((companiesData == null ? void 0 : companiesData.invoice_configs) ?? []).map((c) => [c.id, c.company_name]));
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
       /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Plantillas de Documentos" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => navigate("/invoice-config"), children: "Configuración" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => navigate("/invoice-config"), children: "← Panel" }),
         /* @__PURE__ */ jsx(Button, { onClick: () => navigate("/invoice-config/invoice-templates/new"), children: "+ Nueva Plantilla" })
       ] })
     ] }),
-    isLoading ? /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: 40 }, children: "Cargando..." }) : templates.length === 0 ? /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: 40, color: "#6c757d" }, children: "No hay plantillas. Se crearán automáticamente al reiniciar el servidor." }) : /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx("div", { className: "px-6 pb-4", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "text-center py-10 text-ui-fg-subtle", children: "Cargando..." }) : templates.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-10 text-ui-fg-subtle", children: "No hay plantillas. Se crearán automáticamente al reiniciar el servidor." }) : /* @__PURE__ */ jsxs(Table, { children: [
       /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
         /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Nombre" }),
         /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Slug" }),
         /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Tipo" }),
+        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Empresa" }),
         /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Estado" }),
         /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Actualizado" }),
         /* @__PURE__ */ jsx(Table.HeaderCell, { style: { textAlign: "right" }, children: "Acciones" })
@@ -308,9 +278,10 @@ const InvoiceTemplatesPage = () => {
           onClick: () => navigate(`/invoice-config/invoice-templates/${tpl.id}`),
           style: { cursor: "pointer" },
           children: [
-            /* @__PURE__ */ jsx(Table.Cell, { children: tpl.name }),
-            /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx("code", { style: { fontSize: 12 }, children: tpl.slug }) }),
+            /* @__PURE__ */ jsx(Table.Cell, { className: "font-medium", children: tpl.name }),
+            /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx("code", { className: "text-xs", children: tpl.slug }) }),
             /* @__PURE__ */ jsx(Table.Cell, { children: TYPE_LABELS[tpl.type] ?? tpl.type }),
+            /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Text, { className: "text-sm", children: tpl.company_id ? companiesMap.get(tpl.company_id) ?? "—" : "—" }) }),
             /* @__PURE__ */ jsx(Table.Cell, { children: tpl.is_default ? /* @__PURE__ */ jsx(Badge, { color: "blue", children: "Por defecto" }) : /* @__PURE__ */ jsx(Badge, { color: "grey", children: "Personalizada" }) }),
             /* @__PURE__ */ jsx(Table.Cell, { children: new Date(tpl.updated_at).toLocaleDateString("es-ES") }),
             /* @__PURE__ */ jsx(Table.Cell, { style: { textAlign: "right" }, children: /* @__PURE__ */ jsx(
@@ -332,13 +303,356 @@ const InvoiceTemplatesPage = () => {
         },
         tpl.id
       )) })
-    ] })
+    ] }) })
   ] });
 };
 const config = defineRouteConfig({
   label: "Plantillas PDF",
   icon: DocumentText
 });
+const EditCompanyPage = () => {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { data, isLoading } = useQuery({
+    queryFn: () => sdk.client.fetch(`/admin/invoice-config/${id}`),
+    queryKey: ["invoice-config", id],
+    enabled: !!id
+  });
+  const config2 = data == null ? void 0 : data.invoice_config;
+  const getDefaults = useCallback(() => ({
+    company_name: (config2 == null ? void 0 : config2.company_name) || "",
+    company_ruc: (config2 == null ? void 0 : config2.company_ruc) || "",
+    company_address: (config2 == null ? void 0 : config2.company_address) || "",
+    company_phone: (config2 == null ? void 0 : config2.company_phone) || "",
+    company_email: (config2 == null ? void 0 : config2.company_email) || "",
+    company_logo: (config2 == null ? void 0 : config2.company_logo) || "",
+    notes: (config2 == null ? void 0 : config2.notes) || "",
+    admin_notification_email: (config2 == null ? void 0 : config2.admin_notification_email) || "",
+    is_default: (config2 == null ? void 0 : config2.is_default) || false
+  }), [config2]);
+  const form = useForm({ defaultValues: getDefaults() });
+  useEffect(() => {
+    form.reset(getDefaults());
+  }, [getDefaults]);
+  const saveMutation = useMutation({
+    mutationFn: (payload) => sdk.client.fetch(`/admin/invoice-config/${id}`, {
+      method: "POST",
+      body: payload
+    }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["invoice-config", id] });
+      queryClient.invalidateQueries({ queryKey: ["invoice-configs"] });
+      toast.success("Empresa actualizada");
+    },
+    onError: () => toast.error("Error al guardar")
+  });
+  const uploadLogo = async (event) => {
+    var _a;
+    const file = (_a = event.target.files) == null ? void 0 : _a[0];
+    if (!file) return;
+    try {
+      const { files } = await sdk.admin.upload.create({ files: [file] });
+      form.setValue("company_logo", files[0].url);
+    } catch {
+      toast.error("Error al subir el logo.");
+    }
+  };
+  const handleSubmit = form.handleSubmit((data2) => saveMutation.mutate(data2));
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("div", { className: "text-center py-10", children: "Cargando..." }) });
+  }
+  if (!config2) {
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("div", { className: "text-center py-10", children: "Empresa no encontrada" }) });
+  }
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Editar Empresa" }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => navigate("/invoice-config/companies"), children: "← Volver" })
+    ] }),
+    /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 p-6 max-w-2xl", children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-subtle border border-ui-border-base rounded-lg p-4 mb-2", children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "admin_notification_email",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "📧 Email de Notificaciones (Admin)" }),
+            /* @__PURE__ */ jsx(Input, { ...field, placeholder: "admin@empresa.com" }),
+            /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle text-xs", children: "Notificaciones de nuevos pedidos a este email." })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "company_name",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Nombre de la Empresa *" }),
+            /* @__PURE__ */ jsx(Input, { ...field })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "company_ruc",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "RUC" }),
+            /* @__PURE__ */ jsx(Input, { ...field, placeholder: "1234567890001" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "company_address",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Dirección" }),
+            /* @__PURE__ */ jsx(Textarea, { ...field })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            control: form.control,
+            name: "company_phone",
+            render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Teléfono" }),
+              /* @__PURE__ */ jsx(Input, { ...field })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            control: form.control,
+            name: "company_email",
+            render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Email de la Empresa" }),
+              /* @__PURE__ */ jsx(Input, { ...field })
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "notes",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Notas" }),
+            /* @__PURE__ */ jsx(Textarea, { ...field })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "company_logo",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Logo de la Empresa" }),
+            /* @__PURE__ */ jsx(Input, { type: "file", onChange: uploadLogo, className: "py-1" }),
+            field.value && /* @__PURE__ */ jsx("img", { src: field.value, alt: "Logo", className: "mt-2 h-24 w-24 object-contain" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "is_default",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 bg-ui-bg-subtle rounded-lg p-3", children: [
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: field.value,
+                onCheckedChange: field.onChange
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Empresa por defecto" }),
+              /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle text-xs", children: "Se usará en plantillas que no tengan empresa asignada." })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => navigate("/invoice-config/companies"), children: "Cancelar" }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", isLoading: saveMutation.isPending, children: "Guardar Cambios" })
+      ] })
+    ] }) })
+  ] });
+};
+const NewCompanyPage = () => {
+  const navigate = useNavigate();
+  const form = useForm({
+    defaultValues: {
+      company_name: "",
+      company_ruc: "",
+      company_address: "",
+      company_phone: "",
+      company_email: "",
+      company_logo: "",
+      notes: "",
+      admin_notification_email: "",
+      is_default: false
+    }
+  });
+  const createMutation = useMutation({
+    mutationFn: (payload) => sdk.client.fetch("/admin/invoice-config", {
+      method: "POST",
+      body: payload
+    }),
+    onSuccess: () => {
+      toast.success("Empresa creada exitosamente");
+      navigate("/invoice-config/companies");
+    },
+    onError: () => toast.error("Error al crear la empresa")
+  });
+  const uploadLogo = async (event) => {
+    var _a;
+    const file = (_a = event.target.files) == null ? void 0 : _a[0];
+    if (!file) return;
+    try {
+      const { files } = await sdk.admin.upload.create({ files: [file] });
+      form.setValue("company_logo", files[0].url);
+    } catch {
+      toast.error("Error al subir el logo.");
+    }
+  };
+  const handleSubmit = form.handleSubmit((data) => createMutation.mutate(data));
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Nueva Empresa" }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => navigate("/invoice-config/companies"), children: "← Volver" })
+    ] }),
+    /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 p-6 max-w-2xl", children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-subtle border border-ui-border-base rounded-lg p-4 mb-2", children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "admin_notification_email",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "📧 Email de Notificaciones (Admin)" }),
+            /* @__PURE__ */ jsx(Input, { ...field, placeholder: "admin@empresa.com" }),
+            /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle text-xs", children: "Notificaciones de nuevos pedidos a este email." })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "company_name",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Nombre de la Empresa *" }),
+            /* @__PURE__ */ jsx(Input, { ...field, placeholder: "Mi Empresa S.A.S." })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "company_ruc",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "RUC" }),
+            /* @__PURE__ */ jsx(Input, { ...field, placeholder: "1234567890001" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "company_address",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Dirección" }),
+            /* @__PURE__ */ jsx(Textarea, { ...field, placeholder: "Av. Principal 123, Quito" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            control: form.control,
+            name: "company_phone",
+            render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Teléfono" }),
+              /* @__PURE__ */ jsx(Input, { ...field, placeholder: "+593 99 123 4567" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            control: form.control,
+            name: "company_email",
+            render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Email de la Empresa" }),
+              /* @__PURE__ */ jsx(Input, { ...field, placeholder: "info@empresa.com" })
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "notes",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Notas" }),
+            /* @__PURE__ */ jsx(Textarea, { ...field, placeholder: "Notas internas o pie de página del documento" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "company_logo",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Logo de la Empresa" }),
+            /* @__PURE__ */ jsx(Input, { type: "file", onChange: uploadLogo, className: "py-1" }),
+            field.value && /* @__PURE__ */ jsx("img", { src: field.value, alt: "Logo", className: "mt-2 h-24 w-24 object-contain" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          control: form.control,
+          name: "is_default",
+          render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 bg-ui-bg-subtle rounded-lg p-3", children: [
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: field.value,
+                onCheckedChange: field.onChange
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Label, { size: "small", weight: "plus", children: "Empresa por defecto" }),
+              /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle text-xs", children: "Se usará en plantillas que no tengan empresa asignada." })
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 pt-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => navigate("/invoice-config/companies"), children: "Cancelar" }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", isLoading: createMutation.isPending, children: "Crear Empresa" })
+      ] })
+    ] }) })
+  ] });
+};
 const NewTemplatePage = () => {
   const navigate = useNavigate();
   const [name, setName] = useState("");
@@ -429,66 +743,139 @@ function getDefaultHtml(type) {
 </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 COMPANY_VARIABLES = [
+  { name: "company_name" },
+  { name: "company_ruc" },
+  { name: "company_address" },
+  { name: "company_phone" },
+  { name: "company_email" },
+  { name: "company_logo_base64" }
+];
+const ORDER_INVOICE_CATEGORIES = [
+  {
+    label: "Empresa",
+    icon: "🏢",
+    variables: COMPANY_VARIABLES
+  },
+  {
+    label: "Documento",
+    icon: "📄",
+    variables: [
+      { name: "invoice_id" },
+      { name: "invoice_date" },
+      { name: "order_display_id" },
+      { name: "order_date" }
+    ]
+  },
+  {
+    label: "Cliente",
+    icon: "👤",
+    variables: [
+      { name: "billing_address" },
+      { name: "shipping_address" },
+      { name: "cedula" }
+    ]
+  },
+  {
+    label: "Productos",
+    icon: "📦",
+    variables: [
+      { name: "{{#each items}}", isBlock: true },
+      { name: "this.title" },
+      { name: "this.variant_title" },
+      { name: "this.quantity" },
+      { name: "this.unit_price" },
+      { name: "this.total" },
+      { name: "{{/each}}", isBlock: true }
+    ]
+  },
+  {
+    label: "Totales",
+    icon: "💰",
+    variables: [
+      { name: "subtotal" },
+      { name: "tax_total" },
+      { name: "shipping_total" },
+      { name: "discount_total" },
+      { name: "total" }
+    ]
+  },
+  {
+    label: "Otros",
+    icon: "📝",
+    variables: [
+      { name: "is_home_delivery" },
+      { name: "notes" }
+    ]
+  }
+];
+const QUOTE_PROFORMA_CATEGORIES = [
+  {
+    label: "Empresa",
+    icon: "🏢",
+    variables: [...COMPANY_VARIABLES, { name: "company_website" }]
+  },
+  {
+    label: "Documento",
+    icon: "📄",
+    variables: [
+      { name: "quote_number" },
+      { name: "date_str" },
+      { name: "service_name" },
+      { name: "is_home_delivery" }
+    ]
+  },
+  {
+    label: "Configuración",
+    icon: "⚙️",
+    variables: [
+      { name: "{{#each config_fields}}", isBlock: true },
+      { name: "this.label" },
+      { name: "this.value" },
+      { name: "{{/each}}", isBlock: true }
+    ]
+  },
+  {
+    label: "Desglose",
+    icon: "📊",
+    variables: [
+      { name: "{{#each breakdown}}", isBlock: true },
+      { name: "this.label" },
+      { name: "this.total_formatted" },
+      { name: "{{/each}}", isBlock: true }
+    ]
+  },
+  {
+    label: "Totales",
+    icon: "💰",
+    variables: [
+      { name: "totals.subtotal_formatted" },
+      { name: "totals.extras_formatted" },
+      { name: "totals.discount_formatted" },
+      { name: "totals.shipping_formatted" },
+      { name: "totals.taxes_provided" },
+      { name: "totals.taxes_formatted" },
+      { name: "totals.total_formatted" }
+    ]
+  },
+  {
+    label: "Incluye y Contacto",
+    icon: "📋",
+    variables: [
+      { name: "{{#each includes_left}}", isBlock: true },
+      { name: "{{#each includes_right}}", isBlock: true },
+      { name: "{{#each contact_rows}}", isBlock: true },
+      { name: "this.label" },
+      { name: "this.value" },
+      { name: "{{/each}}", isBlock: true }
+    ]
+  }
+];
+const CATEGORIES = {
+  order_invoice: ORDER_INVOICE_CATEGORIES,
+  quote_proforma: QUOTE_PROFORMA_CATEGORIES
 };
+const PLACEHOLDER_LOGO_BASE64 = "data:image/svg+xml;base64," + btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40"><rect width="120" height="40" rx="4" fill="#e2e8f0"/><text x="60" y="24" text-anchor="middle" fill="#64748b" font-family="sans-serif" font-size="11">LOGO</text></svg>`);
 const SAMPLE_DATA = {
   order_invoice: {
     company_name: "Mi Empresa",
@@ -496,7 +883,7 @@ const SAMPLE_DATA = {
     company_address: "Av. Principal 123, Quito",
     company_phone: "+593 99 123 4567",
     company_email: "info@miempresa.com",
-    company_logo_base64: "",
+    company_logo_base64: PLACEHOLDER_LOGO_BASE64,
     invoice_id: "INV-000001",
     invoice_date: "19/06/2025",
     order_display_id: "000042",
@@ -518,6 +905,11 @@ const SAMPLE_DATA = {
   },
   quote_proforma: {
     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: PLACEHOLDER_LOGO_BASE64,
     company_website: "www.miempresa.com",
     quote_number: "QP-2025-0001",
     date_str: "19/06/2025",
@@ -561,14 +953,22 @@ const TemplateEditorPage = () => {
     queryKey: ["invoice-template", id],
     enabled: !!id
   });
+  const { data: companiesData } = useQuery({
+    queryFn: () => sdk.client.fetch("/admin/invoice-config"),
+    queryKey: ["invoice-configs"]
+  });
   const template = data == null ? void 0 : data.invoice_template;
+  const companies = (companiesData == null ? void 0 : companiesData.invoice_configs) ?? [];
   const [name, setName] = useState("");
   const [htmlContent, setHtmlContent] = useState("");
+  const [companyId, setCompanyId] = useState(null);
   const [showVariables, setShowVariables] = useState(false);
+  const [collapsedSections, setCollapsedSections] = useState({});
   useEffect(() => {
     if (template) {
       setName(template.name);
       setHtmlContent(template.html_content);
+      setCompanyId(template.company_id);
     }
   }, [template]);
   const saveMutation = useMutation({
@@ -585,7 +985,7 @@ const TemplateEditorPage = () => {
     }
   });
   const handleSave = () => {
-    saveMutation.mutate({ name, html_content: htmlContent });
+    saveMutation.mutate({ name, html_content: htmlContent, company_id: companyId });
   };
   const handlePreviewPdf = async () => {
     try {
@@ -606,7 +1006,7 @@ const TemplateEditorPage = () => {
     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(
+      await sdk.client.fetch(
         `/admin/invoice-templates/${id}/restore`,
         { method: "POST" }
       );
@@ -625,77 +1025,102 @@ const TemplateEditorPage = () => {
       return `<div style="color:red;padding:20px;">Error en la plantilla Handlebars</div>`;
     }
   }, [htmlContent, template]);
-  const insertVariable = useCallback((variable) => {
-    const isBlock = variable.startsWith("{{#") || variable.startsWith("{{/");
+  const insertVariable = useCallback((variable, isBlock) => {
     const insertion = isBlock ? variable : `{{${variable}}}`;
     setHtmlContent((prev) => prev + insertion);
   }, []);
-  const availableVars = template ? VARIABLES[template.type] ?? [] : [];
+  const toggleSection = useCallback((label) => {
+    setCollapsedSections((prev) => ({ ...prev, [label]: !prev[label] }));
+  }, []);
+  const categories = template ? CATEGORIES[template.type] ?? [] : [];
   if (isLoading) {
-    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: 40 }, children: "Cargando..." }) });
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("div", { className: "text-center py-10", children: "Cargando..." }) });
   }
   if (!template) {
-    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("div", { style: { textAlign: "center", padding: 40 }, children: "Plantilla no encontrada" }) });
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("div", { className: "text-center py-10", children: "Plantilla no encontrada" }) });
   }
-  return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+  return /* @__PURE__ */ jsxs(Container, { className: "p-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-ui-border-base", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: () => navigate("/invoice-config/invoice-templates"), children: "← Volver" }),
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           Input,
           {
             value: name,
             onChange: (e) => setName(e.target.value),
-            style: { fontWeight: "bold", fontSize: 16 }
+            className: "font-semibold text-base w-64"
           }
-        ) }),
-        /* @__PURE__ */ jsxs("code", { style: { fontSize: 12, color: "#6c757d" }, children: [
+        ),
+        /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-xs", children: [
           template.slug,
           " (",
           template.type,
           ")"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-        template.is_default && /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: handleRestoreDefault, children: "Restaurar Default" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: companyId ?? "__none__",
+            onValueChange: (v) => setCompanyId(v === "__none__" ? null : v),
+            children: [
+              /* @__PURE__ */ jsx(Select.Trigger, { className: "w-48", children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Empresa" }) }),
+              /* @__PURE__ */ jsxs(Select.Content, { children: [
+                /* @__PURE__ */ jsx(Select.Item, { value: "__none__", children: "Sin empresa (usa default)" }),
+                companies.map((c) => /* @__PURE__ */ jsxs(Select.Item, { value: c.id, children: [
+                  c.company_name,
+                  c.is_default ? " ★" : ""
+                ] }, c.id))
+              ] })
+            ]
+          }
+        ),
+        template.is_default && /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: handleRestoreDefault, children: "Restaurar" }),
         /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: () => setShowVariables(!showVariables), children: showVariables ? "Ocultar Variables" : "Variables" }),
         /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: handlePreviewPdf, children: "Preview PDF" }),
         /* @__PURE__ */ jsx(Button, { onClick: handleSave, isLoading: saveMutation.isPending, children: "Guardar" })
       ] })
     ] }),
-    showVariables && /* @__PURE__ */ jsxs("div", { style: {
-      background: "#f8f9fa",
-      border: "1px solid #e2e8f0",
-      borderRadius: 8,
-      padding: 12,
-      marginBottom: 16,
-      display: "flex",
-      flexWrap: "wrap",
-      gap: 6
-    }, children: [
-      /* @__PURE__ */ jsx(Label, { style: { width: "100%", marginBottom: 4 }, children: "Variables Handlebars — click para insertar:" }),
-      availableVars.map((v, i) => /* @__PURE__ */ 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"
+    showVariables && /* @__PURE__ */ jsxs("div", { className: "border-b border-ui-border-base bg-ui-bg-subtle px-4 py-3", children: [
+      /* @__PURE__ */ jsx(Label, { className: "block mb-2 text-sm", children: "Variables Handlebars — click para insertar" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: categories.map((cat) => /* @__PURE__ */ jsxs("div", { className: "border border-ui-border-base rounded-lg bg-ui-bg-base overflow-hidden", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "w-full flex items-center justify-between px-3 py-2 text-left text-sm font-medium hover:bg-ui-bg-subtle-hover transition-colors",
+            onClick: () => toggleSection(cat.label),
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                cat.icon,
+                " ",
+                cat.label
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "text-ui-fg-muted text-xs", children: [
+                collapsedSections[cat.label] ? "▸" : "▾",
+                " ",
+                cat.variables.length
+              ] })
+            ]
+          }
+        ),
+        !collapsedSections[cat.label] && /* @__PURE__ */ jsx("div", { className: "px-3 pb-2 flex flex-wrap gap-1.5", children: cat.variables.map((v, i) => /* @__PURE__ */ jsx(
+          Badge,
+          {
+            color: v.isBlock ? "orange" : "blue",
+            className: "cursor-pointer hover:opacity-80 transition-opacity text-xs",
+            onClick: () => insertVariable(v.name, v.isBlock),
+            children: v.isBlock ? v.name : `{{${v.name}}}`
           },
-          children: v.startsWith("{{") ? v : `{{${v}}}`
-        },
-        i
-      ))
+          `${cat.label}-${i}`
+        )) })
+      ] }, cat.label)) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 16, height: "calc(100vh - 260px)" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 16, height: "calc(100vh - 260px)", padding: 16 }, children: [
       /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx(Label, { style: { marginBottom: 8 }, children: "Editor HTML + Handlebars" }),
-        /* @__PURE__ */ jsx("div", { style: { flex: 1, border: "1px solid #e2e8f0", borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Label, { className: "mb-2", children: "Editor HTML + Handlebars" }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 border border-ui-border-base rounded-lg overflow-hidden", children: /* @__PURE__ */ jsx(
           CodeMirror,
           {
             ref: editorRef,
@@ -709,14 +1134,8 @@ const TemplateEditorPage = () => {
         ) })
       ] }),
       /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx(Label, { style: { marginBottom: 8 }, children: "Preview en vivo (datos de ejemplo)" }),
-        /* @__PURE__ */ jsx("div", { style: {
-          flex: 1,
-          border: "1px solid #e2e8f0",
-          borderRadius: 8,
-          overflow: "auto",
-          background: "#fff"
-        }, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Label, { className: "mb-2", children: "Preview en vivo (datos de ejemplo)" }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 border border-ui-border-base rounded-lg overflow-auto bg-white", children: /* @__PURE__ */ jsx(
           "iframe",
           {
             srcDoc: previewHtml,
@@ -742,10 +1161,22 @@ const routeModule = {
       Component: InvoiceConfigPage,
       path: "/invoice-config"
     },
+    {
+      Component: CompaniesPage,
+      path: "/invoice-config/companies"
+    },
     {
       Component: InvoiceTemplatesPage,
       path: "/invoice-config/invoice-templates"
     },
+    {
+      Component: EditCompanyPage,
+      path: "/invoice-config/companies/:id"
+    },
+    {
+      Component: NewCompanyPage,
+      path: "/invoice-config/companies/new"
+    },
     {
       Component: NewTemplatePage,
       path: "/invoice-config/invoice-templates/new"