merge: Feature-Module (Payment, BetrVG, FISA 702) in refakturierten main
Some checks failed
Build + Deploy / build-admin-compliance (push) Successful in 1m30s
Build + Deploy / build-backend-compliance (push) Successful in 13s
Build + Deploy / build-ai-sdk (push) Failing after 29s
Build + Deploy / build-developer-portal (push) Successful in 6s
Build + Deploy / build-tts (push) Successful in 6s
Build + Deploy / build-document-crawler (push) Successful in 6s
Build + Deploy / build-dsms-gateway (push) Successful in 6s
Build + Deploy / trigger-orca (push) Has been skipped
CI / branch-name (push) Has been skipped
CI / guardrail-integrity (push) Has been skipped
CI / loc-budget (push) Failing after 12s
CI / secret-scan (push) Has been skipped
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / nodejs-build (push) Successful in 2m18s
CI / dep-audit (push) Has been skipped
CI / sbom-scan (push) Has been skipped
CI / test-go (push) Failing after 29s
CI / test-python-backend (push) Successful in 34s
CI / test-python-document-crawler (push) Successful in 23s
CI / test-python-dsms-gateway (push) Successful in 19s
CI / validate-canonical-controls (push) Successful in 30s

Merged feature/fisa-702-drittland-risiko in den refakturierten main-Branch.
Konflikte in 8 Dateien aufgelöst — neue Features in die aufgesplittete
Modulstruktur integriert.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-22 23:52:11 +02:00
58 changed files with 15705 additions and 445 deletions

View File

@@ -0,0 +1,47 @@
import { NextRequest, NextResponse } from 'next/server'
const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
try {
const { id } = await params
const resp = await fetch(`${SDK_URL}/sdk/v1/ai-registration/${id}`)
const data = await resp.json()
return NextResponse.json(data)
} catch (err) {
return NextResponse.json({ error: 'Failed to fetch registration' }, { status: 500 })
}
}
export async function PUT(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
try {
const { id } = await params
const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
const body = await request.json()
const resp = await fetch(`${SDK_URL}/sdk/v1/ai-registration/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
body: JSON.stringify(body),
})
const data = await resp.json()
return NextResponse.json(data, { status: resp.status })
} catch (err) {
return NextResponse.json({ error: 'Failed to update registration' }, { status: 500 })
}
}
export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
try {
const { id } = await params
const body = await request.json()
const resp = await fetch(`${SDK_URL}/sdk/v1/ai-registration/${id}/status`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
})
const data = await resp.json()
return NextResponse.json(data, { status: resp.status })
} catch (err) {
return NextResponse.json({ error: 'Failed to update status' }, { status: 500 })
}
}

View File

@@ -0,0 +1,32 @@
import { NextRequest, NextResponse } from 'next/server'
const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
export async function GET(request: NextRequest) {
try {
const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
const resp = await fetch(`${SDK_URL}/sdk/v1/ai-registration`, {
headers: { 'X-Tenant-ID': tenantId },
})
const data = await resp.json()
return NextResponse.json(data)
} catch (err) {
return NextResponse.json({ error: 'Failed to fetch registrations' }, { status: 500 })
}
}
export async function POST(request: NextRequest) {
try {
const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
const body = await request.json()
const resp = await fetch(`${SDK_URL}/sdk/v1/ai-registration`, {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
body: JSON.stringify(body),
})
const data = await resp.json()
return NextResponse.json(data, { status: resp.status })
} catch (err) {
return NextResponse.json({ error: 'Failed to create registration' }, { status: 500 })
}
}

View File

@@ -0,0 +1,48 @@
import { NextRequest, NextResponse } from 'next/server'
const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
export async function GET(request: NextRequest) {
try {
const { searchParams } = new URL(request.url)
const endpoint = searchParams.get('endpoint') || 'controls'
const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
let path: string
switch (endpoint) {
case 'controls':
const domain = searchParams.get('domain') || ''
path = `/sdk/v1/payment-compliance/controls${domain ? `?domain=${domain}` : ''}`
break
case 'assessments':
path = '/sdk/v1/payment-compliance/assessments'
break
default:
path = '/sdk/v1/payment-compliance/controls'
}
const resp = await fetch(`${SDK_URL}${path}`, {
headers: { 'X-Tenant-ID': tenantId },
})
const data = await resp.json()
return NextResponse.json(data)
} catch (err) {
return NextResponse.json({ error: 'Failed to fetch' }, { status: 500 })
}
}
export async function POST(request: NextRequest) {
try {
const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
const body = await request.json()
const resp = await fetch(`${SDK_URL}/sdk/v1/payment-compliance/assessments`, {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
body: JSON.stringify(body),
})
const data = await resp.json()
return NextResponse.json(data, { status: resp.status })
} catch (err) {
return NextResponse.json({ error: 'Failed to create' }, { status: 500 })
}
}

View File

@@ -0,0 +1,28 @@
import { NextRequest, NextResponse } from 'next/server'
const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
try {
const { id } = await params
const resp = await fetch(`${SDK_URL}/sdk/v1/payment-compliance/tender/${id}`)
return NextResponse.json(await resp.json())
} catch {
return NextResponse.json({ error: 'Failed' }, { status: 500 })
}
}
export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
try {
const { id } = await params
const { searchParams } = new URL(request.url)
const action = searchParams.get('action') || 'extract'
const resp = await fetch(`${SDK_URL}/sdk/v1/payment-compliance/tender/${id}/${action}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
})
return NextResponse.json(await resp.json(), { status: resp.status })
} catch {
return NextResponse.json({ error: 'Failed' }, { status: 500 })
}
}

View File

@@ -0,0 +1,30 @@
import { NextRequest, NextResponse } from 'next/server'
const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
export async function GET(request: NextRequest) {
try {
const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
const resp = await fetch(`${SDK_URL}/sdk/v1/payment-compliance/tender`, {
headers: { 'X-Tenant-ID': tenantId },
})
return NextResponse.json(await resp.json())
} catch {
return NextResponse.json({ error: 'Failed' }, { status: 500 })
}
}
export async function POST(request: NextRequest) {
try {
const tenantId = request.headers.get('x-tenant-id') || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
const formData = await request.formData()
const resp = await fetch(`${SDK_URL}/sdk/v1/payment-compliance/tender/upload`, {
method: 'POST',
headers: { 'X-Tenant-ID': tenantId },
body: formData,
})
return NextResponse.json(await resp.json(), { status: resp.status })
} catch {
return NextResponse.json({ error: 'Upload failed' }, { status: 500 })
}
}

View File

@@ -0,0 +1,57 @@
import { NextRequest, NextResponse } from 'next/server'
const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
const DEFAULT_TENANT = process.env.DEFAULT_TENANT_ID || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
/**
* Proxy: /api/sdk/v1/ucca/decision-tree/... → Go Backend /sdk/v1/ucca/decision-tree/...
*/
async function proxyRequest(request: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
const { path } = await params
const subPath = path ? path.join('/') : ''
const search = request.nextUrl.search || ''
const targetUrl = `${SDK_URL}/sdk/v1/ucca/decision-tree/${subPath}${search}`
const tenantID = request.headers.get('X-Tenant-ID') || DEFAULT_TENANT
try {
const headers: Record<string, string> = {
'X-Tenant-ID': tenantID,
}
const fetchOptions: RequestInit = {
method: request.method,
headers,
}
if (request.method === 'POST' || request.method === 'PUT' || request.method === 'PATCH') {
const body = await request.json()
headers['Content-Type'] = 'application/json'
fetchOptions.body = JSON.stringify(body)
}
const response = await fetch(targetUrl, fetchOptions)
if (!response.ok) {
const errorText = await response.text()
console.error(`Decision tree proxy error [${request.method} ${subPath}]:`, errorText)
return NextResponse.json(
{ error: 'Backend error', details: errorText },
{ status: response.status }
)
}
const data = await response.json()
return NextResponse.json(data, { status: response.status })
} catch (error) {
console.error('Decision tree proxy connection error:', error)
return NextResponse.json(
{ error: 'Failed to connect to AI compliance backend' },
{ status: 503 }
)
}
}
export const GET = proxyRequest
export const POST = proxyRequest
export const DELETE = proxyRequest

View File

@@ -0,0 +1,36 @@
import { NextRequest, NextResponse } from 'next/server'
const SDK_URL = process.env.SDK_URL || 'http://ai-compliance-sdk:8090'
const DEFAULT_TENANT = process.env.DEFAULT_TENANT_ID || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'
/**
* Proxy: GET /api/sdk/v1/ucca/decision-tree → Go Backend GET /sdk/v1/ucca/decision-tree
* Returns the decision tree definition (questions, structure)
*/
export async function GET(request: NextRequest) {
const tenantID = request.headers.get('X-Tenant-ID') || DEFAULT_TENANT
try {
const response = await fetch(`${SDK_URL}/sdk/v1/ucca/decision-tree`, {
headers: { 'X-Tenant-ID': tenantID },
})
if (!response.ok) {
const errorText = await response.text()
console.error('Decision tree GET error:', errorText)
return NextResponse.json(
{ error: 'Backend error', details: errorText },
{ status: response.status }
)
}
const data = await response.json()
return NextResponse.json(data)
} catch (error) {
console.error('Decision tree proxy error:', error)
return NextResponse.json(
{ error: 'Failed to connect to AI compliance backend' },
{ status: 503 }
)
}
}

View File

