refactor(admin): split obligations page.tsx into colocated components
Extract ObligationModal, ObligationDetail, ObligationCard, ObligationsHeader, StatsGrid, FilterBar and InfoBanners into _components/, plus _types.ts for shared types/constants. page.tsx drops from 987 to 325 LOC, below the 300 soft target region and well under the 500 hard cap. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
@@ -0,0 +1,64 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { REGULATION_CHIPS } from '../_types'
|
||||||
|
|
||||||
|
export default function FilterBar({
|
||||||
|
filter,
|
||||||
|
regulationFilter,
|
||||||
|
searchQuery,
|
||||||
|
onFilter,
|
||||||
|
onRegulationFilter,
|
||||||
|
onSearch,
|
||||||
|
}: {
|
||||||
|
filter: string
|
||||||
|
regulationFilter: string
|
||||||
|
searchQuery: string
|
||||||
|
onFilter: (v: string) => void
|
||||||
|
onRegulationFilter: (v: string) => void
|
||||||
|
onSearch: (v: string) => void
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Regulation Filter Chips */}
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
<span className="text-xs text-gray-500 mr-1">Regulation:</span>
|
||||||
|
{REGULATION_CHIPS.map(r => (
|
||||||
|
<button
|
||||||
|
key={r.key}
|
||||||
|
onClick={() => onRegulationFilter(r.key)}
|
||||||
|
className={`px-3 py-1 text-xs rounded-full transition-colors ${
|
||||||
|
regulationFilter === r.key ? 'bg-purple-600 text-white' : 'bg-purple-50 text-purple-700 hover:bg-purple-100'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{r.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search + Status Filter */}
|
||||||
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={e => onSearch(e.target.value)}
|
||||||
|
placeholder="Suche nach Pflichten..."
|
||||||
|
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
{['all', 'overdue', 'pending', 'in-progress', 'completed', 'critical'].map(f => (
|
||||||
|
<button
|
||||||
|
key={f}
|
||||||
|
onClick={() => onFilter(f)}
|
||||||
|
className={`px-3 py-1.5 text-xs rounded-full transition-colors ${
|
||||||
|
filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{f === 'all' ? 'Alle' : f === 'in-progress' ? 'In Bearbeitung' : f === 'overdue' ? 'Ueberfaellig' : f === 'pending' ? 'Ausstehend' : f === 'completed' ? 'Abgeschlossen' : 'Kritisch'}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import type { ApplicableRegulation } from '@/lib/sdk/compliance-scope-types'
|
||||||
|
import type { ObligationStats } from '../_types'
|
||||||
|
|
||||||
|
export function ApplicableRegsBanner({ regs }: { regs: ApplicableRegulation[] }) {
|
||||||
|
if (regs.length === 0) return null
|
||||||
|
return (
|
||||||
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
||||||
|
<h3 className="text-sm font-semibold text-blue-900 mb-2">Anwendbare Regulierungen (aus Auto-Profiling)</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{regs.map(reg => (
|
||||||
|
<span
|
||||||
|
key={reg.id}
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-white border border-blue-300 text-blue-800"
|
||||||
|
>
|
||||||
|
<svg className="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
{reg.name}
|
||||||
|
{reg.classification && <span className="text-blue-500">({reg.classification})</span>}
|
||||||
|
<span className="text-blue-400">{reg.obligation_count} Pflichten</span>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function NoProfileWarning() {
|
||||||
|
return (
|
||||||
|
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-700">
|
||||||
|
Kein Unternehmensprofil vorhanden. Auto-Profiling verwendet Beispieldaten.{' '}
|
||||||
|
<a href="/sdk/company-profile" className="underline font-medium">Profil anlegen →</a>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OverdueAlert({ stats }: { stats: ObligationStats | null }) {
|
||||||
|
if ((stats?.overdue ?? 0) <= 0) return null
|
||||||
|
return (
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-3">
|
||||||
|
<div className="w-9 h-9 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg className="w-4 h-4 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 text-sm">Achtung: {stats?.overdue} ueberfaellige Pflicht(en)</h4>
|
||||||
|
<p className="text-xs text-red-600">Diese Pflichten erfordern sofortige Aufmerksamkeit.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function EmptyList({ onCreate }: { onCreate: () => void }) {
|
||||||
|
return (
|
||||||
|
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
||||||
|
<div className="w-14 h-14 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
||||||
|
<svg className="w-7 h-7 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-base font-semibold text-gray-900">Keine Pflichten gefunden</h3>
|
||||||
|
<p className="mt-2 text-sm text-gray-500">
|
||||||
|
Klicken Sie auf "Pflicht hinzufuegen", um die erste Compliance-Pflicht zu erfassen.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={onCreate}
|
||||||
|
className="mt-4 px-5 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700"
|
||||||
|
>
|
||||||
|
Erste Pflicht erstellen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import TOMControlPanel from '@/components/sdk/obligations/TOMControlPanel'
|
||||||
|
import {
|
||||||
|
PRIORITY_COLORS,
|
||||||
|
PRIORITY_LABELS,
|
||||||
|
STATUS_COLORS,
|
||||||
|
STATUS_LABELS,
|
||||||
|
STATUS_NEXT,
|
||||||
|
type Obligation,
|
||||||
|
} from '../_types'
|
||||||
|
|
||||||
|
export default function ObligationCard({
|
||||||
|
obligation,
|
||||||
|
onStatusChange,
|
||||||
|
onDetails,
|
||||||
|
}: {
|
||||||
|
obligation: Obligation
|
||||||
|
onStatusChange: (id: string, status: string) => Promise<void>
|
||||||
|
onDetails: () => void
|
||||||
|
}) {
|
||||||
|
const [saving, setSaving] = useState(false)
|
||||||
|
const [showTOM, setShowTOM] = useState(false)
|
||||||
|
|
||||||
|
const daysUntil = obligation.deadline
|
||||||
|
? Math.ceil((new Date(obligation.deadline).getTime() - Date.now()) / 86400000)
|
||||||
|
: null
|
||||||
|
|
||||||
|
const handleMark = async (e: React.MouseEvent) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
setSaving(true)
|
||||||
|
await onStatusChange(obligation.id, STATUS_NEXT[obligation.status])
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`bg-white rounded-xl border-2 p-5 cursor-pointer hover:shadow-md transition-all ${
|
||||||
|
obligation.status === 'overdue' ? 'border-red-200' :
|
||||||
|
obligation.status === 'completed' ? 'border-green-200' :
|
||||||
|
obligation.status === 'in-progress' ? 'border-blue-200' : 'border-gray-200'
|
||||||
|
}`}
|
||||||
|
onClick={onDetails}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 mb-1.5 flex-wrap">
|
||||||
|
<span className={`px-2 py-0.5 text-xs rounded-full ${PRIORITY_COLORS[obligation.priority]}`}>
|
||||||
|
{PRIORITY_LABELS[obligation.priority]}
|
||||||
|
</span>
|
||||||
|
<span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[obligation.status]}`}>
|
||||||
|
{STATUS_LABELS[obligation.status]}
|
||||||
|
</span>
|
||||||
|
{obligation.source_article && (
|
||||||
|
<span className="px-2 py-0.5 text-xs bg-purple-50 text-purple-700 rounded">
|
||||||
|
{obligation.source} {obligation.source_article}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h3 className="font-semibold text-gray-900 text-sm">{obligation.title}</h3>
|
||||||
|
{obligation.description && (
|
||||||
|
<p className="text-xs text-gray-500 mt-1 line-clamp-2">{obligation.description}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3 flex items-center justify-between text-xs text-gray-500">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{obligation.responsible && <span>👤 {obligation.responsible}</span>}
|
||||||
|
{obligation.deadline && (
|
||||||
|
<span className={daysUntil !== null && daysUntil < 0 ? 'text-red-600 font-medium' : ''}>
|
||||||
|
📅 {new Date(obligation.deadline).toLocaleDateString('de-DE')}
|
||||||
|
{daysUntil !== null && ` (${daysUntil < 0 ? `${Math.abs(daysUntil)}d überfällig` : `${daysUntil}d`})`}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
|
||||||
|
<button
|
||||||
|
onClick={(e) => { e.stopPropagation(); setShowTOM(v => !v) }}
|
||||||
|
className="px-2 py-1 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
|
||||||
|
title="TOM Controls anzeigen"
|
||||||
|
>
|
||||||
|
TOM
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onDetails}
|
||||||
|
className="text-purple-600 hover:text-purple-700 font-medium"
|
||||||
|
>
|
||||||
|
Details
|
||||||
|
</button>
|
||||||
|
{obligation.status !== 'completed' && (
|
||||||
|
<button
|
||||||
|
onClick={handleMark}
|
||||||
|
disabled={saving}
|
||||||
|
className="px-3 py-1 bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{saving ? '...' : STATUS_NEXT[obligation.status] === 'completed' ? 'Erledigt ✓' : `→ ${STATUS_LABELS[STATUS_NEXT[obligation.status]]}`}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showTOM && (
|
||||||
|
<div className="mt-3" onClick={e => e.stopPropagation()}>
|
||||||
|
<TOMControlPanel obligationId={obligation.id} onClose={() => setShowTOM(false)} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,136 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import {
|
||||||
|
PRIORITY_COLORS,
|
||||||
|
PRIORITY_LABELS,
|
||||||
|
STATUS_COLORS,
|
||||||
|
STATUS_LABELS,
|
||||||
|
STATUS_NEXT,
|
||||||
|
type Obligation,
|
||||||
|
} from '../_types'
|
||||||
|
|
||||||
|
export default function ObligationDetail({ obligation, onClose, onStatusChange, onEdit, onDelete }: {
|
||||||
|
obligation: Obligation
|
||||||
|
onClose: () => void
|
||||||
|
onStatusChange: (id: string, status: string) => Promise<void>
|
||||||
|
onEdit: () => void
|
||||||
|
onDelete: (id: string) => Promise<void>
|
||||||
|
}) {
|
||||||
|
const [saving, setSaving] = useState(false)
|
||||||
|
|
||||||
|
const handleStatusCycle = async () => {
|
||||||
|
setSaving(true)
|
||||||
|
await onStatusChange(obligation.id, STATUS_NEXT[obligation.status])
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async () => {
|
||||||
|
if (!confirm('Pflicht wirklich loeschen?')) return
|
||||||
|
await onDelete(obligation.id)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
const daysUntil = obligation.deadline
|
||||||
|
? Math.ceil((new Date(obligation.deadline).getTime() - Date.now()) / 86400000)
|
||||||
|
: null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/40 z-50 flex items-end md:items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
|
||||||
|
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] overflow-y-auto">
|
||||||
|
<div className="flex items-start justify-between p-6 border-b gap-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||||
|
<span className={`px-2 py-0.5 text-xs rounded-full ${PRIORITY_COLORS[obligation.priority]}`}>{PRIORITY_LABELS[obligation.priority]}</span>
|
||||||
|
<span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[obligation.status]}`}>{STATUS_LABELS[obligation.status]}</span>
|
||||||
|
{obligation.source && (
|
||||||
|
<span className="px-2 py-0.5 text-xs bg-purple-50 text-purple-700 rounded">{obligation.source} {obligation.source_article}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h2 className="text-base font-semibold text-gray-900">{obligation.title}</h2>
|
||||||
|
</div>
|
||||||
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 flex-shrink-0">✕</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 space-y-4 text-sm">
|
||||||
|
{obligation.description && (
|
||||||
|
<p className="text-gray-700 whitespace-pre-wrap">{obligation.description}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">Verantwortlich</span>
|
||||||
|
<p className="font-medium text-gray-900">{obligation.responsible || '—'}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">Frist</span>
|
||||||
|
<p className={`font-medium ${daysUntil !== null && daysUntil < 0 ? 'text-red-600' : 'text-gray-900'}`}>
|
||||||
|
{obligation.deadline
|
||||||
|
? `${new Date(obligation.deadline).toLocaleDateString('de-DE')}${daysUntil !== null ? ` (${daysUntil < 0 ? `${Math.abs(daysUntil)}d ueberfaellig` : `${daysUntil}d`})` : ''}`
|
||||||
|
: '—'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{obligation.linked_systems?.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">Betroffene Systeme</span>
|
||||||
|
<div className="flex flex-wrap gap-1 mt-1">
|
||||||
|
{obligation.linked_systems.map(s => (
|
||||||
|
<span key={s} className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">{s}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{obligation.notes && (
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-500">Notizen</span>
|
||||||
|
<p className="text-gray-700 mt-1">{obligation.notes}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{obligation.rule_code && (
|
||||||
|
<div className="bg-purple-50 rounded-lg p-3">
|
||||||
|
<span className="text-xs text-purple-600">Aus UCCA Assessment abgeleitet · Regel {obligation.rule_code}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{obligation.created_at && (
|
||||||
|
<p className="text-xs text-gray-400">
|
||||||
|
Erstellt: {new Date(obligation.created_at).toLocaleDateString('de-DE')}
|
||||||
|
{obligation.updated_at && obligation.updated_at !== obligation.created_at
|
||||||
|
? ` · Geaendert: ${new Date(obligation.updated_at).toLocaleDateString('de-DE')}`
|
||||||
|
: ''}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between gap-2 p-6 border-t flex-wrap">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={handleDelete}
|
||||||
|
className="px-3 py-1.5 text-xs text-red-600 hover:bg-red-50 rounded-lg border border-red-200"
|
||||||
|
>
|
||||||
|
Loeschen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button onClick={onEdit} className="px-3 py-1.5 text-xs text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg">
|
||||||
|
Bearbeiten
|
||||||
|
</button>
|
||||||
|
{obligation.status !== 'completed' && (
|
||||||
|
<button
|
||||||
|
onClick={handleStatusCycle}
|
||||||
|
disabled={saving}
|
||||||
|
className="px-4 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{saving ? '...' : STATUS_NEXT[obligation.status] === 'completed' ? 'Als erledigt markieren' : `→ ${STATUS_LABELS[STATUS_NEXT[obligation.status]]}`}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,181 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { EMPTY_FORM, type ObligationFormData } from '../_types'
|
||||||
|
|
||||||
|
export default function ObligationModal({
|
||||||
|
initial,
|
||||||
|
onClose,
|
||||||
|
onSave,
|
||||||
|
}: {
|
||||||
|
initial?: Partial<ObligationFormData>
|
||||||
|
onClose: () => void
|
||||||
|
onSave: (data: ObligationFormData) => Promise<void>
|
||||||
|
}) {
|
||||||
|
const [form, setForm] = useState<ObligationFormData>({ ...EMPTY_FORM, ...initial })
|
||||||
|
const [saving, setSaving] = useState(false)
|
||||||
|
const [error, setError] = useState<string | null>(null)
|
||||||
|
|
||||||
|
const update = (field: keyof ObligationFormData, value: string) =>
|
||||||
|
setForm(prev => ({ ...prev, [field]: value }))
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
if (!form.title.trim()) { setError('Titel ist erforderlich'); return }
|
||||||
|
setSaving(true)
|
||||||
|
setError(null)
|
||||||
|
try {
|
||||||
|
await onSave(form)
|
||||||
|
onClose()
|
||||||
|
} catch (e) {
|
||||||
|
setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
|
||||||
|
} finally {
|
||||||
|
setSaving(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
|
||||||
|
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<div className="flex items-center justify-between p-6 border-b">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900">
|
||||||
|
{initial?.title ? 'Pflicht bearbeiten' : 'Neue Pflicht erstellen'}
|
||||||
|
</h2>
|
||||||
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">✕</button>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
{error && <div className="text-red-600 text-sm bg-red-50 rounded-lg p-3">{error}</div>}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.title}
|
||||||
|
onChange={e => update('title', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
|
||||||
|
placeholder="z.B. Datenschutz-Folgenabschaetzung durchfuehren"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
|
||||||
|
<textarea
|
||||||
|
value={form.description}
|
||||||
|
onChange={e => update('description', e.target.value)}
|
||||||
|
rows={3}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
|
||||||
|
placeholder="Detaillierte Beschreibung der Anforderung..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Rechtsquelle</label>
|
||||||
|
<select
|
||||||
|
value={form.source}
|
||||||
|
onChange={e => update('source', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
>
|
||||||
|
{['DSGVO', 'AI Act', 'NIS2', 'BDSG', 'TTDSG', 'DSA', 'Data Act', 'DORA', 'EU-Maschinen', 'Sonstig'].map(s => (
|
||||||
|
<option key={s}>{s}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Artikel/Paragraph</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.source_article}
|
||||||
|
onChange={e => update('source_article', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
placeholder="z.B. Art. 35"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</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={form.priority}
|
||||||
|
onChange={e => update('priority', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
>
|
||||||
|
<option value="critical">Kritisch</option>
|
||||||
|
<option value="high">Hoch</option>
|
||||||
|
<option value="medium">Mittel</option>
|
||||||
|
<option value="low">Niedrig</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
|
||||||
|
<select
|
||||||
|
value={form.status}
|
||||||
|
onChange={e => update('status', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
>
|
||||||
|
<option value="pending">Ausstehend</option>
|
||||||
|
<option value="in-progress">In Bearbeitung</option>
|
||||||
|
<option value="completed">Abgeschlossen</option>
|
||||||
|
<option value="overdue">Ueberfaellig</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">Faellig bis</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={form.deadline}
|
||||||
|
onChange={e => update('deadline', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Verantwortlich</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.responsible}
|
||||||
|
onChange={e => update('responsible', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
placeholder="z.B. DSB, IT, Compliance"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Betroffene Systeme</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={form.linked_systems}
|
||||||
|
onChange={e => update('linked_systems', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
placeholder="Kommagetrennt: CRM, ERP, Website"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
|
||||||
|
<textarea
|
||||||
|
value={form.notes}
|
||||||
|
onChange={e => update('notes', e.target.value)}
|
||||||
|
rows={2}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
||||||
|
placeholder="Interne Hinweise..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end gap-3 p-6 border-t">
|
||||||
|
<button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
|
||||||
|
<button
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={saving}
|
||||||
|
className="px-5 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{saving ? 'Speichern...' : 'Speichern'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
|
||||||
|
|
||||||
|
export default function ObligationsHeader({
|
||||||
|
profiling,
|
||||||
|
showGapAnalysis,
|
||||||
|
onAutoProfiling,
|
||||||
|
onToggleGap,
|
||||||
|
onAdd,
|
||||||
|
}: {
|
||||||
|
profiling: boolean
|
||||||
|
showGapAnalysis: boolean
|
||||||
|
onAutoProfiling: () => void
|
||||||
|
onToggleGap: () => void
|
||||||
|
onAdd: () => void
|
||||||
|
}) {
|
||||||
|
const stepInfo = STEP_EXPLANATIONS['obligations']
|
||||||
|
return (
|
||||||
|
<StepHeader
|
||||||
|
stepId="obligations"
|
||||||
|
title={stepInfo?.title || 'Pflichten-Management'}
|
||||||
|
description={stepInfo?.description || 'DSGVO & AI-Act Compliance-Pflichten verwalten'}
|
||||||
|
explanation={stepInfo?.explanation || ''}
|
||||||
|
tips={stepInfo?.tips || []}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={onAutoProfiling}
|
||||||
|
disabled={profiling}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-white border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors text-sm disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||||
|
</svg>
|
||||||
|
{profiling ? 'Profiling...' : 'Auto-Profiling'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onToggleGap}
|
||||||
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors text-sm ${
|
||||||
|
showGapAnalysis ? 'bg-purple-100 text-purple-700' : 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||||
|
</svg>
|
||||||
|
Gap-Analyse
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={onAdd}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm"
|
||||||
|
>
|
||||||
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
Pflicht hinzufuegen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</StepHeader>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import type { ObligationStats } from '../_types'
|
||||||
|
|
||||||
|
export default function StatsGrid({ stats }: { stats: ObligationStats | null }) {
|
||||||
|
const items = [
|
||||||
|
{ label: 'Ausstehend', value: stats?.pending ?? 0, color: 'text-gray-600', border: 'border-gray-200' },
|
||||||
|
{ label: 'In Bearbeitung',value: stats?.in_progress ?? 0, color: 'text-blue-600', border: 'border-blue-200' },
|
||||||
|
{ label: 'Ueberfaellig', value: stats?.overdue ?? 0, color: 'text-red-600', border: 'border-red-200' },
|
||||||
|
{ label: 'Abgeschlossen', value: stats?.completed ?? 0, color: 'text-green-600', border: 'border-green-200'},
|
||||||
|
]
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
{items.map(s => (
|
||||||
|
<div key={s.label} className={`bg-white rounded-xl border ${s.border} p-5`}>
|
||||||
|
<div className={`text-xs ${s.color}`}>{s.label}</div>
|
||||||
|
<div className={`text-3xl font-bold mt-1 ${s.color}`}>{s.value}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
120
admin-compliance/app/sdk/obligations/_types.ts
Normal file
120
admin-compliance/app/sdk/obligations/_types.ts
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
// =============================================================================
|
||||||
|
// Types
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export interface Obligation {
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
|
source: string
|
||||||
|
source_article: string
|
||||||
|
deadline: string | null
|
||||||
|
status: 'pending' | 'in-progress' | 'completed' | 'overdue'
|
||||||
|
priority: 'critical' | 'high' | 'medium' | 'low'
|
||||||
|
responsible: string
|
||||||
|
linked_systems: string[]
|
||||||
|
assessment_id?: string
|
||||||
|
rule_code?: string
|
||||||
|
notes?: string
|
||||||
|
created_at?: string
|
||||||
|
updated_at?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ObligationStats {
|
||||||
|
pending: number
|
||||||
|
in_progress: number
|
||||||
|
overdue: number
|
||||||
|
completed: number
|
||||||
|
total: number
|
||||||
|
critical: number
|
||||||
|
high: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ObligationFormData {
|
||||||
|
title: string
|
||||||
|
description: string
|
||||||
|
source: string
|
||||||
|
source_article: string
|
||||||
|
deadline: string
|
||||||
|
status: string
|
||||||
|
priority: string
|
||||||
|
responsible: string
|
||||||
|
linked_systems: string
|
||||||
|
notes: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const EMPTY_FORM: ObligationFormData = {
|
||||||
|
title: '',
|
||||||
|
description: '',
|
||||||
|
source: 'DSGVO',
|
||||||
|
source_article: '',
|
||||||
|
deadline: '',
|
||||||
|
status: 'pending',
|
||||||
|
priority: 'medium',
|
||||||
|
responsible: '',
|
||||||
|
linked_systems: '',
|
||||||
|
notes: '',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const API = '/api/sdk/v1/compliance/obligations'
|
||||||
|
export const UCCA_API = '/api/sdk/v1/ucca/obligations'
|
||||||
|
|
||||||
|
// =============================================================================
|
||||||
|
// Status helpers
|
||||||
|
// =============================================================================
|
||||||
|
|
||||||
|
export const PRIORITY_COLORS: Record<string, string> = {
|
||||||
|
critical: 'bg-red-100 text-red-700',
|
||||||
|
high: 'bg-orange-100 text-orange-700',
|
||||||
|
medium: 'bg-yellow-100 text-yellow-700',
|
||||||
|
low: 'bg-green-100 text-green-700',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PRIORITY_LABELS: Record<string, string> = {
|
||||||
|
critical: 'Kritisch',
|
||||||
|
high: 'Hoch',
|
||||||
|
medium: 'Mittel',
|
||||||
|
low: 'Niedrig',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const STATUS_COLORS: Record<string, string> = {
|
||||||
|
pending: 'bg-gray-100 text-gray-600',
|
||||||
|
'in-progress':'bg-blue-100 text-blue-700',
|
||||||
|
completed: 'bg-green-100 text-green-700',
|
||||||
|
overdue: 'bg-red-100 text-red-700',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const STATUS_LABELS: Record<string, string> = {
|
||||||
|
pending: 'Ausstehend',
|
||||||
|
'in-progress':'In Bearbeitung',
|
||||||
|
completed: 'Abgeschlossen',
|
||||||
|
overdue: 'Ueberfaellig',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const STATUS_NEXT: Record<string, string> = {
|
||||||
|
pending: 'in-progress',
|
||||||
|
'in-progress':'completed',
|
||||||
|
completed: 'pending',
|
||||||
|
overdue: 'in-progress',
|
||||||
|
}
|
||||||
|
|
||||||
|
export const REGULATION_CHIPS = [
|
||||||
|
{ key: 'all', label: 'Alle' },
|
||||||
|
{ key: 'DSGVO', label: 'DSGVO' },
|
||||||
|
{ key: 'AI Act', label: 'AI Act' },
|
||||||
|
{ key: 'NIS2', label: 'NIS2' },
|
||||||
|
{ key: 'BDSG', label: 'BDSG' },
|
||||||
|
{ key: 'TTDSG', label: 'TTDSG' },
|
||||||
|
{ key: 'DSA', label: 'DSA' },
|
||||||
|
{ key: 'Data Act', label: 'Data Act' },
|
||||||
|
{ key: 'DORA', label: 'DORA' },
|
||||||
|
{ key: 'EU-Maschinen', label: 'EU-Maschinen' },
|
||||||
|
]
|
||||||
|
|
||||||
|
export function mapPriority(p: string): 'critical' | 'high' | 'medium' | 'low' {
|
||||||
|
const map: Record<string, 'critical' | 'high' | 'medium' | 'low'> = {
|
||||||
|
kritisch: 'critical', hoch: 'high', mittel: 'medium', niedrig: 'low',
|
||||||
|
critical: 'critical', high: 'high', medium: 'medium', low: 'low',
|
||||||
|
}
|
||||||
|
return map[p?.toLowerCase()] || 'medium'
|
||||||
|
}
|
||||||
@@ -1,551 +1,30 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import React, { useState, useEffect, useCallback } from 'react'
|
import React, { useState, useEffect, useCallback } from 'react'
|
||||||
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
|
|
||||||
import TOMControlPanel from '@/components/sdk/obligations/TOMControlPanel'
|
|
||||||
import GapAnalysisView from '@/components/sdk/obligations/GapAnalysisView'
|
import GapAnalysisView from '@/components/sdk/obligations/GapAnalysisView'
|
||||||
import { useSDK } from '@/lib/sdk'
|
import { useSDK } from '@/lib/sdk'
|
||||||
import { buildAssessmentPayload } from '@/lib/sdk/scope-to-facts'
|
import { buildAssessmentPayload } from '@/lib/sdk/scope-to-facts'
|
||||||
import type { ApplicableRegulation } from '@/lib/sdk/compliance-scope-types'
|
import type { ApplicableRegulation } from '@/lib/sdk/compliance-scope-types'
|
||||||
|
import {
|
||||||
// =============================================================================
|
API,
|
||||||
// Types
|
UCCA_API,
|
||||||
// =============================================================================
|
mapPriority,
|
||||||
|
type Obligation,
|
||||||
interface Obligation {
|
type ObligationStats,
|
||||||
id: string
|
type ObligationFormData,
|
||||||
title: string
|
} from './_types'
|
||||||
description: string
|
import ObligationModal from './_components/ObligationModal'
|
||||||
source: string
|
import ObligationDetail from './_components/ObligationDetail'
|
||||||
source_article: string
|
import ObligationCard from './_components/ObligationCard'
|
||||||
deadline: string | null
|
import ObligationsHeader from './_components/ObligationsHeader'
|
||||||
status: 'pending' | 'in-progress' | 'completed' | 'overdue'
|
import StatsGrid from './_components/StatsGrid'
|
||||||
priority: 'critical' | 'high' | 'medium' | 'low'
|
import FilterBar from './_components/FilterBar'
|
||||||
responsible: string
|
import {
|
||||||
linked_systems: string[]
|
ApplicableRegsBanner,
|
||||||
assessment_id?: string
|
NoProfileWarning,
|
||||||
rule_code?: string
|
OverdueAlert,
|
||||||
notes?: string
|
EmptyList,
|
||||||
created_at?: string
|
} from './_components/InfoBanners'
|
||||||
updated_at?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ObligationStats {
|
|
||||||
pending: number
|
|
||||||
in_progress: number
|
|
||||||
overdue: number
|
|
||||||
completed: number
|
|
||||||
total: number
|
|
||||||
critical: number
|
|
||||||
high: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ObligationFormData {
|
|
||||||
title: string
|
|
||||||
description: string
|
|
||||||
source: string
|
|
||||||
source_article: string
|
|
||||||
deadline: string
|
|
||||||
status: string
|
|
||||||
priority: string
|
|
||||||
responsible: string
|
|
||||||
linked_systems: string
|
|
||||||
notes: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const EMPTY_FORM: ObligationFormData = {
|
|
||||||
title: '',
|
|
||||||
description: '',
|
|
||||||
source: 'DSGVO',
|
|
||||||
source_article: '',
|
|
||||||
deadline: '',
|
|
||||||
status: 'pending',
|
|
||||||
priority: 'medium',
|
|
||||||
responsible: '',
|
|
||||||
linked_systems: '',
|
|
||||||
notes: '',
|
|
||||||
}
|
|
||||||
|
|
||||||
const API = '/api/sdk/v1/compliance/obligations'
|
|
||||||
|
|
||||||
// =============================================================================
|
|
||||||
// Status helpers
|
|
||||||
// =============================================================================
|
|
||||||
|
|
||||||
const PRIORITY_COLORS: Record<string, string> = {
|
|
||||||
critical: 'bg-red-100 text-red-700',
|
|
||||||
high: 'bg-orange-100 text-orange-700',
|
|
||||||
medium: 'bg-yellow-100 text-yellow-700',
|
|
||||||
low: 'bg-green-100 text-green-700',
|
|
||||||
}
|
|
||||||
|
|
||||||
const PRIORITY_LABELS: Record<string, string> = {
|
|
||||||
critical: 'Kritisch',
|
|
||||||
high: 'Hoch',
|
|
||||||
medium: 'Mittel',
|
|
||||||
low: 'Niedrig',
|
|
||||||
}
|
|
||||||
|
|
||||||
const STATUS_COLORS: Record<string, string> = {
|
|
||||||
pending: 'bg-gray-100 text-gray-600',
|
|
||||||
'in-progress':'bg-blue-100 text-blue-700',
|
|
||||||
completed: 'bg-green-100 text-green-700',
|
|
||||||
overdue: 'bg-red-100 text-red-700',
|
|
||||||
}
|
|
||||||
|
|
||||||
const STATUS_LABELS: Record<string, string> = {
|
|
||||||
pending: 'Ausstehend',
|
|
||||||
'in-progress':'In Bearbeitung',
|
|
||||||
completed: 'Abgeschlossen',
|
|
||||||
overdue: 'Ueberfaellig',
|
|
||||||
}
|
|
||||||
|
|
||||||
const STATUS_NEXT: Record<string, string> = {
|
|
||||||
pending: 'in-progress',
|
|
||||||
'in-progress':'completed',
|
|
||||||
completed: 'pending',
|
|
||||||
overdue: 'in-progress',
|
|
||||||
}
|
|
||||||
|
|
||||||
// =============================================================================
|
|
||||||
// Create/Edit Modal
|
|
||||||
// =============================================================================
|
|
||||||
|
|
||||||
function ObligationModal({
|
|
||||||
initial,
|
|
||||||
onClose,
|
|
||||||
onSave,
|
|
||||||
}: {
|
|
||||||
initial?: Partial<ObligationFormData>
|
|
||||||
onClose: () => void
|
|
||||||
onSave: (data: ObligationFormData) => Promise<void>
|
|
||||||
}) {
|
|
||||||
const [form, setForm] = useState<ObligationFormData>({ ...EMPTY_FORM, ...initial })
|
|
||||||
const [saving, setSaving] = useState(false)
|
|
||||||
const [error, setError] = useState<string | null>(null)
|
|
||||||
|
|
||||||
const update = (field: keyof ObligationFormData, value: string) =>
|
|
||||||
setForm(prev => ({ ...prev, [field]: value }))
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
if (!form.title.trim()) { setError('Titel ist erforderlich'); return }
|
|
||||||
setSaving(true)
|
|
||||||
setError(null)
|
|
||||||
try {
|
|
||||||
await onSave(form)
|
|
||||||
onClose()
|
|
||||||
} catch (e) {
|
|
||||||
setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
|
|
||||||
} finally {
|
|
||||||
setSaving(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
|
|
||||||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-xl max-h-[90vh] overflow-y-auto">
|
|
||||||
<div className="flex items-center justify-between p-6 border-b">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-900">
|
|
||||||
{initial?.title ? 'Pflicht bearbeiten' : 'Neue Pflicht erstellen'}
|
|
||||||
</h2>
|
|
||||||
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">✕</button>
|
|
||||||
</div>
|
|
||||||
<div className="p-6 space-y-4">
|
|
||||||
{error && <div className="text-red-600 text-sm bg-red-50 rounded-lg p-3">{error}</div>}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.title}
|
|
||||||
onChange={e => update('title', e.target.value)}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
|
|
||||||
placeholder="z.B. Datenschutz-Folgenabschaetzung durchfuehren"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
|
|
||||||
<textarea
|
|
||||||
value={form.description}
|
|
||||||
onChange={e => update('description', e.target.value)}
|
|
||||||
rows={3}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
|
|
||||||
placeholder="Detaillierte Beschreibung der Anforderung..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Rechtsquelle</label>
|
|
||||||
<select
|
|
||||||
value={form.source}
|
|
||||||
onChange={e => update('source', e.target.value)}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
||||||
>
|
|
||||||
{['DSGVO', 'AI Act', 'NIS2', 'BDSG', 'TTDSG', 'DSA', 'Data Act', 'DORA', 'EU-Maschinen', 'Sonstig'].map(s => (
|
|
||||||
<option key={s}>{s}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Artikel/Paragraph</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.source_article}
|
|
||||||
onChange={e => update('source_article', e.target.value)}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
||||||
placeholder="z.B. Art. 35"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</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={form.priority}
|
|
||||||
onChange={e => update('priority', e.target.value)}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
||||||
>
|
|
||||||
<option value="critical">Kritisch</option>
|
|
||||||
<option value="high">Hoch</option>
|
|
||||||
<option value="medium">Mittel</option>
|
|
||||||
<option value="low">Niedrig</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
|
|
||||||
<select
|
|
||||||
value={form.status}
|
|
||||||
onChange={e => update('status', e.target.value)}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
||||||
>
|
|
||||||
<option value="pending">Ausstehend</option>
|
|
||||||
<option value="in-progress">In Bearbeitung</option>
|
|
||||||
<option value="completed">Abgeschlossen</option>
|
|
||||||
<option value="overdue">Ueberfaellig</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">Faellig bis</label>
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
value={form.deadline}
|
|
||||||
onChange={e => update('deadline', e.target.value)}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Verantwortlich</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.responsible}
|
|
||||||
onChange={e => update('responsible', e.target.value)}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
||||||
placeholder="z.B. DSB, IT, Compliance"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Betroffene Systeme</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={form.linked_systems}
|
|
||||||
onChange={e => update('linked_systems', e.target.value)}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
||||||
placeholder="Kommagetrennt: CRM, ERP, Website"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
|
|
||||||
<textarea
|
|
||||||
value={form.notes}
|
|
||||||
onChange={e => update('notes', e.target.value)}
|
|
||||||
rows={2}
|
|
||||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
|
|
||||||
placeholder="Interne Hinweise..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-end gap-3 p-6 border-t">
|
|
||||||
<button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
|
|
||||||
<button
|
|
||||||
onClick={handleSave}
|
|
||||||
disabled={saving}
|
|
||||||
className="px-5 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{saving ? 'Speichern...' : 'Speichern'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// =============================================================================
|
|
||||||
// Detail Panel
|
|
||||||
// =============================================================================
|
|
||||||
|
|
||||||
function ObligationDetail({ obligation, onClose, onStatusChange, onEdit, onDelete }: {
|
|
||||||
obligation: Obligation
|
|
||||||
onClose: () => void
|
|
||||||
onStatusChange: (id: string, status: string) => Promise<void>
|
|
||||||
onEdit: () => void
|
|
||||||
onDelete: (id: string) => Promise<void>
|
|
||||||
}) {
|
|
||||||
const [saving, setSaving] = useState(false)
|
|
||||||
|
|
||||||
const handleStatusCycle = async () => {
|
|
||||||
setSaving(true)
|
|
||||||
await onStatusChange(obligation.id, STATUS_NEXT[obligation.status])
|
|
||||||
setSaving(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleDelete = async () => {
|
|
||||||
if (!confirm('Pflicht wirklich loeschen?')) return
|
|
||||||
await onDelete(obligation.id)
|
|
||||||
onClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
const daysUntil = obligation.deadline
|
|
||||||
? Math.ceil((new Date(obligation.deadline).getTime() - Date.now()) / 86400000)
|
|
||||||
: null
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="fixed inset-0 bg-black/40 z-50 flex items-end md:items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
|
|
||||||
<div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] overflow-y-auto">
|
|
||||||
<div className="flex items-start justify-between p-6 border-b gap-4">
|
|
||||||
<div className="flex-1">
|
|
||||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
|
||||||
<span className={`px-2 py-0.5 text-xs rounded-full ${PRIORITY_COLORS[obligation.priority]}`}>{PRIORITY_LABELS[obligation.priority]}</span>
|
|
||||||
<span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[obligation.status]}`}>{STATUS_LABELS[obligation.status]}</span>
|
|
||||||
{obligation.source && (
|
|
||||||
<span className="px-2 py-0.5 text-xs bg-purple-50 text-purple-700 rounded">{obligation.source} {obligation.source_article}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<h2 className="text-base font-semibold text-gray-900">{obligation.title}</h2>
|
|
||||||
</div>
|
|
||||||
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 flex-shrink-0">✕</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-6 space-y-4 text-sm">
|
|
||||||
{obligation.description && (
|
|
||||||
<p className="text-gray-700 whitespace-pre-wrap">{obligation.description}</p>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
|
||||||
<div>
|
|
||||||
<span className="text-gray-500">Verantwortlich</span>
|
|
||||||
<p className="font-medium text-gray-900">{obligation.responsible || '—'}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="text-gray-500">Frist</span>
|
|
||||||
<p className={`font-medium ${daysUntil !== null && daysUntil < 0 ? 'text-red-600' : 'text-gray-900'}`}>
|
|
||||||
{obligation.deadline
|
|
||||||
? `${new Date(obligation.deadline).toLocaleDateString('de-DE')}${daysUntil !== null ? ` (${daysUntil < 0 ? `${Math.abs(daysUntil)}d ueberfaellig` : `${daysUntil}d`})` : ''}`
|
|
||||||
: '—'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{obligation.linked_systems?.length > 0 && (
|
|
||||||
<div>
|
|
||||||
<span className="text-gray-500">Betroffene Systeme</span>
|
|
||||||
<div className="flex flex-wrap gap-1 mt-1">
|
|
||||||
{obligation.linked_systems.map(s => (
|
|
||||||
<span key={s} className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">{s}</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{obligation.notes && (
|
|
||||||
<div>
|
|
||||||
<span className="text-gray-500">Notizen</span>
|
|
||||||
<p className="text-gray-700 mt-1">{obligation.notes}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{obligation.rule_code && (
|
|
||||||
<div className="bg-purple-50 rounded-lg p-3">
|
|
||||||
<span className="text-xs text-purple-600">Aus UCCA Assessment abgeleitet · Regel {obligation.rule_code}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{obligation.created_at && (
|
|
||||||
<p className="text-xs text-gray-400">
|
|
||||||
Erstellt: {new Date(obligation.created_at).toLocaleDateString('de-DE')}
|
|
||||||
{obligation.updated_at && obligation.updated_at !== obligation.created_at
|
|
||||||
? ` · Geaendert: ${new Date(obligation.updated_at).toLocaleDateString('de-DE')}`
|
|
||||||
: ''}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between gap-2 p-6 border-t flex-wrap">
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={handleDelete}
|
|
||||||
className="px-3 py-1.5 text-xs text-red-600 hover:bg-red-50 rounded-lg border border-red-200"
|
|
||||||
>
|
|
||||||
Loeschen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button onClick={onEdit} className="px-3 py-1.5 text-xs text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg">
|
|
||||||
Bearbeiten
|
|
||||||
</button>
|
|
||||||
{obligation.status !== 'completed' && (
|
|
||||||
<button
|
|
||||||
onClick={handleStatusCycle}
|
|
||||||
disabled={saving}
|
|
||||||
className="px-4 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{saving ? '...' : STATUS_NEXT[obligation.status] === 'completed' ? 'Als erledigt markieren' : `→ ${STATUS_LABELS[STATUS_NEXT[obligation.status]]}`}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// =============================================================================
|
|
||||||
// Obligation Card
|
|
||||||
// =============================================================================
|
|
||||||
|
|
||||||
function ObligationCard({
|
|
||||||
obligation,
|
|
||||||
onStatusChange,
|
|
||||||
onDetails,
|
|
||||||
}: {
|
|
||||||
obligation: Obligation
|
|
||||||
onStatusChange: (id: string, status: string) => Promise<void>
|
|
||||||
onDetails: () => void
|
|
||||||
}) {
|
|
||||||
const [saving, setSaving] = useState(false)
|
|
||||||
const [showTOM, setShowTOM] = useState(false)
|
|
||||||
|
|
||||||
const daysUntil = obligation.deadline
|
|
||||||
? Math.ceil((new Date(obligation.deadline).getTime() - Date.now()) / 86400000)
|
|
||||||
: null
|
|
||||||
|
|
||||||
const handleMark = async (e: React.MouseEvent) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
setSaving(true)
|
|
||||||
await onStatusChange(obligation.id, STATUS_NEXT[obligation.status])
|
|
||||||
setSaving(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={`bg-white rounded-xl border-2 p-5 cursor-pointer hover:shadow-md transition-all ${
|
|
||||||
obligation.status === 'overdue' ? 'border-red-200' :
|
|
||||||
obligation.status === 'completed' ? 'border-green-200' :
|
|
||||||
obligation.status === 'in-progress' ? 'border-blue-200' : 'border-gray-200'
|
|
||||||
}`}
|
|
||||||
onClick={onDetails}
|
|
||||||
>
|
|
||||||
<div className="flex items-start justify-between gap-4">
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<div className="flex items-center gap-2 mb-1.5 flex-wrap">
|
|
||||||
<span className={`px-2 py-0.5 text-xs rounded-full ${PRIORITY_COLORS[obligation.priority]}`}>
|
|
||||||
{PRIORITY_LABELS[obligation.priority]}
|
|
||||||
</span>
|
|
||||||
<span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[obligation.status]}`}>
|
|
||||||
{STATUS_LABELS[obligation.status]}
|
|
||||||
</span>
|
|
||||||
{obligation.source_article && (
|
|
||||||
<span className="px-2 py-0.5 text-xs bg-purple-50 text-purple-700 rounded">
|
|
||||||
{obligation.source} {obligation.source_article}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<h3 className="font-semibold text-gray-900 text-sm">{obligation.title}</h3>
|
|
||||||
{obligation.description && (
|
|
||||||
<p className="text-xs text-gray-500 mt-1 line-clamp-2">{obligation.description}</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-3 flex items-center justify-between text-xs text-gray-500">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
{obligation.responsible && <span>👤 {obligation.responsible}</span>}
|
|
||||||
{obligation.deadline && (
|
|
||||||
<span className={daysUntil !== null && daysUntil < 0 ? 'text-red-600 font-medium' : ''}>
|
|
||||||
📅 {new Date(obligation.deadline).toLocaleDateString('de-DE')}
|
|
||||||
{daysUntil !== null && ` (${daysUntil < 0 ? `${Math.abs(daysUntil)}d überfällig` : `${daysUntil}d`})`}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
|
|
||||||
<button
|
|
||||||
onClick={(e) => { e.stopPropagation(); setShowTOM(v => !v) }}
|
|
||||||
className="px-2 py-1 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
|
|
||||||
title="TOM Controls anzeigen"
|
|
||||||
>
|
|
||||||
TOM
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={onDetails}
|
|
||||||
className="text-purple-600 hover:text-purple-700 font-medium"
|
|
||||||
>
|
|
||||||
Details
|
|
||||||
</button>
|
|
||||||
{obligation.status !== 'completed' && (
|
|
||||||
<button
|
|
||||||
onClick={handleMark}
|
|
||||||
disabled={saving}
|
|
||||||
className="px-3 py-1 bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 transition-colors disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{saving ? '...' : STATUS_NEXT[obligation.status] === 'completed' ? 'Erledigt ✓' : `→ ${STATUS_LABELS[STATUS_NEXT[obligation.status]]}`}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{showTOM && (
|
|
||||||
<div className="mt-3" onClick={e => e.stopPropagation()}>
|
|
||||||
<TOMControlPanel obligationId={obligation.id} onClose={() => setShowTOM(false)} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// =============================================================================
|
|
||||||
// Main Page
|
|
||||||
// =============================================================================
|
|
||||||
|
|
||||||
function mapPriority(p: string): 'critical' | 'high' | 'medium' | 'low' {
|
|
||||||
const map: Record<string, 'critical' | 'high' | 'medium' | 'low'> = {
|
|
||||||
kritisch: 'critical', hoch: 'high', mittel: 'medium', niedrig: 'low',
|
|
||||||
critical: 'critical', high: 'high', medium: 'medium', low: 'low',
|
|
||||||
}
|
|
||||||
return map[p?.toLowerCase()] || 'medium'
|
|
||||||
}
|
|
||||||
|
|
||||||
const REGULATION_CHIPS = [
|
|
||||||
{ key: 'all', label: 'Alle' },
|
|
||||||
{ key: 'DSGVO', label: 'DSGVO' },
|
|
||||||
{ key: 'AI Act', label: 'AI Act' },
|
|
||||||
{ key: 'NIS2', label: 'NIS2' },
|
|
||||||
{ key: 'BDSG', label: 'BDSG' },
|
|
||||||
{ key: 'TTDSG', label: 'TTDSG' },
|
|
||||||
{ key: 'DSA', label: 'DSA' },
|
|
||||||
{ key: 'Data Act', label: 'Data Act' },
|
|
||||||
{ key: 'DORA', label: 'DORA' },
|
|
||||||
{ key: 'EU-Maschinen', label: 'EU-Maschinen' },
|
|
||||||
]
|
|
||||||
|
|
||||||
const UCCA_API = '/api/sdk/v1/ucca/obligations'
|
|
||||||
|
|
||||||
export default function ObligationsPage() {
|
export default function ObligationsPage() {
|
||||||
const { state: sdkState } = useSDK()
|
const { state: sdkState } = useSDK()
|
||||||
@@ -735,8 +214,6 @@ export default function ObligationsPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const stepInfo = STEP_EXPLANATIONS['obligations']
|
|
||||||
|
|
||||||
const filteredObligations = obligations.filter(o => {
|
const filteredObligations = obligations.filter(o => {
|
||||||
// Status/priority filter
|
// Status/priority filter
|
||||||
if (filter === 'ai') {
|
if (filter === 'ai') {
|
||||||
@@ -794,162 +271,39 @@ export default function ObligationsPage() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Header */}
|
<ObligationsHeader
|
||||||
<StepHeader
|
profiling={profiling}
|
||||||
stepId="obligations"
|
showGapAnalysis={showGapAnalysis}
|
||||||
title={stepInfo?.title || 'Pflichten-Management'}
|
onAutoProfiling={handleAutoProfiling}
|
||||||
description={stepInfo?.description || 'DSGVO & AI-Act Compliance-Pflichten verwalten'}
|
onToggleGap={() => setShowGapAnalysis(v => !v)}
|
||||||
explanation={stepInfo?.explanation || ''}
|
onAdd={() => setShowModal(true)}
|
||||||
tips={stepInfo?.tips || []}
|
/>
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<button
|
|
||||||
onClick={handleAutoProfiling}
|
|
||||||
disabled={profiling}
|
|
||||||
className="flex items-center gap-2 px-4 py-2 bg-white border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors text-sm disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
||||||
</svg>
|
|
||||||
{profiling ? 'Profiling...' : 'Auto-Profiling'}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowGapAnalysis(v => !v)}
|
|
||||||
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors text-sm ${
|
|
||||||
showGapAnalysis ? 'bg-purple-100 text-purple-700' : 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
||||||
</svg>
|
|
||||||
Gap-Analyse
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowModal(true)}
|
|
||||||
className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm"
|
|
||||||
>
|
|
||||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
|
||||||
</svg>
|
|
||||||
Pflicht hinzufuegen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</StepHeader>
|
|
||||||
|
|
||||||
{/* Error */}
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm text-amber-700">{error}</div>
|
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3 text-sm text-amber-700">{error}</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Applicable Regulations Info */}
|
<ApplicableRegsBanner regs={applicableRegs} />
|
||||||
{applicableRegs.length > 0 && (
|
|
||||||
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
|
||||||
<h3 className="text-sm font-semibold text-blue-900 mb-2">Anwendbare Regulierungen (aus Auto-Profiling)</h3>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{applicableRegs.map(reg => (
|
|
||||||
<span
|
|
||||||
key={reg.id}
|
|
||||||
className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-white border border-blue-300 text-blue-800"
|
|
||||||
>
|
|
||||||
<svg className="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
||||||
</svg>
|
|
||||||
{reg.name}
|
|
||||||
{reg.classification && <span className="text-blue-500">({reg.classification})</span>}
|
|
||||||
<span className="text-blue-400">{reg.obligation_count} Pflichten</span>
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* No Profile Warning */}
|
{!sdkState.companyProfile && <NoProfileWarning />}
|
||||||
{!sdkState.companyProfile && (
|
|
||||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-700">
|
|
||||||
Kein Unternehmensprofil vorhanden. Auto-Profiling verwendet Beispieldaten.{' '}
|
|
||||||
<a href="/sdk/company-profile" className="underline font-medium">Profil anlegen →</a>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Stats */}
|
<StatsGrid stats={stats} />
|
||||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
||||||
{[
|
|
||||||
{ label: 'Ausstehend', value: stats?.pending ?? 0, color: 'text-gray-600', border: 'border-gray-200' },
|
|
||||||
{ label: 'In Bearbeitung',value: stats?.in_progress ?? 0, color: 'text-blue-600', border: 'border-blue-200' },
|
|
||||||
{ label: 'Ueberfaellig', value: stats?.overdue ?? 0, color: 'text-red-600', border: 'border-red-200' },
|
|
||||||
{ label: 'Abgeschlossen', value: stats?.completed ?? 0, color: 'text-green-600', border: 'border-green-200'},
|
|
||||||
].map(s => (
|
|
||||||
<div key={s.label} className={`bg-white rounded-xl border ${s.border} p-5`}>
|
|
||||||
<div className={`text-xs ${s.color}`}>{s.label}</div>
|
|
||||||
<div className={`text-3xl font-bold mt-1 ${s.color}`}>{s.value}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Overdue alert */}
|
<OverdueAlert stats={stats} />
|
||||||
{(stats?.overdue ?? 0) > 0 && (
|
|
||||||
<div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-3">
|
|
||||||
<div className="w-9 h-9 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
|
|
||||||
<svg className="w-4 h-4 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 text-sm">Achtung: {stats?.overdue} ueberfaellige Pflicht(en)</h4>
|
|
||||||
<p className="text-xs text-red-600">Diese Pflichten erfordern sofortige Aufmerksamkeit.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Gap Analysis View */}
|
{showGapAnalysis && <GapAnalysisView />}
|
||||||
{showGapAnalysis && (
|
|
||||||
<GapAnalysisView />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Regulation Filter Chips */}
|
<FilterBar
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
filter={filter}
|
||||||
<span className="text-xs text-gray-500 mr-1">Regulation:</span>
|
regulationFilter={regulationFilter}
|
||||||
{REGULATION_CHIPS.map(r => (
|
searchQuery={searchQuery}
|
||||||
<button
|
onFilter={setFilter}
|
||||||
key={r.key}
|
onRegulationFilter={setRegulationFilter}
|
||||||
onClick={() => setRegulationFilter(r.key)}
|
onSearch={setSearchQuery}
|
||||||
className={`px-3 py-1 text-xs rounded-full transition-colors ${
|
/>
|
||||||
regulationFilter === r.key ? 'bg-purple-600 text-white' : 'bg-purple-50 text-purple-700 hover:bg-purple-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{r.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Search + Status Filter */}
|
|
||||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={e => setSearchQuery(e.target.value)}
|
|
||||||
placeholder="Suche nach Pflichten..."
|
|
||||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
|
|
||||||
/>
|
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
|
||||||
{['all', 'overdue', 'pending', 'in-progress', 'completed', 'critical'].map(f => (
|
|
||||||
<button
|
|
||||||
key={f}
|
|
||||||
onClick={() => setFilter(f)}
|
|
||||||
className={`px-3 py-1.5 text-xs rounded-full transition-colors ${
|
|
||||||
filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{f === 'all' ? 'Alle' : f === 'in-progress' ? 'In Bearbeitung' : f === 'overdue' ? 'Ueberfaellig' : f === 'pending' ? 'Ausstehend' : f === 'completed' ? 'Abgeschlossen' : 'Kritisch'}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Loading */}
|
|
||||||
{loading && <div className="text-center py-8 text-gray-500 text-sm">Lade Pflichten...</div>}
|
{loading && <div className="text-center py-8 text-gray-500 text-sm">Lade Pflichten...</div>}
|
||||||
|
|
||||||
{/* Obligations list */}
|
|
||||||
{!loading && (
|
{!loading && (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{filteredObligations.map(o => (
|
{filteredObligations.map(o => (
|
||||||
@@ -962,23 +316,7 @@ export default function ObligationsPage() {
|
|||||||
))}
|
))}
|
||||||
|
|
||||||
{filteredObligations.length === 0 && (
|
{filteredObligations.length === 0 && (
|
||||||
<div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
|
<EmptyList onCreate={() => setShowModal(true)} />
|
||||||
<div className="w-14 h-14 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
|
|
||||||
<svg className="w-7 h-7 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-base font-semibold text-gray-900">Keine Pflichten gefunden</h3>
|
|
||||||
<p className="mt-2 text-sm text-gray-500">
|
|
||||||
Klicken Sie auf "Pflicht hinzufuegen", um die erste Compliance-Pflicht zu erfassen.
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
onClick={() => setShowModal(true)}
|
|
||||||
className="mt-4 px-5 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700"
|
|
||||||
>
|
|
||||||
Erste Pflicht erstellen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user