From d9c7d9b6ca95829568cb9fa3510b7c1f966ec29f Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Thu, 26 Feb 2026 10:50:02 +0330
Subject: [PATCH] profile in header

---
 src/shared/Header.tsx | 175 ++++++++++++------------------------------
 1 file changed, 51 insertions(+), 124 deletions(-)

diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx
index 8073938..f46ba0c 100644
--- a/src/shared/Header.tsx
+++ b/src/shared/Header.tsx
@@ -1,27 +1,25 @@
-import { type FC, useEffect } from 'react'
+import { type FC, useEffect, useState } from 'react'
 import Input from '@/components/Input'
-import { HambergerMenu, Wallet } from 'iconsax-react'
-// import AvatarImage from '@/assets/images/avatar_image.png'
+import { ArrowDown2, Card, CloseCircle, HambergerMenu, Logout, ProfileCircle, Receipt1, Setting2, TicketDiscount, Wallet } from 'iconsax-react'
+import { Link } from 'react-router-dom'
 import { useLocation } from 'react-router-dom'
 import Notifications from '@/pages/notification/Notification'
 import { useSharedStore } from './store/useSharedStore'
-// import { useGetProfile } from '@/pages/profile/hooks/useProfileData'
-// import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
-//      import SidebarItem from './SidebarItem'
-// import { useGetWalletBalance } from '@/pages/wallet/hooks/useWalletData'
-// import { NumberFormat } from '../config/func'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import SidebarItem from './SidebarItem'
 import { t } from '@/locale'
