From 077fce74ec42cd6f2d402bad69e53d1b694468f5 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 25 Jun 2026 05:34:11 +0000
Subject: [PATCH] Implement functional Student Portal features and fix UI/logic
 bugs

- Implemented functional QuizView component and integrated it into the course player.
- Updated Student Dashboard to display real course progress and correctly filter recommended courses.
- Implemented dynamic Arena Leaderboard by aggregating student XP from all organizations in Firebase.
- Refined gamification logic for points and XP calculation to match requirements.
- Fixed activity count calculation on Course Detail page.
- Normalized directory names to resolve case-sensitivity routing issues.
- Cleaned up redundant code and addressed code review feedback.

Co-authored-by: oshadhashiro404 <91681163+oshadhashiro404@users.noreply.github.com>
---
 .../CoursePlayerWrapper.tsx                   |  21 +-
 .../PDFViewModule.tsx                         |   0
 .../activities/[activityId]/QuizView.tsx      |  92 ++++++++
 .../VideoPlayerModule.tsx                     |   0
 .../activities/[activityId]/page.tsx          | 105 +--------
 app/StudentPortal/courses/[id]/page.tsx       |   3 +-
 app/StudentPortal/dashboard/page.tsx          |  54 +++--
 .../organizations/OrganizationContext.tsx     |  21 +-
 app/leaderboard/page.tsx                      | 213 +++++++++++++-----
 9 files changed, 308 insertions(+), 201 deletions(-)
 rename app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/{[activityid] => [activityId]}/CoursePlayerWrapper.tsx (89%)
 rename app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/{[activityid] => [activityId]}/PDFViewModule.tsx (100%)
 create mode 100644 app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityId]/QuizView.tsx
 rename app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/{[activityid] => [activityId]}/VideoPlayerModule.tsx (100%)

diff --git a/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityid]/CoursePlayerWrapper.tsx b/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityId]/CoursePlayerWrapper.tsx
similarity index 89%
rename from app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityid]/CoursePlayerWrapper.tsx
rename to app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityId]/CoursePlayerWrapper.tsx
index a0104c6..972391f 100644
--- a/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityid]/CoursePlayerWrapper.tsx
+++ b/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityId]/CoursePlayerWrapper.tsx
@@ -7,7 +7,7 @@ import { Loader2 } from "lucide-react";
 // slow loading
 const VideoPlayerModule = lazy(() => import("./VideoPlayerModule"));
 const PDFViewerModule = lazy(() => import("./PDFViewModule"));
