'use client' import GlassCard from '../ui/GlassCard' import { formatCell } from './FinanzplanSlide.helpers' interface ChartsTabProps { fpKPIs: Record> de: boolean chartDetail: string | null setChartDetail: (v: string | null) => void } const YEARS = ['y2026', 'y2027', 'y2028', 'y2029', 'y2030'] function fmtK(v: number) { return Math.abs(v) >= 1000000 ? `${(v / 1000000).toFixed(1)}M` : `${Math.round(v / 1000)}k` } function fmtV(v: number) { return v.toLocaleString('de-DE') } function getChartDetails(de: boolean): Record { return { mrr: { title: 'MRR (Monthly Recurring Revenue)', desc: de ? 'Monatlich wiederkehrender Umsatz im Dezember des jeweiligen Jahres — der wichtigste KPI für SaaS-Unternehmen. Zeigt den tatsächlichen monatlichen Run-Rate, nicht den Jahresdurchschnitt. ARR = MRR × 12.' : 'Monthly recurring revenue in December of each year — the most important SaaS KPI. Shows the actual monthly run rate, not the annual average. ARR = MRR × 12.' }, ebit: { title: 'EBIT (Earnings Before Interest & Taxes)', desc: de ? 'Operatives Ergebnis vor Zinsen und Steuern — zeigt die tatsächliche Profitabilität des Geschäftsbetriebs. Positiver EBIT = das Geschäftsmodell funktioniert.' : 'Operating profit before interest and taxes — shows actual profitability of operations. Positive EBIT = the business model works.' }, headcount: { title: de ? 'Personalaufbau' : 'Headcount', desc: de ? 'Geplanter Teamaufbau über 5 Jahre. Wir starten lean mit 2 Gründern und wachsen bedarfsorientiert. Jede Einstellung ist an einen konkreten Meilenstein geknüpft.' : 'Planned team growth over 5 years. We start lean with 2 founders and grow based on demand. Each hire is tied to a concrete milestone.' }, cash: { title: de ? 'Liquidität (Jahresende)' : 'Cash Position (Year-End)', desc: de ? 'Kontostand am Ende jedes Jahres. Zeigt ob genug Geld für den laufenden Betrieb vorhanden ist. Die Liquiditätskurve berücksichtigt alle Einnahmen, Ausgaben, Investitionen und Finanzierungen.' : 'Bank balance at end of each year. Shows if enough cash is available for operations. The liquidity curve accounts for all revenue, expenses, investments and financing.' }, revcost: { title: de ? 'Umsatz vs. Gesamtkosten' : 'Revenue vs. Total Costs', desc: de ? 'Vergleich zwischen Einnahmen und Ausgaben. Der Schnittpunkt zeigt den Break-Even — ab dann verdient das Unternehmen mehr als es ausgibt.' : 'Comparison between income and expenses. The intersection shows break-even — from then on, the company earns more than it spends.' }, acv: { title: 'ACV (Average Contract Value)', desc: de ? 'Durchschnittlicher Vertragswert pro Kunde und Jahr. Steigender ACV bedeutet: Kunden kaufen mehr Module oder wechseln in höhere Tiers.' : 'Average contract value per customer per year. Rising ACV means: customers buy more modules or upgrade to higher tiers.' }, grossMargin: { title: 'Gross Margin', desc: de ? 'Rohertragsmarge — wieviel Prozent vom Umsatz nach Abzug der direkten Kosten (Cloud-Infrastruktur, Lizenzen) übrig bleibt. Bei SaaS typisch 70-90%.' : 'How much revenue remains after direct costs (cloud infrastructure, licenses). Typical for SaaS: 70-90%.' }, nrr: { title: de ? 'Umsatzwachstum (YoY)' : 'Revenue Growth (YoY)', desc: de ? 'Jahresvergleich des Gesamtumsatzes — zeigt die Wachstumsgeschwindigkeit. In der Frühphase primär durch Neukundengewinnung getrieben, später zunehmend durch Expansion bestehender Kunden (Upselling in höhere Tiers).' : 'Year-over-year total revenue comparison — shows growth velocity. In early stages driven primarily by new customer acquisition, later increasingly by expansion of existing customers (upselling to higher tiers).' }, ebitMargin: { title: 'EBIT Margin', desc: de ? 'Operatives Ergebnis in Prozent vom Umsatz. Zeigt die Effizienz des Geschäftsmodells. Ziel für SaaS: 20-30% in der Reifephase.' : 'Operating result as percentage of revenue. Shows business model efficiency. Target for SaaS: 20-30% at maturity.' }, } } function ChartDetailOverlay({ chartDetail, fpKPIs, de, onClose }: { chartDetail: string; fpKPIs: Record>; de: boolean; onClose: () => void }) { const chartDetails = getChartDetails(de) const detailInfo = chartDetails[chartDetail] if (!detailInfo) return null return (
e.stopPropagation()}>

{detailInfo.title}

{detailInfo.desc}

{fpKPIs.y2026 && (
{[2026, 2027, 2028, 2029, 2030].map(y => { const keyMap: Record = { cash: 'liquiditaet', revcost: 'revenue', acv: 'arpu' } const key = keyMap[chartDetail] || chartDetail const v = fpKPIs[`y${y}`]?.[key as keyof typeof fpKPIs['y2026']] as number || 0 return (
{y}
{typeof v === 'number' && Math.abs(v) >= 1000 ? fmtK(v) : `${v}`}
) })}
)}
) } export default function ChartsTab({ fpKPIs, de, chartDetail, setChartDetail }: ChartsTabProps) { const detailInfo = chartDetail ? getChartDetails(de)[chartDetail] : null return (
{/* Detail overlay */} {detailInfo && chartDetail && ( setChartDetail(null)} /> )} {/* MRR + Kunden Chart */} setChartDetail('mrr')}>

