s.gruessing/IT-Nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add: Lizenzpreise, Rollen-Picker, Audit-Log Fix, Ticket Benutzerfilter

Browse Source
This commit is contained in:
Simon Grüssing
2026-06-03 09:29:30 +02:00
parent 222b9c6fc8
commit 859ab6b28d
7 changed files with 394 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
frontend/src/pages/SettingsPage.jsx
View File

@@ -29,6 +29,14 @@ const COMMON_ICONS = ['📋', '💻', '🖥️', '🌐', '📊', '🖨️', '
export default function SettingsPage() {
const [tab, setTab] = useState('categories');
// ── License prices state ──────────────────────────────────────────────────
const [licPrices, setLicPrices] = useState([]);
const [licLoading, setLicLoading] = useState(false);
const [licEditId, setLicEditId] = useState(null);
const [licEditRow, setLicEditRow] = useState({});
const [licNewForm, setLicNewForm] = useState(null); // null | { sku_part_number, display_name, price_per_month }
const [licSaving, setLicSaving] = useState(false);
// ── Categories state ──────────────────────────────────────────────────────
const [categories, setCategories] = useState([]);
const [catModal, setCatModal] = useState(null); // null | { id?, name, icon }
@@ -78,8 +86,24 @@ export default function SettingsPage() {
setDesignDraft(res.data);
}, []);
const loadLicPrices = useCallback(async () => {
setLicLoading(true);
try {
const apiUrl = process.env.REACT_APP_API_URL || '/api';
const token = localStorage.getItem('token');
const res = await fetch(`${apiUrl}/license-prices`, {
headers: { Authorization: `Bearer ${token}` },
});
const json = await res.json();
setLicPrices(json.data || []);
} catch (_) {}
setLicLoading(false);
}, []);
useEffect(() => { loadCategories(); loadTemplates(); loadEmailTpls(); loadEmailDesign(); }, [loadCategories, loadTemplates, loadEmailTpls, loadEmailDesign]);
useEffect(() => { if (tab === 'license-prices') loadLicPrices(); }, [tab, loadLicPrices]);
// Fetch preview when designDraft or previewType changes
useEffect(() => {
if (!designDraft) return;
@@ -184,6 +208,49 @@ export default function SettingsPage() {
const setDraft = (key, val) => setDesignDraft(d => ({ ...d, [key]: val }));
// ── License price CRUD ────────────────────────────────────────────────────
const licAuthFetch = (url, opts = {}) => {
const token = localStorage.getItem('token');
const apiUrl = process.env.REACT_APP_API_URL || '/api';
return fetch(`${apiUrl}${url}`, {
...opts,
headers: { ...(opts.headers || {}), Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
});
};
const saveLicEdit = async () => {
setLicSaving(true);
try {
await licAuthFetch(`/license-prices/${licEditId}`, {
method: 'PUT',
body: JSON.stringify(licEditRow),
});
setLicEditId(null);
await loadLicPrices();
} catch (_) { alert('Fehler beim Speichern'); }
setLicSaving(false);
};
const saveLicNew = async () => {
if (!licNewForm?.sku_part_number?.trim() || !licNewForm?.display_name?.trim()) return;
setLicSaving(true);
try {
await licAuthFetch('/license-prices', {
method: 'POST',
body: JSON.stringify(licNewForm),
});
setLicNewForm(null);
await loadLicPrices();
} catch (_) { alert('Fehler beim Erstellen'); }
setLicSaving(false);
};
const deleteLicPrice = async (id, name) => {
if (!window.confirm(`Lizenzpreis „${name}" wirklich löschen?`)) return;
await licAuthFetch(`/license-prices/${id}`, { method: 'DELETE' });
await loadLicPrices();
};
// ── Email template CRUD ───────────────────────────────────────────────────
const saveEmailTpl = async () => {
@@ -313,6 +380,7 @@ export default function SettingsPage() {
{ key: 'email-templates', label: '📧 E-Mail-Vorlagen' },
{ key: 'email-design', label: '🎨 E-Mail-Design' },
{ key: 'cronjobs', label: '⏰ Cronjobs' },
{ key: 'license-prices', label: '💰 Lizenzpreise' },
].map(t => (
<button key={t.key} onClick={() => setTab(t.key)} style={{
background: 'none',
@@ -435,6 +503,148 @@ export default function SettingsPage() {
{/* ── CRONJOBS TAB ──────────────────────────────────────────────── */}
{tab === 'cronjobs' && <CronJobsTab />}
{/* ── LICENSE PRICES TAB ───────────────────────────────────────── */}
{tab === 'license-prices' && (
<div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
<p style={{ margin: 0, color: 'var(--text-muted)', fontSize: '13px' }}>
{licPrices.length} Einträge · Preise werden in der Benutzerverwaltung bei Lizenzen angezeigt
</p>
<button style={btnPrimary} onClick={() => setLicNewForm({ sku_part_number: '', display_name: '', price_per_month: '' })}>
+ Neue Lizenz
</button>
</div>
{/* Neues Lizenz-Formular */}
{licNewForm && (
<div style={{ ...card, background: 'var(--bg-secondary)', marginBottom: '16px', border: '1px solid var(--cereda-primary)' }}>
<div style={{ fontWeight: 700, fontSize: '14px', color: 'var(--text-primary)', marginBottom: '12px' }}>➕ Neue Lizenz</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr 120px auto', gap: '10px', alignItems: 'end' }}>
<div>
<label style={{ fontSize: '12px', color: 'var(--text-muted)', display: 'block', marginBottom: '4px' }}>SKU Part Number*</label>
<input
className="form-input"
value={licNewForm.sku_part_number}
onChange={e => setLicNewForm(f => ({ ...f, sku_part_number: e.target.value }))}
placeholder="z.B. SPE_E3"
style={{ fontSize: '13px' }}
/>
</div>
<div>
<label style={{ fontSize: '12px', color: 'var(--text-muted)', display: 'block', marginBottom: '4px' }}>Anzeigename*</label>
<input
className="form-input"
value={licNewForm.display_name}
onChange={e => setLicNewForm(f => ({ ...f, display_name: e.target.value }))}
placeholder="z.B. Microsoft 365 E3"
style={{ fontSize: '13px' }}
/>
</div>
<div>
<label style={{ fontSize: '12px', color: 'var(--text-muted)', display: 'block', marginBottom: '4px' }}>€/Monat</label>
<input
className="form-input"
type="number"
step="0.01"
min="0"
value={licNewForm.price_per_month}
onChange={e => setLicNewForm(f => ({ ...f, price_per_month: e.target.value }))}
placeholder="0.00"
style={{ fontSize: '13px' }}
/>
</div>
<div style={{ display: 'flex', gap: '8px' }}>
<button style={btnPrimary} onClick={saveLicNew} disabled={licSaving || !licNewForm.sku_part_number?.trim() || !licNewForm.display_name?.trim()}>
{licSaving ? '…' : 'Speichern'}
</button>
<button style={btnOutline} onClick={() => setLicNewForm(null)}>✕</button>
</div>
</div>
</div>
)}
<div style={card}>
{licLoading ? (
<p style={{ color: 'var(--text-muted)', textAlign: 'center', margin: '32px 0' }}>Lädt…</p>
) : licPrices.length === 0 ? (
<p style={{ color: 'var(--text-muted)', textAlign: 'center', margin: '32px 0' }}>Keine Lizenzpreise vorhanden</p>
) : (
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '13px' }}>
<thead>
<tr style={{ borderBottom: '1px solid var(--border-color)' }}>
<th style={{ textAlign: 'left', padding: '8px 10px', color: 'var(--text-muted)', fontWeight: 600, fontSize: '12px' }}>SKU</th>
<th style={{ textAlign: 'left', padding: '8px 10px', color: 'var(--text-muted)', fontWeight: 600, fontSize: '12px' }}>Name</th>
<th style={{ textAlign: 'right', padding: '8px 10px', color: 'var(--text-muted)', fontWeight: 600, fontSize: '12px' }}>Preis/Monat</th>
<th style={{ padding: '8px 10px' }}></th>
</tr>
</thead>
<tbody>
{licPrices.map(p => (
<tr key={p.id} style={{ borderBottom: '1px solid var(--border-color)' }}>
{licEditId === p.id ? (
<>
<td style={{ padding: '6px 10px' }}>
<input
className="form-input"
value={licEditRow.sku_part_number ?? p.sku_part_number}
onChange={e => setLicEditRow(r => ({ ...r, sku_part_number: e.target.value }))}
style={{ fontSize: '12px', padding: '4px 8px' }}
/>
</td>
<td style={{ padding: '6px 10px' }}>
<input
className="form-input"
value={licEditRow.display_name ?? p.display_name}
onChange={e => setLicEditRow(r => ({ ...r, display_name: e.target.value }))}
style={{ fontSize: '12px', padding: '4px 8px', width: '100%' }}
/>
</td>
<td style={{ padding: '6px 10px' }}>
<input
className="form-input"
type="number"
step="0.01"
min="0"
value={licEditRow.price_per_month ?? p.price_per_month}
onChange={e => setLicEditRow(r => ({ ...r, price_per_month: e.target.value }))}
style={{ fontSize: '12px', padding: '4px 8px', textAlign: 'right' }}
/>
</td>
<td style={{ padding: '6px 10px', textAlign: 'right', whiteSpace: 'nowrap' }}>
<button style={{ ...btnPrimary, padding: '4px 10px', fontSize: '12px', marginRight: '6px' }} onClick={saveLicEdit} disabled={licSaving}>
{licSaving ? '…' : 'Speichern'}
</button>
<button style={{ ...btnOutline, padding: '4px 10px', fontSize: '12px' }} onClick={() => setLicEditId(null)}>Abbrechen</button>
</td>
</>
) : (
<>
<td style={{ padding: '8px 10px', color: 'var(--text-muted)', fontFamily: 'monospace', fontSize: '12px' }}>{p.sku_part_number}</td>
<td style={{ padding: '8px 10px', color: 'var(--text-primary)', fontWeight: 500 }}>{p.display_name}</td>
<td style={{ padding: '8px 10px', textAlign: 'right', color: p.price_per_month > 0 ? 'var(--success, #10b981)' : 'var(--text-muted)', fontWeight: 600 }}>
{p.price_per_month > 0
? new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(p.price_per_month)
: 'Kostenlos'}
</td>
<td style={{ padding: '8px 10px', textAlign: 'right', whiteSpace: 'nowrap' }}>
<button style={{ ...btnOutline, padding: '4px 10px', fontSize: '12px', marginRight: '6px' }} onClick={() => { setLicEditId(p.id); setLicEditRow({ display_name: p.display_name, price_per_month: p.price_per_month, sku_part_number: p.sku_part_number }); }}>
Bearbeiten
</button>
<button style={{ ...btnDanger, padding: '4px 10px', fontSize: '12px' }} onClick={() => deleteLicPrice(p.id, p.display_name)}>
Löschen
</button>
</td>
</>
)}
</tr>
))}
</tbody>
</table>
)}
</div>
</div>
)}
</div>{/* end constrained tab content */}
{/* ── EMAIL DESIGN TAB – full width ─────────────────────────────── */}

12
frontend/src/pages/TicketsPage.jsx
View File

@@ -199,7 +199,17 @@ const TicketsPage = () => {
useEffect(() => { loadAll(); }, [statusFilter, priorityFilter, categoryFilter, searchTerm, userFilter]);
useEffect(() => {
userService.getAll().then(setAllUsers).catch(() => {});
// Lade alle offenen Tickets um zu sehen wer aktive Tickets hat
Promise.all([
userService.getAll(),
ticketService.getAll({ status: 'offen' }),
ticketService.getAll({ status: 'in_bearbeitung' }),
]).then(([users, offen, inBearbeitung]) => {
const activeTickets = [...offen, ...inBearbeitung];
const activeUserIds = new Set(activeTickets.map(t => t.assigned_to_user_id).filter(Boolean));
const staffRoles = ['super_admin', 'admin', 'support', 'bearbeiter'];
setAllUsers(users.filter(u => staffRoles.includes(u.role_name) && activeUserIds.has(u.id)));
}).catch(() => {});
}, []);
// Auto-refresh alle 30 Sekunden

74
frontend/src/pages/UserManagementPage.jsx
View File

@@ -489,6 +489,10 @@ const LicensesTab = ({ user }) => {
return g;
}, [licenses]);
const totalCost = useMemo(() => {
return licenses.reduce((sum, lic) => sum + (lic.price_per_month ?? 0), 0);
}, [licenses]);
const getLicDisplay = (lic) => {
const key = Object.keys(SKU_DISPLAY).find(k => {
const part = k.includes(':') ? k.split(':')[1] : k;
@@ -512,8 +516,8 @@ const LicensesTab = ({ user }) => {
</div>
<div className="bv-lic-sum-item">
<div className="bv-lic-sum-label">Kosten pro Monat</div>
<div className="bv-lic-sum-value">—</div>
<div className="bv-lic-sum-sub">Preise in Entra konfigurierbar</div>
<div className="bv-lic-sum-value">{totalCost > 0 ? new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(totalCost) : '—'}</div>
<div className="bv-lic-sum-sub">{totalCost > 0 ? 'Basierend auf konfigurierten Preisen' : 'Preise unter Einstellungen konfigurieren'}</div>
</div>
<div className="bv-lic-sum-item">
<div className="bv-lic-sum-label">Verlängerung fällig</div>
@@ -539,7 +543,11 @@ const LicensesTab = ({ user }) => {
<div className="bv-lic-desc">{lic.skuInfo?.capabilityStatus || 'Enabled'}</div>
</div>
<div>
<div className="bv-lic-price">—</div>
<div className="bv-lic-price">
{lic.price_per_month != null
? new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(lic.price_per_month)
: '—'}
</div>
<div className="bv-lic-per">/Monat</div>
</div>
</div>
@@ -922,7 +930,18 @@ const LifecycleTab = ({ user, full }) => {
/* ══════════════════════════════════════════════════════════════════
Edit Modal
══════════════════════════════════════════════════════════════════ */
const EditModal = ({ user, allUsers, onClose, onSaved }) => {
const ROLE_PICKER = [
{ name: 'super_admin', label: 'Super Admin', desc: 'Vollzugriff inkl. Benutzerverwaltung', icon: '👑', color: '#b91c1c' },
{ name: 'admin', label: 'Admin', desc: 'Administrator - Kann Benutzer & Assets verwalten', icon: '🛡️', color: '#dc2626' },
{ name: 'bearbeiter', label: 'Bearbeiter', desc: 'Editor - Kann Assets erstellen und bearbeiten', icon: '🔧', color: '#059669' },
{ name: 'benutzer', label: 'Benutzer', desc: 'Standard - Nur Lesezugriff', icon: '👤', color: '#475569' },
{ name: 'support', label: 'IT-Support', desc: 'Support - Kann Tickets sehen und bearbeiten', icon: '🎧', color: '#2563eb' },
{ name: 'hr_personal', label: 'HR / Personal', desc: 'HR / Personal - Sieht HR-Aufgaben im Onboarding', icon: '👥', color: '#7c3aed' },
{ name: 'buchhaltung', label: 'Buchhaltung', desc: 'Buchhaltung / Lohn - Sieht Buchhaltungs-Aufgaben', icon: '💰', color: '#0891b2' },
{ name: 'produktion', label: 'Produktion', desc: 'Produktion - Sieht und verwaltet Produktions-Assets', icon: '🏭', color: '#d97706' },
];
const EditModal = ({ user, allUsers, roles, onClose, onSaved }) => {
const [form, setForm] = useState({
first_name: user.first_name || '',
last_name: user.last_name || '',
@@ -936,16 +955,29 @@ const EditModal = ({ user, allUsers, onClose, onSaved }) => {
employment_type: user.employment_type || 'Vollzeit',
work_hours: user.work_hours || 40,
joined_date: user.joined_date ? user.joined_date.split('T')[0] : '',
role_name: user.role_name || 'benutzer',
role_id: user.role_id || '',
});
const [saving, setSaving] = useState(false);
const [allRoles, setAllRoles] = useState([]);
useEffect(() => {
authFetch(`${API}/users/roles`).then(r => r.json()).then(d => setAllRoles(d.data || [])).catch(() => {});
}, []);
const save = async () => {
setSaving(true);
try {
const r = await authFetch(`${API}/users/${user.id}`, { method: 'PUT', body: JSON.stringify(form) });
// Finde role_id basierend auf role_name
const selectedRole = allRoles.find(r => r.name === form.role_name);
const saveData = { ...form, role_id: selectedRole?.id || form.role_id };
const r = await authFetch(`${API}/users/${user.id}`, { method: 'PUT', body: JSON.stringify(saveData) });
if (!r.ok) throw new Error('Fehler beim Speichern');
// Rolle separat zuweisen falls geändert
if (selectedRole && selectedRole.id !== user.role_id) {
await authFetch(`${API}/users/${user.id}/role`, { method: 'PUT', body: JSON.stringify({ role_id: selectedRole.id }) });
}
toast.success('Gespeichert');
onSaved({ ...user, ...form });
onSaved({ ...user, ...saveData, role_name: form.role_name });
onClose();
} catch { toast.error('Fehler beim Speichern'); }
finally { setSaving(false); }
@@ -993,6 +1025,34 @@ const EditModal = ({ user, allUsers, onClose, onSaved }) => {
</select>
</div>
</div>
{/* Rollen-Picker */}
<div style={{marginTop:16}}>
<label className="bv-form-label" style={{display:'block',marginBottom:8,fontSize:13,color:'#94a3b8'}}>Rolle *</label>
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8}}>
{ROLE_PICKER.map(role => {
const active = form.role_name === role.name;
return (
<div key={role.name} onClick={() => setForm(p => ({...p, role_name: role.name}))}
style={{
padding:'12px 14px', borderRadius:10, cursor:'pointer',
border: active ? `2px solid ${role.color}` : '1px solid rgba(255,255,255,0.08)',
background: active ? `${role.color}18` : 'rgba(255,255,255,0.03)',
display:'flex', alignItems:'flex-start', gap:10,
transition:'all 0.15s',
}}>
<span style={{fontSize:20,lineHeight:1}}>{role.icon}</span>
<div>
<div style={{fontWeight:600,fontSize:13,color: active ? role.color : '#f1f5f9',display:'flex',alignItems:'center',gap:6}}>
{role.label}
{active && <span style={{fontSize:10,color:role.color}}>✓</span>}
</div>
<div style={{fontSize:11,color:'#64748b',marginTop:2}}>{role.desc}</div>
</div>
</div>
);
})}
</div>
</div>
<div className="bv-form-actions">
<button className="btn btn-outline" onClick={onClose}>Abbrechen</button>
<button className="btn btn-primary" onClick={save} disabled={saving}>{saving ? 'Speichern…' : 'Speichern'}</button>
@@ -1069,7 +1129,7 @@ const UserManagementPage = () => {
setAuditLogs([]);
Promise.all([
authFetch(`${API}/users/${selectedId}/full`).then(r => r.json()).catch(() => ({})),
authFetch(`${API}/audit-logs/user/${selectedId}?limit=10`).then(r => r.json()).catch(() => ({})),
authFetch(`${API}/users/audit-logs/user/${selectedId}?limit=10`).then(r => r.json()).catch(() => ({})),
]).then(([fRes, lRes]) => {
setFull(fRes.data || null);
setAuditLogs(lRes.data || []);