feat: add EventApprove component and integrate it into EventCard for event approval functionality

Author: Aloento

package.json

@@ -1,6 +1,6 @@
 {
   "name": "statusdashboard",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "scripts": {
     "dev": "farm start",

src/Components/Event/EventApprove.tsx

@@ -0,0 +1,48 @@
+import { ScaleButton, ScaleIconActionCheckmark } from "@telekom/scale-components-react";
+import { useRequest } from "ahooks";
+import { useAccessToken } from "../Auth/useAccessToken";
+
+/**
+ * @author Aloento
+ * @since 1.5.0
+ * @version 0.1.0
+ */
+export function EventApprove({ EventId }: { EventId: number }) {
+  const getToken = useAccessToken();
+
+  const { runAsync, loading } = useRequest(async () => {
+    const url = process.env.SD_BACKEND_URL!;
+    const raw = await fetch(`${url}/v2/events/${EventId}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${getToken()}`,
+      },
+      body: JSON.stringify({
+        status: "reviewed",
+        message: "Approved by operator",
+        update_date: new Date().toISOString(),
+      }),
+    });
+
+    if (!raw.ok) {
+      throw new Error("Failed to approve event: " + await raw.text());
+    }
+
+    window.location.reload();
+  }, {
+    manual: true,
+  });
+
+  return (
+    <ScaleButton
+      size="small"
+      variant="secondary"
+      disabled={loading}
+      onClick={() => runAsync()}
+    >
+      <ScaleIconActionCheckmark />
+      &nbsp;Approve
+    </ScaleButton>
+  );
+}

src/Components/Event/EventCard.tsx

@@ -1,11 +1,11 @@
-import { ScaleButton, ScaleIconActionCheckmark } from "@telekom/scale-components-react";
 import dayjs from "dayjs";
 import { Dic } from "~/Helpers/Entities";
 import { Models } from "~/Services/Status.Models";
 import { Authorized } from "../Auth/With";
 import { Indicator } from "../Home/Indicator";
 import { EventStatus, EventType, IsIncident } from "./Enums";
 import { EventAffected } from "./EventAffected";
+import { EventApprove } from "./EventApprove";
 import { EventEditor } from "./EventEditor";
 import { EventExtract } from "./EventExtract";
 
@@ -40,10 +40,9 @@ export function EventCard({ Event }: { Event: Models.IEvent }) {
 
         <Authorized>
           <div className="flex gap-x-3">
-            <ScaleButton size="small" variant="secondary">
-              <ScaleIconActionCheckmark />
-              &nbsp;Approve
-            </ScaleButton>
+            {Event.Status === EventStatus.PendingReview && (
+              <EventApprove EventId={Event.Id} />
+            )}
 
             {
               Event.RegionServices.size > 1 &&