Added component for PM to view other users time reports

frontend/src/Components/AllTimeReportsInProjectOtherUser.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;