feat:update web

src/components/layouts/BaseLayout/BaseLayout.tsx

@@ -12,59 +12,59 @@ const BaseLayout = ({ children, title, breadcrumb }: PropsBaseLayout) => {
   const [showFull, setShowFull] = React.useState(false);
   const [openMenuMobile, setOpenMenuMobile] = React.useState(false);
   return (
-    // <RequireAuth>
-    <ContextBaseLayout
-      value={{ showFull, setShowFull, openMenuMobile, setOpenMenuMobile }}
-    >
-      <div className="min-h-screen bg-[#f8f8f8]">
-        {/* OVERLAY cho Mobile */}
-        <div
-          className={clsx(
-            "fixed inset-0 bg-black/50 backdrop-blur-sm z-[20] transition-opacity duration-300 xl:hidden",
-            openMenuMobile ? "opacity-100 visible" : "opacity-0 invisible",
-          )}
-          onClick={() => setOpenMenuMobile(false)}
-        />
+    <RequireAuth>
+      <ContextBaseLayout
+        value={{ showFull, setShowFull, openMenuMobile, setOpenMenuMobile }}
+      >
+        <div className="min-h-screen bg-[#f8f8f8]">
+          {/* OVERLAY cho Mobile */}
+          <div
+            className={clsx(
+              "fixed inset-0 bg-black/50 backdrop-blur-sm z-[20] transition-opacity duration-300 xl:hidden",
+              openMenuMobile ? "opacity-100 visible" : "opacity-0 invisible",
+            )}
+            onClick={() => setOpenMenuMobile(false)}
+          />
 
-        {/* SIDEBAR (Dùng chung cho cả Desktop & Mobile) */}
-        <nav
-          className={clsx(
-            "fixed top-0 left-0 h-full w-[240px] z-[21] bg-white transition-all duration-300 border-r border-[#f4f7fa]",
-            // Desktop logic
-            showFull ? "xl:translate-x-0" : "xl:-translate-x-full",
-            // Mobile logic
-            openMenuMobile ? "translate-x-0" : "-translate-x-full",
-          )}
-        >
-          <Navbar />
-        </nav>
+          {/* SIDEBAR (Dùng chung cho cả Desktop & Mobile) */}
+          <nav
+            className={clsx(
+              "fixed top-0 left-0 h-full w-[240px] z-[21] bg-white transition-all duration-300 border-r border-[#f4f7fa]",
+              // Desktop logic
+              showFull ? "xl:translate-x-0" : "xl:-translate-x-full",
+              // Mobile logic
+              openMenuMobile ? "translate-x-0" : "-translate-x-full",
+            )}
+          >
+            <Navbar />
+          </nav>
 
-        {/* HEADER */}
-        <header
-          className={clsx(
-            "fixed top-0 right-0 h-[68px] z-[11] bg-white transition-all duration-300 border-b border-[#f4f7fa]",
-            showFull
-              ? "xl:left-[240px] xl:w-[calc(100%-240px)]"
-              : "left-0 w-full",
-            "left-0 w-full", // Mặc định full width trên mobile
-          )}
-        >
-          <Header title={title} breadcrumb={breadcrumb} />
-        </header>
+          {/* HEADER */}
+          <header
+            className={clsx(
+              "fixed top-0 right-0 h-[68px] z-[11] bg-white transition-all duration-300 border-b border-[#f4f7fa]",
+              showFull
+                ? "xl:left-[240px] xl:w-[calc(100%-240px)]"
+                : "left-0 w-full",
+              "left-0 w-full", // Mặc định full width trên mobile
+            )}
+          >
+            <Header title={title} breadcrumb={breadcrumb} />
+          </header>
 
-        {/* MAIN CONTENT */}
-        <main
-          className={clsx(
-            "pt-[92px] pb-6 px-6 transition-all duration-300",
-            showFull ? "xl:pl-[264px]" : "xl:pl-6",
-            "pl-6", // Mặc định padding trên mobile
-          )}
-        >
-          {children}
-        </main>
-      </div>
-    </ContextBaseLayout>
-    // </RequireAuth>
+          {/* MAIN CONTENT */}
+          <main
+            className={clsx(
+              "pt-[92px] pb-6 px-6 transition-all duration-300",
+              showFull ? "xl:pl-[264px]" : "xl:pl-6",
+              "pl-6", // Mặc định padding trên mobile
+            )}
+          >
+            {children}
+          </main>
+        </div>
+      </ContextBaseLayout>
+    </RequireAuth>
   );
 };
 

