Admin Dashboard
تفاصيل العمل
لوحة تحكم الأدمن (Admin Dashboard)
لوحة تحكم إدارية عصرية ومتجاوبة تم بناؤها باستخدام React و TypeScript و Tailwind CSS. توفر نظامًا متكاملًا لإدارة المستخدمين والطلبات مع نظام صلاحيات مبني على الأدوار، وتصميم Mobile-First أنيق وسلس.
المميزات الرئيسية
المصادقة والصلاحيات
نظام أدوار بثلاث مستويات: Super Admin – Admin – User
التحكم في الصلاحيات حسب الدور (Role-Based Access Control)
تسجيل دخول آمن باستخدام البريد الإلكتروني وكلمة المرور
إدارة حالة الحساب (نشط / محظور)
لوحة التحكم الرئيسية
إحصائيات الطلبات (إجمالي – قيد الانتظار – تم الشحن)
عرض عدد المستخدمين الإجمالي
اختصارات سريعة لصفحات المستخدمين والطلبات
شبكة إحصائيات متجاوبة (عمودين على الموبايل – أربعة على الديسكتوب)
إدارة الطلبات
عرض جميع الطلبات مع التفاصيل
تحديث حالة الطلب (قيد الانتظار – مدفوع – تم الشحن – ملغي)
إنشاء طلبات جديدة للمستخدمين
إمكانية إلغاء الطلبات المعلقة
إحصائيات الإيرادات للأدمن
عرض الطلبات للمستخدمين العاديين بعدد الطلبات فقط
تصميم Cards للموبايل
جدول كامل للطلبات على الشاشات الكبيرة
إدارة المستخدمين (للأدمن فقط)
عرض جميع المستخدمين المسجلين
تغيير أدوار المستخدمين (User / Admin)
تفعيل أو حظر الحسابات
نظام صلاحيات دقيق:
Super Admin يمكنه تعديل جميع المستخدمين ما عدا نفسه
Admin يمكنه تعديل المستخدمين العاديين فقط
لا يمكن لأي مستخدم تعديل نفسه أو تعديل أدمن آخر
التصميم المتجاوب (Responsive)
قائمة جانبية للموبايل (Hamburger Menu)
شريط تنقل سفلي للوصول السريع
تصميم كروت مناسب للموبايل
أزرار مناسبة للمس (Touch Friendly)
بدون أي Scroll أفقي
هيدرز ثابتة أثناء التمرير
حسابات تجريبية
Super Admin
Email: sadmin@gmail.com
Password: sadmin123
الصلاحيات: تحكم كامل في المستخدمين والطلبات بما في ذلك الطلبات الملغاة
Admin
Email: admin@gmail.com
Password: admin123
الصلاحيات: إدارة المستخدمين العاديين والطلبات (ما عدا الملغاة)
User
Email: user@gmail.com
Password: user123
الصلاحيات: إنشاء الطلبات وعرض طلباته فقط
التقنيات المستخدمة
الواجهة الأمامية
React 18
TypeScript
Vite
Tailwind CSS
إدارة الحالة والبيانات
TanStack Query
React Context
Axios
الواجهة والتصميم
Lucide React
Sonner (Toast Notifications)
مكونات مخصصة باستخدام Tailwind
الباك إند (Mock)
JSON Server
db.json
هيكل المشروع
admin-dashboard/
├── src/
│ ├── api/
│ ├── auth/
│ ├── components/
│ ├── hooks/
│ ├── pages/
│ ├── providers/
│ ├── types/
│ ├── App.tsx
│ └── main.tsx
├── db.json
├── package.json
└── README.md
الصلاحيات حسب الدور
Super Admin
تعديل جميع المستخدمين
تعديل الطلبات الملغاة
وصول كامل لكل أجزاء النظام
Admin
إدارة المستخدمين العاديين
إدارة الطلبات
عرض إحصائيات الإيرادات
User
إنشاء الطلبات
عرض طلباته فقط
إلغاء الطلبات المعلقة