From 7f07a55c911558104d9cf2c5b8430df7686be554 Mon Sep 17 00:00:00 2001
From: ValueOn AG <p.motsch@valueon.ch>
Date: Wed, 21 Jan 2026 00:32:52 +0100
Subject: [PATCH] saas mandates core done

---
 src/App.tsx                                   |   8 +-
 .../AccessRules/AccessLevelSelect.tsx         |  59 ++
 .../AccessRules/AccessRules.module.css        | 535 +++++++++++++++
 .../AccessRules/AccessRulesEditor.tsx         | 626 ++++++++++++++++++
 src/components/AccessRules/index.ts           |   8 +
 .../FormGeneratorTable.module.css             |   6 +
 .../FormGeneratorTable/FormGeneratorTable.tsx | 179 +++++
 .../Navigation/MandateNavigation.tsx          |  38 +-
 .../RbacExportImport.module.css               | 507 ++++++++++++++
 .../RbacExportImport/RbacExportImport.tsx     | 459 +++++++++++++
 src/components/RbacExportImport/index.ts      |   5 +
 src/hooks/useAccessRules.ts                   | 248 +++++++
 src/hooks/useFeatureAccess.ts                 | 249 +++++++
 src/hooks/useInvitations.ts                   | 222 +++++++
 src/hooks/useMandateRoles.ts                  | 242 +++++++
 src/hooks/useMandates.ts                      |   4 +-
 src/hooks/useRbacExportImport.ts              | 270 ++++++++
 src/hooks/useRoles.ts                         |   4 +-
 src/hooks/useUserMandates.ts                  | 223 +++++++
 src/pages/InvitePage.module.css               | 316 +++++++++
 src/pages/InvitePage.tsx                      | 363 ++++++++++
 src/pages/Settings.module.css                 | 172 +++++
 src/pages/Settings.tsx                        | 222 ++++++-
 src/pages/admin/Admin.module.css              | 124 ++++
 src/pages/admin/AdminFeatureAccessPage.tsx    | 347 ++++++++++
 src/pages/admin/AdminInvitationsPage.tsx      | 457 +++++++++++++
 src/pages/admin/AdminMandateRolesPage.tsx     | 527 +++++++++++++++
 src/pages/admin/AdminMandatesPage.tsx         |  95 +--
 src/pages/admin/AdminRolesPage.tsx            | 106 ++-
 src/pages/admin/AdminUserMandatesPage.tsx     | 442 +++++++++++++
 src/pages/admin/AdminUsersPage.tsx            | 126 ++--
 src/pages/admin/index.ts                      |   4 +
 32 files changed, 6992 insertions(+), 201 deletions(-)
 create mode 100644 src/components/AccessRules/AccessLevelSelect.tsx
 create mode 100644 src/components/AccessRules/AccessRules.module.css
 create mode 100644 src/components/AccessRules/AccessRulesEditor.tsx
 create mode 100644 src/components/AccessRules/index.ts
 create mode 100644 src/components/RbacExportImport/RbacExportImport.module.css
 create mode 100644 src/components/RbacExportImport/RbacExportImport.tsx
 create mode 100644 src/components/RbacExportImport/index.ts
 create mode 100644 src/hooks/useAccessRules.ts
 create mode 100644 src/hooks/useFeatureAccess.ts
 create mode 100644 src/hooks/useInvitations.ts
 create mode 100644 src/hooks/useMandateRoles.ts
 create mode 100644 src/hooks/useRbacExportImport.ts
 create mode 100644 src/hooks/useUserMandates.ts
 create mode 100644 src/pages/InvitePage.module.css
 create mode 100644 src/pages/InvitePage.tsx
 create mode 100644 src/pages/admin/AdminFeatureAccessPage.tsx
 create mode 100644 src/pages/admin/AdminInvitationsPage.tsx
 create mode 100644 src/pages/admin/AdminMandateRolesPage.tsx
 create mode 100644 src/pages/admin/AdminUserMandatesPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index ecf97b9..f3de0df 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,6 +21,7 @@ import Login from './pages/Login';
 import Register from './pages/Register';
 import PasswordResetRequest from './pages/PasswordResetRequest';
 import Reset from './pages/Reset';
+import { InvitePage } from './pages/InvitePage';
 
 // Providers
 import { AuthProvider } from './providers/auth/AuthProvider';
@@ -35,7 +36,7 @@ import { FeatureLayout } from './layouts/FeatureLayout';
 import { DashboardPage } from './pages/Dashboard';
 import { SettingsPage } from './pages/Settings';
 import { FeatureViewPage } from './pages/FeatureView';
