Added AllTimeReportsInProjectOtherUser component

frontend/src/Components/AllTimeReportsInProjectOtherUser.tsx

@@ -1,19 +1,19 @@
 //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 { NewWeeklyReport } 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 { username } = useParams();
   const { projectName } = useParams();
-  const [weeklyReports, setWeeklyReports] = useState<WeeklyReport[]>([]);
+  const [weeklyReports, setWeeklyReports] = useState<NewWeeklyReport[]>([]);
 
-  // Call getProjects when the component mounts
+  /*   // Call getProjects when the component mounts
   useEffect(() => {
     const getWeeklyReports = async (): Promise<void> => {
       const token = localStorage.getItem("accessToken") ?? "";
@@ -27,17 +27,49 @@ function AllTimeReportsInProject(): JSX.Element {
       } else {
         console.error(response.message);
       }
-    };
+    }; */
+  // Mock data
+  const getWeeklyReports = async (): Promise<void> => {
+    // Simulate a delay
+    await Promise.resolve();
+    const mockWeeklyReports: NewWeeklyReport[] = [
+      {
+        projectName: "Project 1",
+        week: 1,
+        developmentTime: 10,
+        meetingTime: 2,
+        adminTime: 1,
+        ownWorkTime: 3,
+        studyTime: 4,
+        testingTime: 5,
+      },
+      {
+        projectName: "Project 1",
+        week: 2,
+        developmentTime: 8,
+        meetingTime: 2,
+        adminTime: 1,
+        ownWorkTime: 3,
+        studyTime: 4,
+        testingTime: 5,
+      },
+      // Add more reports as needed
+    ];
 
+    // Use the mock data instead of the real data
+    setWeeklyReports(mockWeeklyReports);
+  };
+  useEffect(() => {
     void getWeeklyReports();
-  }, [projectName]);
+  }, []);
 
   return (
     <>
+      <h1 className="text-[30px] font-bold">{username}&apos;s Time Reports</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] text-[30px]">
         {weeklyReports.map((newWeeklyReport, index) => (
           <Link
-            to={`/editTimeReport/${projectName}/${newWeeklyReport.week}`}
+            to={`/editOthersTR/${projectName}/${username}/${newWeeklyReport.week}`}
             key={index}
             className="border-b-2 border-black w-full"
           >
@@ -58,7 +90,7 @@ function AllTimeReportsInProject(): JSX.Element {
               </h1>
               <h1>
                 <span className="font-bold">{"Signed: "}</span>
-                {newWeeklyReport.signedBy ? "YES" : "NO"}
+                NO
               </h1>
             </div>
           </Link>