@@ -7,6 +7,116 @@ export interface AdvisoryForm {
custom_data_types: string[]
purposes: string[]
automation: string
// BetrVG / works council
employee_monitoring: boolean
hr_decision_support: boolean
works_council_consulted: boolean
// Domain-specific contexts (Annex III)
hr_automated_screening: boolean
hr_automated_rejection: boolean
hr_candidate_ranking: boolean
hr_bias_audits: boolean
hr_agg_visible: boolean
hr_human_review: boolean
hr_performance_eval: boolean
edu_grade_influence: boolean
edu_exam_evaluation: boolean
edu_student_selection: boolean
edu_minors: boolean
edu_teacher_review: boolean
hc_diagnosis: boolean
hc_treatment: boolean
hc_triage: boolean
hc_patient_data: boolean
hc_medical_device: boolean
hc_clinical_validation: boolean
// Legal
leg_legal_advice: boolean
leg_court_prediction: boolean
leg_client_confidential: boolean
// Public Sector
pub_admin_decision: boolean
pub_benefit_allocation: boolean
pub_transparency: boolean
// Critical Infrastructure
crit_grid_control: boolean
crit_safety_critical: boolean
crit_redundancy: boolean
// Automotive
auto_autonomous: boolean
auto_safety: boolean
auto_functional_safety: boolean
// Retail
ret_pricing: boolean
ret_profiling: boolean
ret_credit_scoring: boolean
ret_dark_patterns: boolean
// IT Security
its_surveillance: boolean
its_threat_detection: boolean
its_data_retention: boolean
// Logistics
log_driver_tracking: boolean
log_workload_scoring: boolean
// Construction
con_tenant_screening: boolean
con_worker_safety: boolean
// Marketing
mkt_deepfake: boolean
mkt_minors: boolean
mkt_targeting: boolean
mkt_labeled: boolean
// Manufacturing
mfg_machine_safety: boolean
mfg_ce_required: boolean
mfg_validated: boolean
// Agriculture
agr_pesticide: boolean
agr_animal_welfare: boolean
agr_environmental: boolean
// Social Services
soc_vulnerable: boolean
soc_benefit: boolean
soc_case_mgmt: boolean
// Hospitality
hos_guest_profiling: boolean
hos_dynamic_pricing: boolean
hos_review_manipulation: boolean
// Insurance
ins_risk_class: boolean
ins_claims: boolean
ins_premium: boolean
ins_fraud: boolean
// Investment
inv_algo_trading: boolean
inv_advice: boolean
inv_robo: boolean
// Defense
def_dual_use: boolean
def_export: boolean
def_classified: boolean
// Supply Chain
sch_supplier: boolean
sch_human_rights: boolean
sch_environmental: boolean
// Facility
fac_access: boolean
fac_occupancy: boolean
fac_energy: boolean
// Sports
spo_athlete: boolean
spo_fan: boolean
spo_doping: boolean
// Finance / Banking
fin_credit_scoring: boolean
fin_aml_kyc: boolean
fin_algo_decisions: boolean
fin_customer_profiling: boolean
// General
gen_affects_people: boolean
gen_automated_decisions: boolean
gen_sensitive_data: boolean
// Hosting
hosting_provider: string
hosting_region: string
model_usage: string[]

View File

@@ -51,6 +51,71 @@ function AdvisoryBoardPageInner() {
custom_data_types: [],
purposes: [],
automation: '',
// BetrVG / works council
employee_monitoring: false,
hr_decision_support: false,
works_council_consulted: false,
// Domain-specific contexts (Annex III)
hr_automated_screening: false,
hr_automated_rejection: false,
hr_candidate_ranking: false,
hr_bias_audits: false,
hr_agg_visible: false,
hr_human_review: false,
hr_performance_eval: false,
edu_grade_influence: false,
edu_exam_evaluation: false,
edu_student_selection: false,
edu_minors: false,
edu_teacher_review: false,
hc_diagnosis: false,
hc_treatment: false,
hc_triage: false,
hc_patient_data: false,
hc_medical_device: false,
hc_clinical_validation: false,
// Legal
leg_legal_advice: false, leg_court_prediction: false, leg_client_confidential: false,
// Public Sector
pub_admin_decision: false, pub_benefit_allocation: false, pub_transparency: false,
// Critical Infrastructure
crit_grid_control: false, crit_safety_critical: false, crit_redundancy: false,
// Automotive
auto_autonomous: false, auto_safety: false, auto_functional_safety: false,
// Retail
ret_pricing: false, ret_profiling: false, ret_credit_scoring: false, ret_dark_patterns: false,
// IT Security
its_surveillance: false, its_threat_detection: false, its_data_retention: false,
// Logistics
log_driver_tracking: false, log_workload_scoring: false,
// Construction
con_tenant_screening: false, con_worker_safety: false,
// Marketing
mkt_deepfake: false, mkt_minors: false, mkt_targeting: false, mkt_labeled: false,
// Manufacturing
mfg_machine_safety: false, mfg_ce_required: false, mfg_validated: false,
// Agriculture
agr_pesticide: false, agr_animal_welfare: false, agr_environmental: false,
// Social Services
soc_vulnerable: false, soc_benefit: false, soc_case_mgmt: false,
// Hospitality
hos_guest_profiling: false, hos_dynamic_pricing: false, hos_review_manipulation: false,
// Insurance
ins_risk_class: false, ins_claims: false, ins_premium: false, ins_fraud: false,
// Investment
inv_algo_trading: false, inv_advice: false, inv_robo: false,
// Defense
def_dual_use: false, def_export: false, def_classified: false,
// Supply Chain
sch_supplier: false, sch_human_rights: false, sch_environmental: false,
// Facility
fac_access: false, fac_occupancy: false, fac_energy: false,
// Sports
spo_athlete: false, spo_fan: false, spo_doping: false,
// Finance / Banking
fin_credit_scoring: false, fin_aml_kyc: false, fin_algo_decisions: false, fin_customer_profiling: false,
// General
gen_affects_people: false, gen_automated_decisions: false, gen_sensitive_data: false,
hosting_provider: '',
hosting_region: '',
model_usage: [],
@@ -133,7 +198,131 @@ function AdvisoryBoardPageInner() {
retention_purpose: form.retention_purpose,
contracts_list: form.contracts,
subprocessors: form.subprocessors,
employee_monitoring: form.employee_monitoring,
hr_decision_support: form.hr_decision_support,
works_council_consulted: form.works_council_consulted,
// Domain-specific contexts
hr_context: ['hr', 'recruiting'].includes(form.domain) ? {
automated_screening: form.hr_automated_screening,
automated_rejection: form.hr_automated_rejection,
candidate_ranking: form.hr_candidate_ranking,
bias_audits_done: form.hr_bias_audits,
agg_categories_visible: form.hr_agg_visible,
human_review_enforced: form.hr_human_review,
performance_evaluation: form.hr_performance_eval,
} : undefined,
education_context: ['education', 'higher_education', 'vocational_training', 'research'].includes(form.domain) ? {
grade_influence: form.edu_grade_influence,
exam_evaluation: form.edu_exam_evaluation,
student_selection: form.edu_student_selection,
minors_involved: form.edu_minors,
teacher_review_required: form.edu_teacher_review,
} : undefined,
healthcare_context: ['healthcare', 'medical_devices', 'pharma', 'elderly_care'].includes(form.domain) ? {
diagnosis_support: form.hc_diagnosis,
treatment_recommendation: form.hc_treatment,
triage_decision: form.hc_triage,
patient_data_processed: form.hc_patient_data,
medical_device: form.hc_medical_device,
clinical_validation: form.hc_clinical_validation,
} : undefined,
legal_context: ['legal', 'consulting', 'tax_advisory'].includes(form.domain) ? {
legal_advice: form.leg_legal_advice,
court_prediction: form.leg_court_prediction,
client_confidential: form.leg_client_confidential,
} : undefined,
public_sector_context: ['public_sector', 'defense', 'justice'].includes(form.domain) ? {
admin_decision: form.pub_admin_decision,
benefit_allocation: form.pub_benefit_allocation,
transparency_ensured: form.pub_transparency,
} : undefined,
critical_infra_context: ['energy', 'utilities', 'oil_gas'].includes(form.domain) ? {
grid_control: form.crit_grid_control,
safety_critical: form.crit_safety_critical,
redundancy_exists: form.crit_redundancy,
} : undefined,
automotive_context: ['automotive', 'aerospace'].includes(form.domain) ? {
autonomous_driving: form.auto_autonomous,
safety_relevant: form.auto_safety,
functional_safety: form.auto_functional_safety,
} : undefined,
retail_context: ['retail', 'ecommerce', 'wholesale'].includes(form.domain) ? {
pricing_personalized: form.ret_pricing,
credit_scoring: form.ret_credit_scoring,
dark_patterns: form.ret_dark_patterns,
} : undefined,
it_security_context: ['it_services', 'cybersecurity', 'telecom'].includes(form.domain) ? {
employee_surveillance: form.its_surveillance,
threat_detection: form.its_threat_detection,
data_retention_logs: form.its_data_retention,
} : undefined,
logistics_context: ['logistics'].includes(form.domain) ? {
driver_tracking: form.log_driver_tracking,
workload_scoring: form.log_workload_scoring,
} : undefined,
construction_context: ['construction', 'real_estate', 'facility_management'].includes(form.domain) ? {
tenant_screening: form.con_tenant_screening,
worker_safety: form.con_worker_safety,
} : undefined,
marketing_context: ['marketing', 'media', 'entertainment'].includes(form.domain) ? {
deepfake_content: form.mkt_deepfake,
behavioral_targeting: form.mkt_targeting,
minors_targeted: form.mkt_minors,
ai_content_labeled: form.mkt_labeled,
} : undefined,
manufacturing_context: ['mechanical_engineering', 'electrical_engineering', 'plant_engineering', 'chemicals', 'food_beverage'].includes(form.domain) ? {
machine_safety: form.mfg_machine_safety,
ce_marking_required: form.mfg_ce_required,
safety_validated: form.mfg_validated,
} : undefined,
agriculture_context: ['agriculture', 'forestry', 'fishing'].includes(form.domain) ? {
pesticide_ai: form.agr_pesticide,
animal_welfare: form.agr_animal_welfare,
environmental_data: form.agr_environmental,
} : undefined,
social_services_context: ['social_services', 'nonprofit'].includes(form.domain) ? {
vulnerable_groups: form.soc_vulnerable,
benefit_decision: form.soc_benefit,
case_management: form.soc_case_mgmt,
} : undefined,
hospitality_context: ['hospitality', 'tourism'].includes(form.domain) ? {
guest_profiling: form.hos_guest_profiling,
dynamic_pricing: form.hos_dynamic_pricing,
review_manipulation: form.hos_review_manipulation,
} : undefined,
insurance_context: ['insurance'].includes(form.domain) ? {
risk_classification: form.ins_risk_class,
claims_automation: form.ins_claims,
premium_calculation: form.ins_premium,
fraud_detection: form.ins_fraud,
} : undefined,
investment_context: ['investment'].includes(form.domain) ? {
algo_trading: form.inv_algo_trading,
investment_advice: form.inv_advice,
robo_advisor: form.inv_robo,
} : undefined,
defense_context: ['defense'].includes(form.domain) ? {
dual_use: form.def_dual_use,
export_controlled: form.def_export,
classified_data: form.def_classified,
} : undefined,
supply_chain_context: ['textiles', 'packaging'].includes(form.domain) ? {
supplier_monitoring: form.sch_supplier,
human_rights_check: form.sch_human_rights,
environmental_impact: form.sch_environmental,
} : undefined,
facility_context: ['facility_management'].includes(form.domain) ? {
access_control_ai: form.fac_access,
occupancy_tracking: form.fac_occupancy,
energy_optimization: form.fac_energy,
} : undefined,
sports_context: ['sports'].includes(form.domain) ? {
athlete_tracking: form.spo_athlete,
fan_profiling: form.spo_fan,
} : undefined,
store_raw_text: true,
// Finance/Banking and General don't need separate context structs —
// their fields are evaluated via existing FinancialContext or generic rules
}
const url = isEditMode

View File

@@ -8,9 +8,178 @@ import { LoadingSkeleton } from './_components/LoadingSkeleton'
import { RiskPyramid } from './_components/RiskPyramid'
import { AddSystemForm } from './_components/AddSystemForm'
import { AISystemCard } from './_components/AISystemCard'
import DecisionTreeWizard from '@/components/sdk/ai-act/DecisionTreeWizard'
type TabId = 'overview' | 'decision-tree' | 'results'
// SAVED RESULTS TAB
// =============================================================================
interface SavedResult {
id: string
system_name: string
system_description?: string
high_risk_result: string
gpai_result: { gpai_category: string; is_systemic_risk: boolean }
combined_obligations: string[]
created_at: string
}
function SavedResultsTab() {
const [results, setResults] = useState<SavedResult[]>([])
const [loading, setLoading] = useState(true)
useEffect(() => {
const load = async () => {
try {
const res = await fetch('/api/sdk/v1/ucca/decision-tree/results')
if (res.ok) {
const data = await res.json()
setResults(data.results || [])
}
} catch {
// Ignore
} finally {
setLoading(false)
}
}
load()
}, [])
const handleDelete = async (id: string) => {
if (!confirm('Ergebnis wirklich löschen?')) return
try {
const res = await fetch(`/api/sdk/v1/ucca/decision-tree/results/${id}`, { method: 'DELETE' })
if (res.ok) {
setResults(prev => prev.filter(r => r.id !== id))
}
} catch {
// Ignore
}
}
const riskLabels: Record<string, string> = {
unacceptable: 'Unzulässig',
high_risk: 'Hochrisiko',
limited_risk: 'Begrenztes Risiko',
minimal_risk: 'Minimales Risiko',
not_applicable: 'Nicht anwendbar',
}
const riskColors: Record<string, string> = {
unacceptable: 'bg-red-100 text-red-700',
high_risk: 'bg-orange-100 text-orange-700',
limited_risk: 'bg-yellow-100 text-yellow-700',
minimal_risk: 'bg-green-100 text-green-700',
not_applicable: 'bg-gray-100 text-gray-500',
}
const gpaiLabels: Record<string, string> = {
none: 'Kein GPAI',
standard: 'GPAI Standard',
systemic: 'GPAI Systemisch',
}
const gpaiColors: Record<string, string> = {
none: 'bg-gray-100 text-gray-500',
standard: 'bg-blue-100 text-blue-700',
systemic: 'bg-purple-100 text-purple-700',
}
if (loading) {
return <LoadingSkeleton />
}
if (results.length === 0) {
return (
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
<div className="w-16 h-16 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
<svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<h3 className="text-lg font-semibold text-gray-900">Keine Ergebnisse vorhanden</h3>
<p className="mt-2 text-gray-500">Nutzen Sie den Entscheidungsbaum, um KI-Systeme zu klassifizieren.</p>
</div>
)
}
return (
<div className="space-y-4">
{results.map(r => (
<div key={r.id} className="bg-white rounded-xl border border-gray-200 p-5">
<div className="flex items-start justify-between">
<div>
<h4 className="font-semibold text-gray-900">{r.system_name}</h4>
{r.system_description && (
<p className="text-sm text-gray-500 mt-0.5">{r.system_description}</p>
)}
<div className="flex items-center gap-2 mt-2">
<span className={`px-2 py-1 text-xs rounded-full ${riskColors[r.high_risk_result] || 'bg-gray-100 text-gray-500'}`}>
{riskLabels[r.high_risk_result] || r.high_risk_result}
</span>
<span className={`px-2 py-1 text-xs rounded-full ${gpaiColors[r.gpai_result?.gpai_category] || 'bg-gray-100 text-gray-500'}`}>
{gpaiLabels[r.gpai_result?.gpai_category] || 'Kein GPAI'}
</span>
{r.gpai_result?.is_systemic_risk && (
<span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-700">Systemisch</span>
)}
</div>
<div className="text-xs text-gray-400 mt-2">
{r.combined_obligations?.length || 0} Pflichten &middot; {new Date(r.created_at).toLocaleDateString('de-DE')}
</div>
</div>
<button
onClick={() => handleDelete(r.id)}
className="px-3 py-1 text-xs text-red-600 hover:bg-red-50 rounded transition-colors"
>
Löschen
</button>
</div>
</div>
))}
</div>
)
}
// TABS
// =============================================================================
const TABS: { id: TabId; label: string; icon: React.ReactNode }[] = [
{
id: 'overview',
label: 'Übersicht',
icon: (
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
</svg>
),
},
{
id: 'decision-tree',
label: 'Entscheidungsbaum',
icon: (
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
</svg>
),
},
{
id: 'results',
label: 'Ergebnisse',
icon: (
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z" />
</svg>
),
},
]
// MAIN PAGE
export default function AIActPage() {
const { state } = useSDK()
const [activeTab, setActiveTab] = useState<TabId>('overview')
const [systems, setSystems] = useState<AISystem[]>([])
const [filter, setFilter] = useState<string>('all')
const [showAddForm, setShowAddForm] = useState(false)
@@ -178,17 +347,38 @@ export default function AIActPage() {
explanation={stepInfo.explanation}
tips={stepInfo.tips}
>
<button
onClick={() => setShowAddForm(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>
KI-System registrieren
</button>
{activeTab === 'overview' && (
<button
onClick={() => setShowAddForm(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>
KI-System registrieren
</button>
)}
</StepHeader>
{/* Tabs */}
<div className="flex items-center gap-1 bg-gray-100 p-1 rounded-lg w-fit">
{TABS.map(tab => (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
activeTab === tab.id
? 'bg-white text-purple-700 shadow-sm'
: 'text-gray-600 hover:text-gray-900'
}`}
>
{tab.icon}
{tab.label}
</button>
))}
</div>
{/* Error Banner */}
{error && (
<div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
<span>{error}</span>
@@ -196,82 +386,105 @@ export default function AIActPage() {
</div>
)}
{showAddForm && (
<AddSystemForm
onSubmit={handleAddSystem}
onCancel={() => { setShowAddForm(false); setEditingSystem(null) }}
initialData={editingSystem}
/>
)}
<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">KI-Systeme gesamt</div>
<div className="text-3xl font-bold text-gray-900">{systems.length}</div>
</div>
<div className="bg-white rounded-xl border border-orange-200 p-6">
<div className="text-sm text-orange-600">Hochrisiko</div>
<div className="text-3xl font-bold text-orange-600">{highRiskCount}</div>
</div>
<div className="bg-white rounded-xl border border-green-200 p-6">
<div className="text-sm text-green-600">Konform</div>
<div className="text-3xl font-bold text-green-600">{compliantCount}</div>
</div>
<div className="bg-white rounded-xl border border-gray-200 p-6">
<div className="text-sm text-gray-500">Nicht klassifiziert</div>
<div className="text-3xl font-bold text-gray-500">{unclassifiedCount}</div>
</div>
</div>
<RiskPyramid systems={systems} />
<div className="flex items-center gap-2 flex-wrap">
<span className="text-sm text-gray-500">Filter:</span>
{['all', 'high-risk', 'limited-risk', 'minimal-risk', 'unclassified', 'compliant', 'non-compliant'].map(f => (
<button
key={f}
onClick={() => setFilter(f)}
className={`px-3 py-1 text-sm rounded-full transition-colors ${
filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
}`}
>
{f === 'all' ? 'Alle' :
f === 'high-risk' ? 'Hochrisiko' :
f === 'limited-risk' ? 'Begrenztes Risiko' :
f === 'minimal-risk' ? 'Minimales Risiko' :
f === 'unclassified' ? 'Nicht klassifiziert' :
f === 'compliant' ? 'Konform' : 'Nicht konform'}
</button>
))}
</div>
{loading && <LoadingSkeleton />}
{!loading && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{filteredSystems.map(system => (
<AISystemCard
key={system.id}
system={system}
onAssess={() => handleAssess(system.id)}
onEdit={() => handleEdit(system)}
onDelete={() => handleDelete(system.id)}
assessing={assessingId === system.id}
{/* Tab: Overview */}
{activeTab === 'overview' && (
<>
{/* Add/Edit System Form */}
{showAddForm && (
<AddSystemForm
onSubmit={handleAddSystem}
onCancel={() => { setShowAddForm(false); setEditingSystem(null) }}
initialData={editingSystem}
/>
))}
</div>
)}
{/* Stats */}
<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">KI-Systeme gesamt</div>
<div className="text-3xl font-bold text-gray-900">{systems.length}</div>
</div>
<div className="bg-white rounded-xl border border-orange-200 p-6">
<div className="text-sm text-orange-600">Hochrisiko</div>
<div className="text-3xl font-bold text-orange-600">{highRiskCount}</div>
</div>
<div className="bg-white rounded-xl border border-green-200 p-6">
<div className="text-sm text-green-600">Konform</div>
<div className="text-3xl font-bold text-green-600">{compliantCount}</div>
</div>
<div className="bg-white rounded-xl border border-gray-200 p-6">
<div className="text-sm text-gray-500">Nicht klassifiziert</div>
<div className="text-3xl font-bold text-gray-500">{unclassifiedCount}</div>
</div>
</div>
{/* Risk Pyramid */}
<RiskPyramid systems={systems} />
{/* Filter */}
<div className="flex items-center gap-2 flex-wrap">
<span className="text-sm text-gray-500">Filter:</span>
{['all', 'high-risk', 'limited-risk', 'minimal-risk', 'unclassified', 'compliant', 'non-compliant'].map(f => (
<button
key={f}
onClick={() => setFilter(f)}
className={`px-3 py-1 text-sm rounded-full transition-colors ${
filter === f
? 'bg-purple-600 text-white'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
}`}
>
{f === 'all' ? 'Alle' :
f === 'high-risk' ? 'Hochrisiko' :
f === 'limited-risk' ? 'Begrenztes Risiko' :
f === 'minimal-risk' ? 'Minimales Risiko' :
f === 'unclassified' ? 'Nicht klassifiziert' :
f === 'compliant' ? 'Konform' : 'Nicht konform'}
</button>
))}
</div>
{/* Loading */}
{loading && <LoadingSkeleton />}
{/* AI Systems List */}
{!loading && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{filteredSystems.map(system => (
<AISystemCard
key={system.id}
system={system}
onAssess={() => handleAssess(system.id)}
onEdit={() => handleEdit(system)}
onDelete={() => handleDelete(system.id)}
assessing={assessingId === system.id}
/>
))}
</div>
)}
{!loading && filteredSystems.length === 0 && (
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
<div className="w-16 h-16 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
<svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-gray-900">Keine KI-Systeme gefunden</h3>
<p className="mt-2 text-gray-500">Passen Sie den Filter an oder registrieren Sie ein neues KI-System.</p>
</div>
)}
</>
)}
{!loading && filteredSystems.length === 0 && (
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
<div className="w-16 h-16 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
<svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-gray-900">Keine KI-Systeme gefunden</h3>
<p className="mt-2 text-gray-500">Passen Sie den Filter an oder registrieren Sie ein neues KI-System.</p>
</div>
{/* Tab: Decision Tree */}
{activeTab === 'decision-tree' && (
<DecisionTreeWizard />
)}
{/* Tab: Results */}
{activeTab === 'results' && (
<SavedResultsTab />
)}
</div>
)

View File

@@ -0,0 +1,491 @@
'use client'
import React, { useState, useEffect } from 'react'
interface Registration {
id: string
system_name: string
system_version: string
risk_classification: string
gpai_classification: string
registration_status: string
eu_database_id: string
provider_name: string
created_at: string
}
const STATUS_STYLES: Record<string, { bg: string; text: string; label: string }> = {
draft: { bg: 'bg-gray-100', text: 'text-gray-700', label: 'Entwurf' },
ready: { bg: 'bg-blue-100', text: 'text-blue-700', label: 'Bereit' },
submitted: { bg: 'bg-yellow-100', text: 'text-yellow-700', label: 'Eingereicht' },
registered: { bg: 'bg-green-100', text: 'text-green-700', label: 'Registriert' },
update_required: { bg: 'bg-orange-100', text: 'text-orange-700', label: 'Update noetig' },
withdrawn: { bg: 'bg-red-100', text: 'text-red-700', label: 'Zurueckgezogen' },
}
const RISK_STYLES: Record<string, { bg: string; text: string }> = {
high_risk: { bg: 'bg-red-100', text: 'text-red-700' },
limited_risk: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
minimal_risk: { bg: 'bg-green-100', text: 'text-green-700' },
not_classified: { bg: 'bg-gray-100', text: 'text-gray-500' },
}
const INITIAL_FORM = {
system_name: '',
system_version: '1.0',
system_description: '',
intended_purpose: '',
provider_name: '',
provider_legal_form: '',
provider_address: '',
provider_country: 'DE',
eu_representative_name: '',
eu_representative_contact: '',
risk_classification: 'not_classified',
annex_iii_category: '',
gpai_classification: 'none',
conformity_assessment_type: 'internal',
notified_body_name: '',
notified_body_id: '',
ce_marking: false,
training_data_summary: '',
}
export default function AIRegistrationPage() {
const [registrations, setRegistrations] = useState<Registration[]>([])
const [loading, setLoading] = useState(true)
const [showWizard, setShowWizard] = useState(false)
const [wizardStep, setWizardStep] = useState(1)
const [form, setForm] = useState({ ...INITIAL_FORM })
const [submitting, setSubmitting] = useState(false)
const [error, setError] = useState<string | null>(null)
useEffect(() => { loadRegistrations() }, [])
async function loadRegistrations() {
try {
setLoading(true)
const resp = await fetch('/api/sdk/v1/ai-registration')
if (resp.ok) {
const data = await resp.json()
setRegistrations(data.registrations || [])
}
} catch {
setError('Fehler beim Laden')
} finally {
setLoading(false)
}
}
async function handleSubmit() {
setSubmitting(true)
try {
const resp = await fetch('/api/sdk/v1/ai-registration', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(form),
})
if (resp.ok) {
setShowWizard(false)
setForm({ ...INITIAL_FORM })
setWizardStep(1)
loadRegistrations()
} else {
const data = await resp.json()
setError(data.error || 'Fehler beim Erstellen')
}
} catch {
setError('Netzwerkfehler')
} finally {
setSubmitting(false)
}
}
async function handleExport(id: string) {
try {
const resp = await fetch(`/api/sdk/v1/ai-registration/${id}`)
if (resp.ok) {
const reg = await resp.json()
// Build export JSON client-side
const exportData = {
schema_version: '1.0',
submission_type: 'ai_system_registration',
regulation: 'EU AI Act (EU) 2024/1689',
article: 'Art. 49',
provider: { name: reg.provider_name, address: reg.provider_address, country: reg.provider_country },
system: { name: reg.system_name, version: reg.system_version, description: reg.system_description, purpose: reg.intended_purpose },
classification: { risk_level: reg.risk_classification, annex_iii: reg.annex_iii_category, gpai: reg.gpai_classification },
conformity: { type: reg.conformity_assessment_type, ce_marking: reg.ce_marking },
}
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = `eu_ai_registration_${reg.system_name.replace(/\s+/g, '_')}.json`
a.click()
URL.revokeObjectURL(url)
}
} catch {
setError('Export fehlgeschlagen')
}
}
async function handleStatusChange(id: string, status: string) {
try {
await fetch(`/api/sdk/v1/ai-registration/${id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ status }),
})
loadRegistrations()
} catch {
setError('Status-Aenderung fehlgeschlagen')
}
}
const updateForm = (updates: Partial<typeof form>) => setForm(prev => ({ ...prev, ...updates }))
const STEPS = [
{ id: 1, title: 'Anbieter', desc: 'Unternehmensangaben' },
{ id: 2, title: 'System', desc: 'KI-System Details' },
{ id: 3, title: 'Klassifikation', desc: 'Risikoeinstufung' },
{ id: 4, title: 'Konformitaet', desc: 'CE & Notified Body' },
{ id: 5, title: 'Trainingsdaten', desc: 'Datenzusammenfassung' },
{ id: 6, title: 'Pruefung', desc: 'Zusammenfassung & Export' },
]
return (
<div className="max-w-5xl mx-auto p-6">
{/* Header */}
<div className="flex items-center justify-between mb-8">
<div>
<h1 className="text-2xl font-bold text-gray-900">EU AI Database Registrierung</h1>
<p className="text-sm text-gray-500 mt-1">Art. 49 KI-Verordnung (EU) 2024/1689 Registrierung von Hochrisiko-KI-Systemen</p>
</div>
<button
onClick={() => setShowWizard(true)}
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
>
+ Neue Registrierung
</button>
</div>
{error && (
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
{error}
<button onClick={() => setError(null)} className="ml-2 underline">Schliessen</button>
</div>
)}
{/* Stats */}
<div className="grid grid-cols-4 gap-4 mb-8">
{['draft', 'ready', 'submitted', 'registered'].map(status => {
const count = registrations.filter(r => r.registration_status === status).length
const style = STATUS_STYLES[status]
return (
<div key={status} className={`p-4 rounded-xl border ${style.bg}`}>
<div className={`text-2xl font-bold ${style.text}`}>{count}</div>
<div className="text-sm text-gray-600">{style.label}</div>
</div>
)
})}
</div>
{/* Registrations List */}
{loading ? (
<div className="text-center py-12 text-gray-500">Lade...</div>
) : registrations.length === 0 ? (
<div className="text-center py-12 text-gray-400">
<p className="text-lg mb-2">Noch keine Registrierungen</p>
<p className="text-sm">Erstelle eine neue Registrierung fuer dein Hochrisiko-KI-System.</p>
</div>
) : (
<div className="space-y-4">
{registrations.map(reg => {
const status = STATUS_STYLES[reg.registration_status] || STATUS_STYLES.draft
const risk = RISK_STYLES[reg.risk_classification] || RISK_STYLES.not_classified
return (
<div key={reg.id} className="bg-white rounded-xl border border-gray-200 p-6 hover:border-purple-300 transition-all">
<div className="flex items-center justify-between">
<div>
<div className="flex items-center gap-2 mb-1">
<h3 className="text-lg font-semibold text-gray-900">{reg.system_name}</h3>
<span className="text-sm text-gray-400">v{reg.system_version}</span>
<span className={`px-2 py-0.5 text-xs rounded-full ${status.bg} ${status.text}`}>{status.label}</span>
<span className={`px-2 py-0.5 text-xs rounded-full ${risk.bg} ${risk.text}`}>{reg.risk_classification.replace('_', ' ')}</span>
{reg.gpai_classification !== 'none' && (
<span className="px-2 py-0.5 text-xs rounded-full bg-blue-100 text-blue-700">GPAI: {reg.gpai_classification}</span>
)}
</div>
<div className="text-sm text-gray-500">
{reg.provider_name && <span>{reg.provider_name} · </span>}
{reg.eu_database_id && <span>EU-ID: {reg.eu_database_id} · </span>}
<span>{new Date(reg.created_at).toLocaleDateString('de-DE')}</span>
</div>
</div>
<div className="flex gap-2">
<button onClick={() => handleExport(reg.id)} className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50">
JSON Export
</button>
{reg.registration_status === 'draft' && (
<button onClick={() => handleStatusChange(reg.id, 'ready')} className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">
Bereit markieren
</button>
)}
{reg.registration_status === 'ready' && (
<button onClick={() => handleStatusChange(reg.id, 'submitted')} className="px-3 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700">
Als eingereicht markieren
</button>
)}
</div>
</div>
</div>
)
})}
</div>
)}
{/* Wizard Modal */}
{showWizard && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto">
<div className="p-6 border-b">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-bold text-gray-900">Neue EU AI Registrierung</h2>
<button onClick={() => { setShowWizard(false); setWizardStep(1) }} className="text-gray-400 hover:text-gray-600 text-2xl">&times;</button>
</div>
{/* Step Indicator */}
<div className="flex gap-1">
{STEPS.map(step => (
<button key={step.id} onClick={() => setWizardStep(step.id)}
className={`flex-1 py-2 text-xs rounded-lg transition-all ${
wizardStep === step.id ? 'bg-purple-100 text-purple-700 font-medium' :
wizardStep > step.id ? 'bg-green-50 text-green-700' : 'bg-gray-50 text-gray-400'
}`}>
{wizardStep > step.id ? '✓ ' : ''}{step.title}
</button>
))}
</div>
</div>
<div className="p-6 space-y-4">
{/* Step 1: Provider */}
{wizardStep === 1 && (
<>
<h3 className="font-semibold text-gray-900">Anbieter-Informationen</h3>
<p className="text-sm text-gray-500">Angaben zum Anbieter des KI-Systems gemaess Art. 49 KI-VO.</p>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Firmenname *</label>
<input value={form.provider_name} onChange={e => updateForm({ provider_name: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Acme GmbH" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Rechtsform</label>
<input value={form.provider_legal_form} onChange={e => updateForm({ provider_legal_form: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="GmbH" />
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Adresse</label>
<input value={form.provider_address} onChange={e => updateForm({ provider_address: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Musterstr. 1, 20095 Hamburg" />
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Land</label>
<select value={form.provider_country} onChange={e => updateForm({ provider_country: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
<option value="DE">Deutschland</option>
<option value="AT">Oesterreich</option>
<option value="CH">Schweiz</option>
<option value="OTHER">Anderes Land</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">EU-Repraesentant (falls Non-EU)</label>
<input value={form.eu_representative_name} onChange={e => updateForm({ eu_representative_name: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Optional" />
</div>
</div>
</>
)}
{/* Step 2: System */}
{wizardStep === 2 && (
<>
<h3 className="font-semibold text-gray-900">KI-System Details</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Systemname *</label>
<input value={form.system_name} onChange={e => updateForm({ system_name: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="z.B. HR Copilot" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Version</label>
<input value={form.system_version} onChange={e => updateForm({ system_version: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="1.0" />
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Systembeschreibung</label>
<textarea value={form.system_description} onChange={e => updateForm({ system_description: e.target.value })} rows={3}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Beschreibe was das KI-System tut..." />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Einsatzzweck (Intended Purpose)</label>
<textarea value={form.intended_purpose} onChange={e => updateForm({ intended_purpose: e.target.value })} rows={2}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Wofuer wird das System eingesetzt?" />
</div>
</>
)}
{/* Step 3: Classification */}
{wizardStep === 3 && (
<>
<h3 className="font-semibold text-gray-900">Risiko-Klassifikation</h3>
<p className="text-sm text-gray-500">Basierend auf dem AI Act Decision Tree oder manueller Einstufung.</p>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Risikoklasse</label>
<select value={form.risk_classification} onChange={e => updateForm({ risk_classification: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
<option value="not_classified">Noch nicht klassifiziert</option>
<option value="minimal_risk">Minimal Risk</option>
<option value="limited_risk">Limited Risk</option>
<option value="high_risk">High Risk</option>
</select>
</div>
{form.risk_classification === 'high_risk' && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Annex III Kategorie</label>
<select value={form.annex_iii_category} onChange={e => updateForm({ annex_iii_category: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
<option value="">Bitte waehlen...</option>
<option value="biometric">1. Biometrische Identifizierung</option>
<option value="critical_infrastructure">2. Kritische Infrastruktur</option>
<option value="education">3. Bildung und Berufsausbildung</option>
<option value="employment">4. Beschaeftigung und Arbeitnehmerverwaltung</option>
<option value="essential_services">5. Zugang zu wesentlichen Diensten</option>
<option value="law_enforcement">6. Strafverfolgung</option>
<option value="migration">7. Migration und Grenzkontrolle</option>
<option value="justice">8. Rechtspflege und Demokratie</option>
</select>
</div>
)}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">GPAI Klassifikation</label>
<select value={form.gpai_classification} onChange={e => updateForm({ gpai_classification: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
<option value="none">Kein GPAI</option>
<option value="standard">GPAI (Standard)</option>
<option value="systemic">GPAI mit systemischem Risiko</option>
</select>
</div>
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
<strong>Tipp:</strong> Nutze den <a href="/sdk/ai-act" className="underline">AI Act Decision Tree</a> fuer eine strukturierte Klassifikation.
</div>
</>
)}
{/* Step 4: Conformity */}
{wizardStep === 4 && (
<>
<h3 className="font-semibold text-gray-900">Konformitaetsbewertung</h3>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Art der Konformitaetsbewertung</label>
<select value={form.conformity_assessment_type} onChange={e => updateForm({ conformity_assessment_type: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
<option value="not_required">Nicht erforderlich</option>
<option value="internal">Interne Konformitaetsbewertung</option>
<option value="third_party">Drittpartei-Bewertung (Notified Body)</option>
</select>
</div>
{form.conformity_assessment_type === 'third_party' && (
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Notified Body Name</label>
<input value={form.notified_body_name} onChange={e => updateForm({ notified_body_name: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Notified Body ID</label>
<input value={form.notified_body_id} onChange={e => updateForm({ notified_body_id: e.target.value })}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
</div>
</div>
)}
<label className="flex items-center gap-3 p-3 rounded-lg border hover:bg-gray-50 cursor-pointer">
<input type="checkbox" checked={form.ce_marking} onChange={e => updateForm({ ce_marking: e.target.checked })}
className="w-4 h-4 rounded border-gray-300 text-purple-600" />
<span className="text-sm font-medium text-gray-900">CE-Kennzeichnung angebracht</span>
</label>
</>
)}
{/* Step 5: Training Data */}
{wizardStep === 5 && (
<>
<h3 className="font-semibold text-gray-900">Trainingsdaten-Zusammenfassung</h3>
<p className="text-sm text-gray-500">Art. 10 KI-VO Keine vollstaendige Offenlegung, sondern Kategorien und Herkunft.</p>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Zusammenfassung der Trainingsdaten</label>
<textarea value={form.training_data_summary} onChange={e => updateForm({ training_data_summary: e.target.value })} rows={5}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
placeholder="Beschreibe die verwendeten Datenquellen:&#10;- Oeffentliche Daten (z.B. Wikipedia, Common Crawl)&#10;- Lizenzierte Daten (z.B. Fachpublikationen)&#10;- Synthetische Daten&#10;- Unternehmensinterne Daten" />
</div>
</>
)}
{/* Step 6: Review */}
{wizardStep === 6 && (
<>
<h3 className="font-semibold text-gray-900">Zusammenfassung</h3>
<div className="space-y-3 text-sm">
<div className="grid grid-cols-2 gap-4 p-4 bg-gray-50 rounded-lg">
<div><span className="text-gray-500">Anbieter:</span> <strong>{form.provider_name || ''}</strong></div>
<div><span className="text-gray-500">Land:</span> <strong>{form.provider_country}</strong></div>
<div><span className="text-gray-500">System:</span> <strong>{form.system_name || ''}</strong></div>
<div><span className="text-gray-500">Version:</span> <strong>{form.system_version}</strong></div>
<div><span className="text-gray-500">Risiko:</span> <strong>{form.risk_classification}</strong></div>
<div><span className="text-gray-500">GPAI:</span> <strong>{form.gpai_classification}</strong></div>
<div><span className="text-gray-500">Konformitaet:</span> <strong>{form.conformity_assessment_type}</strong></div>
<div><span className="text-gray-500">CE:</span> <strong>{form.ce_marking ? 'Ja' : 'Nein'}</strong></div>
</div>
{form.intended_purpose && (
<div className="p-4 bg-gray-50 rounded-lg">
<span className="text-gray-500">Zweck:</span> {form.intended_purpose}
</div>
)}
</div>
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-sm text-yellow-800">
<strong>Hinweis:</strong> Die EU AI Datenbank befindet sich noch im Aufbau. Die Registrierung wird lokal gespeichert und kann spaeter uebermittelt werden.
</div>
</>
)}
</div>
{/* Navigation */}
<div className="p-6 border-t flex justify-between">
<button onClick={() => wizardStep > 1 ? setWizardStep(wizardStep - 1) : setShowWizard(false)}
className="px-4 py-2 text-gray-700 border rounded-lg hover:bg-gray-50">
{wizardStep === 1 ? 'Abbrechen' : 'Zurueck'}
</button>
{wizardStep < 6 ? (
<button onClick={() => setWizardStep(wizardStep + 1)}
disabled={wizardStep === 2 && !form.system_name}
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50">
Weiter
</button>
) : (
<button onClick={handleSubmit} disabled={submitting || !form.system_name}
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50">
{submitting ? 'Speichere...' : 'Registrierung erstellen'}
</button>
)}
</div>
</div>
</div>
)}
</div>
)
}

View File

@@ -0,0 +1,496 @@
'use client'
import React, { useState, useEffect } from 'react'
interface PaymentControl {
control_id: string
domain: string
title: string
objective: string
check_target: string
evidence: string[]
automation: string
}
interface PaymentDomain {
id: string
name: string
description: string
}
interface Assessment {
id: string
project_name: string
tender_reference: string
customer_name: string
system_type: string
total_controls: number
controls_passed: number
controls_failed: number
controls_partial: number
controls_not_applicable: number
controls_not_checked: number
compliance_score: number
status: string
created_at: string
}
interface TenderAnalysis {
id: string
file_name: string
file_size: number
project_name: string
customer_name: string
status: string
total_requirements: number
matched_count: number
unmatched_count: number
partial_count: number
requirements?: Array<{ req_id: string; text: string; obligation_level: string; technical_domain: string; confidence: number }>
match_results?: Array<{ req_id: string; req_text: string; verdict: string; matched_controls: Array<{ control_id: string; title: string; relevance: number }>; gap_description?: string }>
created_at: string
}
const AUTOMATION_STYLES: Record<string, { bg: string; text: string }> = {
high: { bg: 'bg-green-100', text: 'text-green-700' },
medium: { bg: 'bg-yellow-100', text: 'text-yellow-700' },
partial: { bg: 'bg-orange-100', text: 'text-orange-700' },
low: { bg: 'bg-red-100', text: 'text-red-700' },
}
const TARGET_ICONS: Record<string, string> = {
code: '💻', system: '🖥️', config: '⚙️', process: '📋',
repository: '📦', certificate: '📜',
}
export default function PaymentCompliancePage() {
const [controls, setControls] = useState<PaymentControl[]>([])
const [domains, setDomains] = useState<PaymentDomain[]>([])
const [assessments, setAssessments] = useState<Assessment[]>([])
const [tenderAnalyses, setTenderAnalyses] = useState<TenderAnalysis[]>([])
const [selectedTender, setSelectedTender] = useState<TenderAnalysis | null>(null)
const [selectedDomain, setSelectedDomain] = useState<string>('all')
const [loading, setLoading] = useState(true)
const [tab, setTab] = useState<'controls' | 'assessments' | 'tender'>('controls')
const [uploading, setUploading] = useState(false)
const [processing, setProcessing] = useState(false)
const [showNewAssessment, setShowNewAssessment] = useState(false)
const [newProject, setNewProject] = useState({ project_name: '', tender_reference: '', customer_name: '', system_type: 'full_stack' })
useEffect(() => {
loadData()
}, [])
async function loadData() {
try {
setLoading(true)
const [ctrlResp, assessResp, tenderResp] = await Promise.all([
fetch('/api/sdk/v1/payment-compliance?endpoint=controls'),
fetch('/api/sdk/v1/payment-compliance?endpoint=assessments'),
fetch('/api/sdk/v1/payment-compliance/tender'),
])
if (ctrlResp.ok) {
const data = await ctrlResp.json()
setControls(data.controls || [])
setDomains(data.domains || [])
}
if (assessResp.ok) {
const data = await assessResp.json()
setAssessments(data.assessments || [])
}
if (tenderResp.ok) {
const data = await tenderResp.json()
setTenderAnalyses(data.analyses || [])
}
} catch {}
finally { setLoading(false) }
}
async function handleTenderUpload(e: React.ChangeEvent<HTMLInputElement>) {
const file = e.target.files?.[0]
if (!file) return
setUploading(true)
try {
const formData = new FormData()
formData.append('file', file)
formData.append('project_name', file.name.replace(/\.[^.]+$/, ''))
const resp = await fetch('/api/sdk/v1/payment-compliance/tender', { method: 'POST', body: formData })
if (resp.ok) {
const data = await resp.json()
// Auto-start extraction + matching
setProcessing(true)
const extractResp = await fetch(`/api/sdk/v1/payment-compliance/tender/${data.id}?action=extract`, { method: 'POST' })
if (extractResp.ok) {
await fetch(`/api/sdk/v1/payment-compliance/tender/${data.id}?action=match`, { method: 'POST' })
}
// Reload and show result
const detailResp = await fetch(`/api/sdk/v1/payment-compliance/tender/${data.id}`)
if (detailResp.ok) {
const detail = await detailResp.json()
setSelectedTender(detail)
}
loadData()
}
} catch {} finally {
setUploading(false)
setProcessing(false)
}
}
async function handleViewTender(id: string) {
const resp = await fetch(`/api/sdk/v1/payment-compliance/tender/${id}`)
if (resp.ok) {
setSelectedTender(await resp.json())
}
}
async function handleCreateAssessment() {
const resp = await fetch('/api/sdk/v1/payment-compliance', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newProject),
})
if (resp.ok) {
setShowNewAssessment(false)
setNewProject({ project_name: '', tender_reference: '', customer_name: '', system_type: 'full_stack' })
loadData()
}
}
const filteredControls = selectedDomain === 'all'
? controls
: controls.filter(c => c.domain === selectedDomain)
const domainStats = domains.map(d => ({
...d,
count: controls.filter(c => c.domain === d.id).length,
}))
return (
<div className="max-w-6xl mx-auto p-6">
{/* Header */}
<div className="flex items-center justify-between mb-8">
<div>
<h1 className="text-2xl font-bold text-gray-900">Payment Terminal Compliance</h1>
<p className="text-sm text-gray-500 mt-1">
Technische Pruefbibliothek fuer Zahlungssysteme {controls.length} Controls in {domains.length} Domaenen
</p>
</div>
<div className="flex gap-2">
<button onClick={() => setTab('controls')}
className={`px-4 py-2 rounded-lg text-sm font-medium ${tab === 'controls' ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700'}`}>
Controls ({controls.length})
</button>
<button onClick={() => setTab('assessments')}
className={`px-4 py-2 rounded-lg text-sm font-medium ${tab === 'assessments' ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700'}`}>
Assessments ({assessments.length})
</button>
<button onClick={() => setTab('tender')}
className={`px-4 py-2 rounded-lg text-sm font-medium ${tab === 'tender' ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-700'}`}>
Ausschreibung ({tenderAnalyses.length})
</button>
</div>
</div>
{/* Info Box */}
<div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-xl text-sm text-blue-800">
<div className="font-semibold mb-2">Wie funktioniert Payment Terminal Compliance?</div>
<div className="grid grid-cols-3 gap-4">
<div>
<div className="font-medium mb-1">1. Controls durchsuchen</div>
<p className="text-xs text-blue-700">Unsere Bibliothek enthaelt {controls.length} technische Pruefregeln fuer Zahlungssysteme von Transaktionslogik ueber Kryptographie bis ZVT/OPI-Protokollverhalten. Jeder Control definiert was geprueft wird und welche Evidenz noetig ist.</p>
</div>
<div>
<div className="font-medium mb-1">2. Assessment erstellen</div>
<p className="text-xs text-blue-700">Ein Assessment ist eine projektbezogene Pruefung z.B. fuer eine bestimmte Ausschreibung oder einen Kunden. Sie ordnet jedem Control einen Status zu: bestanden, fehlgeschlagen, teilweise oder nicht anwendbar.</p>
</div>
<div>
<div className="font-medium mb-1">3. Ausschreibung analysieren</div>
<p className="text-xs text-blue-700">Laden Sie ein Ausschreibungsdokument hoch. Die KI extrahiert automatisch die Anforderungen und matcht sie gegen unsere Controls. Ergebnis: Welche Anforderungen sind abgedeckt und wo gibt es Luecken.</p>
</div>
</div>
</div>
{loading ? (
<div className="text-center py-12 text-gray-500">Lade...</div>
) : tab === 'controls' ? (
<>
{/* Domain Filter */}
<div className="grid grid-cols-5 gap-3 mb-6">
<button onClick={() => setSelectedDomain('all')}
className={`p-3 rounded-xl border text-center ${selectedDomain === 'all' ? 'border-purple-500 bg-purple-50' : 'border-gray-200 hover:border-purple-300'}`}>
<div className="text-lg font-bold text-purple-700">{controls.length}</div>
<div className="text-xs text-gray-500">Alle</div>
</button>
{domainStats.map(d => (
<button key={d.id} onClick={() => setSelectedDomain(d.id)}
className={`p-3 rounded-xl border text-center ${selectedDomain === d.id ? 'border-purple-500 bg-purple-50' : 'border-gray-200 hover:border-purple-300'}`}>
<div className="text-lg font-bold text-gray-900">{d.count}</div>
<div className="text-xs text-gray-500 truncate">{d.id}</div>
</button>
))}
</div>
{/* Domain Description */}
{selectedDomain !== 'all' && (
<div className="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800">
<strong>{domains.find(d => d.id === selectedDomain)?.name}:</strong>{' '}
{domains.find(d => d.id === selectedDomain)?.description}
</div>
)}
{/* Controls List */}
<div className="space-y-3">
{filteredControls.map(ctrl => {
const autoStyle = AUTOMATION_STYLES[ctrl.automation] || AUTOMATION_STYLES.low
return (
<div key={ctrl.control_id} className="bg-white rounded-xl border border-gray-200 p-4 hover:border-purple-300 transition-all">
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<span className="text-xs font-mono text-purple-600 bg-purple-50 px-2 py-0.5 rounded">{ctrl.control_id}</span>
<span className="text-xs text-gray-400">{TARGET_ICONS[ctrl.check_target] || '🔍'} {ctrl.check_target}</span>
<span className={`text-xs px-2 py-0.5 rounded-full ${autoStyle.bg} ${autoStyle.text}`}>
{ctrl.automation}
</span>
</div>
<h3 className="text-sm font-semibold text-gray-900">{ctrl.title}</h3>
<p className="text-xs text-gray-500 mt-1">{ctrl.objective}</p>
</div>
</div>
<div className="flex gap-1 mt-2">
{ctrl.evidence.map(ev => (
<span key={ev} className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{ev}</span>
))}
</div>
</div>
)
})}
</div>
</>
) : tab === 'assessments' ? (
<>
{/* Assessments Tab */}
<div className="mb-4">
<button onClick={() => setShowNewAssessment(true)}
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
+ Neues Assessment
</button>
</div>
{showNewAssessment && (
<div className="mb-6 p-6 bg-white rounded-xl border border-purple-200">
<h3 className="font-semibold text-gray-900 mb-4">Neues Payment Compliance Assessment</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Projektname *</label>
<input value={newProject.project_name} onChange={e => setNewProject(p => ({ ...p, project_name: e.target.value }))}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500" placeholder="z.B. Ausschreibung Muenchen 2026" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Ausschreibungs-Referenz</label>
<input value={newProject.tender_reference} onChange={e => setNewProject(p => ({ ...p, tender_reference: e.target.value }))}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500" placeholder="z.B. 2026-PAY-001" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Kunde</label>
<input value={newProject.customer_name} onChange={e => setNewProject(p => ({ ...p, customer_name: e.target.value }))}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500" placeholder="z.B. Stadt Muenchen" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Systemtyp</label>
<select value={newProject.system_type} onChange={e => setNewProject(p => ({ ...p, system_type: e.target.value }))}
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500">
<option value="full_stack">Full Stack (Terminal + Backend)</option>
<option value="terminal">Nur Terminal</option>
<option value="backend">Nur Backend</option>
</select>
</div>
</div>
<div className="flex gap-2 mt-4">
<button onClick={handleCreateAssessment} disabled={!newProject.project_name}
className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50">Erstellen</button>
<button onClick={() => setShowNewAssessment(false)}
className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">Abbrechen</button>
</div>
</div>
)}
{assessments.length === 0 ? (
<div className="text-center py-12 text-gray-400">
<p className="text-lg mb-2">Noch keine Assessments</p>
<p className="text-sm">Erstelle ein neues Assessment fuer eine Ausschreibung.</p>
</div>
) : (
<div className="space-y-4">
{assessments.map(a => (
<div key={a.id} className="bg-white rounded-xl border border-gray-200 p-6">
<div className="flex items-center justify-between mb-3">
<div>
<h3 className="text-lg font-semibold text-gray-900">{a.project_name}</h3>
<div className="text-sm text-gray-500">
{a.customer_name && <span>{a.customer_name} · </span>}
{a.tender_reference && <span>Ref: {a.tender_reference} · </span>}
<span>{new Date(a.created_at).toLocaleDateString('de-DE')}</span>
</div>
</div>
<span className={`px-3 py-1 rounded-full text-sm font-medium ${
a.status === 'completed' ? 'bg-green-100 text-green-700' :
a.status === 'in_progress' ? 'bg-yellow-100 text-yellow-700' :
'bg-gray-100 text-gray-700'
}`}>{a.status}</span>
</div>
<div className="grid grid-cols-6 gap-2">
<div className="text-center p-2 bg-gray-50 rounded">
<div className="text-lg font-bold">{a.total_controls}</div>
<div className="text-xs text-gray-500">Total</div>
</div>
<div className="text-center p-2 bg-green-50 rounded">
<div className="text-lg font-bold text-green-700">{a.controls_passed}</div>
<div className="text-xs text-gray-500">Passed</div>
</div>
<div className="text-center p-2 bg-red-50 rounded">
<div className="text-lg font-bold text-red-700">{a.controls_failed}</div>
<div className="text-xs text-gray-500">Failed</div>
</div>
<div className="text-center p-2 bg-yellow-50 rounded">
<div className="text-lg font-bold text-yellow-700">{a.controls_partial}</div>
<div className="text-xs text-gray-500">Partial</div>
</div>
<div className="text-center p-2 bg-gray-50 rounded">
<div className="text-lg font-bold text-gray-400">{a.controls_not_applicable}</div>
<div className="text-xs text-gray-500">N/A</div>
</div>
<div className="text-center p-2 bg-gray-50 rounded">
<div className="text-lg font-bold text-gray-400">{a.controls_not_checked}</div>
<div className="text-xs text-gray-500">Offen</div>
</div>
</div>
</div>
))}
</div>
)}
</>
) : tab === 'tender' ? (
<>
{/* Tender Analysis Tab */}
<div className="mb-6 p-6 bg-white rounded-xl border-2 border-dashed border-purple-300 text-center">
<h3 className="text-lg font-semibold text-gray-900 mb-2">Ausschreibung analysieren</h3>
<p className="text-sm text-gray-500 mb-4">
Laden Sie ein Ausschreibungsdokument hoch. Die KI extrahiert automatisch alle Anforderungen und matcht sie gegen die Control-Bibliothek.
</p>
<label className="inline-block px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 cursor-pointer">
{uploading ? 'Hochladen...' : processing ? 'Analysiere...' : 'PDF / Dokument hochladen'}
<input type="file" className="hidden" accept=".pdf,.txt,.doc,.docx" onChange={handleTenderUpload} disabled={uploading || processing} />
</label>
<p className="text-xs text-gray-400 mt-2">PDF, TXT oder Word. Max 50 MB. Dokument wird nur fuer diese Analyse verwendet.</p>
</div>
{/* Selected Tender Detail */}
{selectedTender && (
<div className="mb-6 p-6 bg-white rounded-xl border border-purple-200">
<div className="flex items-center justify-between mb-4">
<div>
<h3 className="text-lg font-semibold text-gray-900">{selectedTender.project_name}</h3>
<p className="text-sm text-gray-500">{selectedTender.file_name} {selectedTender.status}</p>
</div>
<button onClick={() => setSelectedTender(null)} className="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
</div>
{/* Stats */}
<div className="grid grid-cols-4 gap-3 mb-6">
<div className="text-center p-3 bg-gray-50 rounded-lg">
<div className="text-2xl font-bold">{selectedTender.total_requirements}</div>
<div className="text-xs text-gray-500">Anforderungen</div>
</div>
<div className="text-center p-3 bg-green-50 rounded-lg">
<div className="text-2xl font-bold text-green-700">{selectedTender.matched_count}</div>
<div className="text-xs text-gray-500">Abgedeckt</div>
</div>
<div className="text-center p-3 bg-yellow-50 rounded-lg">
<div className="text-2xl font-bold text-yellow-700">{selectedTender.partial_count}</div>
<div className="text-xs text-gray-500">Teilweise</div>
</div>
<div className="text-center p-3 bg-red-50 rounded-lg">
<div className="text-2xl font-bold text-red-700">{selectedTender.unmatched_count}</div>
<div className="text-xs text-gray-500">Luecken</div>
</div>
</div>
{/* Match Results */}
{selectedTender.match_results && selectedTender.match_results.length > 0 && (
<div className="space-y-3">
<h4 className="font-semibold text-gray-900">Requirement Control Matching</h4>
{selectedTender.match_results.map((mr, idx) => (
<div key={idx} className={`p-4 rounded-lg border ${
mr.verdict === 'matched' ? 'border-green-200 bg-green-50' :
mr.verdict === 'partial' ? 'border-yellow-200 bg-yellow-50' :
'border-red-200 bg-red-50'
}`}>
<div className="flex items-start justify-between mb-2">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<span className="text-xs font-mono bg-white px-2 py-0.5 rounded border">{mr.req_id}</span>
<span className={`text-xs px-2 py-0.5 rounded-full ${
mr.verdict === 'matched' ? 'bg-green-200 text-green-800' :
mr.verdict === 'partial' ? 'bg-yellow-200 text-yellow-800' :
'bg-red-200 text-red-800'
}`}>
{mr.verdict === 'matched' ? 'Abgedeckt' : mr.verdict === 'partial' ? 'Teilweise' : 'Luecke'}
</span>
</div>
<p className="text-sm text-gray-900">{mr.req_text}</p>
</div>
</div>
{mr.matched_controls && mr.matched_controls.length > 0 && (
<div className="mt-2 flex flex-wrap gap-1">
{mr.matched_controls.map(mc => (
<span key={mc.control_id} className="text-xs bg-white border px-2 py-0.5 rounded">
{mc.control_id} ({Math.round(mc.relevance * 100)}%)
</span>
))}
</div>
)}
{mr.gap_description && (
<p className="text-xs text-orange-700 mt-2">{mr.gap_description}</p>
)}
</div>
))}
</div>
)}
</div>
)}
{/* Previous Analyses */}
{tenderAnalyses.length > 0 && (
<div>
<h4 className="font-semibold text-gray-900 mb-3">Bisherige Analysen</h4>
<div className="space-y-3">
{tenderAnalyses.map(ta => (
<button key={ta.id} onClick={() => handleViewTender(ta.id)}
className="w-full text-left bg-white rounded-xl border border-gray-200 p-4 hover:border-purple-300 transition-all">
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium text-gray-900">{ta.project_name}</h3>
<p className="text-xs text-gray-500">{ta.file_name} {new Date(ta.created_at).toLocaleDateString('de-DE')}</p>
</div>
<div className="flex gap-2">
<span className="text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">{ta.matched_count} matched</span>
{ta.unmatched_count > 0 && (
<span className="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded-full">{ta.unmatched_count} gaps</span>
)}
<span className={`text-xs px-2 py-0.5 rounded-full ${
ta.status === 'matched' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700'
}`}>{ta.status}</span>
</div>
</div>
</button>
))}
</div>
</div>
)}
</>
) : null}
</div>
)
}

View File

@@ -53,7 +53,7 @@ export const STEPS_VORBEREITUNG: SDKFlowStep[] = [
checkpointId: 'CP-UC',
checkpointType: 'REQUIRED',
checkpointReviewer: 'NONE',
description: 'Systematische Erfassung aller Datenverarbeitungs- und KI-Anwendungsfaelle ueber einen 8-Schritte-Wizard mit Kachel-Auswahl.',
description: 'Systematische Erfassung aller Datenverarbeitungs- und KI-Anwendungsfaelle ueber einen 8-Schritte-Wizard mit Kachel-Auswahl. Inkl. BetrVG-Mitbestimmungspruefung und Betriebsrats-Konflikt-Score.',
descriptionLong: 'In einem 8-Schritte-Wizard werden alle Use Cases erfasst: (1) Grundlegendes — Titel, Beschreibung, KI-Kategorie (21 Kacheln), Branche wird automatisch aus dem Profil abgeleitet. (2) Datenkategorien — ~60 Kategorien in 10 Gruppen als Kacheln (inkl. Art. 9 hervorgehoben). (3) Verarbeitungszweck — 16 Zweck-Kacheln, Rechtsgrundlage wird vom SDK automatisch ermittelt. (4) Automatisierungsgrad — assistiv/teilautomatisiert/vollautomatisiert. (5) Hosting & Modell — Provider, Region, Modellnutzung (Inferenz/RAG/Fine-Tuning/Training). (6) Datentransfer — Transferziele und Schutzmechanismen. (7) Datenhaltung — Aufbewahrungsfristen. (8) Vertraege — vorhandene Compliance-Dokumente. Die RAG-Collection bp_compliance_ce wird verwendet, um relevante CE-Regulierungen automatisch den Use Cases zuzuordnen (UCCA).',
legalBasis: 'Art. 30 DSGVO (Verzeichnis von Verarbeitungstaetigkeiten)',
inputs: ['companyProfile'],
@@ -66,6 +66,27 @@ export const STEPS_VORBEREITUNG: SDKFlowStep[] = [
isOptional: false,
url: '/sdk/use-cases',
},
{
id: 'ai-registration',
name: 'EU AI Database Registrierung',
nameShort: 'EU-Reg',
package: 'vorbereitung',
seq: 350,
checkpointId: 'CP-REG',
checkpointType: 'CONDITIONAL',
checkpointReviewer: 'NONE',
description: 'Registrierung von Hochrisiko-KI-Systemen in der EU AI Database gemaess Art. 49 KI-Verordnung.',
descriptionLong: 'Fuer Hochrisiko-KI-Systeme (Annex III) ist eine Registrierung in der EU AI Database Pflicht. Ein 6-Schritte-Wizard fuehrt durch den Prozess: (1) Anbieter-Daten — Name, Rechtsform, Adresse, EU-Repraesentant. (2) System-Details — Name, Version, Beschreibung, Einsatzzweck (vorausgefuellt aus UCCA Assessment). (3) Klassifikation — Risikoklasse und Annex III Kategorie (aus Decision Tree). (4) Konformitaet — CE-Kennzeichnung, Notified Body. (5) Trainingsdaten — Zusammenfassung der Datenquellen (Art. 10). (6) Pruefung + Export — JSON-Download fuer EU-Datenbank-Submission. Der Status-Workflow ist: Entwurf → Bereit → Eingereicht → Registriert.',
legalBasis: 'Art. 49 KI-Verordnung (EU) 2024/1689',
inputs: ['useCases', 'companyProfile'],
outputs: ['euRegistration'],
prerequisiteSteps: ['use-case-assessment'],
dbTables: ['ai_system_registrations'],
dbMode: 'read/write',
ragCollections: [],
isOptional: true,
url: '/sdk/ai-registration',
},
{
id: 'import',
name: 'Dokument-Import',

View File

@@ -57,6 +57,8 @@ interface FullAssessment {
dsfa_recommended: boolean
art22_risk: boolean
training_allowed: string
betrvg_conflict_score?: number
betrvg_consultation_required?: boolean
triggered_rules?: TriggeredRule[]
required_controls?: RequiredControl[]
recommended_architecture?: PatternRecommendation[]
@@ -167,6 +169,8 @@ export default function AssessmentDetailPage() {
dsfa_recommended: assessment.dsfa_recommended,
art22_risk: assessment.art22_risk,
training_allowed: assessment.training_allowed,
betrvg_conflict_score: assessment.betrvg_conflict_score,
betrvg_consultation_required: assessment.betrvg_consultation_required,
// AssessmentResultCard expects rule_code; backend stores code — map here
triggered_rules: assessment.triggered_rules?.map(r => ({
rule_code: r.code,

View File

@@ -10,6 +10,8 @@ interface Assessment {
feasibility: string
risk_level: string
risk_score: number
betrvg_conflict_score?: number
betrvg_consultation_required?: boolean
domain: string
created_at: string
}
@@ -194,6 +196,16 @@ export default function UseCasesPage() {
<span className={`px-2 py-0.5 text-xs rounded-full ${feasibility.bg} ${feasibility.text}`}>
{feasibility.label}
</span>
{assessment.betrvg_conflict_score != null && assessment.betrvg_conflict_score > 0 && (
<span className={`px-2 py-0.5 text-xs rounded-full ${
assessment.betrvg_conflict_score >= 75 ? 'bg-red-100 text-red-700' :
assessment.betrvg_conflict_score >= 50 ? 'bg-orange-100 text-orange-700' :
assessment.betrvg_conflict_score >= 25 ? 'bg-yellow-100 text-yellow-700' :
'bg-green-100 text-green-700'
}`}>
BR {assessment.betrvg_conflict_score}
</span>
)}
</div>
<div className="flex items-center gap-4 text-sm text-gray-500">
<span>{assessment.domain}</span>