5a31f52310
Services: Admin-Lehrer, Backend-Lehrer, Studio v2, Website, Klausur-Service, School-Service, Voice-Service, Geo-Service, BreakPilot Drive, Agent-Core Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
523 lines
20 KiB
TypeScript
523 lines
20 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* Evidence Management Page
|
|
*
|
|
* Features:
|
|
* - List evidence by control
|
|
* - File upload
|
|
* - URL/Link adding
|
|
* - Evidence status tracking
|
|
*/
|
|
|
|
import { useState, useEffect, useRef, Suspense } from 'react'
|
|
import { useSearchParams } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import AdminLayout from '@/components/admin/AdminLayout'
|
|
|
|
interface Evidence {
|
|
id: string
|
|
control_id: string
|
|
evidence_type: string
|
|
title: string
|
|
description: string
|
|
artifact_path: string | null
|
|
artifact_url: string | null
|
|
artifact_hash: string | null
|
|
file_size_bytes: number | null
|
|
mime_type: string | null
|
|
status: string
|
|
source: string
|
|
ci_job_id: string | null
|
|
valid_from: string
|
|
valid_until: string | null
|
|
collected_at: string
|
|
}
|
|
|
|
interface Control {
|
|
id: string
|
|
control_id: string
|
|
title: string
|
|
}
|
|
|
|
const EVIDENCE_TYPES = [
|
|
{ value: 'scan_report', label: 'Scan Report', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' },
|
|
{ value: 'policy_document', label: 'Policy Dokument', icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' },
|
|
{ value: 'config_snapshot', label: 'Config Snapshot', icon: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4' },
|
|
{ value: 'test_result', label: 'Test Ergebnis', icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' },
|
|
{ value: 'screenshot', label: 'Screenshot', icon: 'M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z' },
|
|
{ value: 'external_link', label: 'Externer Link', icon: 'M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14' },
|
|
{ value: 'manual_upload', label: 'Manueller Upload', icon: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12' },
|
|
]
|
|
|
|
const STATUS_STYLES: Record<string, string> = {
|
|
valid: 'bg-green-100 text-green-700',
|
|
expired: 'bg-red-100 text-red-700',
|
|
pending: 'bg-yellow-100 text-yellow-700',
|
|
failed: 'bg-red-100 text-red-700',
|
|
}
|
|
|
|
function EvidencePageContent({ initialControlId }: { initialControlId: string | null }) {
|
|
const [evidence, setEvidence] = useState<Evidence[]>([])
|
|
const [controls, setControls] = useState<Control[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [filterControlId, setFilterControlId] = useState(initialControlId || '')
|
|
const [filterType, setFilterType] = useState('')
|
|
|
|
const [uploadModalOpen, setUploadModalOpen] = useState(false)
|
|
const [linkModalOpen, setLinkModalOpen] = useState(false)
|
|
const [uploading, setUploading] = useState(false)
|
|
|
|
const [newEvidence, setNewEvidence] = useState({
|
|
control_id: initialControlId || '',
|
|
evidence_type: 'manual_upload',
|
|
title: '',
|
|
description: '',
|
|
artifact_url: '',
|
|
})
|
|
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
|
|
|
const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
|
|
|
|
useEffect(() => {
|
|
loadData()
|
|
}, [filterControlId, filterType])
|
|
|
|
const loadData = async () => {
|
|
setLoading(true)
|
|
try {
|
|
const params = new URLSearchParams()
|
|
if (filterControlId) params.append('control_id', filterControlId)
|
|
if (filterType) params.append('evidence_type', filterType)
|
|
|
|
const [evidenceRes, controlsRes] = await Promise.all([
|
|
fetch(`${BACKEND_URL}/api/v1/compliance/evidence?${params}`),
|
|
fetch(`${BACKEND_URL}/api/v1/compliance/controls`),
|
|
])
|
|
|
|
if (evidenceRes.ok) {
|
|
const data = await evidenceRes.json()
|
|
setEvidence(data.evidence || [])
|
|
}
|
|
if (controlsRes.ok) {
|
|
const data = await controlsRes.json()
|
|
setControls(data.controls || [])
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load data:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleFileUpload = async () => {
|
|
if (!selectedFile || !newEvidence.control_id || !newEvidence.title) {
|
|
alert('Bitte alle Pflichtfelder ausfuellen')
|
|
return
|
|
}
|
|
|
|
setUploading(true)
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('file', selectedFile)
|
|
|
|
const params = new URLSearchParams({
|
|
control_id: newEvidence.control_id,
|
|
evidence_type: newEvidence.evidence_type,
|
|
title: newEvidence.title,
|
|
})
|
|
if (newEvidence.description) {
|
|
params.append('description', newEvidence.description)
|
|
}
|
|
|
|
const res = await fetch(`${BACKEND_URL}/api/v1/compliance/evidence/upload?${params}`, {
|
|
method: 'POST',
|
|
body: formData,
|
|
})
|
|
|
|
if (res.ok) {
|
|
setUploadModalOpen(false)
|
|
resetForm()
|
|
loadData()
|
|
} else {
|
|
const error = await res.text()
|
|
alert(`Upload fehlgeschlagen: ${error}`)
|
|
}
|
|
} catch (error) {
|
|
console.error('Upload failed:', error)
|
|
alert('Upload fehlgeschlagen')
|
|
} finally {
|
|
setUploading(false)
|
|
}
|
|
}
|
|
|
|
const handleLinkSubmit = async () => {
|
|
if (!newEvidence.control_id || !newEvidence.title || !newEvidence.artifact_url) {
|
|
alert('Bitte alle Pflichtfelder ausfuellen')
|
|
return
|
|
}
|
|
|
|
setUploading(true)
|
|
try {
|
|
const res = await fetch(`${BACKEND_URL}/api/v1/compliance/evidence`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
control_id: newEvidence.control_id,
|
|
evidence_type: 'external_link',
|
|
title: newEvidence.title,
|
|
description: newEvidence.description,
|
|
artifact_url: newEvidence.artifact_url,
|
|
source: 'manual',
|
|
}),
|
|
})
|
|
|
|
if (res.ok) {
|
|
setLinkModalOpen(false)
|
|
resetForm()
|
|
loadData()
|
|
} else {
|
|
const error = await res.text()
|
|
alert(`Fehler: ${error}`)
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to add link:', error)
|
|
alert('Fehler beim Hinzufuegen')
|
|
} finally {
|
|
setUploading(false)
|
|
}
|
|
}
|
|
|
|
const resetForm = () => {
|
|
setNewEvidence({
|
|
control_id: filterControlId || '',
|
|
evidence_type: 'manual_upload',
|
|
title: '',
|
|
description: '',
|
|
artifact_url: '',
|
|
})
|
|
setSelectedFile(null)
|
|
}
|
|
|
|
const formatFileSize = (bytes: number | null) => {
|
|
if (!bytes) return '-'
|
|
if (bytes < 1024) return `${bytes} B`
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
|
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
|
}
|
|
|
|
const getControlTitle = (controlUuid: string) => {
|
|
const control = controls.find((c) => c.id === controlUuid)
|
|
return control?.control_id || controlUuid
|
|
}
|
|
|
|
return (
|
|
<AdminLayout title="Evidence Management" description="Nachweise & Artefakte">
|
|
{/* Header */}
|
|
<div className="flex flex-wrap items-center gap-4 mb-6">
|
|
<Link
|
|
href="/admin/compliance"
|
|
className="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Zurueck
|
|
</Link>
|
|
<div className="flex-1" />
|
|
<button
|
|
onClick={() => { resetForm(); setLinkModalOpen(true) }}
|
|
className="px-4 py-2 border border-primary-600 text-primary-600 rounded-lg hover:bg-primary-50"
|
|
>
|
|
Link hinzufuegen
|
|
</button>
|
|
<button
|
|
onClick={() => { resetForm(); setUploadModalOpen(true) }}
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
|
|
>
|
|
Datei hochladen
|
|
</button>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="bg-white rounded-xl shadow-sm border p-4 mb-6">
|
|
<div className="flex flex-wrap items-center gap-4">
|
|
<select
|
|
value={filterControlId}
|
|
onChange={(e) => setFilterControlId(e.target.value)}
|
|
className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
|
|
>
|
|
<option value="">Alle Controls</option>
|
|
{controls.map((c) => (
|
|
<option key={c.id} value={c.control_id}>{c.control_id} - {c.title}</option>
|
|
))}
|
|
</select>
|
|
|
|
<select
|
|
value={filterType}
|
|
onChange={(e) => setFilterType(e.target.value)}
|
|
className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
|
|
>
|
|
<option value="">Alle Typen</option>
|
|
{EVIDENCE_TYPES.map((t) => (
|
|
<option key={t.value} value={t.value}>{t.label}</option>
|
|
))}
|
|
</select>
|
|
|
|
<span className="text-sm text-slate-500">{evidence.length} Nachweise</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Evidence List */}
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600" />
|
|
</div>
|
|
) : evidence.length === 0 ? (
|
|
<div className="bg-white rounded-xl shadow-sm border p-12 text-center">
|
|
<svg className="w-16 h-16 text-slate-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<p className="text-slate-500 mb-4">Keine Nachweise gefunden</p>
|
|
<button
|
|
onClick={() => setUploadModalOpen(true)}
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
|
|
>
|
|
Ersten Nachweis hinzufuegen
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{evidence.map((ev) => (
|
|
<div key={ev.id} className="bg-white rounded-xl shadow-sm border p-4 hover:border-primary-300 transition-colors">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
|
|
<svg className="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={EVIDENCE_TYPES.find((t) => t.value === ev.evidence_type)?.icon || 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'} />
|
|
</svg>
|
|
</div>
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_STYLES[ev.status] || 'bg-slate-100 text-slate-700'}`}>
|
|
{ev.status}
|
|
</span>
|
|
</div>
|
|
<span className="text-xs text-slate-500 font-mono">{getControlTitle(ev.control_id)}</span>
|
|
</div>
|
|
|
|
<h4 className="font-medium text-slate-900 mb-1">{ev.title}</h4>
|
|
{ev.description && (
|
|
<p className="text-sm text-slate-500 mb-3 line-clamp-2">{ev.description}</p>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between text-xs text-slate-500 pt-3 border-t">
|
|
<span>{ev.evidence_type.replace('_', ' ')}</span>
|
|
<span>{formatFileSize(ev.file_size_bytes)}</span>
|
|
</div>
|
|
|
|
{ev.artifact_url && (
|
|
<a
|
|
href={ev.artifact_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-3 block text-sm text-primary-600 hover:text-primary-700 truncate"
|
|
>
|
|
{ev.artifact_url}
|
|
</a>
|
|
)}
|
|
|
|
<div className="mt-3 text-xs text-slate-400">
|
|
Erfasst: {new Date(ev.collected_at).toLocaleDateString('de-DE')}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Upload Modal */}
|
|
{uploadModalOpen && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Datei hochladen</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Control *</label>
|
|
<select
|
|
value={newEvidence.control_id}
|
|
onChange={(e) => setNewEvidence({ ...newEvidence, control_id: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
|
|
>
|
|
<option value="">Control auswaehlen...</option>
|
|
{controls.map((c) => (
|
|
<option key={c.id} value={c.control_id}>{c.control_id} - {c.title}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Typ</label>
|
|
<select
|
|
value={newEvidence.evidence_type}
|
|
onChange={(e) => setNewEvidence({ ...newEvidence, evidence_type: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
|
|
>
|
|
{EVIDENCE_TYPES.filter((t) => t.value !== 'external_link').map((t) => (
|
|
<option key={t.value} value={t.value}>{t.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Titel *</label>
|
|
<input
|
|
type="text"
|
|
value={newEvidence.title}
|
|
onChange={(e) => setNewEvidence({ ...newEvidence, title: e.target.value })}
|
|
placeholder="z.B. Semgrep Scan Report 2026-01"
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
|
|
<textarea
|
|
value={newEvidence.description}
|
|
onChange={(e) => setNewEvidence({ ...newEvidence, description: e.target.value })}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Datei *</label>
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
{selectedFile && (
|
|
<p className="mt-1 text-sm text-slate-500">
|
|
{selectedFile.name} ({formatFileSize(selectedFile.size)})
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 mt-6">
|
|
<button
|
|
onClick={() => setUploadModalOpen(false)}
|
|
className="px-4 py-2 text-slate-600 hover:text-slate-800"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={handleFileUpload}
|
|
disabled={uploading}
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
|
|
>
|
|
{uploading ? 'Hochladen...' : 'Hochladen'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Link Modal */}
|
|
{linkModalOpen && (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Link/Quelle hinzufuegen</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Control *</label>
|
|
<select
|
|
value={newEvidence.control_id}
|
|
onChange={(e) => setNewEvidence({ ...newEvidence, control_id: e.target.value })}
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
|
|
>
|
|
<option value="">Control auswaehlen...</option>
|
|
{controls.map((c) => (
|
|
<option key={c.id} value={c.control_id}>{c.control_id} - {c.title}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Titel *</label>
|
|
<input
|
|
type="text"
|
|
value={newEvidence.title}
|
|
onChange={(e) => setNewEvidence({ ...newEvidence, title: e.target.value })}
|
|
placeholder="z.B. GitHub Branch Protection Settings"
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">URL *</label>
|
|
<input
|
|
type="url"
|
|
value={newEvidence.artifact_url}
|
|
onChange={(e) => setNewEvidence({ ...newEvidence, artifact_url: e.target.value })}
|
|
placeholder="https://github.com/..."
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
|
|
<textarea
|
|
value={newEvidence.description}
|
|
onChange={(e) => setNewEvidence({ ...newEvidence, description: e.target.value })}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 mt-6">
|
|
<button
|
|
onClick={() => setLinkModalOpen(false)}
|
|
className="px-4 py-2 text-slate-600 hover:text-slate-800"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={handleLinkSubmit}
|
|
disabled={uploading}
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
|
|
>
|
|
{uploading ? 'Speichern...' : 'Hinzufuegen'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AdminLayout>
|
|
)
|
|
}
|
|
|
|
function EvidencePageWithParams() {
|
|
const searchParams = useSearchParams()
|
|
const initialControlId = searchParams.get('control')
|
|
return <EvidencePageContent initialControlId={initialControlId} />
|
|
}
|
|
|
|
export default function EvidencePage() {
|
|
return (
|
|
<Suspense fallback={
|
|
<AdminLayout title="Evidence Management" description="Nachweise & Artefakte">
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600" />
|
|
</div>
|
|
</AdminLayout>
|
|
}>
|
|
<EvidencePageWithParams />
|
|
</Suspense>
|
|
)
|
|
}
|