src/components/Project/MapUsers.jsx

@@ -14,9 +14,13 @@ const MapUsers = ({
   assignedLoading,
   setAssignedLoading,
 }) => {
-  const { employeesList, loading: employeeLoading, error } = useAllEmployees(false);
+  const {
+    employeesList,
+    loading: employeeLoading,
+    error,
+  } = useAllEmployees(false);
   const [selectedEmployees, setSelectedEmployees] = useState([]);
-  const [ searchText, setSearchText ] = useState( "" );
+  const [searchText, setSearchText] = useState("");
 
   const handleAllocationData = Array.isArray(allocation) ? allocation : [];
 
@@ -96,9 +100,8 @@ const MapUsers = ({
     });
   };
 
-  const handleSubmit = () =>
+  const handleSubmit = () => {
-  {
+    setAssignedLoading(true);
-    setAssignedLoading(true)
     const selected = selectedEmployees
       .filter((emp) => emp.isSelected)
       .map((emp) => ({ empID: emp.id, jobRoleId: emp.jobRoleId }));
@@ -108,32 +111,33 @@ const MapUsers = ({
     } else {
       showToast("Please select Employee", "error");
     }
-
   };
   return (
     <>
       <div className="modal-dialog modal-dialog-scrollable mx-sm-auto mx-1 modal-lg modal-simple modal-edit-user">
         <div className="modal-content">
-          <div className="modal-header ">
+          <div className="modal-header text-center">
-            <div className="md-2 mb-n5">
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
-              {(filteredData.length > 0 ||
+          </button>
-                  allocationEmployeesData.length > 0)&& (
-                  <div className="input-group">
-                    <input
-                      type="search"
-                      className="form-control form-control-sm"
-                      placeholder="Search employees..."
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                    />
-                  </div>
-                )}
-            </div>
           </div>
-          <div className="d-flex justify-content-start align-items-center px-4 mt-6">
+          <p className="m-0 fw-semibold fs-5">Assign Employee</p>
-          <h5 className="mb-0 mt-1">
+
-            <i className=" text-warning me-3"></i> Select Employee
+          <div className="px-4 mt-4 col-md-4 text-start">
-          </h5>
+            {(filteredData.length > 0 ||
-        </div>
+              allocationEmployeesData.length > 0) && (
+              <div className="input-group input-group-sm mb-2">
+                <input
+                  type="search"
+                  className="form-control"
+                  placeholder="Search employees..."
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+            )}
+
+            <p className="mb-0 small text-muted fw-semibold">Select Employee</p>
+          </div>
+
           <div className="modal-body p-sm-4 p-0">
             <table
               className="datatables-users table border-top dataTable no-footer dtr-column "
@@ -141,10 +145,9 @@ const MapUsers = ({
               aria-describedby="DataTables_Table_0_info"
               style={{ width: "100%" }}
             >
-              
               <tbody>
                 {employeeLoading && allocationEmployeesData.length === 0 && (
-                     <tr>
+                  <tr>
                     <td>Loading..</td>
                   </tr>
                 )}
@@ -152,17 +155,18 @@ const MapUsers = ({
                 {!employeeLoading &&
                   allocationEmployeesData.length === 0 &&
                   filteredData.length === 0 && (
-                  
+                    <tr>
-                      <tr>
+                      <td>All employee assigned to Project.</td>
-                    <td>All employee assigned to Project.</td>
+                    </tr>
-                  </tr>
                   )}
 
-                {!employeeLoading && allocationEmployeesData.length > 0 && filteredData.length === 0 && (
+                {!employeeLoading &&
+                  allocationEmployeesData.length > 0 &&
+                  filteredData.length === 0 && (
                     <tr>
-                    <td>No matching employees found.</td>
+                      <td>No matching employees found.</td>
-                  </tr>
+                    </tr>
-                )}
+                  )}
 
                 {(filteredData.length > 0 ||
                   allocationEmployeesData.length > 0) &&
@@ -181,14 +185,11 @@ const MapUsers = ({
           </div>
           <div className="modal-footer">
             {(filteredData.length > 0 ||
-                  allocationEmployeesData.length > 0) && (
+              allocationEmployeesData.length > 0) && (
-                <button
+              <button className="btn btn-sm btn-success" onClick={handleSubmit}>
-                  className="btn btn-sm btn-success"
+                {assignedLoading ? "Please Wait..." : "Assign to Project"}
-                  onClick={handleSubmit}
+              </button>
-                >
+            )}
-                  {assignedLoading ? "Please Wait...":"Assign to Project"}
-                </button>
-              )}
 
             <button
               type="button"