نظرة 2: التنقل العلوي (Header Navigation) – علامات التبويب (Tabs)
 

هالنسخة انكتبت كـتوثيق رسمي للمنتج + توثيق تقني، مع سلاسة واضحة، شرح مفاهيمي، ودعم بصري، مع الحفاظ الكامل على منطق وتفاصيل التطبيق مالكم.

 

نظرة عامة
 

التنقل اللي في الهيدر (Header Navigation) هو الطبقة الأساسية للفلترة في نظام علامات التبويب.
يظهر كـشريط تنقل أفقي علوي ويسمح للمستخدمين يفلترون قائمة العملاء فورًا بمجرد الضغط على علامات التبويب.
 

كل علامة تبويب في الهيدر تمثل قاعدة لتقسيم العملاء:
 

«وريني بس العملاء اللي عندهم سجلات في علامة التبويب هذي.»

هالواجهة تخلي علامات التبويب، بدل ما هي مجرد مستودعات بيانات بسيطة، أداة فلترة آنية تدعم سير العمل والتنقل اليومي.
 

---

الهدف من فلترة علامات تبويب الهيدر
 

التنقل اللي في الهيدر موجود عشان:
 

• يوفر تقسيم عملاء بضغطة زر وحدة

• يسمح للمستخدمين يبدلون السياقات على طول

• يقلل من الفلترة والبحث اليدوي

• يعرض بيانات تشغيلية مباشرة في التنقل

• يخلي سير العمل القايم على علامات التبويب سهل الوصول بدون الحاجة لدخول ملفات تعريف العملاء
   

هذي هي أسرع طريقة عشان نجاوب على أسئلة مثل:
 

• «أي عملاء عندهم مهام مفتوحة؟»

• «أي عملاء موجودين في هالمرحلة من سير العمل؟»

• «أي عملاء عندهم سجلات إعداد (onboarding)؟»
   

---

الموقع والوضوح
 

• موقع الواجهة: هيدر أفقي علوي

• الوضوح: دايمًا ظاهر لما تسجل دخول للنظام
   

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

---

شروط الوصول والعرض
 

علامة التبويب تظهر في الهيدر بس لما كل الشروط تكون موجودة:
 

1. وضوح الهيدر مفعل
    

   • show_in_header = 1 في إعدادات علامة التبويب
      

2. المستخدم عنده صلاحية وصول
    

   • المستخدم هو المالك أو المدير

   • أو أن علامة التبويب مشتركة مع المستخدم عن طريق shard_with
      

3. توافق المجلدات
    

   • علامة التبويب مرتبطة بمجلد واحد على الأقل

   • المستخدم عنده صلاحية وصول على الأقل لواحد من هالمجلدات
      

4. ما انعرضت قبل كذا
    

   • يمنع العرض المزدوج

   • علامات التبويب اللي داخل المجموعات ما تنعرض مرة ثانية كعناصر مستقلة
      

هالشي يضمن إن الهيدر يظل:
 

• نظيف

• ذو صلة

• آمن من ناحية الصلاحيات

---

الهيكل البصري للهيدر
 

الهيدر يحتوي على ثلاث مناطق بصرية:
 

1. منطقة العلامة التجارية / الشعار – يسار

2. منطقة تنقل علامات التبويب – وسط / يمين

3. عناصر تحكم المستخدم – يمين

   • إشعارات

   • تتبع الوقت

   • قائمة الملف الشخصي

علامات التبويب موجودة في منطقة التنقل، وهناك تشتغل كـفلاتر تفاعلية.
 

---

أنواع عرض علامات التبويب
 

علامات تبويب فردية
 

• تنعرض كعناصر قائمة أفقية