+import { useGetAdminMe } from '@/pages/admin/hooks/useAdminData'
+import { Paths } from '@/config/Paths'
 
 const Header: FC = () => {
 
     const location = useLocation();
-    // const [popoverKey, setPopoverKey] = useState(0);
+    const [popoverKey, setPopoverKey] = useState(0);
     const { setOpenSidebar, openSidebar } = useSharedStore()
-    // const { data } = useGetProfile()
-    // const getWalletBalance = useGetWalletBalance()
+    const { data } = useGetAdminMe()
 
     useEffect(() => {
-        // setPopoverKey((prevKey) => prevKey + 1);
+        setPopoverKey((prevKey) => prevKey + 1);
     }, [location.pathname]);
 
     return (
@@ -45,125 +43,54 @@ const Header: FC = () => {
                     <Wallet className='xl:size-[18px] size-[17px]' color='black' />
                 </Link>
                 <Link className='hidden xl:block' to={Pages.wallet}> */}
-                <div className='flex items-center h-8 pl-2 rounded-full bg-[#EEF0F7]'>
-                    <div className='px-3 text-xs'>
-                        {/* {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')} */}
-                        20,132
-                    </div>
-                    <div className='size-[26px] flex justify-center items-center bg-white rounded-xl'>
-                        <Wallet className='xl:size-[18px] size-[17px]' color='black' />
-                    </div>
-                </div>
-                {/* </Link> */}
                 <Notifications />
-                {/* {
-                    data && (
-                        <Popover className="relative" key={popoverKey}>
-                            <PopoverButton >
-                                <div className='flex gap-2 items-center mt-2.5'>
-                                    <div className='size-6 rounded-full bg-description overflow-hidden'>
-                                        <img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
-                                    </div>
-                                    <div className='xl:flex hidden gap-1 items-center'>
-                                        <div className='text-xs'>
-                                            {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
-                                        </div>
-                                        <ArrowDown2 size={14} color='#8C90A3' />
-                                    </div>
+                {data?.data && (
+                    <Popover className="relative" key={popoverKey}>
+                        <PopoverButton>
+                            <div className='flex gap-2 items-center mt-2.5'>
+                                <div className='size-6 rounded-full bg-description overflow-hidden flex items-center justify-center text-white text-xs font-medium'>
+                                    {String(data?.data?.firstName ?? '').charAt(0)}{String(data?.data?.lastName ?? '').charAt(0)}
                                 </div>
-                            </PopoverButton>
-
-                            <PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-white boxShadow xl:mt-7  z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
-                                <div className='absolute xl:hidden top-6 left-6'>
-                                    <CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
+                                <div className='xl:flex hidden gap-1 items-center'>
+                                    <div className='text-xs'>
+                                        {data?.data?.firstName + ' ' + data?.data?.lastName}
+                                    </div>
+                                    <ArrowDown2 size={14} color='#8C90A3' />
                                 </div>
-                                <Link to={Pages.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
-                                    <div className='size-14 rounded-full overflow-hidden'>
-                                        <img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
-                                    </div>
+                            </div>
+                        </PopoverButton>
 
-                                    <div>
-                                        {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
-                                    </div>
-
-                                    <div className='text-description'>
-                                        {data?.data?.user?.email}
-                                    </div>
-                                </Link>
-
-                                <div className='pb-6 px-6 border-b border-[#EAEDF5]'>
-                                    <div className='flex justify-between items-center'>
-                                        <SidebarItem
-                                            icon={<Wallet size={20} color='black' />}
-                                            title={t('header.wallet')}
-                                            link={Pages.wallet}
-                                            isActive
-                                            isWithoutLine
-                                        />
-                                        <div className='flex xl:hidden items-center mt-4 h-8 pl-2 rounded-full bg-[#EEF0F7]'>
-                                            <div className='ps-3'>{t('home.balance')}</div>
-                                            <div className='px-3 text-xs'>
-                                                {NumberFormat(getWalletBalance.data?.data?.balance) + ' ' + t('toman')}
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <SidebarItem
-                                        icon={<Card color={'black'} size={20} />}
-                                        title={t('sidebar.transactions')}
-                                        isActive
-                                        link={Pages.transactions}
-                                        isWithoutLine
-                                    />
-
-                                    <SidebarItem
-                                        icon={<TicketDiscount color={'black'} size={20} />}
-                                        title={t('header.discounts')}
-                                        isActive
-                                        link={Pages.discounts}
-                                        isWithoutLine
-                                    />
-
-                                    <SidebarItem
-                                        icon={<Receipt1 color={'black'} size={20} />}
-                                        title={t('header.financial_info')}
-                                        isActive
-                                        link={Pages.financial}
-                                        isWithoutLine
-                                    />
-
-                                    <SidebarItem
-                                        icon={<ProfileCircle color={'black'} size={20} />}
-                                        title={t('header.profile')}
-                                        isActive
-                                        link={Pages.profile}
-                                        isWithoutLine
-                                    />
-
-                                    <SidebarItem
-                                        icon={<Setting2 color={'black'} size={20} />}
-                                        title={t('header.setting')}
-                                        isActive
-                                        link={Pages.setting}
-                                        isWithoutLine
-                                    />
+                        <PopoverPanel style={{ minHeight: window.innerWidth < 1140 ? window.innerHeight : undefined }} anchor="bottom" className="flex xl:ml-6 overflow-auto flex-col gap-3 bg-white boxShadow xl:mt-7 z-30 py-4 text-xs rounded-2.5 xl:w-[300px] -mt-[50px] w-full fixed xl:h-fit h-full shadow-md">
+                            <div className='absolute xl:hidden top-6 left-6'>
+                                <CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
+                            </div>
+                            <Link to={`${Paths.admin.update}${data?.data?.id}`} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
+                                <div className='size-14 rounded-full bg-description flex items-center justify-center text-white text-lg font-medium'>
+                                    {String(data?.data?.firstName ?? '').charAt(0)}{String(data?.data?.lastName ?? '').charAt(0)}
                                 </div>
-
-                                <div className='px-6 -mt-[2px]'>
-                                    <SidebarItem
-                                        icon={<Logout color={'black'} size={20} />}
-                                        title={t('sidebar.logout')}
-                                        isActive
-                                        link={Pages.setting}
-                                        isWithoutLine
-                                        isLogout
-                                    />
+                                <div>
+                                    {data?.data?.firstName + ' ' + data?.data?.lastName}
                                 </div>
+                                <div className='text-description'>
+                                    {String(data?.data?.phone ?? '')}
+                                </div>
+                            </Link>
 
-                            </PopoverPanel>
-                        </Popover>
-                    )
-                } */}
+
+                            <div className='px-6 -mt-[2px]'>
+                                <SidebarItem
+                                    icon={<Logout color={'black'} size={20} />}
+                                    title={t('sidebar.logout')}
+                                    isActive
+                                    link={Paths.auth.login}
+                                    isWithoutLine
+                                    isLogout
+                                    activeName=''
+                                />
+                            </div>
+                        </PopoverPanel>
+                    </Popover>
+                )}
             </div>
         </div>
     )