Agent Zero
fc96a2f86c
Backend: - PluginManifest um 5 neue UI-Felder erweitert: menu_items, page_routes, detail_tabs, settings_pages, dashboard_widgets (FrontendMenuItem, FrontendPageRoute, FrontendDetailTab, FrontendSettingsPage, FrontendDashboardWidget) - GET /api/v1/plugins/active-manifests Endpoint liefert UI-Manifeste aller aktiven Plugins - Registry.get_active_manifests() + PluginService.get_active_manifests() - 12 Built-in Plugins mit UI-Manifest-Daten gefuellt (menu_items, page_routes, detail_tabs, settings_pages) - Plugin-Install-System: POST /upload (ZIP), POST /install-url (URL) mit Validierung (Manifest, dangerous imports, SQL migrations) Frontend: - pluginStore.ts (Zustand) mit PluginUiManifest Typen + Selektoren - useActivePluginManifests() React Query Hook - PluginRegistry.tsx — fetcht Manifeste beim App-Start - PluginLoader.tsx — dynamisches React.lazy() mit ErrorBoundary - PluginRouteRenderer.tsx — Catch-all fuer Plugin-Routes - routes/index.tsx — Catch-all Routes fuer Plugin-Pages + Settings - Sidebar.tsx — dynamische Plugin Menu-Items mit Grouping + Icons - Settings.tsx — dynamische Plugin Settings-Pages - ContactDetail.tsx — dynamische Plugin Detail-Tabs mit Permissions - AppShell.tsx — PluginRegistry Provider eingebunden - SettingsPlugins.tsx — Install-UI (ZIP Upload + URL Install) - plugins.ts — useUploadPlugin() + useInstallPluginFromUrl() Hooks Docs & Templates: - docs/plugin-development-guide.md — komplette Entwickler-Doku - templates/plugin-template/ — Boilerplate mit allen Manifest-Feldern Tests: - 34 Vitest-Tests (PluginRegistry, PluginLoader, PluginRouteRenderer, pluginStore) — alle bestanden - TSC: keine neuen Errors (nur pre-existing Dms.tsx)
71 lines
3.2 KiB
TypeScript
71 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' },
|
|
];
|
|
|
|
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>
|
|
);
|
|
}
|