From b21d7b9839b7c7aa816ca8aaa48c5f555e3ff62b035813008ba03149df0ed1eb Mon Sep 17 00:00:00 2001
From: wlfb <thomas.langer@destengs.com>
Date: Mon, 20 Jul 2026 14:06:32 +0200
Subject: [PATCH] feat: Eintrags-Formular mit Paar-Layout und
 Gesperrt-Kennzeichnung

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 finance/app/static/style.css         | 31 +++++++++++++++++
 finance/app/templates/szenarien.html | 51 +++++++++++++++++-----------
 finance/tests/test_gui.py            | 12 +++++++
 3 files changed, 74 insertions(+), 20 deletions(-)

diff --git a/finance/app/static/style.css b/finance/app/static/style.css
index 2d4201b..d5f78d2 100644
--- a/finance/app/static/style.css
+++ b/finance/app/static/style.css
@@ -179,3 +179,34 @@ section.planning-section fieldset {
   text-align: center;
   font-size: 0.75rem;
 }
+
+/* Ausbaustufe 7: Formular-Paare als Einheit, gesperrte Felder erkennbar. */
+.entry-form label,
+.planning-section form label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0 1.25rem 0.6rem 0;
+  white-space: nowrap;
+}
+.entry-form select,
+.planning-section form select {
+  max-width: 14rem;
+}
+.entry-form .entry-art {
+  display: block;
+  margin-bottom: 0.75rem;
+}
+.entry-form .entry-art > label { font-weight: bold; }
+.entry-form .entry-art .muted { margin-left: 0.5rem; }
+input:disabled, select:disabled {
+  background: #e3e3e3;
+  color: #8a8a8a;
+  cursor: not-allowed;
+}
+label:has(input:disabled), label:has(select:disabled) {
+  opacity: 0.55;
+}
+.project-block {
+  margin-top: 1rem;
+}
diff --git a/finance/app/templates/szenarien.html b/finance/app/templates/szenarien.html
index d0f7739..013fe2c 100644
--- a/finance/app/templates/szenarien.html
+++ b/finance/app/templates/szenarien.html
@@ -133,49 +133,55 @@
       </tbody>
     </table>
 
-    <form hx-ext="json-form" hx-post="/api/scenarios/{{ sc.id }}/modifiers" hx-swap="none"
+    <h4>Neuer Eintrag</h4>
+    <form class="entry-form" hx-ext="json-form" hx-post="/api/scenarios/{{ sc.id }}/modifiers" hx-swap="none"
           data-modifiers-url="/api/scenarios/{{ sc.id }}/modifiers"
           data-planned-url="/api/scenarios/{{ sc.id }}/planned"
           hx-on::after-request="if(event.detail.successful){window.location.reload()}">
-      <strong>Neuer Eintrag:</strong>
-      <label>Eintragsart
-        <select name="kind" data-type="str" onchange="onEntryArtChange(this)">
-          {% for k in modifier_kinds %}<option value="{{ k }}">{{ k|de_label }}</option>{% endfor %}
-          <option value="einmal">Einmalzahlung</option>
-        </select>
-      </label>
+      <div class="entry-art">
+        <label>Eintragsart
+          <select name="kind" data-type="str" onchange="onEntryArtChange(this)">
+            {% for k in modifier_kinds %}<option value="{{ k }}">{{ k|de_label }}</option>{% endfor %}
+            <option value="einmal">Einmalzahlung</option>
+          </select>
+        </label>
+        <span class="muted">— die zur Art passenden Felder werden aktiv, gesperrte Felder sind ausgegraut.</span>
+      </div>
       <label>Ziel-Typ
-        <select name="target_type" data-type="str" onchange="onModTargetTypeChange(this)">
+        <select name="target_type" data-type="str" onchange="onModTargetTypeChange(this)" title="Für diese Eintragsart nicht relevant">
           <option value="category">Kategorie</option>
           <option value="recurring">Wiederkehrender Posten</option>
         </select>
       </label>
       <span class="mod-target-category">
         <label>Kategorie
