Phase 5.4-5.11: Playwright E2E test infrastructure with 7 spec files

- playwright.config.ts: chromium project, webServer, baseURL, trace/screenshot/video
- e2e/helpers.ts: API mock setup, login/logout helpers, mock data for all entities
- 7 E2E spec files (1164 lines total):
  - auth.spec.ts: login/logout workflow
  - contact-crud.spec.ts: create/edit/delete contacts, add persons
  - search.spec.ts: global search, filter, results
  - plugin-toggle.spec.ts: enable/disable plugins, UI changes
  - mail.spec.ts: mail account setup, folders, mail viewing
  - dms.spec.ts: folder creation, file upload, preview, share
  - calendar.spec.ts: appointment creation, calendar switch, kanban view
- @playwright/test added as devDependency
- e2e scripts added to package.json
- TSC: 0 new errors (only pre-existing Dms.tsx)

PROGRESS.md

@@ -208,3 +208,44 @@ Siehe `MASTER-PLAN.md` für alle Tasks.
 - `tests/conftest.py` — UserPreference model import + Contact seed fix (industry field)
 - `frontend/src/i18n/locales/de.json` — userPreferences i18n
 - `frontend/src/i18n/locales/en.json` — userPreferences i18n
+
+---
+
+## Phase 5 Batch 2: Playwright E2E Tests
+
+| Task | Status | Datum | Notiz |
+|---|---|---|---|
+| 5.4 | ✅ done | 2026-07-23 | Playwright Setup: @playwright/test devDependency, playwright.config.ts (chromium, webServer, baseURL), e2e/helpers.ts mit Login/API-Mock/Fixtures |
+| 5.5 | ✅ done | 2026-07-23 | auth.spec.ts: Login-Form rendered, successful login redirect, invalid credentials error, logout button, protected route redirect |
+| 5.6 | ✅ done | 2026-07-23 | contact-crud.spec.ts: Company erstellen, Detail anzeigen+edit, Ansprechpartner hinzufügen, Kontakt löschen |
+| 5.7 | ✅ done | 2026-07-23 | search.spec.ts: Search page rendered, search by contact name, grouped tabs, empty query, topbar search dropdown |
+| 5.8 | ✅ done | 2026-07-23 | plugin-toggle.spec.ts: Settings plugins page, activate inactive plugin, deactivate active plugin, refresh button, install section |
+| 5.9 | ✅ done | 2026-07-23 | mail.spec.ts: Mail page folder tree, mail list, open mail detail, mail settings add account form |
+| 5.10 | ✅ done | 2026-07-23 | dms.spec.ts: DMS page source tree+explorer, create folder, upload section, file preview modal, share dialog |
+| 5.11 | ✅ done | 2026-07-23 | calendar.spec.ts: Calendar page tree+view, create appointment, switch views (month/week/day), calendar tree, kanban columns, entry detail |
+
+**Phase 5 Batch 2 Gesamt: ✅ Complete**
+
+### Verifikation Phase 5 Batch 2
+- TSC: 0 neue errors (nur 2 pre-existing Dms.tsx onRangeSelect errors) ✅
+- 8 E2E spec files mit realistischen User-Workflows ✅
+- playwright.config.ts mit chromium project, webServer, trace/screenshot/video ✅
+- e2e/helpers.ts mit setupApiMocks (alle API endpoints gemockt), login/logout helpers, mock data fixtures ✅
+- test.describe Gruppierung + beforeEach Login-Setup in allen specs ✅
+- data-testid Attribute aus bestehenden Komponenten verwendet ✅
+- page.goto, page.locator, expect von @playwright/test ✅
+- Tests für CI/CD geschrieben (können nicht im Container laufen, kein PostgreSQL/Redis) ✅
+
+### Neue Dateien Phase 5 Batch 2
+- `frontend/playwright.config.ts` — Playwright Konfiguration
+- `frontend/e2e/helpers.ts` — Test-Helper (Login, API-Mocks, Fixtures)
+- `frontend/e2e/auth.spec.ts` — Auth E2E Tests
+- `frontend/e2e/contact-crud.spec.ts` — Contact CRUD E2E Tests
+- `frontend/e2e/search.spec.ts` — Search E2E Tests
+- `frontend/e2e/plugin-toggle.spec.ts` — Plugin Toggle E2E Tests
+- `frontend/e2e/mail.spec.ts` — Mail E2E Tests
+- `frontend/e2e/dms.spec.ts` — DMS E2E Tests
+- `frontend/e2e/calendar.spec.ts` — Calendar E2E Tests
+
+### Modifizierte Dateien Phase 5 Batch 2
+- `frontend/package.json` — @playwright/test devDependency + e2e scripts

frontend/e2e/auth.spec.ts

