5.5 KiB

Raw Blame History

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

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

مراحل نصب

کلون کردن پروژه

git clone <repository-url>
cd admin-panel

نصب dependencies
```
npm install
```
اجرای پروژه
```
npm run dev
```
مشاهده در مرورگر
```
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

کمک به توسعه

برای کمک به توسعه این پروژه:

Fork کنید
شاخه جدید بسازید
تغییرات خود را commit کنید
Pull Request ارسال کنید

لایسنس

این پروژه تحت لایسنس MIT منتشر شده است.

5.5 KiB Raw Blame History