Benjamin Admin
8f4f59f0e3
[migration-approved]
Expert-driven workflow refinement on the Massnahmen page. The engine seeds
~80 mitigations per project, but for a concrete customer site most need a
relevance decision before they're meaningful in verification:
status: 'planned' | 'implemented' | 'verified' (existing — verification track)
is_relevant bool (new) (does this apply to *this* site?)
is_customer_standard bool (new) (already in place at customer — no evidence)
Decision flow on the Mitigations tab:
Engine-seeded → is_relevant=false (Default, waiting for expert)
Expert checks "Relevant" → is_relevant=true → surfaces in verification
Expert clicks trash → DELETE (banner warns: do not click Reinit
afterwards or seeds come back)
In verification, customer_standard=true bypasses evidence upload
is_customer_standard implies is_relevant (DB CHECK constraint).
Migration 029_iace_mitigation_relevance.sql:
ALTER TABLE iace_mitigations ADD COLUMN is_relevant ..., is_customer_standard ...
+ CHECK constraint + partial index on is_relevant for the verification
page's filter.
Backend (Go):
- Mitigation struct gains two bool fields
- CreateMitigation: defaults to false/false (engine-seeded mitigations
start unbewertet)
- UpdateMitigation: new case clauses for both keys; setting
is_customer_standard=true auto-flips is_relevant=true to satisfy
the CHECK constraint
- All three SELECT statements (ListMitigations, ListMitigationsByProject,
getMitigation) extended with the two new columns
Frontend:
- Maßnahmen-page columns: [Relev. ☑] [Lösch. 🗑] Title | #Hazards | P·I·V
- Group-header checkbox shows tri-state (indeterminate when partial),
flips all instances in the group at once
- Banner above the table: "Markiere jede Maßnahme als Relevant oder
lösche sie. Nach Löschen kein Neu initialisieren mehr drücken."
- Relevant rows tinted emerald, customer-standard label visible
- Legacy bulk-select state + helpers removed (the Relevant checkbox
now IS the primary mass action)
- useMitigations gains handleSetRelevant, handleSetCustomerStandard,
handleDeleteSilent (for non-confirm bulk deletes)
Future use: is_customer_standard mitigations from a prior project at the
same customer can later be auto-suggested when commissioning the next
plant — turning expert knowledge into reusable customer-profile data.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
320 lines
18 KiB
TypeScript
320 lines
18 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { useParams } from 'next/navigation'
|
|
import { REDUCTION_TYPES, Mitigation } from './_components/types'
|
|
import { HierarchyWarning } from './_components/HierarchyWarning'
|
|
import { MeasuresLibraryModal } from './_components/MeasuresLibraryModal'
|
|
import { SuggestMeasuresModal } from './_components/SuggestMeasuresModal'
|
|
import { MitigationForm } from './_components/MitigationForm'
|
|
import { StatusBadge } from './_components/StatusBadge'
|
|
import { MitigationHints } from './_components/MitigationHints'
|
|
import { ProtectiveMeasure } from './_components/types'
|
|
import { useMitigations } from './_hooks/useMitigations'
|
|
|
|
export default function MitigationsPage() {
|
|
const params = useParams()
|
|
const projectId = params.projectId as string
|
|
|
|
const {
|
|
hazards, loading, hierarchyWarning, setHierarchyWarning,
|
|
measures, byType, fetchData,
|
|
fetchMeasuresLibrary, handleSubmit, handleAddSuggestedMeasure,
|
|
handleDelete, handleDeleteSilent, handleSetRelevant,
|
|
} = useMitigations(projectId)
|
|
|
|
const [measureNorms, setMeasureNorms] = useState<Record<string, string[]>>({})
|
|
|
|
useEffect(() => {
|
|
fetch('/api/sdk/v1/iace/protective-measures-library')
|
|
.then(r => r.ok ? r.json() : null)
|
|
.then(json => {
|
|
if (!json?.protective_measures) return
|
|
const map: Record<string, string[]> = {}
|
|
for (const m of json.protective_measures) {
|
|
if (m.norm_references?.length > 0) {
|
|
map[(m.name || '').toLowerCase()] = m.norm_references
|
|
}
|
|
}
|
|
setMeasureNorms(map)
|
|
})
|
|
.catch(() => {})
|
|
}, [])
|
|
|
|
const [showForm, setShowForm] = useState(false)
|
|
const [preselectedType, setPreselectedType] = useState<'design' | 'protection' | 'information' | undefined>()
|
|
const [showLibrary, setShowLibrary] = useState(false)
|
|
const [libraryFilter, setLibraryFilter] = useState<string | undefined>()
|
|
const [showSuggest, setShowSuggest] = useState(false)
|
|
const [expanded, setExpanded] = useState<Record<string, boolean>>({ design: true, protection: true, information: true })
|
|
const [mitPages, setMitPages] = useState<Record<string, number>>({ design: 1, protection: 1, information: 1 })
|
|
const [expandedMeasure, setExpandedMeasure] = useState<string | null>(null)
|
|
// Group-Expand: key = `${type}:${title}` so the same title in different
|
|
// reduction stages stays independently togglable.
|
|
const [expandedGroup, setExpandedGroup] = useState<Set<string>>(new Set())
|
|
|
|
function toggleGroup(key: string) {
|
|
setExpandedGroup((prev) => {
|
|
const next = new Set(prev)
|
|
if (next.has(key)) next.delete(key); else next.add(key)
|
|
return next
|
|
})
|
|
}
|
|
|
|
// Mitigations sharing the same title (e.g. "Sicherheitszeichen nach ISO 7010"
|
|
// applied to 21 hazards) collapse into a single group row. Each instance
|
|
// keeps its own DB id, status and notes — the grouping is presentation-only.
|
|
function groupByTitle(items: Mitigation[]): Array<{ title: string; instances: Mitigation[] }> {
|
|
const map = new Map<string, Mitigation[]>()
|
|
for (const m of items) {
|
|
const key = (m.title || '').trim() || '(ohne Titel)'
|
|
const arr = map.get(key)
|
|
if (arr) arr.push(m); else map.set(key, [m])
|
|
}
|
|
return Array.from(map.entries()).map(([title, instances]) => ({ title, instances }))
|
|
}
|
|
|
|
// Compact status distribution: returns counts for the three known states.
|
|
function statusCounts(instances: Mitigation[]) {
|
|
const c = { planned: 0, implemented: 0, verified: 0 }
|
|
for (const m of instances) {
|
|
if (m.status === 'planned') c.planned++
|
|
else if (m.status === 'implemented') c.implemented++
|
|
else if (m.status === 'verified') c.verified++
|
|
}
|
|
return c
|
|
}
|
|
|
|
function toggleSection(type: string) {
|
|
setExpanded((prev) => ({ ...prev, [type]: !prev[type] }))
|
|
}
|
|
|
|
function handleOpenLibrary(type?: string) {
|
|
setLibraryFilter(type)
|
|
fetchMeasuresLibrary(type)
|
|
setShowLibrary(true)
|
|
}
|
|
|
|
function handleSelectMeasure(measure: ProtectiveMeasure) {
|
|
setShowLibrary(false)
|
|
setShowForm(true)
|
|
setPreselectedType(measure.reduction_type as 'design' | 'protection' | '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>
|
|
)
|
|
}
|
|
|
|
const totalMeasures = byType.design.length + byType.protection.length + byType.information.length
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 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">
|
|
{totalMeasures} Massnahmen nach 3-Stufen-Verfahren: Design ({byType.design.length}) → Schutz ({byType.protection.length}) → Information ({byType.information.length})
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button onClick={() => setShowSuggest(true)}
|
|
className="px-3 py-1.5 text-xs border border-green-300 text-green-700 rounded-lg hover:bg-green-50">
|
|
Vorschlaege
|
|
</button>
|
|
<button onClick={() => handleOpenLibrary()}
|
|
className="px-3 py-1.5 text-xs border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50">
|
|
Bibliothek
|
|
</button>
|
|
<button onClick={() => { setPreselectedType(undefined); setShowForm(true) }}
|
|
className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700">
|
|
+ Hinzufuegen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{hierarchyWarning && <HierarchyWarning onDismiss={() => setHierarchyWarning(false)} />}
|
|
|
|
{/* Reinitialisieren-Warnung: nach manuellem Loeschen wuerde ein Reinit
|
|
die geloeschten Engine-Vorschlaege wiederherstellen. */}
|
|
<div className="rounded-md border border-amber-200 bg-amber-50 px-4 py-2.5 text-xs text-amber-900">
|
|
<strong>Hinweis:</strong> Markiere jede Maßnahme als <em>Relevant</em> (☑) oder lösche sie aus dem Projekt (🗑).
|
|
Nur als <em>relevant</em> markierte Maßnahmen erscheinen in der Verifikation.
|
|
<strong> Achtung:</strong> nach dem Löschen kein <em>Neu initialisieren</em> mehr drücken — sonst werden die gelöschten Vorschläge aus den Engine-Daten wiederhergestellt.
|
|
</div>
|
|
|
|
{showForm && (
|
|
<MitigationForm
|
|
onSubmit={async (data) => { const ok = await handleSubmit(data); if (ok) setShowForm(false) }}
|
|
onCancel={() => setShowForm(false)} hazards={hazards} preselectedType={preselectedType} onOpenLibrary={handleOpenLibrary}
|
|
/>
|
|
)}
|
|
{showLibrary && <MeasuresLibraryModal measures={measures} onSelect={handleSelectMeasure} onClose={() => setShowLibrary(false)} filterType={libraryFilter} />}
|
|
{showSuggest && <SuggestMeasuresModal hazards={hazards} projectId={projectId} onAddMeasure={handleAddSuggestedMeasure} onClose={() => setShowSuggest(false)} />}
|
|
|
|
{/* 3-Step Accordions */}
|
|
{(['design', 'protection', 'information'] as const).map((type) => {
|
|
const config = REDUCTION_TYPES[type]
|
|
const items = byType[type]
|
|
const isExpanded = expanded[type]
|
|
|
|
return (
|
|
<div key={type} className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
|
{/* Accordion Header */}
|
|
<button onClick={() => toggleSection(type)}
|
|
className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors ${config.headerColor}`}>
|
|
<svg className={`w-4 h-4 transition-transform ${isExpanded ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
{config.icon}
|
|
<div className="flex-1">
|
|
<span className="text-sm font-semibold">{config.label}</span>
|
|
<span className="ml-2 text-xs opacity-75">{config.description}</span>
|
|
</div>
|
|
<span className="text-sm font-bold">{items.length}</span>
|
|
</button>
|
|
|
|
{/* Accordion Content — grouped by measure title */}
|
|
{isExpanded && items.length > 0 && (() => {
|
|
const groups = groupByTitle(items)
|
|
const visibleGroups = groups.slice(0, (mitPages[type] || 1) * 50)
|
|
return (
|
|
<div className="border-t border-gray-100 dark:border-gray-700">
|
|
{/* Table header */}
|
|
<div className="grid grid-cols-[36px_36px_2fr_120px_110px] gap-2 px-4 py-2 bg-gray-50 dark:bg-gray-750 text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
<div title="Relevant fuer dieses Projekt">Relev.</div>
|
|
<div title="Loeschen">Lösch.</div>
|
|
<div>Massnahme</div>
|
|
<div className="text-right pr-2">Gefährdungen</div>
|
|
<div>Status (P · I · V)</div>
|
|
</div>
|
|
{visibleGroups.map(({ title, instances }) => {
|
|
const groupKey = `${type}:${title}`
|
|
const isGroupOpen = expandedGroup.has(groupKey)
|
|
// (legacy bulk-select removed — Relevant-checkbox is now the primary mass-action)
|
|
const counts = statusCounts(instances)
|
|
const refs = measureNorms[title.toLowerCase()]
|
|
const first = instances[0]
|
|
const description = first?.description || ''
|
|
const catMatch = description.match(/Kategorie\s+(\S+)/)
|
|
const category = catMatch?.[1]
|
|
const relevantInGroup = instances.filter((m) => m.is_relevant).length
|
|
const allRelevant = relevantInGroup === instances.length
|
|
return (
|
|
<div key={groupKey}>
|
|
{/* Group header row */}
|
|
<div onClick={() => toggleGroup(groupKey)}
|
|
className={`grid grid-cols-[36px_36px_2fr_120px_110px] gap-2 px-4 py-2 border-t border-gray-50 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors cursor-pointer`}>
|
|
<div className="pt-0.5" onClick={(e) => e.stopPropagation()}>
|
|
<input type="checkbox" checked={allRelevant} ref={(el) => { if (el) el.indeterminate = !allRelevant && relevantInGroup > 0 }}
|
|
onChange={async (e) => {
|
|
const target = e.target.checked
|
|
for (const m of instances) {
|
|
if (m.is_relevant !== target) await handleSetRelevant(m.id, target)
|
|
}
|
|
}}
|
|
className="accent-purple-600" title={`${relevantInGroup}/${instances.length} als relevant markiert. Klick: alle als ${allRelevant ? 'nicht relevant' : 'relevant'} markieren.`} />
|
|
</div>
|
|
<div className="pt-0.5" onClick={(e) => e.stopPropagation()}>
|
|
<button onClick={async () => {
|
|
if (!confirm(`Alle ${instances.length} Instanzen von "${title}" loeschen?`)) return
|
|
for (const m of instances) await handleDeleteSilent(m.id)
|
|
await fetchData()
|
|
}} className="text-gray-400 hover:text-red-600" title="Ganze Gruppe loeschen">
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M1 7h22M16 7V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v3" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className="min-w-0 flex items-start gap-1">
|
|
<svg className={`w-3 h-3 mt-1 shrink-0 text-gray-400 transition-transform ${isGroupOpen ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
<div>
|
|
<div className="text-sm text-gray-900 dark:text-white">{title}</div>
|
|
{category && <div className="text-[10px] text-gray-400 mt-0.5">Kategorie: {category}</div>}
|
|
</div>
|
|
</div>
|
|
<div className="text-xs text-gray-500 text-right pr-2">{instances.length}</div>
|
|
<div className="text-xs flex items-center gap-1.5 font-mono">
|
|
<span className="text-gray-500" title={`${counts.planned} geplant`}>{counts.planned}</span>
|
|
<span className="text-gray-300">·</span>
|
|
<span className="text-blue-600" title={`${counts.implemented} umgesetzt`}>{counts.implemented}</span>
|
|
<span className="text-gray-300">·</span>
|
|
<span className="text-green-600" title={`${counts.verified} verifiziert`}>{counts.verified}</span>
|
|
</div>
|
|
</div>
|
|
{/* Group children — one row per instance (hazard) */}
|
|
{isGroupOpen && (
|
|
<div className="bg-gray-50/40 dark:bg-gray-900/20 border-t border-gray-100 dark:border-gray-700">
|
|
{description && (
|
|
<p className="px-12 pt-2 pb-1 text-[11px] text-gray-500 dark:text-gray-400 italic">{description}</p>
|
|
)}
|
|
{refs?.length > 0 && (
|
|
<p className="px-12 pb-2 text-[11px] text-blue-500">Normen: {refs.join(', ')}</p>
|
|
)}
|
|
{instances.map((m) => {
|
|
const isDetailOpen = expandedMeasure === m.id
|
|
return (
|
|
<div key={m.id}>
|
|
<div onClick={() => setExpandedMeasure(isDetailOpen ? null : m.id)}
|
|
className={`grid grid-cols-[36px_36px_2fr_120px_110px] gap-2 px-4 py-1.5 border-t border-gray-100 dark:border-gray-700 hover:bg-white dark:hover:bg-gray-800 transition-colors cursor-pointer ${m.is_relevant ? 'bg-emerald-50/40 dark:bg-emerald-900/10' : ''}`}>
|
|
<div className="pt-0.5" onClick={(e) => e.stopPropagation()}>
|
|
<input type="checkbox" checked={Boolean(m.is_relevant)} onChange={() => handleSetRelevant(m.id, !m.is_relevant)}
|
|
className="accent-purple-600" title="Als relevant markieren" />
|
|
</div>
|
|
<div className="pt-0.5" onClick={(e) => e.stopPropagation()}>
|
|
<button onClick={() => handleDelete(m.id)}
|
|
className="text-gray-400 hover:text-red-600" title="Loeschen">
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M1 7h22M16 7V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v3" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className="text-xs text-gray-600 dark:text-gray-300 min-w-0">
|
|
{(m.linked_hazard_names || []).join(', ') || '— (keine Gefaehrdung verknuepft)'}
|
|
</div>
|
|
<div className="text-[11px] text-gray-400 self-center text-right pr-2">
|
|
{m.is_customer_standard ? 'Kundenstandard' : ''}
|
|
</div>
|
|
<div><StatusBadge status={m.status} /></div>
|
|
</div>
|
|
{isDetailOpen && (
|
|
<div className="px-12 py-2 bg-white dark:bg-gray-800 border-t border-gray-100 dark:border-gray-700 text-xs space-y-1">
|
|
<MitigationHints projectId={projectId} mitigationId={m.id} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
{groups.length > visibleGroups.length && (
|
|
<button onClick={() => setMitPages(prev => ({ ...prev, [type]: (prev[type] || 1) + 1 }))}
|
|
className="w-full py-2 text-xs text-purple-600 hover:bg-purple-50 border-t border-gray-100 transition-colors">
|
|
Weitere {Math.min(50, groups.length - visibleGroups.length)} von {groups.length} Maßnahmen laden...
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
})()}
|
|
|
|
{isExpanded && items.length === 0 && (
|
|
<div className="px-4 py-6 text-center text-sm text-gray-400 border-t border-gray-100">
|
|
Keine Massnahmen in dieser Stufe
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|