🎨 Beautiful take profit display and enhanced trading UI
- Enhanced take profit section with structured TP1/TP2 display - Added RSI/OBV expectations for each target with color-coded indicators - Implemented comprehensive risk management section with R:R ratios - Added timeframe risk assessment with leverage recommendations - Enhanced technical indicators section with organized layout - Added alternative strategies section for tighter stops and scaled entries - Improved entry point and stop loss display with emojis and better formatting - Professional trading dashboard with all analysis components beautifully displayed
This commit is contained in:
mindesbunister
@@ -424,10 +424,13 @@ export default function AIAnalysisPanel() {
|
||||
<div>
|
||||
<span className="text-xs text-gray-400">Entry Point</span>
|
||||
<p className="text-yellow-300 font-mono font-semibold">
|
||||
${safeRender(result.analysis.entry.price || result.analysis.entry)}
|
||||
📍 ${safeRender(result.analysis.entry.price || result.analysis.entry)}
|
||||
{result.analysis.entry.buffer && (
|
||||
<span className="text-yellow-400 text-xs ml-1">{safeRender(result.analysis.entry.buffer)}</span>
|
||||
)}
|
||||
</p>
|
||||
{result.analysis.entry.rationale && (
|
||||
<p className="text-xs text-gray-300 mt-1">{safeRender(result.analysis.entry.rationale)}</p>
|
||||
<p className="text-xs text-gray-300 mt-1">💡 {safeRender(result.analysis.entry.rationale)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -436,22 +439,199 @@ export default function AIAnalysisPanel() {
|
||||
<div>
|
||||
<span className="text-xs text-gray-400">Stop Loss</span>
|
||||
<p className="text-red-300 font-mono font-semibold">
|
||||
${safeRender(result.analysis.stopLoss.price || result.analysis.stopLoss)}
|
||||
🛑 ${safeRender(result.analysis.stopLoss.price || result.analysis.stopLoss)}
|
||||
</p>
|
||||
{result.analysis.stopLoss.rationale && (
|
||||
<p className="text-xs text-gray-300 mt-1">{safeRender(result.analysis.stopLoss.rationale)}</p>
|
||||
<p className="text-xs text-gray-300 mt-1">💡 {safeRender(result.analysis.stopLoss.rationale)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.analysis.takeProfits && (
|
||||
<div>
|
||||
<span className="text-xs text-gray-400">Take Profit</span>
|
||||
<p className="text-green-300 font-mono font-semibold">
|
||||
{typeof result.analysis.takeProfits === 'object'
|
||||
? Object.values(result.analysis.takeProfits).map(tp => `$${safeRender(tp)}`).join(', ')
|
||||
: `$${safeRender(result.analysis.takeProfits)}`}
|
||||
</p>
|
||||
<span className="text-xs text-gray-400">Take Profit Targets</span>
|
||||
<div className="space-y-2 mt-2">
|
||||
{result.analysis.takeProfits.tp1 && (
|
||||
<div className="p-2 bg-green-500/5 rounded border border-green-500/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-yellow-400">🥉</span>
|
||||
<span className="text-green-300 font-mono font-semibold">
|
||||
TP1: ${typeof result.analysis.takeProfits.tp1.price !== 'undefined'
|
||||
? result.analysis.takeProfits.tp1.price
|
||||
: safeRender(result.analysis.takeProfits.tp1)}
|
||||
</span>
|
||||
</div>
|
||||
{result.analysis.takeProfits.tp1.description && (
|
||||
<p className="text-xs text-green-200 mt-1">
|
||||
📋 {safeRender(result.analysis.takeProfits.tp1.description)}
|
||||
</p>
|
||||
)}
|
||||
{result.analysis.takeProfits.tp1.rsiExpectation && (
|
||||
<p className="text-xs text-blue-200 mt-1">
|
||||
📊 RSI: {safeRender(result.analysis.takeProfits.tp1.rsiExpectation)}
|
||||
</p>
|
||||
)}
|
||||
{result.analysis.takeProfits.tp1.obvExpectation && (
|
||||
<p className="text-xs text-purple-200 mt-1">
|
||||
📈 OBV: {safeRender(result.analysis.takeProfits.tp1.obvExpectation)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.analysis.takeProfits.tp2 && (
|
||||
<div className="p-2 bg-green-500/5 rounded border border-green-500/20">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-300">🥈</span>
|
||||
<span className="text-green-300 font-mono font-semibold">
|
||||
TP2: ${typeof result.analysis.takeProfits.tp2.price !== 'undefined'
|
||||
? result.analysis.takeProfits.tp2.price
|
||||
: safeRender(result.analysis.takeProfits.tp2)}
|
||||
</span>
|
||||
</div>
|
||||
{result.analysis.takeProfits.tp2.description && (
|
||||
<p className="text-xs text-green-200 mt-1">
|
||||
📋 {safeRender(result.analysis.takeProfits.tp2.description)}
|
||||
</p>
|
||||
)}
|
||||
{result.analysis.takeProfits.tp2.rsiExpectation && (
|
||||
<p className="text-xs text-blue-200 mt-1">
|
||||
📊 RSI: {safeRender(result.analysis.takeProfits.tp2.rsiExpectation)}
|
||||
</p>
|
||||
)}
|
||||
{result.analysis.takeProfits.tp2.obvExpectation && (
|
||||
<p className="text-xs text-purple-200 mt-1">
|
||||
📈 OBV: {safeRender(result.analysis.takeProfits.tp2.obvExpectation)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Fallback for simple take profit format */}
|
||||
{!result.analysis.takeProfits.tp1 && !result.analysis.takeProfits.tp2 && (
|
||||
<p className="text-green-300 font-mono font-semibold">
|
||||
{typeof result.analysis.takeProfits === 'object'
|
||||
? Object.values(result.analysis.takeProfits).map(tp => `$${safeRender(tp)}`).join(', ')
|
||||
: `$${safeRender(result.analysis.takeProfits)}`}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Risk Management & Confirmation */}
|
||||
{(result.analysis.riskToReward || result.analysis.confirmationTrigger) && (
|
||||
<div className="p-4 bg-gradient-to-br from-amber-500/10 to-orange-500/10 border border-amber-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-amber-400 mb-3">Risk Management</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{result.analysis.riskToReward && (
|
||||
<div>
|
||||
<span className="text-xs text-amber-400">Risk/Reward Ratio</span>
|
||||
<p className="text-amber-200 font-mono font-semibold">⚖️ {safeRender(result.analysis.riskToReward)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.analysis.confirmationTrigger && (
|
||||
<div>
|
||||
<span className="text-xs text-amber-400">Confirmation Trigger</span>
|
||||
<p className="text-amber-200 text-sm">🔔 {safeRender(result.analysis.confirmationTrigger)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Timeframe Risk Assessment */}
|
||||
{result.analysis.timeframeRisk && (
|
||||
<div className="p-4 bg-gradient-to-br from-red-500/10 to-pink-500/10 border border-red-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-red-400 mb-3">⏰ Timeframe Risk Assessment</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
{result.analysis.timeframeRisk.assessment && (
|
||||
<div>
|
||||
<span className="text-xs text-red-400">Risk Level</span>
|
||||
<p className="text-red-200 font-semibold">📊 {safeRender(result.analysis.timeframeRisk.assessment)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.analysis.timeframeRisk.positionSize && (
|
||||
<div>
|
||||
<span className="text-xs text-red-400">Position Size</span>
|
||||
<p className="text-red-200 font-semibold">💼 {safeRender(result.analysis.timeframeRisk.positionSize)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.analysis.timeframeRisk.leverageRecommendation && (
|
||||
<div>
|
||||
<span className="text-xs text-red-400">Leverage</span>
|
||||
<p className="text-red-200 font-semibold">🎚️ {safeRender(result.analysis.timeframeRisk.leverageRecommendation)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Technical Indicators */}
|
||||
{result.analysis.indicatorAnalysis && (
|
||||
<div className="p-4 bg-gradient-to-br from-cyan-500/10 to-blue-500/10 border border-cyan-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-cyan-400 mb-3">📈 Technical Indicators</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{result.analysis.indicatorAnalysis.rsi && (
|
||||
<div className="p-2 bg-cyan-500/5 rounded border border-cyan-500/20">
|
||||
<span className="text-xs text-cyan-400 font-semibold">📊 RSI</span>
|
||||
<p className="text-cyan-200 text-xs mt-1">{safeRender(result.analysis.indicatorAnalysis.rsi)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.analysis.indicatorAnalysis.vwap && (
|
||||
<div className="p-2 bg-blue-500/5 rounded border border-blue-500/20">
|
||||
<span className="text-xs text-blue-400 font-semibold">📈 VWAP</span>
|
||||
<p className="text-blue-200 text-xs mt-1">{safeRender(result.analysis.indicatorAnalysis.vwap)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.analysis.indicatorAnalysis.obv && (
|
||||
<div className="p-2 bg-purple-500/5 rounded border border-purple-500/20">
|
||||
<span className="text-xs text-purple-400 font-semibold">📊 OBV</span>
|
||||
<p className="text-purple-200 text-xs mt-1">{safeRender(result.analysis.indicatorAnalysis.obv)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.analysis.indicatorAnalysis.macd && (
|
||||
<div className="p-2 bg-indigo-500/5 rounded border border-indigo-500/20">
|
||||
<span className="text-xs text-indigo-400 font-semibold">📉 MACD</span>
|
||||
<p className="text-indigo-200 text-xs mt-1">{safeRender(result.analysis.indicatorAnalysis.macd)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Alternatives */}
|
||||
{result.analysis.alternatives && (
|
||||
<div className="p-4 bg-gradient-to-br from-violet-500/10 to-purple-500/10 border border-violet-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-violet-400 mb-3">🔄 Alternative Strategies</h4>
|
||||
<div className="space-y-2">
|
||||
{result.analysis.alternatives.tigherStopOption && (
|
||||
<div className="p-2 bg-violet-500/5 rounded border border-violet-500/20">
|
||||
<span className="text-xs text-violet-400 font-semibold">🎯 Tighter Stop Option</span>
|
||||
<p className="text-violet-200 text-xs mt-1">{safeRender(result.analysis.alternatives.tigherStopOption)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.analysis.alternatives.scaledEntry && (
|
||||
<div className="p-2 bg-purple-500/5 rounded border border-purple-500/20">
|
||||
<span className="text-xs text-purple-400 font-semibold">📊 Scaled Entry</span>
|
||||
<p className="text-purple-200 text-xs mt-1">{safeRender(result.analysis.alternatives.scaledEntry)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.analysis.alternatives.invalidationScenario && (
|
||||
<div className="p-2 bg-red-500/5 rounded border border-red-500/20">
|
||||
<span className="text-xs text-red-400 font-semibold">❌ Invalidation Scenario</span>
|
||||
<p className="text-red-200 text-xs mt-1">{safeRender(result.analysis.alternatives.invalidationScenario)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user