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>
This commit is contained in:
parent
18991025bf
commit
72d8dd8df7
|
|
@ -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/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
447
frontend/src/pages/AdminUserRestrictionsPage.jsx
Normal file
447
frontend/src/pages/AdminUserRestrictionsPage.jsx
Normal file
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user