From d398a6cb397ca9519d58a30eafb3109fe5d40710 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Tue, 13 May 2025 11:32:09 +0530
Subject: [PATCH] added dropdwon for action view

---
 .../Project/Infrastructure/WorkItem.jsx       | 141 +++++++++++-------
 1 file changed, 84 insertions(+), 57 deletions(-)

diff --git a/src/components/Project/Infrastructure/WorkItem.jsx b/src/components/Project/Infrastructure/WorkItem.jsx
index 2799f398..e579dc76 100644
--- a/src/components/Project/Infrastructure/WorkItem.jsx
+++ b/src/components/Project/Infrastructure/WorkItem.jsx
@@ -139,6 +139,7 @@ const WorkItem = ( {
       )}
 
       <tr key={key}>
+        {/* Activity Name - always visible */}
         <td className="text-start table-cell-small">
           <i className="bx bx-right-arrow-alt"></i>
           <span className="fw-light">
@@ -148,8 +149,9 @@ const WorkItem = ( {
               : "NA"}
           </span>
         </td>
-        {/* for mobile view */}
-        <td className="text-center d-sm-none d-sm-table-cell">
+
+        {/* Status - visible only on small screens */}
+        <td className="text-center d-sm-table-cell d-md-none">
           {hasWorkItem
             ? NewWorkItem?.workItem?.completedWork ??
               workItem?.completedWork ??
@@ -161,15 +163,18 @@ const WorkItem = ( {
             : "NA"}
         </td>
 
-        <td className="text-start table-cell-small">
+        {/* Category - visible on medium and above */}
+        <td className="text-center table-cell-small d-none d-md-table-cell">
           <span className="fw-light">
             {hasWorkItem
               ? NewWorkItem?.workItem?.workCategoryMaster?.name ||
-                workItem.workCategoryMaster?.name || "NA"
+                workItem.workCategoryMaster?.name ||
+                "NA"
               : "NA"}
           </span>
         </td>
-        {/* for greather than mobile view ************* */}
+
+        {/* Planned - visible on medium and above */}
         <td className="text-center d-none d-md-table-cell">
           {hasWorkItem
             ? NewWorkItem?.workItem?.plannedWork ??
@@ -177,6 +182,8 @@ const WorkItem = ( {
               "NA"
             : "NA"}
         </td>
+
+        {/* Completed - visible on medium and above */}
         <td className="text-center d-none d-md-table-cell">
           {hasWorkItem
             ? NewWorkItem?.workItem?.completedWork ??
@@ -184,6 +191,8 @@ const WorkItem = ( {
               "NA"
             : "NA"}
         </td>
+
+        {/* Progress Bar - always visible */}
         <td className="text-center" style={{ width: "15%" }}>
           <div className="progress p-0">
             <div
@@ -197,7 +206,9 @@ const WorkItem = ( {
                 ),
                 height: "5px",
               }}
-              aria-valuenow={NewWorkItem?.workItem?.completedWor}
+              aria-valuenow={
+                NewWorkItem?.workItem?.completedWork ?? workItem?.completedWork
+              }
               aria-valuemin="0"
               aria-valuemax={
                 hasWorkItem
@@ -207,65 +218,81 @@ const WorkItem = ( {
             ></div>
           </div>
         </td>
-        <td className="text-end align-middle">
-          <div className="dropdown w-auto d-inline-flex align-items-center gap-1">
-            {/* Reserve space for Assign button */}
-            <div style={{ width: "auto", minWidth: "60px" }}>
-              {!projectId && ManageTasks && PlannedWork !== CompletedWork ? (
-                <button
-                  aria-label="Modify"
-                  type="button"
-                  className="btn p-0"
-                  data-bs-toggle="modal"
-                  data-bs-target="#project-modal"
-                  onClick={openModal}
-                >
-                  <span className="badge badge-md bg-label-primary me-1">
-                    Assign
-                  </span>
-                </button>
-              ) : (
-                // Hidden placeholder to preserve layout
-                <span className="invisible">
-                  <span className="badge badge-md bg-label-primary me-1">
-                    Assign
-                  </span>
-                </span>
-              )}
-            </div>
 
-            {/* Edit and Delete buttons */}
+        {/* Actions - always visible */}
+        <td className="text-end align-items-middle ">
+          {/* Desktop (md and up): inline icons */}
+          <div className="d-none d-md-flex justify-content-end gap-1 px-2">
+            {!projectId && ManageTasks && PlannedWork !== CompletedWork && (
+              <i
+                className="bx bx-user-plus text-primary cursor-pointer"
+                title="Assign"
+                onClick={openModal}
+                role="button"
+              ></i>
+            )}
+
             {ManageInfra && (
               <>
-                <button
-                  aria-label="Modify"
-                  type="button"
-                  className="btn p-0"
+                <i
+                  className="bx bxs-edit text-secondary cursor-pointer"
+                  title="Edit"
                   onClick={showModal1}
-                >
-                  <i
-                    className="bx bxs-edit me-2 text-primary"
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="top"
-                    title="Edit Activity"
-                  ></i>
-                </button>
-                <button
-                  aria-label="Delete"
-                  type="button"
-                  className="btn p-0"
+                  role="button"
+                ></i>
+                <i
+                  className="bx bx-trash text-danger cursor-pointer"
+                  title="Delete"
                   onClick={showModalDelete}
-                >
-                  <i
-                    className="bx bx-trash me-1 text-danger"
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="top"
-                    title="Delete Activity"
-                  ></i>
-                </button>
+                  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 && ManageTasks && 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>
     </>