Workspace Staff Manager – إدارة الموظفين بصريًا وتفاعليًا

طورت “Workspace Staff Manager”، تطبيق ويب مبتكر يهدف إلى إدارة الموظفين داخل مساحات العمل بطريقة مرئية وتفاعلية. يتيح التطبيق إضافة، نقل، وحذف الموظفين على مخطط الطابق في الوقت الفعلي، مع احترام القيود الخاصة بالأدوار والصلاحيات، لتسهيل تنظيم الفرق وضمان سير العمل بسلاسة.

الميزات الرئيسية:

واجهة المستخدم والتصميم:

واجهة جذابة وحديثة باستخدام Flexbox وGrid مع تصميم متجاوب لجميع الأجهزة (كمبيوتر، تابلت، موبايل).

ألوان متناسقة، أيقونات واضحة، وأزرار ملونة لتسهيل التفاعل.

عرض الموظفين غير المعينين (“Unassigned Staff”) وإمكانية إضافة موظفين جدد بسهولة.

إدارة الموظفين:

إضافة موظف جديد مع الاسم، الدور، الصورة، البريد الإلكتروني، الهاتف، والخبرات العملية (قابلة للإضافة ديناميكيًا).

تعديل وحذف الموظفين بسهولة مع عرض ملف الموظف بالكامل عند النقر عليه.

معاينة الصور في الفورم والتحقق من صحة البيانات (Regex).

إدارة المساحات والمناطق:

مخطط الطابق مقسم إلى 6 مناطق: غرفة المؤتمرات، الاستقبال، غرفة الخوادم، غرفة الأمن، غرفة الموظفين، وغرفة الأرشيف.

تطبيق قواعد صارمة بحسب الدور:

الاستقبال → استقبال فقط

غرفة الخوادم → تقنيي IT فقط

غرفة الأمن → موظفي الأمن فقط

المدير → يمكن تعيينه في أي مكان

موظفو التنظيف → يمكنهم كل الأماكن ما عدا غرفة الأرشيف

الأدوار الأخرى → الوصول حر مع استثناء المناطق المقيدة

إمكانية إزالة الموظف من المنطقة وإعادته لقائمة الموظفين غير المعينين.

عرض المناطق الفارغة الإجبارية باللون الأحمر الفاتح لتنبيه المستخدم.

التفاعلات والتجربة الديناميكية:

فتح ملفات الموظفين للحصول على جميع المعلومات الشخصية والخبرات.

أزرار “+” لإضافة موظفين لكل منطقة مع احترام القيود.

نظام رسائل تفاعلية (Flash Messages) لتأكيد نجاح العمليات.

دعم الرسوم المتحركة CSS لانتقالات سلسة.

تصميم متجاوب لجميع أحجام الشاشات.

ميزات إضافية (Bonus):

Drag & Drop لنقل الموظفين بين المناطق والقائمة غير المعينة.

تعديل معلومات الموظف من قائمة “Unassigned”.

البحث والتصفية حسب الاسم أو الدور.

حفظ حالة المخطط تلقائيًا في localStorage.

وضع “إعادة التوزيع التلقائي” لتوزيع الموظفين عشوائيًا حسب القواعد.

صورة افتراضية للموظفين بدون صورة.

أهداف المشروع:

تمكين الشركة من إدارة الموظفين بصريًا بطريقة فعّالة وسهلة الاستخدام.

ضمان تطبيق القيود الخاصة بالأدوار والمناطق لضمان سير العمل.

تحسين تجربة المستخدم وواجهة تفاعلية جذابة مع وظائف ديناميكية متقدمة.

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

HTML / CSS / Flexbox & Grid / Responsive Design

JavaScript / DOM Manipulation / Drag & Drop

LocalStorage لحفظ الحالة

Git/GitHub لتنظيم المشروع ومتابعة التطوير