PDF-Viewer-Modal fuer Bankkarte-/Ausweis-Dokument

Neue Komponente PdfViewerModal (Modal + iframe auf viewUrl(documentPath),
inkl. Neuer-Tab/Download-Links). Buttons:
- Vertragsansicht (ContractDetail): im Card-Header von Bankkarte/Ausweis
- Vertrag bearbeiten (ContractForm): neben dem Label Bankkarte/Ausweis

Button erscheint NUR wenn ein documentPath hinterlegt/gewaehlt ist. Nutzt den
bestehenden /api/files/download-Endpoint (Per-File-Ownership-Check) - kein
neuer Zugriffspfad. iframe (nicht embed/object wegen object-src 'none');
same-origin via CSP default-src 'self' erlaubt.

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

frontend/src/pages/contracts/ContractForm.tsx

@@ -15,7 +15,8 @@ import { buildContractLabelParts } from '../../utils/contractLabel';
 import type { ContractType } from '../../types';
 import { formatDate } from '../../utils/dateFormat';
 import { useProviderSettings } from '../../hooks/useProviderSettings';
-import { Plus, Trash2, Eye, EyeOff, Info, X, ArrowLeft, ExternalLink, Mail, Copy } from 'lucide-react';
+import { Plus, Trash2, Eye, EyeOff, Info, X, ArrowLeft, ExternalLink, Mail, Copy, FileText } from 'lucide-react';
+import PdfViewerModal from '../../components/ui/PdfViewerModal';
 
 // Kleine Helper-Komponente: Label + Mini-Link im neuen Tab. Wird neben
 // Select-Feldern eingesetzt, deren Stammdaten an anderer Stelle gepflegt
@@ -244,6 +245,8 @@ export default function ContractForm() {
   // Passwort-Sichtbarkeit
   const [showPortalPassword, setShowPortalPassword] = useState(false);
   const [showCustomerInfo, setShowCustomerInfo] = useState(false);
+  // PDF-Viewer-Modal (Bankkarte-/Ausweis-Dokument der aktuell gewählten Karte)
+  const [pdfModal, setPdfModal] = useState<{ title: string; path: string } | null>(null);
   const [showInternetPassword, setShowInternetPassword] = useState(false);
   const [showSipPasswords, setShowSipPasswords] = useState<Record<number, boolean>>({});
   const [showSimPins, setShowSimPins] = useState<Record<number, boolean>>({});
@@ -1044,6 +1047,17 @@ export default function ContractForm() {
                     <LabelWithLink to={`/customers/${customerId}?tab=bankcards`} title="Bankkarten des Kunden in neuem Tab öffnen">
                       Bankkarte
                     </LabelWithLink>
+                    {selectedBankCard?.documentPath && (
+                      <button
+                        type="button"
+                        onClick={(e) => { e.preventDefault(); e.stopPropagation(); setPdfModal({ title: 'Bankkarte – Dokument', path: selectedBankCard.documentPath! }); }}
+                        className="text-gray-400 hover:text-blue-600 p-0.5 rounded"
+                        title="Hinterlegtes Dokument anzeigen (PDF)"
+                        aria-label="Bankkarten-Dokument anzeigen"
+                      >
+                        <FileText className="w-3.5 h-3.5" />
+                      </button>
+                    )}
                     {selectedBankCard && (
                       <CopyButton value={selectedBankCard.iban} title="IBAN kopieren" />
                     )}
@@ -1070,6 +1084,17 @@ export default function ContractForm() {
                     <LabelWithLink to={`/customers/${customerId}?tab=documents`} title="Ausweise des Kunden in neuem Tab öffnen">
                       Ausweis
                     </LabelWithLink>
+                    {selectedDocument?.documentPath && (
+                      <button
+                        type="button"
+                        onClick={(e) => { e.preventDefault(); e.stopPropagation(); setPdfModal({ title: 'Ausweis – Dokument', path: selectedDocument.documentPath! }); }}
+                        className="text-gray-400 hover:text-blue-600 p-0.5 rounded"
+                        title="Hinterlegtes Dokument anzeigen (PDF)"
+                        aria-label="Ausweis-Dokument anzeigen"
+                      >
+                        <FileText className="w-3.5 h-3.5" />
+                      </button>
+                    )}
                     {selectedDocument && (
                       <CopyButton value={selectedDocument.documentNumber} title="Ausweisnummer kopieren" />
                     )}
@@ -2007,6 +2032,14 @@ export default function ContractForm() {
           contractStressfreiEmailId={selectedStressfreiEmailId ? parseInt(selectedStressfreiEmailId) : null}
         />
       )}
+
+      {/* PDF-Viewer (Bankkarte-/Ausweis-Dokument der gewählten Karte) */}
+      <PdfViewerModal
+        isOpen={!!pdfModal}
+        onClose={() => setPdfModal(null)}
+        title={pdfModal?.title || 'Dokument'}
+        path={pdfModal?.path}
+      />
     </div>
   );
 }