- {filteredStocks.map((stock: StockAnalysis) => {
- const backtest = getBacktestResult(stock.symbol);
- const trend = stock.decision === 'BUY' ? 'up' : stock.decision === 'SELL' ? 'down' : 'flat';
- return (
-
- {/* Background Chart */}
- {backtest && (
-
-
+ {filteredItems.map((item) => {
+ // COMPLETED with analysis data: clickable link
+ if (item.liveState === 'completed' && item.analysis) {
+ const backtest = isUsingMockData ? getStaticBacktestResult(item.symbol) : null;
+ const trend = item.analysis.decision === 'BUY' ? 'up' : item.analysis.decision === 'SELL' ? 'down' : 'flat';
+ return (
+
+ {backtest && (
+
+
+
+ )}
+
+
+ {item.symbol}
+
+
+
{item.company_name}
- )}
+
+ );
+ }
- {/* Content */}
-
+ // COMPLETED but data not re-fetched yet (brief transition)
+ if (item.liveState === 'completed' && !item.analysis) {
+ return (
+
- {stock.symbol}
-
+ {item.symbol}
+
+ Done
+
-
{stock.company_name}
+
{item.company_name}
-
+ );
+ }
+
+ // ANALYZING: shimmer effect with step progress
+ if (item.liveState === 'analyzing') {
+ const progress = analysisProgress?.stock_progress?.[item.symbol];
+ const stepsDone = progress?.done ?? 0;
+ const stepsTotal = progress?.total ?? 12;
+ return (
+
+
+
+
+ {item.symbol}
+
+
+ Analyzing
+
+
+
{item.company_name}
+ {/* Step progress bar */}
+
+
+
0 ? (stepsDone / stepsTotal) * 100 : 0}%` }}
+ />
+
+
+ {stepsDone}/{stepsTotal}
+
+
+
+
+ );
+ }
+
+ // FAILED: error state
+ if (item.liveState === 'failed') {
+ return (
+
+
+
{item.symbol}
+
+
+ Failed
+
+
+
{item.company_name}
+
+ );
+ }
+
+ // PENDING: grayed out, waiting
+ return (
+
+
+ {item.symbol}
+
+ Queued
+
+
+
{item.company_name}
+
);
})}
- {filteredStocks.length === 0 && (
+ {filteredItems.length === 0 && (
No stocks match the selected filter.
@@ -363,6 +751,13 @@ export default function Dashboard() {
+
+ {/* Terminal Modal */}
+
setIsTerminalOpen(false)}
+ isAnalyzing={isAnalyzing}
+ />
);
}
diff --git a/frontend/src/pages/History.tsx b/frontend/src/pages/History.tsx
index f4e178ab..283e9efb 100644
--- a/frontend/src/pages/History.tsx
+++ b/frontend/src/pages/History.tsx
@@ -1,19 +1,78 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect, useCallback } from 'react';
import { Link } from 'react-router-dom';
-import { Calendar, TrendingUp, TrendingDown, Minus, ChevronRight, BarChart3, Target, HelpCircle, Activity, Calculator, LineChart, PieChart, Shield } from 'lucide-react';
-import { sampleRecommendations, getBacktestResult, calculateAccuracyMetrics, getDateStats, getOverallStats, getReturnBreakdown } from '../data/recommendations';
+import { Calendar, TrendingUp, TrendingDown, Minus, ChevronRight, BarChart3, Target, HelpCircle, Activity, Calculator, LineChart, PieChart, Shield, Filter, Loader2, AlertCircle } from 'lucide-react';
+import { sampleRecommendations, getBacktestResult as getStaticBacktestResult, calculateAccuracyMetrics as calculateStaticAccuracyMetrics, getDateStats as getStaticDateStats, getOverallStats as getStaticOverallStats, getReturnBreakdown as getStaticReturnBreakdown } from '../data/recommendations';
import { DecisionBadge } from '../components/StockCard';
import Sparkline from '../components/Sparkline';
import AccuracyBadge from '../components/AccuracyBadge';
import AccuracyExplainModal from '../components/AccuracyExplainModal';
import ReturnExplainModal from '../components/ReturnExplainModal';
-import OverallReturnModal from '../components/OverallReturnModal';
-import AccuracyTrendChart from '../components/AccuracyTrendChart';
+import OverallReturnModal, { type OverallReturnBreakdown } from '../components/OverallReturnModal';
+import AccuracyTrendChart, { type AccuracyTrendPoint } from '../components/AccuracyTrendChart';
import ReturnDistributionChart from '../components/ReturnDistributionChart';
import RiskMetricsCard from '../components/RiskMetricsCard';
-import PortfolioSimulator from '../components/PortfolioSimulator';
+import PortfolioSimulator, { type InvestmentMode } from '../components/PortfolioSimulator';
import IndexComparisonChart from '../components/IndexComparisonChart';
-import type { StockAnalysis } from '../types';
+import InfoModal from '../components/InfoModal';
+import { api } from '../services/api';
+import type { StockAnalysis, DailyRecommendation, RiskMetrics, ReturnBucket, CumulativeReturnPoint } from '../types';
+
+// Type for real backtest data
+interface RealBacktestData {
+ symbol: string;
+ decision: string;
+ return1d: number | null;
+ return1w: number | null;
+ predictionCorrect: boolean | null;
+ priceHistory?: Array<{ date: string; price: number }>;
+}
+
+// Helper for consistent positive/negative color classes
+function getValueColorClass(value: number): string {
+ return value >= 0
+ ? 'text-green-600 dark:text-green-400'
+ : 'text-red-600 dark:text-red-400';
+}
+
+// Investment Mode Toggle Component for reuse
+function InvestmentModeToggle({
+ mode,
+ onChange,
+ size = 'sm'
+}: {
+ mode: InvestmentMode;
+ onChange: (mode: InvestmentMode) => void;
+ size?: 'sm' | 'md';
+}) {
+ const sizeClasses = size === 'sm'
+ ? 'px-2 py-1 text-[10px]'
+ : 'px-3 py-1.5 text-xs';
+
+ return (
+
+
+
+
+ );
+}
export default function History() {
const [selectedDate, setSelectedDate] = useState
(null);
@@ -22,25 +81,759 @@ export default function History() {
const [returnModalDate, setReturnModalDate] = useState(null);
const [showOverallModal, setShowOverallModal] = useState(false);
- const dates = sampleRecommendations.map(r => r.date);
- const accuracyMetrics = calculateAccuracyMetrics();
- const overallStats = useMemo(() => getOverallStats(), []);
+ // Investment mode for Select Date section
+ const [dateFilterMode, setDateFilterMode] = useState('all50');
+ // Investment mode for Performance Summary
+ const [summaryMode, setSummaryMode] = useState('all50');
+ // Investment mode for Index Comparison Chart
+ const [indexChartMode, setIndexChartMode] = useState('all50');
+ // Investment mode for Return Distribution Chart
+ const [distributionMode, setDistributionMode] = useState('all50');
- // Pre-calculate date stats for all dates
+ // Performance Summary modal state - single state instead of 4 booleans
+ type SummaryModalType = 'daysTracked' | 'avgReturn' | 'buySignals' | 'sellSignals' | null;
+ const [activeSummaryModal, setActiveSummaryModal] = useState(null);
+
+ // State for real backtest data
+ const [realBacktestData, setRealBacktestData] = useState>({});
+ const [isLoadingBacktest, setIsLoadingBacktest] = useState(false);
+
+ // State for real recommendations from API
+ const [recommendations, setRecommendations] = useState(sampleRecommendations);
+ const [isLoadingRecommendations, setIsLoadingRecommendations] = useState(true);
+ const [isUsingMockData, setIsUsingMockData] = useState(false);
+
+ // State for accuracy trend data (calculated from real backtest API)
+ const [accuracyTrendData, setAccuracyTrendData] = useState([]);
+ const [isLoadingAccuracyTrend, setIsLoadingAccuracyTrend] = useState(false);
+
+ // State for risk metrics (calculated from real backtest API)
+ const [realRiskMetrics, setRealRiskMetrics] = useState(undefined);
+ const [isLoadingRiskMetrics, setIsLoadingRiskMetrics] = useState(false);
+
+ // State for return distribution (calculated from real backtest API)
+ const [realReturnDistribution, setRealReturnDistribution] = useState(undefined);
+ const [isLoadingReturnDistribution, setIsLoadingReturnDistribution] = useState(false);
+
+ // State for cumulative returns / index comparison (calculated from real backtest API)
+ const [realCumulativeReturns, setRealCumulativeReturns] = useState(undefined);
+ const [isLoadingCumulativeReturns, setIsLoadingCumulativeReturns] = useState(false);
+
+ // State for overall return breakdown (calculated from real backtest API)
+ const [realOverallBreakdown, setRealOverallBreakdown] = useState(undefined);
+
+ // State for Top Picks mode data
+ const [topPicksCumulativeReturns, setTopPicksCumulativeReturns] = useState(undefined);
+ const [topPicksReturnDistribution, setTopPicksReturnDistribution] = useState(undefined);
+
+ // State for real Nifty50 index prices
+ const [nifty50Prices, setNifty50Prices] = useState>({});
+
+ // State for per-date weighted returns (for dateStatsMap)
+ const [realDateReturns, setRealDateReturns] = useState>({});
+
+ // State for all backtest data by date and symbol (for PortfolioSimulator)
+ const [allBacktestData, setAllBacktestData] = useState>>({});
+
+ // Fetch real recommendations from API
+ useEffect(() => {
+ const fetchRecommendations = async () => {
+ setIsLoadingRecommendations(true);
+ try {
+ const data = await api.getAllRecommendations();
+ if (data && data.recommendations && data.recommendations.length > 0) {
+ setRecommendations(data.recommendations);
+ setIsUsingMockData(false);
+ } else {
+ // API returned empty data, use mock
+ setRecommendations(sampleRecommendations);
+ setIsUsingMockData(true);
+ }
+ } catch (error) {
+ console.error('Failed to fetch recommendations from API:', error);
+ // Fall back to mock data
+ setRecommendations(sampleRecommendations);
+ setIsUsingMockData(true);
+ } finally {
+ setIsLoadingRecommendations(false);
+ }
+ };
+ fetchRecommendations();
+ }, []);
+
+ // Batch-fetch all backtest results per date (used by both accuracy trend and chart data)
+ const [batchBacktestByDate, setBatchBacktestByDate] = useState<
+ Record>
+ >({});
+ const [isBatchLoading, setIsBatchLoading] = useState(false);
+
+ useEffect(() => {
+ const fetchBatchBacktest = async () => {
+ if (recommendations.length === 0) return;
+ setIsBatchLoading(true);
+
+ const sortedDates = [...recommendations]
+ .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
+ .map(r => r.date);
+
+ const batchData: typeof batchBacktestByDate = {};
+
+ // Trigger batch calculation for all dates in parallel, then fetch results
+ await Promise.all(sortedDates.map(async (date) => {
+ try {
+ // First try to get existing results
+ let response = await api.getBacktestResultsForDate(date);
+
+ // If no results, trigger calculation and wait
+ if (!response.results || response.results.length === 0) {
+ try {
+ await api.calculateBacktest(date);
+ // Wait a bit for calculation, then re-fetch
+ await new Promise(r => setTimeout(r, 5000));
+ response = await api.getBacktestResultsForDate(date);
+ } catch {
+ // Calculation may already be running
+ }
+ }
+
+ if (response.results && response.results.length > 0) {
+ batchData[date] = {};
+ for (const r of response.results) {
+ batchData[date][r.symbol] = {
+ return_1d: r.return_1d,
+ return_1w: r.return_1w,
+ return_1m: r.return_1m,
+ prediction_correct: r.prediction_correct,
+ decision: r.decision,
+ };
+ }
+ }
+ } catch (err) {
+ console.warn(`Failed to fetch batch backtest for ${date}:`, err);
+ }
+ }));
+
+ setBatchBacktestByDate(batchData);
+ setIsBatchLoading(false);
+ };
+
+ if (!isUsingMockData && !isLoadingRecommendations) {
+ fetchBatchBacktest();
+ }
+ }, [recommendations, isUsingMockData, isLoadingRecommendations]);
+
+ // Compute accuracy trend from batch backtest data
+ useEffect(() => {
+ if (isBatchLoading || Object.keys(batchBacktestByDate).length === 0) return;
+
+ setIsLoadingAccuracyTrend(true);
+ const trendData: AccuracyTrendPoint[] = [];
+
+ const sortedDates = [...recommendations]
+ .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
+ .map(r => r.date);
+
+ for (const date of sortedDates) {
+ const rec = recommendations.find(r => r.date === date);
+ const dateBacktest = batchBacktestByDate[date];
+ if (!rec || !dateBacktest) continue;
+
+ let totalBuy = 0, correctBuy = 0;
+ let totalSell = 0, correctSell = 0;
+ let totalHold = 0, correctHold = 0;
+
+ for (const symbol of Object.keys(rec.analysis)) {
+ const stockAnalysis = rec.analysis[symbol];
+ const bt = dateBacktest[symbol];
+ if (!stockAnalysis?.decision || !bt || bt.return_1d === undefined || bt.return_1d === null) continue;
+
+ const predictionCorrect = (stockAnalysis.decision === 'BUY' || stockAnalysis.decision === 'HOLD')
+ ? bt.return_1d > 0
+ : bt.return_1d < 0;
+
+ if (stockAnalysis.decision === 'BUY') { totalBuy++; if (predictionCorrect) correctBuy++; }
+ else if (stockAnalysis.decision === 'SELL') { totalSell++; if (predictionCorrect) correctSell++; }
+ else { totalHold++; if (predictionCorrect) correctHold++; }
+ }
+
+ const totalPredictions = totalBuy + totalSell + totalHold;
+ const totalCorrect = correctBuy + correctSell + correctHold;
+
+ trendData.push({
+ date,
+ overall: totalPredictions > 0 ? Math.round((totalCorrect / totalPredictions) * 100) : 0,
+ buy: totalBuy > 0 ? Math.round((correctBuy / totalBuy) * 100) : 0,
+ sell: totalSell > 0 ? Math.round((correctSell / totalSell) * 100) : 0,
+ hold: totalHold > 0 ? Math.round((correctHold / totalHold) * 100) : 0,
+ });
+ }
+
+ setAccuracyTrendData(trendData);
+ setIsLoadingAccuracyTrend(false);
+ }, [batchBacktestByDate, isBatchLoading, recommendations]);
+
+ // Compute all chart data from batch backtest results (no individual API calls)
+ useEffect(() => {
+ const computeAllChartData = async () => {
+ if (recommendations.length === 0 || isBatchLoading || Object.keys(batchBacktestByDate).length === 0) return;
+
+ setIsLoadingRiskMetrics(true);
+ setIsLoadingReturnDistribution(true);
+ setIsLoadingCumulativeReturns(true);
+
+ // Sort dates chronologically
+ const sortedDates = [...recommendations]
+ .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
+ .map(r => r.date);
+
+ // Data collection for risk metrics calculation
+ const dailyReturns: number[] = [];
+ let wins = 0;
+ let losses = 0;
+ let totalWinReturn = 0;
+ let totalLossReturn = 0;
+ let totalCorrect = 0;
+ let totalPredictions = 0;
+
+ // Data for return distribution (latest date only)
+ const returnBuckets: ReturnBucket[] = [
+ { range: '< -3%', min: -Infinity, max: -3, count: 0, stocks: [] },
+ { range: '-3% to -2%', min: -3, max: -2, count: 0, stocks: [] },
+ { range: '-2% to -1%', min: -2, max: -1, count: 0, stocks: [] },
+ { range: '-1% to 0%', min: -1, max: 0, count: 0, stocks: [] },
+ { range: '0% to 1%', min: 0, max: 1, count: 0, stocks: [] },
+ { range: '1% to 2%', min: 1, max: 2, count: 0, stocks: [] },
+ { range: '2% to 3%', min: 2, max: 3, count: 0, stocks: [] },
+ { range: '> 3%', min: 3, max: Infinity, count: 0, stocks: [] },
+ ];
+
+ // Data for cumulative returns
+ const cumulativeData: CumulativeReturnPoint[] = [];
+ let aiMultiplier = 1;
+ let indexMultiplier = 1;
+
+ // Fetch real Nifty50 index data
+ let niftyPrices: Record = {};
+ try {
+ const niftyData = await api.getNifty50History();
+ if (niftyData.prices && Object.keys(niftyData.prices).length > 0) {
+ niftyPrices = niftyData.prices;
+ setNifty50Prices(niftyPrices);
+ }
+ } catch (err) {
+ console.warn('Failed to fetch Nifty50 index data');
+ }
+
+ // Precompute Nifty daily returns from prices
+ const sortedNiftyDates = Object.keys(niftyPrices).sort();
+ const niftyDailyReturns: Record = {};
+ for (let i = 1; i < sortedNiftyDates.length; i++) {
+ const prevPrice = niftyPrices[sortedNiftyDates[i - 1]];
+ const currPrice = niftyPrices[sortedNiftyDates[i]];
+ niftyDailyReturns[sortedNiftyDates[i]] = ((currPrice - prevPrice) / prevPrice) * 100;
+ }
+
+ // Helper to get Nifty return for a date (exact or closest match)
+ const getNiftyReturn = (date: string): number => {
+ if (niftyDailyReturns[date] !== undefined) return niftyDailyReturns[date];
+ const closestDate = sortedNiftyDates.find(d => d >= date) || sortedNiftyDates[sortedNiftyDates.length - 1];
+ return (closestDate && niftyDailyReturns[closestDate] !== undefined) ? niftyDailyReturns[closestDate] : 0;
+ };
+
+ // Track per-date returns for dateStatsMap
+ const dateReturnsMap: Record = {};
+ // Track all backtest results for PortfolioSimulator
+ const allBacktest: Record> = {};
+ // Track which date last had valid return data (for return distribution)
+ let latestDateWithData: string | null = null;
+
+ // Process each date using batch data (no individual API calls)
+ for (const date of sortedDates) {
+ const rec = recommendations.find(r => r.date === date);
+ const dateBacktest = batchBacktestByDate[date];
+ if (!rec || !dateBacktest) continue;
+
+ let dateCorrectCount = 0;
+ let dateTotalCount = 0;
+ let dateCorrectReturn = 0;
+ let dateIncorrectReturn = 0;
+
+ for (const symbol of Object.keys(rec.analysis)) {
+ const stockAnalysis = rec.analysis[symbol];
+ const bt = dateBacktest[symbol];
+ if (!stockAnalysis?.decision || !bt || bt.return_1d === undefined || bt.return_1d === null) continue;
+
+ const return1d = bt.return_1d;
+
+ // Store for PortfolioSimulator
+ if (!allBacktest[date]) allBacktest[date] = {};
+ allBacktest[date][symbol] = return1d;
+
+ const predictionCorrect = (stockAnalysis.decision === 'BUY' || stockAnalysis.decision === 'HOLD')
+ ? return1d > 0
+ : return1d < 0;
+
+ totalPredictions++;
+ if (predictionCorrect) {
+ totalCorrect++;
+ dateCorrectCount++;
+ if (stockAnalysis.decision === 'BUY' || stockAnalysis.decision === 'HOLD') {
+ dateCorrectReturn += return1d;
+ } else {
+ dateCorrectReturn += Math.abs(return1d);
+ }
+ } else {
+ if (stockAnalysis.decision === 'BUY' || stockAnalysis.decision === 'HOLD') {
+ dateIncorrectReturn += return1d;
+ } else {
+ dateIncorrectReturn += -Math.abs(return1d);
+ }
+ }
+ dateTotalCount++;
+ }
+
+ if (dateTotalCount > 0) latestDateWithData = date;
+
+ // Calculate weighted daily return for this date
+ if (dateTotalCount > 0) {
+ const correctAvg = dateCorrectCount > 0 ? dateCorrectReturn / dateCorrectCount : 0;
+ const incorrectAvg = (dateTotalCount - dateCorrectCount) > 0
+ ? dateIncorrectReturn / (dateTotalCount - dateCorrectCount) : 0;
+ const weightedReturn = (correctAvg * (dateCorrectCount / dateTotalCount))
+ + (incorrectAvg * ((dateTotalCount - dateCorrectCount) / dateTotalCount));
+
+ dailyReturns.push(weightedReturn);
+ dateReturnsMap[date] = Math.round(weightedReturn * 10) / 10;
+
+ if (weightedReturn > 0) { wins++; totalWinReturn += weightedReturn; }
+ else if (weightedReturn < 0) { losses++; totalLossReturn += Math.abs(weightedReturn); }
+
+ aiMultiplier *= (1 + weightedReturn / 100);
+ const indexDailyReturn = getNiftyReturn(date);
+ indexMultiplier *= (1 + indexDailyReturn / 100);
+
+ cumulativeData.push({
+ date,
+ value: Math.round(aiMultiplier * 10000) / 100,
+ aiReturn: Math.round((aiMultiplier - 1) * 1000) / 10,
+ indexReturn: Math.round((indexMultiplier - 1) * 1000) / 10,
+ });
+ }
+ }
+
+ // Populate return distribution using the latest date with actual data
+ if (latestDateWithData) {
+ const rec = recommendations.find(r => r.date === latestDateWithData);
+ const dateBacktest = batchBacktestByDate[latestDateWithData];
+ if (rec && dateBacktest) {
+ for (const symbol of Object.keys(rec.analysis)) {
+ const bt = dateBacktest[symbol];
+ if (!bt || bt.return_1d === undefined || bt.return_1d === null) continue;
+ for (const bucket of returnBuckets) {
+ if (bt.return_1d >= bucket.min && bt.return_1d < bucket.max) {
+ bucket.count++;
+ bucket.stocks.push(symbol);
+ break;
+ }
+ }
+ }
+ }
+ }
+
+ // Calculate risk metrics
+ if (dailyReturns.length > 0) {
+ const mean = dailyReturns.reduce((a, b) => a + b, 0) / dailyReturns.length;
+ const variance = dailyReturns.reduce((sum, r) => sum + Math.pow(r - mean, 2), 0) / dailyReturns.length;
+ const volatility = Math.sqrt(variance);
+ const riskFreeRate = 0.02;
+ const sharpeRatio = volatility > 0 ? (mean - riskFreeRate) / volatility : 0;
+
+ let peak = 100, maxDrawdown = 0, maxDrawdownTrough = 100, maxDrawdownPeak = 100, currentValue = 100;
+ for (const ret of dailyReturns) {
+ currentValue = currentValue * (1 + ret / 100);
+ if (currentValue > peak) peak = currentValue;
+ const drawdown = ((peak - currentValue) / peak) * 100;
+ if (drawdown > maxDrawdown) { maxDrawdown = drawdown; maxDrawdownPeak = peak; maxDrawdownTrough = currentValue; }
+ }
+
+ const avgWin = wins > 0 ? totalWinReturn / wins : 0;
+ const avgLoss = losses > 0 ? totalLossReturn / losses : 1;
+
+ setRealRiskMetrics({
+ sharpeRatio: Math.round(sharpeRatio * 100) / 100,
+ maxDrawdown: Math.round(maxDrawdown * 10) / 10,
+ winLossRatio: Math.round((avgLoss > 0 ? avgWin / avgLoss : avgWin) * 100) / 100,
+ winRate: Math.round(totalPredictions > 0 ? (totalCorrect / totalPredictions) * 100 : 0),
+ volatility: Math.round(volatility * 100) / 100,
+ totalTrades: totalPredictions,
+ meanReturn: Math.round(mean * 100) / 100,
+ riskFreeRate,
+ winningTrades: wins,
+ losingTrades: losses,
+ avgWinReturn: Math.round(avgWin * 100) / 100,
+ avgLossReturn: Math.round(avgLoss * 100) / 100,
+ peakValue: Math.round(maxDrawdownPeak * 100) / 100,
+ troughValue: Math.round(maxDrawdownTrough * 100) / 100,
+ });
+ }
+
+ setRealReturnDistribution(returnBuckets);
+ setRealCumulativeReturns(cumulativeData);
+
+ // Calculate overall return breakdown
+ if (cumulativeData.length > 0) {
+ const breakdownDailyReturns: { date: string; return: number; multiplier: number; cumulative: number }[] = [];
+ let cumulativeMultiplier = 1;
+
+ for (let i = 0; i < cumulativeData.length; i++) {
+ const point = cumulativeData[i];
+ const dailyReturn = i === 0
+ ? point.aiReturn
+ : Math.round((((1 + point.aiReturn / 100) / (1 + cumulativeData[i - 1].aiReturn / 100)) - 1) * 1000) / 10;
+ const dailyMultiplier = 1 + dailyReturn / 100;
+ cumulativeMultiplier *= dailyMultiplier;
+ breakdownDailyReturns.push({
+ date: point.date, return: dailyReturn,
+ multiplier: Math.round(dailyMultiplier * 10000) / 10000,
+ cumulative: Math.round((cumulativeMultiplier - 1) * 1000) / 10,
+ });
+ }
+
+ const finalMultiplier = 1 + cumulativeData[cumulativeData.length - 1].aiReturn / 100;
+ setRealOverallBreakdown({
+ dailyReturns: breakdownDailyReturns,
+ finalMultiplier: Math.round(finalMultiplier * 10000) / 10000,
+ finalReturn: Math.round((finalMultiplier - 1) * 1000) / 10,
+ formula: '',
+ });
+ }
+
+ // Calculate Top Picks data
+ const topPicksCumulative: CumulativeReturnPoint[] = [];
+ const topPicksDistribution: ReturnBucket[] = [
+ { range: '< -3%', min: -Infinity, max: -3, count: 0, stocks: [] },
+ { range: '-3% to -2%', min: -3, max: -2, count: 0, stocks: [] },
+ { range: '-2% to -1%', min: -2, max: -1, count: 0, stocks: [] },
+ { range: '-1% to 0%', min: -1, max: 0, count: 0, stocks: [] },
+ { range: '0% to 1%', min: 0, max: 1, count: 0, stocks: [] },
+ { range: '1% to 2%', min: 1, max: 2, count: 0, stocks: [] },
+ { range: '2% to 3%', min: 2, max: 3, count: 0, stocks: [] },
+ { range: '> 3%', min: 3, max: Infinity, count: 0, stocks: [] },
+ ];
+ let topPicksMultiplier = 1;
+ let topPicksIndexMultiplier = 1;
+
+ let latestTopPicksDateWithData: string | null = null;
+
+ for (const date of sortedDates) {
+ const rec = recommendations.find(r => r.date === date);
+ const dateBacktest = batchBacktestByDate[date];
+ if (!rec || !rec.top_picks || !dateBacktest) continue;
+
+ let dateReturn = 0;
+ let dateCount = 0;
+
+ for (const pick of rec.top_picks) {
+ const bt = dateBacktest[pick.symbol];
+ if (bt && bt.return_1d !== undefined && bt.return_1d !== null) {
+ dateReturn += bt.return_1d;
+ dateCount++;
+ }
+ }
+
+ if (dateCount > 0) latestTopPicksDateWithData = date;
+
+ if (dateCount > 0) {
+ const avgReturn = dateReturn / dateCount;
+ topPicksMultiplier *= (1 + avgReturn / 100);
+ const indexDailyReturn = getNiftyReturn(date);
+ topPicksIndexMultiplier *= (1 + indexDailyReturn / 100);
+ topPicksCumulative.push({
+ date,
+ value: Math.round(topPicksMultiplier * 10000) / 100,
+ aiReturn: Math.round((topPicksMultiplier - 1) * 1000) / 10,
+ indexReturn: Math.round((topPicksIndexMultiplier - 1) * 1000) / 10,
+ });
+ }
+ }
+
+ // Populate top picks distribution from latest date with data
+ if (latestTopPicksDateWithData) {
+ const rec = recommendations.find(r => r.date === latestTopPicksDateWithData);
+ const dateBacktest = batchBacktestByDate[latestTopPicksDateWithData];
+ if (rec && dateBacktest) {
+ for (const pick of rec.top_picks) {
+ const bt = dateBacktest[pick.symbol];
+ if (bt && bt.return_1d !== undefined && bt.return_1d !== null) {
+ for (const bucket of topPicksDistribution) {
+ if (bt.return_1d >= bucket.min && bt.return_1d < bucket.max) {
+ bucket.count++;
+ bucket.stocks.push(pick.symbol);
+ break;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ setTopPicksCumulativeReturns(topPicksCumulative);
+ setTopPicksReturnDistribution(topPicksDistribution);
+ setRealDateReturns(dateReturnsMap);
+ setAllBacktestData(allBacktest);
+
+ setIsLoadingRiskMetrics(false);
+ setIsLoadingReturnDistribution(false);
+ setIsLoadingCumulativeReturns(false);
+ };
+
+ if (!isUsingMockData && !isLoadingRecommendations) {
+ computeAllChartData();
+ }
+ }, [batchBacktestByDate, isBatchLoading, recommendations, isUsingMockData, isLoadingRecommendations]);
+
+ const dates = recommendations.map(r => r.date);
+
+ // API-first accuracy metrics with mock fallback
+ const [apiAccuracyMetrics, setApiAccuracyMetrics] = useState<{
+ overall_accuracy: number;
+ total_predictions: number;
+ correct_predictions: number;
+ by_decision: Record;
+ } | null>(null);
+
+ useEffect(() => {
+ if (isUsingMockData) return;
+ const fetchAccuracy = async () => {
+ try {
+ const metrics = await api.getAccuracyMetrics();
+ if (metrics && metrics.total_predictions > 0) {
+ setApiAccuracyMetrics(metrics);
+ }
+ } catch {
+ // Will use mock fallback
+ }
+ };
+ fetchAccuracy();
+ }, [isUsingMockData]);
+
+ // Convert API or static accuracy to consistent format
+ const accuracyMetrics = useMemo(() => {
+ if (apiAccuracyMetrics && apiAccuracyMetrics.total_predictions > 0) {
+ return {
+ total_predictions: apiAccuracyMetrics.total_predictions,
+ correct_predictions: apiAccuracyMetrics.correct_predictions,
+ success_rate: apiAccuracyMetrics.overall_accuracy / 100,
+ buy_accuracy: (apiAccuracyMetrics.by_decision?.BUY?.accuracy || 0) / 100,
+ sell_accuracy: (apiAccuracyMetrics.by_decision?.SELL?.accuracy || 0) / 100,
+ hold_accuracy: (apiAccuracyMetrics.by_decision?.HOLD?.accuracy || 0) / 100,
+ };
+ }
+ // Only fall back to mock when actually using mock data
+ if (isUsingMockData) {
+ return calculateStaticAccuracyMetrics();
+ }
+ // Real data mode but no backtest predictions available yet
+ return {
+ total_predictions: 0,
+ correct_predictions: 0,
+ success_rate: 0,
+ buy_accuracy: 0,
+ sell_accuracy: 0,
+ hold_accuracy: 0,
+ };
+ }, [apiAccuracyMetrics, isUsingMockData]);
+
+ // Compute overall stats from real recommendations data (or fallback to static)
+ const overallStats = useMemo(() => {
+ if (!isUsingMockData && recommendations.length > 0) {
+ // Calculate from real cumulative returns data if available
+ if (realCumulativeReturns && realCumulativeReturns.length > 0) {
+ const lastPoint = realCumulativeReturns[realCumulativeReturns.length - 1];
+ return {
+ totalDays: recommendations.length,
+ totalPredictions: accuracyMetrics.total_predictions,
+ avgDailyReturn: Math.round((lastPoint.aiReturn / realCumulativeReturns.length) * 10) / 10,
+ avgMonthlyReturn: 0,
+ overallAccuracy: Math.round(accuracyMetrics.success_rate * 100),
+ bestDay: null,
+ worstDay: null,
+ };
+ }
+ // Real data mode but no backtest data available - show zeros, not mock
+ return {
+ totalDays: recommendations.length,
+ totalPredictions: 0,
+ avgDailyReturn: 0,
+ avgMonthlyReturn: 0,
+ overallAccuracy: 0,
+ bestDay: null,
+ worstDay: null,
+ };
+ }
+ return getStaticOverallStats();
+ }, [isUsingMockData, recommendations, realCumulativeReturns, accuracyMetrics]);
+
+ // Fetch real backtest data for selected date
+ const fetchBacktestForDate = useCallback(async (date: string) => {
+ const rec = recommendations.find(r => r.date === date);
+ if (!rec) return;
+
+ setIsLoadingBacktest(true);
+ const newData: Record = {};
+
+ const stocks = Object.values(rec.analysis);
+ for (const stock of stocks) {
+ if (!stock.symbol || !stock.decision) continue;
+
+ try {
+ const backtest = await api.getBacktestResult(date, stock.symbol);
+
+ if (backtest.available) {
+ // Calculate prediction correctness based on 1-day return
+ // BUY/HOLD correct if return > 0, SELL correct if return < 0
+ let predictionCorrect: boolean | null = null;
+ if (backtest.actual_return_1d !== undefined && backtest.actual_return_1d !== null) {
+ if (stock.decision === 'BUY' || stock.decision === 'HOLD') {
+ predictionCorrect = backtest.actual_return_1d > 0;
+ } else if (stock.decision === 'SELL') {
+ predictionCorrect = backtest.actual_return_1d < 0;
+ }
+ }
+
+ newData[stock.symbol] = {
+ symbol: stock.symbol,
+ decision: stock.decision,
+ return1d: backtest.actual_return_1d ?? null,
+ return1w: backtest.actual_return_1w ?? null,
+ predictionCorrect,
+ priceHistory: backtest.price_history,
+ };
+ }
+ } catch (err) {
+ console.error(`Failed to fetch backtest for ${stock.symbol}:`, err);
+ }
+ }
+
+ setRealBacktestData(prev => ({ ...prev, ...newData }));
+ setIsLoadingBacktest(false);
+ }, [recommendations]);
+
+ // Fetch backtest data when date is selected
+ useEffect(() => {
+ if (selectedDate) {
+ fetchBacktestForDate(selectedDate);
+ }
+ }, [selectedDate, fetchBacktestForDate]);
+
+ // Calculate stats based on mode
+ const filteredStats = useMemo(() => {
+ if (summaryMode === 'all50') {
+ // Consolidate three reduce calls into one
+ const signalTotals = recommendations.reduce(
+ (acc, r) => ({
+ buy: acc.buy + r.summary.buy,
+ sell: acc.sell + r.summary.sell,
+ hold: acc.hold + r.summary.hold,
+ }),
+ { buy: 0, sell: 0, hold: 0 }
+ );
+ return {
+ totalDays: dates.length,
+ avgDailyReturn: overallStats.avgDailyReturn,
+ buySignals: signalTotals.buy,
+ sellSignals: signalTotals.sell,
+ holdSignals: signalTotals.hold,
+ };
+ }
+
+ // Top Picks mode - calculate stats from real data or static fallback
+ const topPicksData = recommendations.flatMap(rec =>
+ rec.top_picks.map(pick => {
+ // Try real backtest data first
+ const realData = realBacktestData[pick.symbol];
+ if (realData?.return1d !== null && realData?.return1d !== undefined) {
+ return realData.return1d;
+ }
+ // Only fall back to mock when actually using mock data
+ return isUsingMockData ? getStaticBacktestResult(pick.symbol)?.actual_return_1d : undefined;
+ })
+ ).filter((r): r is number => r !== undefined);
+
+ return {
+ totalDays: dates.length,
+ avgDailyReturn: topPicksData.length > 0
+ ? topPicksData.reduce((sum, r) => sum + r, 0) / topPicksData.length
+ : 0,
+ buySignals: recommendations.reduce((acc, r) => acc + r.top_picks.length, 0),
+ sellSignals: 0, // Top picks are always BUY recommendations
+ holdSignals: 0,
+ };
+ }, [summaryMode, dates.length, overallStats.avgDailyReturn, recommendations]);
+
+ // Pre-calculate date stats: from real recommendations data (counts) and real backtest returns
const dateStatsMap = useMemo(() => {
- const map: Record> = {};
- dates.forEach(date => {
- map[date] = getDateStats(date);
- });
- return map;
- }, [dates]);
+ return Object.fromEntries(dates.map(date => {
+ const rec = recommendations.find(r => r.date === date);
+ if (rec && !isUsingMockData) {
+ // Use real recommendation data for counts and real backtest returns
+ const stocks = Object.values(rec.analysis);
+ return [date, {
+ date,
+ avgReturn1d: realDateReturns[date] ?? 0,
+ avgReturn1m: 0,
+ totalStocks: stocks.length,
+ correctPredictions: 0,
+ accuracy: 0,
+ buyCount: rec.summary.buy,
+ sellCount: rec.summary.sell,
+ holdCount: rec.summary.hold,
+ }];
+ }
+ return [date, getStaticDateStats(date)];
+ }));
+ }, [dates, recommendations, isUsingMockData, realDateReturns]);
const getRecommendation = (date: string) => {
- return sampleRecommendations.find(r => r.date === date);
+ return recommendations.find(r => r.date === date);
};
+ // Filter stocks based on mode for display
+ const getFilteredStocks = (date: string) => {
+ const rec = getRecommendation(date);
+ if (!rec) return [];
+
+ if (dateFilterMode === 'topPicks') {
+ return rec.top_picks.map(pick => rec.analysis[pick.symbol]).filter(Boolean);
+ }
+ return Object.values(rec.analysis);
+ };
+
+ // Show loading state
+ if (isLoadingRecommendations) {
+ return (
+
+
+
+
Loading historical data...
+
Fetching recommendations from API...
+
+
+ {/* Mock Data Indicator */}
+ {isUsingMockData && (
+
+
+
+ Using demo data. Start the backend server and run analysis for real AI recommendations.
+
+
+ )}
+
{/* Compact Header */}
@@ -109,36 +902,85 @@ export default function History() {
{/* Accuracy Trend Chart */}
-
-
-
Accuracy Trend
+
+
+
+
Accuracy Trend
+
+ {isLoadingAccuracyTrend && (
+
+
+ Loading real data...
+
+ )}
-
+ {/* Pass real data if available, use mock fallback only when in mock mode */}
+
0 ? accuracyTrendData : undefined)
+ : accuracyTrendData
+ }
+ />
- Prediction accuracy over the past {dates.length} trading days
+ {accuracyTrendData.length > 0 ? (
+ <>Prediction accuracy from real backtest data over {accuracyTrendData.length} trading days
+ ) : isUsingMockData ? (
+ <>Demo data - Start backend for real accuracy tracking
+ ) : (
+ <>Prediction accuracy over the past {dates.length} trading days
+ )}
{/* Risk Metrics */}
-
-
-
Risk Metrics
+
+
+
+
Risk Metrics
+
+ {isLoadingRiskMetrics && (
+
+
+ Loading real data...
+
+ )}
-
+
- Risk-adjusted performance metrics for the AI trading strategy
+ {realRiskMetrics ? (
+ <>Risk-adjusted performance from real backtest data ({realRiskMetrics.totalTrades} trades)
+ ) : isUsingMockData ? (
+ <>Demo data - Start backend for real risk metrics
+ ) : (
+ <>Risk-adjusted performance metrics for the AI trading strategy
+ )}
{/* Portfolio Simulator */}
-
+
- {/* Date Selector */}
+ {/* Date Selector with Mode Toggle */}
-
-
-
Select Date
+
+
+
+
Select Date
+
+
+
+
+
{dates.map((date) => {
@@ -147,6 +989,11 @@ export default function History() {
const avgReturn = stats?.avgReturn1d ?? 0;
const isPositive = avgReturn >= 0;
+ // Calculate filtered summary for this date
+ const filteredSummary = dateFilterMode === 'topPicks'
+ ? { buy: rec?.top_picks.length || 0, sell: 0, hold: 0 }
+ : rec?.summary || { buy: 0, sell: 0, hold: 0 };
+
return (
{/* Help button for return explanation */}
@@ -221,132 +1066,254 @@ export default function History() {
-
- {new Date(selectedDate).toLocaleDateString('en-IN', {
- weekday: 'short',
- month: 'short',
- day: 'numeric',
- year: 'numeric',
- })}
-
+
+
+ {new Date(selectedDate).toLocaleDateString('en-IN', {
+ weekday: 'short',
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ })}
+
+
+
-
-
- {getRecommendation(selectedDate)?.summary.buy} Buy
-
-
-
- {getRecommendation(selectedDate)?.summary.sell} Sell
-
-
-
- {getRecommendation(selectedDate)?.summary.hold} Hold
-
+ {dateFilterMode === 'all50' ? (
+ <>
+
+
+ {getRecommendation(selectedDate)?.summary.buy} Buy
+
+
+
+ {getRecommendation(selectedDate)?.summary.sell} Sell
+
+
+
+ {getRecommendation(selectedDate)?.summary.hold} Hold
+
+
+ ) : (
+
+
+ {getRecommendation(selectedDate)?.top_picks.length} Top Picks (BUY)
+
+ )}
-
- {Object.values(getRecommendation(selectedDate)?.analysis || {}).map((stock: StockAnalysis) => {
- const backtest = getBacktestResult(stock.symbol);
- // Use next-day return for the display
- const nextDayReturn = backtest?.actual_return_1d ?? 0;
- const isPositive = nextDayReturn >= 0;
+ {isLoadingBacktest ? (
+
+
+
Fetching real market data...
+
+ ) : (
+
+ {getFilteredStocks(selectedDate).map((stock: StockAnalysis) => {
+ const realData = realBacktestData[stock.symbol];
- return (
-
-
- {stock.symbol}
- {stock.company_name}
-
-
- {/* Sparkline */}
- {backtest && (
-
- )}
- {/* Next-Day Return Badge */}
- {backtest && (
-
- )}
-
-
-
-
- );
- })}
-
+ let nextDayReturn: number | null;
+ let priceHistory: Array<{ date: string; price: number }> | undefined;
+ let predictionCorrect: boolean | null = null;
+
+ if (!isUsingMockData) {
+ // Real data mode: only use real backtest, no mock fallback
+ nextDayReturn = realData?.return1d ?? null;
+ priceHistory = realData?.priceHistory;
+ if (realData?.predictionCorrect !== undefined) {
+ predictionCorrect = realData.predictionCorrect;
+ }
+ } else {
+ // Mock data mode: use real if available, fall back to mock
+ const mockBacktest = getStaticBacktestResult(stock.symbol);
+ nextDayReturn = realData?.return1d ?? mockBacktest?.actual_return_1d ?? 0;
+ priceHistory = realData?.priceHistory ?? mockBacktest?.price_history;
+ if (realData?.predictionCorrect !== undefined) {
+ predictionCorrect = realData.predictionCorrect;
+ } else if (mockBacktest && stock.decision) {
+ if (stock.decision === 'BUY' || stock.decision === 'HOLD') {
+ predictionCorrect = nextDayReturn > 0;
+ } else if (stock.decision === 'SELL') {
+ predictionCorrect = nextDayReturn < 0;
+ }
+ }
+ }
+ const isPositive = (nextDayReturn ?? 0) >= 0;
+
+ return (
+
+
+ {stock.symbol}
+ {stock.company_name}
+ {realData && (
+
+ Real
+
+ )}
+
+
+
+ {predictionCorrect !== null && (
+
+ )}
+ {priceHistory && (
+
+ )}
+
+
+
+ );
+ })}
+
+ )}
)}
- {/* Performance Summary Cards */}
+ {/* Performance Summary Cards with Mode Toggle */}
-
-
-
Performance Summary
+
+
+
+
Performance Summary
+
+
-
-
{overallStats.totalDays}
-
Days Tracked
-
-
-
= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
- {overallStats.avgDailyReturn >= 0 ? '+' : ''}{overallStats.avgDailyReturn.toFixed(1)}%
+
setActiveSummaryModal('daysTracked')}
+ >
+
{filteredStats.totalDays}
+
+ Days Tracked
-
Avg Next-Day Return
-
+
setActiveSummaryModal('avgReturn')}
+ >
+
+ {filteredStats.avgDailyReturn >= 0 ? '+' : ''}{filteredStats.avgDailyReturn.toFixed(1)}%
+
+
+ Avg Next-Day Return
+
+
+
setActiveSummaryModal('buySignals')}
+ >
- {sampleRecommendations.reduce((acc, r) => acc + r.summary.buy, 0)}
+ {filteredStats.buySignals}
+
+
+ {summaryMode === 'topPicks' ? 'Top Pick Signals' : 'Buy Signals'}
-
Buy Signals
-
+
setActiveSummaryModal('sellSignals')}
+ >
- {sampleRecommendations.reduce((acc, r) => acc + r.summary.sell, 0)}
+ {filteredStats.sellSignals}
+
+
+ Sell Signals
-
Sell Signals
- Next-day return = Price change on the trading day after recommendation
+ {summaryMode === 'topPicks'
+ ? 'Performance based on Top Picks recommendations only (3 stocks per day)'
+ : 'Next-day return = Price change on the trading day after recommendation'
+ }
{/* AI vs Nifty50 Index Comparison */}
-
-
-
AI Strategy vs Nifty50 Index
+
+
+
+
AI Strategy vs Nifty50 Index
+
+
+ {isLoadingCumulativeReturns && (
+
+
+ Loading...
+
+ )}
+
+
-
+
- Comparison of cumulative returns between AI strategy and Nifty50 index
+ {(indexChartMode === 'topPicks' ? topPicksCumulativeReturns : realCumulativeReturns)?.length ? (
+ <>
+ Cumulative returns for {indexChartMode === 'topPicks' ? 'Top Picks' : 'All 50 stocks'} over{' '}
+ {(indexChartMode === 'topPicks' ? topPicksCumulativeReturns : realCumulativeReturns)?.length} trading days
+
+ ) : isUsingMockData ? (
+ <>Demo data - Start backend for real performance comparison
+ ) : (
+ <>Comparison of cumulative returns between AI strategy and Nifty50 index
+ )}
{/* Return Distribution */}
-
-
-
Return Distribution
+
+
+
+
Return Distribution
+
+
+ {isLoadingReturnDistribution && (
+
+
+ Loading...
+
+ )}
+
+
-
+
- Distribution of next-day returns across all predictions. Click bars to see stocks.
+ {(distributionMode === 'topPicks' ? topPicksReturnDistribution : realReturnDistribution) ? (
+ <>Distribution of {distributionMode === 'topPicks' ? 'Top Picks' : 'all 50 stocks'} next-day returns. Click bars to see stocks.
+ ) : isUsingMockData ? (
+ <>Demo data - Start backend for real return distribution
+ ) : (
+ <>Distribution of next-day returns across all predictions. Click bars to see stocks.
+ )}
@@ -361,7 +1328,7 @@ export default function History() {
setShowReturnModal(false)}
- breakdown={returnModalDate ? getReturnBreakdown(returnModalDate) : null}
+ breakdown={returnModalDate ? (isUsingMockData ? getStaticReturnBreakdown(returnModalDate) : null) : null}
date={returnModalDate || ''}
/>
@@ -369,7 +1336,122 @@ export default function History() {
setShowOverallModal(false)}
+ breakdown={realOverallBreakdown}
+ cumulativeData={realCumulativeReturns}
/>
+
+ {/* Performance Summary Modals */}
+ setActiveSummaryModal(null)}
+ title="Days Tracked"
+ icon={}
+ >
+
+
Days Tracked shows the total number of trading days where AI recommendations have been recorded and analyzed.
+
+
Current Count:
+
{filteredStats.totalDays} days
+
+
Each day includes analysis for {summaryMode === 'topPicks' ? '3 top picks' : 'all 50 Nifty stocks'}.
+
+
Average Next-Day Return measures the mean percentage price change one trading day after each recommendation.
+
+
How it's calculated:
+
+ - Record stock price at recommendation time
+ - Record price at next trading day close
+ - Calculate: (Next Day Price - Rec Price) / Rec Price × 100
+ - Average all these returns
+
+
+
= 0 ? 'bg-green-50 dark:bg-green-900/20' : 'bg-red-50 dark:bg-red-900/20'} rounded-lg`}>
+
Current Average:
+
= 0 ? 'text-green-600' : 'text-red-600'}`}>
+ {filteredStats.avgDailyReturn >= 0 ? '+' : ''}{filteredStats.avgDailyReturn.toFixed(2)}%
+
+
+
+ {summaryMode === 'topPicks' ? (
+ <>
+
Top Pick Signals counts all stocks that were selected as "Top Picks" across all tracked days.
+
+
What makes a Top Pick?
+
+ - Strong bullish momentum indicators
+ - Positive technical analysis signals
+ - Favorable risk-reward ratio
+ - High confidence BUY recommendation
+
+
+
+ ) : (
+ <>
+
Buy Signals counts every BUY recommendation issued by the AI across all tracked days and all 50 stocks.
+
+
When is BUY recommended?
+
+ - Technical indicators show bullish momentum
+ - Positive sentiment in news/fundamentals
+ - Expected price appreciation in short term
+
+
+
+ )}
+
+ Total {summaryMode === 'topPicks' ? 'Top Pick' : 'Buy'} Signals:
+ {filteredStats.buySignals}
+
+
+
Sell Signals counts every SELL recommendation issued by the AI across all tracked days.
+
+
When is SELL recommended?
+
+ - Technical indicators show bearish momentum
+ - Negative sentiment in news/fundamentals
+ - Expected price decline in short term
+ - Risk level exceeds acceptable threshold
+
+
+ {summaryMode === 'topPicks' ? (
+
+ Note: Top Picks mode only shows BUY recommendations, so sell signals are 0.
+
+ ) : (
+
+ Total Sell Signals:
+ {filteredStats.sellSignals}
+
+ )}
+