de308b7397
All checks were successful
Build pitch-deck / build-push-deploy (push) Successful in 1m18s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 35s
CI / test-python-voice (push) Successful in 37s
CI / test-bqas (push) Successful in 35s
- Base Case KPIs now loaded from fp_guv/fp_liquiditaet/fp_kunden (source of truth) - Bear/Bull derived from Base with scaling factors - Assumptions text conditional: Wandeldarlehen shows lean plan (3→10, 8%/15% growth), 1 Mio shows original (5→35, aggressive growth) - Removed dependency on useFinancialModel (simplified model) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
283 lines
12 KiB
TypeScript
283 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { Language } from '@/lib/types'
|
|
import { t } from '@/lib/i18n'
|
|
import GradientText from '../ui/GradientText'
|
|
import FadeInView from '../ui/FadeInView'
|
|
import GlassCard from '../ui/GlassCard'
|
|
import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
|
|
|
|
interface AssumptionsSlideProps {
|
|
lang: Language
|
|
investorId?: string | null
|
|
preferredScenarioId?: string | null
|
|
isWandeldarlehen?: boolean
|
|
}
|
|
|
|
function fmtArr(v: number, de: boolean): string {
|
|
if (v >= 1_000_000) {
|
|
const m = (v / 1_000_000).toFixed(1)
|
|
return de ? `~${m.replace('.', ',')} Mio. EUR` : `~EUR ${m}M`
|
|
}
|
|
return de ? `~${Math.round(v / 1000)}k EUR` : `~EUR ${Math.round(v / 1000)}k`
|
|
}
|
|
|
|
function fmtCash(v: number, de: boolean): string {
|
|
if (Math.abs(v) >= 1_000_000) {
|
|
const m = (v / 1_000_000).toFixed(1)
|
|
return de ? `~${m.replace('.', ',')} Mio. EUR` : `~EUR ${m}M`
|
|
}
|
|
return de ? `~${Math.round(v / 1000)}k EUR` : `~EUR ${Math.round(v / 1000)}k`
|
|
}
|
|
|
|
interface SheetRow {
|
|
row_label?: string
|
|
values?: Record<string, number>
|
|
values_total?: Record<string, number>
|
|
is_sum_row?: boolean
|
|
}
|
|
|
|
export default function AssumptionsSlide({ lang, investorId, preferredScenarioId, isWandeldarlehen }: AssumptionsSlideProps) {
|
|
const i = t(lang)
|
|
const de = lang === 'de'
|
|
|
|
// Load KPIs from fp_* tables (source of truth)
|
|
const [baseKPIs, setBaseKPIs] = useState<Record<string, number>>({})
|
|
|
|
useEffect(() => {
|
|
async function load() {
|
|
try {
|
|
const scenarioParam = isWandeldarlehen ? '?scenarioId=c0000000-0000-0000-0000-000000000200' : ''
|
|
const [guvRes, liqRes, persRes, kundenRes] = await Promise.all([
|
|
fetch(`/api/finanzplan/guv${scenarioParam}`, { cache: 'no-store' }),
|
|
fetch(`/api/finanzplan/liquiditaet${scenarioParam}`, { cache: 'no-store' }),
|
|
fetch(`/api/finanzplan/personalkosten${scenarioParam}`, { cache: 'no-store' }),
|
|
fetch(`/api/finanzplan/kunden${scenarioParam}`, { cache: 'no-store' }),
|
|
])
|
|
const [guv, liq, pers, kunden] = await Promise.all([guvRes.json(), liqRes.json(), persRes.json(), kundenRes.json()])
|
|
|
|
const findGuv = (label: string) => (guv.rows || []).find((r: SheetRow) => (r.row_label || '').includes(label))
|
|
const findLiq = (label: string) => (liq.rows || []).find((r: SheetRow) => (r.row_label || '').includes(label))
|
|
const kundenGesamt = (kunden.rows || []).find((r: SheetRow) => r.row_label === 'Bestandskunden gesamt')
|
|
|
|
const arr = findGuv('Umsatzerlöse')?.values?.y2030 || 0
|
|
const customers = kundenGesamt?.values?.m60 || 0
|
|
const headcount = (pers.rows || []).filter((r: SheetRow) => ((r.values_total || r.values)?.m60 || 0) > 0).length
|
|
const cash = findLiq('LIQUIDIT')?.values?.m60 || findLiq('LIQUIDITAET')?.values?.m60 || 0
|
|
const ebit = findGuv('EBIT')?.values || {}
|
|
// Find break-even year
|
|
let breakEvenYear = '—'
|
|
for (const y of [2026, 2027, 2028, 2029, 2030]) {
|
|
if ((ebit[`y${y}`] || 0) > 0) { breakEvenYear = String(y); break }
|
|
}
|
|
|
|
setBaseKPIs({ arr, customers, headcount, cash, breakEvenYear: parseInt(breakEvenYear) || 0 })
|
|
} catch { /* ignore */ }
|
|
}
|
|
load()
|
|
}, [isWandeldarlehen])
|
|
|
|
const baseCustomers = baseKPIs.customers || 0
|
|
const baseArr = baseKPIs.arr || 0
|
|
const baseEmployees = baseKPIs.headcount || 0
|
|
const baseCash = baseKPIs.cash || 0
|
|
const baseBreakEven = baseKPIs.breakEvenYear ? String(baseKPIs.breakEvenYear) : '—'
|
|
|
|
// Bear/Bull scaled from Base
|
|
const bearCustomers = Math.round(baseCustomers * 0.5)
|
|
const bearArr = baseArr * 0.42
|
|
const bearEmployees = Math.round(baseEmployees * 0.7)
|
|
const bearCash = Math.round(baseCash * 0.3)
|
|
const bearBreakEven = baseKPIs.breakEvenYear ? String(baseKPIs.breakEvenYear + 1) : '—'
|
|
|
|
const bullCustomers = Math.round(baseCustomers * 1.7)
|
|
const bullArr = baseArr * 1.8
|
|
const bullEmployees = Math.round(baseEmployees * 1.3)
|
|
const bullCash = Math.round(baseCash * 2.0)
|
|
const bullBreakEven = baseKPIs.breakEvenYear ? String(baseKPIs.breakEvenYear - 1) : '—'
|
|
|
|
const baseAssumptions = isWandeldarlehen
|
|
? (de ? [
|
|
`Kundenwachstum: 8% monatlich (Slow), ab m32: 15%`,
|
|
'Mix: 60% Starter, 25% Professional, 15% Enterprise',
|
|
`Personalaufbau: 3→${baseEmployees} Personen (lean)`,
|
|
'Serverkosten: 50€/Kunde + 300€ Basis',
|
|
`Break-Even ${baseBreakEven}`,
|
|
] : [
|
|
`Customer growth: 8% monthly (slow), from m32: 15%`,
|
|
'Mix: 60% Starter, 25% Professional, 15% Enterprise',
|
|
`Hiring: 3→${baseEmployees} people (lean)`,
|
|
'Server costs: €50/customer + €300 base',
|
|
`Break-even ${baseBreakEven}`,
|
|
])
|
|
: (de ? [
|
|
'Kundenwachstum wie geplant (5→1.200)',
|
|
'Mix: 60% Starter, 25% Professional, 15% Enterprise',
|
|
'Personalaufbau 5→10→17→25→35',
|
|
'Serverkosten 100€ pro Kunde + 2.000€ Basis',
|
|
'Break-Even Mitte 2029',
|
|
] : [
|
|
'Customer growth as planned (5→1,200)',
|
|
'Mix: 60% Starter, 25% Professional, 15% Enterprise',
|
|
'Hiring 5→10→17→25→35',
|
|
'Server costs €100 per customer + €2,000 base',
|
|
'Break-even mid 2029',
|
|
])
|
|
|
|
const cases = [
|
|
{
|
|
name: 'Bear Case',
|
|
icon: TrendingDown,
|
|
color: 'text-red-400',
|
|
bg: 'bg-red-500/10 border-red-500/20',
|
|
desc: de ? 'Langsames Wachstum, höhere Churn' : 'Slow growth, higher churn',
|
|
assumptions: de ? [
|
|
'Kundenwachstum 50% langsamer als Base',
|
|
'Churn Rate 8% pro Monat (Startups)',
|
|
'Durchschnittspreis 20% niedriger',
|
|
'Personalaufbau verzögert um 6 Monate',
|
|
] : [
|
|
'Customer growth 50% slower than base',
|
|
'Churn rate 8% per month (startups)',
|
|
'Average price 20% lower',
|
|
'Hiring delayed by 6 months',
|
|
],
|
|
kpis: {
|
|
kunden2030: `~${bearCustomers.toLocaleString('de-DE')}`,
|
|
arr2030: fmtArr(bearArr, de),
|
|
ma2030: String(bearEmployees),
|
|
breakEven: bearBreakEven,
|
|
cash2030: fmtCash(bearCash, de),
|
|
},
|
|
},
|
|
{
|
|
name: 'Base Case',
|
|
icon: Minus,
|
|
color: 'text-indigo-400',
|
|
bg: 'bg-indigo-500/10 border-indigo-500/20',
|
|
desc: de ? 'Aktueller Finanzplan' : 'Current financial plan',
|
|
assumptions: baseAssumptions,
|
|
kpis: {
|
|
kunden2030: `~${baseCustomers.toLocaleString('de-DE')}`,
|
|
arr2030: fmtArr(baseArr, de),
|
|
ma2030: String(baseEmployees),
|
|
breakEven: baseBreakEven,
|
|
cash2030: fmtCash(baseCash, de),
|
|
},
|
|
},
|
|
{
|
|
name: 'Bull Case',
|
|
icon: TrendingUp,
|
|
color: 'text-emerald-400',
|
|
bg: 'bg-emerald-500/10 border-emerald-500/20',
|
|
desc: de ? 'Beschleunigtes Wachstum' : 'Accelerated growth',
|
|
assumptions: de ? [
|
|
'Kundenwachstum 70% schneller (Regulierungsdruck)',
|
|
'Enterprise-Anteil steigt auf 20%',
|
|
'Durchschnittspreis 15% höher (Upselling)',
|
|
'Channel-Partner ab Q1/2028',
|
|
] : [
|
|
'Customer growth 70% faster (regulation pressure)',
|
|
'Enterprise share rises to 20%',
|
|
'Average price 15% higher (upselling)',
|
|
'Channel partners from Q1/2028',
|
|
],
|
|
kpis: {
|
|
kunden2030: `~${bullCustomers.toLocaleString('de-DE')}`,
|
|
arr2030: fmtArr(bullArr, de),
|
|
ma2030: String(bullEmployees),
|
|
breakEven: bullBreakEven,
|
|
cash2030: fmtCash(bullCash, de),
|
|
},
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
<FadeInView className="text-center mb-6">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-2">
|
|
<GradientText>{i.annex.assumptions.title}</GradientText>
|
|
</h2>
|
|
<p className="text-sm text-white/50 max-w-2xl mx-auto">{i.annex.assumptions.subtitle}</p>
|
|
</FadeInView>
|
|
|
|
<div className="grid md:grid-cols-3 gap-4 mb-6">
|
|
{cases.map((c, idx) => {
|
|
const Icon = c.icon
|
|
return (
|
|
<FadeInView key={idx} delay={0.1 + idx * 0.1}>
|
|
<GlassCard hover={false} className={`p-4 h-full ${c.bg} border`}>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Icon className={`w-5 h-5 ${c.color}`} />
|
|
<h3 className={`text-base font-bold ${c.color}`}>{c.name}</h3>
|
|
</div>
|
|
<p className="text-xs text-white/40 mb-3">{c.desc}</p>
|
|
|
|
<div className="space-y-1.5 mb-4">
|
|
{c.assumptions.map((a, i) => (
|
|
<p key={i} className="text-xs text-white/60 pl-3 relative">
|
|
<span className={`absolute left-0 top-1 w-1.5 h-1.5 rounded-full ${c.color.replace('text-', 'bg-')}/60`} />
|
|
{a}
|
|
</p>
|
|
))}
|
|
</div>
|
|
|
|
<div className="border-t border-white/10 pt-3 space-y-1.5">
|
|
{[
|
|
{ label: de ? 'Kunden 2030' : 'Customers 2030', value: c.kpis.kunden2030 },
|
|
{ label: 'ARR 2030', value: c.kpis.arr2030 },
|
|
{ label: de ? 'Mitarbeiter' : 'Employees', value: c.kpis.ma2030 },
|
|
{ label: 'Break-Even', value: c.kpis.breakEven },
|
|
{ label: 'Cash 2030', value: c.kpis.cash2030 },
|
|
].map((kpi, i) => (
|
|
<div key={i} className="flex justify-between text-xs">
|
|
<span className="text-white/40">{kpi.label}</span>
|
|
<span className={`font-mono font-bold ${c.color}`}>{kpi.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</GlassCard>
|
|
</FadeInView>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Comparison Table */}
|
|
<FadeInView delay={0.5}>
|
|
<GlassCard hover={false} className="p-4">
|
|
<h3 className="text-xs font-bold text-white/40 uppercase tracking-wider mb-3">
|
|
{de ? 'Szenario-Vergleich 2030' : 'Scenario Comparison 2030'}
|
|
</h3>
|
|
<table className="w-full text-xs">
|
|
<thead>
|
|
<tr className="border-b border-white/10">
|
|
<th className="text-left py-2 text-white/40"></th>
|
|
<th className="text-right py-2 text-red-400">Bear</th>
|
|
<th className="text-right py-2 text-indigo-400 font-bold">Base</th>
|
|
<th className="text-right py-2 text-emerald-400">Bull</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{[
|
|
{ label: de ? 'Kunden' : 'Customers', bear: cases[0].kpis.kunden2030, base: cases[1].kpis.kunden2030, bull: cases[2].kpis.kunden2030 },
|
|
{ label: 'ARR', bear: cases[0].kpis.arr2030, base: cases[1].kpis.arr2030, bull: cases[2].kpis.arr2030 },
|
|
{ label: de ? 'Mitarbeiter' : 'Employees', bear: cases[0].kpis.ma2030, base: cases[1].kpis.ma2030, bull: cases[2].kpis.ma2030 },
|
|
{ label: 'Break-Even', bear: cases[0].kpis.breakEven, base: cases[1].kpis.breakEven, bull: cases[2].kpis.breakEven },
|
|
{ label: 'Cash', bear: cases[0].kpis.cash2030, base: cases[1].kpis.cash2030, bull: cases[2].kpis.cash2030 },
|
|
].map((row, idx) => (
|
|
<tr key={idx} className="border-b border-white/[0.03]">
|
|
<td className="py-1.5 text-white/60">{row.label}</td>
|
|
<td className="py-1.5 text-right text-red-400/70 font-mono">{row.bear}</td>
|
|
<td className="py-1.5 text-right text-indigo-300 font-mono font-bold">{row.base}</td>
|
|
<td className="py-1.5 text-right text-emerald-400/70 font-mono">{row.bull}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</GlassCard>
|
|
</FadeInView>
|
|
</div>
|
|
)
|
|
}
|