576 lines
23 KiB
TypeScript
576 lines
23 KiB
TypeScript
import { useParams, Link } from 'react-router-dom';
|
|
import { useMemo, useState, useEffect } from 'react';
|
|
import {
|
|
ArrowLeft, Building2, TrendingUp, TrendingDown, Minus, AlertTriangle,
|
|
Calendar, Activity, LineChart, Database, MessageSquare, FileText, Layers,
|
|
RefreshCw, Play, Loader2
|
|
} from 'lucide-react';
|
|
import { NIFTY_50_STOCKS } from '../types';
|
|
import { sampleRecommendations, getStockHistory, getExtendedPriceHistory, getPredictionPointsWithPrices, getRawAnalysis } from '../data/recommendations';
|
|
import { DecisionBadge, ConfidenceBadge, RiskBadge } from '../components/StockCard';
|
|
import AIAnalysisPanel from '../components/AIAnalysisPanel';
|
|
import StockPriceChart from '../components/StockPriceChart';
|
|
import {
|
|
PipelineOverview,
|
|
AgentReportCard,
|
|
DebateViewer,
|
|
RiskDebateViewer,
|
|
DataSourcesPanel
|
|
} from '../components/pipeline';
|
|
import { api } from '../services/api';
|
|
import { useSettings } from '../contexts/SettingsContext';
|
|
import type { FullPipelineData, AgentType } from '../types/pipeline';
|
|
|
|
type TabType = 'overview' | 'pipeline' | 'debates' | 'data';
|
|
|
|
export default function StockDetail() {
|
|
const { symbol } = useParams<{ symbol: string }>();
|
|
const [activeTab, setActiveTab] = useState<TabType>('overview');
|
|
const [pipelineData, setPipelineData] = useState<FullPipelineData | null>(null);
|
|
const [isLoadingPipeline, setIsLoadingPipeline] = useState(false);
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [lastRefresh, setLastRefresh] = useState<string | null>(null);
|
|
const [refreshMessage, setRefreshMessage] = useState<string | null>(null);
|
|
const { settings } = useSettings();
|
|
|
|
// Analysis state
|
|
const [isAnalysisRunning, setIsAnalysisRunning] = useState(false);
|
|
const [analysisStatus, setAnalysisStatus] = useState<string | null>(null);
|
|
const [analysisProgress, setAnalysisProgress] = useState<string | null>(null);
|
|
|
|
const stock = NIFTY_50_STOCKS.find(s => s.symbol === symbol);
|
|
const latestRecommendation = sampleRecommendations[0];
|
|
const analysis = latestRecommendation?.analysis[symbol || ''];
|
|
const history = symbol ? getStockHistory(symbol) : [];
|
|
|
|
// Get price history and prediction points for the chart
|
|
const priceHistory = useMemo(() => {
|
|
return symbol ? getExtendedPriceHistory(symbol, 60) : [];
|
|
}, [symbol]);
|
|
|
|
const predictionPoints = useMemo(() => {
|
|
return symbol && priceHistory.length > 0
|
|
? getPredictionPointsWithPrices(symbol, priceHistory)
|
|
: [];
|
|
}, [symbol, priceHistory]);
|
|
|
|
// Function to fetch pipeline data
|
|
const fetchPipelineData = async (forceRefresh = false) => {
|
|
if (!symbol || !latestRecommendation?.date) return;
|
|
|
|
if (forceRefresh) {
|
|
setIsRefreshing(true);
|
|
} else {
|
|
setIsLoadingPipeline(true);
|
|
}
|
|
|
|
try {
|
|
const data = await api.getPipelineData(latestRecommendation.date, symbol, forceRefresh);
|
|
setPipelineData(data);
|
|
if (forceRefresh) {
|
|
setLastRefresh(new Date().toLocaleTimeString());
|
|
const hasData = data.pipeline_steps?.length > 0 || Object.keys(data.agent_reports || {}).length > 0;
|
|
setRefreshMessage(hasData ? `✓ Data refreshed for ${symbol}` : `No pipeline data found for ${symbol}`);
|
|
setTimeout(() => setRefreshMessage(null), 3000);
|
|
}
|
|
console.log('Pipeline data fetched:', data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch pipeline data:', error);
|
|
if (forceRefresh) {
|
|
setRefreshMessage(`✗ Failed to refresh: ${error}`);
|
|
setTimeout(() => setRefreshMessage(null), 3000);
|
|
}
|
|
// Set empty pipeline data structure
|
|
setPipelineData({
|
|
date: latestRecommendation.date,
|
|
symbol: symbol,
|
|
agent_reports: {},
|
|
debates: {},
|
|
pipeline_steps: [],
|
|
data_sources: [],
|
|
status: 'no_data'
|
|
});
|
|
} finally {
|
|
setIsLoadingPipeline(false);
|
|
setIsRefreshing(false);
|
|
}
|
|
};
|
|
|
|
// Fetch pipeline data when tab changes or symbol changes
|
|
useEffect(() => {
|
|
if (activeTab === 'overview') return; // Don't fetch for overview tab
|
|
fetchPipelineData();
|
|
}, [symbol, latestRecommendation?.date, activeTab]);
|
|
|
|
// Refresh handler
|
|
const handleRefresh = async () => {
|
|
console.log('Refresh button clicked - fetching fresh data...');
|
|
await fetchPipelineData(true);
|
|
console.log('Refresh complete - data updated');
|
|
};
|
|
|
|
// Run Analysis handler
|
|
const handleRunAnalysis = async () => {
|
|
if (!symbol || !latestRecommendation?.date) return;
|
|
|
|
setIsAnalysisRunning(true);
|
|
setAnalysisStatus('starting');
|
|
setAnalysisProgress('Starting analysis...');
|
|
|
|
try {
|
|
// Trigger analysis with settings from context
|
|
await api.runAnalysis(symbol, latestRecommendation.date, {
|
|
deep_think_model: settings.deepThinkModel,
|
|
quick_think_model: settings.quickThinkModel,
|
|
provider: settings.provider,
|
|
api_key: settings.provider === 'anthropic_api' ? settings.anthropicApiKey : undefined,
|
|
max_debate_rounds: settings.maxDebateRounds
|
|
});
|
|
setAnalysisStatus('running');
|
|
|
|
// Poll for status
|
|
const pollInterval = setInterval(async () => {
|
|
try {
|
|
const status = await api.getAnalysisStatus(symbol);
|
|
setAnalysisProgress(status.progress || 'Processing...');
|
|
|
|
if (status.status === 'completed') {
|
|
clearInterval(pollInterval);
|
|
setIsAnalysisRunning(false);
|
|
setAnalysisStatus('completed');
|
|
setAnalysisProgress(`✓ Analysis complete: ${status.decision || 'Done'}`);
|
|
// Refresh data to show results
|
|
await fetchPipelineData(true);
|
|
setTimeout(() => {
|
|
setAnalysisProgress(null);
|
|
setAnalysisStatus(null);
|
|
}, 5000);
|
|
} else if (status.status === 'error') {
|
|
clearInterval(pollInterval);
|
|
setIsAnalysisRunning(false);
|
|
setAnalysisStatus('error');
|
|
setAnalysisProgress(`✗ Error: ${status.error}`);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to poll analysis status:', err);
|
|
}
|
|
}, 2000); // Poll every 2 seconds
|
|
|
|
// Cleanup after 10 minutes max
|
|
setTimeout(() => clearInterval(pollInterval), 600000);
|
|
|
|
} catch (error) {
|
|
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
console.error('Failed to start analysis:', errorMessage, error);
|
|
setIsAnalysisRunning(false);
|
|
setAnalysisStatus('error');
|
|
// More helpful error message
|
|
if (errorMessage.includes('Failed to fetch') || errorMessage.includes('NetworkError')) {
|
|
setAnalysisProgress(`✗ Network error: Cannot connect to backend at localhost:8000. Please check if the server is running.`);
|
|
} else {
|
|
setAnalysisProgress(`✗ Failed to start analysis: ${errorMessage}`);
|
|
}
|
|
}
|
|
};
|
|
|
|
if (!stock) {
|
|
return (
|
|
<div className="min-h-[60vh] flex items-center justify-center">
|
|
<div className="text-center">
|
|
<AlertTriangle className="w-12 h-12 text-amber-500 mx-auto mb-4" />
|
|
<h2 className="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Stock Not Found</h2>
|
|
<p className="text-gray-500 dark:text-gray-400 mb-4">The stock "{symbol}" was not found in Nifty 50.</p>
|
|
<Link to="/" className="btn-primary">
|
|
Back to Dashboard
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const decisionIcon = {
|
|
BUY: TrendingUp,
|
|
SELL: TrendingDown,
|
|
HOLD: Minus,
|
|
};
|
|
|
|
const decisionColor = {
|
|
BUY: 'from-green-500 to-green-600',
|
|
SELL: 'from-red-500 to-red-600',
|
|
HOLD: 'from-amber-500 to-amber-600',
|
|
};
|
|
|
|
const DecisionIcon = analysis?.decision ? decisionIcon[analysis.decision] : Activity;
|
|
const bgGradient = analysis?.decision ? decisionColor[analysis.decision] : 'from-gray-500 to-gray-600';
|
|
|
|
const TABS = [
|
|
{ id: 'overview' as const, label: 'Overview', icon: LineChart },
|
|
{ id: 'pipeline' as const, label: 'Analysis Pipeline', icon: Layers },
|
|
{ id: 'debates' as const, label: 'Debates', icon: MessageSquare },
|
|
{ id: 'data' as const, label: 'Data Sources', icon: Database },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Back Button */}
|
|
<Link
|
|
to="/"
|
|
className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-nifty-600 dark:hover:text-nifty-400 transition-colors"
|
|
>
|
|
<ArrowLeft className="w-3.5 h-3.5" />
|
|
Back to Dashboard
|
|
</Link>
|
|
|
|
{/* Compact Stock Header */}
|
|
<section className="card overflow-hidden">
|
|
<div className={`bg-gradient-to-r ${bgGradient} p-4 text-white`}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<h1 className="text-2xl font-display font-bold">{stock.symbol}</h1>
|
|
{analysis?.decision && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-white/20">
|
|
<DecisionIcon className="w-3 h-3" />
|
|
{analysis.decision}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-white/90 text-sm">{stock.company_name}</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right text-xs">
|
|
<div className="flex items-center gap-1.5 text-white/80">
|
|
<Building2 className="w-3 h-3" />
|
|
<span>{stock.sector || 'N/A'}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-white/70 mt-1">
|
|
<Calendar className="w-3 h-3" />
|
|
{latestRecommendation?.date ? new Date(latestRecommendation.date).toLocaleDateString('en-IN', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
}) : 'N/A'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Analysis Details - Inline */}
|
|
{analysis && (
|
|
<div className="p-3 flex items-center gap-4 bg-gray-50/50 dark:bg-slate-700/50">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-gray-500 dark:text-gray-400">Decision:</span>
|
|
<DecisionBadge decision={analysis.decision} size="small" />
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-gray-500 dark:text-gray-400">Confidence:</span>
|
|
<ConfidenceBadge confidence={analysis.confidence} />
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs text-gray-500 dark:text-gray-400">Risk:</span>
|
|
<RiskBadge risk={analysis.risk} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* Tab Navigation */}
|
|
<div className="card p-1 flex gap-1 overflow-x-auto">
|
|
{TABS.map(tab => {
|
|
const Icon = tab.icon;
|
|
const isActive = activeTab === tab.id;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`
|
|
flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all whitespace-nowrap
|
|
${isActive
|
|
? 'bg-nifty-600 text-white shadow-md'
|
|
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-700'
|
|
}
|
|
`}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
|
|
{/* Action Buttons - Show on non-overview tabs */}
|
|
{activeTab !== 'overview' && (
|
|
<div className="ml-auto flex items-center gap-2">
|
|
{lastRefresh && (
|
|
<span className="text-xs text-gray-400 dark:text-gray-500">
|
|
Updated: {lastRefresh}
|
|
</span>
|
|
)}
|
|
|
|
{/* Run Analysis Button */}
|
|
<button
|
|
onClick={handleRunAnalysis}
|
|
disabled={isAnalysisRunning || isRefreshing || isLoadingPipeline}
|
|
className={`
|
|
flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all
|
|
${isAnalysisRunning
|
|
? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300'
|
|
: 'bg-nifty-600 text-white hover:bg-nifty-700'
|
|
}
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
`}
|
|
title="Run AI analysis for this stock"
|
|
>
|
|
{isAnalysisRunning ? (
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
) : (
|
|
<Play className="w-4 h-4" />
|
|
)}
|
|
{isAnalysisRunning ? 'Analyzing...' : 'Run Analysis'}
|
|
</button>
|
|
|
|
{/* Refresh Button */}
|
|
<button
|
|
onClick={handleRefresh}
|
|
disabled={isRefreshing || isLoadingPipeline || isAnalysisRunning}
|
|
className={`
|
|
flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-all
|
|
text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-700
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
|
`}
|
|
title="Refresh pipeline data"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
|
|
{isRefreshing ? 'Refreshing...' : 'Refresh'}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Analysis Progress Banner */}
|
|
{analysisProgress && (
|
|
<div className={`p-3 rounded-lg text-sm font-medium flex items-center gap-2 ${
|
|
analysisStatus === 'completed'
|
|
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
|
|
: analysisStatus === 'error'
|
|
? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
|
|
: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300'
|
|
}`}>
|
|
{isAnalysisRunning && <Loader2 className="w-4 h-4 animate-spin" />}
|
|
{analysisProgress}
|
|
</div>
|
|
)}
|
|
|
|
{/* Refresh Notification */}
|
|
{refreshMessage && !analysisProgress && (
|
|
<div className={`p-3 rounded-lg text-sm font-medium ${
|
|
refreshMessage.startsWith('✓')
|
|
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
|
|
: refreshMessage.startsWith('✗')
|
|
? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
|
|
: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300'
|
|
}`}>
|
|
{refreshMessage}
|
|
</div>
|
|
)}
|
|
|
|
{/* Tab Content */}
|
|
{activeTab === 'overview' && (
|
|
<>
|
|
{/* Price Chart with Predictions */}
|
|
{priceHistory.length > 0 && (
|
|
<section className="card overflow-hidden">
|
|
<div className="p-3 border-b border-gray-100 dark:border-slate-700 bg-gray-50/50 dark:bg-slate-800/50">
|
|
<div className="flex items-center gap-2">
|
|
<LineChart className="w-4 h-4 text-nifty-600 dark:text-nifty-400" />
|
|
<h2 className="font-semibold text-gray-900 dark:text-gray-100 text-sm">Price History & AI Predictions</h2>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 bg-white dark:bg-slate-800">
|
|
<StockPriceChart
|
|
priceHistory={priceHistory}
|
|
predictions={predictionPoints}
|
|
symbol={symbol || ''}
|
|
/>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* AI Analysis Panel */}
|
|
{analysis && getRawAnalysis(symbol || '') && (
|
|
<AIAnalysisPanel
|
|
analysis={getRawAnalysis(symbol || '') || ''}
|
|
decision={analysis.decision}
|
|
/>
|
|
)}
|
|
|
|
{/* Compact Stats Grid */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
|
|
<div className="card p-2.5 text-center">
|
|
<div className="text-lg font-bold text-gray-900 dark:text-gray-100">{history.length}</div>
|
|
<div className="text-[10px] text-gray-500 dark:text-gray-400">Analyses</div>
|
|
</div>
|
|
<div className="card p-2.5 text-center">
|
|
<div className="text-lg font-bold text-green-600 dark:text-green-400">
|
|
{history.filter((h: { decision: string }) => h.decision === 'BUY').length}
|
|
</div>
|
|
<div className="text-[10px] text-gray-500 dark:text-gray-400">Buy</div>
|
|
</div>
|
|
<div className="card p-2.5 text-center">
|
|
<div className="text-lg font-bold text-amber-600 dark:text-amber-400">
|
|
{history.filter((h: { decision: string }) => h.decision === 'HOLD').length}
|
|
</div>
|
|
<div className="text-[10px] text-gray-500 dark:text-gray-400">Hold</div>
|
|
</div>
|
|
<div className="card p-2.5 text-center">
|
|
<div className="text-lg font-bold text-red-600 dark:text-red-400">
|
|
{history.filter((h: { decision: string }) => h.decision === 'SELL').length}
|
|
</div>
|
|
<div className="text-[10px] text-gray-500 dark:text-gray-400">Sell</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Analysis History */}
|
|
<section className="card">
|
|
<div className="p-3 border-b border-gray-100 dark:border-slate-700 bg-gray-50/50 dark:bg-slate-700/50">
|
|
<h2 className="font-semibold text-gray-900 dark:text-gray-100 text-sm">Recommendation History</h2>
|
|
</div>
|
|
|
|
{history.length > 0 ? (
|
|
<div className="divide-y divide-gray-50 dark:divide-slate-700 max-h-[250px] overflow-y-auto">
|
|
{history.map((entry, idx) => (
|
|
<div key={idx} className="px-3 py-2 flex items-center justify-between">
|
|
<div className="text-xs text-gray-500 dark:text-gray-400">
|
|
{new Date(entry.date).toLocaleDateString('en-IN', {
|
|
weekday: 'short',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
})}
|
|
</div>
|
|
<DecisionBadge decision={entry.decision} size="small" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="p-6 text-center">
|
|
<Calendar className="w-8 h-8 text-gray-300 dark:text-gray-600 mx-auto mb-2" />
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">No history yet</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</>
|
|
)}
|
|
|
|
{activeTab === 'pipeline' && (
|
|
<div className="space-y-4">
|
|
{/* Pipeline Overview */}
|
|
<section className="card p-4">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Layers className="w-5 h-5 text-nifty-600 dark:text-nifty-400" />
|
|
<h2 className="font-semibold text-gray-900 dark:text-gray-100">Analysis Pipeline</h2>
|
|
</div>
|
|
<PipelineOverview
|
|
steps={pipelineData?.pipeline_steps || []}
|
|
onStepClick={(step) => console.log('Step clicked:', step)}
|
|
/>
|
|
</section>
|
|
|
|
{/* Agent Reports Grid */}
|
|
<section className="card p-4">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<FileText className="w-5 h-5 text-nifty-600 dark:text-nifty-400" />
|
|
<h2 className="font-semibold text-gray-900 dark:text-gray-100">Agent Reports</h2>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{(['market', 'news', 'social_media', 'fundamentals'] as AgentType[]).map(agentType => (
|
|
<AgentReportCard
|
|
key={agentType}
|
|
agentType={agentType}
|
|
report={pipelineData?.agent_reports?.[agentType]}
|
|
isLoading={isLoadingPipeline}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'debates' && (
|
|
<div className="space-y-4">
|
|
{/* Investment Debate */}
|
|
<DebateViewer
|
|
debate={pipelineData?.debates?.investment}
|
|
isLoading={isLoadingPipeline}
|
|
/>
|
|
|
|
{/* Risk Debate */}
|
|
<RiskDebateViewer
|
|
debate={pipelineData?.debates?.risk}
|
|
isLoading={isLoadingPipeline}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'data' && (
|
|
<div className="space-y-4">
|
|
<DataSourcesPanel
|
|
dataSources={pipelineData?.data_sources || []}
|
|
isLoading={isLoadingPipeline}
|
|
/>
|
|
|
|
{/* No data message */}
|
|
{!isLoadingPipeline && (!pipelineData?.data_sources || pipelineData.data_sources.length === 0) && (
|
|
<div className="card p-8 text-center">
|
|
<Database className="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
|
|
<h3 className="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
|
No Data Source Logs Available
|
|
</h3>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
|
Data source logs will appear here when the analysis pipeline runs.
|
|
This includes information about market data, news, and fundamental data fetched.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Top Pick / Avoid Status - Compact (visible on all tabs) */}
|
|
{latestRecommendation && (
|
|
<>
|
|
{latestRecommendation.top_picks.some(p => p.symbol === symbol) && (
|
|
<section className="card p-3 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
|
|
<div className="flex items-center gap-3">
|
|
<TrendingUp className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0" />
|
|
<div>
|
|
<span className="font-semibold text-green-800 dark:text-green-300 text-sm">Top Pick: </span>
|
|
<span className="text-sm text-green-700 dark:text-green-400">
|
|
{latestRecommendation.top_picks.find(p => p.symbol === symbol)?.reason}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{latestRecommendation.stocks_to_avoid.some(s => s.symbol === symbol) && (
|
|
<section className="card p-3 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800">
|
|
<div className="flex items-center gap-3">
|
|
<AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0" />
|
|
<div>
|
|
<span className="font-semibold text-red-800 dark:text-red-300 text-sm">Avoid: </span>
|
|
<span className="text-sm text-red-700 dark:text-red-400">
|
|
{latestRecommendation.stocks_to_avoid.find(s => s.symbol === symbol)?.reason}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Compact Disclaimer */}
|
|
<p className="text-[10px] text-gray-400 dark:text-gray-500 text-center">
|
|
AI-generated recommendation for educational purposes only. Not financial advice.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|