Files
leocrm/frontend/src/pages/Settings.tsx
T
Agent Zero 9d4f701a25 feat: MCP Server plugin (Task 5.16) - expose LeoCRM tools to external AI clients
- New plugin app/plugins/builtins/mcp_server/ with 9 MCP tools
- Tools: search_contacts, get_contact, create_contact, list_calendar_entries,
  create_calendar_entry, list_emails, send_email, list_files, upload_file
- Routes: GET /api/v1/mcp/tools, POST /api/v1/mcp/tools/{name}/execute, GET /api/v1/mcp/config
- API-token auth via session + RBAC (mcp:read, mcp:write)
- Frontend: mcp.ts API client with React Query hooks
- Frontend: SettingsMcp.tsx settings page with tool listing and execution
- i18n: de.json and en.json updated with MCP entries
- Tests: 7 tests covering tool listing, config, execution, auth, schema validation
2026-07-23 23:01:59 +02:00

72 lines
3.2 KiB
TypeScript

import React from 'react';
import { NavLink, Outlet } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { usePluginStore } from '@/store/pluginStore';
import * as LucideIcons from 'lucide-react';
export function SettingsPage() {
const { t } = useTranslation();
const pluginSettingsPages = usePluginStore(s => s.getAllSettingsPages());
const hardcodedNavItems = [
{ to: '/settings/system', label: t('systemSettings.title'), icon: '\u2699\ufe0f' },
{ to: '/settings/roles', label: t('settings.roles'), icon: '\ud83d\udd11' },
{ to: '/settings/users', label: t('settings.users'), icon: '\ud83d\udc65' },
{ to: '/settings/groups', label: t('settings.groups', 'Gruppen'), icon: '\ud83d\udc65\ud83d\udcac' },
{ to: '/settings/plugins', label: t('settings.plugins'), icon: '\ud83e\udde9' },
{ to: '/settings/currencies', label: t('currencies.title'), icon: '\ud83d\udcb0' },
{ to: '/settings/taxes', label: t('taxes.title'), icon: '\ud83d\udccb' },
{ to: '/settings/sequences', label: t('sequences.title'), icon: '\ud83d\udd22' },
{ to: '/settings/mail', label: t('mail.settings'), icon: '\ud83d\udce7' },
{ to: '/settings/ai', label: t('nav.aiAssistant'), icon: '\ud83e\udde0' },
{ to: '/settings/ai-proactive', label: 'Proaktive KI', icon: '\ud83e\udd16' },
{ to: '/settings/notifications', label: t('settings.notifications'), icon: '\ud83d\udd14' },
{ to: '/settings/theme', label: t('settings.theme', 'Theme'), icon: '\ud83c\udfa8' },
{ to: '/settings/mcp', label: t('settings.mcp', 'MCP'), icon: '\ud83d\udd27' },
];
const existingPaths = new Set(hardcodedNavItems.map(item => item.to));
const pluginNavItems = pluginSettingsPages
.filter(p => !existingPaths.has(`/settings/${p.path}`))
.map(p => ({
to: `/settings/${p.path}`,
label: t(p.label_key, p.label),
icon: (() => {
const Icon = (LucideIcons as any)[p.icon];
return Icon ? React.createElement(Icon, { className: 'w-4 h-4' }) : '\ud83d\udce6';
})(),
}));
const navItems = [...hardcodedNavItems, ...pluginNavItems];
return (
<div className="flex max-w-7xl mx-auto" data-testid="settings-page">
<aside className="w-64 flex-shrink-0 border-r border-secondary-200 p-4 min-h-[calc(100vh-4rem)]">
<h1 className="text-xl font-bold text-secondary-900 mb-6">{t('settings.title')}</h1>
<nav className="space-y-1" role="navigation" aria-label={t('settings.title')}>
{navItems.map((item) => (
<NavLink
key={item.to}
to={item.to}
className={({ isActive }) =>
`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
isActive
? 'bg-primary-100 text-primary-700'
: 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'
}`
}
data-testid={`settings-nav-${item.to.split('/').pop()}`}
>
<span aria-hidden="true">{item.icon}</span>
{item.label}
</NavLink>
))}
</nav>
</aside>
<main className="flex-1 p-6" data-testid="settings-content">
<Outlet />
</main>
</div>
);
}