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>
755 lines
29 KiB
TypeScript
755 lines
29 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect } from 'react'
|
|
import { useSDK } from '@/lib/sdk'
|
|
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
|
|
|
|
// =============================================================================
|
|
// TYPES
|
|
// =============================================================================
|
|
|
|
interface Escalation {
|
|
id: string
|
|
title: string
|
|
description: string | null
|
|
priority: 'low' | 'medium' | 'high' | 'critical'
|
|
status: 'open' | 'in_progress' | 'escalated' | 'resolved' | 'closed'
|
|
category: string | null
|
|
assignee: string | null
|
|
reporter: string | null
|
|
source_module: string | null
|
|
due_date: string | null
|
|
resolved_at: string | null
|
|
created_at: string
|
|
updated_at: string
|
|
}
|
|
|
|
interface EscalationStats {
|
|
by_status: Record<string, number>
|
|
by_priority: Record<string, number>
|
|
total: number
|
|
active: number
|
|
}
|
|
|
|
// =============================================================================
|
|
// HELPERS
|
|
// =============================================================================
|
|
|
|
const priorityColors: Record<string, string> = {
|
|
critical: 'bg-red-500 text-white',
|
|
high: 'bg-orange-500 text-white',
|
|
medium: 'bg-yellow-500 text-white',
|
|
low: 'bg-green-500 text-white',
|
|
}
|
|
|
|
const priorityLabels: Record<string, string> = {
|
|
critical: 'Kritisch',
|
|
high: 'Hoch',
|
|
medium: 'Mittel',
|
|
low: 'Niedrig',
|
|
}
|
|
|
|
const statusColors: Record<string, string> = {
|
|
open: 'bg-blue-100 text-blue-700',
|
|
in_progress: 'bg-yellow-100 text-yellow-700',
|
|
escalated: 'bg-red-100 text-red-700',
|
|
resolved: 'bg-green-100 text-green-700',
|
|
closed: 'bg-gray-100 text-gray-600',
|
|
}
|
|
|
|
const statusLabels: Record<string, string> = {
|
|
open: 'Offen',
|
|
in_progress: 'In Bearbeitung',
|
|
escalated: 'Eskaliert',
|
|
resolved: 'Geloest',
|
|
closed: 'Geschlossen',
|
|
}
|
|
|
|
const categoryLabels: Record<string, string> = {
|
|
dsgvo_breach: 'DSGVO-Verletzung',
|
|
ai_act: 'AI Act',
|
|
vendor: 'Vendor',
|
|
internal: 'Intern',
|
|
other: 'Sonstiges',
|
|
}
|
|
|
|
function formatDate(iso: string | null): string {
|
|
if (!iso) return '—'
|
|
return new Date(iso).toLocaleDateString('de-DE')
|
|
}
|
|
|
|
// =============================================================================
|
|
// CREATE MODAL
|
|
// =============================================================================
|
|
|
|
interface CreateModalProps {
|
|
onClose: () => void
|
|
onCreated: () => void
|
|
}
|
|
|
|
function EscalationCreateModal({ onClose, onCreated }: CreateModalProps) {
|
|
const [title, setTitle] = useState('')
|
|
const [description, setDescription] = useState('')
|
|
const [priority, setPriority] = useState('medium')
|
|
const [category, setCategory] = useState('')
|
|
const [assignee, setAssignee] = useState('')
|
|
const [dueDate, setDueDate] = useState('')
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
async function handleSave() {
|
|
if (!title.trim()) {
|
|
setError('Titel ist erforderlich.')
|
|
return
|
|
}
|
|
setSaving(true)
|
|
setError(null)
|
|
try {
|
|
const res = await fetch('/api/sdk/v1/escalations', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
title: title.trim(),
|
|
description: description.trim() || null,
|
|
priority,
|
|
category: category || null,
|
|
assignee: assignee.trim() || null,
|
|
due_date: dueDate || null,
|
|
}),
|
|
})
|
|
if (!res.ok) {
|
|
const err = await res.json()
|
|
throw new Error(err.detail || err.error || 'Fehler beim Erstellen')
|
|
}
|
|
onCreated()
|
|
onClose()
|
|
} catch (e: unknown) {
|
|
setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg">
|
|
<div className="p-6 border-b border-gray-100">
|
|
<h2 className="text-xl font-bold text-gray-900">Neue Eskalation erstellen</h2>
|
|
</div>
|
|
<div className="p-6 space-y-4">
|
|
{error && (
|
|
<div className="bg-red-50 text-red-700 text-sm px-4 py-2 rounded-lg">{error}</div>
|
|
)}
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Titel <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={e => setTitle(e.target.value)}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
placeholder="Kurze Beschreibung der Eskalation"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
|
|
<textarea
|
|
value={description}
|
|
onChange={e => setDescription(e.target.value)}
|
|
rows={3}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
placeholder="Detaillierte Beschreibung…"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Prioritaet</label>
|
|
<select
|
|
value={priority}
|
|
onChange={e => setPriority(e.target.value)}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
>
|
|
<option value="low">Niedrig</option>
|
|
<option value="medium">Mittel</option>
|
|
<option value="high">Hoch</option>
|
|
<option value="critical">Kritisch</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
|
|
<select
|
|
value={category}
|
|
onChange={e => setCategory(e.target.value)}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
>
|
|
<option value="">— Keine —</option>
|
|
<option value="dsgvo_breach">DSGVO-Verletzung</option>
|
|
<option value="ai_act">AI Act</option>
|
|
<option value="vendor">Vendor</option>
|
|
<option value="internal">Intern</option>
|
|
<option value="other">Sonstiges</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Zugewiesen an</label>
|
|
<input
|
|
type="text"
|
|
value={assignee}
|
|
onChange={e => setAssignee(e.target.value)}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
placeholder="Name oder Team"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Faelligkeitsdatum</label>
|
|
<input
|
|
type="date"
|
|
value={dueDate}
|
|
onChange={e => setDueDate(e.target.value)}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="p-6 border-t border-gray-100 flex items-center justify-end gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
|
|
>
|
|
{saving ? 'Speichern…' : 'Eskalation erstellen'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// DETAIL DRAWER
|
|
// =============================================================================
|
|
|
|
interface DrawerProps {
|
|
escalation: Escalation
|
|
onClose: () => void
|
|
onUpdated: () => void
|
|
}
|
|
|
|
function EscalationDetailDrawer({ escalation, onClose, onUpdated }: DrawerProps) {
|
|
const [editAssignee, setEditAssignee] = useState(escalation.assignee || '')
|
|
const [editPriority, setEditPriority] = useState(escalation.priority)
|
|
const [editDueDate, setEditDueDate] = useState(
|
|
escalation.due_date ? escalation.due_date.slice(0, 10) : ''
|
|
)
|
|
const [saving, setSaving] = useState(false)
|
|
const [statusSaving, setStatusSaving] = useState(false)
|
|
const [isDeleting, setIsDeleting] = useState(false)
|
|
|
|
async function handleDeleteEscalation() {
|
|
if (!window.confirm(`Eskalation "${escalation.title}" wirklich löschen?`)) return
|
|
setIsDeleting(true)
|
|
try {
|
|
const res = await fetch(`/api/sdk/v1/escalations/${escalation.id}`, { method: 'DELETE' })
|
|
if (!res.ok) throw new Error(`Fehler: ${res.status}`)
|
|
onUpdated()
|
|
onClose()
|
|
} catch (err) {
|
|
console.error('Löschen fehlgeschlagen:', err)
|
|
alert('Löschen fehlgeschlagen.')
|
|
} finally {
|
|
setIsDeleting(false)
|
|
}
|
|
}
|
|
|
|
async function handleSaveEdit() {
|
|
setSaving(true)
|
|
try {
|
|
await fetch(`/api/sdk/v1/escalations/${escalation.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
assignee: editAssignee || null,
|
|
priority: editPriority,
|
|
due_date: editDueDate || null,
|
|
}),
|
|
})
|
|
onUpdated()
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
async function handleStatusChange(newStatus: string) {
|
|
setStatusSaving(true)
|
|
try {
|
|
await fetch(`/api/sdk/v1/escalations/${escalation.id}/status`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ status: newStatus }),
|
|
})
|
|
onUpdated()
|
|
onClose()
|
|
} finally {
|
|
setStatusSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-40 flex justify-end">
|
|
{/* Backdrop */}
|
|
<div className="absolute inset-0 bg-black/30" onClick={onClose} />
|
|
{/* Panel */}
|
|
<div className="relative w-full max-w-md bg-white shadow-2xl flex flex-col h-full overflow-y-auto">
|
|
{/* Header */}
|
|
<div className="p-6 border-b border-gray-100 flex items-start justify-between">
|
|
<div className="flex-1 pr-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${priorityColors[escalation.priority]}`}>
|
|
{priorityLabels[escalation.priority]}
|
|
</span>
|
|
<span className={`px-2 py-0.5 text-xs rounded-full ${statusColors[escalation.status]}`}>
|
|
{statusLabels[escalation.status]}
|
|
</span>
|
|
{escalation.category && (
|
|
<span className="px-2 py-0.5 text-xs rounded-full bg-purple-100 text-purple-700">
|
|
{categoryLabels[escalation.category] || escalation.category}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h2 className="text-lg font-bold text-gray-900">{escalation.title}</h2>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-500"
|
|
>
|
|
<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 flex-1">
|
|
{/* Description */}
|
|
{escalation.description && (
|
|
<div>
|
|
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Beschreibung</h3>
|
|
<p className="text-sm text-gray-700">{escalation.description}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Meta */}
|
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<span className="text-gray-500 text-xs">Erstellt</span>
|
|
<p className="font-medium text-gray-800">{formatDate(escalation.created_at)}</p>
|
|
</div>
|
|
{escalation.reporter && (
|
|
<div>
|
|
<span className="text-gray-500 text-xs">Gemeldet von</span>
|
|
<p className="font-medium text-gray-800">{escalation.reporter}</p>
|
|
</div>
|
|
)}
|
|
{escalation.source_module && (
|
|
<div>
|
|
<span className="text-gray-500 text-xs">Quell-Modul</span>
|
|
<p className="font-medium text-gray-800">{escalation.source_module}</p>
|
|
</div>
|
|
)}
|
|
{escalation.resolved_at && (
|
|
<div>
|
|
<span className="text-gray-500 text-xs">Geloest am</span>
|
|
<p className="font-medium text-green-700">{formatDate(escalation.resolved_at)}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Edit fields */}
|
|
<div className="border border-gray-200 rounded-xl p-4 space-y-4">
|
|
<h3 className="text-sm font-semibold text-gray-700">Bearbeiten</h3>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-500 mb-1">Zugewiesen an</label>
|
|
<input
|
|
type="text"
|
|
value={editAssignee}
|
|
onChange={e => setEditAssignee(e.target.value)}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
placeholder="Name oder Team"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-500 mb-1">Prioritaet</label>
|
|
<select
|
|
value={editPriority}
|
|
onChange={e => setEditPriority(e.target.value as Escalation['priority'])}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
>
|
|
<option value="low">Niedrig</option>
|
|
<option value="medium">Mittel</option>
|
|
<option value="high">Hoch</option>
|
|
<option value="critical">Kritisch</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-500 mb-1">Faelligkeit</label>
|
|
<input
|
|
type="date"
|
|
value={editDueDate}
|
|
onChange={e => setEditDueDate(e.target.value)}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={handleSaveEdit}
|
|
disabled={saving}
|
|
className="w-full py-2 text-sm bg-gray-800 text-white rounded-lg hover:bg-gray-900 transition-colors disabled:opacity-50"
|
|
>
|
|
{saving ? 'Speichern…' : 'Aenderungen speichern'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Status transitions */}
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-gray-700 mb-3">Status-Aktionen</h3>
|
|
<div className="flex flex-col gap-2">
|
|
{escalation.status === 'open' && (
|
|
<button
|
|
onClick={() => handleStatusChange('in_progress')}
|
|
disabled={statusSaving}
|
|
className="w-full py-2 text-sm bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors disabled:opacity-50"
|
|
>
|
|
In Bearbeitung nehmen
|
|
</button>
|
|
)}
|
|
{escalation.status === 'in_progress' && (
|
|
<button
|
|
onClick={() => handleStatusChange('escalated')}
|
|
disabled={statusSaving}
|
|
className="w-full py-2 text-sm bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors disabled:opacity-50"
|
|
>
|
|
Eskalieren
|
|
</button>
|
|
)}
|
|
{(escalation.status === 'escalated' || escalation.status === 'in_progress') && (
|
|
<button
|
|
onClick={() => handleStatusChange('resolved')}
|
|
disabled={statusSaving}
|
|
className="w-full py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50"
|
|
>
|
|
Loesen
|
|
</button>
|
|
)}
|
|
{escalation.status === 'resolved' && (
|
|
<button
|
|
onClick={() => handleStatusChange('closed')}
|
|
disabled={statusSaving}
|
|
className="w-full py-2 text-sm bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors disabled:opacity-50"
|
|
>
|
|
Schliessen
|
|
</button>
|
|
)}
|
|
{escalation.status === 'closed' && (
|
|
<p className="text-sm text-gray-400 text-center py-2">Eskalation ist geschlossen.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Delete */}
|
|
<div className="pt-2 border-t border-gray-100">
|
|
<button
|
|
onClick={handleDeleteEscalation}
|
|
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>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// ESCALATION CARD
|
|
// =============================================================================
|
|
|
|
interface CardProps {
|
|
escalation: Escalation
|
|
onClick: () => void
|
|
}
|
|
|
|
function EscalationCard({ escalation, onClick }: CardProps) {
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
className={`bg-white rounded-xl border-2 p-6 cursor-pointer hover:shadow-md transition-shadow ${
|
|
escalation.priority === 'critical' ? 'border-red-300' :
|
|
escalation.priority === 'high' ? 'border-orange-300' :
|
|
escalation.status === 'resolved' || escalation.status === 'closed' ? 'border-green-200' : 'border-gray-200'
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
|
<span className={`px-2 py-1 text-xs rounded-full ${priorityColors[escalation.priority]}`}>
|
|
{priorityLabels[escalation.priority]}
|
|
</span>
|
|
{escalation.category && (
|
|
<span className="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-700">
|
|
{categoryLabels[escalation.category] || escalation.category}
|
|
</span>
|
|
)}
|
|
<span className={`px-2 py-1 text-xs rounded-full ${statusColors[escalation.status]}`}>
|
|
{statusLabels[escalation.status]}
|
|
</span>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-900">{escalation.title}</h3>
|
|
{escalation.description && (
|
|
<p className="text-sm text-gray-500 mt-1 line-clamp-2">{escalation.description}</p>
|
|
)}
|
|
</div>
|
|
<svg className="w-5 h-5 text-gray-400 ml-3 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div className="mt-4 grid grid-cols-2 gap-4 text-sm">
|
|
{escalation.assignee && (
|
|
<div>
|
|
<span className="text-gray-500">Zugewiesen: </span>
|
|
<span className="font-medium text-gray-700">{escalation.assignee}</span>
|
|
</div>
|
|
)}
|
|
{escalation.due_date && (
|
|
<div>
|
|
<span className="text-gray-500">Frist: </span>
|
|
<span className="font-medium text-gray-700">{formatDate(escalation.due_date)}</span>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<span className="text-gray-500">Erstellt: </span>
|
|
<span className="font-medium text-gray-700">{formatDate(escalation.created_at)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 pt-4 border-t border-gray-100">
|
|
<span className="text-xs text-gray-400 font-mono">{escalation.id}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// MAIN PAGE
|
|
// =============================================================================
|
|
|
|
export default function EscalationsPage() {
|
|
const { state } = useSDK()
|
|
const [escalations, setEscalations] = useState<Escalation[]>([])
|
|
const [stats, setStats] = useState<EscalationStats | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [filter, setFilter] = useState<string>('all')
|
|
const [showCreateModal, setShowCreateModal] = useState(false)
|
|
const [selectedEscalation, setSelectedEscalation] = useState<Escalation | null>(null)
|
|
|
|
async function loadEscalations() {
|
|
try {
|
|
const params = new URLSearchParams({ limit: '100' })
|
|
if (filter !== 'all' && ['open', 'in_progress', 'escalated', 'resolved', 'closed'].includes(filter)) {
|
|
params.set('status', filter)
|
|
} else if (filter !== 'all' && ['low', 'medium', 'high', 'critical'].includes(filter)) {
|
|
params.set('priority', filter)
|
|
}
|
|
const res = await fetch(`/api/sdk/v1/escalations?${params}`)
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
setEscalations(data.items || [])
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load escalations', e)
|
|
}
|
|
}
|
|
|
|
async function loadStats() {
|
|
try {
|
|
const res = await fetch('/api/sdk/v1/escalations/stats')
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
setStats(data)
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load stats', e)
|
|
}
|
|
}
|
|
|
|
async function loadAll() {
|
|
setLoading(true)
|
|
await Promise.all([loadEscalations(), loadStats()])
|
|
setLoading(false)
|
|
}
|
|
|
|
useEffect(() => {
|
|
loadAll()
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [filter])
|
|
|
|
const criticalCount = stats?.by_priority?.critical ?? 0
|
|
const escalatedCount = stats?.by_status?.escalated ?? 0
|
|
const openCount = stats?.by_status?.open ?? 0
|
|
const activeCount = stats?.active ?? 0
|
|
|
|
const filteredEscalations = filter === 'all' || ['open', 'in_progress', 'escalated', 'resolved', 'closed'].includes(filter) || ['low', 'medium', 'high', 'critical'].includes(filter)
|
|
? escalations
|
|
: escalations
|
|
|
|
const stepInfo = STEP_EXPLANATIONS['escalations']
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Step Header */}
|
|
<StepHeader
|
|
stepId="escalations"
|
|
title={stepInfo.title}
|
|
description={stepInfo.description}
|
|
explanation={stepInfo.explanation}
|
|
tips={stepInfo.tips}
|
|
>
|
|
<button
|
|
onClick={() => setShowCreateModal(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>
|
|
Eskalation erstellen
|
|
</button>
|
|
</StepHeader>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
<div className="text-sm text-gray-500">Gesamt aktiv</div>
|
|
<div className="text-3xl font-bold text-gray-900">
|
|
{loading ? '…' : activeCount}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-red-200 p-6">
|
|
<div className="text-sm text-red-600">Kritisch</div>
|
|
<div className="text-3xl font-bold text-red-600">{loading ? '…' : criticalCount}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-orange-200 p-6">
|
|
<div className="text-sm text-orange-600">Eskaliert</div>
|
|
<div className="text-3xl font-bold text-orange-600">{loading ? '…' : escalatedCount}</div>
|
|
</div>
|
|
<div className="bg-white rounded-xl border border-blue-200 p-6">
|
|
<div className="text-sm text-blue-600">Offen</div>
|
|
<div className="text-3xl font-bold text-blue-600">{loading ? '…' : openCount}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Critical Alert */}
|
|
{criticalCount > 0 && (
|
|
<div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-4">
|
|
<div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
|
|
<svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-red-800">{criticalCount} kritische Eskalation(en) erfordern sofortige Aufmerksamkeit</h4>
|
|
<p className="text-sm text-red-600">Priorisieren Sie diese Vorfaelle zur Vermeidung von Schaeden.</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Filter */}
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="text-sm text-gray-500">Filter:</span>
|
|
{[
|
|
{ key: 'all', label: 'Alle' },
|
|
{ key: 'open', label: 'Offen' },
|
|
{ key: 'in_progress', label: 'In Bearbeitung' },
|
|
{ key: 'escalated', label: 'Eskaliert' },
|
|
{ key: 'critical', label: 'Kritisch' },
|
|
{ key: 'high', label: 'Hoch' },
|
|
{ key: 'resolved', label: 'Geloest' },
|
|
].map(f => (
|
|
<button
|
|
key={f.key}
|
|
onClick={() => setFilter(f.key)}
|
|
className={`px-3 py-1 text-sm rounded-full transition-colors ${
|
|
filter === f.key
|
|
? 'bg-purple-600 text-white'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{f.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* List */}
|
|
{loading ? (
|
|
<div className="text-center py-12 text-gray-500 text-sm">Lade Eskalationen…</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{filteredEscalations
|
|
.sort((a, b) => {
|
|
const priorityOrder: Record<string, number> = { critical: 0, high: 1, medium: 2, low: 3 }
|
|
const statusOrder: Record<string, number> = { escalated: 0, open: 1, in_progress: 2, resolved: 3, closed: 4 }
|
|
const pd = (priorityOrder[a.priority] ?? 9) - (priorityOrder[b.priority] ?? 9)
|
|
if (pd !== 0) return pd
|
|
return (statusOrder[a.status] ?? 9) - (statusOrder[b.status] ?? 9)
|
|
})
|
|
.map(esc => (
|
|
<EscalationCard
|
|
key={esc.id}
|
|
escalation={esc}
|
|
onClick={() => setSelectedEscalation(esc)}
|
|
/>
|
|
))}
|
|
|
|
{filteredEscalations.length === 0 && (
|
|
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
|
<div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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>
|
|
<h3 className="text-lg font-semibold text-gray-900">Keine Eskalationen gefunden</h3>
|
|
<p className="mt-2 text-gray-500">Passen Sie den Filter an oder erstellen Sie eine neue Eskalation.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Modals */}
|
|
{showCreateModal && (
|
|
<EscalationCreateModal
|
|
onClose={() => setShowCreateModal(false)}
|
|
onCreated={loadAll}
|
|
/>
|
|
)}
|
|
|
|
{selectedEscalation && (
|
|
<EscalationDetailDrawer
|
|
escalation={selectedEscalation}
|
|
onClose={() => setSelectedEscalation(null)}
|
|
onUpdated={loadAll}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|