feat: rewrite invoice template configs with design-doc IDs and colors
This commit is contained in:
Your Name
@@ -12,515 +12,319 @@ export interface InvoiceTemplateColors {
|
|||||||
totalHighlight: 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 {
|
export interface InvoiceTemplateConfig {
|
||||||
id: string
|
id: string
|
||||||
name: string
|
name: string
|
||||||
category: 'essential' | 'creative' | 'warm' | 'premium'
|
category: 'essential' | 'creative' | 'warm' | 'premium'
|
||||||
description: string
|
description: string
|
||||||
colors: InvoiceTemplateColors
|
colors: InvoiceTemplateColors
|
||||||
layout: InvoiceTemplateLayout
|
|
||||||
typography: InvoiceTemplateTypography
|
|
||||||
decorative: InvoiceTemplateDecorative
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Template definitions ---
|
const clean: InvoiceTemplateConfig = {
|
||||||
// Define all 15 templates. Each has unique colors, layout, typography, decorative.
|
id: 'clean',
|
||||||
|
name: 'Clean',
|
||||||
const cleanMinimal: InvoiceTemplateConfig = {
|
|
||||||
id: 'clean-minimal',
|
|
||||||
name: 'Clean Minimal',
|
|
||||||
category: 'essential',
|
category: 'essential',
|
||||||
description: 'Swiss-inspired simplicity with a single accent line',
|
description: 'Swiss minimalism with a single blue accent',
|
||||||
colors: {
|
colors: {
|
||||||
primary: '#3B82F6',
|
primary: '#1e293b',
|
||||||
secondary: '#93C5FD',
|
secondary: '#3b82f6',
|
||||||
background: '#FFFFFF',
|
background: '#ffffff',
|
||||||
headerBg: '#FFFFFF',
|
headerBg: '#ffffff',
|
||||||
headerText: '#111827',
|
headerText: '#1e293b',
|
||||||
bodyText: '#374151',
|
bodyText: '#374151',
|
||||||
tableHeaderBg: '#F9FAFB',
|
tableHeaderBg: '#f8fafc',
|
||||||
tableHeaderText: '#374151',
|
tableHeaderText: '#374151',
|
||||||
tableRowAlt: '#F9FAFB',
|
tableRowAlt: '#f8fafc',
|
||||||
tableBorder: '#E5E7EB',
|
tableBorder: '#e5e7eb',
|
||||||
totalHighlight: '#3B82F6',
|
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 = {
|
const professional: InvoiceTemplateConfig = {
|
||||||
id: 'corporate-classic',
|
id: 'professional',
|
||||||
name: 'Corporate Classic',
|
name: 'Professional',
|
||||||
category: 'essential',
|
category: 'essential',
|
||||||
description: 'Navy header band with professional table layout',
|
description: 'Navy header band with corporate polish',
|
||||||
colors: {
|
colors: {
|
||||||
primary: '#1E3A5F',
|
primary: '#1e3a5f',
|
||||||
secondary: '#2563EB',
|
secondary: '#2563eb',
|
||||||
background: '#FFFFFF',
|
background: '#ffffff',
|
||||||
headerBg: '#1E3A5F',
|
headerBg: '#1e3a5f',
|
||||||
headerText: '#FFFFFF',
|
headerText: '#ffffff',
|
||||||
bodyText: '#374151',
|
bodyText: '#374151',
|
||||||
tableHeaderBg: '#1E3A5F',
|
tableHeaderBg: '#1e3a5f',
|
||||||
tableHeaderText: '#FFFFFF',
|
tableHeaderText: '#ffffff',
|
||||||
tableRowAlt: '#F3F4F6',
|
tableRowAlt: '#f3f4f6',
|
||||||
tableBorder: '#D1D5DB',
|
tableBorder: '#d1d5db',
|
||||||
totalHighlight: '#1E3A5F',
|
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 = {
|
const bold: InvoiceTemplateConfig = {
|
||||||
id: 'modern-bold',
|
id: 'bold',
|
||||||
name: 'Modern Bold',
|
name: 'Bold',
|
||||||
category: 'essential',
|
category: 'essential',
|
||||||
description: 'Large accent block with oversized typography',
|
description: 'Large indigo block with oversized typography',
|
||||||
colors: {
|
colors: {
|
||||||
primary: '#6366F1',
|
primary: '#4f46e5',
|
||||||
secondary: '#A5B4FC',
|
secondary: '#a5b4fc',
|
||||||
background: '#FFFFFF',
|
background: '#ffffff',
|
||||||
headerBg: '#6366F1',
|
headerBg: '#4f46e5',
|
||||||
headerText: '#FFFFFF',
|
headerText: '#ffffff',
|
||||||
bodyText: '#1F2937',
|
bodyText: '#1f2937',
|
||||||
tableHeaderBg: '#6366F1',
|
tableHeaderBg: '#4f46e5',
|
||||||
tableHeaderText: '#FFFFFF',
|
tableHeaderText: '#ffffff',
|
||||||
tableRowAlt: '#F5F3FF',
|
tableRowAlt: '#f5f3ff',
|
||||||
tableBorder: '#E0E7FF',
|
tableBorder: '#e0e7ff',
|
||||||
totalHighlight: '#6366F1',
|
totalHighlight: '#4f46e5',
|
||||||
},
|
},
|
||||||
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 = {
|
const minimal: InvoiceTemplateConfig = {
|
||||||
id: 'elegant-serif',
|
id: 'minimal',
|
||||||
name: 'Elegant Serif',
|
name: 'Minimal',
|
||||||
category: 'essential',
|
category: 'essential',
|
||||||
description: 'Refined charcoal and gold with centered layout',
|
description: 'Pure monochrome centered layout',
|
||||||
colors: {
|
colors: {
|
||||||
primary: '#374151',
|
primary: '#18181b',
|
||||||
secondary: '#B8860B',
|
secondary: '#18181b',
|
||||||
background: '#FFFFFF',
|
background: '#ffffff',
|
||||||
headerBg: '#FFFFFF',
|
headerBg: '#ffffff',
|
||||||
headerText: '#374151',
|
headerText: '#18181b',
|
||||||
bodyText: '#4B5563',
|
bodyText: '#3f3f46',
|
||||||
tableHeaderBg: '#374151',
|
tableHeaderBg: '#ffffff',
|
||||||
tableHeaderText: '#FFFFFF',
|
tableHeaderText: '#18181b',
|
||||||
tableRowAlt: '#FAFAFA',
|
tableRowAlt: '#ffffff',
|
||||||
tableBorder: '#D1D5DB',
|
tableBorder: '#e4e4e7',
|
||||||
totalHighlight: '#B8860B',
|
totalHighlight: '#18181b',
|
||||||
},
|
},
|
||||||
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 = {
|
const classic: InvoiceTemplateConfig = {
|
||||||
id: 'simple-two-tone',
|
id: 'classic',
|
||||||
name: 'Simple Two-Tone',
|
name: 'Classic',
|
||||||
category: 'essential',
|
category: 'essential',
|
||||||
description: 'Dark/light split header with emerald accents',
|
description: 'Traditional layout with burgundy accents',
|
||||||
colors: {
|
colors: {
|
||||||
primary: '#1F2937',
|
primary: '#7f1d1d',
|
||||||
secondary: '#10B981',
|
secondary: '#991b1b',
|
||||||
background: '#FFFFFF',
|
background: '#ffffff',
|
||||||
headerBg: '#1F2937',
|
headerBg: '#7f1d1d',
|
||||||
headerText: '#FFFFFF',
|
headerText: '#ffffff',
|
||||||
bodyText: '#374151',
|
bodyText: '#374151',
|
||||||
tableHeaderBg: '#F3F4F6',
|
tableHeaderBg: '#7f1d1d',
|
||||||
tableHeaderText: '#1F2937',
|
tableHeaderText: '#ffffff',
|
||||||
tableRowAlt: '#FFFFFF',
|
tableRowAlt: '#f5f5f4',
|
||||||
tableBorder: '#E5E7EB',
|
tableBorder: '#d6d3d1',
|
||||||
totalHighlight: '#10B981',
|
totalHighlight: '#7f1d1d',
|
||||||
},
|
},
|
||||||
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 = {
|
const modern: InvoiceTemplateConfig = {
|
||||||
id: 'gradient-header',
|
id: 'modern',
|
||||||
name: 'Gradient Header',
|
name: 'Modern',
|
||||||
category: 'creative',
|
category: 'creative',
|
||||||
description: 'Full-width gradient header with modern feel',
|
description: 'Asymmetric header with teal accents',
|
||||||
colors: {
|
colors: {
|
||||||
primary: '#667EEA',
|
primary: '#0d9488',
|
||||||
secondary: '#764BA2',
|
secondary: '#14b8a6',
|
||||||
background: '#FFFFFF',
|
background: '#ffffff',
|
||||||
headerBg: '#667EEA',
|
headerBg: '#ffffff',
|
||||||
headerText: '#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',
|
bodyText: '#374151',
|
||||||
tableHeaderBg: '#667EEA',
|
tableHeaderBg: '#faf5ff',
|
||||||
tableHeaderText: '#FFFFFF',
|
tableHeaderText: '#7c3aed',
|
||||||
tableRowAlt: '#F5F3FF',
|
tableRowAlt: '#faf5ff',
|
||||||
tableBorder: '#E0E7FF',
|
tableBorder: '#e9d5ff',
|
||||||
totalHighlight: '#667EEA',
|
totalHighlight: '#7c3aed',
|
||||||
},
|
},
|
||||||
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 = {
|
const compact: InvoiceTemplateConfig = {
|
||||||
id: 'sidebar-accent',
|
id: 'compact',
|
||||||
name: 'Sidebar Accent',
|
name: 'Compact',
|
||||||
category: 'creative',
|
category: 'creative',
|
||||||
description: 'Rose vertical bar with asymmetric layout',
|
description: 'Data-dense layout with tight spacing',
|
||||||
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: {
|
colors: {
|
||||||
primary: '#475569',
|
primary: '#475569',
|
||||||
secondary: '#22C55E',
|
secondary: '#64748b',
|
||||||
background: '#FFFFFF',
|
background: '#ffffff',
|
||||||
headerBg: '#FFFFFF',
|
headerBg: '#ffffff',
|
||||||
headerText: '#0F172A',
|
headerText: '#0f172a',
|
||||||
bodyText: '#475569',
|
bodyText: '#334155',
|
||||||
tableHeaderBg: '#0F172A',
|
tableHeaderBg: '#f1f5f9',
|
||||||
tableHeaderText: '#22C55E',
|
tableHeaderText: '#334155',
|
||||||
tableRowAlt: '#F8FAFC',
|
tableRowAlt: '#f8fafc',
|
||||||
tableBorder: '#E2E8F0',
|
tableBorder: '#e2e8f0',
|
||||||
totalHighlight: '#22C55E',
|
totalHighlight: '#475569',
|
||||||
},
|
},
|
||||||
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 = {
|
const dark: InvoiceTemplateConfig = {
|
||||||
id: 'executive-premium',
|
id: 'dark',
|
||||||
name: 'Executive Premium',
|
name: 'Dark',
|
||||||
category: 'premium',
|
category: 'warm',
|
||||||
description: 'Black and gold luxury with generous spacing',
|
description: 'Near-black background with cyan highlights',
|
||||||
colors: {
|
colors: {
|
||||||
primary: '#111827',
|
primary: '#06b6d4',
|
||||||
secondary: '#D4AF37',
|
secondary: '#22d3ee',
|
||||||
background: '#FFFFFF',
|
background: '#0f172a',
|
||||||
headerBg: '#111827',
|
headerBg: '#020617',
|
||||||
headerText: '#D4AF37',
|
headerText: '#e2e8f0',
|
||||||
bodyText: '#374151',
|
bodyText: '#cbd5e1',
|
||||||
tableHeaderBg: '#111827',
|
tableHeaderBg: '#020617',
|
||||||
tableHeaderText: '#D4AF37',
|
tableHeaderText: '#06b6d4',
|
||||||
tableRowAlt: '#F9FAFB',
|
tableRowAlt: '#1e293b',
|
||||||
tableBorder: '#D1D5DB',
|
tableBorder: '#334155',
|
||||||
totalHighlight: '#D4AF37',
|
totalHighlight: '#06b6d4',
|
||||||
},
|
},
|
||||||
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 = {
|
const vibrant: InvoiceTemplateConfig = {
|
||||||
id: 'data-driven-clean',
|
id: 'vibrant',
|
||||||
name: 'Data-Driven Clean',
|
name: 'Vibrant',
|
||||||
category: 'premium',
|
category: 'warm',
|
||||||
description: 'Deep blue with emphasis on data hierarchy',
|
description: 'Coral-to-orange gradient header band',
|
||||||
colors: {
|
colors: {
|
||||||
primary: '#1E40AF',
|
primary: '#ea580c',
|
||||||
secondary: '#3B82F6',
|
secondary: '#f97316',
|
||||||
background: '#FFFFFF',
|
background: '#ffffff',
|
||||||
headerBg: '#1E40AF',
|
headerBg: '#ea580c',
|
||||||
headerText: '#FFFFFF',
|
headerText: '#ffffff',
|
||||||
bodyText: '#1F2937',
|
bodyText: '#1f2937',
|
||||||
tableHeaderBg: '#1E40AF',
|
tableHeaderBg: '#fff7ed',
|
||||||
tableHeaderText: '#FFFFFF',
|
tableHeaderText: '#9a3412',
|
||||||
tableRowAlt: '#EFF6FF',
|
tableRowAlt: '#fff7ed',
|
||||||
tableBorder: '#BFDBFE',
|
tableBorder: '#fed7aa',
|
||||||
totalHighlight: '#1E40AF',
|
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',
|
||||||
},
|
},
|
||||||
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[] = [
|
export const INVOICE_TEMPLATES: InvoiceTemplateConfig[] = [
|
||||||
cleanMinimal,
|
clean, professional, bold, minimal, classic,
|
||||||
corporateClassic,
|
modern, elegant, creative, compact,
|
||||||
modernBold,
|
dark, vibrant, corporate,
|
||||||
elegantSerif,
|
fresh, natural, statement,
|
||||||
simpleTwoTone,
|
|
||||||
gradientHeader,
|
|
||||||
sidebarAccent,
|
|
||||||
geometricModern,
|
|
||||||
darkMode,
|
|
||||||
warmNatural,
|
|
||||||
playfulColorBlock,
|
|
||||||
retroProfessional,
|
|
||||||
techMinimal,
|
|
||||||
executivePremium,
|
|
||||||
dataDrivenClean,
|
|
||||||
]
|
]
|
||||||
|
|
||||||
export const TEMPLATE_CATEGORIES = [
|
export const TEMPLATE_CATEGORIES = [
|
||||||
|
|||||||
Reference in New Issue
Block a user