From 2e1f8cb053eebe14945b35c7d60ffa1f9be8c804 Mon Sep 17 00:00:00 2001 From: hosseintaromi Date: Sat, 14 Jun 2025 14:24:49 +0330 Subject: [PATCH] docs(root): update README to English --- README.md | 221 ++++++++++++++++++------------------------------------ 1 file changed, 71 insertions(+), 150 deletions(-) diff --git a/README.md b/README.md index 47af864..2360698 100644 --- a/README.md +++ b/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 - 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 - - - -``` +## 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)