From 4fb700cf576c18492c9d858d62ad06843463a479 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Mon, 1 Jun 2026 07:47:40 +0200
Subject: [PATCH] Vertrags-Forms: Mini-Links zu Stammdaten in neuem Tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ContractEmailsSection (Vertragsansicht): Zusätzlich zu "Postfach
öffnen" gibt es jetzt "Stressfrei wechseln Adressen" → Tab in der
Kundenakte.

ContractForm (Bearbeiten): Kleine ExternalLink-Icons neben den
Select-Labels:
- Lieferadresse + Rechnungsadresse → Kundenakte/Adressen
- Bankkarte → Kundenakte/Bankkarten
- Ausweis → Kundenakte/Ausweise
- Anbieter + Tarif → Settings/Anbieter & Tarife
- Vertriebsplattform → Settings/Vertriebsplattformen

Select-Komponente nimmt jetzt ReactNode als label (statt nur string),
um JSX-Labels mit eingebettetem Link zu erlauben. Rückwärts-
kompatibel zu allen bestehenden String-Aufrufen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../email/ContractEmailsSection.tsx           | 10 +++
 frontend/src/components/ui/Select.tsx         |  4 +-
 frontend/src/pages/contracts/ContractForm.tsx | 68 ++++++++++++++++---
 3 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/email/ContractEmailsSection.tsx b/frontend/src/components/email/ContractEmailsSection.tsx
