Merge pull request #4 from Advik-Gupta/main

Changed UI + Connected Timer + Analytics Section

Author: abhitrueprogrammer

package.json

@@ -41,6 +41,8 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
+    "recharts": "^3.2.1",
+    "shadcn": "3.3.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"

pnpm-lock.yaml

@@ -0,0 +1,25 @@
+import { handleAPIError } from "@/lib/error";
+import api from ".";
+
+export interface AnalyticsResponse {
+  status: string;
+  total_users: number;
+  total_submissions: number;
+  round_wise: Record<
+    string,
+    Array<{
+      question_id: string;
+      submissions_made: number;
+    }>
+  >;
+  language_wise: Record<string, number>;
+}
+
+export async function getAnalytics() {
+  try {
+    const response = await api.get<AnalyticsResponse>("/admin/analytics");
+    return response.data;
+  } catch (error) {
+    throw handleAPIError(error);
+  }
+}

src/api/analytics.ts

@@ -8,25 +8,26 @@ export interface GetTimeResponse {
 }
 
 export interface SetTimeParams {
-  round: string;
+  round_id: string;
   time: string;
 }
 
 export interface UpdateTimeParams {
-  duration: number;
+  round_id: string;
+  duration: string;
 }
 
 export interface StartRoundResponse {
   success: boolean;
-  round: number;
+  round_id: number;
 }
 
 /**
  * Fetch the current round and server times.
  */
 export async function getTime(): Promise<GetTimeResponse | null> {
   try {
-    const response = await api.get<GetTimeResponse>("/GetTime");
+    const response = await api.get<GetTimeResponse>("/getTime");
     return response.data;
   } catch (e) {
     console.error(e);
@@ -41,7 +42,10 @@ export async function setTime(
   data: SetTimeParams,
 ): Promise<{ success: boolean }> {
   try {
-    const response = await api.post<{ success: boolean }>("/SetTime", data);
+    const response = await api.post<{ success: boolean }>(
+      "/admin/setTime",
+      data,
+    );
     return response.data;
   } catch (e) {
     throw handleAPIError(e);
@@ -53,7 +57,7 @@ export async function setTime(
  */
 export async function updateTime(data: UpdateTimeParams): Promise<void> {
   try {
-    await api.post("/UpdateTime", data);
+    await api.post("/admin/updateTime", data);
   } catch (e) {
     throw handleAPIError(e);
   }
@@ -64,7 +68,7 @@ export async function updateTime(data: UpdateTimeParams): Promise<void> {
  */
 export async function startRound(): Promise<StartRoundResponse> {
   try {
-    const response = await api.post<StartRoundResponse>("/StartRound");
+    const response = await api.get<StartRoundResponse>("/admin/startRound");
     return response.data;
   } catch (e) {
     throw handleAPIError(e);

src/api/timer.ts

@@ -1,7 +1,7 @@
 "use client";
 import { getLeaderboard, type LeaderboardUser } from "@/api/users";
+import AnalyticsCard from "@/components/Analytics";
 import NotificationsSender from "@/components/NotificationsSender";
-import Round from "@/components/round";
 import { useQuery } from "@tanstack/react-query";
 
 function Dashboard() {
@@ -15,97 +15,18 @@ function Dashboard() {
 
   return (
     <div className="min-h-screen text-white">
-      <div className="relative w-full rounded-md border border-gray-300 p-10 shadow-md">
-        <span className="absolute -top-3 left-4 bg-black px-2 text-lg font-semibold text-white">
-          Round Select
-        </span>
-        <Round />
-      </div>
-
       <div className="s-sling m-3 mt-10 text-center text-xl font-semibold">
-        Notifications
+        Analytics
       </div>
       <div className="flex w-full justify-center text-black">
-        <NotificationsSender />
+        <AnalyticsCard />
       </div>
 
       <div className="s-sling m-3 mt-10 text-center text-xl font-semibold">
-        Leaderboard
+        Notifications
       </div>
-
-      {isLoading ? (
-        <div className="mt-5 text-center">
-          <p>Loading leaderboard...</p>
-        </div>
-      ) : error ? (
-        <div className="mt-5 text-center text-red-500">
-          <p>Error loading leaderboard: {error?.message}</p>
-        </div>
-      ) : data?.length ? (
-        <div className="m-5 flex flex-col items-center gap-5">
-          <p
-            className="w-fit cursor-pointer rounded-sm border bg-yellow-700 p-2 text-lg hover:bg-yellow-600"
-            onClick={() => navigator.clipboard.writeText(data?.[0]?.ID ?? "")}
-          >
-            #1 {data?.[0]?.Name ?? "Unknown"} — {data?.[0]?.Score ?? 0}
-          </p>
-
-          {data?.length > 1 && (
-            <div className="flex justify-around gap-5">
-              <p
-                className="w-fit cursor-pointer rounded-sm border bg-green-700 p-2 text-lg hover:bg-green-600"
-                onClick={() =>
-                  navigator.clipboard.writeText(data?.[1]?.ID ?? "")
-                }
-              >
-                #2 {data?.[1]?.Name ?? "Unknown"} — {data?.[1]?.Score ?? 0}
-              </p>
-
-              {data?.length > 2 && (
-                <p
-                  className="w-fit cursor-pointer rounded-sm border bg-red-700 p-2 text-lg hover:bg-red-600"
-                  onClick={() =>
-                    navigator.clipboard.writeText(data?.[2]?.ID ?? "")
-                  }
-                >
-                  #3 {data?.[2]?.Name ?? "Unknown"} — {data?.[2]?.Score ?? 0}
-                </p>
-              )}
-            </div>
-          )}
-        </div>
-      ) : (
-        <p>No data available</p>
-      )}
-
-      <div className="flex justify-center gap-10">
-        <table className="border-collapse">
-          {data?.slice(3, 6)?.map((user, index) => (
-            <tr
-              key={user?.ID}
-              className="cursor-pointer rounded-md text-white"
-              onClick={() => navigator.clipboard.writeText(user?.ID ?? "")}
-            >
-              <td className="m-10 bg-black px-4 py-2 text-left hover:bg-slate-700">
-                {index + 4}. {user?.Name ?? "Unknown"} — {user?.Score ?? 0}
-              </td>
-            </tr>
-          ))}
-        </table>
-
-        <table className="border-collapse">
-          {data?.slice(6, 10)?.map((user, index) => (
-            <tr
-              key={user?.ID}
-              className="cursor-pointer"
-              onClick={() => navigator.clipboard.writeText(user?.ID ?? "")}
-            >
-              <td className="m-10 bg-black px-4 py-2 text-left hover:bg-slate-700">
-                {index + 7}. {user?.Name ?? "Unknown"} — {user?.Score ?? 0}
-              </td>
-            </tr>
-          ))}
-        </table>
+      <div className="flex w-full justify-center text-black">
+        <NotificationsSender />
       </div>
     </div>
   );

src/app/dashboard/page.tsx

@@ -0,0 +1,169 @@
+"use client";
+import { getLeaderboard, type LeaderboardUser } from "@/api/users";
+import { useQuery } from "@tanstack/react-query";
+import { Copy, Trophy } from "lucide-react";
+import toast from "react-hot-toast";
+
+const ACCENT_GREEN = "#1ba94c";
+const ACCENT_COLOR = "text-[#1ba94c]";
+const CARD_BG = "bg-[#182319]";
+
+function Leaderboard() {
+  const { data, error, isLoading } = useQuery<LeaderboardUser[], Error>({
+    queryKey: ["leaderboard"],
+    queryFn: async () => {
+      const res = await getLeaderboard();
+      return res;
+    },
+  });
+
+  const handleCopy = (id: string) => {
+    navigator.clipboard
+      .writeText(id ?? "")
+      .then(() => {
+        toast.success("User ID copied to clipboard!");
+      })
+      .catch(() => {
+        toast.error("Failed to copy User ID.");
+      });
+  };
+
+  const topThree = data?.slice(0, 3) ?? [];
+  const otherUsers = data?.slice(3) ?? [];
+
+  const getRankClasses = (rank: number) => {
+    switch (rank) {
+      case 1:
+        return `${ACCENT_COLOR} border-4 border-yellow-500 shadow-[0_0_15px_rgba(253,224,71,0.5)]`;
+      case 2:
+        return "border-4 border-gray-400 text-gray-300";
+      case 3:
+        return "border-4 border-yellow-700 text-yellow-600";
+      default:
+        return "border border-gray-700 text-white";
+    }
+  };
+
+  const orderedTopThree = [];
+  if (topThree[1]) orderedTopThree.push({ user: topThree[1], rank: 2 });
+  if (topThree[0]) orderedTopThree.push({ user: topThree[0], rank: 1 });
+  if (topThree[2]) orderedTopThree.push({ user: topThree[2], rank: 3 });
+
+  return (
+    <div className={`min-h-screen p-5 text-white`}>
+      <h1
+        className={`mb-8 pb-2 text-center text-3xl font-extrabold uppercase tracking-widest sm:text-4xl ${ACCENT_COLOR} border-b border-[${ACCENT_GREEN}]/50`}
+      >
+        Leaderboard
+      </h1>
+
+      {isLoading && (
+        <div className="mt-10 text-center">
+          <p className={ACCENT_COLOR}>Loading leaderboard...</p>
+        </div>
+      )}
+      {error && (
+        <div className="mt-10 text-center text-red-500">
+          <p>Error loading leaderboard: {error?.message}</p>
+        </div>
+      )}
+
+      {!isLoading && !error && (
+        <div className="mx-auto max-w-4xl">
+          <div className="mb-12 flex items-end justify-center gap-2 sm:gap-4">
+            {orderedTopThree.map(({ user, rank }) => (
+              <div
+                key={user?.ID}
+                className={`flex transform cursor-pointer flex-col justify-between rounded-lg p-2 transition-transform duration-300 hover:scale-[1.03] bg-[${ACCENT_GREEN}]/10 shadow-lg backdrop-blur-sm border-[${ACCENT_GREEN}]/50 w-full max-w-[100px] sm:max-w-[150px] ${getRankClasses(rank)} `}
+                style={{
+                  minHeight: "180px",
+                  flexGrow: rank === 1 ? 1.2 : rank === 2 ? 1.1 : 1,
+                }}
+                onClick={() => handleCopy(user?.ID ?? "")}
+              >
+                <div className="flex flex-col items-center p-1">
+                  <Trophy
+                    className={`mb-1 h-5 w-5 sm:h-8 sm:w-8 ${
+                      rank === 1
+                        ? "fill-yellow-500"
+                        : rank === 2
+                          ? "fill-gray-400"
+                          : "fill-yellow-700"
+                    }`}
+                  />
+                  <p className="mb-0 text-xl font-black sm:text-3xl">{`#${rank}`}</p>
+                  <p className="w-full truncate text-center text-xs font-semibold sm:text-sm">
+                    {user?.Name ?? "Unknown"}
+                  </p>
+                  <p
+                    className={`mt-1 text-lg font-bold sm:text-xl ${
+                      rank === 1 ? ACCENT_COLOR : ""
+                    }`}
+                  >
+                    {user?.Score ?? 0}
+                  </p>
+                  <Copy className="mt-1 h-3 w-3 opacity-30 transition-opacity hover:opacity-100" />
+                </div>
+
+                <div
+                  className={`mt-2 rounded-b-lg p-1 text-center text-xs font-bold sm:text-sm bg-[${ACCENT_GREEN}]/30 border-t border-[${ACCENT_GREEN}]/50 `}
+                >
+                  RANK {rank}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div
+            className={`rounded-xl border border-[${ACCENT_GREEN}]/30 ${CARD_BG} p-4 shadow-inner sm:p-6`}
+          >
+            <h2
+              className={`mb-4 text-xl font-bold uppercase tracking-wider ${ACCENT_COLOR}`}
+            >
+              The Rest of the Field
+            </h2>
+            <div className="flex flex-col gap-1">
+              {otherUsers.length > 0 ? (
+                otherUsers.map((user, index) => {
+                  const rank = index + 4;
+                  return (
+                    <div
+                      key={user?.ID}
+                      className={`flex cursor-pointer items-center justify-between rounded-md p-3 transition-colors duration-200 hover:bg-[${ACCENT_GREEN}]/10`}
+                      onClick={() => handleCopy(user?.ID ?? "")}
+                    >
+                      <div className="flex items-center space-x-4">
+                        <span
+                          className={`w-6 text-right text-lg font-bold ${ACCENT_COLOR}`}
+                        >{`${rank}.`}</span>
+
+                        <span className="text-sm font-medium text-white sm:text-base">
+                          {user?.Name ?? "Unknown"}
+                        </span>
+                      </div>
+
+                      <div className="flex items-center space-x-4">
+                        <span
+                          className={`text-lg font-extrabold sm:text-xl ${ACCENT_COLOR}`}
+                        >
+                          {user?.Score ?? 0}
+                        </span>
+                        <Copy className="h-4 w-4 text-gray-500 opacity-50 transition-opacity hover:opacity-100" />
+                      </div>
+                    </div>
+                  );
+                })
+              ) : (
+                <p className="py-4 text-center text-gray-500">
+                  No other participants yet.
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Leaderboard;