Merge pull request 'Issues_Sep_1W_V2' (#402) from Issues_Sep_1W_V2 into Refactor_Directory

Reviewed-on: #402
Merged

src/components/Directory/ManageContact.jsx

@@ -470,8 +470,7 @@ const ManageContact = ({ contactId, closeModal }) => {
           )}
         </div>
 
-        {/* Actions */}
+        <div className="d-flex justify-content-end gap-2 py-2 mt-3">
-        <div className="d-flex justify-content-end gap-3 py-2">
           <button
             className="btn btn-sm btn-label-secondary"
             type="button"

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/components/Expenses/ExpenseFilterPanel.jsx

@@ -187,7 +187,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
           <div className="d-flex justify-content-end py-3 gap-2">
             <button
               type="button"
-              className="btn btn-secondary btn-xs"
+              className="btn btn-label-secondary btn-xs"
               onClick={onClear}
             >
               Clear

src/components/Project/AssignTask.jsx

@@ -47,6 +47,20 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     },
   });
 
+  const dropdownRef = useRef(null);
+  const [open, setOpen] = useState(false);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
   const infoRef = useRef(null);
   const infoRef1 = useRef(null);
 
@@ -255,7 +269,10 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
               <div className="row mb-1">
                 <div className="col-12">
                   <div className="form-text text-start">
-                    <div className="d-flex align-items-center form-text fs-7">
+                    <div
+                      className="d-flex align-items-center form-text fs-7"
+                      ref={dropdownRef}
+                    >
                       <span className="text-dark">Select Team</span>
 
                       {/* Dropdown */}
@@ -265,9 +282,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                               ? "text-secondary"
                               : "text-primary"
                             }`}
-                          data-bs-toggle="dropdown"
+                          onClick={() => setOpen(!open)}
-                          role="button"
-                          aria-expanded="false"
                         >
                           <i className="bx bx-slider-alt ms-2"></i>
                         </a>
@@ -290,9 +305,10 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           </span>
                         )}
 
-                        {/* Dropdown Menu with Scroll */}
+                        {/* Dropdown Menu */}
+                        {open && (
                           <ul
-                          className="dropdown-menu p-2 text-capitalize"
+                            className="dropdown-menu show p-2 text-capitalize"
                             style={{ maxHeight: "300px", overflowY: "auto" }}
                           >
                             {/* All Roles */}
@@ -304,9 +320,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                   id="checkboxAllRoles"
                                   value="all"
                                   checked={selectedRoles.includes("all")}
-                                onChange={(e) =>
+                                  onChange={(e) => handleRoleChange(e, e.target.value)}
-                                  handleRoleChange(e, e.target.value)
-                                }
                                 />
                                 <label
                                   className="form-check-label ms-2"
@@ -327,9 +341,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                     id={`checkboxRole-${role.id}`}
                                     value={role.id}
                                     checked={selectedRoles.includes(String(role.id))}
-                                  onChange={(e) =>
+                                    onChange={(e) => handleRoleChange(e, e.target.value)}
-                                    handleRoleChange(e, e.target.value)
-                                  }
                                   />
                                   <label
                                     className="form-check-label ms-2"
@@ -341,6 +353,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                               </li>
                             ))}
                           </ul>
+                        )}
                       </div>
 
                       {/* Search Box */}

src/components/Tenant/TenantFilterPanel.jsx

@@ -106,7 +106,7 @@ const TenantFilterPanel = ({ onApply }) => {
         <div className="d-flex justify-content-end py-3 gap-2">
           <button
             type="button"
-            className="btn btn-secondary btn-xs"
+            className="btn btn-label-secondary btn-xs"
             onClick={onClear}
 
           >

src/components/common/FilterIcon.jsx

@@ -273,7 +273,7 @@ const FilterIcon = ({
           <li className="d-flex justify-content-end gap-2 px-2 mt-2 mb-2">
             <button
               type="button"
-              className="btn btn-secondary btn-sm py-0 px-2"
+              className="btn btn-label-secondary btn-sm py-0 px-2"
               onClick={clearAllFilters}
             >
               Clear

src/components/common/MultiSelectDropdown.css

@@ -63,6 +63,7 @@
   border: none;
   outline: none;
   background-color: #f8f9fa;
+  color: black;
   border-radius: 6px;
   font-size: 14px;
 }

src/components/common/TagInput.jsx

@@ -65,9 +65,9 @@ const handleChange = (e) => {
 
   return (
     <>
-      <Label htmlFor={name} className="form-label" required>
+      <label htmlFor={name} className="form-label">
         {label}
-      </Label>
+      </label>
 
       <div
         className="form-control form-control-sm p-1"

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,

src/pages/authentication/ForgotPasswordPage.jsx

@@ -10,7 +10,7 @@ import { z } from "zod";
 
 
 const forgotPassSceham = z.object({
-  email: z.string().email(),
+  email: z.string().trim().email(),
 })
 
 const ForgotPasswordPage = () => {

src/pages/authentication/LoginPage.jsx

@@ -16,11 +16,11 @@ const LoginPage = () => {
 
   const loginSchema = IsLoginWithOTP
     ? z.object({
-        username: z.string().email({ message: "Valid email required" }),
+      username: z.string().trim().email({ message: "Valid email required" }),
     })
     : z.object({
-        username: z.string().email({ message: "Valid email required" }),
+      username: z.string().trim().email({ message: "Valid email required" }),
-        password: z.string().min(1, { message: "Password required" }),
+      password: z.string().trim().min(1, { message: "Password required" }),
       rememberMe: z.boolean(),
     });
 
@@ -106,7 +106,7 @@ const LoginPage = () => {
           {/* Password */}
           {!IsLoginWithOTP && (
             <>
-              <div className="mb-3 text-start">
+              {/* <div className="mb-3 text-start">
                 <label htmlFor="password" className="form-label">
                   Password
                 </label>
@@ -114,8 +114,7 @@ const LoginPage = () => {
                   <input
                     type={hidepass ? "password" : "text"}
                     id="password"
-                    className={`form-control ${
+                    className={`form-control ${errors.password ? "is-invalid" : ""
-                      errors.password ? "is-invalid" : ""
                       }`}
                     placeholder="••••••••"
                     {...register("password")}
@@ -135,6 +134,38 @@ const LoginPage = () => {
                     {errors.password.message}
                   </div>
                 )}
