feat(tenants): UI fuer Mandanten-Verwaltung — Modul 4/16 des UI-Backlogs

Backend existierte vollstaendig (list, create, list users, assign user;
tenants:read/write), Frontend hatte 0% Abdeckung.

- api/tenants.ts: TanStack-Hooks (useTenants, useTenantUsers mit
  enabled-Gating, create, assignUser mit Cache-Invalidierung)
- pages/Tenants.tsx: Tenant-Karten (Name, Slug, Standard-Badge),
  expandierbare User-Liste pro Tenant (Rolle, E-Mail), Create-Dialog
  (Name + Slug mit Auto-Normalisierung), Assign-User-Dialog mit
  User-Picker (bereits zugewiesene gefiltert) — Create/Users/Assign
  hinter tenants:write gegated
- Platzierung: Settings-Subpage /settings/tenants (statisch, Core-Route)
  + Settings-Nav-Item
- i18n tenants.* de/en

Verifikation: Vitest 8/8 (Rendering, Standard-Badge, Expand-User-Liste,
Create-Flow, Assign-Flow, Permission-Gating, Empty/Error) · tsc exit 0 ·
production build exit 0.

frontend/src/__tests__/pages/Tenants.test.tsx

@@ -0,0 +1,194 @@
+/**
+ * Tenants page tests — multi-tenant management (module 4/16).
+ *
+ * Covers: rendering, tenant cards with default badge, expandable user list,
+ * create dialog, assign user flow, permission gating (tenants:write),
+ * empty and error states.
+ */
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { TenantsPage } from '@/pages/Tenants';
+import type { Tenant } from '@/api/tenants';
+import type { UserResponse } from '@/api/users';
+
+const createMut = vi.fn().mockImplementation((_payload, opts) => {
+  opts?.onSuccess?.({});
+  return Promise.resolve({});
+});
+const assignMut = vi.fn().mockImplementation((_payload, opts) => {
+  opts?.onSuccess?.({ message: 'ok' });
+  return Promise.resolve({});
+});
+
+const makeTenant = (overrides: Partial<Tenant> = {}): Tenant => ({
+  id: 'tn-1',
+  name: 'Default Org',
+  slug: 'default-org',
+  is_default: true,
+  ...overrides,
+});
+
+const TENANT_USER = {
+  id: '11111111-1111-1111-1111-111111111111',
+  email: 'admin@example.com',
+  name: 'Administrator',
+  role: 'admin',
+  is_active: true,
+};
+
+const ALL_USER: UserResponse = {
+  id: '22222222-2222-2222-2222-222222222222',
+  email: 'other@example.com',
+  name: 'Other User',
+  first_name: null,
+  last_name: null,
+  avatar_url: null,
+  role: 'viewer',
+  role_id: null,
+  is_active: true,
+  tenant_id: 'tn-1',
+};
+
+let mockTenants: Tenant[] = [];
+let mockTenantUsers: typeof TENANT_USER[] = [];
+let mockCanWrite = true;
+let mockError = false;
+
+vi.mock('@/api/tenants', () => ({
+  useTenants: () => ({
+    data: { items: mockTenants },
+    isLoading: false,
+    isError: mockError,
+    isFetching: false,
+    refetch: vi.fn(),
+  }),
+  useTenantUsers: (tenantId: string | null) => ({
+    data: tenantId ? { items: mockTenantUsers } : undefined,
+    isLoading: false,
+  }),
+  useCreateTenant: () => ({
+    mutate: createMut,
+    isPending: false,
+  }),
+  useAssignUserToTenant: () => ({
+    mutate: assignMut,
+    isPending: false,
+  }),
+}));
+
+vi.mock('@/api/users', () => ({
+  useUsers: () => ({
+    data: { items: [ALL_USER], total: 1, page: 1, page_size: 100 },
+    isLoading: false,
+  }),
+}));
+
+vi.mock('@/hooks/usePermission', () => ({
+  usePermission: () => ({
+    hasPermission: (perm: string) => mockCanWrite || perm !== 'tenants:write',
+  }),
+}));
+
+function renderPage() {
+  return render(
+    <MemoryRouter>
+      <TenantsPage />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockTenants = [];
+  mockTenantUsers = [];
+  mockCanWrite = true;
+  mockError = false;
+});
+
+describe('TenantsPage', () => {
+  it('renders the page with title', () => {
+    renderPage();
+    expect(screen.getByTestId('tenants-page')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no tenants exist', () => {
+    renderPage();
+    expect(screen.getByTestId('tenants-empty')).toBeInTheDocument();
+  });
+
+  it('shows error state on load failure', () => {
+    mockError = true;
+    renderPage();
+    expect(screen.getByTestId('tenants-error')).toBeInTheDocument();
+  });
+
+  it('renders tenant cards with name, slug and default badge', () => {
+    mockTenants = [makeTenant()];
+    renderPage();
+    expect(screen.getByTestId('tenant-card-tn-1')).toBeInTheDocument();
+    expect(screen.getByText('Default Org')).toBeInTheDocument();
+    expect(screen.getByText('default-org')).toBeInTheDocument();
+    // Default badge — 'Standard' appears exactly once (the tenant name
+    // 'Default Org' would also match a /default/i regex, so match exactly)
+    expect(screen.getByText(/^standard$/i)).toBeInTheDocument();
+  });
+
+  it('expands the user list via the toggle', async () => {
+    mockTenants = [makeTenant()];
+    mockTenantUsers = [TENANT_USER];
+    renderPage();
+    fireEvent.click(screen.getByTestId('tenant-users-toggle-tn-1'));
+    expect(await screen.findByTestId('tenant-users-list-tn-1')).toBeInTheDocument();
+    expect(screen.getByTestId(`tenant-user-tn-1-${TENANT_USER.id}`)).toBeInTheDocument();
+    expect(screen.getByText('Administrator')).toBeInTheDocument();
+  });
+
+  it('creates a tenant via the dialog', async () => {
+    renderPage();
+    fireEvent.click(screen.getByTestId('tenant-create-open'));
+    expect(screen.getByTestId('tenant-create-submit')).toBeInTheDocument();
+
+    const nameInput = screen.getByLabelText(/name/i, { selector: 'input' }) as HTMLInputElement;
+    fireEvent.change(nameInput, { target: { value: 'Zweite Firma' } });
+    const slugInput = screen.getByLabelText(/slug/i, { selector: 'input' }) as HTMLInputElement;
+    fireEvent.change(slugInput, { target: { value: 'zweite-firma' } });
+
+    fireEvent.click(screen.getByTestId('tenant-create-submit'));
+
+    await waitFor(() => {
+      expect(createMut).toHaveBeenCalledWith(
+        { name: 'Zweite Firma', slug: 'zweite-firma' },
+        expect.anything(),
+      );
+    });
+  });
+
+  it('hides create and toggles without tenants:write', () => {
+    mockTenants = [makeTenant()];
+    mockCanWrite = false;
+    renderPage();
+    expect(screen.queryByTestId('tenant-create-open')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('tenant-users-toggle-tn-1')).not.toBeInTheDocument();
+  });
+
+  it('assigns a user to the expanded tenant', async () => {
+    mockTenants = [makeTenant()];
+    mockTenantUsers = [TENANT_USER];
+    renderPage();
+    fireEvent.click(screen.getByTestId('tenant-users-toggle-tn-1'));
+    fireEvent.click(await screen.findByTestId('tenant-assign-open'));
+
+    const select = screen.getByRole('combobox');
+    fireEvent.change(select, { target: { value: ALL_USER.id } });
+    fireEvent.click(screen.getByTestId('tenant-assign-submit'));
+
+    await waitFor(() => {
+      expect(assignMut).toHaveBeenCalledWith(
+        { tenantId: 'tn-1', userId: ALL_USER.id },
+        expect.anything(),
+      );
+    });
+  });
+});

frontend/src/api/tenants.ts

@@ -0,0 +1,85 @@
+/**
+ * Tenants API client — multi-tenant management.
+ *
+ * Backend: /api/v1/tenants (list, create, list users, assign user).
+ * Permissions: tenants:read (list) / tenants:write (create, users, assign).
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { apiGet, apiPost } from '@/api/client';
+
+export interface Tenant {
+  id: string;
+  name: string;
+  slug: string;
+  is_default: boolean;
+}
+
+export interface TenantListResponse {
+  items: Tenant[];
+}
+
+export interface TenantUser {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  is_active: boolean;
+}
+
+export interface TenantUsersResponse {
+  items: TenantUser[];
+}
+
+export interface TenantCreatePayload {
+  name: string;
+  slug: string;
+}
+
+// ─── Query hooks ─────────────────────────────────────────────
+
+export function useTenants() {
+  return useQuery<TenantListResponse>({
+    queryKey: ['tenants'],
+    queryFn: () => apiGet<TenantListResponse>('/tenants'),
+  });
+}
+
+export function useTenantUsers(tenantId: string | null) {
+  return useQuery<TenantUsersResponse>({
+    queryKey: ['tenants', tenantId, 'users'],
+    queryFn: () => apiGet<TenantUsersResponse>(`/tenants/${tenantId}/users`),
+    enabled: !!tenantId,
+  });
+}
+
+// ─── Mutation hooks ──────────────────────────────────────────
+
+export function useCreateTenant() {
+  const qc = useQueryClient();
+  return useMutation<
+    { id: string; name: string; slug: string },
+    Error,
+    TenantCreatePayload
+  >({
+    mutationFn: (data) => apiPost('/tenants', data),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['tenants'] });
+    },
+  });
+}
+
+export function useAssignUserToTenant() {
+  const qc = useQueryClient();
+  return useMutation<
+    { message: string },
+    Error,
+    { tenantId: string; userId: string }
+  >({
+    mutationFn: ({ tenantId, userId }) =>
+      apiPost(`/tenants/${tenantId}/users`, { user_id: userId }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['tenants'] });
+    },
+  });
+}

frontend/src/i18n/locales/de.json

@@ -1684,5 +1684,26 @@
     "revokeConfirm": "Token '{{name}}' wirklich widerrufen? Anwendungen damit verlieren sofort den Zugriff.",
     "empty": "Keine API-Tokens vorhanden.",
     "loadError": "API-Tokens konnten nicht geladen werden."
+  },
+  "tenants": {
+    "title": "Mandanten",
+    "create": "Mandant erstellen",
+    "createTitle": "Neuen Mandanten erstellen",
+    "createSubmit": "Erstellen",
+    "name": "Name",
+    "namePlaceholder": "z.B. Zweite Firma GmbH",
+    "slug": "Slug",
+    "slugPlaceholder": "z.B. zweite-firma",
+    "slugHelper": "Kleingeschrieben, Bindestriche statt Leerzeichen.",
+    "users": "Benutzer",
+    "loadingUsers": "Lade Benutzer...",
+    "assign": "Benutzer zuweisen",
+    "assignTitle": "Benutzer zu {{name}} zuweisen",
+    "assignSubmit": "Zuweisen",
+    "user": "Benutzer",
+    "userPlaceholder": "Benutzer auswaehlen",
+    "defaultBadge": "Standard",
+    "empty": "Keine Mandanten vorhanden.",
+    "loadError": "Mandanten konnten nicht geladen werden."
   }
 }

frontend/src/i18n/locales/en.json

@@ -1684,5 +1684,26 @@
     "revokeConfirm": "Really revoke token '{{name}}'? Applications using it lose access immediately.",
     "empty": "No API tokens yet.",
     "loadError": "Failed to load API tokens."
+  },
+  "tenants": {
+    "title": "Tenants",
+    "create": "Create tenant",
+    "createTitle": "Create a new tenant",
+    "createSubmit": "Create",
+    "name": "Name",
+    "namePlaceholder": "e.g. Second Company Ltd",
+    "slug": "Slug",
+    "slugPlaceholder": "e.g. second-company",
+    "slugHelper": "Lowercase, hyphens instead of spaces.",
+    "users": "Users",
+    "loadingUsers": "Loading users...",
+    "assign": "Assign user",
+    "assignTitle": "Assign user to {{name}}",
+    "assignSubmit": "Assign",
+    "user": "User",
+    "userPlaceholder": "Select a user",
+    "defaultBadge": "Default",
+    "empty": "No tenants yet.",
+    "loadError": "Failed to load tenants."
   }
 }

frontend/src/pages/Settings.tsx

@@ -49,6 +49,7 @@ export function SettingsPage() {
     { to: '/settings/workspaces', label: 'Workspaces', icon: '\ud83d\udd58\ufe0f' },
     { to: '/settings/backup', label: 'Backup & Restore', icon: '\ud83d\udcbe' },
     { to: '/settings/api-tokens', label: 'API-Tokens', icon: '\ud83d\udd11' },
+    { to: '/settings/tenants', label: 'Mandanten', icon: '\ud83c\udfe2' },
   ];
 
   const existingPaths = new Set(hardcodedNavItems.map(item => item.to));

frontend/src/pages/Tenants.tsx

@@ -0,0 +1,331 @@
+/**
+ * Tenants settings page — multi-tenant management (UI-Backlog module 4/16).
+ *
+ * Backend: /api/v1/tenants (list, create, list users, assign user).
+ * Permissions: tenants:read (list) / tenants:write (create, users, assign).
+ */
+
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Building2,
+  Plus,
+  ChevronDown,
+  ChevronRight,
+  UserPlus,
+  AlertTriangle,
+  Inbox,
+} from 'lucide-react';
+import {
+  useTenants,
+  useTenantUsers,
+  useCreateTenant,
+  useAssignUserToTenant,
+  type Tenant,
+} from '@/api/tenants';
+import { useUsers } from '@/api/users';
+import { usePermission } from '@/hooks/usePermission';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Modal } from '@/components/ui/Modal';
+import { Select } from '@/components/ui/Select';
+import { Input } from '@/components/ui/Input';
+import { Badge } from '@/components/ui/Badge';
+
+function TenantCard({
+  tenant,
+  canWrite,
+  isExpanded,
+  onToggle,
+}: {
+  tenant: Tenant;
+  canWrite: boolean;
+  isExpanded: boolean;
+  onToggle: (tenant: Tenant) => void;
+}) {
+  const { t } = useTranslation();
+  const { data: usersData, isLoading: usersLoading } = useTenantUsers(
+    canWrite && isExpanded ? tenant.id : null,
+  );
+
+  return (
+    <Card className="p-4" data-testid={`tenant-card-${tenant.id}`}>
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
+          <Building2 className="w-4 h-4 text-primary-600 flex-shrink-0" aria-hidden="true" />
+          <span className="text-sm font-medium text-secondary-900 dark:text-secondary-100">
+            {tenant.name}
+          </span>
+          <span className="text-xs text-secondary-500">{tenant.slug}</span>
+          {tenant.is_default && (
+            <Badge variant="primary">{t('tenants.defaultBadge')}</Badge>
+          )}
+        </div>
+        {canWrite && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onToggle(tenant)}
+            aria-expanded={isExpanded}
+            aria-label={t('tenants.users')}
+            data-testid={`tenant-users-toggle-${tenant.id}`}
+          >
+            {isExpanded
+              ? <ChevronDown className="w-4 h-4" aria-hidden="true" />
+              : <ChevronRight className="w-4 h-4" aria-hidden="true" />}
+            <span className="text-xs ml-1">{t('tenants.users')}</span>
+          </Button>
+        )}
+      </div>
+
+      {canWrite && isExpanded && (
+        <div className="mt-3 border-t border-secondary-200 dark:border-secondary-700 pt-3">
+          {usersLoading && (
+            <div className="text-xs text-secondary-500" data-testid={`tenant-users-loading-${tenant.id}`}>
+              {t('tenants.loadingUsers')}
+            </div>
+          )}
+          <ul className="space-y-1" data-testid={`tenant-users-list-${tenant.id}`}>
+            {(usersData?.items ?? []).map((u) => (
+              <li
+                key={u.id}
+                className="flex items-center justify-between gap-2 text-sm"
+                data-testid={`tenant-user-${tenant.id}-${u.id}`}
+              >
+                <span className="truncate">
+                  {u.name} <span className="text-secondary-400">({u.email})</span>
+                </span>
+                <span className="flex items-center gap-1 flex-shrink-0">
+                  <Badge variant="secondary">{u.role}</Badge>
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </Card>
+  );
+}
+
+function CreateTenantDialog({
+  open,
+  onClose,
+  onSubmit,
+  isSubmitting,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (payload: { name: string; slug: string }) => void;
+  isSubmitting: boolean;
+}) {
+  const { t } = useTranslation();
+  const [name, setName] = useState('');
+  const [slug, setSlug] = useState('');
+
+  const valid = name.trim().length > 0 && slug.trim().length > 0;
+
+  const submit = () => {
+    if (!valid) return;
+    onSubmit({ name: name.trim(), slug: slug.trim() });
+  };
+
+  return (
+    <Modal open={open} onClose={onClose} title={t('tenants.createTitle')}>
+      <div className="space-y-4">
+        <Input
+          label={t('tenants.name')}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+          placeholder={t('tenants.namePlaceholder')}
+        />
+        <Input
+          label={t('tenants.slug')}
+          value={slug}
+          onChange={(e) => setSlug(e.target.value.replace(/\s+/g, '-').toLowerCase())}
+          required
+          placeholder={t('tenants.slugPlaceholder')}
+          helperText={t('tenants.slugHelper')}
+        />
+        <div className="flex justify-end gap-2 pt-2">
+          <Button variant="ghost" onClick={onClose}>{t('common.cancel')}</Button>
+          <Button onClick={submit} disabled={!valid || isSubmitting} data-testid="tenant-create-submit">
+            {t('tenants.createSubmit')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+function AssignUserDialog({
+  tenant,
+  open,
+  onClose,
+  onSubmit,
+  isSubmitting,
+  existingUserIds,
+}: {
+  tenant: Tenant | null;
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (userId: string) => void;
+  isSubmitting: boolean;
+  existingUserIds: Set<string>;
+}) {
+  const { t } = useTranslation();
+  const [userId, setUserId] = useState('');
+  const { data: usersData } = useUsers(1, 100);
+
+  const userOptions = useMemo(
+    () =>
+      (usersData?.items ?? [])
+        .filter((u) => !existingUserIds.has(u.id))
+        .map((u) => ({ value: u.id, label: `${u.name} (${u.email})` })),
+    [usersData, existingUserIds],
+  );
+
+  return (
+    <Modal open={open} onClose={onClose} title={t('tenants.assignTitle', { name: tenant?.name ?? '' })}>
+      <div className="space-y-4">
+        <Select
+          label={t('tenants.user')}
+          options={userOptions}
+          value={userId}
+          onChange={(e) => setUserId(e.target.value)}
+          required
+          placeholder={t('tenants.userPlaceholder')}
+        />
+        <div className="flex justify-end gap-2 pt-2">
+          <Button variant="ghost" onClick={onClose}>{t('common.cancel')}</Button>
+          <Button onClick={() => userId && onSubmit(userId)} disabled={!userId || isSubmitting} data-testid="tenant-assign-submit">
+            {t('tenants.assignSubmit')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export function TenantsPage() {
+  const { t } = useTranslation();
+  const [showCreate, setShowCreate] = useState(false);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [assignTenant, setAssignTenant] = useState<Tenant | null>(null);
+  const { data, isLoading, isError } = useTenants();
+  const createMut = useCreateTenant();
+  const assignMut = useAssignUserToTenant();
+  const { hasPermission } = usePermission();
+  const { data: tenantUsersData } = useTenantUsers(
+    expandedId && hasPermission('tenants:write') ? expandedId : null,
+  );
+
+  const canWrite = hasPermission('tenants:write');
+  const isMutating = createMut.isPending || assignMut.isPending;
+
+  const handleCreate = (payload: { name: string; slug: string }) => {
+    createMut.mutate(payload, {
+      onSuccess: () => setShowCreate(false),
+    });
+  };
+
+  const handleAssign = (userId: string) => {
+    if (!assignTenant) return;
+    assignMut.mutate(
+      { tenantId: assignTenant.id, userId },
+      {
+        onSuccess: () => {
+          setAssignTenant(null);
+          // Keep the expanded panel fresh
+          setExpandedId(assignTenant.id);
+        },
+      },
+    );
+  };
+
+  const items = data?.items ?? [];
+  const existingUserIds = useMemo(
+    () => new Set((tenantUsersData?.items ?? []).map((u) => u.id)),
+    [tenantUsersData],
+  );
+
+  return (
+    <div className="max-w-3xl mx-auto p-4 sm:p-6 space-y-4" data-testid="tenants-page">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <h1 className="text-2xl font-bold text-secondary-900 dark:text-secondary-100">
+          {t('tenants.title')}
+        </h1>
+        {canWrite && (
+          <div className="flex gap-2">
+            {expandedId && (
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  const tenant = items.find((x) => x.id === expandedId);
+                  if (tenant) setAssignTenant(tenant);
+                }}
+                data-testid="tenant-assign-open"
+              >
+                <UserPlus className="w-4 h-4 mr-2" aria-hidden="true" />
+                {t('tenants.assign')}
+              </Button>
+            )}
+            <Button onClick={() => setShowCreate(true)} data-testid="tenant-create-open">
+              <Plus className="w-4 h-4 mr-2" aria-hidden="true" />
+              {t('tenants.create')}
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {isLoading && (
+        <div className="flex items-center justify-center min-h-[30vh]" role="status" data-testid="tenants-loading">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500" aria-hidden="true" />
+        </div>
+      )}
+
+      {isError && (
+        <Card className="p-6 flex items-center gap-3 text-danger-600" data-testid="tenants-error">
+          <AlertTriangle className="w-5 h-5" aria-hidden="true" />
+          <span>{t('tenants.loadError')}</span>
+        </Card>
+      )}
+
+      {!isLoading && !isError && items.length === 0 && (
+        <Card className="p-8 flex flex-col items-center gap-3 text-secondary-500" data-testid="tenants-empty">
+          <Inbox className="w-10 h-10" aria-hidden="true" />
+          <p>{t('tenants.empty')}</p>
+        </Card>
+      )}
+
+      <div className="space-y-3">
+        {items.map((tenant) => (
+          <TenantCard
+            key={tenant.id}
+            tenant={tenant}
+            canWrite={canWrite}
+            isExpanded={expandedId === tenant.id}
+            onToggle={(x) => setExpandedId(expandedId === x.id ? null : x.id)}
+          />
+        ))}
+      </div>
+
+      <CreateTenantDialog
+        open={showCreate}
+        onClose={() => setShowCreate(false)}
+        onSubmit={handleCreate}
+        isSubmitting={createMut.isPending}
+      />
+      <AssignUserDialog
+        tenant={assignTenant}
+        open={!!assignTenant}
+        onClose={() => setAssignTenant(null)}
+        onSubmit={handleAssign}
+        isSubmitting={assignMut.isPending}
+        existingUserIds={existingUserIds}
+      />
+    </div>
+  );
+}
+
+export default TenantsPage;

frontend/src/routes/index.tsx

@@ -46,6 +46,7 @@ const ActivityTimelinePage = React.lazy(() => import('@/pages/ActivityTimeline')
 const ApprovalsPage = React.lazy(() => import('@/pages/Approvals').then(m => ({ default: m.ApprovalsPage })));
 const DelegationsPage = React.lazy(() => import('@/pages/Delegations').then(m => ({ default: m.DelegationsPage })));
 const ApiTokensPage = React.lazy(() => import('@/pages/ApiTokens').then(m => ({ default: m.ApiTokensPage })));
+const TenantsPage = React.lazy(() => import('@/pages/Tenants').then(m => ({ default: m.TenantsPage })));
 const SettingsWebhooksPage = React.lazy(() => import('@/pages/SettingsWebhooks').then(m => ({ default: m.SettingsWebhooksPage })));
 const SettingsBackupPage = React.lazy(() => import('@/pages/SettingsBackup').then(m => ({ default: m.SettingsBackupPage })));
 const WorkspaceManagerPage = React.lazy(() => import('@/pages/SettingsWorkspaces').then(m => ({ default: m.WorkspaceManagerPage })));
@@ -206,6 +207,7 @@ const router = createBrowserRouter([
           { path: 'workspaces', element: withSuspense(<WorkspaceManagerPage />) },
           { path: 'backup', element: withSuspense(<SettingsBackupPage />) },
           { path: 'api-tokens', element: withSuspense(<ApiTokensPage />) },
+          { path: 'tenants', element: withSuspense(<TenantsPage />) },
           { path: 'rechte', element: <PermissionRoute permission="settings:read">{withSuspense(<SettingsRechtePage />)}</PermissionRoute> },
           // Phase Q2: plugin settings sub-pages render with bare sub-segments
           { path: '*', element: <ErrorBoundary>{<PluginRouteRenderer variant="settings" />}</ErrorBoundary> },