f2a24d7341
Migrated pitch-deck from breakpilot-pwa to breakpilot-core. Container: bp-core-pitch-deck on port 3012. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
278 lines
11 KiB
TypeScript
278 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Language } from '@/lib/types'
|
|
import { t } from '@/lib/i18n'
|
|
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
|
|
}
|
|
|
|
export default function FinancialsSlide({ lang }: FinancialsSlideProps) {
|
|
const i = t(lang)
|
|
const fm = useFinancialModel()
|
|
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 ? 'Uebersicht' : '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]'
|
|
}`}
|
|
>
|
|
{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>
|
|
|
|
{/* Assumption Sliders */}
|
|
<FadeInView delay={0.2}>
|
|
<div className="bg-white/[0.05] backdrop-blur-xl border border-white/10 rounded-2xl p-3">
|
|
<p className="text-[10px] text-white/40 uppercase tracking-wider mb-2">
|
|
{i.financials.adjustAssumptions}
|
|
</p>
|
|
{fm.activeScenario && (
|
|
<FinancialSliders
|
|
assumptions={fm.activeScenario.assumptions}
|
|
onAssumptionChange={(key, value) => {
|
|
if (fm.activeScenarioId) {
|
|
fm.updateAssumption(fm.activeScenarioId, key, value)
|
|
}
|
|
}}
|
|
lang={lang}
|
|
/>
|
|
)}
|
|
{fm.computing && (
|
|
<div className="flex items-center gap-2 mt-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>
|
|
</FadeInView>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|