37166c966f
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Failing after 33s
CI / test-python-backend-compliance (push) Successful in 32s
CI / test-python-document-crawler (push) Successful in 18s
CI / test-python-dsms-gateway (push) Successful in 16s
- Remove 5 unused UCCA routes (wizard, stats, dsb-pool) from Go main.go - Delete 64 deprecated Go handlers (DSGVO, Vendors, Incidents, Drafting) - Delete legacy proxy routes (dsgvo, vendors) - Add LLM Audit Dashboard (3 tabs: Log, Nutzung, Compliance) with export - Add RBAC Admin UI (5 tabs: Mandanten, Namespaces, Rollen, Benutzer, LLM-Policies) - Add proxy routes for audit-llm and rbac to Go backend - Add Workshop, Portfolio, Roadmap proxy routes and frontends - Add LLM Audit + RBAC Admin to SDKSidebar Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1024 lines
47 KiB
TypeScript
1024 lines
47 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect, useCallback } from 'react'
|
|
import { useSDK } from '@/lib/sdk'
|
|
|
|
// =============================================================================
|
|
// TYPES
|
|
// =============================================================================
|
|
|
|
interface Tenant {
|
|
id: string
|
|
name: string
|
|
slug: string
|
|
status: string
|
|
user_limit: number
|
|
llm_quota: number
|
|
settings: Record<string, unknown>
|
|
created_at: string
|
|
updated_at: string
|
|
}
|
|
|
|
interface Namespace {
|
|
id: string
|
|
tenant_id: string
|
|
name: string
|
|
slug: string
|
|
isolation_level: string
|
|
classification: string
|
|
created_at: string
|
|
}
|
|
|
|
interface Role {
|
|
id: string
|
|
name: string
|
|
description: string
|
|
is_system: boolean
|
|
permissions: string[]
|
|
created_at: string
|
|
}
|
|
|
|
interface UserRole {
|
|
id: string
|
|
user_id: string
|
|
role_id: string
|
|
role_name: string
|
|
namespace_id: string | null
|
|
expires_at: string | null
|
|
created_at: string
|
|
}
|
|
|
|
interface LLMPolicy {
|
|
id: string
|
|
name: string
|
|
description: string
|
|
tenant_id: string
|
|
namespace_id: string | null
|
|
allowed_models: string[]
|
|
blocked_models: string[]
|
|
rate_limit_rpm: number
|
|
rate_limit_tpd: number
|
|
pii_detection_required: boolean
|
|
pii_redaction_required: boolean
|
|
max_tokens_per_request: number
|
|
is_active: boolean
|
|
created_at: string
|
|
updated_at: string
|
|
}
|
|
|
|
type TabId = 'tenants' | 'namespaces' | 'roles' | 'users' | 'policies'
|
|
|
|
// =============================================================================
|
|
// API
|
|
// =============================================================================
|
|
|
|
const API = '/api/sdk/v1/rbac'
|
|
|
|
async function apiFetch<T>(path: string, opts?: RequestInit): Promise<T> {
|
|
const res = await fetch(`${API}/${path}`, {
|
|
headers: { 'Content-Type': 'application/json' },
|
|
...opts,
|
|
})
|
|
if (!res.ok) {
|
|
const err = await res.text()
|
|
throw new Error(`HTTP ${res.status}: ${err}`)
|
|
}
|
|
return res.json()
|
|
}
|
|
|
|
function formatDate(iso: string): string {
|
|
return new Date(iso).toLocaleString('de-DE', {
|
|
day: '2-digit', month: '2-digit', year: 'numeric',
|
|
})
|
|
}
|
|
|
|
// =============================================================================
|
|
// MAIN PAGE
|
|
// =============================================================================
|
|
|
|
export default function RBACPage() {
|
|
const { state } = useSDK()
|
|
const [activeTab, setActiveTab] = useState<TabId>('tenants')
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [success, setSuccess] = useState<string | null>(null)
|
|
|
|
// Data
|
|
const [tenants, setTenants] = useState<Tenant[]>([])
|
|
const [selectedTenantId, setSelectedTenantId] = useState<string | null>(null)
|
|
const [namespaces, setNamespaces] = useState<Namespace[]>([])
|
|
const [roles, setRoles] = useState<Role[]>([])
|
|
const [userRoles, setUserRoles] = useState<UserRole[]>([])
|
|
const [policies, setPolicies] = useState<LLMPolicy[]>([])
|
|
|
|
// Modals
|
|
const [showTenantModal, setShowTenantModal] = useState(false)
|
|
const [showNamespaceModal, setShowNamespaceModal] = useState(false)
|
|
const [showRoleModal, setShowRoleModal] = useState(false)
|
|
const [showUserRoleModal, setShowUserRoleModal] = useState(false)
|
|
const [showPolicyModal, setShowPolicyModal] = useState(false)
|
|
const [editingPolicy, setEditingPolicy] = useState<LLMPolicy | null>(null)
|
|
|
|
// ─── Loaders ─────────────────────────────────────────────────────────
|
|
|
|
const loadTenants = useCallback(async () => {
|
|
setLoading(true); setError(null)
|
|
try {
|
|
const data = await apiFetch<Tenant[] | { tenants: Tenant[] }>('tenants')
|
|
setTenants(Array.isArray(data) ? data : data.tenants || [])
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
finally { setLoading(false) }
|
|
}, [])
|
|
|
|
const loadNamespaces = useCallback(async (tenantId: string) => {
|
|
setLoading(true); setError(null)
|
|
try {
|
|
const data = await apiFetch<Namespace[] | { namespaces: Namespace[] }>(`tenants/${tenantId}/namespaces`)
|
|
setNamespaces(Array.isArray(data) ? data : data.namespaces || [])
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
finally { setLoading(false) }
|
|
}, [])
|
|
|
|
const loadRoles = useCallback(async () => {
|
|
setLoading(true); setError(null)
|
|
try {
|
|
const data = await apiFetch<Role[] | { roles: Role[] }>('roles')
|
|
setRoles(Array.isArray(data) ? data : data.roles || [])
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
finally { setLoading(false) }
|
|
}, [])
|
|
|
|
const loadUserRoles = useCallback(async () => {
|
|
setLoading(true); setError(null)
|
|
try {
|
|
// Load for a specific user or all — the endpoint expects a userId
|
|
// We'll load the current user's roles as default
|
|
const data = await apiFetch<UserRole[] | { roles: UserRole[] }>('user-roles/00000000-0000-0000-0000-000000000001')
|
|
setUserRoles(Array.isArray(data) ? data : data.roles || [])
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
finally { setLoading(false) }
|
|
}, [])
|
|
|
|
const loadPolicies = useCallback(async () => {
|
|
setLoading(true); setError(null)
|
|
try {
|
|
const data = await apiFetch<LLMPolicy[] | { policies: LLMPolicy[] }>('llm/policies')
|
|
setPolicies(Array.isArray(data) ? data : data.policies || [])
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
finally { setLoading(false) }
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'tenants') loadTenants()
|
|
else if (activeTab === 'namespaces') { loadTenants(); if (selectedTenantId) loadNamespaces(selectedTenantId) }
|
|
else if (activeTab === 'roles') loadRoles()
|
|
else if (activeTab === 'users') loadUserRoles()
|
|
else if (activeTab === 'policies') loadPolicies()
|
|
}, [activeTab, loadTenants, loadNamespaces, loadRoles, loadUserRoles, loadPolicies, selectedTenantId])
|
|
|
|
const showSuccessMsg = (msg: string) => {
|
|
setSuccess(msg)
|
|
setTimeout(() => setSuccess(null), 3000)
|
|
}
|
|
|
|
// ─── Actions ─────────────────────────────────────────────────────────
|
|
|
|
const deleteLLMPolicy = async (id: string) => {
|
|
if (!confirm('Policy wirklich loeschen?')) return
|
|
try {
|
|
await apiFetch(`llm/policies/${id}`, { method: 'DELETE' })
|
|
showSuccessMsg('Policy geloescht')
|
|
loadPolicies()
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
}
|
|
|
|
const togglePolicyActive = async (policy: LLMPolicy) => {
|
|
try {
|
|
await apiFetch(`llm/policies/${policy.id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify({ ...policy, is_active: !policy.is_active }),
|
|
})
|
|
loadPolicies()
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
}
|
|
|
|
const revokeUserRole = async (userId: string, roleId: string) => {
|
|
if (!confirm('Rolle wirklich entziehen?')) return
|
|
try {
|
|
await apiFetch(`user-roles/${userId}/${roleId}`, { method: 'DELETE' })
|
|
showSuccessMsg('Rolle entzogen')
|
|
loadUserRoles()
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
}
|
|
|
|
// ─── Tabs ────────────────────────────────────────────────────────────
|
|
|
|
const tabs: { id: TabId; label: string }[] = [
|
|
{ id: 'tenants', label: 'Mandanten' },
|
|
{ id: 'namespaces', label: 'Namespaces' },
|
|
{ id: 'roles', label: 'Rollen' },
|
|
{ id: 'users', label: 'Benutzer' },
|
|
{ id: 'policies', label: 'LLM-Policies' },
|
|
]
|
|
|
|
return (
|
|
<div className="p-6 max-w-7xl mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900">RBAC Administration</h1>
|
|
<p className="text-gray-500 mt-1">Mandanten, Rollen, Berechtigungen und LLM-Policies verwalten</p>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex gap-1 bg-gray-100 rounded-lg p-1 mb-6 overflow-x-auto">
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`px-4 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap ${
|
|
activeTab === tab.id
|
|
? 'bg-white text-purple-700 shadow-sm'
|
|
: 'text-gray-600 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{error && <div className="mb-4 p-3 bg-red-50 text-red-700 rounded-lg text-sm">{error}</div>}
|
|
{success && <div className="mb-4 p-3 bg-green-50 text-green-700 rounded-lg text-sm">{success}</div>}
|
|
|
|
{loading && (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="w-8 h-8 border-4 border-purple-200 border-t-purple-600 rounded-full animate-spin" />
|
|
</div>
|
|
)}
|
|
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
{/* TENANTS TAB */}
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
{!loading && activeTab === 'tenants' && (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-lg font-semibold">{tenants.length} Mandanten</h2>
|
|
<button
|
|
onClick={() => setShowTenantModal(true)}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
|
|
>
|
|
+ Mandant anlegen
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{tenants.map(t => (
|
|
<div key={t.id} className="bg-white rounded-xl border border-gray-200 p-5">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900">{t.name}</h3>
|
|
<span className="text-xs font-mono text-gray-400">{t.slug}</span>
|
|
</div>
|
|
<span className={`px-2 py-0.5 rounded text-xs font-medium ${
|
|
t.status === 'active' ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500'
|
|
}`}>
|
|
{t.status}
|
|
</span>
|
|
</div>
|
|
<div className="space-y-1 text-sm text-gray-600">
|
|
<div className="flex justify-between">
|
|
<span>User-Limit</span>
|
|
<span className="font-mono">{t.user_limit || 'unbegrenzt'}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>LLM-Quota</span>
|
|
<span className="font-mono">{t.llm_quota || 'unbegrenzt'}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>Erstellt</span>
|
|
<span>{formatDate(t.created_at)}</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => { setSelectedTenantId(t.id); setActiveTab('namespaces') }}
|
|
className="mt-3 w-full text-center text-sm text-purple-600 hover:text-purple-700 py-1"
|
|
>
|
|
Namespaces anzeigen
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{tenants.length === 0 && (
|
|
<div className="text-center py-12 text-gray-400">Keine Mandanten vorhanden</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
{/* NAMESPACES TAB */}
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
{!loading && activeTab === 'namespaces' && (
|
|
<div>
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<select
|
|
value={selectedTenantId || ''}
|
|
onChange={e => { setSelectedTenantId(e.target.value); if (e.target.value) loadNamespaces(e.target.value) }}
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
|
|
>
|
|
<option value="">Mandant waehlen...</option>
|
|
{tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
|
|
</select>
|
|
{selectedTenantId && (
|
|
<button
|
|
onClick={() => setShowNamespaceModal(true)}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
|
|
>
|
|
+ Namespace
|
|
</button>
|
|
)}
|
|
</div>
|
|
{!selectedTenantId ? (
|
|
<div className="text-center py-12 text-gray-400">Bitte einen Mandanten waehlen</div>
|
|
) : (
|
|
<div className="overflow-x-auto bg-white rounded-xl border border-gray-200">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 bg-gray-50">
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Name</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Slug</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Isolation</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Klassifikation</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Erstellt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{namespaces.length === 0 ? (
|
|
<tr><td colSpan={5} className="text-center py-8 text-gray-400">Keine Namespaces</td></tr>
|
|
) : namespaces.map(ns => (
|
|
<tr key={ns.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="px-4 py-3 font-medium">{ns.name}</td>
|
|
<td className="px-4 py-3 font-mono text-xs text-gray-500">{ns.slug}</td>
|
|
<td className="px-4 py-3">
|
|
<span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-xs">{ns.isolation_level}</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded text-xs">{ns.classification}</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-gray-500">{formatDate(ns.created_at)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
{/* ROLES TAB */}
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
{!loading && activeTab === 'roles' && (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-lg font-semibold">{roles.length} Rollen</h2>
|
|
<button
|
|
onClick={() => setShowRoleModal(true)}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
|
|
>
|
|
+ Rolle erstellen
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto bg-white rounded-xl border border-gray-200">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 bg-gray-50">
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Name</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Beschreibung</th>
|
|
<th className="text-center px-4 py-3 font-medium text-gray-600">Typ</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Berechtigungen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{roles.length === 0 ? (
|
|
<tr><td colSpan={4} className="text-center py-8 text-gray-400">Keine Rollen</td></tr>
|
|
) : roles.map(role => (
|
|
<tr key={role.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="px-4 py-3 font-medium">{role.name}</td>
|
|
<td className="px-4 py-3 text-gray-500 max-w-xs truncate">{role.description}</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<span className={`px-2 py-0.5 rounded text-xs font-medium ${
|
|
role.is_system ? 'bg-purple-50 text-purple-700' : 'bg-gray-100 text-gray-600'
|
|
}`}>
|
|
{role.is_system ? 'System' : 'Custom'}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex flex-wrap gap-1">
|
|
{(role.permissions || []).slice(0, 4).map(p => (
|
|
<span key={p} className="px-1.5 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{p}</span>
|
|
))}
|
|
{(role.permissions || []).length > 4 && (
|
|
<span className="text-xs text-gray-400">+{role.permissions.length - 4}</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
{/* USERS TAB */}
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
{!loading && activeTab === 'users' && (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-lg font-semibold">Benutzer-Rollen</h2>
|
|
<button
|
|
onClick={() => setShowUserRoleModal(true)}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
|
|
>
|
|
+ Rolle zuweisen
|
|
</button>
|
|
</div>
|
|
|
|
{/* User ID lookup */}
|
|
<div className="mb-4">
|
|
<UserRoleLookup onLoad={(userId) => {
|
|
setLoading(true)
|
|
apiFetch<UserRole[] | { roles: UserRole[] }>(`user-roles/${userId}`)
|
|
.then(data => setUserRoles(Array.isArray(data) ? data : data.roles || []))
|
|
.catch(e => setError(e instanceof Error ? e.message : 'Fehler'))
|
|
.finally(() => setLoading(false))
|
|
}} />
|
|
</div>
|
|
|
|
<div className="overflow-x-auto bg-white rounded-xl border border-gray-200">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-200 bg-gray-50">
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">User-ID</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Rolle</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Namespace</th>
|
|
<th className="text-left px-4 py-3 font-medium text-gray-600">Ablauf</th>
|
|
<th className="text-center px-4 py-3 font-medium text-gray-600">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{userRoles.length === 0 ? (
|
|
<tr><td colSpan={5} className="text-center py-8 text-gray-400">Keine Rollen zugewiesen</td></tr>
|
|
) : userRoles.map(ur => (
|
|
<tr key={ur.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
<td className="px-4 py-3 font-mono text-xs">{ur.user_id}</td>
|
|
<td className="px-4 py-3">
|
|
<span className="px-2 py-0.5 bg-purple-50 text-purple-700 rounded text-xs font-medium">
|
|
{ur.role_name || ur.role_id}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 font-mono text-xs text-gray-500">
|
|
{ur.namespace_id || 'Global'}
|
|
</td>
|
|
<td className="px-4 py-3 text-gray-500">
|
|
{ur.expires_at ? formatDate(ur.expires_at) : 'Unbegrenzt'}
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<button
|
|
onClick={() => revokeUserRole(ur.user_id, ur.role_id)}
|
|
className="text-red-600 hover:text-red-700 text-xs"
|
|
>
|
|
Entziehen
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
{/* LLM POLICIES TAB */}
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
{!loading && activeTab === 'policies' && (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-lg font-semibold">{policies.length} LLM-Policies</h2>
|
|
<button
|
|
onClick={() => { setEditingPolicy(null); setShowPolicyModal(true) }}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
|
|
>
|
|
+ Policy erstellen
|
|
</button>
|
|
</div>
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{policies.map(policy => (
|
|
<div key={policy.id} className={`bg-white rounded-xl border p-5 ${
|
|
policy.is_active ? 'border-gray-200' : 'border-gray-100 opacity-60'
|
|
}`}>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900">{policy.name}</h3>
|
|
<p className="text-xs text-gray-500 mt-0.5">{policy.description}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => togglePolicyActive(policy)}
|
|
className={`px-2 py-0.5 rounded text-xs font-medium ${
|
|
policy.is_active ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500'
|
|
}`}
|
|
>
|
|
{policy.is_active ? 'Aktiv' : 'Inaktiv'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-2 text-sm">
|
|
{(policy.allowed_models || []).length > 0 && (
|
|
<div>
|
|
<span className="text-gray-500">Erlaubte Models: </span>
|
|
<div className="flex flex-wrap gap-1 mt-1">
|
|
{policy.allowed_models.map(m => (
|
|
<span key={m} className="px-1.5 py-0.5 bg-blue-50 text-blue-700 rounded text-xs">{m}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between text-gray-600">
|
|
<span>Rate-Limit</span>
|
|
<span className="font-mono text-xs">{policy.rate_limit_rpm} req/min, {policy.rate_limit_tpd} tok/tag</span>
|
|
</div>
|
|
<div className="flex justify-between text-gray-600">
|
|
<span>Max Tokens/Request</span>
|
|
<span className="font-mono text-xs">{policy.max_tokens_per_request}</span>
|
|
</div>
|
|
<div className="flex gap-3">
|
|
{policy.pii_detection_required && (
|
|
<span className="px-2 py-0.5 bg-amber-50 text-amber-700 rounded text-xs">PII-Erkennung</span>
|
|
)}
|
|
{policy.pii_redaction_required && (
|
|
<span className="px-2 py-0.5 bg-red-50 text-red-700 rounded text-xs">PII-Redaktion</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 mt-3 pt-3 border-t border-gray-100">
|
|
<button
|
|
onClick={() => { setEditingPolicy(policy); setShowPolicyModal(true) }}
|
|
className="text-sm text-purple-600 hover:text-purple-700"
|
|
>
|
|
Bearbeiten
|
|
</button>
|
|
<button
|
|
onClick={() => deleteLLMPolicy(policy.id)}
|
|
className="text-sm text-red-600 hover:text-red-700"
|
|
>
|
|
Loeschen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{policies.length === 0 && (
|
|
<div className="text-center py-12 text-gray-400">Keine LLM-Policies vorhanden</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
{/* MODALS */}
|
|
{/* ══════════════════════════════════════════════════════════════════ */}
|
|
|
|
{showTenantModal && (
|
|
<CreateTenantModal
|
|
onClose={() => setShowTenantModal(false)}
|
|
onCreated={() => { setShowTenantModal(false); showSuccessMsg('Mandant erstellt'); loadTenants() }}
|
|
/>
|
|
)}
|
|
{showNamespaceModal && selectedTenantId && (
|
|
<CreateNamespaceModal
|
|
tenantId={selectedTenantId}
|
|
onClose={() => setShowNamespaceModal(false)}
|
|
onCreated={() => { setShowNamespaceModal(false); showSuccessMsg('Namespace erstellt'); loadNamespaces(selectedTenantId) }}
|
|
/>
|
|
)}
|
|
{showRoleModal && (
|
|
<CreateRoleModal
|
|
onClose={() => setShowRoleModal(false)}
|
|
onCreated={() => { setShowRoleModal(false); showSuccessMsg('Rolle erstellt'); loadRoles() }}
|
|
/>
|
|
)}
|
|
{showUserRoleModal && (
|
|
<AssignRoleModal
|
|
onClose={() => setShowUserRoleModal(false)}
|
|
onAssigned={() => { setShowUserRoleModal(false); showSuccessMsg('Rolle zugewiesen'); loadUserRoles() }}
|
|
/>
|
|
)}
|
|
{showPolicyModal && (
|
|
<PolicyModal
|
|
existing={editingPolicy}
|
|
onClose={() => { setShowPolicyModal(false); setEditingPolicy(null) }}
|
|
onSaved={() => { setShowPolicyModal(false); setEditingPolicy(null); showSuccessMsg('Policy gespeichert'); loadPolicies() }}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// USER ROLE LOOKUP
|
|
// =============================================================================
|
|
|
|
function UserRoleLookup({ onLoad }: { onLoad: (userId: string) => void }) {
|
|
const [userId, setUserId] = useState('00000000-0000-0000-0000-000000000001')
|
|
return (
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={userId}
|
|
onChange={e => setUserId(e.target.value)}
|
|
placeholder="User-ID eingeben..."
|
|
className="border border-gray-300 rounded-lg px-3 py-2 text-sm flex-1 font-mono"
|
|
/>
|
|
<button
|
|
onClick={() => onLoad(userId)}
|
|
className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-sm"
|
|
>
|
|
Laden
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// MODAL BASE
|
|
// =============================================================================
|
|
|
|
function ModalBase({ title, onClose, children }: { title: string; onClose: () => void; children: React.ReactNode }) {
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
|
|
<div className="flex items-center justify-between p-5 border-b border-gray-200">
|
|
<h3 className="text-lg font-semibold">{title}</h3>
|
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">×</button>
|
|
</div>
|
|
<div className="p-5">{children}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// CREATE TENANT MODAL
|
|
// =============================================================================
|
|
|
|
function CreateTenantModal({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {
|
|
const [form, setForm] = useState({ name: '', slug: '', user_limit: 100, llm_quota: 100000 })
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const handleSubmit = async () => {
|
|
if (!form.name || !form.slug) { setError('Name und Slug sind Pflichtfelder'); return }
|
|
setSaving(true)
|
|
try {
|
|
await apiFetch('tenants', { method: 'POST', body: JSON.stringify(form) })
|
|
onCreated()
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
finally { setSaving(false) }
|
|
}
|
|
|
|
return (
|
|
<ModalBase title="Mandant anlegen" onClose={onClose}>
|
|
{error && <div className="mb-3 p-2 bg-red-50 text-red-700 rounded text-sm">{error}</div>}
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
|
|
<input type="text" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Slug</label>
|
|
<input type="text" value={form.slug} onChange={e => setForm(f => ({ ...f, slug: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono" />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">User-Limit</label>
|
|
<input type="number" value={form.user_limit} onChange={e => setForm(f => ({ ...f, user_limit: +e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">LLM-Quota</label>
|
|
<input type="number" value={form.llm_quota} onChange={e => setForm(f => ({ ...f, llm_quota: +e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-5">
|
|
<button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Abbrechen</button>
|
|
<button onClick={handleSubmit} disabled={saving}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 disabled:opacity-50">
|
|
{saving ? 'Speichern...' : 'Erstellen'}
|
|
</button>
|
|
</div>
|
|
</ModalBase>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// CREATE NAMESPACE MODAL
|
|
// =============================================================================
|
|
|
|
function CreateNamespaceModal({ tenantId, onClose, onCreated }: { tenantId: string; onClose: () => void; onCreated: () => void }) {
|
|
const [form, setForm] = useState({ name: '', slug: '', isolation_level: 'shared', classification: 'internal' })
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const handleSubmit = async () => {
|
|
if (!form.name) { setError('Name ist Pflichtfeld'); return }
|
|
setSaving(true)
|
|
try {
|
|
await apiFetch(`tenants/${tenantId}/namespaces`, { method: 'POST', body: JSON.stringify(form) })
|
|
onCreated()
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
finally { setSaving(false) }
|
|
}
|
|
|
|
return (
|
|
<ModalBase title="Namespace erstellen" onClose={onClose}>
|
|
{error && <div className="mb-3 p-2 bg-red-50 text-red-700 rounded text-sm">{error}</div>}
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
|
|
<input type="text" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Slug</label>
|
|
<input type="text" value={form.slug} onChange={e => setForm(f => ({ ...f, slug: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Isolation</label>
|
|
<select value={form.isolation_level} onChange={e => setForm(f => ({ ...f, isolation_level: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
|
|
<option value="shared">Shared</option>
|
|
<option value="isolated">Isolated</option>
|
|
<option value="strict">Strict</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Klassifikation</label>
|
|
<select value={form.classification} onChange={e => setForm(f => ({ ...f, classification: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
|
|
<option value="public">Public</option>
|
|
<option value="internal">Internal</option>
|
|
<option value="confidential">Confidential</option>
|
|
<option value="restricted">Restricted</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-5">
|
|
<button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Abbrechen</button>
|
|
<button onClick={handleSubmit} disabled={saving}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 disabled:opacity-50">
|
|
{saving ? 'Speichern...' : 'Erstellen'}
|
|
</button>
|
|
</div>
|
|
</ModalBase>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// CREATE ROLE MODAL
|
|
// =============================================================================
|
|
|
|
function CreateRoleModal({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {
|
|
const [form, setForm] = useState({ name: '', description: '', permissions: '' })
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const handleSubmit = async () => {
|
|
if (!form.name) { setError('Name ist Pflichtfeld'); return }
|
|
setSaving(true)
|
|
try {
|
|
await apiFetch('roles', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
name: form.name,
|
|
description: form.description,
|
|
permissions: form.permissions.split(',').map(s => s.trim()).filter(Boolean),
|
|
}),
|
|
})
|
|
onCreated()
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
finally { setSaving(false) }
|
|
}
|
|
|
|
return (
|
|
<ModalBase title="Rolle erstellen" onClose={onClose}>
|
|
{error && <div className="mb-3 p-2 bg-red-50 text-red-700 rounded text-sm">{error}</div>}
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
|
|
<input type="text" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
|
|
<input type="text" value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Berechtigungen (kommagetrennt)</label>
|
|
<textarea value={form.permissions} onChange={e => setForm(f => ({ ...f, permissions: e.target.value }))}
|
|
placeholder="llm:read, llm:write, audit:read"
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono h-20" />
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-5">
|
|
<button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Abbrechen</button>
|
|
<button onClick={handleSubmit} disabled={saving}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 disabled:opacity-50">
|
|
{saving ? 'Speichern...' : 'Erstellen'}
|
|
</button>
|
|
</div>
|
|
</ModalBase>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// ASSIGN ROLE MODAL
|
|
// =============================================================================
|
|
|
|
function AssignRoleModal({ onClose, onAssigned }: { onClose: () => void; onAssigned: () => void }) {
|
|
const [form, setForm] = useState({ user_id: '', role_id: '', namespace_id: '', expires_at: '' })
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const handleSubmit = async () => {
|
|
if (!form.user_id || !form.role_id) { setError('User-ID und Rolle sind Pflichtfelder'); return }
|
|
setSaving(true)
|
|
try {
|
|
await apiFetch('user-roles', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
user_id: form.user_id,
|
|
role_id: form.role_id,
|
|
namespace_id: form.namespace_id || null,
|
|
expires_at: form.expires_at || null,
|
|
}),
|
|
})
|
|
onAssigned()
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
finally { setSaving(false) }
|
|
}
|
|
|
|
return (
|
|
<ModalBase title="Rolle zuweisen" onClose={onClose}>
|
|
{error && <div className="mb-3 p-2 bg-red-50 text-red-700 rounded text-sm">{error}</div>}
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">User-ID</label>
|
|
<input type="text" value={form.user_id} onChange={e => setForm(f => ({ ...f, user_id: e.target.value }))}
|
|
placeholder="UUID" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Rollen-ID</label>
|
|
<input type="text" value={form.role_id} onChange={e => setForm(f => ({ ...f, role_id: e.target.value }))}
|
|
placeholder="UUID" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Namespace-ID (optional)</label>
|
|
<input type="text" value={form.namespace_id} onChange={e => setForm(f => ({ ...f, namespace_id: e.target.value }))}
|
|
placeholder="Leer = Global" className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Ablaufdatum (optional)</label>
|
|
<input type="date" value={form.expires_at} onChange={e => setForm(f => ({ ...f, expires_at: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-5">
|
|
<button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Abbrechen</button>
|
|
<button onClick={handleSubmit} disabled={saving}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 disabled:opacity-50">
|
|
{saving ? 'Speichern...' : 'Zuweisen'}
|
|
</button>
|
|
</div>
|
|
</ModalBase>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// POLICY MODAL (Create / Edit)
|
|
// =============================================================================
|
|
|
|
function PolicyModal({ existing, onClose, onSaved }: { existing: LLMPolicy | null; onClose: () => void; onSaved: () => void }) {
|
|
const [form, setForm] = useState({
|
|
name: existing?.name || '',
|
|
description: existing?.description || '',
|
|
allowed_models: (existing?.allowed_models || []).join(', '),
|
|
blocked_models: (existing?.blocked_models || []).join(', '),
|
|
rate_limit_rpm: existing?.rate_limit_rpm ?? 60,
|
|
rate_limit_tpd: existing?.rate_limit_tpd ?? 1000000,
|
|
max_tokens_per_request: existing?.max_tokens_per_request ?? 4096,
|
|
pii_detection_required: existing?.pii_detection_required ?? true,
|
|
pii_redaction_required: existing?.pii_redaction_required ?? false,
|
|
is_active: existing?.is_active ?? true,
|
|
})
|
|
const [saving, setSaving] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const handleSubmit = async () => {
|
|
if (!form.name) { setError('Name ist Pflichtfeld'); return }
|
|
setSaving(true)
|
|
try {
|
|
const body = {
|
|
...form,
|
|
allowed_models: form.allowed_models.split(',').map(s => s.trim()).filter(Boolean),
|
|
blocked_models: form.blocked_models.split(',').map(s => s.trim()).filter(Boolean),
|
|
}
|
|
if (existing) {
|
|
await apiFetch(`llm/policies/${existing.id}`, { method: 'PUT', body: JSON.stringify(body) })
|
|
} else {
|
|
await apiFetch('llm/policies', { method: 'POST', body: JSON.stringify(body) })
|
|
}
|
|
onSaved()
|
|
} catch (e) { setError(e instanceof Error ? e.message : 'Fehler') }
|
|
finally { setSaving(false) }
|
|
}
|
|
|
|
return (
|
|
<ModalBase title={existing ? 'Policy bearbeiten' : 'Policy erstellen'} onClose={onClose}>
|
|
{error && <div className="mb-3 p-2 bg-red-50 text-red-700 rounded text-sm">{error}</div>}
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
|
|
<input type="text" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
|
|
<input type="text" value={form.description} onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Erlaubte Models (kommagetrennt)</label>
|
|
<input type="text" value={form.allowed_models} onChange={e => setForm(f => ({ ...f, allowed_models: e.target.value }))}
|
|
placeholder="qwen3:30b-a3b, claude-sonnet-4-5"
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Blockierte Models (kommagetrennt)</label>
|
|
<input type="text" value={form.blocked_models} onChange={e => setForm(f => ({ ...f, blocked_models: e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono" />
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Rate (req/min)</label>
|
|
<input type="number" value={form.rate_limit_rpm} onChange={e => setForm(f => ({ ...f, rate_limit_rpm: +e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Tokens/Tag</label>
|
|
<input type="number" value={form.rate_limit_tpd} onChange={e => setForm(f => ({ ...f, rate_limit_tpd: +e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Max Tok/Req</label>
|
|
<input type="number" value={form.max_tokens_per_request} onChange={e => setForm(f => ({ ...f, max_tokens_per_request: +e.target.value }))}
|
|
className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" />
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<label className="flex items-center gap-2 text-sm">
|
|
<input type="checkbox" checked={form.pii_detection_required}
|
|
onChange={e => setForm(f => ({ ...f, pii_detection_required: e.target.checked }))}
|
|
className="rounded border-gray-300" />
|
|
PII-Erkennung
|
|
</label>
|
|
<label className="flex items-center gap-2 text-sm">
|
|
<input type="checkbox" checked={form.pii_redaction_required}
|
|
onChange={e => setForm(f => ({ ...f, pii_redaction_required: e.target.checked }))}
|
|
className="rounded border-gray-300" />
|
|
PII-Redaktion
|
|
</label>
|
|
<label className="flex items-center gap-2 text-sm">
|
|
<input type="checkbox" checked={form.is_active}
|
|
onChange={e => setForm(f => ({ ...f, is_active: e.target.checked }))}
|
|
className="rounded border-gray-300" />
|
|
Aktiv
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 mt-5">
|
|
<button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Abbrechen</button>
|
|
<button onClick={handleSubmit} disabled={saving}
|
|
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 disabled:opacity-50">
|
|
{saving ? 'Speichern...' : (existing ? 'Aktualisieren' : 'Erstellen')}
|
|
</button>
|
|
</div>
|
|
</ModalBase>
|
|
)
|
|
}
|