From b23ebeefc37187035d742af5b12ad1e9c46e67d7 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Wed, 24 Jun 2026 21:03:20 +0200
Subject: [PATCH] =?UTF-8?q?Vertrag-UI:=20Kunde-Link=20+=20Externtab=20+=20?=
 =?UTF-8?q?Info-Modal=20=C3=BCberall=20einheitlich?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ContractDetail (Vertragsansicht): neben dem Kunden-Link sitzt jetzt
zusätzlich ein ExternalLink-Icon, das die Kundenakte in einem neuen
Tab öffnet. Info-Icon (Schnellansicht-Modal) bleibt wie gehabt.

ContractForm (Neuer/Bearbeiten-Vertrag): bekommt unter dem Heading
dieselbe Kunden-Zeile wie ContractDetail – Customer-Name als Link,
ExternalLink-Icon für neuen Tab, Info-Icon für die
CustomerInfoModal-Schnellansicht. Nur sichtbar wenn schon ein
Kunde gewählt ist.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/pages/contracts/ContractDetail.tsx    | 10 +++++
 frontend/src/pages/contracts/ContractForm.tsx | 43 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/contracts/ContractDetail.tsx b/frontend/src/pages/contracts/ContractDetail.tsx
index 7da2df7e..8a00863f 100644
--- a/frontend/src/pages/contracts/ContractDetail.tsx
+++ b/frontend/src/pages/contracts/ContractDetail.tsx
@@ -1838,6 +1838,16 @@ export default function ContractDetail() {
               <Link to={`/customers/${c.customer.id}`} state={pushHistory(currentPath, location.state)} className="text-blue-600 hover:underline">
                 {c.customer.companyName || `${c.customer.firstName} ${c.customer.lastName}`}
               </Link>
+              <a
+                href={`/customers/${c.customer.id}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                title="Kundenakte in neuem Tab öffnen"
+                aria-label="Kundenakte in neuem Tab öffnen"
+                className="text-gray-400 hover:text-blue-600 p-1 rounded"
+              >
+                <ExternalLink className="w-4 h-4" />
+              </a>
               <button
                 type="button"
                 onClick={() => setShowCustomerInfo(true)}
diff --git a/frontend/src/pages/contracts/ContractForm.tsx b/frontend/src/pages/contracts/ContractForm.tsx
index 53441bdb..bfc793da 100644
--- a/frontend/src/pages/contracts/ContractForm.tsx
+++ b/frontend/src/pages/contracts/ContractForm.tsx
@@ -10,6 +10,7 @@ import Button from '../../components/ui/Button';
 import Input from '../../components/ui/Input';
 import Select from '../../components/ui/Select';
 import CopyButton from '../../components/ui/CopyButton';
+import CustomerInfoModal from '../../components/contracts/CustomerInfoModal';
 import type { ContractType } from '../../types';
 import { formatDate } from '../../utils/dateFormat';
 import { useProviderSettings } from '../../hooks/useProviderSettings';
@@ -221,6 +222,7 @@ export default function ContractForm() {
 
   // Passwort-Sichtbarkeit
   const [showPortalPassword, setShowPortalPassword] = useState(false);
+  const [showCustomerInfo, setShowCustomerInfo] = useState(false);
   const [showInternetPassword, setShowInternetPassword] = useState(false);
   const [showSipPasswords, setShowSipPasswords] = useState<Record<number, boolean>>({});
   const [showSimPins, setShowSimPins] = useState<Record<number, boolean>>({});
@@ -775,7 +777,7 @@ export default function ContractForm() {
 
   return (
     <div>
-      <div className="flex items-center gap-4 mb-6">
+      <div className="flex items-center gap-4 mb-2">
         <Button variant="ghost" size="sm" onClick={() => navigate(back.to, { state: back.state })}>
           <ArrowLeft className="w-4 h-4" />
         </Button>
@@ -783,6 +785,36 @@ export default function ContractForm() {
           {isEdit ? 'Vertrag bearbeiten' : 'Neuer Vertrag'}
         </h1>
       </div>
+      {customer && (
+        <p className="text-gray-500 ml-12 mb-6 flex items-center gap-1">
+          Kunde:{' '}
+          <Link
+            to={`/customers/${customer.id}`}
+            className="text-blue-600 hover:underline"
+          >
+            {customer.companyName || `${customer.firstName} ${customer.lastName}`}
+          </Link>
+          <a
+            href={`/customers/${customer.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Kundenakte in neuem Tab öffnen"
+            aria-label="Kundenakte in neuem Tab öffnen"
+            className="text-gray-400 hover:text-blue-600 p-1 rounded"
+          >
+            <ExternalLink className="w-4 h-4" />
+          </a>
+          <button
+            type="button"
+            onClick={() => setShowCustomerInfo(true)}
+            title="Wichtige Kundendaten anzeigen (Schnellansicht mit Copy-Buttons)"
+            aria-label="Kundendaten anzeigen"
+            className="text-gray-400 hover:text-blue-600 p-1 rounded"
+          >
+            <Info className="w-4 h-4" />
+          </button>
+        </p>
+      )}
 
       {error && (
         <div className="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
@@ -1764,6 +1796,15 @@ export default function ContractForm() {
 
       {/* Status-Info Modal */}
       <StatusInfoModal isOpen={showStatusInfo} onClose={() => setShowStatusInfo(false)} />
+
+      {/* Kunden-Schnellansicht */}
+      {customer && (
+        <CustomerInfoModal
+          customerId={customer.id}
+          open={showCustomerInfo}
+          onClose={() => setShowCustomerInfo(false)}
+        />
+      )}
     </div>
   );
 }