Update OtherUsersTR component to include unsign and delete functionality

frontend/src/Components/OtherUsersTR.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { WeeklyReport } from "../Types/goTypes";
 import { api } from "../API/API";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import Button from "./Button";
 
 /**
@@ -18,6 +18,7 @@ export default function OtherUsersTR(): JSX.Element {
   const [ownWorkTime, setOwnWorkTime] = useState(0);
   const [studyTime, setStudyTime] = useState(0);
   const [testingTime, setTestingTime] = useState(0);
+  const [reportId, setReportId] = useState(0);
 
   const token = localStorage.getItem("accessToken") ?? "";
   const { projectName } = useParams();
@@ -48,6 +49,7 @@ export default function OtherUsersTR(): JSX.Element {
           studyTime: 0,
           testingTime: 0,
         };
+        setReportId(report.reportId);
         setWeek(report.week);
         setDevelopmentTime(report.developmentTime);
         setMeetingTime(report.meetingTime);
@@ -63,6 +65,27 @@ export default function OtherUsersTR(): JSX.Element {
     void fetchUsersWeeklyReport();
   });
 
+  const handleUnsignWeeklyReport = async (): Promise<boolean> => {
+    const response = await api.unsignReport(reportId, token);
+    console.log(response);
+    console.log(reportId);
+    if (response.success) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const handleDeleteWeeklyReport = async (): Promise<boolean> => {
+    const response = await api.deleteWeeklyReport(reportId, token);
+    console.log(response);
+    if (response.success) {
+      return true;
+    }
+    return false;
+  };
+  const navigate = useNavigate();
+
   return (
     <>
       <h1 className="text-[30px] font-bold">{username}&apos;s Report</h1>
@@ -156,15 +179,48 @@ export default function OtherUsersTR(): JSX.Element {
               </tr>
             </tbody>
           </table>
-          {signedOrUnsigned === "signed" && (
+          <div className="flex space-x-4">
+            {signedOrUnsigned === "signed" && (
+              <Button
+                text="Unsign Report"
+                onClick={(): void => {
+                  void (async (): Promise<void> => {
+                    const success = await handleUnsignWeeklyReport();
+                    if (success) {
+                      alert("Report successfully unsigned!");
+                      navigate(-1);
+                    } else {
+                      alert("Failed to unsign report");
+                      return;
+                    }
+                  })();
+                }}
+                type={"button"}
+              />
+            )}
             <Button
-              text="Unsign Report"
+              text="Delete Time Report"
               onClick={(): void => {
-                return;
+                void (async (): Promise<void> => {
+                  const confirmDelete = window.confirm(
+                    "Are you sure you want to delete this report? This action cannot be undone.",
+                  );
+                  if (!confirmDelete) {
+                    return;
+                  }
+                  const success = await handleDeleteWeeklyReport();
+                  if (success) {
+                    alert("Report successfully deleted!");
+                    navigate(-1);
+                  } else {
+                    alert("Failed to delete report");
+                    return;
+                  }
+                })();
               }}
-              type="submit"
+              type={"button"}
             />
-          )}
+          </div>
         </div>
       </div>
     </>