• لون النص أزرق (#5864ff)

• قابلة للضغط

• وصف الأداة عند التحويم

• علامة التبويب النشطة تظهر خط أحمر تحتها

كل علامة تبويب فردية تفلتر العملاء مباشرة.
 

---

مجموعات علامات التبويب (قوائم منسدلة)
 

مجموعات علامات التبويب تستخدم عشان ترتب علامات التبويب المرتبطة.
 

• اسم المجموعة يظهر باللون الأزرق الغامق (#0214ff)

• القائمة المنسدلة تتوسع بالضغط

• علامات التبويب الفرعية مفصلة بالداخل

• علامات التبويب الفرعية تتصرف بالضبط مثل علامات التبويب الفردية
   

المجموعات تحسن قابلية الاستخدام لما يزيد عدد علامات التبويب.
 

---

كيفية عرض علامات التبويب (منطق التنفيذ)
 

سير العرض (Rendering Flow)
 

1. تهيئة حاويات HTML

2. تحميل إعدادات مجموعات علامات التبويب

3. عرض علامات التبويب المجمعة أولاً

4. تتبع معرّفات علامات التبويب المعروضة

5. عرض علامات التبويب الفردية المتبقية

6. إخراج HTML مدمج
    

هالشي يضمن:
 

• ترتيب صحيح

• ما فيه تكرار

• أولوية المجموعة محفوظة
   

---

سلوك الضغط على علامة تبويب (تفاعل المستخدم)
 

لما المستخدم يضغط على علامة تبويب:
 

1. امسح الحالة النشطة السابقة
    

   • شيل active_tab من كل علامات التبويب
      

2. حدد علامة تبويب نشطة
    

   • ضف كلاس active_tab

   • اعرض خط أحمر تحتها
      

3. التقاط معرّف علامة التبويب
    

   • اقرا data_tab_setting_id
      

4. ابدأ إعادة تحميل العملاء
    

   • مرر معرّف علامة التبويب كمعامل فلترة

   • حدث قائمة العملاء
      

5. احفظ الحالة
    

   • مخزنة في الجلسة

   • تبقى حتى بعد تحديث الصفحة
      

واجهة المستخدم تتفاعل على طول، وتقدم تغذية راجعة فورية.
 

---

كيف تشتغل فلترة العملاء
 

منطق الفلترة في الواجهة الخلفية (Backend)
 

1. تحديد معرّف علامة التبويب النشطة

2. استعلام لجدول tabs:

   • اوجد كل السجلات اللي فيها tab_id = active_tab

3. استخرج قيم cust_id الفريدة

4. فلتر قائمة العملاء بناءً على هالمعرّفات

5. ارجع البيانات اللي تمت فلترتها لواجهة المستخدم
    

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



مجموعات علامات التبويب – الهيكل والسلوك
 

مجموعات علامات التبويب مخزنة كـ JSON وتحدد:
 

• أسماء المجموعات (متعددة اللغات)

• الترتيب في الهيدر

• علامات التبويب داخل كل مجموعة

• موقع كل علامة تبويب داخل المجموعة
   

السلوك:
 

• الضغط على مجموعة ← توسيع/طي

• الضغط على علامة تبويب فرعية ← تطبيق الفلترة

• المجموعات ما تفلتر بنفسها
   

---

الأداء والتحسين
 

• علامات التبويب تتحمل باستعلام واحد

• مفهرسة حسب المعرّف للبحث السريع

• هيكل المجموعة مخزن مؤقتًا

• تحديثات DOM بسيطة عند الضغط
   

هالشي يضمن:
 

• عرض سريع للهيدر

• تجربة فلترة سلسة

• قابلية التوسع لعدد كبير من علامات التبويب
   

---

التكامل مع واجهات العرض الثانية
 

مع الإعدادات
 

• وضوح الهيدر يتحكم فيه من إعدادات علامات التبويب

• التغييرات تتطبق على طول
   

مع عرض العميل
 

• سياق علامة التبويب النشطة محفوظ

• تنقل سلس
   

مع مجموعات علامات التبويب
 

• المجموعات تنشأ في الإعدادات

• ينعكس بشكل ديناميكي في الهيدر
   

---

مشاكل شائعة واستكشاف الأخطاء وإصلاحها
 

علامة تبويب غير ظاهرة
 

• تأكد من show_in_header

• تحقق من صلاحيات المشاركة

• اكد تخصيص المجلد

• افحص تهيئة المجموعة
   

الضغط ما يسوي شي
 

• تأكد إن الـ JS تحمل

• افحص أخطاء الكونسول

• تأكد إن معرّف علامة التبويب سليم
   

حالة نشطة مفقودة
 

• الـ CSS ما تحمل

• مشكلة تجاوز الكلاس
   

المجموعة ما تتوسع
 

• هيكل JSON مو صحيح

• تعارض JS

• الـ CSS ناقص
   

---

ملخص مفاهيمي نهائي
 

التنقل اللي في الهيدر مو مجرد قائمة.
 

هو:
 

• محرك فلترة آني

• محدد سير عمل بصري

• أداة لتقسيم العملاء

• مسرع تنقل
   

---

فهم نهائي في سطر واحد
 

التنقل اللي في الهيدر هو طبقة الفلترة الآنية اللي تحول بيانات علامات التبويب إلى تقسيم فوري للعملاء من خلال علامات التبويب اللي ممكن الضغط عليها في شريط التنقل العلوي.