-          <select name="target_id" data-type="int">
+          <select name="target_id" data-type="int" title="Für diese Eintragsart nicht relevant">
             {% for c in categories %}<option value="{{ c.id }}">{{ c.name }}</option>{% endfor %}
           </select>
         </label>
       </span>
       <span class="mod-target-recurring" style="display:none">
         <label>Posten
-          <select name="target_id" data-type="int" disabled>
+          <select name="target_id" data-type="int" disabled title="Für diese Eintragsart nicht relevant">
             {% for r in recurring %}<option value="{{ r.id }}">{{ r.name }}</option>{% endfor %}
           </select>
         </label>
       </span>
-      <label>Wert <input type="text" name="value" data-type="amount" value="0"></label>
-      <label>Endet am <input type="date" name="end_date" disabled></label>
-      <label>Name <input type="text" name="name" disabled></label>
-      <label>Betrag <input type="text" name="amount" data-type="amount" placeholder="5000,00" disabled></label>
-      <label>Fällig am <input type="date" name="due" disabled></label>
+      <label><span class="value-label">Prozentsatz (%)</span> <input type="text" name="value" data-type="amount" value="0" title="Für diese Eintragsart nicht relevant"></label>
+      <label>Endet am <input type="date" name="end_date" disabled title="Für diese Eintragsart nicht relevant"></label>
+      <label>Name <input type="text" name="name" disabled title="Für diese Eintragsart nicht relevant"></label>
+      <label>Betrag <input type="text" name="amount" data-type="amount" placeholder="5000,00" disabled title="Für diese Eintragsart nicht relevant"></label>
+      <label>Fällig am <input type="date" name="due" disabled title="Für diese Eintragsart nicht relevant"></label>
       <button type="submit">Hinzufügen</button>
     </form>
 
-    <form hx-post="/api/scenarios/{{ sc.id }}/project" hx-swap="none"
-          hx-on::after-request="if(event.detail.successful){window.location.reload()}">
-      <button type="submit">Durchrechnen</button>
-    </form>
+    <hr>
+    <div class="project-block">
+      <form hx-post="/api/scenarios/{{ sc.id }}/project" hx-swap="none"
+            hx-on::after-request="if(event.detail.successful){window.location.reload()}">
+        <button type="submit">Durchrechnen</button>
+      </form>
+    </div>
 
     {% if row.result %}
     <p>
@@ -231,6 +237,11 @@
       if (el) { el.disabled = disabled; }
     }
     setDisabled('value', !(art === 'percent' || art === 'absolute'));
+    var valueLabel = form.querySelector('.value-label');
+    if (valueLabel) {
+      valueLabel.textContent = art === 'percent' ? 'Prozentsatz (%)'
+        : art === 'absolute' ? 'Kürzung (€)' : 'Wert';
+    }
     setDisabled('end_date', art !== 'ende');
     setDisabled('name', isMod);
     setDisabled('amount', isMod);
diff --git a/finance/tests/test_gui.py b/finance/tests/test_gui.py
index 0173b13..1e60716 100644
--- a/finance/tests/test_gui.py
+++ b/finance/tests/test_gui.py
@@ -414,3 +414,15 @@ def test_szenarien_seite_und_nav(client, db):
 def test_szenarien_seite_braucht_login(client):
     r = client.get("/szenarien", follow_redirects=False)
     assert r.status_code in (302, 303) and r.headers["location"] == "/login"
+
+
+def test_neuer_eintrag_formular_struktur(client, db):
+    client.post("/login", data={"username": "admin", "password": "geheim"})
+    db.add(Scenario(name="UX-Test", description=""))
+    db.commit()
+    r = client.get("/szenarien").text
+    assert 'class="entry-form"' in r
+    assert 'class="entry-art"' in r                      # Eintragsart-Zeile
+    assert 'class="value-label"' in r                    # dynamisches Wert-Label
+    assert 'Für diese Eintragsart nicht relevant' in r   # Tooltip an Umschaltfeldern
+    assert '<hr' in r                                    # Durchrechnen abgesetzt