+ {/* Level & Streak Header */}
+
+
+
+
+ )}
+
+ );
+}
+```
+
+## Implementing Leaderboards
+
+We'll build a tabbed interface that allows users to switch between activities (Run/Cycle/Swim) and scopes (Global vs. Local City).
+
+```tsx src/app/leaderboards/page.tsx [expandable]
+"use client";
+
+import { useState, useEffect } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { getLeaderboard } from "@/app/actions";
+import { Trophy, Globe, MapPin } from "lucide-react";
+
+export default function LeaderboardsPage() {
+ const [scope, setScope] = useState<"global" | "city">("global");
+ const [activeTab, setActiveTab] = useState("run");
+ const [data, setData] = useState([]);
+
+ useEffect(() => {
+ // 1. Determine the key based on the active tab and scope
+ // e.g., "weekly-distance-run" vs "weekly-distance-run-cities"
+ const baseKey = `weekly-distance-${activeTab}`;
+ const key = scope === "city" ? `${baseKey}-cities` : baseKey;
+
+ // 2. Determine city parameter (mocked for example)
+ const city = scope === "city" ? "London" : undefined;
+
+ getLeaderboard(key, city).then(setData);
+ }, [scope, activeTab]);
+
+ return (
+
+
+
+ {/* Stats Grid */}
+
+
+
+
+
+
+
+
+
+
+ Level {levelInfo.currentLevel.level}
+ {levelInfo.currentLevel.name}
+
+ {totalXP} XP
+ {levelInfo.nextLevel && (
+ {levelInfo.xpRequiredForNextLevel - levelInfo.xpInCurrentLevel} XP to {levelInfo.nextLevel.name}
+ )}
+
+
+ 0 ? "text-orange-500" : "text-muted-foreground"}`} />
+ {streakLength}
+ day streak
+
+
+
+
+
+
+ {/* Repeat for Cycle and Swim... */}
+
+
+ {/* Next Badge Teaser */}
+ {nextAchievement && (
+ {getMetricTotal("distance_run").toFixed(1)}
+ km run
+
+
+
+
+
+ Next Badge
+ {nextAchievement.name}
+{nextAchievement.description}
+
+
+
+ Run
+ Cycle
+ Swim
+
+
+
+ {data.map((entry, index) => (
+
+
+
+ );
+}
+```
+
+## Building the Achievements Page
+
+A dedicated space to show off badges is essential for long-term retention. We'll use the `stats.achievements` data to render a grid of badges, visually distinguishing between earned (colorful) and locked (grayscale) states.
+
+```tsx src/app/achievements/page.tsx [expandable]
+import { getUserStats, getUserIdFromCookies } from "@/app/actions";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Card, CardContent } from "@/components/ui/card";
+import { Award, Lock } from "lucide-react";
+
+export default async function AchievementsPage() {
+ const userId = await getUserIdFromCookies();
+ const stats = await getUserStats(userId ?? "");
+
+ // Helper to split achievements
+ const earned = stats?.achievements?.filter(a => a.achievedAt) ?? [];
+ const locked = stats?.achievements?.filter(a => !a.achievedAt) ?? [];
+
+ const AchievementCard = ({ achievement, isEarned }) => (
+
+
+
+
+ {/* Scope Toggle */}
+
+
+
+
+
+ {/* Scope Toggle */}
+
+
+
+
+
+
+ ))}
+ {index + 1}
+ {entry.userName || "Anonymous"}
+ {entry.value} {activeTab === "swim" ? "m" : "km"}
+
+ {isEarned ?
+ {achievement.name}
+ {achievement.description}
+
+
+
+
+
+
+ All
+ Earned
+ Locked
+
+
+
+ {[...earned, ...locked].map(a => (
+
+ {/* Repeat grid for "earned" and "locked" tabs... */}
+
+
+ );
+}
+```
+
+## Building the Profile Page
+
+Finally, the profile page brings it all together. It shows the user's "Lifetime Stats," their current XP progression, and allows them to update their settings (like their city).
+
+```tsx src/app/profile/page.tsx [expandable]
+import { getUserStats, getUserIdFromCookies } from "@/app/actions";
+import { getLevelInfo } from "@/lib/constants";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { CitySetting } from "@/components/city-setting";
+
+export default async function ProfilePage() {
+ const userId = await getUserIdFromCookies();
+ const stats = await getUserStats(userId ?? "");
+ const levelInfo = getLevelInfo(stats?.points?.total ?? 0);
+
+ // Helper to safely get metric totals
+ const getTotal = (key: string) => stats?.metrics?.find(m => m.key === key)?.current ?? 0;
+
+ return (
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+ {/* Lifetime Stats */}
+
+
+
+
+
+ );
+}
+```
+
+## The Result
+
+You now have a fully functional fitness gamification loop! Users can log workouts across multiple sports, level up their profile, earn badges, and compete in local leagues.
+
+
+
+
+ ME
+
+
+
+ {/* Progress Card */}
+ Athlete Profile
+{levelInfo.currentLevel.name}
+
+ Experience Points
+ {stats?.points?.total ?? 0} XP
+
+
+
+
+
+
+
+ {/* Repeat for other sports... */}
+
+
+ {/* Settings Component (Client Component) */}
+ {getTotal("distance_run").toFixed(1)}
+ km run
+ 
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..8992e2d
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,13 @@
+{
+ "name": "docs",
+ "version": "1.0.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "docs",
+ "version": "1.0.0",
+ "license": "ISC"
+ }
+ }
+}