base structure
This commit is contained in:
hamid zarghami
@@ -0,0 +1,80 @@
|
||||
import { Home2, Messages3, NotificationStatus, People, Receipt21 } from 'iconsax-react'
|
||||
import { type FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Pages } from '../config/Pages'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
const Footer: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
return (
|
||||
<div className='xl:hidden'>
|
||||
<div className='h-[60px] '></div>
|
||||
<div className='fixed bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
|
||||
<Link to={Pages.dashboard}>
|
||||
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
||||
<Home2
|
||||
className='size-5'
|
||||
color='#8C90A3'
|
||||
/>
|
||||
<div className='text-[10px]'>
|
||||
{t('footer.home')}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={Pages.customer.list}>
|
||||
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
||||
<People
|
||||
className='size-5'
|
||||
color='#8C90A3'
|
||||
/>
|
||||
<div className='text-[10px]'>
|
||||
{t('footer.customers')}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={Pages.receipts.index}>
|
||||
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
||||
<div className='bg-white p-1 rounded-full -mt-7'>
|
||||
<div className='bg-black flex justify-center items-center size-10 rounded-full'>
|
||||
<Receipt21
|
||||
className='size-5'
|
||||
color='white'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-[10px] '>
|
||||
{t('footer.receipts')}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
<Link to={Pages.announcement.list}>
|
||||
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
||||
<NotificationStatus
|
||||
className='size-5'
|
||||
color='#8C90A3'
|
||||
/>
|
||||
<div className='text-[10px]'>
|
||||
{t('footer.announcements')}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link to={Pages.ticket.list}>
|
||||
<div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
|
||||
<Messages3
|
||||
className='size-5'
|
||||
color='#8C90A3'
|
||||
/>
|
||||
<div className='text-[10px]'>
|
||||
{t('footer.tickets')}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@@ -0,0 +1,99 @@
|
||||
import { type FC } from 'react'
|
||||
import Input from '../components/Input'
|
||||
// import { ArrowDown2, CloseCircle, HambergerMenu, Logout, Wallet } from 'iconsax-react'
|
||||
// import AvatarImage from '../assets/images/avatar_image.png'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../config/Pages'
|
||||
import { useSharedStore } from './store/sharedStore'
|
||||
import { HambergerMenu, Wallet } from 'iconsax-react'
|
||||
|
||||
const Header: FC = () => {
|
||||
|
||||
// const location = useLocation();
|
||||
// const [popoverKey, setPopoverKey] = useState(0);
|
||||
const { t } = useTranslation('global')
|
||||
const { setOpenSidebar, openSidebar } = useSharedStore()
|
||||
|
||||
// useEffect(() => {
|
||||
// setPopoverKey((prevKey) => prevKey + 1);
|
||||
// }, [location.pathname]);
|
||||
|
||||
// const handleLogout = () => {
|
||||
// removeToken()
|
||||
// removeRefreshToken()
|
||||
// window.location.href = Pages.auth.login
|
||||
// }
|
||||
|
||||
return (
|
||||
<div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
|
||||
|
||||
<div className='min-w-[270px] hidden xl:block'>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('header.search')}
|
||||
/>
|
||||
</div>
|
||||
<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 className='xl:hidden' to={Pages.wallet}>
|
||||
<Wallet className='xl:size-[18px] size-[17px]' color='black' />
|
||||
</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>
|
||||
</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={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>
|
||||
{data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
|
||||
</div>
|
||||
|
||||
<div className='text-description'>
|
||||
{data?.data?.user?.email}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className='px-6 mt-2'>
|
||||
<div onClick={() => handleLogout()} className='flex gap-2 items-center cursor-pointer'>
|
||||
<Logout size={20} color='black' />
|
||||
<div>
|
||||
{t('sidebar.logout')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</PopoverPanel>
|
||||
</Popover>
|
||||
)
|
||||
} */}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
@@ -0,0 +1,346 @@
|
||||
import { type FC, useEffect } from 'react'
|
||||
import LogoImage from '../assets/images/logo.svg'
|
||||
import LogoSmall from '../assets/images/logo-small.svg'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Message, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } from 'iconsax-react'
|
||||
import SideBarItem from './SideBarItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { Pages } from '../config/Pages'
|
||||
import { useSharedStore } from './store/sharedStore'
|
||||
import { clx } from '../helpers/utils'
|
||||
import ServicesSubMenu from './components/ServicesSubMenu'
|
||||
import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
|
||||
import ReceiptSubMenu from './components/ReceiptSubMenu'
|
||||
import CustomerSubMenu from './components/CustomerSubMenu'
|
||||
import TicketSubMenu from './components/TicketSubMenu'
|
||||
import UsersSubMenu from './components/UsersSubMenu'
|
||||
import LearningSubMenu from './components/LearningSubMenu'
|
||||
import BlogSubMenu from './components/BlogSubMenu'
|
||||
// import { useGetProfile } from '../pages/profile/hooks/useProfileData'
|
||||
import SupportSubMenu from './components/SupportSubMenu'
|
||||
const SideBar: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
|
||||
const location = useLocation()
|
||||
// const { data: profile } = useGetProfile()
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const split = location.pathname.split('/')
|
||||
|
||||
|
||||
if (SideBarItemHasSubMenu.includes(split[1])) {
|
||||
setSubMenuName(split[1])
|
||||
setSubtMenu(true)
|
||||
} else {
|
||||
setSubMenuName('')
|
||||
setSubtMenu(false)
|
||||
}
|
||||
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [location.pathname])
|
||||
|
||||
|
||||
const iconSizeSideBar = 20
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-10' onClick={() => setOpenSidebar(false)} />
|
||||
}
|
||||
<div
|
||||
className={clx(
|
||||
'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100 xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12',
|
||||
openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40',
|
||||
hasSubMenu && 'w-24 !rounded-tl-none !rounded-bl-none'
|
||||
)}
|
||||
>
|
||||
<div className='flex justify-center'>
|
||||
{
|
||||
!hasSubMenu ?
|
||||
<img src={LogoImage} className='w-[140px]' />
|
||||
:
|
||||
<img src={LogoSmall} className='w-7' />
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
|
||||
<div className={clx(
|
||||
'mt-10 px-12 text-header text-sm font-normal',
|
||||
hasSubMenu && 'px-2 text-center'
|
||||
)}>
|
||||
{t('sidebar.menu')}
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.mainpage')}
|
||||
isActive={isActive('dashboard')}
|
||||
link={Pages.dashboard}
|
||||
activeName=''
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Element3 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.services')}
|
||||
isActive={isActive('services')}
|
||||
link={Pages.services.list}
|
||||
name='services'
|
||||
activeName='services'
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Headphone variant={isActive('support') ? 'Bold' : 'Outline'} color={isActive('support') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.support')}
|
||||
isActive={isActive('support')}
|
||||
link={Pages.support.list}
|
||||
activeName='support_plan'
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.customers')}
|
||||
isActive={isActive('customers')}
|
||||
link={Pages.customers.list}
|
||||
activeName='customers'
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<UserSquare variant={isActive('representatives') ? 'Bold' : 'Outline'} color={isActive('representatives') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.representatives')}
|
||||
isActive={isActive('representatives')}
|
||||
link={Pages.representative.list}
|
||||
activeName='agents'
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<CodeCircle variant={isActive('developers') ? 'Bold' : 'Outline'} color={isActive('developers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.developers')}
|
||||
isActive={isActive('developers')}
|
||||
link={Pages.developers.list}
|
||||
activeName='developers'
|
||||
/>
|
||||
|
||||
|
||||
<SideBarItem
|
||||
icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.receipt_list')}
|
||||
isActive={isActive('receipts')}
|
||||
link={Pages.receipts.index}
|
||||
activeName='invoices'
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.transactions')}
|
||||
isActive={isActive('transactions')}
|
||||
link={Pages.transactions}
|
||||
activeName='transactions'
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Money3 variant={isActive('payments') ? 'Bold' : 'Outline'} color={isActive('payments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.payments')}
|
||||
isActive={isActive('payments')}
|
||||
link={Pages.payment.list}
|
||||
activeName='payments'
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.discounts')}
|
||||
isActive={isActive('discounts')}
|
||||
link={Pages.discount.list}
|
||||
activeName='discounts'
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Code variant={isActive('referral-code') ? 'Bold' : 'Outline'} color={isActive('referral-code') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.code_referral')}
|
||||
isActive={isActive('referral-code')}
|
||||
link={Pages.referralCode.list}
|
||||
activeName='referralCode'
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Profile variant={isActive('users') ? 'Bold' : 'Outline'} color={isActive('users') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.users')}
|
||||
isActive={isActive('users')}
|
||||
link={Pages.users.list}
|
||||
activeName='admins'
|
||||
/>
|
||||
<SideBarItem
|
||||
icon={<Gallery variant={isActive('sliders') ? 'Bold' : 'Outline'} color={isActive('sliders') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.sliders')}
|
||||
isActive={isActive('sliders')}
|
||||
link={Pages.sliders.list}
|
||||
activeName='blogs'
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Message variant={isActive('feedback') ? 'Bold' : 'Outline'} color={isActive('feedback') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.feedback')}
|
||||
isActive={isActive('feedback')}
|
||||
link={Pages.feedback.list}
|
||||
activeName='services'
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
{/* {
|
||||
profile?.data?.user?.roles.some((role: { name: string }) => role.name === 'super_admin') &&
|
||||
<div className={clx(
|
||||
'mt-10 px-12 text-header text-sm font-normal',
|
||||
hasSubMenu && 'px-2 text-center'
|
||||
)}>
|
||||
{t('sidebar.other')}
|
||||
</div>
|
||||
} */}
|
||||
|
||||
|
||||
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.ticket')}
|
||||
isActive={isActive('tickets')}
|
||||
link={Pages.ticket.list}
|
||||
activeName='tickets'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.criticisms')}
|
||||
isActive={isActive('criticisms')}
|
||||
link={Pages.criticisms.list}
|
||||
activeName='criticisms'
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* {
|
||||
profile?.data?.user?.roles?.some((role: { name: string }) => role.name === 'super_admin') &&
|
||||
<div className={clx(
|
||||
'mt-10 px-12 text-header text-sm font-normal',
|
||||
hasSubMenu && 'px-2 text-center text-xs'
|
||||
)}>
|
||||
{t('sidebar.mnage_content')}
|
||||
</div>
|
||||
} */}
|
||||
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<DocumentLike variant={isActive('ads') ? 'Bold' : 'Outline'} color={isActive('ads') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.ads')}
|
||||
isActive={isActive('ads')}
|
||||
link={Pages.ads.list}
|
||||
activeName='advertisements'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.announcement')}
|
||||
isActive={isActive('announcement')}
|
||||
link={Pages.announcement.list}
|
||||
activeName='announcements'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<DocumentText variant={isActive('blog') ? 'Bold' : 'Outline'} color={isActive('blog') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.blog')}
|
||||
isActive={isActive('blog')}
|
||||
link={Pages.blog.list}
|
||||
activeName='blogs'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.learning')}
|
||||
isActive={isActive('learning')}
|
||||
link={Pages.learning.list}
|
||||
activeName='learnings'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<SmsTracking variant={isActive('messages') ? 'Bold' : 'Outline'} color={isActive('messages') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.messages')}
|
||||
isActive={isActive('messages')}
|
||||
link={Pages.messages.list}
|
||||
activeName='contacts_us'
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className='flex-1 flex flex-col justify-end mt-14'>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Card variant={isActive('card') ? 'Bold' : 'Outline'} color={isActive('card') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.card')}
|
||||
isActive={isActive('card')}
|
||||
link={Pages.cardBank.list}
|
||||
activeName='bank_accounts'
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.setting')}
|
||||
isActive={isActive('setting')}
|
||||
link={Pages.setting}
|
||||
activeName='settings'
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.logout')}
|
||||
isActive={isActive('logout')}
|
||||
link={`#`}
|
||||
isLogout
|
||||
activeName=''
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
hasSubMenu && (openSidebar || window.innerWidth > 1139) &&
|
||||
<div className='fixed xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r'>
|
||||
{
|
||||
subMenuName === 'services' ?
|
||||
<ServicesSubMenu />
|
||||
: subMenuName === 'receipts' ?
|
||||
<ReceiptSubMenu />
|
||||
: subMenuName === 'customers' ?
|
||||
<CustomerSubMenu />
|
||||
: subMenuName === 'tickets' ?
|
||||
<TicketSubMenu />
|
||||
: subMenuName === 'users' ?
|
||||
<UsersSubMenu />
|
||||
: subMenuName === 'learning' ?
|
||||
<LearningSubMenu />
|
||||
: subMenuName === 'blog' ?
|
||||
<BlogSubMenu />
|
||||
: subMenuName === 'support' ?
|
||||
<SupportSubMenu />
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SideBar
|
||||
@@ -0,0 +1,63 @@
|
||||
import { type FC, type ReactNode } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { clx } from '../helpers/utils'
|
||||
import { Pages } from '../config/Pages'
|
||||
import { useSharedStore } from './store/sharedStore'
|
||||
import { removeToken, removeRefreshToken } from '../config/func'
|
||||
// import { useGetAdminPermissions } from '../pages/users/hooks/useUserData'
|
||||
|
||||
type Props = {
|
||||
icon: ReactNode,
|
||||
title: string,
|
||||
isActive: boolean,
|
||||
link: string,
|
||||
isLogout?: boolean,
|
||||
name?: string,
|
||||
activeName?: string
|
||||
}
|
||||
|
||||
const SideBarItem: FC<Props> = (props: Props) => {
|
||||
|
||||
const { hasSubMenu, setSubMenuName, setSubtMenu } = useSharedStore()
|
||||
// const { data: adminPermissions } = useGetAdminPermissions()
|
||||
const handleLogout = () => {
|
||||
removeToken()
|
||||
removeRefreshToken()
|
||||
window.location.href = Pages.auth.login
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
if (props.name) {
|
||||
setSubMenuName(props.name)
|
||||
setSubtMenu(true)
|
||||
}
|
||||
}
|
||||
// if (props.activeName === '' || props.activeName && adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === props.activeName)) {
|
||||
if (true) {
|
||||
return (
|
||||
<Link onClick={props.isLogout ? handleLogout : handleClick} to={props.link} className={clx(
|
||||
'flex text-xs gap-9 mt-4',
|
||||
hasSubMenu && 'flex-col',
|
||||
)}>
|
||||
<div className={clx(
|
||||
'w-1 bg-black h-6',
|
||||
!props.isActive && 'invisible',
|
||||
hasSubMenu && 'hidden',
|
||||
)}></div>
|
||||
<div className={clx(
|
||||
'flex gap-3 items-center',
|
||||
hasSubMenu && 'flex-col text-[10px]',
|
||||
)}>
|
||||
{props.icon}
|
||||
<div className={props.isActive ? 'text-black' : ''}>
|
||||
{props.title}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default SideBarItem
|
||||
@@ -0,0 +1,50 @@
|
||||
import { DocumentText } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import SubMenuItem from './SubMenuItem'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const BlogSubMenu: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='py-12'>
|
||||
<div className='flex gap-3 items-center border-b pb-10 px-6'>
|
||||
<DocumentText
|
||||
size={24}
|
||||
color='#000'
|
||||
variant='Bold'
|
||||
/>
|
||||
<div className='text-xs'>
|
||||
{t('sidebar.blog')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-10 gap-4'>
|
||||
<SubMenuItem
|
||||
title={'لیست'}
|
||||
isActive={isActive('list')}
|
||||
link={Pages.blog.list}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={'دسته بندی'}
|
||||
isActive={isActive('create')}
|
||||
link={Pages.blog.category}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={'نظرات'}
|
||||
isActive={isActive('comments')}
|
||||
link={Pages.blog.comments}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogSubMenu
|
||||
@@ -0,0 +1,45 @@
|
||||
import { People } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import SubMenuItem from './SubMenuItem'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const CustomerSubMenu: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='py-12'>
|
||||
<div className='flex gap-3 items-center border-b pb-10 px-6'>
|
||||
<People
|
||||
size={24}
|
||||
color='#000'
|
||||
variant='Bold'
|
||||
/>
|
||||
<div className='text-xs'>
|
||||
{t('sidebar.customers')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-10 gap-4'>
|
||||
<SubMenuItem
|
||||
title={t('submenu.customer_list')}
|
||||
isActive={isActive('list')}
|
||||
link={Pages.customer.list}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('submenu.create_customer')}
|
||||
isActive={isActive('create')}
|
||||
link={Pages.customer.create}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CustomerSubMenu
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Teacher } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import SubMenuItem from './SubMenuItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const LearningSubMenu: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const location = useLocation()
|
||||
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='py-12'>
|
||||
<div className='flex gap-3 items-center border-b pb-10 px-6'>
|
||||
<Teacher
|
||||
size={24}
|
||||
color='#000'
|
||||
variant='Bold'
|
||||
/>
|
||||
<div className='text-xs'>
|
||||
{t('sidebar.learning')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-10 gap-4'>
|
||||
<SubMenuItem
|
||||
title={t('learning.learnings')}
|
||||
isActive={isActive('list')}
|
||||
link={Pages.learning.list}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('learning.new_learning')}
|
||||
isActive={isActive('create')}
|
||||
link={Pages.learning.create}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('learning.category_learning')}
|
||||
isActive={isActive('category')}
|
||||
link={Pages.learning.category}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LearningSubMenu
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Receipt21 } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import SubMenuItem from './SubMenuItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const ReceiptSubMenu: FC = () => {
|
||||
|
||||
const location = useLocation()
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='py-12'>
|
||||
<div className='flex gap-3 items-center border-b pb-10 px-6'>
|
||||
<Receipt21
|
||||
size={24}
|
||||
color='#000'
|
||||
variant='Bold'
|
||||
/>
|
||||
<div className='text-xs'>
|
||||
{t('receip.receips')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-10 gap-4'>
|
||||
<SubMenuItem
|
||||
title={t('receip.receip_list')}
|
||||
isActive={isActive('list')}
|
||||
link={Pages.receipts.index}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('receip.add_receip')}
|
||||
isActive={isActive('create')}
|
||||
link={Pages.receipts.create}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ReceiptSubMenu
|
||||
@@ -0,0 +1,57 @@
|
||||
import { Element3 } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import SubMenuItem from './SubMenuItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const ServicesSubMenu: FC = () => {
|
||||
|
||||
const location = useLocation()
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='py-12'>
|
||||
<div className='flex gap-3 items-center border-b pb-10 px-6'>
|
||||
<Element3
|
||||
size={24}
|
||||
color='#000'
|
||||
variant='Bold'
|
||||
/>
|
||||
<div className='text-xs'>
|
||||
{t('sidebar.services')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-10 gap-4'>
|
||||
<SubMenuItem
|
||||
title={t('submenu.services_list')}
|
||||
isActive={isActive('list')}
|
||||
link={Pages.services.list}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('submenu.add_service')}
|
||||
isActive={isActive('add')}
|
||||
link={Pages.services.add}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('submenu.service_category')}
|
||||
isActive={isActive('category')}
|
||||
link={Pages.services.category}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('submenu.reviews')}
|
||||
isActive={isActive('reviews')}
|
||||
link={Pages.services.review}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ServicesSubMenu
|
||||
@@ -0,0 +1,33 @@
|
||||
import { FC } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { clx } from '../../helpers/utils'
|
||||
|
||||
type Props = {
|
||||
title: string,
|
||||
isActive: boolean,
|
||||
link: string,
|
||||
isLogout?: boolean,
|
||||
}
|
||||
|
||||
const SubMenuItem: FC<Props> = (props: Props) => {
|
||||
return (
|
||||
<Link to={props.link} className={clx(
|
||||
'flex text-xs gap-6 mt-1',
|
||||
)}>
|
||||
<div className={clx(
|
||||
'w-1 bg-black h-6',
|
||||
!props.isActive && 'invisible',
|
||||
)}></div>
|
||||
<div className={clx(
|
||||
'flex gap-3 items-center mt-1',
|
||||
)}>
|
||||
<div className={props.isActive ? 'text-black' : 'text-description'}>
|
||||
{props.title}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export default SubMenuItem
|
||||
@@ -0,0 +1,47 @@
|
||||
import { Headphone } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import SubMenuItem from './SubMenuItem'
|
||||
|
||||
const SupportSubMenu: FC = () => {
|
||||
|
||||
const location = useLocation()
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
|
||||
|
||||
return <div className='py-12'>
|
||||
<div className='flex gap-3 items-center border-b pb-10 px-6'>
|
||||
<Headphone
|
||||
size={24}
|
||||
color='#000'
|
||||
variant='Bold'
|
||||
/>
|
||||
<div className='text-xs'>
|
||||
{t('sidebar.support')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-10 gap-4'>
|
||||
<SubMenuItem
|
||||
title={t('submenu.plan_list')}
|
||||
isActive={isActive('list')}
|
||||
link={Pages.support.list}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('submenu.create_plan')}
|
||||
isActive={isActive('create')}
|
||||
link={Pages.support.create}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
export default SupportSubMenu
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Messages3 } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import SubMenuItem from './SubMenuItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const TicketSubMenu: FC = () => {
|
||||
|
||||
const location = useLocation()
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='py-12'>
|
||||
<div className='flex gap-3 items-center border-b pb-10 px-6'>
|
||||
<Messages3
|
||||
size={24}
|
||||
color='#000'
|
||||
variant='Bold'
|
||||
/>
|
||||
<div className='text-xs'>
|
||||
{t('sidebar.ticket')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-10 gap-4'>
|
||||
<SubMenuItem
|
||||
title={t('submenu.ticket_list')}
|
||||
isActive={isActive('list')}
|
||||
link={Pages.ticket.list}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('submenu.send_ticket')}
|
||||
isActive={isActive('create')}
|
||||
link={Pages.ticket.create}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('submenu.category')}
|
||||
isActive={isActive('category')}
|
||||
link={Pages.ticket.category}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TicketSubMenu
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Card } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import SubMenuItem from './SubMenuItem'
|
||||
|
||||
const TransactionsSubMenu: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='py-12'>
|
||||
<div className='flex gap-3 items-center border-b pb-10 px-6'>
|
||||
<Card
|
||||
size={24}
|
||||
color='#000'
|
||||
variant='Bold'
|
||||
/>
|
||||
<div className='text-xs'>
|
||||
{t('sidebar.transactions')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-10 gap-4'>
|
||||
<SubMenuItem
|
||||
title={t('sidebar.services')}
|
||||
isActive={isActive('services')}
|
||||
link='/services'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TransactionsSubMenu
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Profile } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import SubMenuItem from './SubMenuItem'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const UsersSubMenu: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
|
||||
const isActive = (name: string) => {
|
||||
return location.pathname.includes(name)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='py-12'>
|
||||
<div className='flex gap-3 items-center border-b pb-10 px-6'>
|
||||
<Profile
|
||||
size={24}
|
||||
color='#000'
|
||||
variant='Bold'
|
||||
/>
|
||||
<div className='text-xs'>
|
||||
{t('sidebar.users')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col mt-10 gap-4'>
|
||||
<SubMenuItem
|
||||
title={t('submenu.user_list')}
|
||||
isActive={isActive('list')}
|
||||
link={Pages.users.list}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('submenu.add_user')}
|
||||
isActive={isActive('create')}
|
||||
link={Pages.users.create}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('submenu.role_list')}
|
||||
isActive={isActive('all')}
|
||||
link={Pages.users.roleList}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('submenu.role_create')}
|
||||
isActive={isActive('roles-add')}
|
||||
link={Pages.users.roleCreate}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('user.add_user_group')}
|
||||
isActive={isActive('group-add')}
|
||||
link={Pages.users.groupAdd}
|
||||
/>
|
||||
<SubMenuItem
|
||||
title={t('user.list_user_group')}
|
||||
isActive={isActive('groups')}
|
||||
link={Pages.users.groupList}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UsersSubMenu
|
||||
@@ -0,0 +1,11 @@
|
||||
import { create } from "zustand";
|
||||
import { type SharedStoreType } from "../types/SharedTypes";
|
||||
|
||||
export const useSharedStore = create<SharedStoreType>((set) => ({
|
||||
openSidebar: false,
|
||||
setOpenSidebar: (value) => set({ openSidebar: value }),
|
||||
hasSubMenu: false,
|
||||
setSubtMenu: (value: boolean) => set({ hasSubMenu: value }),
|
||||
subMenuName: "",
|
||||
setSubMenuName: (value: string) => set({ subMenuName: value }),
|
||||
}));
|
||||
@@ -0,0 +1,8 @@
|
||||
export type SharedStoreType = {
|
||||
openSidebar: boolean;
|
||||
setOpenSidebar: (value: boolean) => void;
|
||||
hasSubMenu: boolean;
|
||||
setSubtMenu: (value: boolean) => void;
|
||||
subMenuName: string;
|
||||
setSubMenuName: (value: string) => void;
|
||||
};
|
||||
Reference in New Issue
Block a user