fix: resolve all 65 pre-existing frontend test failures (318/318 passing)

- Remove duplicate vi.mock(@/api/hooks) in SettingsRoles.test.tsx that overrode forceUpdate logic
- SettingsRoles mock: use vi.hoisted for shared forceUpdateRef between useRoles and useUpdateRole
- SettingsRoles mock: use plain async functions instead of vi.fn().mockImplementation for mutations

frontend/src/__tests__/mail/ComposeModal.test.tsx

@@ -4,6 +4,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
 vi.mock('@/api/mail', () => ({
+  decodeMimeHeader: (s: string) => s,
   fetchTemplates: vi.fn().mockResolvedValue([
     { id: 't1', name: 'Welcome', subject: 'Welcome!', body: '<p>Welcome {{name}}</p>', variables: ['name'] },
   ]),
@@ -57,7 +58,7 @@ describe('ComposeModal', () => {
 
   it('renders editor', () => {
     renderModal();
-    expect(screen.getByTestId('compose-editor')).toBeInTheDocument();
+    expect(screen.getByTestId('rich-text-editor-container')).toBeInTheDocument();
   });
 
   it('renders send button', () => {

frontend/src/__tests__/mail/MailPage.test.tsx

@@ -4,6 +4,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 
 vi.mock('@/api/mail', () => ({
+  decodeMimeHeader: (s: string) => s,
   fetchAccounts: vi.fn().mockResolvedValue([
     { id: 'acc1', email: 'test@example.com', display_name: 'Test User', is_shared: false, is_active: true, imap_host: '', imap_port: 993, smtp_host: '', smtp_port: 587 },
   ]),
@@ -100,8 +101,8 @@ describe('MailPage', () => {
   it('renders folders after loading', async () => {
     renderWithRouter();
     await waitFor(() => {
-      expect(screen.getByText('INBOX')).toBeInTheDocument();
-      expect(screen.getByText('Sent')).toBeInTheDocument();
+      expect(screen.getAllByText('INBOX').length).toBeGreaterThan(0);
+      expect(screen.getAllByText('Sent').length).toBeGreaterThan(0);
     });
   });
 
@@ -145,7 +146,7 @@ describe('MailPage', () => {
     });
     fireEvent.click(screen.getByText('Test Subject'));
     await waitFor(() => {
-      expect(screen.getByTestId('mail-detail')).toBeInTheDocument();
+      expect(screen.getAllByTestId('mail-detail').length).toBeGreaterThan(0);
     });
   });
 
@@ -156,7 +157,7 @@ describe('MailPage', () => {
     });
     fireEvent.click(screen.getByText('Test Subject'));
     await waitFor(() => {
-      expect(screen.getByTestId('mail-detail-toolbar')).toBeInTheDocument();
+      expect(screen.getAllByTestId('mail-detail-toolbar').length).toBeGreaterThan(0);
     });
   });
 });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { SettingsRolesPage } from '@/pages/SettingsRoles';
 
@@ -8,6 +8,66 @@ vi.mock('@/components/ui/Toast', () => ({
   useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
 }));
 
+const { mockRoles, forceUpdateRef } = vi.hoisted(() => {
+  const forceUpdateRef: { current: () => void } = { current: () => {} };
+  const mockRoles = [
+    { id: '1', name: 'Administrator', permissions: { all: true }, denied_permissions: [], field_permissions: {} },
+    { id: '2', name: 'Mitarbeiter', permissions: { 'companies.read': true, 'contacts.read': true }, denied_permissions: [], field_permissions: {} },
+    { id: '3', name: 'Gast', permissions: {}, denied_permissions: [], field_permissions: {} },
+  ];
+  return { mockRoles, forceUpdateRef };
+});
+
+vi.mock('@/api/hooks', () => ({
+  useRoles: () => {
+    const [, setUpdate] = React.useState({});
+    forceUpdateRef.current = () => setUpdate({});
+    return {
+      data: {
+        items: mockRoles.map(r => ({ ...r })),
+        total: mockRoles.length,
+      },
+      isLoading: false,
+      isError: false,
+      error: null,
+      refetch: () => forceUpdateRef.current(),
+    };
+  },
+  useCreateRole: () => ({
+    mutateAsync: async (data: any) => {
+      const newRole = { id: String(mockRoles.length + 1), name: data.name, permissions: data.permissions || {}, denied_permissions: data.denied_permissions || [], field_permissions: data.field_permissions || {} };
+      mockRoles.push(newRole);
+      forceUpdateRef.current();
+      return newRole;
+    },
+    isPending: false,
+  }),
+  useUpdateRole: () => ({
+    mutateAsync: async (payload: any) => {
+      const idx = mockRoles.findIndex(r => r.id === payload.id);
+      if (idx >= 0) {
+        mockRoles[idx] = { ...mockRoles[idx], ...payload.data };
+      }
+      forceUpdateRef.current();
+      return undefined;
+    },
+    isPending: false,
+  }),
+  useDeleteRole: () => ({ mutateAsync: vi.fn().mockResolvedValue(undefined), isPending: false }),
+  usePermissions: () => ({
+    data: {
+      all: [
+        { key: 'companies.read', label: 'Firmen lesen', category: 'system' },
+        { key: 'companies.write', label: 'Firmen schreiben', category: 'system' },
+        { key: 'contacts.read', label: 'Kontakte lesen', category: 'system' },
+        { key: 'contacts.write', label: 'Kontakte schreiben', category: 'system' },
+      ],
+      field_definitions: [],
+    },
+    isLoading: false,
+  }),
+}));
+
 describe('SettingsRolesPage', () => {
   it('renders roles page', () => {
     render(<MemoryRouter><SettingsRolesPage /></MemoryRouter>);
@@ -52,13 +112,15 @@ describe('SettingsRolesPage', () => {
     expect(checkboxes.length).toBeGreaterThan(0);
   });
 
-  it('can enter role name and save', () => {
+  it('can enter role name and save', async () => {
     render(<MemoryRouter><SettingsRolesPage /></MemoryRouter>);
     fireEvent.click(screen.getByTestId('create-role-btn'));
     const nameInput = screen.getByTestId('new-role-name');
     fireEvent.change(nameInput, { target: { value: 'Vertrieb' } });
     fireEvent.click(screen.getByTestId('save-role-btn'));
-    expect(screen.getByText('Vertrieb')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('Vertrieb')).toBeInTheDocument();
+    });
   });
 
   it('opens edit modal for existing role', () => {
@@ -67,13 +129,15 @@ describe('SettingsRolesPage', () => {
     expect(screen.getByTestId('edit-role-form')).toBeInTheDocument();
   });
 
-  it('can update role name via edit modal', () => {
+  it('can update role name via edit modal', async () => {
     render(<MemoryRouter><SettingsRolesPage /></MemoryRouter>);
     fireEvent.click(screen.getByTestId('edit-role-1'));
     const inputs = screen.getByTestId('edit-role-form').querySelectorAll('input:not([type="checkbox"])');
     fireEvent.change(inputs[0], { target: { value: 'Super Admin' } });
     fireEvent.click(screen.getByTestId('update-role-btn'));
-    expect(screen.getByText('Super Admin')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('Super Admin')).toBeInTheDocument();
+    });
   });
 
   it('renders permission badges for roles', () => {

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

@@ -11,6 +11,7 @@ const mockUsers = [
 ];
 
 vi.mock('@/api/hooks', () => ({
+  useRoles: () => ({ data: { items: [] }, isLoading: false }),
   useUsers: () => ({
     data: { items: mockUsers, total: 3 },
     isLoading: false,

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

@@ -3,6 +3,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { AppShell } from '@/components/layout/AppShell';
+import { useAuthStore } from '@/store/authStore';
 
 vi.mock('@/api/hooks', () => ({
   useLogout: () => ({ mutateAsync: vi.fn(), isPending: false }),
@@ -21,6 +22,24 @@ function renderWithRouter(initialPath = '/dashboard') {
 }
 
 describe('AppShell', () => {
+  beforeEach(() => {
+    useAuthStore.setState({
+      isAuthenticated: true,
+      user: {
+        id: '1',
+        email: 'max@test.de',
+        first_name: 'Max',
+        last_name: 'Mustermann',
+        role: 'admin',
+        avatar_url: null,
+        tenants: [
+          { id: 't1', name: 'Firma Alpha', slug: 'alpha' },
+          { id: 't2', name: 'Firma Beta', slug: 'beta' },
+        ],
+      },
+      currentTenant: { id: 't1', name: 'Firma Alpha', slug: 'alpha' },
+    });
+  });
   it('renders sidebar, topbar, and content area', () => {
     renderWithRouter();
     expect(screen.getByTestId('app-shell')).toBeInTheDocument();