From 96f8715e13ec20e71002d2d547b2a78e8d2e3db9 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Fri, 10 Jul 2026 02:09:58 +0200
Subject: [PATCH] Bankkarte: Beschreibung in Vertrags-Ansicht + Select anzeigen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ContractDetail: Bankkarten-Card zeigt jetzt die description
kursiv unter Bankname (whitespace-pre-line für mehrzeilige
Notizen).

ContractForm: Bankkarten-Select hängt die Beschreibung kompakt
an das Label an (Zeilenumbrüche flach, auf 60 Zeichen gecapped)
– hilft beim Unterscheiden mehrerer Karten desselben Kunden.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/pages/contracts/ContractDetail.tsx |  5 +++++
 frontend/src/pages/contracts/ContractForm.tsx   | 16 ++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/contracts/ContractDetail.tsx b/frontend/src/pages/contracts/ContractDetail.tsx
index 0d8a98a9..743263fa 100644
--- a/frontend/src/pages/contracts/ContractDetail.tsx
+++ b/frontend/src/pages/contracts/ContractDetail.tsx
@@ -2638,6 +2638,11 @@ export default function ContractDetail() {
               <CopyButton value={c.bankCard.iban} />
             </p>
             {c.bankCard.bankName && <p className="text-gray-500">{c.bankCard.bankName}</p>}
+            {c.bankCard.description && (
+              <p className="text-sm text-gray-600 mt-1 italic whitespace-pre-line">
+                {c.bankCard.description}
+              </p>
+            )}
           </Card>
         )}
         {c.identityDocument && (
diff --git a/frontend/src/pages/contracts/ContractForm.tsx b/frontend/src/pages/contracts/ContractForm.tsx
index 30813fd2..a20dfbdd 100644
--- a/frontend/src/pages/contracts/ContractForm.tsx
+++ b/frontend/src/pages/contracts/ContractForm.tsx
@@ -959,10 +959,18 @@ export default function ContractForm() {
                   </LabelWithLink>
                 }
                 {...register('bankCardId')}
-                options={bankCards.map((c) => ({
-                  value: c.id,
-                  label: `${c.iban} (${c.accountHolder})`,
-                }))}
+                options={bankCards.map((c) => {
+                  // Beschreibung kompakt anhängen, damit man Karten am
+                  // Kontext unterscheiden kann (z.B. "Geschäftskonto").
+                  // Newlines flach machen, Länge cappen.
+                  const desc = c.description
+                    ? c.description.replace(/\s+/g, ' ').trim().slice(0, 60)
+                    : '';
+                  return {
+                    value: c.id,
+                    label: `${c.iban} (${c.accountHolder})${desc ? ` – ${desc}` : ''}`,
+                  };
+                })}
               />
 
               <Select