From 06d51cf68049114a1deb8162f28a08dfc1eade10 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Thu, 13 Aug 2026 13:15:57 +0200
Subject: [PATCH] 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>
---
 docs/todo.md                                  | 12 ++++
 frontend/src/components/ui/PdfViewerModal.tsx | 55 +++++++++++++++++++
 .../src/pages/contracts/ContractDetail.tsx    | 42 +++++++++++++-
 frontend/src/pages/contracts/ContractForm.tsx | 35 +++++++++++-
 4 files changed, 141 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/ui/PdfViewerModal.tsx

diff --git a/docs/todo.md b/docs/todo.md
index 945b41c3..6ec004c1 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -97,6 +97,18 @@ isolierte Instanz (keine Multi-Tenancy im Code), Provisioning + Abrechnung
 
 ## ✅ Erledigt
 
+- [x] **📄 PDF-Viewer-Modal für Bankkarte-/Ausweis-Dokument** (2026-08-13)
+  - Neue wiederverwendbare Komponente `PdfViewerModal` (Modal + `<iframe>` auf
+    `viewUrl(documentPath)`, inkl. „In neuem Tab" + „Herunterladen"). Nutzt den
+    bestehenden `/api/files/download`-Endpoint (Per-File-Ownership-Check) – kein
+    neuer Zugriffspfad. `<iframe>` erlaubt via CSP `default-src 'self'`
+    (`object-src 'none'` bleibt, daher iframe statt embed/object).
+  - **Vertragsansicht** (ContractDetail): Button (FileText-Icon) im Card-Header
+    von „Bankkarte"/„Ausweis" – **nur wenn `documentPath` gesetzt**.
+  - **Vertrag bearbeiten** (ContractForm): Button neben dem Label „Bankkarte"/
+    „Ausweis" – **nur wenn die aktuell gewählte Karte/Ausweis ein `documentPath`
+    hat** (`e.preventDefault/stopPropagation`, da im `<label>`).
+
 - [x] **📇 Vertragslisten: Karteninhaber + Mobilfunknetz + Kündigung (rot)** (2026-08-13)
   - In **beiden** Vertragslisten (Kundenakte-Baum + Hauptmenü `/contracts`): bei
     Mobilfunkverträgen mit Rufnummer zusätzlich **Karteninhaber** (`SimCard.cardUser`
diff --git a/frontend/src/components/ui/PdfViewerModal.tsx b/frontend/src/components/ui/PdfViewerModal.tsx
new file mode 100644
index 00000000..068b4d0f
--- /dev/null
+++ b/frontend/src/components/ui/PdfViewerModal.tsx
@@ -0,0 +1,55 @@
+import Modal from './Modal';
+import { viewUrl, fileUrl } from '../../utils/fileUrl';
+import { ExternalLink, Download } from 'lucide-react';
+
+interface PdfViewerModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  /** Relativer Upload-Pfad des Dokuments (documentPath). */
+  path: string | null | undefined;
+}
+
+/**
+ * Zeigt ein hochgeladenes PDF (Bankkarte/Ausweis) inline in einem Modal.
+ *
+ * Die Datei wird über `viewUrl(path)` geladen → `/api/files/download` mit
+ * `disposition=inline` und Token als Query-Param (iframe/GET, kein
+ * Authorization-Header möglich). Der Backend-Controller macht weiterhin den
+ * Per-File-Ownership-Check – hier wird kein neuer Zugriffspfad geöffnet.
+ */
+export default function PdfViewerModal({ isOpen, onClose, title, path }: PdfViewerModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={title} size="xl">
+      {path ? (
+        <div className="space-y-3">
+          <div className="flex justify-end gap-4 text-sm">
+            <a
+              href={viewUrl(path)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800"
+            >
+              <ExternalLink className="w-4 h-4" /> In neuem Tab öffnen
+            </a>
+            <a
+              href={fileUrl(path)}
+              className="inline-flex items-center gap-1 text-blue-600 hover:text-blue-800"
+            >
+              <Download className="w-4 h-4" /> Herunterladen
+            </a>
+          </div>
+          <iframe
+            src={viewUrl(path)}
+            title={title}
+            className="w-full h-[75vh] border border-gray-200 rounded bg-gray-50"
+          />
+        </div>
+      ) : (
+        <p className="text-sm text-gray-500">Kein Dokument hinterlegt.</p>
+      )}
+    </Modal>
+  );
+}
diff --git a/frontend/src/pages/contracts/ContractDetail.tsx b/frontend/src/pages/contracts/ContractDetail.tsx
index 7685fe9a..0a74823d 100644
--- a/frontend/src/pages/contracts/ContractDetail.tsx
+++ b/frontend/src/pages/contracts/ContractDetail.tsx
@@ -14,6 +14,7 @@ import Button from '../../components/ui/Button';
 import Badge from '../../components/ui/Badge';
 import Input from '../../components/ui/Input';
 import Modal from '../../components/ui/Modal';