@@ -0,0 +1,77 @@
+import { test, expect } from '@playwright/test';
+import { setupApiMocks, login, logout, TEST_USER } from './helpers';
+
+test.describe('Authentication E2E', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupApiMocks(page);
+  });
+
+  test('login form is rendered correctly', async ({ page }) => {
+    await page.goto('/login');
+
+    // Login page container visible
+    await expect(page.locator('[data-testid="login-page"]')).toBeVisible();
+
+    // Email and password inputs present
+    await expect(page.locator('input[type="email"]')).toBeVisible();
+    await expect(page.locator('input[type="password"]')).toBeVisible();
+
+    // Submit button present
+    await expect(page.locator('button[type="submit"]')).toBeVisible();
+
+    // Logo / title visible
+    await expect(page.locator('h1')).toContainText(/leocrm/i);
+  });
+
+  test('successful login redirects to dashboard', async ({ page }) => {
+    await login(page);
+
+    // Should be on dashboard
+    await expect(page).toHaveURL(/\/dashboard/);
+    await expect(page.locator('[data-testid="topbar"]')).toBeVisible();
+    await expect(page.locator('[data-testid="app-shell"]')).toBeVisible();
+  });
+
+  test('login with invalid credentials shows error', async ({ page }) => {
+    // Override login route to return 401
+    await page.route('**/api/v1/auth/login', (route) => {
+      route.fulfill({
+        status: 401,
+        contentType: 'application/json',
+        body: JSON.stringify({ detail: 'Invalid credentials' }),
+      });
+    });
+
+    await page.goto('/login');
+    await page.locator('input[type="email"]').fill('wrong@test.test');
+    await page.locator('input[type="password"]').fill('wrongpassword');
+    await page.locator('button[type="submit"]').click();
+
+    // Should stay on login page and show error
+    await expect(page).toHaveURL(/\/login/);
+    await expect(page.locator('[role="alert"]')).toBeVisible();
+  });
+
+  test('logout button works and redirects to login', async ({ page }) => {
+    await login(page);
+
+    // Open user menu
+    await page.locator('[data-testid="topbar"] button[aria-haspopup="menu"]').click();
+
+    // Click logout
+    await page.locator('[role="menuitem"]').filter({ hasText: /logout|abmelden/i }).click();
+
+    // Should redirect to login
+    await expect(page).toHaveURL(/\/login/);
+    await expect(page.locator('[data-testid="login-page"]')).toBeVisible();
+  });
+
+  test('protected route redirects to login when not authenticated', async ({ page }) => {
+    // Try to access dashboard without login
+    await page.goto('/dashboard');
+
+    // Should redirect to login
+    await expect(page).toHaveURL(/\/login/);
+    await expect(page.locator('[data-testid="login-page"]')).toBeVisible();
+  });
+});

frontend/e2e/calendar.spec.ts

