conditionally render Actions column based on permissions and project status

src/components/Project/Infrastructure/WorkArea.jsx

@@ -6,11 +6,20 @@ import { useDispatch } from "react-redux";
 import { refreshData } from "../../../slices/localVariablesSlice";
 import ProjectRepository from "../../../repositories/ProjectRepository";
 import showToast from "../../../services/toastService";
+import {useHasUserPermission} from "../../../hooks/useHasUserPermission";
+import {ASSIGN_REPORT_TASK, MANAGE_PROJECT_INFRA, MANAGE_TASK} from "../../../utils/constants";
+import {useParams} from "react-router-dom";
 
 const WorkArea = ({ workArea, floor, forBuilding }) => {
   const [workItems, setWorkItems] = useState([]);
   const dispatch = useDispatch();
-  const [Project, setProject] = useState();
+  const [ Project, setProject ] = useState();
+  const {projectId} = useParams();
+ 
+    const ManageTasks = useHasUserPermission(MANAGE_TASK);
+    const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
+  const ManageAndAssignTak = useHasUserPermission( ASSIGN_REPORT_TASK );
+  
 
   useEffect(() => {
     const project = getCachedData("projectInfo");
@@ -170,7 +179,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                   className="accordion-collapse collapse"
                   aria-labelledby={`heading-${workArea.id}`}
                 >
-                  <div className="accordion-body p-0">
+                  <div className="accordion-body px-1">
                     <table className="table table-sm mx-1">
                       <thead>
                         <tr>
@@ -189,9 +198,11 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                           <th className="infra-activity-table-header">
                             Progress
                           </th>
-                          <th className="infra-activity-table-header text-end">
+                          {( ManageInfra || ( !projectId && ManageAndAssignTak  ) ) && (
-                            <span className="px-2">Actions</span>
+                            <th className="infra-activity-table-header text-end">
-                          </th>
+                              <span className="px-2">Actions</span>
+                            </th>
+                          )}
                         </tr>
                       </thead>
                       <tbody className="table-border-bottom-0">

src/components/Project/Infrastructure/WorkItem.jsx

@@ -148,7 +148,7 @@ const WorkItem = ({
           <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.activityMaster?.activityName ||
-              workItem.activityMaster?.activityName
+                workItem.activityMaster?.activityName
               : "NA"}
           </span>
         </td>
@@ -157,8 +157,8 @@ const WorkItem = ({
         <td className="text-center d-sm-table-cell d-md-none">
           {hasWorkItem
             ? NewWorkItem?.workItem?.completedWork ??
-            workItem?.completedWork ??
+              workItem?.completedWork ??
-            "NA"
+              "NA"
             : "NA"}
           /{" "}
           {hasWorkItem
@@ -171,26 +171,28 @@ const WorkItem = ({
           <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.workCategoryMaster?.name ||
-              workItem.workCategoryMaster?.name ||
+                workItem.workCategoryMaster?.name ||
-              "NA"
+                "NA"
               : "NA"}
           </span>
         </td>
 
         <td className="text-center d-none d-md-table-cell">
-          {hasWorkItem ? (
+          {hasWorkItem
-            `${NewWorkItem?.workItem?.completedWork ??
+            ? `${
-            workItem?.completedWork ??
+                NewWorkItem?.workItem?.completedWork ??
-            "0"}/${NewWorkItem?.workItem?.plannedWork ??
+                workItem?.completedWork ??
-            workItem?.plannedWork ??
+                "0"
-            "0"}`
+              }/${
-          ) : (
+                NewWorkItem?.workItem?.plannedWork ??
-            "NA"
+                workItem?.plannedWork ??
-          )}
+                "0"
+              }`
+            : "NA"}
         </td>
 
         {/* Progress Bar - always visible */}
-        <td className="text-center" style={{ width: "15%" }}>
+        <td className="text-center " style={{ width: "15%" }}>
           <div className="progress p-0">
             <div
               className="progress-bar"
@@ -199,7 +201,7 @@ const WorkItem = ({
                 width: getProgress(
                   NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork,
                   NewWorkItem?.workItem?.completedWork ||
-                  workItem?.completedWork
+                    workItem?.completedWork
                 ),
                 height: "5px",
               }}
@@ -217,82 +219,90 @@ const WorkItem = ({
         </td>
 
         {/* Actions - always visible */}
-        <td className="text-end align-items-middle ">
+        {(ManageInfra ||
-          {/* Desktop (md and up): inline icons */}
+          (!projectId &&
-          <div className="d-none d-md-flex justify-content-end gap-1 px-2">
+            ManageAndAssignTak &&
-            {!projectId &&
+            PlannedWork !== CompletedWork)) && (
-              ManageAndAssignTak &&
+          <td className="text-end align-items-middle border-top">
-              PlannedWork !== CompletedWork && (
+            {/* Desktop (md and up): inline icons */}
-                <i
+            <div className="d-none d-md-flex justify-content-end gap-1 px-2">
-                  className="bx bx-user-plus text-primary cursor-pointer"
+              {!projectId &&
-                  title="Assign"
+                ManageAndAssignTak &&
-                  onClick={openModal}
+                PlannedWork !== CompletedWork && (
-                  role="button"
+                  <i
-                ></i>
+                    className="bx bx-user-plus text-primary cursor-pointer"
-              )}
+                    title="Assign"
-
-            {ManageInfra && (
-              <>
-                <i
-                  className="bx bxs-edit text-secondary cursor-pointer"
-                  title="Edit"
-                  onClick={showModal1}
-                  role="button"
-                ></i>
-                <i
-                  className="bx bx-trash text-danger cursor-pointer"
-                  title="Delete"
-                  onClick={showModalDelete}
-                  role="button"
-                ></i>
-              </>
-            )}
-          </div>
-
-          {/* Mobile (sm only): dropdown with icons */}
-          <div className="dropdown d-md-none text-center">
-            <i
-              className="bx bx-dots-vertical-rounded"
-              role="button"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-              title="Actions"
-            ></i>
-
-            <ul className="dropdown-menu dropdown-menu-start">
-              {!projectId && ManageAndAssignTak && PlannedWork !== CompletedWork && (
-                <li>
-                  <a
-                    className="dropdown-item d-flex align-items-center"
                     onClick={openModal}
-                  >
+                    role="button"
-                    <i className="bx bx-user-plus text-primary me-2"></i> Assign
+                  ></i>
-                  </a>
+                )}
-                </li>
+
-              )}
               {ManageInfra && (
                 <>
-                  <li>
+                  <i
-                    <a
+                    className="bx bxs-edit text-secondary cursor-pointer"
-                      className="dropdown-item d-flex align-items-center"
+                    title="Edit"
-                      onClick={showModal1}
+                    onClick={showModal1}
-                    >
+                    role="button"
-                      <i className="bx bxs-edit text-secondary me-2"></i> Edit
+                  ></i>
-                    </a>
+                  <i
-                  </li>
+                    className="bx bx-trash text-danger cursor-pointer"
-                  <li>
+                    title="Delete"
-                    <a
+                    onClick={showModalDelete}
-                      className="dropdown-item d-flex align-items-center"
+                    role="button"
-                      onClick={showModalDelete}
+                  ></i>
-                    >
-                      <i className="bx bx-trash text-danger me-2"></i> Delete
-                    </a>
-                  </li>
                 </>
               )}
-            </ul>
+            </div>
-          </div>
+
-        </td>
+            {/* Mobile (sm only): dropdown with icons */}
+            <div className="dropdown d-md-none text-center">
+              <i
+                className="bx bx-dots-vertical-rounded"
+                role="button"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+                title="Actions"
+              ></i>
+
+              <ul className="dropdown-menu dropdown-menu-start">
+                {!projectId &&
+                  ManageAndAssignTak &&
+                  PlannedWork !== CompletedWork && (
+                    <li>
+                      <a
+                        className="dropdown-item d-flex align-items-center"
+                        onClick={openModal}
+                      >
+                        <i className="bx bx-user-plus text-primary me-2"></i>{" "}
+                        Assign
+                      </a>
+                    </li>
+                  )}
+                {ManageInfra && (
+                  <>
+                    <li>
+                      <a
+                        className="dropdown-item d-flex align-items-center"
+                        onClick={showModal1}
+                      >
+                        <i className="bx bxs-edit text-secondary me-2"></i> Edit
+                      </a>
+                    </li>
+                    <li>
+                      <a
+                        className="dropdown-item d-flex align-items-center"
+                        onClick={showModalDelete}
+                      >
+                        <i className="bx bx-trash text-danger me-2"></i> Delete
+                      </a>
+                    </li>
+                  </>
+                )}
+              </ul>
+            </div>
+          </td>
+        )}
       </tr>
     </>
   );