344 lines
8.2 KiB
TypeScript
344 lines
8.2 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 InvoiceTemplateConfig {
|
|
id: string
|
|
name: string
|
|
category: 'essential' | 'creative' | 'warm' | 'premium'
|
|
description: string
|
|
colors: InvoiceTemplateColors
|
|
}
|
|
|
|
const clean: InvoiceTemplateConfig = {
|
|
id: 'clean',
|
|
name: 'Clean',
|
|
category: 'essential',
|
|
description: 'Swiss minimalism with a single blue accent',
|
|
colors: {
|
|
primary: '#1e293b',
|
|
secondary: '#3b82f6',
|
|
background: '#ffffff',
|
|
headerBg: '#ffffff',
|
|
headerText: '#1e293b',
|
|
bodyText: '#374151',
|
|
tableHeaderBg: '#f8fafc',
|
|
tableHeaderText: '#374151',
|
|
tableRowAlt: '#f8fafc',
|
|
tableBorder: '#e5e7eb',
|
|
totalHighlight: '#3b82f6',
|
|
},
|
|
}
|
|
|
|
const professional: InvoiceTemplateConfig = {
|
|
id: 'professional',
|
|
name: 'Professional',
|
|
category: 'essential',
|
|
description: 'Navy header band with corporate polish',
|
|
colors: {
|
|
primary: '#1e3a5f',
|
|
secondary: '#2563eb',
|
|
background: '#ffffff',
|
|
headerBg: '#1e3a5f',
|
|
headerText: '#ffffff',
|
|
bodyText: '#374151',
|
|
tableHeaderBg: '#1e3a5f',
|
|
tableHeaderText: '#ffffff',
|
|
tableRowAlt: '#f3f4f6',
|
|
tableBorder: '#d1d5db',
|
|
totalHighlight: '#1e3a5f',
|
|
},
|
|
}
|
|
|
|
const bold: InvoiceTemplateConfig = {
|
|
id: 'bold',
|
|
name: 'Bold',
|
|
category: 'essential',
|
|
description: 'Large indigo block with oversized typography',
|
|
colors: {
|
|
primary: '#4f46e5',
|
|
secondary: '#a5b4fc',
|
|
background: '#ffffff',
|
|
headerBg: '#4f46e5',
|
|
headerText: '#ffffff',
|
|
bodyText: '#1f2937',
|
|
tableHeaderBg: '#4f46e5',
|
|
tableHeaderText: '#ffffff',
|
|
tableRowAlt: '#f5f3ff',
|
|
tableBorder: '#e0e7ff',
|
|
totalHighlight: '#4f46e5',
|
|
},
|
|
}
|
|
|
|
const minimal: InvoiceTemplateConfig = {
|
|
id: 'minimal',
|
|
name: 'Minimal',
|
|
category: 'essential',
|
|
description: 'Pure monochrome centered layout',
|
|
colors: {
|
|
primary: '#18181b',
|
|
secondary: '#18181b',
|
|
background: '#ffffff',
|
|
headerBg: '#ffffff',
|
|
headerText: '#18181b',
|
|
bodyText: '#3f3f46',
|
|
tableHeaderBg: '#ffffff',
|
|
tableHeaderText: '#18181b',
|
|
tableRowAlt: '#ffffff',
|
|
tableBorder: '#e4e4e7',
|
|
totalHighlight: '#18181b',
|
|
},
|
|
}
|
|
|
|
const classic: InvoiceTemplateConfig = {
|
|
id: 'classic',
|
|
name: 'Classic',
|
|
category: 'essential',
|
|
description: 'Traditional layout with burgundy accents',
|
|
colors: {
|
|
primary: '#7f1d1d',
|
|
secondary: '#991b1b',
|
|
background: '#ffffff',
|
|
headerBg: '#7f1d1d',
|
|
headerText: '#ffffff',
|
|
bodyText: '#374151',
|
|
tableHeaderBg: '#7f1d1d',
|
|
tableHeaderText: '#ffffff',
|
|
tableRowAlt: '#f5f5f4',
|
|
tableBorder: '#d6d3d1',
|
|
totalHighlight: '#7f1d1d',
|
|
},
|
|
}
|
|
|
|
const modern: InvoiceTemplateConfig = {
|
|
id: 'modern',
|
|
name: 'Modern',
|
|
category: 'creative',
|
|
description: 'Asymmetric header with teal accents',
|
|
colors: {
|
|
primary: '#0d9488',
|
|
secondary: '#14b8a6',
|
|
background: '#ffffff',
|
|
headerBg: '#ffffff',
|
|
headerText: '#0f172a',
|
|
bodyText: '#334155',
|
|
tableHeaderBg: '#ffffff',
|
|
tableHeaderText: '#0d9488',
|
|
tableRowAlt: '#f0fdfa',
|
|
tableBorder: '#99f6e4',
|
|
totalHighlight: '#0d9488',
|
|
},
|
|
}
|
|
|
|
const elegant: InvoiceTemplateConfig = {
|
|
id: 'elegant',
|
|
name: 'Elegant',
|
|
category: 'creative',
|
|
description: 'Gold double-rule accents on centered layout',
|
|
colors: {
|
|
primary: '#a16207',
|
|
secondary: '#ca8a04',
|
|
background: '#ffffff',
|
|
headerBg: '#ffffff',
|
|
headerText: '#422006',
|
|
bodyText: '#57534e',
|
|
tableHeaderBg: '#ffffff',
|
|
tableHeaderText: '#422006',
|
|
tableRowAlt: '#fefce8',
|
|
tableBorder: '#a16207',
|
|
totalHighlight: '#a16207',
|
|
},
|
|
}
|
|
|
|
const creative: InvoiceTemplateConfig = {
|
|
id: 'creative',
|
|
name: 'Creative',
|
|
category: 'creative',
|
|
description: 'Purple sidebar with card-style rows',
|
|
colors: {
|
|
primary: '#7c3aed',
|
|
secondary: '#a78bfa',
|
|
background: '#ffffff',
|
|
headerBg: '#ffffff',
|
|
headerText: '#1f2937',
|
|
bodyText: '#374151',
|
|
tableHeaderBg: '#faf5ff',
|
|
tableHeaderText: '#7c3aed',
|
|
tableRowAlt: '#faf5ff',
|
|
tableBorder: '#e9d5ff',
|
|
totalHighlight: '#7c3aed',
|
|
},
|
|
}
|
|
|
|
const compact: InvoiceTemplateConfig = {
|
|
id: 'compact',
|
|
name: 'Compact',
|
|
category: 'creative',
|
|
description: 'Data-dense layout with tight spacing',
|
|
colors: {
|
|
primary: '#475569',
|
|
secondary: '#64748b',
|
|
background: '#ffffff',
|
|
headerBg: '#ffffff',
|
|
headerText: '#0f172a',
|
|
bodyText: '#334155',
|
|
tableHeaderBg: '#f1f5f9',
|
|
tableHeaderText: '#334155',
|
|
tableRowAlt: '#f8fafc',
|
|
tableBorder: '#e2e8f0',
|
|
totalHighlight: '#475569',
|
|
},
|
|
}
|
|
|
|
const dark: InvoiceTemplateConfig = {
|
|
id: 'dark',
|
|
name: 'Dark',
|
|
category: 'warm',
|
|
description: 'Near-black background with cyan highlights',
|
|
colors: {
|
|
primary: '#06b6d4',
|
|
secondary: '#22d3ee',
|
|
background: '#0f172a',
|
|
headerBg: '#020617',
|
|
headerText: '#e2e8f0',
|
|
bodyText: '#cbd5e1',
|
|
tableHeaderBg: '#020617',
|
|
tableHeaderText: '#06b6d4',
|
|
tableRowAlt: '#1e293b',
|
|
tableBorder: '#334155',
|
|
totalHighlight: '#06b6d4',
|
|
},
|
|
}
|
|
|
|
const vibrant: InvoiceTemplateConfig = {
|
|
id: 'vibrant',
|
|
name: 'Vibrant',
|
|
category: 'warm',
|
|
description: 'Coral-to-orange gradient header band',
|
|
colors: {
|
|
primary: '#ea580c',
|
|
secondary: '#f97316',
|
|
background: '#ffffff',
|
|
headerBg: '#ea580c',
|
|
headerText: '#ffffff',
|
|
bodyText: '#1f2937',
|
|
tableHeaderBg: '#fff7ed',
|
|
tableHeaderText: '#9a3412',
|
|
tableRowAlt: '#fff7ed',
|
|
tableBorder: '#fed7aa',
|
|
totalHighlight: '#ea580c',
|
|
},
|
|
}
|
|
|
|
const corporate: InvoiceTemplateConfig = {
|
|
id: 'corporate',
|
|
name: 'Corporate',
|
|
category: 'warm',
|
|
description: 'Deep blue header with info bar below',
|
|
colors: {
|
|
primary: '#1e40af',
|
|
secondary: '#3b82f6',
|
|
background: '#ffffff',
|
|
headerBg: '#1e40af',
|
|
headerText: '#ffffff',
|
|
bodyText: '#1f2937',
|
|
tableHeaderBg: '#1e40af',
|
|
tableHeaderText: '#ffffff',
|
|
tableRowAlt: '#eff6ff',
|
|
tableBorder: '#bfdbfe',
|
|
totalHighlight: '#1e40af',
|
|
},
|
|
}
|
|
|
|
const fresh: InvoiceTemplateConfig = {
|
|
id: 'fresh',
|
|
name: 'Fresh',
|
|
category: 'premium',
|
|
description: 'Oversized watermark invoice number',
|
|
colors: {
|
|
primary: '#0284c7',
|
|
secondary: '#38bdf8',
|
|
background: '#ffffff',
|
|
headerBg: '#ffffff',
|
|
headerText: '#0c4a6e',
|
|
bodyText: '#334155',
|
|
tableHeaderBg: '#0284c7',
|
|
tableHeaderText: '#ffffff',
|
|
tableRowAlt: '#f0f9ff',
|
|
tableBorder: '#bae6fd',
|
|
totalHighlight: '#0284c7',
|
|
},
|
|
}
|
|
|
|
const natural: InvoiceTemplateConfig = {
|
|
id: 'natural',
|
|
name: 'Natural',
|
|
category: 'premium',
|
|
description: 'Warm beige background with terracotta accents',
|
|
colors: {
|
|
primary: '#c2703e',
|
|
secondary: '#d97706',
|
|
background: '#fdf6ec',
|
|
headerBg: '#fdf6ec',
|
|
headerText: '#78350f',
|
|
bodyText: '#57534e',
|
|
tableHeaderBg: '#c2703e',
|
|
tableHeaderText: '#ffffff',
|
|
tableRowAlt: '#fef3c7',
|
|
tableBorder: '#d6d3d1',
|
|
totalHighlight: '#c2703e',
|
|
},
|
|
}
|
|
|
|
const statement: InvoiceTemplateConfig = {
|
|
id: 'statement',
|
|
name: 'Statement',
|
|
category: 'premium',
|
|
description: 'Total-forward design with hero amount',
|
|
colors: {
|
|
primary: '#18181b',
|
|
secondary: '#be123c',
|
|
background: '#ffffff',
|
|
headerBg: '#ffffff',
|
|
headerText: '#18181b',
|
|
bodyText: '#3f3f46',
|
|
tableHeaderBg: '#ffffff',
|
|
tableHeaderText: '#18181b',
|
|
tableRowAlt: '#ffffff',
|
|
tableBorder: '#e4e4e7',
|
|
totalHighlight: '#be123c',
|
|
},
|
|
}
|
|
|
|
export const INVOICE_TEMPLATES: InvoiceTemplateConfig[] = [
|
|
clean, professional, bold, minimal, classic,
|
|
modern, elegant, creative, compact,
|
|
dark, vibrant, corporate,
|
|
fresh, natural, statement,
|
|
]
|
|
|
|
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)
|
|
}
|