There should be 2 more buttons on manage broadcasts card Added

backend/app/routes/broadcast/@validationSchema/index.js

@@ -19,6 +19,7 @@ const updateBroadcastValidationSchema = Joi.object().keys({
     .min(new Date(new Date() - 100000)),
   imageUrl: Joi.array().min(1).items(Joi.string().uri()),
   tags: Joi.array().min(1).items(Joi.string()),
+  isApproved: Joi.boolean().required(),
   id : Joi.string().min(24).max(24).required()
 });
 

frontend/src/pages/Admin/Components/Broadcast/Broadcast.jsx

@@ -37,12 +37,12 @@ export function Broadcast(props) {
               <AiFillEdit className={style["editt"]} />
             </div>
             <div className={style["card-content"]}>
-              <Link
+              <div
                 onClick={() => props.setTab(16)}
                 className={style["main-btn"]}
               >
                 Manage here
-              </Link>
+              </div>
             </div>
           </div>
         </div>

frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/Card.jsx

@@ -6,7 +6,10 @@ import { IconButton } from "@material-ui/core";
 import { useSelector } from "react-redux";
 import { SimpleToast } from "../../../../../../components/util/Toast";
 import style from "./card.module.scss";
-import { deleteBoardcast } from "../../../../../../service/Broadcast.jsx";
+import {
+  UpdateBoardCast,
+  deleteBoardcast,
+} from "../../../../../../service/Broadcast.jsx";
 
 export function Card(props) {
   let dark = props.theme;
@@ -38,14 +41,31 @@ export function Card(props) {
     }
     setToast({ ...toast, toastStatus: false });
   };
-
   async function deleteCard(id) {
     const res = await deleteBoardcast(id, setToast, toast);
-      if (res) {
-        props.setHandleDelete(props.handleDelete + 1);
-      }
+    if (res) {
+      props.setHandleDelete(props.handleDelete + 1);
+    }
   }
 
+  const handleApprove = async () => {
+    const { project } = props;
+    const data = {
+      id: project._id,
+      content: project.content,
+      link: project.link,
+      expiresOn: project.expiresOn,
+      imageUrl: project.imageUrl,
+      tags: project.tags,
+      isApproved: true,
+      title: project.title,
+    };
+    const res = await UpdateBoardCast(data, setToast, toast);
+    if (res) {
+      props.setHandleDelete(props.handleDelete + 1);
+    }
+  };
+
   const isSuperAdmin = useSelector((state) => state.isSuperAdmin);
   const date = new Date(props.project.createdAt.slice(0, 10));
   var months = [
@@ -137,6 +157,24 @@ export function Card(props) {
             >
               View Details
             </button>
+            <div className={style["button-group"]}>
+              <button
+                className={
+                  !props?.project?.isApproved
+                    ? style["button-approve"]
+                    : style["button-info"]
+                }
+                onClick={!props?.project?.isApproved && handleApprove}
+              >
+                {props?.project?.isApproved ? "Approved" : "Approve"}
+              </button>
+              <button
+                className={style["button-delete"]}
+                onClick={() => deleteCard(props.id)}
+              >
+                Reject
+              </button>
+            </div>
           </div>
         </div>
       </ReactCardFlip>

frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/Card/card.module.scss

@@ -14,6 +14,66 @@
   box-shadow: 0.5em 0.5em 0.5em rgb(54, 53, 53);
 }
 
+.button-group {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin: 5px 2px 5px 2px;
+}
+
+.button-approve {
+  padding: 10px;
+  border: none;
+  outline: none;
+  border-radius: 5px;
+  background-color: rgb(6, 158, 41);
+  margin: 5px;
+  color: #fff;
+  width: 120px;
+  font-size: medium;
+  font-weight: bold;
+  transition: background-color 200ms;
+}
+
+.button-edit:hover {
+  background-color: rgb(10, 205, 53);
+}
+
+.button-info {
+  padding: 10px;
+  border: none;
+  outline: none;
+  border-radius: 5px;
+  background-color: rgb(4, 123, 182);
+  margin: 5px;
+  color: #fff;
+  width: 120px;
+  font-size: medium;
+  font-weight: bold;
+  transition: background-color 200ms;
+}
+
+.button-delete {
+  padding: 10px;
+  border: none;
+  outline: none;
+  border-radius: 5px;
+  background-color: #fc0254;
+  margin: 5px;
+  color: #fff;
+  width: 120px;
+  font-size: medium;
+  font-weight: bold;
+  transition: background-color 200ms;
+  text-align: center;
+}
+
+.button-delete:hover {
+  background-color: #fc3779;
+}
+
 // for dark theme
 .card-item-dark {
   background-color: #171717;
@@ -28,7 +88,7 @@
   align-items: center;
   padding: 1.5em;
   color: var(--bs-light);
-  height: 380px;
+  height: 410px;
 }
 
 .clickable-card:hover {

frontend/src/service/Broadcast.jsx

@@ -108,4 +108,41 @@ const postBoardcast = async ( data, setToast, toast) => {
   }
 };
 
-export { boardcast, customBoardcast, deleteBoardcast, postBoardcast };
+const UpdateBoardCast = async (data, setToast, toast) => {
+  try {
+    const response = await fetch(`${END_POINT}/broadcast/update`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+      body: JSON.stringify(data),
+    });
+    if (!response.ok) {
+      throw new Error("Failed to Approve");
+    }
+    setToast({
+      ...toast,
+      toastMessage: "Successfully Approved",
+      toastStatus: true,
+      toastType: "success",
+    });
+    return true;
+  } catch (error) {
+    console.log("Failed to Approve", error.message);
+    setToast({
+      ...toast,
+      toastMessage: "Failed to Approve",
+      toastStatus: true,
+      toastType: "error",
+    });
+  }
+};
+
+export {
+  boardcast,
+  customBoardcast,
+  deleteBoardcast,
+  postBoardcast,
+  UpdateBoardCast,
+};