Predictalytics/FIXPLAN-UI-Ranglisten.md

FIXPLAN Teil UI — Ranglisten & Showcases sichtbar/korrekt machen

Eigenständiger Plan für die Web-UI (src/Predictalytics.Api/wwwroot/). Von oben nach unten abarbeiten. Nach jeder Aufgabe im Browser gegen die laufende API prüfen und committen.

---

0. Regeln (zuerst lesen)

1. Backend-Test-Baseline bleibt grün. Vor Beginn einmal dotnet test src/Predictalytics.Application.Tests laufen lassen und die aktuelle Zahl (grün/übersprungen) notieren. Keine Aufgabe hier darf sie senken. Assertions bestehender Tests niemals ändern.
2. Reine Frontend-Änderungen (index.html, app.js, style.css) brauchen keine Migration. Die zwei kleinen API-Ergänzungen (U3) sind additiv und nullable/optional.
3. Nichts „drumherum" umbauen. Kleinste sichere Variante wählen. Bestehende Optik/Klassen (card, data-table, tier-badge, platform-select, CSS-Variablen) wiederverwenden, keine neuen Farbwelten erfinden.
4. Zahlen: Prozente 0–100, Beträge USD, Zeiten UTC — konsistent zum restlichen UI.
5. Nach jeder Aufgabe: Browser-Check gegen page-dashboard bzw. page-traders, dann git commit.

---

Kontext — was ist kaputt (im Code verifiziert 2026-07-23)

Der Commit „Add showcase leaderboards endpoint + sortable trader list" hat das Backend erweitert, aber das Frontend nicht nachgezogen:

• GET /api/traders/showcases liefert 7 kuratierte ShowcaseSection (copy_ready, smooth_operators, rising_stars, high_conviction, specialists, insider_watch, red_flags — siehe ShowcaseBuilder.cs). Kein Frontend-Code ruft das je auf → das Feature ist unsichtbar.
• GetTradersAsync(sort) unterstützt serverseitig pnl, pnl30d, winrate, copytrading, calmar, conviction, profitfactor (AnalyticsService.cs:184). Das Frontend übergibt keinen sort-Param, holt stattdessen take=100 in Default-Order und sortiert clientseitig (app.js:392,420). → Die aussagekräftigen Metriken (Calmar, Conviction, Profit-Faktor) sind nicht wählbar, und jede Sortierung reiht nur die ersten 100 der Default-Order um statt die echten Top-N zu zeigen.
• filterWinrateMin / filterCopyabilityMin filtern clientseitig nach dem take=100-Fetch (app.js:416) → ein passender Trader jenseits Rang 100 erscheint nie.
• Zwei Sort-Dropdowns schreiben beide currentSort: global #sortSelect (app.js:121) und lokal #tradersSort (index.html:209), mit unterschiedlichen Optionssätzen.
• Empty-State nutzt colspan="11" (app.js:407), die Tabelle hat aber 10 Spalten (index.html:270).

---

Aufgabe U1 — Showcases auf dem Dashboard rendern (größter Hebel)

Ziel: Die 7 kuratierten Sektionen sichtbar machen — je Sektion Titel, Beschreibung und die Top-Trader als klickbare Kacheln/Zeilen (Klick → viewTrader(id)).

• HTML: In index.html im #page-dashboard einen Container <div id="showcaseSections"></div> ergänzen (unter den bestehenden Dashboard-Karten, vor/nach „Top Traders" — Platzierung so, dass es nicht mit den bestehenden Kacheln kollidiert).
• JS: Neue Funktion loadShowcases() in app.js: - const sections = await api('/api/traders/showcases'); - Response-Shape (camelCase): [{ key, title, description, traders: [TraderDto, ...] }]. - Pro Sektion eine card rendern: title als Überschrift, description als page-subtitle-artiger Untertitel, darunter die Trader als kompakte Liste/Grid mit Name (+ 🤖 bei isSuspectedBot), Plattform, combinedScore, copytradingCopyabilityScore, totalPnl (via fmt.pnl), Trait-Chips (dieselbe Chip-Logik wie in loadTraders, getTraitDisplayName/Description/Class). - Leere Sektionen liefert das Backend gar nicht erst — kein Sonderfall nötig; aber wenn die ganze Antwort leer/null ist, freundlicher Empty-State. - Jede Trader-Zeile: onclick="viewTrader(${t.id})".
• loadShowcases() in loadDashboard() aufrufen (bzw. beim Aktivieren von page-dashboard).
• Optik: insider_watch und red_flags optisch abheben (z. B. Warn-Akzent für Red Flags über vorhandene CSS-Variablen --pnl-negative), aber im bestehenden Kartenstil bleiben.

U1 fertig, wenn: Dashboard zeigt die vom Backend gelieferten Sektionen; Klick auf einen Trader öffnet die Detailseite; keine Konsolenfehler. Commit: „UI-U1: render dashboard showcases".

---

Aufgabe U2 — Server-seitige Sortierung statt Client-Sort auf 100 Zeilen

Ziel: Die Rangliste zeigt die echten Top-N nach der gewählten Metrik, nicht nur eine Umsortierung der ersten 100.

