Benjamin_Boenisch/breakpilot-compliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Analyse-Module auf 100% Runde 2 — CREATE-Forms, Button-Handler, Persistenz
All checks were successful
CI / go-lint (push) Has been skipped
Details
CI / python-lint (push) Has been skipped
Details
CI / nodejs-lint (push) Has been skipped
Details
CI / test-go-ai-compliance (push) Successful in 36s
Details
CI / test-python-backend-compliance (push) Successful in 36s
Details
CI / test-python-document-crawler (push) Successful in 22s
Details
CI / test-python-dsms-gateway (push) Successful in 19s
Details

Browse Source 
Requirements: ADD-Form + Details-Panel mit Controls/Status-Anzeige
Controls: ADD-Form + Effectiveness-Persistenz via PUT
Evidence: Anzeigen/Herunterladen-Buttons mit fileUrl + disabled-State
Risks: RiskMatrix Cell-Click filtert Risiko-Liste mit Badge + Reset
AI Act: Mock-Daten entfernt, Loading-Skeleton, Edit/Delete-Handler
Audit Checklist: JSON-Export, debounced Notes-Persistenz, Neue Checkliste
Audit Report: Animiertes Skeleton statt Loading-Text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-03-02 13:13:26 +01:00
parent a50a9810ee
commit fc83ebfd82
7 changed files with 607 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
admin-compliance/app/(sdk)/sdk/requirements/page.tsx
View File

