feat: add pitch-deck service to core infrastructure

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>
2026-02-14 19:44:27 +01:00
parent 3739d2b8b9
commit f2a24d7341
68 changed files with 5911 additions and 0 deletions
--- a/pitch-deck/components/slides/FinancialsSlide.tsx
+++ b/pitch-deck/components/slides/FinancialsSlide.tsx
@@ -0,0 +1,277 @@
+'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>
+  )
+}