feat: rich profile page with stats ring, tip history, fun stats

Donut chart showing exact/tendency/wrong distribution.
Scrollable tip history with point badges.
Fun stats: favorite tip, home win percentage.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/StatsRing.module.css

@@ -0,0 +1,35 @@
+.ring {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+}
+
+.svg {
+  width: 160px;
+  height: 160px;
+}
+
+.legend {
+  display: flex;
+  gap: 16px;
+  margin-top: 12px;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.legendItem {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+}

frontend/src/components/StatsRing.tsx

@@ -0,0 +1,65 @@
+import styles from './StatsRing.module.css';
+
+interface Props {
+  exact: number;
+  tendency: number;
+  wrong: number;
+  total: number;
+}
+
+export default function StatsRing({ exact, tendency, wrong, total }: Props) {
+  const radius = 55;
+  const circumference = 2 * Math.PI * radius;
+  const all = exact + tendency + wrong || 1;
+
+  const segments = [
+    { value: exact / all, color: 'var(--gold)', label: 'Exakt' },
+    { value: tendency / all, color: 'var(--success)', label: 'Tendenz' },
+    { value: wrong / all, color: 'var(--error)', label: 'Falsch' },
+  ];
+
+  let offset = 0;
+
+  return (
+    <div className={styles.ring}>
+      <svg viewBox="0 0 140 140" className={styles.svg}>
+        {/* Background circle */}
+        <circle cx="70" cy="70" r={radius} fill="none" stroke="var(--surface-high)" strokeWidth="12" />
+        {segments.map((seg, i) => {
+          if (seg.value === 0) return null;
+          const dashArray = `${seg.value * circumference} ${circumference}`;
+          const rotation = offset * 360 - 90;
+          offset += seg.value;
+          return (
+            <circle
+              key={i}
+              cx="70" cy="70" r={radius}
+              fill="none"
+              stroke={seg.color}
+              strokeWidth="12"
+              strokeDasharray={dashArray}
+              transform={`rotate(${rotation} 70 70)`}
+              strokeLinecap="round"
+            />
+          );
+        })}
+        <text x="70" y="65" textAnchor="middle" dominantBaseline="central"
+          fill="var(--text-primary)" fontSize="28" fontWeight="700">
+          {total}
+        </text>
+        <text x="70" y="85" textAnchor="middle"
+          fill="var(--text-secondary)" fontSize="11">
+          Punkte
+        </text>
+      </svg>
+      <div className={styles.legend}>
+        {segments.map((seg, i) => (
+          <span key={i} className={styles.legendItem}>
+            <span className={styles.dot} style={{ background: seg.color }} />
+            {seg.label}: {Math.round(seg.value * all)}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/ProfilePage.module.css

@@ -1,18 +1,42 @@
+/* ── Layout ── */
 .page { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
+
 .loading { display: flex; justify-content: center; padding: 60px; }
 .spinner { width: 32px; height: 32px; border: 3px solid var(--surface-high); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
 .spinnerSm { width: 14px; height: 14px; border: 2px solid var(--surface-high); border-top-color: var(--text-primary); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
 @keyframes spin { to { transform: rotate(360deg); } }
 .empty { color: var(--text-secondary); padding: 40px; text-align: center; }
 
-.heroCard { padding: 28px; display: flex; align-items: flex-start; gap: 20px; }
+/* ── Header card ── */
-.avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--primary-dim); border: 2px solid rgba(75,183,248,0.3); display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
+.heroCard {
-.heroInfo { flex: 1; min-width: 0; }
+  padding: 24px;
-.name { font-size: 22px; font-weight: 800; }
+  display: flex;
-.rankBadge { font-size: 13px; color: var(--gold); margin-top: 4px; font-weight: 600; }
+  align-items: flex-start;
+  gap: 20px;
+}
 
-/* Team-Feld */
+.avatar {
-.teamRow { margin-top: 8px; }
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: var(--primary-dim);
+  border: 2px solid rgba(75,183,248,0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Plus Jakarta Sans', sans-serif;
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--primary);
+  flex-shrink: 0;
+}
+
+.heroInfo { flex: 1; min-width: 0; }
+.name { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
+.rankBadge { font-size: 13px; color: var(--gold); font-weight: 600; margin-bottom: 8px; }
+
+/* ── Team field ── */
+.teamRow { margin-top: 4px; }
 
 .teamBtn {
   background: none;
@@ -85,22 +109,122 @@
 .teamMsg { font-size: 12px; margin-top: 4px; }
 .teamMsgOk { color: var(--success); }
 .teamMsgErr { color: var(--error); }
-.heroPoints { text-align: right; }
-.pointsVal { font-size: 40px; font-weight: 800; color: var(--primary); line-height: 1; display: block; }
-.pointsLbl { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
 
-.statsGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
+/* ── Section title ── */
-.statCard { padding: 20px; text-align: center; }
+.sectionTitle {
-.statVal { font-size: 36px; font-weight: 800; display: block; }
+  font-size: 14px;
-.statLbl { font-size: 13px; color: var(--text-secondary); display: block; margin-top: 4px; }
+  font-weight: 700;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin: 0 0 4px;
+}
 
-.accuracyCard { padding: 24px; }
+/* ── Stats ring card ── */
-.accuracyHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
+.ringCard { padding: 20px 24px 16px; }
-.accuracyLabel { font-size: 14px; color: var(--text-secondary); }
+
-.accuracyVal { font-size: 28px; font-weight: 800; color: var(--text-primary); }
+.accuracyRow {
-.bar { height: 10px; background: var(--surface-high); border-radius: 5px; overflow: hidden; display: flex; margin-bottom: 12px; }
+  display: flex;
-.barFill { height: 100%; transition: width 0.5s ease; }
+  justify-content: space-between;
-.exact { background: var(--gold); }
+  align-items: center;
-.tendency { background: var(--primary); }
+  margin-top: 8px;
-.barLegend { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); }
+  padding-top: 12px;
-.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
+  border-top: 1px solid var(--surface-high);
+}
+.accuracyLabel { font-size: 13px; color: var(--text-secondary); }
+.accuracyVal { font-size: 24px; font-weight: 800; color: var(--text-primary); }
+
+/* ── Tip history ── */
+.historyCard { padding: 20px 0 8px; overflow: hidden; }
+.historyCard .sectionTitle { padding: 0 20px; }
+
+.tipList {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  max-height: 340px;
+  overflow-y: auto;
+}
+
+.tipRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  font-size: 13px;
+  min-width: 0;
+}
+
+.tipRowAlt {
+  background: rgba(255,255,255,0.03);
+}
+
+.tipMatch {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.tipScore {
+  color: var(--text-secondary);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.pointBadge {
+  font-size: 12px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 12px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  background: var(--surface-high);
+  color: var(--text-muted);
+}
+
+.badgeExact   { background: rgba(255,196,0,0.15);  color: var(--gold); }
+.badgeTendency { background: rgba(34,197,94,0.15);  color: var(--success); }
+.badgeWrong   { background: rgba(239,68,68,0.12);  color: var(--error); }
+
+/* ── Fun stats ── */
+.funStats { display: flex; flex-direction: column; gap: 12px; }
+
+.funGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+@media (max-width: 400px) {
+  .funGrid { grid-template-columns: 1fr; }
+}
+
+.funCard {
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 4px;
+}
+
+.funIcon { font-size: 22px; line-height: 1; }
+
+.funLabel {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-top: 2px;
+}
+
+.funValue {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-primary);
+  word-break: break-all;
+}

frontend/src/pages/ProfilePage.tsx

@@ -1,23 +1,49 @@
 import { useState, useEffect } from 'react';
-import { api, UserStats } from '../api/client';
+import { api, UserStats, MyTip } from '../api/client';
+import StatsRing from '../components/StatsRing';
 import styles from './ProfilePage.module.css';
 
 function initials(name: string) {
   return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
 }
 
+function mostCommonTip(tips: MyTip[]): string {
+  const counts: Record<string, number> = {};
+  for (const t of tips) {
+    const key = `${t.tip_home}:${t.tip_away}`;
+    counts[key] = (counts[key] ?? 0) + 1;
+  }
+  let best = '';
+  let max = 0;
+  for (const [key, count] of Object.entries(counts)) {
+    if (count > max) { max = count; best = key; }
+  }
+  return best ? `${best} (${max}x getippt)` : '—';
+}
+
+function homeWinPct(tips: MyTip[]): number {
+  if (!tips.length) return 0;
+  const homeWins = tips.filter(t => t.tip_home > t.tip_away).length;
+  return Math.round((homeWins / tips.length) * 100);
+}
+
 export default function ProfilePage() {
-  const [stats, setStats]         = useState<UserStats | null>(null);
+  const [stats, setStats]           = useState<UserStats | null>(null);
-  const [loading, setLoading]     = useState(true);
+  const [tips, setTips]             = useState<MyTip[]>([]);
-  const [teamEdit, setTeamEdit]   = useState(false);
+  const [loading, setLoading]       = useState(true);
-  const [teamValue, setTeamValue] = useState('');
+  const [teamEdit, setTeamEdit]     = useState(false);
+  const [teamValue, setTeamValue]   = useState('');
   const [teamSaving, setTeamSaving] = useState(false);
-  const [teamMsg, setTeamMsg]     = useState<{ ok: boolean; text: string } | null>(null);
+  const [teamMsg, setTeamMsg]       = useState<{ ok: boolean; text: string } | null>(null);
 
   useEffect(() => {
-    api.getMyStats().then(s => {
+    Promise.all([
+      api.getMyStats(),
+      api.getMyTips(),
+    ]).then(([s, t]) => {
       setStats(s);
       setTeamValue(s.team ?? '');
+      setTips(t.tips);
     }).finally(() => setLoading(false));
   }, []);
 
@@ -41,19 +67,37 @@ export default function ProfilePage() {
   if (loading) return <div className={styles.loading}><div className={styles.spinner} /></div>;
   if (!stats)  return <div className={styles.empty}>Profil nicht verfügbar.</div>;
 
-  const evaluated = stats.exactCount + stats.tendencyCount + stats.wrongCount;
+  const evaluatedTips = tips.filter(t => t.points !== null);
+  const recentTips    = evaluatedTips.slice(0, 10);
+
+  const favTip        = mostCommonTip(tips);
+  const homePct       = homeWinPct(tips);
+
+  function pointBadgeClass(points: number | null) {
+    if (points === null) return '';
+    if (points >= 3) return styles.badgeExact;
+    if (points >= 1) return styles.badgeTendency;
+    return styles.badgeWrong;
+  }
+
+  function pointLabel(points: number | null) {
+    if (points === null) return '';
+    if (points >= 3) return `${points} Pkt ✓✓`;
+    if (points >= 1) return `${points} Pkt ✓`;
+    return `${points} Pkt ✗`;
+  }
 
   return (
     <div className={styles.page}>
 
-      {/* Hero card */}
+      {/* Header card */}
       <div className={`card ${styles.heroCard}`}>
         <div className={styles.avatar}>{initials(stats.fullName)}</div>
         <div className={styles.heroInfo}>
           <h1 className={`font-display ${styles.name}`}>{stats.fullName}</h1>
           {stats.rank && <div className={styles.rankBadge}>🏆 Platz {stats.rank}</div>}
 
-          {/* Team-Feld */}
+          {/* Team field */}
           <div className={styles.teamRow}>
             {teamEdit ? (
               <div className={styles.teamEditRow}>
@@ -64,12 +108,20 @@ export default function ProfilePage() {
                   placeholder="z. B. Vertrieb Süd"
                   maxLength={80}
                   autoFocus
-                  onKeyDown={e => { if (e.key === 'Enter') saveTeam(); if (e.key === 'Escape') setTeamEdit(false); }}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter') saveTeam();
+                    if (e.key === 'Escape') setTeamEdit(false);
+                  }}
                 />
                 <button className={styles.teamSaveBtn} onClick={saveTeam} disabled={teamSaving}>
                   {teamSaving ? <span className={styles.spinnerSm} /> : '✓'}
                 </button>
-                <button className={styles.teamCancelBtn} onClick={() => { setTeamEdit(false); setTeamValue(stats.team ?? ''); }}>✕</button>
+                <button
+                  className={styles.teamCancelBtn}
+                  onClick={() => { setTeamEdit(false); setTeamValue(stats.team ?? ''); }}
+                >
+                  ✕
+                </button>
               </div>
             ) : (
               <button className={styles.teamBtn} onClick={() => setTeamEdit(true)}>
@@ -86,49 +138,67 @@ export default function ProfilePage() {
             </div>
           )}
         </div>
-        <div className={styles.heroPoints}>
-          <span className={`font-display ${styles.pointsVal}`}>{stats.totalPoints}</span>
-          <span className={styles.pointsLbl}>Punkte</span>
-        </div>
       </div>
 
-      {/* Stats grid */}
+      {/* Stats donut ring */}
-      <div className={styles.statsGrid}>
+      <div className={`card ${styles.ringCard}`}>
-        <div className={`card ${styles.statCard}`}>
+        <h2 className={styles.sectionTitle}>Tipp-Statistik</h2>
-          <span className={`font-display ${styles.statVal} text-gold`}>{stats.exactCount}</span>
+        <StatsRing
-          <span className={styles.statLbl}>🎯 Exakt</span>
+          exact={stats.exactCount}
-        </div>
+          tendency={stats.tendencyCount}
-        <div className={`card ${styles.statCard}`}>
+          wrong={stats.wrongCount}
-          <span className={`font-display ${styles.statVal} text-primary`}>{stats.tendencyCount}</span>
+          total={stats.totalPoints}
-          <span className={styles.statLbl}>✓ Tendenz</span>
+        />
-        </div>
+        {stats.accuracy > 0 && (
-        <div className={`card ${styles.statCard}`}>
+          <div className={styles.accuracyRow}>
-          <span className={`font-display ${styles.statVal}`} style={{ color: 'var(--error)' }}>{stats.wrongCount}</span>
-          <span className={styles.statLbl}>✗ Falsch</span>
-        </div>
-        <div className={`card ${styles.statCard}`}>
-          <span className={`font-display ${styles.statVal}`}>{stats.tipsCount}</span>
-          <span className={styles.statLbl}>Tipps gesamt</span>
-        </div>
-      </div>
-
-      {/* Accuracy bar */}
-      {evaluated > 0 && (
-        <div className={`card ${styles.accuracyCard}`}>
-          <div className={styles.accuracyHeader}>
             <span className={styles.accuracyLabel}>Trefferquote</span>
             <span className={`font-display ${styles.accuracyVal}`}>{stats.accuracy}%</span>
           </div>
-          <div className={styles.bar}>
+        )}
-            <div className={`${styles.barFill} ${styles.exact}`}
+      </div>
-              style={{ width: `${(stats.exactCount / evaluated) * 100}%` }} />
+
-            <div className={`${styles.barFill} ${styles.tendency}`}
+      {/* Tip history */}
-              style={{ width: `${(stats.tendencyCount / evaluated) * 100}%` }} />
+      {recentTips.length > 0 && (
-          </div>
+        <div className={`card ${styles.historyCard}`}>
-          <div className={styles.barLegend}>
+          <h2 className={styles.sectionTitle}>Letzte Tipps</h2>
-            <span><span className={styles.dot} style={{ background: 'var(--gold)' }} /> Exakt</span>
+          <ul className={styles.tipList}>
-            <span><span className={styles.dot} style={{ background: 'var(--primary)' }} /> Tendenz</span>
+            {recentTips.map((tip, i) => (
-            <span><span className={styles.dot} style={{ background: 'var(--surface-high)' }} /> Falsch</span>
+              <li key={tip.match_id} className={`${styles.tipRow} ${i % 2 === 1 ? styles.tipRowAlt : ''}`}>
+                <span className={styles.tipMatch}>
+                  {tip.home_team_short} vs {tip.away_team_short}
+                </span>
+                <span className={styles.tipScore}>
+                  Tipp: {tip.tip_home}:{tip.tip_away}
+                </span>
+                <span className={`${styles.pointBadge} ${pointBadgeClass(tip.points)}`}>
+                  {pointLabel(tip.points)}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Fun stats */}
+      {tips.length > 0 && (
+        <div className={styles.funStats}>
+          <h2 className={styles.sectionTitle}>Fun Facts</h2>
+          <div className={styles.funGrid}>
+            <div className={`card ${styles.funCard}`}>
+              <span className={styles.funIcon}>🎯</span>
+              <span className={styles.funLabel}>Lieblings-Tipp</span>
+              <span className={styles.funValue}>{favTip}</span>
+            </div>
+            <div className={`card ${styles.funCard}`}>
+              <span className={styles.funIcon}>🏠</span>
+              <span className={styles.funLabel}>Heimsiege getippt</span>
+              <span className={styles.funValue}>{homePct}%</span>
+            </div>
+            <div className={`card ${styles.funCard}`}>
+              <span className={styles.funIcon}>📊</span>
+              <span className={styles.funLabel}>Tipps abgegeben</span>
+              <span className={styles.funValue}>{stats.tipsCount}</span>
+            </div>
           </div>
         </div>
       )}