Erweiterungen
This commit is contained in:
@@ -1,144 +1,468 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<html xmlns:th="http://www.thymeleaf.org" lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rechnung</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Rechnung ${invoiceData.invoiceNumber}</title>
|
||||
<style>
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 2cm 1.5cm 2cm 1.5cm;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.invoice-container {
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid #333;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.company-info {
|
||||
font-size: 14px;
|
||||
}
|
||||
.invoice-details {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
}
|
||||
.invoice-title {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-family: 'Arial', 'Helvetica', sans-serif;
|
||||
font-size: 11pt;
|
||||
line-height: 1.4;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: white;
|
||||
}
|
||||
.recipient-info {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.invoice-container {
|
||||
max-width: 21cm;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.header {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: 3em;
|
||||
border-bottom: 2px solid #2c5aa0;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: table-cell;
|
||||
width: 60%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: table-cell;
|
||||
width: 40%;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.company-logo {
|
||||
font-size: 24pt;
|
||||
font-weight: bold;
|
||||
color: #2c5aa0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.company-details {
|
||||
font-size: 9pt;
|
||||
color: #666;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.invoice-title {
|
||||
font-size: 18pt;
|
||||
font-weight: bold;
|
||||
color: #2c5aa0;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.invoice-meta {
|
||||
font-size: 10pt;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Recipient Section */
|
||||
.recipient-section {
|
||||
margin-bottom: 2.5em;
|
||||
}
|
||||
|
||||
.sender-short {
|
||||
font-size: 8pt;
|
||||
color: #666;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 2pt;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.recipient-address {
|
||||
font-size: 11pt;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.recipient-address .company {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Invoice Details */
|
||||
.invoice-details {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: 2em;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.invoice-details-left {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.invoice-details-right {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
/* Items Table */
|
||||
.items-section {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.items-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.items-table th, .items-table td {
|
||||
border: 1px solid #333;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
font-size: 10pt;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.items-table th {
|
||||
background-color: #f2f2f2;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 8pt;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #2c5aa0;
|
||||
}
|
||||
.totals {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.items-table td {
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 6pt 8pt;
|
||||
vertical-align: top;
|
||||
}
|
||||
.totals td {
|
||||
padding: 5px;
|
||||
|
||||
.items-table tbody tr:nth-child(even) {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.signature-section {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.signature-line {
|
||||
border-top: 1px solid #333;
|
||||
|
||||
.items-table .qty-col {
|
||||
width: 10%;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.items-table .desc-col {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.items-table .price-col {
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.items-table .total-col {
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Totals Section */
|
||||
.totals-section {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.totals-left {
|
||||
display: table-cell;
|
||||
width: 60%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.totals-right {
|
||||
display: table-cell;
|
||||
width: 40%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.totals-table {
|
||||
width: 100%;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.totals-table td {
|
||||
padding: 4pt 8pt;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.totals-table .label-col {
|
||||
text-align: right;
|
||||
width: 70%;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.totals-table .amount-col {
|
||||
text-align: right;
|
||||
width: 30%;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.totals-table .total-row .label-col,
|
||||
.totals-table .total-row .amount-col {
|
||||
background-color: #2c5aa0;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Payment Section */
|
||||
.payment-section {
|
||||
margin-bottom: 2em;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.payment-terms {
|
||||
background-color: #f8f9fa;
|
||||
padding: 1em;
|
||||
border-left: 4px solid #2c5aa0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.bank-details {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bank-details-left {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.bank-details-right {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Legal Footer */
|
||||
.legal-footer {
|
||||
border-top: 1px solid #dee2e6;
|
||||
padding-top: 1em;
|
||||
font-size: 8pt;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
body {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.invoice-container {
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
.items-table {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.totals-section {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="invoice-container">
|
||||
<div class="header">
|
||||
<div class="company-info">
|
||||
<h2>${invoiceData.senderName}</h2>
|
||||
<p>${invoiceData.senderAddress}</p>
|
||||
<p>${invoiceData.senderCity}</p>
|
||||
<p>Telefon: ${invoiceData.senderPhone}</p>
|
||||
<p>Web: ${invoiceData.senderWebsite}</p>
|
||||
<div class="invoice-container">
|
||||
<!-- Header Section -->
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<div class="company-logo">${invoiceData.senderName}</div>
|
||||
<div class="company-details">
|
||||
${invoiceData.senderAddress}<br>
|
||||
${invoiceData.senderPostcode} ${invoiceData.senderCity}<br>
|
||||
${invoiceData.senderCountry}<br>
|
||||
<br>
|
||||
Tel: ${invoiceData.senderPhone}<br>
|
||||
E-Mail: ${invoiceData.senderEmail}<br>
|
||||
Web: ${invoiceData.senderWebsite}<br>
|
||||
<br>
|
||||
Steuernr.: ${invoiceData.senderTaxNumber}<br>
|
||||
USt-IdNr.: ${invoiceData.senderVatId}
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="invoice-title">RECHNUNG</div>
|
||||
<div class="invoice-meta">
|
||||
<strong>Nr. ${invoiceData.invoiceNumber}</strong><br>
|
||||
vom ${invoiceData.invoiceDate}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recipient Section -->
|
||||
<div class="recipient-section">
|
||||
<div class="sender-short">
|
||||
${invoiceData.senderName} · ${invoiceData.senderAddress} · ${invoiceData.senderPostcode} ${invoiceData.senderCity}
|
||||
</div>
|
||||
<div class="recipient-address">
|
||||
<div class="company">${invoiceData.recipientCompany}</div>
|
||||
<div>${invoiceData.recipientName}</div>
|
||||
<div>${invoiceData.recipientAddress}</div>
|
||||
<div>${invoiceData.recipientPostcode} ${invoiceData.recipientCity}</div>
|
||||
<div>${invoiceData.recipientCountry}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Invoice Details -->
|
||||
<div class="invoice-details">
|
||||
<h3>Rechnung</h3>
|
||||
<p>Rechnungsnummer: <span th:text="${invoiceData.invoiceNumber}">INV-123456789</span></p>
|
||||
<p>Datum: <span th:text="${invoiceData.date}">2025-09-20</span></p>
|
||||
<div class="invoice-details-left">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Rechnungsdatum:</span>
|
||||
${invoiceData.invoiceDate}
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Leistungsdatum:</span>
|
||||
${invoiceData.deliveryDate}
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Kundennummer:</span>
|
||||
${invoiceData.recipientVatId}
|
||||
</div>
|
||||
</div>
|
||||
<div class="invoice-details-right">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Fälligkeitsdatum:</span>
|
||||
${invoiceData.paymentDueDate}
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Zahlungsziel:</span>
|
||||
14 Tage netto
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div class="mb-2">
|
||||
<strong>Leistungsbeschreibung:</strong><br>
|
||||
${invoiceData.description}
|
||||
</div>
|
||||
|
||||
<!-- Items Table -->
|
||||
<div class="items-section">
|
||||
<table class="items-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="qty-col">Menge</th>
|
||||
<th class="desc-col">Beschreibung</th>
|
||||
<th class="price-col">Einzelpreis<br>(netto)</th>
|
||||
<th class="total-col">Gesamtpreis<br>(netto)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- ITEM_ROWS -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Totals Section -->
|
||||
<div class="totals-section">
|
||||
<div class="totals-left">
|
||||
<!-- Space for additional notes if needed -->
|
||||
</div>
|
||||
<div class="totals-right">
|
||||
<table class="totals-table">
|
||||
<tr>
|
||||
<td class="label-col">Nettobetrag:</td>
|
||||
<td class="amount-col">${invoiceData.netAmount}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label-col">zzgl. ${invoiceData.vatRate} MwSt.:</td>
|
||||
<td class="amount-col">${invoiceData.vatAmount}</td>
|
||||
</tr>
|
||||
<tr class="total-row">
|
||||
<td class="label-col">Rechnungsbetrag:</td>
|
||||
<td class="amount-col">${invoiceData.totalAmount}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Payment Section -->
|
||||
<div class="payment-section">
|
||||
<div class="payment-terms">
|
||||
<strong>Zahlungsbedingungen:</strong><br>
|
||||
${invoiceData.paymentTerms}
|
||||
Fälligkeitsdatum: ${invoiceData.paymentDueDate}
|
||||
</div>
|
||||
|
||||
<div class="bank-details">
|
||||
<div class="bank-details-left">
|
||||
<strong>Bankverbindung:</strong><br>
|
||||
${invoiceData.bankAccount}<br>
|
||||
IBAN: ${invoiceData.iban}<br>
|
||||
BIC: ${invoiceData.bic}
|
||||
</div>
|
||||
<div class="bank-details-right">
|
||||
<strong>Verwendungszweck:</strong><br>
|
||||
Rechnung ${invoiceData.invoiceNumber}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legal Footer -->
|
||||
<div class="legal-footer">
|
||||
${invoiceData.legalNotes}<br>
|
||||
<br>
|
||||
Vielen Dank für Ihr Vertrauen!<br>
|
||||
Bei Fragen zu dieser Rechnung wenden Sie sich bitte an: ${invoiceData.senderEmail}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="invoice-title">Rechnung</h2>
|
||||
|
||||
<div class="recipient-info">
|
||||
<h3>Empfänger:</h3>
|
||||
<p><span th:text="${invoiceData.recipientName}">Kunde Name</span></p>
|
||||
<p><span th:text="${invoiceData.recipientDepartment}">Abt. XYZ</span></p>
|
||||
<p><span th:text="${invoiceData.recipientStreet}">Musterstraße 123</span></p>
|
||||
<p><span th:text="${invoiceData.recipientCity}">12345 Musterstadt</span></p>
|
||||
</div>
|
||||
|
||||
<table class="items-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Menge</th>
|
||||
<th>Beschreibung</th>
|
||||
<th>Einzelpreis</th>
|
||||
<th>Gesamt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:each="item : ${invoiceData.items}">
|
||||
<td th:text="${item.quantity}">1</td>
|
||||
<td th:text="${item.description}">Dienstleistung XYZ</td>
|
||||
<td th:text="${item.unitPrice}">100,00 €</td>
|
||||
<td th:text="${item.total}">100,00 €</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="totals">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Netto:</td>
|
||||
<td th:text="${invoiceData.netAmount}">200,00 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>USt (19%):</td>
|
||||
<td th:text="${invoiceData.vatAmount}">36,00 €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Gesamt:</strong></td>
|
||||
<td><strong th:text="${invoiceData.totalAmount}">236,00 €</strong></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="signature-section">
|
||||
<p>Für Assecutor GmbH</p>
|
||||
<div class="signature-line">
|
||||
<p>Unterschrift</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user