e6d666b89b
All checks were successful
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Successful in 37s
CI / test-python-backend-compliance (push) Successful in 32s
CI / test-python-document-crawler (push) Successful in 22s
CI / test-python-dsms-gateway (push) Successful in 18s
Phase A: PostgreSQL State Store (sdk_states Tabelle, InMemory-Fallback) Phase B: Modules dynamisch vom Backend, Scope DB-Persistenz, Source Policy State Phase C: UCCA Frontend (3 Seiten, Wizard, RiskScoreGauge), Obligations Live-Daten Phase D: Document Import (PDF/LLM/Gap-Analyse), System Screening (SBOM/OSV.dev) Phase E: Company Profile CRUD mit Audit-Logging Phase F: Tests (Python + TypeScript), flow-data.ts DB-Tabellen aktualisiert Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
211 lines
8.5 KiB
TypeScript
211 lines
8.5 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { RiskScoreGauge } from '@/components/sdk/use-case-assessment/RiskScoreGauge'
|
|
|
|
interface Assessment {
|
|
id: string
|
|
title: string
|
|
feasibility: string
|
|
risk_level: string
|
|
risk_score: number
|
|
domain: string
|
|
created_at: string
|
|
}
|
|
|
|
const FEASIBILITY_STYLES: Record<string, { bg: string; text: string; label: string }> = {
|
|
YES: { bg: 'bg-green-100', text: 'text-green-700', label: 'Machbar' },
|
|
CONDITIONAL: { bg: 'bg-yellow-100', text: 'text-yellow-700', label: 'Bedingt' },
|
|
NO: { bg: 'bg-red-100', text: 'text-red-700', label: 'Nein' },
|
|
}
|
|
|
|
export default function UseCasesPage() {
|
|
const [assessments, setAssessments] = useState<Assessment[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [filterFeasibility, setFilterFeasibility] = useState<string>('all')
|
|
const [filterRisk, setFilterRisk] = useState<string>('all')
|
|
|
|
useEffect(() => {
|
|
fetchAssessments()
|
|
}, [])
|
|
|
|
async function fetchAssessments() {
|
|
try {
|
|
setLoading(true)
|
|
const response = await fetch('/api/sdk/v1/ucca/assessments')
|
|
if (!response.ok) {
|
|
throw new Error('Fehler beim Laden der Assessments')
|
|
}
|
|
const data = await response.json()
|
|
setAssessments(data.assessments || [])
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const filtered = assessments.filter(a => {
|
|
if (filterFeasibility !== 'all' && a.feasibility !== filterFeasibility) return false
|
|
if (filterRisk !== 'all' && a.risk_level !== filterRisk) return false
|
|
return true
|
|
})
|
|
|
|
const stats = {
|
|
total: assessments.length,
|
|
feasible: assessments.filter(a => a.feasibility === 'YES').length,
|
|
conditional: assessments.filter(a => a.feasibility === 'CONDITIONAL').length,
|
|
rejected: assessments.filter(a => a.feasibility === 'NO').length,
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Use Case Assessment</h1>
|
|
<p className="mt-1 text-gray-500">
|
|
KI-Anwendungsfaelle erfassen und auf Compliance pruefen
|
|
</p>
|
|
</div>
|
|
<Link
|
|
href="/sdk/use-cases/new"
|
|
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>
|
|
Neues Assessment
|
|
</Link>
|
|
</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">Gesamt</div>
|
|
<div className="text-3xl font-bold text-gray-900">{stats.total}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-green-200 p-6">
|
|
<div className="text-sm text-green-600">Machbar</div>
|
|
<div className="text-3xl font-bold text-green-600">{stats.feasible}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-yellow-200 p-6">
|
|
<div className="text-sm text-yellow-600">Bedingt</div>
|
|
<div className="text-3xl font-bold text-yellow-600">{stats.conditional}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-red-200 p-6">
|
|
<div className="text-sm text-red-600">Abgelehnt</div>
|
|
<div className="text-3xl font-bold text-red-600">{stats.rejected}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex items-center gap-4 flex-wrap">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-gray-500">Machbarkeit:</span>
|
|
{['all', 'YES', 'CONDITIONAL', 'NO'].map(f => (
|
|
<button
|
|
key={f}
|
|
onClick={() => setFilterFeasibility(f)}
|
|
className={`px-3 py-1 text-sm rounded-full transition-colors ${
|
|
filterFeasibility === f
|
|
? 'bg-purple-600 text-white'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{f === 'all' ? 'Alle' : FEASIBILITY_STYLES[f]?.label || f}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm text-gray-500">Risiko:</span>
|
|
{['all', 'MINIMAL', 'LOW', 'MEDIUM', 'HIGH', 'UNACCEPTABLE'].map(f => (
|
|
<button
|
|
key={f}
|
|
onClick={() => setFilterRisk(f)}
|
|
className={`px-3 py-1 text-sm rounded-full transition-colors ${
|
|
filterRisk === f
|
|
? 'bg-purple-600 text-white'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{f === 'all' ? 'Alle' : f}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
|
|
{error}
|
|
<button onClick={fetchAssessments} className="ml-3 underline">Erneut versuchen</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Loading */}
|
|
{loading && (
|
|
<div className="text-center py-12 text-gray-500">Lade Assessments...</div>
|
|
)}
|
|
|
|
{/* Assessment List */}
|
|
{!loading && filtered.length > 0 && (
|
|
<div className="space-y-4">
|
|
{filtered.map(assessment => {
|
|
const feasibility = FEASIBILITY_STYLES[assessment.feasibility] || FEASIBILITY_STYLES.YES
|
|
return (
|
|
<Link
|
|
key={assessment.id}
|
|
href={`/sdk/use-cases/${assessment.id}`}
|
|
className="block bg-white rounded-xl border border-gray-200 p-6 hover:border-purple-300 hover:shadow-md transition-all"
|
|
>
|
|
<div className="flex items-center gap-6">
|
|
<RiskScoreGauge score={assessment.risk_score} riskLevel={assessment.risk_level} size="sm" />
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h3 className="text-lg font-semibold text-gray-900">{assessment.title || 'Unbenanntes Assessment'}</h3>
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${feasibility.bg} ${feasibility.text}`}>
|
|
{feasibility.label}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-sm text-gray-500">
|
|
<span>{assessment.domain}</span>
|
|
<span>{new Date(assessment.created_at).toLocaleDateString('de-DE')}</span>
|
|
</div>
|
|
</div>
|
|
<svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Empty State */}
|
|
{!loading && filtered.length === 0 && !error && (
|
|
<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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900">Noch keine Assessments</h3>
|
|
<p className="mt-2 text-gray-500 mb-4">
|
|
Erstellen Sie Ihr erstes Use Case Assessment, um die Compliance-Bewertung zu starten.
|
|
</p>
|
|
<Link
|
|
href="/sdk/use-cases/new"
|
|
className="inline-flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
|
|
>
|
|
Erstes Assessment erstellen
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|