@@ -161,12 +161,111 @@ const requirementTemplates: Omit<DisplayRequirement, 'displayStatus' | 'controls
// COMPONENTS
// =============================================================================
function AddRequirementForm({
onSubmit,
onCancel,
}: {
onSubmit: (data: { regulation: string; article: string; title: string; description: string; criticality: RiskSeverity }) => void
onCancel: () => void
}) {
const [formData, setFormData] = useState({
regulation: '',
article: '',
title: '',
description: '',
criticality: 'MEDIUM' as RiskSeverity,
})
return (
<div className="bg-white rounded-xl border border-gray-200 p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Neue Anforderung</h3>
<div className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Verordnung *</label>
<input
type="text"
value={formData.regulation}
onChange={e => setFormData({ ...formData, regulation: e.target.value })}
placeholder="z.B. DSGVO"
className="w-full px-4 py-2 border border-gray-300 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">Artikel</label>
<input
type="text"
value={formData.article}
onChange={e => setFormData({ ...formData, article: e.target.value })}
placeholder="z.B. Art. 6"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
<input
type="text"
value={formData.title}
onChange={e => setFormData({ ...formData, title: e.target.value })}
placeholder="z.B. Rechtmaessigkeit der Verarbeitung"
className="w-full px-4 py-2 border border-gray-300 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">Beschreibung</label>
<textarea
value={formData.description}
onChange={e => setFormData({ ...formData, description: e.target.value })}
placeholder="Beschreiben Sie die Anforderung..."
rows={3}
className="w-full px-4 py-2 border border-gray-300 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">Kritikalitaet</label>
<select
value={formData.criticality}
onChange={e => setFormData({ ...formData, criticality: e.target.value as RiskSeverity })}
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
>
<option value="LOW">Niedrig</option>
<option value="MEDIUM">Mittel</option>
<option value="HIGH">Hoch</option>
<option value="CRITICAL">Kritisch</option>
</select>
</div>
</div>
<div className="mt-6 flex items-center justify-end gap-3">
<button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
Abbrechen
</button>
<button
onClick={() => onSubmit(formData)}
disabled={!formData.title || !formData.regulation}
className={`px-6 py-2 rounded-lg font-medium transition-colors ${
formData.title && formData.regulation ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
}`}
>
Hinzufuegen
</button>
</div>
</div>
)
}
function RequirementCard({
requirement,
onStatusChange,
expanded,
onToggleDetails,
linkedControls,
}: {
requirement: DisplayRequirement
onStatusChange: (status: RequirementStatus) => void
expanded: boolean
onToggleDetails: () => void
linkedControls: { id: string; name: string }[]
}) {
const priorityColors = {
critical: 'bg-red-100 text-red-700',
@@ -220,10 +319,48 @@ function RequirementCard({
<span>{requirement.controlsLinked} Kontrollen</span>
<span>{requirement.evidenceCount} Nachweise</span>
</div>
<button className="text-sm text-purple-600 hover:text-purple-700 font-medium">
Details anzeigen
<button
onClick={onToggleDetails}
className="text-sm text-purple-600 hover:text-purple-700 font-medium"
>
{expanded ? 'Details ausblenden' : 'Details anzeigen'}
</button>
</div>
{expanded && (
<div className="mt-4 pt-4 border-t border-gray-200 space-y-3">
<div>
<h4 className="text-sm font-medium text-gray-700 mb-1">Vollstaendige Beschreibung</h4>
<p className="text-sm text-gray-600">{requirement.description || 'Keine Beschreibung vorhanden.'}</p>
</div>
<div>
<h4 className="text-sm font-medium text-gray-700 mb-1">Zugeordnete Kontrollen ({linkedControls.length})</h4>
{linkedControls.length > 0 ? (
<div className="flex flex-wrap gap-2">
{linkedControls.map(c => (
<span key={c.id} className="px-2 py-1 text-xs bg-green-50 text-green-700 rounded">{c.name}</span>
))}
</div>
) : (
<p className="text-sm text-gray-400">Keine Kontrollen zugeordnet</p>
)}
</div>
<div>
<h4 className="text-sm font-medium text-gray-700 mb-1">Status-Historie</h4>
<div className="flex items-center gap-2 text-sm text-gray-500">
<span className={`px-2 py-0.5 text-xs rounded-full ${
requirement.displayStatus === 'compliant' ? 'bg-green-100 text-green-700' :
requirement.displayStatus === 'partial' ? 'bg-yellow-100 text-yellow-700' :
'bg-red-100 text-red-700'
}`}>
{requirement.status === 'NOT_STARTED' ? 'Nicht begonnen' :
requirement.status === 'IN_PROGRESS' ? 'In Bearbeitung' :
requirement.status === 'IMPLEMENTED' ? 'Implementiert' : 'Verifiziert'}
</span>
</div>
</div>
</div>
)}
</div>
)
}
@@ -255,6 +392,8 @@ export default function RequirementsPage() {
const [searchQuery, setSearchQuery] = useState('')
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [showAddForm, setShowAddForm] = useState(false)
const [expandedId, setExpandedId] = useState<string | null>(null)
// Fetch requirements from backend on mount
useEffect(() => {
@@ -371,6 +510,22 @@ export default function RequirementsPage() {
}
}
const handleAddRequirement = (data: { regulation: string; article: string; title: string; description: string; criticality: RiskSeverity }) => {
const newReq: SDKRequirement = {
id: `req-${Date.now()}`,
regulation: data.regulation,
article: data.article,
title: data.title,
description: data.description,
criticality: data.criticality,
applicableModules: [],
status: 'NOT_STARTED',
controls: [],
}
dispatch({ type: 'ADD_REQUIREMENT', payload: newReq })
setShowAddForm(false)
}
const stepInfo = STEP_EXPLANATIONS['requirements']
return (
@@ -383,7 +538,10 @@ export default function RequirementsPage() {
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={() => 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>
@@ -391,6 +549,14 @@ export default function RequirementsPage() {
</button>
</StepHeader>
{/* Add Form */}
{showAddForm && (
<AddRequirementForm
onSubmit={handleAddRequirement}
onCancel={() => setShowAddForm(false)}
/>
)}
{/* Error Banner */}
{error && (
<div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
@@ -476,13 +642,21 @@ export default function RequirementsPage() {
{/* Requirements List */}
{!loading && (
<div className="space-y-4">
{filteredRequirements.map(requirement => (
<RequirementCard
key={requirement.id}
requirement={requirement}
onStatusChange={(status) => handleStatusChange(requirement.id, status)}
/>
))}
{filteredRequirements.map(requirement => {
const linkedControls = state.controls
.filter(c => c.evidence.includes(requirement.id))
.map(c => ({ id: c.id, name: c.name }))
return (
<RequirementCard
key={requirement.id}
requirement={requirement}
onStatusChange={(status) => handleStatusChange(requirement.id, status)}
expanded={expandedId === requirement.id}
onToggleDetails={() => setExpandedId(expandedId === requirement.id ? null : requirement.id)}
linkedControls={linkedControls}
/>
)
})}
</div>
)}