feat: add GraphControls component and useGraphData hook for knowledge graph management

src/pages/Leaderboard.jsx

@@ -1,161 +1,415 @@
 import { useState, useEffect } from 'react';
-import { Trophy, Medal, Award, TrendingUp, Star, CheckSquare } from 'lucide-react';
 import { motion } from 'framer-motion';
+import { GitCommitHorizontal, Zap, CheckCircle2, Clock } from 'lucide-react';
 import Card from '../components/ui/Card';
 import Tag from '../components/ui/Tag';
 import { useApp } from '../store/AppContext';
 import * as db from '../lib/db';
 
+// ── Constants ────────────────────────────────────────────────────────────────
+
+const TOTAL_WEEKS = 26;
+
 const BADGE_RULES = [
-  { id: 'first_test', icon: Star, label: 'First Steps', condition: (u) => u.tests_completed > 0 },
-  { id: 'perfectionist', icon: Award, label: 'Perfectionist', condition: (u) => u.perfectScores > 0 },
-  { id: 'veteran', icon: Medal, label: 'Veteran', condition: (u) => u.tests_completed >= 5 },
+  { id: 'first_test',    label: 'first-steps',   condition: (u) => u.tests_completed > 0 },
+  { id: 'veteran',       label: 'veteran',        condition: (u) => u.tests_completed >= 5 },
+  { id: 'perfectionist', label: 'perfectionist',  condition: (u) => u.perfectScores > 0 },
 ];
 
