Added 'Manage Task' permission to ensure only authorized users can access or perform task-related actions

src/components/Project/Infrastructure/WorkItem.jsx

@@ -2,14 +2,15 @@ import React, { useState, useEffect } from "react";
 import { useModal } from "../../../ModalContext";
 import AssignRoleModel from "../AssignRole";
 import { useParams } from "react-router-dom";
-
+import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
+import { MANAGE_TASK } from "../../../utils/constants";
 const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   const { projectId } = useParams();
   const [itemName, setItemName] = useState("");
   const [NewWorkItem, setNewWorkItem] = useState();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [showModal, setShowModal] = useState(false);
-
+  const ManageTasks = useHasUserPermission(MANAGE_TASK);
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
   const getProgress = (planned, completed) => {
@@ -131,7 +132,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         </td>
         <td className="d-none d-md-table-cell">
           <div className="dropdown">
-            {!projectId && (
+            {!projectId && ManageTasks && (
               <button
                 aria-label="Modify"
                 type="button"