92c86ec6ba
Install LOC guardrails (check-loc.sh, architecture.md, pre-commit hook) and split all 44 files exceeding 500 LOC into domain-focused modules: - consent-service (Go): models, handlers, services, database splits - backend-core (Python): security_api, rbac_api, pdf_service, auth splits - admin-core (TypeScript): 5 page.tsx + sidebar extractions - pitch-deck (TypeScript): 6 slides, 3 UI components, engine.ts splits - voice-service (Python): enhanced_task_orchestrator split Result: 0 violations, 36 exempted (pipeline, tests, pure-data files). Go build verified clean. No behavior changes — pure structural splits. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
290 lines
20 KiB
TypeScript
290 lines
20 KiB
TypeScript
'use client'
|
||
|
||
import GlassCard from '../ui/GlassCard'
|
||
import { formatCell } from './FinanzplanSlide.helpers'
|
||
|
||
interface ChartsTabProps {
|
||
fpKPIs: Record<string, Record<string, number>>
|
||
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<string, { title: string; desc: string }> {
|
||
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<string, Record<string, number>>; de: boolean; onClose: () => void
|
||
}) {
|
||
const chartDetails = getChartDetails(de)
|
||
const detailInfo = chartDetails[chartDetail]
|
||
if (!detailInfo) return null
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
|
||
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
|
||
<div className="relative bg-slate-900/95 border border-white/10 rounded-2xl p-6 max-w-lg w-full" onClick={e => e.stopPropagation()}>
|
||
<button onClick={onClose} className="absolute top-4 right-4 text-white/40 hover:text-white/80 text-lg">✕</button>
|
||
<h3 className="text-xl font-bold text-white mb-3">{detailInfo.title}</h3>
|
||
<p className="text-sm text-white/60 leading-relaxed">{detailInfo.desc}</p>
|
||
{fpKPIs.y2026 && (
|
||
<div className="mt-4 pt-4 border-t border-white/10">
|
||
<div className="grid grid-cols-5 gap-2 text-center">
|
||
{[2026, 2027, 2028, 2029, 2030].map(y => {
|
||
const keyMap: Record<string, string> = { 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 (
|
||
<div key={y}>
|
||
<div className="text-[10px] text-white/40">{y}</div>
|
||
<div className="text-sm font-bold text-white">{typeof v === 'number' && Math.abs(v) >= 1000 ? fmtK(v) : `${v}`}</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function ChartsTab({ fpKPIs, de, chartDetail, setChartDetail }: ChartsTabProps) {
|
||
const detailInfo = chartDetail ? getChartDetails(de)[chartDetail] : null
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* Detail overlay */}
|
||
{detailInfo && chartDetail && (
|
||
<ChartDetailOverlay chartDetail={chartDetail} fpKPIs={fpKPIs} de={de} onClose={() => setChartDetail(null)} />
|
||
)}
|
||
|
||
{/* MRR + Kunden Chart */}
|
||
<GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('mrr')}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider">{de ? 'MRR & Kundenentwicklung' : 'MRR & Customer Growth'}</h3>
|
||
<span className="text-[9px] text-white/30">{de ? 'Klicken für Details' : 'Click for details'}</span>
|
||
</div>
|
||
<div className="flex">
|
||
<div className="flex flex-col justify-between h-40 pr-2 text-[9px] text-white/30 text-right" style={{ width: 45 }}>
|
||
{(() => { const m = Math.max(...YEARS.map(y => fpKPIs[y]?.mrr || 0), 1); return [m, Math.round(m / 2), 0].map((v, i) => <span key={i}>{fmtK(v)} €</span>) })()}
|
||
</div>
|
||
<div className="flex-1 grid grid-cols-5 gap-1 items-end h-40 border-l border-b border-white/10 pl-2 pb-1">
|
||
{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 (
|
||
<div key={idx} className="flex flex-col items-center gap-1">
|
||
<div className="flex items-end gap-1 w-full justify-center" style={{ height: '130px' }}>
|
||
<div className="w-8 bg-indigo-500/60 rounded-t transition-all" style={{ height: `${(d.mrr / maxMrr) * 120}px` }}>
|
||
<div className="text-[10px] text-white/80 text-center -mt-3.5 whitespace-nowrap font-semibold">{fmtK(d.mrr)}</div>
|
||
</div>
|
||
<div className="w-8 bg-emerald-500/60 rounded-t transition-all" style={{ height: `${(d.cust / maxCust) * 120}px` }}>
|
||
<div className="text-[10px] text-white/80 text-center -mt-3.5 whitespace-nowrap font-semibold">{d.cust}</div>
|
||
</div>
|
||
</div>
|
||
<span className="text-[10px] text-white/50 font-medium">{y.slice(1)}</span>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center gap-6 mt-2 text-[10px]">
|
||
<span className="flex items-center gap-1.5"><span className="w-3 h-2 bg-indigo-500/60 rounded inline-block" /> MRR (€/Mon)</span>
|
||
<span className="flex items-center gap-1.5"><span className="w-3 h-2 bg-emerald-500/60 rounded inline-block" /> {de ? 'Bestandskunden (Dez)' : 'Customers (Dec)'}</span>
|
||
</div>
|
||
</GlassCard>
|
||
|
||
{/* EBIT + Headcount */}
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
<GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('ebit')}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider">EBIT</h3>
|
||
<span className="text-[9px] text-white/30">€/Jahr</span>
|
||
</div>
|
||
<div className="flex">
|
||
<div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 40 }}>
|
||
{(() => { 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) => <span key={i}>{v}</span>) })()}
|
||
</div>
|
||
<div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-white/10 pl-2">
|
||
{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 (
|
||
<div key={idx} className="flex flex-col items-center">
|
||
<div className="w-10 flex flex-col justify-end" style={{ height: '100px' }}>
|
||
<div className={`${v >= 0 ? 'bg-emerald-500/60 rounded-t' : 'bg-red-500/60 rounded-b'} w-full`} style={{ height: `${h}px` }}>
|
||
<div className={`text-[10px] ${v >= 0 ? 'text-emerald-300' : 'text-red-300'} text-center -mt-3.5 whitespace-nowrap font-semibold`}>{fmtK(v)}</div>
|
||
</div>
|
||
</div>
|
||
<span className="text-[10px] text-white/50 mt-1 font-medium">{y.slice(1)}</span>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</GlassCard>
|
||
|
||
<GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('headcount')}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider">{de ? 'Personalaufbau' : 'Headcount'}</h3>
|
||
<span className="text-[9px] text-white/30">{de ? 'Mitarbeiter (Dez)' : 'Employees (Dec)'}</span>
|
||
</div>
|
||
<div className="flex">
|
||
<div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 25 }}>
|
||
{(() => { const m = Math.max(...YEARS.map(y => fpKPIs[y]?.headcount || 0), 1); return [m, Math.round(m / 2), 0].map((v, i) => <span key={i}>{v}</span>) })()}
|
||
</div>
|
||
<div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-b border-white/10 pl-2 pb-1">
|
||
{YEARS.map((y, idx) => {
|
||
const v = fpKPIs[y]?.headcount || 0
|
||
const mx = Math.max(...YEARS.map(k => fpKPIs[k]?.headcount || 0), 1)
|
||
return (
|
||
<div key={idx} className="flex flex-col items-center">
|
||
<div className="w-10 flex flex-col justify-end" style={{ height: '90px' }}>
|
||
<div className="bg-amber-500/60 rounded-t w-full" style={{ height: `${(v / mx) * 80}px` }}>
|
||
<div className="text-[11px] text-amber-300 text-center -mt-3.5 font-bold">{v}</div>
|
||
</div>
|
||
</div>
|
||
<span className="text-[10px] text-white/50 mt-1 font-medium">{y.slice(1)}</span>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</GlassCard>
|
||
</div>
|
||
|
||
{/* Liquiditat + Revenue vs Costs */}
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
<GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('cash')}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className="text-xs font-bold text-cyan-400 uppercase tracking-wider">{de ? 'Liquidität' : 'Cash Position'}</h3>
|
||
<span className="text-[9px] text-white/30">{de ? 'Jahresende' : 'Year-End'}</span>
|
||
</div>
|
||
<div className="flex">
|
||
<div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 40 }}>
|
||
{(() => { const m = Math.max(...YEARS.map(y => Math.abs(fpKPIs[y]?.liquiditaet || 0)), 1); return [fmtK(m), fmtK(m / 2), '0'].map((v, i) => <span key={i}>{v}</span>) })()}
|
||
</div>
|
||
<div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-b border-white/10 pl-2 pb-1">
|
||
{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 (
|
||
<div key={idx} className="flex flex-col items-center">
|
||
<div className="w-10 flex flex-col justify-end" style={{ height: '90px' }}>
|
||
<div className={`${v >= 0 ? 'bg-cyan-500/60 rounded-t' : 'bg-red-500/60 rounded-b'} w-full`} style={{ height: `${Math.max(h, 4)}px` }}>
|
||
<div className={`text-[10px] ${v >= 0 ? 'text-cyan-300' : 'text-red-300'} text-center -mt-3.5 whitespace-nowrap font-semibold`}>{fmtK(v)}</div>
|
||
</div>
|
||
</div>
|
||
<span className="text-[10px] text-white/50 mt-1 font-medium">{y.slice(1)}</span>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</GlassCard>
|
||
|
||
<GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('revcost')}>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider">{de ? 'Umsatz vs. Kosten' : 'Revenue vs. Costs'}</h3>
|
||
<span className="text-[9px] text-white/30">€/Jahr</span>
|
||
</div>
|
||
<div className="flex">
|
||
<div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 40 }}>
|
||
{(() => {
|
||
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) => <span key={i}>{v}</span>)
|
||
})()}
|
||
</div>
|
||
<div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-b border-white/10 pl-2 pb-1">
|
||
{(() => {
|
||
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) => (
|
||
<div key={idx} className="flex flex-col items-center gap-1">
|
||
<div className="flex items-end gap-1 w-full justify-center" style={{ height: '90px' }}>
|
||
<div className="w-6 bg-indigo-500/60 rounded-t" style={{ height: `${(d.rev / mx) * 80}px` }}>
|
||
<div className="text-[9px] text-indigo-300 text-center -mt-3 whitespace-nowrap font-semibold">{fmtK(d.rev)}</div>
|
||
</div>
|
||
<div className="w-6 bg-red-500/40 rounded-t" style={{ height: `${(d.costs / mx) * 80}px` }}>
|
||
<div className="text-[9px] text-red-300 text-center -mt-3 whitespace-nowrap font-semibold">{fmtK(d.costs)}</div>
|
||
</div>
|
||
</div>
|
||
<span className="text-[10px] text-white/50 font-medium">{d.year}</span>
|
||
</div>
|
||
))
|
||
})()}
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center gap-4 mt-2 text-[9px]">
|
||
<span className="flex items-center gap-1"><span className="w-3 h-1.5 bg-indigo-500/60 rounded inline-block" /> {de ? 'Umsatz' : 'Revenue'}</span>
|
||
<span className="flex items-center gap-1"><span className="w-3 h-1.5 bg-red-500/40 rounded inline-block" /> {de ? 'Kosten' : 'Costs'}</span>
|
||
</div>
|
||
</GlassCard>
|
||
</div>
|
||
|
||
{/* Unit Economics */}
|
||
<GlassCard hover={false} className="p-4">
|
||
<h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider mb-3">Unit Economics (2026–2030)</h3>
|
||
<div className="grid md:grid-cols-4 gap-3">
|
||
{[
|
||
{ 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) => (
|
||
<div key={mIdx} className="text-center cursor-pointer hover:bg-white/[0.03] rounded-lg p-2 transition-colors" onClick={() => setChartDetail(metric.detail)}>
|
||
<p className={`text-[10px] font-bold ${metric.color} uppercase tracking-wider mb-2`}>{metric.label}</p>
|
||
<div className="flex items-end justify-center gap-1 h-16">
|
||
{[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 (
|
||
<div key={idx} className="flex flex-col items-center">
|
||
<div className={`w-4 ${val >= 0 ? metric.bg + ' rounded-t' : 'bg-red-500/60 rounded-b'}`} style={{ height: `${Math.max(h, 2)}px` }} />
|
||
<span className="text-[8px] text-white/30 mt-0.5">{String(y).slice(2)}</span>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
<p className={`text-sm font-bold ${metric.color} mt-1`}>
|
||
{(() => {
|
||
const v = fpKPIs.y2030?.[metric.key as keyof typeof fpKPIs['y2026']] as number || 0
|
||
return metric.unit === '€' ? `${fmtV(v)}${metric.unit}` : `${v}${metric.unit}`
|
||
})()}
|
||
</p>
|
||
<p className="text-[8px] text-white/25">2030</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</GlassCard>
|
||
</div>
|
||
)
|
||
}
|