Merge pull request 'Refactor employee action dropdown for better accessibility and code clarity' (#3) from vaibhav_bug_Issue-#49 into Feature_Task_Management

Reviewed-on: #3

src/pages/employee/EmployeeList.jsx

@@ -372,49 +372,33 @@ const EmployeeList = () =>
                             Active
                           </span>
                         </td>
-                        <td className={`d-flex justify-content-end justify-content-sm-center ${!ManageEmployee && 'd-none'} `}>
-                          <div className="d-flex align-items-center ">
-                            <a
-                              className={`btn btn-icon dropdown-toggle hide-arrow`}
-                              data-bs-toggle="dropdown"
-                            >
-                              <i className="bx bx-dots-vertical-rounded bx-md"></i>
-                            </a>
-
-                            <div className="dropdown-menu dropdown-menu-end m-0">
-                              {" "}
-                              <a
-                               
-                                onClick={()=> navigate(`/employee/${item.id}`)}
-                                className="dropdown-item"
-                              >
-                                View
-                              </a>
-
-                              <Link
-                                className={`dropdown-item `}
-                                to={`/employee/manage/${item.id}`}
-                              >
-                                Edit
-                              </Link>
-                             
-                              <a  className="dropdown-item">
-                                Suspend
-                              </a>
-                              <a
-                                className="dropdown-item"
-                                type="button"
-                                data-bs-toggle="modal"
-                                data-bs-target="#managerole-modal"
-                                onClick={() => {
-                                  handleConfigData(item.id);
-                                }}
-                              >
-                                Manage Role
-                              </a>
+                        {ManageEmployee && (
+                          <td className="text-end">
+                            <div className="dropdown">
+                              <button className="btn btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
+                                <i className="bx bx-dots-vertical-rounded bx-md"></i>
+                              </button>
+                              <div className="dropdown-menu dropdown-menu-end">
+                                <button onClick={() => navigate(`/employee/${item.id}`)} className="dropdown-item">
+                                  View
+                                </button>
+                                <Link to={`/employee/manage/${item.id}`} className="dropdown-item">
+                                  Edit
+                                </Link>
+                                <button className="dropdown-item">Suspend</button>
+                                <button
+                                  className="dropdown-item"
+                                  type="button"
+                                  data-bs-toggle="modal"
+                                  data-bs-target="#managerole-modal"
+                                  onClick={() => handleConfigData(item.id)}
+                                >
+                                  Manage Role
+                                </button>
+                              </div>
                             </div>
-                          </div>
-                        </td>
+                          </td>
+                        )}
                       </tr>
                     ) )}