+
+ {label ? (
+
+ {label}
+
+ ) : null}
+
+
+ )
+}
+
+export default Divider
+
diff --git a/src/components/Error.tsx b/src/components/Error.tsx
new file mode 100644
index 0000000..dc6aeac
--- /dev/null
+++ b/src/components/Error.tsx
@@ -0,0 +1,15 @@
+import { type FC } from 'react'
+
+type Props = {
+ errorText: string
+}
+
+const Error: FC
+ {props.errorText}
+
+ )
+}
+
+export default Error
\ No newline at end of file
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..656e9b0
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,124 @@
+import { type FC, type InputHTMLAttributes, useEffect, useState } from 'react'
+import { clx } from '../helpers/utils';
+import { Eye, EyeSlash, SearchNormal } from 'iconsax-react';
+import Error from './Error';
+
+type Variant = "floating_outlined" | "primary" | "search";
+
+type Props = {
+ label?: string;
+ className?: string;
+ variant?: Variant;
+ error_text?: string;
+ onEnter?: () => void;
+ unit?: string;
+ seprator?: boolean;
+ isNotRequired?: boolean;
+ onChangeSearchFinal?: (value: string) => void;
+} & InputHTMLAttributes
+
+
+
+ )
+}
+
+export default Input
\ No newline at end of file
diff --git a/src/config/Paths.ts b/src/config/Paths.ts
new file mode 100644
index 0000000..4015b07
--- /dev/null
+++ b/src/config/Paths.ts
@@ -0,0 +1,4 @@
+export const Paths = {
+ home: "/",
+ editor: "/editor",
+};
diff --git a/src/helpers/func.ts b/src/helpers/func.ts
new file mode 100644
index 0000000..3a11d9b
--- /dev/null
+++ b/src/helpers/func.ts
@@ -0,0 +1,27 @@
+export const formatDate = (dateString: string): string => {
+ const date = new Date(dateString);
+ return new Intl.DateTimeFormat("fa-IR", {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ hour: "2-digit",
+ minute: "2-digit",
+ }).format(date);
+};
+
+export const formatDateShort = (dateString: string): string => {
+ const date = new Date(dateString);
+ return new Intl.DateTimeFormat("fa-IR", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ }).format(date);
+};
+
+export const formatPrice = (price: number): string => {
+ return new Intl.NumberFormat("fa-IR", {
+ style: "decimal",
+ minimumFractionDigits: 0,
+ maximumFractionDigits: 0,
+ }).format(price);
+};
diff --git a/src/helpers/types.ts b/src/helpers/types.ts
new file mode 100644
index 0000000..c800121
--- /dev/null
+++ b/src/helpers/types.ts
@@ -0,0 +1,29 @@
+type Without
+ {
+ setSearch(e.target.value)
+ handleInputChange(e)
+ }} value={props.seprator ? formattedValue : props.value} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
+
+ {
+ props.type === 'password' &&
+
+ }
+
+ {
+ props.variant === 'search' &&
+
+
+
+ )
+}
+
+export default Editor
\ No newline at end of file
diff --git a/src/pages/editor/components/EditorSidebar.tsx b/src/pages/editor/components/EditorSidebar.tsx
new file mode 100644
index 0000000..ca8e198
--- /dev/null
+++ b/src/pages/editor/components/EditorSidebar.tsx
@@ -0,0 +1,30 @@
+
+import Logo from "@/assets/images/logo.svg";
+import { clx } from "@/helpers/utils";
+import { useSharedStore } from "@/shared/store/sharedStore";
+
+const EditorSidebar = () => {
+ const { openSidebar, setOpenSidebar } = useSharedStore();
+
+ return (
+ <>
+ {openSidebar ? (
+ setOpenSidebar(false)} />
+ ) : null}
+
+
+ );
+};
+
+export default EditorSidebar;
+
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
new file mode 100644
index 0000000..b52e216
--- /dev/null
+++ b/src/pages/home/Home.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Home = () => {
+ return (
+ = {
+ default: {
+ base: 'xl:right-[285px] xl:w-[calc(100%-305px)]',
+ withSub: 'xl:right-[320px] xl:w-[calc(100%-340px)]',
+ },
+ wide: {
+ base: 'xl:right-[390px] xl:w-[calc(100%-406px)]',
+ withSub: 'xl:right-[425px] xl:w-[calc(100%-441px)]',
+ },
+}
+
+const Header: FC = ({ hasMainSidebar = true, sidebarSize = 'default' }) => {
+
+ // const location = useLocation();
+ // const [popoverKey, setPopoverKey] = useState(0);
+ const { t } = useTranslation('global')
+ const { setOpenSidebar, openSidebar, hasSubMenu, setSearch } = useSharedStore()
+ const location = useLocation()
+
+ // useEffect(() => {
+ // setPopoverKey((prevKey) => prevKey + 1);
+ // }, [location.pathname]);
+
+ // const handleLogout = () => {
+ // removeToken()
+ // removeRefreshToken()
+ // window.location.href = Pages.auth.login
+ // }
+
+ useEffect(() => {
+ setSearch('')
+ }, [location.pathname])
+
+ return (
+
Home
+ )
+}
+
+export default Home
\ No newline at end of file
diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx
new file mode 100644
index 0000000..f1b57bf
--- /dev/null
+++ b/src/router/MainRouter.tsx
@@ -0,0 +1,42 @@
+import SideBar from '@/shared/SideBar'
+import Header from '@/shared/Header'
+import { Route, Routes, useLocation } from 'react-router-dom'
+import { Paths } from '@/config/Paths'
+import { clx } from '@/helpers/utils'
+import { useSharedStore } from '@/shared/store/sharedStore'
+import Home from '@/pages/home/Home'
+import Editor from '@/pages/editor/Editor'
+
+const MainRouter = () => {
+ const { hasSubMenu } = useSharedStore()
+ const location = useLocation()
+ const hiddenSideBarRoutes = [Paths.editor]
+ const shouldRenderSideBar = !hiddenSideBarRoutes.includes(location.pathname)
+ const routeHasLocalSidebar = location.pathname === Paths.editor
+ const hasSidebarSpace = shouldRenderSideBar || routeHasLocalSidebar
+ const headerSidebarSize = routeHasLocalSidebar ? 'wide' : 'default'
+
+ return (
+
+ {shouldRenderSideBar ?
+ )
+}
+
+export default MainRouter
\ No newline at end of file
diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx
new file mode 100644
index 0000000..c874609
--- /dev/null
+++ b/src/shared/Header.tsx
@@ -0,0 +1,130 @@
+import { type FC, useEffect } 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 { useLocation } from 'react-router-dom'
+import { useSharedStore } from '@/shared/store/sharedStore'
+import { HambergerMenu } from 'iconsax-react'
+import { clx } from '@/helpers/utils'
+
+type SidebarSize = 'default' | 'wide'
+
+type HeaderProps = {
+ hasMainSidebar?: boolean
+ sidebarSize?: SidebarSize
+}
+
+const sidebarSizeClasses: Record
+
+
+
+
+
+
+
+
+
+ 
*/}
+
+ )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
new file mode 100644
index 0000000..86f29f6
--- /dev/null
+++ b/src/shared/SideBar.tsx
@@ -0,0 +1,110 @@
+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 {
+ Home2,
+ Logout,
+} from 'iconsax-react'
+import SideBarItem from './SideBarItem'
+import { useLocation } from 'react-router-dom'
+import { useSharedStore } from './store/sharedStore'
+import { clx } from '../helpers/utils'
+import { Paths } from '../config/Paths'
+
+
+const SideBar: FC = () => {
+
+ const { t } = useTranslation('global')
+ const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
+ const location = useLocation()
+
+ const isActive = (name: string) => {
+ return window.location.href.includes(name)
+ }
+
+ useEffect(() => {
+ const split = location.pathname.split('/')
+
+ if (split[1] === 'dashboard' || split[1] === 'products') {
+ setSubMenuName(split[1])
+ setSubtMenu(true)
+ } else {
+ setSubMenuName('')
+ setSubtMenu(false)
+ }
+ }, [location.pathname, setSubMenuName, setSubtMenu])
+
+ const iconSizeSideBar = 20
+
+ return (
+ <>
+ {
+ openSidebar &&
+ setSearch(value)}
+ />
+
+ setOpenSidebar(!openSidebar)} className='xl:hidden block'>
+
+ {/*
+ {/*
+
+
+
+
+
+
+
+ )
+ } */}
+
+
+
+
+ 
+
+
+
+
+ {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
+
+
+ setPopoverKey((prevKey) => prevKey + 1)} size={20} color='#da2129' />
+
+
+
+
+
+
+
+ {data?.data?.user?.firstName + ' ' + data?.data?.user?.lastName}
+
+
+
+ {data?.data?.user?.email}
+
+
+
+
+
+
+ handleLogout()} className='flex gap-2 items-center cursor-pointer'>
+
+
+ {t('sidebar.logout')}
+
+ setOpenSidebar(false)} />
+ }
+ = (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 (
+
+
+ ((set) => ({
+ openSidebar: false,
+ setOpenSidebar: (value) => set({ openSidebar: value }),
+ hasSubMenu: false,
+ setSubtMenu: (value: boolean) => set({ hasSubMenu: value }),
+ subMenuName: "",
+ setSubMenuName: (value: string) => set({ subMenuName: value }),
+ search: "",
+ setSearch: (value: string) => set({ search: value }),
+}));
diff --git a/src/shared/types/SharedTypes.ts b/src/shared/types/SharedTypes.ts
new file mode 100644
index 0000000..8eb851c
--- /dev/null
+++ b/src/shared/types/SharedTypes.ts
@@ -0,0 +1,19 @@
+export type SharedStoreType = {
+ openSidebar: boolean;
+ setOpenSidebar: (value: boolean) => void;
+ hasSubMenu: boolean;
+ setSubtMenu: (value: boolean) => void;
+ subMenuName: string;
+ setSubMenuName: (value: string) => void;
+ search: string;
+ setSearch: (value: string) => void;
+};
+
+export type PagerType = {
+ page: number;
+ limit: number;
+ totalItems: number;
+ totalPages: number;
+ prevPage: boolean | null;
+ nextPage: string | null;
+};
diff --git a/tsconfig.app.json b/tsconfig.app.json
index a9b5a59..4d8c378 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -15,6 +15,10 @@
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"]
+ },
/* Linting */
"strict": true,
diff --git a/vite.config.ts b/vite.config.ts
index adeab7d..db3fc25 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
+import { fileURLToPath, URL } from "node:url";
// https://vite.dev/config/
export default defineConfig({
@@ -12,4 +13,9 @@ export default defineConfig({
}),
tailwindcss(),
],
+ resolve: {
+ alias: {
+ "@": fileURLToPath(new URL("./src", import.meta.url)),
+ },
+ },
});
+
+
+ {/* منوی فرعی */}
+ {
+ hasSubMenu && (openSidebar || window.innerWidth > 1139) &&
+
+ {
+ !hasSubMenu ?
+
+ :
+ 
+ }
+
+
+
+
+
+ {t('sidebar.menu')}
+
+
+
+
+
+
+
+
+
+
+ {
+ subMenuName === 'dashboard' ? null
+ //
+ }
+
+ )
+}
+
+
+export default SideBar
\ No newline at end of file
diff --git a/src/shared/SideBarItem.tsx b/src/shared/SideBarItem.tsx
new file mode 100644
index 0000000..dbf3042
--- /dev/null
+++ b/src/shared/SideBarItem.tsx
@@ -0,0 +1,61 @@
+import { type FC, type ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+import { clx } from '../helpers/utils'
+import { useSharedStore } from './store/sharedStore'
+// 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.icon}
+
+
+
+ )
+ }
+
+}
+
+export default SideBarItem
\ No newline at end of file
diff --git a/src/shared/store/sharedStore.ts b/src/shared/store/sharedStore.ts
new file mode 100644
index 0000000..bd93a94
--- /dev/null
+++ b/src/shared/store/sharedStore.ts
@@ -0,0 +1,13 @@
+import { create } from "zustand";
+import { type SharedStoreType } from "../types/SharedTypes";
+
+export const useSharedStore = create
+ {props.title}
+
+