Benjamin Admin
e7f2f98da3
Major features: - 215 norms library with section references + Beuth URLs (A/B1/B2/C norms) - 173 hazard patterns with detail fields (scenario, trigger, harm, zone) - Deterministic pattern matching: Component × Lifecycle × Pattern cross-product - SIL/PL auto-calculation from S×E×P risk graph - Risk assessment table with editable S/E/P dropdowns - Production Line Dashboard with animated station flow (Running Dots) - IACE process flow + norms coverage on start page - Non-blocking cookie banner, ProcessFlow SSR fix - 104 Playwright E2E tests passing Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
383 lines
15 KiB
TypeScript
383 lines
15 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { useParams } from 'next/navigation'
|
|
import { SuggestedNorms } from './_components/SuggestedNorms'
|
|
|
|
interface ProjectOverview {
|
|
id: string
|
|
machine_name: string
|
|
machine_type: string
|
|
manufacturer: string
|
|
status: string
|
|
completeness_pct: number
|
|
created_at: string
|
|
updated_at: string
|
|
gates: Gate[]
|
|
risk_summary?: {
|
|
critical?: number
|
|
high?: number
|
|
medium?: number
|
|
low?: number
|
|
total?: number
|
|
}
|
|
component_count: number
|
|
hazard_count: number
|
|
mitigation_count: number
|
|
}
|
|
|
|
interface Gate {
|
|
id: string
|
|
name: string
|
|
description: string
|
|
passed: boolean | null
|
|
required: boolean
|
|
}
|
|
|
|
const QUICK_ACTIONS = [
|
|
{ href: '/components', label: 'Komponenten verwalten', icon: 'cube', description: 'SW/FW/AI/HMI Baum bearbeiten' },
|
|
{ href: '/classification', label: 'Klassifikation pruefen', icon: 'tag', description: 'AI Act, MVO, CRA, NIS2' },
|
|
{ href: '/hazards', label: 'Hazard Log oeffnen', icon: 'warning', description: 'Gefaehrdungen und Risiken' },
|
|
{ href: '/mitigations', label: 'Massnahmen planen', icon: 'shield', description: 'Design, Schutz, Information' },
|
|
{ href: '/verification', label: 'Verifikationsplan', icon: 'check', description: 'Nachweise zuordnen' },
|
|
{ href: '/evidence', label: 'Nachweise hochladen', icon: 'document', description: 'Dokumente und Berichte' },
|
|
{ href: '/tech-file', label: 'CE-Akte generieren', icon: 'folder', description: 'Technische Dokumentation' },
|
|
{ href: '/monitoring', label: 'Monitoring', icon: 'activity', description: 'Post-Market Ueberwachung' },
|
|
]
|
|
|
|
function GateIndicator({ gate }: { gate: Gate }) {
|
|
const color = gate.passed === true
|
|
? 'bg-green-500'
|
|
: gate.passed === false
|
|
? 'bg-red-500'
|
|
: 'bg-gray-300'
|
|
|
|
const textColor = gate.passed === true
|
|
? 'text-green-700'
|
|
: gate.passed === false
|
|
? 'text-red-700'
|
|
: 'text-gray-500'
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 py-2">
|
|
<div className={`w-3 h-3 rounded-full ${color} flex-shrink-0`} />
|
|
<div className="flex-1 min-w-0">
|
|
<div className={`text-sm font-medium ${textColor}`}>{gate.name}</div>
|
|
<div className="text-xs text-gray-400">{gate.description}</div>
|
|
</div>
|
|
{gate.required && (
|
|
<span className="text-xs text-gray-400 flex-shrink-0">Pflicht</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function RiskGauge({ label, value, max, color }: { label: string; value: number; max: number; color: string }) {
|
|
const pct = max > 0 ? Math.round((value / max) * 100) : 0
|
|
return (
|
|
<div className="text-center">
|
|
<div className="relative w-20 h-20 mx-auto">
|
|
<svg className="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
|
|
<path
|
|
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
|
fill="none"
|
|
stroke="#E5E7EB"
|
|
strokeWidth="3"
|
|
/>
|
|
<path
|
|
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth="3"
|
|
strokeDasharray={`${pct}, 100`}
|
|
/>
|
|
</svg>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<span className="text-lg font-bold text-gray-900 dark:text-white">{value}</span>
|
|
</div>
|
|
</div>
|
|
<div className="mt-1 text-xs text-gray-500">{label}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const STATUS_WORKFLOW = [
|
|
{ key: 'draft', label: 'Entwurf' },
|
|
{ key: 'in_progress', label: 'In Bearbeitung' },
|
|
{ key: 'review', label: 'In Pruefung' },
|
|
{ key: 'approved', label: 'Freigegeben' },
|
|
]
|
|
|
|
export default function ProjectOverviewPage() {
|
|
const params = useParams()
|
|
const projectId = params.projectId as string
|
|
const [project, setProject] = useState<ProjectOverview | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
fetchProject()
|
|
}, [projectId])
|
|
|
|
async function fetchProject() {
|
|
try {
|
|
// Fetch project detail + live risk summary + mitigations count in parallel
|
|
const [projRes, riskRes, mitRes, hazRes] = await Promise.all([
|
|
fetch(`/api/sdk/v1/iace/projects/${projectId}`),
|
|
fetch(`/api/sdk/v1/iace/projects/${projectId}/risk-summary`),
|
|
fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations`),
|
|
fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`),
|
|
])
|
|
|
|
if (!projRes.ok) return
|
|
const json = await projRes.json()
|
|
|
|
// Live risk summary from dedicated endpoint
|
|
let rs = json.risk_summary || {}
|
|
if (riskRes.ok) {
|
|
const riskJson = await riskRes.json()
|
|
const live = riskJson.risk_summary || riskJson || {}
|
|
rs = {
|
|
critical: live.critical || 0,
|
|
high: live.high || 0,
|
|
medium: live.medium || 0,
|
|
low: live.low || 0,
|
|
negligible: live.negligible || 0,
|
|
total: live.total_hazards || live.total || 0,
|
|
}
|
|
}
|
|
|
|
// Live counts
|
|
let mitCount = 0
|
|
if (mitRes.ok) {
|
|
const mitJson = await mitRes.json()
|
|
mitCount = mitJson.total || (mitJson.mitigations || []).length || 0
|
|
}
|
|
let hazCount = 0
|
|
if (hazRes.ok) {
|
|
const hazJson = await hazRes.json()
|
|
hazCount = hazJson.total || (hazJson.hazards || []).length || 0
|
|
}
|
|
|
|
// Calculate dynamic completeness percentage
|
|
const compCount = json.components?.length || 0
|
|
const gates = (json.completeness_gates || json.gates || [])
|
|
const gatesPassed = gates.filter((g: Record<string, unknown>) => g.passed === true).length
|
|
const gatesTotal = gates.length || 1
|
|
const completeness = Math.round((gatesPassed / gatesTotal) * 100)
|
|
|
|
setProject({
|
|
...json,
|
|
completeness_pct: completeness,
|
|
component_count: compCount,
|
|
hazard_count: hazCount,
|
|
mitigation_count: mitCount,
|
|
risk_summary: {
|
|
critical: rs.critical || 0,
|
|
high: rs.high || 0,
|
|
medium: rs.medium || 0,
|
|
low: rs.low || 0,
|
|
total: rs.total || hazCount,
|
|
},
|
|
gates: gates.map((g: Record<string, unknown>) => ({
|
|
id: g.id,
|
|
name: g.name || g.label || '',
|
|
description: g.description || g.details || '',
|
|
passed: g.passed,
|
|
required: g.required,
|
|
})),
|
|
})
|
|
} catch (err) {
|
|
console.error('Failed to fetch project:', err)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!project) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">Projekt nicht gefunden</h2>
|
|
<Link href="/sdk/iace" className="mt-2 text-purple-600 hover:text-purple-700">
|
|
Zurueck zur Uebersicht
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const currentStatusIndex = STATUS_WORKFLOW.findIndex((s) => s.key === project.status)
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">{project.machine_name}</h1>
|
|
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
{project.machine_type} {project.manufacturer ? `-- ${project.manufacturer}` : ''}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Status Workflow */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
|
<h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Projektstatus</h2>
|
|
<div className="flex items-center gap-2">
|
|
{STATUS_WORKFLOW.map((step, index) => (
|
|
<React.Fragment key={step.key}>
|
|
<div
|
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium ${
|
|
index <= currentStatusIndex
|
|
? 'bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300'
|
|
: 'bg-gray-100 text-gray-400 dark:bg-gray-700 dark:text-gray-500'
|
|
}`}
|
|
>
|
|
{index < currentStatusIndex ? (
|
|
<svg className="w-4 h-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
) : index === currentStatusIndex ? (
|
|
<div className="w-2 h-2 rounded-full bg-purple-600" />
|
|
) : (
|
|
<div className="w-2 h-2 rounded-full bg-gray-300" />
|
|
)}
|
|
{step.label}
|
|
</div>
|
|
{index < STATUS_WORKFLOW.length - 1 && (
|
|
<div className={`flex-1 h-0.5 ${index < currentStatusIndex ? 'bg-purple-300' : 'bg-gray-200'}`} />
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Machine Info */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
|
<h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Maschineninformationen</h2>
|
|
<dl className="space-y-3">
|
|
<div>
|
|
<dt className="text-xs text-gray-500">Maschinenname</dt>
|
|
<dd className="text-sm font-medium text-gray-900 dark:text-white">{project.machine_name}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs text-gray-500">Typ</dt>
|
|
<dd className="text-sm font-medium text-gray-900 dark:text-white">{project.machine_type || '--'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs text-gray-500">Hersteller</dt>
|
|
<dd className="text-sm font-medium text-gray-900 dark:text-white">{project.manufacturer || '--'}</dd>
|
|
</div>
|
|
<div>
|
|
<dt className="text-xs text-gray-500">Vollstaendigkeit</dt>
|
|
<dd className="mt-1">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex-1 bg-gray-200 rounded-full h-2">
|
|
<div
|
|
className="bg-purple-500 h-2 rounded-full transition-all"
|
|
style={{ width: `${project.completeness_pct}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-sm font-medium text-gray-600">{project.completeness_pct}%</span>
|
|
</div>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
{/* Risk Summary — live from /risk-summary endpoint */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
|
<h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Risikozusammenfassung</h2>
|
|
{/* Risk level bars */}
|
|
<div className="space-y-2">
|
|
{[
|
|
{ label: 'Kritisch', value: project.risk_summary?.critical || 0, color: 'bg-red-500', text: 'text-red-700' },
|
|
{ label: 'Hoch', value: project.risk_summary?.high || 0, color: 'bg-orange-500', text: 'text-orange-700' },
|
|
{ label: 'Mittel', value: project.risk_summary?.medium || 0, color: 'bg-yellow-500', text: 'text-yellow-700' },
|
|
{ label: 'Niedrig', value: project.risk_summary?.low || 0, color: 'bg-green-500', text: 'text-green-700' },
|
|
].map((level) => {
|
|
const total = project.risk_summary?.total || 1
|
|
const pct = Math.round((level.value / total) * 100)
|
|
return (
|
|
<div key={level.label} className="flex items-center gap-3">
|
|
<span className={`text-xs font-medium w-16 ${level.text}`}>{level.label}</span>
|
|
<div className="flex-1 bg-gray-100 rounded-full h-4 overflow-hidden">
|
|
<div className={`${level.color} h-4 rounded-full transition-all`} style={{ width: `${pct}%` }} />
|
|
</div>
|
|
<span className="text-sm font-bold text-gray-900 dark:text-white w-8 text-right">{level.value}</span>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
{/* Counts */}
|
|
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-3 gap-4 text-center">
|
|
<div>
|
|
<div className="text-2xl font-bold text-gray-900 dark:text-white">{project.component_count}</div>
|
|
<div className="text-xs text-gray-500">Komponenten</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-gray-900 dark:text-white">{project.hazard_count}</div>
|
|
<div className="text-xs text-gray-500">Gefaehrdungen</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-bold text-gray-900 dark:text-white">{project.mitigation_count}</div>
|
|
<div className="text-xs text-gray-500">Massnahmen</div>
|
|
</div>
|
|
</div>
|
|
{/* RPZ threshold info */}
|
|
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500">
|
|
RPZ-Schwellen: Kritisch >100 | Hoch 60-100 | Mittel 20-60 | Niedrig <20
|
|
</div>
|
|
</div>
|
|
|
|
{/* Completeness Gates */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
|
<h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Completeness Gates</h2>
|
|
<div className="space-y-1">
|
|
{project.gates && project.gates.length > 0 ? (
|
|
project.gates.map((gate) => <GateIndicator key={gate.id} gate={gate} />)
|
|
) : (
|
|
<p className="text-sm text-gray-400">Keine Gates definiert</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Suggested Norms */}
|
|
<SuggestedNorms projectId={projectId} />
|
|
|
|
{/* Quick Actions */}
|
|
<div>
|
|
<h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Schnellzugriff</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
|
{QUICK_ACTIONS.map((action) => (
|
|
<Link
|
|
key={action.href}
|
|
href={`/sdk/iace/${projectId}${action.href}`}
|
|
className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 hover:shadow-md hover:border-purple-300 transition-all group"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center text-purple-600 group-hover:bg-purple-100 transition-colors flex-shrink-0">
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium text-gray-900 dark:text-white truncate">{action.label}</div>
|
|
<div className="text-xs text-gray-500 truncate">{action.description}</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|