src/components/Employee/EmpDashboard.jsx

@@ -34,9 +34,13 @@ 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 bg-label-primary">
+                            <span
+                              className={`avatar-initial rounded ${project.removedDate ? "bg-label-warning" : "bg-label-success"
+                                }`}
+                            >
                               <i className="icon-base bx bx-buildings icon-lg"></i>
                             </span>
+
                           </div>
                           <div>
                             <h6 className="mb-0">{project.projectShortName}</h6>
@@ -49,6 +53,14 @@ 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>
@@ -59,14 +71,7 @@ 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,6 +11,17 @@ 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 = [],
@@ -197,6 +208,9 @@ export const useEmployeesNameByProject = (projectId) => {
 
 // Mutation------------------------------------------------------------------
 
+
+
+
 export const useUpdateEmployee = () => {
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
@@ -211,6 +225,7 @@ 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"] });
@@ -232,40 +247,6 @@ 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,
@@ -353,4 +334,4 @@ export const useUpdateEmployeeRoles = ({
     isError: mutation.isError,
     error: mutation.error,
   };
-};
+};

src/pages/employee/EmployeeProfile.jsx

@@ -3,6 +3,7 @@ import { useSearchParams, useParams, useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 
 import {
+  useEmployee,
   useEmployeeProfile,
   useEmployees,
   useEmployeesByProject,
@@ -28,38 +29,20 @@ 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 (loading) return <div>Loading</div>;
+    if (isLoading) return <div>Loading</div>;
     switch (activePill) {
       case "profile": {
         return (
@@ -101,9 +84,10 @@ const EmployeeProfile = () => {
     }
   };
 
-  if (loading) {
+  if (isLoading) {
     return <div>Loading...</div>;
   }
+  if(isError) return <div >{error.message}</div>
   return (
     <>
       <div className="container-fluid">
@@ -138,4 +122,4 @@ const EmployeeProfile = () => {
   );
 };
 
-export default EmployeeProfile;
+export default EmployeeProfile;