boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

feat: invoice PDF redesign — professional table-based layout

Browse Source 
- Header with red accent border, larger invoice number
- Address blocks in connected table grid with equal heights
- Customer and bank info highlighted with gray background
- Bank info uses same row layout as dates (aligned labels/values)
- Labels nowrap, values right-aligned
- Item font size 8pt, table header border gray
- Removed duplicate separator lines

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-04-02 11:56:05 +02:00
parent 7b6365f6b3
commit ce184771a6
1 changed files with 107 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
src/routes/admin/invoices-pdf.ts
View File

@@ -515,76 +515,31 @@ export default async function invoicesPdfRoutes(
.accent { color: #de3a3a; } .accent { color: #de3a3a; }
/* Hlavicka */ /* ── Hlavicka ── */
.invoice-header { .invoice-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: center;
margin-bottom: 0; margin-bottom: 3mm;
padding-bottom: 1mm; padding-bottom: 3mm;
border-bottom: 2pt solid #de3a3a;
} }
.invoice-header .left { .invoice-header .left {
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 3mm; gap: 3mm;
} }
.logo-header { .logo-header { text-align: left; }
text-align: left;
}
.company-title { .company-title {
font-size: 12pt; font-size: 12pt;
font-weight: 700; font-weight: 700;
margin-top: 2mm;
} }
.invoice-title { .invoice-title {
font-size: 10pt; font-size: 13pt;
font-weight: 700; font-weight: 700;
color: #de3a3a; color: #de3a3a;
text-align: right; text-align: right;
margin-top: 2mm; letter-spacing: 0.03em;
}
/* Adresy - dva sloupce, stejna vyska */
.addresses-row {
display: flex;
gap: 8mm;
align-items: stretch;
margin-bottom: 0;
}
.addresses-row .address-block {
flex: 1;
padding-bottom: 2mm;
border-bottom: 0.5pt solid #e0e0e0;
}
/* Detaily pod adresami */
.details-row {
display: flex;
gap: 8mm;
margin-bottom: 3mm;
}
.details-row .col { flex: 1; }
/* Adresy - styl z nabidek */
.address-block {
margin-bottom: 0;
}
.address-label {
font-size: 8pt;
font-weight: 600;
color: #646464;
line-height: 1.5;
}
.address-name {
font-size: 9pt;
font-weight: 700;
color: #1a1a1a;
line-height: 1.5;
}
.address-line {
font-size: 8.5pt;
color: #1a1a1a;
line-height: 1.5;
} }
.logo { .logo {
@@ -593,46 +548,68 @@ export default async function invoicesPdfRoutes(
object-fit: contain; object-fit: contain;
} }
/* Separator */ /* ── Adresy ── */
.header-separator { .header-grid {
border: none; border: 0.5pt solid #d0d0d0;
border-top: 0.5pt solid #e0e0e0; border-collapse: collapse;
margin: 2mm 0 3mm 0; width: 100%;
margin-bottom: 3mm;
} }
.header-grid td {
/* Banka */ padding: 3mm 4mm;
.bank-box { border: 0.5pt solid #d0d0d0;
font-size: 8pt; vertical-align: top;
line-height: 1.4; width: 50%;
padding-top: 2mm;
} }
.bank-box .lbl { .header-grid td.addr-customer {
font-weight: 600; background: #f5f5f5;
}
.header-grid td.details-bank {
background: #f5f5f5;
}
.address-label {
font-size: 7pt;
font-weight: 700;
color: #de3a3a;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1mm;
}
.address-name {
font-size: 10pt;
font-weight: 700;
color: #1a1a1a; color: #1a1a1a;
display: inline-block; line-height: 1.3;
min-width: 16mm; margin-bottom: 1mm;
}
.address-line {
font-size: 8pt;
color: #444;
line-height: 1.5;
} }
/* Datumy */ /* ── Detaily (banka + datumy) — inside header-grid ── */
.dates-box {
font-size: 8pt; .info-row {
line-height: 1.4;
padding-top: 2mm;
}
.dates-row {
display: flex; display: flex;
align-items: center; align-items: baseline;
margin-bottom: 0.5mm; font-size: 8pt;
padding: 1mm 0;
border-bottom: 0.5pt solid #f0f0f0;
} }
.dates-row .lbl { .info-row:last-child { border-bottom: none; }
flex: 1; .info-row .lbl {
color: #1a1a1a; color: #666;
font-weight: 400;
flex-shrink: 0;
white-space: nowrap;
margin-right: 3mm;
} }
.dates-row .val { .info-row .val {
font-weight: 600; font-weight: 600;
min-width: 22mm; color: #1a1a1a;
text-align: center; text-align: right;
padding: 0.5mm 2mm; margin-left: auto;
} }
/* VS/KS blok */ /* VS/KS blok */
@@ -642,25 +619,16 @@ export default async function invoicesPdfRoutes(
padding-top: 2mm; padding-top: 2mm;
} }
/* Konecny prijemce */ /* ── Polozky ── */
.recipient-box {
font-size: 8pt;
margin-top: 2mm;
padding-top: 2mm;
border-top: 0.5pt solid #e0e0e0;
}
.recipient-box .lbl {
font-weight: 600;
font-style: italic;
color: #646464;
}
/* Polozky tabulka - styl z nabidek */
.billing-label { .billing-label {
font-weight: 600; font-weight: 700;
color: #de3a3a; color: #1a1a1a;
font-size: 8.5pt; font-size: 9pt;
padding: 3px 5px; padding: 2mm 0 1mm 0;
border-bottom: 1.5pt solid #de3a3a;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 0.03em;
} }
table.items { table.items {
@@ -678,7 +646,7 @@ export default async function invoicesPdfRoutes(
text-align: left; text-align: left;
letter-spacing: 0.02em; letter-spacing: 0.02em;
text-transform: uppercase; text-transform: uppercase;
border-bottom: 1pt solid #1a1a1a; border-bottom: 0.5pt solid #d0d0d0;
white-space: nowrap; white-space: nowrap;
} }
table.items thead th.center { text-align: center; } table.items thead th.center { text-align: center; }
@@ -698,7 +666,7 @@ export default async function invoicesPdfRoutes(
font-size: 8pt; font-size: 8pt;
} }
table.items tbody td.desc { table.items tbody td.desc {
font-size: 9.5pt; font-size: 8pt;
font-weight: 600; font-weight: 600;
color: #1a1a1a; color: #1a1a1a;
} }
@@ -898,46 +866,40 @@ ${indentCSS}
<div class="invoice-title">${escapeHtml(t.heading)} ${invoiceNumber}</div> <div class="invoice-title">${escapeHtml(t.heading)} ${invoiceNumber}</div>
</div> </div>
<hr class="header-separator" /> <!-- Dodavatel / Odberatel + Banka / Datumy -->
<table class="header-grid" cellspacing="0">
<!-- Dodavatel / Odberatel - stejna vyska --> <tr>
<div class="addresses-row"> <td>
<div class="address-block"> <div class="address-label">${escapeHtml(t.supplier)}</div>
<div class="address-label">${escapeHtml(t.supplier)}</div> <div class="address-name">${escapeHtml(supp.name)}</div>
<div class="address-name">${escapeHtml(supp.name)}</div> ${suppLinesHtml}
${suppLinesHtml} </td>
</div> <td class="addr-customer">
<div class="address-block"> <div class="address-label">${escapeHtml(t.customer)}</div>
<div class="address-label">${escapeHtml(t.customer)}</div> <div class="address-name">${escapeHtml(cust.name)}</div>
<div class="address-name">${escapeHtml(cust.name)}</div> ${custLinesHtml}
${custLinesHtml} </td>
</div> </tr>
</div> <tr>
<td class="details-bank">
<!-- Banka + VS / Datumy --> <div class="info-row"><span class="lbl">${escapeHtml(t.bank)}</span> <span class="val">${escapeHtml(invoice.bank_name)}</span></div>
<div class="details-row"> <div class="info-row"><span class="lbl">${escapeHtml(t.swift)}</span> <span class="val">${escapeHtml(invoice.bank_swift)}</span></div>
<div class="col"> <div class="info-row"><span class="lbl">${escapeHtml(t.iban)}</span> <span class="val">${escapeHtml(invoice.bank_iban)}</span></div>
<div class="bank-box"> <div class="info-row"><span class="lbl">${escapeHtml(t.account_no)}</span> <span class="val">${escapeHtml(invoice.bank_account)}</span></div>
<span class="lbl">${escapeHtml(t.bank)}</span> ${escapeHtml(invoice.bank_name)}<br> <div class="vs-block">
<span class="lbl">${escapeHtml(t.swift)}</span> ${escapeHtml(invoice.bank_swift)}<br> ${escapeHtml(t.var_symbol)} <strong>${invoiceNumber}</strong>
<span class="lbl">${escapeHtml(t.iban)}</span> ${escapeHtml(invoice.bank_iban)}<br> &nbsp;&nbsp;&nbsp; ${escapeHtml(t.const_symbol)} <strong>${escapeHtml(invoice.constant_symbol)}</strong><br>
<span class="lbl">${escapeHtml(t.account_no)}</span> ${escapeHtml(invoice.bank_account)} ${orderNumber ? `${escapeHtml(t.order_no)} ${orderNumber}` : ""}
</div> </div>
<div class="vs-block"> </td>
${escapeHtml(t.var_symbol)} <strong>${invoiceNumber}</strong> <td>
&nbsp;&nbsp;&nbsp; ${escapeHtml(t.const_symbol)} <strong>${escapeHtml(invoice.constant_symbol)}</strong><br> <div class="info-row"><span class="lbl">${escapeHtml(t.issue_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.issue_date))}</span></div>
${orderNumber ? `${escapeHtml(t.order_no)} ${orderNumber}` : ""} <div class="info-row"><span class="lbl">${escapeHtml(t.due_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.due_date))}</span></div>
</div> <div class="info-row"><span class="lbl">${escapeHtml(t.tax_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.tax_date))}</span></div>
</div> <div class="info-row"><span class="lbl">${escapeHtml(t.payment_method)}</span> <span class="val">${escapeHtml(invoice.payment_method)}</span></div>
<div class="col"> </td>
<div class="dates-box"> </tr>
<div class="dates-row"><span class="lbl">${escapeHtml(t.issue_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.issue_date))}</span></div> </table>
<div class="dates-row"><span class="lbl">${escapeHtml(t.due_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.due_date))}</span></div>
<div class="dates-row"><span class="lbl">${escapeHtml(t.tax_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.tax_date))}</span></div>
<div class="dates-row"><span class="lbl">${escapeHtml(t.payment_method)}</span> <span class="val">${escapeHtml(invoice.payment_method)}</span></div>
</div>
</div>
</div>
<!-- Polozky --> <!-- Polozky -->
<div class="billing-label">${escapeHtml(invoice.billing_text || t.billing)}</div> <div class="billing-label">${escapeHtml(invoice.billing_text || t.billing)}</div>