Benjamin_Boenisch/breakpilot-compliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(admin): split dsfa, audit-llm, quality pages

Browse Source 
Extract components and hooks from oversized page files (563/561/520 LOC)
into colocated _components/ and _hooks/ subdirectories. All three
page.tsx files are now thin orchestrators under 300 LOC each
(dsfa: 216, audit-llm: 121, quality: 163). Zero behavior changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
2026-04-16 13:20:17 +02:00
parent 653fa07f57
commit 519ffdc8dc
16 changed files with 1246 additions and 1206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
admin-compliance/app/sdk/audit-llm/_components/UsageTab.tsx Normal file
View File

@@ -0,0 +1,84 @@
'use client'
import { StatCard } from './StatCard'
import { formatNumber, formatDuration, type UsageStats } from './types'
export function UsageTab({ usageStats }: { usageStats: UsageStats }) {
return (
<div>
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
<StatCard label="Requests gesamt" value={formatNumber(usageStats.total_requests)} />
<StatCard label="Tokens gesamt" value={formatNumber(usageStats.total_tokens)} />
<StatCard label="Avg. Dauer" value={formatDuration(usageStats.avg_duration_ms)} />
<StatCard
label="PII-Rate"
value={`${(usageStats.pii_detection_rate * 100).toFixed(1)}%`}
highlight={usageStats.pii_detection_rate > 0.1}
/>
</div>
{/* Token Breakdown */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="bg-white rounded-xl border border-gray-200 p-5">
<h3 className="font-semibold text-gray-900 mb-4">Model-Nutzung</h3>
{Object.entries(usageStats.models_used || {}).length === 0 ? (
<p className="text-gray-400 text-sm">Keine Daten</p>
) : (
<div className="space-y-3">
{Object.entries(usageStats.models_used).sort((a, b) => b[1] - a[1]).map(([model, count]) => (
<div key={model} className="flex items-center justify-between">
<span className="text-sm text-gray-700">{model}</span>
<div className="flex items-center gap-3">
<div className="w-32 h-2 bg-gray-100 rounded-full overflow-hidden">
<div
className="h-full bg-purple-500 rounded-full"
style={{ width: `${(count / usageStats.total_requests) * 100}%` }}
/>
</div>
<span className="text-sm font-mono text-gray-500 w-16 text-right">{formatNumber(count)}</span>
</div>
</div>
))}
</div>
)}
</div>
<div className="bg-white rounded-xl border border-gray-200 p-5">
<h3 className="font-semibold text-gray-900 mb-4">Provider-Verteilung</h3>
{Object.entries(usageStats.providers_used || {}).length === 0 ? (
<p className="text-gray-400 text-sm">Keine Daten</p>
) : (
<div className="space-y-3">
{Object.entries(usageStats.providers_used).sort((a, b) => b[1] - a[1]).map(([provider, count]) => (
<div key={provider} className="flex items-center justify-between">
<span className="text-sm text-gray-700 capitalize">{provider}</span>
<span className="text-sm font-mono text-gray-500">{formatNumber(count)}</span>
</div>
))}
</div>
)}
</div>
</div>
{/* Token Details */}
<div className="mt-6 bg-white rounded-xl border border-gray-200 p-5">
<h3 className="font-semibold text-gray-900 mb-4">Token-Aufschluesselung</h3>
<div className="grid grid-cols-3 gap-4">
<div className="text-center">
<div className="text-2xl font-bold text-gray-900">{formatNumber(usageStats.total_prompt_tokens)}</div>
<div className="text-sm text-gray-500">Prompt Tokens</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-gray-900">{formatNumber(usageStats.total_completion_tokens)}</div>
<div className="text-sm text-gray-500">Completion Tokens</div>
</div>
<div className="text-center">
<div className="text-2xl font-bold text-purple-600">{formatNumber(usageStats.total_tokens)}</div>
<div className="text-sm text-gray-500">Gesamt</div>
</div>
</div>
</div>
</div>
)
}