0125199c76
Each page.tsx exceeded the 500-LOC hard cap. Extracted components and hooks into colocated _components/ and _hooks/ directories; page.tsx is now a thin orchestrator. - controls/page.tsx: 944 → 180 LOC; extracted ControlCard, AddControlForm, LoadingSkeleton, TransitionErrorBanner, StatsCards, FilterBar, RAGPanel into _components/ and useControlsData, useRAGSuggestions into _hooks/; types into _types.ts - training/page.tsx: 780 → 288 LOC; extracted ContentTab (inline content generator tab) into _components/ContentTab.tsx - control-provenance/page.tsx: 739 → 122 LOC; extracted MarkdownRenderer, UsageBadge, PermBadge, LicenseMatrix, SourceRegistry into _components/; PROVENANCE_SECTIONS static data into _data/provenance-sections.ts - iace/[projectId]/verification/page.tsx: 673 → 196 LOC; extracted StatusBadge, VerificationForm, CompleteModal, SuggestEvidenceModal, VerificationTable into _components/ Zero behavior changes; logic relocated verbatim. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
export function StatsCards({
|
|
total,
|
|
implementedCount,
|
|
avgEffectiveness,
|
|
partialCount,
|
|
}: {
|
|
total: number
|
|
implementedCount: number
|
|
avgEffectiveness: number
|
|
partialCount: number
|
|
}) {
|
|
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">Implementiert</div>
|
|
<div className="text-3xl font-bold text-green-600">{implementedCount}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-purple-200 p-6">
|
|
<div className="text-sm text-purple-600">Durchschn. Wirksamkeit</div>
|
|
<div className="text-3xl font-bold text-purple-600">{avgEffectiveness}%</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-yellow-200 p-6">
|
|
<div className="text-sm text-yellow-600">Teilweise</div>
|
|
<div className="text-3xl font-bold text-yellow-600">{partialCount}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|