414 lines
12 KiB
HTML
414 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<style>
|
|
@page invoice {
|
|
size: A4;
|
|
margin: 12mm 12mm 12mm 12mm;
|
|
}
|
|
|
|
@page qrpage {
|
|
size: A4;
|
|
margin: 0;
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
page: invoice;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
font-size: 8.5pt;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #fff;
|
|
color: #000;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.invoice-page {
|
|
page: invoice;
|
|
width: 100%;
|
|
page-break-after: always;
|
|
}
|
|
|
|
/* Top Header Layout */
|
|
.header-layout {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
margin-bottom: 25mm;
|
|
}
|
|
|
|
.header-layout td {
|
|
vertical-align: top;
|
|
padding: 0;
|
|
}
|
|
|
|
.logo-block {
|
|
width: 33%;
|
|
font-size: 24pt;
|
|
font-weight: bold;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.logo-3d {
|
|
color: #111827; /* Dark black/blue */
|
|
}
|
|
|
|
.logo-fab {
|
|
color: #eab308; /* Yellow/Gold */
|
|
}
|
|
|
|
.seller-block {
|
|
width: 33%;
|
|
font-size: 9pt;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.website-block {
|
|
width: 33%;
|
|
text-align: right;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
/* Document Title */
|
|
.doc-title {
|
|
font-size: 20pt;
|
|
font-weight: normal;
|
|
margin: 0 0 10mm 0;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
/* Meta and Customer Details Layout */
|
|
.details-layout {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
margin-bottom: 15mm;
|
|
}
|
|
|
|
.details-layout td {
|
|
vertical-align: top;
|
|
padding: 0;
|
|
}
|
|
|
|
.meta-container {
|
|
width: 50%;
|
|
}
|
|
|
|
.customer-container {
|
|
width: 50%;
|
|
font-size: 10pt;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.meta-table {
|
|
border-collapse: collapse;
|
|
font-size: 8.5pt;
|
|
}
|
|
|
|
.meta-table td {
|
|
padding: 1.5mm 0;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.meta-label {
|
|
width: 45mm;
|
|
padding-right: 2mm;
|
|
}
|
|
|
|
.meta-value {
|
|
/* allow wrapping just in case */
|
|
}
|
|
|
|
/* Line Items Table */
|
|
.line-items {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
margin-top: 5mm;
|
|
font-size: 8.5pt;
|
|
}
|
|
|
|
.line-items th,
|
|
.line-items td {
|
|
padding: 1.5mm 0;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.line-items th {
|
|
text-align: left;
|
|
font-weight: normal;
|
|
border-bottom: 1pt solid #000;
|
|
}
|
|
|
|
.line-items tbody td {
|
|
border-bottom: 0.5pt solid #e0e0e0;
|
|
}
|
|
|
|
.line-items tbody tr:last-child td {
|
|
border-bottom: 1pt solid #000;
|
|
}
|
|
|
|
.line-items th.center,
|
|
.line-items td.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.line-items th.right,
|
|
.line-items td.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.col-desc { width: 45%; }
|
|
.col-qty { width: 10%; }
|
|
.col-price { width: 22%; }
|
|
.col-total { width: 23%; }
|
|
|
|
.item-desc {
|
|
padding-right: 4mm;
|
|
}
|
|
|
|
/* Totals Block */
|
|
.totals-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
margin-top: 0;
|
|
font-size: 8.5pt;
|
|
}
|
|
|
|
.totals-table td {
|
|
padding: 1.5mm 0;
|
|
border-bottom: 0.5pt solid #000;
|
|
}
|
|
|
|
.totals-label {
|
|
text-align: left;
|
|
}
|
|
|
|
.totals-value {
|
|
text-align: right;
|
|
width: 30%;
|
|
}
|
|
|
|
.totals-table tr.no-border td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.summary-notes {
|
|
margin-top: 4mm;
|
|
padding-bottom: 4mm;
|
|
border-bottom: 1pt solid #000;
|
|
}
|
|
|
|
/* Footer Notes Layout */
|
|
.footer-layout {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
margin-top: 15mm;
|
|
font-size: 8.5pt;
|
|
}
|
|
|
|
.footer-layout td {
|
|
vertical-align: top;
|
|
padding: 0 0 3mm 0;
|
|
}
|
|
|
|
.footer-label {
|
|
width: 25%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.footer-text {
|
|
width: 75%;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* QR Page */
|
|
.qr-only-page {
|
|
page: qrpage;
|
|
width: 100%;
|
|
height: 297mm;
|
|
background: #fff;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.qr-only-layout {
|
|
width: 100%;
|
|
height: 297mm;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.qr-only-layout td {
|
|
vertical-align: bottom;
|
|
/* Keep the QR slip at page bottom, but with a safer print margin. */
|
|
padding: 0 0 1mm 0;
|
|
}
|
|
|
|
.qr-bill-bottom {
|
|
width: 100%;
|
|
height: 105mm;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
}
|
|
|
|
.qr-bill-bottom svg {
|
|
width: 100% !important;
|
|
height: 105mm !important;
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="invoice-page">
|
|
|
|
<!-- Header -->
|
|
<table class="header-layout">
|
|
<tr>
|
|
<td class="logo-block">
|
|
<span class="logo-3d">3D</span> <span class="logo-fab">fab</span>
|
|
<div style="font-size: 14pt; font-weight: normal; margin-top: 4px; color: #111827;">Küng Caletti</div>
|
|
</td>
|
|
<td class="seller-block">
|
|
<div th:text="${sellerDisplayName}">3D Fab Switzerland</div>
|
|
<div th:text="${sellerAddressLine1}">Via G. pioda 29a - 6710 Biasca, Svizzera</div>
|
|
<div th:text="${sellerAddressLine2}">Lyss-Strasse 71 - 2560 Nidau, Svizzera</div>
|
|
</td>
|
|
<td class="website-block">
|
|
www.3d-fab.ch
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Document Title -->
|
|
<div class="doc-title">
|
|
<span th:if="${isConfirmation}">Conferma dell'ordine</span>
|
|
<span th:unless="${isConfirmation}">Fattura</span>
|
|
<span th:text="${invoiceNumber}">141052743</span>
|
|
<span th:unless="${isConfirmation}" style="color: #2e7d32; font-weight: bold; font-size: 18pt; padding-left: 15px;">PAGATO</span>
|
|
</div>
|
|
|
|
<!-- Details block (Meta and Customer) -->
|
|
<table class="details-layout">
|
|
<tr>
|
|
<td class="meta-container">
|
|
<table class="meta-table">
|
|
<tr>
|
|
<td class="meta-label">Data dell'ordine / fattura</td>
|
|
<td class="meta-value" th:text="${invoiceDate}">07.03.2025</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="meta-label">Numero documento</td>
|
|
<td class="meta-value" th:text="${invoiceNumber}">INV-2026-000123</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="meta-label">Data di scadenza</td>
|
|
<td class="meta-value" th:text="${dueDate}">07.03.2025</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="meta-label">Metodo di pagamento</td>
|
|
<td class="meta-value" th:text="${paymentMethodText}">QR / Bonifico oppure TWINT</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="meta-label">Valuta</td>
|
|
<td class="meta-value">CHF</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td class="customer-container">
|
|
<div style="font-weight: bold; margin-bottom: 2mm;">Indirizzo di fatturazione:</div>
|
|
<div th:text="${buyerDisplayName}">Joe Küng</div>
|
|
<div th:text="${buyerAddressLine1}">Via G.Pioda, 29a</div>
|
|
<div th:text="${buyerAddressLine2}">6710 biasca</div>
|
|
<div>Svizzera</div>
|
|
<br/>
|
|
<div th:if="${shippingDisplayName != null}">
|
|
<div style="font-weight: bold; margin-bottom: 2mm;">Indirizzo di spedizione:</div>
|
|
<div th:text="${shippingDisplayName}">Joe Küng</div>
|
|
<div th:text="${shippingAddressLine1}">Via G.Pioda, 29a</div>
|
|
<div th:text="${shippingAddressLine2}">6710 biasca</div>
|
|
<div>Svizzera</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Items Table -->
|
|
<table class="line-items">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-desc">Descrizione</th>
|
|
<th class="col-qty center">Quantità</th>
|
|
<th class="col-price right">Prezzo unitario</th>
|
|
<th class="col-total right">Prezzo incl.</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr th:each="lineItem : ${invoiceLineItems}">
|
|
<td class="item-desc" th:text="${lineItem.description}">Apple iPhone 16 Pro</td>
|
|
<td class="center" th:text="${lineItem.quantity}">1</td>
|
|
<td class="right" th:text="${lineItem.unitPriceFormatted}">968.55</td>
|
|
<td class="right" th:text="${lineItem.lineTotalFormatted}">1'047.00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Totals -->
|
|
<table class="totals-table">
|
|
<tr>
|
|
<td class="totals-label">Importo totale</td>
|
|
<td class="totals-value" th:text="${subtotalFormatted}">1'012.86</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="totals-label">Totale di tutte le consegne e di tutti i servizi CHF</td>
|
|
<td class="totals-value" th:text="${grandTotalFormatted}">1'094.90</td>
|
|
</tr>
|
|
<tr class="no-border" th:if="${isConfirmation}">
|
|
<td class="totals-label">Importo dovuto</td>
|
|
<td class="totals-value" th:text="${grandTotalFormatted}">1'094.90</td>
|
|
</tr>
|
|
<tr class="no-border" th:unless="${isConfirmation}">
|
|
<td class="totals-label">Importo dovuto</td>
|
|
<td class="totals-value">CHF 0.00</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Footer Notes -->
|
|
<table class="footer-layout">
|
|
<tr>
|
|
<td class="footer-label">Informazioni</td>
|
|
<td class="footer-text" th:text="${paymentTermsText}">
|
|
Appena riceviamo il pagamento l'ordine entra nella coda di stampa. Grazie per la fiducia.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="footer-label">Generale</td>
|
|
<td class="footer-text">
|
|
Si applicano le nostre condizioni generali di contratto. Verifica i dettagli dell'ordine al ricevimento. Per assistenza, rispondi alla nostra email di conferma.
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<!-- QR Bill Page (only renders if QR data is passed) -->
|
|
<div class="qr-only-page" th:if="${qrBillSvg != null}">
|
|
<table class="qr-only-layout">
|
|
<tr>
|
|
<td>
|
|
<div class="qr-bill-bottom" th:utext="${qrBillSvg}">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|