Change header from Faktura to Fakturaunderlag

This commit is contained in:
2026-03-23 20:08:29 +01:00
parent d6f3e19215
commit a279c653e0

View File

@@ -1,236 +1,241 @@
<!DOCTYPE html> <!doctype html>
<html lang="sv"> <html lang="sv">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Fakturaunderlag - Kund {{ customer.customer_number }}</title> <title>Fakturaunderlag - Kund {{ customer.customer_number }}</title>
<style> <style>
@page { @page {
size: A4; size: A4;
margin: 15mm; margin: 15mm;
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body {
font-family: Arial, sans-serif;
font-size: 12px;
margin: 0;
padding: 20px;
background: white;
}
@media print {
body { body {
padding: 0; font-family: Arial, sans-serif;
font-size: 12px;
margin: 0;
padding: 20px;
background: white;
}
@media print {
body {
padding: 0;
}
.card-section {
break-inside: avoid;
}
}
.header {
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 2px solid #333;
padding-bottom: 10px;
margin-bottom: 15px;
}
.header h1 {
margin: 0;
font-size: 20px;
}
.header .meta {
text-align: right;
font-size: 11px;
color: #666;
}
.summary {
background: #f5f5f5;
border: 1px solid #ccc;
padding: 12px;
margin-bottom: 15px;
}
.summary h2 {
margin: 0 0 10px 0;
font-size: 14px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
.summary-table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
}
.summary-table th,
.summary-table td {
padding: 5px 8px;
text-align: left;
}
.summary-table th {
background: #e0e0e0;
font-weight: bold;
}
.summary-table td:not(:first-child),
.summary-table th:not(:first-child) {
text-align: right;
}
.grand-total-row td {
font-weight: bold;
border-top: 2px solid #333;
background: #f0f0f0;
} }
.card-section { .card-section {
break-inside: avoid; margin-bottom: 15px;
border: 1px solid #ccc;
} }
} .card-header {
.header { background: #f0f0f0;
display: flex; padding: 8px 12px;
justify-content: space-between; font-weight: bold;
align-items: flex-end; border-bottom: 1px solid #ccc;
border-bottom: 2px solid #333; display: flex;
padding-bottom: 10px; justify-content: space-between;
margin-bottom: 15px; }
} .card-summary {
.header h1 { padding: 6px 12px;
margin: 0; font-size: 11px;
font-size: 20px; background: #fafafa;
} border-bottom: 1px solid #eee;
.header .meta { }
text-align: right; table {
font-size: 11px; width: 100%;
color: #666; border-collapse: collapse;
} font-size: 11px;
.summary { }
background: #f5f5f5; th,
border: 1px solid #ccc; td {
padding: 12px; padding: 6px 8px;
margin-bottom: 15px; text-align: left;
} }
.summary h2 { th {
margin: 0 0 10px 0; background: #f5f5f5;
font-size: 14px; font-weight: bold;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
padding-bottom: 5px; }
} .amount,
.summary-table { .volume,
width: 100%; .price {
border-collapse: collapse; text-align: right;
font-size: 11px; }
} .card-total {
.summary-table th, .summary-table td { font-weight: bold;
padding: 5px 8px; background: #f9f9f9;
text-align: left; }
} .card-total td {
.summary-table th { border-top: 1px solid #333;
background: #e0e0e0; }
font-weight: bold; .grand-total {
} background: #333;
.summary-table td:not(:first-child), color: white;
.summary-table th:not(:first-child) { padding: 12px 15px;
text-align: right; font-size: 14px;
} font-weight: bold;
.grand-total-row td { text-align: right;
font-weight: bold; margin-top: 15px;
border-top: 2px solid #333; }
background: #f0f0f0; .grand-total span {
} font-size: 18px;
.card-section { margin-left: 20px;
margin-bottom: 15px; }
border: 1px solid #ccc; </style>
} </head>
.card-header { <body>
background: #f0f0f0; <div class="header">
padding: 8px 12px; <div>
font-weight: bold; <h1>Fakturaunderlag - Kund {{ customer.customer_number }}</h1>
border-bottom: 1px solid #ccc; <div>Period: {{ period }}</div>
display: flex; </div>
justify-content: space-between; <div class="meta">
} <div>Genererad: {{ generated_date }}</div>
.card-summary { </div>
padding: 6px 12px;
font-size: 11px;
background: #fafafa;
border-bottom: 1px solid #eee;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
}
th, td {
padding: 6px 8px;
text-align: left;
}
th {
background: #f5f5f5;
font-weight: bold;
border-bottom: 1px solid #ccc;
}
.amount, .volume, .price {
text-align: right;
}
.card-total {
font-weight: bold;
background: #f9f9f9;
}
.card-total td {
border-top: 1px solid #333;
}
.grand-total {
background: #333;
color: white;
padding: 12px 15px;
font-size: 14px;
font-weight: bold;
text-align: right;
margin-top: 15px;
}
.grand-total span {
font-size: 18px;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="header">
<div>
<h1>Faktura - Kund {{ customer.customer_number }}</h1>
<div>Period: {{ period }}</div>
</div> </div>
<div class="meta">
<div>Genererad: {{ generated_date }}</div>
</div>
</div>
<div class="summary"> <div class="summary">
<h2>Sammanfattning</h2> <h2>Sammanfattning</h2>
<table class="summary-table"> <table class="summary-table">
<thead> <thead>
<tr> <tr>
<th>Produkt</th> <th>Produkt</th>
<th>Volym (L)</th> <th>Volym (L)</th>
<th>Snittpris/L</th> <th>Snittpris/L</th>
<th>Belopp</th> <th>Belopp</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for product in customer.summary.products %} {% for product in customer.summary.products %}
<tr> <tr>
<td>{{ product.name }}</td> <td>{{ product.name }}</td>
<td>{{ product.volume }}</td> <td>{{ product.volume }}</td>
<td>{{ product.avg_price }} Kr</td> <td>{{ product.avg_price }} Kr</td>
<td>{{ product.amount }} Kr</td> <td>{{ product.amount }} Kr</td>
</tr> </tr>
{% endfor %} {% endfor %}
<tr> <tr>
<td>Avrundningsfel</td> <td>Avrundningsfel</td>
<td></td> <td></td>
<td></td> <td></td>
<td>{{ customer.summary.avrundningsfel }} Kr</td> <td>{{ customer.summary.avrundningsfel }} Kr</td>
</tr> </tr>
<tr> <tr>
<td>Öresutjämning</td> <td>Öresutjämning</td>
<td></td> <td></td>
<td></td> <td></td>
<td>{{ customer.summary.oresutjamning }} Kr</td> <td>{{ customer.summary.oresutjamning }} Kr</td>
</tr> </tr>
<tr class="grand-total-row"> <tr class="grand-total-row">
<td>Totalt</td> <td>Totalt</td>
<td>{{ customer.summary.total_volume }}</td> <td>{{ customer.summary.total_volume }}</td>
<td></td> <td></td>
<td>{{ customer.summary.grand_total }} Kr</td> <td>{{ customer.summary.grand_total }} Kr</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
{% for card in customer.cards %}
<div class="card-section">
<div class="card-header">
<span>Kort: {{ card.card_number }}</span>
<span>{{ card.transactions.len() }} transaktioner</span>
</div> </div>
<div class="card-summary">
Summa: {{ card.total_amount }} Kr | Volym: {{ card.total_volume }} L
</div>
<table>
<thead>
<tr>
<th class="date">Datum</th>
<th>Produkt</th>
<th class="price">Pris/L</th>
<th class="volume">Volym (L)</th>
<th class="amount">Belopp</th>
<th>Kvitto</th>
</tr>
</thead>
<tbody>
{% for tx in card.transactions %}
<tr>
<td class="date">{{ tx.date }}</td>
<td>{{ tx.quality_name }}</td>
<td class="price">{{ tx.price }}</td>
<td class="volume">{{ tx.volume }}</td>
<td class="amount">{{ tx.amount }}</td>
<td>{{ tx.receipt }}</td>
</tr>
{% endfor %}
<tr class="card-total">
<td colspan="3">Kortsumma</td>
<td class="volume">{{ card.total_volume }}</td>
<td class="amount">{{ card.total_amount }}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
{% endfor %}
<div class="grand-total"> {% for card in customer.cards %}
Totalsumma:<span>{{ customer.summary.grand_total }} Kr</span> <div class="card-section">
</div> <div class="card-header">
</body> <span>Kort: {{ card.card_number }}</span>
<span>{{ card.transactions.len() }} transaktioner</span>
</div>
<div class="card-summary">
Summa: {{ card.total_amount }} Kr | Volym: {{ card.total_volume
}} L
</div>
<table>
<thead>
<tr>
<th class="date">Datum</th>
<th>Produkt</th>
<th class="price">Pris/L</th>
<th class="volume">Volym (L)</th>
<th class="amount">Belopp</th>
<th>Kvitto</th>
</tr>
</thead>
<tbody>
{% for tx in card.transactions %}
<tr>
<td class="date">{{ tx.date }}</td>
<td>{{ tx.quality_name }}</td>
<td class="price">{{ tx.price }}</td>
<td class="volume">{{ tx.volume }}</td>
<td class="amount">{{ tx.amount }}</td>
<td>{{ tx.receipt }}</td>
</tr>
{% endfor %}
<tr class="card-total">
<td colspan="3">Kortsumma</td>
<td class="volume">{{ card.total_volume }}</td>
<td class="amount">{{ card.total_amount }}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
{% endfor %}
<div class="grand-total">
Totalsumma:<span>{{ customer.summary.grand_total }} Kr</span>
</div>
</body>
</html> </html>