f09e24d52c
Remove duplicate compliance and DSGVO admin pages that have been superseded by the unified SDK pipeline. Update navigation, sidebar, roles, and module registry to reflect the new structure. Add DSFA corpus API proxy and source-policy components. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
563 lines
21 KiB
TypeScript
563 lines
21 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
|
|
interface PIIRule {
|
|
id: string
|
|
name: string
|
|
rule_type: string
|
|
pattern: string
|
|
severity: string
|
|
is_active: boolean
|
|
created_at: string
|
|
updated_at: string
|
|
}
|
|
|
|
interface PIIMatch {
|
|
rule_id: string
|
|
rule_name: string
|
|
rule_type: string
|
|
severity: string
|
|
match: string
|
|
start_index: number
|
|
end_index: number
|
|
}
|
|
|
|
interface PIITestResult {
|
|
has_pii: boolean
|
|
matches: PIIMatch[]
|
|
should_block: boolean
|
|
block_level: string
|
|
}
|
|
|
|
interface PIIRulesTabProps {
|
|
apiBase: string
|
|
onUpdate?: () => void
|
|
}
|
|
|
|
const RULE_TYPES = [
|
|
{ value: 'regex', label: 'Regex (Muster)' },
|
|
{ value: 'keyword', label: 'Keyword (Stichwort)' },
|
|
]
|
|
|
|
const SEVERITIES = [
|
|
{ value: 'warn', label: 'Warnung', color: 'bg-amber-100 text-amber-700' },
|
|
{ value: 'redact', label: 'Schwärzen', color: 'bg-orange-100 text-orange-700' },
|
|
{ value: 'block', label: 'Blockieren', color: 'bg-red-100 text-red-700' },
|
|
]
|
|
|
|
export function PIIRulesTab({ apiBase, onUpdate }: PIIRulesTabProps) {
|
|
const [rules, setRules] = useState<PIIRule[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
// Test panel
|
|
const [testText, setTestText] = useState('')
|
|
const [testResult, setTestResult] = useState<PIITestResult | null>(null)
|
|
const [testing, setTesting] = useState(false)
|
|
|
|
// Edit modal
|
|
const [editingRule, setEditingRule] = useState<PIIRule | null>(null)
|
|
const [isNewRule, setIsNewRule] = useState(false)
|
|
const [saving, setSaving] = useState(false)
|
|
|
|
// New rule form
|
|
const [newRule, setNewRule] = useState({
|
|
name: '',
|
|
rule_type: 'regex',
|
|
pattern: '',
|
|
severity: 'block',
|
|
is_active: true,
|
|
})
|
|
|
|
useEffect(() => {
|
|
fetchRules()
|
|
}, [])
|
|
|
|
const fetchRules = async () => {
|
|
try {
|
|
setLoading(true)
|
|
const res = await fetch(`${apiBase}/v1/admin/pii-rules`)
|
|
if (!res.ok) throw new Error('Fehler beim Laden')
|
|
|
|
const data = await res.json()
|
|
setRules(data.rules || [])
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const createRule = async () => {
|
|
try {
|
|
setSaving(true)
|
|
const res = await fetch(`${apiBase}/v1/admin/pii-rules`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(newRule),
|
|
})
|
|
|
|
if (!res.ok) throw new Error('Fehler beim Erstellen')
|
|
|
|
setNewRule({
|
|
name: '',
|
|
rule_type: 'regex',
|
|
pattern: '',
|
|
severity: 'block',
|
|
is_active: true,
|
|
})
|
|
setIsNewRule(false)
|
|
fetchRules()
|
|
onUpdate?.()
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
const updateRule = async () => {
|
|
if (!editingRule) return
|
|
|
|
try {
|
|
setSaving(true)
|
|
const res = await fetch(`${apiBase}/v1/admin/pii-rules/${editingRule.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(editingRule),
|
|
})
|
|
|
|
if (!res.ok) throw new Error('Fehler beim Aktualisieren')
|
|
|
|
setEditingRule(null)
|
|
fetchRules()
|
|
onUpdate?.()
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
const deleteRule = async (id: string) => {
|
|
if (!confirm('Regel wirklich loeschen? Diese Aktion wird im Audit-Log protokolliert.')) return
|
|
|
|
try {
|
|
const res = await fetch(`${apiBase}/v1/admin/pii-rules/${id}`, {
|
|
method: 'DELETE',
|
|
})
|
|
|
|
if (!res.ok) throw new Error('Fehler beim Loeschen')
|
|
|
|
fetchRules()
|
|
onUpdate?.()
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
|
}
|
|
}
|
|
|
|
const toggleRuleStatus = async (rule: PIIRule) => {
|
|
try {
|
|
const res = await fetch(`${apiBase}/v1/admin/pii-rules/${rule.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ is_active: !rule.is_active }),
|
|
})
|
|
|
|
if (!res.ok) throw new Error('Fehler beim Aendern des Status')
|
|
|
|
fetchRules()
|
|
onUpdate?.()
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
|
}
|
|
}
|
|
|
|
const runTest = async () => {
|
|
if (!testText) return
|
|
|
|
try {
|
|
setTesting(true)
|
|
const res = await fetch(`${apiBase}/v1/admin/pii-rules/test`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ text: testText }),
|
|
})
|
|
|
|
if (!res.ok) throw new Error('Fehler beim Testen')
|
|
|
|
const data = await res.json()
|
|
setTestResult(data)
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
|
|
} finally {
|
|
setTesting(false)
|
|
}
|
|
}
|
|
|
|
const getSeverityBadge = (severity: string) => {
|
|
const config = SEVERITIES.find((s) => s.value === severity)
|
|
return (
|
|
<span className={`px-2 py-1 rounded text-xs font-medium ${config?.color || 'bg-slate-100 text-slate-700'}`}>
|
|
{config?.label || severity}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* Error Display */}
|
|
{error && (
|
|
<div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
|
|
<span>{error}</span>
|
|
<button onClick={() => setError(null)} className="text-red-500 hover:text-red-700">
|
|
×
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Test Panel */}
|
|
<div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
|
|
<h3 className="font-semibold text-slate-900 mb-4">PII-Test</h3>
|
|
<p className="text-sm text-slate-600 mb-4">
|
|
Testen Sie, ob ein Text personenbezogene Daten (PII) enthaelt.
|
|
</p>
|
|
|
|
<textarea
|
|
value={testText}
|
|
onChange={(e) => setTestText(e.target.value)}
|
|
placeholder="Geben Sie hier einen Text zum Testen ein...
|
|
|
|
Beispiel:
|
|
Kontaktieren Sie mich unter max.mustermann@example.com oder
|
|
rufen Sie mich an unter +49 170 1234567.
|
|
Meine IBAN ist DE89 3704 0044 0532 0130 00."
|
|
rows={6}
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-sm"
|
|
/>
|
|
|
|
<div className="flex justify-between items-center mt-4">
|
|
<button
|
|
onClick={() => {
|
|
setTestText('')
|
|
setTestResult(null)
|
|
}}
|
|
className="text-sm text-slate-500 hover:text-slate-700"
|
|
>
|
|
Zuruecksetzen
|
|
</button>
|
|
<button
|
|
onClick={runTest}
|
|
disabled={testing || !testText}
|
|
className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
{testing ? 'Teste...' : 'Testen'}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Test Results */}
|
|
{testResult && (
|
|
<div className={`mt-4 p-4 rounded-lg ${testResult.should_block ? 'bg-red-50 border border-red-200' : testResult.has_pii ? 'bg-amber-50 border border-amber-200' : 'bg-green-50 border border-green-200'}`}>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
{testResult.should_block ? (
|
|
<>
|
|
<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>
|
|
<span className="font-medium text-red-800">Blockiert - Kritische PII gefunden</span>
|
|
</>
|
|
) : testResult.has_pii ? (
|
|
<>
|
|
<svg className="w-5 h-5 text-amber-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>
|
|
<span className="font-medium text-amber-800">Warnung - PII gefunden ({testResult.matches.length} Treffer)</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<span className="font-medium text-green-800">Keine PII gefunden</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{testResult.matches.length > 0 && (
|
|
<div className="space-y-2">
|
|
{testResult.matches.map((match, idx) => (
|
|
<div key={idx} className="flex items-center gap-3 text-sm bg-white bg-opacity-50 rounded px-3 py-2">
|
|
{getSeverityBadge(match.severity)}
|
|
<span className="text-slate-700 font-medium">{match.rule_name}</span>
|
|
<code className="text-xs bg-slate-100 px-2 py-1 rounded">
|
|
{match.match.length > 30 ? match.match.substring(0, 30) + '...' : match.match}
|
|
</code>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Rules List Header */}
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="font-semibold text-slate-900">PII-Erkennungsregeln</h3>
|
|
<button
|
|
onClick={() => setIsNewRule(true)}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center gap-2"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Neue Regel
|
|
</button>
|
|
</div>
|
|
|
|
{/* Rules Table */}
|
|
{loading ? (
|
|
<div className="text-center py-12 text-slate-500">Lade Regeln...</div>
|
|
) : rules.length === 0 ? (
|
|
<div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
|
|
<svg className="w-12 h-12 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
|
</svg>
|
|
<h3 className="text-lg font-medium text-slate-700 mb-2">Keine Regeln vorhanden</h3>
|
|
<p className="text-sm text-slate-500">
|
|
Fuegen Sie PII-Erkennungsregeln hinzu.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
|
<table className="w-full">
|
|
<thead className="bg-slate-50 border-b border-slate-200">
|
|
<tr>
|
|
<th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Name</th>
|
|
<th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Typ</th>
|
|
<th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Muster</th>
|
|
<th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Severity</th>
|
|
<th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Status</th>
|
|
<th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{rules.map((rule) => (
|
|
<tr key={rule.id} className="hover:bg-slate-50">
|
|
<td className="px-4 py-3 text-sm font-medium text-slate-800">{rule.name}</td>
|
|
<td className="px-4 py-3">
|
|
<span className="text-xs bg-slate-100 text-slate-700 px-2 py-1 rounded">
|
|
{rule.rule_type}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<code className="text-xs bg-slate-100 px-2 py-1 rounded max-w-xs truncate block">
|
|
{rule.pattern.length > 40 ? rule.pattern.substring(0, 40) + '...' : rule.pattern}
|
|
</code>
|
|
</td>
|
|
<td className="px-4 py-3">{getSeverityBadge(rule.severity)}</td>
|
|
<td className="px-4 py-3">
|
|
<button
|
|
onClick={() => toggleRuleStatus(rule)}
|
|
className={`text-xs px-2 py-1 rounded ${
|
|
rule.is_active
|
|
? 'bg-green-100 text-green-700'
|
|
: 'bg-red-100 text-red-700'
|
|
}`}
|
|
>
|
|
{rule.is_active ? 'Aktiv' : 'Inaktiv'}
|
|
</button>
|
|
</td>
|
|
<td className="px-4 py-3 text-right">
|
|
<button
|
|
onClick={() => setEditingRule(rule)}
|
|
className="text-purple-600 hover:text-purple-700 mr-3"
|
|
>
|
|
Bearbeiten
|
|
</button>
|
|
<button
|
|
onClick={() => deleteRule(rule.id)}
|
|
className="text-red-600 hover:text-red-700"
|
|
>
|
|
Loeschen
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
|
|
{/* New Rule Modal */}
|
|
{isNewRule && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl p-6 w-full max-w-lg mx-4">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">Neue PII-Regel</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Name *</label>
|
|
<input
|
|
type="text"
|
|
value={newRule.name}
|
|
onChange={(e) => setNewRule({ ...newRule, name: e.target.value })}
|
|
placeholder="z.B. Deutsche Telefonnummern"
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Typ *</label>
|
|
<select
|
|
value={newRule.rule_type}
|
|
onChange={(e) => setNewRule({ ...newRule, rule_type: e.target.value })}
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
>
|
|
{RULE_TYPES.map((t) => (
|
|
<option key={t.value} value={t.value}>
|
|
{t.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Muster *</label>
|
|
<textarea
|
|
value={newRule.pattern}
|
|
onChange={(e) => setNewRule({ ...newRule, pattern: e.target.value })}
|
|
placeholder={newRule.rule_type === 'regex' ? 'Regex-Muster, z.B. (?:\\+49|0)[\\s.-]?\\d{2,4}...' : 'Keywords getrennt durch Komma, z.B. password,secret,api_key'}
|
|
rows={3}
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Severity *</label>
|
|
<select
|
|
value={newRule.severity}
|
|
onChange={(e) => setNewRule({ ...newRule, severity: e.target.value })}
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
>
|
|
{SEVERITIES.map((s) => (
|
|
<option key={s.value} value={s.value}>
|
|
{s.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 mt-6 pt-4 border-t border-slate-100">
|
|
<button
|
|
onClick={() => setIsNewRule(false)}
|
|
className="px-4 py-2 text-slate-600 hover:text-slate-700"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={createRule}
|
|
disabled={saving || !newRule.name || !newRule.pattern}
|
|
className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
{saving ? 'Speichere...' : 'Erstellen'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Edit Rule Modal */}
|
|
{editingRule && (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-xl p-6 w-full max-w-lg mx-4">
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-4">PII-Regel bearbeiten</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Name *</label>
|
|
<input
|
|
type="text"
|
|
value={editingRule.name}
|
|
onChange={(e) => setEditingRule({ ...editingRule, name: e.target.value })}
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Typ</label>
|
|
<select
|
|
value={editingRule.rule_type}
|
|
onChange={(e) => setEditingRule({ ...editingRule, rule_type: e.target.value })}
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
>
|
|
{RULE_TYPES.map((t) => (
|
|
<option key={t.value} value={t.value}>
|
|
{t.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Muster *</label>
|
|
<textarea
|
|
value={editingRule.pattern}
|
|
onChange={(e) => setEditingRule({ ...editingRule, pattern: e.target.value })}
|
|
rows={3}
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">Severity</label>
|
|
<select
|
|
value={editingRule.severity}
|
|
onChange={(e) => setEditingRule({ ...editingRule, severity: e.target.value })}
|
|
className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
>
|
|
{SEVERITIES.map((s) => (
|
|
<option key={s.value} value={s.value}>
|
|
{s.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
id="edit_is_active"
|
|
checked={editingRule.is_active}
|
|
onChange={(e) => setEditingRule({ ...editingRule, is_active: e.target.checked })}
|
|
className="w-4 h-4 text-purple-600"
|
|
/>
|
|
<label htmlFor="edit_is_active" className="text-sm text-slate-700">
|
|
Aktiv
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-3 mt-6 pt-4 border-t border-slate-100">
|
|
<button
|
|
onClick={() => setEditingRule(null)}
|
|
className="px-4 py-2 text-slate-600 hover:text-slate-700"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
onClick={updateRule}
|
|
disabled={saving}
|
|
className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
|
>
|
|
{saving ? 'Speichere...' : 'Speichern'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|