{de ? 'MRR & Kundenentwicklung' : 'MRR & Customer Growth'}

{de ? 'Klicken für Details' : 'Click for details'}
{(() => { const m = Math.max(...YEARS.map(y => fpKPIs[y]?.mrr || 0), 1); return [m, Math.round(m / 2), 0].map((v, i) => {fmtK(v)} €) })()}
{YEARS.map((y, idx) => { const d = { mrr: fpKPIs[y]?.mrr || 0, cust: fpKPIs[y]?.customers || 0 } const maxMrr = Math.max(...YEARS.map(k => fpKPIs[k]?.mrr || 0), 1) const maxCust = Math.max(...YEARS.map(k => fpKPIs[k]?.customers || 0), 1) return (
{fmtK(d.mrr)}
{d.cust}
{y.slice(1)}
) })}
MRR (€/Mon) {de ? 'Bestandskunden (Dez)' : 'Customers (Dec)'}
{/* EBIT + Headcount */}
setChartDetail('ebit')}>

EBIT

€/Jahr
{(() => { const vals = YEARS.map(y => fpKPIs[y]?.ebit || 0); const mx = Math.max(...vals.map(Math.abs), 1); return [fmtK(mx), '0', fmtK(-mx)].map((v, i) => {v}) })()}
{YEARS.map((y, idx) => { const v = fpKPIs[y]?.ebit || 0 const maxAbs = Math.max(...YEARS.map(k => Math.abs(fpKPIs[k]?.ebit || 0)), 1) const h = Math.abs(v) / maxAbs * 90 return (
= 0 ? 'bg-emerald-500/60 rounded-t' : 'bg-red-500/60 rounded-b'} w-full`} style={{ height: `${h}px` }}>
= 0 ? 'text-emerald-300' : 'text-red-300'} text-center -mt-3.5 whitespace-nowrap font-semibold`}>{fmtK(v)}
{y.slice(1)}
) })}
setChartDetail('headcount')}>

{de ? 'Personalaufbau' : 'Headcount'}

{de ? 'Mitarbeiter (Dez)' : 'Employees (Dec)'}
{(() => { const m = Math.max(...YEARS.map(y => fpKPIs[y]?.headcount || 0), 1); return [m, Math.round(m / 2), 0].map((v, i) => {v}) })()}
{YEARS.map((y, idx) => { const v = fpKPIs[y]?.headcount || 0 const mx = Math.max(...YEARS.map(k => fpKPIs[k]?.headcount || 0), 1) return (
{v}
{y.slice(1)}
) })}
{/* Liquiditat + Revenue vs Costs */}
setChartDetail('cash')}>

