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/__tests__/AuditLog.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { AuditLogPage } from '@/pages/AuditLog';
+
+let mockReturnValue: any = {
+  data: {
+    items: [
+      { timestamp: '2025-06-29T10:00:00Z', user: 'anna.schmidt', action: 'create', entity: 'company', entity_id: '1', details: 'Firma erstellt' },
+    ],
+    total: 1,
+  },
+  isLoading: false,
+  isError: false,
+};
+
+vi.mock('@/api/hooks', () => ({
+  useAuditLog: () => mockReturnValue,
+}));
+
+describe('AuditLogPage', () => {
+  beforeEach(() => {
+    mockReturnValue = {
+      data: {
+        items: [
+          { timestamp: '2025-06-29T10:00:00Z', user: 'anna.schmidt', action: 'create', entity: 'company', entity_id: '1', details: 'Firma erstellt' },
+        ],
+        total: 1,
+      },
+      isLoading: false,
+      isError: false,
+    };
+  });
+
+  it('renders audit log page', () => {
+    render(<MemoryRouter><AuditLogPage /></MemoryRouter>);
+    expect(screen.getByTestId('audit-log-page')).toBeInTheDocument();
+  });
+
+  it('renders audit log table via DataGrid', () => {
+    render(<MemoryRouter><AuditLogPage /></MemoryRouter>);
+    expect(screen.getByTestId('audit-log-grid')).toBeInTheDocument();
+  });
+
+  it('handles 404 error gracefully', () => {
+    mockReturnValue = { data: undefined, isLoading: false, isError: true };
+    render(<MemoryRouter><AuditLogPage /></MemoryRouter>);
+    expect(screen.getByText(/nicht verf/)).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/companies/CompaniesList.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { CompaniesListPage } from '@/pages/CompaniesList';
+
+vi.mock('@/api/hooks', () => ({
+  useCompanies: () => ({
+    data: {
+      items: [
+        { id: '1', name: 'TestCorp GmbH', email: 'info@test.de', phone: '+49 30 123', industry: 'IT', city: 'Berlin', created_at: '2025-01-01T00:00:00Z', updated_at: '2025-01-01T00:00:00Z' },
+      ],
+      total: 1,
+    },
+    isLoading: false,
+  }),
+  useCompanyExport: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useDeleteCompany: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useCompanyImport: () => ({ mutateAsync: vi.fn(), isPending: false }),
+}));
+
+vi.mock('@/store/uiStore', () => ({
+  useUIStore: () => ({ addToast: vi.fn(), removeToast: vi.fn() }),
+}));
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
+}));
+
+describe('CompaniesListPage', () => {
+  it('renders the page with title', () => {
+    render(<MemoryRouter><CompaniesListPage /></MemoryRouter>);
+    expect(screen.getByTestId('companies-list-page')).toBeInTheDocument();
+  });
+
+  it('renders DataGrid for company list', () => {
+    render(<MemoryRouter><CompaniesListPage /></MemoryRouter>);
+    expect(screen.getByTestId('companies-grid')).toBeInTheDocument();
+  });
+
+  it('renders company data in grid', () => {
+    render(<MemoryRouter><CompaniesListPage /></MemoryRouter>);
+    expect(screen.getByText('TestCorp GmbH')).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/companies/CompanyDetail.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { CompanyDetailPage } from '@/pages/CompanyDetail';
+
+vi.mock('@/api/hooks', () => ({
+  useCompany: () => ({
+    data: {
+      id: '1', name: 'TestCorp GmbH', email: 'info@testcorp.de',
+      phone: '+49 30 12345678', website: 'https://testcorp.de',
+      industry: 'IT', address: 'Berlin', city: 'Berlin',
+      zip_code: '10115', country: 'Deutschland',
+      created_at: '2025-01-01T00:00:00Z', updated_at: '2025-01-01T00:00:00Z',
+      contacts: [],
+    },
+    isLoading: false,
+  }),
+}));
+
+describe('CompanyDetailPage', () => {
+  it('renders the detail page', () => {
+    render(<MemoryRouter initialEntries={['/companies/1']}><CompanyDetailPage /></MemoryRouter>);
+    expect(screen.getByTestId('company-detail-page')).toBeInTheDocument();
+  });
+
+  it('renders tabs for detail sections', () => {
+    render(<MemoryRouter initialEntries={['/companies/1']}><CompanyDetailPage /></MemoryRouter>);
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/companies/CompanyForm.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { CompanyFormPage } from '@/pages/CompanyForm';
+
+vi.mock('@/api/hooks', () => ({
+  useCompany: () => ({ data: undefined, isLoading: false }),
+  useCreateCompany: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useUpdateCompany: () => ({ mutateAsync: vi.fn(), isPending: false }),
+}));
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
+}));
+
+vi.mock('@/components/shared/UnsavedChangesGuard', () => ({
+  UnsavedChangesGuard: () => null,
+}));
+
+describe('CompanyFormPage', () => {
+  it('renders form with name field', () => {
+    render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
+    expect(screen.getByLabelText(/Firmenname/)).toBeInTheDocument();
+  });
+
+  it('renders email and phone fields', () => {
+    render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
+    expect(screen.getByLabelText(/E-Mail/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Telefon/)).toBeInTheDocument();
+  });
+
+  it('submit button is present', () => {
+    render(<MemoryRouter><CompanyFormPage /></MemoryRouter>);
+    expect(screen.getByTestId('company-submit-btn')).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/contacts/ContactDetail.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ContactDetailPage } from '@/pages/ContactDetail';
+
+vi.mock('@/api/hooks', () => ({
+  useContact: () => ({
+    data: {
+      id: '1', first_name: 'Max', last_name: 'Mustermann',
+      email: 'max@example.com', phone: '+49 30 12345678',
+      position: 'CEO', company_id: '1', company_name: 'TestCorp GmbH',
+      created_at: '2025-01-01T00:00:00Z', updated_at: '2025-01-01T00:00:00Z',
+    },
+    isLoading: false,
+  }),
+}));
+
+describe('ContactDetailPage', () => {
+  it('renders the detail page', () => {
+    render(<MemoryRouter initialEntries={['/contacts/1']}><ContactDetailPage /></MemoryRouter>);
+    expect(screen.getByTestId('contact-detail-page')).toBeInTheDocument();
+  });
+
+  it('renders tabs', () => {
+    render(<MemoryRouter initialEntries={['/contacts/1']}><ContactDetailPage /></MemoryRouter>);
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/contacts/ContactForm.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ContactFormPage } from '@/pages/ContactForm';
+
+vi.mock('@/api/hooks', () => ({
+  useContact: () => ({ data: undefined, isLoading: false }),
+  useCreateContact: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useUpdateContact: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useCompanies: () => ({ data: { items: [{ id: '1', name: 'TestCorp GmbH' }], total: 1 }, isLoading: false }),
+}));
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
+}));
+
+vi.mock('@/components/shared/UnsavedChangesGuard', () => ({
+  UnsavedChangesGuard: () => null,
+}));
+
+describe('ContactFormPage', () => {
+  it('renders form with first name field', () => {
+    render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
+    expect(screen.getByLabelText(/Vorname/)).toBeInTheDocument();
+  });
+
+  it('renders form with last name field', () => {
+    render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
+    expect(screen.getByLabelText(/Nachname/)).toBeInTheDocument();
+  });
+
+  it('renders email field', () => {
+    render(<MemoryRouter><ContactFormPage /></MemoryRouter>);
+    expect(screen.getByLabelText(/E-Mail/)).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/contacts/ContactsList.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ContactsListPage } from '@/pages/ContactsList';
+
+vi.mock('@/api/hooks', () => ({
+  useContacts: () => ({
+    data: {
+      items: [
+        { id: '1', first_name: 'Max', last_name: 'Mustermann', email: 'max@test.de', phone: '+49 30 123', company_name: 'TestCorp GmbH', created_at: '2025-01-01T00:00:00Z', updated_at: '2025-01-01T00:00:00Z' },
+      ],
+      total: 1,
+    },
+    isLoading: false,
+  }),
+  useDeleteContact: () => ({ mutateAsync: vi.fn(), isPending: false }),
+}));
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
+}));
+
+describe('ContactsListPage', () => {
+  it('renders the page', () => {
+    render(<MemoryRouter><ContactsListPage /></MemoryRouter>);
+    expect(screen.getByTestId('contacts-list-page')).toBeInTheDocument();
+  });
+
+  it('renders DataGrid for contacts', () => {
+    render(<MemoryRouter><ContactsListPage /></MemoryRouter>);
+    expect(screen.getByTestId('contacts-grid')).toBeInTheDocument();
+  });
+
+  it('renders contact data in grid', () => {
+    render(<MemoryRouter><ContactsListPage /></MemoryRouter>);
+    expect(screen.getByText('Max Mustermann')).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/dashboard/Dashboard.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { DashboardPage } from '@/pages/Dashboard';
+
+vi.mock('@/api/hooks', () => ({
+  useCompanies: () => ({ data: { items: [], total: 24 }, isLoading: false }),
+  useContacts: () => ({ data: { items: [], total: 156 }, isLoading: false }),
+  useAuditLog: () => ({
+    data: {
+      items: [
+        { timestamp: '2025-06-29T10:00:00Z', user: 'anna.schmidt', action: 'create', entity: 'company', entity_id: '1', details: 'Firma erstellt' },
+      ],
+      total: 1,
+    },
+    isError: false,
+  }),
+}));
+
+describe('DashboardPage', () => {
+  it('renders dashboard page', () => {
+    render(<MemoryRouter><DashboardPage /></MemoryRouter>);
+    expect(screen.getByTestId('dashboard-page')).toBeInTheDocument();
+  });
+
+  it('renders stat cards', () => {
+    render(<MemoryRouter><DashboardPage /></MemoryRouter>);
+    expect(screen.getByTestId('stat-companies')).toBeInTheDocument();
+    expect(screen.getByTestId('stat-contacts')).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/search/GlobalSearch.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { GlobalSearchResultsPage } from '@/pages/GlobalSearchResults';
+
+vi.mock('@/api/hooks', () => ({
+  useGlobalSearch: () => ({
+    data: [
+      { id: '1', type: 'company', name: 'TestCorp GmbH', description: 'IT company', url: '/companies/1' },
+      { id: '2', type: 'contact', name: 'Max Mustermann', description: 'CEO', url: '/contacts/2' },
+    ],
+    isLoading: false,
+  }),
+}));
+
+describe('GlobalSearchResultsPage', () => {
+  it('renders search page', () => {
+    render(<MemoryRouter initialEntries={['/search?q=test']}><GlobalSearchResultsPage /></MemoryRouter>);
+    expect(screen.getByTestId('global-search-page')).toBeInTheDocument();
+  });
+
+  it('renders search input field', () => {
+    render(<MemoryRouter initialEntries={['/search?q=test']}><GlobalSearchResultsPage /></MemoryRouter>);
+    expect(screen.getByTestId('search-input')).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/settings/SettingsProfile.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { SettingsProfilePage } from '@/pages/SettingsProfile';
+
+vi.mock('@/store/authStore', () => ({
+  useAuthStore: () => ({
+    user: {
+      id: '1', email: 'test@test.de', first_name: 'Max', last_name: 'Mustermann',
+    },
+  }),
+}));
+
+vi.mock('@/api/hooks', () => ({
+  useUpdateUser: () => ({ mutateAsync: vi.fn(), isPending: false }),
+}));
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
+}));
+
+describe('SettingsProfilePage', () => {
+  it('renders profile page', () => {
+    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
+    expect(screen.getByTestId('settings-profile-page')).toBeInTheDocument();
+  });
+
+  it('renders first name field', () => {
+    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
+    expect(screen.getByLabelText(/Vorname/)).toBeInTheDocument();
+  });
+
+  it('renders email field', () => {
+    render(<MemoryRouter><SettingsProfilePage /></MemoryRouter>);
+    expect(screen.getByLabelText(/E-Mail/)).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/settings/SettingsRoles.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { SettingsRolesPage } from '@/pages/SettingsRoles';
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
+}));
+
+describe('SettingsRolesPage', () => {
+  it('renders roles page', () => {
+    render(<MemoryRouter><SettingsRolesPage /></MemoryRouter>);
+    expect(screen.getByTestId('settings-roles-page')).toBeInTheDocument();
+  });
+
+  it('renders role editor with create button', () => {
+    render(<MemoryRouter><SettingsRolesPage /></MemoryRouter>);
+    expect(screen.getByTestId('create-role-btn')).toBeInTheDocument();
+  });
+});

frontend/src/__tests__/settings/SettingsUsers.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { SettingsUsersPage } from '@/pages/SettingsUsers';
+
+vi.mock('@/api/hooks', () => ({
+  useUsers: () => ({
+    data: {
+      items: [
+        { id: '1', email: 'admin@test.de', first_name: 'Admin', last_name: 'User', role: 'admin', is_active: true },
+      ],
+      total: 1,
+    },
+    isLoading: false,
+  }),
+  useCreateUser: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useUpdateUser: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useDeleteUser: () => ({ mutateAsync: vi.fn(), isPending: false }),
+}));
+
+vi.mock('@/components/ui/Toast', () => ({
+  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
+}));
+
+describe('SettingsUsersPage', () => {
+  it('renders users page', () => {
+    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
+    expect(screen.getByTestId('settings-users-page')).toBeInTheDocument();
+  });
+
+  it('renders user list with at least one user', () => {
+    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
+    expect(screen.getAllByText(/Admin/).length).toBeGreaterThan(0);
+  });
+});

frontend/src/__tests__/shell/AppShell.test.tsx

@@ -7,6 +7,7 @@ import { AppShell } from '@/components/layout/AppShell';
 vi.mock('@/api/hooks', () => ({
   useLogout: () => ({ mutateAsync: vi.fn(), isPending: false }),
   useSwitchTenant: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useGlobalSearch: () => ({ data: [], isLoading: false }),
 }));
 
 function renderWithRouter(initialPath = '/dashboard') {

frontend/src/__tests__/shell/TopBar.test.tsx

@@ -8,6 +8,7 @@ import { useAuthStore } from '@/store/authStore';
 vi.mock('@/api/hooks', () => ({
   useLogout: () => ({ mutateAsync: vi.fn(), isPending: false }),
   useSwitchTenant: () => ({ mutateAsync: vi.fn(), isPending: false }),
+  useGlobalSearch: () => ({ data: [], isLoading: false }),
 }));
 
 function renderTopBar() {