From 9b82afb4a98ad2abdc586b40a261c9aad7183bab Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 10:15:17 +0000
Subject: [PATCH 01/18] feat: init league schema commit

---
 prisma/schema/leagues.prisma | 59 ++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 prisma/schema/leagues.prisma

diff --git a/prisma/schema/leagues.prisma b/prisma/schema/leagues.prisma
new file mode 100644
index 000000000..3a3255838
--- /dev/null
+++ b/prisma/schema/leagues.prisma
@@ -0,0 +1,59 @@
+enum LeagueName {
+    BRONZE
+    SILVER
+    GOLD
+    PLATINUM
+    DIAMOND
+}
+
+enum LeagueColor {
+    CD7F32
+    C0C0C0
+    FFD700
+    E5E4E2
+    b9f2ff
+}
+
+// schema for a league, no relation to a users as 
+// we have multiple instances of the same league
+model IndividualLeagueData {
+    // standard prisma fields
+    uid String @id @default(uuid())
+    createdAt DateTime @default(now())
+    updatedAt DateTime @updatedAt
+
+    // the name of the league
+    name LeagueName
+
+    // the league's color
+    color LeagueColor
+
+    // a brief description of the league (may or may not be used)
+    description String?
+
+    // the amount of xp required to be in the league
+    xpRequirement Int
+
+    // when the league resets
+    resetDate DateTime
+
+    // leagues such as the bronze league cannot be relegated
+    // as it's the lowest league
+    canBeRelegated Boolean @default(false)
+
+    // the league's icon
+    icon String?
+
+    Leagues Leagues[]
+}
+
+model Leagues {
+    // standard prisma fields
+    uid String @id @default(uuid())
+    createdAt DateTime @default(now())
+    updatedAt DateTime @updatedAt
+
+    // connect to the league data
+    leagueData IndividualLeagueData @relation(fields: [leagueDataUid], references: [uid])
+    leagueDataUid String
+}
\ No newline at end of file

From 8c7bbf944e0d0ff7c4b9d8800528a22bb7fd020c Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 10:25:53 +0000
Subject: [PATCH 02/18] feat: adding more fields to league data

---
 prisma/schema/leagues.prisma | 190 ++++++++++++++++++++++++++++++++++-
 1 file changed, 189 insertions(+), 1 deletion(-)

diff --git a/prisma/schema/leagues.prisma b/prisma/schema/leagues.prisma
index 3a3255838..794d58ab9 100644
--- a/prisma/schema/leagues.prisma
+++ b/prisma/schema/leagues.prisma
@@ -12,6 +12,26 @@ enum LeagueColor {
     FFD700
     E5E4E2
     b9f2ff
+    FF4D4D
+}
+
+enum LeagueAchievementType {
+    LEAGUE_WINNER
+    TOP_THREE
+    PROMOTION
+    PERFECT_WEEK
+    SURVIVAL
+    COMEBACK_KING
+    CONSISTENCY
+    SPEED_DEMON
+}
+
+enum LeaguePowerUp {
+    DOUBLE_XP
+    SHIELD
+    STREAK_SAVER
+    TIME_FREEZE
+    BONUS_POINTS
 }
 
 // schema for a league, no relation to a users as 
