#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,72 @@
+import { useEffect, useState } from "react";
+import { makeRequest } from "../util/backend";
+import { IEndpointTypes } from "../util/types";
+import { useAuthContext } from "../util/auth";
+
+// ... (imports)
+
+function ProjectStats() {
+  const authContext = useAuthContext();
+  const [projectStats, setProjectStats] = useState<
+    IEndpointTypes["stats/projects"]["response"] | null
+  >(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    makeRequest("stats/projects", "get", null, authContext.jwt)
+      .then((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>
+                <th>Lines Added</th> 
+                <th>Lines Removed</th> 
+                <th>Languages Used</th>
+              </tr>
+            </thead>
+            <tbody>
+              {projectStats.map((project) => (
+                <tr key={project.repo_link}>
+                  <td>{project.name}</td>
+                  <td>{project.repo_link}</td>
+                  <td>{project.commit_count}</td>
+                  <td>{project.pull_count}</td>
+                  <td>{project.lines_added}</td>
+                  <td>{project.lines_removed}</td>
+                  <td>{project.languages_used.join(", ")}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default ProjectStats;

src/util/types.ts

@@ -78,6 +78,18 @@ export interface IEndpointTypes {
       students: IStudentInfo[];
     };
   };
+  "stats/projects": {
+    request: null;
+    response: {
+      name: string;
+      repo_link: string;
+      commit_count: number;
+      pull_count: number;
+      lines_added: number;
+      lines_removed: number;
+      languages_used: string[];
+    }[];
+  };
   [route: `project/${number}`]: {
     request: null;
     response: IProject;