Fix Overview page runtime errors
- Replace complex page.js with simple version that delegates to StatusOverview - Eliminates hydration errors from Date.now() usage - Prevents undefined property access errors (aiAnalytics.overview.totalLearningRecords) - Overview page now loads correctly without 'Something went wrong!' error - All data fetching and error handling properly managed by StatusOverview component
This commit is contained in:
mindesbunister
293
app/page.js
293
app/page.js
@@ -1,297 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import StatusOverview from '../components/StatusOverview.js'
|
||||
|
||||
export default function HomePage() {
|
||||
const [positions, setPositions] = useState({ hasPosition: false })
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [aiAnalytics, setAiAnalytics] = useState(null)
|
||||
const [analyticsLoading, setAnalyticsLoading] = useState(true)
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
// Try to fetch position data from our real API (might not exist)
|
||||
try {
|
||||
const positionResponse = await fetch('/api/check-position')
|
||||
if (positionResponse.ok) {
|
||||
const positionData = await positionResponse.json()
|
||||
setPositions(positionData)
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Position API not available, using default')
|
||||
}
|
||||
|
||||
// Fetch REAL AI analytics
|
||||
setAnalyticsLoading(true)
|
||||
const analyticsResponse = await fetch('/api/ai-analytics')
|
||||
if (analyticsResponse.ok) {
|
||||
const analyticsData = await analyticsResponse.json()
|
||||
setAiAnalytics(analyticsData)
|
||||
}
|
||||
setAnalyticsLoading(false)
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error)
|
||||
setAnalyticsLoading(false)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
// Refresh every 30 seconds
|
||||
const interval = setInterval(fetchData, 30000)
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Quick Overview Cards */}
|
||||
<div className="space-y-6">
|
||||
{/* Position Monitor */}
|
||||
<div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center">
|
||||
<span className="mr-2">🔍</span>Position Monitor
|
||||
</h2>
|
||||
<span className="text-sm text-gray-400">
|
||||
Last update: {new Date().toLocaleTimeString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Position Status - REAL DATA */}
|
||||
<div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
|
||||
{positions.hasPosition ? (
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-medium text-white flex items-center">
|
||||
<span className="mr-2">📈</span>Active Position
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-400">Symbol</p>
|
||||
<p className="text-lg font-semibold text-blue-400">{positions.symbol}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-400">Unrealized PnL</p>
|
||||
<p className={`text-lg font-semibold ${
|
||||
(positions.unrealizedPnl || 0) >= 0 ? 'text-green-400' : 'text-red-400'
|
||||
}`}>
|
||||
${(positions.unrealizedPnl || 0).toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-400">Risk Level</p>
|
||||
<p className={`text-lg font-semibold ${
|
||||
positions.riskLevel === 'LOW' ? 'text-green-400' :
|
||||
positions.riskLevel === 'MEDIUM' ? 'text-yellow-400' : 'text-red-400'
|
||||
}`}>
|
||||
{positions.riskLevel}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm text-gray-400">Status</p>
|
||||
<div className="flex items-center justify-center space-x-1">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-sm text-green-400">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-gray-400 text-lg flex items-center justify-center">
|
||||
<span className="mr-2">📊</span>No Open Positions
|
||||
</p>
|
||||
<p className="text-gray-500 mt-2">Scanning for opportunities...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Automation Status */}
|
||||
<div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
|
||||
<h3 className="text-lg font-medium text-white mb-4 flex items-center">
|
||||
<span className="mr-2">🤖</span>Automation Status
|
||||
</h3>
|
||||
<div className="text-center py-4">
|
||||
<p className="text-red-400 font-medium flex items-center justify-center">
|
||||
<span className="w-2 h-2 bg-red-400 rounded-full mr-2"></span>STOPPED
|
||||
</p>
|
||||
<p className="text-gray-500 mt-2"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* REAL AI Learning Analytics */}
|
||||
<div className="card card-gradient">
|
||||
{analyticsLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="spinner"></div>
|
||||
<span className="ml-2 text-gray-400">Loading REAL AI learning analytics...</span>
|
||||
</div>
|
||||
) : aiAnalytics ? (
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold text-white mb-6 flex items-center">
|
||||
<span className="mr-2">🧠</span>REAL AI Learning Analytics & Performance
|
||||
</h2>
|
||||
|
||||
{/* REAL Overview Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
<div className="bg-gray-800/50 rounded-lg p-4 text-center">
|
||||
<div className="text-2xl font-bold text-blue-400">{aiAnalytics.overview.totalLearningRecords}</div>
|
||||
<div className="text-sm text-gray-400">REAL Learning Records</div>
|
||||
</div>
|
||||
<div className="bg-gray-800/50 rounded-lg p-4 text-center">
|
||||
<div className="text-2xl font-bold text-green-400">{aiAnalytics.overview.totalTrades}</div>
|
||||
<div className="text-sm text-gray-400">REAL AI Trades Executed</div>
|
||||
</div>
|
||||
<div className="bg-gray-800/50 rounded-lg p-4 text-center">
|
||||
<div className="text-2xl font-bold text-purple-400">{aiAnalytics.realTimeMetrics.daysSinceAIStarted}</div>
|
||||
<div className="text-sm text-gray-400">Days Active</div>
|
||||
</div>
|
||||
<div className="bg-gray-800/50 rounded-lg p-4 text-center">
|
||||
<div className={`text-2xl font-bold ${aiAnalytics.learningProof.isStatisticallySignificant ? 'text-green-400' : 'text-yellow-400'}`}>
|
||||
{aiAnalytics.learningProof.isStatisticallySignificant ? '✓' : '⚠'}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Statistical Significance</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* REAL Learning Improvements */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<div className="bg-gray-800/30 rounded-lg p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-3">REAL Learning Progress</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Confidence Change:</span>
|
||||
<span className={`font-semibold ${aiAnalytics.improvements.confidenceImprovement >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{aiAnalytics.improvements.confidenceImprovement > 0 ? '+' : ''}{aiAnalytics.improvements.confidenceImprovement.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Trend Direction:</span>
|
||||
<span className={`font-semibold ${aiAnalytics.improvements.trend === 'IMPROVING' ? 'text-green-400' : 'text-yellow-400'}`}>
|
||||
{aiAnalytics.improvements.trend}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Sample Size:</span>
|
||||
<span className="text-white font-semibold">{aiAnalytics.learningProof.sampleSize}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800/30 rounded-lg p-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-3">REAL Trading Performance</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Total PnL:</span>
|
||||
<span className={`font-semibold ${aiAnalytics.pnl.totalPnL >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
${aiAnalytics.pnl.totalPnL.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">PnL Percentage:</span>
|
||||
<span className={`font-semibold ${aiAnalytics.pnl.totalPnLPercent >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{aiAnalytics.pnl.totalPnLPercent > 0 ? '+' : ''}{aiAnalytics.pnl.totalPnLPercent.toFixed(2)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Win Rate:</span>
|
||||
<span className="text-white font-semibold">{(aiAnalytics.pnl.winRate * 100).toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-400">Avg Trade Size:</span>
|
||||
<span className="text-white font-semibold">${aiAnalytics.pnl.avgTradeSize.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* REAL Proof of Learning */}
|
||||
<div className="bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-lg p-4 border border-blue-500/30">
|
||||
<h3 className="text-lg font-semibold text-white mb-3 flex items-center">
|
||||
<span className="mr-2">📈</span>PROVEN AI Learning Effectiveness (NOT FAKE!)
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-blue-400">{aiAnalytics.overview.totalLearningRecords}</div>
|
||||
<div className="text-gray-400">REAL Learning Samples</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-green-400">{aiAnalytics.overview.totalTrades}</div>
|
||||
<div className="text-gray-400">REAL AI Decisions</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className={`text-lg font-bold ${aiAnalytics.learningProof.isStatisticallySignificant ? 'text-green-400' : 'text-yellow-400'}`}>
|
||||
{aiAnalytics.learningProof.isStatisticallySignificant ? 'PROVEN' : 'LEARNING'}
|
||||
</div>
|
||||
<div className="text-gray-400">Statistical Confidence</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 text-center text-sm text-gray-300">
|
||||
🧠 REAL AI learning system has collected <strong>{aiAnalytics.overview.totalLearningRecords} samples</strong>
|
||||
and executed <strong>{aiAnalytics.overview.totalTrades} trades</strong> with
|
||||
<strong> {aiAnalytics.learningProof.isStatisticallySignificant ? 'statistically significant' : 'emerging'}</strong> learning patterns.
|
||||
<br />
|
||||
<span className="text-yellow-400">⚠️ These are ACTUAL numbers, not fake demo data!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Real-time Metrics */}
|
||||
<div className="mt-6 text-center text-xs text-gray-500">
|
||||
Last updated: {new Date(aiAnalytics.realTimeMetrics.lastUpdate).toLocaleString()}
|
||||
• Learning Active: {aiAnalytics.realTimeMetrics.isLearningActive ? '✅' : '❌'}
|
||||
• {aiAnalytics.realTimeMetrics.learningRecordsPerDay.toFixed(1)} records/day
|
||||
• {aiAnalytics.realTimeMetrics.tradesPerDay.toFixed(1)} trades/day
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-center">
|
||||
<span className="text-red-400 text-lg">⚠️</span>
|
||||
<p className="text-gray-400 mt-2">Unable to load REAL AI analytics</p>
|
||||
<button
|
||||
onClick={fetchData}
|
||||
className="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-white text-sm"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Overview Section */}
|
||||
<div className="card card-gradient">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="spinner"></div>
|
||||
<span className="ml-2 text-gray-400">Loading REAL overview...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-bold text-white mb-6">REAL Trading Overview</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl mb-2">🎯</div>
|
||||
<div className="text-lg font-semibold text-white">Strategy Performance</div>
|
||||
<div className="text-sm text-gray-400 mt-2">AI-powered analysis with REAL continuous learning</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl mb-2">🔄</div>
|
||||
<div className="text-lg font-semibold text-white">Automated Execution</div>
|
||||
<div className="text-sm text-gray-400 mt-2">24/7 market monitoring and ACTUAL trade execution</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl mb-2">📊</div>
|
||||
<div className="text-lg font-semibold text-white">Risk Management</div>
|
||||
<div className="text-sm text-gray-400 mt-2">Advanced stop-loss and position sizing</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{/* Status Overview */}
|
||||
<StatusOverview />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user