feat: add comprehensive AI Learning Status panel with P&L tracking
- Create new Drift position history API with real trade data from screenshots - Enhance AI learning status API to include trading performance metrics - Add detailed AI Learning Status panel to automation-v2 page with: - Win/Loss counts with individual P&L amounts - Total P&L calculation from real trades - Average win/loss amounts and profit factor - Visual progress indicators and learning milestones - Real-time trading performance metrics - Integrate position history data with AI learning analytics - Display comprehensive trading statistics: 7 trades, 2 wins, 5 losses - Show actual P&L: +3.74 wins, -.06 losses, 2.68 total profit - 28.6% win rate from real Drift Protocol trade history - Enhanced UI with gradient cards and real-time data updates
This commit is contained in:
mindesbunister
@@ -27,19 +27,21 @@ export default function AutomationPageV2() {
|
||||
const [positions, setPositions] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [monitorData, setMonitorData] = useState(null)
|
||||
const [aiLearningData, setAiLearningData] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetchStatus()
|
||||
fetchBalance()
|
||||
fetchPositions()
|
||||
fetchMonitorData()
|
||||
fetchMonitorData()
|
||||
fetchAiLearningData()
|
||||
|
||||
const interval = setInterval(() => {
|
||||
fetchStatus()
|
||||
fetchBalance()
|
||||
fetchPositions()
|
||||
fetchMonitorData()
|
||||
fetchAiLearningData()
|
||||
}, 300000) // 5 minutes instead of 30 seconds
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
@@ -105,6 +107,18 @@ export default function AutomationPageV2() {
|
||||
}
|
||||
}
|
||||
|
||||
const fetchAiLearningData = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/ai-learning-status')
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setAiLearningData(data.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch AI learning data:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleStart = async () => {
|
||||
console.log('🚀 Starting automation...')
|
||||
setLoading(true)
|
||||
@@ -927,6 +941,113 @@ export default function AutomationPageV2() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Enhanced AI Learning Status Panel */}
|
||||
{aiLearningData && (
|
||||
<div className="bg-gradient-to-br from-gray-900/90 via-slate-800/80 to-gray-900/90 backdrop-blur-xl p-6 rounded-2xl border border-gray-600/30 shadow-2xl">
|
||||
<div className="flex items-center space-x-3 mb-6">
|
||||
<div className="w-14 h-14 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-purple-500/25">
|
||||
<span className="text-2xl">🧠</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white">AI Learning Status</h3>
|
||||
<p className="text-gray-400">{aiLearningData.phase} • Real-time learning progress</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Stats Grid */}
|
||||
<div className="grid grid-cols-4 gap-4 mb-6">
|
||||
<div className="p-4 bg-gradient-to-br from-green-900/30 to-emerald-900/20 rounded-xl border border-green-500/30">
|
||||
<div className="text-green-400 text-2xl font-bold">{aiLearningData.avgAccuracy}%</div>
|
||||
<div className="text-gray-400 text-sm">Avg Accuracy</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gradient-to-br from-blue-900/30 to-cyan-900/20 rounded-xl border border-blue-500/30">
|
||||
<div className="text-blue-400 text-2xl font-bold">{aiLearningData.winRate}%</div>
|
||||
<div className="text-gray-400 text-sm">Win Rate</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gradient-to-br from-purple-900/30 to-violet-900/20 rounded-xl border border-purple-500/30">
|
||||
<div className="text-purple-400 text-2xl font-bold">{aiLearningData.confidenceLevel}%</div>
|
||||
<div className="text-gray-400 text-sm">Confidence Level</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gradient-to-br from-yellow-900/30 to-orange-900/20 rounded-xl border border-yellow-500/30">
|
||||
<div className="text-yellow-400 text-2xl font-bold">{aiLearningData.daysActive}</div>
|
||||
<div className="text-gray-400 text-sm">Days Active</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trading Performance Section */}
|
||||
{aiLearningData.statistics && aiLearningData.statistics.totalTrades > 0 && (
|
||||
<div className="mb-6">
|
||||
<h4 className="text-lg font-semibold text-cyan-400 mb-3 flex items-center">
|
||||
<span className="mr-2">📊</span>Trading Performance
|
||||
</h4>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 mb-4">
|
||||
<div className="p-3 bg-black/20 rounded-lg">
|
||||
<div className="text-green-400 font-bold text-lg">{aiLearningData.statistics.wins}</div>
|
||||
<div className="text-gray-400 text-sm">Wins</div>
|
||||
<div className="text-green-300 text-xs">+${aiLearningData.statistics.winsPnl.toFixed(2)}</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-black/20 rounded-lg">
|
||||
<div className="text-red-400 font-bold text-lg">{aiLearningData.statistics.losses}</div>
|
||||
<div className="text-gray-400 text-sm">Losses</div>
|
||||
<div className="text-red-300 text-xs">${aiLearningData.statistics.lossesPnl.toFixed(2)}</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-black/20 rounded-lg">
|
||||
<div className={`font-bold text-lg ${aiLearningData.statistics.totalPnl >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
${aiLearningData.statistics.totalPnl >= 0 ? '+' : ''}${aiLearningData.statistics.totalPnl.toFixed(2)}
|
||||
</div>
|
||||
<div className="text-gray-400 text-sm">Total P&L</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advanced Metrics */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-3 bg-black/20 rounded-lg">
|
||||
<div className="text-gray-400 text-sm mb-1">Avg Win</div>
|
||||
<div className="text-green-400 font-semibold">${aiLearningData.statistics.avgWin.toFixed(2)}</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-black/20 rounded-lg">
|
||||
<div className="text-gray-400 text-sm mb-1">Avg Loss</div>
|
||||
<div className="text-red-400 font-semibold">${aiLearningData.statistics.avgLoss.toFixed(2)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Learning Progress */}
|
||||
<div className="mb-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-gray-400 text-sm">Learning Progress</span>
|
||||
<span className="text-white text-sm">{aiLearningData.totalAnalyses} analyses</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-gradient-to-r from-purple-500 to-blue-500 h-2 rounded-full transition-all duration-500"
|
||||
style={{ width: `${Math.min(100, (aiLearningData.avgAccuracy / 100) * 100)}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Next Milestone */}
|
||||
<div className="p-3 bg-gradient-to-r from-indigo-900/30 to-purple-900/30 rounded-xl border border-indigo-500/30">
|
||||
<div className="text-indigo-400 font-semibold text-sm mb-1">Next Milestone</div>
|
||||
<div className="text-white text-sm">{aiLearningData.nextMilestone}</div>
|
||||
</div>
|
||||
|
||||
{/* AI Recommendation */}
|
||||
<div className="mt-4 p-3 bg-gradient-to-r from-cyan-900/30 to-blue-900/30 rounded-xl border border-cyan-500/30">
|
||||
<div className="text-cyan-400 font-semibold text-sm mb-1">AI Recommendation</div>
|
||||
<div className="text-white text-sm">{aiLearningData.recommendation}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Enhanced AI Trading Analysis Panel */}
|
||||
<div className="bg-gradient-to-br from-purple-900/40 via-blue-900/30 to-purple-900/40 backdrop-blur-xl p-8 rounded-2xl border-2 border-purple-500/40 shadow-2xl shadow-purple-500/20">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
|
||||
Reference in New Issue
Block a user