index d0af7255..0a5b2cc8 100644
--- a/frontend/src/components/email/ContractEmailsSection.tsx
+++ b/frontend/src/components/email/ContractEmailsSection.tsx
@@ -298,6 +298,16 @@ export default function ContractEmailsSection({
             <ExternalLink className="w-3 h-3" />
             Postfach öffnen
           </Link>
+          <Link
+            to={`/customers/${customerId}?tab=stressfrei`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 hover:underline font-normal"
+            title="Stressfrei-Wechseln-Adressen des Kunden in neuem Tab öffnen"
+          >
+            <ExternalLink className="w-3 h-3" />
+            Stressfrei wechseln Adressen
+          </Link>
         </div>
       }
       actions={
diff --git a/frontend/src/components/ui/Select.tsx b/frontend/src/components/ui/Select.tsx
index 8acc5d6f..7b421a95 100644
--- a/frontend/src/components/ui/Select.tsx
+++ b/frontend/src/components/ui/Select.tsx
@@ -1,7 +1,7 @@
-import { SelectHTMLAttributes, forwardRef } from 'react';
+import { SelectHTMLAttributes, forwardRef, ReactNode } from 'react';
 
 interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-  label?: string;
+  label?: ReactNode;
   error?: string;
   options: { value: string | number; label: string }[];
   placeholder?: string;
diff --git a/frontend/src/pages/contracts/ContractForm.tsx b/frontend/src/pages/contracts/ContractForm.tsx
index 7c6da545..95eb6a7c 100644
--- a/frontend/src/pages/contracts/ContractForm.tsx
+++ b/frontend/src/pages/contracts/ContractForm.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useNavigate, useParams, useSearchParams, useLocation } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams, useLocation, Link } from 'react-router-dom';
 import { popHistory } from '../../utils/navigation';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
@@ -12,7 +12,29 @@ import Select from '../../components/ui/Select';
 import type { ContractType } from '../../types';
 import { formatDate } from '../../utils/dateFormat';
 import { useProviderSettings } from '../../hooks/useProviderSettings';
-import { Plus, Trash2, Eye, EyeOff, Info, X, ArrowLeft } from 'lucide-react';
+import { Plus, Trash2, Eye, EyeOff, Info, X, ArrowLeft, ExternalLink } from 'lucide-react';
+
+// Kleine Helper-Komponente: Label + Mini-Link im neuen Tab. Wird neben
+// Select-Feldern eingesetzt, deren Stammdaten an anderer Stelle gepflegt
+// werden (Kundenakte, Settings) – damit der User direkt von dort in die
+// passende Verwaltungsseite springen kann.
+function LabelWithLink({ children, to, title }: { children: React.ReactNode; to: string; title: string }) {
+  return (
+    <span className="inline-flex items-center gap-2">
+      <span>{children}</span>
+      <Link
+        to={to}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="inline-flex items-center text-blue-600 hover:text-blue-800"
+        title={title}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ExternalLink className="w-3 h-3" />
+      </Link>
+    </span>
+  );
+}
 import { calculateConsumption, calculateMultiMeterConsumption } from '../../utils/energyCalculations';
 
 // Contract types are now loaded dynamically from the database
@@ -752,7 +774,11 @@ export default function ContractForm() {
             </div>
 
             <Select
-              label="Vertriebsplattform"
+              label={
+                <LabelWithLink to="/settings/platforms" title="Vertriebsplattformen verwalten (neuer Tab)">
+                  Vertriebsplattform
+                </LabelWithLink>
+              }
               {...register('salesPlatformId')}
               options={platforms.map((p) => ({ value: p.id, label: p.name }))}
             />
@@ -799,7 +825,11 @@ export default function ContractForm() {
           <Card className="mb-6" title="Kundendaten verknüpfen">
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
               <Select
-                label="Lieferadresse"
+                label={
+                  <LabelWithLink to={`/customers/${customerId}?tab=addresses`} title="Adressen des Kunden in neuem Tab öffnen">
+                    Lieferadresse
+                  </LabelWithLink>
+                }
                 {...register('addressId')}
                 options={addresses
                   .filter((a) => a.type === 'DELIVERY_RESIDENCE')
@@ -810,7 +840,11 @@ export default function ContractForm() {
               />
 
               <Select
-                label="Rechnungsadresse"
+                label={
+                  <LabelWithLink to={`/customers/${customerId}?tab=addresses`} title="Adressen des Kunden in neuem Tab öffnen">
+                    Rechnungsadresse
+                  </LabelWithLink>
+                }
                 {...register('billingAddressId')}
                 options={addresses
                   .filter((a) => a.type === 'BILLING')
@@ -823,7 +857,11 @@ export default function ContractForm() {
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
               <Select
-                label="Bankkarte"
+                label={
+                  <LabelWithLink to={`/customers/${customerId}?tab=bankcards`} title="Bankkarten des Kunden in neuem Tab öffnen">
+                    Bankkarte
+                  </LabelWithLink>
+                }
                 {...register('bankCardId')}
                 options={bankCards.map((c) => ({
                   value: c.id,
@@ -832,7 +870,11 @@ export default function ContractForm() {
               />
 
               <Select
-                label="Ausweis"
+                label={
+                  <LabelWithLink to={`/customers/${customerId}?tab=documents`} title="Ausweise des Kunden in neuem Tab öffnen">
+                    Ausweis
+                  </LabelWithLink>
+                }
                 {...register('identityDocumentId')}
                 options={documents.map((d) => ({
                   value: d.id,
@@ -846,12 +888,20 @@ export default function ContractForm() {
         <Card className="mb-6" title="Anbieter & Tarif">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <Select
-              label="Anbieter"
+              label={
+                <LabelWithLink to="/settings/providers" title="Anbieter & Tarife verwalten (neuer Tab)">
+                  Anbieter
+                </LabelWithLink>
+              }
               {...register('providerId')}
               options={providers.map((p) => ({ value: p.id, label: p.name }))}
             />
             <Select
-              label="Tarif"
+              label={
+                <LabelWithLink to="/settings/providers" title="Anbieter & Tarife verwalten (neuer Tab)">
+                  Tarif
+                </LabelWithLink>
+              }
               {...register('tariffId')}
               options={availableTariffs.map((t) => ({ value: t.id, label: t.name }))}
               disabled={!selectedProviderId}