416f72181e
New Features: - 📊 Detailed Market Analysis Panel (similar to pro trading interface) * Market sentiment, recommendation, resistance/support levels * Detailed trading setup with entry/exit points * Risk management with R:R ratios and confirmation triggers * Technical indicators (RSI, OBV, VWAP) analysis - 🧠 AI Learning Insights Panel * Real-time learning status and success rates * Winner/Loser trade outcome tracking * AI reflection messages explaining what was learned * Current thresholds and pattern recognition data - 🔮 AI Database Integration * Shows what AI learned from previous trades * Current confidence thresholds and risk parameters * Pattern recognition for symbol/timeframe combinations * Next trade adjustments based on learning - 🎓 Intelligent Learning from Outcomes * Automatic trade outcome analysis (winner/loser) * AI generates learning insights from each trade result * Confidence adjustment based on trade performance * Pattern reinforcement or correction based on results - Beautiful gradient panels with color-coded sections - Clear winner/loser indicators with visual feedback - Expandable detailed analysis view - Real-time learning progress tracking - Completely isolated paper trading (no real money risk) - Real market data integration for authentic learning - Safe practice environment with professional analysis tools This provides a complete AI learning trading simulation where users can: 1. Get real market analysis with detailed reasoning 2. Execute safe paper trades with zero risk 3. See immediate feedback on trade outcomes 4. Learn from AI reflections and insights 5. Understand how AI adapts and improves over time
101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
"use client"
|
||
import React, { useState, useEffect } from 'react'
|
||
import Link from 'next/link'
|
||
import { usePathname } from 'next/navigation'
|
||
|
||
const navItems = [
|
||
{
|
||
name: 'Overview',
|
||
href: '/',
|
||
icon: '🏠',
|
||
description: 'Dashboard overview'
|
||
},
|
||
{
|
||
name: 'Analysis',
|
||
href: '/analysis',
|
||
icon: '📊',
|
||
description: 'AI analysis & insights'
|
||
},
|
||
{
|
||
name: 'Safe Paper Trading',
|
||
href: '/safe-paper-trading',
|
||
icon: '<27>️',
|
||
description: 'Safe isolated paper trading - zero risk of real trades'
|
||
},
|
||
{
|
||
name: 'Paper Trading (DISABLED)',
|
||
href: '/paper-trading',
|
||
icon: '🚨',
|
||
description: 'DISABLED: Contains bug that executes real trades'
|
||
},
|
||
{
|
||
name: 'Trading',
|
||
href: '/trading',
|
||
icon: '💰',
|
||
description: 'Execute trades'
|
||
},
|
||
{
|
||
name: 'Chart Trading',
|
||
href: '/chart-trading-demo',
|
||
icon: '📈',
|
||
description: 'Advanced chart trading'
|
||
},
|
||
{
|
||
name: 'Automation',
|
||
href: '/automation-v2',
|
||
icon: '🤖',
|
||
description: 'Auto-trading settings'
|
||
},
|
||
{
|
||
name: 'Settings',
|
||
href: '/settings',
|
||
icon: '⚙️',
|
||
description: 'Developer settings'
|
||
}
|
||
]
|
||
|
||
export default function Navigation() {
|
||
const pathname = usePathname()
|
||
const [mounted, setMounted] = useState(false)
|
||
|
||
useEffect(() => {
|
||
setMounted(true)
|
||
}, [])
|
||
|
||
return (
|
||
<nav className="bg-gray-900/50 backdrop-blur-sm border-b border-gray-800">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="flex items-center justify-between h-14">
|
||
<div className="flex items-center space-x-8">
|
||
{navItems.map((item) => {
|
||
// Use mounted state to prevent hydration mismatch
|
||
const isActive = mounted ? pathname === item.href : false
|
||
|
||
return (
|
||
<Link
|
||
key={item.name}
|
||
href={item.href}
|
||
suppressHydrationWarning
|
||
className={`flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 group ${
|
||
isActive
|
||
? 'bg-blue-600/20 text-blue-400 border border-blue-500/30'
|
||
: 'text-gray-400 hover:text-gray-200 hover:bg-gray-800/50'
|
||
}`}
|
||
>
|
||
<span
|
||
className={`text-lg ${isActive ? 'text-blue-400' : 'text-gray-500 group-hover:text-gray-300'}`}
|
||
suppressHydrationWarning
|
||
>
|
||
{item.icon}
|
||
</span>
|
||
<span>{item.name}</span>
|
||
</Link>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
)
|
||
}
|