// ===== Stock Positional Trading Dashboard ===== // Shows ML signals, open positions with risk levels, closed position history, // performance summary, and exit reason analytics. function StockPositionalPage() { const toast = useToast(); const [tab, setTab] = React.useState('signals'); const [loading, setLoading] = React.useState(true); // Signals state const [signals, setSignals] = React.useState(null); const [signalDates, setSignalDates] = React.useState([]); const [selectedDate, setSelectedDate] = React.useState(''); const [signalFilter, setSignalFilter] = React.useState(''); const [signalSort, setSignalSort] = React.useState('rank'); const [signalSortAsc, setSignalSortAsc] = React.useState(true); // Positions state const [openPositions, setOpenPositions] = React.useState([]); const [closedPositions, setClosedPositions] = React.useState([]); const [closedDays, setClosedDays] = React.useState(30); const [expandedId, setExpandedId] = React.useState(null); // Summary state const [summary, setSummary] = React.useState(null); const [exitBreakdown, setExitBreakdown] = React.useState([]); const [summaryDays, setSummaryDays] = React.useState(90); React.useEffect(() => { loadSignalDates(); }, []); React.useEffect(() => { if (tab === 'signals') loadSignals(); }, [tab, selectedDate]); React.useEffect(() => { if (tab === 'positions') { loadOpenPositions(); loadClosedPositions(); } }, [tab, closedDays]); React.useEffect(() => { if (tab === 'analytics') loadSummary(); }, [tab, summaryDays]); async function loadSignalDates() { try { const r = await API.get('/api/stock-positional/signal-dates?max=30'); setSignalDates(r.dates || []); } catch { /* ignore */ } } async function loadSignals() { setLoading(true); try { const qs = selectedDate ? `?date=${selectedDate}` : ''; const r = await API.get(`/api/stock-positional/signals${qs}`); setSignals(r); } catch (err) { toast(err.message || 'Failed to load signals', 'error'); } finally { setLoading(false); } } async function loadOpenPositions() { setLoading(true); try { const r = await API.get('/api/stock-positional/positions/open'); setOpenPositions(r.positions || []); } catch (err) { toast(err.message || 'Failed to load open positions', 'error'); } finally { setLoading(false); } } async function loadClosedPositions() { try { const r = await API.get(`/api/stock-positional/positions/closed?days=${closedDays}`); setClosedPositions(r.positions || []); } catch (err) { toast(err.message || 'Failed to load closed positions', 'error'); } } async function loadSummary() { setLoading(true); try { const r = await API.get(`/api/stock-positional/summary?days=${summaryDays}`); setSummary(r.summary || null); setExitBreakdown(r.exitBreakdown || []); } catch (err) { toast(err.message || 'Failed to load summary', 'error'); } finally { setLoading(false); } } function handleSignalSort(field) { if (signalSort === field) setSignalSortAsc(!signalSortAsc); else { setSignalSort(field); setSignalSortAsc(true); } } function getSortedSignals() { if (!signals || !signals.signals) return []; let list = signals.signals; if (signalFilter) list = list.filter(s => s.predictedLabel === signalFilter); return [...list].sort((a, b) => { let av, bv; if (signalSort === 'rank') { av = a.rank ?? 999; bv = b.rank ?? 999; } else if (signalSort === 'symbol') { av = a.symbol; bv = b.symbol; } else if (signalSort === 'confidence') { av = a.confidence; bv = b.confidence; } else if (signalSort === 'rsi14') { av = a.rsi14 ?? 0; bv = b.rsi14 ?? 0; } else if (signalSort === 'return20d') { av = a.return20d ?? 0; bv = b.return20d ?? 0; } else { av = a.rank ?? 999; bv = b.rank ?? 999; } if (av < bv) return signalSortAsc ? -1 : 1; if (av > bv) return signalSortAsc ? 1 : -1; return 0; }); } const sortIcon = (f) => signalSort === f ? (signalSortAsc ? ' \u25B2' : ' \u25BC') : ''; // Signal label color helper function labelStyle(label) { if (label === 'BUY') return { background: '#dcfce7', color: '#15803d', fontWeight: 700, padding: '2px 10px', borderRadius: '12px', fontSize: '11px' }; if (label === 'SELL') return { background: '#fee2e2', color: '#b91c1c', fontWeight: 700, padding: '2px 10px', borderRadius: '12px', fontSize: '11px' }; return { background: '#f3f4f6', color: '#6b7280', fontWeight: 600, padding: '2px 10px', borderRadius: '12px', fontSize: '11px' }; } // P&L color function pnlColor(v) { return v > 0 ? '#16a34a' : v < 0 ? '#dc2626' : 'var(--text-secondary)'; } function pnlSign(v) { return v > 0 ? '+' : ''; } // ==== RENDER ==== return React.createElement('div', { className: 'page-content' }, React.createElement('div', { className: 'page-header' }, React.createElement('h1', { className: 'page-title' }, '\uD83D\uDCC8 Stock Positional Trading'), React.createElement('p', { className: 'page-subtitle' }, 'ML signals, paper positions & performance analytics \u2014 NIFTY 50 stocks') ), // Tab bar React.createElement('div', { className: 'filters-bar', style: { gap: '4px' } }, [ { key: 'signals', icon: '\uD83E\uDDE0', label: 'ML Signals' }, { key: 'positions', icon: '\uD83D\uDCBC', label: 'Positions' }, { key: 'analytics', icon: '\uD83D\uDCCA', label: 'Analytics' }, ].map(t => React.createElement('button', { key: t.key, className: `filter-chip ${tab === t.key ? 'active' : ''}`, onClick: () => setTab(t.key), style: { fontSize: '13px', padding: '6px 16px' } }, `${t.icon} ${t.label}`)) ), // ================================================================ // TAB: SIGNALS // ================================================================ tab === 'signals' && React.createElement(React.Fragment, null, // Filters row React.createElement('div', { className: 'filters-bar' }, // Date picker React.createElement('select', { className: 'form-input', style: { width: '160px', padding: '4px 8px', fontSize: '13px' }, value: selectedDate, onChange: e => setSelectedDate(e.target.value) }, React.createElement('option', { value: '' }, 'Latest Signals'), signalDates.map(d => React.createElement('option', { key: d, value: d }, d)) ), React.createElement('span', { className: 'text-muted' }, '|'), // Label filter React.createElement('div', { className: 'flex gap-2' }, ['', 'BUY', 'HOLD', 'SELL'].map(l => React.createElement('button', { key: l, className: `filter-chip ${signalFilter === l ? 'active' : ''}`, onClick: () => setSignalFilter(l) }, l || 'All')) ), React.createElement('div', { style: { flex: 1 } }), React.createElement('button', { className: 'btn btn-outline btn-sm', onClick: loadSignals }, '\u21BB Refresh') ), loading ? React.createElement(Loading, { text: 'Loading signals\u2026' }) : !signals || !signals.signals || signals.signals.length === 0 ? React.createElement(EmptyState, { icon: '\uD83E\uDDE0', title: 'No Signals Yet', text: 'The ML inference service has not generated any signals. Check Worker logs for [StockSignal] entries.' }) : React.createElement(React.Fragment, null, // Signal summary cards React.createElement('div', { className: 'stats-grid' }, React.createElement(StatCard, { label: 'Signal Date', value: signals.tradeDate || '\u2014' }), React.createElement(StatCard, { label: 'Total Signals', value: signals.totalSignals }), React.createElement(StatCard, { label: 'BUY', value: signals.buyCount, type: 'positive' }), React.createElement(StatCard, { label: 'HOLD', value: signals.holdCount }), React.createElement(StatCard, { label: 'SELL', value: signals.sellCount, type: signals.sellCount > 0 ? 'negative' : undefined }) ), // BUY signals highlight strip signals.buyCount > 0 && React.createElement('div', { className: 'card mb-4' }, React.createElement('div', { className: 'card-header' }, React.createElement('span', null, '\u2B50 Top BUY Picks'), React.createElement('span', { className: 'text-sm text-muted' }, `${signals.buyCount} stocks`) ), React.createElement('div', { className: 'card-body', style: { padding: '12px' } }, React.createElement('div', { style: { display: 'flex', gap: '10px', flexWrap: 'wrap' } }, signals.signals.filter(s => s.predictedLabel === 'BUY').sort((a, b) => (a.rank ?? 999) - (b.rank ?? 999)).map(s => React.createElement('div', { key: s.symbol, style: { padding: '12px 16px', borderRadius: '12px', minWidth: '140px', background: 'linear-gradient(135deg, #f0fdf4, #dcfce7)', border: '2px solid #bbf7d0', textAlign: 'center', cursor: 'default', boxShadow: '0 1px 4px rgba(0,0,0,0.06)', } }, React.createElement('div', { style: { fontWeight: 800, fontSize: '14px', color: '#15803d', letterSpacing: '0.5px' } }, s.symbol), React.createElement('div', { style: { fontSize: '11px', color: '#4b5563', marginTop: '4px' } }, `Rank #${s.rank ?? '-'} \u2022 ${(s.confidence * 100).toFixed(0)}%`), s.predMaxFav20d != null && React.createElement('div', { style: { fontSize: '11px', color: '#16a34a', marginTop: '2px', fontWeight: 600 } }, `\u2191 ${(s.predMaxFav20d * 100).toFixed(1)}% potential`), s.rsi14 != null && React.createElement('div', { style: { fontSize: '10px', color: '#6b7280', marginTop: '2px' } }, `RSI ${s.rsi14.toFixed(0)}`) ) ) ) ) ), // Full signals table React.createElement('div', { className: 'card mb-4' }, React.createElement('div', { className: 'card-header' }, React.createElement('span', null, '\uD83D\uDCCB All Signals'), React.createElement('span', { className: 'text-sm text-muted' }, `${getSortedSignals().length} signals`) ), React.createElement('div', { className: 'card-body', style: { padding: 0 } }, React.createElement('div', { style: { overflowX: 'auto', maxHeight: '500px', overflowY: 'auto' } }, React.createElement('table', { className: 'data-table' }, React.createElement('thead', { style: { position: 'sticky', top: 0, background: 'var(--bg-surface, #fff)', zIndex: 1 } }, React.createElement('tr', null, React.createElement('th', { style: { cursor: 'pointer' }, onClick: () => handleSignalSort('rank') }, '#' + sortIcon('rank')), React.createElement('th', { style: { cursor: 'pointer' }, onClick: () => handleSignalSort('symbol') }, 'Symbol' + sortIcon('symbol')), React.createElement('th', null, 'Signal'), React.createElement('th', { style: { cursor: 'pointer', textAlign: 'right' }, onClick: () => handleSignalSort('confidence') }, 'Confidence' + sortIcon('confidence')), React.createElement('th', { style: { textAlign: 'right' } }, 'Max Fav'), React.createElement('th', { style: { cursor: 'pointer', textAlign: 'right' }, onClick: () => handleSignalSort('rsi14') }, 'RSI' + sortIcon('rsi14')), React.createElement('th', { style: { cursor: 'pointer', textAlign: 'right' }, onClick: () => handleSignalSort('return20d') }, 'Hist 20d' + sortIcon('return20d')), React.createElement('th', { style: { textAlign: 'right' } }, 'Mom. Rank'), React.createElement('th', { style: { textAlign: 'right' } }, 'Margin'), React.createElement('th', null, 'Outcome') ) ), React.createElement('tbody', null, getSortedSignals().map((s, i) => React.createElement('tr', { key: s.symbol + s.tradeDate, style: { background: s.predictedLabel === 'BUY' ? 'rgba(220,252,231,0.3)' : s.predictedLabel === 'SELL' ? 'rgba(254,226,226,0.3)' : 'transparent' } }, React.createElement('td', { style: { fontFamily: 'monospace', color: 'var(--text-secondary)', fontSize: '12px' } }, s.rank != null ? s.rank : '\u2014'), React.createElement('td', null, React.createElement('span', { style: { fontWeight: 700, letterSpacing: '0.3px' } }, s.symbol)), React.createElement('td', null, React.createElement('span', { style: labelStyle(s.predictedLabel) }, s.predictedLabel)), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace', fontWeight: 600 } }, (s.confidence * 100).toFixed(1) + '%'), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace', color: s.predMaxFav20d > 0 ? '#16a34a' : 'var(--text-secondary)' } }, s.predMaxFav20d != null ? (s.predMaxFav20d * 100).toFixed(1) + '%' : '\u2014'), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace' } }, s.rsi14 != null ? s.rsi14.toFixed(1) : '\u2014'), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace', color: pnlColor(s.return20d || 0) } }, s.return20d != null ? pnlSign(s.return20d) + (s.return20d * 100).toFixed(1) + '%' : '\u2014'), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace' } }, s.momentumRank != null ? (s.momentumRank * 100).toFixed(0) + '%' : '\u2014'), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace' } }, s.margin != null ? (s.margin * 100).toFixed(1) + '%' : '\u2014'), React.createElement('td', null, s.outcomeLabel ? React.createElement('span', { style: labelStyle(s.outcomeLabel) }, s.outcomeLabel) : React.createElement('span', { className: 'text-sm text-muted' }, 'Pending')) ) ) ) ) ) ) ) ) ), // ================================================================ // TAB: POSITIONS // ================================================================ tab === 'positions' && React.createElement(React.Fragment, null, // Refresh React.createElement('div', { className: 'filters-bar' }, React.createElement('button', { className: 'btn btn-outline btn-sm', onClick: () => { loadOpenPositions(); loadClosedPositions(); } }, '\u21BB Refresh'), React.createElement('div', { style: { flex: 1 } }), React.createElement('span', { className: 'text-sm text-muted' }, 'Closed period:'), [7, 30, 60, 90].map(d => React.createElement('button', { key: d, className: `filter-chip ${closedDays === d ? 'active' : ''}`, onClick: () => setClosedDays(d) }, d + 'D')) ), loading ? React.createElement(Loading, { text: 'Loading positions\u2026' }) : React.createElement(React.Fragment, null, // ---- OPEN POSITIONS ---- React.createElement('div', { className: 'card mb-4' }, React.createElement('div', { className: 'card-header' }, React.createElement('span', null, '\uD83D\uDFE2 Open Positions'), React.createElement('span', { className: 'text-sm text-muted' }, `${openPositions.length} active`) ), React.createElement('div', { className: 'card-body', style: { padding: openPositions.length === 0 ? undefined : 0 } }, openPositions.length === 0 ? React.createElement(EmptyState, { icon: '\uD83D\uDCBC', title: 'No Open Positions', text: 'No active paper positions. Positions are opened at 18:00 IST when BUY signals are available.' }) : React.createElement(React.Fragment, null, // Position cards (visual) React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '0', borderBottom: '1px solid #e2e8f0' } }, openPositions.map(p => { const pnlPct = p.pnlPct != null ? p.pnlPct : null; const isUp = pnlPct != null && pnlPct >= 0; const isExpanded = expandedId === p.id; return React.createElement('div', { key: p.id, onClick: () => setExpandedId(isExpanded ? null : p.id), style: { padding: '16px', cursor: 'pointer', borderRight: '1px solid #e2e8f0', borderBottom: '1px solid #e2e8f0', background: isExpanded ? '#f8fafc' : 'transparent', transition: 'background 0.15s ease', } }, // Header: Symbol + P&L React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' } }, React.createElement('div', null, React.createElement('span', { style: { fontWeight: 800, fontSize: '15px', letterSpacing: '0.5px' } }, p.symbol), React.createElement('span', { style: { fontSize: '11px', color: '#6b7280', marginLeft: '8px' } }, p.direction) ), pnlPct != null && React.createElement('span', { style: { fontWeight: 700, fontSize: '14px', fontFamily: 'monospace', color: pnlColor(pnlPct), background: isUp ? 'rgba(220,252,231,0.5)' : 'rgba(254,226,226,0.5)', padding: '2px 10px', borderRadius: '8px', } }, pnlSign(pnlPct) + pnlPct.toFixed(2) + '%') ), // Key metrics row React.createElement('div', { style: { display: 'flex', gap: '16px', fontSize: '12px', color: '#4b5563', flexWrap: 'wrap' } }, React.createElement('span', null, React.createElement('b', null, 'Entry: '), '\u20B9' + p.entryPrice.toLocaleString('en-IN')), React.createElement('span', null, React.createElement('b', null, 'CMP: '), p.currentPrice != null ? '\u20B9' + p.currentPrice.toLocaleString('en-IN') : '\u2014'), React.createElement('span', null, React.createElement('b', null, 'Days: '), p.daysHeld), React.createElement('span', null, React.createElement('b', null, 'Rank: '), '#' + (p.signalRank || '-')) ), // Risk levels bar React.createElement('div', { style: { display: 'flex', gap: '12px', fontSize: '11px', marginTop: '8px', flexWrap: 'wrap' } }, React.createElement('span', { style: { color: '#dc2626' } }, '\u25CF SL: ', p.stopLossPrice != null ? '\u20B9' + p.stopLossPrice : '\u2014'), React.createElement('span', { style: { color: '#f59e0b' } }, '\u25CF Trail: ', p.trailingStopPrice != null ? '\u20B9' + p.trailingStopPrice : '\u2014'), React.createElement('span', { style: { color: '#16a34a' } }, '\u25CF Target: ', p.targetPrice != null ? '\u20B9' + p.targetPrice : '\u2014'), React.createElement('span', { style: { color: '#3b82f6' } }, '\u25CF HWM: ', p.highWaterMark != null ? '\u20B9' + p.highWaterMark : '\u2014') ), // Expanded details isExpanded && React.createElement('div', { style: { marginTop: '12px', padding: '12px', borderRadius: '8px', background: 'linear-gradient(135deg, #f8fafc, #f1f5f9)', border: '1px solid #e2e8f0', fontSize: '12px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '6px 16px', } }, React.createElement('span', null, React.createElement('b', null, 'Entry Date: '), p.entryDate), React.createElement('span', null, React.createElement('b', null, 'Confidence: '), p.signalConfidence != null ? (p.signalConfidence * 100).toFixed(1) + '%' : '\u2014'), React.createElement('span', null, React.createElement('b', null, 'Pred Max Fav: '), p.predMaxFav20d != null ? (p.predMaxFav20d * 100).toFixed(1) + '%' : '\u2014'), React.createElement('span', null, React.createElement('b', null, 'Entry RSI: '), p.entryRSI14 != null ? p.entryRSI14.toFixed(1) : '\u2014'), React.createElement('span', null, React.createElement('b', null, 'Entry ADX: '), p.entryADX14 != null ? p.entryADX14.toFixed(1) : '\u2014'), React.createElement('span', null, React.createElement('b', null, 'P&L: '), p.pnl != null ? formatCurrency(Number(p.pnl)) : '\u2014'), React.createElement('span', null, React.createElement('b', null, 'HWM Date: '), p.highWaterMarkDate || '\u2014'), React.createElement('span', null, React.createElement('b', null, 'LWM: '), p.lowWaterMark != null ? '\u20B9' + p.lowWaterMark : '\u2014'), React.createElement('span', null, React.createElement('b', null, 'Max Fav: '), p.maxFavPct != null ? p.maxFavPct.toFixed(2) + '%' : '\u2014'), React.createElement('span', null, React.createElement('b', null, 'Max Adv: '), p.maxAdvPct != null ? p.maxAdvPct.toFixed(2) + '%' : '\u2014'), p.notes && React.createElement('span', { style: { gridColumn: '1 / -1', color: '#6b7280', fontStyle: 'italic' } }, '\uD83D\uDCDD ' + p.notes) ) ); }) ) ) ) ), // ---- CLOSED POSITIONS ---- React.createElement('div', { className: 'card mb-4' }, React.createElement('div', { className: 'card-header' }, React.createElement('span', null, '\uD83D\uDD34 Closed Positions'), React.createElement('span', { className: 'text-sm text-muted' }, `${closedPositions.length} trades (last ${closedDays}D)`) ), React.createElement('div', { className: 'card-body', style: { padding: closedPositions.length === 0 ? undefined : 0 } }, closedPositions.length === 0 ? React.createElement(EmptyState, { icon: '\uD83D\uDCC9', title: 'No Closed Positions', text: `No positions closed in the last ${closedDays} days.` }) : React.createElement('div', { style: { overflowX: 'auto', maxHeight: '500px', overflowY: 'auto' } }, React.createElement('table', { className: 'data-table' }, React.createElement('thead', { style: { position: 'sticky', top: 0, background: 'var(--bg-surface, #fff)', zIndex: 1 } }, React.createElement('tr', null, React.createElement('th', null, 'Symbol'), React.createElement('th', null, 'Entry'), React.createElement('th', null, 'Exit'), React.createElement('th', { style: { textAlign: 'right' } }, 'Entry \u20B9'), React.createElement('th', { style: { textAlign: 'right' } }, 'Exit \u20B9'), React.createElement('th', { style: { textAlign: 'right' } }, 'P&L %'), React.createElement('th', { style: { textAlign: 'right' } }, 'P&L \u20B9'), React.createElement('th', { style: { textAlign: 'right' } }, 'Days'), React.createElement('th', null, 'Exit Reason'), React.createElement('th', { style: { textAlign: 'right' } }, 'Max Fav'), React.createElement('th', { style: { textAlign: 'right' } }, 'Max Adv') ) ), React.createElement('tbody', null, closedPositions.map(p => { const pnlPct = p.pnlPct != null ? p.pnlPct : null; return React.createElement('tr', { key: p.id }, React.createElement('td', null, React.createElement('span', { style: { fontWeight: 700 } }, p.symbol)), React.createElement('td', { style: { whiteSpace: 'nowrap', fontSize: '12px' } }, p.entryDate), React.createElement('td', { style: { whiteSpace: 'nowrap', fontSize: '12px' } }, p.exitDate || '\u2014'), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace' } }, p.entryPrice.toFixed(2)), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace' } }, p.exitPrice != null ? p.exitPrice.toFixed(2) : '\u2014'), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace', fontWeight: 700, color: pnlColor(pnlPct || 0) } }, pnlPct != null ? pnlSign(pnlPct) + pnlPct.toFixed(2) + '%' : '\u2014'), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace', color: pnlColor(Number(p.pnl) || 0) } }, p.pnl != null ? formatCurrency(Number(p.pnl)) : '\u2014'), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace' } }, p.daysHeld), React.createElement('td', null, React.createElement(Badge, { type: p.exitReason === 'TARGET_HIT' ? 'success' : p.exitReason === 'SL_HIT' ? 'danger' : p.exitReason === 'TRAILING_STOP' ? 'warning' : 'neutral' }, (p.exitReason || '').replace('_', ' '))), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace', color: '#16a34a' } }, p.maxFavPct != null ? '+' + p.maxFavPct.toFixed(1) + '%' : '\u2014'), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace', color: '#dc2626' } }, p.maxAdvPct != null ? p.maxAdvPct.toFixed(1) + '%' : '\u2014') ); }) ) ) ) ) ) ) ), // ================================================================ // TAB: ANALYTICS // ================================================================ tab === 'analytics' && React.createElement(React.Fragment, null, React.createElement('div', { className: 'filters-bar' }, React.createElement('span', { className: 'text-sm text-muted' }, 'Period:'), [30, 60, 90, 180, 365].map(d => React.createElement('button', { key: d, className: `filter-chip ${summaryDays === d ? 'active' : ''}`, onClick: () => setSummaryDays(d) }, d <= 90 ? d + 'D' : d < 365 ? Math.round(d / 30) + 'M' : '1Y')), React.createElement('div', { style: { flex: 1 } }), React.createElement('button', { className: 'btn btn-outline btn-sm', onClick: loadSummary }, '\u21BB Refresh') ), loading ? React.createElement(Loading, { text: 'Loading analytics\u2026' }) : !summary ? React.createElement(EmptyState, { icon: '\uD83D\uDCCA', title: 'No Data', text: 'No position data available for analytics.' }) : React.createElement(React.Fragment, null, // Summary stat cards React.createElement('div', { className: 'stats-grid' }, React.createElement(StatCard, { label: 'Total Positions', value: summary.totalPositions }), React.createElement(StatCard, { label: 'Open', value: summary.openPositions }), React.createElement(StatCard, { label: 'Win / Loss', value: `${summary.winners} / ${summary.losers}`, sub: `Win rate: ${(summary.winRate * 100).toFixed(0)}%` }), React.createElement(StatCard, { label: 'Total P&L', value: formatCurrency(Number(summary.totalPnL)), type: summary.totalPnL >= 0 ? 'positive' : 'negative' }), React.createElement(StatCard, { label: 'Avg P&L %', value: summary.avgPnLPct.toFixed(2) + '%', type: summary.avgPnLPct >= 0 ? 'positive' : 'negative' }), React.createElement(StatCard, { label: 'Best Trade', value: summary.bestPnLPct.toFixed(2) + '%', type: 'positive' }), React.createElement(StatCard, { label: 'Worst Trade', value: summary.worstPnLPct.toFixed(2) + '%', type: 'negative' }), React.createElement(StatCard, { label: 'Avg Days Held', value: summary.avgDaysHeld }), React.createElement(StatCard, { label: 'Avg Max Favorable', value: summary.avgMaxFavPct.toFixed(2) + '%', type: 'positive', sub: 'Average best unrealized gain' }), React.createElement(StatCard, { label: 'Avg Max Adverse', value: summary.avgMaxAdvPct.toFixed(2) + '%', type: 'negative', sub: 'Average worst unrealized loss' }) ), // Exit Reason Breakdown exitBreakdown.length > 0 && React.createElement('div', { className: 'card mb-4' }, React.createElement('div', { className: 'card-header' }, React.createElement('span', null, '\uD83D\uDEAA Exit Reason Breakdown') ), React.createElement('div', { className: 'card-body', style: { padding: 0 } }, React.createElement('table', { className: 'data-table' }, React.createElement('thead', null, React.createElement('tr', null, React.createElement('th', null, 'Exit Reason'), React.createElement('th', { style: { textAlign: 'right' } }, 'Count'), React.createElement('th', { style: { textAlign: 'right' } }, 'Winners'), React.createElement('th', { style: { textAlign: 'right' } }, 'Win Rate'), React.createElement('th', { style: { textAlign: 'right' } }, 'Avg P&L %') ) ), React.createElement('tbody', null, exitBreakdown.map(e => { const winRate = e.count > 0 ? (e.winners / e.count * 100).toFixed(0) : '0'; return React.createElement('tr', { key: e.exitReason }, React.createElement('td', null, React.createElement(Badge, { type: e.exitReason === 'TARGET_HIT' ? 'success' : e.exitReason === 'SL_HIT' ? 'danger' : e.exitReason === 'TRAILING_STOP' ? 'warning' : 'neutral' }, (e.exitReason || '').replace('_', ' '))), React.createElement('td', { style: { textAlign: 'right', fontWeight: 600 } }, e.count), React.createElement('td', { style: { textAlign: 'right' } }, e.winners), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace' } }, winRate + '%'), React.createElement('td', { style: { textAlign: 'right', fontFamily: 'monospace', fontWeight: 700, color: pnlColor(e.avgPnLPct) } }, (e.avgPnLPct >= 0 ? '+' : '') + e.avgPnLPct.toFixed(2) + '%') ); }) ) ) ) ), // Win rate visual bar summary.closedPositions > 0 && React.createElement('div', { className: 'card mb-4' }, React.createElement('div', { className: 'card-header' }, React.createElement('span', null, '\uD83C\uDFC6 Win Rate Visual') ), React.createElement('div', { className: 'card-body' }, React.createElement('div', { style: { display: 'flex', height: '32px', borderRadius: '8px', overflow: 'hidden', border: '1px solid #e2e8f0' } }, summary.winners > 0 && React.createElement('div', { style: { width: (summary.winRate * 100) + '%', background: 'linear-gradient(135deg, #22c55e, #16a34a)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '12px', fontWeight: 700, minWidth: summary.winRate > 0.05 ? '40px' : '0', } }, summary.winners + 'W'), summary.losers > 0 && React.createElement('div', { style: { width: ((1 - summary.winRate) * 100) + '%', background: 'linear-gradient(135deg, #ef4444, #dc2626)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '12px', fontWeight: 700, minWidth: (1 - summary.winRate) > 0.05 ? '40px' : '0', } }, summary.losers + 'L') ), React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', fontSize: '12px', marginTop: '6px', color: '#6b7280' } }, React.createElement('span', null, `${(summary.winRate * 100).toFixed(1)}% win rate`), React.createElement('span', null, `${summary.closedPositions} closed trades`) ) ) ) ) ) ); }