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

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