sprint4+5: field-level permissions complete + universal ShareDialog frontend

app/core/permission_registry.py

@@ -9,6 +9,11 @@ from __future__ import annotations
 import logging
 from typing import Any
 
+from sqlalchemy import select
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.models.custom_field_definition import CustomFieldDefinition
+
 logger = logging.getLogger(__name__)
 
 # ── Core system permissions ──
@@ -60,13 +65,50 @@ CORE_PERMISSIONS: list[dict[str, str]] = [
 
 # ── Core field definitions for field-level permissions ──
 CORE_FIELD_DEFINITIONS: list[dict[str, str]] = [
+    # ── Contact fields ──
     {"module": "contacts", "field": "firstname", "label": "First Name", "sensitivity": "normal"},
     {"module": "contacts", "field": "surname", "label": "Last Name", "sensitivity": "normal"},
-    {"module": "contacts", "field": "email_1", "label": "Email", "sensitivity": "normal"},
+    {"module": "contacts", "field": "displayname", "label": "Display Name", "sensitivity": "normal"},
-    {"module": "contacts", "field": "phone_1", "label": "Phone", "sensitivity": "normal"},
+    {"module": "contacts", "field": "name", "label": "Name", "sensitivity": "normal"},
+    {"module": "contacts", "field": "email_1", "label": "Email 1", "sensitivity": "normal"},
+    {"module": "contacts", "field": "email_2", "label": "Email 2", "sensitivity": "normal"},
+    {"module": "contacts", "field": "phone_1", "label": "Phone 1", "sensitivity": "normal"},
+    {"module": "contacts", "field": "phone_2", "label": "Phone 2", "sensitivity": "normal"},
     {"module": "contacts", "field": "mobilephone", "label": "Mobile", "sensitivity": "sensitive"},
     {"module": "contacts", "field": "function", "label": "Position", "sensitivity": "normal"},
+    {"module": "contacts", "field": "website", "label": "Website", "sensitivity": "normal"},
+    {"module": "contacts", "field": "status", "label": "Status", "sensitivity": "normal"},
+    {"module": "contacts", "field": "type", "label": "Type", "sensitivity": "normal"},
+    {"module": "contacts", "field": "gender", "label": "Gender", "sensitivity": "normal"},
+    {"module": "contacts", "field": "suffix", "label": "Suffix", "sensitivity": "normal"},
+    {"module": "contacts", "field": "ext_name_line", "label": "Extra Name Line", "sensitivity": "normal"},
+    {"module": "contacts", "field": "country", "label": "Country", "sensitivity": "normal"},
+    # ── Financial / sensitive fields ──
+    {"module": "contacts", "field": "code", "label": "Code", "sensitivity": "sensitive"},
+    {"module": "contacts", "field": "accounting_code", "label": "Accounting Code", "sensitivity": "sensitive"},
+    {"module": "contacts", "field": "vendor_accounting_code", "label": "Vendor Accounting Code", "sensitivity": "sensitive"},
+    {"module": "contacts", "field": "vat_code", "label": "VAT Code", "sensitivity": "sensitive"},
+    {"module": "contacts", "field": "fiscal_code", "label": "Fiscal Code", "sensitivity": "sensitive"},
+    {"module": "contacts", "field": "commerce_code", "label": "Commerce Code", "sensitivity": "sensitive"},
+    {"module": "contacts", "field": "purchase_number", "label": "Purchase Number", "sensitivity": "sensitive"},
+    {"module": "contacts", "field": "bic", "label": "BIC", "sensitivity": "sensitive"},
+    # ── Addresses ──
+    {"module": "contacts", "field": "mailing_street", "label": "Mailing Street", "sensitivity": "normal"},
+    {"module": "contacts", "field": "mailing_city", "label": "Mailing City", "sensitivity": "normal"},
+    {"module": "contacts", "field": "mailing_postalcode", "label": "Mailing Postal Code", "sensitivity": "normal"},
+    {"module": "contacts", "field": "mailing_country", "label": "Mailing Country", "sensitivity": "normal"},
+    {"module": "contacts", "field": "visit_street", "label": "Visit Street", "sensitivity": "normal"},
+    {"module": "contacts", "field": "visit_city", "label": "Visit City", "sensitivity": "normal"},
+    {"module": "contacts", "field": "visit_postalcode", "label": "Visit Postal Code", "sensitivity": "normal"},
+    {"module": "contacts", "field": "visit_country", "label": "Visit Country", "sensitivity": "normal"},
+    {"module": "contacts", "field": "invoice_street", "label": "Invoice Street", "sensitivity": "normal"},
+    {"module": "contacts", "field": "invoice_city", "label": "Invoice City", "sensitivity": "normal"},
+    {"module": "contacts", "field": "invoice_postalcode", "label": "Invoice Postal Code", "sensitivity": "normal"},
+    {"module": "contacts", "field": "invoice_country", "label": "Invoice Country", "sensitivity": "normal"},
+    # ── Notes & Tags ──
     {"module": "contacts", "field": "notes", "label": "Notes", "sensitivity": "sensitive"},
+    {"module": "contacts", "field": "tags", "label": "Tags", "sensitivity": "sensitive"},
+    # ── User fields ──
     {"module": "users", "field": "email", "label": "Email", "sensitivity": "normal"},
     {"module": "users", "field": "name", "label": "Name", "sensitivity": "normal"},
     {"module": "users", "field": "role", "label": "Role", "sensitivity": "normal"},
@@ -166,6 +208,39 @@ class PermissionRegistry:
             result.extend(defs)
         return result
 
+    async def get_all_field_definitions_with_custom(
+        self,
+        db: AsyncSession,
+        tenant_id: Any,
+    ) -> list[dict[str, str]]:
+        """Return all field definitions including custom fields from DB.
+
+        Merges core field definitions with plugin-provided definitions
+        and active custom field definitions from the database.
+        """
+        result = list(self._core_field_definitions)
+
+        # Add plugin field definitions
+        for defs in self._field_definitions.values():
+            result.extend(defs)
+
+        # Load custom field definitions from DB
+        q = select(CustomFieldDefinition).where(
+            CustomFieldDefinition.tenant_id == tenant_id,
+            CustomFieldDefinition.is_active.is_(True),
+        )
+        custom_defs = await db.execute(q)
+        for cfd in custom_defs.scalars().all():
+            result.append({
+                "module": cfd.entity,
+                "field": cfd.name,
+                "label": cfd.label,
+                "sensitivity": cfd.sensitivity,
+                "custom": "true",
+            })
+
+        return result
+
 
 # Global instance
 _registry = PermissionRegistry()

app/core/permissions.py

@@ -461,6 +461,7 @@ def filter_fields_by_permission(
     """Filter response fields based on field-level permissions.
 
     Removes fields marked as "hidden", keeps others.
+    Also filters custom_fields (JSONB dict) entries that are marked as hidden.
     """
     if resolved.get("is_system_admin"):
         return data
@@ -476,5 +477,17 @@ def filter_fields_by_permission(
         perm = module_perms.get(key)
         if perm == "hidden":
             continue
+
+        # Special handling for custom_fields JSONB dict
+        if key == "custom_fields" and isinstance(value, dict):
+            filtered_custom = {}
+            for cf_key, cf_value in value.items():
+                cf_perm = module_perms.get(cf_key)
+                if cf_perm == "hidden":
+                    continue
+                filtered_custom[cf_key] = cf_value
+            result[key] = filtered_custom
+        else:
             result[key] = value
+
     return result

app/models/custom_field_definition.py

@@ -44,6 +44,9 @@ class CustomFieldDefinition(Base, TenantMixin, OwnedMixin):
     options: Mapped[list[str] | None] = mapped_column(JSON, nullable=True, default=list)
     default_value: Mapped[Any | None] = mapped_column(JSON, nullable=True, default=None)
 
+    # ── Sensitivity (field-level permissions) ──
+    sensitivity: Mapped[str] = mapped_column(String(20), nullable=False, default='normal')
+
     # ── Behaviour ──
     required: Mapped[bool] = mapped_column(Boolean, nullable=False, default=False)
     is_active: Mapped[bool] = mapped_column(Boolean, nullable=False, default=True)

frontend/src/api/entityPermissionHooks.ts

@@ -0,0 +1,131 @@
+/**
+ * React Query hooks for the universal entity permission API.
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchEntityPermissions,
+  createEntityPermission,
+  updateEntityPermission,
+  deleteEntityPermission,
+  fetchEntityAccess,
+  fetchEntityRegistry,
+  type CreateEntityPermissionPayload,
+  type UpdateEntityPermissionPayload,
+} from './entityPermissions';
+
+// ─── Query Key Factory ─────────────────────────────────────────────────────
+
+export const entityPermissionKeys = {
+  all: ['entityPermissions'] as const,
+  list: (entityType: string, entityId: string) =>
+    [...entityPermissionKeys.all, entityType, entityId] as const,
+  access: (entityType: string, entityId: string) =>
+    ['entityAccess', entityType, entityId] as const,
+  registry: () => ['entityRegistry'] as const,
+};
+
+// ─── Hooks ─────────────────────────────────────────────────────────────────
+
+/**
+ * Fetch all permissions for a given entity.
+ */
+export function useEntityPermissions(entityType: string, entityId: string) {
+  return useQuery({
+    queryKey: entityPermissionKeys.list(entityType, entityId),
+    queryFn: () => fetchEntityPermissions(entityType, entityId),
+    enabled: !!entityType && !!entityId,
+  });
+}
+
+/**
+ * Create a new permission on an entity.
+ */
+export function useCreateEntityPermission() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      entityType,
+      entityId,
+      data,
+    }: {
+      entityType: string;
+      entityId: string;
+      data: CreateEntityPermissionPayload;
+    }) => createEntityPermission(entityType, entityId, data),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: entityPermissionKeys.list(variables.entityType, variables.entityId),
+      });
+    },
+  });
+}
+
+/**
+ * Update an existing permission on an entity.
+ */
+export function useUpdateEntityPermission() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      entityType,
+      entityId,
+      permId,
+      data,
+    }: {
+      entityType: string;
+      entityId: string;
+      permId: string;
+      data: UpdateEntityPermissionPayload;
+    }) => updateEntityPermission(entityType, entityId, permId, data),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: entityPermissionKeys.list(variables.entityType, variables.entityId),
+      });
+    },
+  });
+}
+
+/**
+ * Delete a permission from an entity.
+ */
+export function useDeleteEntityPermission() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      entityType,
+      entityId,
+      permId,
+    }: {
+      entityType: string;
+      entityId: string;
+      permId: string;
+    }) => deleteEntityPermission(entityType, entityId, permId),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: entityPermissionKeys.list(variables.entityType, variables.entityId),
+      });
+    },
+  });
+}
+
+/**
+ * Fetch access info for the current user on an entity.
+ */
+export function useEntityAccess(entityType: string, entityId: string) {
+  return useQuery({
+    queryKey: entityPermissionKeys.access(entityType, entityId),
+    queryFn: () => fetchEntityAccess(entityType, entityId),
+    enabled: !!entityType && !!entityId,
+  });
+}
+
+/**
+ * Fetch the registry of all supported entity types.
+ */
+export function useEntityRegistry() {
+  return useQuery({
+    queryKey: entityPermissionKeys.registry(),
+    queryFn: () => fetchEntityRegistry(),
+  });
+}