src/components/layouts/BaseLayout/componets/MenuProfile/MenuProfile.tsx

@@ -1,4 +1,4 @@
-import React, { use, useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { PropsMenuProfile } from "./interface";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useMutation } from "@tanstack/react-query";
@@ -11,15 +11,12 @@ import { PATH } from "@/constant/config";
 import Link from "next/link";
 import clsx from "clsx";
 import { LogOut, ShieldCog, ShieldUser } from "lucide-react";
-import CustomDialog from "@/components/customs/custom-dialog";
 
 const MenuProfile = ({ onClose }: PropsMenuProfile) => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const [openLogout, setOpenLogout] = useState(false);
-
   /* ================== CHECK ACTIVE ================== */
   const checkActive = useCallback(
     (path: string) => {
@@ -32,16 +29,18 @@ const MenuProfile = ({ onClose }: PropsMenuProfile) => {
   const logoutMutation = useMutation({
     mutationFn: () =>
       httpRequest({
-        showMessageFailed: true,
+        showMessageFailed: false,
         showMessageSuccess: false,
         http: authServices.logout(),
       }),
-    onSuccess(data) {
-      if (data) {
-        store.dispatch(logout());
-        store.dispatch(setInfoUser(null));
-        router.push(PATH.LOGIN);
-      }
+
+    onSettled() {
+      store.dispatch(logout());
+      store.dispatch(setInfoUser(null));
+
+      onClose();
+
+      router.replace(PATH.LOGIN);
     },
   });
 
@@ -90,8 +89,7 @@ const MenuProfile = ({ onClose }: PropsMenuProfile) => {
       {/* LOGOUT */}
       <div
         onClick={() => {
-          setOpenLogout(true);
-          onClose();
+          handleLogout();
         }}
         className="flex items-center gap-3 p-3 rounded-lg hover:bg-red-50 cursor-pointer transition"
       >
@@ -101,18 +99,6 @@ const MenuProfile = ({ onClose }: PropsMenuProfile) => {
           <p className="text-xs text-gray-500">Đăng xuất khỏi hệ thống</p>
         </div>
       </div>
-
-      {/* DIALOG */}
-      <CustomDialog
-        open={openLogout}
-        onClose={() => setOpenLogout(false)}
-        onSubmit={handleLogout}
-        title="Đăng xuất"
-        note="Bạn có muốn đăng xuất khỏi hệ thống không?"
-        titleCancel="Không"
-        titleSubmit="Đăng xuất"
-        type="error"
-      />
     </div>
   );
 };

src/components/layouts/BaseLayout/componets/Navbar/Navbar.tsx

@@ -7,6 +7,7 @@ import { Menus, PATH } from "@/constant/config";
 import Image from "next/image";
 import icons from "@/constant/images/icons";
 import clsx from "clsx";
+import { Hospital } from "lucide-react";
 
 const Navbar = () => {
   const pathname = usePathname();
@@ -22,10 +23,11 @@ const Navbar = () => {
   return (
     <div className="h-full w-full flex flex-col items-center p-3 bg-white">
       <Link href={PATH.HOME} className="flex items-center justify-center py-2">
-        <Image alt="Logo" src={icons.avatar} width={40} height={40} />
-        <h4 className="ml-2 text-sm font-semibold text-blue-900 select-none">
-          Quản lý
-        </h4>
+        {/* <Image alt="Logo" src={icons.avatar} width={40} height={40} /> */}
+        <Hospital className="text-blue-900" />
+        <h2 className="ml-2 text-sm font-semibold text-blue-900 select-none">
+          Quản lý khám bệnh
+        </h2>
       </Link>
       <div className="flex-1 w-full overflow-auto pt-3">
         {Menus.map((menu, i) => (