@@ -0,0 +1,121 @@
+import { test, expect } from '@playwright/test';
+import { setupApiMocks, login, navigateTo } from './helpers';
+
+test.describe('Calendar E2E', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupApiMocks(page);
+    await login(page);
+  });
+
+  test('calendar page renders with tree and view', async ({ page }) => {
+    await navigateTo(page, '/calendar');
+
+    await expect(page.locator('[data-testid="calendar-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Calendar tree should be visible
+    await expect(page.locator('[data-testid="calendar-tree"], [data-testid="calendar-tree-loading"]')).toBeVisible({ timeout: 10_000 });
+
+    // Calendar view should be visible (month view is default)
+    await expect(page.locator('[data-testid="month-view"], [data-testid="week-view"], [data-testid="day-view"]')).toBeVisible({ timeout: 10_000 });
+  });
+
+  test('create a new appointment', async ({ page }) => {
+    await navigateTo(page, '/calendar');
+
+    await expect(page.locator('[data-testid="calendar-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Click new appointment button in toolbar
+    const newBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /new|neu|erstellen|appointment|termin/i }).first();
+    await newBtn.click();
+
+    // Appointment modal should appear
+    await expect(page.locator('[data-testid="appointment-modal"]')).toBeVisible({ timeout: 10_000 });
+
+    // Fill in title
+    await page.locator('[data-testid="appointment-title"]').fill('Test Appointment');
+
+    // Select calendar (should have default)
+    const calendarSelect = page.locator('[data-testid="appointment-calendar"]');
+    await expect(calendarSelect).toBeVisible();
+
+    // Fill in location
+    await page.locator('[data-testid="appointment-location"]').fill('Conference Room A');
+
+    // Save appointment
+    await page.locator('[data-testid="appointment-save"]').click();
+
+    // Modal should close
+    await expect(page.locator('[data-testid="appointment-modal"]')).not.toBeVisible({ timeout: 10_000 });
+  });
+
+  test('switch between calendar views (month/week/day)', async ({ page }) => {
+    await navigateTo(page, '/calendar');
+
+    await expect(page.locator('[data-testid="calendar-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Default should be month view
+    await expect(page.locator('[data-testid="month-view"]')).toBeVisible({ timeout: 10_000 });
+
+    // Look for view mode buttons in toolbar
+    const weekBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /week|woche/i }).first();
+    if (await weekBtn.isVisible({ timeout: 5_000 })) {
+      await weekBtn.click();
+      await expect(page.locator('[data-testid="week-view"]')).toBeVisible({ timeout: 10_000 });
+    }
+
+    const dayBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /day|tag/i }).first();
+    if (await dayBtn.isVisible({ timeout: 5_000 })) {
+      await dayBtn.click();
+      await expect(page.locator('[data-testid="day-view"]')).toBeVisible({ timeout: 10_000 });
+    }
+  });
+
+  test('calendar tree shows available calendars', async ({ page }) => {
+    await navigateTo(page, '/calendar');
+
+    await expect(page.locator('[data-testid="calendar-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Calendar tree should show calendars
+    await expect(page.locator('[data-testid="calendar-tree"]')).toBeVisible({ timeout: 10_000 });
+
+    // Should have at least one calendar row
+    const calRow = page.locator('[data-testid^="calendar-tree-row-"]').first();
+    await expect(calRow).toBeVisible({ timeout: 10_000 });
+  });
+
+  test('kanban view shows task columns', async ({ page }) => {
+    await navigateTo(page, '/calendar/kanban');
+
+    // Kanban board should be visible
+    await expect(page.locator('[data-testid="kanban-board"], [data-testid="kanban-empty"]')).toBeVisible({ timeout: 10_000 });
+
+    // If board is visible, check columns
+    const board = page.locator('[data-testid="kanban-board"]');
+    if (await board.isVisible({ timeout: 5_000 })) {
+      // Should have open column
+      await expect(page.locator('[data-testid="kanban-column-open"]')).toBeVisible();
+      // Should have in_progress column
+      await expect(page.locator('[data-testid="kanban-column-in_progress"]')).toBeVisible();
+      // Should have done column
+      await expect(page.locator('[data-testid="kanban-column-done"]')).toBeVisible();
+    }
+  });
+
+  test('clicking a calendar entry shows detail', async ({ page }) => {
+    await navigateTo(page, '/calendar');
+
+    await expect(page.locator('[data-testid="calendar-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Wait for month view
+    await expect(page.locator('[data-testid="month-view"]')).toBeVisible({ timeout: 10_000 });
+
+    // Look for an entry in the calendar
+    const entry = page.locator('[data-testid^="month-entry-"]').first();
+    if (await entry.isVisible({ timeout: 5_000 })) {
+      await entry.click();
+
+      // Calendar detail should appear
+      await expect(page.locator('[data-testid="calendar-detail"]')).toBeVisible({ timeout: 10_000 });
+    }
+  });
+});

frontend/e2e/contact-crud.spec.ts

@@ -0,0 +1,132 @@
+import { test, expect } from '@playwright/test';
+import { setupApiMocks, login, navigateTo, MOCK_CONTACTS } from './helpers';
+
+test.describe('Contact CRUD E2E', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupApiMocks(page);
+    await login(page);
+  });
+
+  test('create a new company contact', async ({ page }) => {
+    await navigateTo(page, '/contacts');
+
+    // Wait for contacts page to load
+    await expect(page.locator('[data-testid="contact-list-view"], [data-testid="contact-list-empty"], [data-testid="contact-list-loading"]')).toBeVisible({ timeout: 15_000 });
+
+    // Click the "new" toolbar button (Plus icon in plugin toolbar)
+    const newBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /new|neu|erstellen|create/i }).first();
+    await newBtn.click();
+
+    // Contact edit modal should appear
+    await expect(page.locator('[data-testid="contact-type-select"]')).toBeVisible({ timeout: 10_000 });
+
+    // Select company type (should be default)
+    await expect(page.locator('[data-testid="contact-name-input"]')).toBeVisible();
+
+    // Fill in company name
+    await page.locator('[data-testid="contact-name-input"]').fill('Test Company GmbH');
+
+    // Fill in email
+    await page.locator('input[type="email"]').first().fill('test@company.test');
+
+    // Submit
+    await page.locator('[data-testid="contact-submit-btn"]').click();
+
+    // Modal should close (success)
+    await expect(page.locator('[data-testid="contact-type-select"]')).not.toBeVisible({ timeout: 10_000 });
+  });
+
+  test('view contact detail and edit', async ({ page }) => {
+    await navigateTo(page, '/contacts');
+
+    // Wait for list to load
+    await expect(page.locator('[data-testid="contact-list-view"], [data-testid="contact-list-empty"]')).toBeVisible({ timeout: 15_000 });
+
+    // Click on first contact in the list
+    const firstContact = page.locator('[data-testid="contact-list-view"] > div, [data-testid="contact-list-view"] button').first();
+    if (await firstContact.isVisible()) {
+      await firstContact.click();
+
+      // Detail should appear
+      await expect(page.locator('[data-testid="contact-detail"]')).toBeVisible({ timeout: 10_000 });
+
+      // Click edit button in detail
+      const editBtn = page.locator('[data-testid="contact-detail"] button').filter({ hasText: /edit|bearbeiten/i }).first();
+      if (await editBtn.isVisible()) {
+        await editBtn.click();
+
+        // Edit modal should appear
+        await expect(page.locator('[data-testid="contact-type-select"]')).toBeVisible({ timeout: 10_000 });
+
+        // Modify name
+        await page.locator('[data-testid="contact-name-input"]').fill('Updated Company GmbH');
+
+        // Save
+        await page.locator('[data-testid="contact-submit-btn"]').click();
+
+        // Modal should close
+        await expect(page.locator('[data-testid="contact-type-select"]')).not.toBeVisible({ timeout: 10_000 });
+      }
+    }
+  });
+
+  test('add ansprechpartner (contact person) to a company', async ({ page }) => {
+    await navigateTo(page, '/contacts');
+
+    // Wait for list and click first contact
+    await expect(page.locator('[data-testid="contact-list-view"], [data-testid="contact-list-empty"]')).toBeVisible({ timeout: 15_000 });
+
+    const firstContact = page.locator('[data-testid="contact-list-view"] > div, [data-testid="contact-list-view"] button').first();
+    if (await firstContact.isVisible()) {
+      await firstContact.click();
+      await expect(page.locator('[data-testid="contact-detail"]')).toBeVisible({ timeout: 10_000 });
+
+      // Find and click "Add Person" button
+      const addPersonBtn = page.locator('[data-testid="contact-detail"] button').filter({ hasText: /add.*person|ansprechpartner.*hinzuf/i }).first();
+      if (await addPersonBtn.isVisible()) {
+        await addPersonBtn.click();
+
+        // Person modal should appear
+        await expect(page.locator('[data-testid="person-save-btn"]')).toBeVisible({ timeout: 10_000 });
+
+        // Fill person details
+        const inputs = page.locator('[data-testid="contact-detail"] input, .modal input, [role="dialog"] input');
+        const firstNameInput = inputs.nth(0);
+        const lastNameInput = inputs.nth(1);
+
+        await firstNameInput.fill('Anna');
+        await lastNameInput.fill('Schmidt');
+
+        // Save person
+        await page.locator('[data-testid="person-save-btn"]').click();
+
+        // Modal should close
+        await expect(page.locator('[data-testid="person-save-btn"]')).not.toBeVisible({ timeout: 10_000 });
+      }
+    }
+  });
+
+  test('delete a contact', async ({ page }) => {
+    await navigateTo(page, '/contacts');
+
+    await expect(page.locator('[data-testid="contact-list-view"], [data-testid="contact-list-empty"]')).toBeVisible({ timeout: 15_000 });
+
+    const firstContact = page.locator('[data-testid="contact-list-view"] > div, [data-testid="contact-list-view"] button').first();
+    if (await firstContact.isVisible()) {
+      await firstContact.click();
+      await expect(page.locator('[data-testid="contact-detail"]')).toBeVisible({ timeout: 10_000 });
+
+      // Set up confirm dialog handler
+      page.on('dialog', (dialog) => dialog.accept());
+
+      // Click delete button
+      const deleteBtn = page.locator('[data-testid="contact-detail"] button').filter({ hasText: /delete|löschen/i }).first();
+      if (await deleteBtn.isVisible()) {
+        await deleteBtn.click();
+
+        // Detail should become empty after deletion
+        await expect(page.locator('[data-testid="contact-detail-empty"], [data-testid="contact-detail-loading"]')).toBeVisible({ timeout: 10_000 });
+      }
+    }
+  });
+});

