update-full

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

@@ -1,5 +1,6 @@
 "use client";
-import React, { useContext, useEffect, useState } from "react";
+
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { PropsHeader } from "./interface";
 import { usePathname } from "next/dist/client/components/navigation";
 import { useSelector } from "react-redux";
@@ -10,6 +11,10 @@ import icons from "@/constant/images/icons";
 import { ChevronDown } from "lucide-react";
 import clsx from "clsx";
 import MenuProfile from "../MenuProfile";
+import { useQuery } from "@tanstack/react-query";
+import profileServices from "@/services/profileServices";
+import { QUERY_KEY } from "@/constant/config/enum";
+import { httpRequest } from "@/services";
 
 const Header = ({ title, breadcrumb }: PropsHeader) => {
   const pathname = usePathname();
@@ -18,7 +23,7 @@ const Header = ({ title, breadcrumb }: PropsHeader) => {
 
   const [openProfile, setOpenProfile] = useState(false);
 
-  //Đóng menu mobile khi đổi route
+  // Đóng menu mobile khi đổi route
   useEffect(() => {
     if (window.innerWidth < 1280) {
       context.setOpenMenuMobile?.(false);
@@ -33,8 +38,44 @@ const Header = ({ title, breadcrumb }: PropsHeader) => {
     }
   };
 
+  /* =========================================================
+     CALL API GET LIST PROFILE & KHỚP NỐI THEO CHUẨN DATA MỚI
+     ========================================================= */
+  const profileQuery = useQuery<any>({
+    queryKey: [QUERY_KEY.table_list_profile],
+    queryFn: async () => {
+      const res = await httpRequest<any>({
+        showMessageFailed: true,
+        http: profileServices.getProfile(), // Đảm bảo endpoint trỏ về /api/v1/UserProfile/list
+      });
+
+      // Trả về đúng object chứa items theo cấu trúc của API
+      return (
+        res || {
+          items: [],
+          page: 1,
+          pageSize: 10,
+          total: 0,
+          totalPages: 0,
+        }
+      );
+    },
+  });
+
+  // Tìm kiếm thông tin profile của user hiện tại đang đăng nhập bằng useMemo
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization
+  const currentUserProfile = useMemo(() => {
+    const listItems = profileQuery.data?.items || [];
+    if (!infoUser?.userId) return null;
+
+    // So khớp accountId của API trả về với userId trong Redux (infoUser)
+    return (
+      listItems.find((item: any) => item.accountId === infoUser.userId) || null
+    );
+  }, [profileQuery.data, infoUser?.userId]);
+
   return (
-    <div className="h-full w-full px-6 flex items-center justify-between bg-white relatives">
+    <div className="h-full w-full px-6 flex items-center justify-between bg-white relative">
       <div className="flex items-center gap-4">
         {/* Nút bấm Mobile: Mở menu mobile */}
         <div
@@ -62,24 +103,26 @@ const Header = ({ title, breadcrumb }: PropsHeader) => {
           <Image src={icons.full_screen} alt="" width={24} height={24} />
         </div>
 
+        {/* PROFILE CONTROL AREA */}
         <div
           className="relative flex items-center gap-2 cursor-pointer"
           onClick={() => setOpenProfile(!openProfile)}
         >
-          <div className="w-10 h-10 rounded-full border-2 border-blue-500 overflow-hidden">
+          <div className="w-10 h-10 rounded-full border-2 border-blue-500 overflow-hidden relative">
             <Image
               src={
-                infoUser?.avatar
-                  ? `${process.env.NEXT_PUBLIC_IMAGE}/${infoUser.avatar}`
+                currentUserProfile?.avatarUrl
+                  ? `${process.env.NEXT_PUBLIC_IMAGE}${currentUserProfile.avatarUrl}`
                   : icons.avatar
               }
               alt="avatar"
               width={40}
               height={40}
+              className="object-cover h-full w-full"
             />
           </div>
           <p className="hidden md:block text-sm font-semibold text-[#171832]">
-            {infoUser?.fullname || "User admin"}
+            {currentUserProfile?.fullName || "User admin"}
           </p>
           <ChevronDown
             size={16}

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

@@ -67,25 +67,6 @@ const MenuProfile = ({ onClose }: PropsMenuProfile) => {
       </Link>
       <div className="h-px bg-gray-200 my-1" />
 
-      {/* CHANGE PASSWORD */}
-      {/* <Link
-        href={`${PATH.PROFILE}?_action=change-password`}
-        onClick={onClose}
-        className={clsx(
-          "flex items-center gap-3 p-3 rounded-lg hover:bg-gray-100 transition",
-          pathname === PATH.PROFILE &&
-            searchParams.get("_action") === "change-password" &&
-            "bg-gray-100",
-        )}
-      >
-        <ShieldCog size={20} />
-        <div>
-          <p className="text-sm font-medium">Đổi mật khẩu</p>
-          <p className="text-xs text-gray-500">Thay đổi mật khẩu</p>
-        </div>
-      </Link>
-      <div className="h-px bg-gray-200 my-1" /> */}
-
       {/* LOGOUT */}
       <div
         onClick={() => {