+24
-7
@@ -17,6 +17,11 @@ const Header: FC = () => {
|
|||||||
const [popoverKey, setPopoverKey] = useState(0);
|
const [popoverKey, setPopoverKey] = useState(0);
|
||||||
const { setOpenSidebar, openSidebar } = useSharedStore()
|
const { setOpenSidebar, openSidebar } = useSharedStore()
|
||||||
const { data } = useGetAdminMe()
|
const { data } = useGetAdminMe()
|
||||||
|
const admin = data?.data
|
||||||
|
|
||||||
|
const displayName = [admin?.firstName, admin?.lastName].filter(Boolean).join(' ').trim()
|
||||||
|
const roleTitle = admin?.role?.title || admin?.role?.name || ''
|
||||||
|
const initials = `${String(admin?.firstName ?? '').charAt(0)}${String(admin?.lastName ?? '').charAt(0)}`
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setPopoverKey((prevKey) => prevKey + 1);
|
setPopoverKey((prevKey) => prevKey + 1);
|
||||||
@@ -44,16 +49,23 @@ const Header: FC = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
<Link className='hidden xl:block' to={Pages.wallet}> */}
|
<Link className='hidden xl:block' to={Pages.wallet}> */}
|
||||||
<Notifications />
|
<Notifications />
|
||||||
{data?.data && (
|
{admin && (
|
||||||
<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 flex items-center justify-center text-white text-xs font-medium'>
|
||||||
{String(data?.data?.firstName ?? '').charAt(0)}{String(data?.data?.lastName ?? '').charAt(0)}
|
{initials}
|
||||||
</div>
|
</div>
|
||||||
<div className='xl:flex hidden gap-1 items-center'>
|
<div className='xl:flex hidden gap-1 items-center'>
|
||||||
|
<div className='flex flex-col items-start'>
|
||||||
<div className='text-xs'>
|
<div className='text-xs'>
|
||||||
{data?.data?.firstName + ' ' + data?.data?.lastName}
|
{displayName || admin.phone}
|
||||||
|
</div>
|
||||||
|
{roleTitle && (
|
||||||
|
<div className='text-[10px] text-description'>
|
||||||
|
{roleTitle}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<ArrowDown2 size={14} color='#8C90A3' />
|
<ArrowDown2 size={14} color='#8C90A3' />
|
||||||
</div>
|
</div>
|
||||||
@@ -64,15 +76,20 @@ const Header: FC = () => {
|
|||||||
<div className='absolute xl:hidden top-6 left-6'>
|
<div className='absolute xl:hidden top-6 left-6'>
|
||||||
<CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
|
<CloseCircle onClick={() => setPopoverKey((prevKey) => prevKey + 1)} size={20} color='black' />
|
||||||
</div>
|
</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'>
|
<Link to={`${Paths.admin.update}${admin.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'>
|
<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)}
|
{initials}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{data?.data?.firstName + ' ' + data?.data?.lastName}
|
{displayName || admin.phone}
|
||||||
</div>
|
</div>
|
||||||
|
{roleTitle && (
|
||||||
<div className='text-description'>
|
<div className='text-description'>
|
||||||
{String(data?.data?.phone ?? '')}
|
{roleTitle}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className='text-description'>
|
||||||
|
{String(admin.phone ?? '')}
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user