1.4.5

- 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>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "app-ts",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "app-ts",
-      "version": "1.4.4",
+      "version": "1.4.5",
       "license": "ISC",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-ts",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "description": "",
   "main": "dist/server.js",
   "scripts": {

src/routes/admin/invoices-pdf.ts

@@ -515,76 +515,31 @@ export default async function invoicesPdfRoutes(
 
   .accent { color: #de3a3a; }
 
-  /* Hlavicka */
+  /* ── Hlavicka ── */
   .invoice-header {
     display: flex;
     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 {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 3mm;
   }
-  .logo-header {
+  .logo-header { text-align: left; }
-    text-align: left;
-  }
   .company-title {
     font-size: 12pt;
     font-weight: 700;
-    margin-top: 2mm;
   }
   .invoice-title {
-    font-size: 10pt;
+    font-size: 13pt;
     font-weight: 700;
     color: #de3a3a;
     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 {
@@ -593,46 +548,68 @@ export default async function invoicesPdfRoutes(
     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;
-    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;
-    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;
-    min-width: 22mm;
+    color: #1a1a1a;
-    text-align: center;
+    text-align: right;
-    padding: 0.5mm 2mm;
+    margin-left: auto;
   }
 
   /* VS/KS blok */
@@ -642,25 +619,16 @@ export default async function invoicesPdfRoutes(
     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 {
-    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 {
@@ -678,7 +646,7 @@ export default async function invoicesPdfRoutes(
     text-align: left;
     letter-spacing: 0.02em;
     text-transform: uppercase;
-    border-bottom: 1pt solid #1a1a1a;
+    border-bottom: 0.5pt solid #d0d0d0;
     white-space: nowrap;
   }
   table.items thead th.center { text-align: center; }
@@ -698,7 +666,7 @@ export default async function invoicesPdfRoutes(
     font-size: 8pt;
   }
   table.items tbody td.desc {
-    font-size: 9.5pt;
+    font-size: 8pt;
     font-weight: 600;
     color: #1a1a1a;
   }
@@ -898,46 +866,40 @@ ${indentCSS}
     <div class="invoice-title">${escapeHtml(t.heading)} ${invoiceNumber}</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-name">${escapeHtml(supp.name)}</div>
         ${suppLinesHtml}
-    </div>
+      </td>
-    <div class="address-block">
+      <td class="addr-customer">
         <div class="address-label">${escapeHtml(t.customer)}</div>
         <div class="address-name">${escapeHtml(cust.name)}</div>
         ${custLinesHtml}
-    </div>
+      </td>
-  </div>
+    </tr>
-
+    <tr>
-  <!-- Banka + VS / Datumy -->
+      <td class="details-bank">
-  <div class="details-row">
+        <div class="info-row"><span class="lbl">${escapeHtml(t.bank)}</span> <span class="val">${escapeHtml(invoice.bank_name)}</span></div>
-    <div class="col">
+        <div class="info-row"><span class="lbl">${escapeHtml(t.swift)}</span> <span class="val">${escapeHtml(invoice.bank_swift)}</span></div>
-      <div class="bank-box">
+        <div class="info-row"><span class="lbl">${escapeHtml(t.iban)}</span> <span class="val">${escapeHtml(invoice.bank_iban)}</span></div>
-        <span class="lbl">${escapeHtml(t.bank)}</span> ${escapeHtml(invoice.bank_name)}<br>
+        <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.swift)}</span> ${escapeHtml(invoice.bank_swift)}<br>
-        <span class="lbl">${escapeHtml(t.iban)}</span> ${escapeHtml(invoice.bank_iban)}<br>
-        <span class="lbl">${escapeHtml(t.account_no)}</span> ${escapeHtml(invoice.bank_account)}
-      </div>
         <div class="vs-block">
           ${escapeHtml(t.var_symbol)} <strong>${invoiceNumber}</strong>
           &nbsp;&nbsp;&nbsp; ${escapeHtml(t.const_symbol)} <strong>${escapeHtml(invoice.constant_symbol)}</strong><br>
           ${orderNumber ? `${escapeHtml(t.order_no)} ${orderNumber}` : ""}
         </div>
-    </div>
+      </td>
-    <div class="col">
+      <td>
-      <div class="dates-box">
+        <div class="info-row"><span class="lbl">${escapeHtml(t.issue_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.issue_date))}</span></div>
-        <div class="dates-row"><span class="lbl">${escapeHtml(t.issue_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.issue_date))}</span></div>
+        <div class="info-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.due_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.due_date))}</span></div>
+        <div class="info-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.tax_date)}</span> <span class="val">${escapeHtml(formatDate(invoice.tax_date))}</span></div>
+        <div class="info-row"><span class="lbl">${escapeHtml(t.payment_method)}</span> <span class="val">${escapeHtml(invoice.payment_method)}</span></div>
-        <div class="dates-row"><span class="lbl">${escapeHtml(t.payment_method)}</span> <span class="val">${escapeHtml(invoice.payment_method)}</span></div>
+      </td>
-      </div>
+    </tr>
-    </div>
+  </table>
-  </div>
 
   <!-- Polozky -->
   <div class="billing-label">${escapeHtml(invoice.billing_text || t.billing)}</div>