feat: add InvoicePreview.vue with all 7 header styles and 5 table styles
This commit is contained in:
Your Name
723
src/components/InvoicePreview.vue
Normal file
723
src/components/InvoicePreview.vue
Normal file
@@ -0,0 +1,723 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { InvoiceTemplateConfig } from '../utils/invoiceTemplates'
|
||||
import type { Invoice } from '../stores/invoices'
|
||||
import type { Client } from '../stores/clients'
|
||||
import type { InvoiceItem } from '../utils/invoicePdf'
|
||||
import type { BusinessInfo } from '../utils/invoicePdfRenderer'
|
||||
import { formatCurrency, formatDate } from '../utils/locale'
|
||||
|
||||
const props = defineProps<{
|
||||
template: InvoiceTemplateConfig
|
||||
invoice: Invoice
|
||||
client: Client | null
|
||||
items: InvoiceItem[]
|
||||
businessInfo?: BusinessInfo
|
||||
}>()
|
||||
|
||||
const sampleItems: InvoiceItem[] = [
|
||||
{ description: 'Web Design & Development', quantity: 40, rate: 150, amount: 6000 },
|
||||
{ description: 'UI/UX Consultation', quantity: 8, rate: 200, amount: 1600 },
|
||||
{ description: 'Project Management', quantity: 12, rate: 100, amount: 1200 },
|
||||
]
|
||||
|
||||
const displayItems = computed(() =>
|
||||
props.items.length > 0 ? props.items : sampleItems,
|
||||
)
|
||||
|
||||
const config = computed(() => props.template)
|
||||
|
||||
const clientName = computed(() => props.client?.name || 'N/A')
|
||||
const clientEmail = computed(() => props.client?.email || '')
|
||||
const clientAddressLines = computed(() =>
|
||||
props.client?.address ? props.client.address.split('\n') : [],
|
||||
)
|
||||
|
||||
const biz = computed(() => props.businessInfo)
|
||||
const bizAddressLines = computed(() =>
|
||||
biz.value?.address ? biz.value.address.split('\n') : [],
|
||||
)
|
||||
|
||||
const numberFont = computed(() =>
|
||||
config.value.typography.numberStyle === 'monospace-feel'
|
||||
? "'Courier New', Courier, monospace"
|
||||
: 'inherit',
|
||||
)
|
||||
|
||||
const sideOffset = computed(() =>
|
||||
config.value.layout.headerStyle === 'sidebar'
|
||||
? `${config.value.decorative.sidebarWidth + 6}%`
|
||||
: '0px',
|
||||
)
|
||||
|
||||
// Divider style helper
|
||||
const dividerBorder = computed(() => {
|
||||
if (!config.value.layout.showDividers || config.value.layout.dividerStyle === 'none') return 'none'
|
||||
switch (config.value.layout.dividerStyle) {
|
||||
case 'thin': return `1px solid ${config.value.colors.tableBorder}`
|
||||
case 'double': return `3px double ${config.value.colors.tableBorder}`
|
||||
case 'thick': return `2px solid ${config.value.colors.primary}`
|
||||
default: return 'none'
|
||||
}
|
||||
})
|
||||
|
||||
const showDivider = computed(() =>
|
||||
config.value.layout.showDividers && config.value.layout.dividerStyle !== 'none',
|
||||
)
|
||||
|
||||
// Logo position style
|
||||
const logoContainerStyle = computed(() => {
|
||||
const pos = config.value.layout.logoPosition
|
||||
const base: Record<string, string> = { marginBottom: '2%' }
|
||||
if (pos === 'top-center') base.textAlign = 'center'
|
||||
else if (pos === 'top-right') base.textAlign = 'right'
|
||||
else base.textAlign = 'left'
|
||||
return base
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Outer A4 container -->
|
||||
<div
|
||||
:style="{
|
||||
backgroundColor: config.colors.background,
|
||||
color: config.colors.bodyText,
|
||||
fontFamily: '\'Helvetica Neue\', Helvetica, Arial, sans-serif',
|
||||
position: 'relative',
|
||||
aspectRatio: '8.5 / 11',
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
borderRadius: '4px',
|
||||
boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)',
|
||||
}"
|
||||
>
|
||||
<!-- Background tint -->
|
||||
<div
|
||||
v-if="config.decorative.backgroundTint && config.decorative.backgroundTintColor"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
inset: '0',
|
||||
backgroundColor: config.decorative.backgroundTintColor,
|
||||
pointerEvents: 'none',
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- Decorative: Sidebar -->
|
||||
<div
|
||||
v-if="config.decorative.sidebarWidth > 0"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
bottom: '0',
|
||||
width: config.decorative.sidebarWidth + '%',
|
||||
backgroundColor: config.decorative.sidebarColor,
|
||||
pointerEvents: 'none',
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- Decorative: Corner block -->
|
||||
<div
|
||||
v-if="config.decorative.cornerShape === 'colored-block'"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
width: '28%',
|
||||
height: '20%',
|
||||
backgroundColor: config.colors.primary,
|
||||
pointerEvents: 'none',
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- Decorative: Triangle (SVG in top-right) -->
|
||||
<svg
|
||||
v-if="config.decorative.cornerShape === 'triangle'"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
right: '0',
|
||||
width: '28%',
|
||||
height: '28%',
|
||||
pointerEvents: 'none',
|
||||
}"
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<polygon points="100,0 100,100 0,0" :fill="config.colors.primary" />
|
||||
</svg>
|
||||
|
||||
<!-- Decorative: Diagonal -->
|
||||
<svg
|
||||
v-if="config.decorative.cornerShape === 'diagonal'"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: '0',
|
||||
left: '0',
|
||||
width: '100%',
|
||||
height: '20%',
|
||||
pointerEvents: 'none',
|
||||
}"
|
||||
viewBox="0 0 210 60"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<polygon points="0,0 210,0 0,60" :fill="config.colors.primary" />
|
||||
</svg>
|
||||
|
||||
<!-- Content area with padding -->
|
||||
<div
|
||||
:style="{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
padding: '5%',
|
||||
fontSize: config.typography.bodySize * 0.85 + 'px',
|
||||
lineHeight: '1.4',
|
||||
height: '100%',
|
||||
boxSizing: 'border-box',
|
||||
overflow: 'hidden',
|
||||
}"
|
||||
>
|
||||
<!-- ===== HEADER: MINIMAL ===== -->
|
||||
<template v-if="config.layout.headerStyle === 'minimal'">
|
||||
<!-- Logo -->
|
||||
<div v-if="biz?.logo" :style="logoContainerStyle">
|
||||
<img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
|
||||
</div>
|
||||
|
||||
<!-- Business info -->
|
||||
<div v-if="biz?.name" :style="{ marginBottom: '2%' }">
|
||||
<div :style="{ fontWeight: 'bold', fontSize: config.typography.headerSize * 0.85 + 'px', color: config.colors.headerText }">
|
||||
{{ biz.name }}
|
||||
</div>
|
||||
<div v-for="(line, i) in bizAddressLines" :key="'ba' + i" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ line }}</div>
|
||||
<div v-if="biz.email" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.email }}</div>
|
||||
<div v-if="biz.phone" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.phone }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div :style="{
|
||||
fontWeight: config.typography.titleWeight,
|
||||
fontSize: config.typography.titleSize * 0.85 + 'px',
|
||||
color: config.colors.primary,
|
||||
marginBottom: '1%',
|
||||
}">
|
||||
INVOICE
|
||||
</div>
|
||||
|
||||
<!-- Accent line -->
|
||||
<div :style="{ width: '15%', height: '2px', backgroundColor: config.colors.primary, marginBottom: '3%' }" />
|
||||
|
||||
<!-- Details + Bill To -->
|
||||
<div :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '3%' }">
|
||||
<div>
|
||||
<div>Invoice #: {{ invoice.invoice_number }}</div>
|
||||
<div>Date: {{ formatDate(invoice.date) }}</div>
|
||||
<div v-if="invoice.due_date">Due Date: {{ formatDate(invoice.due_date) }}</div>
|
||||
<div>Status: {{ invoice.status }}</div>
|
||||
</div>
|
||||
<div :style="{ textAlign: 'right' }">
|
||||
<div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
|
||||
<div>{{ clientName }}</div>
|
||||
<div v-if="clientEmail">{{ clientEmail }}</div>
|
||||
<div v-for="(line, i) in clientAddressLines" :key="'ca' + i">{{ line }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div v-if="showDivider" :style="{ borderBottom: dividerBorder, marginBottom: '3%' }" />
|
||||
</template>
|
||||
|
||||
<!-- ===== HEADER: FULL-WIDTH ===== -->
|
||||
<template v-if="config.layout.headerStyle === 'full-width'">
|
||||
<!-- Full-width banner (negative margins to fill) -->
|
||||
<div :style="{
|
||||
margin: '-5% -5% 0 -5%',
|
||||
padding: '4% 5%',
|
||||
backgroundColor: config.colors.headerBg,
|
||||
color: config.colors.headerText,
|
||||
marginBottom: '3%',
|
||||
}">
|
||||
<!-- Logo inside banner -->
|
||||
<div v-if="biz?.logo" :style="logoContainerStyle">
|
||||
<img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
|
||||
</div>
|
||||
|
||||
<div :style="{ display: 'flex', justifyContent: 'space-between' }">
|
||||
<div>
|
||||
<div :style="{
|
||||
fontWeight: config.typography.titleWeight,
|
||||
fontSize: config.typography.titleSize * 0.85 + 'px',
|
||||
marginBottom: '2%',
|
||||
}">
|
||||
INVOICE
|
||||
</div>
|
||||
<div :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">
|
||||
<div>#{{ invoice.invoice_number }}</div>
|
||||
<div>Date: {{ formatDate(invoice.date) }}</div>
|
||||
<div v-if="invoice.due_date">Due: {{ formatDate(invoice.due_date) }}</div>
|
||||
<div>Status: {{ invoice.status }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="biz?.name && config.layout.logoPosition !== 'top-right'" :style="{ textAlign: 'right', fontSize: config.typography.bodySize * 0.8 + 'px' }">
|
||||
<div :style="{ fontWeight: 'bold', fontSize: config.typography.bodySize * 0.9 + 'px' }">{{ biz.name }}</div>
|
||||
<div v-if="biz.email">{{ biz.email }}</div>
|
||||
<div v-if="biz.phone">{{ biz.phone }}</div>
|
||||
<div v-for="(line, i) in bizAddressLines" :key="'fba' + i">{{ line }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bill To below banner -->
|
||||
<div :style="{ marginBottom: '3%' }">
|
||||
<div :style="{ fontWeight: 'bold', marginBottom: '2px', color: config.colors.bodyText }">Bill To:</div>
|
||||
<div :style="{ color: config.colors.bodyText }">
|
||||
<div>{{ clientName }}</div>
|
||||
<div v-if="clientEmail">{{ clientEmail }}</div>
|
||||
<div v-for="(line, i) in clientAddressLines" :key="'fca' + i">{{ line }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ===== HEADER: SPLIT ===== -->
|
||||
<template v-if="config.layout.headerStyle === 'split'">
|
||||
<div :style="{
|
||||
display: 'flex',
|
||||
margin: '-5% -5% 0 -5%',
|
||||
marginBottom: '3%',
|
||||
}">
|
||||
<!-- Left half: colored -->
|
||||
<div :style="{
|
||||
width: '50%',
|
||||
backgroundColor: config.colors.headerBg,
|
||||
color: config.colors.headerText,
|
||||
padding: '4% 5%',
|
||||
}">
|
||||
<div :style="{
|
||||
fontWeight: config.typography.titleWeight,
|
||||
fontSize: config.typography.titleSize * 0.85 + 'px',
|
||||
marginBottom: '3%',
|
||||
}">
|
||||
INVOICE
|
||||
</div>
|
||||
<div :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">
|
||||
<div v-if="biz?.name" :style="{ fontWeight: 'bold' }">{{ biz.name }}</div>
|
||||
<div v-if="biz?.email">{{ biz.email }}</div>
|
||||
<div v-if="biz?.phone">{{ biz.phone }}</div>
|
||||
<div v-for="(line, i) in bizAddressLines" :key="'sba' + i">{{ line }}</div>
|
||||
</div>
|
||||
<!-- Logo in left half -->
|
||||
<div v-if="biz?.logo" :style="{ marginTop: '3%' }">
|
||||
<img :src="biz.logo" :style="{ maxHeight: '14%', maxWidth: '40%', objectFit: 'contain' }" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right half: light -->
|
||||
<div :style="{
|
||||
width: '50%',
|
||||
padding: '4% 5%',
|
||||
color: config.colors.bodyText,
|
||||
}">
|
||||
<div :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">
|
||||
<div>Invoice #: {{ invoice.invoice_number }}</div>
|
||||
<div>Date: {{ formatDate(invoice.date) }}</div>
|
||||
<div v-if="invoice.due_date">Due Date: {{ formatDate(invoice.due_date) }}</div>
|
||||
<div>Status: {{ invoice.status }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bill To below split -->
|
||||
<div :style="{ marginBottom: '3%' }">
|
||||
<div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
|
||||
<div>{{ clientName }}</div>
|
||||
<div v-if="clientEmail">{{ clientEmail }}</div>
|
||||
<div v-for="(line, i) in clientAddressLines" :key="'sca' + i">{{ line }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ===== HEADER: SIDEBAR ===== -->
|
||||
<template v-if="config.layout.headerStyle === 'sidebar'">
|
||||
<div :style="{ paddingLeft: sideOffset }">
|
||||
<!-- Logo -->
|
||||
<div v-if="biz?.logo" :style="logoContainerStyle">
|
||||
<img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
|
||||
</div>
|
||||
|
||||
<!-- Business info -->
|
||||
<div v-if="biz?.name" :style="{ marginBottom: '2%' }">
|
||||
<div :style="{ fontWeight: 'bold', fontSize: config.typography.headerSize * 0.85 + 'px', color: config.colors.headerText }">
|
||||
{{ biz.name }}
|
||||
</div>
|
||||
<div v-for="(line, i) in bizAddressLines" :key="'sbba' + i" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ line }}</div>
|
||||
<div v-if="biz?.email" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.email }}</div>
|
||||
<div v-if="biz?.phone" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.phone }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div :style="{
|
||||
fontWeight: config.typography.titleWeight,
|
||||
fontSize: config.typography.titleSize * 0.85 + 'px',
|
||||
color: config.colors.primary,
|
||||
marginBottom: '1%',
|
||||
}">
|
||||
INVOICE
|
||||
</div>
|
||||
|
||||
<!-- Details + Bill To -->
|
||||
<div :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '3%' }">
|
||||
<div>
|
||||
<div>Invoice #: {{ invoice.invoice_number }}</div>
|
||||
<div>Date: {{ formatDate(invoice.date) }}</div>
|
||||
<div v-if="invoice.due_date">Due Date: {{ formatDate(invoice.due_date) }}</div>
|
||||
<div>Status: {{ invoice.status }}</div>
|
||||
</div>
|
||||
<div :style="{ textAlign: 'right' }">
|
||||
<div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
|
||||
<div>{{ clientName }}</div>
|
||||
<div v-if="clientEmail">{{ clientEmail }}</div>
|
||||
<div v-for="(line, i) in clientAddressLines" :key="'sbca' + i">{{ line }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div v-if="showDivider" :style="{ borderBottom: dividerBorder, marginBottom: '3%' }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ===== HEADER: GRADIENT ===== -->
|
||||
<template v-if="config.layout.headerStyle === 'gradient'">
|
||||
<div :style="{
|
||||
margin: '-5% -5% 0 -5%',
|
||||
padding: '4% 5%',
|
||||
background: `linear-gradient(to right, ${config.decorative.gradientFrom || config.colors.headerBg}, ${config.decorative.gradientTo || config.colors.primary})`,
|
||||
color: config.colors.headerText,
|
||||
marginBottom: '3%',
|
||||
}">
|
||||
<!-- Logo inside gradient -->
|
||||
<div v-if="biz?.logo" :style="logoContainerStyle">
|
||||
<img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
|
||||
</div>
|
||||
|
||||
<div :style="{ display: 'flex', justifyContent: 'space-between' }">
|
||||
<div>
|
||||
<div :style="{
|
||||
fontWeight: config.typography.titleWeight,
|
||||
fontSize: config.typography.titleSize * 0.85 + 'px',
|
||||
marginBottom: '2%',
|
||||
}">
|
||||
INVOICE
|
||||
</div>
|
||||
<div :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">
|
||||
<div>#{{ invoice.invoice_number }}</div>
|
||||
<div>Date: {{ formatDate(invoice.date) }}</div>
|
||||
<div v-if="invoice.due_date">Due: {{ formatDate(invoice.due_date) }}</div>
|
||||
<div>Status: {{ invoice.status }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="biz?.name && config.layout.logoPosition !== 'top-right'" :style="{ textAlign: 'right', fontSize: config.typography.bodySize * 0.8 + 'px' }">
|
||||
<div :style="{ fontWeight: 'bold', fontSize: config.typography.bodySize * 0.9 + 'px' }">{{ biz.name }}</div>
|
||||
<div v-if="biz.email">{{ biz.email }}</div>
|
||||
<div v-if="biz.phone">{{ biz.phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bill To below gradient -->
|
||||
<div :style="{ marginBottom: '3%', color: config.colors.bodyText }">
|
||||
<div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
|
||||
<div>{{ clientName }}</div>
|
||||
<div v-if="clientEmail">{{ clientEmail }}</div>
|
||||
<div v-for="(line, i) in clientAddressLines" :key="'gca' + i">{{ line }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ===== HEADER: GEOMETRIC ===== -->
|
||||
<template v-if="config.layout.headerStyle === 'geometric'">
|
||||
<!-- Logo (top-left to avoid triangle) -->
|
||||
<div v-if="biz?.logo" :style="logoContainerStyle">
|
||||
<img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
|
||||
</div>
|
||||
|
||||
<!-- Business info -->
|
||||
<div v-if="biz?.name" :style="{ marginBottom: '2%', maxWidth: '60%' }">
|
||||
<div :style="{ fontWeight: 'bold', fontSize: config.typography.headerSize * 0.85 + 'px', color: config.colors.headerText }">
|
||||
{{ biz.name }}
|
||||
</div>
|
||||
<div v-if="biz.email" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.email }}</div>
|
||||
<div v-if="biz.phone" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.phone }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div :style="{
|
||||
fontWeight: config.typography.titleWeight,
|
||||
fontSize: config.typography.titleSize * 0.85 + 'px',
|
||||
color: config.colors.primary,
|
||||
marginBottom: '1%',
|
||||
}">
|
||||
INVOICE
|
||||
</div>
|
||||
|
||||
<!-- Details + Bill To -->
|
||||
<div :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '3%' }">
|
||||
<div>
|
||||
<div>Invoice #: {{ invoice.invoice_number }}</div>
|
||||
<div>Date: {{ formatDate(invoice.date) }}</div>
|
||||
<div v-if="invoice.due_date">Due Date: {{ formatDate(invoice.due_date) }}</div>
|
||||
<div>Status: {{ invoice.status }}</div>
|
||||
</div>
|
||||
<div :style="{ textAlign: 'right' }">
|
||||
<div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
|
||||
<div>{{ clientName }}</div>
|
||||
<div v-if="clientEmail">{{ clientEmail }}</div>
|
||||
<div v-for="(line, i) in clientAddressLines" :key="'geca' + i">{{ line }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div v-if="showDivider" :style="{ borderBottom: dividerBorder, marginBottom: '3%' }" />
|
||||
</template>
|
||||
|
||||
<!-- ===== HEADER: CENTERED ===== -->
|
||||
<template v-if="config.layout.headerStyle === 'centered'">
|
||||
<!-- Logo centered -->
|
||||
<div v-if="biz?.logo" :style="{ textAlign: 'center', marginBottom: '2%' }">
|
||||
<img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
|
||||
</div>
|
||||
|
||||
<!-- Top divider line -->
|
||||
<div :style="{ borderBottom: '1px solid ' + config.colors.tableBorder, marginBottom: '2%' }" />
|
||||
|
||||
<!-- Title centered -->
|
||||
<div :style="{
|
||||
textAlign: 'center',
|
||||
fontWeight: config.typography.titleWeight,
|
||||
fontSize: config.typography.titleSize * 0.85 + 'px',
|
||||
color: config.colors.primary,
|
||||
marginBottom: '1%',
|
||||
}">
|
||||
INVOICE
|
||||
</div>
|
||||
|
||||
<!-- Business name centered -->
|
||||
<div v-if="biz?.name" :style="{ textAlign: 'center', marginBottom: '2%' }">
|
||||
<div :style="{ fontSize: config.typography.headerSize * 0.85 + 'px', color: config.colors.headerText }">
|
||||
{{ biz.name }}
|
||||
</div>
|
||||
<div v-for="(line, i) in bizAddressLines" :key="'cba' + i" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ line }}</div>
|
||||
<div v-if="biz.email" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.email }}</div>
|
||||
<div v-if="biz.phone" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.phone }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom divider line -->
|
||||
<div :style="{ borderBottom: '1px solid ' + config.colors.tableBorder, marginBottom: '2%' }" />
|
||||
|
||||
<!-- Details + Bill To side by side -->
|
||||
<div :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '3%' }">
|
||||
<div>
|
||||
<div>Invoice #: {{ invoice.invoice_number }}</div>
|
||||
<div>Date: {{ formatDate(invoice.date) }}</div>
|
||||
<div v-if="invoice.due_date">Due Date: {{ formatDate(invoice.due_date) }}</div>
|
||||
<div>Status: {{ invoice.status }}</div>
|
||||
</div>
|
||||
<div :style="{ textAlign: 'right' }">
|
||||
<div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
|
||||
<div>{{ clientName }}</div>
|
||||
<div v-if="clientEmail">{{ clientEmail }}</div>
|
||||
<div v-for="(line, i) in clientAddressLines" :key="'cca' + i">{{ line }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div v-if="showDivider" :style="{ borderBottom: dividerBorder, marginBottom: '3%' }" />
|
||||
</template>
|
||||
|
||||
<!-- ===== TABLE ===== -->
|
||||
<div :style="{ paddingLeft: config.layout.headerStyle === 'sidebar' ? sideOffset : '0' }">
|
||||
<table
|
||||
:style="{
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse',
|
||||
fontSize: config.typography.bodySize * 0.85 + 'px',
|
||||
marginBottom: '4%',
|
||||
}"
|
||||
>
|
||||
<thead>
|
||||
<tr
|
||||
:style="{
|
||||
backgroundColor: config.colors.tableHeaderBg,
|
||||
color: config.colors.tableHeaderText,
|
||||
}"
|
||||
>
|
||||
<th
|
||||
:style="{
|
||||
textAlign: 'left',
|
||||
padding: '1.5% 2%',
|
||||
fontWeight: 'bold',
|
||||
width: '50%',
|
||||
...(config.layout.tableStyle === 'bordered'
|
||||
? { border: '1px solid ' + config.colors.tableBorder }
|
||||
: {}),
|
||||
}"
|
||||
>
|
||||
Description
|
||||
</th>
|
||||
<th
|
||||
:style="{
|
||||
textAlign: 'left',
|
||||
padding: '1.5% 2%',
|
||||
fontWeight: 'bold',
|
||||
width: '15%',
|
||||
fontFamily: numberFont,
|
||||
...(config.layout.tableStyle === 'bordered'
|
||||
? { border: '1px solid ' + config.colors.tableBorder }
|
||||
: {}),
|
||||
}"
|
||||
>
|
||||
Qty
|
||||
</th>
|
||||
<th
|
||||
:style="{
|
||||
textAlign: 'left',
|
||||
padding: '1.5% 2%',
|
||||
fontWeight: 'bold',
|
||||
width: '17.5%',
|
||||
fontFamily: numberFont,
|
||||
...(config.layout.tableStyle === 'bordered'
|
||||
? { border: '1px solid ' + config.colors.tableBorder }
|
||||
: {}),
|
||||
}"
|
||||
>
|
||||
Rate
|
||||
</th>
|
||||
<th
|
||||
:style="{
|
||||
textAlign: 'left',
|
||||
padding: '1.5% 2%',
|
||||
fontWeight: 'bold',
|
||||
width: '17.5%',
|
||||
fontFamily: numberFont,
|
||||
...(config.layout.tableStyle === 'bordered'
|
||||
? { border: '1px solid ' + config.colors.tableBorder }
|
||||
: {}),
|
||||
}"
|
||||
>
|
||||
Amount
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(item, idx) in displayItems"
|
||||
:key="idx"
|
||||
:style="{
|
||||
backgroundColor:
|
||||
config.layout.tableStyle === 'striped' && idx % 2 === 1
|
||||
? config.colors.tableRowAlt
|
||||
: config.layout.tableStyle === 'colored-sections'
|
||||
? idx % 2 === 1 ? config.colors.tableRowAlt : config.colors.background
|
||||
: 'transparent',
|
||||
borderBottom:
|
||||
config.layout.tableStyle === 'minimal-lines'
|
||||
? '1px solid ' + config.colors.tableBorder
|
||||
: 'none',
|
||||
}"
|
||||
>
|
||||
<td
|
||||
:style="{
|
||||
padding: '1.5% 2%',
|
||||
...(config.layout.tableStyle === 'bordered'
|
||||
? { border: '1px solid ' + config.colors.tableBorder }
|
||||
: {}),
|
||||
}"
|
||||
>
|
||||
{{ item.description }}
|
||||
</td>
|
||||
<td
|
||||
:style="{
|
||||
padding: '1.5% 2%',
|
||||
fontFamily: numberFont,
|
||||
...(config.layout.tableStyle === 'bordered'
|
||||
? { border: '1px solid ' + config.colors.tableBorder }
|
||||
: {}),
|
||||
}"
|
||||
>
|
||||
{{ item.quantity }}
|
||||
</td>
|
||||
<td
|
||||
:style="{
|
||||
padding: '1.5% 2%',
|
||||
fontFamily: numberFont,
|
||||
...(config.layout.tableStyle === 'bordered'
|
||||
? { border: '1px solid ' + config.colors.tableBorder }
|
||||
: {}),
|
||||
}"
|
||||
>
|
||||
{{ formatCurrency(item.rate) }}
|
||||
</td>
|
||||
<td
|
||||
:style="{
|
||||
padding: '1.5% 2%',
|
||||
fontFamily: numberFont,
|
||||
...(config.layout.tableStyle === 'bordered'
|
||||
? { border: '1px solid ' + config.colors.tableBorder }
|
||||
: {}),
|
||||
}"
|
||||
>
|
||||
{{ formatCurrency(item.amount) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- ===== TOTALS ===== -->
|
||||
<div
|
||||
:style="{
|
||||
display: 'flex',
|
||||
justifyContent: config.layout.totalsPosition === 'center' ? 'center' : 'flex-end',
|
||||
marginBottom: '4%',
|
||||
}"
|
||||
>
|
||||
<div :style="{ width: '40%', fontSize: config.typography.bodySize * 0.9 + 'px' }">
|
||||
<!-- Subtotal -->
|
||||
<div :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '1%' }">
|
||||
<span>Subtotal:</span>
|
||||
<span :style="{ fontFamily: numberFont }">{{ formatCurrency(invoice.subtotal) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Tax -->
|
||||
<div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '1%' }">
|
||||
<span>Tax ({{ invoice.tax_rate }}%):</span>
|
||||
<span :style="{ fontFamily: numberFont }">{{ formatCurrency(invoice.tax_amount) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Discount -->
|
||||
<div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '1%' }">
|
||||
<span>Discount:</span>
|
||||
<span :style="{ fontFamily: numberFont }">-{{ formatCurrency(invoice.discount) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Separator -->
|
||||
<div :style="{ borderBottom: '1px solid ' + config.colors.tableBorder, margin: '2% 0' }" />
|
||||
|
||||
<!-- Total -->
|
||||
<div :style="{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
fontWeight: 'bold',
|
||||
fontSize: config.typography.bodySize * 1.1 + 'px',
|
||||
color: config.colors.totalHighlight,
|
||||
}">
|
||||
<span>Total:</span>
|
||||
<span :style="{ fontFamily: numberFont }">{{ formatCurrency(invoice.total) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== NOTES ===== -->
|
||||
<div v-if="invoice.notes" :style="{ borderTop: '1px solid ' + config.colors.tableBorder, paddingTop: '2%' }">
|
||||
<div :style="{ fontWeight: 'bold', marginBottom: '1%' }">Notes:</div>
|
||||
<div :style="{ fontSize: config.typography.bodySize * 0.8 + 'px', whiteSpace: 'pre-wrap' }">{{ invoice.notes }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user