902 lines
50 KiB
JavaScript
902 lines
50 KiB
JavaScript
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||
import api from '../services/api';
|
||
import assetService from '../services/assetService';
|
||
|
||
const EMAIL_TEMPLATE_LABELS = {
|
||
comment_added: { label: '💬 Neuer Kommentar', desc: 'Gesendet an den Ersteller wenn Support antwortet' },
|
||
escalation: { label: '⚠️ Eskalation', desc: 'An Admins bei überfälligen kritischen/hohen Tickets' },
|
||
satisfaction: { label: '⭐ Zufriedenheits-Feedback', desc: 'Gesendet nach Ticketschließung' },
|
||
status_changed: { label: '🔄 Statusänderung', desc: 'An den Ersteller bei Statuswechsel' },
|
||
ticket_assigned: { label: '👤 Ticket-Zuweisung', desc: 'An den Bearbeiter bei Ticket-Zuweisung' },
|
||
ticket_created: { label: '✅ Ticket-Bestätigung', desc: 'An den Ersteller nach Ticket-Erstellung' },
|
||
};
|
||
|
||
const EMAIL_TEMPLATE_VARS = {
|
||
ticket_created: ['ticket_number', 'ticket_title', 'requester_name', 'category', 'priority'],
|
||
ticket_assigned: ['ticket_number', 'ticket_title', 'assignee_name', 'requester_name', 'requester_email', 'category', 'priority'],
|
||
comment_added: ['ticket_number', 'ticket_title', 'author_name'],
|
||
status_changed: ['ticket_number', 'ticket_title', 'old_status', 'new_status'],
|
||
escalation: ['ticket_number', 'ticket_title', 'priority', 'requester_name', 'age_hours'],
|
||
satisfaction: ['ticket_number', 'ticket_title', 'requester_name'],
|
||
};
|
||
|
||
const PRIORITIES = ['niedrig', 'mittel', 'hoch', 'kritisch'];
|
||
const PRIORITY_ICONS = { niedrig: '🟢', mittel: '🔵', hoch: '🟠', kritisch: '🔴' };
|
||
|
||
const COMMON_ICONS = ['📋', '💻', '🖥️', '🌐', '📊', '🖨️', '📧', '🔐', '📱', '🔧', '⚡', '🏢', '👤', '🗂️', '🔑'];
|
||
|
||
export default function SettingsPage() {
|
||
const [tab, setTab] = useState('categories');
|
||
|
||
// ── Categories state ──────────────────────────────────────────────────────
|
||
const [categories, setCategories] = useState([]);
|
||
const [catModal, setCatModal] = useState(null); // null | { id?, name, icon }
|
||
const [catLoading, setCatLoading] = useState(false);
|
||
|
||
// ── Templates state ───────────────────────────────────────────────────────
|
||
const [templates, setTemplates] = useState([]);
|
||
const [tplModal, setTplModal] = useState(null); // null | template object
|
||
const [tplLoading, setTplLoading] = useState(false);
|
||
|
||
// ── Email templates state ─────────────────────────────────────────────────
|
||
const [emailTpls, setEmailTpls] = useState([]);
|
||
const [emailModal, setEmailModal] = useState(null); // null | { type, label, subject, intro }
|
||
const [emailLoading, setEmailLoading] = useState(false);
|
||
const [lastFocused, setLastFocused] = useState('intro');
|
||
const emailSubjectRef = useRef(null);
|
||
const emailIntroRef = useRef(null);
|
||
|
||
// ── Email design state ────────────────────────────────────────────────────
|
||
const [emailDesign, setEmailDesign] = useState(null);
|
||
const [designDraft, setDesignDraft] = useState(null);
|
||
const [designSaving, setDesignSaving] = useState(false);
|
||
const [previewType, setPreviewType] = useState('ticket_created');
|
||
const [previewDark, setPreviewDark] = useState(false);
|
||
const [previewHtml, setPreviewHtml] = useState('');
|
||
const [previewLoading, setPreviewLoading] = useState(false);
|
||
const previewDebounce = useRef(null);
|
||
|
||
const loadCategories = useCallback(async () => {
|
||
const res = await api.get('/settings/categories');
|
||
setCategories(res.data);
|
||
}, []);
|
||
|
||
const loadTemplates = useCallback(async () => {
|
||
const res = await api.get('/settings/templates');
|
||
setTemplates(res.data);
|
||
}, []);
|
||
|
||
const loadEmailTpls = useCallback(async () => {
|
||
const res = await api.get('/settings/email-templates');
|
||
setEmailTpls(res.data);
|
||
}, []);
|
||
|
||
const loadEmailDesign = useCallback(async () => {
|
||
const res = await api.get('/settings/email-design');
|
||
setEmailDesign(res.data);
|
||
setDesignDraft(res.data);
|
||
}, []);
|
||
|
||
useEffect(() => { loadCategories(); loadTemplates(); loadEmailTpls(); loadEmailDesign(); }, [loadCategories, loadTemplates, loadEmailTpls, loadEmailDesign]);
|
||
|
||
// Fetch preview when designDraft or previewType changes
|
||
useEffect(() => {
|
||
if (!designDraft) return;
|
||
clearTimeout(previewDebounce.current);
|
||
previewDebounce.current = setTimeout(async () => {
|
||
setPreviewLoading(true);
|
||
try {
|
||
const apiUrl = process.env.REACT_APP_API_URL || '/api';
|
||
const token = localStorage.getItem('token');
|
||
const res = await fetch(`${apiUrl}/settings/email-preview/${previewType}`, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||
},
|
||
body: JSON.stringify({ design: designDraft, darkMode: previewDark }),
|
||
});
|
||
const html = await res.text();
|
||
setPreviewHtml(html);
|
||
} catch (_) {}
|
||
setPreviewLoading(false);
|
||
}, 600);
|
||
}, [designDraft, previewType, previewDark]); // eslint-disable-line
|
||
|
||
// ── Category CRUD ──────────────────────────────────────────────────────────
|
||
|
||
const saveCategory = async () => {
|
||
if (!catModal?.name?.trim()) return;
|
||
setCatLoading(true);
|
||
try {
|
||
if (catModal.id) {
|
||
await api.put(`/settings/categories/${catModal.id}`, { name: catModal.name, icon: catModal.icon });
|
||
} else {
|
||
await api.post('/settings/categories', { name: catModal.name, icon: catModal.icon });
|
||
}
|
||
await loadCategories();
|
||
setCatModal(null);
|
||
} catch (e) {
|
||
alert(e.response?.data?.message || 'Fehler beim Speichern');
|
||
} finally {
|
||
setCatLoading(false);
|
||
}
|
||
};
|
||
|
||
const deleteCategory = async (cat) => {
|
||
if (!window.confirm(`Kategorie „${cat.name}" wirklich löschen?`)) return;
|
||
await api.delete(`/settings/categories/${cat.id}`);
|
||
await loadCategories();
|
||
};
|
||
|
||
// ── Template CRUD ──────────────────────────────────────────────────────────
|
||
|
||
const saveTemplate = async () => {
|
||
if (!tplModal?.label?.trim()) return;
|
||
setTplLoading(true);
|
||
try {
|
||
if (tplModal.id) {
|
||
await api.put(`/settings/templates/${tplModal.id}`, tplModal);
|
||
} else {
|
||
await api.post('/settings/templates', tplModal);
|
||
}
|
||
await loadTemplates();
|
||
setTplModal(null);
|
||
} catch (e) {
|
||
alert(e.response?.data?.message || 'Fehler beim Speichern');
|
||
} finally {
|
||
setTplLoading(false);
|
||
}
|
||
};
|
||
|
||
const deleteTemplate = async (tpl) => {
|
||
if (!window.confirm(`Vorlage „${tpl.label}" wirklich löschen?`)) return;
|
||
await api.delete(`/settings/templates/${tpl.id}`);
|
||
await loadTemplates();
|
||
};
|
||
|
||
// ── Email design CRUD ─────────────────────────────────────────────────────
|
||
|
||
const saveDesign = async () => {
|
||
setDesignSaving(true);
|
||
try {
|
||
const res = await api.put('/settings/email-design', designDraft);
|
||
setEmailDesign(res.data);
|
||
setDesignDraft(res.data);
|
||
} catch (e) {
|
||
alert(e.response?.data?.message || 'Fehler beim Speichern');
|
||
} finally {
|
||
setDesignSaving(false);
|
||
}
|
||
};
|
||
|
||
const resetDesign = async () => {
|
||
if (!window.confirm('Design auf Standardwerte zurücksetzen?')) return;
|
||
try {
|
||
const res = await api.post('/settings/email-design/reset');
|
||
setEmailDesign(res.data);
|
||
setDesignDraft(res.data);
|
||
} catch (e) {
|
||
alert(e.response?.data?.message || 'Fehler');
|
||
}
|
||
};
|
||
|
||
const setDraft = (key, val) => setDesignDraft(d => ({ ...d, [key]: val }));
|
||
|
||
// ── Email template CRUD ───────────────────────────────────────────────────
|
||
|
||
const saveEmailTpl = async () => {
|
||
if (!emailModal?.subject?.trim() || !emailModal?.intro?.trim()) return;
|
||
setEmailLoading(true);
|
||
try {
|
||
await api.put(`/settings/email-templates/${emailModal.type}`, {
|
||
subject: emailModal.subject,
|
||
intro: emailModal.intro,
|
||
});
|
||
await loadEmailTpls();
|
||
setEmailModal(null);
|
||
} catch (e) {
|
||
alert(e.response?.data?.message || 'Fehler beim Speichern');
|
||
} finally {
|
||
setEmailLoading(false);
|
||
}
|
||
};
|
||
|
||
const resetEmailTpl = async (type) => {
|
||
if (!window.confirm('Vorlage auf Standardwerte zurücksetzen?')) return;
|
||
try {
|
||
await api.post(`/settings/email-templates/${type}/reset`);
|
||
await loadEmailTpls();
|
||
if (emailModal?.type === type) {
|
||
const res = await api.get('/settings/email-templates');
|
||
const updated = res.data.find(t => t.type === type);
|
||
if (updated) setEmailModal(m => ({ ...m, subject: updated.subject, intro: updated.intro }));
|
||
}
|
||
} catch (e) {
|
||
alert(e.response?.data?.message || 'Fehler beim Zurücksetzen');
|
||
}
|
||
};
|
||
|
||
const insertVar = (varName) => {
|
||
const isSubject = lastFocused === 'subject';
|
||
const el = isSubject ? emailSubjectRef.current : emailIntroRef.current;
|
||
const field = isSubject ? 'subject' : 'intro';
|
||
const token = `{{${varName}}}`;
|
||
if (el) {
|
||
const start = el.selectionStart ?? el.value.length;
|
||
const end = el.selectionEnd ?? el.value.length;
|
||
const newVal = el.value.substring(0, start) + token + el.value.substring(end);
|
||
setEmailModal(m => ({ ...m, [field]: newVal }));
|
||
setTimeout(() => {
|
||
el.focus();
|
||
el.selectionStart = el.selectionEnd = start + token.length;
|
||
}, 0);
|
||
} else {
|
||
setEmailModal(m => ({ ...m, [field]: (m[field] || '') + token }));
|
||
}
|
||
};
|
||
|
||
// ── Styles ─────────────────────────────────────────────────────────────────
|
||
|
||
const card = {
|
||
background: 'var(--bg-card)',
|
||
border: '1px solid var(--border-color)',
|
||
borderRadius: 'var(--radius-xl)',
|
||
padding: '24px',
|
||
marginBottom: '16px',
|
||
};
|
||
|
||
const rowStyle = {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '12px',
|
||
padding: '10px 14px',
|
||
borderRadius: 'var(--radius-md)',
|
||
background: 'var(--bg-secondary)',
|
||
marginBottom: '8px',
|
||
};
|
||
|
||
const btnPrimary = {
|
||
background: 'var(--cereda-primary)',
|
||
color: '#fff',
|
||
border: 'none',
|
||
borderRadius: 'var(--radius-md)',
|
||
padding: '8px 16px',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
fontWeight: 600,
|
||
};
|
||
|
||
const btnOutline = {
|
||
background: 'transparent',
|
||
color: 'var(--text-secondary)',
|
||
border: '1px solid var(--border-color)',
|
||
borderRadius: 'var(--radius-md)',
|
||
padding: '6px 12px',
|
||
cursor: 'pointer',
|
||
fontSize: '13px',
|
||
};
|
||
|
||
const btnDanger = {
|
||
background: 'transparent',
|
||
color: 'var(--danger)',
|
||
border: '1px solid var(--danger)',
|
||
borderRadius: 'var(--radius-md)',
|
||
padding: '6px 12px',
|
||
cursor: 'pointer',
|
||
fontSize: '13px',
|
||
};
|
||
|
||
return (
|
||
<div className="main-content" style={{ padding: '40px 24px' }}>
|
||
|
||
{/* ── Constrained header + tabs ─────────────────────────────────── */}
|
||
<div style={{ maxWidth: '860px', margin: '0 auto' }}>
|
||
|
||
{/* Header */}
|
||
<div style={{ marginBottom: '28px' }}>
|
||
<h1 style={{ fontSize: '22px', fontWeight: 700, color: 'var(--text-primary)', margin: 0, display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||
⚙️ Einstellungen
|
||
</h1>
|
||
<p style={{ color: 'var(--text-muted)', fontSize: '14px', marginTop: '6px' }}>
|
||
Ticket-Kategorien, Vorlagen, E-Mail-Texte und E-Mail-Design verwalten
|
||
</p>
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div style={{ display: 'flex', gap: '4px', marginBottom: '24px', borderBottom: '1px solid var(--border-color)', paddingBottom: '0' }}>
|
||
{[
|
||
{ key: 'categories', label: '📂 Kategorien' },
|
||
{ key: 'templates', label: '📝 Vorlagen' },
|
||
{ key: 'asset-types', label: '🖥️ Asset-Typen' },
|
||
{ key: 'email-templates', label: '📧 E-Mail-Vorlagen' },
|
||
{ key: 'email-design', label: '🎨 E-Mail-Design' },
|
||
].map(t => (
|
||
<button key={t.key} onClick={() => setTab(t.key)} style={{
|
||
background: 'none',
|
||
border: 'none',
|
||
borderBottom: tab === t.key ? '2px solid var(--cereda-primary)' : '2px solid transparent',
|
||
color: tab === t.key ? 'var(--cereda-primary)' : 'var(--text-secondary)',
|
||
padding: '10px 18px',
|
||
cursor: 'pointer',
|
||
fontWeight: tab === t.key ? 700 : 400,
|
||
fontSize: '14px',
|
||
marginBottom: '-1px',
|
||
transition: 'var(--transition)',
|
||
}}>
|
||
{t.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
</div>{/* end constrained header/tabs */}
|
||
|
||
{/* ── Constrained tab content (all except email-design) ─────────── */}
|
||
<div style={{ maxWidth: '860px', margin: '0 auto', display: tab === 'email-design' ? 'none' : 'block' }}>
|
||
|
||
{/* ── CATEGORIES TAB ────────────────────────────────────────────── */}
|
||
{tab === 'categories' && (
|
||
<div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
||
<p style={{ margin: 0, color: 'var(--text-muted)', fontSize: '13px' }}>
|
||
{categories.length} Kategorien · werden beim Ticket-Erstellen angezeigt
|
||
</p>
|
||
<button style={btnPrimary} onClick={() => setCatModal({ name: '', icon: '📁' })}>
|
||
+ Kategorie hinzufügen
|
||
</button>
|
||
</div>
|
||
|
||
<div style={card}>
|
||
{categories.length === 0 && (
|
||
<p style={{ color: 'var(--text-muted)', textAlign: 'center', margin: '32px 0' }}>Keine Kategorien vorhanden</p>
|
||
)}
|
||
{categories.map(cat => (
|
||
<div key={cat.id} style={rowStyle}>
|
||
<span style={{ fontSize: '20px', minWidth: '28px', textAlign: 'center' }}>{cat.icon}</span>
|
||
<span style={{ flex: 1, fontWeight: 600, color: 'var(--text-primary)' }}>{cat.name}</span>
|
||
<button style={btnOutline} onClick={() => setCatModal({ id: cat.id, name: cat.name, icon: cat.icon })}>
|
||
Bearbeiten
|
||
</button>
|
||
<button style={btnDanger} onClick={() => deleteCategory(cat)}>
|
||
Löschen
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── TEMPLATES TAB ─────────────────────────────────────────────── */}
|
||
{tab === 'templates' && (
|
||
<div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
||
<p style={{ margin: 0, color: 'var(--text-muted)', fontSize: '13px' }}>
|
||
{templates.length} Vorlagen · erscheinen im Ticket-Erstellungs-Dropdown
|
||
</p>
|
||
<button style={btnPrimary} onClick={() => setTplModal({ label: '', title: '', description: '', category: categories[0]?.name || 'Allgemein', priority: 'mittel' })}>
|
||
+ Vorlage hinzufügen
|
||
</button>
|
||
</div>
|
||
|
||
<div style={card}>
|
||
{templates.length === 0 && (
|
||
<p style={{ color: 'var(--text-muted)', textAlign: 'center', margin: '32px 0' }}>Keine Vorlagen vorhanden</p>
|
||
)}
|
||
{templates.map(tpl => (
|
||
<div key={tpl.id} style={rowStyle}>
|
||
<span style={{ fontSize: '16px' }}>{PRIORITY_ICONS[tpl.priority]}</span>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ fontWeight: 600, color: 'var(--text-primary)', fontSize: '14px' }}>{tpl.label}</div>
|
||
<div style={{ color: 'var(--text-muted)', fontSize: '12px', marginTop: '2px' }}>
|
||
{tpl.category} · {tpl.title || <em>Kein Titel</em>}
|
||
</div>
|
||
</div>
|
||
<button style={btnOutline} onClick={() => setTplModal({ ...tpl })}>
|
||
Bearbeiten
|
||
</button>
|
||
<button style={btnDanger} onClick={() => deleteTemplate(tpl)}>
|
||
Löschen
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── ASSET TYPES TAB ──────────────────────────────────────────── */}
|
||
{tab === 'asset-types' && <AssetTypesTab />}
|
||
|
||
{/* ── EMAIL TEMPLATES TAB ───────────────────────────────────────── */}
|
||
{tab === 'email-templates' && (
|
||
<div>
|
||
<p style={{ margin: '0 0 16px', color: 'var(--text-muted)', fontSize: '13px' }}>
|
||
Betreff und Einleitungstext der automatischen E-Mails anpassen. Variablen wie <code>{'{{ticket_number}}'}</code> werden beim Versand ersetzt.
|
||
</p>
|
||
<div style={card}>
|
||
{emailTpls.map(tpl => {
|
||
const meta = EMAIL_TEMPLATE_LABELS[tpl.type] || { label: tpl.type, desc: '' };
|
||
return (
|
||
<div key={tpl.type} style={rowStyle}>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ fontWeight: 600, color: 'var(--text-primary)', fontSize: '14px' }}>{meta.label}</div>
|
||
<div style={{ color: 'var(--text-muted)', fontSize: '12px', marginTop: '2px' }}>{meta.desc}</div>
|
||
</div>
|
||
<button style={btnOutline} onClick={() => setEmailModal({ ...tpl })}>Bearbeiten</button>
|
||
<button style={btnDanger} onClick={() => resetEmailTpl(tpl.type)}>Zurücksetzen</button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
</div>{/* end constrained tab content */}
|
||
|
||
{/* ── EMAIL DESIGN TAB – full width ─────────────────────────────── */}
|
||
{tab === 'email-design' && designDraft && (
|
||
<div style={{ display: 'grid', gridTemplateColumns: '400px 1fr', gap: '28px', alignItems: 'start' }}>
|
||
|
||
{/* Left: settings (sticky) */}
|
||
<div style={{ position: 'sticky', top: '16px', maxHeight: 'calc(100vh - 80px)', overflowY: 'auto' }}>
|
||
<div style={card}>
|
||
<h3 style={{ margin: '0 0 16px', fontSize: '14px', fontWeight: 700, color: 'var(--text-primary)' }}>🏷️ Marke</h3>
|
||
|
||
<div className="form-group">
|
||
<label className="form-label">Logo-URL</label>
|
||
<input className="form-input" value={designDraft.logo_url} onChange={e => setDraft('logo_url', e.target.value)} placeholder="https://... (leer = Emoji-Icon)" />
|
||
<p style={{ color: 'var(--text-muted)', fontSize: '11px', margin: '3px 0 0' }}>Bild-URL (PNG/SVG/JPG). Wenn leer wird das Emoji-Icon verwendet.</p>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label className="form-label">Emoji-Icon (Fallback)</label>
|
||
<input className="form-input" value={designDraft.brand_icon} onChange={e => setDraft('brand_icon', e.target.value)} placeholder="💻" style={{ fontSize: '18px', width: '80px' }} />
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label className="form-label">Markenname</label>
|
||
<input className="form-input" value={designDraft.brand_name} onChange={e => setDraft('brand_name', e.target.value)} placeholder="CEREDA SYSTEMS" />
|
||
<p style={{ color: 'var(--text-muted)', fontSize: '11px', margin: '3px 0 0' }}>Erstes Wort dunkel, Rest in Primärfarbe.</p>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label className="form-label">Untertitel</label>
|
||
<input className="form-input" value={designDraft.brand_subtitle} onChange={e => setDraft('brand_subtitle', e.target.value)} placeholder="IT Support" />
|
||
</div>
|
||
|
||
<h3 style={{ margin: '20px 0 16px', fontSize: '14px', fontWeight: 700, color: 'var(--text-primary)' }}>🎨 Farben</h3>
|
||
|
||
{[
|
||
{ key: 'primary_color', label: 'Primärfarbe', desc: 'Akzentleiste, Links, Badge' },
|
||
{ key: 'button_color', label: 'Button-Farbe', desc: 'Hintergrund des Haupt-Buttons' },
|
||
{ key: 'bg_color', label: 'Hintergrundfarbe', desc: 'Äußerer E-Mail-Hintergrund' },
|
||
].map(({ key, label, desc }) => (
|
||
<div key={key} className="form-group">
|
||
<label className="form-label">{label}</label>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||
<input
|
||
type="color"
|
||
value={designDraft[key]}
|
||
onChange={e => setDraft(key, e.target.value)}
|
||
style={{ width: '44px', height: '36px', border: '1px solid var(--border-color)', borderRadius: '8px', cursor: 'pointer', padding: '2px' }}
|
||
/>
|
||
<input
|
||
className="form-input"
|
||
value={designDraft[key]}
|
||
onChange={e => setDraft(key, e.target.value)}
|
||
placeholder="#0d9488"
|
||
style={{ flex: 1, fontFamily: 'monospace', fontSize: '13px' }}
|
||
/>
|
||
</div>
|
||
<p style={{ color: 'var(--text-muted)', fontSize: '11px', margin: '3px 0 0' }}>{desc}</p>
|
||
</div>
|
||
))}
|
||
|
||
<h3 style={{ margin: '20px 0 16px', fontSize: '14px', fontWeight: 700, color: 'var(--text-primary)' }}>📝 Footer</h3>
|
||
|
||
<div className="form-group">
|
||
<label className="form-label">Firmenname</label>
|
||
<input className="form-input" value={designDraft.company_name} onChange={e => setDraft('company_name', e.target.value)} placeholder="Cereda Systems GmbH" />
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label className="form-label">Footer-Text</label>
|
||
<textarea className="form-input" value={designDraft.footer_text} onChange={e => setDraft('footer_text', e.target.value)} rows={2} style={{ resize: 'vertical', fontSize: '13px' }} />
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: '10px', justifyContent: 'space-between', marginTop: '8px' }}>
|
||
<button style={btnDanger} onClick={resetDesign}>Zurücksetzen</button>
|
||
<button style={btnPrimary} onClick={saveDesign} disabled={designSaving}>
|
||
{designSaving ? 'Speichern...' : 'Design speichern'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right: live preview */}
|
||
<div>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '12px' }}>
|
||
<span style={{ fontSize: '13px', fontWeight: 600, color: 'var(--text-primary)' }}>Vorschau:</span>
|
||
<select
|
||
className="form-select"
|
||
value={previewType}
|
||
onChange={e => setPreviewType(e.target.value)}
|
||
style={{ flex: 1, fontSize: '13px' }}
|
||
>
|
||
{Object.entries(EMAIL_TEMPLATE_LABELS).map(([k, v]) => (
|
||
<option key={k} value={k}>{v.label}</option>
|
||
))}
|
||
</select>
|
||
{/* Dark/Light mode toggle */}
|
||
<button
|
||
onClick={() => setPreviewDark(v => !v)}
|
||
title={previewDark ? 'Zu Hell-Modus wechseln' : 'Zu Dunkel-Modus wechseln'}
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
gap: '6px',
|
||
padding: '6px 12px',
|
||
borderRadius: 'var(--radius-md)',
|
||
border: '1px solid var(--border-color)',
|
||
background: previewDark ? '#1e293b' : 'var(--bg-secondary)',
|
||
color: previewDark ? '#e2e8f0' : 'var(--text-secondary)',
|
||
cursor: 'pointer',
|
||
fontSize: '13px',
|
||
fontWeight: 500,
|
||
whiteSpace: 'nowrap',
|
||
transition: 'var(--transition)',
|
||
}}
|
||
>
|
||
{previewDark ? '🌙 Dark' : '☀️ Light'}
|
||
</button>
|
||
{previewLoading && <span style={{ fontSize: '12px', color: 'var(--text-muted)' }}>Lädt...</span>}
|
||
</div>
|
||
<div style={{ border: '1px solid var(--border-color)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', background: previewDark ? '#0f172a' : '#f1f5f9' }}>
|
||
<iframe
|
||
srcDoc={previewHtml}
|
||
style={{ width: '100%', height: 'calc(100vh - 260px)', minHeight: '600px', border: 'none', display: 'block' }}
|
||
title="E-Mail Vorschau"
|
||
sandbox="allow-same-origin"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── CATEGORY MODAL ────────────────────────────────────────────── */}
|
||
{catModal && (
|
||
<div className="modal-overlay" onClick={() => setCatModal(null)}>
|
||
<div className="modal-content" style={{ maxWidth: 460 }} onClick={e => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h2 className="modal-title">{catModal.id ? '✏️ Kategorie bearbeiten' : '➕ Neue Kategorie'}</h2>
|
||
<button className="modal-close" onClick={() => setCatModal(null)}>×</button>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label className="form-label">Name*</label>
|
||
<input
|
||
className="form-input"
|
||
value={catModal.name}
|
||
onChange={e => setCatModal(p => ({ ...p, name: e.target.value }))}
|
||
placeholder="z.B. Microsoft 365"
|
||
autoFocus
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label className="form-label">Icon (Emoji)</label>
|
||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '10px' }}>
|
||
{COMMON_ICONS.map(ic => (
|
||
<button
|
||
key={ic}
|
||
onClick={() => setCatModal(p => ({ ...p, icon: ic }))}
|
||
style={{
|
||
fontSize: '22px',
|
||
background: catModal.icon === ic ? 'var(--cereda-primary)20' : 'var(--bg-secondary)',
|
||
border: catModal.icon === ic ? '2px solid var(--cereda-primary)' : '2px solid transparent',
|
||
borderRadius: '8px',
|
||
width: '40px',
|
||
height: '40px',
|
||
cursor: 'pointer',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
}}
|
||
>
|
||
{ic}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<input
|
||
className="form-input"
|
||
value={catModal.icon}
|
||
onChange={e => setCatModal(p => ({ ...p, icon: e.target.value }))}
|
||
placeholder="Oder eigenes Emoji eingeben"
|
||
style={{ fontSize: '18px' }}
|
||
/>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end', marginTop: '24px' }}>
|
||
<button style={btnOutline} onClick={() => setCatModal(null)}>Abbrechen</button>
|
||
<button style={btnPrimary} onClick={saveCategory} disabled={catLoading || !catModal.name?.trim()}>
|
||
{catLoading ? 'Speichern...' : 'Speichern'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── TEMPLATE MODAL ────────────────────────────────────────────── */}
|
||
{tplModal && (
|
||
<div className="modal-overlay" onClick={() => setTplModal(null)}>
|
||
<div className="modal-content modal-large" onClick={e => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h2 className="modal-title">{tplModal.id ? '✏️ Vorlage bearbeiten' : '➕ Neue Vorlage'}</h2>
|
||
<button className="modal-close" onClick={() => setTplModal(null)}>×</button>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
|
||
<div className="form-group">
|
||
<label className="form-label">Anzeige-Name (Dropdown)*</label>
|
||
<input
|
||
className="form-input"
|
||
value={tplModal.label}
|
||
onChange={e => setTplModal(p => ({ ...p, label: e.target.value }))}
|
||
placeholder="z.B. Passwort-Reset"
|
||
autoFocus
|
||
/>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="form-label">Ticket-Titel</label>
|
||
<input
|
||
className="form-input"
|
||
value={tplModal.title}
|
||
onChange={e => setTplModal(p => ({ ...p, title: e.target.value }))}
|
||
placeholder="z.B. Passwort zurücksetzen"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
|
||
<div className="form-group">
|
||
<label className="form-label">Kategorie</label>
|
||
<select
|
||
className="form-select"
|
||
value={tplModal.category}
|
||
onChange={e => setTplModal(p => ({ ...p, category: e.target.value }))}
|
||
>
|
||
{categories.map(c => (
|
||
<option key={c.id} value={c.name}>{c.icon} {c.name}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className="form-group">
|
||
<label className="form-label">Priorität</label>
|
||
<select
|
||
className="form-select"
|
||
value={tplModal.priority}
|
||
onChange={e => setTplModal(p => ({ ...p, priority: e.target.value }))}
|
||
>
|
||
{PRIORITIES.map(p => (
|
||
<option key={p} value={p}>{PRIORITY_ICONS[p]} {p.charAt(0).toUpperCase() + p.slice(1)}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label className="form-label">Beschreibungs-Vorlage</label>
|
||
<textarea
|
||
className="form-input"
|
||
value={tplModal.description}
|
||
onChange={e => setTplModal(p => ({ ...p, description: e.target.value }))}
|
||
rows={6}
|
||
placeholder="Vorlage-Text... (Leerzeilen als Platzhalter für den Nutzer)"
|
||
style={{ resize: 'vertical', fontFamily: 'monospace', fontSize: '13px' }}
|
||
/>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end', marginTop: '8px' }}>
|
||
<button style={btnOutline} onClick={() => setTplModal(null)}>Abbrechen</button>
|
||
<button style={btnPrimary} onClick={saveTemplate} disabled={tplLoading || !tplModal.label?.trim()}>
|
||
{tplLoading ? 'Speichern...' : 'Speichern'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{/* ── EMAIL TEMPLATE MODAL ──────────────────────────────────────── */}
|
||
{emailModal && (() => {
|
||
const vars = EMAIL_TEMPLATE_VARS[emailModal.type] || [];
|
||
const meta = EMAIL_TEMPLATE_LABELS[emailModal.type] || { label: emailModal.type };
|
||
return (
|
||
<div className="modal-overlay" onClick={() => setEmailModal(null)}>
|
||
<div className="modal-content modal-large" onClick={e => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h2 className="modal-title">{meta.label} bearbeiten</h2>
|
||
<button className="modal-close" onClick={() => setEmailModal(null)}>×</button>
|
||
</div>
|
||
|
||
{/* Variable chips */}
|
||
{vars.length > 0 && (
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<label className="form-label" style={{ marginBottom: '6px', display: 'block' }}>
|
||
Verfügbare Variablen <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>(klicken zum Einfügen)</span>
|
||
</label>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
|
||
{vars.map(v => (
|
||
<button
|
||
key={v}
|
||
onClick={() => insertVar(v)}
|
||
style={{
|
||
background: 'var(--cereda-primary)15',
|
||
border: '1px solid var(--cereda-primary)40',
|
||
borderRadius: '6px',
|
||
padding: '3px 10px',
|
||
fontSize: '12px',
|
||
color: 'var(--cereda-primary)',
|
||
cursor: 'pointer',
|
||
fontFamily: 'monospace',
|
||
}}
|
||
>
|
||
{`{{${v}}}`}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="form-group">
|
||
<label className="form-label">Betreff</label>
|
||
<input
|
||
ref={emailSubjectRef}
|
||
className="form-input"
|
||
value={emailModal.subject}
|
||
onChange={e => setEmailModal(m => ({ ...m, subject: e.target.value }))}
|
||
onFocus={() => setLastFocused('subject')}
|
||
placeholder="E-Mail Betreff"
|
||
/>
|
||
</div>
|
||
|
||
<div className="form-group">
|
||
<label className="form-label">Einleitungstext</label>
|
||
<textarea
|
||
ref={emailIntroRef}
|
||
className="form-input"
|
||
value={emailModal.intro}
|
||
onChange={e => setEmailModal(m => ({ ...m, intro: e.target.value }))}
|
||
onFocus={() => setLastFocused('intro')}
|
||
rows={5}
|
||
placeholder="Einleitungstext der E-Mail..."
|
||
style={{ resize: 'vertical', fontSize: '13px', lineHeight: 1.6 }}
|
||
/>
|
||
<p style={{ color: 'var(--text-muted)', fontSize: '12px', margin: '4px 0 0' }}>
|
||
Zeilenumbrüche werden in der E-Mail übernommen. Kein HTML nötig.
|
||
</p>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: '12px', justifyContent: 'space-between', marginTop: '8px' }}>
|
||
<button style={btnDanger} onClick={() => resetEmailTpl(emailModal.type)}>
|
||
Auf Standard zurücksetzen
|
||
</button>
|
||
<div style={{ display: 'flex', gap: '12px' }}>
|
||
<button style={btnOutline} onClick={() => setEmailModal(null)}>Abbrechen</button>
|
||
<button
|
||
style={btnPrimary}
|
||
onClick={saveEmailTpl}
|
||
disabled={emailLoading || !emailModal.subject?.trim() || !emailModal.intro?.trim()}
|
||
>
|
||
{emailLoading ? 'Speichern...' : 'Speichern'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})()}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Asset Types Tab ───────────────────────────────────────────────────────────
|
||
function AssetTypesTab() {
|
||
const [types, setTypes] = useState([]);
|
||
const [modal, setModal] = useState(null); // null | { id?, name, icon }
|
||
const [saving, setSaving] = useState(false);
|
||
const [deleting, setDeleting] = useState(null);
|
||
|
||
const load = useCallback(async () => {
|
||
const data = await assetService.getTypes();
|
||
setTypes(data);
|
||
}, []);
|
||
|
||
useEffect(() => { load(); }, [load]);
|
||
|
||
const openNew = () => setModal({ name: '', icon: 'devices_other' });
|
||
const openEdit = (t) => setModal({ ...t });
|
||
|
||
const save = async () => {
|
||
if (!modal?.name?.trim()) return;
|
||
setSaving(true);
|
||
try {
|
||
if (modal.id) {
|
||
await assetService.updateType(modal.id, { name: modal.name.trim(), icon: modal.icon });
|
||
} else {
|
||
await assetService.createType({ name: modal.name.trim(), icon: modal.icon });
|
||
}
|
||
setModal(null);
|
||
await load();
|
||
} catch (e) {
|
||
alert(e.response?.data?.error || 'Fehler beim Speichern');
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
const remove = async (id) => {
|
||
if (!window.confirm('Typ wirklich löschen?')) return;
|
||
setDeleting(id);
|
||
try {
|
||
await assetService.deleteType(id);
|
||
await load();
|
||
} finally {
|
||
setDeleting(null);
|
||
}
|
||
};
|
||
|
||
const card = { background: 'var(--bg-card)', borderRadius: '12px', border: '1px solid var(--border-color)', overflow: 'hidden' };
|
||
const row = { display: 'flex', alignItems: 'center', padding: '12px 16px', borderBottom: '1px solid var(--border-color)', gap: '12px' };
|
||
const btnPrimary = { background: 'var(--cereda-primary)', color: '#fff', border: 'none', borderRadius: '8px', padding: '8px 16px', cursor: 'pointer', fontSize: '13px', fontWeight: 600 };
|
||
const btnDanger = { background: 'rgba(239,68,68,0.12)', color: '#ef4444', border: '1px solid rgba(239,68,68,0.3)', borderRadius: '8px', padding: '6px 12px', cursor: 'pointer', fontSize: '12px' };
|
||
const btnOutline = { background: 'transparent', color: 'var(--cereda-primary)', border: '1px solid var(--cereda-primary)', borderRadius: '8px', padding: '6px 12px', cursor: 'pointer', fontSize: '12px' };
|
||
|
||
return (
|
||
<div>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
||
<p style={{ margin: 0, color: 'var(--text-muted)', fontSize: '13px' }}>
|
||
Asset-Typen verwalten — werden in allen Dropdowns angezeigt.
|
||
</p>
|
||
<button style={btnPrimary} onClick={openNew}>+ Neuer Typ</button>
|
||
</div>
|
||
|
||
<div style={card}>
|
||
{types.length === 0 && (
|
||
<div style={{ padding: '24px', textAlign: 'center', color: 'var(--text-muted)' }}>Keine Typen vorhanden</div>
|
||
)}
|
||
{types.map((t, i) => (
|
||
<div key={t.id} style={{ ...row, borderBottom: i < types.length - 1 ? '1px solid var(--border-color)' : 'none' }}>
|
||
<span style={{ fontSize: '20px', width: '28px', textAlign: 'center' }}>🖥️</span>
|
||
<span style={{ flex: 1, fontWeight: 600, color: 'var(--text-primary)', fontSize: '14px' }}>{t.name}</span>
|
||
<button style={btnOutline} onClick={() => openEdit(t)}>Bearbeiten</button>
|
||
<button style={btnDanger} disabled={deleting === t.id} onClick={() => remove(t.id)}>
|
||
{deleting === t.id ? '...' : 'Löschen'}
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{modal && (
|
||
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
|
||
<div style={{ background: 'var(--bg-modal)', borderRadius: '16px', padding: '24px', width: '360px', border: '1px solid var(--border-color)' }}>
|
||
<h3 style={{ margin: '0 0 20px', color: 'var(--text-primary)' }}>{modal.id ? 'Typ bearbeiten' : 'Neuer Asset-Typ'}</h3>
|
||
<label style={{ display: 'block', marginBottom: '6px', fontSize: '13px', color: 'var(--text-secondary)', fontWeight: 600 }}>Name *</label>
|
||
<input
|
||
className="form-input"
|
||
value={modal.name}
|
||
onChange={e => setModal(m => ({ ...m, name: e.target.value }))}
|
||
placeholder="z.B. Notebook"
|
||
autoFocus
|
||
style={{ marginBottom: '20px' }}
|
||
/>
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>
|
||
<button style={btnOutline} onClick={() => setModal(null)}>Abbrechen</button>
|
||
<button style={btnPrimary} disabled={saving || !modal.name?.trim()} onClick={save}>
|
||
{saving ? 'Speichern...' : 'Speichern'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|