+              </div> */}
+
+               <div className="mb-3 form-password-toggle text-start">
+                <label htmlFor="password" className="form-label">
+                  Password
+                </label>
+
+                <div className="input-group input-group-merge">
+                  <input
+                    type={hidepass ? "password" : "text"}
+                    autoComplete="new-password"
+                    id="password"
+                    className="form-control form-control-xl shadow-none"
+                    name="password"
+                    {...register("password")}
+                    placeholder="••••••••••••"
+                    aria-describedby="password"
+                  />
+                  <span className="input-group-text cursor-pointer border-start-0">
+                    <button
+                      type="button"
+                      className="btn btn-link p-0"
+                      onClick={() => setHidepass(!hidepass)}
+                    >
+                      {hidepass ? (
+                        <i className="bx bx-hide fs-5" />
+                      ) : (
+                        <i className="bx bx-show fs-5" />
+                      )}
+                    </button>
+                  </span>
+                </div>
               </div>
 
               {/* Remember Me + Forgot Password */}

src/pages/authentication/ResetPassword.jsx

@@ -108,7 +108,7 @@ const ResetPassword = () => {
             </label>
             <input
               type="text"
-            className="form-control"
+              className="form-control border border-secondary"
               id="email"
               {...register("email")}
               placeholder="Enter your email"
@@ -130,12 +130,13 @@ const ResetPassword = () => {
                 New Password
               </label>
             </div>
-          <div className=" input-group input-group-merge">
+
+            <div className="input-group input-group-merge d-flex align-items-center border border-secondary rounded px-2">
               <input
                 type={hidepass ? "password" : "text"}
                 autoComplete="true"
                 id="password"
-              className="form-control"
+                className="form-control form-control-xl border-0 shadow-none"
                 name="password"
                 {...register("password")}
                 placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
@@ -143,7 +144,7 @@ const ResetPassword = () => {
               />
               <button
                 type="button"
-              className="btn btn-outline-secondy border-top border-end border-bottom "
+                className="btn btn-link-secondary p-0 ms-2"
                 onClick={() => setHidepass(!hidepass)}
                 style={{
                   borderTopLeftRadius: 0,
@@ -158,6 +159,7 @@ const ResetPassword = () => {
                 )}
               </button>
             </div>
+
             {errors.password && (
               <div
                 className="danger-text text-start"
@@ -172,12 +174,12 @@ const ResetPassword = () => {
                 Repeat New Password
               </label>{" "}
             </div>
-          <div className=" input-group input-group-merge">
+            <div className="input-group input-group-merge d-flex align-items-center border border-secondary rounded px-2">
               <input
                 type={hidepass1 ? "password" : "text"}
                 autoComplete="true"
                 id="password"
-              className="form-control"
+                className="form-control form-control-xl border-0 shadow-none"
                 name="confirmPassword"
                 {...register("confirmPassword")}
                 placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
@@ -185,7 +187,7 @@ const ResetPassword = () => {
               />
               <button
                 type="button"
-              className="btn border-top border-end border-bottom "
+                className="btn btn-link-secondary p-0 ms-2"
                 onClick={() => setHidepass1(!hidepass1)}
                 style={{
                   borderTopLeftRadius: 0,

src/pages/employee/EmployeeList.jsx

@@ -18,7 +18,7 @@ import {
   VIEW_ALL_EMPLOYEES,
   VIEW_TEAM_MEMBERS,
 } from "../../utils/constants";
-import { clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
+import { clearCacheKey } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
 import {
@@ -38,10 +38,9 @@ import usePagination from "../../hooks/usePagination";
 import { setProjectId } from "../../slices/localVariablesSlice";
 
 const EmployeeList = () => {
-  // const selectedProjectId = useSelector(
+  const selectedProjectId = useSelector(
-  //   (store) => store.localVariables.projectId
+    (store) => store.localVariables.projectId
-  // );
+  );
-  const selectedProjectId = useSelectedProject();
   const { projectNames, loading: projectLoading, fetchData } = useProjectName();
 
   const dispatch = useDispatch();
@@ -79,11 +78,11 @@ const EmployeeList = () => {
     }
   );
 
-useEffect(() => {
+  useEffect(() => {
-  if (!selectedProjectId  && projectNames?.length > 0) {
+    if (selectedProjectId === null) {
-    dispatch(setProjectId(projectNames[0].id));
+      dispatch(setProjectId(projectNames[0]?.id));
     }
-}, [selectedProjectId, projectNames, dispatch]);
+  }, [selectedProjectId]);
   const navigate = useNavigate();
 
   const applySearchFilter = (data, text) => {
@@ -177,11 +176,9 @@ useEffect(() => {
   useEffect(() => {
     if (!loading && Array.isArray(employees)) {
       const sorted = [...employees].sort((a, b) => {
-        const nameA = `${a.firstName || ""}${a.middleName || ""}${
+        const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""
-          a.lastName || ""
           }`.toLowerCase();
-        const nameB = `${b.firstName || ""}${b.middleName || ""}${
+        const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
-          b.lastName || ""
           }`.toLowerCase();
         return nameA?.localeCompare(nameB);
       });
@@ -221,10 +218,10 @@ useEffect(() => {
         recallEmployeeData(
           showInactive,
           showAllEmployees ? null : selectedProjectId
-        );
+        ); // Use selectedProjectId here
       }
     },
-    [employees, showInactive, showAllEmployees, selectedProjectId]
+    [employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
   );
 
   useEffect(() => {
@@ -259,15 +256,21 @@ useEffect(() => {
           />
         </GlobalModel>
       )}
+
       {IsDeleteModalOpen && (
         <ConfirmModal
           isOpen={IsDeleteModalOpen}
           type="delete"
-          header="Suspend Employee"
+          header={
-          message="Are you sure you want suspend?"
+            selectedEmpFordelete?.isActive
+              ? "Suspend Employee"
+              : "Reactivate Employee"
+          }
+          message={`Are you sure you want to ${selectedEmpFordelete?.isActive ? "suspend" : "reactivate"
+            } this employee?`}
           onSubmit={(id) =>
             suspendEmployee({
-                employeeId:id ,
+              employeeId: id,
               active: !selectedEmpFordelete.isActive,
             })
           }
@@ -496,8 +499,7 @@ useEffect(() => {
                         Status
                       </th>
                       <th
-                        className={`sorting_disabled  ${
+                        className={`sorting_disabled  ${!Manage_Employee && "d-none"
-                          !Manage_Employee && "d-none"
                           }`}
                         rowSpan="1"
                         colSpan="1"
@@ -537,7 +539,7 @@ useEffect(() => {
                           colSpan={8}
                           style={{ paddingTop: "20px", textAlign: "center" }}
                         >
-                         No team members assigned yet
+                          No Data Found
                         </td>
                       </tr>
                     ) : null}
@@ -556,9 +558,7 @@ useEffect(() => {
                               <div className="d-flex flex-column">
                                 <a
                                   onClick={() =>
-                                    navigate(
+                                    navigate(`/employee/${item.id}`)
-                                      `/employee/${item.id}?for=attendance`
-                                    )
                                   }
                                   className="text-heading text-truncate cursor-pointer"
                                 >
@@ -594,10 +594,9 @@ useEffect(() => {
                               {item.jobRole || "Not Assign Yet"}
                             </span>
                           </td>
+
                           <td className=" d-none  d-md-table-cell">
-                            {item.joiningDate
+                            {moment(item.joiningDate)?.format("DD-MMM-YYYY")}
-                              ? moment(item.joiningDate).format("DD-MMM-YYYY")
-                              : "NA"}
                           </td>
                           <td>
                             {showInactive ? (
@@ -626,47 +625,56 @@ useEffect(() => {
                                   <i className="bx bx-dots-vertical-rounded bx-md"></i>
                                 </button>
                                 <div className="dropdown-menu dropdown-menu-end">
+                                  {/* View always visible */}
                                   <button
-                                    onClick={() =>
+                                    onClick={() => navigate(`/employee/${item.id}`)}
-                                      navigate(`/employee/${item.id}`)
-                                    }
                                     className="dropdown-item py-1"
                                   >
                                     <i className="bx bx-detail bx-sm"></i> View
                                   </button>
-                                  <button
+
-                                    className="dropdown-item py-1"
+                                  {/* If ACTIVE employee */}
-                                    onClick={() => {
+                                  {item.isActive && (
-                                      handleEmployeeModel(item.id);
-                                    }}
-                                  >
-                                    <i className="bx bx-edit bx-sm"></i> Edit
-                                  </button>
-                                  {!item.isSystem && (
                                     <>
                                       <button
                                         className="dropdown-item py-1"
-                                        onClick={() =>
+                                        onClick={() => handleEmployeeModel(item.id)}
-                                          handleOpenDelete(item)
-                                        }
                                       >
-                                        <i className="bx bx-task-x bx-sm"></i>{" "}
+                                        <i className="bx bx-edit bx-sm"></i> Edit
-                                        Suspend
                                       </button>
+
+                                      {/* Suspend only when active */}
+                                      {item.isActive && (
+                                        <button
+                                          className="dropdown-item py-1"
+                                          onClick={() => handleOpenDelete(item)}
+                                        >
+                                          <i className="bx bx-task-x bx-sm"></i> Suspend
+                                        </button>
+                                      )}
+
                                       <button
                                         className="dropdown-item py-1"
                                         type="button"
                                         data-bs-toggle="modal"
                                         data-bs-target="#managerole-modal"
-                                        onClick={() =>
+                                        onClick={() => setEmpForManageRole(item.id)}
-                                          setEmpForManageRole(item.id)
-                                        }
                                       >
-                                        <i className="bx bx-cog bx-sm"></i>{" "}
+                                        <i className="bx bx-cog bx-sm"></i> Manage Role
-                                        Manage Role
                                       </button>
+
                                     </>
                                   )}
+
+                                  {/* If INACTIVE employee AND inactive toggle is ON */}
+                                  {!item.isActive && showInactive && (
+                                    <button
+                                      className="dropdown-item py-1"
+                                      onClick={() => handleOpenDelete(item)}
+                                    >
+                                      <i className="bx bx-refresh bx-sm me-1"></i> Re-activate
+                                    </button>
+                                  )}
                                 </div>
                               </div>
                             </td>
@@ -683,8 +691,7 @@ useEffect(() => {
                   <nav aria-label="Page">
                     <ul className="pagination pagination-sm justify-content-end py-1">
                       <li
-                        className={`page-item ${
+                        className={`page-item ${currentPage === 1 ? "disabled" : ""
-                          currentPage === 1 ? "disabled" : ""
                           }`}
                       >
                         <button
@@ -698,8 +705,7 @@ useEffect(() => {
                       {[...Array(totalPages)]?.map((_, index) => (
                         <li
                           key={index}
-                          className={`page-item ${
+                          className={`page-item ${currentPage === index + 1 ? "active" : ""
-                            currentPage === index + 1 ? "active" : ""
                             }`}
                         >
                           <button
@@ -712,8 +718,7 @@ useEffect(() => {
                       ))}
 
                       <li
-                        className={`page-item ${
+                        className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                          currentPage === totalPages ? "disabled" : ""
                           }`}
                       >
                         <button

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">