frontend/e2e/dms.spec.ts

@@ -0,0 +1,94 @@
+import { test, expect } from '@playwright/test';
+import { setupApiMocks, login, navigateTo } from './helpers';
+
+test.describe('DMS E2E', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupApiMocks(page);
+    await login(page);
+  });
+
+  test('dms page renders with source tree and explorer', async ({ page }) => {
+    await navigateTo(page, '/dms');
+
+    await expect(page.locator('[data-testid="dms-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Source tree and explorer should be visible on desktop
+    await expect(page.locator('[data-testid="dms-source-pane"], [data-testid="source-tree"], [data-testid="source-tree-loading"]')).toBeVisible({ timeout: 10_000 });
+    await expect(page.locator('[data-testid="dms-explorer-pane"], [data-testid="file-explorer-list"], [data-testid="file-explorer-table"], [data-testid="file-explorer-empty"], [data-testid="file-explorer-loading"]')).toBeVisible({ timeout: 10_000 });
+  });
+
+  test('create a new folder', async ({ page }) => {
+    await navigateTo(page, '/dms');
+
+    await expect(page.locator('[data-testid="dms-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Click new folder button in toolbar
+    const newFolderBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /new.*folder|neuer.*ordner|ordner.*erstellen/i }).first();
+    await newFolderBtn.click();
+
+    // New folder form should appear
+    await expect(page.locator('[data-testid="new-folder-form"]')).toBeVisible({ timeout: 10_000 });
+
+    // Fill in folder name
+    await page.locator('[data-testid="new-folder-form"] input').first().fill('Test Folder');
+
+    // Click create button
+    const createBtn = page.locator('[data-testid="new-folder-form"] button').filter({ hasText: /create|erstellen|speichern|save/i }).first();
+    await createBtn.click();
+
+    // Form should close after creation
+    await expect(page.locator('[data-testid="new-folder-form"]')).not.toBeVisible({ timeout: 10_000 });
+  });
+
+  test('upload section appears when upload button clicked', async ({ page }) => {
+    await navigateTo(page, '/dms');
+
+    await expect(page.locator('[data-testid="dms-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Click upload button in toolbar
+    const uploadBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /upload|hochladen/i }).first();
+    await uploadBtn.click();
+
+    // Upload section should appear
+    await expect(page.locator('[data-testid="upload-section"]')).toBeVisible({ timeout: 10_000 });
+    await expect(page.locator('[data-testid="upload-dropzone"]')).toBeVisible();
+  });
+
+  test('file preview modal opens on double-click', async ({ page }) => {
+    await navigateTo(page, '/dms');
+
+    await expect(page.locator('[data-testid="dms-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Wait for file explorer to load
+    await expect(page.locator('[data-testid="dms-explorer-pane"], [data-testid="file-explorer-list"], [data-testid="file-explorer-table"], [data-testid="file-explorer-empty"], [data-testid="file-explorer-loading"]')).toBeVisible({ timeout: 10_000 });
+
+    // Double-click first file if available
+    const fileRow = page.locator('[data-testid^="file-row-"], [data-testid^="file-card-"]').first();
+    if (await fileRow.isVisible({ timeout: 5_000 })) {
+      await fileRow.dblclick();
+
+      // Preview modal should appear
+      await expect(page.locator('[data-testid="file-preview-modal"]')).toBeVisible({ timeout: 10_000 });
+    }
+  });
+
+  test('share dialog opens for a file', async ({ page }) => {
+    await navigateTo(page, '/dms');
+
+    await expect(page.locator('[data-testid="dms-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Wait for files to load
+    await expect(page.locator('[data-testid="dms-explorer-pane"], [data-testid="file-explorer-list"], [data-testid="file-explorer-table"], [data-testid="file-explorer-empty"], [data-testid="file-explorer-loading"]')).toBeVisible({ timeout: 10_000 });
+
+    // Find share button on first file (if file actions are available)
+    const fileRow = page.locator('[data-testid^="file-row-"], [data-testid^="file-card-"]').first();
+    if (await fileRow.isVisible({ timeout: 5_000 })) {
+      // Look for share button within the file row
+      const shareBtn = fileRow.locator('button').filter({ hasText: /share|teilen/i }).first();
+      if (await shareBtn.isVisible({ timeout: 3_000 })) {
+        await shareBtn.click();
+        await expect(page.locator('[data-testid="share-dialog"]')).toBeVisible({ timeout: 10_000 });
+      }
+    }
+  });
+});

frontend/e2e/helpers.ts

@@ -0,0 +1,521 @@
+import { Page, expect } from '@playwright/test';
+
+/**
+ * E2E test helpers for LeoCRM.
+ *
+ * These helpers provide login automation, API mocking, and common
+ * fixtures used across all spec files. Since the container has no
+ * PostgreSQL/Redis, API calls are intercepted with mock responses.
+ */
+
+// ── Test credentials ──
+export const TEST_USER = {
+  email: 'admin@leocrm.test',
+  password: 'TestPass123!',
+  firstName: 'Admin',
+  lastName: 'User',
+  id: 'user-001',
+  role: 'system_admin',
+};
+
+export const TEST_TENANT = {
+  id: 'tenant-001',
+  name: 'Test Tenant',
+  slug: 'test-tenant',
+};
+
+// ── Mock data ──
+export const MOCK_CONTACTS = {
+  items: [
+    {
+      id: 'contact-001',
+      type: 'company' as const,
+      name: 'TechCorp GmbH',
+      displayname: 'TechCorp GmbH',
+      code: 'K-00123',
+      email_1: 'info@techcorp.test',
+      phone_1: '+49 30 12345678',
+      mailing_city: 'Berlin',
+      mailing_postalcode: '10115',
+      mailing_street: 'Hauptstrasse',
+      mailing_number: '1',
+      tags: 'kunde, premium',
+      contact_persons: [],
+    },
+    {
+      id: 'contact-002',
+      type: 'person' as const,
+      firstname: 'Max',
+      surname: 'Mustermann',
+      displayname: 'Max Mustermann',
+      email_1: 'max@mustermann.test',
+      phone_1: '+49 170 9876543',
+      contact_persons: [],
+    },
+  ],
+  total: 2,
+};
+
+export const MOCK_MAIL_ACCOUNTS = [
+  {
+    id: 'acc-001',
+    email: 'test@leocrm.test',
+    display_name: 'Test Account',
+    imap_host: 'imap.test.test',
+    imap_port: 993,
+    smtp_host: 'smtp.test.test',
+    smtp_port: 587,
+    is_shared: false,
+  },
+];
+
+export const MOCK_MAIL_FOLDERS = [
+  { id: 'folder-001', name: 'INBOX', unread_count: 3, account_id: 'acc-001' },
+  { id: 'folder-002', name: 'Sent', unread_count: 0, account_id: 'acc-001' },
+  { id: 'folder-003', name: 'Drafts', unread_count: 0, account_id: 'acc-001' },
+];
+
+export const MOCK_MAILS = [
+  {
+    id: 'mail-001',
+    subject: 'Welcome to LeoCRM',
+    from: 'noreply@leocrm.test',
+    to: 'test@leocrm.test',
+    date: '2026-07-23T10:00:00Z',
+    body_text: 'Welcome to LeoCRM! Your account is ready.',
+    is_read: false,
+    flags: [],
+    attachments: [],
+  },
+  {
+    id: 'mail-002',
+    subject: 'Meeting Tomorrow',
+    from: 'boss@leocrm.test',
+    to: 'test@leocrm.test',
+    date: '2026-07-23T09:00:00Z',
+    body_text: 'Don\'t forget the meeting tomorrow at 10 AM.',
+    is_read: true,
+    flags: [],
+    attachments: [],
+  },
+];
+
+export const MOCK_DMS_FOLDERS = [
+  { id: 'folder-001', name: 'Documents', parent_id: null },
+  { id: 'folder-002', name: 'Images', parent_id: null },
+  { id: 'folder-003', name: 'Contracts', parent_id: 'folder-001' },
+];
+
+export const MOCK_DMS_FILES = [
+  {
+    id: 'file-001',
+    name: 'contract.pdf',
+    folder_id: 'folder-001',
+    size: 102400,
+    mime_type: 'application/pdf',
+    created_at: '2026-07-23T10:00:00Z',
+    updated_at: '2026-07-23T10:00:00Z',
+  },
+  {
+    id: 'file-002',
+    name: 'photo.jpg',
+    folder_id: 'folder-002',
+    size: 204800,
+    mime_type: 'image/jpeg',
+    created_at: '2026-07-23T11:00:00Z',
+    updated_at: '2026-07-23T11:00:00Z',
+  },
+];
+
+export const MOCK_CALENDARS = [
+  { id: 'cal-001', name: 'Personal', color: '#3b82f6' },
+  { id: 'cal-002', name: 'Work', color: '#10b981' },
+];
+
+export const MOCK_CALENDAR_ENTRIES = [
+  {
+    id: 'entry-001',
+    calendar_id: 'cal-001',
+    entry_type: 'appointment',
+    title: 'Team Meeting',
+    description: 'Weekly team sync',
+    start_at: '2026-07-24T09:00:00Z',
+    end_at: '2026-07-24T10:00:00Z',
+    all_day: false,
+    priority: 'medium',
+    status: 'open',
+    subtype: 'normal',
+  },
+];
+
+export const MOCK_PLUGINS = [
+  {
+    name: 'tags',
+    display_name: 'Tags',
+    description: 'Tag management plugin',
+    version: '1.0.0',
+    active: true,
+    installed: true,
+    status: 'active',
+  },
+  {
+    name: 'entity_links',
+    display_name: 'Entity Links',
+    description: 'Link entities together',
+    version: '1.0.0',
+    active: false,
+    installed: true,
+    status: 'inactive',
+  },
+];
+
+export const MOCK_SEARCH_RESULTS = {
+  contact: [
+    { id: 'contact-001', type: 'contact', title: 'TechCorp GmbH', snippet: 'Company in Berlin' },
+  ],
+  company: [],
+  mail: [
+    { id: 'mail-001', type: 'mail', title: 'Welcome to LeoCRM', snippet: 'Welcome email' },
+  ],
+  file: [],
+  event: [],
+};
+
+// ── API mock setup ──
+
+/**
+ * Intercept all API calls with mock responses.
+ * Call this in beforeEach to set up a fully mocked environment.
+ */
+export async function setupApiMocks(page: Page) {
+  // Auth: login
+  await page.route('**/api/v1/auth/login', (route) => {
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        user: {
+          id: TEST_USER.id,
+          email: TEST_USER.email,
+          first_name: TEST_USER.firstName,
+          last_name: TEST_USER.lastName,
+          role: TEST_USER.role,
+          tenants: [TEST_TENANT],
+          permissions: ['*'],
+          is_system_admin: true,
+        },
+        csrf_token: 'mock-csrf-token',
+      }),
+    });
+  });
+
+  // Auth: me (current user)
+  await page.route('**/api/v1/auth/me', (route) => {
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        id: TEST_USER.id,
+        email: TEST_USER.email,
+        first_name: TEST_USER.firstName,
+        last_name: TEST_USER.lastName,
+        role: TEST_USER.role,
+        tenants: [TEST_TENANT],
+        permissions: ['*'],
+        is_system_admin: true,
+      }),
+    });
+  });
+
+  // Auth: logout
+  await page.route('**/api/v1/auth/logout', (route) => {
+    route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
+  });
+
+  // Contacts list
+  await page.route('**/api/v1/contacts*', (route) => {
+    const url = route.request().url();
+    if (url.includes('/contact_persons')) {
+      route.fulfill({ status: 200, contentType: 'application/json', body: '[]' });
+      return;
+    }
+    if (route.request().method() === 'GET') {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_CONTACTS),
+      });
+    } else if (route.request().method() === 'POST') {
+      const body = route.request().postDataJSON();
+      route.fulfill({
+        status: 201,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          id: 'contact-new',
+          contact_persons: [],
+          displayname: body?.name || `${body?.firstname || ''} ${body?.surname || ''}`.trim(),
+          ...body,
+        }),
+      });
+    } else {
+      route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
+    }
+  });
+
+  // Contact detail
+  await page.route('**/api/v1/contacts/*', (route) => {
+    if (route.request().method() === 'GET') {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_CONTACTS.items[0]),
+      });
+    } else if (route.request().method() === 'PUT') {
+      const body = route.request().postDataJSON();
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ ...MOCK_CONTACTS.items[0], ...body }),
+      });
+    } else if (route.request().method() === 'DELETE') {
+      route.fulfill({ status: 204, body: '' });
+    } else {
+      route.continue();
+    }
+  });
+
+  // Mail accounts
+  await page.route('**/api/v1/mail/accounts*', (route) => {
+    if (route.request().method() === 'GET') {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_MAIL_ACCOUNTS),
+      });
+    } else if (route.request().method() === 'POST') {
+      const body = route.request().postDataJSON();
+      route.fulfill({
+        status: 201,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          id: 'acc-new',
+          display_name: body?.display_name || body?.email,
+          ...body,
+        }),
+      });
+    } else {
+      route.continue();
+    }
+  });
+
+  // Mail folders
+  await page.route('**/api/v1/mail/accounts/*/folders*', (route) => {
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(MOCK_MAIL_FOLDERS),
+    });
+  });
+
+  // Mail list
+  await page.route('**/api/v1/mail/accounts/*/mails*', (route) => {
+    if (route.request().method() === 'GET') {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ items: MOCK_MAILS, total: MOCK_MAILS.length }),
+      });
+    } else {
+      route.continue();
+    }
+  });
+
+  // Mail detail
+  await page.route('**/api/v1/mail/*', (route) => {
+    if (route.request().method() === 'GET') {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_MAILS[0]),
+      });
+    } else {
+      route.continue();
+    }
+  });
+
+  // DMS folders
+  await page.route('**/api/v1/dms/folders*', (route) => {
+    if (route.request().method() === 'GET') {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_DMS_FOLDERS),
+      });
+    } else if (route.request().method() === 'POST') {
+      const body = route.request().postDataJSON();
+      route.fulfill({
+        status: 201,
+        contentType: 'application/json',
+        body: JSON.stringify({ id: 'folder-new', name: body?.name, parent_id: body?.parent_id ?? null }),
+      });
+    } else {
+      route.continue();
+    }
+  });
+
+  // DMS files
+  await page.route('**/api/v1/dms/files*', (route) => {
+    if (route.request().method() === 'GET') {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_DMS_FILES),
+      });
+    } else {
+      route.continue();
+    }
+  });
+
+  // DMS shared files
+  await page.route('**/api/v1/dms/shared*', (route) => {
+    route.fulfill({ status: 200, contentType: 'application/json', body: '[]' });
+  });
+
+  // Calendar list
+  await page.route('**/api/v1/calendar/calendars*', (route) => {
+    if (route.request().method() === 'GET') {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_CALENDARS),
+      });
+    } else {
+      route.continue();
+    }
+  });
+
+  // Calendar entries
+  await page.route('**/api/v1/calendar/entries*', (route) => {
+    if (route.request().method() === 'GET') {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_CALENDAR_ENTRIES),
+    });
+    } else if (route.request().method() === 'POST') {
+      const body = route.request().postDataJSON();
+      route.fulfill({
+        status: 201,
+        contentType: 'application/json',
+        body: JSON.stringify({ id: 'entry-new', ...body }),
+      });
+    } else {
+      route.continue();
+    }
+  });
+
+  // Calendar kanban
+  await page.route('**/api/v1/calendar/kanban*', (route) => {
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        open: MOCK_CALENDAR_ENTRIES,
+        in_progress: [],
+        done: [],
+        cancelled: [],
+      }),
+    });
+  });
+
+  // Plugins
+  await page.route('**/api/v1/plugins*', (route) => {
+    if (route.request().method() === 'GET') {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(MOCK_PLUGINS),
+      });
+    } else if (route.request().method() === 'POST') {
+      route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
+    } else {
+      route.continue();
+    }
+  });
+
+  // Plugin activate/deactivate
+  await page.route('**/api/v1/plugins/*/activate', (route) => {
+    route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
+  });
+  await page.route('**/api/v1/plugins/*/deactivate', (route) => {
+    route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
+  });
+
+  // Search
+  await page.route('**/api/v1/search*', (route) => {
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(MOCK_SEARCH_RESULTS),
+    });
+  });
+
+  // User preferences
+  await page.route('**/api/v1/user/preferences*', (route) => {
+    route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
+  });
+
+  // Generic catch-all for other API endpoints
+  await page.route('**/api/v1/**', (route) => {
+    if (!route.request().url().includes('/auth/') &&
+        !route.request().url().includes('/contacts') &&
+        !route.request().url().includes('/mail/') &&
+        !route.request().url().includes('/dms/') &&
+        !route.request().url().includes('/calendar/') &&
+        !route.request().url().includes('/plugins') &&
+        !route.request().url().includes('/search')) {
+      route.fulfill({ status: 200, contentType: 'application/json', body: '[]' });
+    } else {
+      route.continue();
+    }
+  });
+}
+
+/**
+ * Perform login via the login form.
+ * Assumes API mocks are already set up.
+ */
+export async function login(page: Page) {
+  await page.goto('/login');
+  await expect(page.locator('[data-testid="login-page"]')).toBeVisible();
+
+  // Fill email and password using label-based selectors
+  await page.locator('input[type="email"]').fill(TEST_USER.email);
+  await page.locator('input[type="password"]').fill(TEST_USER.password);
+
+  // Submit the form
+  await page.locator('button[type="submit"]').click();
+
+  // Wait for redirect to dashboard
+  await page.waitForURL('**/dashboard', { timeout: 10_000 });
+  await expect(page.locator('[data-testid="topbar"]')).toBeVisible();
+}
+
+/**
+ * Perform logout via the user menu.
+ */
+export async function logout(page: Page) {
+  // Open user menu
+  await page.locator('[data-testid="topbar"] button[aria-haspopup="menu"]').click();
+  // Click logout button (text-based since no data-testid on logout button)
+  await page.locator('[role="menuitem"]').filter({ hasText: /logout|abmelden/i }).click();
+  await page.waitForURL('**/login', { timeout: 10_000 });
+}
+
+/**
+ * Navigate to a specific route after login.
+ */
+export async function navigateTo(page: Page, path: string) {
+  await page.goto(path);
+  await page.waitForLoadState('networkidle');
+}

