Bankkarte-/Ausweis-Details in Vertrag + neues Feld Kartennummer

Schema: BankCard.cardNumber (String?, optional) + Migration
20260813100000_bank_card_number (ADD COLUMN IF NOT EXISTS), auf Dev
angewandt + prisma generate; Prod via migrate deploy. Eingabefeld
"Kartennummer" im Bankkarten-Modal (Kundenakte).

Vertragsansicht (ContractDetail) und Vertrag bearbeiten (ContractForm)
zeigen jetzt bei Bankkarte zusaetzlich BIC/Bank/Kartennummer/Ablaufdatum
und bei Ausweis Behoerde/Ausstellung/Ablaufdatum sowie Geburtsort +
Geburtsdatum des Kunden - jeweils mit Copy-Button und nur wenn gesetzt.
Im Form je Select in eigenem div gewrappt (Grid-Alignment).

Verifiziert: tsc + vite build gruen, cardNumber Round-Trip (update->read),
Contract-Include liefert alle Felder inkl. customer.birthDate/birthPlace.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/contracts/ContractDetail.tsx

@@ -2681,7 +2681,30 @@ export default function ContractDetail() {
               {c.bankCard.iban}
               <CopyButton value={c.bankCard.iban} />
             </p>
-            {c.bankCard.bankName && <p className="text-gray-500">{c.bankCard.bankName}</p>}
+            {c.bankCard.bic && (
+              <p className="text-sm text-gray-600 flex items-center gap-1">
+                <span className="text-gray-500">BIC:</span> {c.bankCard.bic}
+                <CopyButton value={c.bankCard.bic} />
+              </p>
+            )}
+            {c.bankCard.bankName && (
+              <p className="text-sm text-gray-600 flex items-center gap-1">
+                <span className="text-gray-500">Bank:</span> {c.bankCard.bankName}
+                <CopyButton value={c.bankCard.bankName} />
+              </p>
+            )}
+            {c.bankCard.cardNumber && (
+              <p className="text-sm text-gray-600 flex items-center gap-1">
+                <span className="text-gray-500">Kartennummer:</span> {c.bankCard.cardNumber}
+                <CopyButton value={c.bankCard.cardNumber} />
+              </p>
+            )}
+            {c.bankCard.expiryDate && (
+              <p className="text-sm text-gray-600 flex items-center gap-1">
+                <span className="text-gray-500">Ablaufdatum:</span> {formatDate(c.bankCard.expiryDate)}
+                <CopyButton value={formatDate(c.bankCard.expiryDate)} />
+              </p>
+            )}
             {c.bankCard.description && (
               <p className="text-sm text-gray-600 mt-1 italic whitespace-pre-line">
                 {c.bankCard.description}
@@ -2709,6 +2732,36 @@ export default function ContractDetail() {
               <CopyButton value={c.identityDocument.documentNumber} />
             </p>
             <p className="text-gray-500">{c.identityDocument.type}</p>
+            {c.identityDocument.issuingAuthority && (
+              <p className="text-sm text-gray-600 flex items-center gap-1">
+                <span className="text-gray-500">Behörde:</span> {c.identityDocument.issuingAuthority}
+                <CopyButton value={c.identityDocument.issuingAuthority} />
+              </p>
+            )}
+            {c.identityDocument.issueDate && (
+              <p className="text-sm text-gray-600 flex items-center gap-1">
+                <span className="text-gray-500">Ausstellung:</span> {formatDate(c.identityDocument.issueDate)}
+                <CopyButton value={formatDate(c.identityDocument.issueDate)} />
+              </p>
+            )}
+            {c.identityDocument.expiryDate && (
+              <p className="text-sm text-gray-600 flex items-center gap-1">
+                <span className="text-gray-500">Ablaufdatum:</span> {formatDate(c.identityDocument.expiryDate)}
+                <CopyButton value={formatDate(c.identityDocument.expiryDate)} />
+              </p>
+            )}
+            {c.customer?.birthPlace && (
+              <p className="text-sm text-gray-600 flex items-center gap-1">
+                <span className="text-gray-500">Geburtsort:</span> {c.customer.birthPlace}
+                <CopyButton value={c.customer.birthPlace} />
+              </p>
+            )}
+            {c.customer?.birthDate && (
+              <p className="text-sm text-gray-600 flex items-center gap-1">
+                <span className="text-gray-500">Geburtsdatum:</span> {formatDate(c.customer.birthDate)}
+                <CopyButton value={formatDate(c.customer.birthDate)} />
+              </p>
+            )}
           </Card>
         )}
       </div>

frontend/src/pages/contracts/ContractForm.tsx

@@ -1041,6 +1041,7 @@ export default function ContractForm() {
               />
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
               <Select
                 label={
                   <span className="inline-flex items-center gap-1">
@@ -1077,7 +1078,25 @@ export default function ContractForm() {
                   };
                 })}
               />
+              {selectedBankCard && (
+                <div className="mt-1.5 space-y-0.5 text-xs text-gray-600">
+                  {selectedBankCard.bic && (
+                    <div className="flex items-center gap-1"><span className="text-gray-500">BIC:</span> {selectedBankCard.bic}<CopyButton value={selectedBankCard.bic} /></div>
+                  )}
+                  {selectedBankCard.bankName && (
+                    <div className="flex items-center gap-1"><span className="text-gray-500">Bank:</span> {selectedBankCard.bankName}<CopyButton value={selectedBankCard.bankName} /></div>
+                  )}
+                  {selectedBankCard.cardNumber && (
+                    <div className="flex items-center gap-1"><span className="text-gray-500">Kartennummer:</span> {selectedBankCard.cardNumber}<CopyButton value={selectedBankCard.cardNumber} /></div>
+                  )}
+                  {selectedBankCard.expiryDate && (
+                    <div className="flex items-center gap-1"><span className="text-gray-500">Ablaufdatum:</span> {formatDate(selectedBankCard.expiryDate)}<CopyButton value={formatDate(selectedBankCard.expiryDate)} /></div>
+                  )}
+                </div>
+              )}
+              </div>
 
+              <div>
               <Select
                 label={
                   <span className="inline-flex items-center gap-1">
@@ -1106,6 +1125,26 @@ export default function ContractForm() {
                   label: `${d.documentNumber} (${d.type})`,
                 }))}
               />
