fix: implement trade button integration with AI analysis

- Add trade button next to each analysis result
- Fix TradeModal to properly receive and display analysis data
- Update TypeScript interfaces to match actual data structure
- Pre-fill Entry Price, Stop Loss, and Take Profit values from AI analysis
- Fix duplicate variable declarations causing build errors
- Remove TradeExecutionPanel from analysis page (reverted to original design)

 Trade button now opens modal with correct pre-filled values
 Analysis data properly passed between components
 Build errors resolved
This commit is contained in:
mindesbunister
2025-07-16 15:22:19 +02:00
parent 0e3a2d7255
commit b0e9cfe113
3 changed files with 288 additions and 160 deletions

View File

@@ -1,86 +1,21 @@
'use client'
import React, { useState } from 'react'
import AIAnalysisPanel from '../../components/AIAnalysisPanel.tsx'
import TradeExecutionPanel from '../../components/TradeExecutionPanel.js'
import AIAnalysisPanel from '../../components/AIAnalysisPanel'
export default function AnalysisPage() {
const [analysisResult, setAnalysisResult] = useState(null)
const [currentSymbol, setCurrentSymbol] = useState('SOL')
const handleAnalysisComplete = (analysis, symbol) => {
setAnalysisResult(analysis)
setCurrentSymbol(symbol || 'SOL')
}
return (
<div className="space-y-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-white">AI Analysis & Trading</h1>
<p className="text-gray-400 mt-2">Get comprehensive market insights powered by AI analysis and execute trades</p>
</div>
<div className="text-center mb-8">
<h1 className="text-3xl font-bold text-white mb-4">
🤖 AI-Powered Market Analysis
</h1>
<p className="text-gray-400 max-w-2xl mx-auto">
Get professional trading insights with multi-timeframe analysis, precise entry/exit levels,
and institutional-quality recommendations powered by OpenAI.
</p>
</div>
<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
{/* Left Column - AI Analysis */}
<div className="space-y-6">
<div className="bg-gray-900/50 rounded-lg p-6 border border-gray-800">
<h2 className="text-xl font-semibold text-white mb-4">📊 AI Market Analysis</h2>
<AIAnalysisPanel onAnalysisComplete={handleAnalysisComplete} />
</div>
</div>
{/* Right Column - Trading Panel */}
<div className="space-y-6">
<div className="bg-gray-900/50 rounded-lg p-6 border border-gray-800">
<h2 className="text-xl font-semibold text-white mb-4">💰 Execute Trade</h2>
<TradeExecutionPanel
analysis={analysisResult}
symbol={currentSymbol}
/>
</div>
{/* Analysis Summary */}
{analysisResult && (
<div className="bg-blue-900/20 rounded-lg p-6 border border-blue-800">
<h3 className="text-lg font-semibold text-blue-400 mb-3">🎯 Analysis Summary</h3>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-400">Symbol:</span>
<span className="text-white font-medium">{currentSymbol}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-400">Sentiment:</span>
<span className={`font-medium ${
analysisResult.sentiment === 'BULLISH' ? 'text-green-400' :
analysisResult.sentiment === 'BEARISH' ? 'text-red-400' : 'text-yellow-400'
}`}>
{analysisResult.sentiment}
</span>
</div>
{analysisResult.entryPrice && (
<div className="flex justify-between">
<span className="text-gray-400">Entry Price:</span>
<span className="text-white font-medium">${analysisResult.entryPrice}</span>
</div>
)}
{analysisResult.stopLoss && (
<div className="flex justify-between">
<span className="text-gray-400">Stop Loss:</span>
<span className="text-red-400 font-medium">${analysisResult.stopLoss}</span>
</div>
)}
{analysisResult.takeProfit && (
<div className="flex justify-between">
<span className="text-gray-400">Take Profit:</span>
<span className="text-green-400 font-medium">${analysisResult.takeProfit}</span>
</div>
)}
</div>
</div>
)}
</div>
</div>
<AIAnalysisPanel />
</div>
)
}