feat: rebuild trader detail UI with tabs and manual recalculate button
This commit is contained in:
Richard
@@ -211,39 +211,69 @@
|
||||
<div class="stat-value" id="td-strategy">—</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" style="margin-top: 16px;">
|
||||
<div class="stat-group">
|
||||
<div class="stat-label" style="display:flex; justify-content:space-between; align-items:center;">
|
||||
AI Analysis
|
||||
<button class="btn-sm" id="btn-ai-analysis" style="padding:4px 8px; font-size:12px; background:var(--bg-input);">Run Analysis</button>
|
||||
<div class="detail-main">
|
||||
<!-- Tabs Navigation -->
|
||||
<div class="tabs-nav" style="display:flex; gap:16px; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:8px;">
|
||||
<button class="btn-tab active" data-tab="td-tab-analytics" onclick="switchTraderTab('td-tab-analytics')" style="background:transparent; border:none; color:var(--text); font-weight:bold; cursor:pointer;">Analytics & AI</button>
|
||||
<button class="btn-tab" data-tab="td-tab-recent" onclick="switchTraderTab('td-tab-recent')" style="background:transparent; border:none; color:var(--text-muted); cursor:pointer;">Recent Trades</button>
|
||||
<button class="btn-tab" data-tab="td-tab-positions" onclick="switchTraderTab('td-tab-positions')" style="background:transparent; border:none; color:var(--text-muted); cursor:pointer;">Positions</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content: Analytics -->
|
||||
<div class="tab-content" id="td-tab-analytics" style="display:block;">
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card"><div class="metric-label">Win Rate</div><div class="metric-value" id="td-winrate">---</div></div>
|
||||
<div class="metric-card"><div class="metric-label">Total PnL</div><div class="metric-value" id="td-pnl">---</div></div>
|
||||
<div class="metric-card"><div class="metric-label">Total Trades</div><div class="metric-value" id="td-trades">---</div></div>
|
||||
<div class="metric-card accent">
|
||||
<div class="metric-label">Score</div>
|
||||
<div class="metric-value" id="td-score">---</div>
|
||||
<button class="btn-sm" id="btn-force-analyze" style="margin-top:8px; padding:4px 8px; width:100%; background:var(--bg-input);">Recalculate</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-bottom: 24px;">
|
||||
<div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
|
||||
<h2>AI Strategy Analysis</h2>
|
||||
<button class="btn-sm" id="btn-ai-analysis" style="padding:6px 12px; background:var(--primary); color:#000;">Run Deep Analysis</button>
|
||||
</div>
|
||||
<div class="stat-value small" id="td-ai-summary" style="margin-top: 16px; font-weight:normal; line-height:1.6; white-space:pre-wrap; background:var(--bg-input); padding:16px; border-radius:8px; border:1px solid var(--border);">Click 'Run Deep Analysis' to generate a detailed summary of this trader's behavior.</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-bottom: 24px;">
|
||||
<div class="card-header"><h2>Category Specialization</h2></div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead><tr><th>Category</th><th>Subcategory</th><th>Win Rate</th><th>PnL</th><th>Volume</th><th>Trades</th></tr></thead>
|
||||
<tbody id="td-categoryBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="stat-value small" id="td-ai-summary" style="margin-top: 8px; font-weight:normal; line-height:1.4;">Not analyzed yet.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-main">
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card"><div class="metric-label">Win Rate</div><div class="metric-value" id="td-winrate">—</div></div>
|
||||
<div class="metric-card"><div class="metric-label">Total PnL</div><div class="metric-value" id="td-pnl">—</div></div>
|
||||
<div class="metric-card"><div class="metric-label">Total Trades</div><div class="metric-value" id="td-trades">—</div></div>
|
||||
<div class="metric-card accent"><div class="metric-label">Score</div><div class="metric-value" id="td-score">—</div></div>
|
||||
</div>
|
||||
<div class="card" style="margin-bottom: 24px;">
|
||||
<div class="card-header"><h2>Category Specialization</h2></div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead><tr><th>Category</th><th>Win Rate</th><th>PnL</th><th>Volume</th><th>Trades</th></tr></thead>
|
||||
<tbody id="td-categoryBody"></tbody>
|
||||
</table>
|
||||
|
||||
<!-- Tab Content: Recent Trades -->
|
||||
<div class="tab-content" id="td-tab-recent" style="display:none;">
|
||||
<div class="card">
|
||||
<div class="card-header"><h2>Recent Trades</h2></div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead><tr><th>Time</th><th>Market</th><th>Side</th><th>Price</th><th>Size</th><th>Amount</th></tr></thead>
|
||||
<tbody id="td-tradesBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header"><h2>Recent Trades</h2></div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead><tr><th>Time</th><th>Market</th><th>Side</th><th>Price</th><th>Size</th><th>Amount</th></tr></thead>
|
||||
<tbody id="td-tradesBody"></tbody>
|
||||
</table>
|
||||
|
||||
<!-- Tab Content: Positions -->
|
||||
<div class="tab-content" id="td-tab-positions" style="display:none;">
|
||||
<div class="card">
|
||||
<div class="card-header"><h2>Active Positions</h2></div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead><tr><th>Market</th><th>Outcome</th><th>Shares</th><th>Avg Price</th><th>Est. PnL</th></tr></thead>
|
||||
<tbody id="td-positionsBody"><tr><td colspan="5" style="text-align:center;">Coming soon</td></tr></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user