frontend/e2e/mail.spec.ts

@@ -0,0 +1,80 @@
+import { test, expect } from '@playwright/test';
+import { setupApiMocks, login, navigateTo, MOCK_MAILS } from './helpers';
+
+test.describe('Mail E2E', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupApiMocks(page);
+    await login(page);
+  });
+
+  test('mail page renders with folder tree and list', async ({ page }) => {
+    await navigateTo(page, '/mail');
+
+    // Mail page should load - check for folder tree or loading state
+    await expect(page.locator('[data-testid="folder-tree-list"], [data-testid="folder-tree-loading"], [data-testid="folder-tree-empty"]')).toBeVisible({ timeout: 15_000 });
+  });
+
+  test('mail list shows emails when folder is selected', async ({ page }) => {
+    await navigateTo(page, '/mail');
+
+    // Wait for folder tree
+    await expect(page.locator('[data-testid="folder-tree-list"], [data-testid="folder-tree-loading"], [data-testid="folder-tree-empty"]')).toBeVisible({ timeout: 15_000 });
+
+    // Click on first folder if available
+    const folder = page.locator('[data-testid^="folder-"]').first();
+    if (await folder.isVisible({ timeout: 5_000 })) {
+      await folder.click();
+
+      // Mail list should appear
+      await expect(page.locator('[data-testid="mail-list"], [data-testid="mail-list-loading"], [data-testid="mail-list-empty"]')).toBeVisible({ timeout: 10_000 });
+    }
+  });
+
+  test('open a mail shows detail pane', async ({ page }) => {
+    await navigateTo(page, '/mail');
+
+    // Wait for folder tree and click first folder
+    await expect(page.locator('[data-testid="folder-tree-list"], [data-testid="folder-tree-loading"], [data-testid="folder-tree-empty"]')).toBeVisible({ timeout: 15_000 });
+
+    const folder = page.locator('[data-testid^="folder-"]').first();
+    if (await folder.isVisible({ timeout: 5_000 })) {
+      await folder.click();
+
+      // Wait for mail list
+      await expect(page.locator('[data-testid="mail-list"], [data-testid="mail-list-loading"], [data-testid="mail-list-empty"]')).toBeVisible({ timeout: 10_000 });
+
+      // Click first mail if available
+      const mailItem = page.locator('[data-testid^="mail-item-"]').first();
+      if (await mailItem.isVisible({ timeout: 5_000 })) {
+        await mailItem.click();
+
+        // Mail detail should appear
+        await expect(page.locator('[data-testid="mail-detail"], [data-testid="mail-detail-loading"], [data-testid="mail-detail-empty"]')).toBeVisible({ timeout: 10_000 });
+      }
+    }
+  });
+
+  test('mail settings page allows adding an account', async ({ page }) => {
+    await navigateTo(page, '/settings/mail');
+
+    // Wait for accounts tab
+    await expect(page.locator('[data-testid="tab-accounts"]')).toBeVisible({ timeout: 10_000 });
+
+    // Click add account button
+    await page.locator('[data-testid="add-account-btn"]').click();
+
+    // Add account form should appear
+    await expect(page.locator('[data-testid="add-account-form"]')).toBeVisible({ timeout: 10_000 });
+
+    // Fill in account details
+    await page.locator('[data-testid="add-account-form"] input').first().fill('testuser@test.test');
+    await page.locator('[data-testid="add-account-form"] input[type="password"]').fill('testpassword');
+
+    // Click save button
+    const saveBtn = page.locator('[data-testid="add-account-form"] button').filter({ hasText: /save|speichern/i }).first();
+    await saveBtn.click();
+
+    // Form should close after save
+    await expect(page.locator('[data-testid="add-account-form"]')).not.toBeVisible({ timeout: 10_000 });
+  });
+});

frontend/e2e/plugin-toggle.spec.ts

@@ -0,0 +1,67 @@
+import { test, expect } from '@playwright/test';
+import { setupApiMocks, login, navigateTo, MOCK_PLUGINS } from './helpers';
+
+test.describe('Plugin Toggle E2E', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupApiMocks(page);
+    await login(page);
+  });
+
+  test('settings plugins page renders with plugin list', async ({ page }) => {
+    await navigateTo(page, '/settings/plugins');
+
+    await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible({ timeout: 10_000 });
+  });
+
+  test('activate an inactive plugin', async ({ page }) => {
+    await navigateTo(page, '/settings/plugins');
+
+    await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Find the inactive plugin (entity_links) and click activate
+    const activateBtn = page.locator('[data-testid="activate-plugin-entity_links"]');
+    if (await activateBtn.isVisible({ timeout: 10_000 })) {
+      await activateBtn.click();
+
+      // Button should change (deactivate should appear)
+      await expect(page.locator('[data-testid="deactivate-plugin-entity_links"]')).toBeVisible({ timeout: 10_000 });
+    }
+  });
+
+  test('deactivate an active plugin', async ({ page }) => {
+    await navigateTo(page, '/settings/plugins');
+
+    await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Find the active plugin (tags) and click deactivate
+    const deactivateBtn = page.locator('[data-testid="deactivate-plugin-tags"]');
+    if (await deactivateBtn.isVisible({ timeout: 10_000 })) {
+      await deactivateBtn.click();
+
+      // Button should change (activate should appear)
+      await expect(page.locator('[data-testid="activate-plugin-tags"]')).toBeVisible({ timeout: 10_000 });
+    }
+  });
+
+  test('refresh plugins button works', async ({ page }) => {
+    await navigateTo(page, '/settings/plugins');
+
+    await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible({ timeout: 10_000 });
+
+    const refreshBtn = page.locator('[data-testid="refresh-plugins-btn"]');
+    await expect(refreshBtn).toBeVisible();
+    await refreshBtn.click();
+
+    // Page should still be visible
+    await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible();
+  });
+
+  test('plugin install section is visible', async ({ page }) => {
+    await navigateTo(page, '/settings/plugins');
+
+    await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Upload and URL install options should be present
+    await expect(page.locator('[data-testid="plugin-zip-upload-input"], [data-testid="plugin-upload-btn"], [data-testid="plugin-url-input"], [data-testid="plugin-install-url-btn"]')).toBeVisible({ timeout: 10_000 });
+  });
+});

