Benjamin Admin
3faa312b31
Task #21. The verification page used to manage a separate VerificationItem entity that the expert had to populate by hand — disjoint from the actual mitigations list. With the is_relevant flag from migration 029, the verification step has a natural definition: confirm completion for every mitigation the expert flagged as relevant for this project. Page is now a derived view on useMitigations(): filter is_relevant=true, group by title (same dedupe as Massnahmen page), expose two actions per hazard×mitigation row: 1. "Kundenstandard" — already implemented at the customer's site, no evidence file required. Sets is_customer_standard=true and status='verified'. 2. "Verifizieren…" — opens a modal asking for a textual evidence reference (Prüfprotokoll-Nr, audit reference, etc.). Calls the existing POST /mitigations/:mid/verify with verification_result. File upload is deferred to phase 2 once an object-storage backend is in place — the modal explains this. When a row is verified, a "Zurücksetzen" link reverts status to 'implemented' for accidental confirmations. Header counters: total relevant / open / verified / Kundenstandard. Maßnahmen-page polish (same commit): - "Lösch."-column header removed — the trash icon is self-explanatory - groupByTitle now additionally deduplicates by hazard_id within a group (engine occasionally emits duplicate (name, hazard_id) pairs when Reinit is clicked twice; a follow-up migration 030 will add a UNIQUE constraint to prevent these upstream) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
234 lines
11 KiB
TypeScript
234 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useParams } from 'next/navigation'
|
|
import { useMitigations } from '../mitigations/_hooks/useMitigations'
|
|
import type { Mitigation } from '../mitigations/_components/types'
|
|
|
|
// Verifikations-Page (Phase-1 Workflow):
|
|
//
|
|
// Diese Seite ist eine abgeleitete View auf die Maßnahmen-Liste. Sie zeigt
|
|
// nur diejenigen Maßnahmen, die der Fachmann auf der Maßnahmen-Seite als
|
|
// `is_relevant = true` markiert hat. Pro Maßnahme stehen zwei Aktionen
|
|
// zur Verfügung:
|
|
//
|
|
// 1. "Beim Kunden Standard" — Die Maßnahme ist beim Kunden bereits
|
|
// umgesetzt (z.B. firmenweite Vorgabe, identische Vor-Anlage).
|
|
// Setzt is_customer_standard = true und status = verified.
|
|
// Es ist kein Nachweis-Dokument erforderlich.
|
|
//
|
|
// 2. "Verifizieren (mit Nachweis)" — Öffnet ein Modal, in dem der
|
|
// Verifizierer einen Text-Nachweis hinterlegt (Prüfprotokoll-Nummer,
|
|
// Abnahme-Referenz, etc.). Setzt status = verified. Die File-Upload-
|
|
// Variante folgt in Phase 2, sobald ein Object-Storage-Backend
|
|
// verfügbar ist.
|
|
//
|
|
// Wenn die Maßnahme bereits verifiziert ist, wird ein "Zurücksetzen"-Link
|
|
// angeboten — er stellt status auf 'implemented' zurück, damit der
|
|
// Fachmann eine versehentliche Bestätigung rückgängig machen kann.
|
|
|
|
export default function VerificationPage() {
|
|
const params = useParams()
|
|
const projectId = params.projectId as string
|
|
|
|
const { byType, loading, handleSetCustomerStandard } = useMitigations(projectId)
|
|
|
|
const [verifyTarget, setVerifyTarget] = useState<Mitigation | null>(null)
|
|
const [verifyResult, setVerifyResult] = useState('')
|
|
const [submitting, setSubmitting] = useState(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>
|
|
)
|
|
|
|
const allRelevant = [...byType.design, ...byType.protection, ...byType.information].filter((m) => m.is_relevant)
|
|
const groups = groupByTitle(allRelevant)
|
|
const totals = {
|
|
total: allRelevant.length,
|
|
verified: allRelevant.filter((m) => m.status === 'verified').length,
|
|
customerStd: allRelevant.filter((m) => m.is_customer_standard).length,
|
|
pending: allRelevant.filter((m) => m.status !== 'verified').length,
|
|
}
|
|
|
|
async function setStatus(id: string, value: 'implemented' | 'verified') {
|
|
await fetch(`/api/sdk/v1/iace/mitigations/${id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ status: value }),
|
|
})
|
|
}
|
|
|
|
async function submitVerify() {
|
|
if (!verifyTarget) return
|
|
setSubmitting(true)
|
|
try {
|
|
await fetch(`/api/sdk/v1/iace/projects/${projectId}/mitigations/${verifyTarget.id}/verify`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ verification_result: verifyResult }),
|
|
})
|
|
// Refetch via window-reload of just the data — useMitigations refreshes on mount.
|
|
window.location.reload()
|
|
} finally {
|
|
setSubmitting(false)
|
|
setVerifyTarget(null)
|
|
setVerifyResult('')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Verifikation</h1>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
Bestätige die Umsetzung jeder als relevant markierten Maßnahme — entweder als
|
|
<em> Kundenstandard</em> (keine Nachweis-Datei nötig) oder mit hinterlegtem Nachweis.
|
|
</p>
|
|
</div>
|
|
|
|
{totals.total === 0 ? (
|
|
<div className="rounded-md border border-gray-200 bg-gray-50 px-4 py-6 text-sm text-gray-600">
|
|
Keine als <em>relevant</em> markierten Maßnahmen vorhanden. Gehe zurück zur
|
|
{' '}<a className="text-purple-600 underline" href={`/sdk/iace/${projectId}/mitigations`}>Maßnahmen-Seite</a>{' '}
|
|
und kreuze die anwendbaren Maßnahmen an.
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="grid grid-cols-4 gap-3">
|
|
<Stat n={totals.total} label="relevant" tone="gray" />
|
|
<Stat n={totals.pending} label="offen" tone="amber" />
|
|
<Stat n={totals.verified} label="verifiziert" tone="green" />
|
|
<Stat n={totals.customerStd} label="Kundenstandard" tone="blue" />
|
|
</div>
|
|
|
|
{groups.map(({ title, instances }) => {
|
|
const verifiedCount = instances.filter((m) => m.status === 'verified').length
|
|
const allDone = verifiedCount === instances.length
|
|
return (
|
|
<div key={title} className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
|
<div className={`flex items-center gap-3 px-4 py-3 ${allDone ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-750'}`}>
|
|
<div className="flex-1">
|
|
<div className="text-sm font-semibold text-gray-900 dark:text-white">{title}</div>
|
|
<div className="text-xs text-gray-500">{verifiedCount}/{instances.length} verifiziert</div>
|
|
</div>
|
|
{allDone && (
|
|
<svg className="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
<div className="divide-y divide-gray-100 dark:divide-gray-700">
|
|
{instances.map((m) => {
|
|
const isVerified = m.status === 'verified'
|
|
return (
|
|
<div key={m.id} className={`grid grid-cols-[1fr_240px] gap-3 px-4 py-2.5 items-center ${isVerified ? 'bg-green-50/30 dark:bg-green-900/10' : ''}`}>
|
|
<div className="min-w-0">
|
|
<div className="text-sm text-gray-700 dark:text-gray-200">
|
|
{(m.linked_hazard_names || []).join(', ') || '— (keine Gefährdung verknüpft)'}
|
|
</div>
|
|
{m.is_customer_standard && (
|
|
<div className="text-[11px] text-blue-600 mt-0.5">Beim Kunden Standard</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center justify-end gap-2">
|
|
{!isVerified ? (
|
|
<>
|
|
<button onClick={async () => {
|
|
await handleSetCustomerStandard(m.id, true)
|
|
await setStatus(m.id, 'verified')
|
|
window.location.reload()
|
|
}} className="px-2.5 py-1 text-[11px] border border-blue-300 text-blue-700 rounded hover:bg-blue-50">
|
|
Kundenstandard
|
|
</button>
|
|
<button onClick={() => { setVerifyTarget(m); setVerifyResult('') }}
|
|
className="px-2.5 py-1 text-[11px] bg-green-600 text-white rounded hover:bg-green-700">
|
|
Verifizieren…
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="text-[11px] text-green-700">✓ Verifiziert</span>
|
|
<button onClick={async () => {
|
|
if (!confirm('Verifizierung zurücksetzen?')) return
|
|
await setStatus(m.id, 'implemented')
|
|
window.location.reload()
|
|
}} className="text-[11px] text-gray-400 hover:text-red-600 underline">
|
|
Zurücksetzen
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</>
|
|
)}
|
|
|
|
{verifyTarget && (
|
|
<div className="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50">
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl max-w-lg w-full p-6 space-y-4">
|
|
<div>
|
|
<h2 className="text-lg font-semibold">Verifizieren</h2>
|
|
<p className="text-sm text-gray-500 mt-1">{verifyTarget.title}</p>
|
|
<p className="text-xs text-gray-400 mt-0.5">{(verifyTarget.linked_hazard_names || []).join(', ')}</p>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Nachweis / Prüfprotokoll-Referenz</label>
|
|
<textarea value={verifyResult} onChange={(e) => setVerifyResult(e.target.value)}
|
|
placeholder="z.B. Prüfprotokoll PM-2026-014 vom 14.05.2026, durchgeführt durch Hr. Schmidt (TÜV Süd)"
|
|
className="w-full border rounded px-3 py-2 text-sm h-24" />
|
|
<p className="text-[10px] text-gray-400 mt-1">Datei-Upload folgt in Phase 2 — vorerst genügt eine eindeutige Referenz.</p>
|
|
</div>
|
|
<div className="flex items-center justify-end gap-2">
|
|
<button onClick={() => setVerifyTarget(null)} disabled={submitting} className="text-xs px-3 py-1.5 text-gray-500 hover:text-gray-700">Abbrechen</button>
|
|
<button onClick={submitVerify} disabled={submitting || !verifyResult.trim()}
|
|
className="px-3 py-1.5 text-xs bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50">
|
|
{submitting ? 'Speichere…' : 'Verifizieren'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Stat({ n, label, tone }: { n: number; label: string; tone: 'gray' | 'amber' | 'green' | 'blue' }) {
|
|
const color =
|
|
tone === 'amber' ? 'text-amber-600 border-amber-200' :
|
|
tone === 'green' ? 'text-green-600 border-green-200' :
|
|
tone === 'blue' ? 'text-blue-600 border-blue-200' :
|
|
'text-gray-700 border-gray-200'
|
|
return (
|
|
<div className={`bg-white dark:bg-gray-800 rounded-lg border p-4 text-center ${color}`}>
|
|
<div className="text-2xl font-bold">{n}</div>
|
|
<div className="text-xs">{label}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
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])
|
|
}
|
|
// Frontend dedupe per hazard_id (mirrors mitigations/page.tsx)
|
|
return Array.from(map.entries()).map(([title, list]) => {
|
|
const byHazard = new Map<string, Mitigation>()
|
|
for (const m of list) {
|
|
const hid = (m.linked_hazard_ids || []).join('|') || m.id
|
|
const prev = byHazard.get(hid)
|
|
if (!prev || (m.status === 'verified' && prev.status !== 'verified')) byHazard.set(hid, m)
|
|
}
|
|
return { title, instances: Array.from(byHazard.values()) }
|
|
})
|
|
}
|