diff --git a/src/utils/invoiceTemplates.ts b/src/utils/invoiceTemplates.ts new file mode 100644 index 0000000..c1e8a75 --- /dev/null +++ b/src/utils/invoiceTemplates.ts @@ -0,0 +1,539 @@ +export interface InvoiceTemplateColors { + primary: string + secondary: string + background: string + headerBg: string + headerText: string + bodyText: string + tableHeaderBg: string + tableHeaderText: string + tableRowAlt: string + tableBorder: string + totalHighlight: string +} + +export interface InvoiceTemplateLayout { + logoPosition: 'top-left' | 'top-center' | 'top-right' + headerStyle: 'full-width' | 'split' | 'minimal' | 'sidebar' | 'gradient' | 'geometric' | 'centered' + tableStyle: 'bordered' | 'striped' | 'borderless' | 'minimal-lines' | 'colored-sections' + totalsPosition: 'right' | 'center' + showDividers: boolean + dividerStyle: 'thin' | 'double' | 'thick' | 'none' +} + +export interface InvoiceTemplateTypography { + titleSize: number + titleWeight: 'bold' | 'normal' + headerSize: number + bodySize: number + numberStyle: 'normal' | 'monospace-feel' +} + +export interface InvoiceTemplateDecorative { + cornerShape: 'none' | 'colored-block' | 'triangle' | 'diagonal' + sidebarWidth: number + sidebarColor: string + useGradientHeader: boolean + gradientFrom?: string + gradientTo?: string + backgroundTint: boolean + backgroundTintColor?: string +} + +export interface InvoiceTemplateConfig { + id: string + name: string + category: 'essential' | 'creative' | 'warm' | 'premium' + description: string + colors: InvoiceTemplateColors + layout: InvoiceTemplateLayout + typography: InvoiceTemplateTypography + decorative: InvoiceTemplateDecorative +} + +// --- Template definitions --- +// Define all 15 templates. Each has unique colors, layout, typography, decorative. + +const cleanMinimal: InvoiceTemplateConfig = { + id: 'clean-minimal', + name: 'Clean Minimal', + category: 'essential', + description: 'Swiss-inspired simplicity with a single accent line', + colors: { + primary: '#3B82F6', + secondary: '#93C5FD', + background: '#FFFFFF', + headerBg: '#FFFFFF', + headerText: '#111827', + bodyText: '#374151', + tableHeaderBg: '#F9FAFB', + tableHeaderText: '#374151', + tableRowAlt: '#F9FAFB', + tableBorder: '#E5E7EB', + totalHighlight: '#3B82F6', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'minimal', + tableStyle: 'bordered', + totalsPosition: 'right', + showDividers: true, + dividerStyle: 'thin', + }, + typography: { titleSize: 24, titleWeight: 'bold', headerSize: 11, bodySize: 9, numberStyle: 'normal' }, + decorative: { cornerShape: 'none', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: false }, +} + +const corporateClassic: InvoiceTemplateConfig = { + id: 'corporate-classic', + name: 'Corporate Classic', + category: 'essential', + description: 'Navy header band with professional table layout', + colors: { + primary: '#1E3A5F', + secondary: '#2563EB', + background: '#FFFFFF', + headerBg: '#1E3A5F', + headerText: '#FFFFFF', + bodyText: '#374151', + tableHeaderBg: '#1E3A5F', + tableHeaderText: '#FFFFFF', + tableRowAlt: '#F3F4F6', + tableBorder: '#D1D5DB', + totalHighlight: '#1E3A5F', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'full-width', + tableStyle: 'striped', + totalsPosition: 'right', + showDividers: false, + dividerStyle: 'none', + }, + typography: { titleSize: 28, titleWeight: 'bold', headerSize: 11, bodySize: 9, numberStyle: 'normal' }, + decorative: { cornerShape: 'none', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: false }, +} + +const modernBold: InvoiceTemplateConfig = { + id: 'modern-bold', + name: 'Modern Bold', + category: 'essential', + description: 'Large accent block with oversized typography', + colors: { + primary: '#6366F1', + secondary: '#A5B4FC', + background: '#FFFFFF', + headerBg: '#6366F1', + headerText: '#FFFFFF', + bodyText: '#1F2937', + tableHeaderBg: '#6366F1', + tableHeaderText: '#FFFFFF', + tableRowAlt: '#F5F3FF', + tableBorder: '#E0E7FF', + totalHighlight: '#6366F1', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'full-width', + tableStyle: 'borderless', + totalsPosition: 'right', + showDividers: false, + dividerStyle: 'none', + }, + typography: { titleSize: 32, titleWeight: 'bold', headerSize: 12, bodySize: 10, numberStyle: 'normal' }, + decorative: { cornerShape: 'colored-block', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: false }, +} + +const elegantSerif: InvoiceTemplateConfig = { + id: 'elegant-serif', + name: 'Elegant Serif', + category: 'essential', + description: 'Refined charcoal and gold with centered layout', + colors: { + primary: '#374151', + secondary: '#B8860B', + background: '#FFFFFF', + headerBg: '#FFFFFF', + headerText: '#374151', + bodyText: '#4B5563', + tableHeaderBg: '#374151', + tableHeaderText: '#FFFFFF', + tableRowAlt: '#FAFAFA', + tableBorder: '#D1D5DB', + totalHighlight: '#B8860B', + }, + layout: { + logoPosition: 'top-center', + headerStyle: 'centered', + tableStyle: 'minimal-lines', + totalsPosition: 'right', + showDividers: true, + dividerStyle: 'double', + }, + typography: { titleSize: 26, titleWeight: 'normal', headerSize: 11, bodySize: 9, numberStyle: 'normal' }, + decorative: { cornerShape: 'none', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: false }, +} + +const simpleTwoTone: InvoiceTemplateConfig = { + id: 'simple-two-tone', + name: 'Simple Two-Tone', + category: 'essential', + description: 'Dark/light split header with emerald accents', + colors: { + primary: '#1F2937', + secondary: '#10B981', + background: '#FFFFFF', + headerBg: '#1F2937', + headerText: '#FFFFFF', + bodyText: '#374151', + tableHeaderBg: '#F3F4F6', + tableHeaderText: '#1F2937', + tableRowAlt: '#FFFFFF', + tableBorder: '#E5E7EB', + totalHighlight: '#10B981', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'split', + tableStyle: 'minimal-lines', + totalsPosition: 'right', + showDividers: true, + dividerStyle: 'thin', + }, + typography: { titleSize: 24, titleWeight: 'bold', headerSize: 11, bodySize: 9, numberStyle: 'normal' }, + decorative: { cornerShape: 'none', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: false }, +} + +const gradientHeader: InvoiceTemplateConfig = { + id: 'gradient-header', + name: 'Gradient Header', + category: 'creative', + description: 'Full-width gradient header with modern feel', + colors: { + primary: '#667EEA', + secondary: '#764BA2', + background: '#FFFFFF', + headerBg: '#667EEA', + headerText: '#FFFFFF', + bodyText: '#374151', + tableHeaderBg: '#667EEA', + tableHeaderText: '#FFFFFF', + tableRowAlt: '#F5F3FF', + tableBorder: '#E0E7FF', + totalHighlight: '#667EEA', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'gradient', + tableStyle: 'striped', + totalsPosition: 'right', + showDividers: false, + dividerStyle: 'none', + }, + typography: { titleSize: 28, titleWeight: 'bold', headerSize: 11, bodySize: 9, numberStyle: 'normal' }, + decorative: { cornerShape: 'none', sidebarWidth: 0, sidebarColor: '', useGradientHeader: true, gradientFrom: '#667EEA', gradientTo: '#764BA2', backgroundTint: false }, +} + +const sidebarAccent: InvoiceTemplateConfig = { + id: 'sidebar-accent', + name: 'Sidebar Accent', + category: 'creative', + description: 'Rose vertical bar with asymmetric layout', + colors: { + primary: '#E11D48', + secondary: '#FB7185', + background: '#FFFFFF', + headerBg: '#FFFFFF', + headerText: '#111827', + bodyText: '#374151', + tableHeaderBg: '#FFF1F2', + tableHeaderText: '#E11D48', + tableRowAlt: '#FFF1F2', + tableBorder: '#FECDD3', + totalHighlight: '#E11D48', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'sidebar', + tableStyle: 'borderless', + totalsPosition: 'right', + showDividers: true, + dividerStyle: 'thin', + }, + typography: { titleSize: 24, titleWeight: 'bold', headerSize: 11, bodySize: 9, numberStyle: 'normal' }, + decorative: { cornerShape: 'none', sidebarWidth: 4, sidebarColor: '#E11D48', useGradientHeader: false, backgroundTint: false }, +} + +const geometricModern: InvoiceTemplateConfig = { + id: 'geometric-modern', + name: 'Geometric Modern', + category: 'creative', + description: 'Violet triangle accent with diagonal elements', + colors: { + primary: '#8B5CF6', + secondary: '#C4B5FD', + background: '#FFFFFF', + headerBg: '#FFFFFF', + headerText: '#1F2937', + bodyText: '#374151', + tableHeaderBg: '#8B5CF6', + tableHeaderText: '#FFFFFF', + tableRowAlt: '#F5F3FF', + tableBorder: '#DDD6FE', + totalHighlight: '#8B5CF6', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'geometric', + tableStyle: 'striped', + totalsPosition: 'right', + showDividers: false, + dividerStyle: 'none', + }, + typography: { titleSize: 26, titleWeight: 'bold', headerSize: 11, bodySize: 9, numberStyle: 'normal' }, + decorative: { cornerShape: 'triangle', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: false }, +} + +const darkMode: InvoiceTemplateConfig = { + id: 'dark-mode', + name: 'Dark Mode', + category: 'creative', + description: 'Near-black background with cyan highlights', + colors: { + primary: '#06B6D4', + secondary: '#22D3EE', + background: '#1A1A2E', + headerBg: '#1A1A2E', + headerText: '#E2E8F0', + bodyText: '#CBD5E1', + tableHeaderBg: '#0F172A', + tableHeaderText: '#06B6D4', + tableRowAlt: '#16213E', + tableBorder: '#334155', + totalHighlight: '#06B6D4', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'minimal', + tableStyle: 'striped', + totalsPosition: 'right', + showDividers: true, + dividerStyle: 'thin', + }, + typography: { titleSize: 26, titleWeight: 'bold', headerSize: 11, bodySize: 9, numberStyle: 'monospace-feel' }, + decorative: { cornerShape: 'none', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: false }, +} + +const warmNatural: InvoiceTemplateConfig = { + id: 'warm-natural', + name: 'Warm Natural', + category: 'warm', + description: 'Earth tones on warm beige background', + colors: { + primary: '#C2703E', + secondary: '#6B7A3D', + background: '#FDF6EC', + headerBg: '#FDF6EC', + headerText: '#78350F', + bodyText: '#57534E', + tableHeaderBg: '#C2703E', + tableHeaderText: '#FFFFFF', + tableRowAlt: '#FEF3C7', + tableBorder: '#D6D3D1', + totalHighlight: '#C2703E', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'minimal', + tableStyle: 'striped', + totalsPosition: 'right', + showDividers: true, + dividerStyle: 'thin', + }, + typography: { titleSize: 26, titleWeight: 'bold', headerSize: 11, bodySize: 9, numberStyle: 'normal' }, + decorative: { cornerShape: 'none', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: true, backgroundTintColor: '#FDF6EC' }, +} + +const playfulColorBlock: InvoiceTemplateConfig = { + id: 'playful-color-block', + name: 'Playful Color Block', + category: 'warm', + description: 'Teal and coral blocks for a fun professional feel', + colors: { + primary: '#0D9488', + secondary: '#F97316', + background: '#FFFFFF', + headerBg: '#0D9488', + headerText: '#FFFFFF', + bodyText: '#1F2937', + tableHeaderBg: '#F97316', + tableHeaderText: '#FFFFFF', + tableRowAlt: '#FFF7ED', + tableBorder: '#FDBA74', + totalHighlight: '#0D9488', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'full-width', + tableStyle: 'colored-sections', + totalsPosition: 'right', + showDividers: false, + dividerStyle: 'none', + }, + typography: { titleSize: 28, titleWeight: 'bold', headerSize: 11, bodySize: 9, numberStyle: 'normal' }, + decorative: { cornerShape: 'colored-block', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: false }, +} + +const retroProfessional: InvoiceTemplateConfig = { + id: 'retro-professional', + name: 'Retro Professional', + category: 'warm', + description: 'Vintage double-rule lines with warm brown palette', + colors: { + primary: '#78350F', + secondary: '#92400E', + background: '#FFFBEB', + headerBg: '#FFFBEB', + headerText: '#78350F', + bodyText: '#57534E', + tableHeaderBg: '#78350F', + tableHeaderText: '#FFFFFF', + tableRowAlt: '#FEF3C7', + tableBorder: '#92400E', + totalHighlight: '#78350F', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'minimal', + tableStyle: 'bordered', + totalsPosition: 'right', + showDividers: true, + dividerStyle: 'double', + }, + typography: { titleSize: 24, titleWeight: 'bold', headerSize: 11, bodySize: 9, numberStyle: 'normal' }, + decorative: { cornerShape: 'none', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: true, backgroundTintColor: '#FFFBEB' }, +} + +const techMinimal: InvoiceTemplateConfig = { + id: 'tech-minimal', + name: 'Tech Minimal', + category: 'premium', + description: 'Slate and electric green with code-editor aesthetic', + colors: { + primary: '#475569', + secondary: '#22C55E', + background: '#FFFFFF', + headerBg: '#FFFFFF', + headerText: '#0F172A', + bodyText: '#475569', + tableHeaderBg: '#0F172A', + tableHeaderText: '#22C55E', + tableRowAlt: '#F8FAFC', + tableBorder: '#E2E8F0', + totalHighlight: '#22C55E', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'minimal', + tableStyle: 'minimal-lines', + totalsPosition: 'right', + showDividers: true, + dividerStyle: 'thin', + }, + typography: { titleSize: 22, titleWeight: 'bold', headerSize: 10, bodySize: 9, numberStyle: 'monospace-feel' }, + decorative: { cornerShape: 'none', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: false }, +} + +const executivePremium: InvoiceTemplateConfig = { + id: 'executive-premium', + name: 'Executive Premium', + category: 'premium', + description: 'Black and gold luxury with generous spacing', + colors: { + primary: '#111827', + secondary: '#D4AF37', + background: '#FFFFFF', + headerBg: '#111827', + headerText: '#D4AF37', + bodyText: '#374151', + tableHeaderBg: '#111827', + tableHeaderText: '#D4AF37', + tableRowAlt: '#F9FAFB', + tableBorder: '#D1D5DB', + totalHighlight: '#D4AF37', + }, + layout: { + logoPosition: 'top-left', + headerStyle: 'full-width', + tableStyle: 'minimal-lines', + totalsPosition: 'right', + showDividers: true, + dividerStyle: 'thin', + }, + typography: { titleSize: 28, titleWeight: 'normal', headerSize: 11, bodySize: 10, numberStyle: 'normal' }, + decorative: { cornerShape: 'none', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: false }, +} + +const dataDrivenClean: InvoiceTemplateConfig = { + id: 'data-driven-clean', + name: 'Data-Driven Clean', + category: 'premium', + description: 'Deep blue with emphasis on data hierarchy', + colors: { + primary: '#1E40AF', + secondary: '#3B82F6', + background: '#FFFFFF', + headerBg: '#1E40AF', + headerText: '#FFFFFF', + bodyText: '#1F2937', + tableHeaderBg: '#1E40AF', + tableHeaderText: '#FFFFFF', + tableRowAlt: '#EFF6FF', + tableBorder: '#BFDBFE', + totalHighlight: '#1E40AF', + }, + layout: { + logoPosition: 'top-right', + headerStyle: 'full-width', + tableStyle: 'striped', + totalsPosition: 'center', + showDividers: false, + dividerStyle: 'none', + }, + typography: { titleSize: 24, titleWeight: 'bold', headerSize: 12, bodySize: 10, numberStyle: 'monospace-feel' }, + decorative: { cornerShape: 'none', sidebarWidth: 0, sidebarColor: '', useGradientHeader: false, backgroundTint: false }, +} + +// --- Registry --- +export const INVOICE_TEMPLATES: InvoiceTemplateConfig[] = [ + cleanMinimal, + corporateClassic, + modernBold, + elegantSerif, + simpleTwoTone, + gradientHeader, + sidebarAccent, + geometricModern, + darkMode, + warmNatural, + playfulColorBlock, + retroProfessional, + techMinimal, + executivePremium, + dataDrivenClean, +] + +export const TEMPLATE_CATEGORIES = [ + { id: 'essential', label: 'Professional Essentials' }, + { id: 'creative', label: 'Creative & Modern' }, + { id: 'warm', label: 'Warm & Distinctive' }, + { id: 'premium', label: 'Premium & Specialized' }, +] as const + +export function getTemplateById(id: string): InvoiceTemplateConfig { + return INVOICE_TEMPLATES.find(t => t.id === id) || INVOICE_TEMPLATES[0] +} + +export function getTemplatesByCategory(category: string): InvoiceTemplateConfig[] { + return INVOICE_TEMPLATES.filter(t => t.category === category) +}