profile in header
This commit is contained in:
hamid zarghami
+51
-124
@@ -1,27 +1,25 @@
|
|||||||
import { type FC, useEffect } from 'react'
|
import { type FC, useEffect, useState } from 'react'
|
||||||
import Input from '@/components/Input'
|
import Input from '@/components/Input'
|
||||||
import { HambergerMenu, Wallet } from 'iconsax-react'
|
import { ArrowDown2, Card, CloseCircle, HambergerMenu, Logout, ProfileCircle, Receipt1, Setting2, TicketDiscount, Wallet } from 'iconsax-react'
|
||||||
// import AvatarImage from '@/assets/images/avatar_image.png'
|
import { Link } from 'react-router-dom'
|
||||||
import { useLocation } from 'react-router-dom'
|
import { useLocation } from 'react-router-dom'
|
||||||
import Notifications from '@/pages/notification/Notification'
|
import Notifications from '@/pages/notification/Notification'
|
||||||
import { useSharedStore } from './store/useSharedStore'
|
import { useSharedStore } from './store/useSharedStore'
|
||||||
// import { useGetProfile } from '@/pages/profile/hooks/useProfileData'
|
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
|
||||||
// import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
|
import SidebarItem from './SidebarItem'
|
||||||
// import SidebarItem from './SidebarItem'
|
|
||||||
// import { useGetWalletBalance } from '@/pages/wallet/hooks/useWalletData'
|
|
||||||
// import { NumberFormat } from '../config/func'
|
|
||||||
import { t } from '@/locale'
|
import { t } from '@/locale'
|
||||||
|
import { useGetAdminMe } from '@/pages/admin/hooks/useAdminData'
|
||||||
|
import { Paths } from '@/config/Paths'
|
||||||
|
|
||||||
const Header: FC = () => {
|
const Header: FC = () => {
|
||||||
|
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
// const [popoverKey, setPopoverKey] = useState(0);
|
const [popoverKey, setPopoverKey] = useState(0);
|
||||||
const { setOpenSidebar, openSidebar } = useSharedStore()
|
const { setOpenSidebar, openSidebar } = useSharedStore()
|
||||||
// const { data } = useGetProfile()
|
const { data } = useGetAdminMe()
|
||||||
// const getWalletBalance = useGetWalletBalance()
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// setPopoverKey((prevKey) => prevKey + 1);
|
setPopoverKey((prevKey) => prevKey + 1);
|
||||||
}, [location.pathname]);
|
}, [location.pathname]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -45,125 +43,54 @@ const Header: FC = () => {
|
|||||||
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
|
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
|
||||||
</Link>
|
</Link>
|
||||||
<Link className='hidden xl:block' to={Pages.wallet}> */}
|
<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 />
|
<Notifications />
|
||||||
{/* {
|
{data?.data && (
|
||||||
data && (
|
<Popover className="relative" key={popoverKey}>
|
||||||
<Popover className="relative" key={popoverKey}>
|
<PopoverButton>
|
||||||
<PopoverButton >
|
<div className='flex gap-2 items-center mt-2.5'>
|
||||||
<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'>
|
||||||
<div className='size-6 rounded-full bg-description overflow-hidden'>
|
{String(data?.data?.firstName ?? '').charAt(0)}{String(data?.data?.lastName ?? '').charAt(0)}
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</PopoverButton>
|
<div className='xl:flex hidden gap-1 items-center'>
|
||||||
|
<div className='text-xs'>
|
||||||
<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">
|
{data?.data?.firstName + ' ' + data?.data?.lastName}
|
||||||
<div className='absolute xl:hidden top-6 left-6'>
|
</div>
|
||||||
<CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
|
<ArrowDown2 size={14} color='#8C90A3' />
|
||||||
</div>
|
</div>
|
||||||
<Link to={Pages.profile} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
|
</div>
|
||||||
<div className='size-14 rounded-full overflow-hidden'>
|
</PopoverButton>
|
||||||
<img src={data?.data?.user?.profilePic ? data?.data?.user?.profilePic : AvatarImage} className='size-full object-cover' />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<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">
|
||||||
{data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
|
<div className='absolute xl:hidden top-6 left-6'>
|
||||||
</div>
|
<CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
|
||||||
|
</div>
|
||||||
<div className='text-description'>
|
<Link to={`${Paths.admin.update}${data?.data?.id}`} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
|
||||||
{data?.data?.user?.email}
|
<div className='size-14 rounded-full bg-description flex items-center justify-center text-white text-lg font-medium'>
|
||||||
</div>
|
{String(data?.data?.firstName ?? '').charAt(0)}{String(data?.data?.lastName ?? '').charAt(0)}
|
||||||
</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
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
<div className='px-6 -mt-[2px]'>
|
{data?.data?.firstName + ' ' + data?.data?.lastName}
|
||||||
<SidebarItem
|
|
||||||
icon={<Logout color={'black'} size={20} />}
|
|
||||||
title={t('sidebar.logout')}
|
|
||||||
isActive
|
|
||||||
link={Pages.setting}
|
|
||||||
isWithoutLine
|
|
||||||
isLogout
|
|
||||||
/>
|
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user