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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user