kossiitkgp#195 Issue:Project Stats Page

src/App.tsx

@@ -14,6 +14,7 @@ import PastProgramsPage from "./pages/PastProgramsPage";
 import StudentDashboard from "./pages/StudentDashboard";
 import RegistrationForm from "./pages/RegistrationForm";
 import NotFoundPage from "./pages/404";
+import ProjectStats from "./pages/ProjectStat";
 
 function App() {
   return (
@@ -61,6 +62,10 @@ function App() {
                 path={ROUTER_PATHS.PASTPROGRAMS}
                 element={<PastProgramsPage />}
               />
+              <Route
+                path={ROUTER_PATHS.ALL_PROJECT_STATS}
+                element={<ProjectStats />}
+              />
               <Route path="*" element={<NotFoundPage />} />
             </Routes>
           </AuthProvider>

src/components/Navbar.tsx

@@ -17,6 +17,7 @@ const LINKS = [
   { name: "PROJECTS", link: ROUTER_PATHS.PROJECTS_LIST },
   // { name: "TESTIMONIALS", link: ROUTER_PATHS.TESTIMONIALS },
   { name: "FAQs", link: ROUTER_PATHS.FAQ },
+  { name: "PROJECT STATS", link: ROUTER_PATHS.ALL_PROJECT_STATS },
 ];
 
 function BrandLogo() {

src/pages/ProjectStat.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";  // Import useParams for accessing route parameters
+import { makeRequest } from "../util/backend";
+import { useAuthContext } from "../util/auth";
+import { IEndpointTypes } from "../util/types";
+//import { Console } from "console";
+
+function ProjectStats() {
+  console.log("abcd") 
+  const authContext = useAuthContext();
+  const [projectStats, setProjectStats] = useState<
+    IEndpointTypes["stats/projects"]["response"] | null
+  >(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Access the project ID from the route parameters
+  const { } = useParams();
+
+  useEffect(() => {
+    // Make a request to the specific project stats endpoint
+    makeRequest("stats/projects", "get", null, authContext.jwt)
+      .then((response) => {
+        console.log(response)
+        if (response.is_ok) {
+          setProjectStats(response.response);
+        } else {
+          setError("Error fetching project stats.");
+          console.log(response.response);
+        }
+      })
+      .catch((e) => {
+        setError("Error fetching project stats.");
+        console.log(e);
+      });
+  }, []);  
+
+  return (
+    <div className="flex flex-col items-center pt-28">
+      <h1 className="font-display text-5xl md:text-7xl font-bold text-center">
+        Project Stats
+      </h1>
+      {error !== null ? (
+        <p className="text-center text-red-500">{error}</p>
+      ) : projectStats !== null ? (
+        <div className="max-w-7xl px-8 py-4">
+          <table className="min-w-full">
+            <thead>
+              <tr>
+                <th>Project Name</th>
+                <th>Repository Link</th>
+                <th>Commit Count</th>
+                <th>Pull Count</th>
+                {/* Add more columns as needed */}
+              </tr>
+            </thead>
+            <tbody>
+              {projectStats.projects.map((project) => (
+                <tr key={project.id}>
+                  <td>{project.name}</td>
+                  <td>{project.repo_link}</td>
+                  <td>{project.commit_count}</td>
+                  <td>{project.pull_count}</td>
+                  {/* Add more cells as needed */}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        null
+      )}
+    </div>
+  );
+}
+
+export default ProjectStats;

src/util/types.ts

@@ -78,6 +78,16 @@ export interface IEndpointTypes {
       students: IStudentInfo[];
     };
   };
+  "stats/projects": {
+    request: null;
+    response: {
+      name: string;
+      username: string;
+      email: string;
+      projects: IProjectDashboardInfo[];
+      students: IStudentInfo[];
+    };
+  };
   [route: `project/${number}`]: {
     request: null;
     response: IProject;