T07b: frontend feature pages — companies + contacts + settings + audit + dashboard + search

- 11 new feature pages (CompaniesList/Detail/Form, ContactsList/Detail/Form,
  SettingsProfile/Roles/Users, AuditLog, GlobalSearchResults)
- 3 page updates (Dashboard with StatCard+ActivityFeed, Settings with tree nav+Outlet,
  TopBar with SearchDropdown)
- 13 new routes in routes/index.tsx
- i18n updates (de.json + en.json) with companies/contacts/settings/audit/search keys
- 12 new test files + 2 existing test fixes (TopBar, AppShell)
- 7 shared components (DataGrid, Tabs, SearchDropdown, CsvImportDialog, StatCard,
  ActivityFeed, UnsavedChangesGuard)
- 16 new API hooks in hooks.ts
- Verification: 141 tests pass, build succeeds, tsc --noEmit clean

frontend/src/pages/Settings.tsx

@@ -1,55 +1,44 @@
 import React from 'react';
+import { NavLink, Outlet } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Card } from '@/components/ui/Card';
-import { Select } from '@/components/ui/Select';
-import { useUIStore } from '@/store/uiStore';
 
 export function SettingsPage() {
-  const { t, i18n } = useTranslation();
-  const { theme, setTheme, locale, setLocale } = useUIStore();
+  const { t } = useTranslation();
 
-  const handleLocaleChange = (newLocale: string) => {
-    setLocale(newLocale as 'de' | 'en');
-    i18n.changeLanguage(newLocale);
-  };
-
-  const handleThemeChange = (newTheme: string) => {
-    setTheme(newTheme as 'light' | 'dark' | 'system');
-    if (newTheme === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  };
+  const navItems = [
+    { to: '/settings/profile', label: t('settings.profile'), icon: '👤' },
+    { to: '/settings/roles', label: t('settings.roles'), icon: '🔑' },
+    { to: '/settings/users', label: t('settings.users'), icon: '👥' },
+    { to: '/settings/system', label: t('settings.system'), icon: '⚙️' },
+  ];
 
   return (
-    <div className="p-6 max-w-4xl mx-auto" data-testid="settings-page">
-      <h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('settings.title')}</h1>
-      <div className="space-y-6">
-        <Card title={t('settings.language')} description="Wählen Sie Ihre bevorzugte Sprache">
-          <Select
-            options={[
-              { value: 'de', label: 'Deutsch' },
-              { value: 'en', label: 'English' },
-            ]}
-            value={locale}
-            onChange={(e) => handleLocaleChange(e.target.value)}
-            aria-label={t('settings.language')}
-          />
-        </Card>
-        <Card title={t('settings.theme')} description="Wählen Sie Ihr bevorzugtes Design">
-          <Select
-            options={[
-              { value: 'light', label: t('settings.light') },
-              { value: 'dark', label: t('settings.dark') },
-              { value: 'system', label: t('settings.system') },
-            ]}
-            value={theme}
-            onChange={(e) => handleThemeChange(e.target.value)}
-            aria-label={t('settings.theme')}
-          />
-        </Card>
-      </div>
+    <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>
   );
 }