feat: 7 Vorbereitungs-Module auf 100% — Frontend, Proxy-Routen, Backend-Fixes
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 35s
CI / test-python-backend-compliance (push) Successful in 30s
CI / test-python-document-crawler (push) Successful in 22s
CI / test-python-dsms-gateway (push) Successful in 19s

Profil: machineBuilder-Felder im POST-Body, PATCH-Handler
Scope: API-Route (GET/POST), ScopeDecisionTab Props + Buttons, Export-Druckansicht HTML
Anwendung: PUT-Handler, Bearbeiten-Button, Pagination/Search
Import: Verlauf laden, DELETE-Route, Offline-Badge, ObjectURL Memory-Leak fix
Screening: Security-Backlog Button verdrahtet, Scan-Verlauf
Module: Detail-Seite, GET-Proxy, Konfigurieren-Button, Modul-erstellen-Modal, Error-Toast
Quellen: 10 Proxy-Routen, Tab-Komponenten umgestellt, Dashboard-Tab, blocked_today Bug fix, Datum-Filter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-03-02 15:08:13 +01:00
parent fc83ebfd82
commit d079886819
32 changed files with 1734 additions and 76 deletions

View File

@@ -1,6 +1,7 @@
'use client'
import React, { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { useSDK, ServiceModule } from '@/lib/sdk'
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
@@ -126,11 +127,13 @@ function ModuleCard({
isActive,
onActivate,
onDeactivate,
onConfigure,
}: {
module: DisplayModule
isActive: boolean
onActivate: () => void
onDeactivate: () => void
onConfigure: () => void
}) {
const categoryColors = {
gdpr: 'bg-blue-100 text-blue-700',
@@ -208,7 +211,10 @@ function ModuleCard({
<div className="mt-4 flex items-center gap-2">
{isActive ? (
<>
<button className="flex-1 px-4 py-2 text-sm bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 transition-colors">
<button
onClick={onConfigure}
className="flex-1 px-4 py-2 text-sm bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 transition-colors"
>
Konfigurieren
</button>
<button
@@ -237,10 +243,16 @@ function ModuleCard({
export default function ModulesPage() {
const { state, dispatch } = useSDK()
const router = useRouter()
const [filter, setFilter] = useState<string>('all')
const [availableModules, setAvailableModules] = useState<Omit<DisplayModule, 'status' | 'completionPercent'>[]>(fallbackModules)
const [isLoadingModules, setIsLoadingModules] = useState(true)
const [backendError, setBackendError] = useState<string | null>(null)
const [showCreateModal, setShowCreateModal] = useState(false)
const [newModuleName, setNewModuleName] = useState('')
const [newModuleCategory, setNewModuleCategory] = useState<ModuleCategory>('custom')
const [newModuleDescription, setNewModuleDescription] = useState('')
const [actionError, setActionError] = useState<string | null>(null)
// Load modules from backend
useEffect(() => {
@@ -312,26 +324,79 @@ export default function ModulesPage() {
hasAIComponents: module.hasAIComponents,
}
dispatch({ type: 'ADD_MODULE', payload: serviceModule })
setActionError(null)
try {
await fetch(`/api/sdk/v1/modules/${encodeURIComponent(module.id)}/activate`, {
const res = await fetch(`/api/sdk/v1/modules/${encodeURIComponent(module.id)}/activate`, {
method: 'POST',
})
if (!res.ok) throw new Error('Aktivierung fehlgeschlagen')
} catch {
console.warn('Could not persist module activation to backend')
// Rollback optimistic update
const rollbackModules = state.modules.filter(m => m.id !== module.id)
dispatch({ type: 'SET_STATE', payload: { modules: rollbackModules } })
setActionError(`Modul "${module.name}" konnte nicht aktiviert werden.`)
setTimeout(() => setActionError(null), 5000)
}
}
const handleDeactivateModule = async (moduleId: string) => {
const previousModules = [...state.modules]
const updatedModules = state.modules.filter(m => m.id !== moduleId)
dispatch({ type: 'SET_STATE', payload: { modules: updatedModules } })
setActionError(null)
try {
await fetch(`/api/sdk/v1/modules/${encodeURIComponent(moduleId)}/deactivate`, {
const res = await fetch(`/api/sdk/v1/modules/${encodeURIComponent(moduleId)}/deactivate`, {
method: 'POST',
})
if (!res.ok) throw new Error('Deaktivierung fehlgeschlagen')
} catch {
console.warn('Could not persist module deactivation to backend')
// Rollback optimistic update
dispatch({ type: 'SET_STATE', payload: { modules: previousModules } })
setActionError('Modul konnte nicht deaktiviert werden.')
setTimeout(() => setActionError(null), 5000)
}
}
const handleCreateModule = async () => {
if (!newModuleName.trim()) return
try {
const res = await fetch('/api/sdk/v1/modules', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: newModuleName,
category: newModuleCategory,
description: newModuleDescription,
}),
})
if (res.ok) {
const data = await res.json()
const newMod: Omit<DisplayModule, 'status' | 'completionPercent'> = {
id: data.id || `custom-${Date.now()}`,
name: newModuleName,
description: newModuleDescription,
category: newModuleCategory,
regulations: [],
criticality: 'MEDIUM',
processesPersonalData: false,
hasAIComponents: false,
requirementsCount: 0,
controlsCount: 0,
}
setAvailableModules(prev => [...prev, newMod])
}
setShowCreateModal(false)
setNewModuleName('')
setNewModuleCategory('custom')
setNewModuleDescription('')
} catch {
setActionError('Modul konnte nicht erstellt werden.')
setTimeout(() => setActionError(null), 5000)
}
}
@@ -347,7 +412,10 @@ export default function ModulesPage() {
explanation={stepInfo.explanation}
tips={stepInfo.tips}
>
<button className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
<button
onClick={() => setShowCreateModal(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>
@@ -355,6 +423,78 @@ export default function ModulesPage() {
</button>
</StepHeader>
{/* Error Toast */}
{actionError && (
<div className="fixed top-4 right-4 z-50 bg-red-50 border border-red-200 rounded-lg p-4 shadow-lg max-w-sm">
<div className="flex items-start gap-2">
<svg className="w-5 h-5 text-red-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
<p className="text-sm text-red-700">{actionError}</p>
</div>
</div>
)}
{/* Create Module Modal */}
{showCreateModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div className="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Eigenes Modul erstellen</h3>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input
type="text"
value={newModuleName}
onChange={e => setNewModuleName(e.target.value)}
placeholder="z.B. ISO 42001 AI Management"
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
<select
value={newModuleCategory}
onChange={e => setNewModuleCategory(e.target.value as ModuleCategory)}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
>
<option value="gdpr">DSGVO</option>
<option value="ai-act">AI Act</option>
<option value="iso27001">ISO 27001</option>
<option value="nis2">NIS2</option>
<option value="custom">Eigene</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
<textarea
value={newModuleDescription}
onChange={e => setNewModuleDescription(e.target.value)}
placeholder="Was deckt dieses Modul ab?"
rows={3}
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
/>
</div>
</div>
<div className="flex justify-end gap-2 mt-6">
<button
onClick={() => setShowCreateModal(false)}
className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg"
>
Abbrechen
</button>
<button
onClick={handleCreateModule}
disabled={!newModuleName.trim()}
className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
>
Erstellen
</button>
</div>
</div>
</div>
)}
{/* Backend Status */}
{backendError && (
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm text-amber-700">
@@ -434,6 +574,7 @@ export default function ModulesPage() {
isActive={state.modules.some(m => m.id === module.id)}
onActivate={() => handleActivateModule(module)}
onDeactivate={() => handleDeactivateModule(module.id)}
onConfigure={() => router.push(`/sdk/modules/${module.id}`)}
/>
))}
</div>