Comp for displaying projectmembers and changed path in main

frontend/src/Components/ProjectMembers.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+
+function ProjectMembers(): JSX.Element {
+  const { projectName } = useParams();
+  const [projectMembers, setProjectMembers] = useState<ProjectMember[]>([]);
+
+  //   const getProjectMembers = async (): Promise<void> => {
+  //     const token = localStorage.getItem("accessToken") ?? "";
+  //     const response = await api.getProjectMembers(projectName ?? "", token);
+  //     console.log(response);
+  //     if (response.success) {
+  //       setProjectMembers(response.data ?? []);
+  //     } else {
+  //       console.error(response.message);
+  //     }
+  //   };
+
+  interface ProjectMember {
+    username: string;
+    role: string;
+  }
+
+  const mockProjectMembers = [
+    {
+      username: "username1",
+      role: "Project Manager",
+    },
+    {
+      username: "username2",
+      role: "System Manager",
+    },
+    {
+      username: "username3",
+      role: "Developer",
+    },
+    {
+      username: "username4",
+      role: "Tester",
+    },
+    {
+      username: "username5",
+      role: "Tester",
+    },
+    {
+      username: "username6",
+      role: "Tester",
+    },
+  ];
+
+  const getProjectMembers = async (): Promise<void> => {
+    // Use the mock data
+    setProjectMembers(mockProjectMembers);
+
+    await Promise.resolve();
+  };
+
+  useEffect(() => {
+    void getProjectMembers();
+  }, []);
+
+  return (
+    <>
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[70vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[20px]">
+        {projectMembers.map((projectMember, index) => (
+          <h1 key={index} className="border-b-2 border-black w-full">
+            <div className="flex justify-between">
+              <div className="flex">
+                <h1>{projectMember.username}</h1>
+                <span className="ml-6 mr-2 font-bold">Role:</span>
+                <h1>{projectMember.role}</h1>
+              </div>
+              <div className="flex">
+                <div className="ml-auto flex space-x-4">
+                  <Link
+                    to={`/viewReports/${projectName}/${projectMember.username}`}
+                  >
+                    <h1 className="underline cursor-pointer font-bold">
+                      View Reports
+                    </h1>
+                  </Link>
+                  <Link
+                    to={`/changeRole/${projectName}/${projectMember.username}`}
+                  >
+                    <h1 className="underline cursor-pointer font-bold">
+                      Change Role
+                    </h1>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </h1>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default ProjectMembers;

frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx

@@ -1,10 +1,19 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
 import BackButton from "../../Components/BackButton";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
+import ProjectMembers from "../../Components/ProjectMembers";
 
 function PMProjectMembers(): JSX.Element {
-  const content = <></>;
+  const { projectName } = useParams();
+  const content = (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">
+        All Members In: {projectName}{" "}
+      </h1>
+      <ProjectMembers />
+    </>
+  );
 
   const buttons = (
     <>

frontend/src/main.tsx

@@ -64,7 +64,7 @@ const router = createBrowserRouter([
     element: <UserEditTimeReportPage />,
   },
   {
-    path: "/changeRole",
+    path: "/changeRole/:projectName/:username",
     element: <PMChangeRole />,
   },
   {
@@ -72,11 +72,11 @@ const router = createBrowserRouter([
     element: <PMOtherUsersTR />,
   },
   {
-    path: "/projectMembers",
+    path: "/projectMembers/:projectName",
     element: <PMProjectMembers />,
   },
   {
-    path: "/PMProjectPage",
+    path: "/PMProjectPage/:projectName",
     element: <PMProjectPage />,
   },
   {
@@ -88,7 +88,7 @@ const router = createBrowserRouter([
     element: <PMTotalTimeRole />,
   },
   {
-    path: "/unsignedReports",
+    path: "/unsignedReports/:projectName",
     element: <PMUnsignedReports />,
   },
   {