From 72d8dd8df72fed980794919f715909c9d37f0d9b Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Fri, 20 Mar 2026 07:59:49 +0100
Subject: [PATCH] feat: add AdminUserRestrictionsPage for individual user
 overrides

Per-user feature limit overrides:
- Select user from dropdown (shows tier)
- View all features with tier limits
- Set individual overrides that supersede tier limits
- Toggle buttons for boolean features
- Text inputs for count features
- Remove overrides to revert to tier limits

Features:
- User info card (avatar, name, email, tier)
- Feature table grouped by category
- Visual indicators for active overrides
- Change tracking with fixed bottom save bar
- Conditional rendering based on limit type
- Info box explaining override priority

UX improvements:
- Clear "Tier-Limit" vs "Override" columns
- Active/Inactive status per feature
- Batch save with change counter
- Confirmation before removing overrides
- Legend for input values

Use cases:
- Beta testers with extended limits
- Support requests for special access
- Temporary feature grants
- Custom enterprise configurations

Integrated in AdminPanel navigation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/App.jsx                          |   2 +
 frontend/src/pages/AdminPanel.jsx             |   5 +
 .../src/pages/AdminUserRestrictionsPage.jsx   | 447 ++++++++++++++++++
 3 files changed, 454 insertions(+)
 create mode 100644 frontend/src/pages/AdminUserRestrictionsPage.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 6823627..babf3c0 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -24,6 +24,7 @@ import AdminTierLimitsPage from './pages/AdminTierLimitsPage'
 import AdminFeaturesPage from './pages/AdminFeaturesPage'
 import AdminTiersPage from './pages/AdminTiersPage'
 import AdminCouponsPage from './pages/AdminCouponsPage'
