danak/negareh-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

profile
deploy to danak / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
morteza-mortezai
2026-07-21 16:04:57 +03:30
parent 8c89128dad
commit 71ee8f4575
10 changed files with 222 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/Header.tsx
+19 -82
View File
@@ -1,21 +1,16 @@
import { type FC, useEffect, useState } from 'react'
import { type FC } from 'react'
import Input from '@/components/Input'
import UserAvatar from '@/components/UserAvatar'
import { ArrowDown2, CloseCircle, HambergerMenu, Logout } from 'iconsax-react'
import { HambergerMenu } 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 { 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 { setOpenSidebar, openSidebar } = useSharedStore()
const { data } = useGetAdminMe()
const admin = data?.data
@@ -23,10 +18,6 @@ const Header: FC = () => {
const displayName = [admin?.firstName, admin?.lastName].filter(Boolean).join(' ').trim()
const roleTitle = admin?.role?.title || admin?.role?.name || ''
useEffect(() => {
setPopoverKey((prevKey) => prevKey + 1);
}, [location.pathname]);
return (
<div className='fixed z-10 left-[var(--layout-frame)] right-[var(--layout-frame)] top-[var(--layout-frame)] flex h-[var(--layout-header-height)] items-center justify-between rounded-[32px] bg-white px-6 xl:left-auto xl:right-[calc(var(--layout-frame)+var(--layout-main-offset))] xl:h-[var(--layout-header-height-xl)] xl:w-[calc(100%-(var(--layout-frame)*2)-var(--layout-main-offset))]'>
@@ -39,82 +30,28 @@ const Header: FC = () => {
<div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
<HambergerMenu size={24} color='black' />
</div>
{/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
<div className='flex xl:gap-6 gap-4 items-center'>
{/* <Link to={Pages.services.other}>
<Element3 color='black' className='xl:size-[18px] size-[17px]' />
</Link>
<Link className='xl:hidden' to={Pages.wallet}>
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
</Link>
<Link className='hidden xl:block' to={Pages.wallet}> */}
<Notifications />
{admin && (
<Popover className="relative" key={popoverKey}>
<PopoverButton>
<div className='flex gap-2 items-center mt-2.5'>
<UserAvatar
src={admin.avatarUrl}
firstName={admin.firstName}
lastName={admin.lastName}
className='size-6'
textClassName='text-xs'
/>
<div className='xl:flex hidden gap-1 items-center'>
<div className='flex flex-col items-start'>
<div className='text-xs'>
{displayName || String(admin.phone ?? '')}
</div>
{roleTitle && (
<div className='text-[10px] text-description'>
{roleTitle}
</div>
)}
</div>
<ArrowDown2 size={14} color='#8C90A3' />
</div>
<Link to={Paths.profile} className='flex gap-2 items-center mt-2.5'>
<UserAvatar
src={admin.avatarUrl}
firstName={admin.firstName}
lastName={admin.lastName}
className='size-6'
textClassName='text-xs'
/>
<div className='xl:flex hidden flex-col items-start'>
<div className='text-xs'>
{displayName || String(admin.phone ?? '')}
</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>
<Link to={`${Paths.admin.update}${admin.id}`} className='flex flex-col gap-2 items-center justify-center border-b border-[#EAEDF5] pb-4'>
<UserAvatar
src={admin.avatarUrl}
firstName={admin.firstName}
lastName={admin.lastName}
className='size-14'
textClassName='text-lg'
/>
<div>
{displayName || String(admin.phone ?? '')}
{roleTitle && (
<div className='text-[10px] text-description'>
{roleTitle}
</div>
{roleTitle && (
<div className='text-description'>
{roleTitle}
</div>
)}
<div className='text-description'>
{String(admin.phone ?? '')}
</div>
</Link>
<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>
</Link>
)}
</div>
</div>
src/shared/Sidebar.tsx
+1 -10
View File
@@ -13,7 +13,6 @@ import {
Printer,
Receipt21,
MoneyRecive,
ShieldSecurity,
Teacher,
User,
} from 'iconsax-react';
@@ -128,20 +127,12 @@ const SideBar: FC = () => {
<SideBarItem
icon={<User size={iconSizeSideBar} color="#4F5260" />}
title={'ادمین'}
title={'مدیران'}
isActive={isActive('admin')}
link={Paths.admin.list}
activeName='manage_admins'
/>
<SideBarItem
icon={<ShieldSecurity size={iconSizeSideBar} color="#4F5260" />}
title={'نقش‌ها'}
isActive={isActive('role')}
link={Paths.role.list}
activeName='manage_roles'
/>
<SideBarItem
icon={<ElementEqual size={iconSizeSideBar} color="#4F5260" />}
title={'محصولات'}