chore(root): initial commit with gitignore
This commit is contained in:
commit
50e1034d46
|
|
@ -0,0 +1,38 @@
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env*.local
|
||||||
|
.env
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
|
@ -0,0 +1,180 @@
|
||||||
|
# پنل مدیریت مدرن
|
||||||
|
|
||||||
|
یک پنل مدیریت کامل و مدرن با React TypeScript و Tailwind CSS که کاملاً responsive است و قابلیت‌های پیشرفته‌ای دارد.
|
||||||
|
|
||||||
|
## ویژگی‌ها
|
||||||
|
|
||||||
|
### 🎨 طراحی و UI/UX
|
||||||
|
|
||||||
|
- **طراحی مدرن**: استفاده از Tailwind CSS برای طراحی زیبا و مدرن
|
||||||
|
- **Responsive Design**: کاملاً سازگار با دستگاه‌های مختلف
|
||||||
|
- **Dark/Light Mode**: قابلیت تغییر تم تاریک و روشن
|
||||||
|
- **انیمیشن‌های نرم**: استفاده از انیمیشن‌های CSS برای تجربه کاربری بهتر
|
||||||
|
|
||||||
|
### 🔐 احراز هویت و امنیت
|
||||||
|
|
||||||
|
- **سیستم لاگین**: احراز هویت با ایمیل و رمز عبور
|
||||||
|
- **Access Control**: سیستم کنترل دسترسی پیشرفته
|
||||||
|
- **Permission Wrapper**: کامپوننت کنترل دسترسی قابل استفاده مجدد
|
||||||
|
- **Protected Routes**: محافظت از مسیرها بر اساس احراز هویت
|
||||||
|
|
||||||
|
### 📊 داده‌ها و نمودارها
|
||||||
|
|
||||||
|
- **جداول هوشمند**: جداول responsive که در موبایل به صورت کارت نمایش داده می‌شوند
|
||||||
|
- **نمودارهای متنوع**: Bar Chart، Line Chart، Pie Chart
|
||||||
|
- **آمار و ارقام**: نمایش آمار کلیدی با انیمیشن
|
||||||
|
- **فیلتر و جستجو**: قابلیت جستجو و فیلتر داده‌ها
|
||||||
|
|
||||||
|
### 🏗️ معماری و توسعه
|
||||||
|
|
||||||
|
- **Component-Based**: معماری مبتنی بر کامپوننت
|
||||||
|
- **TypeScript**: استفاده کامل از TypeScript برای type safety
|
||||||
|
- **Context API**: مدیریت state با React Context
|
||||||
|
- **Best Practices**: پیروی از بهترین شیوه‌های React
|
||||||
|
|
||||||
|
## نصب و راه‌اندازی
|
||||||
|
|
||||||
|
### پیش‌نیازها
|
||||||
|
|
||||||
|
- Node.js 18+
|
||||||
|
- npm یا yarn
|
||||||
|
|
||||||
|
### مراحل نصب
|
||||||
|
|
||||||
|
1. **کلون کردن پروژه**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone <repository-url>
|
||||||
|
cd admin-panel
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **نصب dependencies**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **اجرای پروژه**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **مشاهده در مرورگر**
|
||||||
|
```
|
||||||
|
http://localhost:5173
|
||||||
|
```
|
||||||
|
|
||||||
|
## اطلاعات ورود
|
||||||
|
|
||||||
|
برای تست پنل از اطلاعات زیر استفاده کنید:
|
||||||
|
|
||||||
|
- **ایمیل**: `admin@test.com`
|
||||||
|
- **رمز عبور**: `admin123`
|
||||||
|
|
||||||
|
## ساختار پروژه
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── components/ # کامپوننت‌های UI
|
||||||
|
│ ├── charts/ # کامپوننت‌های نمودار
|
||||||
|
│ ├── common/ # کامپوننت‌های مشترک
|
||||||
|
│ ├── dashboard/ # کامپوننت‌های داشبورد
|
||||||
|
│ ├── layout/ # کامپوننت‌های layout
|
||||||
|
│ └── ui/ # کامپوننت‌های UI پایه
|
||||||
|
├── contexts/ # Context های React
|
||||||
|
├── pages/ # صفحات اصلی
|
||||||
|
├── types/ # تایپ‌های TypeScript
|
||||||
|
└── App.tsx # کامپوننت اصلی
|
||||||
|
```
|
||||||
|
|
||||||
|
## سیستم دسترسی
|
||||||
|
|
||||||
|
پنل دارای سیستم دسترسی پیشرفته‌ای است که بر اساس کدهای عددی عمل می‌کند:
|
||||||
|
|
||||||
|
- **10**: دسترسی کاربران
|
||||||
|
- **15**: دسترسی محصولات
|
||||||
|
- **20**: دسترسی آنالیتیکس
|
||||||
|
- **22**: دسترسی حذف کاربر
|
||||||
|
- **25**: دسترسی افزودن جدید
|
||||||
|
- **30**: دسترسی تنظیمات
|
||||||
|
|
||||||
|
### استفاده از Permission Wrapper
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<PermissionWrapper permission={22}>
|
||||||
|
<Button variant="danger">حذف</Button>
|
||||||
|
</PermissionWrapper>
|
||||||
|
```
|
||||||
|
|
||||||
|
## کامپوننت‌های اصلی
|
||||||
|
|
||||||
|
### Table Component
|
||||||
|
|
||||||
|
جدول responsive که در دسکتاپ به صورت جدول و در موبایل به صورت کارت نمایش داده می‌شود.
|
||||||
|
|
||||||
|
### Charts
|
||||||
|
|
||||||
|
- **BarChart**: نمودار ستونی
|
||||||
|
- **LineChart**: نمودار خطی
|
||||||
|
- **PieChart**: نمودار دایره‌ای
|
||||||
|
|
||||||
|
### Button Component
|
||||||
|
|
||||||
|
دکمه‌های قابل تنظیم با انواع variant و size مختلف.
|
||||||
|
|
||||||
|
### StatsCard
|
||||||
|
|
||||||
|
کارت نمایش آمار با آیکون و درصد تغییر.
|
||||||
|
|
||||||
|
## تنظیمات Theme
|
||||||
|
|
||||||
|
پنل دارای سیستم theme پیشرفته‌ای است که شامل:
|
||||||
|
|
||||||
|
- **حالت روشن**: طراحی مینیمال با رنگ‌های روشن
|
||||||
|
- **حالت تاریک**: طراحی مدرن با رنگ‌های تیره
|
||||||
|
- **تغییر خودکار**: تغییر theme بر اساس تنظیمات سیستم
|
||||||
|
- **ذخیره تنظیمات**: ذخیره انتخاب کاربر در localStorage
|
||||||
|
|
||||||
|
## صفحات موجود
|
||||||
|
|
||||||
|
### 📊 داشبورد
|
||||||
|
|
||||||
|
- آمار کلیدی با نمودارها
|
||||||
|
- جدول کاربران اخیر
|
||||||
|
- نمودارهای تعاملی
|
||||||
|
|
||||||
|
### 👥 مدیریت کاربران
|
||||||
|
|
||||||
|
- لیست تمام کاربران
|
||||||
|
- جستجو و فیلتر
|
||||||
|
- عملیات CRUD
|
||||||
|
|
||||||
|
### 🔐 صفحه ورود
|
||||||
|
|
||||||
|
- فرم ورود زیبا و امن
|
||||||
|
- validation
|
||||||
|
- نمایش خطاها
|
||||||
|
|
||||||
|
## تکنولوژی‌های استفاده شده
|
||||||
|
|
||||||
|
- **React 18**: کتابخانه اصلی UI
|
||||||
|
- **TypeScript**: برای type safety
|
||||||
|
- **Tailwind CSS**: برای styling
|
||||||
|
- **React Router**: برای routing
|
||||||
|
- **Recharts**: برای نمودارها
|
||||||
|
- **Lucide React**: برای آیکون‌ها
|
||||||
|
- **Vite**: برای build و development
|
||||||
|
|
||||||
|
## کمک به توسعه
|
||||||
|
|
||||||
|
برای کمک به توسعه این پروژه:
|
||||||
|
|
||||||
|
1. Fork کنید
|
||||||
|
2. شاخه جدید بسازید
|
||||||
|
3. تغییرات خود را commit کنید
|
||||||
|
4. Pull Request ارسال کنید
|
||||||
|
|
||||||
|
## لایسنس
|
||||||
|
|
||||||
|
این پروژه تحت لایسنس MIT منتشر شده است.
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fa" dir="rtl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>پنل مدیریت</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,45 @@
|
||||||
|
{
|
||||||
|
"name": "admin-panel",
|
||||||
|
"private": true,
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@headlessui/react": "^1.7.17",
|
||||||
|
"@hookform/resolvers": "^5.1.1",
|
||||||
|
"@tanstack/react-query": "^5.80.6",
|
||||||
|
"@tanstack/react-query-devtools": "^5.80.6",
|
||||||
|
"axios": "^1.9.0",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"lucide-react": "^0.263.1",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-hook-form": "^7.57.0",
|
||||||
|
"react-hot-toast": "^2.5.2",
|
||||||
|
"react-router-dom": "^6.15.0",
|
||||||
|
"recharts": "^2.8.0",
|
||||||
|
"yup": "^1.6.1",
|
||||||
|
"zustand": "^5.0.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^24.0.0",
|
||||||
|
"@types/react": "^18.2.15",
|
||||||
|
"@types/react-dom": "^18.2.7",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||||
|
"@typescript-eslint/parser": "^6.0.0",
|
||||||
|
"@vitejs/plugin-react": "^4.0.3",
|
||||||
|
"autoprefixer": "^10.4.14",
|
||||||
|
"eslint": "^8.45.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.3",
|
||||||
|
"postcss": "^8.4.27",
|
||||||
|
"tailwindcss": "^3.3.3",
|
||||||
|
"typescript": "^5.0.2",
|
||||||
|
"vite": "^4.4.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
||||||
|
import { QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
||||||
|
import { AuthProvider } from './contexts/AuthContext';
|
||||||
|
import { ThemeProvider } from './contexts/ThemeContext';
|
||||||
|
import { ToastProvider } from './contexts/ToastContext';
|
||||||
|
import { ErrorBoundary } from './components/common/ErrorBoundary';
|
||||||
|
import { queryClient } from './lib/queryClient';
|
||||||
|
import { useAuth } from './contexts/AuthContext';
|
||||||
|
import { Login } from './pages/Login';
|
||||||
|
import { Dashboard } from './pages/Dashboard';
|
||||||
|
import { Users } from './pages/Users';
|
||||||
|
import Products from './pages/Products';
|
||||||
|
import { Orders } from './pages/Orders';
|
||||||
|
import { Reports } from './pages/Reports';
|
||||||
|
import { Notifications } from './pages/Notifications';
|
||||||
|
import { Layout } from './components/layout/Layout';
|
||||||
|
|
||||||
|
const ProtectedRoute = ({ children }: { children: any }) => {
|
||||||
|
const { user } = useAuth();
|
||||||
|
return user ? children : <Navigate to="/login" replace />;
|
||||||
|
};
|
||||||
|
|
||||||
|
const AppRoutes = () => {
|
||||||
|
return (
|
||||||
|
<Routes>
|
||||||
|
<Route path="/login" element={<Login />} />
|
||||||
|
<Route path="/" element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<Layout />
|
||||||
|
</ProtectedRoute>
|
||||||
|
}>
|
||||||
|
<Route index element={<Dashboard />} />
|
||||||
|
<Route path="users" element={<Users />} />
|
||||||
|
<Route path="products" element={<Products />} />
|
||||||
|
<Route path="orders" element={<Orders />} />
|
||||||
|
<Route path="reports" element={<Reports />} />
|
||||||
|
<Route path="notifications" element={<Notifications />} />
|
||||||
|
</Route>
|
||||||
|
</Routes>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<ErrorBoundary>
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<ThemeProvider>
|
||||||
|
<ToastProvider>
|
||||||
|
<AuthProvider>
|
||||||
|
<Router>
|
||||||
|
<AppRoutes />
|
||||||
|
</Router>
|
||||||
|
</AuthProvider>
|
||||||
|
</ToastProvider>
|
||||||
|
</ThemeProvider>
|
||||||
|
<ReactQueryDevtools initialIsOpen={false} />
|
||||||
|
</QueryClientProvider>
|
||||||
|
</ErrorBoundary>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
import { BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||||
|
import { ChartData } from '../../types';
|
||||||
|
|
||||||
|
interface BarChartProps {
|
||||||
|
data: ChartData[];
|
||||||
|
title?: string;
|
||||||
|
color?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BarChart = ({ data, title, color = '#3b82f6' }: BarChartProps) => {
|
||||||
|
return (
|
||||||
|
<div className="card p-6">
|
||||||
|
{title && (
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
)}
|
||||||
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
|
<RechartsBarChart data={data}>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" className="stroke-gray-300 dark:stroke-gray-600" />
|
||||||
|
<XAxis
|
||||||
|
dataKey="name"
|
||||||
|
className="text-gray-600 dark:text-gray-400"
|
||||||
|
tick={{ fontSize: 12 }}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
className="text-gray-600 dark:text-gray-400"
|
||||||
|
tick={{ fontSize: 12 }}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: 'var(--tooltip-bg)',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '8px',
|
||||||
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
||||||
|
}}
|
||||||
|
labelStyle={{ color: 'var(--tooltip-text)' }}
|
||||||
|
/>
|
||||||
|
<Bar dataKey="value" fill={color} radius={[4, 4, 0, 0]} />
|
||||||
|
</RechartsBarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
import { LineChart as RechartsLineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||||
|
import { ChartData } from '../../types';
|
||||||
|
|
||||||
|
interface LineChartProps {
|
||||||
|
data: ChartData[];
|
||||||
|
title?: string;
|
||||||
|
color?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LineChart = ({ data, title, color = '#10b981' }: LineChartProps) => {
|
||||||
|
return (
|
||||||
|
<div className="card p-6">
|
||||||
|
{title && (
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
)}
|
||||||
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
|
<RechartsLineChart data={data}>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" className="stroke-gray-300 dark:stroke-gray-600" />
|
||||||
|
<XAxis
|
||||||
|
dataKey="name"
|
||||||
|
className="text-gray-600 dark:text-gray-400"
|
||||||
|
tick={{ fontSize: 12 }}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
className="text-gray-600 dark:text-gray-400"
|
||||||
|
tick={{ fontSize: 12 }}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: 'var(--tooltip-bg)',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '8px',
|
||||||
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
||||||
|
}}
|
||||||
|
labelStyle={{ color: 'var(--tooltip-text)' }}
|
||||||
|
/>
|
||||||
|
<Line type="monotone" dataKey="value" stroke={color} strokeWidth={3} dot={{ r: 6 }} />
|
||||||
|
</RechartsLineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
|
||||||
|
import { ChartData } from '../../types';
|
||||||
|
|
||||||
|
interface PieChartProps {
|
||||||
|
data: ChartData[];
|
||||||
|
title?: string;
|
||||||
|
colors?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULT_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
|
||||||
|
|
||||||
|
export const PieChart = ({ data, title, colors = DEFAULT_COLORS }: PieChartProps) => {
|
||||||
|
return (
|
||||||
|
<div className="card p-6">
|
||||||
|
{title && (
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
)}
|
||||||
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
|
<RechartsPieChart>
|
||||||
|
<Pie
|
||||||
|
data={data}
|
||||||
|
cx="50%"
|
||||||
|
cy="50%"
|
||||||
|
labelLine={false}
|
||||||
|
label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
|
||||||
|
outerRadius={80}
|
||||||
|
fill="#8884d8"
|
||||||
|
dataKey="value"
|
||||||
|
>
|
||||||
|
{data.map((entry, index) => (
|
||||||
|
<Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
|
||||||
|
))}
|
||||||
|
</Pie>
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: 'var(--tooltip-bg)',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '8px',
|
||||||
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
||||||
|
}}
|
||||||
|
labelStyle={{ color: 'var(--tooltip-text)' }}
|
||||||
|
/>
|
||||||
|
</RechartsPieChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,127 @@
|
||||||
|
import React, { Component, ErrorInfo, ReactNode } from 'react';
|
||||||
|
import { AlertTriangle, RefreshCw, Home } from 'lucide-react';
|
||||||
|
import { Button } from '../ui/Button';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: ReactNode;
|
||||||
|
fallback?: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
hasError: boolean;
|
||||||
|
error?: Error;
|
||||||
|
errorInfo?: ErrorInfo;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ErrorBoundary extends Component<Props, State> {
|
||||||
|
constructor(props: Props) {
|
||||||
|
super(props);
|
||||||
|
this.state = { hasError: false };
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromError(error: Error): State {
|
||||||
|
return { hasError: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||||
|
this.setState({
|
||||||
|
error,
|
||||||
|
errorInfo,
|
||||||
|
});
|
||||||
|
|
||||||
|
console.error('ErrorBoundary caught an error:', error, errorInfo);
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
this.logErrorToService(error, errorInfo);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private logErrorToService = (error: Error, errorInfo: ErrorInfo) => {
|
||||||
|
console.log('Error logged to service:', { error, errorInfo });
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleRetry = () => {
|
||||||
|
this.setState({ hasError: false, error: undefined, errorInfo: undefined });
|
||||||
|
};
|
||||||
|
|
||||||
|
private handleGoHome = () => {
|
||||||
|
window.location.href = '/';
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (this.state.hasError) {
|
||||||
|
if (this.props.fallback) {
|
||||||
|
return this.props.fallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
|
||||||
|
<div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 text-center">
|
||||||
|
<div className="mb-4">
|
||||||
|
<AlertTriangle className="h-16 w-16 text-red-500 mx-auto" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||||
|
خطایی رخ داده است
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
||||||
|
متأسفانه مشکلی در برنامه رخ داده است. لطفاً دوباره تلاش کنید یا با پشتیبانی تماس بگیرید.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{process.env.NODE_ENV === 'development' && this.state.error && (
|
||||||
|
<details className="mb-6 text-left">
|
||||||
|
<summary className="cursor-pointer text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||||
|
جزئیات خطا (فقط در حالت توسعه)
|
||||||
|
</summary>
|
||||||
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3">
|
||||||
|
<pre className="text-xs text-red-700 dark:text-red-300 overflow-auto">
|
||||||
|
{this.state.error.toString()}
|
||||||
|
{this.state.errorInfo?.componentStack}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3">
|
||||||
|
<Button
|
||||||
|
onClick={this.handleRetry}
|
||||||
|
className="flex-1"
|
||||||
|
variant="primary"
|
||||||
|
>
|
||||||
|
<RefreshCw className="h-4 w-4 ml-2" />
|
||||||
|
تلاش دوباره
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={this.handleGoHome}
|
||||||
|
className="flex-1"
|
||||||
|
variant="secondary"
|
||||||
|
>
|
||||||
|
<Home className="h-4 w-4 ml-2" />
|
||||||
|
بازگشت به خانه
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.props.children;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const withErrorBoundary = <P extends object>(
|
||||||
|
Component: React.ComponentType<P>,
|
||||||
|
fallback?: ReactNode
|
||||||
|
) => {
|
||||||
|
const WrappedComponent = (props: P) => (
|
||||||
|
<ErrorBoundary fallback={fallback}>
|
||||||
|
<Component {...props} />
|
||||||
|
</ErrorBoundary>
|
||||||
|
);
|
||||||
|
|
||||||
|
WrappedComponent.displayName = `withErrorBoundary(${Component.displayName || Component.name})`;
|
||||||
|
|
||||||
|
return WrappedComponent;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
|
||||||
|
interface PermissionWrapperProps {
|
||||||
|
permission: number;
|
||||||
|
children: any;
|
||||||
|
fallback?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PermissionWrapper = ({
|
||||||
|
permission,
|
||||||
|
children,
|
||||||
|
fallback = null
|
||||||
|
}: PermissionWrapperProps) => {
|
||||||
|
const { hasPermission } = useAuth();
|
||||||
|
|
||||||
|
if (!hasPermission(permission)) {
|
||||||
|
return fallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
return children;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
import { TrendingUp, TrendingDown } from 'lucide-react';
|
||||||
|
|
||||||
|
interface StatsCardProps {
|
||||||
|
title: string;
|
||||||
|
value: string | number;
|
||||||
|
change?: number;
|
||||||
|
icon: any;
|
||||||
|
color?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StatsCard = ({
|
||||||
|
title,
|
||||||
|
value,
|
||||||
|
change,
|
||||||
|
icon: Icon,
|
||||||
|
color = 'blue'
|
||||||
|
}: StatsCardProps) => {
|
||||||
|
const colorClasses = {
|
||||||
|
blue: 'bg-blue-500',
|
||||||
|
green: 'bg-green-500',
|
||||||
|
yellow: 'bg-yellow-500',
|
||||||
|
red: 'bg-red-500',
|
||||||
|
purple: 'bg-purple-500',
|
||||||
|
};
|
||||||
|
|
||||||
|
const isPositive = change && change > 0;
|
||||||
|
const isNegative = change && change < 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card p-6 animate-fade-in">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<div className={`p-3 rounded-lg ${colorClasses[color as keyof typeof colorClasses] || colorClasses.blue}`}>
|
||||||
|
<Icon className="h-6 w-6 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mr-5 w-0 flex-1">
|
||||||
|
<dl>
|
||||||
|
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
|
||||||
|
{title}
|
||||||
|
</dt>
|
||||||
|
<dd className="flex items-baseline">
|
||||||
|
<div className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{typeof value === 'number' ? value.toLocaleString() : value}
|
||||||
|
</div>
|
||||||
|
{change !== undefined && (
|
||||||
|
<div className={`mr-2 flex items-baseline text-sm font-semibold ${isPositive ? 'text-green-600' : isNegative ? 'text-red-600' : 'text-gray-500'
|
||||||
|
}`}>
|
||||||
|
{isPositive && <TrendingUp className="h-4 w-4 flex-shrink-0 self-center ml-1" />}
|
||||||
|
{isNegative && <TrendingDown className="h-4 w-4 flex-shrink-0 self-center ml-1" />}
|
||||||
|
<span className="sr-only">
|
||||||
|
{isPositive ? 'افزایش' : 'کاهش'}
|
||||||
|
</span>
|
||||||
|
{Math.abs(change)}%
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,129 @@
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { yupResolver } from '@hookform/resolvers/yup';
|
||||||
|
import { User, Phone, Mail, UserCircle } from 'lucide-react';
|
||||||
|
import { Input } from '../ui/Input';
|
||||||
|
import { Button } from '../ui/Button';
|
||||||
|
import { userSchema, UserFormData } from '../../utils/validationSchemas';
|
||||||
|
|
||||||
|
interface UserFormProps {
|
||||||
|
initialData?: Partial<UserFormData>;
|
||||||
|
onSubmit: (data: UserFormData) => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
loading?: boolean;
|
||||||
|
isEdit?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const UserForm = ({
|
||||||
|
initialData,
|
||||||
|
onSubmit,
|
||||||
|
onCancel,
|
||||||
|
loading = false,
|
||||||
|
isEdit = false
|
||||||
|
}: UserFormProps) => {
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors, isValid },
|
||||||
|
} = useForm<UserFormData>({
|
||||||
|
resolver: yupResolver(userSchema),
|
||||||
|
mode: 'onChange',
|
||||||
|
defaultValues: initialData,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card p-6">
|
||||||
|
<div className="mb-6">
|
||||||
|
<h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
{isEdit ? 'ویرایش کاربر' : 'افزودن کاربر جدید'}
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||||
|
اطلاعات کاربر را وارد کنید
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<Input
|
||||||
|
label="نام و نام خانوادگی"
|
||||||
|
placeholder="علی احمدی"
|
||||||
|
icon={User}
|
||||||
|
error={errors.name?.message}
|
||||||
|
{...register('name')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label="ایمیل"
|
||||||
|
type="email"
|
||||||
|
placeholder="ali@example.com"
|
||||||
|
icon={Mail}
|
||||||
|
error={errors.email?.message}
|
||||||
|
{...register('email')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Input
|
||||||
|
label="شماره تلفن"
|
||||||
|
type="tel"
|
||||||
|
placeholder="09123456789"
|
||||||
|
icon={Phone}
|
||||||
|
error={errors.phone?.message}
|
||||||
|
{...register('phone')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
نقش
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||||||
|
<UserCircle className="h-5 w-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<select
|
||||||
|
className={`input pr-10 ${errors.role ? 'border-red-500 dark:border-red-500 focus:ring-red-500' : ''
|
||||||
|
}`}
|
||||||
|
{...register('role')}
|
||||||
|
>
|
||||||
|
<option value="">انتخاب کنید</option>
|
||||||
|
<option value="کاربر">کاربر</option>
|
||||||
|
<option value="مدیر">مدیر</option>
|
||||||
|
<option value="ادمین">ادمین</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{errors.role && (
|
||||||
|
<p className="text-sm text-red-600 dark:text-red-400">
|
||||||
|
{errors.role.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!isEdit && (
|
||||||
|
<Input
|
||||||
|
label="رمز عبور"
|
||||||
|
type="password"
|
||||||
|
placeholder="حداقل ۶ کاراکتر"
|
||||||
|
error={errors.password?.message}
|
||||||
|
{...register('password')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={onCancel}
|
||||||
|
disabled={loading}
|
||||||
|
>
|
||||||
|
انصراف
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
loading={loading}
|
||||||
|
disabled={!isValid}
|
||||||
|
>
|
||||||
|
{isEdit ? 'ویرایش' : 'افزودن'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
import { Menu, Sun, Moon, Bell, User, LogOut } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
import { useTheme } from '../../contexts/ThemeContext';
|
||||||
|
import { Button } from '../ui/Button';
|
||||||
|
|
||||||
|
interface HeaderProps {
|
||||||
|
onMenuClick: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Header = ({ onMenuClick }: HeaderProps) => {
|
||||||
|
const { user, logout } = useAuth();
|
||||||
|
const { mode, toggleTheme } = useTheme();
|
||||||
|
const [showUserMenu, setShowUserMenu] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="flex items-center justify-between px-4 py-3">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<button
|
||||||
|
onClick={onMenuClick}
|
||||||
|
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 lg:hidden"
|
||||||
|
>
|
||||||
|
<Menu className="h-5 w-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
</button>
|
||||||
|
<h1 className="mr-4 text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
خوش آمدید
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<button
|
||||||
|
onClick={toggleTheme}
|
||||||
|
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||||
|
>
|
||||||
|
{mode === 'dark' ? (
|
||||||
|
<Sun className="h-5 w-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
) : (
|
||||||
|
<Moon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors relative">
|
||||||
|
<Bell className="h-5 w-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
<span className="absolute top-0 left-0 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowUserMenu(!showUserMenu)}
|
||||||
|
className="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-white text-sm font-medium">
|
||||||
|
{user?.name?.charAt(0) || 'A'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden md:block">
|
||||||
|
{user?.name || 'کاربر'}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{showUserMenu && (
|
||||||
|
<div className="absolute left-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
|
||||||
|
<div className="py-1">
|
||||||
|
<div className="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||||
|
{user?.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
{user?.email}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button className="w-full text-right px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center">
|
||||||
|
<User className="h-4 w-4 ml-2" />
|
||||||
|
پروفایل
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
logout();
|
||||||
|
setShowUserMenu(false);
|
||||||
|
}}
|
||||||
|
className="w-full text-right px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center"
|
||||||
|
>
|
||||||
|
<LogOut className="h-4 w-4 ml-2" />
|
||||||
|
خروج
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import { Sidebar } from './Sidebar';
|
||||||
|
import { Header } from './Header';
|
||||||
|
|
||||||
|
export const Layout = () => {
|
||||||
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<Sidebar
|
||||||
|
isOpen={sidebarOpen}
|
||||||
|
onClose={() => setSidebarOpen(false)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex-1 flex flex-col overflow-hidden">
|
||||||
|
<Header onMenuClick={() => setSidebarOpen(true)} />
|
||||||
|
|
||||||
|
<main className="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-900">
|
||||||
|
<Outlet />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,223 @@
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { NavLink } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
LayoutDashboard,
|
||||||
|
Users,
|
||||||
|
ShoppingBag,
|
||||||
|
ShoppingCart,
|
||||||
|
FileText,
|
||||||
|
Bell,
|
||||||
|
Menu,
|
||||||
|
X,
|
||||||
|
ChevronDown
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { useAuth } from '../../contexts/AuthContext';
|
||||||
|
import { PermissionWrapper } from '../common/PermissionWrapper';
|
||||||
|
import { MenuItem } from '../../types';
|
||||||
|
|
||||||
|
const menuItems: MenuItem[] = [
|
||||||
|
{
|
||||||
|
id: 'dashboard',
|
||||||
|
label: 'داشبورد',
|
||||||
|
icon: LayoutDashboard,
|
||||||
|
path: '/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'users',
|
||||||
|
label: 'کاربران',
|
||||||
|
icon: Users,
|
||||||
|
path: '/users',
|
||||||
|
permission: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'products',
|
||||||
|
label: 'محصولات',
|
||||||
|
icon: ShoppingBag,
|
||||||
|
path: '/products',
|
||||||
|
permission: 15,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'orders',
|
||||||
|
label: 'سفارشات',
|
||||||
|
icon: ShoppingCart,
|
||||||
|
path: '/orders',
|
||||||
|
permission: 20,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'reports',
|
||||||
|
label: 'گزارش‌ها',
|
||||||
|
icon: FileText,
|
||||||
|
path: '/reports',
|
||||||
|
permission: 25,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'notifications',
|
||||||
|
label: 'اعلانات',
|
||||||
|
icon: Bell,
|
||||||
|
path: '/notifications',
|
||||||
|
permission: 30,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface SidebarProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
|
||||||
|
const { user } = useAuth();
|
||||||
|
const [expandedItems, setExpandedItems] = useState<string[]>([]);
|
||||||
|
|
||||||
|
const toggleExpanded = (itemId: string) => {
|
||||||
|
setExpandedItems(prev =>
|
||||||
|
prev.includes(itemId)
|
||||||
|
? prev.filter(id => id !== itemId)
|
||||||
|
: [...prev, itemId]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderMenuItem = (item: MenuItem) => {
|
||||||
|
const hasChildren = item.children && item.children.length > 0;
|
||||||
|
const isExpanded = expandedItems.includes(item.id);
|
||||||
|
|
||||||
|
const menuContent = (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={`flex items-center justify-between px-4 py-3 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors ${hasChildren ? 'cursor-pointer' : ''
|
||||||
|
}`}
|
||||||
|
onClick={hasChildren ? () => toggleExpanded(item.id) : undefined}
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<item.icon className="h-5 w-5 ml-3" />
|
||||||
|
<span className="font-medium">{item.label}</span>
|
||||||
|
</div>
|
||||||
|
{hasChildren && (
|
||||||
|
<ChevronDown
|
||||||
|
className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{hasChildren && isExpanded && (
|
||||||
|
<div className="mr-8 mt-1 space-y-1">
|
||||||
|
{item.children?.map(child => (
|
||||||
|
<div key={child.id}>
|
||||||
|
{child.permission ? (
|
||||||
|
<PermissionWrapper permission={child.permission}>
|
||||||
|
<NavLink
|
||||||
|
to={child.path}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`block px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors ${isActive ? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300' : ''
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
{child.label}
|
||||||
|
</NavLink>
|
||||||
|
</PermissionWrapper>
|
||||||
|
) : (
|
||||||
|
<NavLink
|
||||||
|
to={child.path}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`block px-4 py-2 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors ${isActive ? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300' : ''
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
{child.label}
|
||||||
|
</NavLink>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!hasChildren) {
|
||||||
|
return (
|
||||||
|
<NavLink
|
||||||
|
to={item.path}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center px-4 py-3 rounded-lg transition-colors ${isActive
|
||||||
|
? 'text-primary-700 dark:text-primary-300 bg-primary-100 dark:bg-primary-900'
|
||||||
|
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
<item.icon className="h-5 w-5 ml-3" />
|
||||||
|
<span className="font-medium">{item.label}</span>
|
||||||
|
</NavLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div>{menuContent}</div>;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{isOpen && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
|
||||||
|
onClick={onClose}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={`
|
||||||
|
fixed top-0 right-0 h-full w-64 bg-white dark:bg-gray-800 shadow-lg z-50 transform transition-transform duration-300 ease-in-out
|
||||||
|
${isOpen ? 'translate-x-0' : 'translate-x-full'}
|
||||||
|
lg:relative lg:translate-x-0
|
||||||
|
`}>
|
||||||
|
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
|
||||||
|
<LayoutDashboard className="h-5 w-5 text-white" />
|
||||||
|
</div>
|
||||||
|
<span className="mr-3 text-xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
پنل مدیریت
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 lg:hidden"
|
||||||
|
>
|
||||||
|
<X className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="flex items-center mb-6 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||||
|
<div className="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-white font-medium">
|
||||||
|
{user?.name?.charAt(0) || 'A'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||||
|
{user?.name || 'کاربر'}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
{user?.role || 'مدیر'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="space-y-2">
|
||||||
|
{menuItems.map(item => (
|
||||||
|
<div key={item.id}>
|
||||||
|
{item.permission ? (
|
||||||
|
<PermissionWrapper permission={item.permission}>
|
||||||
|
{renderMenuItem(item)}
|
||||||
|
</PermissionWrapper>
|
||||||
|
) : (
|
||||||
|
renderMenuItem(item)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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 (
|
||||||
|
<button
|
||||||
|
type={type}
|
||||||
|
onClick={onClick}
|
||||||
|
disabled={disabled || loading}
|
||||||
|
className={clsx(
|
||||||
|
baseClasses,
|
||||||
|
variantClasses[variant],
|
||||||
|
sizeClasses[size],
|
||||||
|
disabledClasses,
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{loading && (
|
||||||
|
<svg
|
||||||
|
className="animate-spin -ml-1 mr-2 h-4 w-4"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
className="opacity-25"
|
||||||
|
cx="12"
|
||||||
|
cy="12"
|
||||||
|
r="10"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="4"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
className="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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<HTMLInputElement, InputProps>(
|
||||||
|
({ label, error, type = 'text', placeholder, className, icon: Icon, disabled, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<div className="space-y-1">
|
||||||
|
{label && (
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
<div className="relative">
|
||||||
|
{Icon && (
|
||||||
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||||||
|
<Icon className="h-5 w-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<input
|
||||||
|
ref={ref}
|
||||||
|
type={type}
|
||||||
|
placeholder={placeholder}
|
||||||
|
disabled={disabled}
|
||||||
|
className={clsx(
|
||||||
|
'input',
|
||||||
|
Icon && 'pr-10',
|
||||||
|
error && 'border-red-500 dark:border-red-500 focus:ring-red-500',
|
||||||
|
disabled && 'opacity-50 cursor-not-allowed',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{error && (
|
||||||
|
<p className="text-sm text-red-600 dark:text-red-400">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
Input.displayName = 'Input';
|
||||||
|
|
@ -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 = (
|
||||||
|
<div className={`flex flex-col items-center justify-center ${fullScreen ? 'min-h-screen' : 'p-8'}`}>
|
||||||
|
<Loader2 className={`${sizeClasses[size]} animate-spin text-primary-600 dark:text-primary-400`} />
|
||||||
|
{text && (
|
||||||
|
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
{text}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (fullScreen) {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-white dark:bg-gray-900 z-50">
|
||||||
|
{Component}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Component;
|
||||||
|
};
|
||||||
|
|
@ -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 (
|
||||||
|
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||||
|
<div className="flex min-h-screen items-center justify-center p-4">
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
||||||
|
onClick={onClose}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className={`
|
||||||
|
relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full
|
||||||
|
${sizeClasses[size]} transform transition-all
|
||||||
|
`}>
|
||||||
|
{title && (
|
||||||
|
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||||
|
>
|
||||||
|
<X className="h-5 w-5 text-gray-500 dark:text-gray-400" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="p-6">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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 (
|
||||||
|
<div className="flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 sm:px-6">
|
||||||
|
<div className="flex flex-1 justify-between sm:hidden">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onPageChange(currentPage - 1)}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
>
|
||||||
|
قبلی
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => onPageChange(currentPage + 1)}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
>
|
||||||
|
بعدی
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-gray-700 dark:text-gray-300">
|
||||||
|
نمایش <span className="font-medium">{startItem}</span> تا{' '}
|
||||||
|
<span className="font-medium">{endItem}</span> از{' '}
|
||||||
|
<span className="font-medium">{totalItems}</span> نتیجه
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
|
||||||
|
<button
|
||||||
|
onClick={() => onPageChange(currentPage - 1)}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<ChevronRight className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{getVisiblePages().map((page, index) => (
|
||||||
|
<button
|
||||||
|
key={index}
|
||||||
|
onClick={() => typeof page === 'number' && onPageChange(page)}
|
||||||
|
disabled={page === '...'}
|
||||||
|
className={`relative inline-flex items-center px-4 py-2 border text-sm font-medium ${page === currentPage
|
||||||
|
? 'z-10 bg-primary-50 dark:bg-primary-900 border-primary-500 text-primary-600 dark:text-primary-400'
|
||||||
|
: page === '...'
|
||||||
|
? 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 cursor-default'
|
||||||
|
: 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => onPageChange(currentPage + 1)}
|
||||||
|
disabled={currentPage === totalPages}
|
||||||
|
className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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<string>('');
|
||||||
|
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 (
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="hidden md:block">
|
||||||
|
<div className="card overflow-hidden">
|
||||||
|
<div className="bg-gray-50 dark:bg-gray-700 px-6 py-3">
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
{columns.map((_, index) => (
|
||||||
|
<div key={index} className="h-4 bg-gray-300 dark:bg-gray-600 rounded flex-1"></div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{[...Array(5)].map((_, index) => (
|
||||||
|
<div key={index} className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
{columns.map((_, colIndex) => (
|
||||||
|
<div key={colIndex} className="h-4 bg-gray-300 dark:bg-gray-600 rounded flex-1"></div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:hidden space-y-4">
|
||||||
|
{[...Array(3)].map((_, index) => (
|
||||||
|
<div key={index} className="card p-4 space-y-3">
|
||||||
|
{columns.map((_, colIndex) => (
|
||||||
|
<div key={colIndex} className="space-y-1">
|
||||||
|
<div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-1/3"></div>
|
||||||
|
<div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-2/3"></div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="hidden md:block card overflow-hidden">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||||
|
<tr>
|
||||||
|
{columns.map((column) => (
|
||||||
|
<th
|
||||||
|
key={column.key}
|
||||||
|
className={clsx(
|
||||||
|
'px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider',
|
||||||
|
column.sortable && 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600'
|
||||||
|
)}
|
||||||
|
onClick={() => column.sortable && handleSort(column.key)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-end space-x-1">
|
||||||
|
<span>{column.label}</span>
|
||||||
|
{column.sortable && (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<ChevronUp
|
||||||
|
className={clsx(
|
||||||
|
'h-3 w-3',
|
||||||
|
sortField === column.key && sortDirection === 'asc'
|
||||||
|
? 'text-primary-600'
|
||||||
|
: 'text-gray-400'
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<ChevronDown
|
||||||
|
className={clsx(
|
||||||
|
'h-3 w-3 -mt-1',
|
||||||
|
sortField === column.key && sortDirection === 'desc'
|
||||||
|
? 'text-primary-600'
|
||||||
|
: 'text-gray-400'
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
{sortedData.map((row, rowIndex) => (
|
||||||
|
<tr key={rowIndex} className="hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||||
|
{columns.map((column) => (
|
||||||
|
<td key={column.key} className="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 text-right">
|
||||||
|
{column.render ? column.render(row[column.key], row) : row[column.key]}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:hidden space-y-4">
|
||||||
|
{sortedData.map((row, rowIndex) => (
|
||||||
|
<div key={rowIndex} className="card p-4 space-y-3">
|
||||||
|
{columns.map((column) => (
|
||||||
|
<div key={column.key} className="flex justify-between items-start">
|
||||||
|
<span className="text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||||
|
{column.label}:
|
||||||
|
</span>
|
||||||
|
<span className="text-sm text-gray-900 dark:text-gray-100 text-right">
|
||||||
|
{column.render ? column.render(row[column.key], row) : row[column.key]}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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<boolean>;
|
||||||
|
logout: () => void;
|
||||||
|
hasPermission: (permission: number) => boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthContext = createContext<AuthContextType | undefined>(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<boolean> => {
|
||||||
|
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 (
|
||||||
|
<AuthContext.Provider value={{
|
||||||
|
...state,
|
||||||
|
login,
|
||||||
|
logout,
|
||||||
|
hasPermission,
|
||||||
|
}}>
|
||||||
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useAuth = () => {
|
||||||
|
const context = useContext(AuthContext);
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useAuth must be used within an AuthProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { createContext, useContext, useEffect, useState } from 'react';
|
||||||
|
import { Theme } from '../types';
|
||||||
|
|
||||||
|
interface ThemeContextType extends Theme {
|
||||||
|
toggleTheme: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ThemeContext = createContext<ThemeContextType | undefined>(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 (
|
||||||
|
<ThemeContext.Provider value={{ mode, toggleTheme }}>
|
||||||
|
{children}
|
||||||
|
</ThemeContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useTheme = () => {
|
||||||
|
const context = useContext(ThemeContext);
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useTheme must be used within a ThemeProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
@ -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: <T>(
|
||||||
|
promise: Promise<T>,
|
||||||
|
messages: {
|
||||||
|
loading: string;
|
||||||
|
success: string | ((data: T) => string);
|
||||||
|
error: string | ((error: any) => string);
|
||||||
|
},
|
||||||
|
options?: ToastOptions
|
||||||
|
) => Promise<T>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ToastContext = createContext<ToastContextType | undefined>(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 = <T,>(
|
||||||
|
promise: Promise<T>,
|
||||||
|
messages: {
|
||||||
|
loading: string;
|
||||||
|
success: string | ((data: T) => string);
|
||||||
|
error: string | ((error: any) => string);
|
||||||
|
},
|
||||||
|
options?: ToastOptions
|
||||||
|
): Promise<T> => {
|
||||||
|
return toast.promise(promise, messages, { ...defaultOptions, ...options });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ToastContext.Provider
|
||||||
|
value={{
|
||||||
|
success,
|
||||||
|
error,
|
||||||
|
warning,
|
||||||
|
info,
|
||||||
|
loading,
|
||||||
|
dismiss,
|
||||||
|
promise: promiseToast,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<Toaster
|
||||||
|
position="top-center"
|
||||||
|
reverseOrder={false}
|
||||||
|
gutter={8}
|
||||||
|
containerStyle={{
|
||||||
|
direction: 'rtl',
|
||||||
|
}}
|
||||||
|
toastOptions={{
|
||||||
|
duration: 4000,
|
||||||
|
style: {
|
||||||
|
background: 'var(--toast-bg)',
|
||||||
|
color: 'var(--toast-color)',
|
||||||
|
fontFamily: 'inherit',
|
||||||
|
direction: 'rtl',
|
||||||
|
},
|
||||||
|
success: {
|
||||||
|
iconTheme: {
|
||||||
|
primary: '#10b981',
|
||||||
|
secondary: '#ffffff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
iconTheme: {
|
||||||
|
primary: '#ef4444',
|
||||||
|
secondary: '#ffffff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ToastContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useToast = () => {
|
||||||
|
const context = useContext(ToastContext);
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useToast must be used within a ToastProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
@ -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 || "خطا در حذف کاربر");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -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(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
|
|
@ -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) => (
|
||||||
|
<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: 'تاریخ عضویت' },
|
||||||
|
{
|
||||||
|
key: 'actions',
|
||||||
|
label: 'عملیات',
|
||||||
|
render: (_, row) => (
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<Button size="sm" variant="secondary">
|
||||||
|
ویرایش
|
||||||
|
</Button>
|
||||||
|
<PermissionWrapper permission={22}>
|
||||||
|
<Button size="sm" variant="danger">
|
||||||
|
حذف
|
||||||
|
</Button>
|
||||||
|
</PermissionWrapper>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Dashboard = () => {
|
||||||
|
return (
|
||||||
|
<div className="p-6 space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
داشبورد
|
||||||
|
</h1>
|
||||||
|
<div className="flex space-x-4">
|
||||||
|
<Button variant="secondary">
|
||||||
|
گزارش‌گیری
|
||||||
|
</Button>
|
||||||
|
<PermissionWrapper permission={25}>
|
||||||
|
<Button>
|
||||||
|
اضافه کردن
|
||||||
|
</Button>
|
||||||
|
</PermissionWrapper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{statsData.map((stat, index) => (
|
||||||
|
<StatsCard key={index} {...stat} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<BarChart
|
||||||
|
data={chartData}
|
||||||
|
title="فروش ماهانه"
|
||||||
|
color="#3b82f6"
|
||||||
|
/>
|
||||||
|
<LineChart
|
||||||
|
data={chartData}
|
||||||
|
title="روند رشد"
|
||||||
|
color="#10b981"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<div className="card p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||||||
|
کاربران اخیر
|
||||||
|
</h3>
|
||||||
|
<Table
|
||||||
|
columns={userColumns}
|
||||||
|
data={recentUsers}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<PieChart
|
||||||
|
data={pieData}
|
||||||
|
title="دستگاه‌های کاربری"
|
||||||
|
colors={['#3b82f6', '#10b981', '#f59e0b']}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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<LoginFormData>({
|
||||||
|
resolver: yupResolver(loginSchema),
|
||||||
|
mode: 'onChange',
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isAuthenticated) {
|
||||||
|
return <Navigate to="/" replace />;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="max-w-md w-full space-y-8">
|
||||||
|
<div>
|
||||||
|
<div className="mx-auto h-12 w-12 bg-primary-600 rounded-lg flex items-center justify-center">
|
||||||
|
<Lock className="h-6 w-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">
|
||||||
|
ورود به پنل مدیریت
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
لطفا اطلاعات خود را وارد کنید
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Input
|
||||||
|
label="ایمیل"
|
||||||
|
type="email"
|
||||||
|
placeholder="admin@test.com"
|
||||||
|
icon={Mail}
|
||||||
|
error={errors.email?.message}
|
||||||
|
{...register('email')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
رمز عبور
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
||||||
|
<Lock className="h-5 w-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
placeholder="admin123"
|
||||||
|
className={`input pr-10 pl-10 ${errors.password ? 'border-red-500 dark:border-red-500 focus:ring-red-500' : ''
|
||||||
|
}`}
|
||||||
|
{...register('password')}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="absolute inset-y-0 left-0 pl-3 flex items-center"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
>
|
||||||
|
{showPassword ? (
|
||||||
|
<EyeOff className="h-5 w-5 text-gray-400 hover:text-gray-600" />
|
||||||
|
) : (
|
||||||
|
<Eye className="h-5 w-5 text-gray-400 hover:text-gray-600" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{errors.password && (
|
||||||
|
<p className="text-sm text-red-600 dark:text-red-400">
|
||||||
|
{errors.password.message}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 px-4 py-3 rounded-lg text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-blue-600 dark:text-blue-400 px-4 py-3 rounded-lg text-sm">
|
||||||
|
<p className="font-medium">اطلاعات تست:</p>
|
||||||
|
<p>ایمیل: admin@test.com</p>
|
||||||
|
<p>رمز عبور: admin123</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
loading={loading}
|
||||||
|
disabled={!isValid}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
ورود
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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 <XCircle className="h-5 w-5 text-red-600" />;
|
||||||
|
case 'warning':
|
||||||
|
return <AlertCircle className="h-5 w-5 text-yellow-600" />;
|
||||||
|
case 'success':
|
||||||
|
return <CheckCircle className="h-5 w-5 text-green-600" />;
|
||||||
|
case 'info':
|
||||||
|
return <Info className="h-5 w-5 text-blue-600" />;
|
||||||
|
default:
|
||||||
|
return <Bell className="h-5 w-5 text-gray-600" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<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">
|
||||||
|
{unreadCount} اعلان خوانده نشده از {notifications.length} اعلان
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={handleMarkAllAsRead}
|
||||||
|
disabled={unreadCount === 0}
|
||||||
|
>
|
||||||
|
<Check className="h-4 w-4 ml-2" />
|
||||||
|
همه را خوانده شده علامت بزن
|
||||||
|
</Button>
|
||||||
|
<Button>
|
||||||
|
<Plus className="h-4 w-4 ml-2" />
|
||||||
|
اعلان جدید
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Bell className="h-8 w-8 text-blue-600" />
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل اعلانات</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{notifications.length}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<AlertCircle className="h-8 w-8 text-red-600" />
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">خوانده نشده</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{unreadCount}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<XCircle className="h-8 w-8 text-red-600" />
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">خطا</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
{notifications.filter(n => n.type === 'error').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<AlertCircle className="h-8 w-8 text-yellow-600" />
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">هشدار</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
{notifications.filter(n => n.type === 'warning').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card p-6">
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={filterType}
|
||||||
|
onChange={(e) => setFilterType(e.target.value)}
|
||||||
|
className="input min-w-[150px]"
|
||||||
|
>
|
||||||
|
<option value="all">همه اعلانات</option>
|
||||||
|
<option value="unread">خوانده نشده</option>
|
||||||
|
<option value="read">خوانده شده</option>
|
||||||
|
<option value="error">خطا</option>
|
||||||
|
<option value="warning">هشدار</option>
|
||||||
|
<option value="success">موفق</option>
|
||||||
|
<option value="info">اطلاعات</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{paginatedNotifications.map((notification) => (
|
||||||
|
<div
|
||||||
|
key={notification.id}
|
||||||
|
className={`p-4 border-r-4 ${getPriorityColor(notification.priority)} ${notification.isRead
|
||||||
|
? 'bg-gray-50 dark:bg-gray-700'
|
||||||
|
: 'bg-white dark:bg-gray-800'
|
||||||
|
} border border-gray-200 dark:border-gray-600 rounded-lg shadow-sm hover:shadow-md transition-shadow`}
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="flex items-start space-x-3">
|
||||||
|
<div className="flex-shrink-0 mt-1">
|
||||||
|
{getNotificationIcon(notification.type)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<h3 className={`text-sm font-medium ${notification.isRead
|
||||||
|
? 'text-gray-600 dark:text-gray-400'
|
||||||
|
: 'text-gray-900 dark:text-gray-100'
|
||||||
|
}`}>
|
||||||
|
{notification.title}
|
||||||
|
</h3>
|
||||||
|
{!notification.isRead && (
|
||||||
|
<div className="w-2 h-2 bg-blue-600 rounded-full"></div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className={`mt-1 text-sm ${notification.isRead
|
||||||
|
? 'text-gray-500 dark:text-gray-500'
|
||||||
|
: 'text-gray-700 dark:text-gray-300'
|
||||||
|
}`}>
|
||||||
|
{notification.message}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-2 flex items-center text-xs text-gray-500 dark:text-gray-500 space-x-4">
|
||||||
|
<span>{notification.date}</span>
|
||||||
|
<span>از: {notification.sender}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
{!notification.isRead && (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => handleMarkAsRead(notification.id)}
|
||||||
|
>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="danger"
|
||||||
|
onClick={() => handleDeleteNotification(notification.id)}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{paginatedNotifications.length === 0 && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<Bell className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||||
|
<p className="text-gray-500 dark:text-gray-400">هیچ اعلانی یافت نشد</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Pagination
|
||||||
|
currentPage={currentPage}
|
||||||
|
totalPages={totalPages}
|
||||||
|
onPageChange={setCurrentPage}
|
||||||
|
itemsPerPage={itemsPerPage}
|
||||||
|
totalItems={filteredNotifications.length}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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) => (
|
||||||
|
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||||
|
{value} تومان
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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'
|
||||||
|
: value === 'ارسال شده'
|
||||||
|
? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
|
||||||
|
: value === 'در حال پردازش'
|
||||||
|
? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
|
||||||
|
: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
|
||||||
|
}`}>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{ key: 'date', label: 'تاریخ سفارش', sortable: true },
|
||||||
|
{
|
||||||
|
key: 'actions',
|
||||||
|
label: 'عملیات',
|
||||||
|
render: (_, row) => (
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => handleViewOrder(row)}
|
||||||
|
>
|
||||||
|
مشاهده
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="primary"
|
||||||
|
onClick={() => handleEditOrder(row)}
|
||||||
|
>
|
||||||
|
ویرایش
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<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">
|
||||||
|
{filteredOrders.length} سفارش یافت شد
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<Button variant="secondary">
|
||||||
|
<Filter className="h-4 w-4 ml-2" />
|
||||||
|
فیلتر
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<ShoppingCart className="h-8 w-8 text-blue-600" />
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل سفارشات</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{allOrders.length}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<TrendingUp className="h-8 w-8 text-green-600" />
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">تحویل شده</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
{allOrders.filter(o => o.status === 'تحویل شده').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<ShoppingCart className="h-8 w-8 text-yellow-600" />
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">در انتظار</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
{allOrders.filter(o => o.status === 'در حال پردازش').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<TrendingUp className="h-8 w-8 text-purple-600" />
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل فروش</p>
|
||||||
|
<p className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
{totalRevenue.toLocaleString()} تومان
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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={paginatedOrders}
|
||||||
|
loading={loading}
|
||||||
|
/>
|
||||||
|
<Pagination
|
||||||
|
currentPage={currentPage}
|
||||||
|
totalPages={totalPages}
|
||||||
|
onPageChange={setCurrentPage}
|
||||||
|
itemsPerPage={itemsPerPage}
|
||||||
|
totalItems={filteredOrders.length}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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) => (
|
||||||
|
<span className={`font-medium ${value === 0 ? 'text-red-600 dark:text-red-400' :
|
||||||
|
value < 10 ? 'text-yellow-600 dark:text-yellow-400' :
|
||||||
|
'text-green-600 dark:text-green-400'
|
||||||
|
}`}>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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'
|
||||||
|
: value === 'کم موجود'
|
||||||
|
? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-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={() => handleEditProduct(row)}
|
||||||
|
>
|
||||||
|
ویرایش
|
||||||
|
</Button>
|
||||||
|
<PermissionWrapper permission={22}>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="danger"
|
||||||
|
onClick={() => handleDeleteProduct(row.id)}
|
||||||
|
>
|
||||||
|
حذف
|
||||||
|
</Button>
|
||||||
|
</PermissionWrapper>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
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 (
|
||||||
|
<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">
|
||||||
|
{filteredProducts.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={handleAddProduct}>
|
||||||
|
<Plus className="h-4 w-4 ml-2" />
|
||||||
|
افزودن محصول
|
||||||
|
</Button>
|
||||||
|
</PermissionWrapper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Package className="h-8 w-8 text-blue-600" />
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل محصولات</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{allProducts.length}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Package className="h-8 w-8 text-green-600" />
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">محصولات موجود</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
{allProducts.filter(p => p.status === 'موجود').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Package className="h-8 w-8 text-red-600" />
|
||||||
|
<div className="mr-3">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">محصولات ناموجود</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
{allProducts.filter(p => p.status === 'ناموجود').length}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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={paginatedProducts}
|
||||||
|
loading={loading}
|
||||||
|
/>
|
||||||
|
<Pagination
|
||||||
|
currentPage={currentPage}
|
||||||
|
totalPages={totalPages}
|
||||||
|
onPageChange={setCurrentPage}
|
||||||
|
itemsPerPage={itemsPerPage}
|
||||||
|
totalItems={filteredProducts.length}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Products;
|
||||||
|
|
@ -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 (
|
||||||
|
<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">
|
||||||
|
مشاهده و دانلود گزارش‌های مختلف سیستم
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<select
|
||||||
|
value={selectedPeriod}
|
||||||
|
onChange={(e) => setSelectedPeriod(e.target.value)}
|
||||||
|
className="input max-w-xs"
|
||||||
|
>
|
||||||
|
<option value="week">هفته گذشته</option>
|
||||||
|
<option value="month">ماه گذشته</option>
|
||||||
|
<option value="quarter">سه ماه گذشته</option>
|
||||||
|
<option value="year">سال گذشته</option>
|
||||||
|
</select>
|
||||||
|
<Button onClick={handleGenerateReport}>
|
||||||
|
<FileText className="h-4 w-4 ml-2" />
|
||||||
|
تولید گزارش جدید
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
|
||||||
|
<DollarSign className="h-6 w-6 text-blue-600 dark:text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<div className="mr-4">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل فروش</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">۱۱۱ میلیون</p>
|
||||||
|
<p className="text-xs text-green-600 dark:text-green-400">+۱۲% از ماه قبل</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="p-3 rounded-full bg-green-100 dark:bg-green-900">
|
||||||
|
<Users className="h-6 w-6 text-green-600 dark:text-green-400" />
|
||||||
|
</div>
|
||||||
|
<div className="mr-4">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">کاربران جدید</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">۳۲۰</p>
|
||||||
|
<p className="text-xs text-green-600 dark:text-green-400">+۸% از ماه قبل</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="p-3 rounded-full bg-purple-100 dark:bg-purple-900">
|
||||||
|
<ShoppingBag className="h-6 w-6 text-purple-600 dark:text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<div className="mr-4">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">کل سفارشات</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">۱,۲۵۴</p>
|
||||||
|
<p className="text-xs text-green-600 dark:text-green-400">+۱۵% از ماه قبل</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900">
|
||||||
|
<TrendingUp className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
|
||||||
|
</div>
|
||||||
|
<div className="mr-4">
|
||||||
|
<p className="text-sm font-medium text-gray-600 dark:text-gray-400">نرخ رشد</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">+۲۳%</p>
|
||||||
|
<p className="text-xs text-green-600 dark:text-green-400">بهبود یافته</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||||||
|
روند فروش
|
||||||
|
</h3>
|
||||||
|
<BarChart data={salesData} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||||||
|
رشد کاربران
|
||||||
|
</h3>
|
||||||
|
<LineChart data={userGrowthData} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow">
|
||||||
|
<div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
گزارش‌های اخیر
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{reports.map((report) => (
|
||||||
|
<div
|
||||||
|
key={report.id}
|
||||||
|
className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg ml-4">
|
||||||
|
<FileText className="h-5 w-5 text-blue-600 dark:text-blue-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-medium text-gray-900 dark:text-gray-100">
|
||||||
|
{report.title}
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
{report.description}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center mt-1 space-x-4">
|
||||||
|
<span className="text-xs text-gray-500 dark:text-gray-500">
|
||||||
|
نوع: {report.type}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500 dark:text-gray-500">
|
||||||
|
تاریخ: {report.date}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-gray-500 dark:text-gray-500">
|
||||||
|
فرمت: {report.format}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => handleDownloadReport(report.id)}
|
||||||
|
>
|
||||||
|
<Download className="h-4 w-4 ml-2" />
|
||||||
|
دانلود
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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<SettingsFormData>({
|
||||||
|
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 (
|
||||||
|
<div className="p-6 max-w-4xl mx-auto">
|
||||||
|
<div className="mb-8">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 flex items-center">
|
||||||
|
<SettingsIcon className="h-6 w-6 ml-3" />
|
||||||
|
تنظیمات سیستم
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mt-2">
|
||||||
|
تنظیمات کلی سیستم را اینجا مدیریت کنید
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
|
||||||
|
<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-6">
|
||||||
|
<Input
|
||||||
|
label="نام سایت"
|
||||||
|
placeholder="پنل مدیریت"
|
||||||
|
icon={Globe}
|
||||||
|
error={errors.siteName?.message}
|
||||||
|
{...register('siteName')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
توضیحات سایت
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
placeholder="توضیح کوتاهی درباره سایت..."
|
||||||
|
rows={4}
|
||||||
|
className={`input resize-none ${errors.siteDescription ? 'border-red-500 dark:border-red-500 focus:ring-red-500' : ''
|
||||||
|
}`}
|
||||||
|
{...register('siteDescription')}
|
||||||
|
/>
|
||||||
|
{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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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();
|
||||||
|
|
@ -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";
|
||||||
|
}
|
||||||
|
|
@ -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",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
@ -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,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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>;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly VITE_API_URL: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv;
|
||||||
|
}
|
||||||
|
|
@ -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: [],
|
||||||
|
};
|
||||||
|
|
@ -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" }]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["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",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue