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

request list + structure

Browse Source
This commit is contained in:
hamid zarghami
2025-10-20 12:28:48 +03:30
commit dbe37e371e
89 changed files with 9547 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/Header.tsx
+172
View File
@@ -0,0 +1,172 @@
import { type FC, useEffect } from 'react'
import Input from '@/components/Input'
import { HambergerMenu, Wallet } from 'iconsax-react'
// import AvatarImage from '@/assets/images/avatar_image.png'
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 { t } from '@/locale'
const Header: FC = () => {
const location = useLocation();
// const [popoverKey, setPopoverKey] = useState(0);
const { setOpenSidebar, openSidebar } = useSharedStore()
// const { data } = useGetProfile()
// const getWalletBalance = useGetWalletBalance()
useEffect(() => {
// setPopoverKey((prevKey) => prevKey + 1);
}, [location.pathname]);
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 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}> */}
<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>
</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='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 className='px-6 -mt-[2px]'>
<SidebarItem
icon={<Logout color={'black'} size={20} />}
title={t('sidebar.logout')}
isActive
link={Pages.setting}
isWithoutLine
isLogout
/>
</div>
</PopoverPanel>
</Popover>
)
} */}
</div>
</div>
)
}
export default Header
src/shared/Sidebar.tsx
+135
View File
@@ -0,0 +1,135 @@
import { type FC } from 'react'
import LogoImage from '@/assets/images/logo.svg'
import { AddSquare, DocumentText, Element3, Home2, Messages3, NotificationStatus, Receipt21, Teacher } from 'iconsax-react'
import SideBarItem from './SidebarItem'
import { useLocation } from 'react-router-dom'
import { Paths } from '../config/Paths'
import { useSharedStore } from './store/useSharedStore'
import { clx } from '../helpers/utils'
import { t } from '../locale'
import Button from '@/components/Button'
const SideBar: FC = () => {
const { openSidebar, setOpenSidebar } = useSharedStore()
const location = useLocation()
const isActive = (name: string) => {
return location.pathname.includes(name)
}
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-[240px] bg-white flex-col py-12',
openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
)}
>
<div className='px-6'>
<div className='flex border-b-2 border-border pb-10'>
<img src={LogoImage} className='w-[120px]' />
</div>
</div>
<div className='flex-1 h-full overflow-y-auto no-scrollbar px-6'>
<div className='mt-10 text-description px-6 text-header text-sm font-bold'>
{t('sidebar.menu')}
</div>
<div className='mt-3'>
<SideBarItem
icon={<Home2 size={iconSizeSideBar} color='#4F5260' />}
title={t('sidebar.mainPage')}
isActive={isActive('/home')}
link={Paths.home}
/>
<SideBarItem
icon={<Element3 size={iconSizeSideBar} color='#4F5260' />}
title={t('sidebar.myOrders')}
isActive={isActive('/my-orders')}
link={Paths.myOrders}
/>
<SideBarItem
icon={<Receipt21 size={iconSizeSideBar} color='#4F5260' />}
title={t('sidebar.preFactors')}
isActive={isActive('/proforma-invoice')}
link={Paths.proformaInvoice}
/>
</div>
<div className='mt-10 px-6 text-description text-sm font-bold'>
{t('sidebar.other')}
</div>
<div className='mt-3'>
<SideBarItem
icon={<Messages3 size={iconSizeSideBar} color='#4F5260' />}
title={t('sidebar.tickets')}
isActive={isActive('/tickets')}
link={Paths.tickets.list}
/>
<SideBarItem
icon={<NotificationStatus size={iconSizeSideBar} color='#4F5260' />}
title={t('sidebar.announcement')}
isActive={isActive('/announcement')}
link={Paths.announcement.list}
/>
<SideBarItem
icon={<DocumentText size={iconSizeSideBar} color='#4F5260' />}
title={t('sidebar.criticisms')}
isActive={isActive('/criticisms')}
link={Paths.criticisms}
/>
<SideBarItem
icon={<Teacher size={iconSizeSideBar} color='#4F5260' />}
title={t('sidebar.learning')}
isActive={isActive('/learning')}
link={Paths.learning}
/>
</div>
<div className='flex-1 items-end mt-14 pb-8'>
<div className='bg-[#F5F7FC] rounded-2xl p-4 text-center'>
<div className='text-[15px] font-medium'>{t('sidebar.submitYourOrder')}</div>
<div className='mt-2.5 text-[13px] text-[#7B7E8B]'>{t('sidebar.submitYourOrderDescription')}</div>
<Button
className='flex items-center mt-2.5'
>
<div className='flex gap-1'>
<AddSquare size={iconSizeSideBar} color='black' />
<div>{t('sidebar.newOrder')}</div>
</div>
</Button>
</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
/>
</div> */}
</div>
</div>
</div>
</>
)
}
export default SideBar
src/shared/SidebarItem.tsx
+45
View File
@@ -0,0 +1,45 @@
import type { FC, ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { clx } from '../helpers/utils'
import { Paths } from '../config/Paths'
// import { useLogout } from '../pages/auth/hooks/useAuthData'
import { removeToken } from '../config/func'
import { removeRefreshToken } from '../config/func'
type Props = {
icon: ReactNode,
title: string,
isActive: boolean,
link: string,
isLogout?: boolean,
isWithoutLine?: boolean
}
const SideBarItem: FC<Props> = (props: Props) => {
// const logout = useLogout()
const handleLogout = async () => {
// await logout.mutateAsync()
removeToken()
removeRefreshToken()
window.location.href = Paths.auth.login
}
return (
<Link onClick={props.isLogout ? handleLogout : undefined} to={props.link} className={clx(
'h-12 rounded-2xl flex gap-2 text-[#4F5260] px-4 text-[13px] items-center',
props.isActive && 'bg-[#F5F7FC]',
)}>
<div className='flex gap-3 items-center'>
{props.icon}
<div className={`text-[#4F5260]`}>
{props.title}
</div>
</div>
</Link>
)
}
export default SideBarItem
src/shared/store/useSharedStore.ts
+15
View File
@@ -0,0 +1,15 @@
import { create } from "zustand";
import { persist } from "zustand/middleware";
import type { SharedStoreType } from "../types/Types";
export const useSharedStore = create<SharedStoreType>()(
persist(
(set): SharedStoreType => ({
openSidebar: false,
setOpenSidebar: (open) => set({ openSidebar: open }),
}),
{
name: "negareh-share-store",
}
)
);
src/shared/toast.ts
+21
View File
@@ -0,0 +1,21 @@
interface Toast {
id: string;
message: string;
type?: "success" | "error" | "info";
isExiting?: boolean;
}
let addToast: (toast: Toast) => void;
export const toast = (
message?: string,
type: "success" | "error" | "info" = "info"
) => {
if (addToast) {
addToast({ id: Date.now().toString(), message: message || "", type });
}
};
export const setAddToast = (fn: (toast: Toast) => void) => {
addToast = fn;
};
src/shared/types/Types.ts
+4
View File
@@ -0,0 +1,4 @@
export type SharedStoreType = {
openSidebar: boolean;
setOpenSidebar: (open: boolean) => void;
};