Kundenportal: Deaktivierte-Toggle in "Meine Verträge"-Header

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>
This commit is contained in:
2026-07-28 02:51:31 +02:00
co-authored by Claude Opus 4.7
parent cda6d2814e
commit 2d8ee7f569
+36 -35
View File
@@ -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>