+ خطایی رخ داده است +

+ متأسفانه مشکلی در برنامه رخ داده است. لطفاً دوباره تلاش کنید یا با پشتیبانی تماس بگیرید. +

+ جزئیات خطا (فقط در حالت توسعه) +

+                                        {this.state.error.toString()}
+                                        {this.state.errorInfo?.componentStack}
+

+ + + +

+ )} + +

+ +

+ + پنل مدیریت + +

+ +

+ + {user?.name?.charAt(0) || 'A'} + +

+ {user?.name || 'کاربر'} +

+ {user?.role || 'مدیر'} +

+ + +

+ + ); +}; \ No newline at end of file diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx new file mode 100644 index 0000000..b2303f1 --- /dev/null +++ b/src/components/ui/Button.tsx @@ -0,0 +1,80 @@ +import { clsx } from 'clsx'; + +interface ButtonProps { + children: any; + variant?: 'primary' | 'secondary' | 'danger' | 'success'; + size?: 'sm' | 'md' | 'lg'; + disabled?: boolean; + loading?: boolean; + onClick?: () => void; + type?: 'button' | 'submit' | 'reset'; + className?: string; +} + +export const Button = ({ + children, + variant = 'primary', + size = 'md', + disabled = false, + loading = false, + onClick, + type = 'button', + className = '', +}: ButtonProps) => { + const baseClasses = 'inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2'; + + const variantClasses = { + primary: 'bg-primary-600 hover:bg-primary-700 text-white focus:ring-primary-500', + secondary: 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 focus:ring-gray-500', + danger: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500', + success: 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500', + }; + + const sizeClasses = { + sm: 'px-3 py-1.5 text-sm', + md: 'px-4 py-2 text-sm', + lg: 'px-6 py-3 text-base', + }; + + const disabledClasses = disabled || loading + ? 'opacity-50 cursor-not-allowed pointer-events-none' + : ''; + + return ( + + ); +}; \ No newline at end of file diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx new file mode 100644 index 0000000..7c87d6d --- /dev/null +++ b/src/components/ui/Input.tsx @@ -0,0 +1,54 @@ +import { forwardRef } from 'react'; +import { clsx } from 'clsx'; + +interface InputProps { + label?: string; + error?: string; + type?: string; + placeholder?: string; + className?: string; + icon?: any; + disabled?: boolean; +} + +export const Input = forwardRef( + ({ label, error, type = 'text', placeholder, className, icon: Icon, disabled, ...props }, ref) => { + return ( +

+ {label && ( + + {label} + + )} +

+ {Icon && ( +

+ +

+ )} + +

+ {error && ( +

+ {error} +

+ )} +

+ ); + } +); + +Input.displayName = 'Input'; \ No newline at end of file diff --git a/src/components/ui/LoadingSpinner.tsx b/src/components/ui/LoadingSpinner.tsx new file mode 100644 index 0000000..b60de07 --- /dev/null +++ b/src/components/ui/LoadingSpinner.tsx @@ -0,0 +1,40 @@ +import { Loader2 } from 'lucide-react'; + +interface LoadingSpinnerProps { + size?: 'sm' | 'md' | 'lg'; + text?: string; + fullScreen?: boolean; +} + +export const LoadingSpinner = ({ + size = 'md', + text = 'در حال بارگذاری...', + fullScreen = false +}: LoadingSpinnerProps) => { + const sizeClasses = { + sm: 'h-4 w-4', + md: 'h-8 w-8', + lg: 'h-12 w-12' + }; + + const Component = ( +

+ + {text && ( +

+ {text} +

+ )} +

+ ); + + if (fullScreen) { + return ( +

+ {Component} +

+ ); + } + + return Component; +}; \ No newline at end of file diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx new file mode 100644 index 0000000..cc17e9b --- /dev/null +++ b/src/components/ui/Modal.tsx @@ -0,0 +1,79 @@ +import { useEffect } from 'react'; +import { X } from 'lucide-react'; + +interface ModalProps { + isOpen: boolean; + onClose: () => void; + title?: string; + children: any; + size?: 'sm' | 'md' | 'lg' | 'xl'; +} + +export const Modal = ({ + isOpen, + onClose, + title, + children, + size = 'md' +}: ModalProps) => { + useEffect(() => { + const handleEscape = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + onClose(); + } + }; + + if (isOpen) { + document.addEventListener('keydown', handleEscape); + document.body.style.overflow = 'hidden'; + } + + return () => { + document.removeEventListener('keydown', handleEscape); + document.body.style.overflow = 'unset'; + }; + }, [isOpen, onClose]); + + if (!isOpen) return null; + + const sizeClasses = { + sm: 'max-w-md', + md: 'max-w-lg', + lg: 'max-w-2xl', + xl: 'max-w-4xl', + }; + + return ( +

+ +

+ {title && ( +

+ {title} +

+ +

+ )} + +

+ {children} +

+ ); +}; \ No newline at end of file diff --git a/src/components/ui/Pagination.tsx b/src/components/ui/Pagination.tsx new file mode 100644 index 0000000..f91a8ee --- /dev/null +++ b/src/components/ui/Pagination.tsx @@ -0,0 +1,122 @@ +import { ChevronLeft, ChevronRight } from 'lucide-react'; +import { Button } from './Button'; + +interface PaginationProps { + currentPage: number; + totalPages: number; + onPageChange: (page: number) => void; + itemsPerPage: number; + totalItems: number; +} + +export const Pagination = ({ + currentPage, + totalPages, + onPageChange, + itemsPerPage, + totalItems, +}: PaginationProps) => { + const startItem = (currentPage - 1) * itemsPerPage + 1; + const endItem = Math.min(currentPage * itemsPerPage, totalItems); + + const getVisiblePages = () => { + const pages = []; + const maxVisible = 5; + + if (totalPages <= maxVisible) { + for (let i = 1; i <= totalPages; i++) { + pages.push(i); + } + } else { + const start = Math.max(1, currentPage - 2); + const end = Math.min(totalPages, start + maxVisible - 1); + + for (let i = start; i <= end; i++) { + pages.push(i); + } + + if (start > 1) { + pages.unshift('...'); + pages.unshift(1); + } + + if (end < totalPages) { + pages.push('...'); + pages.push(totalPages); + } + } + + return pages; + }; + + if (totalPages <= 1) return null; + + return ( +

+ + +

+ +

+ نمایش {startItem} تا{' '} + {endItem} از{' '} + {totalItems} نتیجه +

+ +

+ + + {getVisiblePages().map((page, index) => ( + + ))} + + +

+ ); +}; \ No newline at end of file diff --git a/src/components/ui/Table.tsx b/src/components/ui/Table.tsx new file mode 100644 index 0000000..9b6c2c6 --- /dev/null +++ b/src/components/ui/Table.tsx @@ -0,0 +1,150 @@ +import { useState } from 'react'; +import { ChevronUp, ChevronDown } from 'lucide-react'; +import { TableColumn, TableData } from '../../types'; +import { clsx } from 'clsx'; + +interface TableProps { + columns: TableColumn[]; + data: TableData[]; + loading?: boolean; +} + +export const Table = ({ columns, data, loading = false }: TableProps) => { + const [sortField, setSortField] = useState(''); + const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc'); + + const handleSort = (field: string) => { + if (sortField === field) { + setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc'); + } else { + setSortField(field); + setSortDirection('asc'); + } + }; + + const sortedData = [...data].sort((a, b) => { + if (!sortField) return 0; + + const aValue = a[sortField]; + const bValue = b[sortField]; + + if (aValue < bValue) return sortDirection === 'asc' ? -1 : 1; + if (aValue > bValue) return sortDirection === 'asc' ? 1 : -1; + return 0; + }); + + if (loading) { + return ( +

+ {columns.map((_, index) => ( +

+ ))} +

+ {[...Array(5)].map((_, index) => ( +

+ {columns.map((_, colIndex) => ( +

+ ))} +

+ +

+ {[...Array(3)].map((_, index) => ( +

+ {columns.map((_, colIndex) => ( +

+ ))} +

+ ); + } + + return ( + <> +

+ + + + {columns.map((column) => ( + + ))} + + + + {sortedData.map((row, rowIndex) => ( + + {columns.map((column) => ( + + ))} + + ))} + +

column.sortable && handleSort(column.key)} + > + + {column.label} + {column.sortable && ( + + + + + )} + +
+ {column.render ? column.render(row[column.key], row) : row[column.key]} +

+ +

+ {sortedData.map((row, rowIndex) => ( +

+ {columns.map((column) => ( +

+ + {column.label}: + + + {column.render ? column.render(row[column.key], row) : row[column.key]} + +

+ ))} +

+ + ); +}; \ No newline at end of file diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx new file mode 100644 index 0000000..f35d01d --- /dev/null +++ b/src/contexts/AuthContext.tsx @@ -0,0 +1,132 @@ +import { createContext, useContext, useReducer, useEffect } from 'react'; +import { AuthState, User } from '../types'; + +interface AuthContextType extends AuthState { + login: (email: string, password: string) => Promise; + logout: () => void; + hasPermission: (permission: number) => boolean; +} + +const AuthContext = createContext(undefined); + +type AuthAction = + | { type: 'LOGIN_SUCCESS'; payload: { user: User; token: string } } + | { type: 'LOGOUT' } + | { type: 'RESTORE_SESSION'; payload: { user: User; token: string } }; + +const authReducer = (state: AuthState, action: AuthAction): AuthState => { + switch (action.type) { + case 'LOGIN_SUCCESS': + return { + isAuthenticated: true, + user: action.payload.user, + permissions: action.payload.user.permissions, + token: action.payload.token, + }; + case 'LOGOUT': + return { + isAuthenticated: false, + user: null, + permissions: [], + token: null, + }; + case 'RESTORE_SESSION': + return { + isAuthenticated: true, + user: action.payload.user, + permissions: action.payload.user.permissions, + token: action.payload.token, + }; + default: + return state; + } +}; + +const initialState: AuthState = { + isAuthenticated: false, + user: null, + permissions: [], + token: null, +}; + +export const AuthProvider = ({ children }: { children: React.ReactNode }) => { + const [state, dispatch] = useReducer(authReducer, initialState); + + useEffect(() => { + const token = localStorage.getItem('admin_token'); + const userStr = localStorage.getItem('admin_user'); + + if (token && userStr) { + try { + const user = JSON.parse(userStr); + dispatch({ type: 'RESTORE_SESSION', payload: { user, token } }); + } catch (error) { + localStorage.removeItem('admin_token'); + localStorage.removeItem('admin_user'); + } + } + }, []); + + const login = async (email: string, password: string): Promise => { + try { + const mockUser: User = { + id: '1', + name: 'مدیر کل', + email: email, + role: 'admin', + permissions: [1, 2, 3, 4, 5, 10, 15, 20, 22, 25, 30], + status: 'active', + createdAt: new Date().toISOString(), + lastLogin: new Date().toISOString(), + }; + + const mockToken = 'mock-jwt-token-' + Date.now(); + + if (email === 'admin@test.com' && password === 'admin123') { + localStorage.setItem('admin_token', mockToken); + localStorage.setItem('admin_user', JSON.stringify(mockUser)); + + dispatch({ + type: 'LOGIN_SUCCESS', + payload: { user: mockUser, token: mockToken } + }); + + return true; + } + + return false; + } catch (error) { + console.error('Login error:', error); + return false; + } + }; + + const logout = () => { + localStorage.removeItem('admin_token'); + localStorage.removeItem('admin_user'); + dispatch({ type: 'LOGOUT' }); + }; + + const hasPermission = (permission: number): boolean => { + return state.permissions.includes(permission); + }; + + return ( + + {children} + + ); +}; + +export const useAuth = () => { + const context = useContext(AuthContext); + if (context === undefined) { + throw new Error('useAuth must be used within an AuthProvider'); + } + return context; +}; \ No newline at end of file diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx new file mode 100644 index 0000000..5b7efc5 --- /dev/null +++ b/src/contexts/ThemeContext.tsx @@ -0,0 +1,50 @@ +import { createContext, useContext, useEffect, useState } from 'react'; +import { Theme } from '../types'; + +interface ThemeContextType extends Theme { + toggleTheme: () => void; +} + +const ThemeContext = createContext(undefined); + +export const ThemeProvider = ({ children }: { children: any }) => { + const [mode, setMode] = useState<'light' | 'dark'>('light'); + + useEffect(() => { + const savedTheme = localStorage.getItem('admin_theme') as 'light' | 'dark' | null; + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + + const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light'); + setMode(initialTheme); + + if (initialTheme === 'dark') { + document.documentElement.classList.add('dark'); + } + }, []); + + const toggleTheme = () => { + const newMode = mode === 'light' ? 'dark' : 'light'; + setMode(newMode); + localStorage.setItem('admin_theme', newMode); + + if (newMode === 'dark') { + document.documentElement.classList.add('dark'); + } else { + document.documentElement.classList.remove('dark'); + } + }; + + return ( + + {children} + + ); +}; + +export const useTheme = () => { + const context = useContext(ThemeContext); + if (context === undefined) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +}; \ No newline at end of file diff --git a/src/contexts/ToastContext.tsx b/src/contexts/ToastContext.tsx new file mode 100644 index 0000000..ff83ca0 --- /dev/null +++ b/src/contexts/ToastContext.tsx @@ -0,0 +1,140 @@ +import { createContext, useContext, ReactNode } from 'react'; +import toast, { Toaster, ToastOptions } from 'react-hot-toast'; + +interface ToastContextType { + success: (message: string, options?: ToastOptions) => void; + error: (message: string, options?: ToastOptions) => void; + warning: (message: string, options?: ToastOptions) => void; + info: (message: string, options?: ToastOptions) => void; + loading: (message: string, options?: ToastOptions) => string; + dismiss: (id?: string) => void; + promise: ( + promise: Promise, + messages: { + loading: string; + success: string | ((data: T) => string); + error: string | ((error: any) => string); + }, + options?: ToastOptions + ) => Promise; +} + +const ToastContext = createContext(undefined); + +const defaultOptions: ToastOptions = { + duration: 4000, + position: 'top-center', + style: { + fontFamily: 'inherit', + direction: 'rtl', + }, +}; + +export const ToastProvider = ({ children }: { children: ReactNode }) => { + const success = (message: string, options?: ToastOptions) => { + toast.success(message, { ...defaultOptions, ...options }); + }; + + const error = (message: string, options?: ToastOptions) => { + toast.error(message, { ...defaultOptions, ...options }); + }; + + const warning = (message: string, options?: ToastOptions) => { + toast(message, { + ...defaultOptions, + icon: '⚠️', + style: { + ...defaultOptions.style, + backgroundColor: '#fef3c7', + color: '#92400e', + }, + ...options, + }); + }; + + const info = (message: string, options?: ToastOptions) => { + toast(message, { + ...defaultOptions, + icon: 'ℹ️', + style: { + ...defaultOptions.style, + backgroundColor: '#dbeafe', + color: '#1e40af', + }, + ...options, + }); + }; + + const loading = (message: string, options?: ToastOptions): string => { + return toast.loading(message, { ...defaultOptions, ...options }); + }; + + const dismiss = (id?: string) => { + toast.dismiss(id); + }; + + const promiseToast = ( + promise: Promise, + messages: { + loading: string; + success: string | ((data: T) => string); + error: string | ((error: any) => string); + }, + options?: ToastOptions + ): Promise => { + return toast.promise(promise, messages, { ...defaultOptions, ...options }); + }; + + return ( + + {children} + + + ); +}; + +export const useToast = () => { + const context = useContext(ToastContext); + if (context === undefined) { + throw new Error('useToast must be used within a ToastProvider'); + } + return context; +}; \ No newline at end of file diff --git a/src/hooks/useUsers.ts b/src/hooks/useUsers.ts new file mode 100644 index 0000000..c8a2c65 --- /dev/null +++ b/src/hooks/useUsers.ts @@ -0,0 +1,123 @@ +import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; +import { userService } from "../services/userService"; +import { + CreateUserRequest, + UpdateUserRequest, + PaginationParams, +} from "../services/types"; +import { useToast } from "../contexts/ToastContext"; +import { useLoading } from "../stores/useAppStore"; + +export const useUsers = (params?: PaginationParams) => { + const { setLoading } = useLoading(); + + return useQuery({ + queryKey: ["users", params], + queryFn: async () => { + setLoading("users", true); + try { + const mockUsers = userService.getMockUsers(); + + let filteredUsers = mockUsers; + + if (params?.search) { + filteredUsers = mockUsers.filter( + (user) => + user.name.toLowerCase().includes(params.search!.toLowerCase()) || + user.email.toLowerCase().includes(params.search!.toLowerCase()) + ); + } + + if (params?.sortBy) { + filteredUsers.sort((a, b) => { + const aValue = a[params.sortBy as keyof typeof a]; + const bValue = b[params.sortBy as keyof typeof b]; + + if (params.sortOrder === "desc") { + return aValue < bValue ? 1 : -1; + } + return aValue > bValue ? 1 : -1; + }); + } + + const page = params?.page || 1; + const limit = params?.limit || 10; + const startIndex = (page - 1) * limit; + const paginatedUsers = filteredUsers.slice( + startIndex, + startIndex + limit + ); + + return { + success: true, + data: paginatedUsers, + total: filteredUsers.length, + page, + limit, + }; + } finally { + setLoading("users", false); + } + }, + staleTime: 5 * 60 * 1000, + }); +}; + +export const useUser = (id: string) => { + return useQuery({ + queryKey: ["user", id], + queryFn: () => userService.getUser(id), + enabled: !!id, + }); +}; + +export const useCreateUser = () => { + const queryClient = useQueryClient(); + const toast = useToast(); + + return useMutation({ + mutationFn: (userData: CreateUserRequest) => + userService.createUser(userData), + onSuccess: (response) => { + queryClient.invalidateQueries({ queryKey: ["users"] }); + toast.success("کاربر با موفقیت ایجاد شد"); + }, + onError: (error: any) => { + toast.error(error?.response?.data?.message || "خطا در ایجاد کاربر"); + }, + }); +}; + +export const useUpdateUser = () => { + const queryClient = useQueryClient(); + const toast = useToast(); + + return useMutation({ + mutationFn: ({ id, data }: { id: string; data: UpdateUserRequest }) => + userService.updateUser(id, data), + onSuccess: (response, variables) => { + queryClient.invalidateQueries({ queryKey: ["users"] }); + queryClient.invalidateQueries({ queryKey: ["user", variables.id] }); + toast.success("کاربر با موفقیت ویرایش شد"); + }, + onError: (error: any) => { + toast.error(error?.response?.data?.message || "خطا در ویرایش کاربر"); + }, + }); +}; + +export const useDeleteUser = () => { + const queryClient = useQueryClient(); + const toast = useToast(); + + return useMutation({ + mutationFn: (id: string) => userService.deleteUser(id), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["users"] }); + toast.success("کاربر با موفقیت حذف شد"); + }, + onError: (error: any) => { + toast.error(error?.response?.data?.message || "خطا در حذف کاربر"); + }, + }); +}; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..7dd6a2e --- /dev/null +++ b/src/index.css @@ -0,0 +1,56 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --toast-bg: #ffffff; + --toast-color: #374151; +} + +[data-theme="dark"] { + --toast-bg: #1f2937; + --toast-color: #f3f4f6; +} + +@layer base { + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + html { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", + "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", + "Helvetica Neue", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + body { + background-color: #f9fafb; + transition: background-color 0.2s ease; + } + + .dark body { + background-color: #111827; + } +} + +@layer components { + .card { + @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700; + } + + .btn-primary { + @apply bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg transition-colors duration-200 font-medium; + } + + .btn-secondary { + @apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 px-4 py-2 rounded-lg transition-colors duration-200 font-medium; + } + + .input { + @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-colors duration-200; + } +} diff --git a/src/lib/queryClient.ts b/src/lib/queryClient.ts new file mode 100644 index 0000000..f0507c3 --- /dev/null +++ b/src/lib/queryClient.ts @@ -0,0 +1,27 @@ +import { QueryClient } from "@tanstack/react-query"; +import toast from "react-hot-toast"; + +export const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: (failureCount, error: any) => { + if (error?.response?.status === 404) return false; + if (error?.response?.status === 403) return false; + if (error?.response?.status === 401) return false; + return failureCount < 2; + }, + staleTime: 5 * 60 * 1000, // 5 minutes + refetchOnWindowFocus: false, + refetchOnReconnect: true, + }, + mutations: { + onError: (error: any) => { + const message = + error?.response?.data?.message || + error?.message || + "خطایی رخ داده است"; + toast.error(message); + }, + }, + }, +}); diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..75d8518 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.tsx' +import './index.css' + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +) \ No newline at end of file diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx new file mode 100644 index 0000000..a256e4c --- /dev/null +++ b/src/pages/Dashboard.tsx @@ -0,0 +1,159 @@ +import { Users, ShoppingBag, DollarSign, TrendingUp } from 'lucide-react'; +import { StatsCard } from '../components/dashboard/StatsCard'; +import { BarChart } from '../components/charts/BarChart'; +import { LineChart } from '../components/charts/LineChart'; +import { PieChart } from '../components/charts/PieChart'; +import { Table } from '../components/ui/Table'; +import { Button } from '../components/ui/Button'; +import { PermissionWrapper } from '../components/common/PermissionWrapper'; +import { ChartData, TableColumn } from '../types'; + +const statsData = [ + { + title: 'کل کاربران', + value: 1247, + change: 12, + icon: Users, + color: 'blue', + }, + { + title: 'فروش ماهانه', + value: '۲۴,۵۶۷,۰۰۰', + change: 8.5, + icon: DollarSign, + color: 'green', + }, + { + title: 'کل سفارشات', + value: 356, + change: -2.3, + icon: ShoppingBag, + color: 'yellow', + }, + { + title: 'رشد فروش', + value: '۲۳.۵%', + change: 15.2, + icon: TrendingUp, + color: 'purple', + }, +]; + +const chartData: ChartData[] = [ + { name: 'فروردین', value: 4000 }, + { name: 'اردیبهشت', value: 3000 }, + { name: 'خرداد', value: 5000 }, + { name: 'تیر', value: 4500 }, + { name: 'مرداد', value: 6000 }, + { name: 'شهریور', value: 5500 }, +]; + +const pieData: ChartData[] = [ + { name: 'دسکتاپ', value: 45 }, + { name: 'موبایل', value: 35 }, + { name: 'تبلت', value: 20 }, +]; + +const recentUsers = [ + { id: 1, name: 'علی احمدی', email: 'ali@example.com', role: 'کاربر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۱۵' }, + { id: 2, name: 'فاطمه حسینی', email: 'fateme@example.com', role: 'مدیر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۱۴' }, + { id: 3, name: 'محمد رضایی', email: 'mohammad@example.com', role: 'کاربر', status: 'غیرفعال', createdAt: '۱۴۰۲/۰۸/۱۳' }, + { id: 4, name: 'زهرا کریمی', email: 'zahra@example.com', role: 'کاربر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۱۲' }, +]; + +const userColumns: TableColumn[] = [ + { key: 'name', label: 'نام', sortable: true }, + { key: 'email', label: 'ایمیل' }, + { key: 'role', label: 'نقش' }, + { + key: 'status', + label: 'وضعیت', + render: (value) => ( + + {value} + + ) + }, + { key: 'createdAt', label: 'تاریخ عضویت' }, + { + key: 'actions', + label: 'عملیات', + render: (_, row) => ( +

+ + + + +

+ ) + } +]; + +export const Dashboard = () => { + return ( +

+ داشبورد +

+ + + + +

+ +

+ {statsData.map((stat, index) => ( + + ))} +

+ +

+ + +

+ +

+ کاربران اخیر +

+ + + +

+ +

+ + + ); +}; \ No newline at end of file diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx new file mode 100644 index 0000000..c14dbfc --- /dev/null +++ b/src/pages/Login.tsx @@ -0,0 +1,131 @@ +import { useState } from 'react'; +import { Navigate } from 'react-router-dom'; +import { Eye, EyeOff, Lock, Mail } from 'lucide-react'; +import { useForm } from 'react-hook-form'; +import { yupResolver } from '@hookform/resolvers/yup'; +import { useAuth } from '../contexts/AuthContext'; +import { Button } from '../components/ui/Button'; +import { Input } from '../components/ui/Input'; +import { loginSchema, LoginFormData } from '../utils/validationSchemas'; + +export const Login = () => { + const { isAuthenticated, login } = useAuth(); + const [showPassword, setShowPassword] = useState(false); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(''); + + const { + register, + handleSubmit, + formState: { errors, isValid }, + } = useForm({ + resolver: yupResolver(loginSchema), + mode: 'onChange', + }); + + if (isAuthenticated) { + return ; + } + + const onSubmit = async (data: LoginFormData) => { + setLoading(true); + setError(''); + + try { + const success = await login(data.email, data.password); + if (!success) { + setError('ایمیل یا رمز عبور اشتباه است'); + } + } catch (error) { + setError('خطایی رخ داده است. لطفا دوباره تلاش کنید'); + } finally { + setLoading(false); + } + }; + + return ( +

+ +

+ ورود به پنل مدیریت +

+ لطفا اطلاعات خود را وارد کنید +

+ + +

+ + رمز عبور + +

+ +

+ + +

+ {errors.password && ( +

+ {errors.password.message} +

+ )} +

+ + {error && ( +

+ {error} +

+ )} + +

اطلاعات تست:

ایمیل: admin@test.com

رمز عبور: admin123

+ + + +

+ ); +}; \ No newline at end of file diff --git a/src/pages/Notifications.tsx b/src/pages/Notifications.tsx new file mode 100644 index 0000000..cece4ef --- /dev/null +++ b/src/pages/Notifications.tsx @@ -0,0 +1,344 @@ +import { useState } from 'react'; +import { Bell, Check, X, Plus, Search, Filter, AlertCircle, Info, CheckCircle, XCircle } from 'lucide-react'; +import { Button } from '../components/ui/Button'; +import { Pagination } from '../components/ui/Pagination'; + +const allNotifications = [ + { + id: 1, + title: 'سفارش جدید دریافت شد', + message: 'سفارش شماره ۱۰۰۱ از طرف علی احمدی ثبت شد', + type: 'order', + priority: 'high', + isRead: false, + date: '۱۴۰۲/۰۸/۱۵ - ۱۴:۳۰', + sender: 'سیستم فروش' + }, + { + id: 2, + title: 'محصول در حال اتمام', + message: 'موجودی لپ‌تاپ ایسوس به کمتر از ۵ عدد رسیده است', + type: 'warning', + priority: 'medium', + isRead: false, + date: '۱۴۰۲/۰۸/۱۵ - ۱۲:۱۵', + sender: 'سیستم انبار' + }, + { + id: 3, + title: 'کاربر جدید عضو شد', + message: 'فاطمه حسینی با موفقیت در سیستم ثبت نام کرد', + type: 'info', + priority: 'low', + isRead: true, + date: '۱۴۰۲/۰۸/۱۴ - ۱۶:۴۵', + sender: 'سیستم کاربری' + }, + { + id: 4, + title: 'پرداخت انجام شد', + message: 'پرداخت سفارش ۱۰۰۲ با موفقیت تایید شد', + type: 'success', + priority: 'medium', + isRead: true, + date: '۱۴۰۲/۰۸/۱۴ - ۱۰:۲۰', + sender: 'سیستم پرداخت' + }, + { + id: 5, + title: 'خطا در سیستم', + message: 'خطا در اتصال به درگاه پرداخت - نیاز به بررسی فوری', + type: 'error', + priority: 'high', + isRead: false, + date: '۱۴۰۲/۰۸/۱۴ - ۰۹:۱۰', + sender: 'سیستم مانیتورینگ' + }, + { + id: 6, + title: 'بک‌آپ تکمیل شد', + message: 'بک‌آپ روزانه اطلاعات با موفقیت انجام شد', + type: 'success', + priority: 'low', + isRead: true, + date: '۱۴۰۲/۰۸/۱۳ - ۲۳:۰۰', + sender: 'سیستم بک‌آپ' + }, + { + id: 7, + title: 'بروزرسانی سیستم', + message: 'نسخه جدید سیستم منتشر شد - بروزرسانی در دسترس است', + type: 'info', + priority: 'medium', + isRead: false, + date: '۱۴۰۲/۰۸/۱۳ - ۱۱:۳۰', + sender: 'تیم توسعه' + }, + { + id: 8, + title: 'گزارش فروش آماده شد', + message: 'گزارش فروش ماهانه تولید و آماده دانلود است', + type: 'info', + priority: 'low', + isRead: true, + date: '۱۴۰۲/۰۸/۱۲ - ۰۸:۰۰', + sender: 'سیستم گزارش‌گیری' + } +]; + +export const Notifications = () => { + const [notifications, setNotifications] = useState(allNotifications); + const [searchTerm, setSearchTerm] = useState(''); + const [filterType, setFilterType] = useState('all'); + const [currentPage, setCurrentPage] = useState(1); + const itemsPerPage = 6; + + const getNotificationIcon = (type: string) => { + switch (type) { + case 'error': + return ; + case 'warning': + return ; + case 'success': + return ; + case 'info': + return ; + default: + return ; + } + }; + + const getPriorityColor = (priority: string) => { + switch (priority) { + case 'high': + return 'border-r-red-500'; + case 'medium': + return 'border-r-yellow-500'; + case 'low': + return 'border-r-green-500'; + default: + return 'border-r-gray-300'; + } + }; + + const filteredNotifications = notifications.filter((notification) => { + const matchesSearch = notification.title.toLowerCase().includes(searchTerm.toLowerCase()) || + notification.message.toLowerCase().includes(searchTerm.toLowerCase()); + const matchesFilter = filterType === 'all' || + (filterType === 'unread' && !notification.isRead) || + (filterType === 'read' && notification.isRead) || + notification.type === filterType; + return matchesSearch && matchesFilter; + }); + + const totalPages = Math.ceil(filteredNotifications.length / itemsPerPage); + const startIndex = (currentPage - 1) * itemsPerPage; + const paginatedNotifications = filteredNotifications.slice(startIndex, startIndex + itemsPerPage); + + const handleMarkAsRead = (id: number) => { + setNotifications(prev => + prev.map(notification => + notification.id === id ? { ...notification, isRead: true } : notification + ) + ); + }; + + const handleMarkAllAsRead = () => { + setNotifications(prev => + prev.map(notification => ({ ...notification, isRead: true })) + ); + }; + + const handleDeleteNotification = (id: number) => { + setNotifications(prev => prev.filter(notification => notification.id !== id)); + }; + + const unreadCount = notifications.filter(n => !n.isRead).length; + + return ( +

+ اعلانات +

+ {unreadCount} اعلان خوانده نشده از {notifications.length} اعلان +

+ +

+ + +

+ +

کل اعلانات

{notifications.length}

+ +

خوانده نشده

{unreadCount}

+ +

خطا

+ {notifications.filter(n => n.type === 'error').length} +

+ +

هشدار

+ {notifications.filter(n => n.type === 'warning').length} +

+ +

+ setSearchTerm(e.target.value)} + className="input pr-10" + /> +

+ + +

+ +

+ {paginatedNotifications.map((notification) => ( +

+ {getNotificationIcon(notification.type)} +

+ +

+ {notification.title} +

+ {!notification.isRead && ( +

+ )} +

+ +

+ {notification.message} +

+ +

+ {notification.date} + از: {notification.sender} +

+ +

+ {!notification.isRead && ( + + )} + +

+ ))} +

+ + {paginatedNotifications.length === 0 && ( +

+ +

هیچ اعلانی یافت نشد

+ )} + + +

+ ); +}; \ No newline at end of file diff --git a/src/pages/Orders.tsx b/src/pages/Orders.tsx new file mode 100644 index 0000000..de8350f --- /dev/null +++ b/src/pages/Orders.tsx @@ -0,0 +1,204 @@ +import { useState } from 'react'; +import { Search, Filter, ShoppingCart, TrendingUp } from 'lucide-react'; +import { Table } from '../components/ui/Table'; +import { Button } from '../components/ui/Button'; +import { Pagination } from '../components/ui/Pagination'; +import { TableColumn } from '../types'; + +const allOrders = [ + { id: 1001, customer: 'علی احمدی', products: '۳ محصول', amount: '۴۵,۰۰۰,۰۰۰', status: 'تحویل شده', date: '۱۴۰۲/۰۸/۱۵' }, + { id: 1002, customer: 'فاطمه حسینی', products: '۱ محصول', amount: '۲۵,۰۰۰,۰۰۰', status: 'در حال پردازش', date: '۱۴۰۲/۰۸/۱۴' }, + { id: 1003, customer: 'محمد رضایی', products: '۲ محصول', amount: '۳۲,۰۰۰,۰۰۰', status: 'ارسال شده', date: '۱۴۰۲/۰۸/۱۳' }, + { id: 1004, customer: 'زهرا کریمی', products: '۵ محصول', amount: '۱۲۰,۰۰۰,۰۰۰', status: 'تحویل شده', date: '۱۴۰۲/۰۸/۱۲' }, + { id: 1005, customer: 'حسن نوری', products: '۱ محصول', amount: '۱۸,۰۰۰,۰۰۰', status: 'لغو شده', date: '۱۴۰۲/۰۸/۱۱' }, + { id: 1006, customer: 'مریم صادقی', products: '۴ محصول', amount: '۸۵,۰۰۰,۰۰۰', status: 'در حال پردازش', date: '۱۴۰۲/۰۸/۱۰' }, + { id: 1007, customer: 'احمد قاسمی', products: '۲ محصول', amount: '۳۸,۰۰۰,۰۰۰', status: 'ارسال شده', date: '۱۴۰۲/۰۸/۰۹' }, + { id: 1008, customer: 'سارا محمدی', products: '۳ محصول', amount: '۶۲,۰۰۰,۰۰۰', status: 'تحویل شده', date: '۱۴۰۲/۰۸/۰۸' }, + { id: 1009, customer: 'رضا کریمی', products: '۱ محصول', amount: '۱۵,۰۰۰,۰۰۰', status: 'در حال پردازش', date: '۱۴۰۲/۰۸/۰۷' }, + { id: 1010, customer: 'نرگس احمدی', products: '۶ محصول', amount: '۱۴۵,۰۰۰,۰۰۰', status: 'تحویل شده', date: '۱۴۰۲/۰۸/۰۶' }, +]; + +export const Orders = () => { + const [searchTerm, setSearchTerm] = useState(''); + const [loading, setLoading] = useState(false); + const [currentPage, setCurrentPage] = useState(1); + const itemsPerPage = 6; + + const columns: TableColumn[] = [ + { key: 'id', label: 'شماره سفارش', sortable: true }, + { key: 'customer', label: 'مشتری', sortable: true }, + { key: 'products', label: 'محصولات' }, + { + key: 'amount', + label: 'مبلغ', + render: (value) => ( + + {value} تومان + + ) + }, + { + key: 'status', + label: 'وضعیت', + render: (value) => ( + + {value} + + ) + }, + { key: 'date', label: 'تاریخ سفارش', sortable: true }, + { + key: 'actions', + label: 'عملیات', + render: (_, row) => ( +

+ + +

+ ) + } + ]; + + const filteredOrders = allOrders.filter((order: any) => + order.customer.toLowerCase().includes(searchTerm.toLowerCase()) || + order.id.toString().includes(searchTerm) + ); + + const totalPages = Math.ceil(filteredOrders.length / itemsPerPage); + const startIndex = (currentPage - 1) * itemsPerPage; + const paginatedOrders = filteredOrders.slice(startIndex, startIndex + itemsPerPage); + + const handleViewOrder = (order: any) => { + console.log('Viewing order:', order); + }; + + const handleEditOrder = (order: any) => { + console.log('Editing order:', order); + }; + + const totalRevenue = allOrders.reduce((sum, order) => { + const amount = parseInt(order.amount.replace(/[,]/g, '')); + return sum + amount; + }, 0); + + return ( +

+ مدیریت سفارشات +

+ {filteredOrders.length} سفارش یافت شد +

+ +

کل سفارشات

{allOrders.length}

+ +

تحویل شده

+ {allOrders.filter(o => o.status === 'تحویل شده').length} +

+ +

در انتظار

+ {allOrders.filter(o => o.status === 'در حال پردازش').length} +

+ +

کل فروش

+ {totalRevenue.toLocaleString()} تومان +

+ +

+ setSearchTerm(e.target.value)} + className="input pr-10 max-w-md" + /> +

+ +

+ + + + + ); +}; \ No newline at end of file diff --git a/src/pages/Products.tsx b/src/pages/Products.tsx new file mode 100644 index 0000000..2b5522e --- /dev/null +++ b/src/pages/Products.tsx @@ -0,0 +1,203 @@ +import { useState } from 'react'; +import { Plus, Search, Filter, Package } from 'lucide-react'; +import { Table } from '../components/ui/Table'; +import { Button } from '../components/ui/Button'; +import { Pagination } from '../components/ui/Pagination'; +import { PermissionWrapper } from '../components/common/PermissionWrapper'; +import { TableColumn } from '../types'; + +const allProducts = [ + { id: 1, name: 'لپ‌تاپ ایسوس', category: 'کامپیوتر', price: '۲۵,۰۰۰,۰۰۰', stock: 15, status: 'موجود', createdAt: '۱۴۰۲/۰۸/۱۵' }, + { id: 2, name: 'گوشی سامسونگ گلکسی', category: 'موبایل', price: '۱۸,۰۰۰,۰۰۰', stock: 8, status: 'موجود', createdAt: '۱۴۰۲/۰۸/۱۴' }, + { id: 3, name: 'هدفون بی‌سیم', category: 'لوازم جانبی', price: '۲,۵۰۰,۰۰۰', stock: 0, status: 'ناموجود', createdAt: '۱۴۰۲/۰۸/۱۳' }, + { id: 4, name: 'کیبورد گیمینگ', category: 'لوازم جانبی', price: '۳,۲۰۰,۰۰۰', stock: 25, status: 'موجود', createdAt: '۱۴۰۲/۰۸/۱۲' }, + { id: 5, name: 'مانیتور ۲۴ اینچ', category: 'نمایشگر', price: '۱۲,۰۰۰,۰۰۰', stock: 5, status: 'کم موجود', createdAt: '۱۴۰۲/۰۸/۱۱' }, + { id: 6, name: 'ماوس بی‌سیم', category: 'لوازم جانبی', price: '۱,۸۰۰,۰۰۰', stock: 30, status: 'موجود', createdAt: '۱۴۰۲/۰۸/۱۰' }, + { id: 7, name: 'تبلت آیپد', category: 'تبلت', price: '۳۵,۰۰۰,۰۰۰', stock: 3, status: 'کم موجود', createdAt: '۱۴۰۲/۰۸/۰۹' }, + { id: 8, name: 'هارد اکسترنال', category: 'ذخیره‌سازی', price: '۴,۵۰۰,۰۰۰', stock: 12, status: 'موجود', createdAt: '۱۴۰۲/۰۸/۰۸' }, +]; + +const Products = () => { + const [searchTerm, setSearchTerm] = useState(''); + const [loading, setLoading] = useState(false); + const [currentPage, setCurrentPage] = useState(1); + const itemsPerPage = 6; + + const columns: TableColumn[] = [ + { key: 'name', label: 'نام محصول', sortable: true }, + { key: 'category', label: 'دسته‌بندی', sortable: true }, + { key: 'price', label: 'قیمت', sortable: true }, + { + key: 'stock', + label: 'موجودی', + render: (value) => ( + + {value} + + ) + }, + { + key: 'status', + label: 'وضعیت', + render: (value) => ( + + {value} + + ) + }, + { key: 'createdAt', label: 'تاریخ افزودن', sortable: true }, + { + key: 'actions', + label: 'عملیات', + render: (_, row) => ( +

+ + + + +

+ ) + } + ]; + + const filteredProducts = allProducts.filter((product: any) => + product.name.toLowerCase().includes(searchTerm.toLowerCase()) || + product.category.toLowerCase().includes(searchTerm.toLowerCase()) + ); + + const totalPages = Math.ceil(filteredProducts.length / itemsPerPage); + const startIndex = (currentPage - 1) * itemsPerPage; + const paginatedProducts = filteredProducts.slice(startIndex, startIndex + itemsPerPage); + + const handleAddProduct = () => { + console.log('Adding new product'); + }; + + const handleEditProduct = (product: any) => { + console.log('Editing product:', product); + }; + + const handleDeleteProduct = (productId: number) => { + if (confirm('آیا از حذف این محصول اطمینان دارید؟')) { + console.log('Deleting product:', productId); + } + }; + + return ( +

+ مدیریت محصولات +

+ {filteredProducts.length} محصول یافت شد +

+ +

+ + + + +

+ +

کل محصولات

{allProducts.length}

+ +

محصولات موجود

+ {allProducts.filter(p => p.status === 'موجود').length} +

+ +

محصولات ناموجود

+ {allProducts.filter(p => p.status === 'ناموجود').length} +

+ +

+ setSearchTerm(e.target.value)} + className="input pr-10 max-w-md" + /> +

+ +

+ + + + + ); +}; + +export default Products; \ No newline at end of file diff --git a/src/pages/Reports.tsx b/src/pages/Reports.tsx new file mode 100644 index 0000000..d2bbe20 --- /dev/null +++ b/src/pages/Reports.tsx @@ -0,0 +1,223 @@ +import { useState } from 'react'; +import { FileText, Download, Calendar, TrendingUp, Users, ShoppingBag, DollarSign } from 'lucide-react'; +import { Button } from '../components/ui/Button'; +import { BarChart } from '../components/charts/BarChart'; +import { LineChart } from '../components/charts/LineChart'; + +export const Reports = () => { + const [selectedPeriod, setSelectedPeriod] = useState('month'); + + const salesData = [ + { name: 'فروردین', value: 12000000 }, + { name: 'اردیبهشت', value: 19000000 }, + { name: 'خرداد', value: 15000000 }, + { name: 'تیر', value: 22000000 }, + { name: 'مرداد', value: 18000000 }, + { name: 'شهریور', value: 25000000 }, + ]; + + const userGrowthData = [ + { name: 'فروردین', value: 150 }, + { name: 'اردیبهشت', value: 230 }, + { name: 'خرداد', value: 180 }, + { name: 'تیر', value: 280 }, + { name: 'مرداد', value: 200 }, + { name: 'شهریور', value: 320 }, + ]; + + const reports = [ + { + id: 1, + title: 'گزارش فروش ماهانه', + description: 'گزارش کامل فروش محصولات در ماه گذشته', + type: 'فروش', + date: '۱۴۰۲/۰۸/۳۰', + format: 'PDF' + }, + { + id: 2, + title: 'گزارش کاربران جدید', + description: 'آمار کاربران جدید عضو شده در سیستم', + type: 'کاربران', + date: '۱۴۰۲/۰۸/۲۹', + format: 'Excel' + }, + { + id: 3, + title: 'گزارش موجودی انبار', + description: 'وضعیت موجودی محصولات در انبار', + type: 'انبار', + date: '۱۴۰۲/۰۸/۲۸', + format: 'PDF' + }, + { + id: 4, + title: 'گزارش درآمد روزانه', + description: 'جزئیات درآمد حاصل از فروش در ۳۰ روز گذشته', + type: 'مالی', + date: '۱۴۰۲/۰۸/۲۷', + format: 'Excel' + } + ]; + + const handleDownloadReport = (reportId: number) => { + console.log('Downloading report:', reportId); + }; + + const handleGenerateReport = () => { + console.log('Generating new report'); + }; + + return ( +

+ گزارش‌ها و آمار +

+ مشاهده و دانلود گزارش‌های مختلف سیستم +

+ +

+ + +

+ +

کل فروش

۱۱۱ میلیون

+۱۲% از ماه قبل

+ +

کاربران جدید

۳۲۰

+۸% از ماه قبل

+ +

کل سفارشات

۱,۲۵۴

+۱۵% از ماه قبل

+ +

نرخ رشد

+۲۳%

بهبود یافته

+ +

+ روند فروش +

+ +

+ رشد کاربران +

+ +

+ گزارش‌های اخیر +

+ {reports.map((report) => ( +

+ +

+ {report.title} +

+ {report.description} +

+ + نوع: {report.type} + + + تاریخ: {report.date} + + + فرمت: {report.format} + +

+ +

+ ))} +

+ ); +}; \ No newline at end of file diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx new file mode 100644 index 0000000..14336c4 --- /dev/null +++ b/src/pages/Settings.tsx @@ -0,0 +1,238 @@ +import { useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { yupResolver } from '@hookform/resolvers/yup'; +import { Settings as SettingsIcon, Save, Globe, Mail } from 'lucide-react'; +import { Input } from '../components/ui/Input'; +import { Button } from '../components/ui/Button'; +import { settingsSchema, SettingsFormData } from '../utils/validationSchemas'; + +export const Settings = () => { + const [loading, setLoading] = useState(false); + const [success, setSuccess] = useState(false); + + const { + register, + handleSubmit, + formState: { errors, isValid, isDirty }, + } = useForm({ + resolver: yupResolver(settingsSchema), + mode: 'onChange', + defaultValues: { + siteName: 'پنل مدیریت', + siteDescription: 'سیستم مدیریت محتوا پیشرفته', + adminEmail: 'admin@example.com', + language: 'fa', + }, + }); + + const onSubmit = async (data: SettingsFormData) => { + setLoading(true); + setSuccess(false); + + try { + await new Promise(resolve => setTimeout(resolve, 1000)); + console.log('Settings saved:', data); + setSuccess(true); + setTimeout(() => setSuccess(false), 3000); + } catch (error) { + console.error('Error saving settings:', error); + } finally { + setLoading(false); + } + }; + + return ( +

+ + تنظیمات سیستم +

+ تنظیمات کلی سیستم را اینجا مدیریت کنید +

+ +

+ اطلاعات اصلی +

+ + +

+ + توضیحات سایت + +

+                                    {errors.siteDescription && (
+                                        <p className="text-sm text-red-600 dark:text-red-400">
+                                            {errors.siteDescription.message}
+                                        </p>
+                                    )}
+                                </div>
+
+                                <Input
+                                    label="ایمیل مدیر"
+                                    type="email"
+                                    placeholder="admin@example.com"
+                                    icon={Mail}
+                                    error={errors.adminEmail?.message}
+                                    {...register('adminEmail')}
+                                />
+
+                                <div className="space-y-1">
+                                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                                        زبان پیش‌فرض
+                                    </label>
+                                    <select
+                                        className={`input ${errors.language ? 'border-red-500 dark:border-red-500 focus:ring-red-500' : ''
+                                            }`}
+                                        {...register('language')}
+                                    >
+                                        <option value="fa">فارسی</option>
+                                        <option value="en">English</option>
+                                        <option value="ar">العربية</option>
+                                    </select>
+                                    {errors.language && (
+                                        <p className="text-sm text-red-600 dark:text-red-400">
+                                            {errors.language.message}
+                                        </p>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="card p-6">
+                            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                                تنظیمات امنیتی
+                            </h2>
+                            <div className="space-y-4">
+                                <div className="flex items-center justify-between">
+                                    <div>
+                                        <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                            احراز هویت دو مرحله‌ای
+                                        </h3>
+                                        <p className="text-sm text-gray-500 dark:text-gray-400">
+                                            افزایش امنیت حساب کاربری
+                                        </p>
+                                    </div>
+                                    <label className="flex items-center cursor-pointer">
+                                        <input
+                                            type="checkbox"
+                                            className="sr-only"
+                                        />
+                                        <div className="relative">
+                                            <div className="w-10 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                                        </div>
+                                    </label>
+                                </div>
+
+                                <div className="flex items-center justify-between">
+                                    <div>
+                                        <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                            ثبت لاگ‌ها
+                                        </h3>
+                                        <p className="text-sm text-gray-500 dark:text-gray-400">
+                                            ثبت فعالیت‌های سیستم
+                                        </p>
+                                    </div>
+                                    <label className="flex items-center cursor-pointer">
+                                        <input
+                                            type="checkbox"
+                                            className="sr-only"
+                                            defaultChecked
+                                        />
+                                        <div className="relative">
+                                            <div className="w-10 h-6 bg-blue-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                                        </div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center justify-end space-x-4">
+                            <Button
+                                type="button"
+                                variant="secondary"
+                                disabled={loading}
+                            >
+                                بازگردانی
+                            </Button>
+                            <Button
+                                type="submit"
+                                loading={loading}
+                                disabled={!isValid || !isDirty}
+                            >
+                                <Save className="h-4 w-4 ml-2" />
+                                ذخیره تغییرات
+                            </Button>
+                        </div>
+                    </form>
+                </div>
+
+                <div className="space-y-6">
+                    <div className="card p-6">
+                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                            نکات مهم
+                        </h3>
+                        <ul className="space-y-3 text-sm text-gray-600 dark:text-gray-400">
+                            <li className="flex items-start">
+                                <span className="w-2 h-2 bg-blue-500 rounded-full mt-2 ml-2 flex-shrink-0"></span>
+                                تغییرات تنظیمات ممکن است چند دقیقه طول بکشد
+                            </li>
+                            <li className="flex items-start">
+                                <span className="w-2 h-2 bg-green-500 rounded-full mt-2 ml-2 flex-shrink-0"></span>
+                                پس از تغییر ایمیل مدیر، لینک تأیید ارسال می‌شود
+                            </li>
+                            <li className="flex items-start">
+                                <span className="w-2 h-2 bg-yellow-500 rounded-full mt-2 ml-2 flex-shrink-0"></span>
+                                تنظیمات امنیتی بر تمام کاربران تأثیر می‌گذارد
+                            </li>
+                        </ul>
+                    </div>
+
+                    {success && (
+                        <div className="card p-4 bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
+                            <div className="flex items-center">
+                                <div className="w-4 h-4 bg-green-500 rounded-full ml-2"></div>
+                                <p className="text-sm text-green-800 dark:text-green-200">
+                                    تنظیمات با موفقیت ذخیره شد
+                                </p>
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="card p-6">
+                        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+                            عملیات خطرناک
+                        </h3>
+                        <div className="space-y-4">
+                            <Button variant="danger" size="sm">
+                                پاک کردن کش
+                            </Button>
+                            <Button variant="danger" size="sm">
+                                ریست کامل سیستم
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}; 
\ No newline at end of file
diff --git a/src/pages/Users.tsx b/src/pages/Users.tsx
new file mode 100644
index 0000000..d125cee
--- /dev/null
+++ b/src/pages/Users.tsx
@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import { Plus, Search, Filter } from 'lucide-react';
+import { Table } from '../components/ui/Table';
+import { Button } from '../components/ui/Button';
+import { Modal } from '../components/ui/Modal';
+import { Pagination } from '../components/ui/Pagination';
+import { UserForm } from '../components/forms/UserForm';
+import { PermissionWrapper } from '../components/common/PermissionWrapper';
+import { TableColumn } from '../types';
+import { UserFormData } from '../utils/validationSchemas';
+
+const allUsers = [
+    { id: 1, name: 'علی احمدی', email: 'ali@example.com', role: 'کاربر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۱۵', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+    { id: 2, name: 'فاطمه حسینی', email: 'fateme@example.com', role: 'مدیر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۱۴', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+    { id: 3, name: 'محمد رضایی', email: 'mohammad@example.com', role: 'کاربر', status: 'غیرفعال', createdAt: '۱۴۰۲/۰۸/۱۳', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+    { id: 4, name: 'زهرا کریمی', email: 'zahra@example.com', role: 'کاربر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۱۲', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+    { id: 5, name: 'حسن نوری', email: 'hassan@example.com', role: 'مدیر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۱۱', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+    { id: 6, name: 'مریم صادقی', email: 'maryam@example.com', role: 'کاربر', status: 'غیرفعال', createdAt: '۱۴۰۲/۰۸/۱۰', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+    { id: 7, name: 'احمد قاسمی', email: 'ahmad@example.com', role: 'کاربر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۰۹', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+    { id: 8, name: 'سارا محمدی', email: 'sara@example.com', role: 'مدیر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۰۸', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+    { id: 9, name: 'رضا کریمی', email: 'reza@example.com', role: 'کاربر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۰۷', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+    { id: 10, name: 'نرگس احمدی', email: 'narges@example.com', role: 'کاربر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۰۶', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+    { id: 11, name: 'امیر حسینی', email: 'amir@example.com', role: 'مدیر', status: 'فعال', createdAt: '۱۴۰۲/۰۸/۰۵', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+    { id: 12, name: 'مینا رضایی', email: 'mina@example.com', role: 'کاربر', status: 'غیرفعال', createdAt: '۱۴۰۲/۰۸/۰۴', phone: '۰۹۱۲۳۴۵۶۷۸۹' },
+];
+
+export const Users = () => {
+    const [searchTerm, setSearchTerm] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [showUserModal, setShowUserModal] = useState(false);
+    const [editingUser, setEditingUser] = useState<any>(null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 5;
+
+    const columns: TableColumn[] = [
+        { key: 'name', label: 'نام', sortable: true },
+        { key: 'email', label: 'ایمیل', sortable: true },
+        { key: 'phone', label: 'تلفن' },
+        { key: 'role', label: 'نقش' },
+        {
+            key: 'status',
+            label: 'وضعیت',
+            render: (value) => (
+                <span className={`px-2 py-1 rounded-full text-xs font-medium ${value === 'فعال'
+                    ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                    : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+                    }`}>
+                    {value}
+                </span>
+            )
+        },
+        { key: 'createdAt', label: 'تاریخ عضویت', sortable: true },
+        {
+            key: 'actions',
+            label: 'عملیات',
+            render: (_, row) => (
+                <div className="flex space-x-2">
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => handleEditUser(row)}
+                    >
+                        ویرایش
+                    </Button>
+                    <PermissionWrapper permission={22}>
+                        <Button
+                            size="sm"
+                            variant="danger"
+                            onClick={() => handleDeleteUser(row.id)}
+                        >
+                            حذف
+                        </Button>
+                    </PermissionWrapper>
+                </div>
+            )
+        }
+    ];
+
+    const filteredUsers = allUsers.filter((user: any) =>
+        user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        user.email.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    const totalPages = Math.ceil(filteredUsers.length / itemsPerPage);
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const paginatedUsers = filteredUsers.slice(startIndex, startIndex + itemsPerPage);
+
+    const handleAddUser = () => {
+        setEditingUser(null);
+        setShowUserModal(true);
+    };
+
+    const handleEditUser = (user: any) => {
+        setEditingUser(user);
+        setShowUserModal(true);
+    };
+
+    const handleDeleteUser = (userId: number) => {
+        if (confirm('آیا از حذف این کاربر اطمینان دارید؟')) {
+            console.log('Deleting user:', userId);
+        }
+    };
+
+    const handleSubmitUser = (data: UserFormData) => {
+        console.log('User data:', data);
+        setShowUserModal(false);
+    };
+
+    const handleCloseModal = () => {
+        setShowUserModal(false);
+        setEditingUser(null);
+    };
+
+    return (
+        <div className="p-6 space-y-6">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                <div>
+                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+                        مدیریت کاربران
+                    </h1>
+                    <p className="text-gray-600 dark:text-gray-400 mt-1">
+                        {filteredUsers.length} کاربر یافت شد
+                    </p>
+                </div>
+
+                <div className="flex items-center space-x-4">
+                    <Button variant="secondary">
+                        <Filter className="h-4 w-4 ml-2" />
+                        فیلتر
+                    </Button>
+                    <PermissionWrapper permission={25}>
+                        <Button onClick={handleAddUser}>
+                            <Plus className="h-4 w-4 ml-2" />
+                            افزودن کاربر
+                        </Button>
+                    </PermissionWrapper>
+                </div>
+            </div>
+
+            <div className="card p-6">
+                <div className="mb-6">
+                    <div className="relative">
+                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                            <Search className="h-5 w-5 text-gray-400" />
+                        </div>
+                        <input
+                            type="text"
+                            placeholder="جستجو در کاربران..."
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            className="input pr-10 max-w-md"
+                        />
+                    </div>
+                </div>
+
+                <div className="bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
+                    <Table
+                        columns={columns}
+                        data={paginatedUsers}
+                        loading={loading}
+                    />
+                    <Pagination
+                        currentPage={currentPage}
+                        totalPages={totalPages}
+                        onPageChange={setCurrentPage}
+                        itemsPerPage={itemsPerPage}
+                        totalItems={filteredUsers.length}
+                    />
+                </div>
+            </div>
+
+            <Modal
+                isOpen={showUserModal}
+                onClose={handleCloseModal}
+                size="lg"
+            >
+                <UserForm
+                    initialData={editingUser}
+                    onSubmit={handleSubmitUser}
+                    onCancel={handleCloseModal}
+                    loading={loading}
+                    isEdit={!!editingUser}
+                />
+            </Modal>
+        </div>
+    );
+}; 
\ No newline at end of file
diff --git a/src/pages/UsersNew.tsx b/src/pages/UsersNew.tsx
new file mode 100644
index 0000000..2cad2a2
--- /dev/null
+++ b/src/pages/UsersNew.tsx
@@ -0,0 +1,252 @@
+import { useState } from 'react';
+import { Plus, Search, Filter } from 'lucide-react';
+import { Table } from '../components/ui/Table';
+import { Button } from '../components/ui/Button';
+import { Modal } from '../components/ui/Modal';
+import { Pagination } from '../components/ui/Pagination';
+import { UserForm } from '../components/forms/UserForm';
+import { PermissionWrapper } from '../components/common/PermissionWrapper';
+import { LoadingSpinner } from '../components/ui/LoadingSpinner';
+import { TableColumn } from '../types';
+import { UserFormData } from '../utils/validationSchemas';
+import { useUsers, useCreateUser, useUpdateUser, useDeleteUser } from '../hooks/useUsers';
+import { useToast } from '../contexts/ToastContext';
+import { useFilters } from '../stores/useAppStore';
+
+const Users = () => {
+    const [showUserModal, setShowUserModal] = useState(false);
+    const [editingUser, setEditingUser] = useState<any>(null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 5;
+
+    const { filters, setFilters } = useFilters();
+    const toast = useToast();
+
+    const queryParams = {
+        page: currentPage,
+        limit: itemsPerPage,
+        search: filters.search,
+        sortBy: 'createdAt',
+        sortOrder: 'desc' as const,
+    };
+
+    const { data: usersResponse, isLoading, error } = useUsers(queryParams);
+    const createUserMutation = useCreateUser();
+    const updateUserMutation = useUpdateUser();
+    const deleteUserMutation = useDeleteUser();
+
+    const users = usersResponse?.data || [];
+    const totalItems = usersResponse?.total || 0;
+    const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+    const columns: TableColumn[] = [
+        { key: 'name', label: 'نام', sortable: true },
+        { key: 'email', label: 'ایمیل', sortable: true },
+        { key: 'phone', label: 'تلفن' },
+        { key: 'role', label: 'نقش' },
+        {
+            key: 'status',
+            label: 'وضعیت',
+            render: (value) => (
+                <span className={`px-2 py-1 rounded-full text-xs font-medium ${value === 'active'
+                        ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                        : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+                    }`}>
+                    {value === 'active' ? 'فعال' : 'غیرفعال'}
+                </span>
+            )
+        },
+        {
+            key: 'createdAt',
+            label: 'تاریخ عضویت',
+            sortable: true,
+            render: (value) => new Date(value).toLocaleDateString('fa-IR')
+        },
+        {
+            key: 'actions',
+            label: 'عملیات',
+            render: (_, row) => (
+                <div className="flex space-x-2">
+                    <Button
+                        size="sm"
+                        variant="secondary"
+                        onClick={() => handleEditUser(row)}
+                        disabled={updateUserMutation.isPending}
+                    >
+                        ویرایش
+                    </Button>
+                    <PermissionWrapper permission={22}>
+                        <Button
+                            size="sm"
+                            variant="danger"
+                            onClick={() => handleDeleteUser(row.id)}
+                            disabled={deleteUserMutation.isPending}
+                        >
+                            حذف
+                        </Button>
+                    </PermissionWrapper>
+                </div>
+            )
+        }
+    ];
+
+    const handleAddUser = () => {
+        setEditingUser(null);
+        setShowUserModal(true);
+    };
+
+    const handleEditUser = (user: any) => {
+        setEditingUser(user);
+        setShowUserModal(true);
+    };
+
+    const handleDeleteUser = async (userId: string) => {
+        if (confirm('آیا از حذف این کاربر اطمینان دارید؟')) {
+            try {
+                await deleteUserMutation.mutateAsync(userId);
+            } catch (error) {
+                console.error('Delete error:', error);
+            }
+        }
+    };
+
+    const handleSubmitUser = async (data: UserFormData) => {
+        try {
+            if (editingUser) {
+                await updateUserMutation.mutateAsync({
+                    id: editingUser.id,
+                    data: {
+                        name: data.name,
+                        email: data.email,
+                        phone: data.phone,
+                        role: data.role,
+                    }
+                });
+            } else {
+                await createUserMutation.mutateAsync({
+                    name: data.name,
+                    email: data.email,
+                    phone: data.phone,
+                    role: data.role,
+                    password: data.password || '123456',
+                });
+            }
+            setShowUserModal(false);
+        } catch (error) {
+            console.error('Submit error:', error);
+        }
+    };
+
+    const handleCloseModal = () => {
+        setShowUserModal(false);
+        setEditingUser(null);
+    };
+
+    const handleSearchChange = (value: string) => {
+        setFilters({ search: value });
+        setCurrentPage(1);
+    };
+
+    if (error) {
+        return (
+            <div className="p-6">
+                <div className="text-center py-12">
+                    <p className="text-red-600 dark:text-red-400">
+                        خطا در بارگذاری کاربران: {error.message}
+                    </p>
+                    <Button
+                        onClick={() => window.location.reload()}
+                        className="mt-4"
+                    >
+                        تلاش دوباره
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="p-6 space-y-6">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+                <div>
+                    <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+                        مدیریت کاربران
+                    </h1>
+                    <p className="text-gray-600 dark:text-gray-400 mt-1">
+                        {totalItems} کاربر یافت شد
+                    </p>
+                </div>
+
+                <div className="flex items-center space-x-4">
+                    <Button variant="secondary">
+                        <Filter className="h-4 w-4 ml-2" />
+                        فیلتر
+                    </Button>
+                    <PermissionWrapper permission={25}>
+                        <Button
+                            onClick={handleAddUser}
+                            disabled={createUserMutation.isPending}
+                        >
+                            <Plus className="h-4 w-4 ml-2" />
+                            افزودن کاربر
+                        </Button>
+                    </PermissionWrapper>
+                </div>
+            </div>
+
+            <div className="card p-6">
+                <div className="mb-6">
+                    <div className="relative">
+                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                            <Search className="h-5 w-5 text-gray-400" />
+                        </div>
+                        <input
+                            type="text"
+                            placeholder="جستجو در کاربران..."
+                            value={filters.search}
+                            onChange={(e) => handleSearchChange(e.target.value)}
+                            className="input pr-10 max-w-md"
+                        />
+                    </div>
+                </div>
+
+                {isLoading ? (
+                    <LoadingSpinner />
+                ) : (
+                    <>
+                        <div className="bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
+                            <Table
+                                columns={columns}
+                                data={users}
+                                loading={isLoading}
+                            />
+                            <Pagination
+                                currentPage={currentPage}
+                                totalPages={totalPages}
+                                onPageChange={setCurrentPage}
+                                itemsPerPage={itemsPerPage}
+                                totalItems={totalItems}
+                            />
+                        </div>
+                    </>
+                )}
+            </div>
+
+            <Modal
+                isOpen={showUserModal}
+                onClose={handleCloseModal}
+                size="lg"
+            >
+                <UserForm
+                    initialData={editingUser}
+                    onSubmit={handleSubmitUser}
+                    onCancel={handleCloseModal}
+                    loading={createUserMutation.isPending || updateUserMutation.isPending}
+                    isEdit={!!editingUser}
+                />
+            </Modal>
+        </div>
+    );
+};
+
+export default Users; 
\ No newline at end of file
diff --git a/src/services/api.ts b/src/services/api.ts
new file mode 100644
index 0000000..ec19c84
--- /dev/null
+++ b/src/services/api.ts
@@ -0,0 +1,99 @@
+import axios, { AxiosInstance, AxiosResponse, AxiosError } from "axios";
+import toast from "react-hot-toast";
+
+class ApiService {
+  private api: AxiosInstance;
+
+  constructor() {
+    this.api = axios.create({
+      baseURL: import.meta.env.VITE_API_URL || "http://localhost:3001/api",
+      timeout: 10000,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    this.setupInterceptors();
+  }
+
+  private setupInterceptors() {
+    this.api.interceptors.request.use(
+      (config) => {
+        const token = localStorage.getItem("admin_token");
+        if (token) {
+          config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+      },
+      (error) => {
+        return Promise.reject(error);
+      }
+    );
+
+    this.api.interceptors.response.use(
+      (response: AxiosResponse) => {
+        return response;
+      },
+      (error: AxiosError) => {
+        this.handleError(error);
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  private handleError(error: AxiosError) {
+    if (error.response?.status === 401) {
+      localStorage.removeItem("admin_token");
+      localStorage.removeItem("admin_user");
+      window.location.href = "/login";
+      return;
+    }
+
+    const message = this.getErrorMessage(error);
+    toast.error(message);
+  }
+
+  private getErrorMessage(error: AxiosError): string {
+    if (error.response?.data) {
+      const data = error.response.data as any;
+      return data.message || data.error || "خطایی رخ داده است";
+    }
+
+    if (error.code === "NETWORK_ERROR") {
+      return "خطا در اتصال به سرور";
+    }
+
+    if (error.code === "TIMEOUT") {
+      return "درخواست منقضی شد";
+    }
+
+    return "خطای غیرمنتظره‌ای رخ داده است";
+  }
+
+  async get<T>(url: string, params?: any): Promise<T> {
+    const response = await this.api.get(url, { params });
+    return response.data;
+  }
+
+  async post<T>(url: string, data?: any): Promise<T> {
+    const response = await this.api.post(url, data);
+    return response.data;
+  }
+
+  async put<T>(url: string, data?: any): Promise<T> {
+    const response = await this.api.put(url, data);
+    return response.data;
+  }
+
+  async delete<T>(url: string): Promise<T> {
+    const response = await this.api.delete(url);
+    return response.data;
+  }
+
+  async patch<T>(url: string, data?: any): Promise<T> {
+    const response = await this.api.patch(url, data);
+    return response.data;
+  }
+}
+
+export const apiService = new ApiService();
diff --git a/src/services/types.ts b/src/services/types.ts
new file mode 100644
index 0000000..71b0fcb
--- /dev/null
+++ b/src/services/types.ts
@@ -0,0 +1,107 @@
+export interface ApiResponse<T> {
+  success: boolean;
+  data: T;
+  message?: string;
+  total?: number;
+  page?: number;
+  limit?: number;
+}
+
+export interface PaginationParams {
+  page?: number;
+  limit?: number;
+  search?: string;
+  sortBy?: string;
+  sortOrder?: "asc" | "desc";
+}
+
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+  role: string;
+  status: "active" | "inactive";
+  permissions: number[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface Product {
+  id: string;
+  name: string;
+  category: string;
+  price: number;
+  stock: number;
+  status: "available" | "out_of_stock" | "low_stock";
+  description?: string;
+  image?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface Order {
+  id: string;
+  customerId: string;
+  customerName: string;
+  products: OrderProduct[];
+  totalAmount: number;
+  status: "pending" | "processing" | "shipped" | "delivered" | "cancelled";
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface OrderProduct {
+  productId: string;
+  productName: string;
+  quantity: number;
+  price: number;
+}
+
+export interface Notification {
+  id: string;
+  title: string;
+  message: string;
+  type: "info" | "success" | "warning" | "error";
+  priority: "low" | "medium" | "high";
+  isRead: boolean;
+  senderId?: string;
+  senderName?: string;
+  createdAt: string;
+}
+
+export interface DashboardStats {
+  totalUsers: number;
+  totalProducts: number;
+  totalOrders: number;
+  totalRevenue: number;
+  monthlyGrowth: number;
+  weeklyGrowth: number;
+}
+
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  user: User;
+  token: string;
+  refreshToken: string;
+}
+
+export interface CreateUserRequest {
+  name: string;
+  email: string;
+  phone: string;
+  role: string;
+  password: string;
+}
+
+export interface UpdateUserRequest {
+  name?: string;
+  email?: string;
+  phone?: string;
+  role?: string;
+  status?: "active" | "inactive";
+}
diff --git a/src/services/userService.ts b/src/services/userService.ts
new file mode 100644
index 0000000..3055df6
--- /dev/null
+++ b/src/services/userService.ts
@@ -0,0 +1,133 @@
+import { apiService } from "./api";
+import {
+  ApiResponse,
+  User,
+  CreateUserRequest,
+  UpdateUserRequest,
+  PaginationParams,
+} from "./types";
+
+export const userService = {
+  getUsers: async (params?: PaginationParams): Promise<ApiResponse<User[]>> => {
+    try {
+      return await apiService.get<ApiResponse<User[]>>("/users", params);
+    } catch (error) {
+      return {
+        success: false,
+        data: [],
+        message: "خطا در دریافت کاربران",
+      };
+    }
+  },
+
+  getUser: async (id: string): Promise<ApiResponse<User>> => {
+    try {
+      return await apiService.get<ApiResponse<User>>(`/users/${id}`);
+    } catch (error) {
+      return {
+        success: false,
+        data: {} as User,
+        message: "خطا در دریافت کاربر",
+      };
+    }
+  },
+
+  createUser: async (
+    userData: CreateUserRequest
+  ): Promise<ApiResponse<User>> => {
+    try {
+      return await apiService.post<ApiResponse<User>>("/users", userData);
+    } catch (error) {
+      return {
+        success: false,
+        data: {} as User,
+        message: "خطا در ایجاد کاربر",
+      };
+    }
+  },
+
+  updateUser: async (
+    id: string,
+    userData: UpdateUserRequest
+  ): Promise<ApiResponse<User>> => {
+    try {
+      return await apiService.put<ApiResponse<User>>(`/users/${id}`, userData);
+    } catch (error) {
+      return {
+        success: false,
+        data: {} as User,
+        message: "خطا در ویرایش کاربر",
+      };
+    }
+  },
+
+  deleteUser: async (id: string): Promise<ApiResponse<void>> => {
+    try {
+      return await apiService.delete<ApiResponse<void>>(`/users/${id}`);
+    } catch (error) {
+      return {
+        success: false,
+        data: undefined,
+        message: "خطا در حذف کاربر",
+      };
+    }
+  },
+
+  getMockUsers: (): User[] => [
+    {
+      id: "1",
+      name: "علی احمدی",
+      email: "ali@example.com",
+      phone: "09123456789",
+      role: "user",
+      status: "active",
+      permissions: [10, 15],
+      createdAt: "2024-01-15T10:30:00Z",
+      updatedAt: "2024-01-15T10:30:00Z",
+    },
+    {
+      id: "2",
+      name: "فاطمه حسینی",
+      email: "fateme@example.com",
+      phone: "09123456789",
+      role: "admin",
+      status: "active",
+      permissions: [10, 15, 20, 22, 25, 30],
+      createdAt: "2024-01-14T10:30:00Z",
+      updatedAt: "2024-01-14T10:30:00Z",
+    },
+    {
+      id: "3",
+      name: "محمد رضایی",
+      email: "mohammad@example.com",
+      phone: "09123456789",
+      role: "user",
+      status: "inactive",
+      permissions: [10],
+      createdAt: "2024-01-13T10:30:00Z",
+      updatedAt: "2024-01-13T10:30:00Z",
+    },
+    {
+      id: "4",
+      name: "زهرا کریمی",
+      email: "zahra@example.com",
+      phone: "09123456789",
+      role: "user",
+      status: "active",
+      permissions: [10, 15],
+      createdAt: "2024-01-12T10:30:00Z",
+      updatedAt: "2024-01-12T10:30:00Z",
+    },
+    {
+      id: "5",
+      name: "حسن نوری",
+      email: "hassan@example.com",
+      phone: "09123456789",
+      role: "admin",
+      status: "active",
+      permissions: [10, 15, 20, 22, 25, 30],
+      createdAt: "2024-01-11T10:30:00Z",
+      updatedAt: "2024-01-11T10:30:00Z",
+    },
+  ],
+};
diff --git a/src/stores/useAppStore.ts b/src/stores/useAppStore.ts
new file mode 100644
index 0000000..93944e2
--- /dev/null
+++ b/src/stores/useAppStore.ts
@@ -0,0 +1,175 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+import { User } from "../services/types";
+
+interface LoadingState {
+  users: boolean;
+  products: boolean;
+  orders: boolean;
+  notifications: boolean;
+  dashboard: boolean;
+}
+
+interface AppState {
+  sidebarOpen: boolean;
+  loading: LoadingState;
+  selectedItems: string[];
+  filters: {
+    search: string;
+    status: string;
+    dateRange: { start: string; end: string } | null;
+  };
+  currentUser: User | null;
+
+  // Actions
+  setSidebarOpen: (open: boolean) => void;
+  setLoading: (key: keyof LoadingState, value: boolean) => void;
+  setSelectedItems: (items: string[]) => void;
+  addSelectedItem: (item: string) => void;
+  removeSelectedItem: (item: string) => void;
+  clearSelectedItems: () => void;
+  setFilters: (filters: Partial<AppState["filters"]>) => void;
+  resetFilters: () => void;
+  setCurrentUser: (user: User | null) => void;
+
+  // Bulk actions
+  setGlobalLoading: (loading: boolean) => void;
+}
+
+const initialFilters = {
+  search: "",
+  status: "",
+  dateRange: null,
+};
+
+const initialLoading: LoadingState = {
+  users: false,
+  products: false,
+  orders: false,
+  notifications: false,
+  dashboard: false,
+};
+
+export const useAppStore = create<AppState>()(
+  persist(
+    (set, get) => ({
+      sidebarOpen: false,
+      loading: initialLoading,
+      selectedItems: [],
+      filters: initialFilters,
+      currentUser: null,
+
+      setSidebarOpen: (open) => set({ sidebarOpen: open }),
+
+      setLoading: (key, value) =>
+        set((state) => ({
+          loading: { ...state.loading, [key]: value },
+        })),
+
+      setSelectedItems: (items) => set({ selectedItems: items }),
+
+      addSelectedItem: (item) =>
+        set((state) => ({
+          selectedItems: state.selectedItems.includes(item)
+            ? state.selectedItems
+            : [...state.selectedItems, item],
+        })),
+
+      removeSelectedItem: (item) =>
+        set((state) => ({
+          selectedItems: state.selectedItems.filter((i) => i !== item),
+        })),
+
+      clearSelectedItems: () => set({ selectedItems: [] }),
+
+      setFilters: (newFilters) =>
+        set((state) => ({
+          filters: { ...state.filters, ...newFilters },
+        })),
+
+      resetFilters: () => set({ filters: initialFilters }),
+
+      setCurrentUser: (user) => set({ currentUser: user }),
+
+      setGlobalLoading: (loading) =>
+        set((state) => ({
+          loading: Object.keys(state.loading).reduce(
+            (acc, key) => ({ ...acc, [key]: loading }),
+            {} as LoadingState
+          ),
+        })),
+    }),
+    {
+      name: "app-storage",
+      storage: createJSONStorage(() => localStorage),
+      partialize: (state) => ({
+        sidebarOpen: state.sidebarOpen,
+        filters: state.filters,
+        currentUser: state.currentUser,
+      }),
+    }
+  )
+);
+
+export const useSidebar = () => {
+  const { sidebarOpen, setSidebarOpen } = useAppStore();
+
+  const toggleSidebar = () => setSidebarOpen(!sidebarOpen);
+  const closeSidebar = () => setSidebarOpen(false);
+  const openSidebar = () => setSidebarOpen(true);
+
+  return {
+    sidebarOpen,
+    toggleSidebar,
+    closeSidebar,
+    openSidebar,
+  };
+};
+
+export const useLoading = () => {
+  const { loading, setLoading, setGlobalLoading } = useAppStore();
+
+  return {
+    loading,
+    setLoading,
+    setGlobalLoading,
+    isAnyLoading: Object.values(loading).some(Boolean),
+  };
+};
+
+export const useSelection = () => {
+  const {
+    selectedItems,
+    setSelectedItems,
+    addSelectedItem,
+    removeSelectedItem,
+    clearSelectedItems,
+  } = useAppStore();
+
+  const isSelected = (item: string) => selectedItems.includes(item);
+  const hasSelection = selectedItems.length > 0;
+
+  return {
+    selectedItems,
+    setSelectedItems,
+    addSelectedItem,
+    removeSelectedItem,
+    clearSelectedItems,
+    isSelected,
+    hasSelection,
+  };
+};
+
+export const useFilters = () => {
+  const { filters, setFilters, resetFilters } = useAppStore();
+
+  return {
+    filters,
+    setFilters,
+    resetFilters,
+    hasActiveFilters:
+      filters.search !== "" ||
+      filters.status !== "" ||
+      filters.dateRange !== null,
+  };
+};
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..c24cee4
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,66 @@
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  permissions: number[];
+  avatar?: string;
+  status: "active" | "inactive";
+  createdAt: string;
+  lastLogin?: string;
+}
+
+export interface AuthState {
+  isAuthenticated: boolean;
+  user: User | null;
+  permissions: number[];
+  token: string | null;
+}
+
+export interface DashboardStats {
+  totalUsers: number;
+  totalRevenue: number;
+  totalOrders: number;
+  totalProducts: number;
+  monthlyGrowth: number;
+  weeklyGrowth: number;
+}
+
+export interface ChartData {
+  name: string;
+  value: number;
+  date?: string;
+}
+
+export interface TableColumn {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  render?: (value: any, row: any) => any;
+}
+
+export interface TableData {
+  [key: string]: any;
+}
+
+export interface MenuItem {
+  id: string;
+  label: string;
+  icon: any;
+  path: string;
+  permission?: number;
+  children?: MenuItem[];
+}
+
+export interface Theme {
+  mode: "light" | "dark";
+}
+
+export interface Notification {
+  id: string;
+  title: string;
+  message: string;
+  type: "success" | "error" | "warning" | "info";
+  timestamp: string;
+  read: boolean;
+}
diff --git a/src/utils/validationSchemas.ts b/src/utils/validationSchemas.ts
new file mode 100644
index 0000000..2baf829
--- /dev/null
+++ b/src/utils/validationSchemas.ts
@@ -0,0 +1,46 @@
+import * as yup from "yup";
+
+export const loginSchema = yup.object({
+  email: yup
+    .string()
+    .required("ایمیل الزامی است")
+    .email("فرمت ایمیل صحیح نیست"),
+  password: yup
+    .string()
+    .required("رمز عبور الزامی است")
+    .min(6, "رمز عبور باید حداقل ۶ کاراکتر باشد"),
+});
+
+export const userSchema = yup.object({
+  name: yup
+    .string()
+    .required("نام الزامی است")
+    .min(2, "نام باید حداقل ۲ کاراکتر باشد"),
+  email: yup
+    .string()
+    .required("ایمیل الزامی است")
+    .email("فرمت ایمیل صحیح نیست"),
+  phone: yup
+    .string()
+    .required("شماره تلفن الزامی است")
+    .matches(/^09\d{9}$/, "شماره تلفن صحیح نیست"),
+  role: yup.string().required("نقش الزامی است"),
+  password: yup
+    .string()
+    .optional()
+    .min(6, "رمز عبور باید حداقل ۶ کاراکتر باشد"),
+});
+
+export const settingsSchema = yup.object({
+  siteName: yup.string().required("نام سایت الزامی است"),
+  siteDescription: yup.string().required("توضیحات سایت الزامی است"),
+  adminEmail: yup
+    .string()
+    .required("ایمیل مدیر الزامی است")
+    .email("فرمت ایمیل صحیح نیست"),
+  language: yup.string().required("زبان الزامی است"),
+});
+
+export type LoginFormData = yup.InferType<typeof loginSchema>;
+export type UserFormData = yup.InferType<typeof userSchema>;
+export type SettingsFormData = yup.InferType<typeof settingsSchema>;
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..29c29a1
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..a800194
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,44 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: "#eff6ff",
+          500: "#3b82f6",
+          600: "#2563eb",
+          700: "#1d4ed8",
+        },
+        secondary: {
+          50: "#f9fafb",
+          100: "#f3f4f6",
+          200: "#e5e7eb",
+          300: "#d1d5db",
+          400: "#9ca3af",
+          500: "#6b7280",
+          600: "#4b5563",
+          700: "#374151",
+          800: "#1f2937",
+          900: "#111827",
+        },
+      },
+      animation: {
+        "fade-in": "fadeIn 0.5s ease-in-out",
+        "slide-up": "slideUp 0.3s ease-out",
+      },
+      keyframes: {
+        fadeIn: {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+        slideUp: {
+          "0%": { transform: "translateY(20px)", opacity: "0" },
+          "100%": { transform: "translateY(0)", opacity: "1" },
+        },
+      },
+    },
+  },
+  plugins: [],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..5413626
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..de5f0be
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": "/src",
+    },
+  },
+});

+ {title} +

+ {title} +

+ {title} +

+ خطایی رخ داده است +

+ {isEdit ? 'ویرایش کاربر' : 'افزودن کاربر جدید'} +

+ خوش آمدید +

+ {title} +

+ داشبورد +

+ کاربران اخیر +

+ ورود به پنل مدیریت +

+ اعلانات +

+ {notification.title} +

+ مدیریت سفارشات +

+ مدیریت محصولات +

+ گزارش‌ها و آمار +

+ روند فروش +

+ رشد کاربران +

+ گزارش‌های اخیر +

+ {report.title} +

+ + تنظیمات سیستم +

+ اطلاعات اصلی +