Dashboard لإدارة السائقين والمهام
تفاصيل العمل
لوحة تحكم جدولة السائقين (Driver Scheduling Dashboard)
هذا المشروع عبارة عن لوحة تحكم تفاعلية لإدارة السائقين والمسارات، تم تصميمه وتطويره باستخدام React.js مع التركيز على واجهة مستخدم حديثة، تصميم مكونات ديناميكية، وتخطيط متجاوب يعمل على جميع الأجهزة من سطح المكتب حتى الموبايل.
الوظائف الأساسية:
إدارة السائقين: إمكانية إضافة سائقين جدد، عرض تفاصيلهم مثل الاسم وحالة التوافر، وتحديث الحالة عند تعيينهم لمسار معين.
إدارة المسارات: إمكانية إضافة مسارات جديدة، تعيين السائقين لكل مسار، وعرض حالة التعيين بشكل واضح (مخصص / غير مخصص).
لوحة التحكم: عرض قائمة محدثة للسائقين والمسارات في الوقت الفعلي، مع إمكانية البحث والتصفية، بالإضافة إلى عرض مخططات وإحصائيات توضح عدد السائقين، عدد المسارات المخصصة وغير المخصصة، ونسبة توافر السائقين.
التصميم والاستجابة: تصميم متجاوب بالكامل مع جميع الشاشات باستخدام منهجية Mobile-first لضمان تجربة مستخدم ممتازة على الأجهزة الصغيرة والكبيرة.
الحركة والتفاعل: إضافة تأثيرات سلسة للانتقالات، تحديث حالة المسارات، وأزرار تفاعلية باستخدام Framer Motion وCSS Animations لجعل اللوحة أكثر حيوية وتفاعلية.
ميزات إضافية: عرض تقويمي لتوافر السائقين، وتصفية متقدمة حسب حالة المسار أو توافر السائقين، لتسهيل إدارة البيانات بشكل أكثر دقة ومرونة.
الأدوات والتقنيات المستخدمة:
React.js لبناء المكونات الديناميكية باستخدام Functional Components وHooks.
Tailwind CSS / Styled Components لتصميم واجهة حديثة ومتجاوبة.
Framer Motion لإضافة الرسوميات والحركة السلسة.
Chart.js / Recharts لعرض البيانات والإحصائيات بصرياً.
Git / GitHub لإدارة الأكواد وتنظيم المشروع.
نتيجة المشروع:
لوحة تحكم عملية واحترافية، تساعد على إدارة السائقين والمسارات بشكل دقيق وفعال، وتوفر بيانات لحظية وتجربة مستخدم سلسة مع تصميم حديث وجذاب.