-// quiz view is inline btw
+const QuizView = lazy(() => import("./QuizView"));
 interface CoursePlayerWrapperProps {
     activity: {
         type: string;
@@ -95,16 +95,15 @@ export default function CoursePlayerWrapper({ activity, onComplete, submitting }
                     </div>
                 );
             case "quiz":
-                // can import and use the exisiting quiz view
-                const quizConfig = content as QuizBlockConfig;
-                if (!quizConfig.quizQuestions?.length) {
-                    return (
-                        <div className="mt-6 p-6 rounded-xl border border-[var(--border-color)] bg-[var(--bg-secondary)] text-center">
-                            <p className="text-[var(--text-muted)]">No quiz questions have been added to this block yet.</p>
-                        </div>
-                    );
-                }
-                return <div className="mt-6 text-[var(--text-muted)] text-center p-6">Quiz renderer — wire in QuizView component here.</div>;
+                return (
+                    <Suspense fallback={<ModuleSkeleton />}>
+                        <QuizView
+                            config={content as QuizBlockConfig}
+                            onComplete={onComplete}
+                            submitting={submitting}
+                        />
+                    </Suspense>
+                );
             case "storyline":
                 return (
                     <div className="mt-6 space-y-4">
diff --git a/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityid]/PDFViewModule.tsx b/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityId]/PDFViewModule.tsx
similarity index 100%
rename from app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityid]/PDFViewModule.tsx
rename to app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityId]/PDFViewModule.tsx
diff --git a/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityId]/QuizView.tsx b/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityId]/QuizView.tsx
new file mode 100644
index 0000000..864404d
--- /dev/null
+++ b/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityId]/QuizView.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import React, { useState } from "react";
+import { CheckCircle, Loader2 } from "lucide-react";
+import { QuizBlockConfig } from "@/app/lib/course.types";
+
+interface QuizViewProps {
+    config: QuizBlockConfig;
+    onComplete: (points?: number) => void;
+    submitting: boolean;
+}
+
+export default function QuizView({ config, onComplete, submitting }: QuizViewProps) {
+    const [answers, setAnswers] = useState<Record<number, string>>({});
+    const [submitted, setSubmitted] = useState(false);
+
+    const questions = config.quizQuestions || [];
+
+    const handleSubmit = () => {
+        setSubmitted(true);
+        const correct = questions.filter((q, i) =>
+            answers[i]?.trim().toLowerCase() === q.answer?.trim().toLowerCase()
+        ).length;
+
+        const accuracy = questions.length > 0 ? (correct / questions.length) * 100 : 0;
+        // accuracy is used by completeActivity via handleComplete's overridePoints mapping
+        // handleComplete in page.tsx: accuracy = overridePoints ? Math.round((overridePoints / 30) * 100) : 100
+        // So we pass points equivalent to accuracy out of 30.
+        // Wait, the page.tsx expects overridePoints out of 30 if we want to influence accuracy.
+        // If we pass 10 here, page.tsx will calculate accuracy as (10/30)*100 = 33%.
+        // So we should pass the accuracy percentage scaled to 30.
+        const accuracyScaledTo30 = Math.round((accuracy / 100) * 30);
+        onComplete(accuracyScaledTo30);
+    };
+
+    const allAnswered = questions.every((_, i) => answers[i]?.trim());
+
+    if (questions.length === 0) {
+        return (
+            <div className="mt-6 p-6 rounded-xl border border-[var(--border-color)] bg-[var(--bg-secondary)] text-center">
+                <p className="text-[var(--text-muted)]">No quiz questions have been added to this block yet.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="mt-6 space-y-6">
+            {questions.map((q, i) => (
+                <div key={i} className="bg-[var(--bg-secondary)] rounded-xl p-5 border border-[var(--border-color)]">
+                    <p className="font-bold text-[var(--text-main)] mb-3">{i + 1}. {q.question}</p>
+                    {q.options && q.options.length > 0 ? (
+                        <div className="space-y-2">
+                            {q.options.map((opt: string, oi: number) => (
+                                <label key={oi} className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors ${answers[i] === opt ? 'bg-blue-500/10 border border-blue-500/50' : 'bg-[var(--bg-primary)] border border-[var(--border-color)] hover:bg-[var(--bg-tertiary)]'}`}>
+                                    <input
+                                        type="radio"
+                                        name={`q-${i}`}
+                                        value={opt}
+                                        checked={answers[i] === opt}
+                                        onChange={() => setAnswers({ ...answers, [i]: opt })}
+                                        disabled={submitting || submitted}
+                                        className="text-blue-600"
+                                    />
+                                    <span className="text-sm text-[var(--text-main)]">{opt}</span>
+                                </label>
+                            ))}
+                        </div>
+                    ) : (
+                        <textarea
+                            value={answers[i] || ''}
+                            onChange={e => setAnswers({ ...answers, [i]: e.target.value })}
+                            disabled={submitting || submitted}
+                            className="w-full p-3 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 text-[var(--text-main)]"
+                            rows={3}
+                            placeholder="Your answer..."
+                        />
+                    )}
+                </div>
+            ))}
+            <div className="text-center">
+                <button
+                    onClick={handleSubmit}
+                    disabled={!allAnswered || submitting || submitted}
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-bold transition-all disabled:opacity-50 inline-flex items-center gap-2"
+                >
+                    {submitting ? <Loader2 className="animate-spin" size={18} /> : <CheckCircle size={18} />}
+                    {submitting ? 'Submitting...' : 'Submit Answers'}
+                </button>
+            </div>
+        </div>
+    );
+}
diff --git a/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityid]/VideoPlayerModule.tsx b/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityId]/VideoPlayerModule.tsx
similarity index 100%
rename from app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityid]/VideoPlayerModule.tsx
rename to app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/activities/[activityId]/VideoPlayerModule.tsx
diff --git a/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/page.tsx b/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/page.tsx
index 2531fb1..af10847 100644
--- a/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/page.tsx
+++ b/app/StudentPortal/courses/[id]/modules/[moduleId]/activities/[activityId]/page.tsx
@@ -7,7 +7,7 @@ import { useOrganizations } from "@/app/components/organizations/OrganizationCon
 import { useAuth } from "@/app/components/AuthCOntext";
 import InteractiveSandbox from "@/app/components/InteractiveSandbox";
 import { ArrowLeft, CheckCircle, Clock, Zap, Loader2 } from "lucide-react";
-import CoursePlayerWrapper from "./activities/[activityid]/CoursePlayerWrapper";
+import CoursePlayerWrapper from "./activities/[activityId]/CoursePlayerWrapper";
 
 export default function StudentActivityPage() {
   const params = useParams<{ id: string; moduleId: string; activityId: string }>();
@@ -129,104 +129,13 @@ export default function StudentActivityPage() {
             <Clock size={14} /> {activity.durationMinutes || 10} min
           </span>
         </div>
-        <h1 className="text-2xl font-extrabold text-slate-900">{activity.title}</h1>
-        {activity.type === 'sandbox' && (
-          <div className="mt-6">
-            <InteractiveSandbox onComplete={(pts) => handleComplete(pts)} />
-            <div className="mt-4 text-center">
-              <button
-                onClick={() => handleComplete(30)}
-                disabled={submitting}
-                className="bg-emerald-600 hover:bg-emerald-700 text-white px-6 py-3 rounded-xl font-bold transition-all disabled:opacity-50 inline-flex items-center gap-2"
-              >
-                {submitting ? <Loader2 className="animate-spin" size={18} /> : <CheckCircle size={18} />}
-                {submitting ? 'Submitting...' : 'Mark as Complete'}
-              </button>
-            </div>
-          </div>
-        )}
-        {activity.type === 'quiz' && activity.content?.quizQuestions && (
-          <QuizView questions={activity.content.quizQuestions} onComplete={handleComplete} submitting={submitting} />
-        )}
-        {(activity.type === 'video' || activity.type === 'storyline') && (
-          <div className="mt-6 space-y-4">
-            <div className="bg-slate-50 rounded-xl p-8 text-center">
-              <p className="text-slate-600">{activity.content?.description || 'Review the material below.'}</p>
-            </div>
-            <div className="text-center">
-              <button
-                onClick={() => handleComplete(20)}
-                disabled={submitting}
-                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-bold transition-all disabled:opacity-50 inline-flex items-center gap-2"
-              >
-                {submitting ? <Loader2 className="animate-spin" size={18} /> : <CheckCircle size={18} />}
-                {submitting ? 'Submitting...' : 'Mark as Complete'}
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function QuizView({ questions, onComplete, submitting }: { questions: any[]; onComplete: (pts?: number) => void; submitting: boolean }) {
-  const [answers, setAnswers] = useState<Record<number, string>>({});
-  const [submitted, setSubmitted] = useState(false);
-
-  const handleSubmit = () => {
-    setSubmitted(true);
-    const correct = questions.filter((q, i) => answers[i]?.trim().toLowerCase() === q.answer?.trim().toLowerCase()).length;
-    const accuracy = questions.length > 0 ? Math.round((correct / questions.length) * 100) : 0;
-    const points = Math.round(accuracy / 10) * 3;
-    onComplete(points);
-  };
-
-  const allAnswered = questions.every((_, i) => answers[i]?.trim());
+        <h1 className="text-2xl font-extrabold text-slate-900 mb-6">{activity.title}</h1>
 
-  return (
-    <div className="mt-6 space-y-6">
-      {questions.map((q, i) => (
-        <div key={i} className="bg-slate-50 rounded-xl p-5 border border-slate-100">
-          <p className="font-bold text-slate-800 mb-3">{i + 1}. {q.question}</p>
-          {q.options ? (
-            <div className="space-y-2">
-              {q.options.map((opt: string, oi: number) => (
-                <label key={oi} className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors ${answers[i] === opt ? 'bg-blue-100 border border-blue-300' : 'bg-white border border-slate-200 hover:bg-slate-50'}`}>
-                  <input
-                    type="radio"
-                    name={`q-${i}`}
-                    value={opt}
-                    checked={answers[i] === opt}
-                    onChange={() => setAnswers({ ...answers, [i]: opt })}
-                    disabled={submitting}
-                    className="text-blue-600"
-                  />
-                  <span className="text-sm text-slate-700">{opt}</span>
-                </label>
-              ))}
-            </div>
-          ) : (
-            <textarea
-              value={answers[i] || ''}
-              onChange={e => setAnswers({ ...answers, [i]: e.target.value })}
-              disabled={submitting}
-              className="w-full p-3 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20"
-              rows={3}
-              placeholder="Your answer..."
-            />
-          )}
-        </div>
-      ))}
-      <div className="text-center">
-        <button
-          onClick={handleSubmit}
-          disabled={!allAnswered || submitting}
-          className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-bold transition-all disabled:opacity-50 inline-flex items-center gap-2"
-        >
-          {submitting ? <Loader2 className="animate-spin" size={18} /> : <CheckCircle size={18} />}
-          {submitting ? 'Submitting...' : 'Submit Answers'}
-        </button>
+        <CoursePlayerWrapper
+          activity={activity}
+          onComplete={handleComplete}
+          submitting={submitting}
+        />
       </div>
     </div>
   );
diff --git a/app/StudentPortal/courses/[id]/page.tsx b/app/StudentPortal/courses/[id]/page.tsx
index ef6e836..60f5255 100644
--- a/app/StudentPortal/courses/[id]/page.tsx
+++ b/app/StudentPortal/courses/[id]/page.tsx
@@ -39,6 +39,7 @@ export default function StudentCourseDetail() {
   }
 
   const modules = course.modules ? Object.values(course.modules) : [];
+  const totalActivities = modules.reduce((acc: number, mod: any) => acc + Object.keys(mod.activityIds || {}).length, 0);
 
   return (
     <div className="max-w-4xl mx-auto space-y-8">
@@ -63,7 +64,7 @@ export default function StudentCourseDetail() {
           </div>
           <div className="bg-slate-50 rounded-xl p-4 text-center">
             <Zap className="mx-auto text-purple-500 mb-1" size={24} />
-            <div className="text-2xl font-bold text-slate-800">{Object.keys(course.activityIds || {}).length}</div>
+            <div className="text-2xl font-bold text-slate-800">{totalActivities}</div>
             <div className="text-xs text-slate-500 font-medium">Activities</div>
           </div>
           <div className="bg-slate-50 rounded-xl p-4 text-center">
diff --git a/app/StudentPortal/dashboard/page.tsx b/app/StudentPortal/dashboard/page.tsx
index 8622675..990969f 100644
--- a/app/StudentPortal/dashboard/page.tsx
+++ b/app/StudentPortal/dashboard/page.tsx
@@ -29,10 +29,11 @@ interface RecommendedCourse {
 export default function StudentDashboard() {
     const { announce } = useAccessibility();
     const { user, profile } = useAuth();
-    const { getOrganizationsForStudent, getStudentXp, getXpProgress, getStreak, getOrgCoursesWithData } = useOrganizations();
+    const { getOrganizationsForStudent, getStudentXp, getXpProgress, getStreak, getOrgCoursesWithData, getCourseProgress } = useOrganizations();
     const [orgLevelData, setOrgLevelData] = useState<{ orgName: string; orgId: string; level: number; currentXp: number; nextLevelXp: number } | null>(null);
     const [streak, setStreak] = useState<{ current: number; longest: number } | null>(null);
     const [allCourses, setAllCourses] = useState<any[]>([]);
+    const [courseProgress, setCourseProgress] = useState<Record<string, number>>({});
 
     useEffect(() => {
         if (!user?.uid) return;
@@ -44,31 +45,46 @@ export default function StudentDashboard() {
             setOrgLevelData({ orgName: org.name, orgId: org.id, ...progress });
             const courses = await getOrgCoursesWithData(org.id);
             setAllCourses(courses);
+
+            const progressData: Record<string, number> = {};
+            await Promise.all(courses.map(async (course) => {
+                if (course.id) {
+                    progressData[course.id] = await getCourseProgress(course.id, user.uid);
+                }
+            }));
+            setCourseProgress(progressData);
         });
         getStreak(user.uid).then(data => setStreak(data));
-    }, [user?.uid, getOrganizationsForStudent, getStudentXp, getXpProgress, getStreak, getOrgCoursesWithData]);
+    }, [user?.uid, getOrganizationsForStudent, getStudentXp, getXpProgress, getStreak, getOrgCoursesWithData, getCourseProgress]);
+
+    const inProgressCourses = allCourses.filter(c => courseProgress[c.id] > 0 && courseProgress[c.id] < 100);
+    const notStartedCourses = allCourses.filter(c => !courseProgress[c.id] || courseProgress[c.id] === 0);
+    const completedCourses = allCourses.filter(c => courseProgress[c.id] === 100);
 
-    const continueLearningCourses: ContinueLearningCourse[] = allCourses.length > 0 ? allCourses.slice(0, 3).map(c => ({
+    const continueLearningCourses: ContinueLearningCourse[] = [...inProgressCourses, ...notStartedCourses].slice(0, 3).map(c => ({
         id: c.id,
         title: c.title,
-        status: "in-progress" as const,
-        progress: 0,
+        status: "in-progress",
+        progress: courseProgress[c.id] || 0,
         metricText: `${Object.keys(c.modules || {}).length} Modules`,
-        footerText: "Continue",
-    })) : [];
+        footerText: courseProgress[c.id] > 0 ? "Continue" : "Start",
+    }));
 
-    const recommendedCourses: RecommendedCourse[] = allCourses.length > 3 ? allCourses.slice(3).map((c, i) => ({
-        id: c.id,
-        title: c.title,
-        category: (["SCIENCE", "DESIGN", "TECH", "ROBOTICS"])[i % 4] as "SCIENCE" | "DESIGN" | "TECH" | "ROBOTICS",
-        rating: 4.8,
-        lessonsCount: Object.keys(c.modules || {}).length,
-        bgGradient: ["from-blue-900 to-indigo-950", "from-orange-950 to-amber-900", "from-slate-900 to-sky-950", "from-emerald-950 to-teal-900"][i % 4],
-    })) : [];
+    const recommendedCourses: RecommendedCourse[] = allCourses
+        .filter(c => !courseProgress[c.id] || courseProgress[c.id] < 100)
+        .map((c, i) => ({
+            id: c.id,
+            title: c.title,
+            category: (["SCIENCE", "DESIGN", "TECH", "ROBOTICS"])[i % 4] as "SCIENCE" | "DESIGN" | "TECH" | "ROBOTICS",
+            rating: 4.8,
+            lessonsCount: Object.keys(c.modules || {}).length,
+            bgGradient: ["from-blue-900 to-indigo-950", "from-orange-950 to-amber-900", "from-slate-900 to-sky-950", "from-emerald-950 to-teal-900"][i % 4],
+        }));
     const [carouselIndex, setCarouselIndex] = useState(0);
 
     const handleNextCarousel = () => {
-        if (carouselIndex < recommendedCourses.length - 1) {
+        const maxIndex = Math.max(0, recommendedCourses.length - 4);
+        if (carouselIndex < maxIndex) {
             setCarouselIndex((prev) => prev + 1);
             announce("Showing next recommended courses");
         }
@@ -275,8 +291,8 @@ export default function StudentDashboard() {
                         <button
                             type="button"
                             onClick={handleNextCarousel}
-                            disabled={carouselIndex >= recommendedCourses.length - 1}
-                            className={`w-[2rem] h-[2rem] rounded-full border border-[var(--border-color)] bg-[var(--bg-primary)] flex items-center justify-center font-bold text-[0.8rem] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#ff6b35] ${carouselIndex >= recommendedCourses.length - 1
+                            disabled={carouselIndex >= Math.max(0, recommendedCourses.length - 4)}
+                            className={`w-[2rem] h-[2rem] rounded-full border border-[var(--border-color)] bg-[var(--bg-primary)] flex items-center justify-center font-bold text-[0.8rem] transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#ff6b35] ${carouselIndex >= Math.max(0, recommendedCourses.length - 4)
                                     ? "opacity-40 cursor-not-allowed text-[var(--text-muted)]"
                                     : "hover:bg-[#ff6b35] hover:text-white text-[var(--text-main)]"
                                 }`}
@@ -289,7 +305,7 @@ export default function StudentDashboard() {
                 <div className="overflow-hidden">
                     <div
                         className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-[1.2rem] transition-transform duration-300 ease-out"
-                        style={{ transform: `translateX(-${carouselIndex * 5}%)` }}
+                        style={{ transform: `translateX(-${carouselIndex * (100 / 4)}%)` }}
                     >
                         {recommendedCourses.map((course) => {
                             const badgeStyles = {
diff --git a/app/components/organizations/OrganizationContext.tsx b/app/components/organizations/OrganizationContext.tsx
index 6af56c3..3e4915c 100644
--- a/app/components/organizations/OrganizationContext.tsx
+++ b/app/components/organizations/OrganizationContext.tsx
@@ -506,7 +506,9 @@ export function OrganizationProvider({ children }: { children: ReactNode }) {
   };
 
   const calculateXpFromPoints = (points: number): number => {
-    return Math.ceil(points / 20) * 5;
+    // 1/4 of all points gained and rounded upto 5 get added as xp
+    const xp = points / 4;
+    return Math.ceil(xp / 5) * 5;
   };
 
   const getStudentXp = async (orgId: string, studentId: string): Promise<number> => {
@@ -535,22 +537,21 @@ export function OrganizationProvider({ children }: { children: ReactNode }) {
   };
 
   const calculatePoints = (accuracy: number, timeTakenSeconds: number, expectedDurationSeconds: number, deadline: string, completionDateTime: string) => {
-    const accuracyPoints = Math.round(accuracy / 10);
+    // Total 30pts
+    // Accuracy [%/10] -> Max 10pts
+    const accuracyPoints = Math.min(10, Math.round(accuracy / 10));
 
+    // B4 Deadline (If any) [10]
     const deadlineTime = new Date(deadline).getTime();
     const completionTime = new Date(completionDateTime).getTime();
     const isBeforeDeadline = !isNaN(deadlineTime) && !isNaN(completionTime) && completionTime <= deadlineTime;
     const deadlinePoints = isBeforeDeadline ? 10 : 0;
 
+    // Speed [time allocated % (100 -> 0) /10] -> Max 10pts
+    // If student takes 0 time, they get 10pts. If they take >= expectedDuration, they get 0pts.
     const speedRatio = expectedDurationSeconds > 0 ? timeTakenSeconds / expectedDurationSeconds : 1;
-    let speedPoints = 0;
-    if (speedRatio <= 0.5) {
-      speedPoints = 10;
-    } else if (speedRatio <= 1.5) {
-      const countedValue = (speedRatio - 0.5) * 100;
-      speedPoints = (100 - countedValue) / 10;
-    }
-    const finalSpeedPoints = Math.max(0, Math.min(10, Math.round(speedPoints)));
+    const speedPercent = Math.max(0, Math.min(100, 100 - (speedRatio * 100)));
+    const finalSpeedPoints = Math.round(speedPercent / 10);
 
     const total = accuracyPoints + deadlinePoints + finalSpeedPoints;
     return { accuracyPoints, speedPoints: finalSpeedPoints, deadlinePoints, total };
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
index 62df1e6..07ef8f8 100644
--- a/app/leaderboard/page.tsx
+++ b/app/leaderboard/page.tsx
@@ -1,9 +1,13 @@
 "use client";
 
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { Trophy, Medal, Star, Flame, ChevronLeft, TrendingUp } from "lucide-react";
+import { useOrganizations } from "@/app/components/organizations/OrganizationContext";
+import { db } from "@/app/lib/firebase";
+import { ref, get } from "firebase/database";
 
-const topThree = [
+const staticTopThree = [
   {
     rank: 1,
     name: "Aiko Tanaka",
@@ -72,6 +76,77 @@ function ChangeIndicator({ change }: { change: string }) {
 }
 
 export default function Leaderboard() {
+  const { organizations, getXpProgress } = useOrganizations();
+  const [leaderboard, setLeaderboard] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchGlobalLeaderboard = async () => {
+      try {
+        const orgsRef = ref(db, 'organizations');
+        const orgsSnap = await get(orgsRef);
+        if (!orgsSnap.exists()) {
+           setLoading(false);
+           return;
+        }
+
+        const allOrgs = orgsSnap.val();
+        const studentXpMap: Record<string, number> = {};
+
+        // Aggregate XP from all organizations for each student
+        Object.keys(allOrgs).forEach(orgId => {
+          const orgXp = allOrgs[orgId].xp || {};
+          Object.keys(orgXp).forEach(studentId => {
+            studentXpMap[studentId] = (studentXpMap[studentId] || 0) + orgXp[studentId];
+          });
+        });
+
+        const sortedStudentIds = Object.keys(studentXpMap).sort((a, b) => studentXpMap[b] - studentXpMap[a]).slice(0, 20);
+
+        const leaderboardData = await Promise.all(sortedStudentIds.map(async (studentId) => {
+          const totalXp = studentXpMap[studentId];
+          const { level } = getXpProgress(totalXp);
+
+          const userRef = ref(db, `users/${studentId}`);
+          const userSnap = await get(userRef);
+          const userData = userSnap.exists() ? userSnap.val() : {};
+
+          return {
+            id: studentId,
+            name: userData.fullName || userData.displayName || "Unknown Student",
+            score: totalXp,
+            level: level,
+            streak: userData.streak?.current || 0,
+            avatar: (userData.fullName || userData.displayName || "U").split(' ').map((n: string) => n[0]).join('').toUpperCase(),
+            avatarBg: "bg-blue-500", // Default
+            country: "🌐",
+            change: "0"
+          };
+        }));
+
+        setLeaderboard(leaderboardData);
+      } catch (error) {
+        console.error("Error fetching leaderboard:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchGlobalLeaderboard();
+  }, [getXpProgress]);
+
+  const displayLeaderboard = leaderboard.length > 0 ? leaderboard : [];
+  const topThree = displayLeaderboard.slice(0, 3);
+  const remaining = displayLeaderboard.slice(3, 13);
+
+  const getLevelName = (level: number) => {
+    if (level >= 50) return "Grandmaster";
+    if (level >= 30) return "Diamond";
+    if (level >= 20) return "Platinum";
+    if (level >= 10) return "Gold";
+    return "Silver";
+  };
+
   return (
     <div className="bg-gray-50 min-h-screen">
       {/* Header */}
@@ -116,31 +191,36 @@ export default function Leaderboard() {
       </div>
 
       {/* Top 3 podium */}
-      <div className="max-w-4xl mx-auto px-6 -mt-10 mb-8">
-        <div className="grid grid-cols-3 gap-4">
-          {[topThree[1], topThree[0], topThree[2]].map((player, idx) => {
-            const heights = ["pt-6", "pt-0", "pt-10"];
-            return (
-              <div key={player.rank} className={`${heights[idx]} flex flex-col items-center`}>
-                <div className={`w-14 h-14 rounded-full ${player.avatarBg} flex items-center justify-center text-white text-lg shadow-lg mb-2`} style={{ fontWeight: 700 }}>
-                  {player.avatar}
-                </div>
-                <div className="text-xl mb-1">{player.badge}</div>
-                <div className="bg-white rounded-xl p-4 w-full text-center shadow-sm border border-gray-100">
-                  <div className="text-gray-900 text-sm mb-0.5" style={{ fontWeight: 600 }}>{player.name}</div>
-                  <div className="text-gray-500 text-xs">{player.country}</div>
-                  <div className="text-orange-500 text-sm mt-2" style={{ fontWeight: 700 }}>
-                    {player.score.toLocaleString()}
+      {topThree.length > 0 && (
+        <div className="max-w-4xl mx-auto px-6 -mt-10 mb-8">
+          <div className="grid grid-cols-3 gap-4">
+            {[topThree[1], topThree[0], topThree[2]].map((player, idx) => {
+              if (!player) return <div key={idx} />;
+              const heights = ["pt-6", "pt-0", "pt-10"];
+              const badges = ["🥈", "🏆", "🥉"];
+              const levelName = getLevelName(player.level);
+              return (
+                <div key={player.id} className={`${heights[idx]} flex flex-col items-center`}>
+                  <div className={`w-14 h-14 rounded-full ${player.avatarBg} flex items-center justify-center text-white text-lg shadow-lg mb-2`} style={{ fontWeight: 700 }}>
+                    {player.avatar}
                   </div>
-                  <div className={`text-xs px-2 py-0.5 rounded-full mt-1.5 inline-block ${levelColors[player.level]}`}>
-                    {player.level}
+                  <div className="text-xl mb-1">{badges[idx]}</div>
+                  <div className="bg-white rounded-xl p-4 w-full text-center shadow-sm border border-gray-100">
+                    <div className="text-gray-900 text-sm mb-0.5" style={{ fontWeight: 600 }}>{player.name}</div>
+                    <div className="text-gray-500 text-xs">{player.country}</div>
+                    <div className="text-orange-500 text-sm mt-2" style={{ fontWeight: 700 }}>
+                      {player.score.toLocaleString()} XP
+                    </div>
+                    <div className={`text-xs px-2 py-0.5 rounded-full mt-1.5 inline-block ${levelColors[levelName] || "bg-gray-100 text-gray-600"}`}>
+                      Lvl {player.level} {levelName}
+                    </div>
                   </div>
                 </div>
-              </div>
-            );
-          })}
+              );
+            })}
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Table */}
       <div className="max-w-4xl mx-auto px-6 pb-16">
@@ -149,58 +229,67 @@ export default function Leaderboard() {
           <div className="grid grid-cols-12 gap-4 px-6 py-3 bg-gray-50 border-b border-gray-100 text-xs text-gray-400 uppercase tracking-wide">
             <div className="col-span-1">Rank</div>
             <div className="col-span-4">Player</div>
-            <div className="col-span-2 text-right">Score</div>
+            <div className="col-span-2 text-right">XP</div>
             <div className="col-span-2 text-center">Level</div>
             <div className="col-span-2 text-center">Streak</div>
             <div className="col-span-1 text-right">Change</div>
           </div>
 
-          {leaderboardData.map((player, i) => (
-            <div
-              key={player.rank}
-              className={`grid grid-cols-12 gap-4 px-6 py-4 items-center border-b border-gray-50 hover:bg-orange-50/40 transition-colors ${
-                i === leaderboardData.length - 1 ? "border-b-0" : ""
-              }`}
-            >
-              <div className="col-span-1 text-gray-500 text-sm" style={{ fontWeight: 600 }}>
-                {player.rank}
-              </div>
-
-              <div className="col-span-4 flex items-center gap-3">
+          {loading ? (
+             <div className="p-12 text-center text-gray-500">Loading arena data...</div>
+          ) : remaining.length === 0 && topThree.length === 0 ? (
+            <div className="p-12 text-center text-gray-500">No active learners yet. Be the first!</div>
+          ) : (
+            remaining.map((player, i) => {
+              const levelName = getLevelName(player.level);
+              return (
                 <div
-                  className={`w-9 h-9 rounded-full ${player.avatarBg} flex items-center justify-center text-white text-xs flex-shrink-0`}
-                  style={{ fontWeight: 700 }}
+                  key={player.id}
+                  className={`grid grid-cols-12 gap-4 px-6 py-4 items-center border-b border-gray-50 hover:bg-orange-50/40 transition-colors ${
+                    i === remaining.length - 1 ? "border-b-0" : ""
+                  }`}
                 >
-                  {player.avatar}
-                </div>
-                <div>
-                  <div className="text-gray-900 text-sm" style={{ fontWeight: 500 }}>
-                    {player.name}
+                  <div className="col-span-1 text-gray-500 text-sm" style={{ fontWeight: 600 }}>
+                    {i + 4}
                   </div>
-                  <div className="text-gray-400 text-xs">{player.country}</div>
-                </div>
-              </div>
 
-              <div className="col-span-2 text-right text-gray-900 text-sm" style={{ fontWeight: 600 }}>
-                {player.score.toLocaleString()}
-              </div>
+                  <div className="col-span-4 flex items-center gap-3">
+                    <div
+                      className={`w-9 h-9 rounded-full ${player.avatarBg} flex items-center justify-center text-white text-xs flex-shrink-0`}
+                      style={{ fontWeight: 700 }}
+                    >
+                      {player.avatar}
+                    </div>
+                    <div>
+                      <div className="text-gray-900 text-sm" style={{ fontWeight: 500 }}>
+                        {player.name}
+                      </div>
+                      <div className="text-gray-400 text-xs">{player.country}</div>
+                    </div>
+                  </div>
 
-              <div className="col-span-2 flex justify-center">
-                <span className={`text-xs px-2.5 py-1 rounded-full ${levelColors[player.level]}`}>
-                  {player.level}
-                </span>
-              </div>
+                  <div className="col-span-2 text-right text-gray-900 text-sm" style={{ fontWeight: 600 }}>
+                    {player.score.toLocaleString()}
+                  </div>
 
-              <div className="col-span-2 flex justify-center items-center gap-1 text-orange-500 text-sm">
-                <Flame size={14} />
-                <span style={{ fontWeight: 500 }}>{player.streak}d</span>
-              </div>
+                  <div className="col-span-2 flex justify-center">
+                    <span className={`text-xs px-2.5 py-1 rounded-full ${levelColors[levelName] || "bg-gray-100 text-gray-600"}`}>
+                      Lvl {player.level}
+                    </span>
+                  </div>
 
-              <div className="col-span-1 flex justify-end">
-                <ChangeIndicator change={player.change} />
-              </div>
-            </div>
-          ))}
+                  <div className="col-span-2 flex justify-center items-center gap-1 text-orange-500 text-sm">
+                    <Flame size={14} />
+                    <span style={{ fontWeight: 500 }}>{player.streak}d</span>
+                  </div>
+
+                  <div className="col-span-1 flex justify-end">
+                    <ChangeIndicator change={player.change} />
+                  </div>
+                </div>
+              );
+            })
+          )}
         </div>
 
         {/* Your rank (placeholder) */}