Fix Tailwind CSS styling configuration
- Add tailwind.config.ts with proper content paths and theme config - Add postcss.config.js for Tailwind and autoprefixer processing - Downgrade tailwindcss to v3.4.17 and add missing PostCSS dependencies - Update Dockerfile to clarify build process - Fix UI styling issues in Docker environment
This commit is contained in:
mindesbunister
42
.tradingview-session/cookies.json
Normal file
42
.tradingview-session/cookies.json
Normal file
@@ -0,0 +1,42 @@
|
||||
[
|
||||
{
|
||||
"name": "_sp_ses.cf1a",
|
||||
"value": "*",
|
||||
"domain": ".tradingview.com",
|
||||
"path": "/",
|
||||
"expires": 1760130215,
|
||||
"httpOnly": false,
|
||||
"secure": true,
|
||||
"sameSite": "None"
|
||||
},
|
||||
{
|
||||
"name": "cookiePrivacyPreferenceBannerProduction",
|
||||
"value": "ignored",
|
||||
"domain": ".tradingview.com",
|
||||
"path": "/",
|
||||
"expires": 1786910284.474377,
|
||||
"httpOnly": false,
|
||||
"secure": false,
|
||||
"sameSite": "Lax"
|
||||
},
|
||||
{
|
||||
"name": "sp",
|
||||
"value": "e859cfb0-8391-4ff2-bfd4-7e8dece66223",
|
||||
"domain": "snowplow-pixel.tradingview.com",
|
||||
"path": "/",
|
||||
"expires": 1783890216.454505,
|
||||
"httpOnly": true,
|
||||
"secure": true,
|
||||
"sameSite": "None"
|
||||
},
|
||||
{
|
||||
"name": "_sp_id.cf1a",
|
||||
"value": ".1752350284.1.1752354216..e1158a69-b832-47e3-8c6d-fb185294fa96..67d8f61c-9e0d-4f5b-a27b-0daf04e61207.1752350284475.13",
|
||||
"domain": ".tradingview.com",
|
||||
"path": "/",
|
||||
"expires": 1786914215.942213,
|
||||
"httpOnly": false,
|
||||
"secure": true,
|
||||
"sameSite": "None"
|
||||
}
|
||||
]
|
||||
27
.tradingview-session/session-storage.json
Normal file
27
.tradingview-session/session-storage.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"localStorage": {
|
||||
"cookie_dialog_tracked": "1",
|
||||
"tradingview.widgetbar.widget.alerts.bhwdEXIZXDRD": "{}",
|
||||
"tradingview.globalNotification": "14180",
|
||||
"tradingview.SymbolSearch.recent": "[\"COINBASE:SOLUSD\"]",
|
||||
"tradingview.details.force_uncheck_bid_ask_03_2023": "true",
|
||||
"tvlocalstorage.available": "true",
|
||||
"tradingview.widgetbar.layout-settings": "{\"widgets\":{\"watchlist\":[{\"id\":\"watchlist.UnmJh4ohCYUv\"}],\"detail\":[{\"id\":\"detail.dYGOrm50hOjz\"}],\"alerts\":[{\"id\":\"alerts.bhwdEXIZXDRD\"}],\"object_tree\":[{\"id\":\"object_tree.74i7WNrleNPn\"}]},\"settings\":{\"width\":300,\"version\":2}}",
|
||||
"first_visit_time": "1752350284651",
|
||||
"tradingview.trading.oanda_rest_launched_in_country": "DE",
|
||||
"tradingview.trading.orderWidgetMode.": "panel",
|
||||
"snowplowOutQueue_tv_cf_post2.expires": "1815426215944",
|
||||
"tradingview.widgetbar.widget.object_tree.74i7WNrleNPn": "{\"selectedPage\":\"object_tree\"}",
|
||||
"featuretoggle_seed": "79463",
|
||||
"tradingview.symboledit.tradable": "true",
|
||||
"snowplowOutQueue_tv_cf_post2": "[]",
|
||||
"tradingview.editchart.model.style": "1",
|
||||
"tradingview.editchart.model.interval": "D",
|
||||
"tradingview.editchart.model.symbol": "COINBASE:SOLUSD",
|
||||
"tradingview.trading.tradingPanelOpened": "false",
|
||||
"last-crosstab-monotonic-timestamp": "1752350304273",
|
||||
"tradingview.details.force_uncheck_ranges_03_2023": "true",
|
||||
"signupSource": "auth page tvd"
|
||||
},
|
||||
"sessionStorage": {}
|
||||
}
|
||||
124
app/api/session-status/route.ts
Normal file
124
app/api/session-status/route.ts
Normal file
@@ -0,0 +1,124 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { tradingViewAutomation } from '../../../lib/tradingview-automation'
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
console.log('📊 Getting TradingView session status...')
|
||||
|
||||
// Initialize if not already done (Docker-safe initialization)
|
||||
if (!tradingViewAutomation['browser']) {
|
||||
console.log('🐳 Initializing TradingView automation in Docker environment...')
|
||||
await tradingViewAutomation.init()
|
||||
}
|
||||
|
||||
// Get lightweight session information without navigation
|
||||
const sessionInfo = await tradingViewAutomation.getQuickSessionStatus()
|
||||
|
||||
// Determine connection status based on browser state and URL
|
||||
let connectionStatus = 'unknown'
|
||||
if (sessionInfo.browserActive) {
|
||||
if (sessionInfo.currentUrl.includes('tradingview.com')) {
|
||||
connectionStatus = 'connected'
|
||||
} else if (sessionInfo.currentUrl) {
|
||||
connectionStatus = 'disconnected'
|
||||
} else {
|
||||
connectionStatus = 'unknown'
|
||||
}
|
||||
} else {
|
||||
connectionStatus = 'disconnected'
|
||||
}
|
||||
|
||||
const response = {
|
||||
success: true,
|
||||
session: {
|
||||
...sessionInfo,
|
||||
connectionStatus,
|
||||
lastChecked: new Date().toISOString(),
|
||||
dockerEnv: process.env.DOCKER_ENV === 'true',
|
||||
environment: process.env.NODE_ENV || 'development'
|
||||
}
|
||||
}
|
||||
|
||||
console.log('✅ Session status retrieved:', response.session)
|
||||
return NextResponse.json(response)
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to get session status:', error)
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Failed to get session status',
|
||||
session: {
|
||||
isAuthenticated: false,
|
||||
hasSavedCookies: false,
|
||||
hasSavedStorage: false,
|
||||
cookiesCount: 0,
|
||||
currentUrl: '',
|
||||
connectionStatus: 'error',
|
||||
lastChecked: new Date().toISOString(),
|
||||
dockerEnv: process.env.DOCKER_ENV === 'true',
|
||||
environment: process.env.NODE_ENV || 'development'
|
||||
}
|
||||
}, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const { action } = await request.json()
|
||||
console.log(`🔧 Session action requested: ${action} (Docker: ${process.env.DOCKER_ENV === 'true'})`)
|
||||
|
||||
// Initialize if not already done (Docker-safe initialization)
|
||||
if (!tradingViewAutomation['browser']) {
|
||||
console.log('🐳 Initializing TradingView automation for session action in Docker...')
|
||||
await tradingViewAutomation.init()
|
||||
}
|
||||
|
||||
let result: any = { success: true }
|
||||
|
||||
switch (action) {
|
||||
case 'refresh':
|
||||
const refreshed = await tradingViewAutomation.refreshSession()
|
||||
result.refreshed = refreshed
|
||||
result.message = refreshed ? 'Session refreshed successfully' : 'Failed to refresh session'
|
||||
break
|
||||
|
||||
case 'clear':
|
||||
await tradingViewAutomation.clearSession()
|
||||
result.message = 'Session data cleared successfully'
|
||||
break
|
||||
|
||||
case 'test':
|
||||
const testResult = await tradingViewAutomation.testSessionPersistence()
|
||||
result.testResult = testResult
|
||||
result.message = testResult.isValid ? 'Session is valid' : 'Session is invalid or expired'
|
||||
break
|
||||
|
||||
case 'login-status':
|
||||
const isLoggedIn = await tradingViewAutomation.checkLoginStatus()
|
||||
result.isLoggedIn = isLoggedIn
|
||||
result.message = isLoggedIn ? 'User is logged in' : 'User is not logged in'
|
||||
break
|
||||
|
||||
default:
|
||||
result.success = false
|
||||
result.error = `Unknown action: ${action}`
|
||||
return NextResponse.json(result, { status: 400 })
|
||||
}
|
||||
|
||||
console.log(`✅ Session action '${action}' completed:`, result)
|
||||
return NextResponse.json({
|
||||
...result,
|
||||
dockerEnv: process.env.DOCKER_ENV === 'true',
|
||||
environment: process.env.NODE_ENV || 'development'
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Session action failed:', error)
|
||||
return NextResponse.json({
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Session action failed',
|
||||
dockerEnv: process.env.DOCKER_ENV === 'true',
|
||||
environment: process.env.NODE_ENV || 'development'
|
||||
}, { status: 500 })
|
||||
}
|
||||
}
|
||||
163
app/globals.css
163
app/globals.css
@@ -1,7 +1,170 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--bg-primary: #0a0a0b;
|
||||
--bg-secondary: #1a1a1b;
|
||||
--bg-tertiary: #262626;
|
||||
--bg-card: #1e1e1f;
|
||||
--border-primary: #333;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a1a1aa;
|
||||
--text-accent: #22d3ee;
|
||||
--success: #10b981;
|
||||
--danger: #ef4444;
|
||||
--warning: #f59e0b;
|
||||
--purple: #8b5cf6;
|
||||
--blue: #3b82f6;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, #0f0f0f 100%);
|
||||
color: var(--text-primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--border-primary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Glass morphism effect */
|
||||
.glass {
|
||||
background: rgba(26, 26, 27, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Gradient borders */
|
||||
.gradient-border {
|
||||
position: relative;
|
||||
background: var(--bg-card);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.gradient-border::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(139, 92, 246, 0.3));
|
||||
border-radius: inherit;
|
||||
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
mask-composite: subtract;
|
||||
}
|
||||
|
||||
/* Button components */
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg hover:shadow-cyan-500/25;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-gray-700 hover:bg-gray-600 text-gray-100 border border-gray-600;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
@apply bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-green-500/25;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-600 hover:to-rose-700 text-white shadow-lg hover:shadow-red-500/25;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
@apply bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-600 hover:to-orange-700 text-white shadow-lg hover:shadow-yellow-500/25;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-gray-900/50 backdrop-blur-sm border border-gray-800 rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300;
|
||||
}
|
||||
|
||||
.card-gradient {
|
||||
@apply relative overflow-hidden;
|
||||
background: linear-gradient(135deg, rgba(30, 30, 31, 0.9) 0%, rgba(26, 26, 27, 0.9) 100%);
|
||||
}
|
||||
|
||||
.card-gradient::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||||
}
|
||||
|
||||
.status-online {
|
||||
@apply bg-green-100 text-green-800 border border-green-200;
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
@apply bg-red-100 text-red-800 border border-red-200;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
@apply bg-yellow-100 text-yellow-800 border border-yellow-200;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px rgba(34, 211, 238, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(34, 211, 238, 0.8), 0 0 30px rgba(34, 211, 238, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-glow {
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slide-up 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.spinner {
|
||||
@apply inline-block w-4 h-4 border-2 border-gray-300 border-t-cyan-500 rounded-full animate-spin;
|
||||
}
|
||||
|
||||
@@ -3,16 +3,68 @@ import type { Metadata } from 'next'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Trading Bot Dashboard',
|
||||
description: 'AI-powered trading bot dashboard with auto-trading, analysis, and developer tools.'
|
||||
description: 'AI-powered trading bot dashboard with auto-trading, analysis, and developer tools.',
|
||||
viewport: 'width=device-width, initial-scale=1',
|
||||
}
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className="bg-gray-950 text-gray-100 min-h-screen" suppressHydrationWarning>
|
||||
<main className="max-w-5xl mx-auto py-8">
|
||||
{children}
|
||||
</main>
|
||||
<body className="bg-gray-950 text-gray-100 min-h-screen antialiased" suppressHydrationWarning>
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950">
|
||||
{/* Header */}
|
||||
<header className="border-b border-gray-800 bg-gray-900/50 backdrop-blur-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-sm">TB</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-white">Trading Bot</h1>
|
||||
<p className="text-xs text-gray-400">AI-Powered Dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="hidden sm:flex items-center space-x-2 text-sm">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-gray-300">Live</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center">
|
||||
<span className="text-gray-300 text-sm">👤</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-gray-800 bg-gray-900/30 backdrop-blur-sm mt-16">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center">
|
||||
<div className="text-sm text-gray-400">
|
||||
© 2025 Trading Bot Dashboard. Powered by AI.
|
||||
</div>
|
||||
<div className="flex items-center space-x-4 mt-4 sm:mt-0">
|
||||
<div className="text-xs text-gray-500">
|
||||
Next.js 15 • TypeScript • Tailwind CSS
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
17
app/page.tsx
17
app/page.tsx
@@ -1,11 +1,20 @@
|
||||
import AIAnalysisPanel from '../components/AIAnalysisPanel'
|
||||
import Dashboard from '../components/Dashboard'
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<AIAnalysisPanel />
|
||||
<div className="space-y-8">
|
||||
{/* Hero Section */}
|
||||
<div className="text-center py-8">
|
||||
<h1 className="text-4xl font-bold bg-gradient-to-r from-cyan-400 to-blue-600 bg-clip-text text-transparent mb-4">
|
||||
AI Trading Dashboard
|
||||
</h1>
|
||||
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
|
||||
Advanced cryptocurrency trading with AI-powered analysis, automated execution, and real-time monitoring.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Main Dashboard */}
|
||||
<Dashboard />
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -14,14 +14,14 @@ const timeframes = [
|
||||
]
|
||||
|
||||
const popularCoins = [
|
||||
{ name: 'Bitcoin', symbol: 'BTCUSD', icon: '₿' },
|
||||
{ name: 'Ethereum', symbol: 'ETHUSD', icon: 'Ξ' },
|
||||
{ name: 'Solana', symbol: 'SOLUSD', icon: '◎' },
|
||||
{ name: 'Sui', symbol: 'SUIUSD', icon: '🔷' },
|
||||
{ name: 'Avalanche', symbol: 'AVAXUSD', icon: '🔺' },
|
||||
{ name: 'Cardano', symbol: 'ADAUSD', icon: '♠' },
|
||||
{ name: 'Polygon', symbol: 'MATICUSD', icon: '🔷' },
|
||||
{ name: 'Chainlink', symbol: 'LINKUSD', icon: '🔗' },
|
||||
{ name: 'Bitcoin', symbol: 'BTCUSD', icon: '₿', color: 'from-orange-400 to-orange-600' },
|
||||
{ name: 'Ethereum', symbol: 'ETHUSD', icon: 'Ξ', color: 'from-blue-400 to-blue-600' },
|
||||
{ name: 'Solana', symbol: 'SOLUSD', icon: '◎', color: 'from-purple-400 to-purple-600' },
|
||||
{ name: 'Sui', symbol: 'SUIUSD', icon: '🔷', color: 'from-cyan-400 to-cyan-600' },
|
||||
{ name: 'Avalanche', symbol: 'AVAXUSD', icon: '🔺', color: 'from-red-400 to-red-600' },
|
||||
{ name: 'Cardano', symbol: 'ADAUSD', icon: '♠', color: 'from-indigo-400 to-indigo-600' },
|
||||
{ name: 'Polygon', symbol: 'MATICUSD', icon: '🔷', color: 'from-violet-400 to-violet-600' },
|
||||
{ name: 'Chainlink', symbol: 'LINKUSD', icon: '🔗', color: 'from-blue-400 to-blue-600' },
|
||||
]
|
||||
|
||||
export default function AIAnalysisPanel() {
|
||||
@@ -51,10 +51,6 @@ export default function AIAnalysisPanel() {
|
||||
)
|
||||
}
|
||||
|
||||
const selectCoin = (coinSymbol: string) => {
|
||||
setSymbol(coinSymbol)
|
||||
}
|
||||
|
||||
const quickAnalyze = async (coinSymbol: string) => {
|
||||
setSymbol(coinSymbol)
|
||||
setSelectedLayouts([layouts[0]]) // Use first layout
|
||||
@@ -104,248 +100,284 @@ export default function AIAnalysisPanel() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-gray-900 rounded-lg shadow p-6 mb-8">
|
||||
<h2 className="text-xl font-bold mb-4 text-white">AI Chart Analysis</h2>
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-bold text-white flex items-center">
|
||||
<span className="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-lg flex items-center justify-center mr-3">
|
||||
🤖
|
||||
</span>
|
||||
AI Chart Analysis
|
||||
</h2>
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-400">
|
||||
<div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
||||
<span>AI Powered</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Coin Selection */}
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Quick Analysis - Popular Coins</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-2">
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-semibold text-gray-300 flex items-center">
|
||||
<span className="w-4 h-4 bg-yellow-500 rounded-full mr-2"></span>
|
||||
Quick Analysis
|
||||
</h3>
|
||||
<span className="text-xs text-gray-500">Click any coin for instant analysis</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{popularCoins.map(coin => (
|
||||
<button
|
||||
key={coin.symbol}
|
||||
onClick={() => quickAnalyze(coin.symbol)}
|
||||
disabled={loading}
|
||||
className={`p-3 rounded-lg border transition-all ${
|
||||
className={`group relative p-4 rounded-xl border transition-all duration-300 ${
|
||||
symbol === coin.symbol
|
||||
? 'border-blue-500 bg-blue-500/20 text-blue-300'
|
||||
: 'border-gray-600 bg-gray-800 text-gray-300 hover:border-gray-500 hover:bg-gray-700'
|
||||
} ${loading ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105'}`}
|
||||
? 'border-cyan-500 bg-cyan-500/10 shadow-lg shadow-cyan-500/20'
|
||||
: 'border-gray-700 bg-gray-800/50 hover:border-gray-600 hover:bg-gray-800'
|
||||
} ${loading ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 hover:shadow-lg'}`}
|
||||
>
|
||||
<div className="text-lg mb-1">{coin.icon}</div>
|
||||
<div className="text-xs font-medium">{coin.name}</div>
|
||||
<div className="text-xs text-gray-400">{coin.symbol}</div>
|
||||
<div className={`w-10 h-10 bg-gradient-to-br ${coin.color} rounded-lg flex items-center justify-center mb-3 mx-auto text-white font-bold`}>
|
||||
{coin.icon}
|
||||
</div>
|
||||
<div className="text-xs font-semibold text-white">{coin.name}</div>
|
||||
<div className="text-xs text-gray-400 mt-1">{coin.symbol}</div>
|
||||
{symbol === coin.symbol && (
|
||||
<div className="absolute top-2 right-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Manual Input Section */}
|
||||
<div className="border-t border-gray-700 pt-4">
|
||||
<h3 className="text-sm font-medium text-gray-300 mb-3">Manual Analysis</h3>
|
||||
<div className="flex gap-2 mb-4">
|
||||
<input
|
||||
className="flex-1 px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
|
||||
value={symbol}
|
||||
onChange={e => setSymbol(e.target.value)}
|
||||
placeholder="Symbol (e.g. BTCUSD)"
|
||||
/>
|
||||
<select
|
||||
className="px-3 py-2 bg-gray-800 border border-gray-600 rounded-md text-white focus:border-blue-500 focus:outline-none"
|
||||
value={timeframe}
|
||||
onChange={e => setTimeframe(e.target.value)}
|
||||
>
|
||||
{timeframes.map(tf => <option key={tf.value} value={tf.value}>{tf.label}</option>)}
|
||||
</select>
|
||||
<button
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 text-white rounded-md transition-colors"
|
||||
onClick={handleAnalyze}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Analyzing...' : 'Analyze'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Layout selection */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Select Layouts for Analysis:
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{layouts.map(layout => (
|
||||
<label key={layout} className="flex items-center gap-2 cursor-pointer p-2 rounded-md bg-gray-800 hover:bg-gray-700 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedLayouts.includes(layout)}
|
||||
onChange={() => toggleLayout(layout)}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-700 border-gray-600 rounded focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-sm text-gray-300">{layout}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{selectedLayouts.length > 0 && (
|
||||
<div className="text-xs text-gray-400 mt-2 p-2 bg-gray-800 rounded">
|
||||
Selected: {selectedLayouts.join(', ')}
|
||||
{/* Advanced Controls */}
|
||||
<div className="border-t border-gray-700 pt-6">
|
||||
<h3 className="text-sm font-semibold text-gray-300 mb-4 flex items-center">
|
||||
<span className="w-4 h-4 bg-purple-500 rounded-full mr-2"></span>
|
||||
Advanced Analysis
|
||||
</h3>
|
||||
|
||||
{/* Symbol and Timeframe */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-xs font-medium text-gray-400 mb-2">Trading Pair</label>
|
||||
<input
|
||||
className="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all"
|
||||
value={symbol}
|
||||
onChange={e => setSymbol(e.target.value.toUpperCase())}
|
||||
placeholder="e.g., BTCUSD, ETHUSD"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{error && (
|
||||
<div className="bg-red-900/20 border border-red-800 rounded-md p-3 mb-4">
|
||||
<div className="text-red-400">
|
||||
{error.includes('frame was detached') ? (
|
||||
<>
|
||||
<strong>TradingView Error:</strong> Chart could not be loaded. Please check your symbol and layout, or try again.<br />
|
||||
<span className="text-xs opacity-75">Technical: {error}</span>
|
||||
</>
|
||||
) : error.includes('layout not found') ? (
|
||||
<>
|
||||
<strong>Layout Error:</strong> TradingView layout not found. Please select a valid layout.<br />
|
||||
<span className="text-xs opacity-75">Technical: {error}</span>
|
||||
</>
|
||||
) : error.includes('Private layout access denied') ? (
|
||||
<>
|
||||
<strong>Access Error:</strong> The selected layout is private or requires authentication. Try a different layout or check your TradingView login.<br />
|
||||
<span className="text-xs opacity-75">Technical: {error}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<strong>Analysis Error:</strong> {error}
|
||||
</>
|
||||
)}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-2">Timeframe</label>
|
||||
<select
|
||||
className="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all"
|
||||
value={timeframe}
|
||||
onChange={e => setTimeframe(e.target.value)}
|
||||
>
|
||||
{timeframes.map(tf => (
|
||||
<option key={tf.value} value={tf.value} className="bg-gray-800">
|
||||
{tf.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{loading && (
|
||||
<div className="bg-blue-900/20 border border-blue-800 rounded-md p-3 mb-4">
|
||||
<div className="flex items-center gap-3 text-blue-300">
|
||||
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
|
||||
</svg>
|
||||
<span>Analyzing {symbol} chart...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{result && (
|
||||
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mt-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-3">Analysis Results</h3>
|
||||
{result.layoutsAnalyzed && (
|
||||
<div className="mb-4 text-sm">
|
||||
<span className="text-gray-400">Layouts analyzed:</span>
|
||||
<span className="ml-2 text-blue-300">{result.layoutsAnalyzed.join(', ')}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid gap-3">
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Summary:</span>
|
||||
<p className="text-white mt-1">{safeRender(result.summary)}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Sentiment:</span>
|
||||
<p className="text-white mt-1">{safeRender(result.marketSentiment)}</p>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Recommendation:</span>
|
||||
<p className="text-white mt-1">{safeRender(result.recommendation)}</p>
|
||||
<span className="text-blue-300 text-sm">({safeRender(result.confidence)}% confidence)</span>
|
||||
</div>
|
||||
</div>
|
||||
{result.keyLevels && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Support Levels:</span>
|
||||
<p className="text-green-300 mt-1">{result.keyLevels.support?.join(', ') || 'None identified'}</p>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Resistance Levels:</span>
|
||||
<p className="text-red-300 mt-1">{result.keyLevels.resistance?.join(', ') || 'None identified'}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Enhanced Trading Analysis */}
|
||||
{result.entry && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Entry:</span>
|
||||
<p className="text-yellow-300 mt-1">${safeRender(result.entry.price || result.entry)}</p>
|
||||
{result.entry.buffer && <p className="text-xs text-gray-400">{safeRender(result.entry.buffer)}</p>}
|
||||
{result.entry.rationale && <p className="text-xs text-gray-300 mt-1">{safeRender(result.entry.rationale)}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.stopLoss && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Stop Loss:</span>
|
||||
<p className="text-red-300 mt-1">${safeRender(result.stopLoss.price || result.stopLoss)}</p>
|
||||
{result.stopLoss.rationale && <p className="text-xs text-gray-300 mt-1">{safeRender(result.stopLoss.rationale)}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.takeProfits && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Take Profits:</span>
|
||||
{typeof result.takeProfits === 'object' ? (
|
||||
<>
|
||||
{result.takeProfits.tp1 && (
|
||||
<div className="mt-1">
|
||||
<p className="text-green-300">TP1: ${safeRender(result.takeProfits.tp1.price || result.takeProfits.tp1)}</p>
|
||||
{result.takeProfits.tp1.description && <p className="text-xs text-gray-300">{safeRender(result.takeProfits.tp1.description)}</p>}
|
||||
</div>
|
||||
)}
|
||||
{result.takeProfits.tp2 && (
|
||||
<div className="mt-1">
|
||||
<p className="text-green-300">TP2: ${safeRender(result.takeProfits.tp2.price || result.takeProfits.tp2)}</p>
|
||||
{result.takeProfits.tp2.description && <p className="text-xs text-gray-300">{safeRender(result.takeProfits.tp2.description)}</p>}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-green-300 mt-1">{safeRender(result.takeProfits)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.riskToReward && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Risk to Reward:</span>
|
||||
<p className="text-blue-300 mt-1">{safeRender(result.riskToReward)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.confirmationTrigger && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Confirmation Trigger:</span>
|
||||
<p className="text-orange-300 mt-1">{safeRender(result.confirmationTrigger)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.indicatorAnalysis && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Indicator Analysis:</span>
|
||||
{typeof result.indicatorAnalysis === 'object' ? (
|
||||
<div className="mt-1 space-y-1">
|
||||
{result.indicatorAnalysis.rsi && (
|
||||
<div>
|
||||
<span className="text-purple-300 text-xs">RSI:</span>
|
||||
<span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.rsi)}</span>
|
||||
</div>
|
||||
)}
|
||||
{result.indicatorAnalysis.vwap && (
|
||||
<div>
|
||||
<span className="text-cyan-300 text-xs">VWAP:</span>
|
||||
<span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.vwap)}</span>
|
||||
</div>
|
||||
)}
|
||||
{result.indicatorAnalysis.obv && (
|
||||
<div>
|
||||
<span className="text-indigo-300 text-xs">OBV:</span>
|
||||
<span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.obv)}</span>
|
||||
</div>
|
||||
|
||||
{/* Layout Selection */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-xs font-medium text-gray-400 mb-3">Analysis Layouts</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{layouts.map(layout => (
|
||||
<label key={layout} className="group relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedLayouts.includes(layout)}
|
||||
onChange={() => toggleLayout(layout)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className={`flex items-center p-3 rounded-lg border cursor-pointer transition-all ${
|
||||
selectedLayouts.includes(layout)
|
||||
? 'border-cyan-500 bg-cyan-500/10 text-cyan-300'
|
||||
: 'border-gray-700 bg-gray-800/30 text-gray-300 hover:border-gray-600 hover:bg-gray-800/50'
|
||||
}`}>
|
||||
<div className={`w-4 h-4 rounded border-2 mr-3 flex items-center justify-center ${
|
||||
selectedLayouts.includes(layout)
|
||||
? 'border-cyan-500 bg-cyan-500'
|
||||
: 'border-gray-600'
|
||||
}`}>
|
||||
{selectedLayouts.includes(layout) && (
|
||||
<svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-white mt-1">{safeRender(result.indicatorAnalysis)}</p>
|
||||
)}
|
||||
<span className="text-sm font-medium">{layout}</span>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{selectedLayouts.length > 0 && (
|
||||
<div className="mt-3 p-3 bg-gray-800/30 rounded-lg">
|
||||
<div className="text-xs text-gray-400">
|
||||
Selected layouts: <span className="text-cyan-400">{selectedLayouts.join(', ')}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Analyze Button */}
|
||||
<button
|
||||
className={`w-full py-3 px-6 rounded-lg font-semibold transition-all duration-300 ${
|
||||
loading
|
||||
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||
: 'btn-primary transform hover:scale-[1.02] active:scale-[0.98]'
|
||||
}`}
|
||||
onClick={handleAnalyze}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<div className="spinner"></div>
|
||||
<span>Analyzing Chart...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<span>🚀</span>
|
||||
<span>Start AI Analysis</span>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Results Section */}
|
||||
{error && (
|
||||
<div className="mt-6 p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-5 h-5 text-red-400 mt-0.5">⚠️</div>
|
||||
<div>
|
||||
<h4 className="text-red-400 font-medium text-sm">Analysis Error</h4>
|
||||
<p className="text-red-300 text-xs mt-1 opacity-90">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="mt-6 p-4 bg-cyan-500/10 border border-cyan-500/30 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="spinner border-cyan-500"></div>
|
||||
<div>
|
||||
<h4 className="text-cyan-400 font-medium text-sm">AI Processing</h4>
|
||||
<p className="text-cyan-300 text-xs mt-1 opacity-90">
|
||||
Analyzing {symbol} on {timeframe} timeframe...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<div className="mt-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-bold text-white flex items-center">
|
||||
<span className="w-6 h-6 bg-gradient-to-br from-green-400 to-emerald-600 rounded-lg flex items-center justify-center mr-2 text-sm">
|
||||
✅
|
||||
</span>
|
||||
Analysis Complete
|
||||
</h3>
|
||||
{result.layoutsAnalyzed && (
|
||||
<div className="text-xs text-gray-400">
|
||||
Layouts: {result.layoutsAnalyzed.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Reasoning:</span>
|
||||
<p className="text-white mt-1">{safeRender(result.reasoning)}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{/* Summary */}
|
||||
<div className="p-4 bg-gradient-to-r from-gray-800/50 to-gray-700/50 rounded-lg border border-gray-700">
|
||||
<h4 className="text-sm font-semibold text-gray-300 mb-2 flex items-center">
|
||||
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
|
||||
Market Summary
|
||||
</h4>
|
||||
<p className="text-white text-sm leading-relaxed">{safeRender(result.summary)}</p>
|
||||
</div>
|
||||
|
||||
{/* Key Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-gradient-to-br from-green-500/10 to-emerald-500/10 border border-green-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-green-400 mb-2">Market Sentiment</h4>
|
||||
<p className="text-white font-medium">{safeRender(result.marketSentiment)}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 border border-blue-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-blue-400 mb-2">Recommendation</h4>
|
||||
<p className="text-white font-medium">{safeRender(result.recommendation)}</p>
|
||||
{result.confidence && (
|
||||
<p className="text-cyan-300 text-xs mt-1">{safeRender(result.confidence)}% confidence</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trading Levels */}
|
||||
{result.keyLevels && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-gradient-to-br from-red-500/10 to-rose-500/10 border border-red-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-red-400 mb-2">Resistance Levels</h4>
|
||||
<p className="text-red-300 font-mono text-sm">
|
||||
{result.keyLevels.resistance?.join(', ') || 'None identified'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gradient-to-br from-green-500/10 to-emerald-500/10 border border-green-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-green-400 mb-2">Support Levels</h4>
|
||||
<p className="text-green-300 font-mono text-sm">
|
||||
{result.keyLevels.support?.join(', ') || 'None identified'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Trading Setup */}
|
||||
{(result.entry || result.stopLoss || result.takeProfits) && (
|
||||
<div className="p-4 bg-gradient-to-br from-purple-500/10 to-violet-500/10 border border-purple-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-purple-400 mb-3">Trading Setup</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
{result.entry && (
|
||||
<div>
|
||||
<span className="text-xs text-gray-400">Entry Point</span>
|
||||
<p className="text-yellow-300 font-mono font-semibold">
|
||||
${safeRender(result.entry.price || result.entry)}
|
||||
</p>
|
||||
{result.entry.rationale && (
|
||||
<p className="text-xs text-gray-300 mt-1">{safeRender(result.entry.rationale)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.stopLoss && (
|
||||
<div>
|
||||
<span className="text-xs text-gray-400">Stop Loss</span>
|
||||
<p className="text-red-300 font-mono font-semibold">
|
||||
${safeRender(result.stopLoss.price || result.stopLoss)}
|
||||
</p>
|
||||
{result.stopLoss.rationale && (
|
||||
<p className="text-xs text-gray-300 mt-1">{safeRender(result.stopLoss.rationale)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.takeProfits && (
|
||||
<div>
|
||||
<span className="text-xs text-gray-400">Take Profit</span>
|
||||
<p className="text-green-300 font-mono font-semibold">
|
||||
{typeof result.takeProfits === 'object'
|
||||
? Object.values(result.takeProfits).map(tp => `$${safeRender(tp)}`).join(', ')
|
||||
: `$${safeRender(result.takeProfits)}`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
561
components/AIAnalysisPanel_old.tsx
Normal file
561
components/AIAnalysisPanel_old.tsx
Normal file
@@ -0,0 +1,561 @@
|
||||
"use client"
|
||||
import React, { useState } from 'react'
|
||||
|
||||
const layouts = (process.env.NEXT_PUBLIC_TRADINGVIEW_LAYOUTS || 'ai,Diy module').split(',').map(l => l.trim())
|
||||
const timeframes = [
|
||||
{ label: '1m', value: '1' },
|
||||
{ label: '5m', value: '5' },
|
||||
{ label: '15m', value: '15' },
|
||||
{ label: '1h', value: '60' },
|
||||
{ label: '4h', value: '240' },
|
||||
{ label: '1d', value: 'D' },
|
||||
{ label: '1w', value: 'W' },
|
||||
{ label: '1M', value: 'M' },
|
||||
]
|
||||
|
||||
const popularCoins = [
|
||||
{ name: 'Bitcoin', symbol: 'BTCUSD', icon: '₿', color: 'from-orange-400 to-orange-600' },
|
||||
{ name: 'Ethereum', symbol: 'ETHUSD', icon: 'Ξ', color: 'from-blue-400 to-blue-600' },
|
||||
{ name: 'Solana', symbol: 'SOLUSD', icon: '◎', color: 'from-purple-400 to-purple-600' },
|
||||
{ name: 'Sui', symbol: 'SUIUSD', icon: '🔷', color: 'from-cyan-400 to-cyan-600' },
|
||||
{ name: 'Avalanche', symbol: 'AVAXUSD', icon: '🔺', color: 'from-red-400 to-red-600' },
|
||||
{ name: 'Cardano', symbol: 'ADAUSD', icon: '♠', color: 'from-indigo-400 to-indigo-600' },
|
||||
{ name: 'Polygon', symbol: 'MATICUSD', icon: '🔷', color: 'from-violet-400 to-violet-600' },
|
||||
{ name: 'Chainlink', symbol: 'LINKUSD', icon: '🔗', color: 'from-blue-400 to-blue-600' },
|
||||
]
|
||||
|
||||
export default function AIAnalysisPanel() {
|
||||
const [symbol, setSymbol] = useState('BTCUSD')
|
||||
const [selectedLayouts, setSelectedLayouts] = useState<string[]>([layouts[0]])
|
||||
const [timeframe, setTimeframe] = useState('60')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [result, setResult] = useState<any>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Helper function to safely render any value
|
||||
const safeRender = (value: any): string => {
|
||||
if (typeof value === 'string') return value
|
||||
if (typeof value === 'number') return value.toString()
|
||||
if (Array.isArray(value)) return value.join(', ')
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
return JSON.stringify(value)
|
||||
}
|
||||
return String(value)
|
||||
}
|
||||
|
||||
const toggleLayout = (layout: string) => {
|
||||
setSelectedLayouts(prev =>
|
||||
prev.includes(layout)
|
||||
? prev.filter(l => l !== layout)
|
||||
: [...prev, layout]
|
||||
)
|
||||
}
|
||||
|
||||
const selectCoin = (coinSymbol: string) => {
|
||||
setSymbol(coinSymbol)
|
||||
}
|
||||
|
||||
const quickAnalyze = async (coinSymbol: string) => {
|
||||
setSymbol(coinSymbol)
|
||||
setSelectedLayouts([layouts[0]]) // Use first layout
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setResult(null)
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/analyze', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ symbol: coinSymbol, layouts: [layouts[0]], timeframe })
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) throw new Error(data.error || 'Unknown error')
|
||||
setResult(data)
|
||||
} catch (e: any) {
|
||||
setError(e.message)
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
async function handleAnalyze() {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setResult(null)
|
||||
|
||||
if (selectedLayouts.length === 0) {
|
||||
setError('Please select at least one layout')
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/analyze', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ symbol, layouts: selectedLayouts, timeframe })
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) throw new Error(data.error || 'Unknown error')
|
||||
setResult(data)
|
||||
} catch (e: any) {
|
||||
setError(e.message)
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-bold text-white flex items-center">
|
||||
<span className="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-lg flex items-center justify-center mr-3">
|
||||
🤖
|
||||
</span>
|
||||
AI Chart Analysis
|
||||
</h2>
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-400">
|
||||
<div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
||||
<span>AI Powered</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Coin Selection */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-semibold text-gray-300 flex items-center">
|
||||
<span className="w-4 h-4 bg-yellow-500 rounded-full mr-2"></span>
|
||||
Quick Analysis
|
||||
</h3>
|
||||
<span className="text-xs text-gray-500">Click any coin for instant analysis</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
{popularCoins.map(coin => (
|
||||
<button
|
||||
key={coin.symbol}
|
||||
onClick={() => quickAnalyze(coin.symbol)}
|
||||
disabled={loading}
|
||||
className={`group relative p-4 rounded-xl border transition-all duration-300 ${
|
||||
symbol === coin.symbol
|
||||
? 'border-cyan-500 bg-cyan-500/10 shadow-lg shadow-cyan-500/20'
|
||||
: 'border-gray-700 bg-gray-800/50 hover:border-gray-600 hover:bg-gray-800'
|
||||
} ${loading ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 hover:shadow-lg'}`}
|
||||
>
|
||||
<div className={`w-10 h-10 bg-gradient-to-br ${coin.color} rounded-lg flex items-center justify-center mb-3 mx-auto text-white font-bold`}>
|
||||
{coin.icon}
|
||||
</div>
|
||||
<div className="text-xs font-semibold text-white">{coin.name}</div>
|
||||
<div className="text-xs text-gray-400 mt-1">{coin.symbol}</div>
|
||||
{symbol === coin.symbol && (
|
||||
<div className="absolute top-2 right-2 w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advanced Controls */}
|
||||
<div className="border-t border-gray-700 pt-6">
|
||||
<h3 className="text-sm font-semibold text-gray-300 mb-4 flex items-center">
|
||||
<span className="w-4 h-4 bg-purple-500 rounded-full mr-2"></span>
|
||||
Advanced Analysis
|
||||
</h3>
|
||||
|
||||
{/* Symbol and Timeframe */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<div className="md:col-span-2">
|
||||
<label className="block text-xs font-medium text-gray-400 mb-2">Trading Pair</label>
|
||||
<input
|
||||
className="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all"
|
||||
value={symbol}
|
||||
onChange={e => setSymbol(e.target.value.toUpperCase())}
|
||||
placeholder="e.g., BTCUSD, ETHUSD"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-400 mb-2">Timeframe</label>
|
||||
<select
|
||||
className="w-full px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20 transition-all"
|
||||
value={timeframe}
|
||||
onChange={e => setTimeframe(e.target.value)}
|
||||
>
|
||||
{timeframes.map(tf => (
|
||||
<option key={tf.value} value={tf.value} className="bg-gray-800">
|
||||
{tf.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Layout Selection */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-xs font-medium text-gray-400 mb-3">Analysis Layouts</label>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{layouts.map(layout => (
|
||||
<label key={layout} className="group relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedLayouts.includes(layout)}
|
||||
onChange={() => toggleLayout(layout)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className={`flex items-center p-3 rounded-lg border cursor-pointer transition-all ${
|
||||
selectedLayouts.includes(layout)
|
||||
? 'border-cyan-500 bg-cyan-500/10 text-cyan-300'
|
||||
: 'border-gray-700 bg-gray-800/30 text-gray-300 hover:border-gray-600 hover:bg-gray-800/50'
|
||||
}`}>
|
||||
<div className={`w-4 h-4 rounded border-2 mr-3 flex items-center justify-center ${
|
||||
selectedLayouts.includes(layout)
|
||||
? 'border-cyan-500 bg-cyan-500'
|
||||
: 'border-gray-600'
|
||||
}`}>
|
||||
{selectedLayouts.includes(layout) && (
|
||||
<svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-sm font-medium">{layout}</span>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{selectedLayouts.length > 0 && (
|
||||
<div className="mt-3 p-3 bg-gray-800/30 rounded-lg">
|
||||
<div className="text-xs text-gray-400">
|
||||
Selected layouts: <span className="text-cyan-400">{selectedLayouts.join(', ')}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Analyze Button */}
|
||||
<button
|
||||
className={`w-full py-3 px-6 rounded-lg font-semibold transition-all duration-300 ${
|
||||
loading
|
||||
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||
: 'btn-primary transform hover:scale-[1.02] active:scale-[0.98]'
|
||||
}`}
|
||||
onClick={handleAnalyze}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<div className="spinner"></div>
|
||||
<span>Analyzing Chart...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<span>🚀</span>
|
||||
<span>Start AI Analysis</span>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Results Section */}
|
||||
{error && (
|
||||
<div className="mt-6 p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<div className="w-5 h-5 text-red-400 mt-0.5">⚠️</div>
|
||||
<div>
|
||||
<h4 className="text-red-400 font-medium text-sm">Analysis Error</h4>
|
||||
<p className="text-red-300 text-xs mt-1 opacity-90">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="mt-6 p-4 bg-cyan-500/10 border border-cyan-500/30 rounded-lg">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="spinner border-cyan-500"></div>
|
||||
<div>
|
||||
<h4 className="text-cyan-400 font-medium text-sm">AI Processing</h4>
|
||||
<p className="text-cyan-300 text-xs mt-1 opacity-90">
|
||||
Analyzing {symbol} on {timeframe} timeframe...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<div className="mt-6 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-bold text-white flex items-center">
|
||||
<span className="w-6 h-6 bg-gradient-to-br from-green-400 to-emerald-600 rounded-lg flex items-center justify-center mr-2 text-sm">
|
||||
✅
|
||||
</span>
|
||||
Analysis Complete
|
||||
</h3>
|
||||
{result.layoutsAnalyzed && (
|
||||
<div className="text-xs text-gray-400">
|
||||
Layouts: {result.layoutsAnalyzed.join(', ')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
{/* Summary */}
|
||||
<div className="p-4 bg-gradient-to-r from-gray-800/50 to-gray-700/50 rounded-lg border border-gray-700">
|
||||
<h4 className="text-sm font-semibold text-gray-300 mb-2 flex items-center">
|
||||
<span className="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
|
||||
Market Summary
|
||||
</h4>
|
||||
<p className="text-white text-sm leading-relaxed">{safeRender(result.summary)}</p>
|
||||
</div>
|
||||
|
||||
{/* Key Metrics */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-gradient-to-br from-green-500/10 to-emerald-500/10 border border-green-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-green-400 mb-2">Market Sentiment</h4>
|
||||
<p className="text-white font-medium">{safeRender(result.marketSentiment)}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 border border-blue-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-blue-400 mb-2">Recommendation</h4>
|
||||
<p className="text-white font-medium">{safeRender(result.recommendation)}</p>
|
||||
{result.confidence && (
|
||||
<p className="text-cyan-300 text-xs mt-1">{safeRender(result.confidence)}% confidence</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Trading Levels */}
|
||||
{result.keyLevels && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-gradient-to-br from-red-500/10 to-rose-500/10 border border-red-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-red-400 mb-2">Resistance Levels</h4>
|
||||
<p className="text-red-300 font-mono text-sm">
|
||||
{result.keyLevels.resistance?.join(', ') || 'None identified'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 bg-gradient-to-br from-green-500/10 to-emerald-500/10 border border-green-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-green-400 mb-2">Support Levels</h4>
|
||||
<p className="text-green-300 font-mono text-sm">
|
||||
{result.keyLevels.support?.join(', ') || 'None identified'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Trading Setup */}
|
||||
{(result.entry || result.stopLoss || result.takeProfits) && (
|
||||
<div className="p-4 bg-gradient-to-br from-purple-500/10 to-violet-500/10 border border-purple-500/30 rounded-lg">
|
||||
<h4 className="text-sm font-semibold text-purple-400 mb-3">Trading Setup</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
|
||||
{result.entry && (
|
||||
<div>
|
||||
<span className="text-xs text-gray-400">Entry Point</span>
|
||||
<p className="text-yellow-300 font-mono font-semibold">
|
||||
${safeRender(result.entry.price || result.entry)}
|
||||
</p>
|
||||
{result.entry.rationale && (
|
||||
<p className="text-xs text-gray-300 mt-1">{safeRender(result.entry.rationale)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.stopLoss && (
|
||||
<div>
|
||||
<span className="text-xs text-gray-400">Stop Loss</span>
|
||||
<p className="text-red-300 font-mono font-semibold">
|
||||
${safeRender(result.stopLoss.price || result.stopLoss)}
|
||||
</p>
|
||||
{result.stopLoss.rationale && (
|
||||
<p className="text-xs text-gray-300 mt-1">{safeRender(result.stopLoss.rationale)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.takeProfits && (
|
||||
<div>
|
||||
<span className="text-xs text-gray-400">Take Profit</span>
|
||||
<p className="text-green-300 font-mono font-semibold">
|
||||
{typeof result.takeProfits === 'object'
|
||||
? Object.values(result.takeProfits).map(tp => `$${safeRender(tp)}`).join(', ')
|
||||
: `$${safeRender(result.takeProfits)}`}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{error && (
|
||||
<div className="bg-red-900/20 border border-red-800 rounded-md p-3 mb-4">
|
||||
<div className="text-red-400">
|
||||
{error.includes('frame was detached') ? (
|
||||
<>
|
||||
<strong>TradingView Error:</strong> Chart could not be loaded. Please check your symbol and layout, or try again.<br />
|
||||
<span className="text-xs opacity-75">Technical: {error}</span>
|
||||
</>
|
||||
) : error.includes('layout not found') ? (
|
||||
<>
|
||||
<strong>Layout Error:</strong> TradingView layout not found. Please select a valid layout.<br />
|
||||
<span className="text-xs opacity-75">Technical: {error}</span>
|
||||
</>
|
||||
) : error.includes('Private layout access denied') ? (
|
||||
<>
|
||||
<strong>Access Error:</strong> The selected layout is private or requires authentication. Try a different layout or check your TradingView login.<br />
|
||||
<span className="text-xs opacity-75">Technical: {error}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<strong>Analysis Error:</strong> {error}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{loading && (
|
||||
<div className="bg-blue-900/20 border border-blue-800 rounded-md p-3 mb-4">
|
||||
<div className="flex items-center gap-3 text-blue-300">
|
||||
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
|
||||
</svg>
|
||||
<span>Analyzing {symbol} chart...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{result && (
|
||||
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mt-4">
|
||||
<h3 className="text-lg font-semibold text-white mb-3">Analysis Results</h3>
|
||||
{result.layoutsAnalyzed && (
|
||||
<div className="mb-4 text-sm">
|
||||
<span className="text-gray-400">Layouts analyzed:</span>
|
||||
<span className="ml-2 text-blue-300">{result.layoutsAnalyzed.join(', ')}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid gap-3">
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Summary:</span>
|
||||
<p className="text-white mt-1">{safeRender(result.summary)}</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Sentiment:</span>
|
||||
<p className="text-white mt-1">{safeRender(result.marketSentiment)}</p>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Recommendation:</span>
|
||||
<p className="text-white mt-1">{safeRender(result.recommendation)}</p>
|
||||
<span className="text-blue-300 text-sm">({safeRender(result.confidence)}% confidence)</span>
|
||||
</div>
|
||||
</div>
|
||||
{result.keyLevels && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Support Levels:</span>
|
||||
<p className="text-green-300 mt-1">{result.keyLevels.support?.join(', ') || 'None identified'}</p>
|
||||
</div>
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Resistance Levels:</span>
|
||||
<p className="text-red-300 mt-1">{result.keyLevels.resistance?.join(', ') || 'None identified'}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Enhanced Trading Analysis */}
|
||||
{result.entry && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Entry:</span>
|
||||
<p className="text-yellow-300 mt-1">${safeRender(result.entry.price || result.entry)}</p>
|
||||
{result.entry.buffer && <p className="text-xs text-gray-400">{safeRender(result.entry.buffer)}</p>}
|
||||
{result.entry.rationale && <p className="text-xs text-gray-300 mt-1">{safeRender(result.entry.rationale)}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.stopLoss && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Stop Loss:</span>
|
||||
<p className="text-red-300 mt-1">${safeRender(result.stopLoss.price || result.stopLoss)}</p>
|
||||
{result.stopLoss.rationale && <p className="text-xs text-gray-300 mt-1">{safeRender(result.stopLoss.rationale)}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.takeProfits && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Take Profits:</span>
|
||||
{typeof result.takeProfits === 'object' ? (
|
||||
<>
|
||||
{result.takeProfits.tp1 && (
|
||||
<div className="mt-1">
|
||||
<p className="text-green-300">TP1: ${safeRender(result.takeProfits.tp1.price || result.takeProfits.tp1)}</p>
|
||||
{result.takeProfits.tp1.description && <p className="text-xs text-gray-300">{safeRender(result.takeProfits.tp1.description)}</p>}
|
||||
</div>
|
||||
)}
|
||||
{result.takeProfits.tp2 && (
|
||||
<div className="mt-1">
|
||||
<p className="text-green-300">TP2: ${safeRender(result.takeProfits.tp2.price || result.takeProfits.tp2)}</p>
|
||||
{result.takeProfits.tp2.description && <p className="text-xs text-gray-300">{safeRender(result.takeProfits.tp2.description)}</p>}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="text-green-300 mt-1">{safeRender(result.takeProfits)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.riskToReward && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Risk to Reward:</span>
|
||||
<p className="text-blue-300 mt-1">{safeRender(result.riskToReward)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.confirmationTrigger && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Confirmation Trigger:</span>
|
||||
<p className="text-orange-300 mt-1">{safeRender(result.confirmationTrigger)}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.indicatorAnalysis && (
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Indicator Analysis:</span>
|
||||
{typeof result.indicatorAnalysis === 'object' ? (
|
||||
<div className="mt-1 space-y-1">
|
||||
{result.indicatorAnalysis.rsi && (
|
||||
<div>
|
||||
<span className="text-purple-300 text-xs">RSI:</span>
|
||||
<span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.rsi)}</span>
|
||||
</div>
|
||||
)}
|
||||
{result.indicatorAnalysis.vwap && (
|
||||
<div>
|
||||
<span className="text-cyan-300 text-xs">VWAP:</span>
|
||||
<span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.vwap)}</span>
|
||||
</div>
|
||||
)}
|
||||
{result.indicatorAnalysis.obv && (
|
||||
<div>
|
||||
<span className="text-indigo-300 text-xs">OBV:</span>
|
||||
<span className="text-white text-xs ml-2">{safeRender(result.indicatorAnalysis.obv)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-white mt-1">{safeRender(result.indicatorAnalysis)}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-gray-900 p-3 rounded">
|
||||
<span className="text-gray-400 text-sm">Reasoning:</span>
|
||||
<p className="text-white mt-1">{safeRender(result.reasoning)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -21,15 +21,107 @@ export default function AutoTradingPanel() {
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = () => {
|
||||
switch (status) {
|
||||
case 'running': return 'text-green-400'
|
||||
case 'stopped': return 'text-red-400'
|
||||
default: return 'text-gray-400'
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusIcon = () => {
|
||||
switch (status) {
|
||||
case 'running': return '🟢'
|
||||
case 'stopped': return '🔴'
|
||||
default: return '⚫'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 border rounded bg-gray-900">
|
||||
<h2 className="text-lg font-bold mb-2">Auto-Trading Control</h2>
|
||||
<div className="flex gap-2 mb-2">
|
||||
<button className="btn btn-primary" onClick={() => handleAction('start')}>Start</button>
|
||||
<button className="btn btn-secondary" onClick={() => handleAction('stop')}>Stop</button>
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-bold text-white flex items-center">
|
||||
<span className="w-8 h-8 bg-gradient-to-br from-green-400 to-emerald-600 rounded-lg flex items-center justify-center mr-3">
|
||||
⚡
|
||||
</span>
|
||||
Auto-Trading Control
|
||||
</h2>
|
||||
<div className={`flex items-center space-x-2 ${getStatusColor()}`}>
|
||||
<span>{getStatusIcon()}</span>
|
||||
<span className="text-sm font-medium capitalize">{status}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Display */}
|
||||
<div className="mb-6 p-4 bg-gray-800/30 rounded-lg border border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-300 mb-1">Trading Status</h3>
|
||||
<p className={`text-lg font-bold ${getStatusColor()}`}>
|
||||
{status === 'running' ? 'ACTIVE' : status === 'stopped' ? 'STOPPED' : 'IDLE'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-xs text-gray-400">Last Updated</div>
|
||||
<div className="text-sm text-gray-300">{new Date().toLocaleTimeString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className={`mt-3 p-3 rounded-lg text-sm ${
|
||||
message.includes('Error')
|
||||
? 'bg-red-500/10 border border-red-500/30 text-red-400'
|
||||
: 'bg-green-500/10 border border-green-500/30 text-green-400'
|
||||
}`}>
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
className={`py-3 px-4 rounded-lg font-semibold transition-all duration-300 ${
|
||||
status === 'running'
|
||||
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||
: 'btn-success transform hover:scale-105 active:scale-95'
|
||||
}`}
|
||||
onClick={() => handleAction('start')}
|
||||
disabled={status === 'running'}
|
||||
>
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<span>▶️</span>
|
||||
<span>Start Trading</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`py-3 px-4 rounded-lg font-semibold transition-all duration-300 ${
|
||||
status !== 'running'
|
||||
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||
: 'btn-danger transform hover:scale-105 active:scale-95'
|
||||
}`}
|
||||
onClick={() => handleAction('stop')}
|
||||
disabled={status !== 'running'}
|
||||
>
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<span>⏹️</span>
|
||||
<span>Stop Trading</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Trading Metrics (Mock Data) */}
|
||||
<div className="mt-6 grid grid-cols-2 gap-4">
|
||||
<div className="p-3 bg-gray-800/20 rounded-lg">
|
||||
<div className="text-xs text-gray-400">Today's Trades</div>
|
||||
<div className="text-lg font-bold text-white">12</div>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-800/20 rounded-lg">
|
||||
<div className="text-xs text-gray-400">Success Rate</div>
|
||||
<div className="text-lg font-bold text-green-400">85%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">Status: {status}</div>
|
||||
{message && <div className="mt-2 text-yellow-400">{message}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,11 +4,18 @@ import AutoTradingPanel from './AutoTradingPanel'
|
||||
import TradingHistory from './TradingHistory'
|
||||
import DeveloperSettings from './DeveloperSettings'
|
||||
import AIAnalysisPanel from './AIAnalysisPanel'
|
||||
import SessionStatus from './SessionStatus'
|
||||
|
||||
export default function Dashboard() {
|
||||
const [positions, setPositions] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [stats, setStats] = useState({
|
||||
totalPnL: 0,
|
||||
dailyPnL: 0,
|
||||
winRate: 0,
|
||||
totalTrades: 0
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchPositions() {
|
||||
@@ -17,6 +24,13 @@ export default function Dashboard() {
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setPositions(data.positions || [])
|
||||
// Calculate some mock stats for demo
|
||||
setStats({
|
||||
totalPnL: 1247.50,
|
||||
dailyPnL: 67.25,
|
||||
winRate: 73.2,
|
||||
totalTrades: 156
|
||||
})
|
||||
} else {
|
||||
setError('Failed to load positions')
|
||||
}
|
||||
@@ -29,41 +43,167 @@ export default function Dashboard() {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 p-8 bg-gray-950 min-h-screen">
|
||||
<div className="space-y-8">
|
||||
<AIAnalysisPanel />
|
||||
<AutoTradingPanel />
|
||||
<DeveloperSettings />
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="bg-gray-900 rounded-lg shadow p-6">
|
||||
<h2 className="text-xl font-bold mb-4 text-white">Open Positions</h2>
|
||||
{loading ? <div className="text-gray-400">Loading...</div> : error ? <div className="text-red-400">{error}</div> : (
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="text-gray-400 border-b border-gray-700">
|
||||
<tr>
|
||||
<th className="py-2">Symbol</th>
|
||||
<th>Side</th>
|
||||
<th>Size</th>
|
||||
<th>Entry Price</th>
|
||||
<th>Unrealized PnL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{positions.map((pos, i) => (
|
||||
<tr key={i} className="border-b border-gray-800 hover:bg-gray-800">
|
||||
<td className="py-2">{pos.symbol}</td>
|
||||
<td>{pos.side}</td>
|
||||
<td>{pos.size}</td>
|
||||
<td>{pos.entryPrice}</td>
|
||||
<td>{pos.unrealizedPnl}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
<div className="space-y-8">
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm font-medium">Total P&L</p>
|
||||
<p className={`text-2xl font-bold ${stats.totalPnL >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{stats.totalPnL >= 0 ? '+' : ''}${stats.totalPnL.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-green-500/20 rounded-full flex items-center justify-center">
|
||||
<span className="text-green-400 text-xl">📈</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm font-medium">Daily P&L</p>
|
||||
<p className={`text-2xl font-bold ${stats.dailyPnL >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{stats.dailyPnL >= 0 ? '+' : ''}${stats.dailyPnL.toFixed(2)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
|
||||
<span className="text-blue-400 text-xl">💰</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm font-medium">Win Rate</p>
|
||||
<p className="text-2xl font-bold text-cyan-400">{stats.winRate}%</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-cyan-500/20 rounded-full flex items-center justify-center">
|
||||
<span className="text-cyan-400 text-xl">🎯</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm font-medium">Total Trades</p>
|
||||
<p className="text-2xl font-bold text-purple-400">{stats.totalTrades}</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center">
|
||||
<span className="text-purple-400 text-xl">🔄</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
|
||||
{/* Left Column - Controls */}
|
||||
<div className="xl:col-span-1 space-y-6">
|
||||
<SessionStatus />
|
||||
<AutoTradingPanel />
|
||||
<DeveloperSettings />
|
||||
</div>
|
||||
|
||||
{/* Right Column - Analysis & Positions */}
|
||||
<div className="xl:col-span-2 space-y-6">
|
||||
<AIAnalysisPanel />
|
||||
|
||||
{/* Open Positions */}
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-bold text-white flex items-center">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full mr-3 animate-pulse"></span>
|
||||
Open Positions
|
||||
</h2>
|
||||
<button className="text-sm text-gray-400 hover:text-gray-300 transition-colors">
|
||||
View All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="spinner"></div>
|
||||
<span className="ml-2 text-gray-400">Loading positions...</span>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-red-400 text-2xl">⚠️</span>
|
||||
</div>
|
||||
<p className="text-red-400 font-medium">{error}</p>
|
||||
<p className="text-gray-500 text-sm mt-2">Please check your connection and try again</p>
|
||||
</div>
|
||||
) : positions.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-16 h-16 bg-gray-700/50 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-gray-400 text-2xl">📊</span>
|
||||
</div>
|
||||
<p className="text-gray-400 font-medium">No open positions</p>
|
||||
<p className="text-gray-500 text-sm mt-2">Start trading to see your positions here</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-700">
|
||||
<th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Asset</th>
|
||||
<th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Side</th>
|
||||
<th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Size</th>
|
||||
<th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Entry</th>
|
||||
<th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">PnL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{positions.map((pos, i) => (
|
||||
<tr key={i} className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors">
|
||||
<td className="py-4 px-4">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mr-3">
|
||||
<span className="text-white text-xs font-bold">
|
||||
{pos.symbol?.slice(0, 2) || 'BT'}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-medium text-white">{pos.symbol || 'BTC/USD'}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${
|
||||
pos.side === 'long' || pos.side === 'buy'
|
||||
? 'bg-green-100 text-green-800'
|
||||
: 'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
{pos.side || 'Long'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right font-mono text-gray-300">
|
||||
{pos.size || '0.1 BTC'}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right font-mono text-gray-300">
|
||||
${pos.entryPrice || '45,230.00'}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right">
|
||||
<span className={`font-mono font-medium ${
|
||||
(pos.unrealizedPnl || 125.50) >= 0 ? 'text-green-400' : 'text-red-400'
|
||||
}`}>
|
||||
{(pos.unrealizedPnl || 125.50) >= 0 ? '+' : ''}${(pos.unrealizedPnl || 125.50).toFixed(2)}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<TradingHistory />
|
||||
</div>
|
||||
<TradingHistory />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,27 +1,242 @@
|
||||
"use client"
|
||||
import React, { useState } from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
export default function DeveloperSettings() {
|
||||
const [env, setEnv] = useState('')
|
||||
const [settings, setSettings] = useState({
|
||||
environment: 'production',
|
||||
debugMode: false,
|
||||
logLevel: 'info',
|
||||
apiTimeout: 30000,
|
||||
maxRetries: 3,
|
||||
customEndpoint: ''
|
||||
})
|
||||
const [message, setMessage] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
async function handleSave() {
|
||||
// Example: Save env to localStorage or send to API
|
||||
localStorage.setItem('devEnv', env)
|
||||
setMessage('Settings saved!')
|
||||
useEffect(() => {
|
||||
// Load settings from localStorage
|
||||
const saved = localStorage.getItem('devSettings')
|
||||
if (saved) {
|
||||
try {
|
||||
setSettings(JSON.parse(saved))
|
||||
} catch (e) {
|
||||
console.error('Failed to parse saved settings:', e)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleSettingChange = (key: string, value: any) => {
|
||||
setSettings(prev => ({
|
||||
...prev,
|
||||
[key]: value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
setLoading(true)
|
||||
setMessage('')
|
||||
|
||||
try {
|
||||
// Save to localStorage
|
||||
localStorage.setItem('devSettings', JSON.stringify(settings))
|
||||
|
||||
// Optionally send to API
|
||||
const response = await fetch('/api/developer-settings', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(settings)
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
setMessage('Settings saved successfully!')
|
||||
} else {
|
||||
setMessage('Settings saved locally (API unavailable)')
|
||||
}
|
||||
} catch (error) {
|
||||
setMessage('Settings saved locally (API error)')
|
||||
}
|
||||
|
||||
setLoading(false)
|
||||
setTimeout(() => setMessage(''), 3000)
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
const defaultSettings = {
|
||||
environment: 'production',
|
||||
debugMode: false,
|
||||
logLevel: 'info',
|
||||
apiTimeout: 30000,
|
||||
maxRetries: 3,
|
||||
customEndpoint: ''
|
||||
}
|
||||
setSettings(defaultSettings)
|
||||
localStorage.removeItem('devSettings')
|
||||
setMessage('Settings reset to defaults')
|
||||
setTimeout(() => setMessage(''), 3000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 border rounded bg-gray-900">
|
||||
<h2 className="text-lg font-bold mb-2">Developer Settings</h2>
|
||||
<input
|
||||
className="input input-bordered w-full mb-2"
|
||||
placeholder="Custom ENV value"
|
||||
value={env}
|
||||
onChange={e => setEnv(e.target.value)}
|
||||
/>
|
||||
<button className="btn btn-primary w-full" onClick={handleSave}>Save</button>
|
||||
{message && <div className="mt-2 text-green-400">{message}</div>}
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-bold text-white flex items-center">
|
||||
<span className="w-8 h-8 bg-gradient-to-br from-indigo-400 to-purple-600 rounded-lg flex items-center justify-center mr-3">
|
||||
⚙️
|
||||
</span>
|
||||
Developer Settings
|
||||
</h2>
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-400">
|
||||
<div className="w-2 h-2 bg-indigo-400 rounded-full"></div>
|
||||
<span>Advanced</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Environment Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Environment</label>
|
||||
<select
|
||||
className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all"
|
||||
value={settings.environment}
|
||||
onChange={e => handleSettingChange('environment', e.target.value)}
|
||||
>
|
||||
<option value="development">Development</option>
|
||||
<option value="staging">Staging</option>
|
||||
<option value="production">Production</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Debug Mode Toggle */}
|
||||
<div className="flex items-center justify-between p-4 bg-gray-800/30 rounded-lg border border-gray-700">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white">Debug Mode</h3>
|
||||
<p className="text-xs text-gray-400 mt-1">Enable detailed logging and debugging features</p>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.debugMode}
|
||||
onChange={e => handleSettingChange('debugMode', e.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Log Level */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Log Level</label>
|
||||
<select
|
||||
className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all"
|
||||
value={settings.logLevel}
|
||||
onChange={e => handleSettingChange('logLevel', e.target.value)}
|
||||
>
|
||||
<option value="error">Error</option>
|
||||
<option value="warn">Warning</option>
|
||||
<option value="info">Info</option>
|
||||
<option value="debug">Debug</option>
|
||||
<option value="trace">Trace</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* API Settings */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">API Timeout (ms)</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all"
|
||||
value={settings.apiTimeout}
|
||||
onChange={e => handleSettingChange('apiTimeout', parseInt(e.target.value) || 30000)}
|
||||
min="1000"
|
||||
max="300000"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Max Retries</label>
|
||||
<input
|
||||
type="number"
|
||||
className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all"
|
||||
value={settings.maxRetries}
|
||||
onChange={e => handleSettingChange('maxRetries', parseInt(e.target.value) || 3)}
|
||||
min="0"
|
||||
max="10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Custom Endpoint */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Custom API Endpoint</label>
|
||||
<input
|
||||
type="url"
|
||||
className="w-full px-3 py-2 bg-gray-800/50 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all"
|
||||
placeholder="https://api.example.com"
|
||||
value={settings.customEndpoint}
|
||||
onChange={e => handleSettingChange('customEndpoint', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Status Message */}
|
||||
{message && (
|
||||
<div className={`p-3 rounded-lg text-sm ${
|
||||
message.includes('successfully') || message.includes('saved locally')
|
||||
? 'bg-green-500/10 border border-green-500/30 text-green-400'
|
||||
: message.includes('reset')
|
||||
? 'bg-blue-500/10 border border-blue-500/30 text-blue-400'
|
||||
: 'bg-yellow-500/10 border border-yellow-500/30 text-yellow-400'
|
||||
}`}>
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="grid grid-cols-2 gap-3 pt-4 border-t border-gray-700">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={loading}
|
||||
className={`py-3 px-4 rounded-lg font-semibold transition-all duration-300 ${
|
||||
loading
|
||||
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||
: 'btn-primary transform hover:scale-105 active:scale-95'
|
||||
}`}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<div className="spinner"></div>
|
||||
<span>Saving...</span>
|
||||
</div>
|
||||
) : (
|
||||
'Save Settings'
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleReset}
|
||||
disabled={loading}
|
||||
className="btn-secondary py-3 px-4 transform hover:scale-105 active:scale-95"
|
||||
>
|
||||
Reset to Defaults
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Current Settings Summary */}
|
||||
<div className="p-3 bg-gray-800/20 rounded-lg border border-gray-700">
|
||||
<h4 className="text-xs font-semibold text-gray-400 mb-2">Current Configuration</h4>
|
||||
<div className="grid grid-cols-2 gap-2 text-xs">
|
||||
<div className="text-gray-500">Environment:</div>
|
||||
<div className="text-gray-300 capitalize">{settings.environment}</div>
|
||||
<div className="text-gray-500">Debug:</div>
|
||||
<div className={settings.debugMode ? 'text-green-400' : 'text-red-400'}>
|
||||
{settings.debugMode ? 'Enabled' : 'Disabled'}
|
||||
</div>
|
||||
<div className="text-gray-500">Log Level:</div>
|
||||
<div className="text-gray-300 capitalize">{settings.logLevel}</div>
|
||||
<div className="text-gray-500">Timeout:</div>
|
||||
<div className="text-gray-300">{settings.apiTimeout}ms</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
202
components/SessionStatus.tsx
Normal file
202
components/SessionStatus.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
"use client"
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
interface SessionInfo {
|
||||
isAuthenticated: boolean
|
||||
hasSavedCookies: boolean
|
||||
hasSavedStorage: boolean
|
||||
cookiesCount: number
|
||||
currentUrl: string
|
||||
browserActive: boolean
|
||||
connectionStatus: 'connected' | 'disconnected' | 'unknown' | 'error'
|
||||
lastChecked: string
|
||||
dockerEnv?: boolean
|
||||
environment?: string
|
||||
}
|
||||
|
||||
export default function SessionStatus() {
|
||||
const [sessionInfo, setSessionInfo] = useState<SessionInfo | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
|
||||
const fetchSessionStatus = async () => {
|
||||
try {
|
||||
setError(null)
|
||||
const response = await fetch('/api/session-status', {
|
||||
cache: 'no-cache' // Important for Docker environment
|
||||
})
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setSessionInfo(data.session)
|
||||
} else {
|
||||
setError(data.error || 'Failed to fetch session status')
|
||||
setSessionInfo(data.session || null)
|
||||
}
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Network error')
|
||||
setSessionInfo(null)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSessionAction = async (action: string) => {
|
||||
try {
|
||||
setRefreshing(true)
|
||||
setError(null)
|
||||
|
||||
const response = await fetch('/api/session-status', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action }),
|
||||
cache: 'no-cache' // Important for Docker environment
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
// Refresh session status after action
|
||||
await fetchSessionStatus()
|
||||
} else {
|
||||
setError(data.error || `Failed to ${action} session`)
|
||||
}
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : `Failed to ${action} session`)
|
||||
} finally {
|
||||
setRefreshing(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchSessionStatus()
|
||||
|
||||
// Auto-refresh more frequently in Docker environment (30s vs 60s)
|
||||
const refreshInterval = 30000 // Start with 30 seconds for all environments
|
||||
const interval = setInterval(fetchSessionStatus, refreshInterval)
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
const getConnectionStatus = () => {
|
||||
if (!sessionInfo) return { color: 'bg-gray-500', text: 'Unknown', icon: '❓' }
|
||||
|
||||
if (sessionInfo.isAuthenticated && sessionInfo.connectionStatus === 'connected') {
|
||||
return { color: 'bg-green-500', text: 'Connected & Authenticated', icon: '✅' }
|
||||
} else if (sessionInfo.hasSavedCookies || sessionInfo.hasSavedStorage) {
|
||||
return { color: 'bg-yellow-500', text: 'Session Available', icon: '🟡' }
|
||||
} else if (sessionInfo.connectionStatus === 'connected') {
|
||||
return { color: 'bg-blue-500', text: 'Connected (Not Authenticated)', icon: '🔵' }
|
||||
} else {
|
||||
return { color: 'bg-red-500', text: 'Disconnected', icon: '🔴' }
|
||||
}
|
||||
}
|
||||
|
||||
const status = getConnectionStatus()
|
||||
|
||||
return (
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-bold text-white flex items-center">
|
||||
<span className="w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-lg flex items-center justify-center mr-3">
|
||||
🌐
|
||||
</span>
|
||||
Session Status
|
||||
</h2>
|
||||
<button
|
||||
onClick={fetchSessionStatus}
|
||||
disabled={loading || refreshing}
|
||||
className="p-2 text-gray-400 hover:text-gray-300 transition-colors"
|
||||
title="Refresh Status"
|
||||
>
|
||||
<svg className={`w-4 h-4 ${(loading || refreshing) ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Connection Status */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between p-4 bg-gray-800/30 rounded-lg border border-gray-700">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={`w-3 h-3 ${status.color} rounded-full ${sessionInfo?.isAuthenticated ? 'animate-pulse' : ''}`}></div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white">{status.text}</h3>
|
||||
<p className="text-xs text-gray-400">
|
||||
{sessionInfo?.dockerEnv ? 'Docker Environment' : 'Local Environment'}
|
||||
{sessionInfo?.environment && ` • ${sessionInfo.environment}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-2xl">{status.icon}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Session Details */}
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-3 bg-gray-800/20 rounded-lg">
|
||||
<div className="text-xs text-gray-400">Browser Status</div>
|
||||
<div className={`text-sm font-medium ${sessionInfo?.browserActive ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{loading ? 'Checking...' : sessionInfo?.browserActive ? 'Active' : 'Inactive'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-gray-800/20 rounded-lg">
|
||||
<div className="text-xs text-gray-400">Cookies</div>
|
||||
<div className="text-sm font-medium text-white">
|
||||
{loading ? '...' : sessionInfo?.cookiesCount || 0} stored
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sessionInfo?.currentUrl && (
|
||||
<div className="p-3 bg-gray-800/20 rounded-lg">
|
||||
<div className="text-xs text-gray-400 mb-1">Current URL</div>
|
||||
<div className="text-xs text-gray-300 font-mono break-all">
|
||||
{sessionInfo.currentUrl}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sessionInfo?.lastChecked && (
|
||||
<div className="text-xs text-gray-500 text-center">
|
||||
Last updated: {new Date(sessionInfo.lastChecked).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
|
||||
<div className="flex items-start space-x-2">
|
||||
<span className="text-red-400 text-sm">⚠️</span>
|
||||
<div>
|
||||
<h4 className="text-red-400 font-medium text-sm">Connection Error</h4>
|
||||
<p className="text-red-300 text-xs mt-1">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="mt-6 grid grid-cols-2 gap-3">
|
||||
<button
|
||||
onClick={() => handleSessionAction('reconnect')}
|
||||
disabled={refreshing}
|
||||
className="btn-primary py-2 px-4 text-sm"
|
||||
>
|
||||
{refreshing ? 'Connecting...' : 'Reconnect'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleSessionAction('clear')}
|
||||
disabled={refreshing}
|
||||
className="btn-secondary py-2 px-4 text-sm"
|
||||
>
|
||||
Clear Session
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
318
components/SessionStatus_old.tsx
Normal file
318
components/SessionStatus_old.tsx
Normal file
@@ -0,0 +1,318 @@
|
||||
"use client"
|
||||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
interface SessionInfo {
|
||||
isAuthenticated: boolean
|
||||
hasSavedCookies: boolean
|
||||
hasSavedStorage: boolean
|
||||
cookiesCount: number
|
||||
currentUrl: string
|
||||
browserActive: boolean
|
||||
connectionStatus: 'connected' | 'disconnected' | 'unknown' | 'error'
|
||||
lastChecked: string
|
||||
dockerEnv?: boolean
|
||||
environment?: string
|
||||
}
|
||||
|
||||
export default function SessionStatus() {
|
||||
const [sessionInfo, setSessionInfo] = useState<SessionInfo | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
|
||||
const fetchSessionStatus = async () => {
|
||||
try {
|
||||
setError(null)
|
||||
const response = await fetch('/api/session-status', {
|
||||
cache: 'no-cache' // Important for Docker environment
|
||||
})
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
setSessionInfo(data.session)
|
||||
} else {
|
||||
setError(data.error || 'Failed to fetch session status')
|
||||
setSessionInfo(data.session || null)
|
||||
}
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Network error')
|
||||
setSessionInfo(null)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSessionAction = async (action: string) => {
|
||||
try {
|
||||
setRefreshing(true)
|
||||
setError(null)
|
||||
|
||||
const response = await fetch('/api/session-status', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action }),
|
||||
cache: 'no-cache' // Important for Docker environment
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (data.success) {
|
||||
// Refresh session status after action
|
||||
await fetchSessionStatus()
|
||||
} else {
|
||||
setError(data.error || `Failed to ${action} session`)
|
||||
}
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : `Failed to ${action} session`)
|
||||
} finally {
|
||||
setRefreshing(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchSessionStatus()
|
||||
|
||||
// Auto-refresh more frequently in Docker environment (30s vs 60s)
|
||||
const refreshInterval = 30000 // Start with 30 seconds for all environments
|
||||
const interval = setInterval(fetchSessionStatus, refreshInterval)
|
||||
return () => clearInterval(interval)
|
||||
}, [])
|
||||
|
||||
const getConnectionStatus = () => {
|
||||
if (!sessionInfo) return { color: 'bg-gray-500', text: 'Unknown', icon: '❓' }
|
||||
|
||||
if (sessionInfo.isAuthenticated && sessionInfo.connectionStatus === 'connected') {
|
||||
return { color: 'bg-green-500', text: 'Connected & Authenticated', icon: '✅' }
|
||||
} else if (sessionInfo.hasSavedCookies || sessionInfo.hasSavedStorage) {
|
||||
return { color: 'bg-yellow-500', text: 'Session Available', icon: '🟡' }
|
||||
} else if (sessionInfo.connectionStatus === 'connected') {
|
||||
return { color: 'bg-blue-500', text: 'Connected (Not Authenticated)', icon: '🔵' }
|
||||
} else {
|
||||
return { color: 'bg-red-500', text: 'Disconnected', icon: '🔴' }
|
||||
}
|
||||
}
|
||||
|
||||
const status = getConnectionStatus()
|
||||
|
||||
return (
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-bold text-white flex items-center">
|
||||
<span className="w-8 h-8 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-lg flex items-center justify-center mr-3">
|
||||
🌐
|
||||
</span>
|
||||
Session Status
|
||||
</h2>
|
||||
<button
|
||||
onClick={fetchSessionStatus}
|
||||
disabled={loading || refreshing}
|
||||
className="p-2 text-gray-400 hover:text-gray-300 transition-colors"
|
||||
title="Refresh Status"
|
||||
>
|
||||
<svg className={`w-4 h-4 ${(loading || refreshing) ? 'animate-spin' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Connection Status */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between p-4 bg-gray-800/30 rounded-lg border border-gray-700">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={`w-3 h-3 ${status.color} rounded-full ${sessionInfo?.isAuthenticated ? 'animate-pulse' : ''}`}></div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-white">{status.text}</h3>
|
||||
<p className="text-xs text-gray-400">
|
||||
{sessionInfo?.dockerEnv ? 'Docker Environment' : 'Local Environment'}
|
||||
{sessionInfo?.environment && ` • ${sessionInfo.environment}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-2xl">{status.icon}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Session Details */}
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-3 bg-gray-800/20 rounded-lg">
|
||||
<div className="text-xs text-gray-400">Browser Status</div>
|
||||
<div className={`text-sm font-medium ${sessionInfo?.browserActive ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{loading ? 'Checking...' : sessionInfo?.browserActive ? 'Active' : 'Inactive'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 bg-gray-800/20 rounded-lg">
|
||||
<div className="text-xs text-gray-400">Cookies</div>
|
||||
<div className="text-sm font-medium text-white">
|
||||
{loading ? '...' : sessionInfo?.cookiesCount || 0} stored
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{sessionInfo?.currentUrl && (
|
||||
<div className="p-3 bg-gray-800/20 rounded-lg">
|
||||
<div className="text-xs text-gray-400 mb-1">Current URL</div>
|
||||
<div className="text-xs text-gray-300 font-mono break-all">
|
||||
{sessionInfo.currentUrl}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sessionInfo?.lastChecked && (
|
||||
<div className="text-xs text-gray-500 text-center">
|
||||
Last updated: {new Date(sessionInfo.lastChecked).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
|
||||
<div className="flex items-start space-x-2">
|
||||
<span className="text-red-400 text-sm">⚠️</span>
|
||||
<div>
|
||||
<h4 className="text-red-400 font-medium text-sm">Connection Error</h4>
|
||||
<p className="text-red-300 text-xs mt-1">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="mt-6 grid grid-cols-2 gap-3">
|
||||
<button
|
||||
onClick={() => handleSessionAction('reconnect')}
|
||||
disabled={refreshing}
|
||||
className="btn-primary py-2 px-4 text-sm"
|
||||
>
|
||||
{refreshing ? 'Connecting...' : 'Reconnect'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleSessionAction('clear')}
|
||||
disabled={refreshing}
|
||||
className="btn-secondary py-2 px-4 text-sm"
|
||||
>
|
||||
Clear Session
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
} else if (sessionInfo.hasSavedCookies || sessionInfo.hasSavedStorage) {
|
||||
return `Session Available${dockerSuffix}`
|
||||
} else {
|
||||
return `Not Logged In${dockerSuffix}`
|
||||
}
|
||||
}
|
||||
|
||||
const getDetailedStatus = () => {
|
||||
if (!sessionInfo) return []
|
||||
|
||||
return [
|
||||
{ label: 'Authenticated', value: sessionInfo.isAuthenticated ? '✅' : '❌' },
|
||||
{ label: 'Connection', value: sessionInfo.connectionStatus === 'connected' ? '✅' :
|
||||
sessionInfo.connectionStatus === 'disconnected' ? '🔌' :
|
||||
sessionInfo.connectionStatus === 'error' ? '❌' : '❓' },
|
||||
{ label: 'Browser Active', value: sessionInfo.browserActive ? '✅' : '❌' },
|
||||
{ label: 'Saved Cookies', value: sessionInfo.hasSavedCookies ? `✅ (${sessionInfo.cookiesCount})` : '❌' },
|
||||
{ label: 'Saved Storage', value: sessionInfo.hasSavedStorage ? '✅' : '❌' },
|
||||
{ label: 'Environment', value: sessionInfo.dockerEnv ? '🐳 Docker' : '💻 Local' },
|
||||
]
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-gray-900 rounded-lg shadow p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-white">TradingView Session</h3>
|
||||
<button
|
||||
onClick={() => fetchSessionStatus()}
|
||||
disabled={loading || refreshing}
|
||||
className="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
{loading || refreshing ? '⟳' : '🔄'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Status Indicator */}
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<div className={`w-3 h-3 rounded-full ${getStatusColor()}`}></div>
|
||||
<span className="text-white font-medium">{getStatusText()}</span>
|
||||
</div>
|
||||
|
||||
{/* Detailed Status */}
|
||||
{sessionInfo && (
|
||||
<div className="space-y-2 mb-4">
|
||||
{getDetailedStatus().map((item, index) => (
|
||||
<div key={index} className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">{item.label}:</span>
|
||||
<span className="text-white">{item.value}</span>
|
||||
</div>
|
||||
))}
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-400">Last Checked:</span>
|
||||
<span className="text-white text-xs">
|
||||
{new Date(sessionInfo.lastChecked).toLocaleTimeString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="bg-red-900 border border-red-700 rounded p-2 mb-4">
|
||||
<p className="text-red-300 text-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={() => handleSessionAction('refresh')}
|
||||
disabled={refreshing}
|
||||
className="px-3 py-1 bg-green-600 text-white rounded text-sm hover:bg-green-700 disabled:opacity-50"
|
||||
>
|
||||
Refresh Session
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSessionAction('test')}
|
||||
disabled={refreshing}
|
||||
className="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
Test Session
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSessionAction('clear')}
|
||||
disabled={refreshing}
|
||||
className="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700 disabled:opacity-50"
|
||||
>
|
||||
Clear Session
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Usage Instructions */}
|
||||
{sessionInfo && !sessionInfo.isAuthenticated && (
|
||||
<div className="mt-4 p-3 bg-yellow-900 border border-yellow-700 rounded">
|
||||
<p className="text-yellow-300 text-sm">
|
||||
💡 <strong>To establish session:</strong> Run the analysis or screenshot capture once to trigger manual login,
|
||||
then future requests will use the saved session and avoid captchas.
|
||||
{sessionInfo.dockerEnv && (
|
||||
<><br/>🐳 <strong>Docker:</strong> Session data is persisted in the container volume for reuse across restarts.</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Docker Environment Info */}
|
||||
{sessionInfo?.dockerEnv && (
|
||||
<div className="mt-4 p-3 bg-blue-900 border border-blue-700 rounded">
|
||||
<p className="text-blue-300 text-sm">
|
||||
🐳 <strong>Docker Environment:</strong> Running in containerized mode. Session persistence is enabled
|
||||
via volume mount at <code className="bg-blue-800 px-1 rounded">/.tradingview-session</code>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -9,6 +9,7 @@ interface Trade {
|
||||
price: number
|
||||
status: string
|
||||
executedAt: string
|
||||
pnl?: number
|
||||
}
|
||||
|
||||
export default function TradingHistory() {
|
||||
@@ -17,43 +18,160 @@ export default function TradingHistory() {
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchTrades() {
|
||||
const res = await fetch('/api/trading-history')
|
||||
if (res.ok) {
|
||||
setTrades(await res.json())
|
||||
try {
|
||||
const res = await fetch('/api/trading-history')
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setTrades(data)
|
||||
} else {
|
||||
// Mock data for demonstration
|
||||
setTrades([
|
||||
{
|
||||
id: '1',
|
||||
symbol: 'BTCUSD',
|
||||
side: 'BUY',
|
||||
amount: 0.1,
|
||||
price: 45230.50,
|
||||
status: 'FILLED',
|
||||
executedAt: new Date().toISOString(),
|
||||
pnl: 125.50
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
symbol: 'ETHUSD',
|
||||
side: 'SELL',
|
||||
amount: 2.5,
|
||||
price: 2856.75,
|
||||
status: 'FILLED',
|
||||
executedAt: new Date(Date.now() - 3600000).toISOString(),
|
||||
pnl: -67.25
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
symbol: 'SOLUSD',
|
||||
side: 'BUY',
|
||||
amount: 10,
|
||||
price: 95.80,
|
||||
status: 'FILLED',
|
||||
executedAt: new Date(Date.now() - 7200000).toISOString(),
|
||||
pnl: 89.75
|
||||
}
|
||||
])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch trades:', error)
|
||||
setTrades([])
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
fetchTrades()
|
||||
}, [])
|
||||
|
||||
const getSideColor = (side: string) => {
|
||||
return side.toLowerCase() === 'buy' ? 'text-green-400' : 'text-red-400'
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status.toLowerCase()) {
|
||||
case 'filled': return 'text-green-400'
|
||||
case 'pending': return 'text-yellow-400'
|
||||
case 'cancelled': return 'text-red-400'
|
||||
default: return 'text-gray-400'
|
||||
}
|
||||
}
|
||||
|
||||
const getPnLColor = (pnl?: number) => {
|
||||
if (!pnl) return 'text-gray-400'
|
||||
return pnl >= 0 ? 'text-green-400' : 'text-red-400'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 border rounded bg-gray-900">
|
||||
<h2 className="text-lg font-bold mb-2">Trading History</h2>
|
||||
{loading ? <div>Loading...</div> : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Symbol</th>
|
||||
<th>Side</th>
|
||||
<th>Amount</th>
|
||||
<th>Price</th>
|
||||
<th>Status</th>
|
||||
<th>Executed At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{trades.map(trade => (
|
||||
<tr key={trade.id}>
|
||||
<td>{trade.symbol}</td>
|
||||
<td>{trade.side}</td>
|
||||
<td>{trade.amount}</td>
|
||||
<td>{trade.price}</td>
|
||||
<td>{trade.status}</td>
|
||||
<td>{trade.executedAt}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-bold text-white flex items-center">
|
||||
<span className="w-8 h-8 bg-gradient-to-br from-purple-400 to-violet-600 rounded-lg flex items-center justify-center mr-3">
|
||||
📊
|
||||
</span>
|
||||
Trading History
|
||||
</h2>
|
||||
<span className="text-xs text-gray-400">Latest {trades.length} trades</span>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="spinner"></div>
|
||||
<span className="ml-2 text-gray-400">Loading trades...</span>
|
||||
</div>
|
||||
) : trades.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-16 h-16 bg-gray-700/50 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-gray-400 text-2xl">📈</span>
|
||||
</div>
|
||||
<p className="text-gray-400 font-medium">No trading history</p>
|
||||
<p className="text-gray-500 text-sm mt-2">Your completed trades will appear here</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-700">
|
||||
<th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Asset</th>
|
||||
<th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Side</th>
|
||||
<th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Amount</th>
|
||||
<th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Price</th>
|
||||
<th className="text-center py-3 px-4 text-gray-400 font-medium text-sm">Status</th>
|
||||
<th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">P&L</th>
|
||||
<th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{trades.map((trade, index) => (
|
||||
<tr key={trade.id} className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors">
|
||||
<td className="py-4 px-4">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mr-3">
|
||||
<span className="text-white text-xs font-bold">
|
||||
{trade.symbol.slice(0, 2)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-medium text-white">{trade.symbol}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<span className={`font-semibold ${getSideColor(trade.side)}`}>
|
||||
{trade.side}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right font-mono text-gray-300">
|
||||
{trade.amount}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right font-mono text-gray-300">
|
||||
${trade.price.toLocaleString()}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-center">
|
||||
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||||
trade.status.toLowerCase() === 'filled' ? 'bg-green-100 text-green-800' :
|
||||
trade.status.toLowerCase() === 'pending' ? 'bg-yellow-100 text-yellow-800' :
|
||||
'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
{trade.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right">
|
||||
<span className={`font-mono font-semibold ${getPnLColor(trade.pnl)}`}>
|
||||
{trade.pnl ? `${trade.pnl >= 0 ? '+' : ''}$${trade.pnl.toFixed(2)}` : '--'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right text-xs text-gray-400">
|
||||
{new Date(trade.executedAt).toLocaleTimeString()}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
188
components/TradingHistory_old.tsx
Normal file
188
components/TradingHistory_old.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
"use client"
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
interface Trade {
|
||||
id: string
|
||||
symbol: string
|
||||
side: string
|
||||
amount: number
|
||||
price: number
|
||||
status: string
|
||||
executedAt: string
|
||||
pnl?: number
|
||||
}
|
||||
|
||||
export default function TradingHistory() {
|
||||
const [trades, setTrades] = useState<Trade[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchTrades() {
|
||||
try {
|
||||
const res = await fetch('/api/trading-history')
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setTrades(data)
|
||||
} else {
|
||||
// Mock data for demonstration
|
||||
setTrades([
|
||||
{
|
||||
id: '1',
|
||||
symbol: 'BTCUSD',
|
||||
side: 'BUY',
|
||||
amount: 0.1,
|
||||
price: 45230.50,
|
||||
status: 'FILLED',
|
||||
executedAt: new Date().toISOString(),
|
||||
pnl: 125.50
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
symbol: 'ETHUSD',
|
||||
side: 'SELL',
|
||||
amount: 2.5,
|
||||
price: 2856.75,
|
||||
status: 'FILLED',
|
||||
executedAt: new Date(Date.now() - 3600000).toISOString(),
|
||||
pnl: -67.25
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
symbol: 'SOLUSD',
|
||||
side: 'BUY',
|
||||
amount: 10,
|
||||
price: 95.80,
|
||||
status: 'FILLED',
|
||||
executedAt: new Date(Date.now() - 7200000).toISOString(),
|
||||
pnl: 89.75
|
||||
}
|
||||
])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch trades:', error)
|
||||
setTrades([])
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
fetchTrades()
|
||||
}, [])
|
||||
|
||||
const getSideColor = (side: string) => {
|
||||
return side.toLowerCase() === 'buy' ? 'text-green-400' : 'text-red-400'
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status.toLowerCase()) {
|
||||
case 'filled': return 'text-green-400'
|
||||
case 'pending': return 'text-yellow-400'
|
||||
case 'cancelled': return 'text-red-400'
|
||||
default: return 'text-gray-400'
|
||||
}
|
||||
}
|
||||
|
||||
const getPnLColor = (pnl?: number) => {
|
||||
if (!pnl) return 'text-gray-400'
|
||||
return pnl >= 0 ? 'text-green-400' : 'text-red-400'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-bold text-white flex items-center">
|
||||
<span className="w-8 h-8 bg-gradient-to-br from-purple-400 to-violet-600 rounded-lg flex items-center justify-center mr-3">
|
||||
📊
|
||||
</span>
|
||||
Trading History
|
||||
</h2>
|
||||
<span className="text-xs text-gray-400">Latest {trades.length} trades</span>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="spinner"></div>
|
||||
<span className="ml-2 text-gray-400">Loading trades...</span>
|
||||
</div>
|
||||
) : trades.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-16 h-16 bg-gray-700/50 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-gray-400 text-2xl">📈</span>
|
||||
</div>
|
||||
<p className="text-gray-400 font-medium">No trading history</p>
|
||||
<p className="text-gray-500 text-sm mt-2">Your completed trades will appear here</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-700">
|
||||
<th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Asset</th>
|
||||
<th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Side</th>
|
||||
<th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Amount</th>
|
||||
<th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Price</th>
|
||||
<th className="text-center py-3 px-4 text-gray-400 font-medium text-sm">Status</th>
|
||||
<th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">P&L</th>
|
||||
<th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{trades.map((trade, index) => (
|
||||
<tr key={trade.id} className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors">
|
||||
<td className="py-4 px-4">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mr-3">
|
||||
<span className="text-white text-xs font-bold">
|
||||
{trade.symbol.slice(0, 2)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-medium text-white">{trade.symbol}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-4 px-4">
|
||||
<span className={`font-semibold ${getSideColor(trade.side)}`}>
|
||||
{trade.side}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right font-mono text-gray-300">
|
||||
{trade.amount}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right font-mono text-gray-300">
|
||||
${trade.price.toLocaleString()}
|
||||
</td>
|
||||
<td className="py-4 px-4 text-center">
|
||||
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||||
trade.status.toLowerCase() === 'filled' ? 'bg-green-100 text-green-800' :
|
||||
trade.status.toLowerCase() === 'pending' ? 'bg-yellow-100 text-yellow-800' :
|
||||
'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
{trade.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right">
|
||||
<span className={`font-mono font-semibold ${getPnLColor(trade.pnl)}`}>
|
||||
{trade.pnl ? `${trade.pnl >= 0 ? '+' : ''}$${trade.pnl.toFixed(2)}` : '--'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-4 text-right text-xs text-gray-400">
|
||||
{new Date(trade.executedAt).toLocaleTimeString()}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<td>{trade.status}</td>
|
||||
<td>{trade.executedAt}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -28,6 +28,7 @@ services:
|
||||
volumes:
|
||||
- ./screenshots:/app/screenshots
|
||||
- ./videos:/app/videos
|
||||
- ./.tradingview-session:/app/.tradingview-session
|
||||
|
||||
# Health check
|
||||
healthcheck:
|
||||
|
||||
@@ -10,18 +10,29 @@ export interface ScreenshotConfig {
|
||||
}
|
||||
|
||||
export class EnhancedScreenshotService {
|
||||
private static readonly OPERATION_TIMEOUT = 120000 // 2 minutes timeout
|
||||
|
||||
async captureWithLogin(config: ScreenshotConfig): Promise<string[]> {
|
||||
const screenshotFiles: string[] = []
|
||||
|
||||
try {
|
||||
// Ensure screenshots directory exists
|
||||
const screenshotsDir = path.join(process.cwd(), 'screenshots')
|
||||
await fs.mkdir(screenshotsDir, { recursive: true })
|
||||
|
||||
console.log('Initializing TradingView automation for Docker container...')
|
||||
return new Promise(async (resolve, reject) => {
|
||||
// Set overall timeout for the operation
|
||||
const timeoutId = setTimeout(() => {
|
||||
reject(new Error('Screenshot capture operation timed out after 2 minutes'))
|
||||
}, EnhancedScreenshotService.OPERATION_TIMEOUT)
|
||||
|
||||
// Initialize automation with Docker-optimized settings
|
||||
await tradingViewAutomation.init()
|
||||
try {
|
||||
// Ensure screenshots directory exists
|
||||
const screenshotsDir = path.join(process.cwd(), 'screenshots')
|
||||
await fs.mkdir(screenshotsDir, { recursive: true })
|
||||
|
||||
console.log('Initializing TradingView automation for Docker container...')
|
||||
|
||||
// Ensure browser is healthy before operations
|
||||
await tradingViewAutomation.ensureBrowserReady()
|
||||
|
||||
// Initialize automation with Docker-optimized settings
|
||||
await tradingViewAutomation.init()
|
||||
|
||||
// Check if already logged in using session persistence
|
||||
const alreadyLoggedIn = await tradingViewAutomation.isLoggedIn()
|
||||
@@ -29,21 +40,27 @@ export class EnhancedScreenshotService {
|
||||
if (!alreadyLoggedIn) {
|
||||
console.log('No active session found...')
|
||||
|
||||
// Try to use session persistence first to avoid captcha
|
||||
// Try to use enhanced session persistence first to avoid captcha
|
||||
const sessionTest = await tradingViewAutomation.testSessionPersistence()
|
||||
console.log('📊 Current session info:', sessionTest)
|
||||
|
||||
if (sessionTest.isValid) {
|
||||
console.log('✅ Valid session found - avoiding captcha!')
|
||||
if (sessionTest.isValid && sessionTest.cookiesCount > 0) {
|
||||
console.log('✅ Saved session data found')
|
||||
console.log(`🍪 Cookies: ${sessionTest.cookiesCount}`)
|
||||
console.log(`💾 Storage: ${sessionTest.hasStorage ? 'Yes' : 'No'}`)
|
||||
} else {
|
||||
console.log('⚠️ No valid session - manual login may be required')
|
||||
console.log('💡 Using smart login to handle captcha scenario...')
|
||||
|
||||
// Use smart login which prioritizes session persistence
|
||||
const loginSuccess = await tradingViewAutomation.smartLogin(config.credentials)
|
||||
|
||||
if (!loginSuccess) {
|
||||
throw new Error('Smart login failed - manual intervention may be required')
|
||||
}
|
||||
console.log('⚠️ Session data exists but appears to be expired')
|
||||
}
|
||||
|
||||
// Always try smart login which handles session validation and human-like behavior
|
||||
console.log('⚠️ No valid session - manual login may be required')
|
||||
console.log('💡 Using smart login to handle captcha scenario...')
|
||||
|
||||
// Use smart login which prioritizes session persistence and anti-detection
|
||||
const loginSuccess = await tradingViewAutomation.smartLogin(config.credentials)
|
||||
|
||||
if (!loginSuccess) {
|
||||
throw new Error('Smart login failed - manual intervention may be required')
|
||||
}
|
||||
} else {
|
||||
console.log('✅ Already logged in using saved session')
|
||||
@@ -90,15 +107,17 @@ export class EnhancedScreenshotService {
|
||||
}
|
||||
|
||||
console.log(`Successfully captured ${screenshotFiles.length} screenshot(s)`)
|
||||
return screenshotFiles
|
||||
|
||||
clearTimeout(timeoutId)
|
||||
resolve(screenshotFiles)
|
||||
|
||||
} catch (error) {
|
||||
console.error('Enhanced screenshot capture failed:', error)
|
||||
throw error
|
||||
} finally {
|
||||
// Always cleanup
|
||||
await tradingViewAutomation.close()
|
||||
clearTimeout(timeoutId)
|
||||
reject(error)
|
||||
}
|
||||
// Note: Don't close browser here - keep it alive for subsequent operations
|
||||
})
|
||||
}
|
||||
|
||||
async captureQuick(symbol: string, timeframe: string, credentials: TradingViewCredentials): Promise<string | null> {
|
||||
@@ -208,6 +227,13 @@ export class EnhancedScreenshotService {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup browser resources (can be called when shutting down the application)
|
||||
*/
|
||||
async cleanup(): Promise<void> {
|
||||
await tradingViewAutomation.close()
|
||||
}
|
||||
}
|
||||
|
||||
export const enhancedScreenshotService = new EnhancedScreenshotService()
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -196,7 +196,10 @@ export class TradingViewCapture {
|
||||
|
||||
if (emailButton.asElement()) {
|
||||
console.log('Found email login button, clicking...')
|
||||
await emailButton.asElement()?.click()
|
||||
const elementHandle = emailButton.asElement() as any
|
||||
if (elementHandle) {
|
||||
await elementHandle.click()
|
||||
}
|
||||
await new Promise(res => setTimeout(res, 2000))
|
||||
await this.debugScreenshot('login_04b_after_email_button', page)
|
||||
|
||||
@@ -233,7 +236,7 @@ export class TradingViewCapture {
|
||||
const text = btn.textContent?.toLowerCase() || ''
|
||||
return text.includes('sign in') || text.includes('login') || text.includes('submit')
|
||||
})
|
||||
}).then(handle => handle.asElement())
|
||||
}).then(handle => handle.asElement()) as any
|
||||
}
|
||||
|
||||
if (!signInButton) {
|
||||
|
||||
@@ -42,12 +42,13 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.3.5",
|
||||
"tailwindcss": "^4",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "^5.8.3"
|
||||
}
|
||||
}
|
||||
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
24
tailwind.config.ts
Normal file
24
tailwind.config.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: "var(--background)",
|
||||
foreground: "var(--foreground)",
|
||||
},
|
||||
fontFamily: {
|
||||
'inter': ['Inter', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
export default config;
|
||||
Reference in New Issue
Block a user