From e0e0323f99972a6ac88f475fffc15a7aeb43ae86 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Sun, 26 Jul 2026 21:14:51 +0200
Subject: [PATCH] =?UTF-8?q?Web:=20Einzelst=C3=BCcke=20=E2=80=93=20Preis/Be?=
 =?UTF-8?q?lege=20immer=20sichtbar,=20Anlegen=20als=20Button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Anlege-Maske war ein grosses, dauerhaft sichtbares Formular. Jetzt klappt
sie hinter einen "Einzelstück anlegen"-Knopf. Dafuer werden Kaufpreis und Belege
je Stueck nicht mehr ueber einen Aufklapp-Knopf versteckt, sondern direkt unter
jeder Zeile angezeigt (leicht abgesetzte Detailzeile).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/components/Einzelstuecke.jsx | 54 +++++++++++++++-------------
 web/src/styles.css                   |  2 ++
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/web/src/components/Einzelstuecke.jsx b/web/src/components/Einzelstuecke.jsx
index 3cb5825..27997cb 100644
--- a/web/src/components/Einzelstuecke.jsx
+++ b/web/src/components/Einzelstuecke.jsx
@@ -37,7 +37,7 @@ export default function Einzelstuecke({ product, locations, shops, isAdmin, onCh
   const [items, setItems] = useState([]);
   const [addForm, setAddForm] = useState(EMPTY_ADD);
   const [remove, setRemove] = useState(null); // { item, reason, note } | null
-  const [expanded, setExpanded] = useState(null); // Item-ID mit offenem Detail (Preis/Belege)
+  const [showAdd, setShowAdd] = useState(false); // Anlege-Maske ein-/ausklappen
   const [suggestion, setSuggestion] = useState(null); // { itemId, date } aus PDF-Analyse
   const origin = window.location.origin;
 
@@ -226,29 +226,22 @@ export default function Einzelstuecke({ product, locations, shops, isAdmin, onCh
                   ) : <span>{it.note || "–"}</span>}
                 </td>
                 <td className="num">
-                  <div className="field-inline" style={{ justifyContent: "flex-end" }}>
-                    <button className="btn-icon" title="Preis & Belege"
-                      onClick={() => setExpanded(expanded === it.id ? null : it.id)}>
-                      <Icon name={expanded === it.id ? "close" : "package"} size={16} />
-                    </button>
-                    {isAdmin && (
-                      <>
-                        <button className="btn-icon" title="Mit Grund entfernen"
-                          onClick={() => setRemove({ item: it, reason: "broken", note: "" })}>
-                          <Icon name="checkout" size={16} />
-                        </button>
-                        <button className="btn-icon danger" title="Löschen (Korrektur)"
-                          onClick={() => loeschen(it)}>
-                          <Icon name="trash" size={16} />
-                        </button>
-                      </>
-                    )}
-                  </div>
+                  {isAdmin && (
+                    <div className="field-inline" style={{ justifyContent: "flex-end" }}>
+                      <button className="btn-icon" title="Mit Grund entfernen"
+                        onClick={() => setRemove({ item: it, reason: "broken", note: "" })}>
+                        <Icon name="checkout" size={16} />
+                      </button>
+                      <button className="btn-icon danger" title="Löschen (Korrektur)"
+                        onClick={() => loeschen(it)}>
+                        <Icon name="trash" size={16} />
+                      </button>
+                    </div>
+                  )}
                 </td>
               </tr>
-              {expanded === it.id && (
-                <tr>
-                  <td colSpan={8}>
+              <tr className="einzel-detailrow">
+                <td colSpan={8}>
                     <div style={{ display: "grid", gap: "var(--sp-4)",
                       gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))" }}>
                       <label style={{ margin: 0 }}>Kaufpreis
@@ -319,7 +312,6 @@ export default function Einzelstuecke({ product, locations, shops, isAdmin, onCh
                     </div>
                   </td>
                 </tr>
-              )}
               </Fragment>
             ))}
             {items.length === 0 && <tr><td colSpan={8} className="empty">Noch keine Einzelstücke.</td></tr>}
@@ -327,9 +319,21 @@ export default function Einzelstuecke({ product, locations, shops, isAdmin, onCh
         </table>
       </div>
 
-      {isAdmin && (
+      {isAdmin && !showAdd && (
+        <button type="button" className="btn" style={{ marginTop: "var(--sp-3)" }}
+          onClick={() => setShowAdd(true)}>
+          <Icon name="plus" size={16} />Einzelstück anlegen
+        </button>
+      )}
+
+      {isAdmin && showAdd && (
         <form onSubmit={add} className="card-sub" style={{ marginTop: "var(--sp-3)" }}>
-          <div className="card-head"><Icon name="plus" /><h3>Einzelstücke anlegen</h3></div>
+          <div className="card-head"><Icon name="plus" /><h3>Einzelstücke anlegen</h3>
+            <button type="button" className="btn-icon" style={{ marginLeft: "auto" }}
+              title="Schließen" onClick={() => setShowAdd(false)}>
+              <Icon name="close" size={16} />
+            </button>
+          </div>
           <div className="row">
             <label style={{ width: 90 }}>Anzahl
               <input type="number" min="1" max="200" value={addForm.count}
diff --git a/web/src/styles.css b/web/src/styles.css
index cd1273b..760b707 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -361,6 +361,8 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 /* In Zahlenspalten sitzt der Inhalt rechts, passend zur Ausrichtung der Spalte. */
 .table td.num .cell-row { justify-content: flex-end; }
 .table tbody tr:last-child td { border-bottom: none; }
+/* Immer sichtbare Detailzeile der Einzelstücke (Preis + Belege) leicht absetzen. */
+.einzel-detailrow > td { background: var(--surface-2); }
 .table tbody tr:hover { background: var(--surface-2); }
 .num { text-align: right; font-variant-numeric: tabular-nums; }
 .strong { font-weight: 640; }