+import AdminUserRestrictionsPage from './pages/AdminUserRestrictionsPage'
 import './app.css'
 
 function Nav() {
@@ -123,6 +124,7 @@ function AppShell() {
           <Route path="/admin/features" element={<AdminFeaturesPage/>}/>
           <Route path="/admin/tiers" element={<AdminTiersPage/>}/>
           <Route path="/admin/coupons" element={<AdminCouponsPage/>}/>
+          <Route path="/admin/user-restrictions" element={<AdminUserRestrictionsPage/>}/>
         </Routes>
       </main>
       <Nav/>
diff --git a/frontend/src/pages/AdminPanel.jsx b/frontend/src/pages/AdminPanel.jsx
index b8af92e..026178d 100644
--- a/frontend/src/pages/AdminPanel.jsx
+++ b/frontend/src/pages/AdminPanel.jsx
@@ -428,6 +428,11 @@ export default function AdminPanel() {
               🎟️ Coupons verwalten
             </button>
           </Link>
+          <Link to="/admin/user-restrictions">
+            <button className="btn btn-secondary btn-full">
+              👤 User Feature-Overrides
+            </button>
+          </Link>
         </div>
       </div>
     </div>
diff --git a/frontend/src/pages/AdminUserRestrictionsPage.jsx b/frontend/src/pages/AdminUserRestrictionsPage.jsx
new file mode 100644
index 0000000..4f7a57d
--- /dev/null
+++ b/frontend/src/pages/AdminUserRestrictionsPage.jsx
@@ -0,0 +1,447 @@
+import { useState, useEffect } from 'react'
+import { Save, User, AlertCircle, X } from 'lucide-react'
+import { api } from '../utils/api'
+
+export default function AdminUserRestrictionsPage() {
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [success, setSuccess] = useState('')
+  const [users, setUsers] = useState([])
+  const [features, setFeatures] = useState([])
+  const [selectedUserId, setSelectedUserId] = useState('')
+  const [selectedUser, setSelectedUser] = useState(null)
+  const [restrictions, setRestrictions] = useState([])
+  const [changes, setChanges] = useState({})
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    loadInitialData()
+  }, [])
+
+  useEffect(() => {
+    if (selectedUserId) {
+      loadUserData(selectedUserId)
+    }
+  }, [selectedUserId])
+
+  async function loadInitialData() {
+    try {
+      setLoading(true)
+      const [usersData, featuresData] = await Promise.all([
+        api.adminListProfiles(),
+        api.listFeatures()
+      ])
+      setUsers(usersData)
+      setFeatures(featuresData.filter(f => f.active))
+      setError('')
+    } catch (e) {
+      setError(e.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function loadUserData(userId) {
+    try {
+      const [user, restrictionsData] = await Promise.all([
+        api.adminListProfiles().then(users => users.find(u => u.id === userId)),
+        api.listUserRestrictions(userId)
+      ])
+      setSelectedUser(user)
+      setRestrictions(restrictionsData)
+      setChanges({})
+      setError('')
+    } catch (e) {
+      setError(e.message)
+    }
+  }
+
+  function handleChange(featureId, value, enabled) {
+    const key = featureId
+    const newChanges = { ...changes }
+
+    // Parse value
+    let parsedValue = null
+    if (value === '' || value === 'unlimited' || value === '∞') {
+      parsedValue = null // unlimited
+    } else if (value === '0' || value === 'disabled') {
+      parsedValue = 0 // disabled
+    } else {
+      const num = parseInt(value)
+      if (!isNaN(num) && num >= 0) {
+        parsedValue = num
+      } else {
+        return // invalid input
+      }
+    }
+
+    newChanges[key] = { featureId, value: parsedValue, enabled }
+    setChanges(newChanges)
+  }
+
+  function toggleEnabled(featureId) {
+    const restriction = restrictions.find(r => r.feature_id === featureId)
+    const currentEnabled = restriction ? restriction.enabled : true
+    const currentValue = restriction ? restriction.limit_value : null
+
+    handleChange(featureId, currentValue === null ? '' : currentValue, !currentEnabled)
+  }
+
+  async function handleSave() {
+    if (!selectedUserId) return
+
+    try {
+      setSaving(true)
+      setError('')
+      setSuccess('')
+
+      // Process changes
+      for (const [featureId, change] of Object.entries(changes)) {
+        const existingRestriction = restrictions.find(r => r.feature_id === featureId)
+
+        if (existingRestriction) {
+          // Update existing restriction
+          await api.updateUserRestriction(existingRestriction.id, {
+            limit_value: change.value,
+            enabled: change.enabled
+          })
+        } else {
+          // Create new restriction
+          await api.createUserRestriction({
+            profile_id: selectedUserId,
+            feature_id: featureId,
+            limit_value: change.value,
+            enabled: change.enabled,
+            reason: 'Admin override'
+          })
+        }
+      }
+
+      setSuccess(`${Object.keys(changes).length} Overrides gespeichert`)
+      await loadUserData(selectedUserId)
+    } catch (e) {
+      setError(e.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleRemoveRestriction(featureId) {
+    if (!confirm('Override wirklich entfernen? User erhält dann das Standard-Tier-Limit.')) return
+
+    try {
+      const restriction = restrictions.find(r => r.feature_id === featureId)
+      if (restriction) {
+        await api.deleteUserRestriction(restriction.id)
+        setSuccess('Override entfernt')
+        await loadUserData(selectedUserId)
+        // Remove from changes if exists
+        const newChanges = { ...changes }
+        delete newChanges[featureId]
+        setChanges(newChanges)
+      }
+    } catch (e) {
+      setError(e.message)
+    }
+  }
+
+  function getCurrentValue(featureId) {
+    // Check if there's a pending change
+    if (featureId in changes) {
+      return changes[featureId].value
+    }
+
+    // Check existing restriction
+    const restriction = restrictions.find(r => r.feature_id === featureId)
+    return restriction ? restriction.limit_value : null
+  }
+
+  function isEnabled(featureId) {
+    if (featureId in changes) {
+      return changes[featureId].enabled
+    }
+
+    const restriction = restrictions.find(r => r.feature_id === featureId)
+    return restriction ? restriction.enabled : true
+  }
+
+  function hasRestriction(featureId) {
+    return restrictions.some(r => r.feature_id === featureId)
+  }
+
+  function formatValue(val) {
+    if (val === null || val === undefined) return ''
+    return val.toString()
+  }
+
+  if (loading) return (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: 40 }}>
+      <div className="spinner" />
+    </div>
+  )
+
+  const hasChanges = Object.keys(changes).length > 0
+  const categoryGroups = {}
+  features.forEach(f => {
+    if (!categoryGroups[f.category]) categoryGroups[f.category] = []
+    categoryGroups[f.category].push(f)
+  })
+
+  const categoryIcons = { data: '📊', ai: '🤖', export: '📤', integration: '🔗' }
+  const categoryNames = { data: 'DATEN', ai: 'KI', export: 'EXPORT', integration: 'INTEGRATIONEN' }
+
+  return (
+    <div style={{ paddingBottom: 80 }}>
+      {/* Header */}
+      <div style={{ marginBottom: 20 }}>
+        <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text1)' }}>
+          User Feature-Overrides
+        </div>
+        <div style={{ fontSize: 13, color: 'var(--text3)', marginTop: 4 }}>
+          Individuelle Feature-Limits für einzelne User setzen
+        </div>
+      </div>
+
+      {/* Info Box */}
+      <div style={{
+        padding: 12, background: 'var(--accent-light)', borderRadius: 8,
+        marginBottom: 16, fontSize: 12, color: 'var(--accent-dark)',
+        display: 'flex', gap: 8, alignItems: 'flex-start'
+      }}>
+        <AlertCircle size={16} style={{ marginTop: 2, flexShrink: 0 }} />
+        <div>
+          <strong>Hinweis:</strong> User-Overrides haben höchste Priorität und überschreiben Tier-Limits.
+          Nutze dies sparsam für Sonderfälle (z.B. Beta-Tester, Support-Anfragen).
+        </div>
+      </div>
+
+      {/* Messages */}
+      {error && (
+        <div style={{
+          padding: 12, background: 'var(--danger)', color: 'white',
+          borderRadius: 8, marginBottom: 16, fontSize: 14
+        }}>
+          {error}
+        </div>
+      )}
+      {success && (
+        <div style={{
+          padding: 12, background: 'var(--accent)', color: 'white',
+          borderRadius: 8, marginBottom: 16, fontSize: 14
+        }}>
+          {success}
+        </div>
+      )}
+
+      {/* User Selection */}
+      <div className="card" style={{ padding: 16, marginBottom: 16 }}>
+        <label className="form-label" style={{ display: 'block', marginBottom: 8 }}>
+          User auswählen
+        </label>
+        <select
+          className="form-input"
+          style={{ width: '100%' }}
+          value={selectedUserId}
+          onChange={(e) => setSelectedUserId(e.target.value)}
+        >
+          <option value="">-- User auswählen --</option>
+          {users.map(u => (
+            <option key={u.id} value={u.id}>
+              {u.name} ({u.email || u.id}) - Tier: {u.tier || 'free'}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* User Info + Features */}
+      {selectedUser && (
+        <>
+          {/* User Info Card */}
+          <div className="card" style={{ padding: 16, marginBottom: 16 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+              <div style={{
+                width: 40, height: 40, borderRadius: '50%',
+                background: selectedUser.avatar_color || 'var(--accent)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                color: 'white', fontWeight: 700, fontSize: 18
+              }}>
+                {selectedUser.name?.charAt(0).toUpperCase()}
+              </div>
+              <div style={{ flex: 1 }}>
+                <div style={{ fontWeight: 600, fontSize: 14 }}>{selectedUser.name}</div>
+                <div style={{ fontSize: 12, color: 'var(--text3)' }}>
+                  {selectedUser.email || `ID: ${selectedUser.id}`}
+                </div>
+              </div>
+              <div style={{
+                padding: '4px 12px', borderRadius: 6,
+                background: 'var(--accent-light)', color: 'var(--accent-dark)',
+                fontSize: 12, fontWeight: 600
+              }}>
+                Tier: {selectedUser.tier || 'free'}
+              </div>
+            </div>
+          </div>
+
+          {/* Features List */}
+          <div className="card" style={{ padding: 0, overflow: 'auto', marginBottom: 16 }}>
+            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
+              <thead>
+                <tr style={{ background: 'var(--surface2)' }}>
+                  <th style={{ textAlign: 'left', padding: '12px 16px', fontWeight: 600 }}>Feature</th>
+                  <th style={{ textAlign: 'center', padding: '12px 16px', fontWeight: 600 }}>Tier-Limit</th>
+                  <th style={{ textAlign: 'center', padding: '12px 16px', fontWeight: 600 }}>Override</th>
+                  <th style={{ textAlign: 'center', padding: '12px 16px', fontWeight: 600 }}>Aktiv</th>
+                  <th style={{ textAlign: 'right', padding: '12px 16px', fontWeight: 600 }}>Aktion</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.entries(categoryGroups).map(([category, categoryFeatures]) => (
+                  <>
+                    {/* Category Header */}
+                    <tr key={`cat-${category}`} style={{ background: 'var(--accent-light)' }}>
+                      <td colSpan={5} style={{
+                        padding: '8px 16px', fontWeight: 600, fontSize: 11,
+                        textTransform: 'uppercase', letterSpacing: '0.5px',
+                        color: 'var(--accent-dark)'
+                      }}>
+                        {categoryIcons[category]} {categoryNames[category] || category}
+                      </td>
+                    </tr>
+
+                    {/* Feature Rows */}
+                    {categoryFeatures.map(feature => {
+                      const currentValue = getCurrentValue(feature.id)
+                      const enabled = isEnabled(feature.id)
+                      const hasOverride = hasRestriction(feature.id)
+                      const isChanged = feature.id in changes
+
+                      return (
+                        <tr key={feature.id} style={{
+                          borderBottom: '1px solid var(--border)',
+                          background: isChanged ? 'var(--accent-light)' : hasOverride ? 'var(--surface)' : 'transparent'
+                        }}>
+                          <td style={{ padding: '8px 16px' }}>
+                            <div style={{ fontWeight: 500 }}>{feature.name}</div>
+                            <div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 2 }}>
+                              {feature.limit_type === 'boolean' ? '(ja/nein)' : `(${feature.reset_period})`}
+                            </div>
+                          </td>
+                          <td style={{ padding: '8px 16px', textAlign: 'center', color: 'var(--text3)' }}>
+                            {/* TODO: Show actual tier limit - for now just show "Standard" */}
+                            Standard
+                          </td>
+                          <td style={{ padding: '8px 16px', textAlign: 'center' }}>
+                            {feature.limit_type === 'boolean' ? (
+                              <button
+                                onClick={() => toggleEnabled(feature.id)}
+                                style={{
+                                  padding: '6px 16px',
+                                  border: `2px solid ${enabled ? 'var(--accent)' : 'var(--border)'}`,
+                                  borderRadius: 20,
+                                  background: enabled ? 'var(--accent)' : 'var(--surface)',
+                                  color: enabled ? 'white' : 'var(--text3)',
+                                  fontSize: 12,
+                                  fontWeight: 600,
+                                  cursor: 'pointer',
+                                  transition: 'all 0.2s',
+                                  minWidth: 70
+                                }}
+                              >
+                                {enabled ? '✓ AN' : '✗ AUS'}
+                              </button>
+                            ) : (
+                              <input
+                                type="text"
+                                value={formatValue(currentValue)}
+                                onChange={(e) => handleChange(feature.id, e.target.value, enabled)}
+                                placeholder="∞"
+                                style={{
+                                  width: '80px',
+                                  padding: '6px 8px',
+                                  border: `1.5px solid ${isChanged ? 'var(--accent)' : hasOverride ? 'var(--border)' : 'var(--border)'}`,
+                                  borderRadius: 6,
+                                  textAlign: 'center',
+                                  fontSize: 13,
+                                  fontWeight: isChanged ? 600 : 400,
+                                  background: hasOverride ? 'var(--surface2)' : 'var(--bg)',
+                                  color: currentValue === 0 ? 'var(--danger)' :
+                                         currentValue === null ? 'var(--accent)' : 'var(--text1)'
+                                }}
+                              />
+                            )}
+                          </td>
+                          <td style={{ padding: '8px 16px', textAlign: 'center' }}>
+                            {hasOverride ? (
+                              <span style={{ color: 'var(--accent)', fontWeight: 600 }}>✓</span>
+                            ) : (
+                              <span style={{ color: 'var(--text3)' }}>-</span>
+                            )}
+                          </td>
+                          <td style={{ padding: '8px 16px', textAlign: 'right' }}>
+                            {hasOverride && (
+                              <button
+                                className="btn btn-secondary"
+                                onClick={() => handleRemoveRestriction(feature.id)}
+                                style={{ padding: '4px 8px', fontSize: 11, color: 'var(--danger)' }}
+                              >
+                                <X size={12} /> Entfernen
+                              </button>
+                            )}
+                          </td>
+                        </tr>
+                      )
+                    })}
+                  </>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Save Button */}
+          {hasChanges && (
+            <div style={{
+              position: 'fixed', bottom: 0, left: 0, right: 0,
+              background: 'var(--bg)', borderTop: '1px solid var(--border)',
+              padding: 16, display: 'flex', gap: 8, zIndex: 100,
+              boxShadow: '0 -2px 10px rgba(0,0,0,0.1)'
+            }}>
+              <button
+                className="btn btn-secondary"
+                onClick={() => setChanges({})}
+                disabled={saving}
+                style={{ flex: 1 }}
+              >
+                Zurücksetzen
+              </button>
+              <button
+                className="btn btn-primary"
+                onClick={handleSave}
+                disabled={saving}
+                style={{ flex: 2 }}
+              >
+                {saving ? '...' : `${Object.keys(changes).length} Overrides speichern`}
+              </button>
+            </div>
+          )}
+
+          {/* Legend */}
+          <div style={{
+            marginTop: 16, padding: 12, background: 'var(--surface2)',
+            borderRadius: 8, fontSize: 12, color: 'var(--text3)'
+          }}>
+            <strong>Eingabe:</strong>
+            <div style={{ marginTop: 8, display: 'flex', gap: 24, flexWrap: 'wrap' }}>
+              <span><strong style={{ color: 'var(--accent)' }}>leer oder ∞</strong> = Unbegrenzt</span>
+              <span><strong style={{ color: 'var(--danger)' }}>0</strong> = Deaktiviert</span>
+              <span><strong>1-999999</strong> = Limit-Wert</span>
+            </div>
+            <div style={{ marginTop: 8 }}>
+              <strong>✓ Aktiv</strong> = Override gesetzt, überschreibt Tier-Limit
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}