-import { AdminMandatesPage, AdminUsersPage, AdminRolesPage } from './pages/admin';
+import { AdminMandatesPage, AdminUsersPage, AdminRolesPage, AdminUserMandatesPage, AdminFeatureAccessPage, AdminInvitationsPage, AdminMandateRolesPage } from './pages/admin';
 
 function App() {
     // Load saved theme preference and set app name on app mount
@@ -72,6 +73,7 @@ function App() {
                         <Route path="/register" element={<Register />} />
                         <Route path="/password-reset-request" element={<PasswordResetRequest />} />
                         <Route path="/reset" element={<Reset />} />
+                        <Route path="/invite/:token" element={<InvitePage />} />
                         
                         {/* ================================================== */}
                         {/* PROTECTED ROUTES - REQUIRE AUTHENTICATION          */}
@@ -119,6 +121,10 @@ function App() {
                                 <Route path="mandates" element={<AdminMandatesPage />} />
                                 <Route path="users" element={<AdminUsersPage />} />
                                 <Route path="roles" element={<AdminRolesPage />} />
+                                <Route path="user-mandates" element={<AdminUserMandatesPage />} />
+                                <Route path="feature-instances" element={<AdminFeatureAccessPage />} />
+                                <Route path="invitations" element={<AdminInvitationsPage />} />
+                                <Route path="mandate-roles" element={<AdminMandateRolesPage />} />
                             </Route>
                         </Route>
                         
diff --git a/src/components/AccessRules/AccessLevelSelect.tsx b/src/components/AccessRules/AccessLevelSelect.tsx
new file mode 100644
index 0000000..bafba16
--- /dev/null
+++ b/src/components/AccessRules/AccessLevelSelect.tsx
@@ -0,0 +1,59 @@
+/**
+ * AccessLevelSelect
+ * 
+ * Dropdown component for selecting RBAC access levels (n/m/g/a).
+ */
+
+import React from 'react';
+import { ACCESS_LEVEL_OPTIONS, type AccessLevel, getAccessLevelColor } from '../../hooks/useAccessRules';
+import styles from './AccessRules.module.css';
+
+interface AccessLevelSelectProps {
+  value: AccessLevel | null;
+  onChange: (value: AccessLevel) => void;
+  disabled?: boolean;
+  label?: string;
+  showLabel?: boolean;
+  compact?: boolean;
+}
+
+export const AccessLevelSelect: React.FC<AccessLevelSelectProps> = ({
+  value,
+  onChange,
+  disabled = false,
+  label,
+  showLabel = false,
+  compact = false,
+}) => {
+  const currentColor = getAccessLevelColor(value);
+  
+  return (
+    <div className={`${styles.accessLevelSelect} ${compact ? styles.compact : ''}`}>
+      {showLabel && label && (
+        <label className={styles.accessLevelLabel}>{label}</label>
+      )}
+      <select
+        value={value || 'n'}
+        onChange={(e) => onChange(e.target.value as AccessLevel)}
+        disabled={disabled}
+        className={styles.accessLevelDropdown}
+        style={{ 
+          borderColor: currentColor,
+          color: currentColor,
+        }}
+      >
+        {ACCESS_LEVEL_OPTIONS.map(option => (
+          <option 
+            key={option.value} 
+            value={option.value}
+            style={{ color: option.color }}
+          >
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default AccessLevelSelect;
diff --git a/src/components/AccessRules/AccessRules.module.css b/src/components/AccessRules/AccessRules.module.css
new file mode 100644
index 0000000..2b36518
--- /dev/null
+++ b/src/components/AccessRules/AccessRules.module.css
@@ -0,0 +1,535 @@
+/* =============================================================================
+ * AccessRules Components Styles
+ * ============================================================================= */
+
+/* =============================================================================
+ * Access Level Select
+ * ============================================================================= */
+
+.accessLevelSelect {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.accessLevelSelect.compact {
+  gap: 0;
+}
+
+.accessLevelLabel {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.accessLevelDropdown {
+  padding: 0.375rem 0.5rem;
+  border: 2px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--bg-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  min-width: 80px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.accessLevelDropdown:hover:not(:disabled) {
+  box-shadow: 0 0 0 2px var(--primary-color-light);
+}
+
+.accessLevelDropdown:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-color);
+}
+
+.accessLevelDropdown:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+ * Access Rules Editor
+ * ============================================================================= */
+
+.accessRulesEditor {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  background: var(--bg-primary);
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+}
+
+.editorHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.editorTitle {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.templateBadge {
+  background: var(--info-color);
+  color: white;
+  font-size: 0.625rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 4px;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.headerActions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* =============================================================================
+ * Tabs
+ * ============================================================================= */
+
+.tabsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tabList {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 2px solid var(--border-color);
+  padding-bottom: -2px;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: all 0.2s;
+}
+
+.tab:hover {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
+
+.tab.active {
+  color: var(--primary-color);
+  border-bottom-color: var(--primary-color);
+}
+
+.tabIcon {
+  font-size: 1rem;
+}
+
+.tabBadge {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 10px;
+  min-width: 20px;
+  text-align: center;
+}
+
+.tab.active .tabBadge {
+  background: var(--primary-color);
+  color: white;
+}
+
+.tabContent {
+  min-height: 200px;
+}
+
+/* =============================================================================
+ * Rules Section
+ * ============================================================================= */
+
+.rulesSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sectionTitle {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.addButton {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.addButton:hover {
+  background: var(--primary-color-dark);
+}
+
+.addButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+ * Rule Card
+ * ============================================================================= */
+
+.ruleCard {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.875rem;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+}
+
+.ruleHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ruleItem {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ruleItemIcon {
+  color: var(--text-tertiary);
+  font-size: 0.875rem;
+}
+
+.ruleItemName {
+  font-weight: 500;
+  color: var(--text-primary);
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 0.875rem;
+}
+
+.ruleActions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.iconButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-tertiary);
+  transition: all 0.2s;
+}
+
+.iconButton:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-color: var(--border-color);
+}
+
+.iconButton.danger:hover {
+  background: #fed7d7;
+  color: #c53030;
+  border-color: #fc8181;
+}
+
+/* =============================================================================
+ * Permissions Grid
+ * ============================================================================= */
+
+.permissionsGrid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 0.5rem;
+}
+
+.permissionItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.permissionLabel {
+  font-size: 0.6875rem;
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+/* View Toggle */
+.viewToggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.viewCheckbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: var(--primary-color);
+}
+
+/* =============================================================================
+ * Empty State
+ * ============================================================================= */
+
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  color: var(--text-tertiary);
+  text-align: center;
+}
+
+.emptyIcon {
+  font-size: 2rem;
+  margin-bottom: 0.75rem;
+  opacity: 0.5;
+}
+
+.emptyText {
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+.emptyHint {
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+}
+
+/* =============================================================================
+ * Add Rule Modal
+ * ============================================================================= */
+
+.addRuleForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.formLabel {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.formInput {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.formInput:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px var(--primary-color-light);
+}
+
+.formSelect {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  cursor: pointer;
+}
+
+.formHint {
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+}
+
+.formActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+/* =============================================================================
+ * Action Bar
+ * ============================================================================= */
+
+.actionBar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.secondaryButton {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.secondaryButton:hover {
+  background: var(--bg-tertiary);
+}
+
+.secondaryButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.primaryButton {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.primaryButton:hover {
+  background: var(--primary-color-dark);
+}
+
+.primaryButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+ * Loading State
+ * ============================================================================= */
+
+.loadingContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  gap: 1rem;
+}
+
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--border-color);
+  border-top-color: var(--primary-color);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* =============================================================================
+ * JSON Editor Tab
+ * ============================================================================= */
+
+.jsonEditor {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.jsonTextarea {
+  width: 100%;
+  min-height: 300px;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  resize: vertical;
+}
+
+.jsonTextarea:focus {
+  outline: none;
+  border-color: var(--primary-color);
+}
+
+.jsonError {
+  color: #c53030;
+  font-size: 0.8125rem;
+  padding: 0.5rem;
+  background: #fed7d7;
+  border-radius: 4px;
+}
+
+.jsonHint {
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+}
diff --git a/src/components/AccessRules/AccessRulesEditor.tsx b/src/components/AccessRules/AccessRulesEditor.tsx
new file mode 100644
index 0000000..4614027
--- /dev/null
+++ b/src/components/AccessRules/AccessRulesEditor.tsx
@@ -0,0 +1,626 @@
+/**
+ * AccessRulesEditor
+ * 
+ * Main component for editing RBAC access rules for a role.
+ * Provides tabbed interface for DATA, UI, and RESOURCE rules.
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { 
+  FaTable, 
+  FaDesktop, 
+  FaServer, 
+  FaCode, 
+  FaPlus, 
+  FaTrash, 
+  FaSave,
+  FaUndo,
+  FaSpinner,
+} from 'react-icons/fa';
+import { 
+  useAccessRules, 
+  type AccessRule, 
+  type RuleContext, 
+  type AccessLevel,
+  type AccessRuleCreate,
+} from '../../hooks/useAccessRules';
+import { AccessLevelSelect } from './AccessLevelSelect';
+import styles from './AccessRules.module.css';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface AccessRulesEditorProps {
+  roleId: string;
+  roleName?: string;
+  isTemplate?: boolean;
+  readOnly?: boolean;
+  onSave?: () => void;
+}
+
+type TabType = 'DATA' | 'UI' | 'RESOURCE' | 'JSON';
+
+// =============================================================================
+// RULE CARD COMPONENT
+// =============================================================================
+
+interface RuleCardProps {
+  rule: AccessRule;
+  readOnly?: boolean;
+  onUpdate: (ruleId: string, updates: Partial<AccessRule>) => void;
+  onDelete: (ruleId: string) => void;
+}
+
+const RuleCard: React.FC<RuleCardProps> = ({ rule, readOnly, onUpdate, onDelete }) => {
+  const isDataRule = rule.context === 'DATA';
+  
+  return (
+    <div className={styles.ruleCard}>
+      <div className={styles.ruleHeader}>
+        <div className={styles.ruleItem}>
+          <span className={styles.ruleItemIcon}>
+            {rule.context === 'DATA' ? <FaTable /> : 
+             rule.context === 'UI' ? <FaDesktop /> : <FaServer />}
+          </span>
+          <span className={styles.ruleItemName}>{rule.item || '(global)'}</span>
+        </div>
+        {!readOnly && (
+          <div className={styles.ruleActions}>
+            <button
+              className={`${styles.iconButton} ${styles.danger}`}
+              onClick={() => onDelete(rule.id)}
+              title="Regel löschen"
+            >
+              <FaTrash />
+            </button>
+          </div>
+        )}
+      </div>
+      
+      <div className={styles.permissionsGrid}>
+        {/* View Toggle */}
+        <div className={styles.permissionItem}>
+          <span className={styles.permissionLabel}>View</span>
+          <div className={styles.viewToggle}>
+            <input
+              type="checkbox"
+              checked={rule.view}
+              onChange={(e) => onUpdate(rule.id, { view: e.target.checked })}
+              disabled={readOnly}
+              className={styles.viewCheckbox}
+            />
+          </div>
+        </div>
+        
+        {/* CRUD Levels (only for DATA context) */}
+        {isDataRule ? (
+          <>
+            <div className={styles.permissionItem}>
+              <span className={styles.permissionLabel}>Read</span>
+              <AccessLevelSelect
+                value={rule.read}
+                onChange={(value) => onUpdate(rule.id, { read: value })}
+                disabled={readOnly}
+                compact
+              />
+            </div>
+            <div className={styles.permissionItem}>
+              <span className={styles.permissionLabel}>Create</span>
+              <AccessLevelSelect
+                value={rule.create}
+                onChange={(value) => onUpdate(rule.id, { create: value })}
+                disabled={readOnly}
+                compact
+              />
+            </div>
+            <div className={styles.permissionItem}>
+              <span className={styles.permissionLabel}>Update</span>
+              <AccessLevelSelect
+                value={rule.update}
+                onChange={(value) => onUpdate(rule.id, { update: value })}
+                disabled={readOnly}
+                compact
+              />
+            </div>
+            <div className={styles.permissionItem}>
+              <span className={styles.permissionLabel}>Delete</span>
+              <AccessLevelSelect
+                value={rule.delete}
+                onChange={(value) => onUpdate(rule.id, { delete: value })}
+                disabled={readOnly}
+                compact
+              />
+            </div>
+          </>
+        ) : (
+          // For UI and RESOURCE, show empty placeholders to maintain grid
+          <div style={{ gridColumn: 'span 4' }} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+// =============================================================================
+// ADD RULE FORM
+// =============================================================================
+
+interface AddRuleFormProps {
+  context: RuleContext;
+  onAdd: (rule: AccessRuleCreate) => void;
+  onCancel: () => void;
+}
+
+const AddRuleForm: React.FC<AddRuleFormProps> = ({ context, onAdd, onCancel }) => {
+  const [item, setItem] = useState('');
+  const [view, setView] = useState(true);
+  const [read, setRead] = useState<AccessLevel>('n');
+  const [create, setCreate] = useState<AccessLevel>('n');
+  const [update, setUpdate] = useState<AccessLevel>('n');
+  const [del, setDel] = useState<AccessLevel>('n');
+  
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const newRule: AccessRuleCreate = {
+      context,
+      item: item.trim() || null,
+      view,
+      ...(context === 'DATA' ? { read, create, update, delete: del } : {}),
+    };
+    onAdd(newRule);
+  };
+  
+  const getPlaceholder = () => {
+    switch (context) {
+      case 'DATA':
+        return 'z.B. TrusteeContract oder TrusteeContract.salary';
+      case 'UI':
+        return 'z.B. nav.trustee oder button.export';
+      case 'RESOURCE':
+        return 'z.B. ai.model.anthropic oder connector.sharepoint';
+    }
+  };
+  
+  return (
+    <form className={styles.addRuleForm} onSubmit={handleSubmit}>
+      <div className={styles.formGroup}>
+        <label className={styles.formLabel}>Item (Dot-Notation)</label>
+        <input
+          type="text"
+          value={item}
+          onChange={(e) => setItem(e.target.value)}
+          placeholder={getPlaceholder()}
+          className={styles.formInput}
+          autoFocus
+        />
+        <span className={styles.formHint}>
+          Leer lassen für globale Regel. Längster Match gewinnt.
+        </span>
+      </div>
+      
+      <div className={styles.formGroup}>
+        <label className={styles.formLabel}>
+          <input
+            type="checkbox"
+            checked={view}
+            onChange={(e) => setView(e.target.checked)}
+            style={{ marginRight: '0.5rem' }}
+          />
+          Sichtbar (View)
+        </label>
+      </div>
+      
+      {context === 'DATA' && (
+        <div className={styles.permissionsGrid} style={{ marginTop: '0.5rem' }}>
+          <div className={styles.permissionItem}>
+            <span className={styles.permissionLabel}>Read</span>
+            <AccessLevelSelect value={read} onChange={setRead} compact />
+          </div>
+          <div className={styles.permissionItem}>
+            <span className={styles.permissionLabel}>Create</span>
+            <AccessLevelSelect value={create} onChange={setCreate} compact />
+          </div>
+          <div className={styles.permissionItem}>
+            <span className={styles.permissionLabel}>Update</span>
+            <AccessLevelSelect value={update} onChange={setUpdate} compact />
+          </div>
+          <div className={styles.permissionItem}>
+            <span className={styles.permissionLabel}>Delete</span>
+            <AccessLevelSelect value={del} onChange={setDel} compact />
+          </div>
+        </div>
+      )}
+      
+      <div className={styles.formActions}>
+        <button type="button" className={styles.secondaryButton} onClick={onCancel}>
+          Abbrechen
+        </button>
+        <button type="submit" className={styles.primaryButton}>
+          <FaPlus /> Hinzufügen
+        </button>
+      </div>
+    </form>
+  );
+};
+
+// =============================================================================
+// RULES SECTION
+// =============================================================================
+
+interface RulesSectionProps {
+  context: RuleContext;
+  rules: AccessRule[];
+  readOnly?: boolean;
+  onUpdate: (ruleId: string, updates: Partial<AccessRule>) => void;
+  onDelete: (ruleId: string) => void;
+  onAdd: (rule: AccessRuleCreate) => void;
+}
+
+const RulesSection: React.FC<RulesSectionProps> = ({
+  context,
+  rules,
+  readOnly,
+  onUpdate,
+  onDelete,
+  onAdd,
+}) => {
+  const [showAddForm, setShowAddForm] = useState(false);
+  
+  const handleAdd = (rule: AccessRuleCreate) => {
+    onAdd(rule);
+    setShowAddForm(false);
+  };
+  
+  const getEmptyIcon = () => {
+    switch (context) {
+      case 'DATA': return <FaTable />;
+      case 'UI': return <FaDesktop />;
+      case 'RESOURCE': return <FaServer />;
+    }
+  };
+  
+  const getEmptyText = () => {
+    switch (context) {
+      case 'DATA': return 'Keine Daten-Regeln definiert';
+      case 'UI': return 'Keine UI-Regeln definiert';
+      case 'RESOURCE': return 'Keine Ressourcen-Regeln definiert';
+    }
+  };
+  
+  return (
+    <div className={styles.rulesSection}>
+      {!readOnly && !showAddForm && (
+        <div className={styles.sectionHeader}>
+          <span className={styles.sectionTitle}>
+            {rules.length} {rules.length === 1 ? 'Regel' : 'Regeln'}
+          </span>
+          <button
+            className={styles.addButton}
+            onClick={() => setShowAddForm(true)}
+          >
+            <FaPlus /> Neue Regel
+          </button>
+        </div>
+      )}
+      
+      {showAddForm && (
+        <AddRuleForm
+          context={context}
+          onAdd={handleAdd}
+          onCancel={() => setShowAddForm(false)}
+        />
+      )}
+      
+      {rules.length === 0 && !showAddForm ? (
+        <div className={styles.emptyState}>
+          <div className={styles.emptyIcon}>{getEmptyIcon()}</div>
+          <p className={styles.emptyText}>{getEmptyText()}</p>
+          {!readOnly && (
+            <p className={styles.emptyHint}>
+              Klicken Sie auf "Neue Regel" um eine Berechtigung hinzuzufügen.
+            </p>
+          )}
+        </div>
+      ) : (
+        rules.map(rule => (
+          <RuleCard
+            key={rule.id}
+            rule={rule}
+            readOnly={readOnly}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+          />
+        ))
+      )}
+    </div>
+  );
+};
+
+// =============================================================================
+// JSON EDITOR
+// =============================================================================
+
+interface JsonEditorProps {
+  rules: AccessRule[];
+  readOnly?: boolean;
+  onApply: (rules: AccessRule[]) => void;
+}
+
+const JsonEditor: React.FC<JsonEditorProps> = ({ rules, readOnly, onApply }) => {
+  const [jsonText, setJsonText] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  
+  useEffect(() => {
+    setJsonText(JSON.stringify(rules, null, 2));
+    setError(null);
+  }, [rules]);
+  
+  const handleApply = () => {
+    try {
+      const parsed = JSON.parse(jsonText);
+      if (!Array.isArray(parsed)) {
+        throw new Error('JSON muss ein Array sein');
+      }
+      setError(null);
+      onApply(parsed);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+  
+  return (
+    <div className={styles.jsonEditor}>
+      <textarea
+        value={jsonText}
+        onChange={(e) => setJsonText(e.target.value)}
+        className={styles.jsonTextarea}
+        readOnly={readOnly}
+        spellCheck={false}
+      />
+      {error && <div className={styles.jsonError}>{error}</div>}
+      <p className={styles.jsonHint}>
+        Experten-Modus: Bearbeiten Sie die Regeln direkt als JSON. 
+        Änderungen werden erst nach Klick auf "Anwenden" übernommen.
+      </p>
+      {!readOnly && (
+        <div className={styles.formActions}>
+          <button
+            type="button"
+            className={styles.primaryButton}
+            onClick={handleApply}
+            disabled={!!error}
+          >
+            JSON anwenden
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+
+export const AccessRulesEditor: React.FC<AccessRulesEditorProps> = ({
+  roleId,
+  roleName,
+  isTemplate = false,
+  readOnly = false,
+  onSave,
+}) => {
+  const {
+    rules,
+    loading,
+    saving,
+    error,
+    fetchRules,
+    saveRules,
+    getGroupedRules,
+    updateRuleLocally,
+    addRuleLocally,
+    removeRuleLocally,
+  } = useAccessRules(roleId);
+  
+  const [activeTab, setActiveTab] = useState<TabType>('DATA');
+  const [hasChanges, setHasChanges] = useState(false);
+  const [originalRules, setOriginalRules] = useState<AccessRule[]>([]);
+  
+  // Load rules on mount
+  useEffect(() => {
+    fetchRules().then(fetchedRules => {
+      setOriginalRules(fetchedRules);
+    });
+  }, [fetchRules]);
+  
+  // Track changes
+  useEffect(() => {
+    setHasChanges(JSON.stringify(rules) !== JSON.stringify(originalRules));
+  }, [rules, originalRules]);
+  
+  const groupedRules = getGroupedRules();
+  
+  // Handlers
+  const handleUpdate = useCallback((ruleId: string, updates: Partial<AccessRule>) => {
+    updateRuleLocally(ruleId, updates);
+  }, [updateRuleLocally]);
+  
+  const handleDelete = useCallback((ruleId: string) => {
+    if (window.confirm('Möchten Sie diese Regel wirklich löschen?')) {
+      removeRuleLocally(ruleId);
+    }
+  }, [removeRuleLocally]);
+  
+  const handleAdd = useCallback((ruleData: AccessRuleCreate) => {
+    const newRule: AccessRule = {
+      id: `temp-${Date.now()}`, // Temporary ID
+      roleId,
+      context: ruleData.context,
+      item: ruleData.item || null,
+      view: ruleData.view ?? true,
+      read: ruleData.read ?? null,
+      create: ruleData.create ?? null,
+      update: ruleData.update ?? null,
+      delete: ruleData.delete ?? null,
+    };
+    addRuleLocally(newRule);
+  }, [roleId, addRuleLocally]);
+  
+  const handleSave = async () => {
+    const result = await saveRules(rules);
+    if (result.success) {
+      setOriginalRules(rules);
+      setHasChanges(false);
+      onSave?.();
+    } else {
+      alert(result.error || 'Fehler beim Speichern');
+    }
+  };
+  
+  const handleReset = () => {
+    if (window.confirm('Alle Änderungen verwerfen?')) {
+      fetchRules().then(fetchedRules => {
+        setOriginalRules(fetchedRules);
+      });
+    }
+  };
+  
+  const handleJsonApply = (newRules: AccessRule[]) => {
+    // Replace all rules
+    newRules.forEach((rule, index) => {
+      if (!rule.id) {
+        rule.id = `temp-${Date.now()}-${index}`;
+      }
+      rule.roleId = roleId;
+    });
+    // This is a bit hacky - we need to update the store
+    // For now, we'll just save directly
+    saveRules(newRules);
+  };
+  
+  // Render tabs
+  const tabs: { id: TabType; label: string; icon: React.ReactNode; count: number }[] = [
+    { id: 'DATA', label: 'Daten', icon: <FaTable />, count: groupedRules.DATA.length },
+    { id: 'UI', label: 'UI', icon: <FaDesktop />, count: groupedRules.UI.length },
+    { id: 'RESOURCE', label: 'Ressourcen', icon: <FaServer />, count: groupedRules.RESOURCE.length },
+    { id: 'JSON', label: 'JSON', icon: <FaCode />, count: rules.length },
+  ];
+  
+  if (loading) {
+    return (
+      <div className={styles.accessRulesEditor}>
+        <div className={styles.loadingContainer}>
+          <div className={styles.spinner} />
+          <span>Lade Berechtigungen...</span>
+        </div>
+      </div>
+    );
+  }
+  
+  return (
+    <div className={styles.accessRulesEditor}>
+      <div className={styles.editorHeader}>
+        <h3 className={styles.editorTitle}>
+          Berechtigungen{roleName ? `: ${roleName}` : ''}
+          {isTemplate && <span className={styles.templateBadge}>Template</span>}
+        </h3>
+        {!readOnly && hasChanges && (
+          <div className={styles.headerActions}>
+            <button
+              className={styles.secondaryButton}
+              onClick={handleReset}
+              disabled={saving}
+            >
+              <FaUndo /> Zurücksetzen
+            </button>
+          </div>
+        )}
+      </div>
+      
+      {error && (
+        <div className={styles.jsonError}>
+          Fehler: {error}
+        </div>
+      )}
+      
+      <div className={styles.tabsContainer}>
+        <div className={styles.tabList}>
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              className={`${styles.tab} ${activeTab === tab.id ? styles.active : ''}`}
+              onClick={() => setActiveTab(tab.id)}
+            >
+              <span className={styles.tabIcon}>{tab.icon}</span>
+              {tab.label}
+              <span className={styles.tabBadge}>{tab.count}</span>
+            </button>
+          ))}
+        </div>
+        
+        <div className={styles.tabContent}>
+          {activeTab === 'DATA' && (
+            <RulesSection
+              context="DATA"
+              rules={groupedRules.DATA}
+              readOnly={readOnly}
+              onUpdate={handleUpdate}
+              onDelete={handleDelete}
+              onAdd={handleAdd}
+            />
+          )}
+          {activeTab === 'UI' && (
+            <RulesSection
+              context="UI"
+              rules={groupedRules.UI}
+              readOnly={readOnly}
+              onUpdate={handleUpdate}
+              onDelete={handleDelete}
+              onAdd={handleAdd}
+            />
+          )}
+          {activeTab === 'RESOURCE' && (
+            <RulesSection
+              context="RESOURCE"
+              rules={groupedRules.RESOURCE}
+              readOnly={readOnly}
+              onUpdate={handleUpdate}
+              onDelete={handleDelete}
+              onAdd={handleAdd}
+            />
+          )}
+          {activeTab === 'JSON' && (
+            <JsonEditor
+              rules={rules}
+              readOnly={readOnly}
+              onApply={handleJsonApply}
+            />
+          )}
+        </div>
+      </div>
+      
+      {!readOnly && (
+        <div className={styles.actionBar}>
+          <button
+            className={styles.primaryButton}
+            onClick={handleSave}
+            disabled={saving || !hasChanges}
+          >
+            {saving ? (
+              <>
+                <FaSpinner className="spinning" /> Speichern...
+              </>
+            ) : (
+              <>
+                <FaSave /> Speichern
+              </>
+            )}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AccessRulesEditor;
diff --git a/src/components/AccessRules/index.ts b/src/components/AccessRules/index.ts
new file mode 100644
index 0000000..16d0f83
--- /dev/null
+++ b/src/components/AccessRules/index.ts
@@ -0,0 +1,8 @@
+/**
+ * AccessRules Components
+ * 
+ * Components for editing RBAC access rules.
+ */
+
+export { AccessRulesEditor } from './AccessRulesEditor';
+export { AccessLevelSelect } from './AccessLevelSelect';
diff --git a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
index 9ff925f..0271cfc 100644
--- a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
+++ b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.module.css
@@ -298,6 +298,12 @@
   overflow: visible;
 }
 
+/* FK Loading state - shows truncated ID while loading */
+.fkLoading {
+  color: var(--color-text);
+  opacity: 0.6;
+  font-style: italic;
+}
 
 .tr {
   transition: background-color 0.2s ease;
diff --git a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
index 8aafec5..2e3e782 100644
--- a/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
+++ b/src/components/FormGenerator/FormGeneratorTable/FormGeneratorTable.tsx
@@ -17,6 +17,10 @@ import {
 } from '../../../utils/attributeTypeMapper';
 import type { AttributeType } from '../../../utils/attributeTypeMapper';
 import { FaFilter } from 'react-icons/fa';
+import api from '../../../api';
+
+// FK Cache type: maps fkSource -> { id -> displayLabel }
+type FkCacheType = Record<string, Record<string, string>>;
 
 // Helper function to detect TextMultilingual objects
 // TextMultilingual has structure: { en: string, ge?: string, fr?: string, it?: string }
@@ -80,6 +84,8 @@ export interface ColumnConfig {
   formatter?: (value: any, row: any) => React.ReactNode;
   filterOptions?: string[]; // For enum/select filters
   cellClassName?: (value: any, row: any) => string; // For custom cell styling
+  fkSource?: string; // API endpoint for FK resolution (e.g., "/api/users/")
+  fkDisplayField?: string; // Which field of FK target to display (e.g., "username", "name", "roleLabel")
 }
 
 export interface FormGeneratorTableProps<T = any> {
@@ -296,6 +302,11 @@ export function FormGeneratorTable<T extends Record<string, any>>({
   const [openFilterColumn, setOpenFilterColumn] = useState<string | null>(null);
   const filterDropdownRef = useRef<HTMLDivElement>(null);
   
+  // FK Resolution: Cache for resolved FK values (fkSource -> { id -> displayLabel })
+  const [fkCache, setFkCache] = useState<FkCacheType>({});
+  const [fkLoading, setFkLoading] = useState<Record<string, boolean>>({});
+  const fkLoadedSourcesRef = useRef<Set<string>>(new Set());
+  
   // Generate a storage key based on column names for localStorage persistence
   const storageKey = useMemo(() => {
     if (detectedColumns.length === 0) return null;
@@ -445,6 +456,161 @@ export function FormGeneratorTable<T extends Record<string, any>>({
     }
   }).current;
 
+  // Helper function to convert any field value to display string
+  // Handles: string, boolean, number, TextMultilingual, objects
+  const convertToDisplayString = useCallback((fieldValue: any, language: string): string => {
+    if (fieldValue === null || fieldValue === undefined) {
+      return '-';
+    }
+    
+    // Boolean → language-neutral symbols (✓/✗)
+    if (typeof fieldValue === 'boolean') {
+      return fieldValue ? '✓' : '✗';
+    }
+    
+    // Number → String
+    if (typeof fieldValue === 'number') {
+      return String(fieldValue);
+    }
+    
+    // String → direct
+    if (typeof fieldValue === 'string') {
+      return fieldValue;
+    }
+    
+    // Object - check for TextMultilingual (has 'en' key)
+    if (typeof fieldValue === 'object' && fieldValue !== null) {
+      // TextMultilingual: { en: "...", ge: "...", fr: "...", it: "..." }
+      if ('en' in fieldValue) {
+        // Map frontend language codes to backend codes
+        const langMap: Record<string, string> = { 'de': 'ge', 'en': 'en', 'fr': 'fr', 'it': 'it' };
+        const backendLang = langMap[language] || language;
+        
+        // Try current language first, then fallback
+        if (fieldValue[backendLang] && typeof fieldValue[backendLang] === 'string' && fieldValue[backendLang].trim()) {
+          return fieldValue[backendLang];
+        }
+        if (fieldValue.en && typeof fieldValue.en === 'string' && fieldValue.en.trim()) {
+          return fieldValue.en;
+        }
+        // Try other languages
+        for (const lang of ['ge', 'fr', 'it']) {
+          if (fieldValue[lang] && typeof fieldValue[lang] === 'string' && fieldValue[lang].trim()) {
+            return fieldValue[lang];
+          }
+        }
+      }
+      
+      // Other objects → try to stringify
+      try {
+        return JSON.stringify(fieldValue);
+      } catch {
+        return String(fieldValue);
+      }
+    }
+    
+    // Fallback
+    return String(fieldValue);
+  }, []);
+
+  // FK Resolution: Load FK data in bulk for columns with fkSource
+  useEffect(() => {
+    if (data.length === 0 || detectedColumns.length === 0) return;
+
+    // Find columns with fkSource that haven't been loaded yet
+    const fkColumns = detectedColumns.filter(col => 
+      col.fkSource && !fkLoadedSourcesRef.current.has(col.fkSource)
+    );
+
+    if (fkColumns.length === 0) return;
+
+    // For each FK column, collect unique IDs from data and fetch them
+    const loadFkData = async () => {
+      for (const column of fkColumns) {
+        const fkSource = column.fkSource!;
+        const displayField = column.fkDisplayField; // Explicit field from Pydantic model
+        
+        // Skip if already loading
+        if (fkLoading[fkSource]) continue;
+
+        // Collect unique IDs from data for this column
+        const uniqueIds = new Set<string>();
+        data.forEach(row => {
+          const value = row[column.key];
+          if (value && typeof value === 'string' && value.length > 0) {
+            uniqueIds.add(value);
+          }
+        });
+
+        if (uniqueIds.size === 0) {
+          fkLoadedSourcesRef.current.add(fkSource);
+          continue;
+        }
+
+        // Mark as loading
+        setFkLoading(prev => ({ ...prev, [fkSource]: true }));
+
+        try {
+          // Fetch all items from the FK source endpoint
+          const response = await api.get(fkSource);
+          
+          // Build cache: id -> display label
+          const cacheForSource: Record<string, string> = {};
+          const items = Array.isArray(response.data) ? response.data : response.data?.items || [];
+          
+          items.forEach((item: any) => {
+            if (!item || !item.id) return;
+            
+            let displayLabel = item.id; // Fallback to ID
+            
+            // Use the EXPLICIT display field from Pydantic model (fkDisplayField)
+            if (displayField && item[displayField] !== undefined) {
+              displayLabel = convertToDisplayString(item[displayField], currentLanguage);
+            } else {
+              // Fallback: if no displayField specified, try common fields
+              // This should rarely happen if models are properly configured
+              const fallbackFields = ['name', 'label', 'username', 'roleLabel', 'title'];
+              for (const field of fallbackFields) {
+                if (item[field] !== undefined) {
+                  displayLabel = convertToDisplayString(item[field], currentLanguage);
+                  break;
+                }
+              }
+            }
+            
+            cacheForSource[item.id] = displayLabel;
+          });
+
+          // Update cache
+          setFkCache(prev => ({
+            ...prev,
+            [fkSource]: { ...(prev[fkSource] || {}), ...cacheForSource }
+          }));
+
+          // Mark as loaded
+          fkLoadedSourcesRef.current.add(fkSource);
+        } catch (error) {
+          console.error(`Failed to load FK data from ${fkSource}:`, error);
+          // Mark as loaded to prevent infinite retries
+          fkLoadedSourcesRef.current.add(fkSource);
+        } finally {
+          setFkLoading(prev => ({ ...prev, [fkSource]: false }));
+        }
+      }
+    };
+
+    loadFkData();
+  }, [data, detectedColumns, currentLanguage, fkLoading, convertToDisplayString]);
+
+  // Helper function to resolve FK value to display label
+  const resolveFkValue = useCallback((value: string, fkSource: string): string => {
+    const sourceCache = fkCache[fkSource];
+    if (sourceCache && sourceCache[value]) {
+      return sourceCache[value];
+    }
+    // Return truncated ID while loading or if not found
+    return value.length > 8 ? `${value.substring(0, 8)}...` : value;
+  }, [fkCache]);
 
   // Data is already filtered, sorted, and paginated by the backend
   // No client-side processing needed
@@ -916,6 +1082,19 @@ export function FormGeneratorTable<T extends Record<string, any>>({
       return renderBooleanCell(value, column, row);
     }
 
+    // FK Resolution: If column has fkSource and value is a string (UUID), resolve to display label
+    if (column.fkSource && typeof value === 'string' && value.length > 0) {
+      const resolvedLabel = resolveFkValue(value, column.fkSource);
+      const isLoading = fkLoading[column.fkSource];
+      
+      // Show loading indicator or resolved label
+      if (isLoading && !fkCache[column.fkSource]?.[value]) {
+        return <span className={styles.fkLoading}>{value.substring(0, 8)}...</span>;
+      }
+      
+      return resolvedLabel;
+    }
+
     // Check if this is an ID or hash field that should be truncated and copyable
     // Do this BEFORE checking for custom formatters to ensure IDs/hashes are always copyable
     const isId = isIdField(column.key);
diff --git a/src/components/Navigation/MandateNavigation.tsx b/src/components/Navigation/MandateNavigation.tsx
index 159cd60..9c50184 100644
--- a/src/components/Navigation/MandateNavigation.tsx
+++ b/src/components/Navigation/MandateNavigation.tsx
@@ -22,7 +22,7 @@ import { useMandates, useFeatureStore } from '../../stores/featureStore';
 import { useCurrentUser } from '../../hooks/useUsers';
 import { FEATURE_REGISTRY, getLabel } from '../../types/mandate';
 import type { Mandate, MandateFeature, FeatureInstance } from '../../types/mandate';
-import { FaHome, FaCog, FaBriefcase, FaRobot, FaPlay, FaBuilding, FaUsers, FaUserShield } from 'react-icons/fa';
+import { FaHome, FaCog, FaBriefcase, FaRobot, FaPlay, FaBuilding, FaUsers, FaUserShield, FaUserTag, FaCubes, FaEnvelopeOpenText, FaKey } from 'react-icons/fa';
 import { TreeNavigation, type TreeItem, type TreeNodeItem } from './TreeNavigation';
 import styles from './MandateNavigation.module.css';
 
@@ -195,24 +195,48 @@ export const MandateNavigation: React.FC = () => {
         type: 'section',
         title: 'ADMINISTRATION',
         children: [
-          {
-            id: 'admin-mandates',
-            label: 'Mandanten',
-            icon: <FaBuilding />,
-            path: '/admin/mandates',
-          },
           {
             id: 'admin-users',
             label: 'Benutzer',
             icon: <FaUsers />,
             path: '/admin/users',
           },
+          {
+            id: 'admin-invitations',
+            label: 'Einladungen',
+            icon: <FaEnvelopeOpenText />,
+            path: '/admin/invitations',
+          },
           {
             id: 'admin-roles',
             label: 'Globale Rollen',
             icon: <FaUserShield />,
             path: '/admin/roles',
           },
+          {
+            id: 'admin-mandates',
+            label: 'Mandanten',
+            icon: <FaBuilding />,
+            path: '/admin/mandates',
+          },
+          {
+            id: 'admin-mandate-roles',
+            label: 'Mandanten-Rollen',
+            icon: <FaKey />,
+            path: '/admin/mandate-roles',
+          },
+          {
+            id: 'admin-user-mandates',
+            label: 'Mandanten-Mitglieder',
+            icon: <FaUserTag />,
+            path: '/admin/user-mandates',
+          },
+          {
+            id: 'admin-feature-instances',
+            label: 'Feature-Instanzen',
+            icon: <FaCubes />,
+            path: '/admin/feature-instances',
+          },
         ],
       });
     }
diff --git a/src/components/RbacExportImport/RbacExportImport.module.css b/src/components/RbacExportImport/RbacExportImport.module.css
new file mode 100644
index 0000000..b045db2
--- /dev/null
+++ b/src/components/RbacExportImport/RbacExportImport.module.css
@@ -0,0 +1,507 @@
+/* =============================================================================
+ * RBAC Export/Import Component Styles
+ * ============================================================================= */
+
+.rbacExportImport {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .rbacExportImport {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* =============================================================================
+ * Section
+ * ============================================================================= */
+
+.section {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.sectionIcon {
+  color: var(--primary-color);
+  font-size: 1.125rem;
+}
+
+.sectionTitle {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-primary);
+}
+
+.sectionContent {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.sectionDescription {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* =============================================================================
+ * Buttons
+ * ============================================================================= */
+
+.primaryButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.primaryButton:hover:not(:disabled) {
+  background: var(--primary-color-dark);
+}
+
+.primaryButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.primaryButton.danger {
+  background: #c53030;
+}
+
+.primaryButton.danger:hover:not(:disabled) {
+  background: #9b2c2c;
+}
+
+.clearButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.clearButton:hover {
+  background: #fed7d7;
+  color: #c53030;
+  border-color: #fc8181;
+}
+
+.previewButton {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.previewButton:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: 1.25rem;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 0.25rem;
+  line-height: 1;
+}
+
+.closeButton:hover {
+  color: var(--text-primary);
+}
+
+/* =============================================================================
+ * File Upload
+ * ============================================================================= */
+
+.fileUpload {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.fileInput {
+  display: none;
+}
+
+.fileLabel {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 2px dashed var(--border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.fileLabel:hover {
+  border-color: var(--primary-color);
+  background: var(--bg-secondary);
+}
+
+.fileIcon {
+  font-size: 1.25rem;
+}
+
+/* =============================================================================
+ * Import Info & Stats
+ * ============================================================================= */
+
+.importInfo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+}
+
+.importStats {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+
+/* =============================================================================
+ * Import Mode Selection
+ * ============================================================================= */
+
+.importModeSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.importModeTitle {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-primary);
+}
+
+.importModes {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.importModeOption {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  grid-template-rows: auto auto;
+  gap: 0.25rem 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.importModeOption:hover {
+  background: var(--bg-secondary);
+}
+
+.importModeOption.selected {
+  border-color: var(--primary-color);
+  background: var(--primary-color-light);
+}
+
+.radioInput {
+  grid-row: span 2;
+  align-self: center;
+  accent-color: var(--primary-color);
+}
+
+.modeIcon {
+  grid-row: span 2;
+  align-self: center;
+  font-size: 1.125rem;
+}
+
+.modeLabel {
+  font-weight: 500;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+}
+
+.modeDescription {
+  font-size: 0.75rem;
+  color: var(--text-tertiary);
+  grid-column: 3;
+}
+
+/* =============================================================================
+ * Messages
+ * ============================================================================= */
+
+.errorMessage {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: #fed7d7;
+  color: #c53030;
+  border-radius: 6px;
+  font-size: 0.875rem;
+}
+
+.warningMessage {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: #fefcbf;
+  color: #744210;
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+/* =============================================================================
+ * Modal
+ * ============================================================================= */
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal {
+  background: var(--bg-primary);
+  border-radius: 8px;
+  max-width: 500px;
+  width: 100%;
+  max-height: 80vh;
+  overflow: auto;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+
+/* =============================================================================
+ * Preview
+ * ============================================================================= */
+
+.preview {
+  display: flex;
+  flex-direction: column;
+}
+
+.previewHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.previewTitle {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.previewContent {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.previewSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.previewSection h5 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.previewList {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.8125rem;
+  color: var(--text-primary);
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.previewList code {
+  background: var(--bg-secondary);
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 0.75rem;
+}
+
+.featureBadge,
+.contextBadge {
+  display: inline-block;
+  padding: 0.125rem 0.375rem;
+  background: var(--primary-color-light);
+  color: var(--primary-color);
+  font-size: 0.625rem;
+  font-weight: 600;
+  border-radius: 3px;
+  margin-left: 0.5rem;
+  text-transform: uppercase;
+}
+
+.contextBadge {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  margin-left: 0;
+  margin-right: 0.5rem;
+}
+
+.moreItems {
+  color: var(--text-tertiary);
+  font-style: italic;
+}
+
+/* =============================================================================
+ * Import Result
+ * ============================================================================= */
+
+.importResult {
+  display: flex;
+  flex-direction: column;
+}
+
+.resultHeader {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.importResult.success .resultHeader {
+  background: #c6f6d5;
+}
+
+.importResult.error .resultHeader {
+  background: #fed7d7;
+}
+
+.resultIcon {
+  font-size: 1.25rem;
+}
+
+.importResult.success .resultIcon {
+  color: #38a169;
+}
+
+.importResult.error .resultIcon {
+  color: #c53030;
+}
+
+.resultTitle {
+  flex: 1;
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.resultContent {
+  padding: 1rem;
+}
+
+.resultStats {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+}
+
+.resultErrors {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.resultErrors h5 {
+  margin: 0 0 0.5rem;
+  font-size: 0.875rem;
+  color: #c53030;
+}
+
+.resultErrors ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.8125rem;
+  color: #c53030;
+}
+
+/* =============================================================================
+ * Spinning Animation
+ * ============================================================================= */
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
diff --git a/src/components/RbacExportImport/RbacExportImport.tsx b/src/components/RbacExportImport/RbacExportImport.tsx
new file mode 100644
index 0000000..42095e3
--- /dev/null
+++ b/src/components/RbacExportImport/RbacExportImport.tsx
@@ -0,0 +1,459 @@
+/**
+ * RbacExportImport
+ * 
+ * Component for exporting and importing RBAC configurations.
+ * Supports mandate-level and global exports with different import modes.
+ */
+
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import {
+  FaDownload,
+  FaUpload,
+  FaFileExport,
+  FaFileImport,
+  FaSpinner,
+  FaCheckCircle,
+  FaExclamationTriangle,
+  FaInfoCircle,
+  FaTrash,
+  FaEye,
+} from 'react-icons/fa';
+import {
+  useRbacExportImport,
+  type RbacExport,
+  type ImportMode,
+  type RbacImportResult,
+} from '../../hooks/useRbacExportImport';
+import styles from './RbacExportImport.module.css';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface RbacExportImportProps {
+  mandateId?: string;
+  mandateName?: string;
+  isGlobal?: boolean;
+  featureCode?: string;
+}
+
+// =============================================================================
+// IMPORT MODE OPTIONS
+// =============================================================================
+
+const IMPORT_MODES: { value: ImportMode; label: string; description: string; icon: React.ReactNode }[] = [
+  {
+    value: 'merge',
+    label: 'Zusammenführen',
+    description: 'Bestehende Regeln aktualisieren, neue hinzufügen',
+    icon: <FaCheckCircle style={{ color: '#38a169' }} />,
+  },
+  {
+    value: 'add_only',
+    label: 'Nur hinzufügen',
+    description: 'Nur neue Regeln hinzufügen, bestehende nicht ändern',
+    icon: <FaInfoCircle style={{ color: '#3182ce' }} />,
+  },
+  {
+    value: 'replace',
+    label: 'Ersetzen',
+    description: 'Alle bestehenden Regeln löschen und ersetzen',
+    icon: <FaExclamationTriangle style={{ color: '#d69e2e' }} />,
+  },
+];
+
+// =============================================================================
+// PREVIEW COMPONENT
+// =============================================================================
+
+interface PreviewProps {
+  data: RbacExport;
+  onClose: () => void;
+}
+
+const ExportPreview: React.FC<PreviewProps> = ({ data, onClose }) => {
+  return (
+    <div className={styles.preview}>
+      <div className={styles.previewHeader}>
+        <h4 className={styles.previewTitle}>Export-Vorschau</h4>
+        <button className={styles.closeButton} onClick={onClose}>✕</button>
+      </div>
+      <div className={styles.previewContent}>
+        <div className={styles.previewSection}>
+          <h5>Scope</h5>
+          <ul className={styles.previewList}>
+            <li><strong>Typ:</strong> {data.scope.type}</li>
+            {data.scope.mandateName && <li><strong>Mandant:</strong> {data.scope.mandateName}</li>}
+            {data.scope.featureCode && <li><strong>Feature:</strong> {data.scope.featureCode}</li>}
+          </ul>
+        </div>
+        <div className={styles.previewSection}>
+          <h5>Rollen ({data.roles.length})</h5>
+          <ul className={styles.previewList}>
+            {data.roles.slice(0, 5).map((role, i) => (
+              <li key={i}>
+                <code>{role.roleLabel}</code>
+                {role.featureCode && <span className={styles.featureBadge}>{role.featureCode}</span>}
+              </li>
+            ))}
+            {data.roles.length > 5 && (
+              <li className={styles.moreItems}>... und {data.roles.length - 5} weitere</li>
+            )}
+          </ul>
+        </div>
+        <div className={styles.previewSection}>
+          <h5>Regeln ({data.accessRules.length})</h5>
+          <ul className={styles.previewList}>
+            {data.accessRules.slice(0, 5).map((rule, i) => (
+              <li key={i}>
+                <span className={styles.contextBadge}>{rule.context}</span>
+                <code>{rule.item || '(global)'}</code>
+              </li>
+            ))}
+            {data.accessRules.length > 5 && (
+              <li className={styles.moreItems}>... und {data.accessRules.length - 5} weitere</li>
+            )}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// =============================================================================
+// IMPORT RESULT COMPONENT
+// =============================================================================
+
+interface ImportResultProps {
+  result: RbacImportResult;
+  onClose: () => void;
+}
+
+const ImportResult: React.FC<ImportResultProps> = ({ result, onClose }) => {
+  const isSuccess = result.status === 'success';
+  
+  return (
+    <div className={`${styles.importResult} ${isSuccess ? styles.success : styles.error}`}>
+      <div className={styles.resultHeader}>
+        {isSuccess ? (
+          <FaCheckCircle className={styles.resultIcon} />
+        ) : (
+          <FaExclamationTriangle className={styles.resultIcon} />
+        )}
+        <h4 className={styles.resultTitle}>
+          {isSuccess ? 'Import erfolgreich' : 'Import fehlgeschlagen'}
+        </h4>
+        <button className={styles.closeButton} onClick={onClose}>✕</button>
+      </div>
+      <div className={styles.resultContent}>
+        <ul className={styles.resultStats}>
+          <li><strong>Modus:</strong> {IMPORT_MODES.find(m => m.value === result.mode)?.label}</li>
+          <li><strong>Rollen erstellt:</strong> {result.rolesCreated}</li>
+          <li><strong>Rollen aktualisiert:</strong> {result.rolesUpdated}</li>
+          <li><strong>Regeln erstellt:</strong> {result.rulesCreated}</li>
+          <li><strong>Regeln aktualisiert:</strong> {result.rulesUpdated}</li>
+        </ul>
+        {result.errors && result.errors.length > 0 && (
+          <div className={styles.resultErrors}>
+            <h5>Fehler:</h5>
+            <ul>
+              {result.errors.map((err, i) => (
+                <li key={i}>{err}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+
+export const RbacExportImport: React.FC<RbacExportImportProps> = ({
+  mandateId,
+  mandateName,
+  isGlobal = false,
+  featureCode,
+}) => {
+  const {
+    exporting,
+    importing,
+    error,
+    lastExport,
+    lastImportResult,
+    exportMandateRbac,
+    exportGlobalRbac,
+    importMandateRbac,
+    importGlobalRbac,
+    downloadExport,
+    parseImportFile,
+    reset,
+  } = useRbacExportImport();
+
+  const [importMode, setImportMode] = useState<ImportMode>('merge');
+  const [importFile, setImportFile] = useState<File | null>(null);
+  const [importData, setImportData] = useState<RbacExport | null>(null);
+  const [parseError, setParseError] = useState<string | null>(null);
+  const [showPreview, setShowPreview] = useState(false);
+  const [showResult, setShowResult] = useState(false);
+  
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Handle export
+  const handleExport = async () => {
+    let result;
+    if (isGlobal) {
+      result = await exportGlobalRbac(featureCode);
+    } else if (mandateId) {
+      result = await exportMandateRbac(mandateId, featureCode);
+    } else {
+      return;
+    }
+    
+    if (result.success && result.data) {
+      downloadExport(result.data);
+    }
+  };
+
+  // Handle file selection
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    
+    setImportFile(file);
+    setParseError(null);
+    
+    const result = await parseImportFile(file);
+    if (result.success && result.data) {
+      setImportData(result.data);
+    } else {
+      setParseError(result.error || 'Fehler beim Parsen');
+      setImportData(null);
+    }
+  };
+
+  // Handle import
+  const handleImport = async () => {
+    if (!importData) return;
+    
+    let result;
+    if (isGlobal) {
+      result = await importGlobalRbac(importData, importMode);
+    } else if (mandateId) {
+      result = await importMandateRbac(mandateId, importData, importMode);
+    } else {
+      return;
+    }
+    
+    if (result.success) {
+      setShowResult(true);
+      // Clear import state
+      setImportFile(null);
+      setImportData(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  // Clear import state
+  const handleClearImport = () => {
+    setImportFile(null);
+    setImportData(null);
+    setParseError(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  // Handle close result
+  const handleCloseResult = () => {
+    setShowResult(false);
+    reset();
+  };
+
+  return (
+    <div className={styles.rbacExportImport}>
+      {/* Export Section */}
+      <div className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <FaFileExport className={styles.sectionIcon} />
+          <h3 className={styles.sectionTitle}>Export</h3>
+        </div>
+        <div className={styles.sectionContent}>
+          <p className={styles.sectionDescription}>
+            Exportiert alle Rollen und Berechtigungen 
+            {isGlobal ? ' der globalen Templates' : ` des Mandanten "${mandateName || mandateId}"`}
+            {featureCode ? ` für Feature "${featureCode}"` : ''} als JSON-Datei.
+          </p>
+          <button
+            className={styles.primaryButton}
+            onClick={handleExport}
+            disabled={exporting || (!isGlobal && !mandateId)}
+          >
+            {exporting ? (
+              <>
+                <FaSpinner className="spinning" /> Exportieren...
+              </>
+            ) : (
+              <>
+                <FaDownload /> RBAC exportieren
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Import Section */}
+      <div className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <FaFileImport className={styles.sectionIcon} />
+          <h3 className={styles.sectionTitle}>Import</h3>
+        </div>
+        <div className={styles.sectionContent}>
+          {/* File Upload */}
+          <div className={styles.fileUpload}>
+            <input
+              type="file"
+              ref={fileInputRef}
+              accept=".json"
+              onChange={handleFileSelect}
+              className={styles.fileInput}
+              id="rbac-import-file"
+            />
+            <label htmlFor="rbac-import-file" className={styles.fileLabel}>
+              {importFile ? (
+                <>
+                  <FaCheckCircle className={styles.fileIcon} style={{ color: '#38a169' }} />
+                  <span>{importFile.name}</span>
+                </>
+              ) : (
+                <>
+                  <FaUpload className={styles.fileIcon} />
+                  <span>JSON-Datei auswählen oder hier ablegen</span>
+                </>
+              )}
+            </label>
+            {importFile && (
+              <button
+                className={styles.clearButton}
+                onClick={handleClearImport}
+                title="Datei entfernen"
+              >
+                <FaTrash />
+              </button>
+            )}
+          </div>
+
+          {/* Parse Error */}
+          {parseError && (
+            <div className={styles.errorMessage}>
+              <FaExclamationTriangle /> {parseError}
+            </div>
+          )}
+
+          {/* Import Data Info */}
+          {importData && (
+            <div className={styles.importInfo}>
+              <div className={styles.importStats}>
+                <span><strong>Rollen:</strong> {importData.roles.length}</span>
+                <span><strong>Regeln:</strong> {importData.accessRules.length}</span>
+                <span><strong>Quelle:</strong> {importData.scope.type}</span>
+              </div>
+              <button
+                className={styles.previewButton}
+                onClick={() => setShowPreview(true)}
+              >
+                <FaEye /> Vorschau
+              </button>
+            </div>
+          )}
+
+          {/* Import Mode Selection */}
+          {importData && (
+            <div className={styles.importModeSection}>
+              <h4 className={styles.importModeTitle}>Import-Modus</h4>
+              <div className={styles.importModes}>
+                {IMPORT_MODES.map(mode => (
+                  <label
+                    key={mode.value}
+                    className={`${styles.importModeOption} ${importMode === mode.value ? styles.selected : ''}`}
+                  >
+                    <input
+                      type="radio"
+                      name="importMode"
+                      value={mode.value}
+                      checked={importMode === mode.value}
+                      onChange={(e) => setImportMode(e.target.value as ImportMode)}
+                      className={styles.radioInput}
+                    />
+                    <span className={styles.modeIcon}>{mode.icon}</span>
+                    <span className={styles.modeLabel}>{mode.label}</span>
+                    <span className={styles.modeDescription}>{mode.description}</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Import Button */}
+          {importData && (
+            <button
+              className={`${styles.primaryButton} ${importMode === 'replace' ? styles.danger : ''}`}
+              onClick={handleImport}
+              disabled={importing || (!isGlobal && !mandateId)}
+            >
+              {importing ? (
+                <>
+                  <FaSpinner className="spinning" /> Importieren...
+                </>
+              ) : (
+                <>
+                  <FaUpload /> RBAC importieren
+                </>
+              )}
+            </button>
+          )}
+
+          {/* Warning for replace mode */}
+          {importMode === 'replace' && importData && (
+            <div className={styles.warningMessage}>
+              <FaExclamationTriangle /> 
+              <strong>Achtung:</strong> Im Modus "Ersetzen" werden alle bestehenden Rollen und Regeln gelöscht!
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <div className={styles.errorMessage}>
+          <FaExclamationTriangle /> {error}
+        </div>
+      )}
+
+      {/* Preview Modal */}
+      {showPreview && importData && (
+        <div className={styles.modalOverlay} onClick={() => setShowPreview(false)}>
+          <div className={styles.modal} onClick={e => e.stopPropagation()}>
+            <ExportPreview data={importData} onClose={() => setShowPreview(false)} />
+          </div>
+        </div>
+      )}
+
+      {/* Result Modal */}
+      {showResult && lastImportResult && (
+        <div className={styles.modalOverlay} onClick={handleCloseResult}>
+          <div className={styles.modal} onClick={e => e.stopPropagation()}>
+            <ImportResult result={lastImportResult} onClose={handleCloseResult} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RbacExportImport;
diff --git a/src/components/RbacExportImport/index.ts b/src/components/RbacExportImport/index.ts
new file mode 100644
index 0000000..7e63723
--- /dev/null
+++ b/src/components/RbacExportImport/index.ts
@@ -0,0 +1,5 @@
+/**
+ * RBAC Export/Import Components
+ */
+
+export { RbacExportImport } from './RbacExportImport';
diff --git a/src/hooks/useAccessRules.ts b/src/hooks/useAccessRules.ts
new file mode 100644
index 0000000..cde5fb9
--- /dev/null
+++ b/src/hooks/useAccessRules.ts
@@ -0,0 +1,248 @@
+/**
+ * useAccessRules Hook
+ * 
+ * Hook for managing RBAC AccessRules for a specific role.
+ * Provides CRUD operations for access rules.
+ */
+
+import { useState, useCallback } from 'react';
+import api from '../api';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export type AccessLevel = 'n' | 'm' | 'g' | 'a';
+export type RuleContext = 'DATA' | 'UI' | 'RESOURCE';
+
+export interface AccessRule {
+  id: string;
+  roleId: string;
+  context: RuleContext;
+  item: string | null;
+  view: boolean;
+  read: AccessLevel | null;
+  create: AccessLevel | null;
+  update: AccessLevel | null;
+  delete: AccessLevel | null;
+}
+
+export interface AccessRuleCreate {
+  context: RuleContext;
+  item: string | null;
+  view?: boolean;
+  read?: AccessLevel | null;
+  create?: AccessLevel | null;
+  update?: AccessLevel | null;
+  delete?: AccessLevel | null;
+}
+
+export interface AccessRuleUpdate {
+  view?: boolean;
+  read?: AccessLevel | null;
+  create?: AccessLevel | null;
+  update?: AccessLevel | null;
+  delete?: AccessLevel | null;
+}
+
+// Grouped rules by context
+export interface GroupedRules {
+  DATA: AccessRule[];
+  UI: AccessRule[];
+  RESOURCE: AccessRule[];
+}
+
+// =============================================================================
+// ACCESS LEVEL LABELS
+// =============================================================================
+
+export const ACCESS_LEVEL_OPTIONS: { value: AccessLevel; label: string; color: string }[] = [
+  { value: 'n', label: 'Keine', color: '#e53e3e' },
+  { value: 'm', label: 'Eigene', color: '#d69e2e' },
+  { value: 'g', label: 'Gruppe', color: '#3182ce' },
+  { value: 'a', label: 'Alle', color: '#38a169' },
+];
+
+export const getAccessLevelLabel = (level: AccessLevel | null): string => {
+  if (!level) return '-';
+  const option = ACCESS_LEVEL_OPTIONS.find(opt => opt.value === level);
+  return option?.label || level;
+};
+
+export const getAccessLevelColor = (level: AccessLevel | null): string => {
+  if (!level) return '#718096';
+  const option = ACCESS_LEVEL_OPTIONS.find(opt => opt.value === level);
+  return option?.color || '#718096';
+};
+
+// =============================================================================
+// HOOK
+// =============================================================================
+
+export function useAccessRules(roleId: string | null) {
+  const [rules, setRules] = useState<AccessRule[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * Fetch all rules for the role
+   */
+  const fetchRules = useCallback(async (): Promise<AccessRule[]> => {
+    if (!roleId) {
+      setRules([]);
+      return [];
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.get(`/api/rbac/roles/${roleId}/rules`);
+      const fetchedRules = Array.isArray(response.data) ? response.data : response.data.rules || [];
+      setRules(fetchedRules);
+      return fetchedRules;
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to fetch access rules';
+      setError(errorMessage);
+      setRules([]);
+      return [];
+    } finally {
+      setLoading(false);
+    }
+  }, [roleId]);
+
+  /**
+   * Save all rules for the role (bulk update)
+   */
+  const saveRules = useCallback(async (newRules: AccessRule[]): Promise<{ success: boolean; error?: string }> => {
+    if (!roleId) {
+      return { success: false, error: 'No role selected' };
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      await api.put(`/api/rbac/roles/${roleId}/rules`, { rules: newRules });
+      setRules(newRules);
+      return { success: true };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to save access rules';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setSaving(false);
+    }
+  }, [roleId]);
+
+  /**
+   * Create a new rule
+   */
+  const createRule = useCallback(async (ruleData: AccessRuleCreate): Promise<{ success: boolean; data?: AccessRule; error?: string }> => {
+    if (!roleId) {
+      return { success: false, error: 'No role selected' };
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      const response = await api.post(`/api/rbac/roles/${roleId}/rules`, ruleData);
+      const newRule = response.data;
+      setRules(prev => [...prev, newRule]);
+      return { success: true, data: newRule };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to create access rule';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setSaving(false);
+    }
+  }, [roleId]);
+
+  /**
+   * Update an existing rule
+   */
+  const updateRule = useCallback(async (ruleId: string, updates: AccessRuleUpdate): Promise<{ success: boolean; error?: string }> => {
+    setSaving(true);
+    setError(null);
+    try {
+      const response = await api.patch(`/api/rbac/rules/${ruleId}`, updates);
+      setRules(prev => prev.map(r => r.id === ruleId ? { ...r, ...response.data } : r));
+      return { success: true };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to update access rule';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setSaving(false);
+    }
+  }, []);
+
+  /**
+   * Delete a rule
+   */
+  const deleteRule = useCallback(async (ruleId: string): Promise<{ success: boolean; error?: string }> => {
+    setSaving(true);
+    setError(null);
+    try {
+      await api.delete(`/api/rbac/rules/${ruleId}`);
+      setRules(prev => prev.filter(r => r.id !== ruleId));
+      return { success: true };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to delete access rule';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setSaving(false);
+    }
+  }, []);
+
+  /**
+   * Get rules grouped by context
+   */
+  const getGroupedRules = useCallback((): GroupedRules => {
+    return {
+      DATA: rules.filter(r => r.context === 'DATA'),
+      UI: rules.filter(r => r.context === 'UI'),
+      RESOURCE: rules.filter(r => r.context === 'RESOURCE'),
+    };
+  }, [rules]);
+
+  /**
+   * Update rule locally (for optimistic updates)
+   */
+  const updateRuleLocally = useCallback((ruleId: string, updates: Partial<AccessRule>) => {
+    setRules(prev => prev.map(r => r.id === ruleId ? { ...r, ...updates } : r));
+  }, []);
+
+  /**
+   * Add rule locally (for optimistic updates)
+   */
+  const addRuleLocally = useCallback((rule: AccessRule) => {
+    setRules(prev => [...prev, rule]);
+  }, []);
+
+  /**
+   * Remove rule locally (for optimistic updates)
+   */
+  const removeRuleLocally = useCallback((ruleId: string) => {
+    setRules(prev => prev.filter(r => r.id !== ruleId));
+  }, []);
+
+  return {
+    rules,
+    loading,
+    saving,
+    error,
+    fetchRules,
+    saveRules,
+    createRule,
+    updateRule,
+    deleteRule,
+    getGroupedRules,
+    updateRuleLocally,
+    addRuleLocally,
+    removeRuleLocally,
+  };
+}
+
+export default useAccessRules;
diff --git a/src/hooks/useFeatureAccess.ts b/src/hooks/useFeatureAccess.ts
new file mode 100644
index 0000000..c7a5f49
--- /dev/null
+++ b/src/hooks/useFeatureAccess.ts
@@ -0,0 +1,249 @@
+/**
+ * useFeatureAccess Hook
+ * 
+ * Hook for managing feature instance access (which users can access which feature instances with which roles).
+ * Uses the /api/features endpoints.
+ */
+
+import { useState, useCallback } from 'react';
+import api from '../api';
+
+// Types
+export interface Feature {
+  code: string;
+  label: string | { [key: string]: string };
+  icon?: string;
+  enabled?: boolean;
+}
+
+export interface FeatureInstance {
+  id: string;
+  featureCode: string;
+  mandateId: string;
+  label: string;
+  enabled: boolean;
+}
+
+export interface FeatureAccess {
+  id: string;
+  userId: string;
+  featureInstanceId: string;
+  enabled: boolean;
+  roleIds?: string[];
+}
+
+export interface FeatureAccessUser {
+  userId: string;
+  username: string;
+  email?: string;
+  fullName?: string;
+  featureAccessId: string;
+  roleIds: string[];
+  enabled: boolean;
+}
+
+export interface FeatureInstanceCreate {
+  featureCode: string;
+  label: string;
+  copyTemplateRoles?: boolean;
+}
+
+/**
+ * Hook for managing feature access
+ */
+export function useFeatureAccess() {
+  const [features, setFeatures] = useState<Feature[]>([]);
+  const [instances, setInstances] = useState<FeatureInstance[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * Fetch all available features
+   */
+  const fetchFeatures = useCallback(async (): Promise<Feature[]> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.get('/api/features/');
+      const data = Array.isArray(response.data) ? response.data : [];
+      setFeatures(data);
+      return data;
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to fetch features';
+      setError(errorMessage);
+      setFeatures([]);
+      return [];
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Fetch feature instances for a mandate
+   */
+  const fetchInstances = useCallback(async (mandateId: string, featureCode?: string): Promise<FeatureInstance[]> => {
+    setLoading(true);
+    setError(null);
+    try {
+      let url = '/api/features/instances';
+      if (featureCode) {
+        url += `?featureCode=${encodeURIComponent(featureCode)}`;
+      }
+      
+      const response = await api.get(url, {
+        headers: {
+          'X-Mandate-Id': mandateId
+        }
+      });
+      const data = Array.isArray(response.data) ? response.data : [];
+      setInstances(data);
+      return data;
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to fetch feature instances';
+      setError(errorMessage);
+      setInstances([]);
+      return [];
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Create a new feature instance
+   */
+  const createInstance = useCallback(async (
+    mandateId: string,
+    data: FeatureInstanceCreate
+  ): Promise<{ success: boolean; data?: FeatureInstance; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.post('/api/features/instances', data, {
+        headers: {
+          'X-Mandate-Id': mandateId
+        }
+      });
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to create feature instance';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Delete a feature instance
+   */
+  const deleteInstance = useCallback(async (
+    mandateId: string,
+    instanceId: string
+  ): Promise<{ success: boolean; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      await api.delete(`/api/features/instances/${instanceId}`, {
+        headers: {
+          'X-Mandate-Id': mandateId
+        }
+      });
+      // Optimistically update the local state
+      setInstances(prev => prev.filter(i => i.id !== instanceId));
+      return { success: true };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to delete feature instance';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Sync roles for a feature instance from templates
+   */
+  const syncInstanceRoles = useCallback(async (
+    mandateId: string,
+    instanceId: string,
+    addOnly: boolean = true
+  ): Promise<{ success: boolean; data?: { added: number; removed: number; unchanged: number }; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.post(`/api/features/instances/${instanceId}/sync-roles?addOnly=${addOnly}`, {}, {
+        headers: {
+          'X-Mandate-Id': mandateId
+        }
+      });
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to sync instance roles';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Get current user's feature instances (grouped by mandate)
+   */
+  const fetchMyFeatureInstances = useCallback(async (): Promise<{
+    mandates: Array<{
+      id: string;
+      name: string;
+      features: Array<{
+        code: string;
+        label: string | { [key: string]: string };
+        instances: Array<{
+          id: string;
+          featureCode: string;
+          mandateId: string;
+          instanceLabel: string;
+        }>;
+      }>;
+    }>;
+  }> => {
+    try {
+      const response = await api.get('/api/features/my');
+      return response.data || { mandates: [] };
+    } catch (err: any) {
+      console.error('Error fetching my feature instances:', err);
+      return { mandates: [] };
+    }
+  }, []);
+
+  /**
+   * Get template roles for features
+   */
+  const fetchTemplateRoles = useCallback(async (featureCode?: string): Promise<any[]> => {
+    try {
+      let url = '/api/features/templates/roles';
+      if (featureCode) {
+        url += `?featureCode=${encodeURIComponent(featureCode)}`;
+      }
+      const response = await api.get(url);
+      return Array.isArray(response.data) ? response.data : [];
+    } catch (err: any) {
+      console.error('Error fetching template roles:', err);
+      return [];
+    }
+  }, []);
+
+  return {
+    features,
+    instances,
+    loading,
+    error,
+    fetchFeatures,
+    fetchInstances,
+    createInstance,
+    deleteInstance,
+    syncInstanceRoles,
+    fetchMyFeatureInstances,
+    fetchTemplateRoles,
+  };
+}
+
+export default useFeatureAccess;
diff --git a/src/hooks/useInvitations.ts b/src/hooks/useInvitations.ts
new file mode 100644
index 0000000..f3e4fc6
--- /dev/null
+++ b/src/hooks/useInvitations.ts
@@ -0,0 +1,222 @@
+/**
+ * useInvitations Hook
+ * 
+ * Hook for managing invitations (creating, listing, validating, accepting).
+ * Uses the /api/invitations endpoints.
+ */
+
+import { useState, useCallback } from 'react';
+import api from '../api';
+
+// Types
+export interface Invitation {
+  id: string;
+  token: string;
+  mandateId: string;
+  featureInstanceId?: string;
+  roleIds: string[];
+  email?: string;
+  createdBy: string;
+  createdAt: number;
+  expiresAt: number;
+  usedBy?: string;
+  usedAt?: number;
+  revokedAt?: number;
+  maxUses: number;
+  currentUses: number;
+  inviteUrl: string;
+  isExpired?: boolean;
+  isUsedUp?: boolean;
+}
+
+export interface InvitationCreate {
+  email?: string;
+  roleIds: string[];
+  featureInstanceId?: string;
+  expiresInHours?: number;
+  maxUses?: number;
+}
+
+export interface InvitationValidation {
+  valid: boolean;
+  reason?: string;
+  mandateId?: string;
+  mandateName?: string;
+  featureInstanceId?: string;
+  roleIds: string[];
+  roleLabels?: string[];
+}
+
+export interface RegisterAndAcceptData {
+  token: string;
+  username: string;
+  email: string;
+  password: string;
+  firstname?: string;
+  lastname?: string;
+}
+
+/**
+ * Hook for managing invitations
+ */
+export function useInvitations() {
+  const [invitations, setInvitations] = useState<Invitation[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * Fetch all invitations for a mandate
+   */
+  const fetchInvitations = useCallback(async (
+    mandateId: string,
+    options?: { includeUsed?: boolean; includeExpired?: boolean }
+  ): Promise<Invitation[]> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams();
+      if (options?.includeUsed) params.append('includeUsed', 'true');
+      if (options?.includeExpired) params.append('includeExpired', 'true');
+      
+      const response = await api.get(`/api/invitations/?${params.toString()}`, {
+        headers: { 'X-Mandate-Id': mandateId }
+      });
+      const data = Array.isArray(response.data) ? response.data : [];
+      setInvitations(data);
+      return data;
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to fetch invitations';
+      setError(errorMessage);
+      setInvitations([]);
+      return [];
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Create a new invitation
+   */
+  const createInvitation = useCallback(async (
+    mandateId: string,
+    data: InvitationCreate
+  ): Promise<{ success: boolean; data?: Invitation; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.post('/api/invitations/', data, {
+        headers: { 'X-Mandate-Id': mandateId }
+      });
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to create invitation';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Revoke an invitation
+   */
+  const revokeInvitation = useCallback(async (
+    mandateId: string,
+    invitationId: string
+  ): Promise<{ success: boolean; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      await api.delete(`/api/invitations/${invitationId}`, {
+        headers: { 'X-Mandate-Id': mandateId }
+      });
+      // Optimistically update local state
+      setInvitations(prev => prev.filter(inv => inv.id !== invitationId));
+      return { success: true };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to revoke invitation';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Validate an invitation token (public - no auth required)
+   */
+  const validateInvitation = useCallback(async (
+    token: string
+  ): Promise<InvitationValidation> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.get(`/api/invitations/validate/${token}`);
+      return response.data;
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to validate invitation';
+      setError(errorMessage);
+      return {
+        valid: false,
+        reason: errorMessage,
+        roleIds: []
+      };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Accept an invitation (requires authentication)
+   */
+  const acceptInvitation = useCallback(async (
+    token: string
+  ): Promise<{ success: boolean; data?: any; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.post(`/api/invitations/accept/${token}`);
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to accept invitation';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Register and accept invitation in one step (public - no auth required)
+   */
+  const registerAndAccept = useCallback(async (
+    data: RegisterAndAcceptData
+  ): Promise<{ success: boolean; data?: any; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.post('/api/invitations/register-and-accept', data);
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to register and accept invitation';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return {
+    invitations,
+    loading,
+    error,
+    fetchInvitations,
+    createInvitation,
+    revokeInvitation,
+    validateInvitation,
+    acceptInvitation,
+    registerAndAccept,
+  };
+}
+
+export default useInvitations;
diff --git a/src/hooks/useMandateRoles.ts b/src/hooks/useMandateRoles.ts
new file mode 100644
index 0000000..8abe8aa
--- /dev/null
+++ b/src/hooks/useMandateRoles.ts
@@ -0,0 +1,242 @@
+/**
+ * useMandateRoles Hook
+ * 
+ * Hook for managing roles within a specific mandate.
+ * Uses the /api/rbac/roles endpoints.
+ */
+
+import { useState, useCallback } from 'react';
+import api from '../api';
+
+// Types
+export interface Role {
+  id: string;
+  roleLabel: string;
+  description?: string | { [key: string]: string };
+  mandateId?: string;
+  featureInstanceId?: string;
+  featureCode?: string;
+  isSystemRole?: boolean;
+  isTemplate?: boolean;
+  createdAt?: number;
+  updatedAt?: number;
+}
+
+export interface RoleCreate {
+  roleLabel: string;
+  description?: string | { [key: string]: string };
+  mandateId?: string;
+  featureInstanceId?: string;
+  featureCode?: string;
+}
+
+export interface RoleUpdate {
+  roleLabel?: string;
+  description?: string | { [key: string]: string };
+  mandateId?: string | null;
+}
+
+/**
+ * Hook for managing mandate roles
+ */
+export function useMandateRoles() {
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * Fetch all roles (optionally filtered by mandate)
+   */
+  const fetchRoles = useCallback(async (mandateId?: string): Promise<Role[]> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const headers: Record<string, string> = {};
+      if (mandateId) {
+        headers['X-Mandate-Id'] = mandateId;
+      }
+      
+      const response = await api.get('/api/rbac/roles', { headers });
+      let data: Role[] = [];
+      
+      if (response.data?.items && Array.isArray(response.data.items)) {
+        data = response.data.items;
+      } else if (Array.isArray(response.data)) {
+        data = response.data;
+      }
+      
+      // Filter to only show roles for this mandate (or global roles)
+      if (mandateId) {
+        data = data.filter(r => !r.mandateId || r.mandateId === mandateId);
+      }
+      
+      setRoles(data);
+      return data;
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to fetch roles';
+      setError(errorMessage);
+      setRoles([]);
+      return [];
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Get a single role by ID
+   */
+  const getRole = useCallback(async (roleId: string): Promise<Role | null> => {
+    try {
+      const response = await api.get(`/api/rbac/roles/${roleId}`);
+      return response.data;
+    } catch (err: any) {
+      console.error('Error fetching role:', err);
+      return null;
+    }
+  }, []);
+
+  /**
+   * Create a new role
+   */
+  const createRole = useCallback(async (
+    data: RoleCreate,
+    mandateId?: string
+  ): Promise<{ success: boolean; data?: Role; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const headers: Record<string, string> = {};
+      if (mandateId) {
+        headers['X-Mandate-Id'] = mandateId;
+      }
+      
+      const response = await api.post('/api/rbac/roles', data, { headers });
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to create role';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Update an existing role
+   */
+  const updateRole = useCallback(async (
+    roleId: string,
+    data: RoleUpdate
+  ): Promise<{ success: boolean; data?: Role; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.put(`/api/rbac/roles/${roleId}`, data);
+      // Optimistically update local state
+      setRoles(prev => prev.map(r => r.id === roleId ? { ...r, ...data } : r));
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to update role';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Delete a role
+   */
+  const deleteRole = useCallback(async (
+    roleId: string
+  ): Promise<{ success: boolean; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      await api.delete(`/api/rbac/roles/${roleId}`);
+      // Optimistically update local state
+      setRoles(prev => prev.filter(r => r.id !== roleId));
+      return { success: true };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to delete role';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Get role options (for dropdowns)
+   */
+  const fetchRoleOptions = useCallback(async (): Promise<Array<{ value: string; label: string }>> => {
+    try {
+      const response = await api.get('/api/rbac/roles/options');
+      if (Array.isArray(response.data)) {
+        return response.data.map((r: any) => ({
+          value: r.id || r.value,
+          label: r.roleLabel || r.label || r.id
+        }));
+      }
+      return [];
+    } catch (err: any) {
+      console.error('Error fetching role options:', err);
+      return [];
+    }
+  }, []);
+
+  /**
+   * Get users with a specific role
+   */
+  const getUsersWithRole = useCallback(async (
+    roleLabel: string
+  ): Promise<Array<{ userId: string; username: string; email?: string }>> => {
+    try {
+      const response = await api.get(`/api/rbac/roles/roles/${roleLabel}/users`);
+      return Array.isArray(response.data) ? response.data : [];
+    } catch (err: any) {
+      console.error('Error fetching users with role:', err);
+      return [];
+    }
+  }, []);
+
+  /**
+   * Filter roles by type
+   */
+  const getMandateRoles = useCallback((mandateId: string) => {
+    return roles.filter(r => 
+      r.mandateId === mandateId && !r.featureInstanceId
+    );
+  }, [roles]);
+
+  const getFeatureRoles = useCallback((featureInstanceId: string) => {
+    return roles.filter(r => r.featureInstanceId === featureInstanceId);
+  }, [roles]);
+
+  const getGlobalRoles = useCallback(() => {
+    return roles.filter(r => !r.mandateId && !r.featureInstanceId);
+  }, [roles]);
+
+  const getTemplateRoles = useCallback(() => {
+    return roles.filter(r => r.isTemplate === true);
+  }, [roles]);
+
+  return {
+    roles,
+    loading,
+    error,
+    fetchRoles,
+    getRole,
+    createRole,
+    updateRole,
+    deleteRole,
+    fetchRoleOptions,
+    getUsersWithRole,
+    getMandateRoles,
+    getFeatureRoles,
+    getGlobalRoles,
+    getTemplateRoles,
+  };
+}
+
+export default useMandateRoles;
diff --git a/src/hooks/useMandates.ts b/src/hooks/useMandates.ts
index e3848fe..572cf7f 100644
--- a/src/hooks/useMandates.ts
+++ b/src/hooks/useMandates.ts
@@ -148,7 +148,7 @@ export function useAdminMandates() {
     return await fetchMandateByIdApi(request, mandateId);
   }, [request]);
 
-  // Generate columns from attributes
+  // Generate columns from attributes (including fkSource/fkDisplayField for FK resolution)
   const columns = attributes.map(attr => ({
     key: attr.name,
     label: attr.label || attr.name,
@@ -159,6 +159,8 @@ export function useAdminMandates() {
     width: attr.width || 150,
     minWidth: attr.minWidth || 100,
     maxWidth: attr.maxWidth || 400,
+    fkSource: (attr as any).fkSource, // API endpoint for FK data
+    fkDisplayField: (attr as any).fkDisplayField, // Which field of FK target to display
   }));
 
   // Create mandate
diff --git a/src/hooks/useRbacExportImport.ts b/src/hooks/useRbacExportImport.ts
new file mode 100644
index 0000000..d4a959a
--- /dev/null
+++ b/src/hooks/useRbacExportImport.ts
@@ -0,0 +1,270 @@
+/**
+ * useRbacExportImport Hook
+ * 
+ * Hook for exporting and importing RBAC configurations.
+ * Supports mandate-level and global (template) exports.
+ */
+
+import { useState, useCallback } from 'react';
+import api from '../api';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export type ImportMode = 'merge' | 'replace' | 'add_only';
+
+export interface RbacExportScope {
+  type: 'global' | 'mandate' | 'instance';
+  mandateId?: string;
+  mandateName?: string;
+  featureInstanceId?: string;
+  featureCode?: string;
+  instanceLabel?: string;
+}
+
+export interface RbacExportRole {
+  roleLabel: string;
+  description?: { [key: string]: string };
+  featureCode?: string;
+}
+
+export interface RbacExportRule {
+  roleLabel: string;
+  context: 'DATA' | 'UI' | 'RESOURCE';
+  item: string | null;
+  view: boolean;
+  read?: string | null;
+  create?: string | null;
+  update?: string | null;
+  delete?: string | null;
+}
+
+export interface RbacExport {
+  version: string;
+  exportedAt: string;
+  exportedBy?: string;
+  scope: RbacExportScope;
+  roles: RbacExportRole[];
+  accessRules: RbacExportRule[];
+}
+
+export interface RbacImportResult {
+  status: 'success' | 'error';
+  mode: ImportMode;
+  rolesCreated: number;
+  rolesUpdated: number;
+  rulesCreated: number;
+  rulesUpdated: number;
+  errors?: string[];
+}
+
+// =============================================================================
+// HOOK
+// =============================================================================
+
+export function useRbacExportImport() {
+  const [exporting, setExporting] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [lastExport, setLastExport] = useState<RbacExport | null>(null);
+  const [lastImportResult, setLastImportResult] = useState<RbacImportResult | null>(null);
+
+  /**
+   * Export RBAC configuration for a mandate
+   */
+  const exportMandateRbac = useCallback(async (
+    mandateId: string,
+    featureCode?: string
+  ): Promise<{ success: boolean; data?: RbacExport; error?: string }> => {
+    setExporting(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams();
+      if (featureCode) params.append('featureCode', featureCode);
+      
+      const url = `/api/mandates/${mandateId}/rbac/export${params.toString() ? '?' + params.toString() : ''}`;
+      const response = await api.get(url);
+      
+      setLastExport(response.data);
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to export RBAC';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setExporting(false);
+    }
+  }, []);
+
+  /**
+   * Export global RBAC templates (SysAdmin only)
+   */
+  const exportGlobalRbac = useCallback(async (
+    featureCode?: string
+  ): Promise<{ success: boolean; data?: RbacExport; error?: string }> => {
+    setExporting(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams();
+      if (featureCode) params.append('featureCode', featureCode);
+      
+      const url = `/api/admin/rbac/global/export${params.toString() ? '?' + params.toString() : ''}`;
+      const response = await api.get(url);
+      
+      setLastExport(response.data);
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to export global RBAC';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setExporting(false);
+    }
+  }, []);
+
+  /**
+   * Export feature instance RBAC
+   */
+  const exportInstanceRbac = useCallback(async (
+    instanceId: string
+  ): Promise<{ success: boolean; data?: RbacExport; error?: string }> => {
+    setExporting(true);
+    setError(null);
+    try {
+      const response = await api.get(`/api/features/instances/${instanceId}/rbac/export`);
+      
+      setLastExport(response.data);
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to export instance RBAC';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setExporting(false);
+    }
+  }, []);
+
+  /**
+   * Import RBAC configuration into a mandate
+   */
+  const importMandateRbac = useCallback(async (
+    mandateId: string,
+    data: RbacExport,
+    mode: ImportMode = 'merge'
+  ): Promise<{ success: boolean; result?: RbacImportResult; error?: string }> => {
+    setImporting(true);
+    setError(null);
+    try {
+      const response = await api.post(
+        `/api/mandates/${mandateId}/rbac/import?mode=${mode}`,
+        data
+      );
+      
+      setLastImportResult(response.data);
+      return { success: true, result: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to import RBAC';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setImporting(false);
+    }
+  }, []);
+
+  /**
+   * Import global RBAC templates (SysAdmin only)
+   */
+  const importGlobalRbac = useCallback(async (
+    data: RbacExport,
+    mode: ImportMode = 'merge'
+  ): Promise<{ success: boolean; result?: RbacImportResult; error?: string }> => {
+    setImporting(true);
+    setError(null);
+    try {
+      const response = await api.post(
+        `/api/admin/rbac/global/import?mode=${mode}`,
+        data
+      );
+      
+      setLastImportResult(response.data);
+      return { success: true, result: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to import global RBAC';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setImporting(false);
+    }
+  }, []);
+
+  /**
+   * Download export as JSON file
+   */
+  const downloadExport = useCallback((data: RbacExport, filename?: string) => {
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename || `rbac-export-${data.scope.type}-${new Date().toISOString().split('T')[0]}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, []);
+
+  /**
+   * Parse uploaded JSON file
+   */
+  const parseImportFile = useCallback(async (file: File): Promise<{ success: boolean; data?: RbacExport; error?: string }> => {
+    try {
+      const text = await file.text();
+      const data = JSON.parse(text) as RbacExport;
+      
+      // Basic validation
+      if (!data.version) {
+        return { success: false, error: 'Ungültiges Format: Fehlende Version' };
+      }
+      if (!data.scope) {
+        return { success: false, error: 'Ungültiges Format: Fehlender Scope' };
+      }
+      if (!Array.isArray(data.roles)) {
+        return { success: false, error: 'Ungültiges Format: Roles muss ein Array sein' };
+      }
+      if (!Array.isArray(data.accessRules)) {
+        return { success: false, error: 'Ungültiges Format: AccessRules muss ein Array sein' };
+      }
+      
+      return { success: true, data };
+    } catch (err: any) {
+      return { success: false, error: `Fehler beim Parsen: ${err.message}` };
+    }
+  }, []);
+
+  /**
+   * Clear state
+   */
+  const reset = useCallback(() => {
+    setError(null);
+    setLastExport(null);
+    setLastImportResult(null);
+  }, []);
+
+  return {
+    exporting,
+    importing,
+    error,
+    lastExport,
+    lastImportResult,
+    exportMandateRbac,
+    exportGlobalRbac,
+    exportInstanceRbac,
+    importMandateRbac,
+    importGlobalRbac,
+    downloadExport,
+    parseImportFile,
+    reset,
+  };
+}
+
+export default useRbacExportImport;
diff --git a/src/hooks/useRoles.ts b/src/hooks/useRoles.ts
index 014778e..c099ab9 100644
--- a/src/hooks/useRoles.ts
+++ b/src/hooks/useRoles.ts
@@ -148,7 +148,7 @@ export function useAdminRoles() {
     return await fetchRoleByIdApi(request, roleId);
   }, [request]);
 
-  // Generate columns from attributes
+  // Generate columns from attributes (including fkSource/fkDisplayField for FK resolution)
   const columns = attributes.map(attr => ({
     key: attr.name,
     label: attr.label || attr.name,
@@ -159,6 +159,8 @@ export function useAdminRoles() {
     width: attr.width || 150,
     minWidth: attr.minWidth || 100,
     maxWidth: attr.maxWidth || 400,
+    fkSource: (attr as any).fkSource, // API endpoint for FK data
+    fkDisplayField: (attr as any).fkDisplayField, // Which field of FK target to display
   }));
 
   // Create role
diff --git a/src/hooks/useUserMandates.ts b/src/hooks/useUserMandates.ts
new file mode 100644
index 0000000..a7c442e
--- /dev/null
+++ b/src/hooks/useUserMandates.ts
@@ -0,0 +1,223 @@
+/**
+ * useUserMandates Hook
+ * 
+ * Hook for managing user-mandate memberships (which users belong to which mandates with which roles).
+ * Uses the /api/mandates/{mandateId}/users endpoints.
+ */
+
+import { useState, useCallback } from 'react';
+import api from '../api';
+
+// Types
+export interface MandateUser {
+  userId: string;
+  username: string;
+  email: string | null;
+  firstname: string | null;
+  lastname: string | null;
+  userMandateId: string;
+  roleIds: string[];
+  enabled: boolean;
+}
+
+export interface UserMandateCreate {
+  targetUserId: string;
+  roleIds: string[];
+}
+
+export interface UserMandateResponse {
+  userMandateId: string;
+  userId: string;
+  mandateId: string;
+  roleIds: string[];
+  enabled: boolean;
+}
+
+export interface Role {
+  id: string;
+  roleLabel: string;
+  description?: string | { [key: string]: string };
+  mandateId?: string;
+  featureInstanceId?: string;
+  isSystemRole?: boolean;
+}
+
+export interface Mandate {
+  id: string;
+  name: string | { [key: string]: string };
+  code?: string;
+  language?: string;
+}
+
+/**
+ * Hook for managing user-mandate memberships
+ */
+export function useUserMandates() {
+  const [users, setUsers] = useState<MandateUser[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * Fetch all users in a specific mandate
+   */
+  const fetchMandateUsers = useCallback(async (mandateId: string): Promise<MandateUser[]> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.get(`/api/mandates/${mandateId}/users`);
+      const data = Array.isArray(response.data) ? response.data : [];
+      setUsers(data);
+      return data;
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to fetch mandate users';
+      setError(errorMessage);
+      setUsers([]);
+      return [];
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Add a user to a mandate with specified roles
+   */
+  const addUserToMandate = useCallback(async (
+    mandateId: string,
+    data: UserMandateCreate
+  ): Promise<{ success: boolean; data?: UserMandateResponse; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.post(`/api/mandates/${mandateId}/users`, data);
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to add user to mandate';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Remove a user from a mandate
+   */
+  const removeUserFromMandate = useCallback(async (
+    mandateId: string,
+    userId: string
+  ): Promise<{ success: boolean; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      await api.delete(`/api/mandates/${mandateId}/users/${userId}`);
+      // Optimistically update the local state
+      setUsers(prev => prev.filter(u => u.userId !== userId));
+      return { success: true };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to remove user from mandate';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Update a user's roles within a mandate
+   */
+  const updateUserRoles = useCallback(async (
+    mandateId: string,
+    userId: string,
+    roleIds: string[]
+  ): Promise<{ success: boolean; data?: UserMandateResponse; error?: string }> => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.put(`/api/mandates/${mandateId}/users/${userId}/roles`, roleIds);
+      // Optimistically update the local state
+      setUsers(prev => prev.map(u => 
+        u.userId === userId ? { ...u, roleIds } : u
+      ));
+      return { success: true, data: response.data };
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to update user roles';
+      setError(errorMessage);
+      return { success: false, error: errorMessage };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /**
+   * Fetch all available mandates (for selection)
+   */
+  const fetchMandates = useCallback(async (): Promise<Mandate[]> => {
+    try {
+      const response = await api.get('/api/mandates/');
+      if (response.data?.items && Array.isArray(response.data.items)) {
+        return response.data.items;
+      }
+      return Array.isArray(response.data) ? response.data : [];
+    } catch (err: any) {
+      console.error('Error fetching mandates:', err);
+      return [];
+    }
+  }, []);
+
+  /**
+   * Fetch all available roles (global and mandate-specific)
+   */
+  const fetchRoles = useCallback(async (mandateId?: string): Promise<Role[]> => {
+    try {
+      const response = await api.get('/api/rbac/roles');
+      let roles: Role[] = [];
+      if (response.data?.items && Array.isArray(response.data.items)) {
+        roles = response.data.items;
+      } else if (Array.isArray(response.data)) {
+        roles = response.data;
+      }
+      
+      // Filter to global roles and roles for this mandate
+      if (mandateId) {
+        return roles.filter(r => 
+          !r.mandateId || r.mandateId === mandateId
+        );
+      }
+      return roles;
+    } catch (err: any) {
+      console.error('Error fetching roles:', err);
+      return [];
+    }
+  }, []);
+
+  /**
+   * Fetch all users (for selection when adding to mandate)
+   */
+  const fetchAllUsers = useCallback(async (): Promise<Array<{id: string; username: string; email?: string; fullName?: string}>> => {
+    try {
+      const response = await api.get('/api/users/');
+      if (response.data?.items && Array.isArray(response.data.items)) {
+        return response.data.items;
+      }
+      return Array.isArray(response.data) ? response.data : [];
+    } catch (err: any) {
+      console.error('Error fetching users:', err);
+      return [];
+    }
+  }, []);
+
+  return {
+    users,
+    loading,
+    error,
+    fetchMandateUsers,
+    addUserToMandate,
+    removeUserFromMandate,
+    updateUserRoles,
+    fetchMandates,
+    fetchRoles,
+    fetchAllUsers,
+  };
+}
+
+export default useUserMandates;
diff --git a/src/pages/InvitePage.module.css b/src/pages/InvitePage.module.css
new file mode 100644
index 0000000..f0cff31
--- /dev/null
+++ b/src/pages/InvitePage.module.css
@@ -0,0 +1,316 @@
+/**
+ * InvitePage Styles
+ */
+
+.container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  background: var(--bg-secondary);
+}
+
+.card {
+  background: var(--surface-color);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+  width: 100%;
+  max-width: 480px;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.header h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 0.5rem 0;
+}
+
+.header p {
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+/* Loading State */
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 2rem;
+  color: var(--text-secondary);
+}
+
+.loading p {
+  margin-top: 1rem;
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+  font-size: 1.25rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Error State */
+.errorState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 2rem 1rem;
+}
+
+.errorIcon {
+  font-size: 3rem;
+  color: var(--danger-color, #e53e3e);
+  margin-bottom: 1rem;
+}
+
+.errorState h1 {
+  font-size: 1.25rem;
+  color: var(--text-primary);
+  margin: 0 0 0.5rem 0;
+}
+
+.errorState p {
+  color: var(--text-secondary);
+  margin: 0 0 1.5rem 0;
+}
+
+/* Success State */
+.successState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 2rem 1rem;
+}
+
+.successIcon {
+  font-size: 3rem;
+  color: var(--success-color, #38a169);
+  margin-bottom: 1rem;
+}
+
+.successState h1 {
+  font-size: 1.25rem;
+  color: var(--text-primary);
+  margin: 0 0 0.5rem 0;
+}
+
+.successState p {
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+/* Invite Info */
+.inviteInfo {
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.infoRow {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+}
+
+.infoRow:not(:last-child) {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.infoLabel {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.infoValue {
+  color: var(--text-primary);
+  font-weight: 500;
+  font-size: 0.875rem;
+}
+
+/* Error Message */
+.errorMessage {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: rgba(229, 62, 62, 0.1);
+  color: var(--danger-color, #e53e3e);
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+
+/* Form */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.formRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.formGroup label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.formGroup label svg {
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+}
+
+.formGroup input {
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.formGroup input:focus {
+  outline: none;
+  border-color: var(--primary-color, #f25843);
+  box-shadow: 0 0 0 3px rgba(242, 88, 67, 0.1);
+}
+
+.formGroup input::placeholder {
+  color: var(--text-tertiary);
+}
+
+/* Actions */
+.actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.primaryButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--primary-color, #f25843);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+  text-decoration: none;
+  text-align: center;
+}
+
+.primaryButton:hover {
+  background: var(--primary-dark, #d94d3a);
+}
+
+.primaryButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.secondaryButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: transparent;
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+  text-decoration: none;
+  text-align: center;
+}
+
+.secondaryButton:hover {
+  background: var(--bg-secondary);
+  border-color: var(--text-secondary);
+}
+
+/* Divider */
+.divider {
+  display: flex;
+  align-items: center;
+  margin: 1.5rem 0;
+}
+
+.divider::before,
+.divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border-color);
+}
+
+.divider span {
+  padding: 0 1rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+/* Login Option */
+.loginOption {
+  text-align: center;
+}
+
+.loginOption p {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  margin: 0 0 0.75rem 0;
+}
+
+/* Responsive */
+@media (max-width: 500px) {
+  .card {
+    padding: 1.5rem;
+  }
+
+  .formRow {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Dark theme */
+:global(.dark-theme) .card {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
diff --git a/src/pages/InvitePage.tsx b/src/pages/InvitePage.tsx
new file mode 100644
index 0000000..c17822b
--- /dev/null
+++ b/src/pages/InvitePage.tsx
@@ -0,0 +1,363 @@
+/**
+ * InvitePage
+ * 
+ * Public page for accepting invitations.
+ * URL: /invite/:token
+ * 
+ * Handles both:
+ * - Existing users (shows login or auto-accepts if already logged in)
+ * - New users (shows registration form)
+ */
+
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useInvitations, type InvitationValidation, type RegisterAndAcceptData } from '../hooks/useInvitations';
+import { useAuth } from '../hooks/useAuthentication';
+import { FaCheckCircle, FaTimesCircle, FaSpinner, FaEnvelope, FaUser, FaLock } from 'react-icons/fa';
+import styles from './InvitePage.module.css';
+
+export const InvitePage: React.FC = () => {
+  const { token } = useParams<{ token: string }>();
+  const navigate = useNavigate();
+  const { isAuthenticated, user } = useAuth();
+  const { validateInvitation, acceptInvitation, registerAndAccept, loading } = useInvitations();
+
+  // State
+  const [validation, setValidation] = useState<InvitationValidation | null>(null);
+  const [validating, setValidating] = useState(true);
+  const [accepting, setAccepting] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Registration form state
+  const [formData, setFormData] = useState<RegisterAndAcceptData>({
+    token: token || '',
+    username: '',
+    email: '',
+    password: '',
+    firstname: '',
+    lastname: '',
+  });
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  // Validate token on mount
+  useEffect(() => {
+    const validate = async () => {
+      if (!token) {
+        setError('Kein Einladungs-Token angegeben');
+        setValidating(false);
+        return;
+      }
+
+      const result = await validateInvitation(token);
+      setValidation(result);
+      setValidating(false);
+
+      // Update form with token
+      setFormData(prev => ({ ...prev, token }));
+    };
+
+    validate();
+  }, [token, validateInvitation]);
+
+  // Auto-accept if already logged in
+  const handleAccept = async () => {
+    if (!token) return;
+    
+    setAccepting(true);
+    setError(null);
+    
+    const result = await acceptInvitation(token);
+    
+    if (result.success) {
+      setSuccess(true);
+      // Redirect to dashboard after 2 seconds
+      setTimeout(() => {
+        navigate('/');
+      }, 2000);
+    } else {
+      setError(result.error || 'Fehler beim Annehmen der Einladung');
+    }
+    
+    setAccepting(false);
+  };
+
+  // Handle registration form submission
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    // Validate passwords match
+    if (formData.password !== confirmPassword) {
+      setError('Die Passwörter stimmen nicht überein');
+      return;
+    }
+
+    // Validate password length
+    if (formData.password.length < 8) {
+      setError('Das Passwort muss mindestens 8 Zeichen lang sein');
+      return;
+    }
+
+    setAccepting(true);
+    
+    const result = await registerAndAccept(formData);
+    
+    if (result.success) {
+      setSuccess(true);
+      // Redirect to login after 3 seconds
+      setTimeout(() => {
+        navigate('/login');
+      }, 3000);
+    } else {
+      setError(result.error || 'Fehler bei der Registrierung');
+    }
+    
+    setAccepting(false);
+  };
+
+  // Handle form field changes
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  // Loading state
+  if (validating) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.card}>
+          <div className={styles.loading}>
+            <FaSpinner className={styles.spinner} />
+            <p>Einladung wird überprüft...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Invalid invitation
+  if (!validation?.valid) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.card}>
+          <div className={styles.errorState}>
+            <FaTimesCircle className={styles.errorIcon} />
+            <h1>Ungültige Einladung</h1>
+            <p>{validation?.reason || 'Diese Einladung ist nicht gültig.'}</p>
+            <Link to="/login" className={styles.primaryButton}>
+              Zur Anmeldung
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Success state
+  if (success) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.card}>
+          <div className={styles.successState}>
+            <FaCheckCircle className={styles.successIcon} />
+            <h1>Erfolgreich!</h1>
+            <p>
+              {isAuthenticated 
+                ? 'Sie wurden erfolgreich zum Mandanten hinzugefügt.'
+                : 'Ihr Konto wurde erstellt. Sie werden zur Anmeldeseite weitergeleitet...'}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Already authenticated - show accept button
+  if (isAuthenticated) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.card}>
+          <div className={styles.header}>
+            <h1>Einladung annehmen</h1>
+            <p>Sie wurden eingeladen, einem Mandanten beizutreten.</p>
+          </div>
+
+          <div className={styles.inviteInfo}>
+            <div className={styles.infoRow}>
+              <span className={styles.infoLabel}>Angemeldet als:</span>
+              <span className={styles.infoValue}>{user?.email || user?.username}</span>
+            </div>
+            {validation.roleLabels && validation.roleLabels.length > 0 && (
+              <div className={styles.infoRow}>
+                <span className={styles.infoLabel}>Zugewiesene Rollen:</span>
+                <span className={styles.infoValue}>{validation.roleLabels.join(', ')}</span>
+              </div>
+            )}
+          </div>
+
+          {error && (
+            <div className={styles.errorMessage}>
+              <FaTimesCircle /> {error}
+            </div>
+          )}
+
+          <div className={styles.actions}>
+            <button
+              className={styles.primaryButton}
+              onClick={handleAccept}
+              disabled={accepting}
+            >
+              {accepting ? (
+                <>
+                  <FaSpinner className={styles.spinner} /> Wird verarbeitet...
+                </>
+              ) : (
+                'Einladung annehmen'
+              )}
+            </button>
+            <Link to="/" className={styles.secondaryButton}>
+              Abbrechen
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Not authenticated - show registration form or login option
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles.header}>
+          <h1>Einladung annehmen</h1>
+          <p>Erstellen Sie ein Konto, um die Einladung anzunehmen.</p>
+        </div>
+
+        {error && (
+          <div className={styles.errorMessage}>
+            <FaTimesCircle /> {error}
+          </div>
+        )}
+
+        <form onSubmit={handleRegister} className={styles.form}>
+          <div className={styles.formRow}>
+            <div className={styles.formGroup}>
+              <label htmlFor="firstname">Vorname</label>
+              <input
+                type="text"
+                id="firstname"
+                name="firstname"
+                value={formData.firstname}
+                onChange={handleChange}
+                placeholder="Max"
+              />
+            </div>
+            <div className={styles.formGroup}>
+              <label htmlFor="lastname">Nachname</label>
+              <input
+                type="text"
+                id="lastname"
+                name="lastname"
+                value={formData.lastname}
+                onChange={handleChange}
+                placeholder="Mustermann"
+              />
+            </div>
+          </div>
+
+          <div className={styles.formGroup}>
+            <label htmlFor="username">
+              <FaUser /> Benutzername *
+            </label>
+            <input
+              type="text"
+              id="username"
+              name="username"
+              value={formData.username}
+              onChange={handleChange}
+              placeholder="maxmustermann"
+              required
+              minLength={3}
+              maxLength={50}
+            />
+          </div>
+
+          <div className={styles.formGroup}>
+            <label htmlFor="email">
+              <FaEnvelope /> E-Mail *
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              placeholder="max@example.com"
+              required
+            />
+          </div>
+
+          <div className={styles.formGroup}>
+            <label htmlFor="password">
+              <FaLock /> Passwort * (min. 8 Zeichen)
+            </label>
+            <input
+              type="password"
+              id="password"
+              name="password"
+              value={formData.password}
+              onChange={handleChange}
+              placeholder="••••••••"
+              required
+              minLength={8}
+            />
+          </div>
+
+          <div className={styles.formGroup}>
+            <label htmlFor="confirmPassword">
+              <FaLock /> Passwort bestätigen *
+            </label>
+            <input
+              type="password"
+              id="confirmPassword"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="••••••••"
+              required
+            />
+          </div>
+
+          <div className={styles.actions}>
+            <button
+              type="submit"
+              className={styles.primaryButton}
+              disabled={accepting}
+            >
+              {accepting ? (
+                <>
+                  <FaSpinner className={styles.spinner} /> Wird verarbeitet...
+                </>
+              ) : (
+                'Konto erstellen & Einladung annehmen'
+              )}
+            </button>
+          </div>
+        </form>
+
+        <div className={styles.divider}>
+          <span>oder</span>
+        </div>
+
+        <div className={styles.loginOption}>
+          <p>Sie haben bereits ein Konto?</p>
+          <Link to={`/login?redirect=/invite/${token}`} className={styles.secondaryButton}>
+            Anmelden und Einladung annehmen
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InvitePage;
diff --git a/src/pages/Settings.module.css b/src/pages/Settings.module.css
index 9d9e37e..ee52d34 100644
--- a/src/pages/Settings.module.css
+++ b/src/pages/Settings.module.css
@@ -265,3 +265,175 @@
 :global(.dark-theme) .infoValue {
   color: var(--text-primary-dark, #ffffff);
 }
+
+/* Error Text */
+.errorText {
+  color: var(--error-color, #dc2626);
+  font-weight: 500;
+}
+
+/* Saving Indicator */
+.savingIndicator {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #666);
+  margin-left: 0.5rem;
+}
+
+/* Error Message */
+.errorMessage {
+  background: var(--error-bg, #fef2f2);
+  border: 1px solid var(--error-border, #fecaca);
+  color: var(--error-color, #dc2626);
+  padding: 0.75rem 1rem;
+  border-radius: 6px;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+
+/* User Info Card */
+.userInfoCard {
+  background: var(--surface-color, #f9fafb);
+  border: 1px solid var(--border-color, #e5e7eb);
+  border-radius: 8px;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+
+.userInfoRow {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+}
+
+.userInfoRow:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.userInfoRow:first-child {
+  padding-top: 0;
+}
+
+.userInfoLabel {
+  font-size: 0.8125rem;
+  color: var(--text-secondary, #6b7280);
+  font-weight: 500;
+}
+
+.userInfoValue {
+  font-size: 0.8125rem;
+  color: var(--text-primary, #1a1a1a);
+}
+
+/* Modal Overlay */
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(2px);
+}
+
+/* Modal Content */
+.modalContent {
+  background: var(--bg-primary, #ffffff);
+  border-radius: 12px;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow: auto;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+}
+
+.modalHeader h2 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary, #1a1a1a);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--text-secondary, #6b7280);
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.closeButton:hover {
+  color: var(--text-primary, #1a1a1a);
+}
+
+.modalBody {
+  padding: 1.5rem;
+}
+
+/* Dark Theme - Additional styles */
+:global(.dark-theme) .errorText {
+  color: var(--error-color-dark, #f87171);
+}
+
+:global(.dark-theme) .savingIndicator {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+:global(.dark-theme) .errorMessage {
+  background: var(--error-bg-dark, #450a0a);
+  border-color: var(--error-border-dark, #991b1b);
+  color: var(--error-color-dark, #f87171);
+}
+
+:global(.dark-theme) .userInfoCard {
+  background: var(--surface-dark, #1f2937);
+  border-color: var(--border-dark, #374151);
+}
+
+:global(.dark-theme) .userInfoRow {
+  border-bottom-color: var(--border-dark, #374151);
+}
+
+:global(.dark-theme) .userInfoLabel {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+:global(.dark-theme) .userInfoValue {
+  color: var(--text-primary-dark, #ffffff);
+}
+
+:global(.dark-theme) .modalContent {
+  background: var(--bg-dark, #111827);
+}
+
+:global(.dark-theme) .modalHeader {
+  border-bottom-color: var(--border-dark, #374151);
+}
+
+:global(.dark-theme) .modalHeader h2 {
+  color: var(--text-primary-dark, #ffffff);
+}
+
+:global(.dark-theme) .closeButton {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+:global(.dark-theme) .closeButton:hover {
+  color: var(--text-primary-dark, #ffffff);
+}
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index ff4b1cf..a8c667b 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -4,20 +4,105 @@
  * Benutzer-Einstellungen (System-Level, ohne Instanz-Kontext).
  */
 
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useLanguage } from '../providers/language/LanguageContext';
+import { useCurrentUser, useUser } from '../hooks/useUsers';
+import { setUserDataCache, getUserDataCache } from '../utils/userCache';
+import { FormGeneratorForm } from '../components/FormGenerator/FormGeneratorForm/FormGeneratorForm';
+import type { AttributeDefinition } from '../components/FormGenerator/FormGeneratorForm/FormGeneratorForm';
 import styles from './Settings.module.css';
 
+// =============================================================================
+// PROFILE EDIT MODAL
+// =============================================================================
+
+interface ProfileEditModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  userData: any;
+  onSave: (data: any) => Promise<void>;
+}
+
+const ProfileEditModal: React.FC<ProfileEditModalProps> = ({ isOpen, onClose, userData, onSave }) => {
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  
+  // Define editable profile fields
+  const profileAttributes: AttributeDefinition[] = [
+    {
+      name: 'fullName',
+      type: 'string',
+      label: 'Vollständiger Name',
+      description: 'Ihr vollständiger Name',
+      required: false,
+      placeholder: 'Max Mustermann'
+    },
+    {
+      name: 'email',
+      type: 'email',
+      label: 'E-Mail-Adresse',
+      description: 'Ihre E-Mail-Adresse für Benachrichtigungen',
+      required: true,
+      placeholder: 'name@example.com'
+    }
+  ];
+  
+  const handleSubmit = async (formData: any) => {
+    setIsSaving(true);
+    setError(null);
+    try {
+      await onSave(formData);
+      onClose();
+    } catch (err: any) {
+      setError(err.message || 'Fehler beim Speichern des Profils');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  
+  if (!isOpen) return null;
+  
+  return (
+    <div className={styles.modalOverlay} onClick={onClose}>
+      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+        <div className={styles.modalHeader}>
+          <h2>Profil bearbeiten</h2>
+          <button className={styles.closeButton} onClick={onClose}>&times;</button>
+        </div>
+        <div className={styles.modalBody}>
+          {error && <div className={styles.errorMessage}>{error}</div>}
+          <FormGeneratorForm
+            attributes={profileAttributes}
+            data={userData}
+            mode="edit"
+            onSubmit={handleSubmit}
+            onCancel={onClose}
+            submitButtonText={isSaving ? 'Speichern...' : 'Speichern'}
+            cancelButtonText="Abbrechen"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
 // =============================================================================
 // SETTINGS PAGE
 // =============================================================================
 
 export const SettingsPage: React.FC = () => {
   const { currentLanguage, setLanguage } = useLanguage();
+  const { user: currentUser, refetch: refetchUser } = useCurrentUser();
+  const { updateUser } = useUser();
+  
   const [theme, setTheme] = useState<'light' | 'dark'>(
     () => (localStorage.getItem('theme') as 'light' | 'dark') || 'light'
   );
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
+  const [isSavingLanguage, setIsSavingLanguage] = useState(false);
+  const [languageError, setLanguageError] = useState<string | null>(null);
   
+  // Handle theme change
   const handleThemeChange = (newTheme: 'light' | 'dark') => {
     setTheme(newTheme);
     localStorage.setItem('theme', newTheme);
@@ -32,6 +117,87 @@ export const SettingsPage: React.FC = () => {
     document.documentElement.setAttribute('data-theme', newTheme);
   };
   
+  // Handle language change - save to backend and update cache
+  const handleLanguageChange = useCallback(async (newLanguage: 'de' | 'en' | 'fr') => {
+    if (!currentUser?.id || !currentUser?.username) return;
+    
+    setIsSavingLanguage(true);
+    setLanguageError(null);
+    
+    try {
+      // 1. Build full user object for update (backend requires full User model)
+      const userUpdateData = {
+        id: currentUser.id,
+        username: currentUser.username,
+        email: currentUser.email,
+        fullName: currentUser.fullName,
+        language: newLanguage,
+        enabled: currentUser.enabled ?? true,
+        authenticationAuthority: currentUser.authenticationAuthority || 'local'
+      };
+      
+      // 2. Save to backend
+      await updateUser(currentUser.id, userUpdateData);
+      
+      // 3. Update sessionStorage cache
+      const cachedUser = getUserDataCache();
+      if (cachedUser) {
+        setUserDataCache({ ...cachedUser, language: newLanguage });
+      }
+      
+      // 4. Update UI language context
+      setLanguage(newLanguage);
+      
+      // 5. Dispatch event to notify other components
+      window.dispatchEvent(new CustomEvent('userInfoUpdated'));
+      
+      console.log('Language updated successfully to:', newLanguage);
+    } catch (err: any) {
+      console.error('Failed to update language:', err);
+      setLanguageError('Sprache konnte nicht gespeichert werden');
+    } finally {
+      setIsSavingLanguage(false);
+    }
+  }, [currentUser, updateUser, setLanguage]);
+  
+  // Handle profile save
+  const handleProfileSave = useCallback(async (formData: any) => {
+    if (!currentUser?.id || !currentUser?.username) throw new Error('Nicht angemeldet');
+    
+    // Build full user object for update (backend requires full User model)
+    const userUpdateData = {
+      id: currentUser.id,
+      username: currentUser.username,
+      email: formData.email || currentUser.email,
+      fullName: formData.fullName || currentUser.fullName,
+      language: currentUser.language || 'de',
+      enabled: currentUser.enabled ?? true,
+      authenticationAuthority: currentUser.authenticationAuthority || 'local'
+    };
+    
+    // Update user via API
+    const updatedUser = await updateUser(currentUser.id, userUpdateData);
+    
+    // Update sessionStorage cache
+    const cachedUser = getUserDataCache();
+    if (cachedUser) {
+      setUserDataCache({
+        ...cachedUser,
+        fullName: updatedUser.fullName || cachedUser.fullName,
+        email: updatedUser.email || cachedUser.email
+      });
+    }
+    
+    // Refetch user data
+    if (refetchUser) {
+      await refetchUser();
+    }
+    
+    // Dispatch event to notify other components (e.g., sidebar)
+    window.dispatchEvent(new CustomEvent('userInfoUpdated'));
+    
+  }, [currentUser, updateUser, refetchUser]);
+  
   return (
     <div className={styles.settings}>
       <header className={styles.header}>
@@ -57,13 +223,13 @@ export const SettingsPage: React.FC = () => {
                   className={`${styles.themeButton} ${theme === 'light' ? styles.active : ''}`}
                   onClick={() => handleThemeChange('light')}
                 >
-                  ☀️ Hell
+                  Hell
                 </button>
                 <button 
                   className={`${styles.themeButton} ${theme === 'dark' ? styles.active : ''}`}
                   onClick={() => handleThemeChange('dark')}
                 >
-                  🌙 Dunkel
+                  Dunkel
                 </button>
               </div>
             </div>
@@ -74,18 +240,21 @@ export const SettingsPage: React.FC = () => {
               <label className={styles.settingLabel}>Sprache</label>
               <p className={styles.settingDescription}>
                 Wähle die Anzeigesprache der Anwendung.
+                {languageError && <span className={styles.errorText}> {languageError}</span>}
               </p>
             </div>
             <div className={styles.settingControl}>
               <select 
                 className={styles.select}
                 value={currentLanguage}
-                onChange={(e) => setLanguage(e.target.value as 'de' | 'en' | 'fr')}
+                onChange={(e) => handleLanguageChange(e.target.value as 'de' | 'en' | 'fr')}
+                disabled={isSavingLanguage}
               >
                 <option value="de">Deutsch</option>
                 <option value="en">English</option>
                 <option value="fr">Français</option>
               </select>
+              {isSavingLanguage && <span className={styles.savingIndicator}>Speichern...</span>}
             </div>
           </div>
         </section>
@@ -98,29 +267,36 @@ export const SettingsPage: React.FC = () => {
             <div className={styles.settingInfo}>
               <label className={styles.settingLabel}>Profil bearbeiten</label>
               <p className={styles.settingDescription}>
-                Ändere deinen Namen, E-Mail-Adresse und Profilbild.
+                Ändere deinen Namen und E-Mail-Adresse.
               </p>
             </div>
             <div className={styles.settingControl}>
-              <button className={styles.button}>
+              <button 
+                className={styles.button}
+                onClick={() => setIsProfileModalOpen(true)}
+              >
                 Profil öffnen
               </button>
             </div>
           </div>
           
-          <div className={styles.settingRow}>
-            <div className={styles.settingInfo}>
-              <label className={styles.settingLabel}>Passwort ändern</label>
-              <p className={styles.settingDescription}>
-                Aktualisiere dein Passwort für mehr Sicherheit.
-              </p>
+          {/* Current user info display */}
+          {currentUser && (
+            <div className={styles.userInfoCard}>
+              <div className={styles.userInfoRow}>
+                <span className={styles.userInfoLabel}>Benutzername</span>
+                <span className={styles.userInfoValue}>{currentUser.username}</span>
+              </div>
+              <div className={styles.userInfoRow}>
+                <span className={styles.userInfoLabel}>Name</span>
+                <span className={styles.userInfoValue}>{currentUser.fullName || '-'}</span>
+              </div>
+              <div className={styles.userInfoRow}>
+                <span className={styles.userInfoLabel}>E-Mail</span>
+                <span className={styles.userInfoValue}>{currentUser.email || '-'}</span>
+              </div>
             </div>
-            <div className={styles.settingControl}>
-              <button className={styles.button}>
-                Passwort ändern
-              </button>
-            </div>
-          </div>
+          )}
         </section>
         
         {/* Info */}
@@ -134,11 +310,19 @@ export const SettingsPage: React.FC = () => {
             </div>
             <div className={styles.infoRow}>
               <span className={styles.infoLabel}>Build</span>
-              <span className={styles.infoValue}>2026.01.16</span>
+              <span className={styles.infoValue}>2026.01.20</span>
             </div>
           </div>
         </section>
       </main>
+      
+      {/* Profile Edit Modal */}
+      <ProfileEditModal
+        isOpen={isProfileModalOpen}
+        onClose={() => setIsProfileModalOpen(false)}
+        userData={currentUser}
+        onSave={handleProfileSave}
+      />
     </div>
   );
 };
diff --git a/src/pages/admin/Admin.module.css b/src/pages/admin/Admin.module.css
index a289d69..c4b58fa 100644
--- a/src/pages/admin/Admin.module.css
+++ b/src/pages/admin/Admin.module.css
@@ -86,6 +86,61 @@
   border-color: var(--text-secondary);
 }
 
+/* Filter Section Styles */
+.filterSection {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+.filterGroup {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.filterLabel {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.filterSelect {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-width: 200px;
+  cursor: pointer;
+}
+
+.filterSelect:focus {
+  outline: none;
+  border-color: var(--primary-color, #f25843);
+}
+
+/* Info Box */
+.infoBox {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-bottom: 1rem;
+  flex-shrink: 0;
+}
+
 .tableContainer {
   flex: 1;
   min-height: 0;
@@ -276,6 +331,75 @@
   color: var(--danger-color, #e53e3e);
 }
 
+/* Badge */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Checkbox Label */
+.checkboxLabel {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+
+.checkboxLabel input[type="checkbox"] {
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+}
+
+/* URL Box */
+.urlBox {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.urlInput {
+  flex: 1;
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  font-family: monospace;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.urlInput:focus {
+  outline: none;
+  border-color: var(--primary-color, #f25843);
+}
+
+.copyButton {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.75rem 1rem;
+  background: var(--primary-color, #f25843);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+  white-space: nowrap;
+}
+
+.copyButton:hover {
+  background: var(--primary-dark, #d94d3a);
+}
+
 /* Dark theme adjustments */
 :global(.dark-theme) .modal {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
diff --git a/src/pages/admin/AdminFeatureAccessPage.tsx b/src/pages/admin/AdminFeatureAccessPage.tsx
new file mode 100644
index 0000000..c8da302
--- /dev/null
+++ b/src/pages/admin/AdminFeatureAccessPage.tsx
@@ -0,0 +1,347 @@
+/**
+ * AdminFeatureAccessPage
+ * 
+ * Admin page for managing feature instances within mandates.
+ * Allows creating, viewing, and managing feature instances.
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { useFeatureAccess, type Feature, type FeatureInstance } from '../../hooks/useFeatureAccess';
+import { useUserMandates, type Mandate } from '../../hooks/useUserMandates';
+import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
+import { FormGeneratorForm, type AttributeDefinition } from '../../components/FormGenerator/FormGeneratorForm';
+import { FaPlus, FaSync, FaCube, FaBuilding, FaCogs } from 'react-icons/fa';
+import api from '../../api';
+import styles from './Admin.module.css';
+
+export const AdminFeatureAccessPage: React.FC = () => {
+  const {
+    features,
+    instances,
+    loading,
+    error,
+    fetchFeatures,
+    fetchInstances,
+    createInstance,
+    deleteInstance,
+    syncInstanceRoles,
+  } = useFeatureAccess();
+
+  const { fetchMandates } = useUserMandates();
+
+  // State
+  const [mandates, setMandates] = useState<Mandate[]>([]);
+  const [selectedMandateId, setSelectedMandateId] = useState<string>('');
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [syncingInstance, setSyncingInstance] = useState<string | null>(null);
+  const [backendAttributes, setBackendAttributes] = useState<AttributeDefinition[]>([]);
+
+  // Load features, mandates, and attributes on mount
+  useEffect(() => {
+    fetchFeatures();
+    fetchMandates().then(setMandates);
+    // Fetch FeatureInstance attributes from backend
+    api.get('/api/attributes/FeatureInstance').then(response => {
+      const attrs = response.data?.attributes || response.data || [];
+      setBackendAttributes(Array.isArray(attrs) ? attrs : []);
+    }).catch(() => setBackendAttributes([]));
+  }, [fetchFeatures, fetchMandates]);
+
+  // Load instances when mandate changes
+  useEffect(() => {
+    if (selectedMandateId) {
+      fetchInstances(selectedMandateId);
+    }
+  }, [selectedMandateId, fetchInstances]);
+
+  // Table columns
+  const columns = useMemo(() => [
+    { key: 'label', label: 'Name', type: 'string' as const, sortable: true, filterable: true, searchable: true, width: 200 },
+    { key: 'featureCode', label: 'Feature', type: 'string' as const, sortable: true, filterable: true, width: 150,
+      render: (value: string) => {
+        const feature = features.find(f => f.code === value);
+        if (feature) {
+          const label = typeof feature.label === 'object' 
+            ? (feature.label.de || feature.label.en || value)
+            : feature.label;
+          return label;
+        }
+        return value;
+      }
+    },
+    { key: 'enabled', label: 'Aktiv', type: 'boolean' as const, sortable: true, filterable: true, width: 80 },
+  ], [features]);
+
+  // Form attributes from backend - merge with dynamic feature options
+  const createFields: AttributeDefinition[] = useMemo(() => {
+    const excludedFields = ['id', 'mandateId', 'enabled'];
+    const featureOptions = features.map(f => ({
+      value: f.code,
+      label: typeof f.label === 'object' 
+        ? (f.label.de || f.label.en || f.code) 
+        : (f.label || f.code)
+    }));
+    
+    return backendAttributes
+      .filter(attr => !excludedFields.includes(attr.name))
+      .map(attr => ({
+        ...attr,
+        // Override featureCode: make editable for create and add dynamic options
+        readonly: attr.name === 'featureCode' ? false : attr.readonly,
+        editable: attr.name === 'featureCode' ? true : attr.editable,
+        options: attr.name === 'featureCode' ? featureOptions : attr.options,
+      })) as AttributeDefinition[];
+  }, [features, backendAttributes]);
+
+  // Handle create instance
+  const handleCreateInstance = async (data: { featureCode: string; label: string; copyTemplateRoles?: boolean }) => {
+    if (!selectedMandateId) return;
+    setIsSubmitting(true);
+    try {
+      const result = await createInstance(selectedMandateId, {
+        featureCode: data.featureCode,
+        label: data.label,
+        copyTemplateRoles: data.copyTemplateRoles !== false
+      });
+      if (result.success) {
+        setShowCreateModal(false);
+        fetchInstances(selectedMandateId);
+      } else {
+        alert(result.error || 'Fehler beim Erstellen der Feature-Instanz');
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Handle delete instance
+  const handleDeleteInstance = async (instance: FeatureInstance) => {
+    if (!selectedMandateId) return;
+    if (window.confirm(`Möchten Sie die Feature-Instanz "${instance.label}" wirklich löschen? Alle zugehörigen Daten werden gelöscht.`)) {
+      const result = await deleteInstance(selectedMandateId, instance.id);
+      if (!result.success) {
+        alert(result.error || 'Fehler beim Löschen der Feature-Instanz');
+      }
+    }
+  };
+
+  // Handle sync roles
+  const handleSyncRoles = async (instance: FeatureInstance) => {
+    if (!selectedMandateId) return;
+    setSyncingInstance(instance.id);
+    try {
+      const result = await syncInstanceRoles(selectedMandateId, instance.id, true);
+      if (result.success && result.data) {
+        alert(`Rollen synchronisiert:\n- Hinzugefügt: ${result.data.added}\n- Entfernt: ${result.data.removed}\n- Unverändert: ${result.data.unchanged}`);
+      } else {
+        alert(result.error || 'Fehler beim Synchronisieren der Rollen');
+      }
+    } finally {
+      setSyncingInstance(null);
+    }
+  };
+
+  // Get mandate name
+  const getMandateName = (mandate: Mandate) => {
+    if (typeof mandate.name === 'object') {
+      return mandate.name.de || mandate.name.en || Object.values(mandate.name)[0] || mandate.id;
+    }
+    return mandate.name || mandate.id;
+  };
+
+  // Get feature label
+  const getFeatureLabel = (code: string) => {
+    const feature = features.find(f => f.code === code);
+    if (feature) {
+      return typeof feature.label === 'object'
+        ? (feature.label.de || feature.label.en || code)
+        : (feature.label || code);
+    }
+    return code;
+  };
+
+  if (error && !selectedMandateId) {
+    return (
+      <div className={styles.adminPage}>
+        <div className={styles.errorContainer}>
+          <span className={styles.errorIcon}>⚠️</span>
+          <p className={styles.errorMessage}>Fehler: {error}</p>
+          <button className={styles.secondaryButton} onClick={() => fetchFeatures()}>
+            <FaSync /> Erneut versuchen
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.adminPage}>
+      <div className={styles.pageHeader}>
+        <div>
+          <h1 className={styles.pageTitle}>Feature-Instanzen</h1>
+          <p className={styles.pageSubtitle}>Verwalten Sie Feature-Instanzen für jeden Mandanten</p>
+        </div>
+      </div>
+
+      {/* Mandate Selector */}
+      <div className={styles.filterSection}>
+        <div className={styles.filterGroup}>
+          <label className={styles.filterLabel}>
+            <FaBuilding style={{ marginRight: 8 }} />
+            Mandant auswählen:
+          </label>
+          <select
+            className={styles.filterSelect}
+            value={selectedMandateId}
+            onChange={(e) => setSelectedMandateId(e.target.value)}
+          >
+            <option value="">-- Mandant wählen --</option>
+            {mandates.map(m => (
+              <option key={m.id} value={m.id}>
+                {getMandateName(m)}
+              </option>
+            ))}
+          </select>
+        </div>
+        
+        {selectedMandateId && (
+          <div className={styles.headerActions}>
+            <button
+              className={styles.secondaryButton}
+              onClick={() => fetchInstances(selectedMandateId)}
+              disabled={loading}
+            >
+              <FaSync className={loading ? 'spinning' : ''} /> Aktualisieren
+            </button>
+            <button
+              className={styles.primaryButton}
+              onClick={() => setShowCreateModal(true)}
+              disabled={features.length === 0}
+            >
+              <FaPlus /> Neue Instanz
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Available Features Info */}
+      {features.length > 0 && (
+        <div className={styles.infoBox}>
+          <FaCube style={{ marginRight: 8 }} />
+          <span>Verfügbare Features: </span>
+          {features.map((f, i) => (
+            <span key={f.code}>
+              {i > 0 && ', '}
+              <strong>{getFeatureLabel(f.code)}</strong>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Content */}
+      {!selectedMandateId ? (
+        <div className={styles.emptyState}>
+          <FaBuilding className={styles.emptyIcon} />
+          <h3 className={styles.emptyTitle}>Kein Mandant ausgewählt</h3>
+          <p className={styles.emptyDescription}>
+            Wählen Sie einen Mandanten aus, um dessen Feature-Instanzen zu verwalten.
+          </p>
+        </div>
+      ) : loading && instances.length === 0 ? (
+        <div className={styles.loadingContainer}>
+          <div className={styles.spinner} />
+          <span>Lade Feature-Instanzen...</span>
+        </div>
+      ) : instances.length === 0 ? (
+        <div className={styles.emptyState}>
+          <FaCube className={styles.emptyIcon} />
+          <h3 className={styles.emptyTitle}>Keine Feature-Instanzen</h3>
+          <p className={styles.emptyDescription}>
+            Für diesen Mandanten wurden noch keine Feature-Instanzen erstellt.
+          </p>
+          <button
+            className={styles.primaryButton}
+            onClick={() => setShowCreateModal(true)}
+            disabled={features.length === 0}
+          >
+            <FaPlus /> Erste Instanz erstellen
+          </button>
+        </div>
+      ) : (
+        <div className={styles.tableContainer}>
+          <FormGeneratorTable
+            data={instances}
+            columns={columns}
+            loading={loading}
+            pagination={true}
+            pageSize={25}
+            searchable={true}
+            filterable={true}
+            sortable={true}
+            selectable={false}
+            actionButtons={[
+              {
+                type: 'delete' as const,
+                title: 'Instanz löschen',
+              }
+            ]}
+            customActions={[
+              {
+                id: 'syncRoles',
+                icon: <FaCogs />,
+                onClick: handleSyncRoles,
+                title: 'Rollen synchronisieren',
+                loading: (row: FeatureInstance) => syncingInstance === row.id,
+              }
+            ]}
+            onDelete={handleDeleteInstance}
+            hookData={{
+              refetch: () => fetchInstances(selectedMandateId),
+              handleDelete: handleDeleteInstance,
+            }}
+            emptyMessage="Keine Feature-Instanzen gefunden"
+          />
+        </div>
+      )}
+
+      {/* Create Instance Modal */}
+      {showCreateModal && (
+        <div className={styles.modalOverlay} onClick={() => setShowCreateModal(false)}>
+          <div className={styles.modal} onClick={e => e.stopPropagation()}>
+            <div className={styles.modalHeader}>
+              <h2 className={styles.modalTitle}>Neue Feature-Instanz erstellen</h2>
+              <button
+                className={styles.modalClose}
+                onClick={() => setShowCreateModal(false)}
+              >
+                ✕
+              </button>
+            </div>
+            <div className={styles.modalContent}>
+              {features.length === 0 ? (
+                <p>Keine Features verfügbar. Bitte wenden Sie sich an den System-Administrator.</p>
+              ) : createFields.length === 0 ? (
+                <div className={styles.loadingContainer}>
+                  <div className={styles.spinner} />
+                  <span>Lade Formular...</span>
+                </div>
+              ) : (
+                <FormGeneratorForm
+                  attributes={createFields}
+                  mode="create"
+                  onSubmit={handleCreateInstance}
+                  onCancel={() => setShowCreateModal(false)}
+                  submitButtonText="Erstellen"
+                  cancelButtonText="Abbrechen"
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdminFeatureAccessPage;
diff --git a/src/pages/admin/AdminInvitationsPage.tsx b/src/pages/admin/AdminInvitationsPage.tsx
new file mode 100644
index 0000000..bbeed51
--- /dev/null
+++ b/src/pages/admin/AdminInvitationsPage.tsx
@@ -0,0 +1,457 @@
+/**
+ * AdminInvitationsPage
+ * 
+ * Admin page for managing invitations within a mandate.
+ * Allows creating, viewing, and revoking invitations.
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { useInvitations, type Invitation, type InvitationCreate } from '../../hooks/useInvitations';
+import { useUserMandates, type Mandate, type Role } from '../../hooks/useUserMandates';
+import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
+import { FormGeneratorForm, type AttributeDefinition } from '../../components/FormGenerator/FormGeneratorForm';
+import { FaPlus, FaSync, FaEnvelopeOpenText, FaBuilding, FaCopy, FaLink } from 'react-icons/fa';
+import api from '../../api';
+import styles from './Admin.module.css';
+
+export const AdminInvitationsPage: React.FC = () => {
+  const {
+    invitations,
+    loading,
+    error,
+    fetchInvitations,
+    createInvitation,
+    revokeInvitation,
+  } = useInvitations();
+
+  const { fetchMandates, fetchRoles } = useUserMandates();
+
+  // State
+  const [mandates, setMandates] = useState<Mandate[]>([]);
+  const [selectedMandateId, setSelectedMandateId] = useState<string>('');
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showUrlModal, setShowUrlModal] = useState<Invitation | null>(null);
+  const [showExpired, setShowExpired] = useState(false);
+  const [showUsed, setShowUsed] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [copySuccess, setCopySuccess] = useState(false);
+  const [backendAttributes, setBackendAttributes] = useState<AttributeDefinition[]>([]);
+
+  // Load mandates and attributes on mount
+  useEffect(() => {
+    const loadMandates = async () => {
+      const data = await fetchMandates();
+      setMandates(data);
+      if (data.length > 0 && !selectedMandateId) {
+        setSelectedMandateId(data[0].id);
+      }
+    };
+    loadMandates();
+    // Fetch Invitation attributes from backend
+    api.get('/api/attributes/Invitation').then(response => {
+      const attrs = response.data?.attributes || response.data || [];
+      setBackendAttributes(Array.isArray(attrs) ? attrs : []);
+    }).catch(() => setBackendAttributes([]));
+  }, [fetchMandates]);
+
+  // Load invitations and roles when mandate changes
+  useEffect(() => {
+    if (selectedMandateId) {
+      fetchInvitations(selectedMandateId, { includeExpired: showExpired, includeUsed: showUsed });
+      fetchRoles(selectedMandateId).then(setRoles);
+    }
+  }, [selectedMandateId, showExpired, showUsed, fetchInvitations, fetchRoles]);
+
+  // Format timestamp
+  const formatDate = (timestamp: number) => {
+    if (!timestamp) return '-';
+    const date = new Date(timestamp * 1000);
+    return date.toLocaleString('de-CH', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  // Table columns
+  const columns = useMemo(() => [
+    { 
+      key: 'email', 
+      label: 'E-Mail', 
+      type: 'string' as const, 
+      sortable: true, 
+      filterable: true, 
+      searchable: true, 
+      width: 200,
+      render: (value: string) => value || '(beliebig)'
+    },
+    { 
+      key: 'roleIds', 
+      label: 'Rollen', 
+      type: 'array' as const, 
+      sortable: false, 
+      filterable: false, 
+      width: 150,
+      render: (value: string[]) => {
+        if (!value || value.length === 0) return '-';
+        return value.map(roleId => {
+          const role = roles.find(r => r.id === roleId);
+          return role?.roleLabel || roleId;
+        }).join(', ');
+      }
+    },
+    { 
+      key: 'expiresAt', 
+      label: 'Gültig bis', 
+      type: 'number' as const, 
+      sortable: true, 
+      width: 150,
+      render: (value: number, row: Invitation) => {
+        const text = formatDate(value);
+        const isExpired = value < Date.now() / 1000;
+        return (
+          <span style={{ color: isExpired ? 'var(--danger-color)' : 'inherit' }}>
+            {text} {isExpired && '(abgelaufen)'}
+          </span>
+        );
+      }
+    },
+    { 
+      key: 'currentUses', 
+      label: 'Verwendet', 
+      type: 'string' as const, 
+      sortable: true, 
+      width: 100,
+      render: (value: number, row: Invitation) => `${value || 0} / ${row.maxUses || 1}`
+    },
+    { 
+      key: 'createdAt', 
+      label: 'Erstellt', 
+      type: 'number' as const, 
+      sortable: true, 
+      width: 150,
+      render: (value: number) => formatDate(value)
+    },
+  ], [roles]);
+
+  // Form attributes from backend - merge with dynamic role options
+  const createFields: AttributeDefinition[] = useMemo(() => {
+    const excludedFields = ['id', 'mandateId', 'token', 'createdBy', 'createdAt', 'expiresAt', 'currentUses', 'inviteUrl'];
+    const roleOptions = roles
+      .filter(r => !r.featureInstanceId) // Only mandate-level roles
+      .map(r => ({ value: r.id, label: r.roleLabel }));
+    
+    const fields = backendAttributes
+      .filter(attr => !excludedFields.includes(attr.name))
+      .map(attr => ({
+        ...attr,
+        // Override roleIds options with dynamic data
+        options: attr.name === 'roleIds' ? roleOptions : attr.options,
+      })) as AttributeDefinition[];
+    
+    // Add helper field expiresInHours if not in model but fields exist
+    if (fields.length > 0 && !fields.find(f => f.name === 'expiresInHours')) {
+      fields.push({ name: 'expiresInHours', label: 'Gültigkeitsdauer (Stunden)', type: 'number' as any, 
+        required: true, default: 72, min: 1, max: 720 });
+    }
+    return fields;
+  }, [roles, backendAttributes]);
+
+  // Handle create invitation
+  const handleCreateInvitation = async (data: InvitationCreate) => {
+    if (!selectedMandateId) return;
+    setIsSubmitting(true);
+    try {
+      const result = await createInvitation(selectedMandateId, data);
+      if (result.success && result.data) {
+        setShowCreateModal(false);
+        setShowUrlModal(result.data);
+        fetchInvitations(selectedMandateId, { includeExpired: showExpired, includeUsed: showUsed });
+      } else {
+        alert(result.error || 'Fehler beim Erstellen der Einladung');
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Handle revoke invitation
+  const handleRevokeInvitation = async (invitation: Invitation) => {
+    if (!selectedMandateId) return;
+    if (window.confirm('Möchten Sie diese Einladung wirklich widerrufen?')) {
+      const result = await revokeInvitation(selectedMandateId, invitation.id);
+      if (!result.success) {
+        alert(result.error || 'Fehler beim Widerrufen der Einladung');
+      }
+    }
+  };
+
+  // Handle show URL
+  const handleShowUrl = (invitation: Invitation) => {
+    setShowUrlModal(invitation);
+  };
+
+  // Copy URL to clipboard
+  const handleCopyUrl = async (url: string) => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  // Get mandate name
+  const getMandateName = (mandate: Mandate) => {
+    if (typeof mandate.name === 'object') {
+      return mandate.name.de || mandate.name.en || Object.values(mandate.name)[0] || mandate.id;
+    }
+    return mandate.name || mandate.id;
+  };
+
+  if (error && !selectedMandateId) {
+    return (
+      <div className={styles.adminPage}>
+        <div className={styles.errorContainer}>
+          <span className={styles.errorIcon}>⚠️</span>
+          <p className={styles.errorMessage}>Fehler: {error}</p>
+          <button className={styles.secondaryButton} onClick={() => fetchMandates()}>
+            <FaSync /> Erneut versuchen
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.adminPage}>
+      <div className={styles.pageHeader}>
+        <div>
+          <h1 className={styles.pageTitle}>Einladungen</h1>
+          <p className={styles.pageSubtitle}>Erstellen und verwalten Sie Einladungen für neue Benutzer</p>
+        </div>
+      </div>
+
+      {/* Mandate Selector and Filters */}
+      <div className={styles.filterSection}>
+        <div className={styles.filterGroup}>
+          <label className={styles.filterLabel}>
+            <FaBuilding style={{ marginRight: 8 }} />
+            Mandant:
+          </label>
+          <select
+            className={styles.filterSelect}
+            value={selectedMandateId}
+            onChange={(e) => setSelectedMandateId(e.target.value)}
+          >
+            <option value="">-- Mandant wählen --</option>
+            {mandates.map(m => (
+              <option key={m.id} value={m.id}>
+                {getMandateName(m)}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className={styles.filterGroup}>
+          <label className={styles.checkboxLabel}>
+            <input
+              type="checkbox"
+              checked={showExpired}
+              onChange={(e) => setShowExpired(e.target.checked)}
+            />
+            Abgelaufene anzeigen
+          </label>
+          <label className={styles.checkboxLabel}>
+            <input
+              type="checkbox"
+              checked={showUsed}
+              onChange={(e) => setShowUsed(e.target.checked)}
+            />
+            Verwendete anzeigen
+          </label>
+        </div>
+        
+        {selectedMandateId && (
+          <div className={styles.headerActions}>
+            <button
+              className={styles.secondaryButton}
+              onClick={() => fetchInvitations(selectedMandateId, { includeExpired: showExpired, includeUsed: showUsed })}
+              disabled={loading}
+            >
+              <FaSync className={loading ? 'spinning' : ''} /> Aktualisieren
+            </button>
+            <button
+              className={styles.primaryButton}
+              onClick={() => setShowCreateModal(true)}
+              disabled={roles.length === 0}
+            >
+              <FaPlus /> Neue Einladung
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      {!selectedMandateId ? (
+        <div className={styles.emptyState}>
+          <FaBuilding className={styles.emptyIcon} />
+          <h3 className={styles.emptyTitle}>Kein Mandant ausgewählt</h3>
+          <p className={styles.emptyDescription}>
+            Wählen Sie einen Mandanten aus, um dessen Einladungen zu verwalten.
+          </p>
+        </div>
+      ) : loading && invitations.length === 0 ? (
+        <div className={styles.loadingContainer}>
+          <div className={styles.spinner} />
+          <span>Lade Einladungen...</span>
+        </div>
+      ) : invitations.length === 0 ? (
+        <div className={styles.emptyState}>
+          <FaEnvelopeOpenText className={styles.emptyIcon} />
+          <h3 className={styles.emptyTitle}>Keine Einladungen</h3>
+          <p className={styles.emptyDescription}>
+            Es gibt noch keine aktiven Einladungen für diesen Mandanten.
+          </p>
+          <button
+            className={styles.primaryButton}
+            onClick={() => setShowCreateModal(true)}
+            disabled={roles.length === 0}
+          >
+            <FaPlus /> Erste Einladung erstellen
+          </button>
+        </div>
+      ) : (
+        <div className={styles.tableContainer}>
+          <FormGeneratorTable
+            data={invitations}
+            columns={columns}
+            loading={loading}
+            pagination={true}
+            pageSize={25}
+            searchable={true}
+            filterable={true}
+            sortable={true}
+            selectable={false}
+            actionButtons={[
+              {
+                type: 'delete' as const,
+                title: 'Einladung widerrufen',
+              }
+            ]}
+            customActions={[
+              {
+                id: 'showUrl',
+                icon: <FaLink />,
+                onClick: handleShowUrl,
+                title: 'Einladungs-Link anzeigen',
+              }
+            ]}
+            onDelete={handleRevokeInvitation}
+            hookData={{
+              refetch: () => fetchInvitations(selectedMandateId, { includeExpired: showExpired, includeUsed: showUsed }),
+            }}
+            emptyMessage="Keine Einladungen gefunden"
+          />
+        </div>
+      )}
+
+      {/* Create Invitation Modal */}
+      {showCreateModal && (
+        <div className={styles.modalOverlay} onClick={() => setShowCreateModal(false)}>
+          <div className={styles.modal} onClick={e => e.stopPropagation()}>
+            <div className={styles.modalHeader}>
+              <h2 className={styles.modalTitle}>Neue Einladung erstellen</h2>
+              <button
+                className={styles.modalClose}
+                onClick={() => setShowCreateModal(false)}
+              >
+                ✕
+              </button>
+            </div>
+            <div className={styles.modalContent}>
+              {roles.length === 0 ? (
+                <p>Keine Rollen verfügbar. Erstellen Sie zuerst Rollen für diesen Mandanten.</p>
+              ) : createFields.length === 0 ? (
+                <div className={styles.loadingContainer}>
+                  <div className={styles.spinner} />
+                  <span>Lade Formular...</span>
+                </div>
+              ) : (
+                <FormGeneratorForm
+                  attributes={createFields}
+                  mode="create"
+                  onSubmit={handleCreateInvitation}
+                  onCancel={() => setShowCreateModal(false)}
+                  submitButtonText="Einladung erstellen"
+                  cancelButtonText="Abbrechen"
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* URL Display Modal */}
+      {showUrlModal && (
+        <div className={styles.modalOverlay} onClick={() => setShowUrlModal(null)}>
+          <div className={styles.modal} onClick={e => e.stopPropagation()}>
+            <div className={styles.modalHeader}>
+              <h2 className={styles.modalTitle}>Einladungs-Link</h2>
+              <button
+                className={styles.modalClose}
+                onClick={() => setShowUrlModal(null)}
+              >
+                ✕
+              </button>
+            </div>
+            <div className={styles.modalContent}>
+              <p style={{ marginBottom: '1rem', color: 'var(--text-secondary)' }}>
+                Teilen Sie diesen Link mit dem eingeladenen Benutzer:
+              </p>
+              <div className={styles.urlBox}>
+                <input
+                  type="text"
+                  readOnly
+                  value={showUrlModal.inviteUrl}
+                  className={styles.urlInput}
+                  onClick={(e) => (e.target as HTMLInputElement).select()}
+                />
+                <button
+                  className={styles.copyButton}
+                  onClick={() => handleCopyUrl(showUrlModal.inviteUrl)}
+                  title="In Zwischenablage kopieren"
+                >
+                  <FaCopy />
+                  {copySuccess ? ' Kopiert!' : ' Kopieren'}
+                </button>
+              </div>
+              {showUrlModal.email && (
+                <p style={{ marginTop: '1rem', fontSize: '0.875rem', color: 'var(--text-secondary)' }}>
+                  Dieser Link kann nur von <strong>{showUrlModal.email}</strong> verwendet werden.
+                </p>
+              )}
+              <p style={{ marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--text-secondary)' }}>
+                Gültig bis: {formatDate(showUrlModal.expiresAt)}
+              </p>
+            </div>
+            <div className={styles.modalFooter}>
+              <button
+                className={styles.primaryButton}
+                onClick={() => setShowUrlModal(null)}
+              >
+                Schliessen
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdminInvitationsPage;
diff --git a/src/pages/admin/AdminMandateRolesPage.tsx b/src/pages/admin/AdminMandateRolesPage.tsx
new file mode 100644
index 0000000..a931f45
--- /dev/null
+++ b/src/pages/admin/AdminMandateRolesPage.tsx
@@ -0,0 +1,527 @@
+/**
+ * AdminMandateRolesPage
+ * 
+ * Admin page for managing roles within a specific mandate.
+ * Allows creating, viewing, editing, and deleting mandate-level roles.
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { useMandateRoles, type Role, type RoleCreate, type RoleUpdate } from '../../hooks/useMandateRoles';
+import { useUserMandates, type Mandate } from '../../hooks/useUserMandates';
+import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
+import { FormGeneratorForm, type AttributeDefinition } from '../../components/FormGenerator/FormGeneratorForm';
+import { FaPlus, FaSync, FaUserShield, FaBuilding, FaGlobe, FaCube } from 'react-icons/fa';
+import api from '../../api';
+import styles from './Admin.module.css';
+
+export const AdminMandateRolesPage: React.FC = () => {
+  const {
+    roles,
+    loading,
+    error,
+    fetchRoles,
+    createRole,
+    updateRole,
+    deleteRole,
+  } = useMandateRoles();
+
+  const { fetchMandates } = useUserMandates();
+
+  // State
+  const [mandates, setMandates] = useState<Mandate[]>([]);
+  const [selectedMandateId, setSelectedMandateId] = useState<string>('');
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [editingRole, setEditingRole] = useState<Role | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [roleFilter, setRoleFilter] = useState<'all' | 'mandate' | 'global'>('all');
+  const [backendAttributes, setBackendAttributes] = useState<AttributeDefinition[]>([]);
+
+  // Load mandates and attributes on mount
+  useEffect(() => {
+    const loadMandates = async () => {
+      const data = await fetchMandates();
+      setMandates(data);
+      if (data.length > 0 && !selectedMandateId) {
+        setSelectedMandateId(data[0].id);
+      }
+    };
+    loadMandates();
+    // Fetch Role attributes from backend
+    api.get('/api/attributes/Role').then(response => {
+      const attrs = response.data?.attributes || response.data || [];
+      setBackendAttributes(Array.isArray(attrs) ? attrs : []);
+    }).catch(() => setBackendAttributes([]));
+  }, [fetchMandates]);
+
+  // Load roles when mandate changes
+  useEffect(() => {
+    if (selectedMandateId) {
+      fetchRoles(selectedMandateId);
+    }
+  }, [selectedMandateId, fetchRoles]);
+
+  // Filter roles based on selection and add scopeType field
+  const filteredRoles = useMemo(() => {
+    if (!selectedMandateId) return [];
+    
+    return roles
+      .filter(role => {
+        // Don't show feature-instance level roles here
+        if (role.featureInstanceId) return false;
+        
+        switch (roleFilter) {
+          case 'mandate':
+            return role.mandateId === selectedMandateId;
+          case 'global':
+            return !role.mandateId;
+          default:
+            return !role.mandateId || role.mandateId === selectedMandateId;
+        }
+      })
+      .map(role => ({
+        ...role,
+        // Computed field for table display - not an ID/boolean type
+        scopeType: role.isSystemRole ? 'system' : (role.mandateId ? 'mandate' : 'global')
+      }));
+  }, [roles, selectedMandateId, roleFilter]);
+
+  // Get description text
+  const getDescriptionText = (desc: string | { [key: string]: string } | undefined) => {
+    if (!desc) return '-';
+    if (typeof desc === 'string') return desc;
+    return desc.de || desc.en || Object.values(desc)[0] || '-';
+  };
+
+  // Table columns
+  const columns = useMemo(() => [
+    { 
+      key: 'roleLabel', 
+      label: 'Bezeichnung', 
+      type: 'string' as const, 
+      sortable: true, 
+      filterable: true, 
+      searchable: true, 
+      width: 150 
+    },
+    { 
+      key: 'description', 
+      label: 'Beschreibung', 
+      type: 'string' as const, 
+      sortable: false, 
+      width: 250,
+      formatter: (value: string | { [key: string]: string }) => getDescriptionText(value)
+    },
+    { 
+      key: 'scopeType', 
+      label: 'Typ', 
+      type: 'string' as const, 
+      sortable: true, 
+      filterable: true, 
+      width: 120,
+      formatter: (value: string) => {
+        if (value === 'system') {
+          return (
+            <span className={styles.badge} style={{ background: 'var(--warning-color, #d69e2e)', color: 'white' }}>
+              <FaUserShield style={{ marginRight: 4 }} /> System
+            </span>
+          );
+        }
+        if (value === 'global') {
+          return (
+            <span className={styles.badge} style={{ background: 'var(--info-color, #3182ce)', color: 'white' }}>
+              <FaGlobe style={{ marginRight: 4 }} /> Global
+            </span>
+          );
+        }
+        return (
+          <span className={styles.badge} style={{ background: 'var(--success-color, #38a169)', color: 'white' }}>
+            <FaBuilding style={{ marginRight: 4 }} /> Mandant
+          </span>
+        );
+      }
+    },
+    { 
+      key: 'featureCode', 
+      label: 'Feature', 
+      type: 'string' as const, 
+      sortable: true, 
+      filterable: true, 
+      width: 120,
+      formatter: (value: string) => value ? (
+        <span className={styles.badge} style={{ background: 'var(--bg-secondary)' }}>
+          <FaCube style={{ marginRight: 4 }} /> {value}
+        </span>
+      ) : '-'
+    },
+  ], []);
+
+  // Form attributes from backend - for create form
+  const createFields: AttributeDefinition[] = useMemo(() => {
+    const excludedFields = ['id', 'mandateId', 'featureInstanceId', 'featureCode', 'isSystemRole'];
+    
+    const fields = backendAttributes
+      .filter(attr => !excludedFields.includes(attr.name))
+      .map(attr => ({ ...attr })) as AttributeDefinition[];
+    
+    // Add scope field for mandate/global selection (not a model attribute)
+    if (fields.length > 0) {
+      fields.push({
+        name: 'scope',
+        label: 'Geltungsbereich',
+        type: 'enum' as any,
+        required: true,
+        default: 'mandate',
+        options: [
+          { value: 'mandate', label: 'Nur dieser Mandant' },
+          { value: 'global', label: 'Global (alle Mandanten)' },
+        ]
+      });
+    }
+    return fields;
+  }, [backendAttributes]);
+
+  // Form attributes from backend - for edit form
+  const editFields: AttributeDefinition[] = useMemo(() => {
+    const excludedFields = ['id', 'mandateId', 'featureInstanceId', 'featureCode', 'isSystemRole'];
+    
+    const fields = backendAttributes
+      .filter(attr => !excludedFields.includes(attr.name))
+      .map(attr => ({
+        ...attr,
+        // Mark roleLabel as readonly for system roles
+        readonly: attr.name === 'roleLabel' && editingRole?.isSystemRole ? true : attr.readonly,
+      })) as AttributeDefinition[];
+    
+    // Add scope field for mandate/global selection (only if not system role)
+    if (fields.length > 0 && !editingRole?.isSystemRole) {
+      fields.push({
+        name: 'scope',
+        label: 'Geltungsbereich',
+        type: 'enum' as any,
+        required: true,
+        options: [
+          { value: 'mandate', label: 'Nur dieser Mandant' },
+          { value: 'global', label: 'Global (alle Mandanten)' },
+        ]
+      });
+    }
+    return fields;
+  }, [backendAttributes, editingRole]);
+
+  // Handle create role
+  const handleCreateRole = async (data: { roleLabel: string; description?: string; scope: 'mandate' | 'global' }) => {
+    if (!selectedMandateId) return;
+    setIsSubmitting(true);
+    try {
+      const roleData: RoleCreate = {
+        roleLabel: data.roleLabel.toLowerCase().replace(/\s+/g, '_'),
+        description: data.description,
+        mandateId: data.scope === 'mandate' ? selectedMandateId : undefined
+      };
+      
+      const result = await createRole(roleData, selectedMandateId);
+      if (result.success) {
+        setShowCreateModal(false);
+        fetchRoles(selectedMandateId);
+      } else {
+        alert(result.error || 'Fehler beim Erstellen der Rolle');
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Handle edit role
+  const handleEditRole = async (data: RoleUpdate & { scope?: 'mandate' | 'global' }) => {
+    if (!editingRole) return;
+    setIsSubmitting(true);
+    try {
+      // Convert scope to mandateId
+      const updateData: RoleUpdate = {
+        ...data,
+        mandateId: data.scope === 'mandate' ? selectedMandateId : null,
+      };
+      // Remove scope field as it's not part of the model
+      delete (updateData as any).scope;
+      
+      const result = await updateRole(editingRole.id, updateData);
+      if (result.success) {
+        setEditingRole(null);
+        if (selectedMandateId) {
+          fetchRoles(selectedMandateId);
+        }
+      } else {
+        alert(result.error || 'Fehler beim Aktualisieren der Rolle');
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Handle delete role
+  const handleDeleteRole = async (role: Role) => {
+    if (role.isSystemRole) {
+      alert('System-Rollen können nicht gelöscht werden.');
+      return;
+    }
+    
+    if (window.confirm(`Möchten Sie die Rolle "${role.roleLabel}" wirklich löschen?`)) {
+      const result = await deleteRole(role.id);
+      if (!result.success) {
+        alert(result.error || 'Fehler beim Löschen der Rolle');
+      }
+    }
+  };
+
+  // Handle edit click
+  const handleEditClick = (role: Role) => {
+    setEditingRole(role);
+  };
+
+  // Get mandate name
+  const getMandateName = (mandate: Mandate) => {
+    if (typeof mandate.name === 'object') {
+      return mandate.name.de || mandate.name.en || Object.values(mandate.name)[0] || mandate.id;
+    }
+    return mandate.name || mandate.id;
+  };
+
+  if (error && !selectedMandateId) {
+    return (
+      <div className={styles.adminPage}>
+        <div className={styles.errorContainer}>
+          <span className={styles.errorIcon}>⚠️</span>
+          <p className={styles.errorMessage}>Fehler: {error}</p>
+          <button className={styles.secondaryButton} onClick={() => fetchMandates()}>
+            <FaSync /> Erneut versuchen
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.adminPage}>
+      <div className={styles.pageHeader}>
+        <div>
+          <h1 className={styles.pageTitle}>Mandanten-Rollen</h1>
+          <p className={styles.pageSubtitle}>Verwalten Sie Rollen innerhalb eines Mandanten</p>
+        </div>
+      </div>
+
+      {/* Mandate Selector and Filters */}
+      <div className={styles.filterSection}>
+        <div className={styles.filterGroup}>
+          <label className={styles.filterLabel}>
+            <FaBuilding style={{ marginRight: 8 }} />
+            Mandant:
+          </label>
+          <select
+            className={styles.filterSelect}
+            value={selectedMandateId}
+            onChange={(e) => setSelectedMandateId(e.target.value)}
+          >
+            <option value="">-- Mandant wählen --</option>
+            {mandates.map(m => (
+              <option key={m.id} value={m.id}>
+                {getMandateName(m)}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className={styles.filterGroup}>
+          <label className={styles.filterLabel}>Filter:</label>
+          <select
+            className={styles.filterSelect}
+            value={roleFilter}
+            onChange={(e) => setRoleFilter(e.target.value as 'all' | 'mandate' | 'global')}
+            style={{ minWidth: 150 }}
+          >
+            <option value="all">Alle Rollen</option>
+            <option value="mandate">Nur Mandanten-Rollen</option>
+            <option value="global">Nur globale Rollen</option>
+          </select>
+        </div>
+        
+        {selectedMandateId && (
+          <div className={styles.headerActions}>
+            <button
+              className={styles.secondaryButton}
+              onClick={() => fetchRoles(selectedMandateId)}
+              disabled={loading}
+            >
+              <FaSync className={loading ? 'spinning' : ''} /> Aktualisieren
+            </button>
+            <button
+              className={styles.primaryButton}
+              onClick={() => setShowCreateModal(true)}
+            >
+              <FaPlus /> Neue Rolle
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Info Box */}
+      {selectedMandateId && (
+        <div className={styles.infoBox}>
+          <FaUserShield style={{ marginRight: 8 }} />
+          <span>
+            <strong>Globale Rollen</strong> gelten für alle Mandanten. 
+            <strong> Mandanten-Rollen</strong> gelten nur für den ausgewählten Mandanten.
+            <strong> System-Rollen</strong> (sysadmin) können nicht bearbeitet werden.
+          </span>
+        </div>
+      )}
+
+      {/* Content */}
+      {!selectedMandateId ? (
+        <div className={styles.emptyState}>
+          <FaBuilding className={styles.emptyIcon} />
+          <h3 className={styles.emptyTitle}>Kein Mandant ausgewählt</h3>
+          <p className={styles.emptyDescription}>
+            Wählen Sie einen Mandanten aus, um dessen Rollen zu verwalten.
+          </p>
+        </div>
+      ) : loading && filteredRoles.length === 0 ? (
+        <div className={styles.loadingContainer}>
+          <div className={styles.spinner} />
+          <span>Lade Rollen...</span>
+        </div>
+      ) : filteredRoles.length === 0 ? (
+        <div className={styles.emptyState}>
+          <FaUserShield className={styles.emptyIcon} />
+          <h3 className={styles.emptyTitle}>Keine Rollen</h3>
+          <p className={styles.emptyDescription}>
+            {roleFilter === 'mandate' 
+              ? 'Es gibt noch keine mandantenspezifischen Rollen.'
+              : roleFilter === 'global'
+              ? 'Es gibt noch keine globalen Rollen.'
+              : 'Es gibt noch keine Rollen für diesen Mandanten.'}
+          </p>
+          <button
+            className={styles.primaryButton}
+            onClick={() => setShowCreateModal(true)}
+          >
+            <FaPlus /> Erste Rolle erstellen
+          </button>
+        </div>
+      ) : (
+        <div className={styles.tableContainer}>
+          <FormGeneratorTable
+            data={filteredRoles}
+            columns={columns}
+            loading={loading}
+            pagination={true}
+            pageSize={25}
+            searchable={true}
+            filterable={true}
+            sortable={true}
+            selectable={false}
+            actionButtons={[
+              {
+                type: 'edit' as const,
+                onAction: handleEditClick,
+                title: 'Rolle bearbeiten',
+              },
+              {
+                type: 'delete' as const,
+                title: 'Rolle löschen',
+                disabled: (row: Role) => row.isSystemRole ? { disabled: true, message: 'System-Rollen können nicht gelöscht werden' } : false
+              }
+            ]}
+            onDelete={handleDeleteRole}
+            hookData={{
+              refetch: () => fetchRoles(selectedMandateId),
+              handleDelete: handleDeleteRole,
+            }}
+            emptyMessage="Keine Rollen gefunden"
+          />
+        </div>
+      )}
+
+      {/* Create Role Modal */}
+      {showCreateModal && (
+        <div className={styles.modalOverlay} onClick={() => setShowCreateModal(false)}>
+          <div className={styles.modal} onClick={e => e.stopPropagation()}>
+            <div className={styles.modalHeader}>
+              <h2 className={styles.modalTitle}>Neue Rolle erstellen</h2>
+              <button
+                className={styles.modalClose}
+                onClick={() => setShowCreateModal(false)}
+              >
+                ✕
+              </button>
+            </div>
+            <div className={styles.modalContent}>
+              {createFields.length === 0 ? (
+                <div className={styles.loadingContainer}>
+                  <div className={styles.spinner} />
+                  <span>Lade Formular...</span>
+                </div>
+              ) : (
+                <FormGeneratorForm
+                  attributes={createFields}
+                  mode="create"
+                  onSubmit={handleCreateRole}
+                  onCancel={() => setShowCreateModal(false)}
+                  submitButtonText="Rolle erstellen"
+                  cancelButtonText="Abbrechen"
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Role Modal */}
+      {editingRole && (
+        <div className={styles.modalOverlay} onClick={() => setEditingRole(null)}>
+          <div className={styles.modal} onClick={e => e.stopPropagation()}>
+            <div className={styles.modalHeader}>
+              <h2 className={styles.modalTitle}>Rolle bearbeiten: {editingRole.roleLabel}</h2>
+              <button
+                className={styles.modalClose}
+                onClick={() => setEditingRole(null)}
+              >
+                ✕
+              </button>
+            </div>
+            <div className={styles.modalContent}>
+              {editFields.length === 0 ? (
+                <div className={styles.loadingContainer}>
+                  <div className={styles.spinner} />
+                  <span>Lade Formular...</span>
+                </div>
+              ) : (
+                <>
+                  {editingRole.isSystemRole && (
+                    <div className={styles.infoBox} style={{ marginBottom: '1rem' }}>
+                      <FaUserShield style={{ marginRight: 8 }} />
+                      <span>System-Rollen können nur eingeschränkt bearbeitet werden.</span>
+                    </div>
+                  )}
+                  <FormGeneratorForm
+                    attributes={editFields}
+                    data={{
+                      ...editingRole,
+                      scope: editingRole.mandateId ? 'mandate' : 'global'
+                    }}
+                    mode="edit"
+                    onSubmit={handleEditRole}
+                    onCancel={() => setEditingRole(null)}
+                    submitButtonText="Speichern"
+                    cancelButtonText="Abbrechen"
+                  />
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdminMandateRolesPage;
diff --git a/src/pages/admin/AdminMandatesPage.tsx b/src/pages/admin/AdminMandatesPage.tsx
index 3a32b8a..aab674f 100644
--- a/src/pages/admin/AdminMandatesPage.tsx
+++ b/src/pages/admin/AdminMandatesPage.tsx
@@ -4,16 +4,17 @@
  * Admin page for managing Mandates (tenants) using FormGeneratorTable.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useAdminMandates, type Mandate } from '../../hooks/useMandates';
 import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
-import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm';
+import { FormGeneratorForm, type AttributeDefinition } from '../../components/FormGenerator/FormGeneratorForm';
 import { FaPlus, FaSync, FaBuilding } from 'react-icons/fa';
 import styles from './Admin.module.css';
 
 export const AdminMandatesPage: React.FC = () => {
   const {
     mandates,
+    attributes,
     columns,
     permissions,
     pagination,
@@ -28,9 +29,19 @@ export const AdminMandatesPage: React.FC = () => {
     updateOptimistically,
   } = useAdminMandates();
 
+  // Form attributes from backend - filter for create/edit forms
+  const formAttributes: AttributeDefinition[] = useMemo(() => {
+    const excludedFields = ['id'];
+    return attributes
+      .filter(attr => !excludedFields.includes(attr.name))
+      .map(attr => ({
+        ...attr,
+        type: attr.type,
+      })) as AttributeDefinition[];
+  }, [attributes]);
+
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [editingMandate, setEditingMandate] = useState<Mandate | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Check if user can create
   const canCreate = permissions?.create !== 'n';
@@ -47,28 +58,18 @@ export const AdminMandatesPage: React.FC = () => {
 
   // Handle create submit
   const handleCreateSubmit = async (data: Partial<Mandate>) => {
-    setIsSubmitting(true);
-    try {
-      const success = await handleCreate(data);
-      if (success) {
-        setShowCreateModal(false);
-      }
-    } finally {
-      setIsSubmitting(false);
+    const success = await handleCreate(data);
+    if (success) {
+      setShowCreateModal(false);
     }
   };
 
   // Handle edit submit
   const handleEditSubmit = async (data: Partial<Mandate>) => {
     if (!editingMandate) return;
-    setIsSubmitting(true);
-    try {
-      const success = await handleUpdate(editingMandate.id, data);
-      if (success) {
-        setEditingMandate(null);
-      }
-    } finally {
-      setIsSubmitting(false);
+    const success = await handleUpdate(editingMandate.id, data);
+    if (success) {
+      setEditingMandate(null);
     }
   };
 
@@ -191,18 +192,21 @@ export const AdminMandatesPage: React.FC = () => {
               </button>
             </div>
             <div className={styles.modalContent}>
-              <FormGeneratorForm
-                fields={[
-                  { key: 'name', label: 'Name', type: 'string', required: true },
-                  { key: 'description', label: 'Beschreibung', type: 'textarea' },
-                  { key: 'enabled', label: 'Aktiv', type: 'boolean' },
-                ]}
-                onSubmit={handleCreateSubmit}
-                onCancel={() => setShowCreateModal(false)}
-                submitLabel="Erstellen"
-                cancelLabel="Abbrechen"
-                loading={isSubmitting}
-              />
+              {formAttributes.length === 0 ? (
+                <div className={styles.loadingContainer}>
+                  <div className={styles.spinner} />
+                  <span>Lade Formular...</span>
+                </div>
+              ) : (
+                <FormGeneratorForm
+                  attributes={formAttributes}
+                  mode="create"
+                  onSubmit={handleCreateSubmit}
+                  onCancel={() => setShowCreateModal(false)}
+                  submitButtonText="Erstellen"
+                  cancelButtonText="Abbrechen"
+                />
+              )}
             </div>
           </div>
         </div>
@@ -222,19 +226,22 @@ export const AdminMandatesPage: React.FC = () => {
               </button>
             </div>
             <div className={styles.modalContent}>
-              <FormGeneratorForm
-                fields={[
-                  { key: 'name', label: 'Name', type: 'string', required: true },
-                  { key: 'description', label: 'Beschreibung', type: 'textarea' },
-                  { key: 'enabled', label: 'Aktiv', type: 'boolean' },
-                ]}
-                initialData={editingMandate}
-                onSubmit={handleEditSubmit}
-                onCancel={() => setEditingMandate(null)}
-                submitLabel="Speichern"
-                cancelLabel="Abbrechen"
-                loading={isSubmitting}
-              />
+              {formAttributes.length === 0 ? (
+                <div className={styles.loadingContainer}>
+                  <div className={styles.spinner} />
+                  <span>Lade Formular...</span>
+                </div>
+              ) : (
+                <FormGeneratorForm
+                  attributes={formAttributes}
+                  data={editingMandate}
+                  mode="edit"
+                  onSubmit={handleEditSubmit}
+                  onCancel={() => setEditingMandate(null)}
+                  submitButtonText="Speichern"
+                  cancelButtonText="Abbrechen"
+                />
+              )}
             </div>
           </div>
         </div>
diff --git a/src/pages/admin/AdminRolesPage.tsx b/src/pages/admin/AdminRolesPage.tsx
index e40eb19..9d9987b 100644
--- a/src/pages/admin/AdminRolesPage.tsx
+++ b/src/pages/admin/AdminRolesPage.tsx
@@ -7,13 +7,14 @@
 import React, { useState, useMemo } from 'react';
 import { useAdminRoles, type Role } from '../../hooks/useRoles';
 import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
-import { FormGeneratorForm } from '../../components/FormGenerator/FormGeneratorForm';
+import { FormGeneratorForm, type AttributeDefinition } from '../../components/FormGenerator/FormGeneratorForm';
 import { FaPlus, FaSync, FaUserShield } from 'react-icons/fa';
 import styles from './Admin.module.css';
 
 export const AdminRolesPage: React.FC = () => {
   const {
     roles,
+    attributes,
     columns,
     permissions,
     pagination,
@@ -32,15 +33,11 @@ export const AdminRolesPage: React.FC = () => {
   const [editingRole, setEditingRole] = useState<Role | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // Ensure columns have at least default values
+  // Columns for global roles - exclude mandate/feature-specific columns
+  // Global roles don't have mandate or feature instance associations
   const displayColumns = useMemo(() => {
-    if (columns.length > 0) return columns;
-    
-    // Default columns if none from backend
-    return [
-      { key: 'roleLabel', label: 'Rollen-Label', type: 'string' as const, sortable: true, filterable: true, searchable: true, width: 150 },
-      { key: 'description', label: 'Beschreibung', type: 'string' as const, sortable: true, filterable: false, searchable: true, width: 300 },
-    ];
+    const excludedColumns = ['mandateId', 'featureInstanceId', 'featureCode'];
+    return columns.filter(col => !excludedColumns.includes(col.key));
   }, [columns]);
 
   // Check permissions
@@ -60,15 +57,7 @@ export const AdminRolesPage: React.FC = () => {
   const handleCreateSubmit = async (data: Partial<Role>) => {
     setIsSubmitting(true);
     try {
-      // Transform description to TextMultilingual format if it's a string
-      const roleData: Partial<Role> = {
-        ...data,
-        description: typeof data.description === 'string' 
-          ? { en: data.description } 
-          : data.description,
-      };
-      
-      const success = await handleCreate(roleData);
+      const success = await handleCreate(data);
       if (success) {
         setShowCreateModal(false);
       }
@@ -82,15 +71,7 @@ export const AdminRolesPage: React.FC = () => {
     if (!editingRole) return;
     setIsSubmitting(true);
     try {
-      // Transform description to TextMultilingual format if it's a string
-      const roleData: Partial<Role> = {
-        ...data,
-        description: typeof data.description === 'string' 
-          ? { en: data.description } 
-          : data.description,
-      };
-      
-      const success = await handleUpdate(editingRole.id, roleData);
+      const success = await handleUpdate(editingRole.id, data);
       if (success) {
         setEditingRole(null);
       }
@@ -106,11 +87,18 @@ export const AdminRolesPage: React.FC = () => {
     }
   };
 
-  // Form fields for create/edit
-  const formFields = useMemo(() => [
-    { key: 'roleLabel', label: 'Rollen-Label', type: 'string' as const, required: true },
-    { key: 'description', label: 'Beschreibung', type: 'textarea' as const },
-  ], []);
+  // Form attributes from backend - filter for create/edit forms
+  // Exclude fields not relevant for global roles (mandateId, featureInstanceId, etc.)
+  const formAttributes: AttributeDefinition[] = useMemo(() => {
+    const excludedFields = ['id', 'mandateId', 'featureInstanceId', 'featureCode', 'isSystemRole'];
+    return attributes
+      .filter(attr => !excludedFields.includes(attr.name))
+      .map(attr => ({
+        ...attr,
+        // Map backend type names to form types
+        type: attr.type === 'multilingual' ? 'multilingual' : attr.type,
+      })) as AttributeDefinition[];
+  }, [attributes]);
 
   if (error) {
     return (
@@ -224,14 +212,21 @@ export const AdminRolesPage: React.FC = () => {
               </button>
             </div>
             <div className={styles.modalContent}>
-              <FormGeneratorForm
-                fields={formFields}
-                onSubmit={handleCreateSubmit}
-                onCancel={() => setShowCreateModal(false)}
-                submitLabel="Erstellen"
-                cancelLabel="Abbrechen"
-                loading={isSubmitting}
-              />
+              {formAttributes.length === 0 ? (
+                <div className={styles.loadingContainer}>
+                  <div className={styles.spinner} />
+                  <span>Lade Formular...</span>
+                </div>
+              ) : (
+                <FormGeneratorForm
+                  attributes={formAttributes}
+                  mode="create"
+                  onSubmit={handleCreateSubmit}
+                  onCancel={() => setShowCreateModal(false)}
+                  submitButtonText={isSubmitting ? 'Erstelle...' : 'Erstellen'}
+                  cancelButtonText="Abbrechen"
+                />
+              )}
             </div>
           </div>
         </div>
@@ -251,21 +246,22 @@ export const AdminRolesPage: React.FC = () => {
               </button>
             </div>
             <div className={styles.modalContent}>
-              <FormGeneratorForm
-                fields={formFields}
-                initialData={{
-                  ...editingRole,
-                  // Extract description from TextMultilingual if needed
-                  description: typeof editingRole.description === 'object' 
-                    ? editingRole.description?.en || editingRole.description?.ge || ''
-                    : editingRole.description,
-                }}
-                onSubmit={handleEditSubmit}
-                onCancel={() => setEditingRole(null)}
-                submitLabel="Speichern"
-                cancelLabel="Abbrechen"
-                loading={isSubmitting}
-              />
+              {formAttributes.length === 0 ? (
+                <div className={styles.loadingContainer}>
+                  <div className={styles.spinner} />
+                  <span>Lade Formular...</span>
+                </div>
+              ) : (
+                <FormGeneratorForm
+                  attributes={formAttributes}
+                  data={editingRole}
+                  mode="edit"
+                  onSubmit={handleEditSubmit}
+                  onCancel={() => setEditingRole(null)}
+                  submitButtonText={isSubmitting ? 'Speichern...' : 'Speichern'}
+                  cancelButtonText="Abbrechen"
+                />
+              )}
             </div>
           </div>
         </div>
diff --git a/src/pages/admin/AdminUserMandatesPage.tsx b/src/pages/admin/AdminUserMandatesPage.tsx
new file mode 100644
index 0000000..f517963
--- /dev/null
+++ b/src/pages/admin/AdminUserMandatesPage.tsx
@@ -0,0 +1,442 @@
+/**
+ * AdminUserMandatesPage
+ * 
+ * Admin page for managing user-mandate memberships.
+ * Allows assigning users to mandates and managing their roles within mandates.
+ */
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { useUserMandates, type MandateUser, type Mandate, type Role } from '../../hooks/useUserMandates';
+import { FormGeneratorTable } from '../../components/FormGenerator/FormGeneratorTable';
+import { FormGeneratorForm, type AttributeDefinition } from '../../components/FormGenerator/FormGeneratorForm';
+import { FaPlus, FaSync, FaUsers, FaBuilding } from 'react-icons/fa';
+import api from '../../api';
+import styles from './Admin.module.css';
+
+export const AdminUserMandatesPage: React.FC = () => {
+  const {
+    users,
+    loading,
+    error,
+    fetchMandateUsers,
+    addUserToMandate,
+    removeUserFromMandate,
+    updateUserRoles,
+    fetchMandates,
+    fetchRoles,
+    fetchAllUsers,
+  } = useUserMandates();
+
+  // State
+  const [mandates, setMandates] = useState<Mandate[]>([]);
+  const [selectedMandateId, setSelectedMandateId] = useState<string>('');
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [allUsers, setAllUsers] = useState<Array<{ id: string; username: string; email?: string; fullName?: string }>>([]);
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [editingUser, setEditingUser] = useState<MandateUser | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [backendAttributes, setBackendAttributes] = useState<AttributeDefinition[]>([]);
+
+  // Load mandates and attributes on mount
+  useEffect(() => {
+    const loadMandates = async () => {
+      const data = await fetchMandates();
+      setMandates(data);
+      // Auto-select first mandate if available
+      if (data.length > 0 && !selectedMandateId) {
+        setSelectedMandateId(data[0].id);
+      }
+    };
+    loadMandates();
+    // Fetch UserMandate attributes from backend (for table columns)
+    api.get('/api/attributes/UserMandate').then(response => {
+      const attrs = response.data?.attributes || response.data || [];
+      setBackendAttributes(Array.isArray(attrs) ? attrs : []);
+    }).catch(() => setBackendAttributes([]));
+  }, [fetchMandates]);
+
+  // Load users when mandate changes
+  useEffect(() => {
+    if (selectedMandateId) {
+      fetchMandateUsers(selectedMandateId);
+      fetchRoles(selectedMandateId).then(setRoles);
+    }
+  }, [selectedMandateId, fetchMandateUsers, fetchRoles]);
+
+  // Load all users for the add modal
+  useEffect(() => {
+    fetchAllUsers().then(setAllUsers);
+  }, [fetchAllUsers]);
+
+  // Get users not yet in the mandate
+  const availableUsers = useMemo(() => {
+    const existingUserIds = new Set(users.map(u => u.userId));
+    return allUsers.filter(u => !existingUserIds.has(u.id));
+  }, [allUsers, users]);
+
+  // Table columns - based on MandateUserInfo response structure
+  const columns = useMemo(() => {
+    return [
+      {
+        key: 'username',
+        label: 'Benutzername',
+        type: 'text' as any,
+        sortable: true,
+        filterable: true,
+        searchable: true,
+        width: 150,
+      },
+      {
+        key: 'email',
+        label: 'E-Mail',
+        type: 'text' as any,
+        sortable: true,
+        filterable: true,
+        searchable: true,
+        width: 200,
+      },
+      {
+        key: 'fullName',
+        label: 'Vollständiger Name',
+        type: 'text' as any,
+        sortable: true,
+        filterable: true,
+        searchable: true,
+        width: 180,
+      },
+      {
+        key: 'roleLabels',
+        label: 'Rollen',
+        type: 'text' as any,
+        sortable: false,
+        filterable: false,
+        searchable: true,
+        width: 200,
+        render: (value: string[]) => {
+          if (!value || value.length === 0) return '-';
+          return value.join(', ');
+        },
+      },
+      {
+        key: 'enabled',
+        label: 'Aktiv',
+        type: 'boolean' as any,
+        sortable: true,
+        filterable: true,
+        searchable: false,
+        width: 80,
+      },
+    ];
+  }, []); // No dependencies - columns are static, roleLabels come from backend
+
+  // Dynamic options for forms (users and roles)
+  const userOptions = useMemo(() => 
+    availableUsers.map(u => ({
+      value: u.id,
+      label: `${u.username} ${u.email ? `(${u.email})` : ''}`
+    })), [availableUsers]);
+  
+  const roleOptions = useMemo(() => 
+    roles.filter(r => !r.featureInstanceId).map(r => ({
+      value: r.id,
+      label: r.roleLabel
+    })), [roles]);
+
+  // Form attributes for adding a user - uses dynamic options
+  // Note: This is an operational form for junction table, not direct model editing
+  const addUserFields: AttributeDefinition[] = useMemo(() => {
+    // Check if backend has userId attribute to get label/description
+    const userIdAttr = backendAttributes.find(a => a.name === 'userId');
+    const roleIdsAttr = backendAttributes.find(a => a.name === 'roleIds');
+    
+    return [
+      {
+        name: 'targetUserId',
+        label: userIdAttr?.label || 'Benutzer',
+        type: 'enum' as any,
+        required: true,
+        options: userOptions,
+      },
+      {
+        name: 'roleIds',
+        label: roleIdsAttr?.label || 'Rollen',
+        type: 'multiselect' as any,
+        required: true,
+        options: roleOptions,
+      }
+    ];
+  }, [userOptions, roleOptions, backendAttributes]);
+
+  // Form attributes for editing user roles
+  const editRolesFields: AttributeDefinition[] = useMemo(() => {
+    const roleIdsAttr = backendAttributes.find(a => a.name === 'roleIds');
+    
+    return [{
+      name: 'roleIds',
+      label: roleIdsAttr?.label || 'Rollen',
+      type: 'multiselect' as any,
+      required: true,
+      options: roleOptions,
+    }];
+  }, [roleOptions, backendAttributes]);
+
+  // Handle add user submit
+  const handleAddUser = async (data: { targetUserId: string; roleIds: string[] }) => {
+    if (!selectedMandateId) return;
+    setIsSubmitting(true);
+    try {
+      const result = await addUserToMandate(selectedMandateId, data);
+      if (result.success) {
+        setShowAddModal(false);
+        fetchMandateUsers(selectedMandateId);
+      } else {
+        alert(result.error || 'Fehler beim Hinzufügen des Benutzers');
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Handle edit roles submit
+  const handleEditRoles = async (data: { roleIds: string[] }) => {
+    if (!selectedMandateId || !editingUser) return;
+    setIsSubmitting(true);
+    try {
+      const result = await updateUserRoles(selectedMandateId, editingUser.userId, data.roleIds);
+      if (result.success) {
+        setEditingUser(null);
+        fetchMandateUsers(selectedMandateId);
+      } else {
+        alert(result.error || 'Fehler beim Aktualisieren der Rollen');
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Handle remove user
+  const handleRemoveUser = async (user: MandateUser) => {
+    if (!selectedMandateId) return;
+    if (window.confirm(`Möchten Sie den Benutzer "${user.username}" wirklich aus diesem Mandanten entfernen?`)) {
+      const result = await removeUserFromMandate(selectedMandateId, user.userId);
+      if (!result.success) {
+        alert(result.error || 'Fehler beim Entfernen des Benutzers');
+      }
+    }
+  };
+
+  // Handle edit click
+  const handleEditClick = (user: MandateUser) => {
+    setEditingUser(user);
+  };
+
+  // Get mandate name
+  const getMandateName = (mandate: Mandate) => {
+    if (typeof mandate.name === 'object') {
+      return mandate.name.de || mandate.name.en || Object.values(mandate.name)[0] || mandate.id;
+    }
+    return mandate.name || mandate.id;
+  };
+
+  if (error && !selectedMandateId) {
+    return (
+      <div className={styles.adminPage}>
+        <div className={styles.errorContainer}>
+          <span className={styles.errorIcon}>⚠️</span>
+          <p className={styles.errorMessage}>Fehler: {error}</p>
+          <button className={styles.secondaryButton} onClick={() => fetchMandates()}>
+            <FaSync /> Erneut versuchen
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.adminPage}>
+      <div className={styles.pageHeader}>
+        <div>
+          <h1 className={styles.pageTitle}>Mandanten-Mitglieder</h1>
+          <p className={styles.pageSubtitle}>Verwalten Sie, welche Benutzer Zugriff auf welche Mandanten haben</p>
+        </div>
+      </div>
+
+      {/* Mandate Selector */}
+      <div className={styles.filterSection}>
+        <div className={styles.filterGroup}>
+          <label className={styles.filterLabel}>
+            <FaBuilding style={{ marginRight: 8 }} />
+            Mandant auswählen:
+          </label>
+          <select
+            className={styles.filterSelect}
+            value={selectedMandateId}
+            onChange={(e) => setSelectedMandateId(e.target.value)}
+          >
+            <option value="">-- Mandant wählen --</option>
+            {mandates.map(m => (
+              <option key={m.id} value={m.id}>
+                {getMandateName(m)}
+              </option>
+            ))}
+          </select>
+        </div>
+        
+        {selectedMandateId && (
+          <div className={styles.headerActions}>
+            <button
+              className={styles.secondaryButton}
+              onClick={() => fetchMandateUsers(selectedMandateId)}
+              disabled={loading}
+            >
+              <FaSync className={loading ? 'spinning' : ''} /> Aktualisieren
+            </button>
+            <button
+              className={styles.primaryButton}
+              onClick={() => setShowAddModal(true)}
+              disabled={availableUsers.length === 0}
+            >
+              <FaPlus /> Benutzer hinzufügen
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      {!selectedMandateId ? (
+        <div className={styles.emptyState}>
+          <FaBuilding className={styles.emptyIcon} />
+          <h3 className={styles.emptyTitle}>Kein Mandant ausgewählt</h3>
+          <p className={styles.emptyDescription}>
+            Wählen Sie einen Mandanten aus, um dessen Mitglieder zu verwalten.
+          </p>
+        </div>
+      ) : loading && users.length === 0 ? (
+        <div className={styles.loadingContainer}>
+          <div className={styles.spinner} />
+          <span>Lade Mandanten-Mitglieder...</span>
+        </div>
+      ) : users.length === 0 ? (
+        <div className={styles.emptyState}>
+          <FaUsers className={styles.emptyIcon} />
+          <h3 className={styles.emptyTitle}>Keine Mitglieder</h3>
+          <p className={styles.emptyDescription}>
+            Diesem Mandanten sind noch keine Benutzer zugewiesen.
+          </p>
+          <button
+            className={styles.primaryButton}
+            onClick={() => setShowAddModal(true)}
+            disabled={availableUsers.length === 0}
+          >
+            <FaPlus /> Ersten Benutzer hinzufügen
+          </button>
+        </div>
+      ) : (
+        <div className={styles.tableContainer}>
+          <FormGeneratorTable
+            data={users}
+            columns={columns}
+            loading={loading}
+            pagination={true}
+            pageSize={25}
+            searchable={true}
+            filterable={true}
+            sortable={true}
+            selectable={false}
+            actionButtons={[
+              {
+                type: 'edit' as const,
+                onAction: handleEditClick,
+                title: 'Rollen bearbeiten',
+              },
+              {
+                type: 'delete' as const,
+                title: 'Aus Mandant entfernen',
+              }
+            ]}
+            onDelete={handleRemoveUser}
+            hookData={{
+              refetch: () => fetchMandateUsers(selectedMandateId),
+              handleDelete: async (userId: string) => {
+                const user = users.find(u => u.userId === userId);
+                if (user) {
+                  const result = await removeUserFromMandate(selectedMandateId, userId);
+                  return result.success;
+                }
+                return false;
+              },
+            }}
+            idField="userId"
+            emptyMessage="Keine Mitglieder gefunden"
+          />
+        </div>
+      )}
+
+      {/* Add User Modal */}
+      {showAddModal && (
+        <div className={styles.modalOverlay} onClick={() => setShowAddModal(false)}>
+          <div className={styles.modal} onClick={e => e.stopPropagation()}>
+            <div className={styles.modalHeader}>
+              <h2 className={styles.modalTitle}>Benutzer zum Mandanten hinzufügen</h2>
+              <button
+                className={styles.modalClose}
+                onClick={() => setShowAddModal(false)}
+              >
+                ✕
+              </button>
+            </div>
+            <div className={styles.modalContent}>
+              {availableUsers.length === 0 ? (
+                <p>Alle Benutzer sind bereits diesem Mandanten zugewiesen.</p>
+              ) : roleOptions.length === 0 ? (
+                <div className={styles.loadingContainer}>
+                  <div className={styles.spinner} />
+                  <span>Lade Rollen...</span>
+                </div>
+              ) : (
+                <FormGeneratorForm
+                  attributes={addUserFields}
+                  mode="create"
+                  onSubmit={handleAddUser}
+                  onCancel={() => setShowAddModal(false)}
+                  submitButtonText="Hinzufügen"
+                  cancelButtonText="Abbrechen"
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Edit Roles Modal */}
+      {editingUser && (
+        <div className={styles.modalOverlay} onClick={() => setEditingUser(null)}>
+          <div className={styles.modal} onClick={e => e.stopPropagation()}>
+            <div className={styles.modalHeader}>
+              <h2 className={styles.modalTitle}>Rollen bearbeiten: {editingUser.username}</h2>
+              <button
+                className={styles.modalClose}
+                onClick={() => setEditingUser(null)}
+              >
+                ✕
+              </button>
+            </div>
+            <div className={styles.modalContent}>
+              <FormGeneratorForm
+                attributes={editRolesFields}
+                data={{ roleIds: editingUser.roleIds }}
+                mode="edit"
+                onSubmit={handleEditRoles}
+                onCancel={() => setEditingUser(null)}
+                submitButtonText="Speichern"
+                cancelButtonText="Abbrechen"
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdminUserMandatesPage;
diff --git a/src/pages/admin/AdminUsersPage.tsx b/src/pages/admin/AdminUsersPage.tsx
index 0d65e15..02f2f0c 100644
--- a/src/pages/admin/AdminUsersPage.tsx
+++ b/src/pages/admin/AdminUsersPage.tsx
@@ -46,22 +46,10 @@ export const AdminUsersPage: React.FC = () => {
 
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [editingUser, setEditingUser] = useState<User | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Generate columns from attributes
   const columns = useMemo(() => {
-    if (!attributes || attributes.length === 0) {
-      // Default columns if no attributes loaded
-      return [
-        { key: 'username', label: 'Benutzername', type: 'string' as const, sortable: true, filterable: true, searchable: true, width: 150 },
-        { key: 'email', label: 'E-Mail', type: 'string' as const, sortable: true, filterable: true, searchable: true, width: 200 },
-        { key: 'fullName', label: 'Voller Name', type: 'string' as const, sortable: true, filterable: true, searchable: true, width: 180 },
-        { key: 'enabled', label: 'Aktiv', type: 'boolean' as const, sortable: true, filterable: true, width: 80 },
-        { key: 'isSysAdmin', label: 'Admin', type: 'boolean' as const, sortable: true, filterable: true, width: 80 },
-      ];
-    }
-    
-    return attributes.map(attr => ({
+    return (attributes || []).map(attr => ({
       key: attr.name,
       label: attr.label || attr.name,
       type: attr.type as any,
@@ -71,6 +59,8 @@ export const AdminUsersPage: React.FC = () => {
       width: attr.width || 150,
       minWidth: attr.minWidth || 100,
       maxWidth: attr.maxWidth || 400,
+      fkSource: (attr as any).fkSource,
+      fkDisplayField: (attr as any).fkDisplayField,
     }));
   }, [attributes]);
 
@@ -89,30 +79,20 @@ export const AdminUsersPage: React.FC = () => {
 
   // Handle create submit
   const handleCreateSubmit = async (data: Partial<User>) => {
-    setIsSubmitting(true);
-    try {
-      const result = await createUser(data as Omit<User, 'id'>);
-      if (result.success) {
-        setShowCreateModal(false);
-        refetch(); // Refresh the list
-      }
-    } finally {
-      setIsSubmitting(false);
+    const result = await createUser(data as Omit<User, 'id'>);
+    if (result.success) {
+      setShowCreateModal(false);
+      refetch(); // Refresh the list
     }
   };
 
   // Handle edit submit
   const handleEditSubmit = async (data: Partial<User>) => {
     if (!editingUser) return;
-    setIsSubmitting(true);
-    try {
-      const result = await updateUser(editingUser.id, data);
-      if (result.success) {
-        setEditingUser(null);
-        refetch(); // Refresh the list
-      }
-    } finally {
-      setIsSubmitting(false);
+    const result = await updateUser(editingUser.id, data);
+    if (result.success) {
+      setEditingUser(null);
+      refetch(); // Refresh the list
     }
   };
 
@@ -131,31 +111,17 @@ export const AdminUsersPage: React.FC = () => {
     await handleSendPasswordLink(user.id);
   };
 
-  // Create form fields (using AttributeDefinition format)
-  const createFields = useMemo(() => [
-    { name: 'username', label: 'Benutzername', type: 'string' as const, required: true },
-    { name: 'email', label: 'E-Mail', type: 'email' as const, required: true },
-    { name: 'fullName', label: 'Voller Name', type: 'string' as const, required: true },
-    { name: 'language', label: 'Sprache', type: 'enum' as const, options: [
-      { value: 'de', label: 'Deutsch' },
-      { value: 'en', label: 'English' },
-    ]},
-    { name: 'enabled', label: 'Aktiv', type: 'boolean' as const },
-    { name: 'isSysAdmin', label: 'System-Administrator', type: 'boolean' as const },
-  ], []);
-
-  // Edit form fields (using AttributeDefinition format)
-  const editFields = useMemo(() => [
-    { name: 'username', label: 'Benutzername', type: 'string' as const, required: true, editable: false },
-    { name: 'email', label: 'E-Mail', type: 'email' as const, required: true },
-    { name: 'fullName', label: 'Voller Name', type: 'string' as const, required: true },
-    { name: 'language', label: 'Sprache', type: 'enum' as const, options: [
-      { value: 'de', label: 'Deutsch' },
-      { value: 'en', label: 'English' },
-    ]},
-    { name: 'enabled', label: 'Aktiv', type: 'boolean' as const },
-    { name: 'isSysAdmin', label: 'System-Administrator', type: 'boolean' as const },
-  ], []);
+  // Form attributes from backend - filter for create/edit forms
+  const formAttributes = useMemo(() => {
+    const excludedFields = ['id', 'hashedPassword', 'authenticationAuthority'];
+    return (attributes || [])
+      .filter(attr => !excludedFields.includes(attr.name))
+      .map(attr => ({
+        ...attr,
+        // Mark username as readonly for edit mode (will be handled by FormGeneratorForm)
+        editable: attr.name === 'username' ? false : attr.editable,
+      }));
+  }, [attributes]);
 
   if (error) {
     return (
@@ -278,14 +244,21 @@ export const AdminUsersPage: React.FC = () => {
               </button>
             </div>
             <div className={styles.modalContent}>
-              <FormGeneratorForm
-                attributes={createFields}
-                mode="create"
-                onSubmit={handleCreateSubmit}
-                onCancel={() => setShowCreateModal(false)}
-                submitButtonText="Erstellen"
-                cancelButtonText="Abbrechen"
-              />
+              {formAttributes.length === 0 ? (
+                <div className={styles.loadingContainer}>
+                  <div className={styles.spinner} />
+                  <span>Lade Formular...</span>
+                </div>
+              ) : (
+                <FormGeneratorForm
+                  attributes={formAttributes}
+                  mode="create"
+                  onSubmit={handleCreateSubmit}
+                  onCancel={() => setShowCreateModal(false)}
+                  submitButtonText="Erstellen"
+                  cancelButtonText="Abbrechen"
+                />
+              )}
             </div>
           </div>
         </div>
@@ -305,15 +278,22 @@ export const AdminUsersPage: React.FC = () => {
               </button>
             </div>
             <div className={styles.modalContent}>
-              <FormGeneratorForm
-                attributes={editFields}
-                data={editingUser}
-                mode="edit"
-                onSubmit={handleEditSubmit}
-                onCancel={() => setEditingUser(null)}
-                submitButtonText="Speichern"
-                cancelButtonText="Abbrechen"
-              />
+              {formAttributes.length === 0 ? (
+                <div className={styles.loadingContainer}>
+                  <div className={styles.spinner} />
+                  <span>Lade Formular...</span>
+                </div>
+              ) : (
+                <FormGeneratorForm
+                  attributes={formAttributes}
+                  data={editingUser}
+                  mode="edit"
+                  onSubmit={handleEditSubmit}
+                  onCancel={() => setEditingUser(null)}
+                  submitButtonText="Speichern"
+                  cancelButtonText="Abbrechen"
+                />
+              )}
             </div>
           </div>
         </div>
diff --git a/src/pages/admin/index.ts b/src/pages/admin/index.ts
index 442a8e5..f896a5d 100644
--- a/src/pages/admin/index.ts
+++ b/src/pages/admin/index.ts
@@ -7,3 +7,7 @@
 export { AdminMandatesPage } from './AdminMandatesPage';
 export { AdminUsersPage } from './AdminUsersPage';
 export { AdminRolesPage } from './AdminRolesPage';
+export { AdminUserMandatesPage } from './AdminUserMandatesPage';
+export { AdminFeatureAccessPage } from './AdminFeatureAccessPage';
+export { AdminInvitationsPage } from './AdminInvitationsPage';
+export { AdminMandateRolesPage } from './AdminMandateRolesPage';
\ No newline at end of file