Working leaderboard

src/app/leaderboards/components/LeaderboardRow.tsx

@@ -1,25 +1,33 @@
-import { LeaderboardRank } from "@/modules/leaderboard/types";
 import { LinkIcon, Trophy } from "lucide-react";
 import Link from "next/link";
 
+interface GlobalLeaderboardUser {
+  rank: number;
+  user_id: string;
+  username: string;
+  wins: number;
+  podiums: number;
+  problems_completed: number;
+}
+
 const LeaderboardRow = ({
   index = 0,
   run,
 }: {
   index?: number;
-  run: LeaderboardRank;
+  run: GlobalLeaderboardUser;
 }) => {
   const getRankStyle = (rank: number) => {
-    if (run.rank === 1) return "rank-gold";
+    if (rank === 1) return "rank-gold";
-    if (run.rank === 2) return "rank-silver";
+    if (rank === 2) return "rank-silver";
-    if (run.rank === 3) return "rank-bronze";
+    if (rank === 3) return "rank-bronze";
     return "bg-secondary text-muted-foreground";
   };
 
   const getRankGlow = (rank: number) => {
-    if (run.rank === 1) return "glow-gold";
+    if (rank === 1) return "glow-gold";
-    if (run.rank === 2) return "glow-silver";
+    if (rank === 2) return "glow-silver";
-    if (run.rank === 3) return "glow-bronze";
+    if (rank === 3) return "glow-bronze";
     return "";
   };
 
@@ -27,7 +35,9 @@ const LeaderboardRow = ({
 
   return (
     <tr
-      className={`group border-b border-border hover:bg-secondary/50 transition-colors animate-fade-in opacity-0 ${isTopThree ? "bg-secondary/30" : ""}`}
+      className={`group border-b border-border hover:bg-secondary/50 transition-colors animate-fade-in opacity-0 ${
+        isTopThree ? "bg-secondary/30" : ""
+      }`}
       style={{
         animationDelay: `${index * 0.05}s`,
         animationFillMode: "forwards",
@@ -36,7 +46,9 @@ const LeaderboardRow = ({
       {/* Rank */}
       <td className="py-4 px-5 w-16">
         <div
-          className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(run.rank)} ${getRankGlow(run.rank)}`}
+          className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-sm font-bold ${getRankStyle(
+            run.rank
+          )} ${getRankGlow(run.rank)}`}
         >
           {isTopThree ? <Trophy className="h-4 w-4" /> : run.rank}
         </div>
@@ -46,41 +58,37 @@ const LeaderboardRow = ({
       <td>
         <div className="flex items-center gap-3">
           <span
-            className={`font-medium ${isTopThree ? "text-foreground" : "text-secondary-foreground"} group-hover:text-primary transition-colors`}
+            className={`font-medium ${
+              isTopThree ? "text-foreground" : "text-secondary-foreground"
+            } group-hover:text-primary transition-colors`}
           >
             {run.username}
           </span>
         </div>
       </td>
 
-      {/* Time */}
+      {/* Wins */}
-      <td>
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
-        <span className="font-mono text-primary font-semibold flex justify-center">
+        {run.wins}
-          {run.pb}
-        </span>
       </td>
 
-      {/* Category */}
+      {/* Podiums */}
-      <td className="py-4 px-4">
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
-        <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
+        {run.podiums}
-          {run.category}
-        </span>
       </td>
 
-      {/* Assisted */}
+      {/* Problems Completed */}
-      <td className="py-4 px-4">
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
-        <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
+        {run.problems_completed}
-          {run.assisted ? "Assisted" : "Unassisted"}
-        </span>
       </td>
 
-      {/* Runs */}
+      {/* Profile Link */}
-      <td className="py-4 px-4 w-16 text-muted-foreground">{run.runsCount}</td>
-
-      {/* Problem */}
       <td className="py-4 px-4">
-        <Link href="/" className="hover:text-primary flex items-center gap-1">
+        <Link
-          <LinkIcon className="w-3 h-3" /> {run.problem}
+          href={`/profile/${run.user_id}`}
+          className="hover:text-primary flex items-center gap-1"
+        >
+          <LinkIcon className="w-3 h-3" /> View Profile
         </Link>
       </td>
     </tr>

src/app/leaderboards/page.tsx

@@ -3,8 +3,7 @@
 import { Trophy, Calendar, Globe, TrendingUp } from "lucide-react";
 import { useState } from "react";
 
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Table,
@@ -13,7 +12,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Badge } from "@/components/ui/badge";
 import {
   Pagination,
   PaginationContent,
@@ -30,11 +28,10 @@ import {
   getGlobalLeaderboard,
   getWeeklyLeaderboard,
 } from "@/modules/leaderboard/actions";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
 export default function Leaderboards() {
-  const [global, globalLoaded, globalError] = useAction(getGlobalLeaderboard);
+  const [global] = useAction(getGlobalLeaderboard);
-  const [weekly, weeklyLoaded, weeklyError] = useAction(getWeeklyLeaderboard);
+  const [weekly] = useAction(getWeeklyLeaderboard);
 
   const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
   const data = (activeTab === "global" ? global : weekly) || [];
@@ -95,26 +92,6 @@ export default function Leaderboards() {
               </TabsTrigger>
             </TabsList>
           </Tabs>
-
-          <div className="flex flex-wrap gap-2">
-            <ToggleGroup variant="outline" type="single" defaultValue="any">
-              <ToggleGroupItem value="any" aria-label="any%">
-                any%
-              </ToggleGroupItem>
-              <ToggleGroupItem value="100" aria-label="100%">
-                100%
-              </ToggleGroupItem>
-            </ToggleGroup>
-
-            <ToggleGroup variant="outline" type="single">
-              <ToggleGroupItem value="true" aria-label="Assisted">
-                Assisted
-              </ToggleGroupItem>
-              <ToggleGroupItem value="false" aria-label="Unassisted">
-                Unassisted
-              </ToggleGroupItem>
-            </ToggleGroup>
-          </div>
         </div>
 
         {/* Table */}
@@ -122,28 +99,38 @@ export default function Leaderboards() {
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-16">
+                {/* Rank */}
-                  <p className="flex justify-center">Rank</p>
+                <TableHead className="py-4 px-5 w-16 text-center">
+                  Rank
                 </TableHead>
-                <TableHead className="w-52">
+
-                  <p className="flex justify-center">Runner</p>
+                {/* Runner / Username */}
+                <TableHead className="py-4 px-4 text-left">Runner</TableHead>
+
+                {/* Wins */}
+                <TableHead className="py-4 px-4 w-24 text-center">
+                  Wins
                 </TableHead>
-                <TableHead className="w-24">
+
-                  <p className="flex justify-center">Time</p>
+                {/* Podiums */}
+                <TableHead className="py-4 px-4 w-24 text-center">
+                  Podiums
                 </TableHead>
-                <TableHead className="w-16">
+
-                  <p className="flex justify-center">Category</p>
+                {/* Problems Completed */}
+                <TableHead className="py-4 px-4 text-center">
+                  Problems Completed
                 </TableHead>
-                <TableHead className="w-24">
+
-                  <p className="flex justify-center">Assisted</p>
+                {/* User ID (optional) */}
+                <TableHead className="py-4 px-4 hidden md:table-cell text-left text-xs text-muted-foreground">
+                  User ID
                 </TableHead>
-                <TableHead className="w-16">Runs</TableHead>
-                <TableHead>Problem</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {data.map((entry, i) => (
-                <LeaderboardRow key={entry.username} index={i} run={entry} />
+                <LeaderboardRow key={entry.rank} index={i} run={entry} />
               ))}
             </TableBody>
           </Table>

src/modules/leaderboard/actions.ts

@@ -1,194 +1,17 @@
 "use server";
 
+import { createClient } from "@/lib/supabase/server";
 import * as Core from "./core";
-import { LeaderboardRank } from "./types"; // updated interface
+import { LeaderboardUser } from "./types"; // updated interface
 
-export async function getGlobalLeaderboard(): Promise<LeaderboardRank[]> {
+export async function getGlobalLeaderboard(): Promise<LeaderboardUser[]> {
-  return [
+  const supabase = await createClient();
-    {
+
-      rank: 1,
+  return await Core.getGlobalLeaderboard(supabase);
-      username: "speedmaster_x",
-      pb: "2:34.21",
-      runsCount: 2341,
-      problem: "Fix broken login flow",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 2,
-      username: "algo_ninja",
-      pb: "2:38.54",
-      runsCount: 1876,
-      problem: "Refactor legacy API endpoints",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 3,
-      username: "clockwork",
-      pb: "2:41.02",
-      runsCount: 3102,
-      problem: "Optimize image upload pipeline",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 4,
-      username: "fastfingers99",
-      pb: "2:45.33",
-      runsCount: 987,
-      problem: "Build a mini chat server",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 5,
-      username: "recursion_queen",
-      pb: "2:47.89",
-      runsCount: 1543,
-      problem: "Fix CSS layout bug in dashboard",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 6,
-      username: "bitshifter",
-      pb: "2:52.11",
-      runsCount: 2109,
-      problem: "Implement JWT authentication",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 7,
-      username: "nullpointer",
-      pb: "2:54.67",
-      runsCount: 876,
-      problem: "Create REST endpoint for user data",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 8,
-      username: "stackattack",
-      pb: "2:58.23",
-      runsCount: 1234,
-      problem: "Fix off-by-one bug in sorting function",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 9,
-      username: "looplegend",
-      pb: "3:01.45",
-      runsCount: 654,
-      problem: "Optimize SQL query for reports",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 10,
-      username: "coderunner",
-      pb: "3:05.78",
-      runsCount: 1098,
-      problem: "Add file upload validation",
-      category: "any%",
-      assisted: false,
-    },
-  ];
 }
 
-export async function getWeeklyLeaderboard(): Promise<LeaderboardRank[]> {
+export async function getWeeklyLeaderboard(): Promise<LeaderboardUser[]> {
-  return [
+  const supabase = await createClient();
-    {
+
-      rank: 1,
+  return await Core.getWeeklyLeaderboard(supabase);
-      username: "weekly_warrior",
-      pb: "2:51.33",
-      runsCount: 156,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 2,
-      username: "speedmaster_x",
-      pb: "2:53.12",
-      runsCount: 89,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 3,
-      username: "newbie_grinder",
-      pb: "2:58.67",
-      runsCount: 234,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 4,
-      username: "algo_ninja",
-      pb: "3:02.45",
-      runsCount: 67,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 5,
-      username: "fresh_runner",
-      pb: "3:05.89",
-      runsCount: 45,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 6,
-      username: "practice_makes",
-      pb: "3:08.12",
-      runsCount: 112,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 7,
-      username: "splitmaster",
-      pb: "3:12.34",
-      runsCount: 78,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 8,
-      username: "grindtime",
-      pb: "3:15.56",
-      runsCount: 92,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 9,
-      username: "pb_hunter",
-      pb: "3:18.90",
-      runsCount: 56,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-    {
-      rank: 10,
-      username: "reset_king",
-      pb: "3:22.11",
-      runsCount: 187,
-      problem: "Build notifications API",
-      category: "any%",
-      assisted: false,
-    },
-  ];
 }

src/modules/leaderboard/core.ts

@@ -1,3 +1,21 @@
 "use server";
 
+import { SupabaseClient } from "@supabase/supabase-js";
 import "server-only";
+import { LeaderboardUser } from "./types";
+
+export async function getGlobalLeaderboard(
+  supabase: SupabaseClient,
+): Promise<LeaderboardUser[]> {
+  const { data, error } = await supabase.rpc("get_global_leaderboard");
+  if (error) throw error;
+  return data;
+}
+
+export async function getWeeklyLeaderboard(
+  supabase: SupabaseClient,
+): Promise<LeaderboardUser[]> {
+  const { data, error } = await supabase.rpc("get_weekly_leaderboard");
+  if (error) throw error;
+  return data;
+}

src/modules/leaderboard/types.ts

@@ -1,11 +1,8 @@
-export type Leaderboard = LeaderboardRank[];
+export interface LeaderboardUser {
-
-export interface LeaderboardRank {
   rank: number;
+  user_id: string;
   username: string;
-  pb: string;
+  wins: number;
-  runsCount: number;
+  podiums: number;
-  problem: string;
+  problems_completed: number;
-  category: "any%" | "100%";
-  assisted: boolean;
 }