+ {/* Header Section */}
+
+
+
+ Backtest Studio
+
+
+
+ Test, optimize, and validate your trading strategies with precision
+
+
+
+
+
+
+
+
+
+ {/* Tab Navigation */}
+
+ {[
+ { id: 'configuration', label: 'Configuration', icon: Settings },
+ { id: 'results', label: 'Results', icon: BarChart3 },
+ { id: 'saved', label: 'Saved Strategies', icon: Save }
+ ].map((tab) => {
+ const Icon = tab.icon;
+ return (
+
+ );
+ })}
+
+
+ {/* Main Content */}
+
+ {/* Configuration Panel */}
+ {activeTab === 'configuration' && (
+ <>
+
+
+
+
+
+ Strategy Configuration
+
+
Define your trading strategy parameters
+
+
+
+
+
+
+
+
+ {/* Basic Settings */}
+
+
+
+
+ Basic Settings
+
+
+
+
+
+ setConfig({ ...config, strategyName: e.target.value })}
+ className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white/80"
+ placeholder="Enter strategy name"
+ />
+
+
+
+
+ setConfig({ ...config, initialCapital: Number(e.target.value) })}
+ className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white/80"
+ />
+
+
+
+
+
+
+ {/* Risk Management */}
+
+
+
+ Risk Management
+
+
+
+
+
+ setConfig({ ...config, transactionCosts: Number(e.target.value) })}
+ className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white/80"
+ />
+
+
+
+
+ setConfig({ ...config, maxPositionSize: Number(e.target.value) / 100 })}
+ className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white/80"
+ />
+
+
+
+
+
+
+
+ {/* Strategy Parameters & Asset Selection */}
+
+
+
+
+ Strategy Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Asset Selection */}
+
+
+
+ Asset Selection
+
+
+
+
+
+
+ {config.symbols.map((symbol, index) => (
+
+ {symbol}
+
+
+ ))}
+
+
+
setNewSymbol(e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && addSymbol()}
+ placeholder="Add symbol (e.g., AAPL)"
+ className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
+ />
+
+
+
+
+
+
+
+
+ {/* Run Button */}
+
+
+
+
+
+
+ {/* Strategy Templates */}
+
+
+
+
+ Quick Templates
+
+
+ {[
+ { name: 'Momentum Strategy', type: 'momentum', description: 'Follow trending assets with momentum signals', color: 'blue' },
+ { name: 'Mean Reversion', type: 'mean_reversion', description: 'Bet on price normalization in oversold assets', color: 'green' },
+ { name: 'Quality Factor', type: 'factor', description: 'Invest in high-quality companies with strong fundamentals', color: 'purple' }
+ ].map((template, index) => (
+
+ ))}
+
+
+
+
+ )}
+
+ {/* Results Panel */}
+ {activeTab === 'results' && backtestResults && (
+
+ {/* Key Metrics */}
+
+
+ Performance Summary
+
+
+ {getMetrics().map((metric) => {
+ const Icon = metric.icon;
+ return (
+
+
+
{metric.label}
+
+ {formatMetricValue(metric.value)}
+
+
+ );
+ })}
+
+
+
+ {/* Charts and Detailed Analysis */}
+
+ {/* Equity Curve */}
+
+
+ {/* Drawdown Chart */}
+
+
Drawdown Analysis
+
+
+
+
+
+ {/* Recent Trades */}
+
+
+
Recent Trades
+ {backtestResults.trades.length} trades
+
+
+ {backtestResults.trades.slice(0, 10).map((trade) => (
+
+
+
+ {trade.action === 'BUY' ? 'B' : 'S'}
+
+
+
{trade.symbol}
+
+ {trade.quantity} shares @ ${trade.price.toFixed(2)}
+
+
+
+
+
= 0 ? 'text-green-600' : 'text-red-600'
+ }`}>
+ {trade.pnl >= 0 ? '+' : ''}${trade.pnl.toFixed(2)}
+
+
+ {trade.timestamp.toLocaleDateString()}
+
+
+
+ ))}
+
+
+
+ {/* Risk Analysis */}
+
+
Risk Metrics
+
+ {[
+ { label: 'Value at Risk (95%)', value: '-5.2%', color: 'red' },
+ { label: 'Conditional VaR', value: '-7.8%', color: 'red' },
+ { label: 'Tail Ratio', value: '0.89', color: 'green' },
+ { label: 'Skewness', value: '-0.23', color: 'yellow' },
+ { label: 'Kurtosis', value: '3.45', color: 'yellow' },
+ { label: 'Information Ratio', value: '0.78', color: 'green' }
+ ].map((metric, index) => (
+
+ {metric.label}
+
+ {metric.value}
+
+
+ ))}
+
+
+
+
+ )}
+
+ {/* Saved Strategies */}
+ {activeTab === 'saved' && (
+
+
+
+
+
+ Saved Strategies
+
+
Manage your strategy configurations
+
+
+ setStrategyName(e.target.value)}
+ placeholder="Strategy name"
+ className="px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white/80"
+ />
+
+
+
+
+ {savedStrategies.length === 0 ? (
+
+
+
No saved strategies yet
+
Save your current configuration to get started
+
+ ) : (
+
+ {savedStrategies.map((strategy) => (
+
+
+
{strategy.name}
+
+
+
+
+ Capital:
+ ${strategy.config.initialCapital.toLocaleString()}
+
+
+ Period:
+ {strategy.config.startDate} to {strategy.config.endDate}
+
+
+ Assets:
+ {strategy.config.symbols.length} symbols
+
+
+
+ Created: {new Date(strategy.createdAt).toLocaleDateString()}
+
+
+
+
+ ))}
+
+ )}
+
+
+ )}
+
+ {/* Empty State for Results */}
+ {activeTab === 'results' && !backtestResults && (
+
+
+
+
+
No Results Yet
+
+ Configure and run a backtest to see detailed performance results and analytics
+
+
+
+
+
+ )}
+
+