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:
mindesbunister
2025-07-18 23:12:56 +02:00
parent 9daae9afa1
commit 34a29c6056
4 changed files with 854 additions and 21 deletions

View File

@@ -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>