Initial commit: breakpilot-compliance - Compliance SDK Platform

Services: Admin-Compliance, Backend-Compliance,
AI-Compliance-SDK, Consent-SDK, Developer-Portal,
PCA-Platform, DSMS

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-compliance/components/sdk/source-policy/PIIRulesTab.tsx

@@ -0,0 +1,562 @@
+'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">
+            &times;
+          </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>
+  )
+}