+ {/* Header */}
+
+
+
+
+
Indicators
+
{enabledCount} active
+
+
+
+
+ {/* Presets Button */}
+
+
+
+ {showPresets && (
+
+
+
Load Preset
+
+ {savedPresets.map((preset, idx) => (
+
+ ))}
+
+
+
+
Save Current
+
+ setPresetName(e.target.value)}
+ placeholder="Preset name..."
+ className="flex-1 px-2 py-1.5 bg-gray-900 border border-gray-700 rounded text-xs text-white focus:outline-none focus:border-blue-500"
+ />
+
+
+
+
+ )}
+
+
+ {/* Add Indicator Button */}
+
+
+
+ {showAddMenu && (
+
+ {Object.entries(INDICATOR_DEFINITIONS).map(([type, def]) => (
+
+ ))}
+
+ )}
+
+
+
+
+ {/* Indicators List */}
+ {indicators.length === 0 ? (
+
+
+
No indicators configured
+
Click "Add" to add technical indicators
+
+ ) : (
+
+ {indicators.map((indicator) => {
+ const def = INDICATOR_DEFINITIONS[indicator.type];
+ const isExpanded = expandedId === indicator.id;
+
+ return (
+
+ {/* Header Row */}
+
setExpandedId(isExpanded ? null : indicator.id)}
+ className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-800/50"
+ >
+
+
+
+ {def.icon}
+
+
+
{def.label}
+
+ {Object.entries(indicator.params)
+ .map(([k, v]) => `${def.paramLabels[k]}: ${v}`)
+ .join(' • ')}
+
+
+
+
+
+
+ {isExpanded ? (
+
+ ) : (
+
+ )}
+
+
+
+ {/* Expanded Config */}
+ {isExpanded && (
+
+ {/* Parameters */}
+
+ {Object.entries(indicator.params).map(([paramKey, paramValue]) => (
+
+
+ handleParamChange(indicator.id, paramKey, Number(e.target.value))}
+ className="w-full px-2 py-1.5 bg-gray-800 border border-gray-700 rounded text-white text-sm focus:outline-none focus:border-blue-500"
+ />
+
+ ))}
+
+
+ {/* Style Options */}
+
+
+
+
+ {PRESET_COLORS.slice(0, 5).map((color) => (
+
+
+
+
+
+ {[1, 2, 3].map((width) => (
+
+ ))}
+
+
+
+
+ {/* Actions */}
+
+
+
+
+
+
+
+
+ )}
+
+ );
+ })}
+
+ )}
+
+ {/* Close menus on outside click */}
+ {(showAddMenu || showPresets) && (
+
{
+ setShowAddMenu(false);
+ setShowPresets(false);
+ }}
+ />
+ )}
+
+ );
+};
+
+export default IndicatorConfigPanel;
diff --git a/src/modules/trading/components/SymbolInfoPanel.tsx b/src/modules/trading/components/SymbolInfoPanel.tsx
new file mode 100644
index 0000000..d62d0ad
--- /dev/null
+++ b/src/modules/trading/components/SymbolInfoPanel.tsx
@@ -0,0 +1,433 @@
+/**
+ * SymbolInfoPanel Component
+ * Comprehensive symbol information and details sidebar
+ * OQI-003: Trading y Charts
+ */
+
+import React, { useState, useMemo } from 'react';
+import {
+ Info,
+ TrendingUp,
+ TrendingDown,
+ BarChart3,
+ Activity,
+ Clock,
+ DollarSign,
+ Percent,
+ Globe,
+ Star,
+ StarOff,
+ ExternalLink,
+ RefreshCw,
+ ChevronDown,
+ ChevronUp,
+ Zap,
+ AlertCircle,
+} from 'lucide-react';
+
+export interface SymbolStats {
+ price: number;
+ change24h: number;
+ changePercent24h: number;
+ high24h: number;
+ low24h: number;
+ open24h: number;
+ volume24h: number;
+ volumeQuote24h: number;
+ marketCap?: number;
+ circulatingSupply?: number;
+ totalSupply?: number;
+ allTimeHigh?: number;
+ allTimeLow?: number;
+ athDate?: string;
+ atlDate?: string;
+}
+
+export interface SymbolInfo {
+ symbol: string;
+ name: string;
+ baseAsset: string;
+ quoteAsset: string;
+ exchange: string;
+ type: 'spot' | 'futures' | 'forex' | 'crypto';
+ status: 'trading' | 'halt' | 'break';
+ minNotional?: number;
+ tickSize?: number;
+ stepSize?: number;
+ maxLeverage?: number;
+ tradingHours?: string;
+ description?: string;
+}
+
+interface RelatedSymbol {
+ symbol: string;
+ correlation: number;
+ change24h: number;
+}
+
+interface SymbolInfoPanelProps {
+ symbol: string;
+ info?: SymbolInfo;
+ stats?: SymbolStats;
+ relatedSymbols?: RelatedSymbol[];
+ isFavorite?: boolean;
+ onToggleFavorite?: (symbol: string) => void;
+ onSymbolSelect?: (symbol: string) => void;
+ onRefresh?: () => void;
+ isLoading?: boolean;
+ compact?: boolean;
+}
+
+const SymbolInfoPanel: React.FC
= ({
+ symbol,
+ info,
+ stats,
+ relatedSymbols = [],
+ isFavorite = false,
+ onToggleFavorite,
+ onSymbolSelect,
+ onRefresh,
+ isLoading = false,
+ compact = false,
+}) => {
+ const [expandedSection, setExpandedSection] = useState('stats');
+
+ const priceChangeColor = useMemo(() => {
+ if (!stats) return 'text-gray-400';
+ return stats.change24h >= 0 ? 'text-green-400' : 'text-red-400';
+ }, [stats]);
+
+ const formatNumber = (num: number, decimals = 2) => {
+ if (num >= 1e9) return `${(num / 1e9).toFixed(decimals)}B`;
+ if (num >= 1e6) return `${(num / 1e6).toFixed(decimals)}M`;
+ if (num >= 1e3) return `${(num / 1e3).toFixed(decimals)}K`;
+ return num.toFixed(decimals);
+ };
+
+ const formatPrice = (price: number) => {
+ if (price >= 1000) return price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+ if (price >= 1) return price.toFixed(4);
+ return price.toFixed(8);
+ };
+
+ const formatPercent = (percent: number) => {
+ const sign = percent >= 0 ? '+' : '';
+ return `${sign}${percent.toFixed(2)}%`;
+ };
+
+ const getStatusBadge = (status: string) => {
+ switch (status) {
+ case 'trading':
+ return Trading;
+ case 'halt':
+ return Halted;
+ case 'break':
+ return Break;
+ default:
+ return null;
+ }
+ };
+
+ const toggleSection = (section: string) => {
+ setExpandedSection(expandedSection === section ? null : section);
+ };
+
+ return (
+
+ {/* Header */}
+
+
+
+
+
+
+
+
{symbol}
+ {info && getStatusBadge(info.status)}
+
+ {info && (
+
{info.name}
+ )}
+
+
+
+
+
+
+
+
+
+ {/* Price Display */}
+ {stats && (
+
+
+
+
${formatPrice(stats.price)}
+
+ {stats.change24h >= 0 ? (
+
+ ) : (
+
+ )}
+
+ {stats.change24h >= 0 ? '+' : ''}{formatPrice(stats.change24h)}
+
+
+ ({formatPercent(stats.changePercent24h)})
+
+
+
+
+
24h High: ${formatPrice(stats.high24h)}
+
24h Low: ${formatPrice(stats.low24h)}
+
+
+
+ {/* Mini Stats Row */}
+
+
+
Volume
+
${formatNumber(stats.volumeQuote24h)}
+
+ {stats.marketCap && (
+
+
Market Cap
+
${formatNumber(stats.marketCap)}
+
+ )}
+
+
Open
+
${formatPrice(stats.open24h)}
+
+
+
+ )}
+
+ {/* Expandable Sections */}
+
+ {/* Stats Section */}
+ {stats && (
+
+
+
+ {expandedSection === 'stats' && (
+
+
+ 24h Volume ({info?.baseAsset})
+ {formatNumber(stats.volume24h)}
+
+ {stats.allTimeHigh && (
+
+
All-Time High
+
+
${formatPrice(stats.allTimeHigh)}
+ {stats.athDate && (
+
{stats.athDate}
+ )}
+
+
+ )}
+ {stats.allTimeLow && (
+
+
All-Time Low
+
+
${formatPrice(stats.allTimeLow)}
+ {stats.atlDate && (
+
{stats.atlDate}
+ )}
+
+
+ )}
+ {stats.circulatingSupply && (
+
+ Circulating Supply
+ {formatNumber(stats.circulatingSupply, 0)}
+
+ )}
+
+ )}
+
+ )}
+
+ {/* Info Section */}
+ {info && (
+
+
+
+ {expandedSection === 'info' && (
+
+
+ Exchange
+ {info.exchange}
+
+
+ Type
+ {info.type}
+
+
+ Base Asset
+ {info.baseAsset}
+
+
+ Quote Asset
+ {info.quoteAsset}
+
+ {info.tickSize && (
+
+ Tick Size
+ {info.tickSize}
+
+ )}
+ {info.minNotional && (
+
+ Min Order
+ ${info.minNotional}
+
+ )}
+ {info.maxLeverage && (
+
+ Max Leverage
+ {info.maxLeverage}x
+
+ )}
+ {info.tradingHours && (
+
+ Trading Hours
+ {info.tradingHours}
+
+ )}
+
+ )}
+
+ )}
+
+ {/* Related Symbols */}
+ {relatedSymbols.length > 0 && (
+
+
+
+ {expandedSection === 'related' && (
+
+ {relatedSymbols.map((related) => (
+
+ ))}
+
+ )}
+
+ )}
+
+ {/* Description */}
+ {info?.description && (
+
+
+
+ {expandedSection === 'desc' && (
+
+ )}
+
+ )}
+
+
+ {/* Quick Actions */}
+ {!compact && (
+
+
+
+
+
+
+ )}
+
+ {/* Header */}
+
+
+
+
+
Trade Journal
+
{trades.length} trades recorded
+
+
+
+
+
+
+
+
+ {/* Stats Summary */}
+ {showStats && (
+
+
+
= 0 ? 'text-green-400' : 'text-red-400'}`}>
+ ${stats.totalProfit.toFixed(2)}
+
+
Total P&L
+
+
+
{stats.winRate.toFixed(1)}%
+
Win Rate
+
+
+
{stats.profitFactor.toFixed(2)}
+
Profit Factor
+
+
+
= 0 ? 'text-green-400' : 'text-red-400'}`}>
+ {stats.currentStreak >= 0 ? `+${stats.currentStreak}` : stats.currentStreak}
+
+
Streak
+
+
+ )}
+
+ {/* Extended Stats */}
+ {!compact && showStats && (
+
+
+
+
+
Best Trade
+
${stats.largestWin.toFixed(2)}
+
+
+
+
+
+
Worst Trade
+
${stats.largestLoss.toFixed(2)}
+
+
+
+
+
+
Avg Duration
+
{formatDuration(stats.averageDuration)}
+
+
+
+ )}
+
+ {/* Filters */}
+
+
+
+ setFilterSymbol(e.target.value)}
+ placeholder="Filter by symbol..."
+ className="w-full pl-10 pr-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm focus:outline-none focus:border-blue-500"
+ />
+
+
+
+
+ {/* Trades List */}
+ {filteredTrades.length === 0 ? (
+
+
+
No trades to journal
+
Complete some trades to start journaling
+
+ ) : (
+
+ {filteredTrades.map((trade) => (
+
setSelectedTrade(selectedTrade?.id === trade.id ? null : trade)}
+ className={`p-3 bg-gray-900/50 rounded-lg border cursor-pointer transition-all ${
+ selectedTrade?.id === trade.id
+ ? 'border-blue-500/50 bg-blue-500/5'
+ : 'border-gray-700 hover:border-gray-600'
+ }`}
+ >
+
+
+
+ {trade.type === 'BUY' ? (
+
+ ) : (
+
+ )}
+
+
+
+
{trade.symbol}
+
{trade.lots} lots
+ {trade.rating && (
+
+ {Array.from({ length: trade.rating }).map((_, i) => (
+
+ ))}
+
+ )}
+
+
+ {formatDate(trade.exitTime)} • {formatDuration(trade.duration)}
+
+
+
+
+
= 0 ? 'text-green-400' : 'text-red-400'}`}>
+ {trade.profit >= 0 ? '+' : ''}{trade.profit.toFixed(2)}
+
+
= 0 ? 'text-green-400' : 'text-red-400'}`}>
+ {trade.profitPercent >= 0 ? '+' : ''}{trade.profitPercent.toFixed(2)}%
+
+
+
+
+ {/* Tags */}
+ {trade.tags && trade.tags.length > 0 && (
+
+ {trade.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+ {/* Expanded Details */}
+ {selectedTrade?.id === trade.id && !isEditing && (
+
+
+
+ Entry:
+ {trade.entryPrice.toFixed(5)}
+
+
+ Exit:
+ {trade.exitPrice.toFixed(5)}
+
+ {trade.stopLoss && (
+
+ SL:
+ {trade.stopLoss.toFixed(5)}
+
+ )}
+ {trade.takeProfit && (
+
+ TP:
+ {trade.takeProfit.toFixed(5)}
+
+ )}
+
+
+ {trade.strategy && (
+
+ Strategy:
+ {trade.strategy}
+
+ )}
+
+ {trade.notes && (
+
+
Notes:
+
{trade.notes}
+
+ )}
+
+ {trade.lessonsLearned && (
+
+
Lessons:
+
{trade.lessonsLearned}
+
+ )}
+
+
+
+ )}
+
+ ))}
+
+ )}
+
+ {/* Edit Modal */}
+ {isEditing && selectedTrade && (
+
+
+
+
Edit Journal Entry
+
+
+
+
+ {/* Trade Info */}
+
+
+ {selectedTrade.type === 'BUY' ? (
+
+ ) : (
+
+ )}
+
+
+
{selectedTrade.symbol}
+
= 0 ? 'text-green-400' : 'text-red-400'}`}>
+ {selectedTrade.profit >= 0 ? '+' : ''}{selectedTrade.profit.toFixed(2)}
+
+
+
+
+ {/* Rating */}
+
+
+
+ {[1, 2, 3, 4, 5].map((rating) => (
+
+ ))}
+
+
+
+ {/* Strategy */}
+
+
+
+ {STRATEGY_TAGS.map((tag) => (
+
+ ))}
+
+
+
+ {/* Tags */}
+
+
+
+ {[...SETUP_TAGS, ...EMOTION_TAGS].map((tag) => (
+
+ ))}
+
+
+
+ {/* Notes */}
+
+
+