src/components/Employee/EmpDashboard.jsx

@@ -34,13 +34,9 @@ const EmpDashboard = ({ profile }) => {
                       <div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
                         <div className="d-flex">
                           <div className="avatar flex-shrink-0 me-3">
-                            <span
-                              className={`avatar-initial rounded ${project.removedDate ? "bg-label-warning" : "bg-label-success"
-                                }`}
-                            >
+                            <span className="avatar-initial rounded bg-label-primary">
                               <i className="icon-base bx bx-buildings icon-lg"></i>
                             </span>
-
                           </div>
                           <div>
                             <h6 className="mb-0">{project.projectShortName}</h6>
@@ -53,14 +49,6 @@ const EmpDashboard = ({ profile }) => {
                                 <em>NA</em>
                               )}
                             </div>
-                            {project.removedDate && (
-                              <div className="mt-0 d-flex flex-column flex-sm-row justify-content-between">
-                                <div className="label-secondary">
-                                  Unassigned:{" "}
-                                  {new Date(project.removedDate).toLocaleDateString()}
-                                </div>
-                              </div>
-                            )}
                           </div>
                         </div>
                         <div>
@@ -71,7 +59,14 @@ const EmpDashboard = ({ profile }) => {
                       </div>
 
                       {/* Dates */}
-
+                      {project.removedDate && (
+                        <div className="mt-2 d-flex flex-column flex-sm-row justify-content-between">
+                          <div className="label-secondary">
+                            Unassigned:{" "}
+                            {new Date(project.removedDate).toLocaleDateString()}
+                          </div>
+                        </div>
+                      )}
                     </div>
                   </li>
                 ))}

src/hooks/useEmployees.js

@@ -11,17 +11,6 @@ import { queryClient } from "../layouts/AuthLayout";
 
 // Query ---------------------------------------------------------------------------
 
-export const useEmployee = (employeeId) => {
-  return  useQuery({
-    queryKey: ["employeeProfile", employeeId],
-    queryFn: async () => {
-      const res = await EmployeeRepository.getEmployeeProfile(employeeId)
-      return res.data;
-    },
-    enabled:!!employeeId
-  });  
-};
-
 export const useAllEmployees = (showInactive) => {
   const {
     data = [],
@@ -208,9 +197,6 @@ export const useEmployeesNameByProject = (projectId) => {
 
 // Mutation------------------------------------------------------------------
 
-
-
-
 export const useUpdateEmployee = () => {
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
@@ -225,7 +211,6 @@ export const useUpdateEmployee = () => {
       const isAllEmployee = variables.IsAllEmployee;
 
       // Cache invalidation
-      queryClient.invalidateQueries({ queryKey: ["employeeProfile",id] });
       queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
       // queryClient.invalidateQueries(['employeeProfile', id]);
       queryClient.invalidateQueries({ queryKey: ["projectEmployees"] });
@@ -247,6 +232,40 @@ export const useUpdateEmployee = () => {
   });
 };
 
+// export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
+//   const queryClient = useQueryClient();
+//  const selectedProject = useSelector((store)=>store.localVariables.projectId)
+//   return useMutation({
+//     mutationFn: (id) => {
+//       setemployeeLodaing(true);
+//       return EmployeeRepository.deleteEmployee(id);
+//     },
+
+//     onSuccess: () => {
+
+//       // queryClient.invalidateQueries( ['allEmployee',false]);
+//       queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
+//       queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject' ,selectedProject]} );
+//           showToast("Employee deleted successfully.", "success");
+//       setIsDeleteModalOpen(false);
+//     },
+
+//     onError: (error) => {
+//       const message =
+//         error.response?.data?.message ||
+//         error.message ||
+//         "An unexpected error occurred";
+//       showToast(message, "error");
+//       setIsDeleteModalOpen(false);
+//     },
+
+//     onSettled: () => {
+//       setemployeeLodaing(false);
+//     },
+//   });
+// };
+
+// Manage Role
 
 export const useSuspendEmployee = ({
   setIsDeleteModalOpen,

src/pages/employee/EmployeeProfile.jsx

@@ -3,7 +3,6 @@ import { useSearchParams, useParams, useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 
 import {
-  useEmployee,
   useEmployeeProfile,
   useEmployees,
   useEmployeesByProject,
@@ -29,20 +28,38 @@ const EmployeeProfile = () => {
 
   const projectID = useSelector((store) => store.localVariables.projectId);
   const { employeeId } = useParams();
+  // const {employee,loading} = useEmployeeProfile(employeeId)
+  const [loading, setLoading] = useState(true);
 
   const [SearchParams] = useSearchParams();
   const tab = SearchParams.get("for");
   const [activePill, setActivePill] = useState(tab || "profile");
+  const [currentEmployee, setCurrentEmployee] = useState();
   const [showModal, setShowModal] = useState(false);
-  const {data:currentEmployee,isLoading,isError,error}  = useEmployee(employeeId)
+
   const handlePillClick = (pillKey) => {
     setActivePill(pillKey);
   };
 
+  const fetchEmployeeProfile = async (employeeID) => {
+    try {
+      const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
+      setCurrentEmployee(resp.data);
+      setLoading(false);
+    } catch (err) {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (employeeId) {
+      fetchEmployeeProfile(employeeId);
+    }
+  }, [employeeId]);
 
   const navigate = useNavigate();
   const renderContent = () => {
-    if (isLoading) return <div>Loading</div>;
+    if (loading) return <div>Loading</div>;
     switch (activePill) {
       case "profile": {
         return (
@@ -84,10 +101,9 @@ const EmployeeProfile = () => {
     }
   };
 
-  if (isLoading) {
+  if (loading) {
     return <div>Loading...</div>;
   }
-  if(isError) return <div >{error.message}</div>
   return (
     <>
       <div className="container-fluid">