feat(cra): CRA Compliance module Phase 1+2+3 (intake, scope, path, requirements, backlog, sbom, checks)
Phase 1 — Intake + Scope + Path: - Migration 119: compliance_cra_projects table (intake + classification + path + status state machine) - Backend service cra_routes.py: CRUD + scope-check + path-select - Deterministic Annex III/IV classifier (verbatim mapping from migration 059 wiki) - Path validation per classification (CRITICAL → notified_body mandatory) - Frontend: project list, dashboard, 3-step wizard (intake/scope/path) - Sidebar entry under "CRA Compliance" (red) Phase 2 — Annex I Requirements + Priorisierungs-Backlog: - cra_annex_i_data.py: 40 Annex-I requirements (8 categories), 9 measures (M540-M548), 3 CRA deadlines - Endpoints: /requirements (40 items), /backlog (priority-sorted with deadline pressure) - Frontend: requirements table with filters + expandable details, backlog with deadline banner + score-ranked table - Dashboard KPI cards (Critical count, days to CE deadline, etc.) + top-10 backlog snippet Phase 3 — SBOM Upload + Automated Checks: - Migration 120: compliance_cra_sboms (versioned uploads, CycloneDX + SPDX) - SBOM endpoints: POST /sbom/upload (format detection, summary extraction), GET /sboms - Checks reuse compliance_evidence_checks: init creates 6 default CRA checks, run executes - Real implementations: cra_security_txt (HTTP + Contact: line) and cra_tls_cert_check (TLS handshake) - Frontend: SBOM file upload + version list, Checks page with per-check URL input + Run button Backend-Reuse: gap_projects (intake pre-population), compliance_evidence_checks/_check_results. Tenant scoping via existing X-Tenant-ID header pattern. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
@@ -0,0 +1,200 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { ClassificationBadge } from './_components/ClassificationBadge'
|
||||
|
||||
interface CRAProject {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
cra_classification: string | null
|
||||
conformity_path: string | null
|
||||
status: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
const PATH_LABEL: Record<string, string> = {
|
||||
self_assessment: 'Modul A (Self-Assessment)',
|
||||
harmonized_standard: 'Modul B (Harmonized)',
|
||||
eucc: 'Modul H (EUCC)',
|
||||
notified_body: 'Modul C (Notified Body)',
|
||||
}
|
||||
|
||||
const STATUS_LABEL: Record<string, string> = {
|
||||
draft: 'Entwurf',
|
||||
scoped: 'Intake erfasst',
|
||||
classified: 'Klassifiziert',
|
||||
path_selected: 'Pfad gewaehlt',
|
||||
requirements_mapped: 'Requirements',
|
||||
evidence_pending: 'Evidence',
|
||||
gaps_open: 'Gaps offen',
|
||||
remediation: 'Remediation',
|
||||
ready_for_review: 'In Pruefung',
|
||||
declaration_ready: 'DoC bereit',
|
||||
post_market: 'Post-Market',
|
||||
archived: 'Archiviert',
|
||||
}
|
||||
|
||||
export default function CRAProjectsPage() {
|
||||
const router = useRouter()
|
||||
const [projects, setProjects] = useState<CRAProject[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState('')
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const [newName, setNewName] = useState('')
|
||||
const [newDescription, setNewDescription] = useState('')
|
||||
const [creating, setCreating] = useState(false)
|
||||
|
||||
const tenantHeader = '00000000-0000-0000-0000-000000000001'
|
||||
|
||||
const loadProjects = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/sdk/v1/cra/projects', {
|
||||
headers: { 'X-Tenant-ID': tenantHeader },
|
||||
})
|
||||
if (!res.ok) throw new Error(await res.text())
|
||||
const data = await res.json()
|
||||
setProjects(data.projects || [])
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Fehler beim Laden')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => { loadProjects() }, [loadProjects])
|
||||
|
||||
const createProject = async () => {
|
||||
if (!newName.trim()) return
|
||||
setCreating(true)
|
||||
setError('')
|
||||
try {
|
||||
const res = await fetch('/api/sdk/v1/cra/projects', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantHeader },
|
||||
body: JSON.stringify({ name: newName, description: newDescription }),
|
||||
})
|
||||
if (!res.ok) throw new Error(await res.text())
|
||||
const project = await res.json()
|
||||
router.push(`/sdk/cra/${project.id}/intake`)
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Anlegen fehlgeschlagen')
|
||||
} finally {
|
||||
setCreating(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-8">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-3xl font-bold text-gray-900">CRA Compliance</h1>
|
||||
<p className="text-gray-600 mt-2">
|
||||
Cyber Resilience Act — Konformitaets-Workflow fuer Produkte mit digitalen Elementen.
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
Fuer Entwickler / Tech-Experten. Hardware-CE-Risikobeurteilung siehe{' '}
|
||||
<a href="/sdk/iace" className="text-blue-600 hover:underline">iACE</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-700">
|
||||
{error}
|
||||
<button onClick={() => setError('')} className="ml-3 underline">Schliessen</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => setShowModal(true)}
|
||||
className="mb-6 w-full py-4 border-2 border-dashed border-red-300 rounded-xl text-red-600 hover:bg-red-50 hover:border-red-400 transition-colors font-medium"
|
||||
>
|
||||
+ Neues CRA-Projekt
|
||||
</button>
|
||||
|
||||
{loading ? (
|
||||
<div className="text-center text-gray-500 py-12">Laedt...</div>
|
||||
) : projects.length === 0 ? (
|
||||
<p className="text-center text-gray-500 mt-8">
|
||||
Noch keine Projekte. Starten Sie Ihre erste CRA-Konformitaetsanalyse.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-lg font-semibold text-gray-800">Projekte</h2>
|
||||
{projects.map(p => (
|
||||
<a
|
||||
key={p.id}
|
||||
href={`/sdk/cra/${p.id}`}
|
||||
className="block bg-white rounded-xl shadow-sm border border-gray-200 p-5 hover:shadow-md hover:border-red-300 transition-all"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-gray-900 truncate">{p.name}</h3>
|
||||
{p.description && (
|
||||
<p className="text-sm text-gray-500 mt-1 truncate">{p.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3 flex-shrink-0">
|
||||
<ClassificationBadge value={p.cra_classification} size="sm" />
|
||||
{p.conformity_path && (
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-purple-100 text-purple-800">
|
||||
{PATH_LABEL[p.conformity_path] || p.conformity_path}
|
||||
</span>
|
||||
)}
|
||||
<span className="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-700">
|
||||
{STATUS_LABEL[p.status] || p.status}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">
|
||||
{new Date(p.created_at).toLocaleDateString('de-DE')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Neues CRA-Projekt anlegen</h3>
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Projektname (z.B. SmartHome Gateway v3)"
|
||||
value={newName}
|
||||
onChange={e => setNewName(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Kurzbeschreibung (optional)"
|
||||
value={newDescription}
|
||||
onChange={e => setNewDescription(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3 mt-5">
|
||||
<button
|
||||
onClick={() => { setShowModal(false); setNewName(''); setNewDescription('') }}
|
||||
disabled={creating}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
onClick={createProject}
|
||||
disabled={creating || !newName.trim()}
|
||||
className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:bg-gray-300"
|
||||
>
|
||||
{creating ? 'Erstelle...' : 'Anlegen'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user