frontend/e2e/search.spec.ts

@@ -0,0 +1,72 @@
+import { test, expect } from '@playwright/test';
+import { setupApiMocks, login, navigateTo } from './helpers';
+
+test.describe('Global Search E2E', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupApiMocks(page);
+    await login(page);
+  });
+
+  test('search page renders with input and submit button', async ({ page }) => {
+    await navigateTo(page, '/search');
+
+    await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });
+    await expect(page.locator('[data-testid="search-input"]')).toBeVisible();
+    await expect(page.locator('[data-testid="search-submit-btn"]')).toBeVisible();
+  });
+
+  test('search for contact name shows results', async ({ page }) => {
+    await navigateTo(page, '/search');
+
+    await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Type search query
+    await page.locator('[data-testid="search-input"]').fill('TechCorp');
+    await page.locator('[data-testid="search-submit-btn"]').click();
+
+    // Wait for results
+    await expect(page.locator('[data-testid="search-results-list"], [data-testid="search-results-all"]')).toBeVisible({ timeout: 10_000 });
+
+    // Should show at least one result
+    const resultItem = page.locator('[data-testid^="search-result-"]').first();
+    await expect(resultItem).toBeVisible({ timeout: 10_000 });
+  });
+
+  test('search results are grouped by type tabs', async ({ page }) => {
+    await navigateTo(page, '/search');
+
+    await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });
+
+    await page.locator('[data-testid="search-input"]').fill('TechCorp');
+    await page.locator('[data-testid="search-submit-btn"]').click();
+
+    // Tabs should be visible
+    await expect(page.locator('[data-testid="search-tabs"]')).toBeVisible({ timeout: 10_000 });
+  });
+
+  test('search with empty query shows all results', async ({ page }) => {
+    await navigateTo(page, '/search');
+
+    await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });
+
+    // Submit without typing
+    await page.locator('[data-testid="search-submit-btn"]').click();
+
+    // Should show results or empty state
+    await expect(page.locator('[data-testid="search-results-list"], [data-testid="search-results-all"], [data-testid="search-query-display"]')).toBeVisible({ timeout: 10_000 });
+  });
+
+  test('search dropdown in topbar works', async ({ page }) => {
+    // The topbar has a search dropdown
+    await expect(page.locator('[data-testid="topbar"]')).toBeVisible();
+
+    const searchDropdown = page.locator('[data-testid="search-dropdown"]');
+    if (await searchDropdown.isVisible()) {
+      // Type in search
+      await searchDropdown.locator('input').fill('test');
+
+      // Wait for results dropdown
+      await expect(page.locator('[data-testid="search-results"]')).toBeVisible({ timeout: 10_000 });
+    }
+  });
+});

