181 lines
5.5 KiB
Markdown
181 lines
5.5 KiB
Markdown
# پنل مدیریت مدرن
|
|
|
|
یک پنل مدیریت کامل و مدرن با 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 منتشر شده است.
|