215b95adfa
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 32s
CI / test-python-backend-compliance (push) Successful in 31s
CI / test-python-document-crawler (push) Successful in 21s
CI / test-python-dsms-gateway (push) Successful in 19s
Kaputtes (admin) Layout geloescht (Role-Selection, 404-Sidebar, localhost-Dashboard). SDK-Flow nach /sdk/sdk-flow verschoben. Route-Gruppe (sdk) aufgeloest. Root-Seite redirected auf /sdk. ~25 ungenutzte Dateien/Verzeichnisse entfernt. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
414 lines
15 KiB
TypeScript
414 lines
15 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect } from 'react'
|
|
import { useParams } from 'next/navigation'
|
|
|
|
interface Mitigation {
|
|
id: string
|
|
title: string
|
|
description: string
|
|
reduction_type: 'design' | 'protection' | 'information'
|
|
status: 'planned' | 'implemented' | 'verified'
|
|
linked_hazard_ids: string[]
|
|
linked_hazard_names: string[]
|
|
created_at: string
|
|
verified_at: string | null
|
|
verified_by: string | null
|
|
}
|
|
|
|
interface Hazard {
|
|
id: string
|
|
name: string
|
|
risk_level: string
|
|
}
|
|
|
|
const REDUCTION_TYPES = {
|
|
design: {
|
|
label: 'Design',
|
|
description: 'Inhaerent sichere Konstruktion',
|
|
color: 'border-blue-200 bg-blue-50',
|
|
headerColor: 'bg-blue-100 text-blue-800',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
|
|
</svg>
|
|
),
|
|
},
|
|
protection: {
|
|
label: 'Schutz',
|
|
description: 'Technische Schutzmassnahmen',
|
|
color: 'border-green-200 bg-green-50',
|
|
headerColor: 'bg-green-100 text-green-800',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
|
</svg>
|
|
),
|
|
},
|
|
information: {
|
|
label: 'Information',
|
|
description: 'Hinweise und Schulungen',
|
|
color: 'border-yellow-200 bg-yellow-50',
|
|
headerColor: 'bg-yellow-100 text-yellow-800',
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
},
|
|
}
|
|
|
|
function StatusBadge({ status }: { status: string }) {
|
|
const colors: Record<string, string> = {
|
|
planned: 'bg-gray-100 text-gray-700',
|
|
implemented: 'bg-blue-100 text-blue-700',
|
|
verified: 'bg-green-100 text-green-700',
|
|
}
|
|
const labels: Record<string, string> = {
|
|
planned: 'Geplant',
|
|
implemented: 'Umgesetzt',
|
|
verified: 'Verifiziert',
|
|
}
|
|
return (
|
|
<span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${colors[status] || colors.planned}`}>
|
|
{labels[status] || status}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
interface MitigationFormData {
|
|
title: string
|
|
description: string
|
|
reduction_type: 'design' | 'protection' | 'information'
|
|
linked_hazard_ids: string[]
|
|
}
|
|
|
|
function MitigationForm({
|
|
onSubmit,
|
|
onCancel,
|
|
hazards,
|
|
preselectedType,
|
|
}: {
|
|
onSubmit: (data: MitigationFormData) => void
|
|
onCancel: () => void
|
|
hazards: Hazard[]
|
|
preselectedType?: 'design' | 'protection' | 'information'
|
|
}) {
|
|
const [formData, setFormData] = useState<MitigationFormData>({
|
|
title: '',
|
|
description: '',
|
|
reduction_type: preselectedType || 'design',
|
|
linked_hazard_ids: [],
|
|
})
|
|
|
|
function toggleHazard(id: string) {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
linked_hazard_ids: prev.linked_hazard_ids.includes(id)
|
|
? prev.linked_hazard_ids.filter((h) => h !== id)
|
|
: [...prev.linked_hazard_ids, id],
|
|
}))
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Neue Massnahme</h3>
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Titel *</label>
|
|
<input
|
|
type="text"
|
|
value={formData.title}
|
|
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
|
placeholder="z.B. Lichtvorhang an Gefahrenstelle"
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Reduktionstyp</label>
|
|
<select
|
|
value={formData.reduction_type}
|
|
onChange={(e) => setFormData({ ...formData, reduction_type: e.target.value as MitigationFormData['reduction_type'] })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
|
>
|
|
<option value="design">Design - Inhaerent sichere Konstruktion</option>
|
|
<option value="protection">Schutz - Technische Schutzmassnahmen</option>
|
|
<option value="information">Information - Hinweise und Schulungen</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beschreibung</label>
|
|
<textarea
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
rows={2}
|
|
placeholder="Detaillierte Beschreibung der Massnahme..."
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
|
/>
|
|
</div>
|
|
{hazards.length > 0 && (
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Verknuepfte Gefaehrdungen</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{hazards.map((h) => (
|
|
<button
|
|
key={h.id}
|
|
onClick={() => toggleHazard(h.id)}
|
|
className={`px-3 py-1.5 text-xs rounded-lg border transition-colors ${
|
|
formData.linked_hazard_ids.includes(h.id)
|
|
? 'border-purple-400 bg-purple-50 text-purple-700'
|
|
: 'border-gray-200 bg-white text-gray-600 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{h.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mt-4 flex items-center gap-3">
|
|
<button
|
|
onClick={() => onSubmit(formData)}
|
|
disabled={!formData.title}
|
|
className={`px-6 py-2 rounded-lg font-medium transition-colors ${
|
|
formData.title
|
|
? 'bg-purple-600 text-white hover:bg-purple-700'
|
|
: 'bg-gray-200 text-gray-400 cursor-not-allowed'
|
|
}`}
|
|
>
|
|
Hinzufuegen
|
|
</button>
|
|
<button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
|
|
Abbrechen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MitigationCard({
|
|
mitigation,
|
|
onVerify,
|
|
onDelete,
|
|
}: {
|
|
mitigation: Mitigation
|
|
onVerify: (id: string) => void
|
|
onDelete: (id: string) => void
|
|
}) {
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
|
|
<div className="flex items-start justify-between mb-2">
|
|
<h4 className="text-sm font-medium text-gray-900 dark:text-white">{mitigation.title}</h4>
|
|
<StatusBadge status={mitigation.status} />
|
|
</div>
|
|
{mitigation.description && (
|
|
<p className="text-xs text-gray-500 mb-3">{mitigation.description}</p>
|
|
)}
|
|
{mitigation.linked_hazard_names.length > 0 && (
|
|
<div className="mb-3">
|
|
<div className="flex flex-wrap gap-1">
|
|
{mitigation.linked_hazard_names.map((name, i) => (
|
|
<span key={i} className="inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
|
|
{name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-2">
|
|
{mitigation.status !== 'verified' && (
|
|
<button
|
|
onClick={() => onVerify(mitigation.id)}
|
|
className="text-xs px-2.5 py-1 bg-green-50 text-green-700 border border-green-200 rounded-lg hover:bg-green-100 transition-colors"
|
|
>
|
|
Verifizieren
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => onDelete(mitigation.id)}
|
|
className="text-xs px-2.5 py-1 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
|
>
|
|
Loeschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function MitigationsPage() {
|
|
const params = useParams()
|
|
const projectId = params.projectId as string
|
|
const [mitigations, setMitigations] = useState<Mitigation[]>([])
|
|
const [hazards, setHazards] = useState<Hazard[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [showForm, setShowForm] = useState(false)
|
|
const [preselectedType, setPreselectedType] = useState<'design' | 'protection' | 'information' | undefined>()
|
|
|
|
useEffect(() => {
|
|
fetchData()
|
|
}, [projectId])
|
|
|
|
async function fetchData() {
|
|
try {
|
|
const [mitRes, hazRes] = await Promise.all([
|
|
fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations`),
|
|
fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`),
|
|
])
|
|
if (mitRes.ok) {
|
|
const json = await mitRes.json()
|
|
setMitigations(json.mitigations || json || [])
|
|
}
|
|
if (hazRes.ok) {
|
|
const json = await hazRes.json()
|
|
setHazards((json.hazards || json || []).map((h: Hazard) => ({ id: h.id, name: h.name, risk_level: h.risk_level })))
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to fetch data:', err)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
async function handleSubmit(data: MitigationFormData) {
|
|
try {
|
|
const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data),
|
|
})
|
|
if (res.ok) {
|
|
setShowForm(false)
|
|
setPreselectedType(undefined)
|
|
await fetchData()
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to add mitigation:', err)
|
|
}
|
|
}
|
|
|
|
async function handleVerify(id: string) {
|
|
try {
|
|
const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations/${id}/verify`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
})
|
|
if (res.ok) {
|
|
await fetchData()
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to verify mitigation:', err)
|
|
}
|
|
}
|
|
|
|
async function handleDelete(id: string) {
|
|
if (!confirm('Massnahme wirklich loeschen?')) return
|
|
try {
|
|
const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations/${id}`, { method: 'DELETE' })
|
|
if (res.ok) {
|
|
await fetchData()
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to delete mitigation:', err)
|
|
}
|
|
}
|
|
|
|
function handleAddForType(type: 'design' | 'protection' | 'information') {
|
|
setPreselectedType(type)
|
|
setShowForm(true)
|
|
}
|
|
|
|
const byType = {
|
|
design: mitigations.filter((m) => m.reduction_type === 'design'),
|
|
protection: mitigations.filter((m) => m.reduction_type === 'protection'),
|
|
information: mitigations.filter((m) => m.reduction_type === 'information'),
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Massnahmen</h1>
|
|
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
Risikominderung nach dem 3-Stufen-Verfahren: Design, Schutz, Information.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setPreselectedType(undefined)
|
|
setShowForm(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>
|
|
Massnahme hinzufuegen
|
|
</button>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
{showForm && (
|
|
<MitigationForm
|
|
onSubmit={handleSubmit}
|
|
onCancel={() => {
|
|
setShowForm(false)
|
|
setPreselectedType(undefined)
|
|
}}
|
|
hazards={hazards}
|
|
preselectedType={preselectedType}
|
|
/>
|
|
)}
|
|
|
|
{/* 3-Column Layout */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{(['design', 'protection', 'information'] as const).map((type) => {
|
|
const config = REDUCTION_TYPES[type]
|
|
const items = byType[type]
|
|
return (
|
|
<div key={type} className={`rounded-xl border ${config.color} p-4`}>
|
|
<div className={`flex items-center gap-2 px-3 py-2 rounded-lg ${config.headerColor} mb-4`}>
|
|
{config.icon}
|
|
<div>
|
|
<h3 className="text-sm font-semibold">{config.label}</h3>
|
|
<p className="text-xs opacity-75">{config.description}</p>
|
|
</div>
|
|
<span className="ml-auto text-sm font-bold">{items.length}</span>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{items.map((m) => (
|
|
<MitigationCard
|
|
key={m.id}
|
|
mitigation={m}
|
|
onVerify={handleVerify}
|
|
onDelete={handleDelete}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => handleAddForType(type)}
|
|
className="mt-3 w-full py-2 text-sm text-gray-500 hover:text-purple-600 hover:bg-white rounded-lg border border-dashed border-gray-300 hover:border-purple-300 transition-colors"
|
|
>
|
|
+ Massnahme hinzufuegen
|
|
</button>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|