{de ? 'Liquidität' : 'Cash Position'}

{de ? 'Jahresende' : 'Year-End'}
{(() => { const m = Math.max(...YEARS.map(y => Math.abs(fpKPIs[y]?.liquiditaet || 0)), 1); return [fmtK(m), fmtK(m / 2), '0'].map((v, i) => {v}) })()}
{YEARS.map((y, idx) => { const v = fpKPIs[y]?.liquiditaet || 0 const mx = Math.max(...YEARS.map(k => Math.abs(fpKPIs[k]?.liquiditaet || 0)), 1) const h = Math.abs(v) / mx * 90 return (
= 0 ? 'bg-cyan-500/60 rounded-t' : 'bg-red-500/60 rounded-b'} w-full`} style={{ height: `${Math.max(h, 4)}px` }}>
= 0 ? 'text-cyan-300' : 'text-red-300'} text-center -mt-3.5 whitespace-nowrap font-semibold`}>{fmtK(v)}
{y.slice(1)}
) })}
setChartDetail('revcost')}>

{de ? 'Umsatz vs. Kosten' : 'Revenue vs. Costs'}

€/Jahr
{(() => { const d = YEARS.map(y => ({ rev: fpKPIs[y]?.revenue || 0, costs: (fpKPIs[y]?.revenue || 0) - (fpKPIs[y]?.ebit || 0) })) const mx = Math.max(...d.map(x => Math.max(x.rev, x.costs)), 1) return [fmtK(mx), fmtK(mx / 2), '0'].map((v, i) => {v}) })()}
{(() => { const data = YEARS.map(y => ({ year: y.slice(1), rev: fpKPIs[y]?.revenue || 0, costs: (fpKPIs[y]?.revenue || 0) - (fpKPIs[y]?.ebit || 0) })) const mx = Math.max(...data.map(d => Math.max(d.rev, d.costs)), 1) return data.map((d, idx) => (
{fmtK(d.rev)}
{fmtK(d.costs)}
{d.year}
)) })()}
{de ? 'Umsatz' : 'Revenue'} {de ? 'Kosten' : 'Costs'}
{/* Unit Economics */}

Unit Economics (2026–2030)

{[ { label: 'ACV', key: 'arpu', unit: '€', color: 'text-indigo-300', bg: 'bg-indigo-500/60', detail: 'acv' }, { label: 'Gross Margin', key: 'grossMargin', unit: '%', color: 'text-emerald-300', bg: 'bg-emerald-500/60', detail: 'grossMargin' }, { label: de ? 'Wachstum' : 'Growth', key: 'nrr', unit: '%', color: 'text-purple-300', bg: 'bg-purple-500/60', detail: 'nrr' }, { label: 'EBIT Margin', key: 'ebitMargin', unit: '%', color: 'text-amber-300', bg: 'bg-amber-500/60', detail: 'ebitMargin' }, ].map((metric, mIdx) => (
setChartDetail(metric.detail)}>

{metric.label}

{[2026, 2027, 2028, 2029, 2030].map((y, idx) => { const val = fpKPIs[`y${y}`]?.[metric.key as keyof typeof fpKPIs['y2026']] as number || 0 const maxVal = Math.max(...[2026, 2027, 2028, 2029, 2030].map(yr => Math.abs(fpKPIs[`y${yr}`]?.[metric.key as keyof typeof fpKPIs['y2026']] as number || 0)), 1) const h = Math.abs(val) / maxVal * 50 return (
= 0 ? metric.bg + ' rounded-t' : 'bg-red-500/60 rounded-b'}`} style={{ height: `${Math.max(h, 2)}px` }} /> {String(y).slice(2)}
) })}

{(() => { const v = fpKPIs.y2030?.[metric.key as keyof typeof fpKPIs['y2026']] as number || 0 return metric.unit === '€' ? `${fmtV(v)}${metric.unit}` : `${v}${metric.unit}` })()}

2030

))}
) }