From 131f6c5d25f5328de0274c7af020493710268577 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 1 Jun 2026 18:02:04 +0000
Subject: [PATCH] Reorder cards: Sender/Charge To top row, Invoice
 Details/Payment bottom row

https://claude.ai/code/session_0151QtsUhzXmgzEhSvXG2SDt
---
 app/index.html | 144 ++++++++++++++++++++++++-------------------------
 1 file changed, 71 insertions(+), 73 deletions(-)

diff --git a/app/index.html b/app/index.html
index 5f6a60a..c1f680d 100644
--- a/app/index.html
+++ b/app/index.html
@@ -498,83 +498,81 @@ function buildForm() {
       <div class="fi"><label id="lbl-stax">${t("vat-id")}:</label>
         <input id="stax" type="text" data-ls="stax"></div>
     </div>
-    <div style="display:flex;flex-direction:column;gap:12px">
-      <div class="card">
-        <div class="card-title" id="sec-invdet">${t("invoice-details-section")}</div>
-        <div class="fg"><label id="lbl-idate" for="idate">${t("invoice-date")}</label>
-          <input id="idate" type="date" value="${dateDef}"></div>
-        <div class="fg"><label id="lbl-icur" for="icur">${t("invoice-currency")}</label>
-          <select id="icur" data-ls="icur">${curOpts}</select></div>
-        <div class="fg"><label id="lbl-pcode" for="pcode">${t("project-code")}</label>
-          <select id="pcode" data-ls="pcode">
-            <option value="">${t("select")}</option>
-            ${pcOpts}
-            <option value="__other__">${t("other")}</option>
-          </select></div>
-        <div class="fg" id="pcode-other-wrap" style="display:none">
-          <label id="lbl-pcode-other" for="pcode-other">${t("project-code")} (${t("other")})</label>
-          <input id="pcode-other" type="text" data-ls="pcode-other">
-        </div>
-        <div class="fg"><label id="lbl-ino" for="ino">${t("invoice-no")}</label>
-          <input id="ino" type="text" data-ls="ino"></div>
+    <div class="card">
+      <div class="card-title" style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
+        <span id="sec-ct">${t("charge-to")}:</span>
+        <select id="ct-pick" style="width:auto;font-size:12px">
+          <option value="">${t("select")}</option>
+          ${ctOpts}
+          <option value="__other__">${t("other")}</option>
+        </select>
       </div>
-      <div class="card">
-        <div class="card-title" style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
-          <span id="sec-ct">${t("charge-to")}:</span>
-          <select id="ct-pick" style="width:auto;font-size:12px">
-            <option value="">${t("select")}</option>
-            ${ctOpts}
-            <option value="__other__">${t("other")}</option>
-          </select>
-        </div>
-        <div id="ct-fields" class="locked">
-          <div class="fg"><label id="lbl-ctn" for="ctn">${t("charge-to-name")}</label>
-            <input id="ctn" type="text"></div>
-          <div class="fg"><label id="lbl-ca1" for="ca1">${t("charge-to-address1")}</label>
-            <input id="ca1" type="text"></div>
-          <div class="fg"><label id="lbl-ca2" for="ca2">${t("charge-to-address2")}</label>
-            <input id="ca2" type="text"></div>
-          <div class="fg"><label id="lbl-ca3" for="ca3">${t("charge-to-address3")}</label>
-            <input id="ca3" type="text"></div>
-          <div class="fg"><label id="lbl-ca4" for="ca4">${t("charge-to-address4")}</label>
-            <input id="ca4" type="text"></div>
-          <div class="fg"><label id="lbl-cc" for="cc">${t("charge-to-country")}</label>
-            <select id="cc">${countryOpts("")}</select></div>
-          <div class="fi"><label id="lbl-cph">${t("charge-to-phone")}:</label>
-            <input id="cph" type="tel"></div>
-          <div class="fi"><label id="lbl-cem">${t("charge-to-email")}:</label>
-            <input id="cem" type="email"></div>
-          <div class="fi"><label id="lbl-cvat">${t("vat-id")}:</label>
-            <input id="cvat" type="text"></div>
-          <div class="fi"><label id="lbl-creg">${t("registration-no")}:</label>
-            <input id="creg" type="text"></div>
-        </div>
+      <div id="ct-fields" class="locked">
+        <div class="fg"><label id="lbl-ctn" for="ctn">${t("charge-to-name")}</label>
+          <input id="ctn" type="text"></div>
+        <div class="fg"><label id="lbl-ca1" for="ca1">${t("charge-to-address1")}</label>
+          <input id="ca1" type="text"></div>
+        <div class="fg"><label id="lbl-ca2" for="ca2">${t("charge-to-address2")}</label>
+          <input id="ca2" type="text"></div>
+        <div class="fg"><label id="lbl-ca3" for="ca3">${t("charge-to-address3")}</label>
+          <input id="ca3" type="text"></div>
+        <div class="fg"><label id="lbl-ca4" for="ca4">${t("charge-to-address4")}</label>
+          <input id="ca4" type="text"></div>
+        <div class="fg"><label id="lbl-cc" for="cc">${t("charge-to-country")}</label>
+          <select id="cc">${countryOpts("")}</select></div>
+        <div class="fi"><label id="lbl-cph">${t("charge-to-phone")}:</label>
+          <input id="cph" type="tel"></div>
+        <div class="fi"><label id="lbl-cem">${t("charge-to-email")}:</label>
+          <input id="cem" type="email"></div>
+        <div class="fi"><label id="lbl-cvat">${t("vat-id")}:</label>
+          <input id="cvat" type="text"></div>
+        <div class="fi"><label id="lbl-creg">${t("registration-no")}:</label>
+          <input id="creg" type="text"></div>
       </div>
     </div>
-  </div>
-  <div class="card" style="margin-bottom:14px">
-    <div class="card-title" id="lbl-pay-sec">${t("payment")}</div>
-    <div class="pay-terms-row">
-      <label id="lbl-pterm">${t("payment-terms")}:</label>
-      <input id="pterm" type="number" min="0" value="7" oninput="calcPayBy()" data-ls="pterm">
-      <span id="lbl-days">${t("payment-days")}</span>
+    <div class="card">
+      <div class="card-title" id="sec-invdet">${t("invoice-details-section")}</div>
+      <div class="fg"><label id="lbl-idate" for="idate">${t("invoice-date")}</label>
+        <input id="idate" type="date" value="${dateDef}"></div>
+      <div class="fg"><label id="lbl-icur" for="icur">${t("invoice-currency")}</label>
+        <select id="icur" data-ls="icur">${curOpts}</select></div>
+      <div class="fg"><label id="lbl-pcode" for="pcode">${t("project-code")}</label>
+        <select id="pcode" data-ls="pcode">
+          <option value="">${t("select")}</option>
+          ${pcOpts}
+          <option value="__other__">${t("other")}</option>
+        </select></div>
+      <div class="fg" id="pcode-other-wrap" style="display:none">
+        <label id="lbl-pcode-other" for="pcode-other">${t("project-code")} (${t("other")})</label>
+        <input id="pcode-other" type="text" data-ls="pcode-other">
+      </div>
+      <div class="fg"><label id="lbl-ino" for="ino">${t("invoice-no")}</label>
+        <input id="ino" type="text" data-ls="ino"></div>
     </div>
-    <div class="pay-by-row">
-      <label id="lbl-paybyl">${t("pay-by")}:</label>
-      <span id="paybydisp"></span>
-    </div>
-    <div id="bank-section" style="display:none">
-      <div class="fg"><label id="lbl-pacct">${t("account-holder")}</label>
-        <input id="pacct" type="text" data-ls="pacct"></div>
-      <div class="fg"><label id="lbl-piban">${t("account-no")}</label>
-        <input id="piban" type="text" data-ls="piban"></div>
-      <div class="fg"><label id="lbl-pbic">${t("bank-bic")}</label>
-        <input id="pbic" type="text" data-ls="pbic"></div>
-      <div class="fg"><label id="lbl-pbadr">${t("bank-address")}</label>
-        <input id="pbadr1" type="text" data-ls="pbadr1">
-        <input id="pbadr2" type="text" style="margin-top:6px" data-ls="pbadr2"></div>
-      <div class="fg"><label id="lbl-pref">${t("payment-ref")}</label>
-        <input id="pref" type="text" data-ls="pref"></div>
+    <div class="card">
+      <div class="card-title" id="lbl-pay-sec">${t("payment")}</div>
+      <div class="pay-terms-row">
+        <label id="lbl-pterm">${t("payment-terms")}:</label>
+        <input id="pterm" type="number" min="0" value="7" oninput="calcPayBy()" data-ls="pterm">
+        <span id="lbl-days">${t("payment-days")}</span>
+      </div>
+      <div class="pay-by-row">
+        <label id="lbl-paybyl">${t("pay-by")}:</label>
+        <span id="paybydisp"></span>
+      </div>
+      <div id="bank-section" style="display:none">
+        <div class="fg"><label id="lbl-pacct">${t("account-holder")}</label>
+          <input id="pacct" type="text" data-ls="pacct"></div>
+        <div class="fg"><label id="lbl-piban">${t("account-no")}</label>
+          <input id="piban" type="text" data-ls="piban"></div>
+        <div class="fg"><label id="lbl-pbic">${t("bank-bic")}</label>
+          <input id="pbic" type="text" data-ls="pbic"></div>
+        <div class="fg"><label id="lbl-pbadr">${t("bank-address")}</label>
+          <input id="pbadr1" type="text" data-ls="pbadr1">
+          <input id="pbadr2" type="text" style="margin-top:6px" data-ls="pbadr2"></div>
+        <div class="fg"><label id="lbl-pref">${t("payment-ref")}</label>
+          <input id="pref" type="text" data-ls="pref"></div>
+      </div>
     </div>
   </div>