Personalizar Plantillas

Selecciona y personaliza el estilo visual de tus facturas en PDF.

Pasos para cambiar plantilla

1. Navega a Configuración > Facturación > Apariencia.
2. La plantilla por defecto es “Minimal Black” (ya seleccionada).
3. Para crear plantilla personalizada:
   • Clic en “Crear Plantilla Personalizada” (botón +).
   • Selecciona plantilla base.
   • Ajusta colores, fuentes y diseño.
   • Clic en “Guardar”.

Opciones de personalización

Colores:

Elemento	Descripción	Ejemplo
Color principal	Encabezados y acentos	Verde Factux
Color secundario	Textos y bordes	Gris

Tipografía:

Elemento	Fuentes disponibles
Fuente del cuerpo	Inter, Roboto, Open Sans, Lato
Fuente de títulos	Inter, Roboto, Open Sans, Lato

Diseño del logo:

Opción	Valores
Posición	Izquierda, Centro, Derecha
Tamaño	Pequeño (50px), Mediano (70px), Grande (90px), Extra Grande (110px)

Previsualización

El sistema genera automáticamente una previsualización con datos de ejemplo:

Datos de muestra:

Factura: FAC-000001
Cliente: Empresa Cliente S.L. (B12345678)
Conceptos:
  - Consultoría: 10 × 40,00€ = 400,00€
  - Diseño: 1 × 100,00€ = 100,00€
Subtotal: 500,00€
IVA 21%: 105,00€
Total: 605,00€

Como sé que lo hice bien

• La previsualización se actualiza al cambiar colores/fuentes.
• Toast de confirmación: “Estilo actualizado”.
• Las nuevas facturas usan el estilo personalizado.

Errores comunes

Mensaje	Causa	Solución
”No se pudo actualizar el estilo”	Error de conexión	Reintenta o verifica conexión
Previsualización no carga	Logo muy pesado	Reduce tamaño de imagen (menos de 2MB)

Nota: Los cambios solo afectan a facturas nuevas. Las facturas ya emitidas mantienen su diseño original.

Detalles técnicos — Plantillas

Detalles técnicos

Tabla afectada:

SELECT invoice_style, invoice_style_configured, invoice_custom_templates
FROM businesses
WHERE id = '<business_id>';

Estructura de plantilla personalizada:

interface CustomInvoiceTemplate {
  id: string;
  name: string;
  baseStyle: string; // 'minimalBlack', etc.
  customColors?: { [colorId: string]: string };
  customFonts?: { [fontId: string]: string };
  customLayout?: {
    logoPosition?: 'left' | 'center' | 'right';
    logoSize?: 'small' | 'medium' | 'large' | 'xlarge';
  };
  isDefault?: boolean;
}

Constante de configuración: INVOICE_STYLES_CONFIG

export const INVOICE_STYLES_CONFIG = {
  minimalBlack: {
    id: 'minimalBlack',
    name: 'Minimal Black',
    colors: [
      { id: 'primary', label: 'Color principal', default: '#000000' },
      { id: 'secondary', label: 'Color secundario', default: '#666666' }
    ],
    fonts: [
      { id: 'body', label: 'Fuente del cuerpo', default: 'Inter' },
      { id: 'heading', label: 'Fuente de títulos', default: 'Inter' }
    ]
  }
};

Generación de previsualización:

InvoiceTemplatesSettings.tsx

const generatePreview = async (templateId: string, baseStyle: string, logoUrl?: string) => {
  const templateFunction = INVOICE_HTML_TEMPLATES[baseStyle];
  const html = templateFunction(invoiceData, companyData, colors, fonts, layout);

  // Renderizar HTML a canvas
  const canvas = await html2canvas(tempDiv);

  // Convertir a imagen
  const imageData = canvas.toDataURL('image/png');

  setPreviewImages(prev => ({ ...prev, [templateId]: imageData }));
};

---