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 (run.rank === 2) return "rank-silver";
-    if (run.rank === 3) return "rank-bronze";
+    if (rank === 1) return "rank-gold";
+    if (rank === 2) return "rank-silver";
+    if (rank === 3) return "rank-bronze";
     return "bg-secondary text-muted-foreground";
   };
 
   const getRankGlow = (rank: number) => {
-    if (run.rank === 1) return "glow-gold";
-    if (run.rank === 2) return "glow-silver";
-    if (run.rank === 3) return "glow-bronze";
+    if (rank === 1) return "glow-gold";
+    if (rank === 2) return "glow-silver";
+    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 */}
-      <td>
-        <span className="font-mono text-primary font-semibold flex justify-center">
-          {run.pb}
-        </span>
+      {/* Wins */}
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
+        {run.wins}
       </td>
 
-      {/* Category */}
-      <td className="py-4 px-4">
-        <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
-          {run.category}
-        </span>
+      {/* Podiums */}
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
+        {run.podiums}
       </td>
 
-      {/* Assisted */}
-      <td className="py-4 px-4">
-        <span className="px-2 py-1 rounded-md bg-secondary text-muted-foreground text-xs">
-          {run.assisted ? "Assisted" : "Unassisted"}
-        </span>
+      {/* Problems Completed */}
+      <td className="py-4 px-4 text-center font-mono font-semibold text-primary">
+        {run.problems_completed}
       </td>
 
-      {/* Runs */}
-      <td className="py-4 px-4 w-16 text-muted-foreground">{run.runsCount}</td>
-
-      {/* Problem */}
+      {/* Profile Link */}
       <td className="py-4 px-4">
-        <Link href="/" className="hover:text-primary flex items-center gap-1">
-          <LinkIcon className="w-3 h-3" /> {run.problem}
+        <Link
+          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 { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 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 [weekly, weeklyLoaded, weeklyError] = useAction(getWeeklyLeaderboard);
+  const [global] = useAction(getGlobalLeaderboard);
+  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">
-                  <p className="flex justify-center">Rank</p>
+                {/* Rank */}
+                <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>