0b30c5e66c
Some checks failed
Build pitch-deck / build-push-deploy (push) Failing after 21s
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) Failing after 6s
CI / test-python-voice (push) Failing after 9s
CI / test-bqas (push) Failing after 8s
4 new fp_scenarios created on production: - Wandeldarlehen Bear (5%/8% growth, 1.5x churn → 11 customers 2030) - Wandeldarlehen Bull (12%/16% growth, 0.7x churn → 999 customers 2030) - 1 Mio Bear (6%/10% growth, 1.5x churn → 22 customers 2030) - 1 Mio Bull (12%/18% growth, 0.7x churn → 2574 customers 2030) AssumptionsSlide loads all 3 scenarios (Bear/Base/Bull) from their respective fp_* tables. No more scaling factors — real DB data. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
229 lines
10 KiB
TypeScript
229 lines
10 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
|
|
}
|
|
|
|
interface SheetRow {
|
|
row_label?: string
|
|
values?: Record<string, number>
|
|
values_total?: Record<string, number>
|
|
}
|
|
|
|
interface ScenarioKPIs {
|
|
arr: number
|
|
customers: number
|
|
headcount: number
|
|
cash: number
|
|
breakEvenYear: string
|
|
}
|
|
|
|
function fmtArr(v: number, de: boolean): string {
|
|
if (v >= 1_000_000) return de ? `~${(v / 1_000_000).toFixed(1).replace('.', ',')} Mio. EUR` : `~EUR ${(v / 1_000_000).toFixed(1)}M`
|
|
if (v >= 1000) return de ? `~${Math.round(v / 1000)}k EUR` : `~EUR ${Math.round(v / 1000)}k`
|
|
return de ? `~${v} EUR` : `~EUR ${v}`
|
|
}
|
|
|
|
function fmtCash(v: number, de: boolean): string {
|
|
if (Math.abs(v) >= 1_000_000) return de ? `~${(v / 1_000_000).toFixed(1).replace('.', ',')} Mio. EUR` : `~EUR ${(v / 1_000_000).toFixed(1)}M`
|
|
return de ? `~${Math.round(v / 1000)}k EUR` : `~EUR ${Math.round(v / 1000)}k`
|
|
}
|
|
|
|
async function loadScenarioKPIs(scenarioId: string | null): Promise<ScenarioKPIs> {
|
|
const param = scenarioId ? `?scenarioId=${scenarioId}` : ''
|
|
try {
|
|
const [guvRes, liqRes, persRes, kundenRes] = await Promise.all([
|
|
fetch(`/api/finanzplan/guv${param}`, { cache: 'no-store' }),
|
|
fetch(`/api/finanzplan/liquiditaet${param}`, { cache: 'no-store' }),
|
|
fetch(`/api/finanzplan/personalkosten${param}`, { cache: 'no-store' }),
|
|
fetch(`/api/finanzplan/kunden${param}`, { 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 ebit = findGuv('EBIT')?.values || {}
|
|
let breakEvenYear = '—'
|
|
for (const y of [2026, 2027, 2028, 2029, 2030]) {
|
|
if ((ebit[`y${y}`] || 0) > 0) { breakEvenYear = String(y); break }
|
|
}
|
|
|
|
return {
|
|
arr: findGuv('Umsatzerlöse')?.values?.y2030 || 0,
|
|
customers: kundenGesamt?.values?.m60 || 0,
|
|
headcount: (pers.rows || []).filter((r: SheetRow) => ((r.values_total || r.values)?.m60 || 0) > 0).length,
|
|
cash: findLiq('LIQUIDIT')?.values?.m60 || findLiq('LIQUIDITAET')?.values?.m60 || 0,
|
|
breakEvenYear,
|
|
}
|
|
} catch {
|
|
return { arr: 0, customers: 0, headcount: 0, cash: 0, breakEvenYear: '—' }
|
|
}
|
|
}
|
|
|
|
export default function AssumptionsSlide({ lang, isWandeldarlehen }: AssumptionsSlideProps) {
|
|
const i = t(lang)
|
|
const de = lang === 'de'
|
|
|
|
const [scenarioData, setScenarioData] = useState<{ bear: ScenarioKPIs; base: ScenarioKPIs; bull: ScenarioKPIs } | null>(null)
|
|
|
|
useEffect(() => {
|
|
async function load() {
|
|
const baseId = isWandeldarlehen ? 'c0000000-0000-0000-0000-000000000200' : null
|
|
const bearId = isWandeldarlehen ? 'd0000000-0000-0000-0000-000000000201' : 'd0000000-0000-0000-0000-000000000301'
|
|
const bullId = isWandeldarlehen ? 'd0000000-0000-0000-0000-000000000202' : 'd0000000-0000-0000-0000-000000000302'
|
|
const [bear, base, bull] = await Promise.all([loadScenarioKPIs(bearId), loadScenarioKPIs(baseId), loadScenarioKPIs(bullId)])
|
|
setScenarioData({ bear, base, bull })
|
|
}
|
|
load()
|
|
}, [isWandeldarlehen])
|
|
|
|
const bear = scenarioData?.bear || { arr: 0, customers: 0, headcount: 0, cash: 0, breakEvenYear: '—' }
|
|
const base = scenarioData?.base || { arr: 0, customers: 0, headcount: 0, cash: 0, breakEvenYear: '—' }
|
|
const bull = scenarioData?.bull || { arr: 0, customers: 0, headcount: 0, cash: 0, breakEvenYear: '—' }
|
|
|
|
const baseAssumptions = isWandeldarlehen
|
|
? (de ? [
|
|
'Kundenwachstum: 8% monatlich, ab m32: 15%',
|
|
'Mix: 60% Starter, 25% Professional, 15% Enterprise',
|
|
`Personalaufbau: 3→${base.headcount} Personen (lean)`,
|
|
'Serverkosten: 50€/Kunde + 300€ Basis',
|
|
] : [
|
|
'Customer growth: 8% monthly, from m32: 15%',
|
|
'Mix: 60% Starter, 25% Professional, 15% Enterprise',
|
|
`Hiring: 3→${base.headcount} people (lean)`,
|
|
'Server costs: €50/customer + €300 base',
|
|
])
|
|
: (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',
|
|
] : [
|
|
'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',
|
|
])
|
|
|
|
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 40% langsamer', 'Churn Rate 50% höher', 'Personalaufbau wie Base Case']
|
|
: ['Customer growth 40% slower', 'Churn rate 50% higher', 'Hiring same as base case'],
|
|
kpis: bear,
|
|
},
|
|
{
|
|
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: base,
|
|
},
|
|
{
|
|
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 30-50% schneller', 'Churn Rate 30% niedriger', 'Personalaufbau wie Base Case']
|
|
: ['Customer growth 30-50% faster', 'Churn rate 30% lower', 'Hiring same as base case'],
|
|
kpis: bull,
|
|
},
|
|
]
|
|
|
|
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.customers.toLocaleString('de-DE')}` },
|
|
{ label: 'ARR 2030', value: fmtArr(c.kpis.arr, de) },
|
|
{ label: de ? 'Mitarbeiter' : 'Employees', value: String(c.kpis.headcount) },
|
|
{ label: 'Break-Even', value: c.kpis.breakEvenYear },
|
|
{ label: 'Cash 2030', value: fmtCash(c.kpis.cash, de) },
|
|
].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>
|
|
|
|
<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: `~${bear.customers.toLocaleString('de-DE')}`, base: `~${base.customers.toLocaleString('de-DE')}`, bull: `~${bull.customers.toLocaleString('de-DE')}` },
|
|
{ label: 'ARR', bear: fmtArr(bear.arr, de), base: fmtArr(base.arr, de), bull: fmtArr(bull.arr, de) },
|
|
{ label: de ? 'Mitarbeiter' : 'Employees', bear: String(bear.headcount), base: String(base.headcount), bull: String(bull.headcount) },
|
|
{ label: 'Break-Even', bear: bear.breakEvenYear, base: base.breakEvenYear, bull: bull.breakEvenYear },
|
|
{ label: 'Cash', bear: fmtCash(bear.cash, de), base: fmtCash(base.cash, de), bull: fmtCash(bull.cash, de) },
|
|
].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>
|
|
)
|
|
}
|