frontend/src/api/entityPermissions.ts

@@ -0,0 +1,138 @@
+/**
+ * Universal Entity Permission API client.
+ *
+ * Works with any entity type via the generic permissions endpoint:
+ *   /api/v1/permissions/{entity_type}/{entity_id}
+ */
+
+import { apiDelete, apiGet, apiPost, apiPut } from './client';
+
+// ─── Types ─────────────────────────────────────────────────────────────────
+
+export type PrincipalType = 'user' | 'group';
+
+export type PermissionLevel = 'read' | 'write' | 'admin' | 'delete';
+
+export interface EntityPermission {
+  id: string;
+  entity_type: string;
+  entity_id: string;
+  user_id: string | null;
+  group_id: string | null;
+  principal_type: PrincipalType;
+  user_name: string | null;
+  group_name: string | null;
+  user_email: string | null;
+  permission_level: PermissionLevel;
+  expires_at: string | null;
+  created_at: string | null;
+  updated_at: string | null;
+}
+
+export interface EntityAccessInfo {
+  entity_type: string;
+  entity_id: string;
+  access_level: PermissionLevel | 'owner' | 'none';
+  is_owner: boolean;
+  is_shared: boolean;
+  owner_name: string | null;
+  owner_email: string | null;
+}
+
+export interface EntityRegistryEntry {
+  entity_type: string;
+  display_name: string;
+  description: string | null;
+}
+
+export interface EntityPermissionListResponse {
+  items: EntityPermission[];
+  total: number;
+}
+
+export interface CreateEntityPermissionPayload {
+  user_id?: string;
+  group_id?: string;
+  permission_level: PermissionLevel;
+  expires_at?: string | null;
+}
+
+export interface UpdateEntityPermissionPayload {
+  permission_level?: PermissionLevel;
+  expires_at?: string | null;
+}
+
+// ─── API Functions ─────────────────────────────────────────────────────────
+
+/**
+ * Fetch all permissions for a given entity.
+ */
+export function fetchEntityPermissions(
+  entityType: string,
+  entityId: string
+): Promise<EntityPermissionListResponse> {
+  return apiGet<EntityPermissionListResponse>(
+    `/permissions/${entityType}/${entityId}`
+  );
+}
+
+/**
+ * Create a new permission on an entity.
+ */
+export function createEntityPermission(
+  entityType: string,
+  entityId: string,
+  data: CreateEntityPermissionPayload
+): Promise<EntityPermission> {
+  return apiPost<EntityPermission>(
+    `/permissions/${entityType}/${entityId}`,
+    data
+  );
+}
+
+/**
+ * Update an existing permission on an entity.
+ */
+export function updateEntityPermission(
+  entityType: string,
+  entityId: string,
+  permId: string,
+  data: UpdateEntityPermissionPayload
+): Promise<EntityPermission> {
+  return apiPut<EntityPermission>(
+    `/permissions/${entityType}/${entityId}/${permId}`,
+    data
+  );
+}
+
+/**
+ * Delete a permission from an entity.
+ */
+export function deleteEntityPermission(
+  entityType: string,
+  entityId: string,
+  permId: string
+): Promise<void> {
+  return apiDelete<void>(
+    `/permissions/${entityType}/${entityId}/${permId}`
+  );
+}
+
+/**
+ * Fetch access info for the current user on an entity.
+ */
+export function fetchEntityAccess(
+  entityType: string,
+  entityId: string
+): Promise<EntityAccessInfo> {
+  return apiGet<EntityAccessInfo>(
+    `/permissions/${entityType}/${entityId}/access`
+  );
+}
+
+/**
+ * Fetch the registry of all supported entity types.
+ */
+export function fetchEntityRegistry(): Promise<EntityRegistryEntry[]> {
+  return apiGet<EntityRegistryEntry[]>('/permissions/registry');
+}

