feat: complete core 5 elements and risk layer architecture

components/modules/sandbox/SandboxDemo.tsx

@@ -0,0 +1,815 @@
+'use client';
+
+import React, { useState, useMemo } from 'react';
+import { useSandboxStore, PortfolioHolding, Transaction } from '@/lib/store';
+import { calculateEWMA, calculateKellyFraction, calculateAssetCovariance } from '@/lib/math/statistics';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import 'katex/dist/katex.min.css';
+import { BlockMath, InlineMath } from 'react-katex';
+import {
+  TrendingUp, Wallet, ArrowDownRight, ArrowUpRight, Percent, Plus, FolderSync,
+  HelpCircle, Settings, Calendar, DollarSign, Tag, Check, AlertCircle, ChevronDown, ChevronUp, Sparkles
+} from 'lucide-react';
+
+export default function SandboxDemo() {
+  const {
+    portfolios,
+    activePortfolioId,
+    ewmaLambda,
+    createPortfolio,
+    setActivePortfolio,
+    executeTransaction,
+    setEwmaLambda,
+    scannerAlerts,
+    posteriorProbability
+  } = useSandboxStore();
+
+  // Selected portfolio
+  const activePortfolio = useMemo(() => {
+    return portfolios.find(p => p.id === activePortfolioId) || portfolios[0];
+  }, [portfolios, activePortfolioId]);
+
+  const [mounted, setMounted] = useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 text-slate-100 shadow-xl min-h-[400px] flex items-center justify-center">
+        <div className="text-slate-400 text-sm font-mono animate-pulse">Lade Sandbox-Modul...</div>
+      </div>
+    );
+  }
+
+  // UI state
+  const [showNewPortfolioModal, setShowNewPortfolioModal] = useState(false);
+  const [newPortfolioName, setNewPortfolioName] = useState('');
+  const [newStartingBalance, setNewStartingBalance] = useState(50000);
+  
+  const [tradeSymbol, setTradeSymbol] = useState('AAPL');
+  const [tradeWknOrIsin, setTradeWknOrIsin] = useState('865985');
+  const [tradeShares, setTradeShares] = useState(10);
+  const [tradePrice, setTradePrice] = useState(182);
+  const [tradeType, setTradeType] = useState<'BUY' | 'SELL'>('BUY');
+  const [simulateFees, setSimulateFees] = useState(true);
+  const [isBackfill, setIsBackfill] = useState(false);
+  const [backfillDate, setBackfillDate] = useState('2026-05-20');
+  const [hypothesisTag, setHypothesisTag] = useState('Fokus auf KI-Infrastruktur');
+  const [orderError, setOrderError] = useState<string | null>(null);
+  const [orderSuccess, setOrderSuccess] = useState(false);
+
+  const [showMathAccordion, setShowMathAccordion] = useState(false);
+  const [showMsciBenchmark, setShowMsciBenchmark] = useState(true);
+
+  // Kelly Position Sizing states
+  const [kellySource, setKellySource] = useState<'scanner' | 'crypto' | 'econometric' | 'custom'>('custom');
+  const [customProb, setCustomProb] = useState<number>(0.60);
+  const [oddsRatio, setOddsRatio] = useState<number>(1.5);
+
+  // Compute Net Worth
+  const netWorth = useMemo(() => {
+    const assetsVal = activePortfolio.holdings.reduce((sum, h) => sum + h.shares * h.currentPrice, 0);
+    return Math.round((activePortfolio.cash + assetsVal) * 100) / 100;
+  }, [activePortfolio]);
+
+  // Dynamic winning probability (p) based on selected source
+  const kellyProbability = useMemo(() => {
+    if (kellySource === 'scanner') {
+      const alert = scannerAlerts.find(a => a.ticker.toUpperCase() === tradeSymbol.toUpperCase());
+      return alert ? alert.overreactionScore / 100 : 0.52;
+    }
+    if (kellySource === 'crypto') {
+      return posteriorProbability; // e.g. 0.72
+    }
+    if (kellySource === 'econometric') {
+      return 0.65; // ROC target probability
+    }
+    return customProb;
+  }, [kellySource, customProb, tradeSymbol, scannerAlerts, posteriorProbability]);
+
+  // Check potential cluster risk for the input symbol
+  const potentialClusterRisk = useMemo(() => {
+    if (!tradeSymbol) return false;
+    const holdingsWithWeights = activePortfolio.holdings.map(h => ({
+      symbol: h.symbol,
+      weight: (h.shares * h.currentPrice) / (netWorth || 1.0)
+    }));
+    const covResult = calculateAssetCovariance(holdingsWithWeights, tradeSymbol);
+    return covResult.clusterRisk;
+  }, [activePortfolio.holdings, tradeSymbol, netWorth]);
+
+  // Compute Kelly fraction and recommended cash amount
+  const kellyFraction = useMemo(() => {
+    const rawKelly = calculateKellyFraction(kellyProbability, oddsRatio);
+    // Cap at Half-Kelly already done in calculateKellyFraction, but we can scale by 50% if there is cluster risk
+    return potentialClusterRisk ? rawKelly * 0.5 : rawKelly;
+  }, [kellyProbability, oddsRatio, potentialClusterRisk]);
+
+  const recommendedKellyCash = useMemo(() => {
+    return activePortfolio.cash * kellyFraction;
+  }, [activePortfolio.cash, kellyFraction]);
+
+  // Compute returns based on active portfolio's historical value series
+  const portfolioReturns = useMemo(() => {
+    const vals = activePortfolio.historicalValues;
+    if (vals.length < 2) return [];
+    const r: number[] = [];
+    for (let i = 1; i < vals.length; i++) {
+      r.push((vals[i].value - vals[i - 1].value) / vals[i - 1].value);
+    }
+    return r;
+  }, [activePortfolio.historicalValues]);
+
+  // Calculate EWMA Volatility live
+  const ewmaResult = useMemo(() => {
+    return calculateEWMA(portfolioReturns, ewmaLambda);
+  }, [portfolioReturns, ewmaLambda]);
+
+  // Combine data for charting
+  const chartData = useMemo(() => {
+    const vals = activePortfolio.historicalValues;
+    if (vals.length === 0) return [];
+    
+    // Normalize MSCI World index from the same starting value of the portfolio
+    const baseValue = vals[0].value;
+    let msciVal = baseValue;
+    
+    return vals.map((hv, idx) => {
+      // Deterministic pseudo-random walk for MSCI World
+      if (idx > 0) {
+        const rand = Math.sin(idx * 57.8) * 0.45 + 0.05; // range: -0.4% to +0.5% return
+        msciVal = msciVal * (1 + rand * 0.015);
+      }
+      
+      const vol = ewmaResult.series[idx - 1] || 0;
+      
+      return {
+        date: hv.date,
+        Portfolio: hv.value,
+        'MSCI World (Benchmark)': Math.round(msciVal),
+        'EWMA Vol (%)': parseFloat(vol.toFixed(2)),
+      };
+    });
+  }, [activePortfolio.historicalValues, ewmaResult]);
+
+  // Total gain/loss
+  const totalGainLoss = netWorth - activePortfolio.startingBalance;
+  const totalGainLossPct = (totalGainLoss / activePortfolio.startingBalance) * 100;
+  const isPositiveOverall = totalGainLoss >= 0;
+
+  const handleCreatePortfolio = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newPortfolioName.trim()) return;
+    createPortfolio(newPortfolioName, newStartingBalance);
+    setNewPortfolioName('');
+    setShowNewPortfolioModal(false);
+  };
+
+  const handleTransactionSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setOrderError(null);
+    setOrderSuccess(false);
+
+    if (tradeShares <= 0 || tradePrice <= 0) {
+      setOrderError('Bitte geben Sie eine gültige Stückzahl und einen Kurs an.');
+      return;
+    }
+
+    const ok = executeTransaction(
+      activePortfolio.id,
+      tradeSymbol,
+      tradeWknOrIsin,
+      tradeType,
+      tradeShares,
+      tradePrice,
+      simulateFees,
+      isBackfill,
+      backfillDate,
+      hypothesisTag
+    );
+
+    if (ok) {
+      setOrderSuccess(true);
+      setTimeout(() => setOrderSuccess(false), 3000);
+    } else {
+      setOrderError(
+        tradeType === 'BUY'
+          ? 'Unzureichendes Barguthaben (inklusive allfälliger Transaktionsgebühren).'
+          : 'Unzureichende Anteile im Depot für den Verkauf.'
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      
+      {activePortfolio.riskProfile?.status === 'RED' && (
+        <div className="bg-rose-950/40 border border-rose-800/80 text-rose-400 text-xs rounded-xl p-4 flex items-center gap-3 shadow-[0_0_15px_rgba(244,63,94,0.15)] animate-pulse">
+          <AlertCircle className="w-5 h-5 text-rose-400 shrink-0" />
+          <div className="flex-1">
+            <span className="font-bold">Kritische Klumpenrisiken (Kovarianz RED):</span> {activePortfolio.riskProfile.message}
+          </div>
+        </div>
+      )}
+
+      {/* SECTION 1: Portfolio Selector & Stats Bar */}
+      <div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 text-slate-100 shadow-xl relative overflow-hidden">
+        <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/10 rounded-full blur-3xl -z-10" />
+        
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
+          <div className="space-y-1">
+            <span className="text-emerald-400 text-xs font-semibold uppercase tracking-wider">Strategic Sandbox</span>
+            <div className="flex items-center gap-3">
+              <FolderSync className="text-emerald-400 w-6 h-6" />
+              <select
+                value={activePortfolioId}
+                onChange={(e) => setActivePortfolio(e.target.value)}
+                className="bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-slate-100 font-sans font-semibold text-lg focus:outline-none focus:border-emerald-500 cursor-pointer"
+              >
+                {portfolios.map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {p.name}
+                  </option>
+                ))}
+              </select>
+              <button
+                onClick={() => setShowNewPortfolioModal(true)}
+                className="p-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-emerald-400 hover:text-emerald-300 transition-colors border border-slate-700"
+                title="Neues Sandbox-Portfolio erstellen"
+              >
+                <Plus className="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+          
+          <div className="flex flex-wrap gap-4 w-full md:w-auto">
+            {/* Net Worth Card */}
+            <div className="flex-1 md:flex-initial bg-slate-950/80 border border-slate-800 rounded-xl p-3 px-5 min-w-[140px]">
+              <div className="text-[10px] text-slate-400 uppercase font-semibold">Gesamtwert</div>
+              <div className="font-mono text-xl font-bold text-slate-100 mt-1">
+                ${netWorth.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+              </div>
+            </div>
+
+            {/* Performance Card */}
+            <div className="flex-1 md:flex-initial bg-slate-950/80 border border-slate-800 rounded-xl p-3 px-5 min-w-[140px]">
+              <div className="text-[10px] text-slate-400 uppercase font-semibold">GuV (Gesamt)</div>
+              <div className={`font-mono text-xl font-bold mt-1 flex items-center gap-1 ${isPositiveOverall ? 'text-emerald-400' : 'text-rose-400'}`}>
+                {isPositiveOverall ? <ArrowUpRight className="w-5 h-5" /> : <ArrowDownRight className="w-5 h-5" />}
+                <span>{isPositiveOverall ? '+' : ''}{totalGainLossPct.toFixed(2)}%</span>
+              </div>
+            </div>
+
+            {/* Live EWMA Vol Card */}
+            <div className="flex-1 md:flex-initial bg-slate-950/80 border border-slate-800 rounded-xl p-3 px-5 min-w-[140px] relative group">
+              <div className="text-[10px] text-slate-400 uppercase font-semibold flex items-center gap-1">
+                <span>EWMA Volatilität</span>
+                <span className="cursor-help flex items-center" title="Annualisierte Schwankungsbreite basierend auf historischen Renditen.">
+                  <HelpCircle className="w-3.5 h-3.5 text-slate-500 group-hover:text-emerald-400 transition-colors" />
+                </span>
+              </div>
+              <div className="font-mono text-xl font-bold text-teal-400 mt-1">
+                {ewmaResult.latest.toFixed(2)}%
+              </div>
+            </div>
+
+            {/* Covariance Risk Traffic Light Card */}
+            <div className="flex-1 md:flex-initial bg-slate-950/80 border border-slate-800 rounded-xl p-3 px-5 min-w-[150px] relative group">
+              <div className="text-[10px] text-slate-400 uppercase font-semibold flex items-center gap-1">
+                <span>Kovarianz-Ampel</span>
+                <span className="cursor-help flex items-center" title="Systemische Portfolio-Klumpenrisiken basierend auf historischen Asset-Kovarianzen.">
+                  <HelpCircle className="w-3.5 h-3.5 text-slate-500 group-hover:text-rose-400 transition-colors" />
+                </span>
+              </div>
+              <div className="flex items-center gap-2 mt-1.5">
+                <span className={`w-3.5 h-3.5 rounded-full ${
+                  activePortfolio.riskProfile?.status === 'RED' ? 'bg-rose-500 animate-pulse shadow-[0_0_8px_#f43f5e]' :
+                  activePortfolio.riskProfile?.status === 'YELLOW' ? 'bg-amber-500 shadow-[0_0_8px_#f59e0b]' :
+                  'bg-emerald-500 shadow-[0_0_8px_#10b981]'
+                }`} />
+                <span className={`font-mono text-sm font-bold ${
+                  activePortfolio.riskProfile?.status === 'RED' ? 'text-rose-400' :
+                  activePortfolio.riskProfile?.status === 'YELLOW' ? 'text-amber-400' :
+                  'text-emerald-400'
+                }`}>
+                  {activePortfolio.riskProfile?.status || 'GREEN'} RISK
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Modal for creating a new Portfolio */}
+        {showNewPortfolioModal && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+            <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 max-w-sm w-full space-y-4 shadow-2xl">
+              <h3 className="text-lg font-bold text-white">Neues Sandbox-Portfolio</h3>
+              <form onSubmit={handleCreatePortfolio} className="space-y-4">
+                <div>
+                  <label className="text-xs text-slate-400 block mb-1">Portfolio Name</label>
+                  <input
+                    type="text"
+                    required
+                    placeholder="z.B. Biotech Risk High Yield"
+                    className="w-full bg-slate-950 border border-slate-800 rounded-lg p-2.5 text-slate-100 focus:outline-none focus:border-emerald-500"
+                    value={newPortfolioName}
+                    onChange={(e) => setNewPortfolioName(e.target.value)}
+                  />
+                </div>
+                <div>
+                  <label className="text-xs text-slate-400 block mb-1">Startkapital ($)</label>
+                  <input
+                    type="number"
+                    required
+                    className="w-full bg-slate-950 border border-slate-800 rounded-lg p-2.5 text-slate-100 focus:outline-none focus:border-emerald-500 font-mono"
+                    value={newStartingBalance}
+                    onChange={(e) => setNewStartingBalance(Number(e.target.value))}
+                  />
+                </div>
+                <div className="flex gap-3 pt-2">
+                  <button
+                    type="button"
+                    onClick={() => setShowNewPortfolioModal(false)}
+                    className="flex-1 bg-slate-850 hover:bg-slate-800 text-slate-300 font-semibold py-2 rounded-lg transition-colors border border-slate-700"
+                  >
+                    Abbrechen
+                  </button>
+                  <button
+                    type="submit"
+                    className="flex-1 bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-slate-950 font-bold py-2 rounded-lg transition-all shadow-lg shadow-emerald-500/20"
+                  >
+                    Erstellen
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        )}
+
+        {/* Accordion / Math Button */}
+        <div className="border-t border-slate-850 pt-4 mt-4">
+          <button
+            onClick={() => setShowMathAccordion(!showMathAccordion)}
+            className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-emerald-400 transition-colors focus:outline-none"
+          >
+            <span>{showMathAccordion ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}</span>
+            <span className="font-semibold uppercase tracking-wider">Mathematische Spezifikation & EWMA-Volatilitätsmodell</span>
+          </button>
+          
+          {showMathAccordion && (
+            <div className="mt-4 p-4 rounded-xl border border-slate-850 bg-slate-950/40 text-xs text-slate-300 space-y-4">
+              <div>
+                <h4 className="font-semibold text-emerald-400 mb-1.5">1. EWMA Volatilitätsmodell</h4>
+                <p className="mb-2">
+                  Die Volatilit&auml;t wird mittels des <strong>Exponentially Weighted Moving Average (EWMA)</strong>-Modells ermittelt. J&uuml;ngere Renditen erhalten hierbei ein h&ouml;heres Gewicht als weiter in der Vergangenheit liegende Renditen, gesteuert durch den Zerfallsparameter <InlineMath math="\lambda" /> (Lambda).
+                </p>
+                <div className="py-2 overflow-x-auto">
+                  <BlockMath math="\sigma_t^2 = \lambda \sigma_{t-1}^2 + (1 - \lambda) r_{t-1}^2" />
+                </div>
+                <p className="mb-2">
+                  Die t&auml;gliche Volatilit&auml;t <InlineMath math="\sigma_t" /> wird auf ein ganzes Jahr hochgerechnet (Annualisierung) unter der Annahme von 252 Handelstagen:
+                </p>
+                <div className="py-2 overflow-x-auto">
+                  <BlockMath math="\sigma_{\text{ann}} = \sqrt{\sigma_t^2 \times 252}" />
+                </div>
+                <p className="text-slate-400">
+                  RiskMetrics empfiehlt f&uuml;r t&auml;gliche Finanzdaten einen Lambda-Wert von <InlineMath math="\lambda = 0.94" />.
+                </p>
+              </div>
+
+              <div className="border-t border-slate-800 pt-3">
+                <h4 className="font-semibold text-emerald-400 mb-1.5">2. Kelly-Kriterium zur Positionsgrößenbestimmung</h4>
+                <p className="mb-2">
+                  Die Kelly-Formel bestimmt den optimalen Anteil des Kapitals (<InlineMath math="f^*" />), der in ein Geschäft investiert werden soll, um das exponentielle Wachstum des Kapitals zu maximieren:
+                </p>
+                <div className="py-2 overflow-x-auto">
+                  <BlockMath math="f^* = \frac{p \cdot b - q}{b} = \frac{p \cdot b - (1 - p)}{b}" />
+                </div>
+                <p className="mb-2">
+                  Um Risiken durch ungenaue Schätzungen zu verringern, wenden wir das konservative <strong>Half-Kelly</strong>-Sizing an und begrenzen das Ergebnis auf <InlineMath math="0.5 \times f^*" /> (zusätzlich begrenzt auf <InlineMath math="\ge 0" />).
+                </p>
+              </div>
+
+              <div className="border-t border-slate-800 pt-3">
+                <h4 className="font-semibold text-rose-400 mb-1.5">3. Covariance & Cluster Risk (Kovarianz-Ampel)</h4>
+                <p className="mb-2">
+                  Die Kovarianz zwischen Assets wird durch Multiplikation ihrer paarweisen Korrelation mit ihren jeweiligen Standardabweichungen (Volatilitäten) bestimmt:
+                </p>
+                <div className="py-2 overflow-x-auto">
+                  <BlockMath math="\text{Cov}(A, B) = \text{Corr}(A, B) \times \sigma_A \times \sigma_B" />
+                </div>
+                <p className="text-slate-400">
+                  Ein <strong>Klumpenrisiko (Risk RED)</strong> wird ausgelöst, wenn ein Asset eine Korrelation <InlineMath math="\text{Corr}(A, B) > 0.70" /> zu bestehenden Positionen aufweist und diese Positionen jeweils mehr als 15% des Portfolios ausmachen.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* SECTION 2: Chart / Analytics & Order Form */}
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+        
+        {/* Left 2 Columns: Analytics Performance Plot */}
+        <div className="xl:col-span-2 bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 text-slate-100 shadow-xl space-y-6">
+          <div className="flex justify-between items-center border-b border-slate-800 pb-3">
+            <h3 className="text-lg font-bold text-white flex items-center gap-2">
+              <TrendingUp className="text-emerald-400 w-5 h-5" /> Portfolio Wertentwicklung & Benchmark
+            </h3>
+            <div className="flex items-center gap-3">
+              <label className="flex items-center gap-2 text-xs text-slate-400 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={showMsciBenchmark}
+                  onChange={(e) => setShowMsciBenchmark(e.target.checked)}
+                  className="rounded border-slate-800 text-emerald-500 focus:ring-0 accent-emerald-500 w-4 h-4"
+                />
+                <span>MSCI World (Benchmark) anzeigen</span>
+              </label>
+            </div>
+          </div>
+
+          <div className="h-80 w-full">
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
+                <XAxis dataKey="date" stroke="#64748b" fontSize={10} />
+                <YAxis stroke="#64748b" fontSize={10} domain={['auto', 'auto']} tickFormatter={(v) => `$${v.toLocaleString()}`} />
+                <Tooltip contentStyle={{ backgroundColor: '#0f172a', borderColor: '#334155', borderRadius: '8px' }} />
+                <Legend verticalAlign="top" height={36} />
+                <Line type="monotone" dataKey="Portfolio" name={activePortfolio.name} stroke="#10b981" strokeWidth={3} dot={false} activeDot={{ r: 6 }} />
+                {showMsciBenchmark && (
+                  <Line type="monotone" dataKey="MSCI World (Benchmark)" name="MSCI World Index (Normiert)" stroke="#3b82f6" strokeWidth={2} strokeDasharray="4 4" dot={false} />
+                )}
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+
+          {/* EWMA parameter tuner slider */}
+          <div className="p-4 rounded-xl border border-slate-850 bg-slate-950/20 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+            <div className="space-y-1">
+              <h4 className="text-sm font-semibold text-slate-200">Parameteranpassung EWMA Lambda (&lambda;)</h4>
+              <p className="text-xs text-slate-400">Zerfallsfaktor steuert die Schock-Sensitivität des Volatilitätsmodells.</p>
+            </div>
+            <div className="flex items-center gap-4 w-full sm:w-auto">
+              <input
+                type="range"
+                min="0.80"
+                max="0.99"
+                step="0.01"
+                value={ewmaLambda}
+                onChange={(e) => setEwmaLambda(parseFloat(e.target.value))}
+                className="w-40 accent-emerald-400 cursor-pointer"
+              />
+              <span className="font-mono text-emerald-400 text-sm font-bold bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">&lambda; = {ewmaLambda.toFixed(2)}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Right 1 Column: Advanced Order Mask */}
+        <div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 text-slate-100 shadow-xl relative overflow-hidden flex flex-col justify-between">
+          <div className="space-y-6">
+            <div className="border-b border-slate-800 pb-3">
+              <h3 className="text-lg font-bold text-white flex items-center gap-2">
+                <Settings className="text-emerald-400 w-5 h-5" /> Order-Maske (Simuliert)
+              </h3>
+            </div>
+
+            <form onSubmit={handleTransactionSubmit} className="space-y-4">
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="text-xs text-slate-400 block mb-1">Ticker / Symbol</label>
+                  <input
+                    type="text"
+                    required
+                    placeholder="AAPL"
+                    className="w-full bg-slate-950 border border-slate-800 rounded-lg p-2 text-slate-100 font-mono focus:outline-none focus:border-emerald-500"
+                    value={tradeSymbol}
+                    onChange={(e) => setTradeSymbol(e.target.value.toUpperCase())}
+                  />
+                </div>
+                <div>
+                  <label className="text-xs text-slate-400 block mb-1">WKN / ISIN</label>
+                  <input
+                    type="text"
+                    placeholder="865985"
+                    className="w-full bg-slate-950 border border-slate-800 rounded-lg p-2 text-slate-100 font-mono focus:outline-none focus:border-emerald-500"
+                    value={tradeWknOrIsin}
+                    onChange={(e) => setTradeWknOrIsin(e.target.value)}
+                  />
+                </div>
+                <div>
+                  <label className="text-xs text-slate-400 block mb-1">Stücke</label>
+                  <input
+                    type="number"
+                    required
+                    className="w-full bg-slate-950 border border-slate-800 rounded-lg p-2 text-slate-100 font-mono focus:outline-none focus:border-emerald-500"
+                    value={tradeShares}
+                    onChange={(e) => setTradeShares(Number(e.target.value))}
+                  />
+                </div>
+                <div>
+                  <label className="text-xs text-slate-400 block mb-1">Kurs ($)</label>
+                  <input
+                    type="number"
+                    required
+                    className="w-full bg-slate-950 border border-slate-800 rounded-lg p-2 text-slate-100 font-mono focus:outline-none focus:border-emerald-500"
+                    value={tradePrice}
+                    onChange={(e) => setTradePrice(Number(e.target.value))}
+                  />
+                </div>
+              </div>
+
+              {/* Order direction buttons */}
+              <div className="flex gap-2 p-1 rounded-xl bg-slate-950 border border-slate-800">
+                <button
+                  type="button"
+                  onClick={() => setTradeType('BUY')}
+                  className={`flex-1 py-1.5 text-xs font-bold rounded-lg transition-all ${tradeType === 'BUY' ? 'bg-emerald-500 text-slate-950 shadow-md shadow-emerald-500/10' : 'text-slate-400 hover:text-slate-200'}`}
+                >
+                  Kauf (Long)
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setTradeType('SELL')}
+                  className={`flex-1 py-1.5 text-xs font-bold rounded-lg transition-all ${tradeType === 'SELL' ? 'bg-rose-500 text-white shadow-md shadow-rose-500/10' : 'text-slate-400 hover:text-slate-200'}`}
+                >
+                  Verkauf (Short)
+                </button>
+              </div>
+
+              {/* Kelly Sizing Risk Recommendation Widget */}
+              {tradeType === 'BUY' && (
+                <div className="bg-slate-950/60 border border-slate-850 rounded-xl p-3 text-[11px] space-y-2 relative overflow-hidden">
+                  <div className="flex justify-between items-center">
+                    <span className="text-[10px] text-slate-400 uppercase font-semibold flex items-center gap-1">
+                      <Sparkles className="w-3 h-3 text-emerald-400" /> Risk-Engine Sizing
+                    </span>
+                    <span className="font-bold text-emerald-400 text-[10px] uppercase tracking-wider">Kelly recommendation</span>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    <div>
+                      <label className="text-[9px] text-slate-500 block mb-0.5 font-semibold uppercase">Prob Source (p)</label>
+                      <select
+                        value={kellySource}
+                        onChange={(e) => setKellySource(e.target.value as any)}
+                        className="w-full bg-slate-900 border border-slate-800 rounded px-1.5 py-1 text-[10px] text-slate-200 focus:outline-none"
+                      >
+                        <option value="custom">Manueller Regler</option>
+                        <option value="scanner">El. 2 Scanner-Score</option>
+                        <option value="crypto">El. 4 Bayes Posterior</option>
+                        <option value="econometric">El. 5 ROC Breakout</option>
+                      </select>
+                    </div>
+
+                    <div>
+                      <label className="text-[9px] text-slate-500 block mb-0.5 font-semibold uppercase">Odds-Verhältnis (b)</label>
+                      <input
+                        type="number"
+                        step="0.1"
+                        min="0.1"
+                        value={oddsRatio}
+                        onChange={(e) => setOddsRatio(Number(e.target.value))}
+                        className="w-full bg-slate-900 border border-slate-800 rounded px-1.5 py-1 text-[10px] text-slate-200 font-mono focus:outline-none"
+                      />
+                    </div>
+                  </div>
+
+                  {kellySource === 'custom' && (
+                    <div className="space-y-1">
+                      <div className="flex justify-between text-[9px] text-slate-500">
+                        <span>Erfolgswahrscheinlichkeit:</span>
+                        <span className="font-mono text-emerald-400 font-bold">{(kellyProbability * 100).toFixed(0)}%</span>
+                      </div>
+                      <input
+                        type="range"
+                        min="0.1"
+                        max="0.99"
+                        step="0.01"
+                        value={customProb}
+                        onChange={(e) => setCustomProb(Number(e.target.value))}
+                        className="w-full accent-emerald-500 h-1 bg-slate-900 rounded"
+                      />
+                    </div>
+                  )}
+
+                  {kellySource !== 'custom' && (
+                    <div className="text-[9px] text-slate-400 flex justify-between bg-slate-900/40 p-1 px-1.5 rounded border border-slate-900">
+                      <span>System-Wahrscheinlichkeit:</span>
+                      <span className="font-mono text-emerald-400 font-bold">{(kellyProbability * 100).toFixed(1)}%</span>
+                    </div>
+                  )}
+
+                  {potentialClusterRisk && (
+                    <div className="p-2 bg-rose-500/10 text-rose-400 border border-rose-500/20 text-[9px] rounded flex items-start gap-1">
+                      <AlertCircle className="w-3.5 h-3.5 shrink-0 text-rose-400" />
+                      <div>
+                        <strong>Klumpenrisiko!</strong> Korrelation &gt; 0.70 zu bestehenden Positionen. Kelly-Empfehlung wurde um 50% halbiert.
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="bg-slate-900/80 p-2 rounded-lg border border-slate-850 flex justify-between items-center text-xs">
+                    <div>
+                      <span className="block text-[9px] text-slate-500 uppercase font-semibold">Kelly-Anteil:</span>
+                      <span className="font-mono font-bold text-slate-200">{(kellyFraction * 100).toFixed(1)}% des Cashs</span>
+                    </div>
+                    <div className="text-right">
+                      <span className="block text-[9px] text-slate-500 uppercase font-semibold">Kaufvolumen:</span>
+                      <span className="font-mono font-bold text-emerald-400">${Math.round(recommendedKellyCash).toLocaleString()}</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Hypothesis input */}
+              <div>
+                <label className="text-xs text-slate-400 block mb-1 flex items-center gap-1">
+                  <Tag className="w-3 h-3 text-emerald-400" />
+                  <span>Hypothese / What-if Notiz</span>
+                </label>
+                <input
+                  type="text"
+                  placeholder="z.B. Ferrari E-Auto Skepsis"
+                  className="w-full bg-slate-950 border border-slate-800 rounded-lg p-2 text-slate-100 text-xs focus:outline-none focus:border-emerald-500"
+                  value={hypothesisTag}
+                  onChange={(e) => setHypothesisTag(e.target.value)}
+                />
+              </div>
+
+              {/* Fees Toggle */}
+              <div className="flex items-center justify-between border-t border-slate-850 pt-3 text-xs">
+                <span className="text-slate-400 flex items-center gap-1">
+                  <DollarSign className="w-3.5 h-3.5 text-slate-500" /> Ordergebühren simulieren
+                </span>
+                <input
+                  type="checkbox"
+                  checked={simulateFees}
+                  onChange={(e) => setSimulateFees(e.target.checked)}
+                  className="rounded border-slate-800 text-emerald-500 focus:ring-0 accent-emerald-500 w-4 h-4 cursor-pointer"
+                />
+              </div>
+
+              {/* Backfill Date Picker Toggle */}
+              <div className="space-y-2 border-t border-slate-850 pt-3 text-xs">
+                <div className="flex items-center justify-between">
+                  <span className="text-slate-400 flex items-center gap-1">
+                    <Calendar className="w-3.5 h-3.5 text-slate-500" /> Historischer Backfill
+                  </span>
+                  <input
+                    type="checkbox"
+                    checked={isBackfill}
+                    onChange={(e) => setIsBackfill(e.target.checked)}
+                    className="rounded border-slate-800 text-emerald-500 focus:ring-0 accent-emerald-500 w-4 h-4 cursor-pointer"
+                  />
+                </div>
+                
+                {isBackfill && (
+                  <input
+                    type="date"
+                    className="w-full bg-slate-950 border border-slate-800 rounded-lg p-2 text-slate-100 text-xs focus:outline-none focus:border-emerald-500 font-mono"
+                    value={backfillDate}
+                    onChange={(e) => setBackfillDate(e.target.value)}
+                  />
+                )}
+              </div>
+
+              {orderError && (
+                <div className="p-3 rounded-lg bg-rose-500/10 text-rose-400 border border-rose-500/20 text-xs flex items-center gap-2">
+                  <AlertCircle className="w-4 h-4 shrink-0" />
+                  <span>{orderError}</span>
+                </div>
+              )}
+
+              {orderSuccess && (
+                <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-xs flex items-center gap-2">
+                  <Check className="w-4 h-4 shrink-0" />
+                  <span>Transaktion erfolgreich gebucht!</span>
+                </div>
+              )}
+
+              <button
+                type="submit"
+                className={`w-full font-bold py-2.5 px-4 rounded-lg transition-all active:scale-[0.98] mt-2 shadow-lg ${tradeType === 'BUY' ? 'bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 text-slate-950 shadow-emerald-500/10' : 'bg-gradient-to-r from-rose-500 to-pink-500 hover:from-rose-600 hover:to-pink-600 text-white shadow-rose-500/10'}`}
+              >
+                Order an den Markt senden
+              </button>
+            </form>
+          </div>
+        </div>
+
+      </div>
+
+      {/* SECTION 3: Holdings Table & Transactions Log */}
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
+        
+        {/* Left 2 Columns: Holdings List */}
+        <div className="xl:col-span-2 bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 text-slate-100 shadow-xl space-y-4">
+          <div className="flex justify-between items-center border-b border-slate-800 pb-3">
+            <h3 className="text-lg font-bold text-white flex items-center gap-2">
+              <TrendingUp className="text-emerald-400 w-5 h-5" /> Depotbestände ({activePortfolio.holdings.length})
+            </h3>
+            <div className="text-xs text-slate-400 flex items-center gap-4">
+              <span>Barguthaben: <span className="font-mono text-emerald-400 font-bold">${activePortfolio.cash.toLocaleString()}</span></span>
+            </div>
+          </div>
+
+          <div className="overflow-x-auto border border-slate-850 rounded-xl bg-slate-950/40">
+            <table className="w-full border-collapse text-left text-sm">
+              <thead>
+                <tr className="border-b border-slate-800 text-slate-400 font-semibold bg-slate-900/40">
+                  <th className="p-3">Asset</th>
+                  <th className="p-3">Stücke</th>
+                  <th className="p-3">Einstand</th>
+                  <th className="p-3">Kurs</th>
+                  <th className="p-3">Hypothese</th>
+                  <th className="p-3 text-right">GuV</th>
+                </tr>
+              </thead>
+              <tbody>
+                {activePortfolio.holdings.length === 0 ? (
+                  <tr>
+                    <td colSpan={6} className="p-8 text-center text-slate-500">
+                      Keine Bestände in diesem Sandbox-Portfolio. Nutzen Sie die Order-Maske, um Werte hinzuzufügen.
+                    </td>
+                  </tr>
+                ) : (
+                  activePortfolio.holdings.map((hold) => {
+                    const profitLoss = (hold.currentPrice - hold.avgPrice) * hold.shares;
+                    const isPositive = profitLoss >= 0;
+                    return (
+                      <tr key={hold.symbol} className="border-b border-slate-850/50 hover:bg-slate-850/20 transition-colors">
+                        <td className="p-3">
+                          <div className="font-bold text-teal-400 font-mono">{hold.symbol}</div>
+                          {hold.wknOrIsin && <div className="text-[10px] text-slate-500 font-mono">WKN: {hold.wknOrIsin}</div>}
+                        </td>
+                        <td className="p-3 font-mono font-medium">{hold.shares}</td>
+                        <td className="p-3 font-mono text-slate-300">${hold.avgPrice.toFixed(2)}</td>
+                        <td className="p-3 font-mono text-slate-300">${hold.currentPrice.toFixed(2)}</td>
+                        <td className="p-3 text-slate-400 max-w-[200px] truncate text-xs" title={hold.hypothesisTag}>
+                          {hold.hypothesisTag || '-'}
+                        </td>
+                        <td className={`p-3 font-mono text-right flex items-center justify-end gap-1 ${isPositive ? 'text-emerald-400' : 'text-rose-400'}`}>
+                          {isPositive ? <ArrowUpRight className="w-4 h-4" /> : <ArrowDownRight className="w-4 h-4" />}
+                          ${Math.abs(profitLoss).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* Right 1 Column: Transactions History */}
+        <div className="bg-slate-900/60 backdrop-blur-md border border-slate-800 rounded-2xl p-6 text-slate-100 shadow-xl space-y-4">
+          <div className="border-b border-slate-800 pb-3">
+            <h3 className="text-lg font-bold text-white flex items-center gap-2">
+              <Calendar className="text-emerald-400 w-5 h-5" /> Letzte Orderbuch-Einträge
+            </h3>
+          </div>
+
+          <div className="max-h-60 overflow-y-auto space-y-2 pr-1">
+            {activePortfolio.transactions.length === 0 ? (
+              <p className="text-xs text-slate-500 text-center py-8">Bislang keine Transaktionen in diesem Portfolio.</p>
+            ) : (
+              activePortfolio.transactions.map((tx) => {
+                const isBuy = tx.type === 'BUY';
+                return (
+                  <div key={tx.id} className="p-3 bg-slate-950/40 border border-slate-850 rounded-lg space-y-1.5">
+                    <div className="flex justify-between items-start">
+                      <div className="flex items-center gap-2">
+                        <span className={`px-1.5 py-0.5 rounded text-[9px] font-bold ${isBuy ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-rose-500/10 text-rose-400 border border-rose-500/20'}`}>
+                          {isBuy ? 'KAUF' : 'VERKAUF'}
+                        </span>
+                        <span className="font-mono font-bold text-slate-200">{tx.symbol}</span>
+                      </div>
+                      <span className="text-[10px] text-slate-500 font-mono">{tx.timestamp}</span>
+                    </div>
+
+                    <div className="flex justify-between text-xs font-mono text-slate-400">
+                      <span>{tx.shares} Stk @ ${tx.price.toFixed(2)}</span>
+                      <span className="text-[10px] text-slate-500">Gebühr: ${tx.feeApplied.toFixed(2)}</span>
+                    </div>
+
+                    {tx.hypothesisTag && (
+                      <div className="text-[10px] text-slate-500 flex items-center gap-1 border-t border-slate-900 pt-1">
+                        <Tag className="w-2.5 h-2.5 text-teal-500" />
+                        <span className="italic truncate max-w-[220px]">{tx.hypothesisTag}</span>
+                      </div>
+                    )}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  );
+}