✨ Enhanced trade tracking with proper P&L calculation, timing, and analysis modal
- Fixed P&L calculation with proper realized/unrealized separation - Added real entry/exit times with accurate duration display - Enhanced trade cards with proper timing information - Created trade details modal with comprehensive analysis view - Added screenshots and AI analysis details to modal - Fixed win rate calculation based on actual trade results - Updated trade result classification (WIN/LOSS/ACTIVE) - Added clickable trade cards with analysis popup - Created detailed trade analysis API endpoint - Enhanced P&L display with percentage and realized/unrealized indicators
This commit is contained in:
mindesbunister
@@ -20,6 +20,8 @@ export default function AutomationPage() {
|
||||
const [aiLearningStatus, setAiLearningStatus] = useState(null)
|
||||
const [recentTrades, setRecentTrades] = useState([])
|
||||
const [analysisDetails, setAnalysisDetails] = useState(null)
|
||||
const [selectedTrade, setSelectedTrade] = useState(null)
|
||||
const [tradeModalOpen, setTradeModalOpen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
fetchStatus()
|
||||
@@ -187,6 +189,45 @@ export default function AutomationPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const openTradeModal = async (tradeId) => {
|
||||
try {
|
||||
const response = await fetch(`/api/automation/trade-details/${tradeId}`)
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setSelectedTrade(data.data)
|
||||
setTradeModalOpen(true)
|
||||
} else {
|
||||
alert('Failed to load trade details')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load trade details:', error)
|
||||
alert('Failed to load trade details')
|
||||
}
|
||||
}
|
||||
|
||||
const closeTradeModal = () => {
|
||||
setTradeModalOpen(false)
|
||||
setSelectedTrade(null)
|
||||
}
|
||||
|
||||
// Calculate win rate from recent trades
|
||||
const calculateWinRate = () => {
|
||||
if (!recentTrades.length) return 0
|
||||
const completedTrades = recentTrades.filter(t => t.status === 'COMPLETED')
|
||||
if (!completedTrades.length) return 0
|
||||
const winningTrades = completedTrades.filter(t => t.result === 'WIN')
|
||||
return (winningTrades.length / completedTrades.length * 100).toFixed(1)
|
||||
}
|
||||
|
||||
// Calculate total P&L from recent trades
|
||||
const calculateTotalPnL = () => {
|
||||
if (!recentTrades.length) return 0
|
||||
return recentTrades
|
||||
.filter(t => t.status === 'COMPLETED' && t.realizedPnl)
|
||||
.reduce((total, trade) => total + parseFloat(trade.realizedPnl), 0)
|
||||
.toFixed(2)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -538,19 +579,19 @@ export default function AutomationPage() {
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Win Rate:</span>
|
||||
<span className={`font-semibold ${
|
||||
status.winRate > 0.6 ? 'text-green-400' :
|
||||
status.winRate > 0.4 ? 'text-yellow-400' : 'text-red-400'
|
||||
calculateWinRate() > 60 ? 'text-green-400' :
|
||||
calculateWinRate() > 40 ? 'text-yellow-400' : 'text-red-400'
|
||||
}`}>
|
||||
{(status.winRate * 100).toFixed(1)}%
|
||||
{calculateWinRate()}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Total P&L:</span>
|
||||
<span className={`font-semibold ${
|
||||
status.totalPnL > 0 ? 'text-green-400' :
|
||||
status.totalPnL < 0 ? 'text-red-400' : 'text-gray-300'
|
||||
calculateTotalPnL() > 0 ? 'text-green-400' :
|
||||
calculateTotalPnL() < 0 ? 'text-red-400' : 'text-gray-300'
|
||||
}`}>
|
||||
${status.totalPnL.toFixed(2)}
|
||||
${calculateTotalPnL()}
|
||||
</span>
|
||||
</div>
|
||||
{status.lastAnalysis && (
|
||||
@@ -579,7 +620,11 @@ export default function AutomationPage() {
|
||||
{recentTrades.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{recentTrades.slice(0, 5).map((trade, idx) => (
|
||||
<div key={idx} className="p-4 bg-gray-800 rounded-lg border border-gray-700">
|
||||
<div
|
||||
key={idx}
|
||||
className="p-4 bg-gray-800 rounded-lg border border-gray-700 cursor-pointer hover:bg-gray-750 transition-colors"
|
||||
onClick={() => openTradeModal(trade.id)}
|
||||
>
|
||||
{/* Trade Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
@@ -592,7 +637,7 @@ export default function AutomationPage() {
|
||||
<span className="text-yellow-400 font-semibold">{trade.leverage}x</span>
|
||||
<span className={`px-2 py-1 rounded text-xs ${
|
||||
trade.isActive ? 'bg-blue-600 text-white' :
|
||||
trade.result === 'PROFIT' ? 'bg-green-600 text-white' :
|
||||
trade.result === 'WIN' ? 'bg-green-600 text-white' :
|
||||
trade.result === 'LOSS' ? 'bg-red-600 text-white' :
|
||||
'bg-gray-600 text-white'
|
||||
}`}>
|
||||
@@ -605,6 +650,26 @@ export default function AutomationPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced Timing Information */}
|
||||
<div className="mb-3 p-3 bg-gray-900/30 rounded border border-gray-700">
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Entry Time:</span>
|
||||
<span className="text-white">{new Date(trade.entryTime).toLocaleTimeString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Exit Time:</span>
|
||||
<span className="text-white">
|
||||
{trade.exitTime ? new Date(trade.exitTime).toLocaleTimeString() : 'Active'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between col-span-2">
|
||||
<span className="text-gray-300">Duration:</span>
|
||||
<span className="text-white font-semibold">{trade.durationText}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trading Details */}
|
||||
<div className="mb-3 p-3 bg-gray-900/30 rounded border border-gray-700">
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
@@ -621,117 +686,52 @@ export default function AutomationPage() {
|
||||
<span className="text-white">${trade.positionSize}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Entry Price:</span>
|
||||
<span className="text-white">${trade.entryPrice.toFixed(2)}</span>
|
||||
<span className="text-gray-300">{trade.isActive ? 'Current' : 'Exit'} Price:</span>
|
||||
<span className="text-white">
|
||||
${trade.isActive ? trade.currentPrice?.toFixed(2) : trade.exitPrice?.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analysis Context */}
|
||||
{trade.triggerAnalysis && (
|
||||
<div className="mb-3 p-3 bg-gray-900 rounded border border-gray-600">
|
||||
<h4 className="text-blue-400 font-semibold text-sm mb-2">📊 Trigger Analysis</h4>
|
||||
<div className="space-y-1 text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Decision:</span>
|
||||
<span className="text-white">{trade.triggerAnalysis.decision} ({trade.triggerAnalysis.confidence}%)</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Market Condition:</span>
|
||||
<span className="text-white">{trade.triggerAnalysis.marketCondition}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Expected R/R:</span>
|
||||
<span className="text-white">{trade.triggerAnalysis.riskReward}</span>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<span className="text-gray-300">Key Signals:</span>
|
||||
<ul className="text-white ml-2 mt-1">
|
||||
{trade.triggerAnalysis.keySignals.map((signal, signalIdx) => (
|
||||
<li key={signalIdx} className="text-xs">• {signal}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* P&L Display */}
|
||||
<div className="mb-3 p-3 bg-gray-900/50 rounded border border-gray-600">
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-300">P&L:</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className={`font-bold ${
|
||||
trade.isActive ?
|
||||
(trade.unrealizedPnl && parseFloat(trade.unrealizedPnl) > 0 ? 'text-green-400' : 'text-red-400') :
|
||||
(trade.realizedPnl && parseFloat(trade.realizedPnl) > 0 ? 'text-green-400' : 'text-red-400')
|
||||
}`}>
|
||||
${trade.isActive ?
|
||||
(trade.unrealizedPnl || '0.00') :
|
||||
(trade.realizedPnl || '0.00')
|
||||
}
|
||||
</span>
|
||||
{trade.pnlPercent && (
|
||||
<span className={`text-xs ${
|
||||
trade.isActive ?
|
||||
(trade.unrealizedPnl && parseFloat(trade.unrealizedPnl) > 0 ? 'text-green-400' : 'text-red-400') :
|
||||
(trade.realizedPnl && parseFloat(trade.realizedPnl) > 0 ? 'text-green-400' : 'text-red-400')
|
||||
}`}>
|
||||
({trade.pnlPercent})
|
||||
</span>
|
||||
)}
|
||||
<span className="text-xs text-gray-400">
|
||||
{trade.isActive ? '(Unrealized)' : '(Realized)'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Current Metrics (Active Trades) */}
|
||||
{trade.isActive && trade.currentMetrics && (
|
||||
<div className="mb-3 p-3 bg-blue-900/20 rounded border border-blue-600/30">
|
||||
<h4 className="text-blue-400 font-semibold text-sm mb-2">📈 Current Status</h4>
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Current Price:</span>
|
||||
<span className="text-white">${trade.currentMetrics.currentPrice.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Price Change:</span>
|
||||
<span className={`${trade.currentMetrics.priceChange > 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{trade.currentMetrics.priceChange > 0 ? '+' : ''}${trade.currentMetrics.priceChange.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Unrealized P&L:</span>
|
||||
<span className={`${trade.currentMetrics.unrealizedPnL > 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{trade.currentMetrics.unrealizedPnL > 0 ? '+' : ''}${trade.currentMetrics.unrealizedPnL.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Time in Trade:</span>
|
||||
<span className="text-white">{trade.currentMetrics.timeInTrade}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Exit Metrics (Completed Trades) */}
|
||||
{!trade.isActive && trade.exitMetrics && (
|
||||
<div className="mb-3 p-3 bg-gray-900/50 rounded border border-gray-600">
|
||||
<h4 className="text-gray-400 font-semibold text-sm mb-2">📊 Exit Analysis</h4>
|
||||
<div className="space-y-1 text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Exit Reason:</span>
|
||||
<span className="text-white">{trade.exitMetrics.exitReason}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Exit Price:</span>
|
||||
<span className="text-white">${trade.exitMetrics.exitPrice.toFixed(2)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Analysis Accuracy:</span>
|
||||
<span className={`${trade.exitMetrics.analysisAccuracy.includes('Excellent') ? 'text-green-400' :
|
||||
trade.exitMetrics.analysisAccuracy.includes('Good') ? 'text-yellow-400' : 'text-red-400'}`}>
|
||||
{trade.exitMetrics.analysisAccuracy}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Actual R/R:</span>
|
||||
<span className="text-white">{trade.exitMetrics.actualRiskReward}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Trade Summary */}
|
||||
{/* Click hint */}
|
||||
<div className="flex justify-between items-center text-xs border-t border-gray-700 pt-2">
|
||||
<div className="text-gray-400">
|
||||
{trade.duration} | ${trade.tradingAmount} @ {trade.leverage}x
|
||||
SL: ${trade.stopLoss} | TP: ${trade.takeProfit}
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="text-gray-400">
|
||||
SL: ${trade.stopLoss} | TP: ${trade.takeProfit}
|
||||
</div>
|
||||
<div className={`font-semibold ${
|
||||
trade.isActive ?
|
||||
(trade.unrealizedPnl > 0 ? 'text-green-400' : 'text-red-400') :
|
||||
(trade.pnl > 0 ? 'text-green-400' : 'text-red-400')
|
||||
}`}>
|
||||
{trade.isActive ?
|
||||
`P&L: ${trade.unrealizedPnl > 0 ? '+' : ''}${trade.unrealizedPnl}` :
|
||||
`P&L: ${trade.pnl > 0 ? '+' : ''}${trade.pnl}`
|
||||
}
|
||||
</div>
|
||||
<div className="text-blue-400 hover:text-blue-300">
|
||||
📊 Click to view analysis
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -938,6 +938,199 @@ export default function AutomationPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Trade Details Modal */}
|
||||
{tradeModalOpen && selectedTrade && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-gray-900 rounded-lg max-w-6xl max-h-[90vh] overflow-y-auto border border-gray-700">
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-700">
|
||||
<div className="flex items-center space-x-4">
|
||||
<h2 className="text-2xl font-bold text-white">Trade Analysis Details</h2>
|
||||
<span className={`px-3 py-1 rounded text-sm font-semibold ${
|
||||
selectedTrade.side === 'BUY' ? 'bg-green-600 text-white' : 'bg-red-600 text-white'
|
||||
}`}>
|
||||
{selectedTrade.side} {selectedTrade.amount} @ ${selectedTrade.price.toFixed(2)}
|
||||
</span>
|
||||
<span className={`px-2 py-1 rounded text-xs ${
|
||||
selectedTrade.status === 'OPEN' ? 'bg-blue-600 text-white' :
|
||||
selectedTrade.profit > 0 ? 'bg-green-600 text-white' : 'bg-red-600 text-white'
|
||||
}`}>
|
||||
{selectedTrade.status} {selectedTrade.profit && `(${selectedTrade.profit > 0 ? '+' : ''}$${selectedTrade.profit.toFixed(2)})`}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={closeTradeModal}
|
||||
className="text-gray-400 hover:text-white text-2xl"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Content */}
|
||||
<div className="p-6 space-y-6">
|
||||
|
||||
{/* Trade Overview */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-gray-800 p-4 rounded-lg">
|
||||
<h3 className="text-lg font-semibold text-white mb-2">Trade Info</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Entry Time:</span>
|
||||
<span className="text-white">{new Date(selectedTrade.entryTime).toLocaleString()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Exit Time:</span>
|
||||
<span className="text-white">
|
||||
{selectedTrade.exitTime ? new Date(selectedTrade.exitTime).toLocaleString() : 'Active'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Duration:</span>
|
||||
<span className="text-white font-semibold">
|
||||
{selectedTrade.exitTime ?
|
||||
`${Math.floor((new Date(selectedTrade.exitTime) - new Date(selectedTrade.entryTime)) / (1000 * 60))}m` :
|
||||
`${Math.floor((new Date() - new Date(selectedTrade.entryTime)) / (1000 * 60))}m (Active)`
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-4 rounded-lg">
|
||||
<h3 className="text-lg font-semibold text-white mb-2">Position Details</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Trading Amount:</span>
|
||||
<span className="text-white">${selectedTrade.tradingAmount}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Leverage:</span>
|
||||
<span className="text-yellow-400">{selectedTrade.leverage}x</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Position Size:</span>
|
||||
<span className="text-white">${selectedTrade.positionSize}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 p-4 rounded-lg">
|
||||
<h3 className="text-lg font-semibold text-white mb-2">Risk Management</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Stop Loss:</span>
|
||||
<span className="text-red-400">${selectedTrade.detailedAnalysis?.keyLevels?.stopLoss?.price || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Take Profit:</span>
|
||||
<span className="text-green-400">${selectedTrade.detailedAnalysis?.keyLevels?.takeProfit?.price || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-300">Risk/Reward:</span>
|
||||
<span className="text-white">{selectedTrade.detailedAnalysis?.riskManagement?.riskReward || 'N/A'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analysis Screenshots */}
|
||||
<div className="bg-gray-800 p-4 rounded-lg">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">📊 Analysis Screenshots</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{selectedTrade.screenshots && Object.entries(selectedTrade.screenshots).map(([key, screenshot]) => (
|
||||
<div key={key} className="bg-gray-700 p-3 rounded-lg">
|
||||
<h4 className="text-white font-semibold mb-2">{screenshot.title}</h4>
|
||||
<div className="bg-gray-600 h-48 rounded-lg flex items-center justify-center text-gray-400 text-sm text-center">
|
||||
<div>
|
||||
📷 {screenshot.title}
|
||||
<br />
|
||||
<span className="text-xs">{screenshot.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400 mt-2">{screenshot.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Analysis Details */}
|
||||
{selectedTrade.detailedAnalysis && (
|
||||
<div className="bg-gray-800 p-4 rounded-lg">
|
||||
<h3 className="text-lg font-semibold text-white mb-4">🤖 AI Analysis</h3>
|
||||
|
||||
{/* Decision Summary */}
|
||||
<div className="mb-6 p-4 bg-gray-700 rounded-lg">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="text-blue-400 font-semibold">Decision Summary</h4>
|
||||
<span className={`px-2 py-1 rounded text-xs ${
|
||||
selectedTrade.detailedAnalysis.decision === 'BUY' ? 'bg-green-600 text-white' : 'bg-red-600 text-white'
|
||||
}`}>
|
||||
{selectedTrade.detailedAnalysis.decision} ({selectedTrade.detailedAnalysis.confidence}%)
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-gray-300 text-sm whitespace-pre-line">{selectedTrade.detailedAnalysis.aiReasoning}</p>
|
||||
</div>
|
||||
|
||||
{/* Multi-timeframe Analysis */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-yellow-400 font-semibold mb-3">Multi-timeframe Analysis</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{selectedTrade.detailedAnalysis.timeframes && Object.entries(selectedTrade.detailedAnalysis.timeframes).map(([tf, data]) => (
|
||||
<div key={tf} className="bg-gray-700 p-3 rounded-lg">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-white font-semibold">{tf}</span>
|
||||
<span className={`px-2 py-1 rounded text-xs ${
|
||||
data.decision === 'BUY' ? 'bg-green-600 text-white' : 'bg-red-600 text-white'
|
||||
}`}>
|
||||
{data.decision}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mb-1">
|
||||
Confidence: {data.confidence}%
|
||||
</div>
|
||||
<div className="text-xs text-gray-300">
|
||||
{data.signals.slice(0, 2).map((signal, idx) => (
|
||||
<div key={idx}>• {signal}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Technical Indicators */}
|
||||
<div className="mb-6">
|
||||
<h4 className="text-green-400 font-semibold mb-3">Technical Indicators</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{selectedTrade.detailedAnalysis.technicalIndicators && Object.entries(selectedTrade.detailedAnalysis.technicalIndicators).map(([indicator, data]) => (
|
||||
<div key={indicator} className="bg-gray-700 p-3 rounded-lg">
|
||||
<div className="text-white font-semibold mb-1 capitalize">{indicator}</div>
|
||||
<div className="text-yellow-400 text-sm">{data.value}</div>
|
||||
<div className="text-xs text-gray-400 mt-1">{data.interpretation}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Execution Plan */}
|
||||
<div className="bg-gray-700 p-4 rounded-lg">
|
||||
<h4 className="text-purple-400 font-semibold mb-3">Execution Plan</h4>
|
||||
<div className="space-y-2 text-sm">
|
||||
{selectedTrade.detailedAnalysis.executionPlan && Object.entries(selectedTrade.detailedAnalysis.executionPlan).map(([key, value]) => (
|
||||
<div key={key} className="flex">
|
||||
<span className="text-gray-300 capitalize w-24">{key}:</span>
|
||||
<span className="text-white">{value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user