ADD: changed to rect router
This commit is contained in:
hwinkel
@@ -0,0 +1,395 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Document,
|
||||
Page,
|
||||
Text,
|
||||
View,
|
||||
StyleSheet,
|
||||
} from "@react-pdf/renderer";
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
fontFamily: "Helvetica",
|
||||
fontSize: 9,
|
||||
color: "#111827",
|
||||
paddingTop: 50,
|
||||
paddingBottom: 60,
|
||||
paddingLeft: 55,
|
||||
paddingRight: 55,
|
||||
},
|
||||
header: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: 30,
|
||||
},
|
||||
companyName: {
|
||||
fontSize: 16,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
color: "#1e1b4b",
|
||||
marginBottom: 3,
|
||||
},
|
||||
companyInfo: {
|
||||
fontSize: 8,
|
||||
color: "#6b7280",
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
invoiceTitle: {
|
||||
fontSize: 22,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
color: "#1e1b4b",
|
||||
marginBottom: 20,
|
||||
},
|
||||
metaGrid: {
|
||||
flexDirection: "row",
|
||||
gap: 0,
|
||||
marginBottom: 20,
|
||||
backgroundColor: "#f9fafb",
|
||||
padding: 10,
|
||||
borderRadius: 4,
|
||||
},
|
||||
metaItem: {
|
||||
flex: 1,
|
||||
},
|
||||
metaLabel: {
|
||||
fontSize: 7,
|
||||
color: "#9ca3af",
|
||||
textTransform: "uppercase",
|
||||
marginBottom: 2,
|
||||
},
|
||||
metaValue: {
|
||||
fontSize: 9,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
color: "#111827",
|
||||
},
|
||||
addressSection: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: 25,
|
||||
},
|
||||
addressBlock: {
|
||||
flex: 1,
|
||||
},
|
||||
addressLabel: {
|
||||
fontSize: 7,
|
||||
color: "#9ca3af",
|
||||
textTransform: "uppercase",
|
||||
marginBottom: 4,
|
||||
},
|
||||
addressName: {
|
||||
fontSize: 10,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
color: "#111827",
|
||||
marginBottom: 2,
|
||||
},
|
||||
addressLine: {
|
||||
fontSize: 8.5,
|
||||
color: "#374151",
|
||||
lineHeight: 1.4,
|
||||
},
|
||||
tableHeader: {
|
||||
flexDirection: "row",
|
||||
backgroundColor: "#1e1b4b",
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 8,
|
||||
borderRadius: 3,
|
||||
marginBottom: 0,
|
||||
},
|
||||
tableHeaderText: {
|
||||
color: "#ffffff",
|
||||
fontSize: 8,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
},
|
||||
tableRow: {
|
||||
flexDirection: "row",
|
||||
paddingVertical: 5,
|
||||
paddingHorizontal: 8,
|
||||
borderBottomColor: "#e5e7eb",
|
||||
borderBottomWidth: 0.5,
|
||||
},
|
||||
tableRowAlt: {
|
||||
backgroundColor: "#f9fafb",
|
||||
},
|
||||
col_pos: { width: "5%" },
|
||||
col_desc: { width: "40%" },
|
||||
col_qty: { width: "10%", textAlign: "right" },
|
||||
col_unit: { width: "8%", textAlign: "center" },
|
||||
col_price: { width: "14%", textAlign: "right" },
|
||||
col_tax: { width: "8%", textAlign: "center" },
|
||||
col_total: { width: "15%", textAlign: "right" },
|
||||
totalsSection: {
|
||||
marginTop: 15,
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-end",
|
||||
},
|
||||
totalsTable: {
|
||||
width: 220,
|
||||
},
|
||||
totalsRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
paddingVertical: 3,
|
||||
},
|
||||
totalsLabel: {
|
||||
fontSize: 9,
|
||||
color: "#6b7280",
|
||||
},
|
||||
totalsValue: {
|
||||
fontSize: 9,
|
||||
color: "#374151",
|
||||
},
|
||||
totalsFinalRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
paddingVertical: 4,
|
||||
borderTopColor: "#1e1b4b",
|
||||
borderTopWidth: 1.5,
|
||||
marginTop: 3,
|
||||
},
|
||||
totalsFinalLabel: {
|
||||
fontSize: 10,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
color: "#1e1b4b",
|
||||
},
|
||||
totalsFinalValue: {
|
||||
fontSize: 10,
|
||||
fontFamily: "Helvetica-Bold",
|
||||
color: "#1e1b4b",
|
||||
},
|
||||
notes: {
|
||||
marginTop: 20,
|
||||
padding: 10,
|
||||
backgroundColor: "#f9fafb",
|
||||
borderRadius: 4,
|
||||
},
|
||||
notesLabel: {
|
||||
fontSize: 7,
|
||||
color: "#9ca3af",
|
||||
textTransform: "uppercase",
|
||||
marginBottom: 3,
|
||||
},
|
||||
notesText: {
|
||||
fontSize: 8.5,
|
||||
color: "#374151",
|
||||
lineHeight: 1.5,
|
||||
},
|
||||
footer: {
|
||||
position: "absolute",
|
||||
bottom: 30,
|
||||
left: 55,
|
||||
right: 55,
|
||||
borderTopColor: "#e5e7eb",
|
||||
borderTopWidth: 0.5,
|
||||
paddingTop: 8,
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 7,
|
||||
color: "#9ca3af",
|
||||
},
|
||||
});
|
||||
|
||||
function formatMoney(amount: number) {
|
||||
return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(amount);
|
||||
}
|
||||
|
||||
function formatDate(date: Date | string) {
|
||||
return new Intl.DateTimeFormat("de-DE").format(new Date(date));
|
||||
}
|
||||
|
||||
interface InvoicePDFProps {
|
||||
invoice: {
|
||||
number: string;
|
||||
issueDate: Date | string;
|
||||
deliveryDate?: Date | string | null;
|
||||
dueDate: Date | string;
|
||||
notes?: string | null;
|
||||
netTotal: number | string | { toString(): string };
|
||||
taxTotal: number | string | { toString(): string };
|
||||
grossTotal: number | string | { toString(): string };
|
||||
company: {
|
||||
name: string;
|
||||
legalForm?: string | null;
|
||||
taxId?: string | null;
|
||||
vatId?: string | null;
|
||||
address: string;
|
||||
zip: string;
|
||||
city: string;
|
||||
email?: string | null;
|
||||
phone?: string | null;
|
||||
bankIban?: string | null;
|
||||
bankBic?: string | null;
|
||||
bankName?: string | null;
|
||||
};
|
||||
customer: {
|
||||
name: string;
|
||||
vatId?: string | null;
|
||||
address: string;
|
||||
zip: string;
|
||||
city: string;
|
||||
country: string;
|
||||
};
|
||||
items: Array<{
|
||||
position: number;
|
||||
description: string;
|
||||
quantity: number | string | { toString(): string };
|
||||
unit?: string | null;
|
||||
unitPrice: number | string | { toString(): string };
|
||||
taxRate: number | string | { toString(): string };
|
||||
netAmount: number | string | { toString(): string };
|
||||
taxAmount: number | string | { toString(): string };
|
||||
grossAmount: number | string | { toString(): string };
|
||||
}>;
|
||||
};
|
||||
}
|
||||
|
||||
export function InvoicePDFDocument({ invoice }: InvoicePDFProps) {
|
||||
const n = (v: unknown) => Number(v);
|
||||
|
||||
const taxGroups = invoice.items.reduce(
|
||||
(acc, item) => {
|
||||
const rate = n(item.taxRate);
|
||||
if (!acc[rate]) acc[rate] = { net: 0, tax: 0 };
|
||||
acc[rate].net += n(item.netAmount);
|
||||
acc[rate].tax += n(item.taxAmount);
|
||||
return acc;
|
||||
},
|
||||
{} as Record<number, { net: number; tax: number }>
|
||||
);
|
||||
|
||||
return (
|
||||
<Document>
|
||||
<Page size="A4" style={styles.page}>
|
||||
<View style={styles.header}>
|
||||
<View>
|
||||
<Text style={styles.companyName}>{invoice.company.name}</Text>
|
||||
{invoice.company.legalForm && (
|
||||
<Text style={styles.companyInfo}>{invoice.company.legalForm}</Text>
|
||||
)}
|
||||
<Text style={styles.companyInfo}>{invoice.company.address}</Text>
|
||||
<Text style={styles.companyInfo}>{invoice.company.zip} {invoice.company.city}</Text>
|
||||
{invoice.company.email && (
|
||||
<Text style={styles.companyInfo}>{invoice.company.email}</Text>
|
||||
)}
|
||||
{invoice.company.phone && (
|
||||
<Text style={styles.companyInfo}>{invoice.company.phone}</Text>
|
||||
)}
|
||||
</View>
|
||||
<View style={{ alignItems: "flex-end" }}>
|
||||
{invoice.company.taxId && (
|
||||
<Text style={styles.companyInfo}>St.-Nr.: {invoice.company.taxId}</Text>
|
||||
)}
|
||||
{invoice.company.vatId && (
|
||||
<Text style={styles.companyInfo}>USt-IdNr.: {invoice.company.vatId}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Text style={styles.invoiceTitle}>Rechnung</Text>
|
||||
|
||||
<View style={styles.addressSection}>
|
||||
<View style={styles.addressBlock}>
|
||||
<Text style={styles.addressLabel}>Rechnungsempfänger</Text>
|
||||
<Text style={styles.addressName}>{invoice.customer.name}</Text>
|
||||
<Text style={styles.addressLine}>{invoice.customer.address}</Text>
|
||||
<Text style={styles.addressLine}>{invoice.customer.zip} {invoice.customer.city}</Text>
|
||||
{invoice.customer.country !== "DE" && (
|
||||
<Text style={styles.addressLine}>{invoice.customer.country}</Text>
|
||||
)}
|
||||
{invoice.customer.vatId && (
|
||||
<Text style={{ ...styles.addressLine, marginTop: 3 }}>
|
||||
USt-IdNr.: {invoice.customer.vatId}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.metaGrid}>
|
||||
<View style={styles.metaItem}>
|
||||
<Text style={styles.metaLabel}>Rechnungsnummer</Text>
|
||||
<Text style={styles.metaValue}>{invoice.number}</Text>
|
||||
</View>
|
||||
<View style={styles.metaItem}>
|
||||
<Text style={styles.metaLabel}>Rechnungsdatum</Text>
|
||||
<Text style={styles.metaValue}>{formatDate(invoice.issueDate)}</Text>
|
||||
</View>
|
||||
{invoice.deliveryDate && (
|
||||
<View style={styles.metaItem}>
|
||||
<Text style={styles.metaLabel}>Leistungsdatum</Text>
|
||||
<Text style={styles.metaValue}>{formatDate(invoice.deliveryDate)}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.metaItem}>
|
||||
<Text style={styles.metaLabel}>Fällig am</Text>
|
||||
<Text style={styles.metaValue}>{formatDate(invoice.dueDate)}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.tableHeader}>
|
||||
<Text style={{ ...styles.tableHeaderText, ...styles.col_pos }}>#</Text>
|
||||
<Text style={{ ...styles.tableHeaderText, ...styles.col_desc }}>Beschreibung</Text>
|
||||
<Text style={{ ...styles.tableHeaderText, ...styles.col_qty }}>Menge</Text>
|
||||
<Text style={{ ...styles.tableHeaderText, ...styles.col_unit }}>Einh.</Text>
|
||||
<Text style={{ ...styles.tableHeaderText, ...styles.col_price }}>EP (netto)</Text>
|
||||
<Text style={{ ...styles.tableHeaderText, ...styles.col_tax }}>MwSt.</Text>
|
||||
<Text style={{ ...styles.tableHeaderText, ...styles.col_total }}>Gesamt (brutto)</Text>
|
||||
</View>
|
||||
|
||||
{invoice.items.map((item, idx) => (
|
||||
<View key={idx} style={[styles.tableRow, idx % 2 === 1 ? styles.tableRowAlt : {}]}>
|
||||
<Text style={{ ...styles.col_pos, fontSize: 9 }}>{item.position}</Text>
|
||||
<Text style={{ ...styles.col_desc, fontSize: 9 }}>{item.description}</Text>
|
||||
<Text style={{ ...styles.col_qty, fontSize: 9 }}>{n(item.quantity)}</Text>
|
||||
<Text style={{ ...styles.col_unit, fontSize: 9 }}>{item.unit ?? ""}</Text>
|
||||
<Text style={{ ...styles.col_price, fontSize: 9 }}>{formatMoney(n(item.unitPrice))}</Text>
|
||||
<Text style={{ ...styles.col_tax, fontSize: 9 }}>{n(item.taxRate)}%</Text>
|
||||
<Text style={{ ...styles.col_total, fontSize: 9, fontFamily: "Helvetica-Bold" }}>
|
||||
{formatMoney(n(item.grossAmount))}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
|
||||
<View style={styles.totalsSection}>
|
||||
<View style={styles.totalsTable}>
|
||||
<View style={styles.totalsRow}>
|
||||
<Text style={styles.totalsLabel}>Nettobetrag</Text>
|
||||
<Text style={styles.totalsValue}>{formatMoney(n(invoice.netTotal))}</Text>
|
||||
</View>
|
||||
{Object.entries(taxGroups).map(([rate, { net, tax }]) => (
|
||||
<View key={rate} style={styles.totalsRow}>
|
||||
<Text style={styles.totalsLabel}>MwSt. {rate}% auf {formatMoney(net)}</Text>
|
||||
<Text style={styles.totalsValue}>{formatMoney(tax)}</Text>
|
||||
</View>
|
||||
))}
|
||||
<View style={styles.totalsFinalRow}>
|
||||
<Text style={styles.totalsFinalLabel}>Gesamtbetrag (inkl. MwSt.)</Text>
|
||||
<Text style={styles.totalsFinalValue}>{formatMoney(n(invoice.grossTotal))}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{invoice.notes && (
|
||||
<View style={styles.notes}>
|
||||
<Text style={styles.notesLabel}>Hinweise</Text>
|
||||
<Text style={styles.notesText}>{invoice.notes}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View style={styles.footer} fixed>
|
||||
<Text style={styles.footerText}>
|
||||
{invoice.company.name}
|
||||
{invoice.company.taxId ? ` · St.-Nr.: ${invoice.company.taxId}` : ""}
|
||||
{invoice.company.vatId ? ` · USt-IdNr.: ${invoice.company.vatId}` : ""}
|
||||
</Text>
|
||||
{invoice.company.bankIban && (
|
||||
<Text style={styles.footerText}>
|
||||
{invoice.company.bankName ? `${invoice.company.bankName} · ` : ""}
|
||||
IBAN: {invoice.company.bankIban}
|
||||
{invoice.company.bankBic ? ` · BIC: ${invoice.company.bankBic}` : ""}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</Page>
|
||||
</Document>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user