From 2d8ee7f5690acf5a669816f6fc46ec30d036728e Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Tue, 28 Jul 2026 02:51:31 +0200
Subject: [PATCH] =?UTF-8?q?Kundenportal:=20Deaktivierte-Toggle=20in=20"Mei?=
 =?UTF-8?q?ne=20Vertr=C3=A4ge"-Header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Toggle "Deaktivierte anzeigen" saß im obersten Seiten-Header.
Verschoben in den Gruppen-Header "Meine Verträge" (rechtsbündig,
nur beim eigenen Kunden-Block), damit er direkt bei den Verträgen
sitzt statt losgelöst ganz oben.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/pages/contracts/ContractList.tsx | 71 ++++++++++---------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/frontend/src/pages/contracts/ContractList.tsx b/frontend/src/pages/contracts/ContractList.tsx
index dfea187f..d6ecec70 100644
--- a/frontend/src/pages/contracts/ContractList.tsx
+++ b/frontend/src/pages/contracts/ContractList.tsx
@@ -344,27 +344,14 @@ export default function ContractList() {
     <div>
       <div className="flex items-center justify-between mb-6">
         <h1 className="text-2xl font-bold">Verträge</h1>
-        <div className="flex items-center gap-3">
-          {isCustomerPortal && (
-            <Button
-              size="sm"
-              variant={showDeactivated ? 'secondary' : 'ghost'}
-              onClick={() => setShowDeactivated((v) => !v)}
-              title="Deaktivierte Verträge ein-/ausblenden"
-            >
-              {showDeactivated ? <EyeOff className="w-4 h-4 mr-2" /> : <Eye className="w-4 h-4 mr-2" />}
-              {showDeactivated ? 'Deaktivierte ausblenden' : 'Deaktivierte anzeigen'}
+        {hasPermission('contracts:create') && !isCustomer && (
+          <Link to="/contracts/new">
+            <Button>
+              <Plus className="w-4 h-4 mr-2" />
+              Neuer Vertrag
             </Button>
-          )}
-          {hasPermission('contracts:create') && !isCustomer && (
-            <Link to="/contracts/new">
-              <Button>
-                <Plus className="w-4 h-4 mr-2" />
-                Neuer Vertrag
-              </Button>
-            </Link>
-          )}
-        </div>
+          </Link>
+        )}
       </div>
 
       <Card className="mb-6">
@@ -406,21 +393,35 @@ export default function ContractList() {
               {groupedContracts.map((group) => (
                 <Card key={group.isOwn ? 'own' : group.customerName}>
                   {/* Gruppen-Header */}
-                  <div className="flex items-center gap-3 mb-4 pb-3 border-b">
-                    {group.isOwn ? (
-                      <>
-                        <User className="w-5 h-5 text-blue-600" />
-                        <h2 className="text-lg font-semibold text-gray-900">Meine Verträge</h2>
-                        <Badge variant="default">{group.contracts.length}</Badge>
-                      </>
-                    ) : (
-                      <>
-                        <Users className="w-5 h-5 text-purple-600" />
-                        <h2 className="text-lg font-semibold text-gray-900">
-                          Verträge von {group.customerName}
-                        </h2>
-                        <Badge variant="default">{group.contracts.length}</Badge>
-                      </>
+                  <div className="flex items-center justify-between gap-3 mb-4 pb-3 border-b">
+                    <div className="flex items-center gap-3">
+                      {group.isOwn ? (
+                        <>
+                          <User className="w-5 h-5 text-blue-600" />
+                          <h2 className="text-lg font-semibold text-gray-900">Meine Verträge</h2>
+                          <Badge variant="default">{group.contracts.length}</Badge>
+                        </>
+                      ) : (
+                        <>
+                          <Users className="w-5 h-5 text-purple-600" />
+                          <h2 className="text-lg font-semibold text-gray-900">
+                            Verträge von {group.customerName}
+                          </h2>
+                          <Badge variant="default">{group.contracts.length}</Badge>
+                        </>
+                      )}
+                    </div>
+                    {/* Toggle rechtsbündig auf Höhe von "Meine Verträge" */}
+                    {group.isOwn && (
+                      <Button
+                        size="sm"
+                        variant={showDeactivated ? 'secondary' : 'ghost'}
+                        onClick={() => setShowDeactivated((v) => !v)}
+                        title="Deaktivierte Verträge ein-/ausblenden"
+                      >
+                        {showDeactivated ? <EyeOff className="w-4 h-4 mr-2" /> : <Eye className="w-4 h-4 mr-2" />}
+                        {showDeactivated ? 'Deaktivierte ausblenden' : 'Deaktivierte anzeigen'}
+                      </Button>
                     )}
                   </div>