463 lines
16 KiB
React
463 lines
16 KiB
React
|
import { useState, useEffect } from 'react'
|
||
|
|
import { Save, Plus, Edit2, Trash2, X } from 'lucide-react'
|
||
|
|
import { api } from '../utils/api'
|
||
|
|
|
||
|
|
export default function AdminFeaturesPage() {
|
||
|
|
const [loading, setLoading] = useState(true)
|
||
|
|
const [error, setError] = useState('')
|
||
|
|
const [success, setSuccess] = useState('')
|
||
|
|
const [features, setFeatures] = useState([])
|
||
|
|
const [editingId, setEditingId] = useState(null)
|
||
|
|
const [showAddForm, setShowAddForm] = useState(false)
|
||
|
|
const [formData, setFormData] = useState({
|
||
|
|
id: '',
|
||
|
|
name: '',
|
||
|
|
category: 'data',
|
||
|
|
description: '',
|
||
|
|
unit: 'count',
|
||
|
|
limit_type: 'count',
|
||
|
|
default_limit: '',
|
||
|
|
reset_period: 'never',
|
||
|
|
visible_in_admin: true,
|
||
|
|
sort_order: 50,
|
||
|
|
active: true
|
||
|
|
})
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
loadFeatures()
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
async function loadFeatures() {
|
||
|
|
try {
|
||
|
|
setLoading(true)
|
||
|
|
const data = await api.listFeatures()
|
||
|
|
setFeatures(data)
|
||
|
|
setError('')
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function resetForm() {
|
||
|
|
setFormData({
|
||
|
|
id: '',
|
||
|
|
name: '',
|
||
|
|
category: 'data',
|
||
|
|
description: '',
|
||
|
|
unit: 'count',
|
||
|
|
limit_type: 'count',
|
||
|
|
default_limit: '',
|
||
|
|
reset_period: 'never',
|
||
|
|
visible_in_admin: true,
|
||
|
|
sort_order: 50,
|
||
|
|
active: true
|
||
|
|
})
|
||
|
|
setEditingId(null)
|
||
|
|
setShowAddForm(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
function startEdit(feature) {
|
||
|
|
setFormData({
|
||
|
|
id: feature.id,
|
||
|
|
name: feature.name,
|
||
|
|
category: feature.category,
|
||
|
|
description: feature.description || '',
|
||
|
|
unit: feature.unit || 'count',
|
||
|
|
limit_type: feature.limit_type,
|
||
|
|
default_limit: feature.default_limit === null ? '' : feature.default_limit,
|
||
|
|
reset_period: feature.reset_period,
|
||
|
|
visible_in_admin: feature.visible_in_admin,
|
||
|
|
sort_order: feature.sort_order || 50,
|
||
|
|
active: feature.active
|
||
|
|
})
|
||
|
|
setEditingId(feature.id)
|
||
|
|
setShowAddForm(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleSave() {
|
||
|
|
try {
|
||
|
|
setError('')
|
||
|
|
setSuccess('')
|
||
|
|
|
||
|
|
// Validation
|
||
|
|
if (!formData.name.trim()) {
|
||
|
|
setError('Name erforderlich')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
const payload = {
|
||
|
|
name: formData.name.trim(),
|
||
|
|
category: formData.category,
|
||
|
|
description: formData.description.trim(),
|
||
|
|
unit: formData.unit,
|
||
|
|
limit_type: formData.limit_type,
|
||
|
|
default_limit: formData.default_limit === '' ? null : parseInt(formData.default_limit),
|
||
|
|
reset_period: formData.reset_period,
|
||
|
|
visible_in_admin: formData.visible_in_admin,
|
||
|
|
sort_order: formData.sort_order,
|
||
|
|
active: formData.active
|
||
|
|
}
|
||
|
|
|
||
|
|
if (editingId) {
|
||
|
|
// Update existing
|
||
|
|
await api.updateFeature(editingId, payload)
|
||
|
|
setSuccess('Feature aktualisiert')
|
||
|
|
} else {
|
||
|
|
// Create new
|
||
|
|
if (!formData.id.trim()) {
|
||
|
|
setError('ID erforderlich')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
payload.id = formData.id.trim()
|
||
|
|
await api.createFeature(payload)
|
||
|
|
setSuccess('Feature erstellt')
|
||
|
|
}
|
||
|
|
|
||
|
|
await loadFeatures()
|
||
|
|
resetForm()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleDelete(featureId) {
|
||
|
|
if (!confirm('Feature wirklich löschen?')) return
|
||
|
|
try {
|
||
|
|
setError('')
|
||
|
|
await api.deleteFeature(featureId)
|
||
|
|
setSuccess('Feature gelöscht')
|
||
|
|
await loadFeatures()
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (loading) return (
|
||
|
|
<div style={{ display: 'flex', justifyContent: 'center', padding: 40 }}>
|
||
|
|
<div className="spinner" />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
|
||
|
|
const categoryOptions = [
|
||
|
|
{ value: 'data', label: 'Daten' },
|
||
|
|
{ value: 'ai', label: 'KI' },
|
||
|
|
{ value: 'export', label: 'Export' },
|
||
|
|
{ value: 'integration', label: 'Integrationen' }
|
||
|
|
]
|
||
|
|
|
||
|
|
const resetPeriodOptions = [
|
||
|
|
{ value: 'never', label: 'Nie' },
|
||
|
|
{ value: 'daily', label: 'Täglich' },
|
||
|
|
{ value: 'monthly', label: 'Monatlich' }
|
||
|
|
]
|
||
|
|
|
||
|
|
const limitTypeOptions = [
|
||
|
|
{ value: 'count', label: 'Anzahl (Count)' },
|
||
|
|
{ value: 'boolean', label: 'Ja/Nein (Boolean)' }
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ paddingBottom: 80 }}>
|
||
|
|
{/* Header */}
|
||
|
|
<div style={{
|
||
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||
|
|
marginBottom: 20
|
||
|
|
}}>
|
||
|
|
<div>
|
||
|
|
<div style={{ fontSize: 20, fontWeight: 700, color: 'var(--text1)' }}>
|
||
|
|
Feature-Registry
|
||
|
|
</div>
|
||
|
|
<div style={{ fontSize: 13, color: 'var(--text3)', marginTop: 4 }}>
|
||
|
|
Verfügbare Features verwalten
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{!showAddForm && !editingId && (
|
||
|
|
<button
|
||
|
|
className="btn btn-primary"
|
||
|
|
onClick={() => setShowAddForm(true)}
|
||
|
|
>
|
||
|
|
<Plus size={16} /> Neues Feature
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</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>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Add/Edit Form */}
|
||
|
|
{(showAddForm || editingId) && (
|
||
|
|
<div className="card" style={{ padding: 20, marginBottom: 20 }}>
|
||
|
|
<div style={{
|
||
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||
|
|
marginBottom: 16
|
||
|
|
}}>
|
||
|
|
<div style={{ fontSize: 16, fontWeight: 600 }}>
|
||
|
|
{editingId ? 'Feature bearbeiten' : 'Neues Feature erstellen'}
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
className="btn btn-secondary"
|
||
|
|
onClick={resetForm}
|
||
|
|
style={{ padding: '6px 12px' }}
|
||
|
|
>
|
||
|
|
<X size={16} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style={{ display: 'grid', gap: 12 }}>
|
||
|
|
{/* ID (nur bei Neuanlage) */}
|
||
|
|
{!editingId && (
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">ID (Slug) *</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={formData.id}
|
||
|
|
onChange={(e) => setFormData({ ...formData, id: e.target.value })}
|
||
|
|
placeholder="z.B. weight_entries"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Name */}
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Name *</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={formData.name}
|
||
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||
|
|
placeholder="z.B. Gewichtseinträge"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Category + Limit Type */}
|
||
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Kategorie</label>
|
||
|
|
<select
|
||
|
|
className="form-input"
|
||
|
|
value={formData.category}
|
||
|
|
onChange={(e) => setFormData({ ...formData, category: e.target.value })}
|
||
|
|
>
|
||
|
|
{categoryOptions.map(o => (
|
||
|
|
<option key={o.value} value={o.value}>{o.label}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Typ</label>
|
||
|
|
<select
|
||
|
|
className="form-input"
|
||
|
|
value={formData.limit_type}
|
||
|
|
onChange={(e) => setFormData({ ...formData, limit_type: e.target.value })}
|
||
|
|
>
|
||
|
|
{limitTypeOptions.map(o => (
|
||
|
|
<option key={o.value} value={o.value}>{o.label}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Description */}
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Beschreibung</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={formData.description}
|
||
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||
|
|
placeholder="Optionale Beschreibung"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Unit + Reset Period */}
|
||
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Einheit</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
value={formData.unit}
|
||
|
|
onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
|
||
|
|
placeholder="z.B. count, calls"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Reset-Periode</label>
|
||
|
|
<select
|
||
|
|
className="form-input"
|
||
|
|
value={formData.reset_period}
|
||
|
|
onChange={(e) => setFormData({ ...formData, reset_period: e.target.value })}
|
||
|
|
>
|
||
|
|
{resetPeriodOptions.map(o => (
|
||
|
|
<option key={o.value} value={o.value}>{o.label}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Default Limit + Sort Order */}
|
||
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Standard-Limit</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
type="number"
|
||
|
|
value={formData.default_limit}
|
||
|
|
onChange={(e) => setFormData({ ...formData, default_limit: e.target.value })}
|
||
|
|
placeholder="Leer = unbegrenzt"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="form-row">
|
||
|
|
<label className="form-label">Sortierung</label>
|
||
|
|
<input
|
||
|
|
className="form-input"
|
||
|
|
type="number"
|
||
|
|
value={formData.sort_order}
|
||
|
|
onChange={(e) => setFormData({ ...formData, sort_order: parseInt(e.target.value) || 50 })}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Checkboxes */}
|
||
|
|
<div style={{ display: 'flex', gap: 16 }}>
|
||
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13 }}>
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={formData.visible_in_admin}
|
||
|
|
onChange={(e) => setFormData({ ...formData, visible_in_admin: e.target.checked })}
|
||
|
|
/>
|
||
|
|
Im Admin sichtbar
|
||
|
|
</label>
|
||
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13 }}>
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={formData.active}
|
||
|
|
onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
|
||
|
|
/>
|
||
|
|
Aktiv
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Actions */}
|
||
|
|
<div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
|
||
|
|
<button className="btn btn-primary" onClick={handleSave}>
|
||
|
|
<Save size={14} /> {editingId ? 'Aktualisieren' : 'Erstellen'}
|
||
|
|
</button>
|
||
|
|
<button className="btn btn-secondary" onClick={resetForm}>
|
||
|
|
Abbrechen
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Features List */}
|
||
|
|
<div className="card" style={{ padding: 0, overflow: 'auto' }}>
|
||
|
|
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
|
||
|
|
<thead>
|
||
|
|
<tr style={{ background: 'var(--surface2)' }}>
|
||
|
|
<th style={{ textAlign: 'left', padding: '12px 16px', fontWeight: 600 }}>Name</th>
|
||
|
|
<th style={{ textAlign: 'left', padding: '12px 16px', fontWeight: 600 }}>ID</th>
|
||
|
|
<th style={{ textAlign: 'left', padding: '12px 16px', fontWeight: 600 }}>Kategorie</th>
|
||
|
|
<th style={{ textAlign: 'center', padding: '12px 16px', fontWeight: 600 }}>Typ</th>
|
||
|
|
<th style={{ textAlign: 'center', padding: '12px 16px', fontWeight: 600 }}>Reset</th>
|
||
|
|
<th style={{ textAlign: 'center', padding: '12px 16px', fontWeight: 600 }}>Std-Limit</th>
|
||
|
|
<th style={{ textAlign: 'center', padding: '12px 16px', fontWeight: 600 }}>Aktiv</th>
|
||
|
|
<th style={{ textAlign: 'right', padding: '12px 16px', fontWeight: 600 }}>Aktionen</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{features.length === 0 && (
|
||
|
|
<tr>
|
||
|
|
<td colSpan={8} style={{ textAlign: 'center', padding: 40, color: 'var(--text3)' }}>
|
||
|
|
Keine Features vorhanden
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
)}
|
||
|
|
{features.map((feature, idx) => (
|
||
|
|
<tr
|
||
|
|
key={feature.id}
|
||
|
|
style={{
|
||
|
|
borderBottom: idx === features.length - 1 ? 'none' : '1px solid var(--border)',
|
||
|
|
background: feature.active ? 'transparent' : 'var(--surface)'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<td style={{ padding: '12px 16px', fontWeight: 500 }}>
|
||
|
|
{feature.name}
|
||
|
|
{feature.description && (
|
||
|
|
<div style={{ fontSize: 11, color: 'var(--text3)', marginTop: 2 }}>
|
||
|
|
{feature.description}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</td>
|
||
|
|
<td style={{ padding: '12px 16px', fontSize: 11, color: 'var(--text3)', fontFamily: 'monospace' }}>
|
||
|
|
{feature.id}
|
||
|
|
</td>
|
||
|
|
<td style={{ padding: '12px 16px' }}>
|
||
|
|
<span style={{
|
||
|
|
padding: '2px 8px', borderRadius: 4, fontSize: 11,
|
||
|
|
background: 'var(--accent-light)', color: 'var(--accent-dark)', fontWeight: 600
|
||
|
|
}}>
|
||
|
|
{feature.category}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td style={{ padding: '12px 16px', textAlign: 'center', fontSize: 11 }}>
|
||
|
|
{feature.limit_type === 'boolean' ? '✓/✗' : '123'}
|
||
|
|
</td>
|
||
|
|
<td style={{ padding: '12px 16px', textAlign: 'center', fontSize: 11, color: 'var(--text3)' }}>
|
||
|
|
{feature.reset_period}
|
||
|
|
</td>
|
||
|
|
<td style={{ padding: '12px 16px', textAlign: 'center', fontWeight: 500 }}>
|
||
|
|
{feature.default_limit === null ? '∞' : feature.default_limit}
|
||
|
|
</td>
|
||
|
|
<td style={{ padding: '12px 16px', textAlign: 'center' }}>
|
||
|
|
{feature.active ? (
|
||
|
|
<span style={{ color: 'var(--accent)' }}>✓</span>
|
||
|
|
) : (
|
||
|
|
<span style={{ color: 'var(--text3)' }}>✗</span>
|
||
|
|
)}
|
||
|
|
</td>
|
||
|
|
<td style={{ padding: '12px 16px', textAlign: 'right' }}>
|
||
|
|
<div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
|
||
|
|
<button
|
||
|
|
className="btn btn-secondary"
|
||
|
|
onClick={() => startEdit(feature)}
|
||
|
|
style={{ padding: '4px 8px', fontSize: 11 }}
|
||
|
|
>
|
||
|
|
<Edit2 size={12} />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
className="btn btn-secondary"
|
||
|
|
onClick={() => handleDelete(feature.id)}
|
||
|
|
style={{ padding: '4px 8px', fontSize: 11, color: 'var(--danger)' }}
|
||
|
|
>
|
||
|
|
<Trash2 size={12} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|