// App.jsx — main shell + routing const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "dark", "accent": "cyan", "density": "comfy", "liveData": true, "showSparkline": true, "showWarnings": true, "showOutreach": true, "showSystems": true, "showSync": true }/*EDITMODE-END*/; const ACCENT_PALETTE = { cyan: { c: '#22D3EE', c2: '#06B6D4', glow: 'rgba(34,211,238,0.18)', soft: 'rgba(34,211,238,0.08)' }, violet: { c: '#A78BFA', c2: '#8B5CF6', glow: 'rgba(167,139,250,0.18)', soft: 'rgba(167,139,250,0.08)' }, emerald: { c: '#10B981', c2: '#059669', glow: 'rgba(16,185,129,0.18)', soft: 'rgba(16,185,129,0.08)' }, amber: { c: '#F59E0B', c2: '#D97706', glow: 'rgba(245,158,11,0.18)', soft: 'rgba(245,158,11,0.08)' }, pink: { c: '#F472B6', c2: '#EC4899', glow: 'rgba(244,114,182,0.18)', soft: 'rgba(244,114,182,0.08)' } }; function App() { const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS); const [active, setActive] = React.useState('overview'); const [selectedLead, setSelectedLead] = React.useState(null); const [range, setRange] = React.useState('24h'); const [time, setTime] = React.useState('10:24:37'); const [warnings, setWarnings] = React.useState(window.VELUNA_DATA.warnings); const [dataTick, setDataTick] = React.useState(0); const [apiState, setApiState] = React.useState(window.VELUNA_API_STATE || { mode: 'pending', error: null }); // Re-render on BFF data updates (initial hydrate + manual refresh). React.useEffect(() => { function onUpdate(ev) { setApiState(ev.detail || window.VELUNA_API_STATE); setWarnings(window.VELUNA_DATA.warnings); setDataTick(t => t + 1); } window.addEventListener('veluna:data-updated', onUpdate); return () => window.removeEventListener('veluna:data-updated', onUpdate); }, []); // Apply theme/density/accent to React.useEffect(() => { const root = document.documentElement; root.dataset.theme = tweaks.theme; root.dataset.density = tweaks.density; const a = ACCENT_PALETTE[tweaks.accent] || ACCENT_PALETTE.cyan; root.style.setProperty('--accent', a.c); root.style.setProperty('--accent-2', a.c2); root.style.setProperty('--accent-glow', a.glow); root.style.setProperty('--accent-soft', a.soft); }, [tweaks.theme, tweaks.density, tweaks.accent]); // Live clock React.useEffect(() => { if (!tweaks.liveData) return; const iv = setInterval(() => { const d = new Date(); setTime(`${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}:${String(d.getSeconds()).padStart(2,'0')}`); }, 1000); return () => clearInterval(iv); }, [tweaks.liveData]); function handleRefresh() { const d = new Date(); setTime(`${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}:${String(d.getSeconds()).padStart(2,'0')}`); if (window.VELUNA_API && typeof window.VELUNA_API.refresh === 'function') { window.VELUNA_API.refresh(); } } function dismissWarning(id) { setWarnings(ws => ws.filter(w => w.id !== id)); } const screenInfo = { overview: { title: 'Veluna Growth Stack — Live Dashboard', sub: 'Übersicht zu Leads, Automationen, Outreach und Sync-Status' }, pipeline: { title: 'Lead Pipeline', sub: 'Stages, Übergänge und Conversion durch die gesamte Pipeline' }, leads: { title: 'Potenzielle Leads', sub: 'Alle Leads — filtern, sortieren, anreichern' }, outreach: { title: 'Outreach', sub: 'Sequenzen, Conversion-Funnel und Performance' }, sync: { title: 'Sync & Integrationen', sub: 'Status der Verbindungen und Sync-Verlauf' }, storage: { title: 'Speicherung', sub: 'Datenbanken, Tabellen und Backup-Status' }, log: { title: 'Aktivitätsprotokoll', sub: 'Vollständige Historie aller System-Events' }, systems: { title: 'Systeme & Automationen',sub: 'Verbundene Services und automatisierte Workflows' }, settings: { title: 'Einstellungen', sub: 'Workspace, Scoring, Benachrichtigungen, API' } }; const info = screenInfo[active]; return (
{ setActive(id); setSelectedLead(null); }} />
setTweak('liveData', !tweaks.liveData)} />
{active === 'overview' && (
{/* KPI row — 8 cards */}
{window.VELUNA_DATA.kpis.map((k, i) => ( { if (k.id === 'sync_ok' || k.id === 'sync_err') setActive('sync'); else if (k.id === 'auto') setActive('systems'); else setActive('leads'); }} /> ))}
{/* Row 2: Pipeline (8) + LiveActivity (4) */}
{/* Row 3: Leads preview (full width) */}
{/* Row 4: Outreach + Systems + Sync */}
{tweaks.showOutreach &&
} {tweaks.showSystems &&
} {tweaks.showSync &&
setActive('sync')} />
}
{/* Row 5: Warnings */} {tweaks.showWarnings && (
)}
)} {active === 'pipeline' &&
} {active === 'leads' &&
} {active === 'outreach' &&
} {active === 'sync' &&
} {active === 'storage' &&
} {active === 'log' &&
} {active === 'systems' &&
} {active === 'settings' &&
}
{selectedLead && setSelectedLead(null)} />}
); } function VelunaTweaks({ tweaks, setTweak }) { const { TweaksPanel: Panel, TweakSection, TweakRadio, TweakToggle, TweakSelect } = window; return ( setTweak('theme', v)} /> setTweak('density', v)} /> setTweak('accent', v)} options={[ { value: 'cyan', label: 'Cyan' }, { value: 'violet', label: 'Violet' }, { value: 'emerald', label: 'Emerald' }, { value: 'amber', label: 'Amber' }, { value: 'pink', label: 'Pink' } ]} /> setTweak('liveData', v)} /> setTweak('showSparkline', v)} /> setTweak('showOutreach', v)} /> setTweak('showSystems', v)} /> setTweak('showSync', v)} /> setTweak('showWarnings', v)} /> ); } window.App = App;