frontend/src/components/common/ShareDialog.tsx

@@ -0,0 +1,385 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import {
+  X,
+  Shield,
+  User,
+  Users,
+  Plus,
+  Trash2,
+  Lock,
+  Eye,
+  Pencil,
+  ChevronDown,
+  Calendar,
+  Crown,
+} from 'lucide-react';
+import {
+  useEntityPermissions,
+  useCreateEntityPermission,
+  useUpdateEntityPermission,
+  useDeleteEntityPermission,
+  useEntityAccess,
+} from '@/api/entityPermissionHooks';
+import { useUsers } from '@/api/users';
+import { useGroups } from '@/api/groups';
+import type { EntityPermission, PermissionLevel } from '@/api/entityPermissions';
+
+interface ShareDialogProps {
+  entityType: string;
+  entityId: string;
+  entityName: string;
+  onClose: () => void;
+}
+
+const PERM_LEVELS: { value: PermissionLevel; label: string; icon: React.ComponentType<{ className?: string; strokeWidth?: number }>; desc: string }[] = [
+  { value: 'read', label: 'Lesen', icon: Eye, desc: 'Inhalt ansehen' },
+  { value: 'write', label: 'Schreiben', icon: Pencil, desc: 'Inhalt bearbeiten, neue hinzufügen' },
+  { value: 'admin', label: 'Admin', icon: Shield, desc: 'Bearbeiten + Löschen + Rechte verwalten' },
+  { value: 'delete', label: 'Löschen', icon: Trash2, desc: 'Vollzugriff inkl. Löschen' },
+];
+
+function permIcon(level: string) {
+  const p = PERM_LEVELS.find((l) => l.value === level);
+  return p ? p.icon : Eye;
+}
+
+function permLabel(level: string) {
+  const p = PERM_LEVELS.find((l) => l.value === level);
+  return p ? p.label : level;
+}
+
+export function ShareDialog({ entityType, entityId, entityName, onClose }: ShareDialogProps) {
+  const { data: permData, isLoading } = useEntityPermissions(entityType, entityId);
+  const { data: accessData } = useEntityAccess(entityType, entityId);
+  const { data: usersData } = useUsers(1, 100);
+  const { data: groupsData } = useGroups();
+  const createMut = useCreateEntityPermission();
+  const updateMut = useUpdateEntityPermission();
+  const deleteMut = useDeleteEntityPermission();
+
+  const [showAdd, setShowAdd] = useState(false);
+  const [addType, setAddType] = useState<'user' | 'group'>('user');
+  const [addPrincipalId, setAddPrincipalId] = useState('');
+  const [addLevel, setAddLevel] = useState<PermissionLevel>('read');
+  const [addExpiresAt, setAddExpiresAt] = useState('');
+
+  const permissions = permData?.items ?? [];
+  const users = usersData?.items ?? [];
+  const groups = groupsData?.items ?? [];
+  const ownerName = accessData?.owner_name ?? null;
+  const ownerEmail = accessData?.owner_email ?? null;
+
+  const handleAdd = () => {
+    if (!addPrincipalId) return;
+    createMut.mutate(
+      {
+        entityType,
+        entityId,
+        data: {
+          user_id: addType === 'user' ? addPrincipalId : undefined,
+          group_id: addType === 'group' ? addPrincipalId : undefined,
+          permission_level: addLevel,
+          expires_at: addExpiresAt || null,
+        },
+      },
+      {
+        onSuccess: () => {
+          setShowAdd(false);
+          setAddPrincipalId('');
+          setAddLevel('read');
+          setAddExpiresAt('');
+        },
+      }
+    );
+  };
+
+  const handleUpdate = (perm: EntityPermission, newLevel: string) => {
+    updateMut.mutate({
+      entityType,
+      entityId,
+      permId: perm.id,
+      data: { permission_level: newLevel as PermissionLevel },
+    });
+  };
+
+  const handleUpdateExpiry = (perm: EntityPermission, expiresAt: string) => {
+    updateMut.mutate({
+      entityType,
+      entityId,
+      permId: perm.id,
+      data: { expires_at: expiresAt || null },
+    });
+  };
+
+  const handleDelete = (perm: EntityPermission) => {
+    if (!confirm(`Berechtigung für ${perm.user_name || perm.group_name || 'diesen Eintrag'} entfernen?`)) return;
+    deleteMut.mutate({ entityType, entityId, permId: perm.id });
+  };
+
+  return createPortal(
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div
+        className="bg-white rounded-xl shadow-2xl w-full max-w-lg max-h-[80vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-secondary-200">
+          <div className="flex items-center gap-2">
+            <Shield className="w-5 h-5 text-primary-600" strokeWidth={2} />
+            <h2 className="text-lg font-semibold text-secondary-800">Freigabe: {entityName}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-secondary-400 hover:text-secondary-600 p-1 rounded-md hover:bg-secondary-100"
+            aria-label="Schließen"
+          >
+            <X className="w-5 h-5" strokeWidth={2} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-5 py-4">
+          {/* Info banner */}
+          <div className="mb-4 p-3 bg-primary-50 border border-primary-200 rounded-lg text-sm text-primary-700">
+            <p className="font-medium mb-1">Element teilen</p>
+            <p className="text-primary-600">
+              Gewähre Benutzern oder Gruppen Zugriff auf dieses Element. Die Berechtigungsstufe bestimmt,
+              welche Aktionen durchgeführt werden können.
+            </p>
+          </div>
+
+          {/* Owner info */}
+          {ownerName && (
+            <div className="mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg text-sm">
+              <div className="flex items-center gap-2 text-amber-700 font-medium mb-1">
+                <Crown className="w-4 h-4" strokeWidth={2} />
+                <span>Besitzer</span>
+              </div>
+              <p className="text-amber-600">
+                {ownerName}{ownerEmail ? ` (${ownerEmail})` : ''}
+              </p>
+            </div>
+          )}
+
+          {/* Existing permissions */}
+          {isLoading ? (
+            <div className="text-sm text-secondary-400 py-4 text-center">Laden…</div>
+          ) : permissions.length === 0 ? (
+            <div className="text-sm text-secondary-400 py-4 text-center">
+              Noch keine Berechtigungen vergeben. Dieses Element ist nur für den Besitzer sichtbar.
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {permissions.map((perm) => {
+                const Icon = perm.user_id ? User : Users;
+                const name = perm.user_name || perm.group_name || 'Unbekannt';
+                const email = perm.user_email;
+                const PermIcon = permIcon(perm.permission_level);
+                const isExpired = perm.expires_at ? new Date(perm.expires_at) < new Date() : false;
+                return (
+                  <div
+                    key={perm.id}
+                    className={clsx(
+                      'flex items-center gap-3 p-3 border rounded-lg',
+                      isExpired
+                        ? 'border-red-200 bg-red-50'
+                        : 'border-secondary-200 hover:bg-secondary-50'
+                    )}
+                  >
+                    <Icon className="w-4 h-4 text-secondary-400 flex-shrink-0" strokeWidth={2} />
+                    <div className="flex-1 min-w-0">
+                      <div className="text-sm font-medium text-secondary-700 truncate">
+                        {name}
+                        {isExpired && (
+                          <span className="ml-2 text-xs text-red-500 font-normal">(abgelaufen)</span>
+                        )}
+                      </div>
+                      {email && (
+                        <div className="text-xs text-secondary-400 truncate">{email}</div>
+                      )}
+                      {/* Expiry date */}
+                      <div className="flex items-center gap-1 mt-1">
+                        <Calendar className="w-3 h-3 text-secondary-400" strokeWidth={2} />
+                        <input
+                          type="date"
+                          value={perm.expires_at ? perm.expires_at.split('T')[0] : ''}
+                          onChange={(e) => handleUpdateExpiry(perm, e.target.value || '')}
+                          className="text-xs border border-secondary-200 rounded px-1 py-0.5 bg-transparent focus:outline-none focus:ring-1 focus:ring-primary-500 text-secondary-500"
+                          title="Ablaufdatum setzen"
+                        />
+                      </div>
+                    </div>
+                    {/* Permission level selector */}
+                    <div className="relative">
+                      <select
+                        value={perm.permission_level}
+                        onChange={(e) => handleUpdate(perm, e.target.value)}
+                        className="appearance-none pl-8 pr-7 py-1.5 text-sm border border-secondary-200 rounded-md bg-white cursor-pointer hover:border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      >
+                        {PERM_LEVELS.map((l) => (
+                          <option key={l.value} value={l.value}>{l.label}</option>
+                        ))}
+                      </select>
+                      <PermIcon className="w-3.5 h-3.5 text-secondary-400 absolute left-2 top-1/2 -translate-y-1/2 pointer-events-none" strokeWidth={2} />
+                      <ChevronDown className="w-3.5 h-3.5 text-secondary-400 absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none" strokeWidth={2} />
+                    </div>
+                    {/* Delete */}
+                    <button
+                      onClick={() => handleDelete(perm)}
+                      className="text-secondary-400 hover:text-red-600 p-1.5 rounded-md hover:bg-red-50 flex-shrink-0"
+                      title="Entfernen"
+                      aria-label="Berechtigung entfernen"
+                    >
+                      <Trash2 className="w-4 h-4" strokeWidth={2} />
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Add new permission */}
+          {showAdd ? (
+            <div className="mt-4 p-4 border-2 border-primary-200 rounded-lg bg-primary-50/50">
+              <div className="flex items-center gap-2 mb-3">
+                <Plus className="w-4 h-4 text-primary-600" strokeWidth={2} />
+                <span className="text-sm font-medium text-secondary-700">Neue Berechtigung</span>
+              </div>
+
+              {/* Type toggle */}
+              <div className="flex gap-2 mb-3">
+                <button
+                  onClick={() => {
+                    setAddType('user');
+                    setAddPrincipalId('');
+                  }}
+                  className={clsx(
+                    'flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md border',
+                    addType === 'user'
+                      ? 'bg-primary-600 text-white border-primary-600'
+                      : 'bg-white text-secondary-600 border-secondary-200 hover:border-secondary-300'
+                  )}
+                >
+                  <User className="w-3.5 h-3.5" strokeWidth={2} />
+                  Benutzer
+                </button>
+                <button
+                  onClick={() => {
+                    setAddType('group');
+                    setAddPrincipalId('');
+                  }}
+                  className={clsx(
+                    'flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md border',
+                    addType === 'group'
+                      ? 'bg-primary-600 text-white border-primary-600'
+                      : 'bg-white text-secondary-600 border-secondary-200 hover:border-secondary-300'
+                  )}
+                >
+                  <Users className="w-3.5 h-3.5" strokeWidth={2} />
+                  Gruppe
+                </button>
+              </div>
+
+              {/* Principal select */}
+              <select
+                value={addPrincipalId}
+                onChange={(e) => setAddPrincipalId(e.target.value)}
+                className="w-full px-3 py-2 text-sm border border-secondary-200 rounded-md mb-3 bg-white cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary-500"
+              >
+                <option value="">
+                  {addType === 'user' ? 'Benutzer auswählen…' : 'Gruppe auswählen…'}
+                </option>
+                {addType === 'user'
+                  ? users.map((u) => (
+                      <option key={u.id} value={u.id}>
+                        {u.name} ({u.email})
+                      </option>
+                    ))
+                  : groups.map((g) => (
+                      <option key={g.id} value={g.id}>
+                        {g.name}
+                      </option>
+                    ))}
+              </select>
+
+              {/* Permission level */}
+              <div className="grid grid-cols-2 gap-2 mb-3">
+                {PERM_LEVELS.map((l) => (
+                  <button
+                    key={l.value}
+                    onClick={() => setAddLevel(l.value)}
+                    className={clsx(
+                      'flex items-start gap-2 p-2.5 text-left rounded-md border text-sm',
+                      addLevel === l.value
+                        ? 'bg-primary-50 border-primary-400 text-primary-700'
+                        : 'bg-white border-secondary-200 text-secondary-600 hover:border-secondary-300'
+                    )}
+                  >
+                    <l.icon className="w-4 h-4 flex-shrink-0 mt-0.5" strokeWidth={2} />
+                    <div>
+                      <div className="font-medium">{l.label}</div>
+                      <div className="text-xs text-secondary-400">{l.desc}</div>
+                    </div>
+                  </button>
+                ))}
+              </div>
+
+              {/* Expiry date */}
+              <div className="mb-3">
+                <label className="flex items-center gap-2 text-sm text-secondary-600 mb-1">
+                  <Calendar className="w-4 h-4" strokeWidth={2} />
+                  Ablaufdatum (optional)
+                </label>
+                <input
+                  type="date"
+                  value={addExpiresAt}
+                  onChange={(e) => setAddExpiresAt(e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-secondary-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-primary-500"
+                  min={new Date().toISOString().split('T')[0]}
+                />
+              </div>
+
+              {/* Actions */}
+              <div className="flex justify-end gap-2">
+                <button
+                  onClick={() => setShowAdd(false)}
+                  className="px-3 py-1.5 text-sm text-secondary-600 hover:bg-secondary-100 rounded-md"
+                >
+                  Abbrechen
+                </button>
+                <button
+                  onClick={handleAdd}
+                  disabled={!addPrincipalId || createMut.isPending}
+                  className="px-4 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {createMut.isPending ? 'Speichern…' : 'Hinzufügen'}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <button
+              onClick={() => setShowAdd(true)}
+              className="mt-4 w-full flex items-center justify-center gap-2 py-2.5 text-sm text-primary-600 border-2 border-dashed border-primary-200 rounded-lg hover:bg-primary-50 hover:border-primary-300 transition-colors"
+            >
+              <Plus className="w-4 h-4" strokeWidth={2} />
+              Berechtigung hinzufügen
+            </button>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="px-5 py-3 border-t border-secondary-200 flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-secondary-600 hover:bg-secondary-100 rounded-md"
+          >
+            Schließen
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}