docs(root): update README to English
This commit is contained in:
parent
50e1034d46
commit
2e1f8cb053
205
README.md
205
README.md
|
|
@ -1,180 +1,101 @@
|
||||||
# پنل مدیریت مدرن
|
# Mazane - Modern Admin Dashboard
|
||||||
|
|
||||||
یک پنل مدیریت کامل و مدرن با React TypeScript و Tailwind CSS که کاملاً responsive است و قابلیت‌های پیشرفته‌ای دارد.
|
A modern, responsive admin dashboard built with React, TypeScript, and Vite. This project provides a comprehensive solution for managing users, products, orders, and analytics.
|
||||||
|
|
||||||
## ویژگی‌ها
|
## Features
|
||||||
|
|
||||||
### 🎨 طراحی و UI/UX
|
- 🎨 Modern and responsive UI with Tailwind CSS
|
||||||
|
- 📊 Interactive charts and analytics
|
||||||
|
- 👥 User management system
|
||||||
|
- 📦 Product management
|
||||||
|
- 🛍️ Order tracking
|
||||||
|
- 🔐 Authentication and authorization
|
||||||
|
- 🌙 Dark/Light mode
|
||||||
|
- 📱 Mobile responsive design
|
||||||
|
|
||||||
- **طراحی مدرن**: استفاده از Tailwind CSS برای طراحی زیبا و مدرن
|
## Tech Stack
|
||||||
- **Responsive Design**: کاملاً سازگار با دستگاه‌های مختلف
|
|
||||||
- **Dark/Light Mode**: قابلیت تغییر تم تاریک و روشن
|
|
||||||
- **انیمیشن‌های نرم**: استفاده از انیمیشن‌های CSS برای تجربه کاربری بهتر
|
|
||||||
|
|
||||||
### 🔐 احراز هویت و امنیت
|
- React 18
|
||||||
|
- TypeScript
|
||||||
|
- Vite
|
||||||
|
- Tailwind CSS
|
||||||
|
- React Query
|
||||||
|
- React Router
|
||||||
|
- Chart.js
|
||||||
|
- Zustand (State Management)
|
||||||
|
- React Hook Form
|
||||||
|
- Zod (Validation)
|
||||||
|
|
||||||
- **سیستم لاگین**: احراز هویت با ایمیل و رمز عبور
|
## Getting Started
|
||||||
- **Access Control**: سیستم کنترل دسترسی پیشرفته
|
|
||||||
- **Permission Wrapper**: کامپوننت کنترل دسترسی قابل استفاده مجدد
|
|
||||||
- **Protected Routes**: محافظت از مسیرها بر اساس احراز هویت
|
|
||||||
|
|
||||||
### 📊 داده‌ها و نمودارها
|
### Prerequisites
|
||||||
|
|
||||||
- **جداول هوشمند**: جداول responsive که در موبایل به صورت کارت نمایش داده می‌شوند
|
- Node.js (v18 or higher)
|
||||||
- **نمودارهای متنوع**: Bar Chart، Line Chart، Pie Chart
|
- npm or yarn
|
||||||
- **آمار و ارقام**: نمایش آمار کلیدی با انیمیشن
|
|
||||||
- **فیلتر و جستجو**: قابلیت جستجو و فیلتر داده‌ها
|
|
||||||
|
|
||||||
### 🏗️ معماری و توسعه
|
### Installation
|
||||||
|
|
||||||
- **Component-Based**: معماری مبتنی بر کامپوننت
|
1. Clone the repository:
|
||||||
- **TypeScript**: استفاده کامل از TypeScript برای type safety
|
|
||||||
- **Context API**: مدیریت state با React Context
|
|
||||||
- **Best Practices**: پیروی از بهترین شیوه‌های React
|
|
||||||
|
|
||||||
## نصب و راه‌اندازی
|
|
||||||
|
|
||||||
### پیش‌نیازها
|
|
||||||
|
|
||||||
- Node.js 18+
|
|
||||||
- npm یا yarn
|
|
||||||
|
|
||||||
### مراحل نصب
|
|
||||||
|
|
||||||
1. **کلون کردن پروژه**
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone <repository-url>
|
git clone https://github.com/hosseintaromi/mazane.git
|
||||||
cd admin-panel
|
cd mazane
|
||||||
```
|
```
|
||||||
|
|
||||||
2. **نصب dependencies**
|
2. Install dependencies:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install
|
npm install
|
||||||
|
# or
|
||||||
|
yarn install
|
||||||
```
|
```
|
||||||
|
|
||||||
3. **اجرای پروژه**
|
3. Start the development server:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
|
# or
|
||||||
|
yarn dev
|
||||||
```
|
```
|
||||||
|
|
||||||
4. **مشاهده در مرورگر**
|
4. Open [http://localhost:5173](http://localhost:5173) in your browser.
|
||||||
```
|
|
||||||
http://localhost:5173
|
|
||||||
```
|
|
||||||
|
|
||||||
## اطلاعات ورود
|
## Project Structure
|
||||||
|
|
||||||
برای تست پنل از اطلاعات زیر استفاده کنید:
|
|
||||||
|
|
||||||
- **ایمیل**: `admin@test.com`
|
|
||||||
- **رمز عبور**: `admin123`
|
|
||||||
|
|
||||||
## ساختار پروژه
|
|
||||||
|
|
||||||
```
|
```
|
||||||
src/
|
src/
|
||||||
├── components/ # کامپوننت‌های UI
|
├── components/ # Reusable UI components
|
||||||
│ ├── charts/ # کامپوننت‌های نمودار
|
├── contexts/ # React contexts
|
||||||
│ ├── common/ # کامپوننت‌های مشترک
|
├── hooks/ # Custom React hooks
|
||||||
│ ├── dashboard/ # کامپوننت‌های داشبورد
|
├── pages/ # Page components
|
||||||
│ ├── layout/ # کامپوننت‌های layout
|
├── services/ # API services
|
||||||
│ └── ui/ # کامپوننت‌های UI پایه
|
├── stores/ # State management
|
||||||
├── contexts/ # Context های React
|
├── types/ # TypeScript types
|
||||||
├── pages/ # صفحات اصلی
|
└── utils/ # Utility functions
|
||||||
├── types/ # تایپ‌های TypeScript
|
|
||||||
└── App.tsx # کامپوننت اصلی
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## سیستم دسترسی
|
## Available Scripts
|
||||||
|
|
||||||
پنل دارای سیستم دسترسی پیشرفته‌ای است که بر اساس کدهای عددی عمل می‌کند:
|
- `npm run dev` - Start development server
|
||||||
|
- `npm run build` - Build for production
|
||||||
|
- `npm run preview` - Preview production build
|
||||||
|
- `npm run lint` - Run ESLint
|
||||||
|
- `npm run type-check` - Run TypeScript type checking
|
||||||
|
|
||||||
- **10**: دسترسی کاربران
|
## Contributing
|
||||||
- **15**: دسترسی محصولات
|
|
||||||
- **20**: دسترسی آنالیتیکس
|
|
||||||
- **22**: دسترسی حذف کاربر
|
|
||||||
- **25**: دسترسی افزودن جدید
|
|
||||||
- **30**: دسترسی تنظیمات
|
|
||||||
|
|
||||||
### استفاده از Permission Wrapper
|
1. Fork the repository
|
||||||
|
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
||||||
|
3. Commit your changes (`git commit -m 'feat(feature): add amazing feature'`)
|
||||||
|
4. Push to the branch (`git push origin feature/amazing-feature`)
|
||||||
|
5. Open a Pull Request
|
||||||
|
|
||||||
```tsx
|
## License
|
||||||
<PermissionWrapper permission={22}>
|
|
||||||
<Button variant="danger">حذف</Button>
|
|
||||||
</PermissionWrapper>
|
|
||||||
```
|
|
||||||
|
|
||||||
## کامپوننت‌های اصلی
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
||||||
|
|
||||||
### Table Component
|
## Contact
|
||||||
|
|
||||||
جدول responsive که در دسکتاپ به صورت جدول و در موبایل به صورت کارت نمایش داده می‌شود.
|
Hossein Taromi - [@hosseintaromi](https://github.com/hosseintaromi)
|
||||||
|
|
||||||
### Charts
|
Project Link: [https://github.com/hosseintaromi/mazane](https://github.com/hosseintaromi/mazane)
|
||||||
|
|
||||||
- **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 منتشر شده است.
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue