Extract nav tabs, detail modal, table row, stats grid, search/filter, records table, pagination, and data-loading hook into _components/ and _hooks/. page.tsx reduced from 833 to 114 LOC. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
32 lines
1.2 KiB
TypeScript
32 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
interface StatsGridProps {
|
|
total: number
|
|
active: number
|
|
revoked: number
|
|
versionUpdates: number
|
|
}
|
|
|
|
export function StatsGrid({ total, active, revoked, versionUpdates }: StatsGridProps) {
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="text-sm text-gray-500">Gesamt</div>
|
|
<div className="text-3xl font-bold text-gray-900">{total}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-green-200 p-6">
|
|
<div className="text-sm text-green-600">Aktive Einwilligungen</div>
|
|
<div className="text-3xl font-bold text-green-600">{active}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-red-200 p-6">
|
|
<div className="text-sm text-red-600">Widerrufen</div>
|
|
<div className="text-3xl font-bold text-red-600">{revoked}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-blue-200 p-6">
|
|
<div className="text-sm text-blue-600">Versions-Updates</div>
|
|
<div className="text-3xl font-bold text-blue-600">{versionUpdates}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|