+              {selectedDocument && (
+                <div className="mt-1.5 space-y-0.5 text-xs text-gray-600">
+                  {selectedDocument.issueDate && (
+                    <div className="flex items-center gap-1"><span className="text-gray-500">Ausstellung:</span> {formatDate(selectedDocument.issueDate)}<CopyButton value={formatDate(selectedDocument.issueDate)} /></div>
+                  )}
+                  {selectedDocument.expiryDate && (
+                    <div className="flex items-center gap-1"><span className="text-gray-500">Ablaufdatum:</span> {formatDate(selectedDocument.expiryDate)}<CopyButton value={formatDate(selectedDocument.expiryDate)} /></div>
+                  )}
+                  {selectedDocument.issuingAuthority && (
+                    <div className="flex items-center gap-1"><span className="text-gray-500">Behörde:</span> {selectedDocument.issuingAuthority}<CopyButton value={selectedDocument.issuingAuthority} /></div>
+                  )}
+                  {customer?.birthPlace && (
+                    <div className="flex items-center gap-1"><span className="text-gray-500">Geburtsort:</span> {customer.birthPlace}<CopyButton value={customer.birthPlace} /></div>
+                  )}
+                  {customer?.birthDate && (
+                    <div className="flex items-center gap-1"><span className="text-gray-500">Geburtsdatum:</span> {formatDate(customer.birthDate)}<CopyButton value={formatDate(customer.birthDate)} /></div>
+                  )}
+                </div>
+              )}
+              </div>
             </div>
           </Card>
         )}

frontend/src/pages/customers/CustomerDetail.tsx

@@ -2697,6 +2697,7 @@ function BankCardModal({
   const getInitialFormData = () => ({
     accountHolder: bankCard?.accountHolder || '',
     iban: bankCard?.iban || '',
+    cardNumber: bankCard?.cardNumber || '',
     bic: bankCard?.bic || '',
     bankName: bankCard?.bankName || '',
     expiryDate: bankCard?.expiryDate ? new Date(bankCard.expiryDate).toISOString().split('T')[0] : '',
@@ -2753,7 +2754,7 @@ function BankCardModal({
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['customer', customerId] });
       onClose();
-      setFormData({ accountHolder: '', iban: '', bic: '', bankName: '', expiryDate: '', description: '', isActive: true });
+      setFormData({ accountHolder: '', iban: '', cardNumber: '', bic: '', bankName: '', expiryDate: '', description: '', isActive: true });
     },
   });
 
@@ -2830,6 +2831,12 @@ function BankCardModal({
           </div>
         </div>
 
+        <Input
+          label="Kartennummer"
+          value={formData.cardNumber}
+          onChange={(e) => setFormData({ ...formData, cardNumber: e.target.value })}
+        />
+
         <Input
           label="BIC"
           value={formData.bic}

frontend/src/types/index.ts

@@ -278,6 +278,7 @@ export interface BankCard {
   customerId: number;
   accountHolder: string;
   iban: string;
+  cardNumber?: string;
   bic?: string;
   bankName?: string;
   expiryDate?: string;