Winzo Referral Table + Add Participants Pop-up Card

src/components/Benefit_CA.jsx

@@ -64,6 +64,11 @@ const BenefitsSection = () => {
               CA Leaderboard
             </button>
           </a>
+          <a href="/winzo_referral">
+            <button className="p-4 rounded-lg transition-all duration-500 hover:bg-gray-200 bg-white border-2 border-orange-500 text-orange-500 text-lg font-bold ml-5" onClick={() => window.location.href = "/ca-register"}>
+              Winzo Referral
+            </button>
+          </a>
           {
             user?.role === "admin" &&
             <a href="/allCaRequests">

src/components/WinzoAddModel.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+
+const Winzo_AddCard = ({ isOpen, onClose }) => {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="bg-white rounded-lg p-6 w-96 relative">
+        <h2 className="text-2xl font-bold mb-4 text-lime-600">Enter Details of Referee</h2>
+
+        <div className="mb-4">
+          <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-2">
+            Username
+          </label>
+          <input
+            type="text"
+            id="username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            className="text-black w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-500"
+            placeholder="Enter refree's username"
+          />
+        </div>
+
+        <div className="mb-4">
+          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+            Email
+          </label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="text-black w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-lime-500"
+            placeholder="Enter refree's email"
+          />
+        </div>
+
+        <div className="flex flex-col gap-3">
+          <button
+            onClick={() => alert(`Submitted: ${username}, ${email}`)}
+            className="px-4 py-2 bg-lime-600 text-white rounded-md hover:bg-lime-700"
+          >
+            Submit to get Verified
+          </button>
+          <button
+            onClick={onClose}
+            className="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Winzo_AddCard;

src/router.jsx

@@ -19,6 +19,7 @@ import Layout from "./layout/Layout";
 import PageTitle from "./components/PageTitle";
 import CALeaderboard from "./routes/CALeaderboard";
 import AllTeams from "./routes/Admin/AllTeams";
+import Winzo_Referral from "./routes/Winzo_Referral";
 
 export const router = createBrowserRouter([
   {
@@ -100,6 +101,13 @@ export const router = createBrowserRouter([
           <CALeaderboard />,
         </>
       },
+      {
+        path: "/winzo_referral",
+        element: <>
+          <PageTitle title="Winzo Referral | Codefest IIT (BHU)" />
+          <Winzo_Referral />,
+        </>
+      },
       {
         path: "/event/teams/:eventId",
         element: (

src/routes/Winzo_Referral.jsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from "react";
+import axios from "../utils/axiosInstance";
+import Navbar from "../components/Navbar";
+import Loader from "../components/Loader";
+import Winzo_AddCard from "../components/WinzoAddModel";
+
+const Winzo_Referral = () => {
+  const [leaderboard, setLeaderboard] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [isCardOpen, setIsCardOpen] = useState(false);
+
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
+      try {
+        const response = await axios.get("/ca/leaderboard");
+        const data = response.data;
+        let currentRank = 1;
+        let board = [];
+        for (let i = 0; i < data.length; i++) {
+          let rank;
+          if (i > 0 && data[i].points === data[i - 1].points) {
+            rank = currentRank;
+          } else {
+            rank = i + 1;
+          }
+          currentRank = rank;
+          board.push({ ...data[i], rank });
+        }
+        setLeaderboard(board);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, []);
+
+  return (
+    <>
+      <Navbar />
+      <main className="bg-[#140B29] flex flex-col items-center w-full min-h-[100vh] p-4">
+        <h1 className="font-bold font-mono text-4xl py-3">Winzo Referral</h1>
+
+        <p className="font-mono mt-5">
+          <span className="font-bold text-l text-lime-400">Point System: </span>
+          +  &#8377;10 for each participant's Winzo Referral
+        </p>
+        <p className="font-mono mt-5">
+          <span className="font-bold text-l text-red-500">UNFAIR means</span>{" "}
+          (registering through fake emails etc) to get points will lead to{" "}
+          <span className="font-bold text-l text-red-500">
+            rejection of your CA position.
+          </span>
+        </p>
+
+        <button
+          className="bg-lime-600 text-white p-3 font-bold rounded-lg hover:bg-lime-700 transition-colors mt-4"
+          onClick={() => setIsCardOpen(true)}
+        >
+          Click here to Add Referee
+        </button>
+
+        {isCardOpen && (
+          <Winzo_AddCard isOpen={isCardOpen} onClose={() => setIsCardOpen(false)} />
+        )}
+
+        {loading ? (
+          <Loader />
+        ) : (
+          <table className="table-auto border border-gray-300 px-6 w-full md:px-0 md:w-3/4 mt-4">
+            <thead>
+              <tr className="text-left font-semibold">
+                <th className="px-4 py-2 border-b">#</th>
+                <th className="px-4 py-2 border-b">Name</th>
+                <th className="px-4 py-2 border-b">Username</th>
+                <th className="px-4 py-2 border-b">Email Address</th>
+                <th className="px-4 py-2 border-b">Verification Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {leaderboard.map((entry, index) => (
+                <tr
+                  key={index}
+                  className={`${
+                    index % 2 === 0 ? "bg-[#1a0e35]" : "bg-[#160b2f]"
+                  } font-mono`}
+                >
+                  <td className="px-4 py-2 border-b text-sm">{entry.srno}</td>
+                  <td className="px-4 py-2 border-b text-sm">{entry.name}</td>
+                  <td className="px-4 py-2 border-b text-sm">{entry.username}</td>
+                  <td className="px-4 py-2 border-b text-sm">{entry.email}</td>
+                  <td className="px-4 py-2 border-b text-sm">
+                    {entry.verification_status}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </main>
+    </>
+  );
+};
+
+export default Winzo_Referral;