feat: consolidate AI settings into one page with tabs

- New SettingsAI page with 3 tabs: KI Assistent, Proaktive KI, MCP - Remove individual AI/proactive/mcp from settings nav - Settings nav now 6 items: Stammdaten, Nutzerverwaltung, System, Mail, KI Einstellungen, Benachrichtigungen
2026-07-24 22:46:53 +02:00
parent 8b3873d676
commit c1d49e4dfe
3 changed files with 49 additions and 3 deletions
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AISettingsPage } from './AISettings';
+import { ProactiveAISettings } from './ProactiveAISettings';
+import { SettingsMcpPage } from './SettingsMcp';
+
+export function SettingsAIPage() {
+  const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useState<'assistant' | 'proactive' | 'mcp'>('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') },
+  ];
+
+  return (
+    <div data-testid="settings-ai-page">
+      <h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('settings.aiTitle', 'KI Einstellungen')}</h1>
+      <div className="border-b border-secondary-200 mb-6">
+        <nav className="flex gap-1" role="tablist">
+          {tabs.map((tab) => (
+            <button
+              key={tab.key}
+              onClick={() => setActiveTab(tab.key)}
+              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === 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={activeTab === tab.key}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+      <div className="mt-4">
+        {activeTab === 'assistant' && <AISettingsPage />}
+        {activeTab === 'proactive' && <ProactiveAISettings />}
+        {activeTab === 'mcp' && <SettingsMcpPage />}
+      </div>
+    </div>
+  );
+}