Merge branch 'dev'

frontend/src/Components/AddProject.tsx

@@ -7,7 +7,7 @@ import Button from "./Button";
 
 /**
  * Tries to add a project to the system
- * @param props - Project name and description
+ * @param {Object} props - Project name and description
  * @returns {boolean} True if created, false if not
  */
 function CreateProject(props: { name: string; description: string }): boolean {
@@ -34,8 +34,8 @@ function CreateProject(props: { name: string; description: string }): boolean {
 }
 
 /**
- * Tries to add a project to the system
- * @returns {JSX.Element} UI for project adding
+ * Provides UI for adding a project to the system.
+ * @returns {JSX.Element} - Returns the component UI for adding a project
  */
 function AddProject(): JSX.Element {
   const [name, setName] = useState("");

frontend/src/Components/AllTimeReportsInProject.tsx

@@ -0,0 +1,71 @@
+//Info: This component is used to display all the time reports for a project. It will display the week number,
+//total time spent, and if the report has been signed or not. The user can click on a report to edit it.
+import { useEffect, useState } from "react";
+import { WeeklyReport } from "../Types/goTypes";
+import { Link, useParams } from "react-router-dom";
+import { api } from "../API/API";
+
+/**
+ * Renders a component that displays all the time reports for a specific project.
+ * @returns {JSX.Element} representing the component.
+ */
+function AllTimeReportsInProject(): JSX.Element {
+  const { projectName } = useParams();
+  const [weeklyReports, setWeeklyReports] = useState<WeeklyReport[]>([]);
+
+  // Call getProjects when the component mounts
+  useEffect(() => {
+    const getWeeklyReports = async (): Promise<void> => {
+      const token = localStorage.getItem("accessToken") ?? "";
+      const response = await api.getWeeklyReportsForUser(
+        projectName ?? "",
+        token,
+      );
+      console.log(response);
+      if (response.success) {
+        setWeeklyReports(response.data ?? []);
+      } else {
+        console.error(response.message);
+      }
+    };
+
+    void getWeeklyReports();
+  }, [projectName]);
+
+  return (
+    <>
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px] text-[30px]">
+        {weeklyReports.map((newWeeklyReport, index) => (
+          <Link
+            to={`/editTimeReport/${projectName}/${newWeeklyReport.week}`}
+            key={index}
+            className="border-b-2 border-black w-full"
+          >
+            <div className="flex justify-between">
+              <h1>
+                <span className="font-bold">{"Week: "}</span>
+                {newWeeklyReport.week}
+              </h1>
+              <h1>
+                <span className="font-bold">{"Total Time: "}</span>
+                {newWeeklyReport.developmentTime +
+                  newWeeklyReport.meetingTime +
+                  newWeeklyReport.adminTime +
+                  newWeeklyReport.ownWorkTime +
+                  newWeeklyReport.studyTime +
+                  newWeeklyReport.testingTime}{" "}
+                min
+              </h1>
+              <h1>
+                <span className="font-bold">{"Signed: "}</span>
+                {newWeeklyReport.signedBy ? "YES" : "NO"}
+              </h1>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default AllTimeReportsInProject;

frontend/src/Components/AuthorizedRoute.tsx

@@ -0,0 +1,18 @@
+import { Navigate } from "react-router-dom";
+import React from "react";
+
+interface AuthorizedRouteProps {
+  children: React.ReactNode;
+  isAuthorized: boolean;
+}
+
+export function AuthorizedRoute({
+  children,
+  isAuthorized,
+}: AuthorizedRouteProps): JSX.Element {
+  if (!isAuthorized) {
+    return <Navigate to="/unauthorized" />;
+  }
+
+  return children as React.ReactElement;
+}

frontend/src/Components/BackButton.tsx

@@ -1,5 +1,11 @@
+//info: Back button component to navigate back to the previous page
 import { useNavigate } from "react-router-dom";
 
+/**
+ * Renders a back button component.
+ *
+ * @returns The JSX element representing the back button.
+ */
 function BackButton(): JSX.Element {
   const navigate = useNavigate();
   const goBack = (): void => {

frontend/src/Components/BackgroundAnimation.tsx

@@ -1,5 +1,10 @@
+//info: Background animation component to animate the background of loginpage
 import { useEffect } from "react";
 
+/**
+ * Renders a background animation component.
+ * This component pre-loads images and starts a background transition animation.
+ */
 const BackgroundAnimation = (): JSX.Element => {
   useEffect(() => {
     const images = [

frontend/src/Components/BasicWindow.tsx

@@ -1,6 +1,16 @@
+//info: Basic window component to display content and buttons of a page, inclduing header and footer
+//content to insert is placed in the content prop, and buttons in the buttons prop
 import Header from "./Header";
 import Footer from "./Footer";
 
+/**
+ * Renders a basic window component with a header, content, and footer.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.content - The content to be rendered in the window.
+ * @param {React.ReactNode} props.buttons - The buttons to be rendered in the footer.
+ * @returns {JSX.Element} The rendered basic window component.
+ */
 function BasicWindow({
   content,
   buttons,

frontend/src/Components/Button.tsx

@@ -1,3 +1,12 @@
+/**
+ * Button component to display a button with text and onClick function.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.text - The text to display on the button.
+ * @param {Function} props.onClick - The function to run when the button is clicked.
+ * @param {"submit" | "button" | "reset"} props.type - The type of button.
+ * @returns {JSX.Element} The rendered Button component.
+ */
 function Button({
   text,
   onClick,

frontend/src/Components/ChangeRoles.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import Button from "./Button";
+
+export default function ChangeRoles(): JSX.Element {
+  const [selectedRole, setSelectedRole] = useState("");
+  const { username } = useParams();
+
+  const handleRoleChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    setSelectedRole(event.target.value);
+  };
+
+  //   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+  //     event.preventDefault();
+
+  //     const response = await api.changeRole(username, selectedRole, token);
+  //     if (response.success) {
+  //       console.log("Role changed successfully");
+  //     } else {
+  //       console.error("Failed to change role:", response.message);
+  //     }
+  //   };
+
+  return (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">
+        Change roll for: {username}
+      </h1>
+      <form
+        className="text-[20px] font-bold border-4 border-black bg-white flex flex-col items-center justify-center min-h-[50vh] h-fit w-[30vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]"
+        onSubmit={undefined}
+      >
+        <div className="self-start">
+          <div>
+            <label>
+              <input
+                type="radio"
+                value="System Manager"
+                checked={selectedRole === "System Manager"}
+                onChange={handleRoleChange}
+                className="ml-2 mr-2 mb-6"
+              />
+              System Manager
+            </label>
+          </div>
+          <div>
+            <label>
+              <input
+                type="radio"
+                value="Developer"
+                checked={selectedRole === "Developer"}
+                onChange={handleRoleChange}
+                className="ml-2 mr-2 mb-6"
+              />
+              Developer
+            </label>
+          </div>
+          <div>
+            <label>
+              <input
+                type="radio"
+                value="Tester"
+                checked={selectedRole === "Tester"}
+                onChange={handleRoleChange}
+                className="ml-2 mr-2 mb-6"
+              />
+              Tester
+            </label>
+          </div>
+        </div>
+        <Button
+          text="Save"
+          onClick={(): void => {
+            return;
+          }}
+          type="submit"
+        />
+      </form>
+    </>
+  );
+}

frontend/src/Components/ChangeUsername.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import InputField from "./InputField";
+
+function ChangeUsername(): JSX.Element {
+  const [newUsername, setNewUsername] = useState("");
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    setNewUsername(e.target.value);
+  };
+
+  // const handleSubmit = async (): Promise<void> => {
+  //   try {
+  //     // Call the API function to update the username
+  //     await api.updateUsername(newUsername);
+  //     // Optionally, add a success message or redirect the user
+  //   } catch (error) {
+  //     console.error("Error updating username:", error);
+  //     // Optionally, handle the error
+  //   }
+  // };
+
+  return (
+    <div>
+      <InputField
+        label="New Username"
+        type="text"
+        value={newUsername}
+        onChange={handleChange}
+      />
+    </div>
+  );
+}
+
+export default ChangeUsername;

frontend/src/Components/CountButton.tsx

@@ -1,38 +0,0 @@
-import { useState, useEffect } from "react";
-
-// Interface for the response from the server
-// This should eventually reside in a dedicated file
-interface CountResponse {
-  pressCount: number;
-}
-
-// Some constants for the button
-const BUTTON_ENDPOINT = "/api/button";
-
-// A simple button that counts how many times it's been pressed
-export function CountButton(): JSX.Element {
-  const [count, setCount] = useState<number>(NaN);
-
-  // useEffect with a [] dependency array runs only once
-  useEffect(() => {
-    async function getCount(): Promise<void> {
-      const response = await fetch(BUTTON_ENDPOINT);
-      const data = (await response.json()) as CountResponse;
-      setCount(data.pressCount);
-    }
-    void getCount();
-  }, []);
-
-  // This is what runs on every button click
-  function press(): void {
-    async function pressPost(): Promise<void> {
-      const response = await fetch(BUTTON_ENDPOINT, { method: "POST" });
-      const data = (await response.json()) as CountResponse;
-      setCount(data.pressCount);
-    }
-    void pressPost();
-  }
-
-  // Return some JSX with the button and associated handler
-  return <button onClick={press}>count is {count}</button>;
-}

frontend/src/Components/DisplayUserProjects.tsx

@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+import { Project } from "../Types/goTypes";
+import { Link } from "react-router-dom";
+import { api } from "../API/API";
+
+/**
+ * Renders a component that displays the projects a user is a part of and links to the projects start-page.
+ * @returns The JSX element representing the component.
+ */
+function DisplayUserProject(): JSX.Element {
+  const [projects, setProjects] = useState<Project[]>([]);
+
+  const getProjects = async (): Promise<void> => {
+    const token = localStorage.getItem("accessToken") ?? "";
+    const response = await api.getUserProjects(token);
+    console.log(response);
+    if (response.success) {
+      setProjects(response.data ?? []);
+    } else {
+      console.error(response.message);
+    }
+  };
+
+  // Call getProjects when the component mounts
+  useEffect(() => {
+    void getProjects();
+  }, []);
+
+  return (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
+        {projects.map((project, index) => (
+          <Link to={`/project/${project.name}`} key={index}>
+            <h1 className="font-bold underline text-[30px] cursor-pointer">
+              {project.name}
+            </h1>
+          </Link>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default DisplayUserProject;

frontend/src/Components/EditWeeklyReport.tsx

@@ -1,11 +1,14 @@
 import { useState, useEffect } from "react";
-import { NewWeeklyReport } from "../Types/goTypes";
+import { WeeklyReport, NewWeeklyReport } from "../Types/goTypes";
 import { api } from "../API/API";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import Button from "./Button";
 
+/**
+ * Renders the component for editing a weekly report.
+ * @returns JSX.Element
+ */
 export default function GetWeeklyReport(): JSX.Element {
-  const [projectName, setProjectName] = useState("");
   const [week, setWeek] = useState(0);
   const [developmentTime, setDevelopmentTime] = useState(0);
   const [meetingTime, setMeetingTime] = useState(0);
@@ -15,47 +18,48 @@ export default function GetWeeklyReport(): JSX.Element {
   const [testingTime, setTestingTime] = useState(0);
 
   const token = localStorage.getItem("accessToken") ?? "";
-  const username = localStorage.getItem("username") ?? "";
+  const { projectName } = useParams();
+  const { fetchedWeek } = useParams();
+
+  const fetchWeeklyReport = async (): Promise<void> => {
+    const response = await api.getWeeklyReport(
+      projectName ?? "",
+      fetchedWeek?.toString() ?? "0",
+      token,
+    );
+
+    if (response.success) {
+      const report: WeeklyReport = response.data ?? {
+        reportId: 0,
+        userId: 0,
+        projectId: 0,
+        week: 0,
+        developmentTime: 0,
+        meetingTime: 0,
+        adminTime: 0,
+        ownWorkTime: 0,
+        studyTime: 0,
+        testingTime: 0,
+      };
+      setWeek(report.week);
+      setDevelopmentTime(report.developmentTime);
+      setMeetingTime(report.meetingTime);
+      setAdminTime(report.adminTime);
+      setOwnWorkTime(report.ownWorkTime);
+      setStudyTime(report.studyTime);
+      setTestingTime(report.testingTime);
+    } else {
+      console.error("Failed to fetch weekly report:", response.message);
+    }
+  };
 
   useEffect(() => {
-    const fetchWeeklyReport = async (): Promise<void> => {
-      const response = await api.getWeeklyReport(
-        username,
-        projectName,
-        week.toString(),
-        token,
-      );
-
-      if (response.success) {
-        const report: NewWeeklyReport = response.data ?? {
-          projectName: "",
-          week: 0,
-          developmentTime: 0,
-          meetingTime: 0,
-          adminTime: 0,
-          ownWorkTime: 0,
-          studyTime: 0,
-          testingTime: 0,
-        };
-        setProjectName(report.projectName);
-        setWeek(report.week);
-        setDevelopmentTime(report.developmentTime);
-        setMeetingTime(report.meetingTime);
-        setAdminTime(report.adminTime);
-        setOwnWorkTime(report.ownWorkTime);
-        setStudyTime(report.studyTime);
-        setTestingTime(report.testingTime);
-      } else {
-        console.error("Failed to fetch weekly report:", response.message);
-      }
-    };
-
     void fetchWeeklyReport();
-  }, [projectName, token, username, week]);
+  });
 
   const handleNewWeeklyReport = async (): Promise<void> => {
     const newWeeklyReport: NewWeeklyReport = {
-      projectName,
+      projectName: projectName ?? "",
       week,
       developmentTime,
       meetingTime,
@@ -82,7 +86,7 @@ export default function GetWeeklyReport(): JSX.Element {
             }
             e.preventDefault();
             void handleNewWeeklyReport();
-            navigate("/project");
+            navigate(-1);
           }}
         >
           <div className="flex flex-col items-center">
@@ -233,7 +237,7 @@ export default function GetWeeklyReport(): JSX.Element {
               </tbody>
             </table>
             <Button
-              text="Submit"
+              text="Submit changes"
               onClick={(): void => {
                 return;
               }}

frontend/src/Components/Footer.tsx

@@ -1,5 +1,13 @@
+//info: Footer component to display the footer of a page where the buttons are placed
 import React from "react";
 
+/**
+ * Footer component.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The children elements to render inside the footer (buttons).
+ * @returns {JSX.Element} The rendered footer component.
+ */
 function Footer({ children }: { children: React.ReactNode }): JSX.Element {
   return (
     <footer className="bg-white">

frontend/src/Components/GetAllUsers.tsx

@@ -0,0 +1,35 @@
+import { Dispatch, useEffect } from "react";
+import { api } from "../API/API";
+
+/**
+ * Gets all usernames in the system and puts them in an array
+ * @param props - A setStateAction for the array you want to put users in
+ * @returns {void} Nothing
+ * @example
+ *  const [users, setUsers] = useState<string[]>([]);
+ *  GetAllUsers({ setUsersProp: setUsers });
+ */
+function GetAllUsers(props: {
+  setUsersProp: Dispatch<React.SetStateAction<string[]>>;
+}): void {
+  const setUsers: Dispatch<React.SetStateAction<string[]>> = props.setUsersProp;
+  useEffect(() => {
+    const fetchUsers = async (): Promise<void> => {
+      try {
+        const token = localStorage.getItem("accessToken") ?? "";
+        const response = await api.getAllUsers(token);
+        if (response.success) {
+          setUsers(response.data ?? []);
+        } else {
+          console.error("Failed to fetch users:", response.message);
+        }
+      } catch (error) {
+        console.error("Error fetching users:", error);
+      }
+    };
+
+    void fetchUsers();
+  }, [setUsers]);
+}
+
+export default GetAllUsers;

frontend/src/Components/GetProjects.tsx

@@ -0,0 +1,37 @@
+import { Dispatch, useEffect } from "react";
+import { Project } from "../Types/goTypes";
+import { api } from "../API/API";
+
+/**
+ * Gets all projects that user is a member of
+ * @param props - A setStateAction for the array you want to put projects in
+ * @returns {void} Nothing
+ * @example
+ *  const [projects, setProjects] = useState<Project[]>([]);
+ *  GetAllUsers({ setProjectsProp: setProjects });
+ */
+function GetProjects(props: {
+  setProjectsProp: Dispatch<React.SetStateAction<Project[]>>;
+}): void {
+  const setProjects: Dispatch<React.SetStateAction<Project[]>> =
+    props.setProjectsProp;
+  useEffect(() => {
+    const fetchUsers = async (): Promise<void> => {
+      try {
+        const token = localStorage.getItem("accessToken") ?? "";
+        const response = await api.getUserProjects(token);
+        if (response.success) {
+          setProjects(response.data ?? []);
+        } else {
+          console.error("Failed to fetch projects:", response.message);
+        }
+      } catch (error) {
+        console.error("Error fetching projects:", error);
+      }
+    };
+
+    void fetchUsers();
+  }, [setProjects]);
+}
+
+export default GetProjects;

frontend/src/Components/GetUsersInProject.tsx

@@ -0,0 +1,37 @@
+import { Dispatch, useEffect } from "react";
+import { UserProjectMember } from "../Types/goTypes";
+import { api } from "../API/API";
+
+/**
+ * Gets all projects that user is a member of
+ * @param props - A setStateAction for the array you want to put projects in
+ * @returns {void} Nothing
+ * @example
+ *  const [projects, setProjects] = useState<Project[]>([]);
+ *  GetAllUsers({ setProjectsProp: setProjects });
+ */
+function GetUsersInProject(props: {
+  projectName: string;
+  setUsersProp: Dispatch<React.SetStateAction<UserProjectMember[]>>;
+}): void {
+  const setUsers: Dispatch<React.SetStateAction<UserProjectMember[]>> =
+    props.setUsersProp;
+  useEffect(() => {
+    const fetchUsers = async (): Promise<void> => {
+      try {
+        const token = localStorage.getItem("accessToken") ?? "";
+        const response = await api.getAllUsersProject(props.projectName, token);
+        if (response.success) {
+          setUsers(response.data ?? []);
+        } else {
+          console.error("Failed to fetch projects:", response.message);
+        }
+      } catch (error) {
+        console.error("Error fetching projects:", error);
+      }
+    };
+    void fetchUsers();
+  }, [props.projectName, setUsers]);
+}
+
+export default GetUsersInProject;

frontend/src/Components/Header.tsx

@@ -1,7 +1,12 @@
+//info: Header component to display the header of the page including the logo and user information where thr user can logout
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import backgroundImage from "../assets/1.jpg";
 
+/**
+ * Renders the header component.
+ * @returns JSX.Element representing the header component.
+ */
 function Header(): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
 

frontend/src/Components/LoginCheck.tsx

@@ -32,16 +32,11 @@ function LoginCheck(props: {
               prevAuth = 1;
               return prevAuth;
             });
-          } else if (token !== "" && props.username === "pm") {
+          } else if (token !== "") {
             props.setAuthority((prevAuth) => {
               prevAuth = 2;
               return prevAuth;
             });
-          } else if (token !== "" && props.username === "user") {
-            props.setAuthority((prevAuth) => {
-              prevAuth = 3;
-              return prevAuth;
-            });
           }
         } else {
           console.error("Token was undefined");

frontend/src/Components/NewWeeklyReport.tsx

@@ -1,11 +1,17 @@
+//info: New weekly report form component to create a new weekly report to
+//sumbit development time, meeting time, admin time, own work time, study time and testing time
 import { useState } from "react";
 import type { NewWeeklyReport } from "../Types/goTypes";
 import { api } from "../API/API";
 import { useNavigate, useParams } from "react-router-dom";
 import Button from "./Button";
 
+/**
+ * Renders a form for creating a new weekly report.
+ * @returns The JSX element representing the new weekly report form.
+ */
 export default function NewWeeklyReport(): JSX.Element {
-  const [week, setWeek] = useState<number>();
+  const [week, setWeek] = useState<number>(0);
   const [developmentTime, setDevelopmentTime] = useState<number>();
   const [meetingTime, setMeetingTime] = useState<number>();
   const [adminTime, setAdminTime] = useState<number>();
@@ -19,7 +25,7 @@ export default function NewWeeklyReport(): JSX.Element {
   const handleNewWeeklyReport = async (): Promise<void> => {
     const newWeeklyReport: NewWeeklyReport = {
       projectName: projectName ?? "",
-      week: week ?? 0,
+      week: week,
       developmentTime: developmentTime ?? 0,
       meetingTime: meetingTime ?? 0,
       adminTime: adminTime ?? 0,
@@ -45,7 +51,7 @@ export default function NewWeeklyReport(): JSX.Element {
             }
             e.preventDefault();
             void handleNewWeeklyReport();
-            navigate("/project");
+            navigate(-1);
           }}
         >
           <div className="flex flex-col items-center">

frontend/src/Components/PMProjectMenu.tsx

@@ -0,0 +1,34 @@
+import { Link, useParams } from "react-router-dom";
+import { JSX } from "react/jsx-runtime";
+
+function PMProjectMenu(): JSX.Element {
+  const { projectName } = useParams();
+  return (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">{projectName}</h1>
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[5vh] p-[30px]">
+        <Link to={`/timeReports/${projectName}/`}>
+          <h1 className="font-bold underline text-[30px] cursor-pointer">
+            Your Time Reports
+          </h1>
+        </Link>
+        <Link to={`/newTimeReport/${projectName}`}>
+          <h1 className="font-bold underline text-[30px] cursor-pointer">
+            New Time Report
+          </h1>
+        </Link>
+        <Link to={`/projectMembers/${projectName}`}>
+          <h1 className="font-bold underline text-[30px] cursor-pointer">
+            Statistics
+          </h1>
+        </Link>
+        <Link to={`/unsignedReports/${projectName}`}>
+          <h1 className="font-bold underline text-[30px] cursor-pointer">
+            Unsigned Time Reports
+          </h1>
+        </Link>
+      </div>
+    </>
+  );
+}
+export default PMProjectMenu;

frontend/src/Components/ProjectInfoModal.tsx

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import Button from "./Button";
+import { UserProjectMember } from "../Types/goTypes";
+import GetUsersInProject from "./GetUsersInProject";
+
+function ProjectInfoModal(props: {
+  isVisible: boolean;
+  projectname: string;
+  onClose: () => void;
+  onClick: (username: string) => void;
+}): JSX.Element {
+  const [users, setUsers] = useState<UserProjectMember[]>([]);
+  GetUsersInProject({ projectName: props.projectname, setUsersProp: setUsers });
+  if (!props.isVisible) return <></>;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
+      flex justify-center items-center"
+    >
+      <div className="border-4 border-black bg-white p-2 rounded-2xl text-center h-[41vh] w-[40vw] flex flex-col">
+        <div className="pl-20 pr-20">
+          <h1 className="font-bold text-[32px] mb-[20px]">Project members:</h1>
+          <div className="border-2 border-black p-2 rounded-lg text-center overflow-scroll h-[26vh]">
+            <ul className="text-left font-medium space-y-2">
+              <div></div>
+              {users.map((user) => (
+                <li
+                  className="items-start p-1 border-2 border-black rounded-lg bg-orange-200 hover:bg-orange-600 hover:text-slate-100 hover:cursor-pointer"
+                  key={user.Username}
+                  onClick={() => {
+                    props.onClick(user.Username);
+                  }}
+                >
+                  <span>
+                    Name: {user.Username}
+                    <div></div>
+                    Role: {user.UserRole}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+        <div className="space-x-16">
+          <Button
+            text={"Delete"}
+            onClick={function (): void {
+              //DELETE PROJECT
+            }}
+            type="button"
+          />
+          <Button
+            text={"Close"}
+            onClick={function (): void {
+              props.onClose();
+            }}
+            type="button"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProjectInfoModal;

frontend/src/Components/ProjectListAdmin.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import { NewProject } from "../Types/goTypes";
+import ProjectInfoModal from "./ProjectInfoModal";
+import UserInfoModal from "./UserInfoModal";
+import DeleteUser from "./DeleteUser";
+
+/**
+ * A list of projects for admin manage projects page, that sets an onClick
+ * function for eact project <li> element, which displays a modul with
+ * user info.
+ * @param props - An array of projects to display
+ * @returns {JSX.Element} The project list
+ * @example
+ * const projects: NewProject[] = [{ name: "Project", description: "New" }];
+ * return <ProjectListAdmin projects={projects} />
+ */
+
+export function ProjectListAdmin(props: {
+  projects: NewProject[];
+}): JSX.Element {
+  const [projectModalVisible, setProjectModalVisible] = useState(false);
+  const [projectname, setProjectname] = useState("");
+  const [userModalVisible, setUserModalVisible] = useState(false);
+  const [username, setUsername] = useState("");
+
+  const handleClickUser = (username: string): void => {
+    setUsername(username);
+    setUserModalVisible(true);
+  };
+
+  const handleClickProject = (username: string): void => {
+    setProjectname(username);
+    setProjectModalVisible(true);
+  };
+
+  const handleCloseProject = (): void => {
+    setProjectname("");
+    setProjectModalVisible(false);
+  };
+
+  const handleCloseUser = (): void => {
+    setProjectname("");
+    setUserModalVisible(false);
+  };
+
+  return (
+    <>
+      <ProjectInfoModal
+        onClose={handleCloseProject}
+        onClick={handleClickUser}
+        isVisible={projectModalVisible}
+        projectname={projectname}
+      />
+      <UserInfoModal
+        manageMember={true}
+        onClose={handleCloseUser}
+        //TODO: CHANGE TO REMOVE USER FROM PROJECT
+        onDelete={() => DeleteUser}
+        isVisible={userModalVisible}
+        username={username}
+      />
+      <div>
+        <ul className="font-bold underline text-[30px] cursor-pointer padding">
+          {props.projects.map((project) => (
+            <li
+              className="pt-5"
+              key={project.name}
+              onClick={() => {
+                handleClickProject(project.name);
+              }}
+            >
+              {project.name}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+}

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/Components/Register.tsx

@@ -6,6 +6,10 @@ import Button from "./Button";
 import InputField from "./InputField";
 import { useNavigate } from "react-router-dom";
 
+/**
+ * Renders a registration form for the admin to add new users in.
+ * @returns The JSX element representing the registration form.
+ */
 export default function Register(): JSX.Element {
   const [username, setUsername] = useState<string>();
   const [password, setPassword] = useState<string>();

frontend/src/Components/UserInfoModal.tsx

@@ -5,23 +5,38 @@ import UserProjectListAdmin from "./UserProjectListAdmin";
 
 function UserInfoModal(props: {
   isVisible: boolean;
+  manageMember: boolean;
   username: string;
   onClose: () => void;
+  onDelete: (username: string) => void;
 }): JSX.Element {
   if (!props.isVisible) return <></>;
-
+  const ManageUserOrMember = (check: boolean): JSX.Element => {
+    if (check) {
+      return (
+        <Link to="/AdminChangeRole">
+          <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
+            (Change Role)
+          </p>
+        </Link>
+      );
+    }
+    return (
+      <Link to="/AdminChangeUserName">
+        <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
+          (Change Username)
+        </p>
+      </Link>
+    );
+  };
   return (
     <div
       className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm 
       flex justify-center items-center"
     >
-      <div className="border-4 border-black bg-white p-2 rounded-lg text-center">
+      <div className="border-4 border-black bg-white p-2 rounded-lg text-center flex flex-col">
         <p className="font-bold text-[30px]">{props.username}</p>
-        <Link to="/AdminChangeUserName">
-          <p className="mb-[20px] hover:font-bold hover:cursor-pointer underline">
-            (Change Username)
-          </p>
-        </Link>
+        {ManageUserOrMember(props.manageMember)}
         <div>
           <h2 className="font-bold text-[22px] mb-[20px]">
             Member of these projects:

frontend/src/Components/UserListAdmin.tsx

@@ -1,13 +1,6 @@
 import { useState } from "react";
-import { PublicUser } from "../Types/goTypes";
 import UserInfoModal from "./UserInfoModal";
-
-/**
- * The props for the UserProps component
- */
-interface UserProps {
-  users: PublicUser[];
-}
+import DeleteUser from "./DeleteUser";
 
 /**
  * A list of users for admin manage users page, that sets an onClick
@@ -20,7 +13,7 @@ interface UserProps {
  * return <UserList users={users} />;
  */
 
-export function UserListAdmin(props: UserProps): JSX.Element {
+export function UserListAdmin(props: { users: string[] }): JSX.Element {
   const [modalVisible, setModalVisible] = useState(false);
   const [username, setUsername] = useState("");
 
@@ -37,7 +30,9 @@ export function UserListAdmin(props: UserProps): JSX.Element {
   return (
     <>
       <UserInfoModal
+        manageMember={false}
         onClose={handleClose}
+        onDelete={() => DeleteUser}
         isVisible={modalVisible}
         username={username}
       />
@@ -46,12 +41,12 @@ export function UserListAdmin(props: UserProps): JSX.Element {
           {props.users.map((user) => (
             <li
               className="pt-5"
-              key={user.userId}
+              key={user}
               onClick={() => {
-                handleClick(user.username);
+                handleClick(user);
               }}
             >
-              {user.username}
+              {user}
             </li>
           ))}
         </ul>

frontend/src/Components/UserProjectMenu.tsx

@@ -0,0 +1,32 @@
+//info: User project menu component to display the user project menu where the user can navigate to
+//existing time reports in a project and create a new time report
+import { useParams, Link } from "react-router-dom";
+import { JSX } from "react/jsx-runtime";
+
+/**
+ * Renders the user project menu component.
+ *
+ * @returns JSX.Element representing the user project menu.
+ */
+function UserProjectMenu(): JSX.Element {
+  const { projectName } = useParams();
+
+  return (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">{projectName}</h1>
+      <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
+        <Link to={`/timeReports/${projectName}/`}>
+          <h1 className="font-bold underline text-[30px] cursor-pointer">
+            Your Time Reports
+          </h1>
+        </Link>
+        <Link to={`/newTimeReport/${projectName}`}>
+          <h1 className="font-bold underline text-[30px] cursor-pointer">
+            New Time Report
+          </h1>
+        </Link>
+      </div>
+    </>
+  );
+}
+export default UserProjectMenu;