@@ -44,7 +64,26 @@ model IndividualLeagueData {
     // the league's icon
     icon String?
 
-    Leagues Leagues[]
+    // Minimum XP required to avoid relegation
+    minXpToAvoidRelegation Int @default(100)
+
+    // XP threshold for promotion
+    xpThresholdForPromotion Int?
+
+    // League rules
+    inactivityThresholdDays Int @default(7)
+    minWeeksBeforePromotion Int @default(1)
+
+    // Maximum number of power-ups allowed per week
+    maxPowerUpsPerWeek Int @default(3)
+
+    // Bonus XP multiplier for this league
+    xpMultiplier Float @default(1.0)
+
+    // Relations
+    leagues Leagues[]
+    achievements LeagueAchievement[]
+    history LeagueHistory[]
 }
 
 model Leagues {
@@ -56,4 +95,153 @@ model Leagues {
     // connect to the league data
     leagueData IndividualLeagueData @relation(fields: [leagueDataUid], references: [uid])
     leagueDataUid String
+
+    // Maximum number of users in a league group
+    maxUsers Int @default(50)
+
+    // Current number of users
+    currentUsers Int @default(0)
+
+    // Whether the league is accepting new users
+    isOpen Boolean @default(true)
+
+    // When this league group started
+    startDate DateTime @default(now())
+
+    // When this league group ends
+    endDate DateTime
+
+    // Top users who will be promoted
+    promotionCount Int @default(3)
+
+    // Bottom users who will be relegated
+    relegationCount Int @default(5)
+
+    // Weekly challenges for bonus XP
+    weeklyChallenge String?
+    weeklyChallengeXP Int?
+
+    // Relations
+    users UserLeague[]
+}
+
+model UserLeague {
+    uid String @id @default(uuid())
+    createdAt DateTime @default(now())
+    updatedAt DateTime @updatedAt
+
+    // The user in this league
+    user Users @relation(fields: [userUid], references: [uid])
+    userUid String
+
+    // The league instance they're in
+    league Leagues @relation(fields: [leagueUid], references: [uid])
+    leagueUid String
+
+    // Their position in the league
+    position Int?
+
+    // Their weekly XP in this league
+    weeklyXp Int @default(0)
+
+    // Whether they've been promoted/relegated
+    promoted Boolean @default(false)
+    relegated Boolean @default(false)
+
+    // When they joined this league
+    joinedAt DateTime @default(now())
+
+    // Gamification features
+    currentStreak Int @default(0)
+    bestPosition Int?
+    powerUpsRemaining Int @default(3)
+    activePowerUps LeaguePowerUp[]
+    powerUpExpiryTime DateTime?
+    
+    // Weekly challenge progress
+    challengeProgress Int @default(0)
+    challengeCompleted Boolean @default(false)
+
+    // Unique constraint
+    @@unique([userUid, leagueUid])
+}
+
+model LeagueAchievement {
+    uid String @id @default(uuid())
+    createdAt DateTime @default(now())
+
+    // The user who earned it
+    user Users @relation(fields: [userUid], references: [uid])
+    userUid String
+
+    // The league it was earned in
+    league IndividualLeagueData @relation(fields: [leagueDataUid], references: [uid])
+    leagueDataUid String
+
+    // Type of achievement
+    type LeagueAchievementType
+
+    // When it was earned
+    earnedAt DateTime @default(now())
+
+    // Additional data (e.g., position, score)
+    metadata Json?
+
+    // XP bonus awarded
+    xpBonus Int @default(0)
+}
+
+model LeagueHistory {
+    uid String @id @default(uuid())
+    createdAt DateTime @default(now())
+
+    // The user
+    user Users @relation(fields: [userUid], references: [uid])
+    userUid String
+
+    // The league
+    league IndividualLeagueData @relation(fields: [leagueDataUid], references: [uid])
+    leagueDataUid String
+
+    // Their final position
+    finalPosition Int
+
+    // Their final XP
+    finalXp Int
+
+    // Whether they were promoted/relegated
+    wasPromoted Boolean
+    wasRelegated Boolean
+
+    // The week this history is for
+    weekStartDate DateTime
+    weekEndDate DateTime
+
+    // Performance stats
+    averageXpPerDay Float?
+    powerUpsUsed Int @default(0)
+    challengesCompleted Int @default(0)
+}
+
+model Users {
+  // ... your existing fields ...
+
+  // Current league membership
+  currentLeague UserLeague?
+
+  // All league memberships
+  leagueMemberships UserLeague[]
+
+  // League achievements
+  leagueAchievements LeagueAchievement[]
+
+  // League history
+  leagueHistory LeagueHistory[]
+
+  // Last league activity
+  lastLeagueActivity DateTime?
+
+  // League related fields
+  totalLeagueWins Int @default(0)
+  highestLeagueReached LeagueName @default(BRONZE)
 }
\ No newline at end of file

From 677480c913487601979d2e55c91a9a60cbe107b6 Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 10:26:25 +0000
Subject: [PATCH 03/18] hotfix: user league relations

---
 prisma/schema/leagues.prisma | 23 -----------------------
 prisma/schema/users.prisma   |  6 ++++++
 2 files changed, 6 insertions(+), 23 deletions(-)

diff --git a/prisma/schema/leagues.prisma b/prisma/schema/leagues.prisma
index 794d58ab9..ef1b9694e 100644
--- a/prisma/schema/leagues.prisma
+++ b/prisma/schema/leagues.prisma
@@ -221,27 +221,4 @@ model LeagueHistory {
     averageXpPerDay Float?
     powerUpsUsed Int @default(0)
     challengesCompleted Int @default(0)
-}
-
-model Users {
-  // ... your existing fields ...
-
-  // Current league membership
-  currentLeague UserLeague?
-
-  // All league memberships
-  leagueMemberships UserLeague[]
-
-  // League achievements
-  leagueAchievements LeagueAchievement[]
-
-  // League history
-  leagueHistory LeagueHistory[]
-
-  // Last league activity
-  lastLeagueActivity DateTime?
-
-  // League related fields
-  totalLeagueWins Int @default(0)
-  highestLeagueReached LeagueName @default(BRONZE)
 }
\ No newline at end of file
diff --git a/prisma/schema/users.prisma b/prisma/schema/users.prisma
index 4e6771d38..72becd6de 100644
--- a/prisma/schema/users.prisma
+++ b/prisma/schema/users.prisma
@@ -73,6 +73,12 @@ model Users {
   roadmaps                    UserRoadmaps[]
   studyPathEnrollments        UserStudyPath[]
   userMissions                UserMission[]
+
+  LeagueHistory LeagueHistory[]
+
+  LeagueAchievement LeagueAchievement[]
+
+  UserLeague UserLeague[]
 }
 
 model Streaks {

From b6441ddce0a14b8011c529ec41bedec8b8cd7b4e Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 15:28:37 +0000
Subject: [PATCH 04/18] feat: creates league schema and applying to db

---
 .../migration.sql                             | 127 ++++++++++++++++++
 prisma/schema/leagues.prisma                  |  76 +++++------
 2 files changed, 162 insertions(+), 41 deletions(-)
 create mode 100644 prisma/migrations/20250309152758_init_league_schema_commit/migration.sql

diff --git a/prisma/migrations/20250309152758_init_league_schema_commit/migration.sql b/prisma/migrations/20250309152758_init_league_schema_commit/migration.sql
new file mode 100644
index 000000000..26c8e8f79
--- /dev/null
+++ b/prisma/migrations/20250309152758_init_league_schema_commit/migration.sql
@@ -0,0 +1,127 @@
+-- CreateEnum
+CREATE TYPE "LeagueName" AS ENUM ('BRONZE', 'SILVER', 'GOLD', 'PLATINUM', 'DIAMOND');
+
+-- CreateEnum
+CREATE TYPE "LeagueColor" AS ENUM ('CD7F32', 'C0C0C0', 'FFD700', 'E5E4E2', 'b9f2ff', 'FF4D4D');
+
+-- CreateEnum
+CREATE TYPE "LeagueAchievementType" AS ENUM ('LEAGUE_WINNER', 'TOP_THREE', 'PROMOTION', 'PERFECT_WEEK', 'SURVIVAL', 'COMEBACK_KING', 'CONSISTENCY', 'SPEED_DEMON');
+
+-- CreateEnum
+CREATE TYPE "LeaguePowerUp" AS ENUM ('DOUBLE_XP', 'SHIELD', 'STREAK_SAVER', 'TIME_FREEZE', 'BONUS_POINTS');
+
+-- CreateTable
+CREATE TABLE "IndividualLeagueData" (
+    "uid" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "name" "LeagueName" NOT NULL,
+    "color" "LeagueColor" NOT NULL,
+    "description" TEXT,
+    "xpRequirement" INTEGER NOT NULL,
+    "resetDate" TIMESTAMP(3) NOT NULL,
+    "canBeRelegated" BOOLEAN NOT NULL DEFAULT false,
+    "icon" TEXT,
+    "inactivityThresholdDays" INTEGER DEFAULT 7,
+    "maxPowerUpsPerWeek" INTEGER NOT NULL DEFAULT 3,
+    "xpMultiplier" DOUBLE PRECISION NOT NULL DEFAULT 1.0,
+
+    CONSTRAINT "IndividualLeagueData_pkey" PRIMARY KEY ("uid")
+);
+
+-- CreateTable
+CREATE TABLE "Leagues" (
+    "uid" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "leagueDataUid" TEXT NOT NULL,
+    "maxUsers" INTEGER NOT NULL DEFAULT 30,
+    "currentUsers" INTEGER NOT NULL DEFAULT 0,
+    "startDate" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "endDate" TIMESTAMP(3) NOT NULL,
+    "promotionCount" INTEGER NOT NULL DEFAULT 3,
+    "relegationCount" INTEGER NOT NULL DEFAULT 5,
+    "weeklyChallenge" TEXT,
+    "weeklyChallengeXP" INTEGER,
+
+    CONSTRAINT "Leagues_pkey" PRIMARY KEY ("uid")
+);
+
+-- CreateTable
+CREATE TABLE "UserLeague" (
+    "uid" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "userUid" TEXT NOT NULL,
+    "leagueUid" TEXT NOT NULL,
+    "position" INTEGER,
+    "weeklyXp" INTEGER NOT NULL DEFAULT 0,
+    "promoted" BOOLEAN NOT NULL DEFAULT false,
+    "relegated" BOOLEAN NOT NULL DEFAULT false,
+    "joinedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "currentStreak" INTEGER NOT NULL DEFAULT 0,
+    "bestPosition" INTEGER,
+    "activePowerUps" "LeaguePowerUp"[],
+    "powerUpExpiryTime" TIMESTAMP(3),
+    "challengeProgress" INTEGER NOT NULL DEFAULT 0,
+    "challengeCompleted" BOOLEAN NOT NULL DEFAULT false,
+
+    CONSTRAINT "UserLeague_pkey" PRIMARY KEY ("uid")
+);
+
+-- CreateTable
+CREATE TABLE "LeagueAchievement" (
+    "uid" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "userUid" TEXT NOT NULL,
+    "leagueDataUid" TEXT NOT NULL,
+    "type" "LeagueAchievementType" NOT NULL,
+    "earnedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "metadata" JSONB,
+    "xpBonus" INTEGER NOT NULL DEFAULT 0,
+
+    CONSTRAINT "LeagueAchievement_pkey" PRIMARY KEY ("uid")
+);
+
+-- CreateTable
+CREATE TABLE "LeagueHistory" (
+    "uid" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "userUid" TEXT NOT NULL,
+    "leagueDataUid" TEXT NOT NULL,
+    "finalPosition" INTEGER NOT NULL,
+    "finalXp" INTEGER NOT NULL,
+    "wasPromoted" BOOLEAN NOT NULL,
+    "wasRelegated" BOOLEAN NOT NULL,
+    "weekStartDate" TIMESTAMP(3) NOT NULL,
+    "weekEndDate" TIMESTAMP(3) NOT NULL,
+    "averageXpPerDay" DOUBLE PRECISION,
+    "powerUpsUsed" INTEGER NOT NULL DEFAULT 0,
+    "challengesCompleted" INTEGER NOT NULL DEFAULT 0,
+
+    CONSTRAINT "LeagueHistory_pkey" PRIMARY KEY ("uid")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserLeague_userUid_leagueUid_key" ON "UserLeague"("userUid", "leagueUid");
+
+-- AddForeignKey
+ALTER TABLE "Leagues" ADD CONSTRAINT "Leagues_leagueDataUid_fkey" FOREIGN KEY ("leagueDataUid") REFERENCES "IndividualLeagueData"("uid") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserLeague" ADD CONSTRAINT "UserLeague_userUid_fkey" FOREIGN KEY ("userUid") REFERENCES "Users"("uid") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserLeague" ADD CONSTRAINT "UserLeague_leagueUid_fkey" FOREIGN KEY ("leagueUid") REFERENCES "Leagues"("uid") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "LeagueAchievement" ADD CONSTRAINT "LeagueAchievement_userUid_fkey" FOREIGN KEY ("userUid") REFERENCES "Users"("uid") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "LeagueAchievement" ADD CONSTRAINT "LeagueAchievement_leagueDataUid_fkey" FOREIGN KEY ("leagueDataUid") REFERENCES "IndividualLeagueData"("uid") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "LeagueHistory" ADD CONSTRAINT "LeagueHistory_userUid_fkey" FOREIGN KEY ("userUid") REFERENCES "Users"("uid") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "LeagueHistory" ADD CONSTRAINT "LeagueHistory_leagueDataUid_fkey" FOREIGN KEY ("leagueDataUid") REFERENCES "IndividualLeagueData"("uid") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/prisma/schema/leagues.prisma b/prisma/schema/leagues.prisma
index ef1b9694e..b929e098e 100644
--- a/prisma/schema/leagues.prisma
+++ b/prisma/schema/leagues.prisma
@@ -16,22 +16,22 @@ enum LeagueColor {
 }
 
 enum LeagueAchievementType {
-    LEAGUE_WINNER
-    TOP_THREE
-    PROMOTION
-    PERFECT_WEEK
-    SURVIVAL
-    COMEBACK_KING
-    CONSISTENCY
-    SPEED_DEMON
+    LEAGUE_WINNER // did the user win their league last week
+    TOP_THREE // did the user finish in the top 3 of their league last week
+    PROMOTION // did the user get promoted last week
+    PERFECT_WEEK // did the user get 100% of the bonus xp last week
+    SURVIVAL // did the user avoid relegation last week
+    COMEBACK_KING // did the user come back from the bottom of the league last week
+    CONSISTENCY // did the user finish in the top 3 of their league for 3 weeks in a row
+    SPEED_DEMON // did the user get to the top of the league in the shortest time possible
 }
 
 enum LeaguePowerUp {
-    DOUBLE_XP
-    SHIELD
-    STREAK_SAVER
-    TIME_FREEZE
-    BONUS_POINTS
+    DOUBLE_XP // double the users xp for the week
+    SHIELD // prevent the user= from being relegated for the week
+    STREAK_SAVER // prevent the user from being relegated for the next 3 weeks
+    TIME_FREEZE // freeze the users league for the week
+    BONUS_POINTS // give the user bonus xp for the week
 }
 
 // schema for a league, no relation to a users as 
@@ -45,7 +45,7 @@ model IndividualLeagueData {
     // the name of the league
     name LeagueName
 
-    // the league's color
+    // the league's color (used for styling)
     color LeagueColor
 
     // a brief description of the league (may or may not be used)
@@ -54,7 +54,7 @@ model IndividualLeagueData {
     // the amount of xp required to be in the league
     xpRequirement Int
 
-    // when the league resets
+    // when the league resets (usually weekly)
     resetDate DateTime
 
     // leagues such as the bronze league cannot be relegated
@@ -64,28 +64,24 @@ model IndividualLeagueData {
     // the league's icon
     icon String?
 
-    // Minimum XP required to avoid relegation
-    minXpToAvoidRelegation Int @default(100)
-
-    // XP threshold for promotion
-    xpThresholdForPromotion Int?
-
-    // League rules
-    inactivityThresholdDays Int @default(7)
-    minWeeksBeforePromotion Int @default(1)
+    // league rules (may or may not be used)
+    inactivityThresholdDays Int? @default(7)
 
     // Maximum number of power-ups allowed per week
     maxPowerUpsPerWeek Int @default(3)
 
-    // Bonus XP multiplier for this league
+    // bonus XP multiplier for this league
     xpMultiplier Float @default(1.0)
 
-    // Relations
+    // relations
     leagues Leagues[]
     achievements LeagueAchievement[]
     history LeagueHistory[]
 }
 
+// we can have multiple instances of the same league
+// e.g. bronze league, silver league, gold league, etc.
+// this is so the same league can be used for different groups of users
 model Leagues {
     // standard prisma fields
     uid String @id @default(uuid())
@@ -96,35 +92,33 @@ model Leagues {
     leagueData IndividualLeagueData @relation(fields: [leagueDataUid], references: [uid])
     leagueDataUid String
 
-    // Maximum number of users in a league group
-    maxUsers Int @default(50)
+    // maximum number of users in the league
+    maxUsers Int @default(30)
 
-    // Current number of users
+    // current number of users in the league
     currentUsers Int @default(0)
 
-    // Whether the league is accepting new users
-    isOpen Boolean @default(true)
-
-    // When this league group started
+    // when this league group started
     startDate DateTime @default(now())
 
     // When this league group ends
     endDate DateTime
 
-    // Top users who will be promoted
+    // how many users will be promoted
     promotionCount Int @default(3)
 
-    // Bottom users who will be relegated
+    // how many users will be relegated
     relegationCount Int @default(5)
 
-    // Weekly challenges for bonus XP
+    // weekly challenges for bonus xp
     weeklyChallenge String?
     weeklyChallengeXP Int?
 
-    // Relations
+    // relations
     users UserLeague[]
 }
 
+// the data tied to the user in the league
 model UserLeague {
     uid String @id @default(uuid())
     createdAt DateTime @default(now())
@@ -138,10 +132,10 @@ model UserLeague {
     league Leagues @relation(fields: [leagueUid], references: [uid])
     leagueUid String
 
-    // Their position in the league
+    // users position in the league
     position Int?
 
-    // Their weekly XP in this league
+    // users weekly xp in this league
     weeklyXp Int @default(0)
 
     // Whether they've been promoted/relegated
@@ -151,10 +145,8 @@ model UserLeague {
     // When they joined this league
     joinedAt DateTime @default(now())
 
-    // Gamification features
     currentStreak Int @default(0)
     bestPosition Int?
-    powerUpsRemaining Int @default(3)
     activePowerUps LeaguePowerUp[]
     powerUpExpiryTime DateTime?
     
@@ -166,6 +158,7 @@ model UserLeague {
     @@unique([userUid, leagueUid])
 }
 
+// FUTURE PROOFING - may not be used initially
 model LeagueAchievement {
     uid String @id @default(uuid())
     createdAt DateTime @default(now())
@@ -191,6 +184,7 @@ model LeagueAchievement {
     xpBonus Int @default(0)
 }
 
+// FUTURE PROOFING - may not be used initially
 model LeagueHistory {
     uid String @id @default(uuid())
     createdAt DateTime @default(now())

From 1e48ebcaa5cacd19754d3654d4599ad98db9e69f Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 15:50:03 +0000
Subject: [PATCH 05/18] adds admin area w/ dummy data

---
 src/app/(app)/admin/layout.tsx                |  30 ++++
 .../(app)/admin/leagues/achievements/page.tsx | 145 ++++++++++++++++
 src/app/(app)/admin/leagues/list/page.tsx     | 160 ++++++++++++++++++
 src/app/(app)/admin/leagues/page.tsx          | 132 +++++++++++++++
 src/components/ui/icons/icons/map.tsx         |  32 ++++
 5 files changed, 499 insertions(+)
 create mode 100644 src/app/(app)/admin/leagues/achievements/page.tsx
 create mode 100644 src/app/(app)/admin/leagues/list/page.tsx
 create mode 100644 src/app/(app)/admin/leagues/page.tsx
 create mode 100644 src/components/ui/icons/icons/map.tsx

diff --git a/src/app/(app)/admin/layout.tsx b/src/app/(app)/admin/layout.tsx
index 972bfae9d..bfdac25b0 100644
--- a/src/app/(app)/admin/layout.tsx
+++ b/src/app/(app)/admin/layout.tsx
@@ -85,6 +85,36 @@ export default async function AdminLayout({ children }: { children: React.ReactN
                   </div>
                 </div>
               </li>
+              <li className="relative group">
+                <Link
+                  href="/admin/leagues"
+                  className="text-gray-300 hover:text-white transition-colors"
+                >
+                  Leagues
+                </Link>
+                <div className="absolute left-0 mt-2 w-48 bg-black-75 border border-black-50 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
+                  <div className="py-1">
+                    <Link
+                      href="/admin/leagues"
+                      className="block px-4 py-2 text-sm text-gray-300 hover:bg-black-50 hover:text-white"
+                    >
+                      Dashboard
+                    </Link>
+                    <Link
+                      href="/admin/leagues/list"
+                      className="block px-4 py-2 text-sm text-gray-300 hover:bg-black-50 hover:text-white"
+                    >
+                      All Leagues
+                    </Link>
+                    <Link
+                      href="/admin/leagues/achievements"
+                      className="block px-4 py-2 text-sm text-gray-300 hover:bg-black-50 hover:text-white"
+                    >
+                      Achievements
+                    </Link>
+                  </div>
+                </div>
+              </li>
               <li>
                 <Link
                   href="/dashboard"
diff --git a/src/app/(app)/admin/leagues/achievements/page.tsx b/src/app/(app)/admin/leagues/achievements/page.tsx
new file mode 100644
index 000000000..3c1899ff3
--- /dev/null
+++ b/src/app/(app)/admin/leagues/achievements/page.tsx
@@ -0,0 +1,145 @@
+import { Metadata } from 'next';
+import Link from 'next/link';
+import AdminContainer from '@/components/app/admin/admin-container';
+import { ArrowLeft, Award, Trophy, Users, Clock, Star, Shield, Zap } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+
+export const metadata: Metadata = {
+  title: 'TechBlitz | League Achievements',
+  description: 'Manage league achievements and rewards',
+};
+
+const MOCK_ACHIEVEMENTS = [
+  {
+    id: 'league-winner',
+    name: 'League Winner',
+    description: 'Finish first in your league',
+    icon: Trophy,
+    xpBonus: 1000,
+    type: 'LEAGUE_WINNER',
+    timesAwarded: 25,
+  },
+  {
+    id: 'top-three',
+    name: 'Top Three',
+    description: 'Finish in the top 3 of your league',
+    icon: Star,
+    xpBonus: 500,
+    type: 'TOP_THREE',
+    timesAwarded: 75,
+  },
+  {
+    id: 'promotion',
+    name: 'Promotion',
+    description: 'Get promoted to a higher league',
+    icon: Award,
+    xpBonus: 750,
+    type: 'PROMOTION',
+    timesAwarded: 100,
+  },
+  {
+    id: 'perfect-week',
+    name: 'Perfect Week',
+    description: 'Complete all daily challenges for a week',
+    icon: Star,
+    xpBonus: 1500,
+    type: 'PERFECT_WEEK',
+    timesAwarded: 50,
+  },
+  {
+    id: 'survival',
+    name: 'Survival',
+    description: 'Avoid relegation when in bottom 5',
+    icon: Shield,
+    xpBonus: 300,
+    type: 'SURVIVAL',
+    timesAwarded: 150,
+  },
+  {
+    id: 'comeback-king',
+    name: 'Comeback King',
+    description: 'Rise from bottom 3 to top 3',
+    icon: Zap,
+    xpBonus: 1000,
+    type: 'COMEBACK_KING',
+    timesAwarded: 15,
+  },
+  {
+    id: 'consistency',
+    name: 'Consistency',
+    description: 'Stay in top 3 for three weeks',
+    icon: Clock,
+    xpBonus: 2000,
+    type: 'CONSISTENCY',
+    timesAwarded: 10,
+  },
+  {
+    id: 'speed-demon',
+    name: 'Speed Demon',
+    description: 'Reach top position in record time',
+    icon: Zap,
+    xpBonus: 1500,
+    type: 'SPEED_DEMON',
+    timesAwarded: 5,
+  },
+];
+
+export default async function LeagueAchievementsPage() {
+  return (
+    <AdminContainer>
+      <div className="max-w-7xl mx-auto">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-2xl font-bold text-white">League Achievements</h1>
+          <div className="flex space-x-3">
+            <Link
+              href="/admin/leagues"
+              className="text-sm px-4 py-2 bg-black-75 hover:bg-black-50 text-white rounded-md transition-colors flex items-center gap-2"
+            >
+              <ArrowLeft className="h-4 w-4" /> Back to Dashboard
+            </Link>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {MOCK_ACHIEVEMENTS.map((achievement) => {
+            const Icon = achievement.icon;
+            return (
+              <Card key={achievement.id} className="bg-black-75 border-black-50 p-6">
+                <div className="flex items-start gap-4">
+                  <div className="p-3 bg-black-50 rounded-lg">
+                    <Icon className="h-6 w-6 text-accent" />
+                  </div>
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between">
+                      <h3 className="text-lg font-semibold text-white">{achievement.name}</h3>
+                      <span className="text-accent">+{achievement.xpBonus} XP</span>
+                    </div>
+                    <p className="text-gray-400 mt-1">{achievement.description}</p>
+                    <div className="flex items-center gap-4 mt-4">
+                      <div>
+                        <p className="text-sm text-gray-400">Times Awarded</p>
+                        <p className="text-white">{achievement.timesAwarded}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-gray-400">Type</p>
+                        <p className="text-white">{achievement.type}</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-4 pt-4 border-t border-black-50 flex justify-end">
+                  <Link
+                    href={`/admin/leagues/achievements/${achievement.id}`}
+                    className="text-sm text-accent hover:text-accent/80"
+                  >
+                    View Details
+                  </Link>
+                </div>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+    </AdminContainer>
+  );
+}
diff --git a/src/app/(app)/admin/leagues/list/page.tsx b/src/app/(app)/admin/leagues/list/page.tsx
new file mode 100644
index 000000000..68094f87f
--- /dev/null
+++ b/src/app/(app)/admin/leagues/list/page.tsx
@@ -0,0 +1,160 @@
+import { Metadata } from 'next';
+import Link from 'next/link';
+import AdminContainer from '@/components/app/admin/admin-container';
+import { ArrowLeft, Users, Trophy } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+
+export const metadata: Metadata = {
+  title: 'TechBlitz | League List',
+  description: 'View and manage all leagues',
+};
+
+const MOCK_LEAGUES = [
+  {
+    id: 'bronze',
+    name: 'Bronze League',
+    color: 'CD7F32',
+    description: 'Entry level league for new users',
+    xpRequirement: 0,
+    xpMultiplier: 1.0,
+    currentUsers: 50,
+    maxUsers: 100,
+    powerUpsPerWeek: 1,
+    weeklyChallenge: 'Complete 5 challenges',
+    weeklyChallengeXP: 100,
+  },
+  {
+    id: 'silver',
+    name: 'Silver League',
+    color: 'C0C0C0',
+    description: 'Intermediate league for consistent users',
+    xpRequirement: 1000,
+    xpMultiplier: 1.2,
+    currentUsers: 40,
+    maxUsers: 75,
+    powerUpsPerWeek: 2,
+    weeklyChallenge: 'Maintain a 3-day streak',
+    weeklyChallengeXP: 200,
+  },
+  {
+    id: 'gold',
+    name: 'Gold League',
+    color: 'FFD700',
+    description: 'Advanced league for dedicated users',
+    xpRequirement: 5000,
+    xpMultiplier: 1.5,
+    currentUsers: 30,
+    maxUsers: 50,
+    powerUpsPerWeek: 3,
+    weeklyChallenge: 'Complete 10 hard challenges',
+    weeklyChallengeXP: 500,
+  },
+  {
+    id: 'platinum',
+    name: 'Platinum League',
+    color: 'E5E4E2',
+    description: 'Elite league for top performers',
+    xpRequirement: 10000,
+    xpMultiplier: 2.0,
+    currentUsers: 20,
+    maxUsers: 30,
+    powerUpsPerWeek: 4,
+    weeklyChallenge: 'Maintain a 7-day streak',
+    weeklyChallengeXP: 1000,
+  },
+  {
+    id: 'diamond',
+    name: 'Diamond League',
+    color: 'b9f2ff',
+    description: 'Legendary league for the best of the best',
+    xpRequirement: 25000,
+    xpMultiplier: 3.0,
+    currentUsers: 10,
+    maxUsers: 15,
+    powerUpsPerWeek: 5,
+    weeklyChallenge: 'Complete all daily challenges',
+    weeklyChallengeXP: 2000,
+  },
+];
+
+export default async function LeagueListPage() {
+  return (
+    <AdminContainer>
+      <div className="max-w-7xl mx-auto">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-2xl font-bold text-white">League List</h1>
+          <div className="flex space-x-3">
+            <Link
+              href="/admin/leagues"
+              className="text-sm px-4 py-2 bg-black-75 hover:bg-black-50 text-white rounded-md transition-colors flex items-center gap-2"
+            >
+              <ArrowLeft className="h-4 w-4" /> Back to Dashboard
+            </Link>
+          </div>
+        </div>
+
+        <div className="grid gap-6">
+          {MOCK_LEAGUES.map((league) => (
+            <Card key={league.id} className="bg-black-75 border-black-50 p-6">
+              <div className="flex items-start justify-between">
+                <div className="flex items-start gap-4">
+                  <div
+                    className="w-3 h-3 rounded-full mt-2"
+                    style={{ backgroundColor: `#${league.color}` }}
+                  />
+                  <div>
+                    <h3 className="text-xl font-semibold text-white">{league.name}</h3>
+                    <p className="text-gray-400 mt-1">{league.description}</p>
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
+                      <div>
+                        <p className="text-sm text-gray-400">XP Requirement</p>
+                        <p className="text-white">{league.xpRequirement.toLocaleString()}</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-gray-400">XP Multiplier</p>
+                        <p className="text-white">{league.xpMultiplier}x</p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-gray-400">Users</p>
+                        <p className="text-white">
+                          {league.currentUsers} / {league.maxUsers}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-sm text-gray-400">Power-ups/Week</p>
+                        <p className="text-white">{league.powerUpsPerWeek}</p>
+                      </div>
+                    </div>
+                    {league.weeklyChallenge && (
+                      <div className="mt-4">
+                        <p className="text-sm text-gray-400">Weekly Challenge</p>
+                        <p className="text-white flex items-center gap-2">
+                          {league.weeklyChallenge}
+                          {league.weeklyChallengeXP && (
+                            <span className="text-accent">(+{league.weeklyChallengeXP} XP)</span>
+                          )}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Users className="h-5 w-5 text-gray-400" />
+                  <span className="text-gray-400">{league.currentUsers}</span>
+                </div>
+              </div>
+              <div className="mt-6 flex justify-end">
+                <Link
+                  href={`/admin/leagues/${league.id}`}
+                  className="text-sm text-accent hover:text-accent/80"
+                >
+                  View Details
+                </Link>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </AdminContainer>
+  );
+}
diff --git a/src/app/(app)/admin/leagues/page.tsx b/src/app/(app)/admin/leagues/page.tsx
new file mode 100644
index 000000000..e9a804e79
--- /dev/null
+++ b/src/app/(app)/admin/leagues/page.tsx
@@ -0,0 +1,132 @@
+import { Metadata } from 'next';
+import Link from 'next/link';
+import AdminContainer from '@/components/app/admin/admin-container';
+import { Trophy, Users, Award, ArrowUpRight } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+
+export const metadata: Metadata = {
+  title: 'TechBlitz | League Management',
+  description: 'Manage leagues, achievements, and user rankings',
+};
+
+export default async function LeaguesAdminPage() {
+  return (
+    <AdminContainer>
+      <div className="max-w-7xl mx-auto">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-2xl font-bold text-white">League Management</h1>
+          <div className="flex space-x-3">
+            <Link
+              href="/admin"
+              className="text-sm px-4 py-2 bg-black-75 hover:bg-black-50 text-white rounded-md transition-colors"
+            >
+              Back to Dashboard
+            </Link>
+          </div>
+        </div>
+
+        {/* Statistics Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <Card className="bg-black-75 border-black-50 p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-400">Total Leagues</p>
+                <h3 className="text-2xl font-bold text-white mt-1">5</h3>
+              </div>
+              <Trophy className="h-8 w-8 text-accent" />
+            </div>
+          </Card>
+
+          <Card className="bg-black-75 border-black-50 p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-400">Active Users</p>
+                <h3 className="text-2xl font-bold text-white mt-1">150</h3>
+              </div>
+              <Users className="h-8 w-8 text-primary" />
+            </div>
+          </Card>
+
+          <Card className="bg-black-75 border-black-50 p-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-400">Achievements Earned</p>
+                <h3 className="text-2xl font-bold text-white mt-1">324</h3>
+              </div>
+              <Award className="h-8 w-8 text-green-400" />
+            </div>
+          </Card>
+        </div>
+
+        {/* Quick Actions */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <Card className="bg-black-75 border-black-50 p-6">
+            <h2 className="text-xl font-semibold text-white mb-4">Quick Actions</h2>
+            <div className="space-y-4">
+              <Link
+                href="/admin/leagues/list"
+                className="flex items-center justify-between p-3 bg-black-50 rounded-md hover:bg-black-25 transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <Trophy className="h-5 w-5 text-accent" />
+                  <div>
+                    <h3 className="text-white font-medium">Manage Leagues</h3>
+                    <p className="text-sm text-gray-400">View and edit league settings</p>
+                  </div>
+                </div>
+                <ArrowUpRight className="h-5 w-5 text-gray-400" />
+              </Link>
+
+              <Link
+                href="/admin/leagues/achievements"
+                className="flex items-center justify-between p-3 bg-black-50 rounded-md hover:bg-black-25 transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <Award className="h-5 w-5 text-green-400" />
+                  <div>
+                    <h3 className="text-white font-medium">Achievement Settings</h3>
+                    <p className="text-sm text-gray-400">Configure league achievements</p>
+                  </div>
+                </div>
+                <ArrowUpRight className="h-5 w-5 text-gray-400" />
+              </Link>
+            </div>
+          </Card>
+
+          <Card className="bg-black-75 border-black-50 p-6">
+            <h2 className="text-xl font-semibold text-white mb-4">Recent Activity</h2>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between py-2 border-b border-black-50">
+                <div className="flex items-center gap-3">
+                  <Trophy className="h-4 w-4 text-accent" />
+                  <div>
+                    <p className="text-white">New user promoted to Gold League</p>
+                    <p className="text-sm text-gray-400">2 minutes ago</p>
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center justify-between py-2 border-b border-black-50">
+                <div className="flex items-center gap-3">
+                  <Award className="h-4 w-4 text-green-400" />
+                  <div>
+                    <p className="text-white">Achievement unlocked: Perfect Week</p>
+                    <p className="text-sm text-gray-400">15 minutes ago</p>
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center justify-between py-2">
+                <div className="flex items-center gap-3">
+                  <Users className="h-4 w-4 text-primary" />
+                  <div>
+                    <p className="text-white">5 users joined Silver League</p>
+                    <p className="text-sm text-gray-400">1 hour ago</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </AdminContainer>
+  );
+}
diff --git a/src/components/ui/icons/icons/map.tsx b/src/components/ui/icons/icons/map.tsx
new file mode 100644
index 000000000..7e6d35b66
--- /dev/null
+++ b/src/components/ui/icons/icons/map.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+type iconProps = {
+	fill?: string,
+	secondaryfill?: string,
+	strokewidth?: number,
+	width?: string,
+	height?: string,
+	title?: string
+}
+
+function Map(props: iconProps) {
+	const fill = props.fill || 'currentColor';
+	const secondaryfill = props.secondaryfill || fill;
+	const strokewidth = props.strokewidth || 1;
+	const width = props.width || '1em';
+	const height = props.height || '1em';
+	const title = props.title || "map";
+
+	return (
+		<svg height={height} width={width} viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+	<title>{title}</title>
+	<g fill={fill}>
+		<line fill="none" stroke={secondaryfill} strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokewidth} x1="6.25" x2="6.25" y1="2.792" y2="13.292"/>
+		<line fill="none" stroke={secondaryfill} strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokewidth} x1="11.75" x2="11.75" y1="4.708" y2="15.208"/>
+		<path d="M2.533,3.576l3.432-.763c.186-.041,.38-.029,.559,.036l4.952,1.801c.179,.065,.373,.078,.559,.036l2.998-.666c.625-.139,1.217,.336,1.217,.976V13.448c0,.469-.326,.875-.783,.976l-3.432,.763c-.186,.041-.38,.029-.559-.036l-4.952-1.801c-.179-.065-.373-.078-.559-.036l-2.998,.666c-.625,.139-1.217-.336-1.217-.976V4.552c0-.469,.326-.875,.783-.976Z" fill="none" stroke={fill} strokeLinecap="round" strokeLinejoin="round" strokeWidth={strokewidth}/>
+	</g>
+</svg>
+	);
+};
+
+export default Map;
\ No newline at end of file

From 752e7bc8c8bc06742167a94f1e0fc604f9be19d0 Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 16:13:16 +0000
Subject: [PATCH 06/18] lint

---
 src/app/(app)/admin/leagues/achievements/page.tsx | 2 +-
 src/app/(app)/admin/leagues/list/page.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(app)/admin/leagues/achievements/page.tsx b/src/app/(app)/admin/leagues/achievements/page.tsx
index 3c1899ff3..210246d67 100644
--- a/src/app/(app)/admin/leagues/achievements/page.tsx
+++ b/src/app/(app)/admin/leagues/achievements/page.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import Link from 'next/link';
 import AdminContainer from '@/components/app/admin/admin-container';
-import { ArrowLeft, Award, Trophy, Users, Clock, Star, Shield, Zap } from 'lucide-react';
+import { ArrowLeft, Award, Trophy, Clock, Star, Shield, Zap } from 'lucide-react';
 import { Card } from '@/components/ui/card';
 
 export const metadata: Metadata = {
diff --git a/src/app/(app)/admin/leagues/list/page.tsx b/src/app/(app)/admin/leagues/list/page.tsx
index 68094f87f..545792c60 100644
--- a/src/app/(app)/admin/leagues/list/page.tsx
+++ b/src/app/(app)/admin/leagues/list/page.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import Link from 'next/link';
 import AdminContainer from '@/components/app/admin/admin-container';
-import { ArrowLeft, Users, Trophy } from 'lucide-react';
+import { ArrowLeft, Users } from 'lucide-react';
 import { Card } from '@/components/ui/card';
 
 export const metadata: Metadata = {

From 4fc18f5b95feeb89886e267a4c1f76fc1b7d96bd Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 18:46:10 +0000
Subject: [PATCH 07/18] feat: ability to create new leagues (needs refining)

---
 src/actions/leagues/create-league.ts          |  44 +++
 src/app/(app)/admin/leagues/create/page.tsx   |  35 +++
 src/app/(app)/admin/leagues/list/page.tsx     | 109 +------
 src/app/(app)/admin/page.tsx                  |  20 ++
 .../app/admin/leagues/create-league-form.tsx  | 292 ++++++++++++++++++
 src/utils/data/leagues/get.ts                 |   6 +
 6 files changed, 412 insertions(+), 94 deletions(-)
 create mode 100644 src/actions/leagues/create-league.ts
 create mode 100644 src/app/(app)/admin/leagues/create/page.tsx
 create mode 100644 src/components/app/admin/leagues/create-league-form.tsx
 create mode 100644 src/utils/data/leagues/get.ts

diff --git a/src/actions/leagues/create-league.ts b/src/actions/leagues/create-league.ts
new file mode 100644
index 000000000..052920d1e
--- /dev/null
+++ b/src/actions/leagues/create-league.ts
@@ -0,0 +1,44 @@
+'use server';
+
+import { z } from 'zod';
+import { prisma } from '@/lib/prisma';
+import { revalidatePath } from 'next/cache';
+
+const leagueSchema = z.object({
+  name: z.enum(['BRONZE', 'SILVER', 'GOLD', 'PLATINUM', 'DIAMOND']),
+  color: z.enum(['CD7F32', 'C0C0C0', 'FFD700', 'E5E4E2', 'b9f2ff']),
+  description: z.string().min(10).max(500),
+  xpRequirement: z.number().min(0),
+  resetDate: z.string(),
+  canBeRelegated: z.boolean(),
+  maxPowerUpsPerWeek: z.number().min(1).max(10),
+  xpMultiplier: z.number().min(1).max(5),
+  maxUsers: z.number().min(10).max(100),
+  promotionCount: z.number().min(1),
+  relegationCount: z.number().min(1),
+  weeklyChallenge: z.string().optional(),
+  weeklyChallengeXP: z.number().optional(),
+});
+
+export async function createLeague(data: z.infer<typeof leagueSchema>) {
+  const validatedData = leagueSchema.parse(data);
+
+  // Create the league data first
+  const leagueData = await prisma.individualLeagueData.create({
+    data: {
+      name: validatedData.name,
+      color: validatedData.color,
+      description: validatedData.description,
+      xpRequirement: validatedData.xpRequirement,
+      resetDate: new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000),
+      canBeRelegated: validatedData.canBeRelegated,
+      maxPowerUpsPerWeek: validatedData.maxPowerUpsPerWeek,
+      xpMultiplier: validatedData.xpMultiplier,
+    },
+  });
+
+  revalidatePath('/admin/leagues');
+  revalidatePath('/admin/leagues/list');
+
+  return { leagueData };
+}
diff --git a/src/app/(app)/admin/leagues/create/page.tsx b/src/app/(app)/admin/leagues/create/page.tsx
new file mode 100644
index 000000000..e1e5c338e
--- /dev/null
+++ b/src/app/(app)/admin/leagues/create/page.tsx
@@ -0,0 +1,35 @@
+import { Metadata } from 'next';
+import Link from 'next/link';
+import AdminContainer from '@/components/app/admin/admin-container';
+import { ArrowLeft } from 'lucide-react';
+import { Card } from '@/components/ui/card';
+import CreateLeagueForm from '@/components/app/admin/leagues/create-league-form';
+
+export const metadata: Metadata = {
+  title: 'TechBlitz | Create League',
+  description: 'Create a new league and configure its settings',
+};
+
+export default async function CreateLeaguePage() {
+  return (
+    <AdminContainer>
+      <div className="max-w-4xl mx-auto">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-2xl font-bold text-white">Create New League</h1>
+          <div className="flex space-x-3">
+            <Link
+              href="/admin/leagues/list"
+              className="text-sm px-4 py-2 bg-black-75 hover:bg-black-50 text-white rounded-md transition-colors flex items-center gap-2"
+            >
+              <ArrowLeft className="h-4 w-4" /> Back to Leagues
+            </Link>
+          </div>
+        </div>
+
+        <Card className="bg-black-75 border-black-50 p-6">
+          <CreateLeagueForm />
+        </Card>
+      </div>
+    </AdminContainer>
+  );
+}
diff --git a/src/app/(app)/admin/leagues/list/page.tsx b/src/app/(app)/admin/leagues/list/page.tsx
index 545792c60..3206851b2 100644
--- a/src/app/(app)/admin/leagues/list/page.tsx
+++ b/src/app/(app)/admin/leagues/list/page.tsx
@@ -1,89 +1,30 @@
 import { Metadata } from 'next';
 import Link from 'next/link';
 import AdminContainer from '@/components/app/admin/admin-container';
-import { ArrowLeft, Users } from 'lucide-react';
+import { ArrowLeft, Plus } from 'lucide-react';
 import { Card } from '@/components/ui/card';
 
+import { Button } from '@/components/ui/button';
+import { getLeagues } from '@/utils/data/leagues/get';
+
 export const metadata: Metadata = {
   title: 'TechBlitz | League List',
   description: 'View and manage all leagues',
 };
 
-const MOCK_LEAGUES = [
-  {
-    id: 'bronze',
-    name: 'Bronze League',
-    color: 'CD7F32',
-    description: 'Entry level league for new users',
-    xpRequirement: 0,
-    xpMultiplier: 1.0,
-    currentUsers: 50,
-    maxUsers: 100,
-    powerUpsPerWeek: 1,
-    weeklyChallenge: 'Complete 5 challenges',
-    weeklyChallengeXP: 100,
-  },
-  {
-    id: 'silver',
-    name: 'Silver League',
-    color: 'C0C0C0',
-    description: 'Intermediate league for consistent users',
-    xpRequirement: 1000,
-    xpMultiplier: 1.2,
-    currentUsers: 40,
-    maxUsers: 75,
-    powerUpsPerWeek: 2,
-    weeklyChallenge: 'Maintain a 3-day streak',
-    weeklyChallengeXP: 200,
-  },
-  {
-    id: 'gold',
-    name: 'Gold League',
-    color: 'FFD700',
-    description: 'Advanced league for dedicated users',
-    xpRequirement: 5000,
-    xpMultiplier: 1.5,
-    currentUsers: 30,
-    maxUsers: 50,
-    powerUpsPerWeek: 3,
-    weeklyChallenge: 'Complete 10 hard challenges',
-    weeklyChallengeXP: 500,
-  },
-  {
-    id: 'platinum',
-    name: 'Platinum League',
-    color: 'E5E4E2',
-    description: 'Elite league for top performers',
-    xpRequirement: 10000,
-    xpMultiplier: 2.0,
-    currentUsers: 20,
-    maxUsers: 30,
-    powerUpsPerWeek: 4,
-    weeklyChallenge: 'Maintain a 7-day streak',
-    weeklyChallengeXP: 1000,
-  },
-  {
-    id: 'diamond',
-    name: 'Diamond League',
-    color: 'b9f2ff',
-    description: 'Legendary league for the best of the best',
-    xpRequirement: 25000,
-    xpMultiplier: 3.0,
-    currentUsers: 10,
-    maxUsers: 15,
-    powerUpsPerWeek: 5,
-    weeklyChallenge: 'Complete all daily challenges',
-    weeklyChallengeXP: 2000,
-  },
-];
-
 export default async function LeagueListPage() {
+  const leagues = await getLeagues();
   return (
     <AdminContainer>
       <div className="max-w-7xl mx-auto">
         <div className="flex justify-between items-center mb-6">
           <h1 className="text-2xl font-bold text-white">League List</h1>
           <div className="flex space-x-3">
+            <Link href="/admin/leagues/create">
+              <Button className="bg-accent hover:bg-accent/80 text-white">
+                <Plus className="h-4 w-4 mr-2" /> Create League
+              </Button>
+            </Link>
             <Link
               href="/admin/leagues"
               className="text-sm px-4 py-2 bg-black-75 hover:bg-black-50 text-white rounded-md transition-colors flex items-center gap-2"
@@ -94,8 +35,9 @@ export default async function LeagueListPage() {
         </div>
 
         <div className="grid gap-6">
-          {MOCK_LEAGUES.map((league) => (
-            <Card key={league.id} className="bg-black-75 border-black-50 p-6">
+          {leagues.length === 0 && <div className="text-white">No leagues found</div>}
+          {leagues.map((league) => (
+            <Card key={league.uid} className="bg-black-75 border-black-50 p-6">
               <div className="flex items-start justify-between">
                 <div className="flex items-start gap-4">
                   <div
@@ -114,38 +56,17 @@ export default async function LeagueListPage() {
                         <p className="text-sm text-gray-400">XP Multiplier</p>
                         <p className="text-white">{league.xpMultiplier}x</p>
                       </div>
-                      <div>
-                        <p className="text-sm text-gray-400">Users</p>
-                        <p className="text-white">
-                          {league.currentUsers} / {league.maxUsers}
-                        </p>
-                      </div>
                       <div>
                         <p className="text-sm text-gray-400">Power-ups/Week</p>
-                        <p className="text-white">{league.powerUpsPerWeek}</p>
+                        <p className="text-white">{league.maxPowerUpsPerWeek}</p>
                       </div>
                     </div>
-                    {league.weeklyChallenge && (
-                      <div className="mt-4">
-                        <p className="text-sm text-gray-400">Weekly Challenge</p>
-                        <p className="text-white flex items-center gap-2">
-                          {league.weeklyChallenge}
-                          {league.weeklyChallengeXP && (
-                            <span className="text-accent">(+{league.weeklyChallengeXP} XP)</span>
-                          )}
-                        </p>
-                      </div>
-                    )}
                   </div>
                 </div>
-                <div className="flex items-center gap-2">
-                  <Users className="h-5 w-5 text-gray-400" />
-                  <span className="text-gray-400">{league.currentUsers}</span>
-                </div>
               </div>
               <div className="mt-6 flex justify-end">
                 <Link
-                  href={`/admin/leagues/${league.id}`}
+                  href={`/admin/leagues/${league.uid}`}
                   className="text-sm text-accent hover:text-accent/80"
                 >
                   View Details
diff --git a/src/app/(app)/admin/page.tsx b/src/app/(app)/admin/page.tsx
index ec56711c9..5ca0921b4 100644
--- a/src/app/(app)/admin/page.tsx
+++ b/src/app/(app)/admin/page.tsx
@@ -88,6 +88,26 @@ export default function AdminDashboardPage() {
             </Link>
           </div>
         </div>
+        <div className="bg-[#000000] rounded-lg shadow-sm border border-black-50 overflow-hidden">
+          <div className="p-6">
+            <h2 className="text-xl font-semibold mb-2 text-white">Leagues</h2>
+            <p className="text-gray-400 mb-4">Create and manage leagues.</p>
+          </div>
+          <div className="bg-secondary px-6 py-3 flex justify-between">
+            <Link
+              href="/admin/leagues"
+              className="text-primary hover:text-primary/90 transition-colors"
+            >
+              Create New
+            </Link>
+            <Link
+              href="/admin/leagues/list"
+              className="text-primary hover:text-primary/90 transition-colors"
+            >
+              View All
+            </Link>
+          </div>
+        </div>
       </div>
 
       {/* Tools Section */}
diff --git a/src/components/app/admin/leagues/create-league-form.tsx b/src/components/app/admin/leagues/create-league-form.tsx
new file mode 100644
index 000000000..9e3ee98cb
--- /dev/null
+++ b/src/components/app/admin/leagues/create-league-form.tsx
@@ -0,0 +1,292 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { createLeague } from '@/actions/leagues/create-league';
+import { toast } from 'sonner';
+
+const leagueSchema = z.object({
+  name: z.enum(['BRONZE', 'SILVER', 'GOLD', 'PLATINUM', 'DIAMOND']),
+  color: z.enum(['CD7F32', 'C0C0C0', 'FFD700', 'E5E4E2', 'b9f2ff']),
+  description: z.string().min(10).max(500),
+  xpRequirement: z.number().min(0),
+  resetDate: z.string(),
+  canBeRelegated: z.boolean(),
+  maxPowerUpsPerWeek: z.number().min(1).max(10),
+  xpMultiplier: z.number().min(1).max(5),
+  maxUsers: z.number().min(10).max(100),
+  promotionCount: z.number().min(1),
+  relegationCount: z.number().min(1),
+  weeklyChallenge: z.string().optional(),
+  weeklyChallengeXP: z.number().optional(),
+});
+
+type LeagueFormData = z.infer<typeof leagueSchema>;
+
+export default function CreateLeagueForm() {
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LeagueFormData>({
+    resolver: zodResolver(leagueSchema),
+    defaultValues: {
+      canBeRelegated: true,
+      maxPowerUpsPerWeek: 3,
+      xpMultiplier: 1,
+      maxUsers: 30,
+      promotionCount: 3,
+      relegationCount: 5,
+    },
+  });
+
+  const onSubmit = async (data: LeagueFormData) => {
+    try {
+      setIsSubmitting(true);
+      await createLeague(data);
+      toast.success('League created successfully');
+      router.push('/admin/leagues/list');
+    } catch (error) {
+      toast.error('Failed to create league');
+      console.error('Failed to create league:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <Label htmlFor="name" className="text-white">
+            League Name
+          </Label>
+          <select
+            id="name"
+            {...register('name')}
+            className="w-full bg-black-50 text-white border border-black-25 rounded-md p-2"
+          >
+            <option value="BRONZE">Bronze League</option>
+            <option value="SILVER">Silver League</option>
+            <option value="GOLD">Gold League</option>
+            <option value="PLATINUM">Platinum League</option>
+            <option value="DIAMOND">Diamond League</option>
+          </select>
+          {errors.name && <p className="text-red-500 text-sm mt-1">{errors.name.message}</p>}
+        </div>
+
+        <div>
+          <Label htmlFor="color" className="text-white">
+            League Color
+          </Label>
+          <select
+            id="color"
+            {...register('color')}
+            className="w-full bg-black-50 text-white border border-black-25 rounded-md p-2"
+          >
+            <option value="CD7F32">Bronze</option>
+            <option value="C0C0C0">Silver</option>
+            <option value="FFD700">Gold</option>
+            <option value="E5E4E2">Platinum</option>
+            <option value="b9f2ff">Diamond</option>
+          </select>
+          {errors.color && <p className="text-red-500 text-sm mt-1">{errors.color.message}</p>}
+        </div>
+      </div>
+
+      <div>
+        <Label htmlFor="description" className="text-white">
+          Description
+        </Label>
+        <Textarea
+          id="description"
+          {...register('description')}
+          className="bg-black-50 text-white border border-black-25"
+          placeholder="Enter league description..."
+        />
+        {errors.description && (
+          <p className="text-red-500 text-sm mt-1">{errors.description.message}</p>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <Label htmlFor="xpRequirement" className="text-white">
+            XP Requirement
+          </Label>
+          <Input
+            id="xpRequirement"
+            type="number"
+            {...register('xpRequirement', { valueAsNumber: true })}
+            className="bg-black-50 text-white border border-black-25"
+          />
+          {errors.xpRequirement && (
+            <p className="text-red-500 text-sm mt-1">{errors.xpRequirement.message}</p>
+          )}
+        </div>
+
+        <div>
+          <Label htmlFor="resetDate" className="text-white">
+            Reset Date
+          </Label>
+          <Input
+            id="resetDate"
+            type="datetime-local"
+            {...register('resetDate')}
+            className="bg-black-50 text-white border border-black-25"
+          />
+          {errors.resetDate && (
+            <p className="text-red-500 text-sm mt-1">{errors.resetDate.message}</p>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div>
+          <Label htmlFor="maxPowerUpsPerWeek" className="text-white">
+            Max Power-ups Per Week
+          </Label>
+          <Input
+            id="maxPowerUpsPerWeek"
+            type="number"
+            {...register('maxPowerUpsPerWeek', { valueAsNumber: true })}
+            className="bg-black-50 text-white border border-black-25"
+          />
+          {errors.maxPowerUpsPerWeek && (
+            <p className="text-red-500 text-sm mt-1">{errors.maxPowerUpsPerWeek.message}</p>
+          )}
+        </div>
+
+        <div>
+          <Label htmlFor="xpMultiplier" className="text-white">
+            XP Multiplier
+          </Label>
+          <Input
+            id="xpMultiplier"
+            type="number"
+            step="0.1"
+            {...register('xpMultiplier', { valueAsNumber: true })}
+            className="bg-black-50 text-white border border-black-25"
+          />
+          {errors.xpMultiplier && (
+            <p className="text-red-500 text-sm mt-1">{errors.xpMultiplier.message}</p>
+          )}
+        </div>
+
+        <div>
+          <Label htmlFor="maxUsers" className="text-white">
+            Max Users
+          </Label>
+          <Input
+            id="maxUsers"
+            type="number"
+            {...register('maxUsers', { valueAsNumber: true })}
+            className="bg-black-50 text-white border border-black-25"
+          />
+          {errors.maxUsers && (
+            <p className="text-red-500 text-sm mt-1">{errors.maxUsers.message}</p>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <Label htmlFor="promotionCount" className="text-white">
+            Promotion Count
+          </Label>
+          <Input
+            id="promotionCount"
+            type="number"
+            {...register('promotionCount', { valueAsNumber: true })}
+            className="bg-black-50 text-white border border-black-25"
+          />
+          {errors.promotionCount && (
+            <p className="text-red-500 text-sm mt-1">{errors.promotionCount.message}</p>
+          )}
+        </div>
+
+        <div>
+          <Label htmlFor="relegationCount" className="text-white">
+            Relegation Count
+          </Label>
+          <Input
+            id="relegationCount"
+            type="number"
+            {...register('relegationCount', { valueAsNumber: true })}
+            className="bg-black-50 text-white border border-black-25"
+          />
+          {errors.relegationCount && (
+            <p className="text-red-500 text-sm mt-1">{errors.relegationCount.message}</p>
+          )}
+        </div>
+      </div>
+
+      <div>
+        <div className="flex items-center gap-2 mb-4">
+          <input
+            type="checkbox"
+            id="canBeRelegated"
+            {...register('canBeRelegated')}
+            className="bg-black-50 border border-black-25"
+          />
+          <Label htmlFor="canBeRelegated" className="text-white">
+            Can be relegated
+          </Label>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <Label htmlFor="weeklyChallenge" className="text-white">
+            Weekly Challenge
+          </Label>
+          <Input
+            id="weeklyChallenge"
+            {...register('weeklyChallenge')}
+            className="bg-black-50 text-white border border-black-25"
+            placeholder="Optional weekly challenge"
+          />
+          {errors.weeklyChallenge && (
+            <p className="text-red-500 text-sm mt-1">{errors.weeklyChallenge.message}</p>
+          )}
+        </div>
+
+        <div>
+          <Label htmlFor="weeklyChallengeXP" className="text-white">
+            Weekly Challenge XP
+          </Label>
+          <Input
+            id="weeklyChallengeXP"
+            type="number"
+            {...register('weeklyChallengeXP', { valueAsNumber: true })}
+            className="bg-black-50 text-white border border-black-25"
+            placeholder="Optional XP reward"
+          />
+          {errors.weeklyChallengeXP && (
+            <p className="text-red-500 text-sm mt-1">{errors.weeklyChallengeXP.message}</p>
+          )}
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <Button
+          type="submit"
+          disabled={isSubmitting}
+          className="bg-accent hover:bg-accent/80 text-white"
+        >
+          {isSubmitting ? 'Creating...' : 'Create League'}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/utils/data/leagues/get.ts b/src/utils/data/leagues/get.ts
new file mode 100644
index 000000000..d43bd3642
--- /dev/null
+++ b/src/utils/data/leagues/get.ts
@@ -0,0 +1,6 @@
+import { prisma } from '@/lib/prisma';
+
+export async function getLeagues() {
+  const leagues = await prisma.individualLeagueData.findMany();
+  return leagues;
+}

From ec3b988fb93ed893a1f59ef09ded95cb31838093 Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 19:05:17 +0000
Subject: [PATCH 08/18] feat: adds individual league update page, form & action

---
 src/actions/leagues/update-league.ts          |  65 +++
 src/app/(app)/admin/leagues/[uid]/page.tsx    |  52 +++
 .../app/admin/leagues/edit-league-form.tsx    | 385 ++++++++++++++++++
 3 files changed, 502 insertions(+)
 create mode 100644 src/actions/leagues/update-league.ts
 create mode 100644 src/app/(app)/admin/leagues/[uid]/page.tsx
 create mode 100644 src/components/app/admin/leagues/edit-league-form.tsx

diff --git a/src/actions/leagues/update-league.ts b/src/actions/leagues/update-league.ts
new file mode 100644
index 000000000..40df924e7
--- /dev/null
+++ b/src/actions/leagues/update-league.ts
@@ -0,0 +1,65 @@
+'use server';
+
+import { z } from 'zod';
+import { prisma } from '@/lib/prisma';
+import { revalidatePath } from 'next/cache';
+
+const leagueSchema = z.object({
+  name: z.enum(['BRONZE', 'SILVER', 'GOLD', 'PLATINUM', 'DIAMOND']),
+  color: z.enum(['CD7F32', 'C0C0C0', 'FFD700', 'E5E4E2', 'b9f2ff']),
+  description: z.string().min(10).max(500),
+  xpRequirement: z.number().min(0),
+  resetDate: z.string(),
+  canBeRelegated: z.boolean(),
+  maxPowerUpsPerWeek: z.number().min(1).max(10),
+  xpMultiplier: z.number().min(1).max(5),
+  maxUsers: z.number().min(10).max(100),
+  promotionCount: z.number().min(1),
+  relegationCount: z.number().min(1),
+  weeklyChallenge: z.string().optional(),
+  weeklyChallengeXP: z.number().optional(),
+});
+
+export async function updateLeague(uid: string, data: z.infer<typeof leagueSchema>) {
+  const validatedData = leagueSchema.parse(data);
+
+  const league = await prisma.leagues.findUnique({
+    where: { uid },
+    include: { leagueData: true },
+  });
+
+  if (!league) {
+    throw new Error('League not found');
+  }
+
+  // Update league data
+  await prisma.individualLeagueData.update({
+    where: { uid: league.leagueData.uid },
+    data: {
+      name: validatedData.name,
+      color: validatedData.color,
+      description: validatedData.description,
+      xpRequirement: validatedData.xpRequirement,
+      resetDate: new Date(validatedData.resetDate),
+      canBeRelegated: validatedData.canBeRelegated,
+      maxPowerUpsPerWeek: validatedData.maxPowerUpsPerWeek,
+      xpMultiplier: validatedData.xpMultiplier,
+    },
+  });
+
+  // Update league instance
+  await prisma.leagues.update({
+    where: { uid },
+    data: {
+      maxUsers: validatedData.maxUsers,
+      promotionCount: validatedData.promotionCount,
+      relegationCount: validatedData.relegationCount,
+      weeklyChallenge: validatedData.weeklyChallenge,
+      weeklyChallengeXP: validatedData.weeklyChallengeXP,
+    },
+  });
+
+  revalidatePath('/admin/leagues');
+  revalidatePath('/admin/leagues/list');
+  revalidatePath(`/admin/leagues/${uid}`);
+}
diff --git a/src/app/(app)/admin/leagues/[uid]/page.tsx b/src/app/(app)/admin/leagues/[uid]/page.tsx
new file mode 100644
index 000000000..6f5af1cbb
--- /dev/null
+++ b/src/app/(app)/admin/leagues/[uid]/page.tsx
@@ -0,0 +1,52 @@
+import { Metadata } from 'next';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { ArrowLeft } from 'lucide-react';
+import AdminContainer from '@/components/app/admin/admin-container';
+import { Card } from '@/components/ui/card';
+import { prisma } from '@/lib/prisma';
+import EditLeagueForm from '@/components/app/admin/leagues/edit-league-form';
+
+export const metadata: Metadata = {
+  title: 'TechBlitz | Edit League',
+  description: 'View and modify league settings',
+};
+
+async function getLeague(uid: string) {
+  const league = await prisma.individualLeagueData.findUnique({
+    where: { uid },
+  });
+
+  return league;
+}
+
+export default async function LeaguePage({ params }: { params: { uid: string } }) {
+  const league = await getLeague(params.uid);
+
+  console.log({
+    league,
+  });
+
+  return (
+    <AdminContainer>
+      <div className="mb-8 flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <Link
+            href="/admin/leagues/list"
+            className="flex items-center text-sm text-muted-foreground hover:text-primary"
+          >
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to League List
+          </Link>
+          <h1 className="text-2xl font-bold text-white">Edit League: {league?.name}</h1>
+        </div>
+      </div>
+
+      <div className="grid gap-8">
+        <Card className="p-6">
+          <EditLeagueForm league={league} />
+        </Card>
+      </div>
+    </AdminContainer>
+  );
+}
diff --git a/src/components/app/admin/leagues/edit-league-form.tsx b/src/components/app/admin/leagues/edit-league-form.tsx
new file mode 100644
index 000000000..0b0856899
--- /dev/null
+++ b/src/components/app/admin/leagues/edit-league-form.tsx
@@ -0,0 +1,385 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { updateLeague } from '@/actions/leagues/update-league';
+import { toast } from 'sonner';
+
+const leagueSchema = z.object({
+  name: z.enum(['BRONZE', 'SILVER', 'GOLD', 'PLATINUM', 'DIAMOND']),
+  color: z.enum(['CD7F32', 'C0C0C0', 'FFD700', 'E5E4E2', 'b9f2ff']),
+  description: z.string().min(10).max(500),
+  xpRequirement: z.number().min(0),
+  resetDate: z.string(),
+  canBeRelegated: z.boolean(),
+  maxPowerUpsPerWeek: z.number().min(1).max(10),
+  xpMultiplier: z.number().min(1).max(5),
+  maxUsers: z.number().min(10).max(100),
+  promotionCount: z.number().min(1),
+  relegationCount: z.number().min(1),
+  weeklyChallenge: z.string().optional(),
+  weeklyChallengeXP: z.number().optional(),
+});
+
+type LeagueFormValues = z.infer<typeof leagueSchema>;
+
+export default function EditLeagueForm({ league }: { league: any }) {
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formStatus, setFormStatus] = useState({ message: '', success: true });
+
+  const form = useForm<LeagueFormValues>({
+    resolver: zodResolver(leagueSchema),
+    defaultValues: {
+      name: league.name,
+      color: league.color,
+      description: league.description,
+      xpRequirement: league.xpRequirement,
+      resetDate: league.resetDate.toISOString().split('T')[0],
+      canBeRelegated: league.canBeRelegated,
+      maxPowerUpsPerWeek: league.maxPowerUpsPerWeek,
+      xpMultiplier: league.xpMultiplier,
+      maxUsers: league.maxUsers || 30,
+      promotionCount: league.promotionCount || 3,
+      relegationCount: league.relegationCount || 5,
+      weeklyChallenge: league.weeklyChallenge || '',
+      weeklyChallengeXP: league.weeklyChallengeXP || 0,
+    },
+  });
+
+  async function onSubmit(data: LeagueFormValues) {
+    try {
+      setIsSubmitting(true);
+      await updateLeague(league.uid, data);
+      toast.success('League updated successfully');
+      router.refresh();
+    } catch (error) {
+      toast.error('Failed to update league');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="bg-black-75 rounded-lg p-6">
+      {formStatus.message && (
+        <div
+          className={`p-4 mb-6 rounded-lg ${
+            formStatus.success
+              ? 'bg-green-900/20 text-green-700 dark:text-green-300'
+              : 'bg-red-900/20 text-red-700 dark:text-red-300'
+          }`}
+        >
+          {formStatus.message}
+        </div>
+      )}
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <div className="border-b border-black-50 pb-4 mb-6">
+            <h2 className="text-xl font-semibold text-white">Edit League</h2>
+            <p className="text-sm text-gray-400">Update the details for this league</p>
+          </div>
+
+          <Tabs defaultValue="basic" className="space-y-6 border-black-50">
+            <TabsList className="bg-black-100 border-black-50">
+              <TabsTrigger value="basic" className="text-white data-[state=active]:bg-black-50">
+                Basic Information
+              </TabsTrigger>
+              <TabsTrigger
+                value="requirements"
+                className="text-white data-[state=active]:bg-black-50"
+              >
+                Requirements
+              </TabsTrigger>
+              <TabsTrigger
+                value="challenges"
+                className="text-white data-[state=active]:bg-black-50"
+              >
+                Challenges
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="basic">
+              <Card className="bg-black-75 border-black-50">
+                <CardHeader>
+                  <CardTitle className="text-white">Basic Information</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  <FormField
+                    control={form.control}
+                    name="color"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-white">League Color *</FormLabel>
+                        <FormControl>
+                          <select
+                            {...field}
+                            className="w-full rounded-md border border-black-50 bg-black-100 px-3 py-2 text-white"
+                          >
+                            <option value="CD7F32">Bronze</option>
+                            <option value="C0C0C0">Silver</option>
+                            <option value="FFD700">Gold</option>
+                            <option value="E5E4E2">Platinum</option>
+                            <option value="b9f2ff">Diamond</option>
+                          </select>
+                        </FormControl>
+                        <FormDescription className="text-gray-400">
+                          Choose the color for this league tier
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="requirements">
+              <Card className="bg-black-75 border-black-50">
+                <CardHeader>
+                  <CardTitle className="text-white">League Requirements</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  <div className="grid grid-cols-2 gap-4">
+                    <FormField
+                      control={form.control}
+                      name="xpRequirement"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="text-white">XP Requirement *</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="number"
+                              {...field}
+                              onChange={(e) => field.onChange(Number(e.target.value))}
+                              className="bg-black-100 border-black-50 text-white"
+                            />
+                          </FormControl>
+                          <FormDescription className="text-gray-400">
+                            Minimum XP needed to join this league
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="maxUsers"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="text-white">Max Users *</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="number"
+                              {...field}
+                              onChange={(e) => field.onChange(Number(e.target.value))}
+                              className="bg-black-100 border-black-50 text-white"
+                            />
+                          </FormControl>
+                          <FormDescription className="text-gray-400">
+                            Maximum number of users allowed in the league
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <FormField
+                      control={form.control}
+                      name="promotionCount"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="text-white">Promotion Count *</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="number"
+                              {...field}
+                              onChange={(e) => field.onChange(Number(e.target.value))}
+                              className="bg-black-100 border-black-50 text-white"
+                            />
+                          </FormControl>
+                          <FormDescription className="text-gray-400">
+                            Number of users promoted each reset
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="relegationCount"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel className="text-white">Relegation Count *</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="number"
+                              {...field}
+                              onChange={(e) => field.onChange(Number(e.target.value))}
+                              className="bg-black-100 border-black-50 text-white"
+                            />
+                          </FormControl>
+                          <FormDescription className="text-gray-400">
+                            Number of users relegated each reset
+                          </FormDescription>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+
+                  <FormField
+                    control={form.control}
+                    name="canBeRelegated"
+                    render={({ field }) => (
+                      <FormItem className="flex items-center justify-between rounded-lg border border-black-50 p-4 bg-black-100">
+                        <div className="space-y-0.5">
+                          <FormLabel className="text-white">Can Be Relegated</FormLabel>
+                          <FormDescription className="text-gray-400">
+                            Allow users to be relegated from this league
+                          </FormDescription>
+                        </div>
+                        <FormControl>
+                          <Switch checked={field.value} onCheckedChange={field.onChange} />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="challenges">
+              <Card className="bg-black-75 border-black-50">
+                <CardHeader>
+                  <CardTitle className="text-white">Weekly Challenges</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  <FormField
+                    control={form.control}
+                    name="weeklyChallenge"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-white">Weekly Challenge</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            {...field}
+                            className="bg-black-100 border-black-50 text-white"
+                          />
+                        </FormControl>
+                        <FormDescription className="text-gray-400">
+                          Description of the current weekly challenge
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="weeklyChallengeXP"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-white">Challenge XP Reward</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="number"
+                            {...field}
+                            onChange={(e) => field.onChange(Number(e.target.value))}
+                            className="bg-black-100 border-black-50 text-white"
+                          />
+                        </FormControl>
+                        <FormDescription className="text-gray-400">
+                          XP awarded for completing the weekly challenge
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+
+          <div className="pt-6 border-t border-black-50 flex justify-between items-center">
+            <div>
+              {formStatus.message && (
+                <p className={formStatus.success ? 'text-green-500' : 'text-red-500'}>
+                  {formStatus.message}
+                </p>
+              )}
+            </div>
+            <div className="flex space-x-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => router.push('/admin/leagues/list')}
+                className="border-black-50 text-white"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={isSubmitting}
+                className="bg-primary hover:bg-primary/90"
+              >
+                {isSubmitting ? (
+                  <>
+                    <span className="mr-2">
+                      <svg
+                        className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                      >
+                        <circle
+                          className="opacity-25"
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          stroke="currentColor"
+                          strokeWidth="4"
+                        ></circle>
+                        <path
+                          className="opacity-75"
+                          fill="currentColor"
+                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        ></path>
+                      </svg>
+                    </span>
+                    Processing...
+                  </>
+                ) : (
+                  'Save Changes'
+                )}
+              </Button>
+            </div>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}

From 6ce884670275f6f4bfbd784aa0f7ceebd0b06f0d Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 21:22:38 +0000
Subject: [PATCH 09/18] fix: minor hotfixes to admin edit league

---
 src/app/(app)/admin/leagues/[uid]/page.tsx    |  7 ++-----
 src/app/(app)/admin/leagues/list/page.tsx     | 19 +++++++++++++------
 .../app/admin/leagues/edit-league-form.tsx    | 19 +++++++++++++++++++
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/app/(app)/admin/leagues/[uid]/page.tsx b/src/app/(app)/admin/leagues/[uid]/page.tsx
index 6f5af1cbb..eb66fd5ef 100644
--- a/src/app/(app)/admin/leagues/[uid]/page.tsx
+++ b/src/app/(app)/admin/leagues/[uid]/page.tsx
@@ -3,7 +3,6 @@ import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import { ArrowLeft } from 'lucide-react';
 import AdminContainer from '@/components/app/admin/admin-container';
-import { Card } from '@/components/ui/card';
 import { prisma } from '@/lib/prisma';
 import EditLeagueForm from '@/components/app/admin/leagues/edit-league-form';
 
@@ -30,7 +29,7 @@ export default async function LeaguePage({ params }: { params: { uid: string } }
   return (
     <AdminContainer>
       <div className="mb-8 flex items-center justify-between">
-        <div className="flex items-center space-x-4">
+        <div className="flex flex-col items-start space-y-4">
           <Link
             href="/admin/leagues/list"
             className="flex items-center text-sm text-muted-foreground hover:text-primary"
@@ -43,9 +42,7 @@ export default async function LeaguePage({ params }: { params: { uid: string } }
       </div>
 
       <div className="grid gap-8">
-        <Card className="p-6">
-          <EditLeagueForm league={league} />
-        </Card>
+        <EditLeagueForm league={league} />
       </div>
     </AdminContainer>
   );
diff --git a/src/app/(app)/admin/leagues/list/page.tsx b/src/app/(app)/admin/leagues/list/page.tsx
index 3206851b2..7bcc5947f 100644
--- a/src/app/(app)/admin/leagues/list/page.tsx
+++ b/src/app/(app)/admin/leagues/list/page.tsx
@@ -20,17 +20,17 @@ export default async function LeagueListPage() {
         <div className="flex justify-between items-center mb-6">
           <h1 className="text-2xl font-bold text-white">League List</h1>
           <div className="flex space-x-3">
-            <Link href="/admin/leagues/create">
-              <Button className="bg-accent hover:bg-accent/80 text-white">
-                <Plus className="h-4 w-4 mr-2" /> Create League
-              </Button>
-            </Link>
             <Link
               href="/admin/leagues"
               className="text-sm px-4 py-2 bg-black-75 hover:bg-black-50 text-white rounded-md transition-colors flex items-center gap-2"
             >
               <ArrowLeft className="h-4 w-4" /> Back to Dashboard
             </Link>
+            <Link href="/admin/leagues/create">
+              <Button className="bg-accent hover:bg-accent/80 text-white">
+                <Plus className="h-4 w-4 mr-2" /> Create League
+              </Button>
+            </Link>
           </div>
         </div>
 
@@ -64,7 +64,14 @@ export default async function LeagueListPage() {
                   </div>
                 </div>
               </div>
-              <div className="mt-6 flex justify-end">
+              <div className="mt-6 flex justify-between">
+                <span className="text-sm text-gray-400">
+                  {league.resetDate.toLocaleDateString()} (
+                  {Math.ceil(
+                    (league.resetDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)
+                  )}{' '}
+                  days away)
+                </span>
                 <Link
                   href={`/admin/leagues/${league.uid}`}
                   className="text-sm text-accent hover:text-accent/80"
diff --git a/src/components/app/admin/leagues/edit-league-form.tsx b/src/components/app/admin/leagues/edit-league-form.tsx
index 0b0856899..7f4cf4b3d 100644
--- a/src/components/app/admin/leagues/edit-league-form.tsx
+++ b/src/components/app/admin/leagues/edit-league-form.tsx
@@ -149,6 +149,25 @@ export default function EditLeagueForm({ league }: { league: any }) {
                       </FormItem>
                     )}
                   />
+                  <FormField
+                    control={form.control}
+                    name="description"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel className="text-white">League Description *</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            {...field}
+                            className="w-full rounded-md border border-black-50 bg-black-100 px-3 py-2 text-white"
+                          />
+                        </FormControl>
+                        <FormDescription className="text-gray-400">
+                          Describe the league and its requirements
+                        </FormDescription>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
                 </CardContent>
               </Card>
             </TabsContent>

From 87e8b84b1d8b7dda9511f3c736c61d1b824e8581 Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 21:27:18 +0000
Subject: [PATCH 10/18] lint

---
 src/app/(app)/admin/leagues/[uid]/page.tsx    |  1 -
 .../app/admin/leagues/edit-league-form.tsx    | 20 -------------------
 2 files changed, 21 deletions(-)

diff --git a/src/app/(app)/admin/leagues/[uid]/page.tsx b/src/app/(app)/admin/leagues/[uid]/page.tsx
index eb66fd5ef..d1ea2a8ad 100644
--- a/src/app/(app)/admin/leagues/[uid]/page.tsx
+++ b/src/app/(app)/admin/leagues/[uid]/page.tsx
@@ -1,6 +1,5 @@
 import { Metadata } from 'next';
 import Link from 'next/link';
-import { notFound } from 'next/navigation';
 import { ArrowLeft } from 'lucide-react';
 import AdminContainer from '@/components/app/admin/admin-container';
 import { prisma } from '@/lib/prisma';
diff --git a/src/components/app/admin/leagues/edit-league-form.tsx b/src/components/app/admin/leagues/edit-league-form.tsx
index 7f4cf4b3d..d448e07f5 100644
--- a/src/components/app/admin/leagues/edit-league-form.tsx
+++ b/src/components/app/admin/leagues/edit-league-form.tsx
@@ -44,7 +44,6 @@ type LeagueFormValues = z.infer<typeof leagueSchema>;
 export default function EditLeagueForm({ league }: { league: any }) {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const [formStatus, setFormStatus] = useState({ message: '', success: true });
 
   const form = useForm<LeagueFormValues>({
     resolver: zodResolver(leagueSchema),
@@ -80,18 +79,6 @@ export default function EditLeagueForm({ league }: { league: any }) {
 
   return (
     <div className="bg-black-75 rounded-lg p-6">
-      {formStatus.message && (
-        <div
-          className={`p-4 mb-6 rounded-lg ${
-            formStatus.success
-              ? 'bg-green-900/20 text-green-700 dark:text-green-300'
-              : 'bg-red-900/20 text-red-700 dark:text-red-300'
-          }`}
-        >
-          {formStatus.message}
-        </div>
-      )}
-
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
           <div className="border-b border-black-50 pb-4 mb-6">
@@ -344,13 +331,6 @@ export default function EditLeagueForm({ league }: { league: any }) {
           </Tabs>
 
           <div className="pt-6 border-t border-black-50 flex justify-between items-center">
-            <div>
-              {formStatus.message && (
-                <p className={formStatus.success ? 'text-green-500' : 'text-red-500'}>
-                  {formStatus.message}
-                </p>
-              )}
-            </div>
             <div className="flex space-x-4">
               <Button
                 type="button"

From ee6a7b0526a1bbbbae91e27f076d143989db52b6 Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 21:52:06 +0000
Subject: [PATCH 11/18] feat: init league carousel commit

---
 .../(app)/(default_layout)/leaderboard/page.tsx  |  7 ++++++-
 src/app/(app)/admin/leagues/[uid]/page.tsx       |  4 ----
 .../app/leaderboard/leagues/leagues-showcase.tsx | 16 ++++++++++++++++
 3 files changed, 22 insertions(+), 5 deletions(-)
 create mode 100644 src/components/app/leaderboard/leagues/leagues-showcase.tsx

diff --git a/src/app/(app)/(default_layout)/leaderboard/page.tsx b/src/app/(app)/(default_layout)/leaderboard/page.tsx
index 677da18bf..4bb80cf93 100644
--- a/src/app/(app)/(default_layout)/leaderboard/page.tsx
+++ b/src/app/(app)/(default_layout)/leaderboard/page.tsx
@@ -8,6 +8,7 @@ import LoadingSpinner from '@/components/ui/loading';
 import AnswerQuestionModal from '@/components/app/leaderboard/answer-question-modal';
 import { getSuggestions } from '@/utils/data/questions/get-suggestions';
 import { getUserXp } from '@/utils/data/user/authed/get-user-xp';
+import LeaguesShowcase from '@/components/app/leaderboard/leagues/leagues-showcase';
 
 const LeaderboardHero = dynamic(() => import('@/components/app/leaderboard/leaderboard-hero'), {
   loading: () => <div>Loading hero...</div>,
@@ -61,10 +62,14 @@ export default async function TodaysLeaderboardPage({
 
   return (
     <>
+      <LeaguesShowcase />
+      {/**
+       * 
       <Suspense fallback={<LoadingSpinner />}>
-        {/** @ts-ignore - this is the valid type */}
+        {/** @ts-ignore - this is the valid type 
         <LeaderboardHero topThreeUsers={topThreeUsers} />
       </Suspense>
+       */}
       <div className="lg:container flex flex-col gap-10 mt-10">
         <Suspense fallback={<div>Loading leaderboard...</div>}>
           <LeaderboardMostQuestionsAnswered page={currentPage} postsPerPage={postsPerPage} />
diff --git a/src/app/(app)/admin/leagues/[uid]/page.tsx b/src/app/(app)/admin/leagues/[uid]/page.tsx
index d1ea2a8ad..dbf36c52a 100644
--- a/src/app/(app)/admin/leagues/[uid]/page.tsx
+++ b/src/app/(app)/admin/leagues/[uid]/page.tsx
@@ -21,10 +21,6 @@ async function getLeague(uid: string) {
 export default async function LeaguePage({ params }: { params: { uid: string } }) {
   const league = await getLeague(params.uid);
 
-  console.log({
-    league,
-  });
-
   return (
     <AdminContainer>
       <div className="mb-8 flex items-center justify-between">
diff --git a/src/components/app/leaderboard/leagues/leagues-showcase.tsx b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
new file mode 100644
index 000000000..34d61fff5
--- /dev/null
+++ b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
@@ -0,0 +1,16 @@
+import { getLeagues } from '@/utils/data/leagues/get';
+import { IndividualLeagueData } from '@prisma/client';
+
+function LeagueCard({ league }: { league: IndividualLeagueData }) {
+  return (
+    <div>
+      <h1>{league.name}</h1>
+    </div>
+  );
+}
+
+export default async function LeaguesShowcase() {
+  const leagues = await getLeagues();
+
+  return <section></section>;
+}

From 9821730d3432e98331cd11b5d5f55bb0d358c57e Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 9 Mar 2025 22:38:27 +0000
Subject: [PATCH 12/18] chore: remove separators & minor league carousel
 progress

---
 src/app/(app)/(default_layout)/layout.tsx     |  2 --
 src/app/(app)/dashboard/page.tsx              |  2 --
 .../leaderboard/leagues/leagues-showcase.tsx  | 35 ++++++++++++++++---
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/app/(app)/(default_layout)/layout.tsx b/src/app/(app)/(default_layout)/layout.tsx
index b07527109..e7cd670d5 100644
--- a/src/app/(app)/(default_layout)/layout.tsx
+++ b/src/app/(app)/(default_layout)/layout.tsx
@@ -1,6 +1,5 @@
 import SidebarLayoutTrigger from '@/components/app/navigation/sidebar-layout-trigger';
 import CurrentStreak from '@/components/ui/current-streak';
-import { Separator } from '@/components/ui/separator';
 import UpgradeModal from '@/components/app/shared/upgrade/upgrade-modal';
 import UserXp from '@/components/ui/user-xp';
 
@@ -19,7 +18,6 @@ export default function StatisticsLayout({ children }: Readonly<{ children: Reac
           </div>
         </div>
       </div>
-      <Separator className="bg-black-50" />
       <div className="container">{children}</div>
     </div>
   );
diff --git a/src/app/(app)/dashboard/page.tsx b/src/app/(app)/dashboard/page.tsx
index 4d62de0ea..c7a28b224 100644
--- a/src/app/(app)/dashboard/page.tsx
+++ b/src/app/(app)/dashboard/page.tsx
@@ -1,4 +1,3 @@
-import { Separator } from '@/components/ui/separator';
 import ClientPage from './page.client';
 import DashboardBentoGrid from '@/components/app/dashboard/dashboard-bento-grid';
 import DashboardHeader from '@/components/app/dashboard/dashboard-header';
@@ -24,7 +23,6 @@ export default async function Dashboard({ searchParams }: DashboardProps) {
     >
       <div className="text-white flex flex-col gap-y-4 h-full">
         <DashboardHeader />
-        <Separator className="bg-black-50" />
         <div className="h-full mt-1 max-w-7xl px-6 mx-auto flex flex-col gap-5">
           <DashboardBentoGrid />
         </div>
diff --git a/src/components/app/leaderboard/leagues/leagues-showcase.tsx b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
index 34d61fff5..b3c99f62c 100644
--- a/src/components/app/leaderboard/leagues/leagues-showcase.tsx
+++ b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
@@ -1,16 +1,43 @@
 import { getLeagues } from '@/utils/data/leagues/get';
 import { IndividualLeagueData } from '@prisma/client';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@/components/ui/carousel';
+import { Card, CardContent } from '@/components/ui/card';
+import { Trophy } from 'lucide-react';
 
 function LeagueCard({ league }: { league: IndividualLeagueData }) {
   return (
-    <div>
-      <h1>{league.name}</h1>
-    </div>
+    <CarouselItem className="md:basis-1/2 lg:basis-1/3">
+      <Card className="border border-gray-800 bg-gray-950/50 hover:bg-gray-900/50 transition-colors">
+        <CardContent className="flex flex-col items-center justify-center p-6">
+          <Trophy className="h-8 w-8 text-yellow-500 mb-2" />
+          <h3 className="text-xl font-semibold text-white">{league.name}</h3>
+          <p className="text-gray-400 text-sm mt-1">
+            {league.description || 'Compete with others in this league'}
+          </p>
+        </CardContent>
+      </Card>
+    </CarouselItem>
   );
 }
 
 export default async function LeaguesShowcase() {
   const leagues = await getLeagues();
 
-  return <section></section>;
+  return (
+    <section className="p-12">
+      <Carousel className="w-full">
+        <CarouselContent>
+          {leagues.map((league) => (
+            <LeagueCard key={league.uid} league={league} />
+          ))}
+        </CarouselContent>
+      </Carousel>
+    </section>
+  );
 }

From ef87e26b4e0dcbf852392d0afd01ea5639acb742 Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Mon, 10 Mar 2025 21:00:22 +0000
Subject: [PATCH 13/18] feat(leaderboard): progress with new leaderboard league
 hero

---
 .../(default_layout)/leaderboard/page.tsx     | 55 +++++++++++--------
 .../leaderboard-most-questions-answered.tsx   |  2 +-
 .../leaderboard/leagues/leagues-showcase.tsx  | 13 ++---
 3 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/src/app/(app)/(default_layout)/leaderboard/page.tsx b/src/app/(app)/(default_layout)/leaderboard/page.tsx
index 4bb80cf93..be5d85a98 100644
--- a/src/app/(app)/(default_layout)/leaderboard/page.tsx
+++ b/src/app/(app)/(default_layout)/leaderboard/page.tsx
@@ -9,6 +9,7 @@ import AnswerQuestionModal from '@/components/app/leaderboard/answer-question-mo
 import { getSuggestions } from '@/utils/data/questions/get-suggestions';
 import { getUserXp } from '@/utils/data/user/authed/get-user-xp';
 import LeaguesShowcase from '@/components/app/leaderboard/leagues/leagues-showcase';
+import UpgradeCard from '@/components/app/shared/upgrade/upgrade-card';
 
 const LeaderboardHero = dynamic(() => import('@/components/app/leaderboard/leaderboard-hero'), {
   loading: () => <div>Loading hero...</div>,
@@ -32,7 +33,7 @@ export async function generateMetadata() {
   });
 }
 
-export default async function TodaysLeaderboardPage({
+export default async function LeaderboardPage({
   searchParams,
 }: {
   searchParams: { page: string; postsPerPage: string };
@@ -61,29 +62,39 @@ export default async function TodaysLeaderboardPage({
   }
 
   return (
-    <>
-      <LeaguesShowcase />
-      {/**
+    <div className="mx-auto px-4 sm:px-6 lg:px-8 py-12 group flex flex-col xl:flex-row gap-12">
+      <div className="w-full lg:min-w-[75%] space-y-6">
+        <LeaguesShowcase />
+        {/**
        * 
-      <Suspense fallback={<LoadingSpinner />}>
-        {/** @ts-ignore - this is the valid type 
-        <LeaderboardHero topThreeUsers={topThreeUsers} />
-      </Suspense>
+       <Suspense fallback={<LoadingSpinner />}>
+       {/** @ts-ignore - this is the valid type 
+       <LeaderboardHero topThreeUsers={topThreeUsers} />
+       </Suspense>
        */}
-      <div className="lg:container flex flex-col gap-10 mt-10">
-        <Suspense fallback={<div>Loading leaderboard...</div>}>
-          <LeaderboardMostQuestionsAnswered page={currentPage} postsPerPage={postsPerPage} />
-          <div className="w-full flex justify-center gap-x-2">
-            <GlobalPagination
-              currentPage={currentPage}
-              totalPages={Math.ceil(topThreeUsersData.totalCount / postsPerPage)}
-              href={'/leaderboard'}
-              paramName="page"
-              postsPerPage={postsPerPage}
-            />
-          </div>
-        </Suspense>
+        <div className="lg:container flex flex-col gap-10 mt-10">
+          <Suspense fallback={<div>Loading leaderboard...</div>}>
+            <LeaderboardMostQuestionsAnswered page={currentPage} postsPerPage={postsPerPage} />
+            <div className="w-full flex justify-center gap-x-2">
+              <GlobalPagination
+                currentPage={currentPage}
+                totalPages={Math.ceil(topThreeUsersData.totalCount / postsPerPage)}
+                href={'/leaderboard'}
+                paramName="page"
+                postsPerPage={postsPerPage}
+              />
+            </div>
+          </Suspense>
+        </div>
       </div>
-    </>
+      <aside className="w-full xl:w-1/4">
+        <div className="sticky top-10 space-y-5 w-full">
+          <UpgradeCard
+            title="Try TechBlitz premium"
+            description="Premium questions, personalized roadmaps, and unlimited AI credits!"
+          />
+        </div>
+      </aside>
+    </div>
   );
 }
diff --git a/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx b/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx
index 58e973586..fc2a40231 100644
--- a/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx
+++ b/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx
@@ -29,7 +29,7 @@ export default async function LeaderboardXPRankings({
 
   return (
     <Card className="border-none">
-      <CardHeader className="p-0 md:p-6 w-full flex gap-2 justify-between">
+      <CardHeader className="p-0 w-full flex gap-2 justify-between">
         <div className="flex flex-wrap items-center justify-between gap-4">
           <div className="order-last md:order-first flex items-center gap-x-2">
             <Sparkles className="size-5 text-accent" />
diff --git a/src/components/app/leaderboard/leagues/leagues-showcase.tsx b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
index b3c99f62c..8a9416bd1 100644
--- a/src/components/app/leaderboard/leagues/leagues-showcase.tsx
+++ b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
@@ -8,18 +8,15 @@ import {
   CarouselPrevious,
 } from '@/components/ui/carousel';
 import { Card, CardContent } from '@/components/ui/card';
-import { Trophy } from 'lucide-react';
 
 function LeagueCard({ league }: { league: IndividualLeagueData }) {
   return (
-    <CarouselItem className="md:basis-1/2 lg:basis-1/3">
-      <Card className="border border-gray-800 bg-gray-950/50 hover:bg-gray-900/50 transition-colors">
-        <CardContent className="flex flex-col items-center justify-center p-6">
-          <Trophy className="h-8 w-8 text-yellow-500 mb-2" />
+    <CarouselItem className="md:basis-1/3 lg:basis-1/5">
+      <Card className="border-none">
+        <CardContent className="flex flex-col gap-4 items-center justify-center p-6">
+          {/** DUMMY ICON / SHIELD UNTIL I DESIGN ONE */}
+          <div style={{ backgroundColor: `#${league.color}` }} className="size-20 rounded-lg"></div>
           <h3 className="text-xl font-semibold text-white">{league.name}</h3>
-          <p className="text-gray-400 text-sm mt-1">
-            {league.description || 'Compete with others in this league'}
-          </p>
         </CardContent>
       </Card>
     </CarouselItem>

From 0f9c5ab1dad37c61bf37bf9fd7f2609209a81326 Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Mon, 10 Mar 2025 21:23:38 +0000
Subject: [PATCH 14/18] feat(leaderboard): more work with league hero creation
 + layout changes to leaderboard route (need to determine the actual route,
 /leaderboard feels wrong)

---
 .../(default_layout)/leaderboard/page.tsx     |  7 ++-
 .../leaderboard-most-questions-answered.tsx   |  4 +-
 .../leaderboard/leagues/leagues-showcase.tsx  | 47 ++++++++++++++-----
 3 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/src/app/(app)/(default_layout)/leaderboard/page.tsx b/src/app/(app)/(default_layout)/leaderboard/page.tsx
index be5d85a98..fa7e99dd6 100644
--- a/src/app/(app)/(default_layout)/leaderboard/page.tsx
+++ b/src/app/(app)/(default_layout)/leaderboard/page.tsx
@@ -10,6 +10,7 @@ import { getSuggestions } from '@/utils/data/questions/get-suggestions';
 import { getUserXp } from '@/utils/data/user/authed/get-user-xp';
 import LeaguesShowcase from '@/components/app/leaderboard/leagues/leagues-showcase';
 import UpgradeCard from '@/components/app/shared/upgrade/upgrade-card';
+import { getLeagues } from '@/utils/data/leagues/get';
 
 const LeaderboardHero = dynamic(() => import('@/components/app/leaderboard/leaderboard-hero'), {
   loading: () => <div>Loading hero...</div>,
@@ -48,6 +49,8 @@ export default async function LeaderboardPage({
     useUserServer(),
   ]);
 
+  const leagues = await getLeagues();
+
   const topThreeUsers = topThreeUsersData.users;
 
   // users logged in must answer more than three questions to view the leaderboard
@@ -64,7 +67,7 @@ export default async function LeaderboardPage({
   return (
     <div className="mx-auto px-4 sm:px-6 lg:px-8 py-12 group flex flex-col xl:flex-row gap-12">
       <div className="w-full lg:min-w-[75%] space-y-6">
-        <LeaguesShowcase />
+        <LeaguesShowcase leagues={leagues} />
         {/**
        * 
        <Suspense fallback={<LoadingSpinner />}>
@@ -72,7 +75,7 @@ export default async function LeaderboardPage({
        <LeaderboardHero topThreeUsers={topThreeUsers} />
        </Suspense>
        */}
-        <div className="lg:container flex flex-col gap-10 mt-10">
+        <div className="flex flex-col gap-10 mt-24">
           <Suspense fallback={<div>Loading leaderboard...</div>}>
             <LeaderboardMostQuestionsAnswered page={currentPage} postsPerPage={postsPerPage} />
             <div className="w-full flex justify-center gap-x-2">
diff --git a/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx b/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx
index fc2a40231..3224b10d1 100644
--- a/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx
+++ b/src/components/app/leaderboard/leaderboard-most-questions-answered.tsx
@@ -28,7 +28,7 @@ export default async function LeaderboardXPRankings({
   const userPromise = useUserServer();
 
   return (
-    <Card className="border-none">
+    <Card className="border-none flex flex-col gap-6">
       <CardHeader className="p-0 w-full flex gap-2 justify-between">
         <div className="flex flex-wrap items-center justify-between gap-4">
           <div className="order-last md:order-first flex items-center gap-x-2">
@@ -43,7 +43,7 @@ export default async function LeaderboardXPRankings({
           <ShowTimeTakenToggle userPromise={userPromise} />
         </div>
       </CardHeader>
-      <CardContent className="p-0 pt-6 md:p-6 md:pt-0">
+      <CardContent className="p-0">
         <Table>
           <TableHeader>
             <TableRow className="border-white/10">
diff --git a/src/components/app/leaderboard/leagues/leagues-showcase.tsx b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
index 8a9416bd1..3e1883724 100644
--- a/src/components/app/leaderboard/leagues/leagues-showcase.tsx
+++ b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { getLeagues } from '@/utils/data/leagues/get';
 import { IndividualLeagueData } from '@prisma/client';
 import {
@@ -8,32 +10,55 @@ import {
   CarouselPrevious,
 } from '@/components/ui/carousel';
 import { Card, CardContent } from '@/components/ui/card';
+import { useEffect, useState } from 'react';
 
-function LeagueCard({ league }: { league: IndividualLeagueData }) {
+function LeagueIcon({ league }: { league: IndividualLeagueData }) {
   return (
-    <CarouselItem className="md:basis-1/3 lg:basis-1/5">
-      <Card className="border-none">
-        <CardContent className="flex flex-col gap-4 items-center justify-center p-6">
+    <CarouselItem className="md:basis-1/2 lg:basis-1/3">
+      <Card className="border-none p-3">
+        <CardContent className="flex items-center justify-center p-6">
           {/** DUMMY ICON / SHIELD UNTIL I DESIGN ONE */}
           <div style={{ backgroundColor: `#${league.color}` }} className="size-20 rounded-lg"></div>
-          <h3 className="text-xl font-semibold text-white">{league.name}</h3>
         </CardContent>
       </Card>
     </CarouselItem>
   );
 }
 
-export default async function LeaguesShowcase() {
-  const leagues = await getLeagues();
+export default function LeaguesShowcase({ leagues }: { leagues: IndividualLeagueData[] }) {
+  const [currentLeagueIndex, setCurrentLeagueIndex] = useState(0);
 
   return (
-    <section className="p-12">
-      <Carousel className="w-full">
-        <CarouselContent>
+    <section className="space-y-6">
+      {/* Detached text section */}
+      <div className="text-center mb-8 min-h-[80px] flex flex-col items-center justify-center">
+        <h3 className="text-2xl font-semibold text-gradient from-white/55 to-white uppercase transition-all duration-300">
+          {leagues[currentLeagueIndex]?.name
+            ? `${leagues[currentLeagueIndex].name} League`
+            : 'League'}
+        </h3>
+        <p className="text-gray-400 mt-2 transition-all duration-300">
+          {leagues[currentLeagueIndex]?.description || 'Compete with others in your league'}
+        </p>
+      </div>
+
+      {/* Carousel section */}
+      <Carousel
+        opts={{ loop: true }}
+        className="w-full"
+        setApi={(api) => {
+          api?.on('select', () => {
+            setCurrentLeagueIndex(api.selectedScrollSnap());
+          });
+        }}
+      >
+        <CarouselContent className="cursor-pointer">
           {leagues.map((league) => (
-            <LeagueCard key={league.uid} league={league} />
+            <LeagueIcon key={league.uid} league={league} />
           ))}
         </CarouselContent>
+        <CarouselPrevious className="left-2" />
+        <CarouselNext className="right-2" />
       </Carousel>
     </section>
   );

From c5adefd128f22d4d06f6f0f183ee0f375c06c954 Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Mon, 10 Mar 2025 21:39:57 +0000
Subject: [PATCH 15/18] feat(leaderboard): more progress with league hero
 styling :)

---
 .../leaderboard/leagues/leagues-showcase.tsx  | 57 +++++++++----------
 1 file changed, 27 insertions(+), 30 deletions(-)

diff --git a/src/components/app/leaderboard/leagues/leagues-showcase.tsx b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
index 3e1883724..c11822af4 100644
--- a/src/components/app/leaderboard/leagues/leagues-showcase.tsx
+++ b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
@@ -1,21 +1,19 @@
 'use client';
 
-import { getLeagues } from '@/utils/data/leagues/get';
 import { IndividualLeagueData } from '@prisma/client';
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from '@/components/ui/carousel';
+import { Carousel, CarouselContent, CarouselItem } from '@/components/ui/carousel';
 import { Card, CardContent } from '@/components/ui/card';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { capitalise } from '@/utils';
 
-function LeagueIcon({ league }: { league: IndividualLeagueData }) {
+function LeagueIcon({ league, isActive }: { league: IndividualLeagueData; isActive: boolean }) {
   return (
-    <CarouselItem className="md:basis-1/2 lg:basis-1/3">
-      <Card className="border-none p-3">
+    <CarouselItem className="basis-[20%] pl-0 overflow-visible">
+      <Card
+        className={`border-none p-3 transition-all duration-300 ${
+          isActive ? 'scale-100 opacity-100' : 'scale-75 opacity-50'
+        }`}
+      >
         <CardContent className="flex items-center justify-center p-6">
           {/** DUMMY ICON / SHIELD UNTIL I DESIGN ONE */}
           <div style={{ backgroundColor: `#${league.color}` }} className="size-20 rounded-lg"></div>
@@ -30,22 +28,15 @@ export default function LeaguesShowcase({ leagues }: { leagues: IndividualLeague
 
   return (
     <section className="space-y-6">
-      {/* Detached text section */}
-      <div className="text-center mb-8 min-h-[80px] flex flex-col items-center justify-center">
-        <h3 className="text-2xl font-semibold text-gradient from-white/55 to-white uppercase transition-all duration-300">
-          {leagues[currentLeagueIndex]?.name
-            ? `${leagues[currentLeagueIndex].name} League`
-            : 'League'}
-        </h3>
-        <p className="text-gray-400 mt-2 transition-all duration-300">
-          {leagues[currentLeagueIndex]?.description || 'Compete with others in your league'}
-        </p>
-      </div>
-
       {/* Carousel section */}
       <Carousel
-        opts={{ loop: true }}
-        className="w-full"
+        opts={{
+          loop: true,
+          align: 'center',
+          containScroll: false,
+          dragFree: true,
+        }}
+        className="w-full px-4 md:px-12"
         setApi={(api) => {
           api?.on('select', () => {
             setCurrentLeagueIndex(api.selectedScrollSnap());
@@ -53,13 +44,19 @@ export default function LeaguesShowcase({ leagues }: { leagues: IndividualLeague
         }}
       >
         <CarouselContent className="cursor-pointer">
-          {leagues.map((league) => (
-            <LeagueIcon key={league.uid} league={league} />
+          {leagues.map((league, index) => (
+            <LeagueIcon key={league.uid} league={league} isActive={index === currentLeagueIndex} />
           ))}
         </CarouselContent>
-        <CarouselPrevious className="left-2" />
-        <CarouselNext className="right-2" />
       </Carousel>
+      {/* Detached text section */}
+      <div className="text-center mb-8 min-h-[50px] flex flex-col items-center justify-center">
+        <h3 className="text-3xl font-semibold text-gradient from-white/55 to-white transition-all duration-300">
+          {leagues[currentLeagueIndex]?.name
+            ? `${capitalise(leagues[currentLeagueIndex].name)} League`
+            : 'League'}
+        </h3>
+      </div>
     </section>
   );
 }

From e96f3e85865092aa3ecb7cebf31649dd6d374268 Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Mon, 10 Mar 2025 21:40:53 +0000
Subject: [PATCH 16/18] feat(leagues): clicking league card in hero will make
 it the active league being shown

---
 .../leaderboard/leagues/leagues-showcase.tsx  | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/app/leaderboard/leagues/leagues-showcase.tsx b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
index c11822af4..505bf5354 100644
--- a/src/components/app/leaderboard/leagues/leagues-showcase.tsx
+++ b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
@@ -6,13 +6,22 @@ import { Card, CardContent } from '@/components/ui/card';
 import { useState } from 'react';
 import { capitalise } from '@/utils';
 
-function LeagueIcon({ league, isActive }: { league: IndividualLeagueData; isActive: boolean }) {
+function LeagueIcon({
+  league,
+  isActive,
+  onClick,
+}: {
+  league: IndividualLeagueData;
+  isActive: boolean;
+  onClick: () => void;
+}) {
   return (
     <CarouselItem className="basis-[20%] pl-0 overflow-visible">
       <Card
         className={`border-none p-3 transition-all duration-300 ${
           isActive ? 'scale-100 opacity-100' : 'scale-75 opacity-50'
         }`}
+        onClick={onClick}
       >
         <CardContent className="flex items-center justify-center p-6">
           {/** DUMMY ICON / SHIELD UNTIL I DESIGN ONE */}
@@ -25,6 +34,14 @@ function LeagueIcon({ league, isActive }: { league: IndividualLeagueData; isActi
 
 export default function LeaguesShowcase({ leagues }: { leagues: IndividualLeagueData[] }) {
   const [currentLeagueIndex, setCurrentLeagueIndex] = useState(0);
+  const [carouselApi, setCarouselApi] = useState<any>(null);
+
+  const handleLeagueClick = (index: number) => {
+    setCurrentLeagueIndex(index);
+    if (carouselApi) {
+      carouselApi.scrollTo(index);
+    }
+  };
 
   return (
     <section className="space-y-6">
@@ -38,6 +55,7 @@ export default function LeaguesShowcase({ leagues }: { leagues: IndividualLeague
         }}
         className="w-full px-4 md:px-12"
         setApi={(api) => {
+          setCarouselApi(api);
           api?.on('select', () => {
             setCurrentLeagueIndex(api.selectedScrollSnap());
           });
@@ -45,7 +63,12 @@ export default function LeaguesShowcase({ leagues }: { leagues: IndividualLeague
       >
         <CarouselContent className="cursor-pointer">
           {leagues.map((league, index) => (
-            <LeagueIcon key={league.uid} league={league} isActive={index === currentLeagueIndex} />
+            <LeagueIcon
+              key={league.uid}
+              league={league}
+              isActive={index === currentLeagueIndex}
+              onClick={() => handleLeagueClick(index)}
+            />
           ))}
         </CarouselContent>
       </Carousel>

From 93ff7e608f632fd49c2e47603933b102d66886ef Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 16 Mar 2025 15:24:52 +0000
Subject: [PATCH 17/18] lint & hotfixes

---
 src/app/(app)/(default_layout)/leaderboard/page.tsx        | 7 -------
 .../app/leaderboard/leagues/leagues-showcase.tsx           | 6 ++++--
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/app/(app)/(default_layout)/leaderboard/page.tsx b/src/app/(app)/(default_layout)/leaderboard/page.tsx
index fa7e99dd6..e28dae6da 100644
--- a/src/app/(app)/(default_layout)/leaderboard/page.tsx
+++ b/src/app/(app)/(default_layout)/leaderboard/page.tsx
@@ -4,7 +4,6 @@ import { createMetadata } from '@/utils/seo';
 import { getMostQuestionsAnswered } from '@/utils/data/leaderboard/get-most-questions-answered';
 import GlobalPagination from '@/components/app/shared/pagination';
 import { useUserServer } from '@/hooks/use-user-server';
-import LoadingSpinner from '@/components/ui/loading';
 import AnswerQuestionModal from '@/components/app/leaderboard/answer-question-modal';
 import { getSuggestions } from '@/utils/data/questions/get-suggestions';
 import { getUserXp } from '@/utils/data/user/authed/get-user-xp';
@@ -12,10 +11,6 @@ import LeaguesShowcase from '@/components/app/leaderboard/leagues/leagues-showca
 import UpgradeCard from '@/components/app/shared/upgrade/upgrade-card';
 import { getLeagues } from '@/utils/data/leagues/get';
 
-const LeaderboardHero = dynamic(() => import('@/components/app/leaderboard/leaderboard-hero'), {
-  loading: () => <div>Loading hero...</div>,
-});
-
 const LeaderboardMostQuestionsAnswered = dynamic(
   () => import('@/components/app/leaderboard/leaderboard-most-questions-answered'),
   { loading: () => <div>Loading leaderboard...</div> }
@@ -51,8 +46,6 @@ export default async function LeaderboardPage({
 
   const leagues = await getLeagues();
 
-  const topThreeUsers = topThreeUsersData.users;
-
   // users logged in must answer more than three questions to view the leaderboard
   if (!hasAnsweredMoreThan3Questions && user) {
     // get the user a recommended question
diff --git a/src/components/app/leaderboard/leagues/leagues-showcase.tsx b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
index 505bf5354..1d578e2e0 100644
--- a/src/components/app/leaderboard/leagues/leagues-showcase.tsx
+++ b/src/components/app/leaderboard/leagues/leagues-showcase.tsx
@@ -1,11 +1,13 @@
 'use client';
 
-import { IndividualLeagueData } from '@prisma/client';
 import { Carousel, CarouselContent, CarouselItem } from '@/components/ui/carousel';
 import { Card, CardContent } from '@/components/ui/card';
 import { useState } from 'react';
 import { capitalise } from '@/utils';
 
+// types
+import type { IndividualLeagueData } from '@prisma/client';
+
 function LeagueIcon({
   league,
   isActive,
@@ -16,7 +18,7 @@ function LeagueIcon({
   onClick: () => void;
 }) {
   return (
-    <CarouselItem className="basis-[20%] pl-0 overflow-visible">
+    <CarouselItem className="basis-[15%] pl-0 overflow-visible">
       <Card
         className={`border-none p-3 transition-all duration-300 ${
           isActive ? 'scale-100 opacity-100' : 'scale-75 opacity-50'

From 51802335dc661be2bd8fcc93dc297ec99de397ae Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Fri, 21 Mar 2025 11:34:43 +0000
Subject: [PATCH 18/18] bump

---
 .../(default_layout)/leaderboard/page.tsx     | 64 +++++--------
 src/app/(app)/testing/leagues/page.tsx        | 96 +++++++++++++++++++
 2 files changed, 122 insertions(+), 38 deletions(-)
 create mode 100644 src/app/(app)/testing/leagues/page.tsx

diff --git a/src/app/(app)/(default_layout)/leaderboard/page.tsx b/src/app/(app)/(default_layout)/leaderboard/page.tsx
index e28dae6da..677da18bf 100644
--- a/src/app/(app)/(default_layout)/leaderboard/page.tsx
+++ b/src/app/(app)/(default_layout)/leaderboard/page.tsx
@@ -4,12 +4,14 @@ import { createMetadata } from '@/utils/seo';
 import { getMostQuestionsAnswered } from '@/utils/data/leaderboard/get-most-questions-answered';
 import GlobalPagination from '@/components/app/shared/pagination';
 import { useUserServer } from '@/hooks/use-user-server';
+import LoadingSpinner from '@/components/ui/loading';
 import AnswerQuestionModal from '@/components/app/leaderboard/answer-question-modal';
 import { getSuggestions } from '@/utils/data/questions/get-suggestions';
 import { getUserXp } from '@/utils/data/user/authed/get-user-xp';
-import LeaguesShowcase from '@/components/app/leaderboard/leagues/leagues-showcase';
-import UpgradeCard from '@/components/app/shared/upgrade/upgrade-card';
-import { getLeagues } from '@/utils/data/leagues/get';
+
+const LeaderboardHero = dynamic(() => import('@/components/app/leaderboard/leaderboard-hero'), {
+  loading: () => <div>Loading hero...</div>,
+});
 
 const LeaderboardMostQuestionsAnswered = dynamic(
   () => import('@/components/app/leaderboard/leaderboard-most-questions-answered'),
@@ -29,7 +31,7 @@ export async function generateMetadata() {
   });
 }
 
-export default async function LeaderboardPage({
+export default async function TodaysLeaderboardPage({
   searchParams,
 }: {
   searchParams: { page: string; postsPerPage: string };
@@ -44,7 +46,7 @@ export default async function LeaderboardPage({
     useUserServer(),
   ]);
 
-  const leagues = await getLeagues();
+  const topThreeUsers = topThreeUsersData.users;
 
   // users logged in must answer more than three questions to view the leaderboard
   if (!hasAnsweredMoreThan3Questions && user) {
@@ -58,39 +60,25 @@ export default async function LeaderboardPage({
   }
 
   return (
-    <div className="mx-auto px-4 sm:px-6 lg:px-8 py-12 group flex flex-col xl:flex-row gap-12">
-      <div className="w-full lg:min-w-[75%] space-y-6">
-        <LeaguesShowcase leagues={leagues} />
-        {/**
-       * 
-       <Suspense fallback={<LoadingSpinner />}>
-       {/** @ts-ignore - this is the valid type 
-       <LeaderboardHero topThreeUsers={topThreeUsers} />
-       </Suspense>
-       */}
-        <div className="flex flex-col gap-10 mt-24">
-          <Suspense fallback={<div>Loading leaderboard...</div>}>
-            <LeaderboardMostQuestionsAnswered page={currentPage} postsPerPage={postsPerPage} />
-            <div className="w-full flex justify-center gap-x-2">
-              <GlobalPagination
-                currentPage={currentPage}
-                totalPages={Math.ceil(topThreeUsersData.totalCount / postsPerPage)}
-                href={'/leaderboard'}
-                paramName="page"
-                postsPerPage={postsPerPage}
-              />
-            </div>
-          </Suspense>
-        </div>
+    <>
+      <Suspense fallback={<LoadingSpinner />}>
+        {/** @ts-ignore - this is the valid type */}
+        <LeaderboardHero topThreeUsers={topThreeUsers} />
+      </Suspense>
+      <div className="lg:container flex flex-col gap-10 mt-10">
+        <Suspense fallback={<div>Loading leaderboard...</div>}>
+          <LeaderboardMostQuestionsAnswered page={currentPage} postsPerPage={postsPerPage} />
+          <div className="w-full flex justify-center gap-x-2">
+            <GlobalPagination
+              currentPage={currentPage}
+              totalPages={Math.ceil(topThreeUsersData.totalCount / postsPerPage)}
+              href={'/leaderboard'}
+              paramName="page"
+              postsPerPage={postsPerPage}
+            />
+          </div>
+        </Suspense>
       </div>
-      <aside className="w-full xl:w-1/4">
-        <div className="sticky top-10 space-y-5 w-full">
-          <UpgradeCard
-            title="Try TechBlitz premium"
-            description="Premium questions, personalized roadmaps, and unlimited AI credits!"
-          />
-        </div>
-      </aside>
-    </div>
+    </>
   );
 }
diff --git a/src/app/(app)/testing/leagues/page.tsx b/src/app/(app)/testing/leagues/page.tsx
new file mode 100644
index 000000000..4d3b26cde
--- /dev/null
+++ b/src/app/(app)/testing/leagues/page.tsx
@@ -0,0 +1,96 @@
+import dynamic from 'next/dynamic';
+import { Suspense } from 'react';
+import { createMetadata } from '@/utils/seo';
+import { getMostQuestionsAnswered } from '@/utils/data/leaderboard/get-most-questions-answered';
+import GlobalPagination from '@/components/app/shared/pagination';
+import { useUserServer } from '@/hooks/use-user-server';
+import AnswerQuestionModal from '@/components/app/leaderboard/answer-question-modal';
+import { getSuggestions } from '@/utils/data/questions/get-suggestions';
+import { getUserXp } from '@/utils/data/user/authed/get-user-xp';
+import LeaguesShowcase from '@/components/app/leaderboard/leagues/leagues-showcase';
+import UpgradeCard from '@/components/app/shared/upgrade/upgrade-card';
+import { getLeagues } from '@/utils/data/leagues/get';
+
+const LeaderboardMostQuestionsAnswered = dynamic(
+  () => import('@/components/app/leaderboard/leaderboard-most-questions-answered'),
+  { loading: () => <div>Loading leaderboard...</div> }
+);
+
+export async function generateMetadata() {
+  return createMetadata({
+    title: 'Leaderboard | TechBlitz',
+    description: 'See how you stack up against the rest of the community.',
+    canonicalUrl: '/leaderboard',
+    image: {
+      text: 'Leaderboard | TechBlitz',
+      bgColor: '#000000',
+      textColor: '#ffffff',
+    },
+  });
+}
+
+export default async function Page({
+  searchParams,
+}: {
+  searchParams: { page: string; postsPerPage: string };
+}) {
+  const currentPage = Number.parseInt(searchParams.page as string) || 1;
+  const postsPerPage = Number.parseInt(searchParams.postsPerPage as string) || 10;
+
+  // run in parallel
+  const [topThreeUsersData, hasAnsweredMoreThan3Questions, user] = await Promise.all([
+    getMostQuestionsAnswered(3, 1),
+    getUserXp().then(({ userXp }) => userXp > 0),
+    useUserServer(),
+  ]);
+
+  const leagues = await getLeagues();
+
+  // users logged in must answer more than three questions to view the leaderboard
+  if (!hasAnsweredMoreThan3Questions && user) {
+    // get the user a recommended question
+    const recommendedQuestion = await getSuggestions({
+      userUid: user.uid,
+      limit: 1,
+    });
+
+    return <AnswerQuestionModal recommendedQuestion={recommendedQuestion[0]} />;
+  }
+
+  return (
+    <div className="mx-auto px-4 sm:px-6 lg:px-8 py-12 group flex flex-col xl:flex-row gap-12">
+      <div className="w-full lg:min-w-[75%] space-y-6">
+        <LeaguesShowcase leagues={leagues} />
+        {/**
+       * 
+       <Suspense fallback={<LoadingSpinner />}>
+       {/** @ts-ignore - this is the valid type 
+       <LeaderboardHero topThreeUsers={topThreeUsers} />
+       </Suspense>
+       */}
+        <div className="flex flex-col gap-10 mt-24">
+          <Suspense fallback={<div>Loading leaderboard...</div>}>
+            <LeaderboardMostQuestionsAnswered page={currentPage} postsPerPage={postsPerPage} />
+            <div className="w-full flex justify-center gap-x-2">
+              <GlobalPagination
+                currentPage={currentPage}
+                totalPages={Math.ceil(topThreeUsersData.totalCount / postsPerPage)}
+                href={'/leaderboard'}
+                paramName="page"
+                postsPerPage={postsPerPage}
+              />
+            </div>
+          </Suspense>
+        </div>
+      </div>
+      <aside className="w-full xl:w-1/4">
+        <div className="sticky top-10 space-y-5 w-full">
+          <UpgradeCard
+            title="Try TechBlitz premium"
+            description="Premium questions, personalized roadmaps, and unlimited AI credits!"
+          />
+        </div>
+      </aside>
+    </div>
+  );
+}