+// ── Pure helpers ──────────────────────────────────────────────────────────────
+
+/**
+ * Streak = consecutive completed weeks counting backwards from the most
+ * recent completed week. Does not require knowing the user's personal
+ * week number, so it works for every member in one pass.
+ */
+function computeStreak(heatmap) {
+  let last = -1;
+  for (let i = TOTAL_WEEKS - 1; i >= 0; i--) {
+    if (heatmap[i] !== null) { last = i; break; }
+  }
+  if (last === -1) return 0;
+  let streak = 0;
+  for (let i = last; i >= 0; i--) {
+    if (heatmap[i] !== null) streak++;
+    else break;
+  }
+  return streak;
+}
+
+function timeAgo(dateStr) {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const h = Math.floor(diff / 3_600_000);
+  if (h < 1) return 'just now';
+  if (h < 24) return `${h}h ago`;
+  const d = Math.floor(h / 24);
+  if (d < 7) return `${d}d ago`;
+  return `${Math.floor(d / 7)}w ago`;
+}
+
+// ── Sub-components ────────────────────────────────────────────────────────────
+
+const SectionLabel = ({ text }) => (
+  <div className="flex items-center gap-3 mb-4">
+    <span className="font-mono text-xs text-fg-muted select-none">// {text}</span>
+    <div className="flex-1 h-px bg-bg-warm" />
+  </div>
+);
+
+const Stat = ({ value, label, icon, highlight = false }) => (
+  <div className="flex items-center gap-1.5">
+    <span className={highlight ? 'text-teal' : 'text-fg-muted'}>{icon}</span>
+    <span className={`font-mono text-sm font-bold ${highlight ? 'text-teal' : 'text-fg'}`}>
+      {value}
+    </span>
+    <span className="font-mono text-[10px] text-fg-subtle">{label}</span>
+  </div>
+);
+
+/**
+ * Single heatmap cell. Four intensity levels:
+ *   0 = not done (cream)  1 = done  2 = ≥70%  3 = 100% perfect
+ */
+const HeatCell = ({ score, week }) => {
+  const level =
+    score === null      ? 0 :
+    score === 100       ? 3 :
+    score >= 70         ? 2 : 1;
+
+  const bg = [
+    'bg-bg-warm',
+    'bg-teal/25',
+    'bg-teal/55',
+    'bg-teal',
+  ][level];
+
+  return (
+    <div
+      title={score === null ? `Week ${week}: not done` : `Week ${week}: ${score}%`}
+      className={`w-2.5 h-2.5 rounded-[3px] ${bg} transition-colors duration-300`}
+    />
+  );
+};
+
+const StatusPill = ({ streak, testsCompleted }) => {
+  if (testsCompleted === 0)
+    return <Tag className="text-[10px] font-mono">○ not started</Tag>;
+  if (streak >= 4)
+    return <Tag variant="success" className="text-[10px] font-mono">● on a roll 🔥</Tag>;
+  if (streak >= 1)
+    return <Tag variant="success" className="text-[10px] font-mono">● active</Tag>;
+  return <Tag className="text-[10px] font-mono">◌ getting started</Tag>;
+};
+
+// ── Main component ────────────────────────────────────────────────────────────
+
 const Leaderboard = () => {
   const { state } = useApp();
-  const [board, setBoard] = useState([]);
+  const [users, setUsers]   = useState([]);
+  const [feed, setFeed]     = useState([]);
+  const [loaded, setLoaded] = useState(false);
 
   useEffect(() => {
     const load = async () => {
-      const [leaderboardData, allUsers] = await Promise.all([
+      const [leaderboardData, allUsers, allResults] = await Promise.all([
         db.getLeaderboard(),
         db.getTeamMembers(),
+        db.getAllTestResults(),
       ]);
 
-      const nonAdminIds = allUsers.filter(u => u.role !== 'admin').map(u => u.id);
-      let data = leaderboardData.filter(entry => nonAdminIds.includes(entry.user_id));
+      const nonAdmins    = allUsers.filter(u => u.role !== 'admin');
+      const nonAdminIds  = new Set(nonAdmins.map(u => u.id));
 
-      // Ensure all non-admin users appear even if they have no points yet
-      const inBoard = new Set(data.map(e => e.user_id));
-      for (const user of allUsers) {
-        if (!inBoard.has(user.id) && user.role !== 'admin') {
-          data.push({ user_id: user.id, name: user.name, points: 0, tests_completed: 0, perfectScores: 0 });
-        }
+      // Group test_results by user_id, keyed by week_number → percentage
+      const resultsByUser = {};
+      for (const r of allResults) {
+        if (!nonAdminIds.has(r.user_id)) continue;
+        if (!resultsByUser[r.user_id]) resultsByUser[r.user_id] = {};
+        resultsByUser[r.user_id][r.week_number] = r.percentage;
       }
 
-      // Compute perfect scores per user
-      data = await Promise.all(data.map(async entry => {
-        let perfectScores = 0;
-        for (let w = 1; w <= state.weekNumber; w++) {
-          const result = await db.getQuizResult(entry.user_id, w);
-          if (result && result.percentage === 100) perfectScores++;
-        }
-        return { ...entry, perfectScores };
-      }));
+      // Build enriched user objects
+      const enriched = nonAdmins.map(user => {
+        const lb      = leaderboardData.find(e => e.user_id === user.id) || {};
+        const weekMap = resultsByUser[user.id] || {};
 
-      data.sort((a, b) => b.points - a.points);
-      setBoard(data);
+        // 26-element array: index 0 = week 1. null = not done, number = percentage
+        const heatmap = Array.from({ length: TOTAL_WEEKS }, (_, i) => {
+          const pct = weekMap[i + 1];
+          return pct !== undefined ? pct : null;
+        });
+
+        const streak       = computeStreak(heatmap);
+        const perfectScores = heatmap.filter(s => s === 100).length;
+
+        return {
+          id:              user.id,
+          name:            user.name,
+          points:          lb.points          || 0,
+          tests_completed: lb.tests_completed || 0,
+          heatmap,
+          streak,
+          perfectScores,
+        };
+      });
+
+      // Sort: highest active streak first, then most tests, then name
+      enriched.sort((a, b) =>
+        b.streak - a.streak ||
+        b.tests_completed - a.tests_completed ||
+        a.name.localeCompare(b.name)
+      );
+
+      // Recent activity feed: newest results across all non-admin users
+      const nameMap = Object.fromEntries(allUsers.map(u => [u.id, u.name]));
+      const recentFeed = allResults
+        .filter(r => nonAdminIds.has(r.user_id))
+        .slice(0, 10)
+        .map(r => ({
+          key:        `${r.user_id}-${r.week_number}`,
+          name:       nameMap[r.user_id] || 'Unknown',
+          week:       r.week_number,
+          score:      r.score,
+          total:      r.total,
+          percentage: r.percentage,
+          created:    r.created,
+        }));
+
+      setUsers(enriched);
+      setFeed(recentFeed);
+      setLoaded(true);
     };
 
-    load();
+    load().catch(console.error);
   }, [state.weekNumber]);
 
+  const me     = users.find(u => u.id === state.currentUser?.id);
+  const myWeek = state.weekNumber || 0;
+
+  // The user with the longest active streak gets the ★ marker
+  const topStreakId = users.find(u => u.streak > 0)?.id;
+
   return (
-    <div className="p-4 md:p-8 max-w-4xl mx-auto pb-24 md:pb-8">
-      <div className="text-center mb-12">
-        <Trophy size={56} className="mx-auto text-teal/30 mb-4" />
-        <h1 className="text-3xl md:text-4xl font-bold text-teal mb-3">Company Leaderboard</h1>
-        <p className="text-fg-muted">Compete, learn, and earn badges based on your weekly knowledge tests.</p>
-      </div>
+    <div className="p-4 md:p-8 max-w-3xl mx-auto pb-24 md:pb-8">
 
-      {board.length >= 3 && (
-        <div className="flex justify-center items-end gap-2 md:gap-6 mb-16 h-64 mt-12">
-          <motion.div initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.2 }} className="w-1/3 max-w-[140px] flex flex-col items-center">
-            <div className="relative mb-4">
-              <div className="w-16 h-16 rounded-full bg-slate-200 border-4 border-paper flex items-center justify-center text-slate-500 font-bold text-2xl shadow-lg z-10 relative">2</div>
-              <div className="absolute -inset-2 bg-slate-100 rounded-full z-0 blur-sm"></div>
-            </div>
-            <p className="font-bold text-center truncate w-full px-2">{board[1].name}</p>
-            <p className="text-teal font-medium text-sm">{board[1].points} pts</p>
-            <div className="w-full h-24 bg-gradient-to-t from-slate-200/50 to-transparent rounded-t-[var(--r-sm)] mt-4"></div>
-          </motion.div>
-
-          <motion.div initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} className="w-1/3 max-w-[160px] flex flex-col items-center z-10">
-            <div className="relative mb-6">
-              <div className="w-20 h-20 rounded-full bg-yellow-400 border-4 border-paper flex items-center justify-center text-yellow-800 font-bold text-3xl shadow-xl z-10 relative">1</div>
-              <div className="absolute -inset-3 bg-yellow-300 rounded-full z-0 blur-md opacity-60"></div>
-              <Trophy size={24} className="absolute -top-6 left-1/2 -translate-x-1/2 text-yellow-500" />
-            </div>
-            <p className="font-bold text-center text-lg truncate w-full px-2">{board[0].name}</p>
-            <p className="text-teal font-bold">{board[0].points} pts</p>
-            <div className="w-full h-32 bg-gradient-to-t from-yellow-400/20 to-transparent rounded-t-[var(--r-sm)] mt-4 border-t border-yellow-400/30"></div>
-          </motion.div>
-
-          <motion.div initial={{ y: 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.4 }} className="w-1/3 max-w-[140px] flex flex-col items-center">
-            <div className="relative mb-4">
-              <div className="w-16 h-16 rounded-full bg-amber-700 border-4 border-paper flex items-center justify-center text-white font-bold text-2xl shadow-lg z-10 relative">3</div>
-              <div className="absolute -inset-2 bg-amber-800/20 rounded-full z-0 blur-sm"></div>
-            </div>
-            <p className="font-bold text-center truncate w-full px-2">{board[2].name}</p>
-            <p className="text-teal font-medium text-sm">{board[2].points} pts</p>
-            <div className="w-full h-20 bg-gradient-to-t from-amber-700/10 to-transparent rounded-t-[var(--r-sm)] mt-4"></div>
-          </motion.div>
-        </div>
-      )}
-
-      <Card className="border border-bg-warm p-0 overflow-hidden">
-        <div className="divide-y divide-bg-warm">
-          {board.map((user, index) => {
-            const earnedBadges = BADGE_RULES.filter(r => r.condition(user));
-            const isMe = user.user_id === state.currentUser?.id;
-
-            return (
-              <motion.div
-                initial={{ opacity: 0, x: -20 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ delay: index * 0.05 }}
-                key={user.user_id}
-                className={`p-4 flex flex-col sm:flex-row sm:items-center gap-4 transition-colors ${isMe ? 'bg-teal/5 border-l-4 border-teal' : 'hover:bg-bg-warm/30'}`}
-              >
-                <div className="flex items-center gap-4 min-w-[200px]">
-                  <span className={`font-mono text-lg font-bold w-6 text-center ${
-                    index === 0 ? 'text-yellow-500' :
-                    index === 1 ? 'text-slate-400' :
-                    index === 2 ? 'text-amber-700' : 'text-fg-muted'
-                  }`}>
-                    #{index + 1}
-                  </span>
-                  <div>
-                    <p className="font-bold flex items-center gap-2">
-                      {user.name}
-                      {isMe && <Tag variant="accent" className="text-[10px]">You</Tag>}
-                    </p>
-                    <p className="text-xs text-fg-muted flex items-center gap-1">
-                      <CheckSquare size={12} /> {user.tests_completed || 0} tests completed
-                    </p>
-                  </div>
-                </div>
-
-                <div className="flex-1 flex sm:justify-center">
-                  <div className="flex items-center gap-1.5 text-teal font-bold bg-teal/10 px-3 py-1 rounded-full text-sm">
-                    <TrendingUp size={14} />
-                    {user.points} pts
-                  </div>
-                </div>
-
-                <div className="flex gap-2 sm:justify-end min-w-[120px]">
-                  {earnedBadges.length > 0 ? (
-                    earnedBadges.map(b => (
-                      <div key={b.id} title={b.label} className="w-8 h-8 rounded-full bg-bg-warm flex items-center justify-center text-teal shadow-sm border border-bg-warm">
-                        <b.icon size={14} />
-                      </div>
-                    ))
-                  ) : (
-                    <span className="text-xs text-fg-muted italic">No badges yet</span>
-                  )}
-                </div>
-              </motion.div>
-            );
-          })}
-
-          {board.length === 0 && (
-            <div className="p-8 text-center text-fg-muted">
-              No one is on the leaderboard yet. Be the first to complete a test!
-            </div>
+      {/* ── Page header ──────────────────────────────────────────────── */}
+      <div className="mb-10">
+        <p className="font-mono text-xs text-fg-muted mb-1 select-none">
+          // knowledge contributions
+        </p>
+        <div className="flex items-baseline gap-3 flex-wrap">
+          <h1 className="text-2xl md:text-3xl font-bold text-teal">Activity</h1>
+          {myWeek > 0 && (
+            <span className="font-mono text-xs text-fg-muted bg-bg-warm px-2 py-1 rounded-[var(--r-sm)]">
+              branch: week-{myWeek}/26
+            </span>
           )}
         </div>
-      </Card>
+      </div>
+
+      {/* ── Your activity ─────────────────────────────────────────────── */}
+      {me && (
+        <motion.section
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mb-8"
+        >
+          <SectionLabel text="your activity" />
+
+          <Card className="border border-bg-warm">
+            {/* Name row */}
+            <div className="flex items-start justify-between mb-5">
+              <div>
+                <p className="font-bold text-lg text-teal leading-tight">{me.name}</p>
+                <p className="font-mono text-[11px] text-fg-muted">
+                  @{me.name.toLowerCase().replace(/\s+/g, '.')}
+                </p>
+              </div>
+              <StatusPill streak={me.streak} testsCompleted={me.tests_completed} />
+            </div>
+
+            {/* Heatmap */}
+            <div className="mb-5">
+              <p className="font-mono text-[9px] text-fg-subtle uppercase tracking-widest mb-2 select-none">
+                26-week contributions
+              </p>
+              <div className="flex flex-wrap gap-[3px]">
+                {me.heatmap.map((score, i) => (
+                  <HeatCell key={i} score={score} week={i + 1} />
+                ))}
+              </div>
+              {/* Week labels */}
+              <div className="flex justify-between mt-1.5">
+                <span className="font-mono text-[9px] text-fg-subtle">wk 1</span>
+                <span className="font-mono text-[9px] text-fg-subtle">wk 26</span>
+              </div>
+            </div>
+
+            {/* Stats */}
+            <div className="flex gap-5 pt-3 border-t border-bg-warm flex-wrap">
+              <Stat
+                value={me.points}
+                label="commits"
+                icon={<GitCommitHorizontal size={12} />}
+              />
+              <Stat
+                value={`${me.streak}w`}
+                label="streak"
+                icon={<Zap size={12} />}
+                highlight={me.streak >= 3}
+              />
+              <Stat
+                value={me.perfectScores}
+                label="perfect"
+                icon={<CheckCircle2 size={12} />}
+                highlight={me.perfectScores > 0}
+              />
+            </div>
+          </Card>
+        </motion.section>
+      )}
+
+      {/* ── Team contributions ────────────────────────────────────────── */}
+      <section className="mb-8">
+        <SectionLabel text="team contributions" />
+
+        <Card className="border border-bg-warm p-0 overflow-hidden">
+          {loaded && users.length === 0 ? (
+            <p className="p-8 text-center font-mono text-sm text-fg-muted">
+              $ no contributions yet — start your first week
+            </p>
+          ) : (
+            <div className="divide-y divide-bg-warm">
+              {users.map((user, i) => {
+                const isMe    = user.id === state.currentUser?.id;
+                const badges  = BADGE_RULES.filter(r => r.condition(user));
+                const isTop   = user.id === topStreakId;
+                const pct     = Math.round((user.tests_completed / TOTAL_WEEKS) * 100);
+
+                return (
+                  <motion.div
+                    key={user.id}
+                    initial={{ opacity: 0, x: -8 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    transition={{ delay: i * 0.04 }}
+                    className={[
+                      'px-5 py-4',
+                      isMe
+                        ? 'bg-teal/5 border-l-4 border-teal'
+                        : 'hover:bg-bg-warm/40 transition-colors',
+                    ].join(' ')}
+                  >
+                    {/* Name + meta row */}
+                    <div className="flex items-center justify-between mb-2.5 gap-2">
+                      <div className="flex items-center gap-1.5 min-w-0">
+                        <span className="font-mono text-sm font-medium text-fg truncate">
+                          {user.name}
+                        </span>
+                        {isMe && (
+                          <span className="font-mono text-[10px] text-teal/70 flex-shrink-0">
+                            (you)
+                          </span>
+                        )}
+                        {isTop && !isMe && (
+                          <span
+                            title="Longest active streak"
+                            className="text-amber-400 text-xs flex-shrink-0"
+                          >
+                            ★
+                          </span>
+                        )}
+                        {isTop && isMe && (
+                          <span
+                            title="Longest active streak"
+                            className="text-amber-400 text-xs flex-shrink-0"
+                          >
+                            ★
+                          </span>
+                        )}
+                      </div>
+
+                      <div className="flex items-center gap-3 flex-shrink-0">
+                        <span className="font-mono text-[11px] text-fg-muted">
+                          {user.tests_completed}/{TOTAL_WEEKS}
+                        </span>
+                        <span
+                          className={`font-mono text-[11px] ${
+                            user.streak > 0 ? 'text-teal' : 'text-fg-subtle'
+                          }`}
+                        >
+                          {user.streak > 0 ? `streak: ${user.streak}w` : '─ ─'}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Progress bar */}
+                    <div className="h-1 bg-bg-warm rounded-full overflow-hidden mb-2.5">
+                      <motion.div
+                        initial={{ width: 0 }}
+                        animate={{ width: `${pct}%` }}
+                        transition={{ duration: 0.7, delay: i * 0.04 + 0.1, ease: 'easeOut' }}
+                        className={`h-full rounded-full ${isMe ? 'bg-teal' : 'bg-teal/45'}`}
+                      />
+                    </div>
+
+                    {/* Badges */}
+                    {badges.length > 0 && (
+                      <div className="flex gap-1.5 flex-wrap">
+                        {badges.map(b => (
+                          <span
+                            key={b.id}
+                            className="font-mono text-[10px] bg-teal/10 text-teal px-1.5 py-0.5 rounded"
+                          >
+                            [{b.label}]
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </motion.div>
+                );
+              })}
+            </div>
+          )}
+        </Card>
+      </section>
+
+      {/* ── Recent activity ───────────────────────────────────────────── */}
+      {feed.length > 0 && (
+        <section>
+          <SectionLabel text="recent activity" />
+
+          <Card className="border border-bg-warm">
+            <div className="space-y-2">
+              {feed.map((item, i) => (
+                <motion.div
+                  key={item.key}
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: i * 0.03 }}
+                  className="flex items-baseline gap-2 font-mono text-xs"
+                >
+                  <span className="text-teal/40 flex-shrink-0 select-none">›</span>
+                  <span className="text-fg font-medium flex-shrink-0">{item.name}</span>
+                  <span className="text-fg-subtle">completed</span>
+                  <span className="text-teal font-medium">week-{item.week}</span>
+                  <span className="text-fg-subtle">
+                    [{item.score}/{item.total}
+                    {item.percentage === 100 && (
+                      <span className="text-amber-400"> ★</span>
+                    )}
+                    ]
+                  </span>
+                  <span className="ml-auto flex-shrink-0 flex items-center gap-1 text-fg-subtle">
+                    <Clock size={10} />
+                    {timeAgo(item.created)}
+                  </span>
+                </motion.div>
+              ))}
+            </div>
+          </Card>
+        </section>
+      )}
+
     </div>
   );
 };