refactor(admin): split consent-management, control-library, incidents, training pages
Agent-completed splits committed after agents hit rate limits before committing their work. All 4 pages now under 500 LOC: - consent-management: 1303 -> 193 LOC (+ 7 _components, _hooks, _data, _types) - control-library: 1210 -> 298 LOC (+ _components, _types) - incidents: 1150 -> 373 LOC (+ _components) - training: 1127 -> 366 LOC (+ _components) Verification: next build clean (142 pages generated). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
@@ -0,0 +1,216 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
Incident,
|
||||
INCIDENT_SEVERITY_INFO,
|
||||
INCIDENT_STATUS_INFO,
|
||||
INCIDENT_CATEGORY_INFO
|
||||
} from '@/lib/sdk/incidents/types'
|
||||
import { CountdownTimer } from './CountdownTimer'
|
||||
|
||||
const STATUS_TRANSITIONS: Record<string, { label: string; nextStatus: string } | null> = {
|
||||
detected: { label: 'Bewertung starten', nextStatus: 'assessment' },
|
||||
assessment: { label: 'Eindaemmung starten', nextStatus: 'containment' },
|
||||
containment: { label: 'Meldepflicht pruefen', nextStatus: 'notification_required' },
|
||||
notification_required: { label: 'Gemeldet', nextStatus: 'notification_sent' },
|
||||
notification_sent: { label: 'Behebung starten', nextStatus: 'remediation' },
|
||||
remediation: { label: 'Abschliessen', nextStatus: 'closed' },
|
||||
closed: null
|
||||
}
|
||||
|
||||
export function IncidentDetailDrawer({
|
||||
incident,
|
||||
onClose,
|
||||
onStatusChange,
|
||||
onDeleted,
|
||||
}: {
|
||||
incident: Incident
|
||||
onClose: () => void
|
||||
onStatusChange: () => void
|
||||
onDeleted?: () => void
|
||||
}) {
|
||||
const [isChangingStatus, setIsChangingStatus] = useState(false)
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
|
||||
const handleDeleteIncident = async () => {
|
||||
if (!window.confirm(`Incident "${incident.title}" wirklich löschen?`)) return
|
||||
setIsDeleting(true)
|
||||
try {
|
||||
const res = await fetch(`/api/sdk/v1/incidents/${incident.id}`, { method: 'DELETE' })
|
||||
if (!res.ok) throw new Error(`Fehler: ${res.status}`)
|
||||
onDeleted ? onDeleted() : onClose()
|
||||
} catch (err) {
|
||||
console.error('Löschen fehlgeschlagen:', err)
|
||||
alert('Löschen fehlgeschlagen.')
|
||||
} finally {
|
||||
setIsDeleting(false)
|
||||
}
|
||||
}
|
||||
const severityInfo = INCIDENT_SEVERITY_INFO[incident.severity]
|
||||
const statusInfo = INCIDENT_STATUS_INFO[incident.status]
|
||||
const categoryInfo = INCIDENT_CATEGORY_INFO[incident.category]
|
||||
const transition = STATUS_TRANSITIONS[incident.status]
|
||||
|
||||
const handleStatusChange = async (newStatus: string) => {
|
||||
setIsChangingStatus(true)
|
||||
try {
|
||||
const res = await fetch(`/api/sdk/v1/incidents/${incident.id}/status`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: newStatus })
|
||||
})
|
||||
if (!res.ok) {
|
||||
throw new Error(`Fehler: ${res.status}`)
|
||||
}
|
||||
onStatusChange()
|
||||
} catch (err) {
|
||||
console.error('Status-Aenderung fehlgeschlagen:', err)
|
||||
} finally {
|
||||
setIsChangingStatus(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/30"
|
||||
onClick={onClose}
|
||||
/>
|
||||
{/* Drawer */}
|
||||
<div className="fixed right-0 top-0 h-full w-[600px] bg-white shadow-2xl z-10 overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 sticky top-0 bg-white z-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${severityInfo.bgColor} ${severityInfo.color}`}>
|
||||
{severityInfo.label}
|
||||
</span>
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${statusInfo.bgColor} ${statusInfo.color}`}>
|
||||
{statusInfo.label}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 text-gray-400 hover:text-gray-600 rounded 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="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Title */}
|
||||
<div>
|
||||
<p className="text-xs text-gray-400 font-mono mb-1">{incident.referenceNumber}</p>
|
||||
<h2 className="text-xl font-semibold text-gray-900">{incident.title}</h2>
|
||||
</div>
|
||||
|
||||
{/* Status Transition */}
|
||||
{transition && (
|
||||
<div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
|
||||
<p className="text-sm text-purple-700 mb-3">Naechster Schritt:</p>
|
||||
<button
|
||||
onClick={() => handleStatusChange(transition.nextStatus)}
|
||||
disabled={isChangingStatus}
|
||||
className="px-4 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
>
|
||||
{isChangingStatus && (
|
||||
<svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
)}
|
||||
{transition.label}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Details Grid */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-1">Kategorie</p>
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{categoryInfo.icon} {categoryInfo.label}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-1">Schweregrad</p>
|
||||
<p className="text-sm font-medium text-gray-900">{severityInfo.label}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-1">Status</p>
|
||||
<p className="text-sm font-medium text-gray-900">{statusInfo.label}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-1">Entdeckt am</p>
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{new Date(incident.detectedAt).toLocaleString('de-DE')}
|
||||
</p>
|
||||
</div>
|
||||
{incident.detectedBy && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-1">Entdeckt von</p>
|
||||
<p className="text-sm font-medium text-gray-900">{incident.detectedBy}</p>
|
||||
</div>
|
||||
)}
|
||||
{incident.assignedTo && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-1">Zugewiesen an</p>
|
||||
<p className="text-sm font-medium text-gray-900">{incident.assignedTo}</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-1">Betroffene Personen (geschaetzt)</p>
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{incident.estimatedAffectedPersons.toLocaleString('de-DE')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{incident.description && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-2">Beschreibung</p>
|
||||
<p className="text-sm text-gray-700 leading-relaxed bg-gray-50 rounded-lg p-3">
|
||||
{incident.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Affected Systems */}
|
||||
{incident.affectedSystems && incident.affectedSystems.length > 0 && (
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-2">Betroffene Systeme</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{incident.affectedSystems.map((sys, idx) => (
|
||||
<span key={idx} className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-full">
|
||||
{sys}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 72h Countdown */}
|
||||
<div>
|
||||
<p className="text-xs text-gray-500 mb-2">72h-Meldefrist</p>
|
||||
<CountdownTimer incident={incident} />
|
||||
</div>
|
||||
|
||||
{/* Delete */}
|
||||
<div className="pt-2 border-t border-gray-100">
|
||||
<button
|
||||
onClick={handleDeleteIncident}
|
||||
disabled={isDeleting}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isDeleting ? 'Löschen...' : 'Löschen'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user