feat: add 15 invoice template configs and registry

This commit is contained in:
Your Name
2026-02-18 13:16:36 +02:00
parent a05e7555e8
commit 185b20cab2

View File

@@ -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)
}