+import PdfViewerModal from '../../components/ui/PdfViewerModal';
 import FileUpload from '../../components/ui/FileUpload';
 import { Edit, Trash2, Copy, Eye, EyeOff, ArrowLeft, ArrowRight, Download, ExternalLink, Plus, ChevronDown, ChevronUp, Gauge, CheckCircle, Circle, ClipboardList, MessageSquare, Calculator, Info, X, BellOff, Lock, Shield, FileText, Images } from 'lucide-react';
 import toast from 'react-hot-toast';
@@ -1551,6 +1552,9 @@ export default function ContractDetail() {
   // Kunden-Schnellansicht-Modal
   const [showCustomerInfo, setShowCustomerInfo] = useState(false);
 
+  // PDF-Viewer-Modal (Bankkarte-/Ausweis-Dokument)
+  const [pdfModal, setPdfModal] = useState<{ title: string; path: string } | null>(null);
+
   const { data, isLoading } = useQuery({
     queryKey: ['contract', id],
     queryFn: () => contractApi.getById(contractId),
@@ -2658,7 +2662,20 @@ export default function ContractDetail() {
           </Card>
         )}
         {c.bankCard && (
-          <Card title="Bankkarte">
+          <Card
+            title="Bankkarte"
+            actions={c.bankCard.documentPath ? (
+              <button
+                type="button"
+                onClick={() => setPdfModal({ title: 'Bankkarte – Dokument', path: c.bankCard!.documentPath! })}
+                className="text-gray-400 hover:text-blue-600 p-1 rounded"
+                title="Hinterlegtes Dokument anzeigen (PDF)"
+                aria-label="Bankkarten-Dokument anzeigen"
+              >
+                <FileText className="w-4 h-4" />
+              </button>
+            ) : undefined}
+          >
             <p className="font-medium">{c.bankCard.accountHolder}</p>
             <p className="font-mono flex items-center gap-1">
               {c.bankCard.iban}
@@ -2673,7 +2690,20 @@ export default function ContractDetail() {
           </Card>
         )}
         {c.identityDocument && (
-          <Card title="Ausweis">
+          <Card
+            title="Ausweis"
+            actions={c.identityDocument.documentPath ? (
+              <button
+                type="button"
+                onClick={() => setPdfModal({ title: 'Ausweis – Dokument', path: c.identityDocument!.documentPath! })}
+                className="text-gray-400 hover:text-blue-600 p-1 rounded"
+                title="Hinterlegtes Dokument anzeigen (PDF)"
+                aria-label="Ausweis-Dokument anzeigen"
+              >
+                <FileText className="w-4 h-4" />
+              </button>
+            ) : undefined}
+          >
             <p className="font-mono flex items-center gap-1">
               {c.identityDocument.documentNumber}
               <CopyButton value={c.identityDocument.documentNumber} />
@@ -3372,6 +3402,14 @@ export default function ContractDetail() {
         />
       )}
 
+      {/* PDF-Viewer (Bankkarte-/Ausweis-Dokument) */}
+      <PdfViewerModal
+        isOpen={!!pdfModal}
+        onClose={() => setPdfModal(null)}
+        title={pdfModal?.title || 'Dokument'}
+        path={pdfModal?.path}
+      />
+
       {/* Vorgängervertrag Modal */}
       {showPredecessorModal && c.previousContract && (
         <ContractDetailModal
diff --git a/frontend/src/pages/contracts/ContractForm.tsx b/frontend/src/pages/contracts/ContractForm.tsx
index 38f2efb1..c99660c3 100644
--- a/frontend/src/pages/contracts/ContractForm.tsx
+++ b/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>
   );
 }