0712d18824
Investors should not be able to modify business case assumptions. Questions should be directed to founders via the AI chat agent. Scenario switcher is kept for viewing different scenarios. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
262 lines
10 KiB
TypeScript
262 lines
10 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Language } from '@/lib/types'
|
|
import { t } from '@/lib/i18n'
|
|
import ProjectionFooter from '../ui/ProjectionFooter'
|
|
import { useFinancialModel } from '@/lib/hooks/useFinancialModel'
|
|
import GradientText from '../ui/GradientText'
|
|
import FadeInView from '../ui/FadeInView'
|
|
import FinancialChart from '../ui/FinancialChart'
|
|
import FinancialSliders from '../ui/FinancialSliders'
|
|
import KPICard from '../ui/KPICard'
|
|
import RunwayGauge from '../ui/RunwayGauge'
|
|
import WaterfallChart from '../ui/WaterfallChart'
|
|
import UnitEconomicsCards from '../ui/UnitEconomicsCards'
|
|
import ScenarioSwitcher from '../ui/ScenarioSwitcher'
|
|
import AnnualPLTable from '../ui/AnnualPLTable'
|
|
import AnnualCashflowChart from '../ui/AnnualCashflowChart'
|
|
|
|
type FinTab = 'overview' | 'guv' | 'cashflow'
|
|
|
|
interface FinancialsSlideProps {
|
|
lang: Language
|
|
investorId: string | null
|
|
}
|
|
|
|
export default function FinancialsSlide({ lang, investorId }: FinancialsSlideProps) {
|
|
const i = t(lang)
|
|
const fm = useFinancialModel(investorId)
|
|
const [activeTab, setActiveTab] = useState<FinTab>('overview')
|
|
const de = lang === 'de'
|
|
|
|
const activeResults = fm.activeResults
|
|
const summary = activeResults?.summary
|
|
const lastResult = activeResults?.results[activeResults.results.length - 1]
|
|
|
|
// Build scenario color map
|
|
const scenarioColors: Record<string, string> = {}
|
|
fm.scenarios.forEach(s => { scenarioColors[s.id] = s.color })
|
|
|
|
// Build compare results (exclude active scenario)
|
|
const compareResults = new Map(
|
|
Array.from(fm.results.entries()).filter(([id]) => id !== fm.activeScenarioId)
|
|
)
|
|
|
|
// Initial funding from assumptions
|
|
const initialFunding = (fm.activeScenario?.assumptions.find(a => a.key === 'initial_funding')?.value as number) || 200000
|
|
|
|
const tabs: { id: FinTab; label: string }[] = [
|
|
{ id: 'overview', label: de ? 'Übersicht' : 'Overview' },
|
|
{ id: 'guv', label: de ? 'GuV (Jahres)' : 'P&L (Annual)' },
|
|
{ id: 'cashflow', label: de ? 'Cashflow & Finanzbedarf' : 'Cashflow & Funding' },
|
|
]
|
|
|
|
if (fm.loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="w-8 h-8 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto px-4">
|
|
<FadeInView className="text-center mb-3">
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-1">
|
|
<GradientText>{i.financials.title}</GradientText>
|
|
</h2>
|
|
<p className="text-sm text-white/50 max-w-2xl mx-auto">{i.financials.subtitle}</p>
|
|
</FadeInView>
|
|
|
|
{/* Hero KPI Cards */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-3">
|
|
<KPICard
|
|
label={`ARR 2030`}
|
|
value={summary ? Math.round(summary.final_arr / 1_000_000 * 10) / 10 : 0}
|
|
suffix=" Mio."
|
|
decimals={1}
|
|
trend="up"
|
|
color="#6366f1"
|
|
delay={0.1}
|
|
subLabel="EUR"
|
|
/>
|
|
<KPICard
|
|
label={de ? 'Kunden 2030' : 'Customers 2030'}
|
|
value={summary?.final_customers || 0}
|
|
trend="up"
|
|
color="#22c55e"
|
|
delay={0.15}
|
|
/>
|
|
<KPICard
|
|
label="Break-Even"
|
|
value={summary?.break_even_month || 0}
|
|
suffix={de ? ' Mo.' : ' mo.'}
|
|
trend={summary?.break_even_month && summary.break_even_month <= 24 ? 'up' : 'down'}
|
|
color="#eab308"
|
|
delay={0.2}
|
|
subLabel={summary?.break_even_month ? `~${Math.ceil((summary.break_even_month) / 12) + 2025}` : ''}
|
|
/>
|
|
<KPICard
|
|
label="LTV/CAC"
|
|
value={summary?.final_ltv_cac || 0}
|
|
suffix="x"
|
|
decimals={1}
|
|
trend={(summary?.final_ltv_cac || 0) >= 3 ? 'up' : 'down'}
|
|
color="#a855f7"
|
|
delay={0.25}
|
|
/>
|
|
</div>
|
|
|
|
{/* Tab Navigation */}
|
|
<div className="flex items-center gap-1 mb-3">
|
|
{tabs.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`px-3 py-1.5 rounded-lg text-xs transition-all
|
|
${activeTab === tab.id
|
|
? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30'
|
|
: 'bg-white/[0.04] text-white/40 border border-transparent hover:text-white/60 hover:bg-white/[0.06] animate-[pulse_3s_ease-in-out_infinite]'
|
|
}`}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Main content: 3-column layout */}
|
|
<div className="grid md:grid-cols-12 gap-3">
|
|
{/* Left: Charts (8 columns) */}
|
|
<div className="md:col-span-8 space-y-3">
|
|
|
|
{/* TAB: Overview — monatlicher Chart + Waterfall + Unit Economics */}
|
|
{activeTab === 'overview' && (
|
|
<>
|
|
<FadeInView delay={0.1}>
|
|
<div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<p className="text-xs text-white/40">
|
|
{de ? 'Umsatz vs. Kosten (60 Monate)' : 'Revenue vs. Costs (60 months)'}
|
|
</p>
|
|
<div className="flex items-center gap-3 text-[9px]">
|
|
<span className="flex items-center gap-1"><span className="w-2 h-0.5 bg-indigo-500 inline-block" /> {de ? 'Umsatz' : 'Revenue'}</span>
|
|
<span className="flex items-center gap-1"><span className="w-2 h-0.5 bg-red-400 inline-block" style={{ borderBottom: '1px dashed' }} /> {de ? 'Kosten' : 'Costs'}</span>
|
|
<span className="flex items-center gap-1"><span className="w-2 h-0.5 bg-emerald-500 inline-block" /> {de ? 'Kunden' : 'Customers'}</span>
|
|
</div>
|
|
</div>
|
|
<FinancialChart
|
|
activeResults={activeResults}
|
|
compareResults={compareResults}
|
|
compareMode={fm.compareMode}
|
|
scenarioColors={scenarioColors}
|
|
lang={lang}
|
|
/>
|
|
</div>
|
|
</FadeInView>
|
|
|
|
<div className="grid md:grid-cols-2 gap-3">
|
|
<FadeInView delay={0.2}>
|
|
<div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3">
|
|
<p className="text-xs text-white/40 mb-2">
|
|
{de ? 'Cash-Flow (Quartal)' : 'Cash Flow (Quarterly)'}
|
|
</p>
|
|
{activeResults && <WaterfallChart results={activeResults.results} lang={lang} />}
|
|
</div>
|
|
</FadeInView>
|
|
|
|
<FadeInView delay={0.25}>
|
|
<div className="space-y-3">
|
|
<div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3 flex justify-center">
|
|
<RunwayGauge
|
|
months={lastResult?.runway_months || 0}
|
|
size={120}
|
|
label={de ? 'Runway (Monate)' : 'Runway (months)'}
|
|
/>
|
|
</div>
|
|
{lastResult && (
|
|
<UnitEconomicsCards
|
|
cac={lastResult.cac_eur}
|
|
ltv={lastResult.ltv_eur}
|
|
ltvCacRatio={lastResult.ltv_cac_ratio}
|
|
grossMargin={lastResult.gross_margin_pct}
|
|
churnRate={fm.activeScenario?.assumptions.find(a => a.key === 'churn_rate_monthly')?.value as number || 3}
|
|
lang={lang}
|
|
/>
|
|
)}
|
|
</div>
|
|
</FadeInView>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* TAB: GuV — Annual P&L Table */}
|
|
{activeTab === 'guv' && activeResults && (
|
|
<FadeInView delay={0.1}>
|
|
<div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<p className="text-xs text-white/40">
|
|
{de ? 'Gewinn- und Verlustrechnung (5 Jahre)' : 'Profit & Loss Statement (5 Years)'}
|
|
</p>
|
|
<p className="text-[9px] text-white/20">
|
|
{de ? 'Alle Werte in EUR' : 'All values in EUR'}
|
|
</p>
|
|
</div>
|
|
<AnnualPLTable results={activeResults.results} lang={lang} />
|
|
</div>
|
|
</FadeInView>
|
|
)}
|
|
|
|
{/* TAB: Cashflow & Finanzbedarf */}
|
|
{activeTab === 'cashflow' && activeResults && (
|
|
<FadeInView delay={0.1}>
|
|
<div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-4">
|
|
<p className="text-xs text-white/40 mb-3">
|
|
{de ? 'Jaehrlicher Cashflow & Finanzbedarf' : 'Annual Cash Flow & Funding Requirements'}
|
|
</p>
|
|
<AnnualCashflowChart
|
|
results={activeResults.results}
|
|
initialFunding={initialFunding}
|
|
lang={lang}
|
|
/>
|
|
</div>
|
|
</FadeInView>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right: Controls (4 columns) */}
|
|
<div className="md:col-span-4 space-y-3">
|
|
{/* Scenario Switcher */}
|
|
<FadeInView delay={0.15}>
|
|
<div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3">
|
|
<ScenarioSwitcher
|
|
scenarios={fm.scenarios}
|
|
activeId={fm.activeScenarioId}
|
|
compareMode={fm.compareMode}
|
|
onSelect={(id) => {
|
|
fm.setActiveScenarioId(id)
|
|
}}
|
|
onToggleCompare={() => {
|
|
if (!fm.compareMode) {
|
|
fm.computeAll()
|
|
}
|
|
fm.setCompareMode(!fm.compareMode)
|
|
}}
|
|
lang={lang}
|
|
/>
|
|
</div>
|
|
</FadeInView>
|
|
|
|
{fm.computing && (
|
|
<div className="flex items-center gap-2 text-[10px] text-indigo-400">
|
|
<div className="w-3 h-3 border border-indigo-400 border-t-transparent rounded-full animate-spin" />
|
|
{de ? 'Berechne...' : 'Computing...'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<ProjectionFooter lang={lang} />
|
|
</div>
|
|
)
|
|
}
|