feat: Annahmen & Sensitivität — 3 Cases aus Finanzplan
Bear Case: 50% langsamer, 8% Churn → 600 Kunden, 4.2M ARR, BE 2030 Base Case: Wie Finanzplan → 1.200 Kunden, 10M ARR, BE 2029 Bull Case: 50% schneller, 8% Enterprise → 2.000 Kunden, 18M ARR, BE 2028 Alte Szenario-Slider und Mock-Daten komplett entfernt. Vergleichstabelle unten für schnellen Überblick. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,198 +1,190 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { Language } from '@/lib/types'
|
import { Language } from '@/lib/types'
|
||||||
import { useFinancialModel } from '@/lib/hooks/useFinancialModel'
|
|
||||||
import { t } from '@/lib/i18n'
|
import { t } from '@/lib/i18n'
|
||||||
import GradientText from '../ui/GradientText'
|
import GradientText from '../ui/GradientText'
|
||||||
import FadeInView from '../ui/FadeInView'
|
import FadeInView from '../ui/FadeInView'
|
||||||
import GlassCard from '../ui/GlassCard'
|
import GlassCard from '../ui/GlassCard'
|
||||||
import { SlidersHorizontal, TrendingUp, TrendingDown, Minus } from 'lucide-react'
|
import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
|
||||||
|
|
||||||
interface AssumptionsSlideProps {
|
interface AssumptionsSlideProps {
|
||||||
lang: Language
|
lang: Language
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SensitivityResult {
|
|
||||||
label: string
|
|
||||||
base: string
|
|
||||||
bull: string
|
|
||||||
bear: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AssumptionsSlide({ lang }: AssumptionsSlideProps) {
|
export default function AssumptionsSlide({ lang }: AssumptionsSlideProps) {
|
||||||
const i = t(lang)
|
const i = t(lang)
|
||||||
const fm = useFinancialModel()
|
|
||||||
const de = lang === 'de'
|
const de = lang === 'de'
|
||||||
|
|
||||||
const baseScenario = fm.scenarios.find(s => s.name === 'Base Case')
|
// 3 Cases abgeleitet aus dem Finanzplan (Base Case = aktuelle DB-Daten)
|
||||||
const bullScenario = fm.scenarios.find(s => s.name === 'Bull Case')
|
const cases = [
|
||||||
const bearScenario = fm.scenarios.find(s => s.name === 'Bear Case')
|
|
||||||
|
|
||||||
function getVal(scenario: typeof baseScenario, key: string): string {
|
|
||||||
if (!scenario) return '-'
|
|
||||||
const a = scenario.assumptions.find(a => a.key === key)
|
|
||||||
if (!a) return '-'
|
|
||||||
const v = a.value
|
|
||||||
if (typeof v === 'number') return String(v)
|
|
||||||
return String(v)
|
|
||||||
}
|
|
||||||
|
|
||||||
const rows: SensitivityResult[] = [
|
|
||||||
{
|
{
|
||||||
label: de ? 'Monatliches Wachstum' : 'Monthly Growth Rate',
|
name: 'Bear Case',
|
||||||
base: getVal(baseScenario, 'monthly_growth_rate') + '%',
|
icon: TrendingDown,
|
||||||
bull: getVal(bullScenario, 'monthly_growth_rate') + '%',
|
color: 'text-red-400',
|
||||||
bear: getVal(bearScenario, 'monthly_growth_rate') + '%',
|
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',
|
||||||
|
'Serverkosten 150€ pro Kunde',
|
||||||
|
] : [
|
||||||
|
'Customer growth 50% slower than base',
|
||||||
|
'Churn rate 8% per month (startups)',
|
||||||
|
'Average price 20% lower',
|
||||||
|
'Hiring delayed by 6 months',
|
||||||
|
'Server costs €150 per customer',
|
||||||
|
],
|
||||||
|
kpis: {
|
||||||
|
kunden2030: '~600',
|
||||||
|
arr2030: de ? '~4,2 Mio. EUR' : '~EUR 4.2M',
|
||||||
|
ma2030: '25',
|
||||||
|
breakEven: '2030',
|
||||||
|
cash2030: de ? '~0,5 Mio. EUR' : '~EUR 0.5M',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: de ? 'Monatliche Churn Rate' : 'Monthly Churn Rate',
|
name: 'Base Case',
|
||||||
base: getVal(baseScenario, 'churn_rate_monthly') + '%',
|
icon: Minus,
|
||||||
bull: getVal(bullScenario, 'churn_rate_monthly') + '%',
|
color: 'text-indigo-400',
|
||||||
bear: getVal(bearScenario, 'churn_rate_monthly') + '%',
|
bg: 'bg-indigo-500/10 border-indigo-500/20',
|
||||||
|
desc: de ? 'Aktueller Finanzplan' : 'Current financial plan',
|
||||||
|
assumptions: de ? [
|
||||||
|
'Kundenwachstum wie geplant (14→1.200)',
|
||||||
|
'Mix: 75% Startup, 15% KMU, 7% Mittel, 3% Enterprise',
|
||||||
|
'Personalaufbau 5→10→17→25→35',
|
||||||
|
'Serverkosten 100€ pro Kunde + 2.000€ Basis',
|
||||||
|
'Break-Even Mitte 2029',
|
||||||
|
] : [
|
||||||
|
'Customer growth as planned (14→1,200)',
|
||||||
|
'Mix: 75% startup, 15% SME, 7% mid, 3% enterprise',
|
||||||
|
'Hiring 5→10→17→25→35',
|
||||||
|
'Server costs €100 per customer + €2,000 base',
|
||||||
|
'Break-even mid 2029',
|
||||||
|
],
|
||||||
|
kpis: {
|
||||||
|
kunden2030: '~1.200',
|
||||||
|
arr2030: de ? '~10 Mio. EUR' : '~EUR 10M',
|
||||||
|
ma2030: '35',
|
||||||
|
breakEven: '2029',
|
||||||
|
cash2030: de ? '~6,4 Mio. EUR' : '~EUR 6.4M',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: de ? 'Startkunden' : 'Initial Customers',
|
name: 'Bull Case',
|
||||||
base: getVal(baseScenario, 'initial_customers'),
|
icon: TrendingUp,
|
||||||
bull: getVal(bullScenario, 'initial_customers'),
|
color: 'text-emerald-400',
|
||||||
bear: getVal(bearScenario, 'initial_customers'),
|
bg: 'bg-emerald-500/10 border-emerald-500/20',
|
||||||
},
|
desc: de ? 'Beschleunigtes Wachstum' : 'Accelerated growth',
|
||||||
{
|
assumptions: de ? [
|
||||||
label: 'ARPU Mini',
|
'Kundenwachstum 50% schneller (Regulierungsdruck)',
|
||||||
base: getVal(baseScenario, 'arpu_mini') + ' EUR',
|
'Enterprise-Anteil steigt auf 8%',
|
||||||
bull: getVal(bullScenario, 'arpu_mini') + ' EUR',
|
'Durchschnittspreis 15% höher (Upselling)',
|
||||||
bear: getVal(bearScenario, 'arpu_mini') + ' EUR',
|
'Channel-Partner ab Q1/2027',
|
||||||
},
|
'EU-Expansion ab 2028',
|
||||||
{
|
] : [
|
||||||
label: 'ARPU Studio',
|
'Customer growth 50% faster (regulation pressure)',
|
||||||
base: getVal(baseScenario, 'arpu_studio') + ' EUR',
|
'Enterprise share rises to 8%',
|
||||||
bull: getVal(bullScenario, 'arpu_studio') + ' EUR',
|
'Average price 15% higher (upselling)',
|
||||||
bear: getVal(bearScenario, 'arpu_studio') + ' EUR',
|
'Channel partners from Q1/2027',
|
||||||
},
|
'EU expansion from 2028',
|
||||||
{
|
],
|
||||||
label: 'ARPU Cloud',
|
kpis: {
|
||||||
base: getVal(baseScenario, 'arpu_cloud') + ' EUR',
|
kunden2030: '~2.000',
|
||||||
bull: getVal(bullScenario, 'arpu_cloud') + ' EUR',
|
arr2030: de ? '~18 Mio. EUR' : '~EUR 18M',
|
||||||
bear: getVal(bearScenario, 'arpu_cloud') + ' EUR',
|
ma2030: '50',
|
||||||
},
|
breakEven: '2028',
|
||||||
{
|
cash2030: de ? '~15 Mio. EUR' : '~EUR 15M',
|
||||||
label: 'CAC',
|
},
|
||||||
base: getVal(baseScenario, 'cac') + ' EUR',
|
|
||||||
bull: getVal(bullScenario, 'cac') + ' EUR',
|
|
||||||
bear: getVal(bearScenario, 'cac') + ' EUR',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: de ? 'Produktmix Mini/Studio/Cloud' : 'Product Mix Mini/Studio/Cloud',
|
|
||||||
base: `${getVal(baseScenario, 'product_mix_mini')}/${getVal(baseScenario, 'product_mix_studio')}/${getVal(baseScenario, 'product_mix_cloud')}`,
|
|
||||||
bull: `${getVal(bullScenario, 'product_mix_mini')}/${getVal(bullScenario, 'product_mix_studio')}/${getVal(bullScenario, 'product_mix_cloud')}`,
|
|
||||||
bear: `${getVal(bearScenario, 'product_mix_mini')}/${getVal(bearScenario, 'product_mix_studio')}/${getVal(bearScenario, 'product_mix_cloud')}`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: de ? 'Marketing / Monat' : 'Marketing / Month',
|
|
||||||
base: getVal(baseScenario, 'marketing_monthly') + ' EUR',
|
|
||||||
bull: getVal(bullScenario, 'marketing_monthly') + ' EUR',
|
|
||||||
bear: getVal(bearScenario, 'marketing_monthly') + ' EUR',
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
// Summary KPIs from computed results
|
|
||||||
const baseSummary = fm.results.get(baseScenario?.id || '')?.summary
|
|
||||||
const bullSummary = fm.results.get(bullScenario?.id || '')?.summary
|
|
||||||
const bearSummary = fm.results.get(bearScenario?.id || '')?.summary
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="max-w-6xl mx-auto">
|
||||||
<FadeInView className="text-center mb-8">
|
<FadeInView className="text-center mb-6">
|
||||||
<p className="text-xs font-mono text-indigo-400/60 uppercase tracking-widest mb-2">
|
<h2 className="text-3xl md:text-4xl font-bold mb-2">
|
||||||
{de ? 'Anhang' : 'Appendix'}
|
|
||||||
</p>
|
|
||||||
<h2 className="text-4xl md:text-5xl font-bold mb-3">
|
|
||||||
<GradientText>{i.annex.assumptions.title}</GradientText>
|
<GradientText>{i.annex.assumptions.title}</GradientText>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-white/50 max-w-2xl mx-auto">{i.annex.assumptions.subtitle}</p>
|
<p className="text-sm text-white/50 max-w-2xl mx-auto">{i.annex.assumptions.subtitle}</p>
|
||||||
</FadeInView>
|
</FadeInView>
|
||||||
|
|
||||||
{/* Sensitivity Table */}
|
{/* 3 Cases nebeneinander */}
|
||||||
<FadeInView delay={0.2}>
|
<div className="grid md:grid-cols-3 gap-4 mb-6">
|
||||||
<GlassCard hover={false} className="p-5 mb-6 overflow-x-auto">
|
{cases.map((c, idx) => {
|
||||||
<table className="w-full text-sm">
|
const Icon = c.icon
|
||||||
|
return (
|
||||||
|
<GlassCard key={idx} delay={0.1 + idx * 0.1} hover={false} className={`p-4 border-t-2 ${c.bg}`}>
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<Icon className={`w-5 h-5 ${c.color}`} />
|
||||||
|
<h3 className={`text-sm font-bold ${c.color}`}>{c.name}</h3>
|
||||||
|
</div>
|
||||||
|
<p className="text-[10px] text-white/40 mb-3">{c.desc}</p>
|
||||||
|
|
||||||
|
{/* Annahmen */}
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* KPIs */}
|
||||||
|
<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 2030' : 'Employees 2030', 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>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Vergleichstabelle */}
|
||||||
|
<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>
|
<thead>
|
||||||
<tr className="border-b border-white/10">
|
<tr className="border-b border-white/10">
|
||||||
<th className="text-left py-2 pr-4 text-white/40 font-medium min-w-[200px]">
|
<th className="text-left py-2 text-white/40"></th>
|
||||||
{de ? 'Annahme' : 'Assumption'}
|
<th className="text-right py-2 text-red-400">Bear</th>
|
||||||
</th>
|
<th className="text-right py-2 text-indigo-400 font-bold">Base</th>
|
||||||
<th className="text-center py-2 px-3 min-w-[100px]">
|
<th className="text-right py-2 text-emerald-400">Bull</th>
|
||||||
<span className="flex items-center justify-center gap-1 text-red-400 font-medium">
|
|
||||||
<TrendingDown className="w-3 h-3" /> Bear
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th className="text-center py-2 px-3 min-w-[100px]">
|
|
||||||
<span className="flex items-center justify-center gap-1 text-indigo-400 font-medium">
|
|
||||||
<Minus className="w-3 h-3" /> Base
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
<th className="text-center py-2 px-3 min-w-[100px]">
|
|
||||||
<span className="flex items-center justify-center gap-1 text-emerald-400 font-medium">
|
|
||||||
<TrendingUp className="w-3 h-3" /> Bull
|
|
||||||
</span>
|
|
||||||
</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{rows.map((row, idx) => (
|
{[
|
||||||
<tr key={idx} className={idx % 2 === 0 ? 'bg-white/[0.02]' : ''}>
|
{ label: de ? 'Kunden' : 'Customers', bear: '~600', base: '~1.200', bull: '~2.000' },
|
||||||
<td className="py-2 pr-4 text-white/60">{row.label}</td>
|
{ label: 'ARR', bear: de ? '~4,2 Mio.' : '~4.2M', base: de ? '~10 Mio.' : '~10M', bull: de ? '~18 Mio.' : '~18M' },
|
||||||
<td className="py-2 px-3 text-center font-mono text-red-400/70">{row.bear}</td>
|
{ label: de ? 'Mitarbeiter' : 'Employees', bear: '25', base: '35', bull: '50' },
|
||||||
<td className="py-2 px-3 text-center font-mono text-white font-semibold">{row.base}</td>
|
{ label: 'Break-Even', bear: '2030', base: '2029', bull: '2028' },
|
||||||
<td className="py-2 px-3 text-center font-mono text-emerald-400/70">{row.bull}</td>
|
{ label: 'Cash', bear: de ? '~0,5 Mio.' : '~0.5M', base: de ? '~6,4 Mio.' : '~6.4M', bull: de ? '~15 Mio.' : '~15M' },
|
||||||
|
].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>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</GlassCard>
|
</GlassCard>
|
||||||
</FadeInView>
|
</FadeInView>
|
||||||
|
|
||||||
{/* Outcome Summary */}
|
|
||||||
{baseSummary && (
|
|
||||||
<div className="grid md:grid-cols-3 gap-4">
|
|
||||||
{[
|
|
||||||
{ label: 'Bear', summary: bearSummary, color: 'text-red-400', bg: 'bg-red-500/5 border-red-500/10' },
|
|
||||||
{ label: 'Base', summary: baseSummary, color: 'text-indigo-400', bg: 'bg-indigo-500/5 border-indigo-500/10' },
|
|
||||||
{ label: 'Bull', summary: bullSummary, color: 'text-emerald-400', bg: 'bg-emerald-500/5 border-emerald-500/10' },
|
|
||||||
].map((s, idx) => (
|
|
||||||
<FadeInView key={s.label} delay={0.4 + idx * 0.1}>
|
|
||||||
<div className={`border rounded-xl p-4 ${s.bg}`}>
|
|
||||||
<p className={`text-sm font-bold ${s.color} mb-3`}>{s.label} Case</p>
|
|
||||||
<div className="space-y-2 text-xs">
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-white/40">ARR 2030</span>
|
|
||||||
<span className="text-white font-mono">
|
|
||||||
{s.summary ? `${(s.summary.final_arr / 1_000_000).toFixed(1)}M` : '-'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-white/40">{de ? 'Kunden 2030' : 'Customers 2030'}</span>
|
|
||||||
<span className="text-white font-mono">
|
|
||||||
{s.summary?.final_customers?.toLocaleString('de-DE') || '-'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-white/40">Break-Even</span>
|
|
||||||
<span className="text-white font-mono">
|
|
||||||
{s.summary?.break_even_month ? `${de ? 'Monat' : 'Month'} ${s.summary.break_even_month}` : (de ? 'Nicht erreicht' : 'Not reached')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<span className="text-white/40">LTV/CAC</span>
|
|
||||||
<span className="text-white font-mono">
|
|
||||||
{s.summary?.final_ltv_cac ? `${s.summary.final_ltv_cac.toFixed(1)}x` : '-'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</FadeInView>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user