@

UI-U1/U2/U4/U5: dashboard showcases + server-side leaderboard sort

- U1: render the /api/traders/showcases sections on the dashboard as
  clickable curated leaderboard cards (red_flags visually accented).
- U2: loadTraders() now sends the sort key to the API (real top-N),
  take raised to 200; only name/platform stay client-sorted.
- U4: #tradersSort dropdown extended with calmar/conviction/profitfactor/
  pnl30d; currentSort synced before building the query.
- U5: fix empty-state colspan 11 -> 10 (table has 10 columns).

Includes FIXPLAN-UI-Ranglisten.md documenting the plan.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@

src/Predictalytics.Api/wwwroot/css/style.css

@@ -1106,4 +1106,84 @@ a:hover { color: #8ab8ff; }
   .detail-grid {
     grid-template-columns: 1fr;
   }
+  .showcase-wrap {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ─── Curated Showcases (dashboard leaderboards) ─── */
+.showcase-wrap {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+.showcase-card {
+  padding: 18px 18px 8px;
+}
+.showcase-card--warn {
+  border-color: var(--danger-glow);
+  box-shadow: 0 0 0 1px var(--danger-glow) inset;
+}
+.showcase-header {
+  margin-bottom: 12px;
+}
+.showcase-header h2 {
+  font-size: 15px;
+  font-weight: 700;
+}
+.showcase-desc {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 3px;
+  line-height: 1.4;
+}
+.showcase-list {
+  display: flex;
+  flex-direction: column;
+}
+.showcase-row {
+  display: grid;
+  grid-template-columns: 22px 1fr auto auto auto;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 4px;
+  border-top: 1px solid var(--border);
+  cursor: pointer;
+  transition: var(--transition);
+}
+.showcase-row:hover {
+  background: var(--bg-card-hover);
+}
+.showcase-rank {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-darker);
+  text-align: center;
+}
+.showcase-name {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--text-primary);
+  min-width: 0;
+  overflow: hidden;
+}
+.showcase-platform {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 500;
+  margin-left: 6px;
+}
+.showcase-metric {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-secondary);
+  text-align: right;
+  white-space: nowrap;
+}
+.showcase-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
 }

src/Predictalytics.Api/wwwroot/index.html

@@ -156,6 +156,9 @@
             </div>
           </div>
 
+          <!-- Curated Showcases (leaderboards) -->
+          <div id="showcaseSections" class="showcase-wrap"></div>
+
           <!-- Top Traders and Recent Trades -->
           <div class="glass-row">
             <div class="card">
@@ -208,8 +211,12 @@
             <div>
               <select id="tradersSort" class="platform-select" onchange="loadTraders()">
                 <option value="score">Sortieren: Combined Score</option>
-                <option value="winrate">Sortieren: Win Rate</option>
                 <option value="copyability">Sortieren: Copyability</option>
+                <option value="calmar">Sortieren: Rendite/Drawdown (Calmar)</option>
+                <option value="conviction">Sortieren: Conviction-Edge</option>
+                <option value="profitfactor">Sortieren: Profit-Faktor</option>
+                <option value="pnl30d">Sortieren: PnL (30 Tage)</option>
+                <option value="winrate">Sortieren: Win Rate</option>
                 <option value="pnl">Sortieren: Gesamt-PnL</option>
                 <option value="name">Sortieren: Name</option>
               </select>

src/Predictalytics.Api/wwwroot/js/app.js

@@ -300,6 +300,9 @@ async function loadDashboard() {
         return;
     }
 
+    // Curated showcases (loads in parallel; independent of the rest of the dashboard).
+    loadShowcases();
+
     // Metrics
     document.getElementById('metricTraders').textContent = fmt.num(data.totalTraders);
     document.getElementById('metricActive').textContent = fmt.num(data.activeTraders24h);
@@ -373,6 +376,53 @@ async function loadDashboard() {
     });
 }
 
