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
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user