• JS: In loadTraders() den gewählten Sort als Query-Param an die API hängen: url += '&sort=' + encodeURIComponent(serverSortKey). Mapping UI→Server: score→ (leer/default), winrate→winrate, copyability→copytrading, pnl→pnl, pnl30d→pnl30d, calmar→calmar, conviction→conviction, profitfactor→profitfactor. (Der Server ordnet absteigend — das ist für alle diese Metriken die sinnvolle Richtung.)
• JS: Den clientseitigen data.sort(...)-Block in loadTraders() entfernen bzw. nur noch als Fallback für die rein clientseitigen Keys name/platform behalten (die kennt der Server nicht).
• take von 100 auf einen sinnvollen Wert erhöhen (z. B. 200) — die serverseitige Sortierung liefert jetzt die richtige Reihenfolge, die Tabelle kann eine echte Bestenliste zeigen.
• Die Klick-Sortierung der Tabellenköpfe (setTraderSort, app.js:376) auf denselben Pfad umstellen: Sort setzen → loadTraders() (das nun serverseitig sortiert). Die ↕-Header behalten.

U2 fertig, wenn: Auswahl „Calmar/Conviction/Profit-Faktor" (nach U4) verändert die Reihenfolge sichtbar und zeigt Trader, die vorher nicht in den ersten 100 waren. Commit: „UI-U2: server-side leaderboard sort".

---

Aufgabe U3 — Min-Filter serverseitig (Winrate/Copyability) — additive API-Ergänzung

Ziel: Die Kennzahl-Mindestfilter dürfen nicht an der 100/200-Grenze abschneiden.

• API: IAnalyticsService.GetTradersAsync und die Implementierung (AnalyticsService.cs:165) um zwei optionale nullable Parameter erweitern: decimal? minWinRate = null, decimal? minCopyability = null. In der In-Memory-Filterkette (dort wird ohnehin schon highlyCopyable und traitFilter gefiltert) anwenden: if (minWinRate is > 0) traders = traders.Where(t => t.WinRate >= minWinRate).ToList(); und analog t.Analytics?.CopytradingCopyabilityScore >= minCopyability.
• Endpoint: In TraderEndpoints.cs die /api/traders-Route um die zwei Query-Parameter durchreichen.
• JS: In loadTraders() filterWinrateMin/filterCopyabilityMin als Query-Param senden statt clientseitig zu filtern; den clientseitigen Filter-Block entfernen.
• Test: Kleiner Service-Test (SQLite-Muster wie vorhandene AnalyticsService/Repository-Tests): drei Trader mit WinRate 40/60/80, minWinRate=55 → nur zwei zurück. Baseline bleibt grün.

U3 fertig, wenn: Ein hoher Mindest-Copyability-Wert zeigt auch Trader, die in der Default-Order weit hinten stehen. Commit: „UI-U3: server-side min-winrate/min-copyability filters".

---

Aufgabe U4 — Sort-Dropdown vereinheitlichen & vervollständigen

Ziel: Ein einziges, vollständiges Sort-Steuerelement für die Rangliste.

• HTML: #tradersSort (index.html:209) um die aussagekräftigen Metriken erweitern: pnl30d (PnL 30 T), calmar (Rendite/Drawdown), conviction (Conviction-Edge), profitfactor (Profit-Faktor), copyability (bereits da), score/winrate/pnl/name behalten.
• JS: Klarstellen, welches Dropdown die Traders-Seite steuert. #tradersSort bleibt maßgeblich für page-traders; das globale #sortSelect (falls es die Traders-Seite mitsteuert) entkoppeln oder auf denselben State spiegeln, sodass es kein widersprüchliches currentSort mehr gibt.
• Sicherstellen, dass Header-Klick (setTraderSort) und Dropdown denselben currentSort schreiben und beide loadTraders() (serverseitig, U2) auslösen.

U4 fertig, wenn: Alle Dropdown-Optionen sortieren korrekt (serverseitig), Header-Klick und Dropdown bleiben synchron. Commit: „UI-U4: unify + extend leaderboard sort control".

---

Aufgabe U5 — Kleinkram / Konsistenz

• colspan-Fix: Empty-State in loadTraders() (app.js:407) von colspan="11" auf die echte Spaltenzahl 10 korrigieren.
• Spalten-Parität: Prüfen, dass Tabellenkopf (index.html:270) und Zeilen-Template (app.js:435) dieselbe Spaltenzahl/-reihenfolge haben.
• Optional: Aktive Sortierspalte im Header visuell markieren (Pfeilrichtung ▲/▼ statt neutralem ↕).

U5 fertig, wenn: Leere Tabelle rendert sauber über die volle Breite; kein Spaltenversatz. Commit: „UI-U5: leaderboard table consistency".

---

Gesamt-Abnahme

1. dotnet build fehlerfrei; dotnet test = notierte Baseline weiter grün + neuer U3-Test grün.
2. Dashboard zeigt die 7 Showcase-Sektionen mit echten Tradern (U1).
3. Sortierung nach Calmar/Conviction/Profit-Faktor zeigt Trader jenseits der alten Top-100 (U2/U4).
4. Mindest-Filter schneiden nicht mehr an der Fetch-Grenze ab (U3).
5. Keine JS-Konsolenfehler; Tabelle ohne Spaltenversatz (U5).

Reihenfolge: U1 (Sichtbarkeit, reines Frontend) → U2 (Sort-Korrektheit) → U3 (Filter-Korrektheit, kleine API-Ergänzung) → U4 (Bedien-Konsistenz) → U5 (Politur).