+// ─── Curated Showcases (dashboard leaderboards) ───
+function renderTraitChips(traits) {
+    if (!traits || !traits.length) return '';
+    return '<div class="showcase-chips">' + traits.map(tr => {
+        const rawKey = tr.trait || tr;
+        const name = getTraitDisplayName(rawKey);
+        const desc = getTraitDescription(rawKey);
+        return `<span class="tier-badge ${getTraitClass(rawKey)}" title="${desc}">${name}</span>`;
+    }).join('') + '</div>';
+}
+
+async function loadShowcases() {
+    const wrap = document.getElementById('showcaseSections');
+    if (!wrap) return;
+
+    const sections = await api('/api/traders/showcases');
+    if (!Array.isArray(sections) || sections.length === 0) {
+        wrap.innerHTML = '<div class="card"><div class="empty-state"><p>Noch keine Showcases verfügbar.</p></div></div>';
+        return;
+    }
+
+    wrap.innerHTML = sections.map(s => {
+        const flag = s.key === 'red_flags' ? ' showcase-card--warn' : '';
+        const rows = (s.traders || []).map((t, i) => `
+            <div class="showcase-row" onclick="viewTrader(${t.id})">
+                <span class="showcase-rank">${i + 1}</span>
+                <span class="showcase-name">${t.displayName}${t.isSuspectedBot ? ' 🤖' : ''}
+                    <span class="showcase-platform">${t.platform}</span>
+                    ${renderTraitChips(t.traits)}
+                </span>
+                <span class="showcase-metric" title="Combined Score">${Number(t.combinedScore).toFixed(1)}</span>
+                <span class="showcase-metric" title="Copyability">${Number(t.copytradingCopyabilityScore || 0).toFixed(0)}</span>
+                <span class="showcase-metric">${fmt.pnl(t.totalPnl)}</span>
+            </div>
+        `).join('');
+        return `
+            <div class="card showcase-card${flag}">
+                <div class="showcase-header">
+                    <h2>${s.title}</h2>
+                    <div class="showcase-desc">${s.description}</div>
+                </div>
+                <div class="showcase-list">${rows}</div>
+            </div>
+        `;
+    }).join('');
+}
+
 function setTraderSort(field) {
     if (currentSort === field) {
         sortDirection *= -1;
@@ -388,10 +438,34 @@ function setTraderSort(field) {
     loadTraders();
 }
 
+// Maps a UI sort key to the server-side sort parameter understood by GetTradersAsync.
+// Keys that map to '' use the repository default order (CombinedScore, then PnL) or are
+// sorted client-side (name/platform — the server has no key for them).
+const SERVER_SORT_KEYS = {
+    score: '',            // default order == combined score
+    winrate: 'winrate',
+    quality: 'copytrading',   // no separate quality key server-side; closest is copytrading score
+    copyability: 'copytrading',
+    pnl: 'pnl',
+    pnl30d: 'pnl30d',
+    calmar: 'calmar',
+    conviction: 'conviction',
+    profitfactor: 'profitfactor',
+    name: '',
+    platform: ''
+};
+
 async function loadTraders() {
-    let url = '/api/traders?skip=0&take=100';
+    // Keep currentSort in sync with the dropdown BEFORE building the query so the server sorts.
+    const sortSelect = document.getElementById('tradersSort');
+    if (sortSelect && sortSelect.value !== currentSort) currentSort = sortSelect.value;
+
+    let url = '/api/traders?skip=0&take=200';
     if (currentPlatform !== 'All') url += `&platform=${currentPlatform}`;
-    
+
+    const serverSort = SERVER_SORT_KEYS[currentSort];
+    if (serverSort) url += `&sort=${encodeURIComponent(serverSort)}`;
+
     const hcCheckbox = document.getElementById('chk-highly-copyable');
     if (hcCheckbox && hcCheckbox.checked) {
         url += `&highlyCopyable=true`;
@@ -402,35 +476,19 @@ async function loadTraders() {
         url += `&trait=${encodeURIComponent(filterTrait.value)}`;
     }
 
-    let data = await api(url);
-    const tbody = document.getElementById('allTradersBody');
-    if (!data || !data.length) { tbody.innerHTML = '<tr><td colspan="11"><div class="empty-state"><p>No traders tracked yet.</p></div></td></tr>'; return; }
-
-    const sortSelect = document.getElementById('tradersSort');
-    if (sortSelect && sortSelect.value !== currentSort) currentSort = sortSelect.value;
-    
+    // Min-value filters are applied server-side so they are not blind to the fetch cut-off.
     const filterWinrateMin = parseFloat(document.getElementById('filterWinrateMin')?.value);
     const filterCopyabilityMin = parseFloat(document.getElementById('filterCopyabilityMin')?.value);
+    if (!isNaN(filterWinrateMin)) url += `&minWinRate=${filterWinrateMin}`;
+    if (!isNaN(filterCopyabilityMin)) url += `&minCopyability=${filterCopyabilityMin}`;
 
-    // Filtering
-    if (!isNaN(filterWinrateMin)) data = data.filter(t => t.winRate >= filterWinrateMin);
-    if (!isNaN(filterCopyabilityMin)) data = data.filter(t => t.copytradingCopyabilityScore >= filterCopyabilityMin);
+    let data = await api(url);
+    const tbody = document.getElementById('allTradersBody');
+    if (!data || !data.length) { tbody.innerHTML = '<tr><td colspan="10"><div class="empty-state"><p>No traders tracked yet.</p></div></td></tr>'; return; }
 
-    // Sorting
-    data.sort((a, b) => {
-        let valA, valB;
-        if (currentSort === 'score') { valA = a.combinedScore; valB = b.combinedScore; }
-        else if (currentSort === 'quality') { valA = a.copytradingQualityScore || 0; valB = b.copytradingQualityScore || 0; }
-        else if (currentSort === 'copyability') { valA = a.copytradingCopyabilityScore || 0; valB = b.copytradingCopyabilityScore || 0; }
-        else if (currentSort === 'winrate') { valA = a.winRate; valB = b.winRate; }
-        else if (currentSort === 'pnl') { valA = a.totalPnl; valB = b.totalPnl; }
-        else if (currentSort === 'trades') { valA = a.trades30d; valB = b.trades30d; }
-        else if (currentSort === 'name') { return a.displayName.localeCompare(b.displayName) * sortDirection; }
-        else if (currentSort === 'platform') { return a.platform.localeCompare(b.platform) * sortDirection; }
-        else { valA = a.combinedScore; valB = b.combinedScore; }
-        
-        return (valA < valB ? -1 : valA > valB ? 1 : 0) * sortDirection;
-    });
+    // Only name/platform need client-side ordering; every other key is already sorted by the server.
+    if (currentSort === 'name') data.sort((a, b) => a.displayName.localeCompare(b.displayName) * sortDirection);
+    else if (currentSort === 'platform') data.sort((a, b) => a.platform.localeCompare(b.platform) * sortDirection);
 
     tbody.innerHTML = data.map((t, i) => `
         <tr onclick="viewTrader(${t.id})">