540 lines
16 KiB
TypeScript
540 lines
16 KiB
TypeScript
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)
|
|
}
|