Add DisplayUnsignedReports component and update route for otherUsersTimeReports

frontend/src/Components/DisplayUnsignedReports.tsx

@@ -0,0 +1,129 @@
+import { useState, useEffect } from "react";
+import { Link, useParams } from "react-router-dom";
+
+interface UnsignedReports {
+  projectName: string;
+  username: string;
+  week: number;
+  signed: boolean;
+}
+
+/**
+ * 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 { projectName } = useParams();
+  const [unsignedReports, setUnsignedReports] = useState<UnsignedReports[]>([]);
+  //const navigate = useNavigate();
+
+  //   const getUnsignedReports = async (): Promise<void> => {
+  //     const token = localStorage.getItem("accessToken") ?? "";
+  //     const response = await api.getUserProjects(token);
+  //     console.log(response);
+  //     if (response.success) {
+  //       setUnsignedReports(response.data ?? []);
+  //     } else {
+  //       console.error(response.message);
+  //     }
+  //   };
+
+  //   const handleReportClick = async (projectName: string): Promise<void> => {
+  //     const username = localStorage.getItem("username") ?? "";
+  //     const token = localStorage.getItem("accessToken") ?? "";
+  //     const response = await api.checkIfProjectManager(
+  //       username,
+  //       projectName,
+  //       token,
+  //     );
+  //     if (response.success) {
+  //       if (response.data) {
+  //         navigate(`/PMProjectPage/${projectName}`);
+  //       } else {
+  //         navigate(`/project/${projectName}`);
+  //       }
+  //     } else {
+  //       // handle error
+  //       console.error(response.message);
+  //     }
+  //   };
+
+  const getUnsignedReports = async (): Promise<void> => {
+    // Simulate a delay
+    await Promise.resolve();
+
+    // Use mock data
+    const reports: UnsignedReports[] = [
+      {
+        projectName: "projecttest",
+        username: "user1",
+        week: 2,
+        signed: false,
+      },
+      {
+        projectName: "projecttest",
+        username: "user2",
+        week: 2,
+        signed: false,
+      },
+      {
+        projectName: "projecttest",
+        username: "user3",
+        week: 2,
+        signed: false,
+      },
+      {
+        projectName: "projecttest",
+        username: "user4",
+        week: 2,
+        signed: false,
+      },
+    ];
+
+    // Set the state with the mock data
+    setUnsignedReports(reports);
+  };
+
+  // Call getProjects when the component mounts
+  useEffect(() => {
+    void getUnsignedReports();
+  }, []);
+
+  return (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">
+        All Unsigned Reports In: {projectName}{" "}
+      </h1>
+      <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]">
+        {unsignedReports.map(
+          (unsignedReport: UnsignedReports, index: number) => (
+            <h1 key={index} className="border-b-2 border-black w-full">
+              <div className="flex justify-between">
+                <div className="flex">
+                  <h1>{unsignedReport.username}</h1>
+                  <span className="ml-6 mr-2 font-bold">Week:</span>
+                  <h1>{unsignedReport.week}</h1>
+                  <span className="ml-6 mr-2 font-bold">Signed:</span>
+                  <h1>NO</h1>
+                </div>
+                <div className="flex">
+                  <div className="ml-auto flex space-x-4">
+                    <Link
+                      to={`/otherUsersTimeReports/${projectName}/${unsignedReport.username}/${unsignedReport.week}`}
+                    >
+                      <h1 className="underline cursor-pointer font-bold">
+                        View Report
+                      </h1>
+                    </Link>
+                  </div>
+                </div>
+              </div>
+            </h1>
+          ),
+        )}
+      </div>
+    </>
+  );
+}
+
+export default DisplayUserProject;

frontend/src/main.tsx

@@ -68,7 +68,7 @@ const router = createBrowserRouter([
     element: <PMChangeRole />,
   },
   {
-    path: "/otherUsersTimeReports/:projectName/:username",
+    path: "/otherUsersTimeReports/:projectName/:username/:week",
     element: <PMOtherUsersTR />,
   },
   {