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

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

   git clone <repository-url>
   cd admin-panel
   

2. نصب dependencies

   npm install
   

3. اجرای پروژه

   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

<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 منتشر شده است.