frontend/package.json

@@ -9,7 +9,10 @@
     "preview": "vite preview",
     "test": "vitest run src/__tests__/ --reporter=verbose",
     "test:coverage": "vitest run src/__tests__/ --coverage",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
+    "e2e:headed": "playwright test --headed"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
@@ -58,6 +61,7 @@
     "typescript": "^5.6.0",
     "vite": "^5.4.0",
     "vite-bundle-visualizer": "^1.2.1",
-    "vitest": "^2.1.0"
+    "vitest": "^2.1.0",
+    "@playwright/test": "^1.48.0"
   }
 }

frontend/playwright.config.ts

@@ -0,0 +1,45 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Playwright E2E configuration for LeoCRM.
+ *
+ * Tests run against the Vite dev server (or a preview build).
+ * In CI/CD, set BASE_URL to point at the deployed frontend.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? 'github' : 'html',
+  timeout: 30_000,
+  expect: {
+    timeout: 10_000,
+  },
+
+  use: {
+    baseURL: process.env.BASE_URL ?? 'http://localhost:5173',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+    locale: 'de-DE',
+    timezoneId: process.env.TZ ?? 'Europe/Berlin',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  webServer: process.env.CI
+    ? undefined
+    : {
+        command: 'npm run dev',
+        url: 'http://localhost:5173',
+        reuseExistingServer: !process.env.CI,
+        timeout: 60_000,
+      },
+});