optimized logout fun and intergrated inside Tenant selection page

src/components/Layout/Header.jsx

@@ -19,7 +19,7 @@ import { useProjectName } from "../../hooks/useProjects";
 import eventBus from "../../services/eventBus";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_PROJECT } from "../../utils/constants";
-import { useAuthModal } from "../../hooks/useAuth";
+import { useAuthModal, useLogout } from "../../hooks/useAuth";
 
 const Header = () => {
   const { profile } = useProfile();
@@ -29,9 +29,7 @@ const Header = () => {
   const navigate = useNavigate();
   const {onOpen} = useAuthModal()
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
-  // {
+  const { mutate : logout,isPending:logouting} = useLogout()
-  //   console.log(location.pathname);
-  // }
 
   const isDashboardPath =
     /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
@@ -61,41 +59,9 @@ const Header = () => {
     return role ? role.name : "User";
   };
 
-  const handleLogout = (e) => {
+ 
-    e.preventDefault();
-    logout();
-  };
 
-  const logout = async () => {
+  
-    try {
-      let data = {
-        refreshToken: localStorage.getItem("refreshToken"),
-      };
-
-      AuthRepository.logout(data)
-        .then(() => {
-          localStorage.removeItem("jwtToken");
-          localStorage.removeItem("refreshToken");
-          localStorage.removeItem("user");
-          localStorage.clear();
-          clearAllCache();
-          window.location.href = "/auth/login";
-        })
-        .catch(() => {
-          localStorage.removeItem("jwtToken");
-          localStorage.removeItem("refreshToken");
-          localStorage.removeItem("user");
-          localStorage.clear();
-          clearAllCache();
-          window.location.href = "/auth/login";
-        });
-    } catch (error) {
-      console.error(
-        "Error during logout:",
-        error?.response?.data || error.message
-      );
-    }
-  };
 
   const handleProfilePage = () => {
     navigate(`/employee/${profile?.employeeInfo?.id}`);
@@ -474,11 +440,10 @@ const Header = () => {
                 <a
                   aria-label="click to log out"
                   className="dropdown-item cusor-pointer"
-                  href="/logout"
+                  onClick={()=>handleLogout()}
-                  onClick={handleLogout}
                 >
-                  <i className="bx bx-power-off me-2"></i>
+                 {logouting ? "Please Wait":<> <i className="bx bx-log-out me-2"></i>
-                  <span className="align-middle">Log Out</span>
+                  <span className="align-middle">SignOut</span></>}
                 </a>
               </li>
             </ul>

src/hooks/useAuth.jsx

@@ -53,4 +53,31 @@ export const useAuthModal = () => {
     onOpen: () => dispatch(openAuthModal()),
     onClose: () => dispatch(closeAuthModal()),
   };
-};
+};
+
+export const useLogout = ()=>{
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      let payload = {refreshToken: localStorage.getItem("refreshToken")}
+     return await AuthRepository.logout(payload);
+    },
+    
+    onSuccess: (data) => {
+              localStorage.removeItem("jwtToken");
+              localStorage.removeItem("refreshToken");
+              localStorage.removeItem("ctnt");
+              localStorage.clear();
+              window.location.href = "/auth/login";
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+
+    onError: (error) => {
+      showToast(error.message || "Error while creating project", "error");
+      localStorage.removeItem("jwtToken");
+      localStorage.removeItem("refreshToken")
+      localStorage.removeItem("ctnt")
+    },
+  });
+}

src/pages/authentication/SwitchTenant.jsx

@@ -21,6 +21,7 @@ const SwitchTenant = () => {
       queryKey: ["profile"],
       queryFn: () => AuthRepository.profile(),
     });
+    window.location.reload();
   });
   const currentTenant = localStorage.getItem("ctnt");
   const handleTenantselection = (tenantId) => {
@@ -83,11 +84,11 @@ const SwitchTenant = () => {
                 )}
 
                 <button
-                  className="btn btn-primary btn-sm mt-2 align-self-start"
+                  className={` ${currentTenant === tenant.id ? "badge bg-label-primary w-50" :"btn btn-primary btn-sm mt-2 align-self-start" }`}
                   onClick={() => handleTenantselection(tenant?.id)}
                   disabled={isPending && pendingTenant === tenant.id || currentTenant === tenant.id }
                 >
-                  {isPending && pendingTenant === tenant.id
+                  {currentTenant === tenant.id  ?  "Active Tenant" :isPending && pendingTenant === tenant.id
                     ? "Please Wait.."
                     : "Go To Dashboard"}
                 </button>

src/pages/authentication/TenantSelectionPage.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useTenants, useSelectTenant } from "../../hooks/useAuth.jsx";
+import { useTenants, useSelectTenant, useLogout } from "../../hooks/useAuth.jsx";
 import { Link, useNavigate } from "react-router-dom";
 import Dashboard from "../../components/Dashboard/Dashboard.jsx";
 import Loader from "../../components/common/Loader.jsx";
@@ -17,12 +17,15 @@ const TenantSelectionPage = () => {
     localStorage.setItem("ctnt", tenantId);
     chooseTenant(tenantId);
   };
+  
+  const {mutate:handleLogout,isPending:isLogouting} = useLogout(()=>{})
 
-  useEffect(() => {
+
-    if (localStorage.getItem("ctnt")) {
+  // useEffect(() => {
-      navigate("/dashboard");
+  //   if (localStorage.getItem("ctnt")) {
-    }
+  //     navigate("/dashboard");
-  }, [navigate]);
+  //   }
+  // }, [navigate]);
 
   useEffect(() => {
     if (!isLoading && data?.data?.length === 1) {
@@ -47,7 +50,7 @@ const TenantSelectionPage = () => {
 
 
   return (
-    <div className="container-fluid  bg-primary">
+    <div className="container-fluid">
       {/* Logo */}
       <div className="text-center">
         <img
@@ -64,6 +67,10 @@ const TenantSelectionPage = () => {
         <p className="fs-6 fs-md-5">
           Please select which dashboard you want to explore!!!
         </p>
+        <div  onClick={()=>handleLogout()}>
+          {isLogouting ? "Please Wait...":<span className="fs-6 fw-semibold cursor-pointer text-decoration-underline"><i className='bx bx-log-out'></i>SignOut</span>}
+        </div>
+      
       </div>
 
       {/* Card Section */}