feat(K): Phase K EU Compliance — AI Registry, DPIA, Incident Register, Retention Admin, Tests, Doku
- K-REG: GET /api/v1/compliance/ai-registry — lists all agents with ai_use_case_metadata - K-DPIA: GET /api/v1/compliance/dpia-template — pre-filled DPIA template export - K-INC: ComplianceIncident model, Migration 0133 (RLS), CRUD routes (admin-only) - K-RET: GET/PATCH /api/v1/compliance/retention-policies — 5 policies editable - K-COMP-TEST: 12/12 integration tests pass - K-DOC: docs/compliance.md — Betriebsdoku - Frontend: ComplianceTab.tsx in SettingsAI.tsx (new tab) - 13 files created/modified
This commit is contained in:
Agent Zero
@@ -0,0 +1,147 @@
|
||||
/**
|
||||
* Compliance API client — AI registry, DPIA template, incidents, retention policies.
|
||||
*
|
||||
* All endpoints are admin-only and target /api/v1/compliance/...
|
||||
*/
|
||||
|
||||
import { apiGet, apiPost, apiPatch } from './client';
|
||||
|
||||
// ─── Types ───
|
||||
|
||||
export interface AIRegistryEntry {
|
||||
agent_id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
is_active: boolean;
|
||||
llm_model: string;
|
||||
ai_use_case_metadata: Record<string, unknown>;
|
||||
validation_warnings: string[];
|
||||
}
|
||||
|
||||
export interface AIRegistryResponse {
|
||||
items: AIRegistryEntry[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface DPIATemplate {
|
||||
use_case_id: string;
|
||||
agent_name: string;
|
||||
intended_purpose: string;
|
||||
owner: string;
|
||||
risk_class: string;
|
||||
oversight_policy: string;
|
||||
data_categories: string[];
|
||||
allowed_providers: string[];
|
||||
allowed_models: string[];
|
||||
allowed_actions: string[];
|
||||
human_review_required: boolean;
|
||||
validation_warnings: string[];
|
||||
disclaimer: string;
|
||||
}
|
||||
|
||||
export interface ComplianceIncident {
|
||||
id: string;
|
||||
incident_type: string;
|
||||
title: string;
|
||||
description: string;
|
||||
affected_use_cases: string[];
|
||||
affected_versions: string[];
|
||||
provider: string;
|
||||
measures_taken: string;
|
||||
evidence_refs: string[];
|
||||
status: string;
|
||||
created_by: string | null;
|
||||
resolved_by: string | null;
|
||||
resolved_at: string | null;
|
||||
created_at: string | null;
|
||||
updated_at: string | null;
|
||||
}
|
||||
|
||||
export interface IncidentCreate {
|
||||
incident_type: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
affected_use_cases?: string[];
|
||||
affected_versions?: string[];
|
||||
provider?: string;
|
||||
measures_taken?: string;
|
||||
evidence_refs?: string[];
|
||||
status?: string;
|
||||
}
|
||||
|
||||
export interface IncidentUpdate {
|
||||
title?: string;
|
||||
description?: string;
|
||||
incident_type?: string;
|
||||
affected_use_cases?: string[];
|
||||
affected_versions?: string[];
|
||||
provider?: string;
|
||||
measures_taken?: string;
|
||||
evidence_refs?: string[];
|
||||
status?: string;
|
||||
}
|
||||
|
||||
export interface IncidentsResponse {
|
||||
items: ComplianceIncident[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface RetentionPolicyEntry {
|
||||
key: string;
|
||||
label: string;
|
||||
description: string;
|
||||
default_days: number;
|
||||
current_days: number;
|
||||
editable: boolean;
|
||||
}
|
||||
|
||||
export interface RetentionPoliciesResponse {
|
||||
items: RetentionPolicyEntry[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
// ─── API Functions ───
|
||||
|
||||
export async function fetchAIRegistry(): Promise<AIRegistryResponse> {
|
||||
return apiGet<AIRegistryResponse>('/compliance/ai-registry');
|
||||
}
|
||||
|
||||
export async function fetchDPIATemplate(agentId: string): Promise<DPIATemplate> {
|
||||
return apiGet<DPIATemplate>('/compliance/dpia-template', {
|
||||
params: { agent_id: agentId },
|
||||
});
|
||||
}
|
||||
|
||||
export async function fetchIncidents(params?: {
|
||||
status?: string;
|
||||
incident_type?: string;
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
}): Promise<IncidentsResponse> {
|
||||
return apiGet<IncidentsResponse>('/compliance/incidents', { params });
|
||||
}
|
||||
|
||||
export async function createIncident(data: IncidentCreate): Promise<ComplianceIncident> {
|
||||
return apiPost<ComplianceIncident>('/compliance/incidents', data);
|
||||
}
|
||||
|
||||
export async function updateIncident(
|
||||
id: string,
|
||||
data: IncidentUpdate
|
||||
): Promise<ComplianceIncident> {
|
||||
return apiPatch<ComplianceIncident>(`/compliance/incidents/${id}`, data);
|
||||
}
|
||||
|
||||
export async function fetchRetentionPolicies(): Promise<RetentionPoliciesResponse> {
|
||||
return apiGet<RetentionPoliciesResponse>('/compliance/retention-policies');
|
||||
}
|
||||
|
||||
export async function updateRetentionPolicy(
|
||||
key: string,
|
||||
days: number
|
||||
): Promise<{ key: string; days: number; message: string }> {
|
||||
return apiPatch<{ key: string; days: number; message: string }>(
|
||||
`/compliance/retention-policies/${key}`,
|
||||
{ days }
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,463 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
fetchAIRegistry,
|
||||
fetchDPIATemplate,
|
||||
fetchIncidents,
|
||||
createIncident,
|
||||
updateIncident,
|
||||
fetchRetentionPolicies,
|
||||
updateRetentionPolicy,
|
||||
type AIRegistryEntry,
|
||||
type ComplianceIncident,
|
||||
type RetentionPolicyEntry,
|
||||
type IncidentCreate,
|
||||
} from '../api/compliance';
|
||||
|
||||
type SubTab = 'registry' | 'incidents' | 'retention';
|
||||
|
||||
export function ComplianceTab() {
|
||||
const { t } = useTranslation();
|
||||
const [subTab, setSubTab] = useState<SubTab>('registry');
|
||||
|
||||
const subTabs: { key: SubTab; label: string }[] = [
|
||||
{ key: 'registry', label: t('compliance.aiRegistry', 'AI-Register') },
|
||||
{ key: 'incidents', label: t('compliance.incidents', 'Vorfälle') },
|
||||
{ key: 'retention', label: t('compliance.retention', 'Aufbewahrung') },
|
||||
];
|
||||
|
||||
return (
|
||||
<div data-testid="compliance-tab" className="space-y-4">
|
||||
<div className="border-b border-secondary-200 mb-4">
|
||||
<nav className="flex gap-1" role="tablist">
|
||||
{subTabs.map((tab) => (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setSubTab(tab.key)}
|
||||
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
|
||||
subTab === tab.key
|
||||
? 'border-primary-600 text-primary-600'
|
||||
: 'border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300'
|
||||
}`}
|
||||
role="tab"
|
||||
aria-selected={subTab === tab.key}
|
||||
aria-label={tab.label}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{subTab === 'registry' && <AIRegistryPanel />}
|
||||
{subTab === 'incidents' && <IncidentsPanel />}
|
||||
{subTab === 'retention' && <RetentionPanel />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── AI Registry Panel ───
|
||||
|
||||
function AIRegistryPanel() {
|
||||
const { t } = useTranslation();
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ['compliance', 'ai-registry'],
|
||||
queryFn: fetchAIRegistry,
|
||||
});
|
||||
|
||||
const handleDPIAExport = async (agentId: string, agentName: string) => {
|
||||
try {
|
||||
const template = await fetchDPIATemplate(agentId);
|
||||
const blob = new Blob([JSON.stringify(template, null, 2)], {
|
||||
type: 'application/json',
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `dpia_${agentName.replace(/\s+/g, '_').toLowerCase()}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
} catch {
|
||||
// Error handled by query client
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <p className="text-secondary-500" aria-live="polite">{t('common.loading', 'Laden...')}</p>;
|
||||
}
|
||||
if (error) {
|
||||
return <p className="text-red-600" aria-live="polite">{t('common.error', 'Fehler beim Laden')}</p>;
|
||||
}
|
||||
if (!data || data.items.length === 0) {
|
||||
return <p className="text-secondary-500">{t('compliance.noAgents', 'Keine AI-Agenten gefunden')}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-secondary-200" role="table">
|
||||
<thead className="bg-secondary-50">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.name', 'Name')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.intendedPurpose', 'Zweck')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.owner', 'Verantwortlich')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.riskClass', 'Risiko')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.oversight', 'Oversight')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.dataCategories', 'Daten')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.status', 'Status')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.actions', 'Aktionen')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-secondary-100">
|
||||
{data.items.map((entry: AIRegistryEntry) => {
|
||||
const meta = entry.ai_use_case_metadata as Record<string, unknown>;
|
||||
return (
|
||||
<tr key={entry.agent_id} className="hover:bg-secondary-50">
|
||||
<td className="px-4 py-2 text-sm text-secondary-900">{entry.name}</td>
|
||||
<td className="px-4 py-2 text-sm text-secondary-600">{String(meta.intended_purpose || '')}</td>
|
||||
<td className="px-4 py-2 text-sm text-secondary-600">{String(meta.owner || '')}</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${
|
||||
meta.risk_class === 'high' ? 'bg-red-100 text-red-700' :
|
||||
meta.risk_class === 'medium' ? 'bg-yellow-100 text-yellow-700' :
|
||||
'bg-green-100 text-green-700'
|
||||
}`}>
|
||||
{String(meta.risk_class || 'low')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-secondary-600">{String(meta.oversight_policy || '')}</td>
|
||||
<td className="px-4 py-2 text-sm text-secondary-600">
|
||||
{Array.isArray(meta.data_categories) ? (meta.data_categories as string[]).join(', ') : ''}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${
|
||||
entry.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
|
||||
}`}>
|
||||
{entry.is_active ? t('compliance.active', 'Aktiv') : t('compliance.inactive', 'Inaktiv')}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<button
|
||||
onClick={() => handleDPIAExport(entry.agent_id, entry.name)}
|
||||
className="text-primary-600 hover:text-primary-700 text-xs font-medium"
|
||||
aria-label={`${t('compliance.dpiaExport', 'DPIA Export')} ${entry.name}`}
|
||||
>
|
||||
{t('compliance.dpiaExport', 'DPIA Export')}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{data.items.some((e) => e.validation_warnings.length > 0) && (
|
||||
<div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded text-sm text-yellow-800">
|
||||
{t('compliance.warningsNote', 'Einige Agenten haben Validierungswarnungen. Siehe Details im AI-Register.')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Incidents Panel ───
|
||||
|
||||
function IncidentsPanel() {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [formData, setFormData] = useState<IncidentCreate>({
|
||||
incident_type: 'ai',
|
||||
title: '',
|
||||
description: '',
|
||||
provider: '',
|
||||
measures_taken: '',
|
||||
status: 'open',
|
||||
});
|
||||
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ['compliance', 'incidents'],
|
||||
queryFn: () => fetchIncidents(),
|
||||
});
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (data: IncidentCreate) => createIncident(data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['compliance', 'incidents'] });
|
||||
setShowForm(false);
|
||||
setFormData({ incident_type: 'ai', title: '', description: '', provider: '', measures_taken: '', status: 'open' });
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ id, data }: { id: string; data: { status?: string } }) =>
|
||||
updateIncident(id, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['compliance', 'incidents'] });
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
createMutation.mutate(formData);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return <p className="text-secondary-500" aria-live="polite">{t('common.loading', 'Laden...')}</p>;
|
||||
}
|
||||
if (error) {
|
||||
return <p className="text-red-600" aria-live="polite">{t('common.error', 'Fehler beim Laden')}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<button
|
||||
onClick={() => setShowForm(!showForm)}
|
||||
className="px-4 py-2 bg-primary-600 text-white rounded text-sm font-medium hover:bg-primary-700"
|
||||
aria-label={t('compliance.createIncident', 'Vorfall erstellen')}
|
||||
>
|
||||
{showForm ? t('common.cancel', 'Abbrechen') : t('compliance.createIncident', 'Vorfall erstellen')}
|
||||
</button>
|
||||
|
||||
{showForm && (
|
||||
<form onSubmit={handleSubmit} className="space-y-3 p-4 border border-secondary-200 rounded">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-type">
|
||||
{t('compliance.incidentType', 'Typ')}
|
||||
</label>
|
||||
<select
|
||||
id="incident-type"
|
||||
value={formData.incident_type}
|
||||
onChange={(e) => setFormData({ ...formData, incident_type: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
|
||||
aria-label={t('compliance.incidentType', 'Typ')}
|
||||
>
|
||||
<option value="ai">AI</option>
|
||||
<option value="privacy">Privacy</option>
|
||||
<option value="security">Security</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-title">
|
||||
{t('compliance.title', 'Titel')} *
|
||||
</label>
|
||||
<input
|
||||
id="incident-title"
|
||||
type="text"
|
||||
required
|
||||
value={formData.title}
|
||||
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
|
||||
aria-label={t('compliance.title', 'Titel')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-description">
|
||||
{t('compliance.description', 'Beschreibung')}
|
||||
</label>
|
||||
<textarea
|
||||
id="incident-description"
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
|
||||
rows={3}
|
||||
aria-label={t('compliance.description', 'Beschreibung')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-provider">
|
||||
{t('compliance.provider', 'Provider')}
|
||||
</label>
|
||||
<input
|
||||
id="incident-provider"
|
||||
type="text"
|
||||
value={formData.provider}
|
||||
onChange={(e) => setFormData({ ...formData, provider: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
|
||||
aria-label={t('compliance.provider', 'Provider')}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-measures">
|
||||
{t('compliance.measures', 'Maßnahmen')}
|
||||
</label>
|
||||
<textarea
|
||||
id="incident-measures"
|
||||
value={formData.measures_taken}
|
||||
onChange={(e) => setFormData({ ...formData, measures_taken: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
|
||||
rows={2}
|
||||
aria-label={t('compliance.measures', 'Maßnahmen')}
|
||||
/>
|
||||
</div>
|
||||
{createMutation.isError && (
|
||||
<p className="text-red-600 text-sm" role="alert">{t('compliance.createError', 'Fehler beim Erstellen')}</p>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
className="px-4 py-2 bg-primary-600 text-white rounded text-sm font-medium hover:bg-primary-700 disabled:opacity-50"
|
||||
aria-label={t('common.save', 'Speichern')}
|
||||
>
|
||||
{createMutation.isPending ? t('common.saving', 'Speichern...') : t('common.save', 'Speichern')}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{!data || data.items.length === 0 ? (
|
||||
<p className="text-secondary-500">{t('compliance.noIncidents', 'Keine Vorfälle erfasst')}</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-secondary-200" role="table">
|
||||
<thead className="bg-secondary-50">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.title', 'Titel')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.incidentType', 'Typ')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.status', 'Status')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.provider', 'Provider')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.createdAt', 'Erstellt')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.actions', 'Aktionen')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-secondary-100">
|
||||
{data.items.map((incident: ComplianceIncident) => (
|
||||
<tr key={incident.id} className="hover:bg-secondary-50">
|
||||
<td className="px-4 py-2 text-sm text-secondary-900">{incident.title}</td>
|
||||
<td className="px-4 py-2 text-sm text-secondary-600">{incident.incident_type}</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
<span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${
|
||||
incident.status === 'open' ? 'bg-red-100 text-red-700' :
|
||||
incident.status === 'resolved' ? 'bg-green-100 text-green-700' :
|
||||
'bg-gray-100 text-gray-600'
|
||||
}`}>
|
||||
{incident.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm text-secondary-600">{incident.provider}</td>
|
||||
<td className="px-4 py-2 text-sm text-secondary-600">{incident.created_at || ''}</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
{incident.status === 'open' && (
|
||||
<button
|
||||
onClick={() => updateMutation.mutate({ id: incident.id, data: { status: 'resolved' } })}
|
||||
className="text-primary-600 hover:text-primary-700 text-xs font-medium"
|
||||
aria-label={`${t('compliance.resolve', 'Auflösen')} ${incident.title}`}
|
||||
>
|
||||
{t('compliance.resolve', 'Auflösen')}
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Retention Policies Panel ───
|
||||
|
||||
function RetentionPanel() {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const [editingKey, setEditingKey] = useState<string | null>(null);
|
||||
const [editDays, setEditDays] = useState<number>(0);
|
||||
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ['compliance', 'retention-policies'],
|
||||
queryFn: fetchRetentionPolicies,
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: ({ key, days }: { key: string; days: number }) =>
|
||||
updateRetentionPolicy(key, days),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['compliance', 'retention-policies'] });
|
||||
setEditingKey(null);
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return <p className="text-secondary-500" aria-live="polite">{t('common.loading', 'Laden...')}</p>;
|
||||
}
|
||||
if (error) {
|
||||
return <p className="text-red-600" aria-live="polite">{t('common.error', 'Fehler beim Laden')}</p>;
|
||||
}
|
||||
if (!data || data.items.length === 0) {
|
||||
return <p className="text-secondary-500">{t('compliance.noPolicies', 'Keine Aufbewahrungsrichtlinien')}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-secondary-200" role="table">
|
||||
<thead className="bg-secondary-50">
|
||||
<tr>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.policy', 'Richtlinie')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.description', 'Beschreibung')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.defaultDays', 'Standard (Tage)')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.currentDays', 'Aktuell (Tage)')}</th>
|
||||
<th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.actions', 'Aktionen')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-secondary-100">
|
||||
{data.items.map((policy: RetentionPolicyEntry) => (
|
||||
<tr key={policy.key} className="hover:bg-secondary-50">
|
||||
<td className="px-4 py-2 text-sm font-medium text-secondary-900">{policy.label}</td>
|
||||
<td className="px-4 py-2 text-sm text-secondary-600">{policy.description}</td>
|
||||
<td className="px-4 py-2 text-sm text-secondary-600">{policy.default_days}</td>
|
||||
<td className="px-4 py-2 text-sm text-secondary-900">
|
||||
{editingKey === policy.key ? (
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={3650}
|
||||
value={editDays}
|
||||
onChange={(e) => setEditDays(parseInt(e.target.value, 10) || 1)}
|
||||
className="w-20 px-2 py-1 border border-secondary-300 rounded text-sm"
|
||||
aria-label={t('compliance.days', 'Tage')}
|
||||
/>
|
||||
) : (
|
||||
policy.current_days
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm">
|
||||
{editingKey === policy.key ? (
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => updateMutation.mutate({ key: policy.key, days: editDays })}
|
||||
disabled={updateMutation.isPending}
|
||||
className="text-green-600 hover:text-green-700 text-xs font-medium disabled:opacity-50"
|
||||
aria-label={t('common.save', 'Speichern')}
|
||||
>
|
||||
{updateMutation.isPending ? t('common.saving', '...') : t('common.save', 'Speichern')}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setEditingKey(null)}
|
||||
className="text-secondary-500 hover:text-secondary-700 text-xs font-medium"
|
||||
aria-label={t('common.cancel', 'Abbrechen')}
|
||||
>
|
||||
{t('common.cancel', 'Abbrechen')}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
policy.editable && (
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingKey(policy.key);
|
||||
setEditDays(policy.current_days);
|
||||
}}
|
||||
className="text-primary-600 hover:text-primary-700 text-xs font-medium"
|
||||
aria-label={`${t('common.edit', 'Bearbeiten')} ${policy.label}`}
|
||||
>
|
||||
{t('common.edit', 'Bearbeiten')}
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,15 +3,17 @@ import { useTranslation } from 'react-i18next';
|
||||
import { AISettingsPage } from './AISettings';
|
||||
import { ProactiveAISettings } from './ProactiveAISettings';
|
||||
import { SettingsMcpPage } from './SettingsMcp';
|
||||
import { ComplianceTab } from './ComplianceTab';
|
||||
|
||||
export function SettingsAIPage() {
|
||||
const { t } = useTranslation();
|
||||
const [activeTab, setActiveTab] = useState<'assistant' | 'proactive' | 'mcp'>('assistant');
|
||||
const [activeTab, setActiveTab] = useState<'assistant' | 'proactive' | 'mcp' | 'compliance'>('assistant');
|
||||
|
||||
const tabs = [
|
||||
{ key: 'assistant' as const, label: t('nav.aiAssistant', 'KI Assistent') },
|
||||
{ key: 'proactive' as const, label: t('settings.aiProactive', 'Proaktive KI') },
|
||||
{ key: 'mcp' as const, label: t('settings.mcp', 'MCP') },
|
||||
{ key: 'compliance' as const, label: t('settings.compliance', 'Compliance') },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -40,6 +42,7 @@ export function SettingsAIPage() {
|
||||
{activeTab === 'assistant' && <AISettingsPage />}
|
||||
{activeTab === 'proactive' && <ProactiveAISettings />}
|
||||
{activeTab === 'mcp' && <SettingsMcpPage />}
|
||||
{activeTab === 'compliance' && <ComplianceTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user