القاهرة / المقطم

1. نوع العمل (Overview)هذا العمل عبارة عن تطبيق واجهة أَمامية (Front-End Web Application) لتقرير الحضور والانصراف، مصمم بلغات HTML, CSS, JavaScript ليعمل كـ Dashboard تفاعلية ومتجاوبة مع الهواتف الذكية والشاشات: مجال العمل: إدارة الموارد البشرية ومتابعة حركة الموظفين في مواقع عمل مختلفة ("الأسواق"). الهدف: عرض السجلات (حضور، انصراف، إذن، مأمورية)، مع إمكانية الفلترة، البحث، التعديل، الحذف، واستخراج التقارير المطبوعة أو المطبوعة كـ PDF أو تصديرها إلى Excel. 2. طريقة التنفيذ والآلية الفنية (Technical Implementation)تم تنفيذ هذه اللوحة عبر عدة طبقات وتقنيات برمجية:أ. الهيكلة والتنسيق البصري (HTML5 & CSS3)دعم اللغة العربية والاتجاه: تم ضبط الاتجاه من اليمين إلى اليسار (dir="rtl") مع استخدام خطوط عربية مثل Cairo و Tajawal. التجاوب (Responsive Design): التنسيق يعتمد على تقنيات CSS Grid و Flexbox لتوزيع العناصر وتعديل الشبكة عند العرض على الهواتف الذكية (مثل تحويل كروت الإحصائيات إلى 3 أعمدة). تطبيقات الويب للموبايل (PWA-ready): يحتوي الكود على meta tags متقدمة وأيقونات ليعمل كـ Web App على الهواتف عند حفظه على الشاشة الرئيسية. ب. جلب البيانات وآلية العمل الإزدواجية (Hybrid Backend Integration)تعتمد اللوحة على طريقة مرنة لربط البيانات عبر دالة loadRecords(): الربط مع Google Apps Script: تبدأ اللوحة بالفحص بواسطة window.google.script.run؛ وفي حال وجود بيئة جوجل يتم استدعاء الدوال السحابية مثل getAttendanceRecords() لتجليب البيانات المباشرة. الوضع المحلي الاحتياطي (Local Fallback): في حال عدم الاتصال بخادم جوجل (Local Mode)، تعتمد الصفحة تلقائياً على التخزين المحلي للمتصفح localStorage عبر المفتاح attendanceRecords لضمان عمل الواجهة كمعاينة. ج. التفاعلية ومعالجة البيانات (JavaScript Logic)فلترة وبحث فوري: يتم الاستماع لتغيرات المدخلات (اسم الموظف، التاريخ، نوع الحالة، اسم السوق) لتحديث السجلات المفلترة filteredRecords في الوقت الفعلي دون إعادة تحميل الصفحة. عرض الإحصائيات (Dynamic Cards): حساب إجمالي السجلات والتقسيم التفصيلي (حضور، انصراف، إذن، مأمورية) وتحديث الأرقام في أعلى اللوحة تلقائياً. تمثيل بياني تفاعلي (Chart.js): استخدام مكتبة Chart.js لرسم مخطط بياني شريطي تراكمي (Stacked Bar Chart) يوضح توزيع الحالات حسب الأيام أو الأرقام الشهرية بناءً على خيار المستخدم. د. إدارة السجلات (Modal Edit & Delete)التعديل: فتح نافذة منبثقة (Modal) تحتوي على نموذج لاستكمال التعديلات، ومن ثم إرسال التحديثات لبيئة جوجل عبر google.script.run.updateAttendance أو تحديث الـ localStorage. الحذف: تأكيد العملية برمجياً، ثم استدعاء deleteAttendance لحذف السجل بالكامل. هـ. تصدير التقارير والطباعةتصدير Excel (CSV): تحويل البيانات المفلترة إلى نص مرمز بصيغة CSV ومزود بترميز UTF-8 مع خاصية BOM (\uFEFF) لدعم اللغة العربية بدقة داخل برنامج Excel. الطباعة و PDF: استخدام قواعِد CSS الخاصة بالطباعة (@media print) لإخفاء أزرار الفلترة والتعديل والتصدير، وتعديل خلفيات الصفحة لتظهر في شكل تقرير ورقي نظيف وجاهز للطباعة أو الحفظ كـ PDF.