Optimized to avoid unnecessary API calls

src/components/Employee/ManageEmployee.jsx

@@ -28,6 +28,7 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
     employee,
     error,
     loading: empLoading,
+    refetch
   } = useEmployeeProfile(employeeId);
 
   useEffect(() => {
@@ -129,7 +130,12 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
       .min(1, { message: "Phone Number is required" })
       .regex(mobileNumberRegex, { message: "Invalid phone number " }),
     jobRoleId: z.string().min(1, { message: "Role is required" }),
-  });
+  } );
+  
+  useEffect( () =>
+  {
+    refetch()
+  },[])
 
   const {
     register,

src/components/Project/Infrastructure/WorkArea.jsx

@@ -14,6 +14,7 @@ import {
 } from "../../../utils/constants";
 import { useParams } from "react-router-dom";
 import ProgressBar from "../../common/ProgressBar";
+import {formatNumber} from "../../../utils/dateUtils";
 
 const WorkArea = ({ workArea, floor, forBuilding }) => {
   const selectedProject = useSelector((store) => store.localVariables.projectId);
@@ -103,15 +104,14 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                         {workArea.areaName}
                       </span>
                     </div>
-                    {ProjectTaskList?.length > 0 && (
+
                       <div className="col-2">
                         <ProgressBar
-                          completedWork={workAreaStatus.completed}
-                          plannedWork={workAreaStatus.planned}
+                          completedWork={formatNumber(workArea?.completedWork)}
+                          plannedWork={formatNumber(workArea?.plannedWork)}
                           className="m-0 text-info"
                         />
                       </div>
-                    )}
                   </div>
                 </button>
               </p>

src/components/Project/ProjectCard.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import moment from "moment";
-import { getDateDifferenceInDays } from "../../utils/dateUtils";
+import { formatNumber, getDateDifferenceInDays } from "../../utils/dateUtils";
 import { useNavigate } from "react-router-dom";
 import { useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
 import ManageProjectInfo from "./ManageProjectInfo";
@@ -223,7 +223,7 @@ const ProjectCard = ({ projectData, recall }) => {
             </div>
             <div className="d-flex justify-content-between align-items-center mb-2">
               <small className="text-body">
-                Task: {projectInfo.completedWork} / {projectInfo.plannedWork}
+                Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
               </small>
               <small className="text-body">
                 {Math.floor(

src/hooks/masterHook/useMaster.js

@@ -403,7 +403,7 @@ export const useCreateJobRole = (onSuccessCallback) => {
     onSuccess: (data) => {
       showToast("JobRole added successfully.", "success");
 
-      queryClient.invalidateQueries(["masterData", "Job Role"]);
+      queryClient.invalidateQueries({queryKey:["masterData", "Job Role"]});
 
       if (onSuccessCallback) onSuccessCallback(data);
     },
@@ -427,7 +427,7 @@ export const useCreateApplicationRole = (onSuccessCallback) =>
     },
     onSuccess: ( data ) =>
     {
-      queryClient.invalidateQueries( [ "masterData", "Application Role" ] )
+      queryClient.invalidateQueries( {queryKey:[ "masterData", "Application Role" ]} )
       showToast( "Application Role added successfully", "success" );
       if(onSuccessCallback) onSuccessCallback(data)
     },
@@ -476,7 +476,7 @@ export const useCreateActivity = (onSuccessCallback) =>
     },
     onSuccess: ( data ) =>
     {
-      queryClient.invalidateQueries( [ "masterData", "Activity" ] )
+      queryClient.invalidateQueries( {queryKey:[ "masterData", "Activity" ]} )
       showToast( "Activity added successfully", "success" );
       if(onSuccessCallback) onSuccessCallback(data)
     },
@@ -526,7 +526,7 @@ export const useCreateWorkCategory = (onSuccessCallback) =>
     },
     onSuccess: ( data ) =>
     {
-      queryClient.invalidateQueries( [ "masterData", "Work Category" ] )
+      queryClient.invalidateQueries({queryKey: [ "masterData", "Work Category" ]} )
       showToast( "Work Category added successfully", "success" );
       if(onSuccessCallback) onSuccessCallback(data)
     },
@@ -577,7 +577,7 @@ export const useCreateContactCategory = (onSuccessCallback) =>
     },
     onSuccess: ( data ) =>
     {
-      queryClient.invalidateQueries( [ "masterData", "Contact Category" ] )
+      queryClient.invalidateQueries( {queryKey:[ "masterData", "Contact Category" ]} )
       showToast( "Contact Category added successfully", "success" );
       if(onSuccessCallback) onSuccessCallback(data)
     },
@@ -628,7 +628,7 @@ export const useCreateContactTag = (onSuccessCallback) =>
     },
     onSuccess: ( data ) =>
     {
-      queryClient.invalidateQueries( [ "masterData", "Contact Tag" ] )
+      queryClient.invalidateQueries( {queryKey:[ "masterData", "Contact Tag" ]} )
       showToast( "Contact Tag added successfully", "success" );
       if(onSuccessCallback) onSuccessCallback(data)
     },

src/hooks/useEmployees.js

@@ -152,11 +152,11 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
 export const useEmployeeProfile = ( employeeId ) =>
 {
   const isEnabled = !!employeeId;
-
   const {
     data = null,
     isLoading: loading,
     error,
+    refetch
   } = useQuery({
     queryKey: ['employeeProfile', employeeId],
     queryFn: async () => {
@@ -171,6 +171,7 @@ export const useEmployeeProfile = ( employeeId ) =>
     employee: data,
     loading,
     error,
+    refetch
   };
 };
 
@@ -190,11 +191,11 @@ export const useUpdateEmployee = () =>
       const id = variables.id || variables.employeeId;
       const isAllEmployee = variables.IsAllEmployee;
       // Cache invalidation
-        queryClient.invalidateQueries( [ 'allEmployee', isAllEmployee ] ); 
+        queryClient.invalidateQueries( {queryKey:[ 'allEmployee', isAllEmployee ] }); 
       // queryClient.invalidateQueries(['employeeProfile', id]);
-      // queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
+      queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
       
-      // queryClient.invalidateQueries( [ 'employeeListByProject' ,selectedProject] );
+      // queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject']} );
       showToast( `Employee ${ id ? 'updated' : 'created' } successfully`, 'success' );
     },
     onError: (error) => {
@@ -220,7 +221,7 @@ export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing })
 
       // queryClient.invalidateQueries( ['allEmployee',false]);
       queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
-      queryClient.invalidateQueries( [ 'employeeListByProject' ,selectedProject] );
+      queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject' ,selectedProject]} );
 
       setIsDeleteModalOpen(false);
     },

src/hooks/useMasterRole.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { cacheData,getCachedData } from "../slices/apiDataManager";
 import { MasterRespository } from "../repositories/MastersRepository";
-
+import { useQuery } from "@tanstack/react-query";
 
 export const useMasterRole =()=>{
 
@@ -43,40 +43,55 @@ export const useMasterRole =()=>{
   return {masterRole,loading}
 }
 
-export const useFeatures =()=> {
-  const [masterFeatures, setMasterFeatures] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState("");
+// export const useFeatures =()=> {
+//   const [masterFeatures, setMasterFeatures] = useState([]);
+//   const [loading, setLoading] = useState(true);
+//   const [error, setError] = useState("");
 
-   const fetchData = async () => {
+//    const fetchData = async () => {
     
-       try {
-        const features_cache = getCachedData("masterFeatures");
-        if (!features_cache) {
-         MasterRespository.getFeatures()
-           .then((response) => {
-            setMasterFeatures(response.data);
+//        try {
+//         const features_cache = getCachedData("masterFeatures");
+//         if (!features_cache) {
+//          MasterRespository.getFeatures()
+//            .then((response) => {
+//             setMasterFeatures(response.data);
      
-             cacheData("features", response.data);
-             setLoading(false)
-           })
-           .catch((error) => {
-             setError("Failed to fetch data.");
-           });
-        }else{
-            if (!masterFeatures.length) setMasterFeatures(features_cache);
-        }
-       } catch (err) {
-         setError("Failed to fetch data.");
-       } finally {
-         setLoading(false);
-       }
-    };
+//              cacheData("features", response.data);
+//              setLoading(false)
+//            })
+//            .catch((error) => {
+//              setError("Failed to fetch data.");
+//            });
+//         }else{
+//             if (!masterFeatures.length) setMasterFeatures(features_cache);
+//         }
+//        } catch (err) {
+//          setError("Failed to fetch data.");
+//        } finally {
+//          setLoading(false);
+//        }
+//     };
 
 
-  useEffect(()=>{
-    fetchData();
-  },[])
+//   useEffect(()=>{
+//     fetchData();
+//   },[])
 
-  return{masterFeatures,loading}
-}
+//   return{masterFeatures,loading}
+// }
+
+// -----------------Query- -------------------------
+export const useFeatures = () => {
+ const  {data=[],isLoading,error} = useQuery({
+    queryKey: ["masterFeatures"],
+    queryFn: async () => {
+      const response = await MasterRespository.getFeatures();
+      return response.data;
+    },
+
+ } );
+  return {
+    masterFeatures:data,loading:isLoading,error
+  }
+};

src/hooks/useProjects.js

@@ -360,7 +360,8 @@ export const useCreateProject = ({ onSuccessCallback }) => {
     },
     onSuccess: (data) => {
       //  Invalidate the cache
-      queryClient.invalidateQueries(['ProjectsList']);
+      queryClient.invalidateQueries( {queryKey: [ 'ProjectsList' ]} );
+      queryClient.invalidateQueries({queryKey:['basicProjectNameList']});
 
       //  Emit event for consumers (like useProjects or others)
       eventBus.emit("project", {
@@ -397,8 +398,9 @@ export const useUpdateProject = ({ onSuccessCallback }) => {
     {
       const { projectId } = variables;
 
-      queryClient.invalidateQueries(["ProjectsList"]);
-      queryClient.invalidateQueries(["projectinfo", projectId]);
+      queryClient.invalidateQueries({queryKey:["ProjectsList"]});
+      queryClient.invalidateQueries( {queryKey: [ "projectinfo", projectId ]} );
+      queryClient.invalidateQueries({queryKey:['basicProjectNameList']});
 
       eventBus.emit("project", {
         keyword: "Update_Project",
@@ -437,7 +439,7 @@ export const useManageProjectInfra = ( {onSuccessCallback} ) =>
     onSuccess: ( data, variables ) =>
     {
       const { projectId } = variables;      
-      queryClient.invalidateQueries(["ProjectInfra", projectId]);
+      queryClient.invalidateQueries({queryKey:["ProjectInfra", projectId]});
        if (onSuccessCallback) onSuccessCallback(data,variables);
     },
     onError: (error) => {
@@ -465,7 +467,7 @@ export const useManageProjectAllocation = ({
       return response.data;
     },
     onSuccess: (data, variables, context) => {
-      queryClient.invalidateQueries(['empListByProjectAllocated']);
+      queryClient.invalidateQueries({queryKey:['empListByProjectAllocated']});
 
       if (variables?.added) {
         showToast('Employee Assigned Successfully', 'success');
@@ -499,7 +501,7 @@ export const useManageTask = ({onSuccessCallback}) =>
     mutationFn: async ( payload ) => await ProjectRepository.manageProjectTasks( payload ),
     onSuccess: ( data, variables ) =>
     {
-      queryClient.invalidateQueries(["WorkItems"])
+      queryClient.invalidateQueries({ queryKey: ["WorkItems"] })
       if (onSuccessCallback) onSuccessCallback(data);
     },
     onError: (error) =>
@@ -523,7 +525,7 @@ export const useDeleteProjectTask = (onSuccessCallback) => {
     onSuccess: ( _, variables ) =>
     {
       showToast("Task deleted successfully", "success");
-      queryClient.invalidateQueries([ "WorkItems",variables.workAreaId]);
+      queryClient.invalidateQueries({queryKey:[ "WorkItems",variables.workAreaId]});
       if (onSuccessCallback) onSuccessCallback();
     },
     onError: (error) => {

src/hooks/useTasks.js

@@ -178,7 +178,7 @@ export const useCreateTask = ( {onSuccessCallback, onErrorCallback} = {} ) =>
     },
     onSuccess: ( _, variables ) =>
     {
-      queryClient.invalidateQueries(["taskList"]);
+      queryClient.invalidateQueries({queryKey:["taskList"]});
       showToast( "Task Assigned Successfully.", "success" );
       if (onSuccessCallback) onSuccessCallback(variables);
     },

src/pages/employee/EmployeeList.jsx

@@ -39,7 +39,7 @@ const EmployeeList = () => {
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
     useEmployeesAllOrByProjectId(
-      showAllEmployees ? null : selectedProjectId, // Use selectedProjectId here
+      showAllEmployees ? null : selectedProjectId,
       showInactive
     );
 
@@ -68,25 +68,18 @@ const EmployeeList = () => {
 
   const navigate = useNavigate();
 
-  /**
-   * Applies the search filter to a given array of employee data.
-   * @param {Array} data - The array of employee objects to filter.
-   * @param {string} text - The search text.
-   * @returns {Array} The filtered array.
-   */
+  
   const applySearchFilter = (data, text) => {
     if (!text) {
       return data;
     }
-    const lowercasedText = text.toLowerCase().trim(); // Ensure search text is trimmed and lowercase
+    const lowercasedText = text.toLowerCase().trim(); 
 
     return data.filter((item) => {
-      // **IMPROVED FULL NAME CONSTRUCTION**
       const firstName = item.firstName || "";
       const middleName = item.middleName || "";
       const lastName = item.lastName || "";
 
-      // Join parts, then trim any excess spaces if a middle name is missing
       const fullName = `${firstName} ${middleName} ${lastName}`.toLowerCase().trim().replace(/\s+/g, ' ');
 
       const email = item.email ? item.email.toLowerCase() : "";