docs(root): update README to English
This commit is contained in:
parent
50e1034d46
commit
2e1f8cb053
221
README.md
221
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 برای طراحی زیبا و مدرن
|
||||
- **Responsive Design**: کاملاً سازگار با دستگاه‌های مختلف
|
||||
- **Dark/Light Mode**: قابلیت تغییر تم تاریک و روشن
|
||||
- **انیمیشن‌های نرم**: استفاده از انیمیشن‌های CSS برای تجربه کاربری بهتر
|
||||
## Tech Stack
|
||||
|
||||
### 🔐 احراز هویت و امنیت
|
||||
- React 18
|
||||
- TypeScript
|
||||
- Vite
|
||||
- Tailwind CSS
|
||||
- React Query
|
||||
- React Router
|
||||
- Chart.js
|
||||
- Zustand (State Management)
|
||||
- React Hook Form
|
||||
- Zod (Validation)
|
||||
|
||||
- **سیستم لاگین**: احراز هویت با ایمیل و رمز عبور
|
||||
- **Access Control**: سیستم کنترل دسترسی پیشرفته
|
||||
- **Permission Wrapper**: کامپوننت کنترل دسترسی قابل استفاده مجدد
|
||||
- **Protected Routes**: محافظت از مسیرها بر اساس احراز هویت
|
||||
## Getting Started
|
||||
|
||||
### 📊 داده‌ها و نمودارها
|
||||
### Prerequisites
|
||||
|
||||
- **جداول هوشمند**: جداول responsive که در موبایل به صورت کارت نمایش داده می‌شوند
|
||||
- **نمودارهای متنوع**: Bar Chart، Line Chart، Pie Chart
|
||||
- **آمار و ارقام**: نمایش آمار کلیدی با انیمیشن
|
||||
- **فیلتر و جستجو**: قابلیت جستجو و فیلتر داده‌ها
|
||||
- Node.js (v18 or higher)
|
||||
- npm or yarn
|
||||
|
||||
### 🏗️ معماری و توسعه
|
||||
### Installation
|
||||
|
||||
- **Component-Based**: معماری مبتنی بر کامپوننت
|
||||
- **TypeScript**: استفاده کامل از TypeScript برای type safety
|
||||
- **Context API**: مدیریت state با React Context
|
||||
- **Best Practices**: پیروی از بهترین شیوه‌های React
|
||||
1. Clone the repository:
|
||||
|
||||
## نصب و راه‌اندازی
|
||||
```bash
|
||||
git clone https://github.com/hosseintaromi/mazane.git
|
||||
cd mazane
|
||||
```
|
||||
|
||||
### پیش‌نیازها
|
||||
2. Install dependencies:
|
||||
|
||||
- Node.js 18+
|
||||
- npm یا yarn
|
||||
```bash
|
||||
npm install
|
||||
# or
|
||||
yarn install
|
||||
```
|
||||
|
||||
### مراحل نصب
|
||||
3. Start the development server:
|
||||
|
||||
1. **کلون کردن پروژه**
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
```
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd admin-panel
|
||||
```
|
||||
4. Open [http://localhost:5173](http://localhost:5173) in your browser.
|
||||
|
||||
2. **نصب dependencies**
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. **اجرای پروژه**
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
4. **مشاهده در مرورگر**
|
||||
```
|
||||
http://localhost:5173
|
||||
```
|
||||
|
||||
## اطلاعات ورود
|
||||
|
||||
برای تست پنل از اطلاعات زیر استفاده کنید:
|
||||
|
||||
- **ایمیل**: `admin@test.com`
|
||||
- **رمز عبور**: `admin123`
|
||||
|
||||
## ساختار پروژه
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # کامپوننت‌های UI
|
||||
│ ├── charts/ # کامپوننت‌های نمودار
|
||||
│ ├── common/ # کامپوننت‌های مشترک
|
||||
│ ├── dashboard/ # کامپوننت‌های داشبورد
|
||||
│ ├── layout/ # کامپوننت‌های layout
|
||||
│ └── ui/ # کامپوننت‌های UI پایه
|
||||
├── contexts/ # Context های React
|
||||
├── pages/ # صفحات اصلی
|
||||
├── types/ # تایپ‌های TypeScript
|
||||
└── App.tsx # کامپوننت اصلی
|
||||
├── components/ # Reusable UI components
|
||||
├── contexts/ # React contexts
|
||||
├── hooks/ # Custom React hooks
|
||||
├── pages/ # Page components
|
||||
├── services/ # API services
|
||||
├── stores/ # State management
|
||||
├── types/ # TypeScript types
|
||||
└── utils/ # Utility functions
|
||||
```
|
||||
|
||||
## سیستم دسترسی
|
||||
## 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**: دسترسی کاربران
|
||||
- **15**: دسترسی محصولات
|
||||
- **20**: دسترسی آنالیتیکس
|
||||
- **22**: دسترسی حذف کاربر
|
||||
- **25**: دسترسی افزودن جدید
|
||||
- **30**: دسترسی تنظیمات
|
||||
## Contributing
|
||||
|
||||
### استفاده از 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
|
||||
<PermissionWrapper permission={22}>
|
||||
<Button variant="danger">حذف</Button>
|
||||
</PermissionWrapper>
|
||||
```
|
||||
## License
|
||||
|
||||
## کامپوننت‌های اصلی
|
||||
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
|
||||
|
||||
- **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 منتشر شده است.
|
||||
Project Link: [https://github.com/hosseintaromi/mazane](https://github.com/hosseintaromi/mazane)
|
||||
|
|
|
|||
Loading…
Reference in New Issue