یک داشبورد مدیریتی مدرن با React که از DummyJSON API برای احراز هویت و مدیریت کاربران استفاده می‌کند. رابط کاربری دو زبانه (فارسی / انگلیسی) با پشتیبانی کامل RTL و LTR، حالت تاریک/روشن و طراحی واکنش‌گرا برای موبایل و دسکتاپ.
نسخه زنده: admin-panel-tan-mu.vercel.app
- ورود با DummyJSON (
/auth/login) - ذخیره access token و refresh token در Zustand (persist)
- تازه‌سازی خودکار توکن هنگام انقضا
- مسیرهای محافظت‌شده و هدایت مهمان به صفحه ورود
- کارت‌های آماری: کل کاربران، نقش‌های فعال، مدیران، کاربران عادی
- نمودار میله‌ای توزیع کاربران بر اساس نقش (Recharts)
- اسکلتون لودر هنگام بارگذاری
- لیست کاربران با pagination
- جستجو بر اساس نام و فیلتر نقش
- افزودن، ویرایش و حذف کاربر (CRUD)
- اعتبارسنجی فرم با Zod
- حذف خوش‌بینانه (Optimistic Delete)
- نمای جدول در دسکتاپ و کارت در موبایل
- نقش‌های پیش‌فرض (Admin، Moderator، User)
- ایجاد نقش سفارشی با انتخاب permission
- ویرایش و حذف نقش‌های سفارشی
- دو زبانه: فارسی (پیش‌فرض) و انگلیسی
- RTL/LTR: منوی کشویی از راست در فارسی
- تم: حالت روشن و تاریک
- واکنش‌گرا: هدر موبایل، نوار پایین، drawer کناری
- Error Boundary برای خطاهای غیرمنتظره
- اسکلتون لودر در جداول و داشبورد
| لایه | ابزار |
|---|---|
| UI | React 19, TypeScript, Tailwind CSS v4 |
| Build | Vite 8 |
| Routing | React Router v7 |
| State | Zustand (persist) |
| Data | TanStack Query, TanStack Table |
| Validation | Zod |
| Charts | Recharts |
| API | DummyJSON |
- Node.js 18+
- npm
git clone <repo-url>
cd admin-panel
npm install
npm run devمرورگر را باز کنید: http://localhost:5173
| فیلد | مقدار |
|---|---|
| نام کاربری | emilys |
| رمز عبور | emilyspass |
npm run dev # سرور توسعه
npm run build # بیلد production
npm run preview # پیش‌نمایش بیلد
npm run lint # ESLint
npm run record:demo # ضبط GIF دمو (سرور dev باید در حال اجرا باشد)src/
├── app/ # router, store, query-client, theme, locale
├── pages/ # LoginPage, DashboardPage, UsersPage, RolesPage
├── features/
│ ├── auth/ # Login, AuthProvider, JWT
│ ├── users/ # CRUD, filters, table
│ ├── roles/ # Roles & permissions
│ └── dashboard/ # Stats & chart
├── shared/
│ ├── components/ # Layout, Modal, DataTable, ...
│ ├── i18n/ # fa.ts, en.ts
│ ├── hooks/
│ ├── schemas/ # Zod schemas
│ └── services/ # API client
└── assets/
- Feature-based: هر ماژول (auth, users, roles) شامل components، hooks، services و store خودش است
- Shared layer: کامپوننت‌ها، i18n، API client و utilityهای مشترک
- Protected routes:
ProtectedRouteوGuestRouteدر router - Optimistic updates: حذف کاربر قبل از پاسخ سرور در UI اعمال می‌شود
پروژه از DummyJSON استفاده می‌کند:
POST /auth/login— ورودPOST /auth/refresh— تازه‌سازی توکنGET /users— لیست کاربران (pagination, search)POST /users/add— افزودن کاربرPUT /users/:id— ویرایشDELETE /users/:id— حذف
| English | README.en.md |
| Index | README.md |