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

feat(quaidal): backend API + frontend tab for BSI QUAIDAL data-quality controls

Browse Source 
Wire the 195 Clean-Room QUAIDAL controls (from breakpilot-core migration 011)
into the compliance SaaS UI.

Backend:
- GET /api/v1/quaidal/stats           - counts by kind + source provenance
- GET /api/v1/quaidal/controls        - list, optional kind= filter
- GET /api/v1/quaidal/controls/{id}   - single derived control
- GET /api/v1/quaidal/criteria        - 10 QKB criteria
- GET /api/v1/quaidal/criteria/{id}   - QKB with QB/MA/QM tree

Frontend:
- /sdk/quality: new "Trainingsdaten-Qualität (BSI QUAIDAL)" tab with
  10 QKB cards and a drill-down modal showing the full QB→MA→QM tree
  plus original BSI source link and license note.
- /sdk/ai-act: Art. 10 tile on each high-risk/unacceptable result,
  linking to /sdk/quality?category=data_quality.

Pattern matches existing IACE module DIN-reference handling:
own wording, source section + URL preserved for due diligence.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-05-19 13:03:54 +02:00
parent 313982c6f1
commit e536247c20
13 changed files with 821 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-compliance/app/sdk/quality/page.tsx
+56 -16
View File
@@ -1,15 +1,23 @@
'use client'
import { useState, useEffect } from 'react'
import { useSearchParams } from 'next/navigation'
import { useSDK } from '@/lib/sdk'
import { useQualityData } from './_hooks/useQualityData'
import { MetricCard, type QualityMetric } from './_components/MetricCard'
import { TestRow } from './_components/TestRow'
import { MetricModal } from './_components/MetricModal'
import { TestModal } from './_components/TestModal'
import { TrainingDataQualityTab } from './_components/TrainingDataQualityTab'
type TabId = 'model_quality' | 'data_quality'
export default function QualityPage() {
const { state } = useSDK()
const searchParams = useSearchParams()
const initialTab: TabId = searchParams?.get('category') === 'data_quality' ? 'data_quality' : 'model_quality'
const [tab, setTab] = useState<TabId>(initialTab)
const {
metrics,
tests,
@@ -41,24 +49,54 @@ export default function QualityPage() {
<h1 className="text-2xl font-bold text-gray-900">AI Quality Dashboard</h1>
<p className="mt-1 text-gray-500">Ueberwachen Sie die Qualitaet und Fairness Ihrer KI-Systeme</p>
</div>
<div className="flex items-center gap-2">
<button
onClick={() => setShowTestModal(true)}
className="flex items-center gap-2 px-4 py-2 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
Test hinzufuegen
</button>
<button
onClick={() => { setEditMetric(undefined); setShowMetricModal(true) }}
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>
Messung hinzufuegen
</button>
</div>
{tab === 'model_quality' && (
<div className="flex items-center gap-2">
<button
onClick={() => setShowTestModal(true)}
className="flex items-center gap-2 px-4 py-2 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
Test hinzufuegen
</button>
<button
onClick={() => { setEditMetric(undefined); setShowMetricModal(true) }}
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg>
Messung hinzufuegen
</button>
</div>
)}
</div>
<div className="border-b border-gray-200">
<nav className="-mb-px flex gap-6">
<button
onClick={() => setTab('model_quality')}
className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
tab === 'model_quality'
? 'border-purple-500 text-purple-600'
: 'border-transparent text-gray-500 hover:text-gray-700'
}`}
>
Modell-Qualität
</button>
<button
onClick={() => setTab('data_quality')}
className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
tab === 'data_quality'
? 'border-purple-500 text-purple-600'
: 'border-transparent text-gray-500 hover:text-gray-700'
}`}
>
Trainingsdaten-Qualität (BSI QUAIDAL)
</button>
</nav>
</div>
{tab === 'data_quality' && <TrainingDataQualityTab />}
{tab === 'model_quality' && (
<>
<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">Durchschnittlicher Score</div>
@@ -141,6 +179,8 @@ export default function QualityPage() {
</div>
</div>
</div>
</>
)}
{showMetricModal && (
<MetricModal