Enhance trade information display with comprehensive details
- Enhanced analysis-details API with detailed trade information - Added real-time P&L tracking for active trades - Implemented trade status indicators (ACTIVE/PROFIT/LOSS) - Added entry/exit price tracking with current market price - Enhanced trade duration tracking and confidence levels - Added stop loss and take profit level display for active trades - Improved trade result classification and descriptions - Updated automation page to use enhanced trade data - Added comprehensive trade performance metrics - Enhanced trade reasoning and AI confidence display - Added demo trade data for better visualization - Fixed trade data source to use analysis-details endpoint - Added performance metrics display (timestamps, processing time) - Enhanced analysis performance section with proper metrics
This commit is contained in:
@@ -41,6 +41,10 @@ export default function AutomationPage() {
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setAnalysisDetails(data.data)
|
||||
// Also update recent trades from the same endpoint
|
||||
if (data.data.recentTrades) {
|
||||
setRecentTrades(data.data.recentTrades)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch analysis details:', error)
|
||||
@@ -73,10 +77,11 @@ export default function AutomationPage() {
|
||||
|
||||
const fetchRecentTrades = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/automation/recent-trades')
|
||||
// Get enhanced trade data from analysis-details instead of recent-trades
|
||||
const response = await fetch('/api/automation/analysis-details')
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setRecentTrades(data.trades)
|
||||
if (data.success && data.data.recentTrades) {
|
||||
setRecentTrades(data.data.recentTrades)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch recent trades:', error)
|
||||
@@ -472,20 +477,56 @@ export default function AutomationPage() {
|
||||
{recentTrades.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{recentTrades.slice(0, 5).map((trade, idx) => (
|
||||
<div key={idx} className="flex items-center justify-between p-3 bg-gray-800 rounded-lg">
|
||||
<div>
|
||||
<span className={`font-semibold ${
|
||||
trade.side === 'BUY' ? 'text-green-400' : 'text-red-400'
|
||||
<div key={idx} className="p-3 bg-gray-800 rounded-lg">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="flex items-center">
|
||||
<span className={`font-semibold px-2 py-1 rounded text-xs ${
|
||||
trade.side === 'BUY' ? 'bg-green-600 text-white' : 'bg-red-600 text-white'
|
||||
}`}>
|
||||
{trade.side}
|
||||
</span>
|
||||
<span className="text-white ml-2 font-semibold">{trade.amount}</span>
|
||||
<span className={`ml-2 px-2 py-1 rounded text-xs ${
|
||||
trade.isActive ? 'bg-blue-600 text-white' :
|
||||
trade.result === 'PROFIT' ? 'bg-green-600 text-white' :
|
||||
trade.result === 'LOSS' ? 'bg-red-600 text-white' :
|
||||
'bg-gray-600 text-white'
|
||||
}`}>
|
||||
{trade.isActive ? 'ACTIVE' : trade.result}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-white font-semibold">${trade.entryPrice.toFixed(2)}</div>
|
||||
<div className="text-sm text-gray-400">{trade.confidence}% confidence</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mb-1">
|
||||
{trade.reason}
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<div className="text-gray-400">
|
||||
{trade.duration}
|
||||
</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.side}
|
||||
</span>
|
||||
<span className="text-white ml-2">{trade.symbol}</span>
|
||||
<span className="text-gray-400 ml-2">{trade.timeframe}</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-white font-semibold">${trade.amount}</div>
|
||||
<div className="text-sm text-gray-400">{trade.confidence}% confidence</div>
|
||||
{trade.isActive ?
|
||||
`P&L: ${trade.unrealizedPnl > 0 ? '+' : ''}${trade.unrealizedPnl}` :
|
||||
`P&L: ${trade.pnl > 0 ? '+' : ''}${trade.pnl}`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{trade.isActive && (
|
||||
<div className="mt-2 pt-2 border-t border-gray-700">
|
||||
<div className="flex justify-between text-xs">
|
||||
<span className="text-gray-400">SL: ${trade.stopLoss}</span>
|
||||
<span className="text-gray-400">Current: ${trade.currentPrice.toFixed(2)}</span>
|
||||
<span className="text-gray-400">TP: ${trade.takeProfit}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user