src/components/Project/MapUsers.jsx

@@ -14,7 +14,11 @@ 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("");
 
@@ -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">
+          </button>
+          </div>
+          <p className="m-0 fw-semibold fs-5">Assign Employee</p>
+
+          <div className="px-4 mt-4 col-md-4 text-start">
             {(filteredData.length > 0 ||
               allocationEmployeesData.length > 0) && (
-                  <div className="input-group">
+              <div className="input-group input-group-sm mb-2">
                 <input
                   type="search"
-                      className="form-control form-control-sm"
+                  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>
+
-          <div className="d-flex justify-content-start align-items-center px-4 mt-6">
-          <h5 className="mb-0 mt-1">
-            <i className=" text-warning me-3"></i> Select Employee
-          </h5>
-        </div>
           <div className="modal-body p-sm-4 p-0">
             <table
               className="datatables-users table border-top dataTable no-footer dtr-column "
@@ -141,20 +145,27 @@ const MapUsers = ({
               aria-describedby="DataTables_Table_0_info"
               style={{ width: "100%" }}
             >
-              
               <tbody>
                 {employeeLoading && allocationEmployeesData.length === 0 && (
-                  <p>Loading...</p>
+                  <tr>
+                    <td>Loading..</td>
+                  </tr>
                 )}
 
                 {!employeeLoading &&
                   allocationEmployeesData.length === 0 &&
                   filteredData.length === 0 && (
-                    <p>All employee assigned to Project.</p>
+                    <tr>
+                      <td>All employee assigned to Project.</td>
+                    </tr>
                   )}
 
-                {!employeeLoading && allocationEmployeesData.length > 0 && filteredData.length === 0 && (
+                {!employeeLoading &&
-                  <p>No matching employees found.</p>
+                  allocationEmployeesData.length > 0 &&
+                  filteredData.length === 0 && (
+                    <tr>
+                      <td>No matching employees found.</td>
+                    </tr>
                   )}
 
                 {(filteredData.length > 0 ||
@@ -175,10 +186,7 @@ const MapUsers = ({
           <div className="modal-footer">
             {(filteredData.length > 0 ||
               allocationEmployeesData.length > 0) && (
-                <button
+              <button className="btn btn-sm btn-success" onClick={handleSubmit}>
-                  className="btn btn-sm btn-success"
-                  onClick={handleSubmit}
-                >
                 {assignedLoading ? "Please Wait..." : "Assign to Project"}
               </button>
             )}

src/components/Project/Teams.jsx

@@ -16,7 +16,7 @@ import ConfirmModal from "../common/ConfirmModal";
 
 const Teams = ({ project }) => {
   const dispatch = useDispatch();
-  dispatch(changeMaster("Job Role"));
+
   const { data, loading } = useMaster();
   const [isModalOpen, setIsModelOpen] = useState(false);
   const [error, setError] = useState("");
@@ -43,11 +43,9 @@ const Teams = ({ project }) => {
         .then((response) => {
           setEmployees(response.data);
           setFilteredEmployees( response.data.filter( ( emp ) => emp.isActive ) );
-          console.log(response)
           setEmployeeLoading(false);
         })
         .catch((error) => {
-          console.error(error);
           setError("Failed to fetch data.");
           setEmployeeLoading(false);
         });
@@ -133,6 +131,11 @@ const Teams = ({ project }) => {
     document.body.style.overflow = "auto";
   };
 
+  useEffect(() => {
+  dispatch(changeMaster("Job Role"));
+}, [dispatch]);
+
+
   useEffect(() => {
     fetchEmployees();
   }, []);

src/hooks/useProfile.js

@@ -3,46 +3,40 @@ import AuthRepository from "../repositories/AuthRepository";
 import {cacheProfileData, getCachedProfileData} from "../slices/apiDataManager";
 import {useSelector} from "react-redux";
 
-export const useProfile = () =>
+let hasFetched = false;
-{
-  const loggedUser = useSelector((store)=>store.globalVariables.loginUser)
 
+export const useProfile = () => {
+  const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser );
   const [profile, setProfile] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
-   
+  const fetchData = async () => {
-  const fetchData = async () =>
+    try {
-  {
+      setLoading(true);
-    try
-    {
-      setLoading( true )
       let response = await AuthRepository.profile();
-      setProfile( response.data )
+      setProfile(response.data);
-      cacheProfileData( response.data )
+      cacheProfileData(response.data);
-      setLoading( false );
+    } catch (error) {
-        
-    } catch ( error )
-    {
-      setLoading( false )
-      console.error( error );
       setError("Failed to fetch data.");
-    };
+    } finally {
+      setLoading(false);
     }
-  
+  };
 
   useEffect(() => {
-   
+    if (!hasFetched) {
-    if (!loggedUser )
+      hasFetched = true;
-    {
+      if (!loggedUser) {
-    fetchData() 
+        fetchData();
-    } else
+      } else {
-    {
+        setProfile(loggedUser);
-      setProfile(loggedUser)
+      }
     }
   
-     },[])
+      setProfile(loggedUser);
   
-    return  { profile,loading,error}
+  }, [loggedUser]);
 
-  }
+  return { profile, loading, error };
+};

src/hooks/useProjects.js

@@ -2,17 +2,18 @@ import { useEffect, useState } from "react";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 import ProjectRepository from "../repositories/ProjectRepository";
 import { useProfile } from "./useProfile";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../slices/localVariablesSlice";
 
 export const useProjects = () => {
-  const { profile } = useProfile();
+
+  const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser )
   const [projects, setProjects] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
   const fetchData = async () => {
-    const projectIds = profile?.projects || [];
+    const projectIds = loggedUser?.projects || [];
 
     const filterProjects = (projectsList) => {
       return projectsList
@@ -43,12 +44,11 @@ export const useProjects = () => {
       }
     }
   };
-
   useEffect(() => {
-    if (profile) {
+    if (loggedUser) {
       fetchData();
     }
-  }, [profile]);
+  }, [loggedUser]);
 
   return { projects, loading, error, refetch: fetchData };
 };