تسجيل الحضور والانصراف

1. نوع العمل (Overview)هذا العمل عبارة عن تطبيق ويب مخصص للهواتف الذكية وأجهزة الميدان (Mobile-First Web Application) لـ تسجيل الحضور والانصراف اليومي للموظفين في مواقع العمل الميدانية ("الأسواق"): مجال العمل: الموارد البشرية وإدارة عمليات الموظفين الميدانيين. الهدف: توفير نموذج بسيط وسريع للموظف لتسجيل حالته (حضور، انصراف، إذن، مأمورية) في الوقت الفعلي مع توثيق تلقائي لليوم والتاريخ والوقت والموقع. 2. طريقة التنفيذ والآلية الفنية (Technical Implementation)تم تنفيذ الواجهة بتكامل بين التصميم المتجاوب والبرمجة التفاعلية:أ. تصميم الواجهة تجاوبي ومناسب للموبايل (Mobile-Optimized UI)دعم الهواتف واللغة العربية: صُممت الواجهة لتأخذ مظهر تطبيق الموبايل Card-style بالاتجاه العربي (dir="rtl") واستخدام خطوط عربية واضحة (Cairo و Tajawal). تطبيقات الويب (PWA-ready): تحتوي الصفحة على إعدادات تجعلها قابلة للعمل كتطبيق مثبت على الهواتف مع شريط علوي بلون الشعار. ساعة حية مع نبض تفاعلي (Live Pulse Clock): شريط علوي يحتوي على دالة tick() التي تحدث اليوم والتاريخ والوقت تلقائياً كل ثانية بتوقيت سيستم الجهاز، مع مؤشر ضوئي متوهج بـ CSS Animation. ب. النموذج وتجربة المستخدم التفاعلية (Dynamic Form UX)المدخلات الأساسية: اسم الموظف، اختيار السوق (سوق عبد المجيد، سوق عمار بن ياسر، سوق الأمل، سوق المنهل)، واختيار الفترة (صباحية / مسائية). تغيرات الحالة والأنماط التفاعلية: عند تغيير "حالة التسجيل" (حضور، انصراف، إذن، مأمورية):يتغير لون مربع الحالة تلقائياً عبر فئات CSS المتغيرة (state-انصراف, state-إذن...). في حال اختيار إذن أو مأمورية، يظهر حقل الملاحظات تلقائياً عبر أنيميشن انزلاقي ويصبح حشوه إلزامياً للنموذج. ج. التقاط البيانات ومعالجتها (Data Capture & Logic)عند ضغط زر "حفظ التسجيل"، يتم التقاط التاريخ والوقت الحاليين بدقة وصيغة قياسية تلقائياً بدون تدخل الموظف (ISO Date و toLocaleTimeString) لضمان عدم التلاعب. د. التكامل مع الخادم والبيئة المحلية (Backend & Hybrid Logic)الربط مع Google Apps Script: يستدعي الكود الدالة السحابية google.script.run.saveAttendance(data) لإرسال البيانات مباشرة وتخزينها (في جدول بيانات جوجل Google Sheets مثلاً). وضع الاختبار المحلي (Fallback): في حال فتح الملف محلياً بدون خادم، يتم حفظ التسجيلات في ذاكرة المتصفح localStorage عبر الكود لضمان تجربة واختبار الواجهة. إدارة الحالات: يتعامل الكود مع استجابات الخادم لإظهار رسائل النجاح أو التنبيه في حال وجود تسجيل مكرر بنفس اليوم