Dashboard ( AdminPro)

لوحة تحكم إدارية حديثة – React Admin Dashboard

وصف المشروع:

تطبيق ويب متكامل تم تطويره باستخدام React, TypeScript, وVite، يهدف إلى توفير واجهة إدارية حديثة، منظمة، وسريعة الاستجابة لإدارة المستخدمين، الطلبات، الرسائل، والإعدادات. يعتمد المشروع على تصميم نظيف باستخدام Tailwind CSS، ورسوم متحركة سلسة بفضل Framer Motion.

️ أهم الخصائص:

نظرة عامة على الأداء

عرض مؤشرات الأداء الرئيسية (الإيرادات، المستخدمين النشطين، معدل التحويل)

رسوم بيانية تفاعلية (خطية، أعمدة، دائرية، ثلاثية الأبعاد) باستخدام Recharts وThree.js

إدارة المستخدمين

جدول بحث وفرز للمستخدمين حسب الدور والحالة

خيارات تصفية وتقسيم الصفحات (Pagination)

? إدارة الطلبات

جدول تفصيلي لعرض وتتبع الطلبات

بحث وفرز وتنقل سريع بين الصفحات

نظام المراسلة

واجهة لقراءة والرد على رسائل المستخدمين

عرض مقسم لقائمة الرسائل والمحتوى التفصيلي

️ الإعدادات

واجهة متعددة التبويبات للتحكم في:

الإعدادات العامة

المظهر

الإشعارات

الأمان

التكاملات (Integrations)

إدارة الملف الشخصي

تحديث البيانات الشخصية، صورة الحساب، وإعدادات المستخدم

دعم الوضع الليلي

تبديل بين الوضعين الفاتح والداكن باستخدام ThemeContext

تصميم متجاوب

يدعم جميع الشاشات (موبايل، تابلت، كمبيوتر)

شريط جانبي قابل للطي وتنقل ذكي

? مكونات واجهة قابلة لإعادة الاستخدام

مثل: الأزرار، البطاقات، الرموز، البحث، الصور الرمزية، الشارات

تنقل بين الصفحات

مبني باستخدام React Router لتجربة مستخدم سلسة

? هيكل المشروع:

يتبع هيكلًا معياريًا يسهل فهمه وتوسيع المشروع لاحقًا. كل ميزة داخل مجلد خاص بها، مع فصل بين المكونات، الصفحات، البيانات، وملفات السياق.

? التقنيات المستخدمة:

React + TypeScript: لبناء واجهة قوية وآمنة

Vite: لسرعة التطوير والبناء

Tailwind CSS: لتصميم مرن وسهل التخصيص

Framer Motion: لتحسين تجربة المستخدم بالحركات

Recharts + Three.js: لعرض البيانات برسوم جذابة

React Router: لإدارة التنقل بين الصفحات

أهمية المشروع:

يمثل هذا المشروع نموذجًا احترافيًا لأنظمة الإدارة المستخدمة في الشركات الحديثة، ويعكس قدرتي على بناء تطبيقات واقعية قابلة للتطوير والتخصيص لتناسب مختلف المجالات (منصات التجارة، الأنظمة الداخلية، أدوات الإدارة).