167d7ff5bc
Major Features Added: - Complete AI decision tracking system with detailed reasoning display - Prominent gradient-styled AI reasoning panel on automation-v2 page - Test AI decision generator with realistic trading scenarios - Enhanced decision transparency showing entry/exit logic and leverage calculations - Fixed orphaned order cleanup to preserve reduce-only SL/TP orders - Integrated AI leverage calculator with 100x capability (up from 10x limit) - Added lastDecision property to automation status for UI display - Enhanced position monitoring with better cleanup triggers - Beautiful gradient-styled AI Trading Analysis panel - Color-coded confidence levels and recommendation displays - Detailed breakdown of entry strategy, stop loss logic, and take profit targets - Real-time display of AI leverage reasoning with safety buffer explanations - Test AI button for demonstration of decision-making process - SL/TP orders now execute properly (fixed cleanup interference) - AI calculates sophisticated leverage (8.8x-42.2x vs previous 1x hardcoded) - Complete decision audit trail with execution details - Risk management transparency with liquidation safety calculations - Why This Decision? - Prominent reasoning section - Entry & Exit Strategy - Price levels with color coding - AI Leverage Decision - Detailed calculation explanations - Execution status with success/failure indicators - Transaction IDs and comprehensive trade details All systems now provide full transparency of AI decision-making process.
344 lines
14 KiB
TypeScript
344 lines
14 KiB
TypeScript
'use client'
|
||
import React, { useState, useEffect } from 'react'
|
||
|
||
interface LearningData {
|
||
totalAnalyses: number
|
||
totalTrades: number
|
||
avgAccuracy: number
|
||
winRate: number
|
||
confidenceLevel: number
|
||
phase: string
|
||
phaseDescription: string
|
||
strengths: string[]
|
||
improvements: string[]
|
||
nextMilestone: string
|
||
recommendation: string
|
||
daysActive: number
|
||
}
|
||
|
||
interface LearningInsights {
|
||
totalAnalyses: number
|
||
avgAccuracy: number
|
||
bestTimeframe: string
|
||
worstTimeframe: string
|
||
recommendations: string[]
|
||
}
|
||
|
||
export default function CompleteLearningPage() {
|
||
const [learningData, setLearningData] = useState<LearningData | null>(null)
|
||
const [learningInsights, setLearningInsights] = useState<LearningInsights | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [lastRefresh, setLastRefresh] = useState<Date>(new Date())
|
||
|
||
// Auto-refresh every 30 seconds
|
||
useEffect(() => {
|
||
fetchLearningData()
|
||
|
||
const interval = setInterval(() => {
|
||
fetchLearningData()
|
||
}, 30000)
|
||
|
||
return () => clearInterval(interval)
|
||
}, [])
|
||
|
||
const fetchLearningData = async () => {
|
||
try {
|
||
setLoading(true)
|
||
|
||
// Fetch AI learning status
|
||
const [statusResponse, insightsResponse] = await Promise.all([
|
||
fetch('/api/ai-learning-status'),
|
||
fetch('/api/automation/learning-insights')
|
||
])
|
||
|
||
if (statusResponse.ok) {
|
||
const statusData = await statusResponse.json()
|
||
if (statusData.success) {
|
||
setLearningData(statusData.data)
|
||
}
|
||
}
|
||
|
||
if (insightsResponse.ok) {
|
||
const insightsData = await insightsResponse.json()
|
||
if (insightsData.success) {
|
||
setLearningInsights(insightsData.insights)
|
||
}
|
||
}
|
||
|
||
setLastRefresh(new Date())
|
||
} catch (error) {
|
||
console.error('Failed to fetch learning data:', error)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const getPhaseColor = (phase: string) => {
|
||
switch (phase) {
|
||
case 'EXPERT': return 'text-green-400'
|
||
case 'ADVANCED': return 'text-blue-400'
|
||
case 'PATTERN_RECOGNITION': return 'text-yellow-400'
|
||
default: return 'text-gray-400'
|
||
}
|
||
}
|
||
|
||
const getPhaseIcon = (phase: string) => {
|
||
switch (phase) {
|
||
case 'EXPERT': return '🚀'
|
||
case 'ADVANCED': return '🌳'
|
||
case 'PATTERN_RECOGNITION': return '🌿'
|
||
default: return '🌱'
|
||
}
|
||
}
|
||
|
||
if (loading && !learningData) {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-6">
|
||
<div className="max-w-6xl mx-auto">
|
||
<div className="flex items-center justify-center py-20">
|
||
<div className="spinner border-blue-500"></div>
|
||
<span className="ml-3 text-white">Loading comprehensive learning data...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-6">
|
||
<div className="max-w-6xl mx-auto space-y-6">
|
||
|
||
{/* Header */}
|
||
<div className="text-center mb-8">
|
||
<h1 className="text-4xl font-bold text-white mb-4">🧠 Complete AI Learning Status</h1>
|
||
<p className="text-gray-300 text-lg">Comprehensive overview of your AI's learning progress and capabilities</p>
|
||
<div className="text-sm text-gray-400 mt-2">
|
||
Last updated: {lastRefresh.toLocaleTimeString()}
|
||
<span className="ml-3 text-blue-400">⟳ Auto-refreshes every 30 seconds</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quick Stats */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-lg p-6 text-center">
|
||
<div className="text-3xl font-bold text-blue-400">{learningData?.totalAnalyses || 0}</div>
|
||
<div className="text-gray-300 text-sm">Total Analyses</div>
|
||
</div>
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-lg p-6 text-center">
|
||
<div className="text-3xl font-bold text-green-400">{learningData?.totalTrades || 0}</div>
|
||
<div className="text-gray-300 text-sm">Total Trades</div>
|
||
</div>
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-lg p-6 text-center">
|
||
<div className="text-3xl font-bold text-purple-400">{((learningData?.avgAccuracy || 0) * 100).toFixed(1)}%</div>
|
||
<div className="text-gray-300 text-sm">Avg Accuracy</div>
|
||
</div>
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-lg p-6 text-center">
|
||
<div className="text-3xl font-bold text-yellow-400">{((learningData?.winRate || 0) * 100).toFixed(1)}%</div>
|
||
<div className="text-gray-300 text-sm">Win Rate</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
|
||
{/* AI Learning Phase */}
|
||
{learningData && (
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-lg p-6">
|
||
<h2 className="text-2xl font-bold text-white mb-6 flex items-center">
|
||
<span className="mr-3">{getPhaseIcon(learningData.phase)}</span>
|
||
AI Learning Phase
|
||
</h2>
|
||
|
||
<div className="space-y-6">
|
||
{/* Current Phase */}
|
||
<div className="text-center">
|
||
<div className={`text-3xl font-bold ${getPhaseColor(learningData.phase)} mb-2`}>
|
||
{learningData.phase}
|
||
</div>
|
||
<div className="text-white text-lg mb-4">{learningData.phaseDescription}</div>
|
||
<div className="text-gray-300 text-sm">Active for {learningData.daysActive} days</div>
|
||
</div>
|
||
|
||
{/* Performance Metrics */}
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="text-center bg-gray-700/30 rounded-lg p-3">
|
||
<div className="text-xl font-bold text-white">{learningData.confidenceLevel.toFixed(1)}%</div>
|
||
<div className="text-xs text-gray-400">Confidence Level</div>
|
||
</div>
|
||
<div className="text-center bg-gray-700/30 rounded-lg p-3">
|
||
<div className="text-xl font-bold text-white">{((learningData.avgAccuracy || 0) * 100).toFixed(1)}%</div>
|
||
<div className="text-xs text-gray-400">Accuracy</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Next Milestone */}
|
||
<div className="bg-blue-900/20 border border-blue-600/30 rounded-lg p-4">
|
||
<div className="text-sm font-medium text-blue-400 mb-2">Next Milestone</div>
|
||
<div className="text-white">{learningData.nextMilestone}</div>
|
||
</div>
|
||
|
||
{/* AI Recommendation */}
|
||
<div className="bg-green-900/20 border border-green-600/30 rounded-lg p-4">
|
||
<div className="text-sm font-medium text-green-400 mb-2">AI Recommendation</div>
|
||
<div className="text-white text-sm">{learningData.recommendation}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Strengths & Improvements */}
|
||
{learningData && (
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-lg p-6">
|
||
<h2 className="text-2xl font-bold text-white mb-6">📈 Performance Analysis</h2>
|
||
|
||
<div className="grid grid-cols-1 gap-6">
|
||
{/* Strengths */}
|
||
<div>
|
||
<h3 className="text-green-400 font-semibold mb-3 flex items-center">
|
||
<span className="mr-2">✅</span>
|
||
Current Strengths
|
||
</h3>
|
||
<ul className="space-y-2">
|
||
{learningData.strengths.map((strength, idx) => (
|
||
<li key={idx} className="text-sm text-gray-300 flex items-start">
|
||
<span className="text-green-400 mr-2 mt-0.5">✓</span>
|
||
{strength}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Improvements */}
|
||
<div>
|
||
<h3 className="text-yellow-400 font-semibold mb-3 flex items-center">
|
||
<span className="mr-2">🎯</span>
|
||
Areas for Improvement
|
||
</h3>
|
||
<ul className="space-y-2">
|
||
{learningData.improvements.map((improvement, idx) => (
|
||
<li key={idx} className="text-sm text-gray-300 flex items-start">
|
||
<span className="text-yellow-400 mr-2 mt-0.5">•</span>
|
||
{improvement}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Learning Insights */}
|
||
{learningInsights && (
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-lg p-6">
|
||
<h2 className="text-2xl font-bold text-white mb-6">🎯 Learning Insights</h2>
|
||
|
||
<div className="space-y-4">
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-gray-300">Total Analyses:</span>
|
||
<span className="text-white font-semibold">{learningInsights.totalAnalyses}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-gray-300">Avg Accuracy:</span>
|
||
<span className="text-white font-semibold">{(learningInsights.avgAccuracy * 100).toFixed(1)}%</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-gray-300">Best Timeframe:</span>
|
||
<span className="text-green-400 font-semibold">{learningInsights.bestTimeframe}</span>
|
||
</div>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-gray-300">Worst Timeframe:</span>
|
||
<span className="text-red-400 font-semibold">{learningInsights.worstTimeframe}</span>
|
||
</div>
|
||
|
||
{learningInsights.recommendations.length > 0 && (
|
||
<div className="mt-6">
|
||
<h4 className="text-lg font-semibold text-white mb-3">💡 AI Recommendations</h4>
|
||
<ul className="space-y-2">
|
||
{learningInsights.recommendations.map((rec, idx) => (
|
||
<li key={idx} className="text-sm text-gray-300 flex items-start">
|
||
<span className="text-blue-400 mr-2 mt-0.5">💡</span>
|
||
{rec}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Refresh Control */}
|
||
<div className="bg-gray-800/50 backdrop-blur-sm border border-gray-700 rounded-lg p-6">
|
||
<h2 className="text-2xl font-bold text-white mb-6">🔄 Data Controls</h2>
|
||
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-gray-300">Auto Refresh:</span>
|
||
<span className="text-green-400 font-semibold">Every 30 seconds</span>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-gray-300">Last Updated:</span>
|
||
<span className="text-blue-400 font-semibold">{lastRefresh.toLocaleTimeString()}</span>
|
||
</div>
|
||
|
||
<button
|
||
onClick={fetchLearningData}
|
||
disabled={loading}
|
||
className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center"
|
||
>
|
||
{loading ? (
|
||
<>
|
||
<div className="spinner border-white mr-2"></div>
|
||
Refreshing...
|
||
</>
|
||
) : (
|
||
<>
|
||
<span className="mr-2">🔄</span>
|
||
Refresh Now
|
||
</>
|
||
)}
|
||
</button>
|
||
|
||
<div className="text-xs text-gray-400 text-center mt-2">
|
||
Data refreshes automatically to show the latest AI learning progress
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Status Messages */}
|
||
{!learningData && !loading && (
|
||
<div className="bg-yellow-900/20 border border-yellow-600/30 rounded-lg p-4 text-center">
|
||
<div className="text-yellow-400 font-semibold mb-2">⚠️ No Learning Data Available</div>
|
||
<div className="text-gray-300 text-sm">
|
||
The AI hasn't started learning yet. Run some analyses to see learning progress here.
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Footer Info */}
|
||
<div className="text-center text-gray-400 text-sm border-t border-gray-700 pt-6">
|
||
<p>This page automatically refreshes every 30 seconds to show real-time AI learning progress.</p>
|
||
<p className="mt-1">Navigate to <span className="text-blue-400">/automation</span> to start the AI learning process.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<style jsx>{`
|
||
.spinner {
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 2px solid transparent;
|
||
border-top: 2px solid currentColor;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
`}</style>
|
||
</div>
|
||
)
|
||
}
|