Dashbourd Admin Page
تفاصيل العمل
هذا المشروع هو تطبيق لوحة تحكم إدارية React متكامل يحتوي على كل من المكونات الأمامية والخلفية. إليك وصف تفصيلي:
الهيكلية:
الواجهة الأمامية: مبنية باستخدام React، مع استخدام الــhooks الحديثة والمكونات الوظيفية.
الخلفية: خادم Express.js يوفر نقاط نهاية REST API للبيانات.
إدارة الحالة: Zustand لإدارة الحالة العامة.
إطار العمل للواجهة: Tailwind CSS مع مكونات shadcn/ui.
التوجيه: wouter للتنقل بين الصفحات.
استعلام البيانات: TanStack Query (React Query) للنداءات API.
الرسوم البيانية: Recharts للتصور البياني للبيانات.
الأنيميشن: Framer Motion للانتقالات السلسة.
الميزات الرئيسية:
نظام المصادقة:
شاشة تسجيل دخول مع التحقق من صحة النموذج.
بيانات الدخول التجريبية (admin/admin123).
إدارة جلسات المستخدم.
نظرة عامة على لوحة التحكم:
بطاقات الإحصائيات التي تعرض المقاييس الرئيسية (الإيرادات، الطلبات، إلخ).
رسم بياني للمبيعات مع تصفية الفترات الزمنية.
مخطط دائري لتوزيع المنتجات.
جدول للطلبات الأخيرة مع مؤشرات الحالة.
صفحات إدارة البيانات:
المستخدمون: وظائف عرض، تعديل، وحذف مع الصور الرمزية.
المنتجات: تنسيق شبكة مع تصفية، ترتيب، وبحث.
الطلبات: تتبع الطلبات مع مؤشرات الحالة والإحصائيات.
التقارير: أنواع متعددة من الرسوم البيانية لتحليلات البيانات.
ميزات واجهة المستخدم/تجربة المستخدم:
التبديل بين الوضع الداكن والفاتح مع الكشف عن تفضيلات النظام.
تصميم استجابة يعمل على الهواتف المحمولة، الأجهزة اللوحية، وأجهزة الكمبيوتر المكتبية.
عناصر تفاعلية مع تأثيرات التمرير والرسوم المتحركة.
إشعارات Toast لتغذية راجعة للمستخدم.
جداول بيانات مع البحث، التصفح، والترتيب.
تنفيذ الخلفية:
تخزين البيانات في الذاكرة (MemStorage class).
نقاط نهاية RESTful API لجميع الكيانات.
توليد بيانات وهمية للعرض التوضيحي.
التنفيذ التقني:
هيكلية قائمة على المكونات مع فصل المهام.
تطوير آمن باستخدام TypeScript.
تحسين عملية الرندرة باستخدام ذاكرة التخزين المؤقت من React Query.
هيكلية كود نظيفة وسهلة الصيانة باستخدام الــhooks والأدوات.
أسلوب تصميم حديث باستخدام Tailwind CSS ومكتبة المكونات.
هذا التطبيق يبرز أفضل الممارسات في تطوير React، تصميم واجهات المستخدم الحديثة، وإدارة الحالة الفعالة لواجهات لوحة التحكم الإدارية.