מבט 2: ניווט עליון (Header Navigation) – כרטיסיות (Tabs)
 

גרסה זו נכתבה כתיעוד מוצר רשמי + תיעוד טכני, עם זרימה ברורה, הסבר קונספטואלי, ועיגון ויזואלי, תוך שמירה מלאה על הלוגיקה ופרטי היישום שלכם.

 

סקירה כללית
 

ניווט הכותרת (Header Navigation) הוא שכבת הסינון העיקרית של מערכת הכרטיסיות.
הוא מופיע כפס ניווט אופקי עליון ומאפשר למשתמשים לסנן באופן מיידי את רשימת הלקוחות על ידי לחיצה על כרטיסיות.
 

כל כרטיסייה בכותרת מייצגת כלל פילוח לקוחות:
 

״הצג לי רק לקוחות שיש להם רשומות בכרטיסייה זו.״

תצוגה זו הופכת כרטיסיות ממאגרי נתונים פשוטים לכלי סינון בזמן אמת המניעים את זרימת העבודה והניווט היומיומיים.
 

---

מטרת סינון כרטיסיות הכותרת
 

ניווט הכותרת קיים כדי:
 

• לספק פילוח לקוחות בלחיצה אחת

• לאפשר למשתמשים להחליף הקשרים באופן מיידי

• להפחית סינון וחיפוש ידניים

• להציג נתונים תפעוליים ישירות בניווט

• להפוך זרימות עבודה מבוססות כרטיסיות לנגישות מבלי להיכנס לפרופילי לקוחות
   

זו הדרך המהירה ביותר לענות על שאלות כמו:
 

• ״אילו לקוחות יש להם משימות פתוחות?״

• ״אילו לקוחות נמצאים בשלב זרימת עבודה זה?״

• ״אילו לקוחות יש להם רשומות קליטה (onboarding)?״
   

---

מיקום ונראות
 

• מיקום ממשק המשתמש: כותרת אופקית עליונה

• נראות: תמיד גלוי בכניסה למערכת
   

הכותרת נטענת בכל עמוד מאומת, מה שהופך את סינון הכרטיסיות לנגיש גלובלית.
 

---

תנאי גישה ותצוגה
 

כרטיסייה מופיעה בכותרת רק כאשר כל התנאים מתקיימים:
 

1. נראות כותרת מופעלת
    

   • show_in_header = 1 בהגדרות כרטיסייה
      

2. למשתמש יש גישה
    

   • המשתמש הוא בעלים או מנהל

   • או שהכרטיסייה משותפת עם המשתמש באמצעות shard_with
      

3. תאימות תיקייה
    

   • הכרטיסייה משויכת לפחות לתיקייה אחת

   • למשתמש יש גישה לפחות לאחת מהתיקיות הללו
      

4. לא מרונדרת כבר
    

   • מונע תצוגה כפולה

   • כרטיסיות בתוך קבוצות לא מרונדרות שוב כפריטים עצמאיים
      

זה מבטיח שהכותרת תישאר:
 

• נקייה

• רלוונטית

• בטוחה מבחינת הרשאות

---

מבנה ויזואלי של הכותרת
 

הכותרת מכילה שלושה אזורים ויזואליים:
 

1. אזור מותג / לוגו – שמאל

2. אזור ניווט כרטיסיות – מרכז / ימין

3. פקדי משתמש – ימין

   • התראות

   • מעקב זמן

   • תפריט פרופיל

כרטיסיות נמצאות באזור הניווט, שם הן פועלות כמסננים אינטראקטיביים.
 

---

סוגי תצוגת כרטיסיות
 

כרטיסיות בודדות
 

• מוצגות כפריטי רשימה אופקיים

• צבע טקסט כחול (#5864ff)

• ניתנות ללחיצה

• תיאור כלי בריחוף

• כרטיסייה פעילה מציגה קו תחתון אדום

כל כרטיסייה בודדת מסננת לקוחות ישירות.
 

---

קבוצות כרטיסיות (תפריטים נפתחים)
 

קבוצות כרטיסיות משמשות לארגון כרטיסיות קשורות.
 

• שם הקבוצה מוצג בכחול מודגש (#0214ff)

• תפריט נפתח מתרחב בלחיצה

• כרטיסיות צאצא מפורטות בפנים

• כרטיסיות צאצא מתנהגות בדיוק כמו כרטיסיות בודדות
   

קבוצות משפרות את השימושיות כאשר מספר הכרטיסיות גדל.
 

---

כיצד כרטיסיות מרונדרות (לוגיקת ביצוע)
 

זרימת רינדור
 

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 ומגדירות:
 

• שמות קבוצות (רב-לשוני)

• סדר בכותרת

• כרטיסיות בתוך כל קבוצה

• מיקום כל כרטיסייה בתוך הקבוצה
   

התנהגות:
 

• לחיצה על קבוצה → הרחבה/כיווץ

• לחיצה על כרטיסיית צאצא → החל סינון

• קבוצות אינן מסננות בעצמן
   

---

ביצועים ואופטימיזציה
 

• כרטיסיות נטענות בשאילתה בודדת

• מאונדקסות לפי ID לחיפוש מהיר

• מבנה קבוצה נשמר במטמון

• עדכוני DOM מינימליים בלחיצה
   

זה מבטיח:
 

• רינדור מהיר של הכותרת

• חווית סינון חלקה

• מדרגיות עבור כרטיסיות רבות
   

---

אינטגרציה עם תצוגות אחרות
 

עם הגדרות
 

• נראות הכותרת נשלטת מהגדרות הכרטיסיות

• שינויים מיושמים באופן מיידי
   

עם תצוגת לקוח
 

• הקשר הכרטיסייה הפעילה נשמר

• ניווט חלק
   

עם קבוצות כרטיסיות
 

• קבוצות נוצרות בהגדרות

• משתקף באופן דינמי בכותרת
   

---

בעיות נפוצות ופתרון תקלות
 

כרטיסייה לא גלויה
 

• בדוק את show_in_header

• אמת הרשאות שיתוף

• אשר הקצאת תיקייה

• בדוק תצורת קבוצה
   

לחיצה לא עושה כלום
 

• אמת ש-JS נטען

• בדוק שגיאות קונסול

• ודא מזהה כרטיסייה תקין
   

מצב פעיל חסר
 

• CSS לא נטען

• בעיית עקיפת מחלקה
   

קבוצה לא מתרחבת
 

• מבנה JSON לא חוקי

• קונפליקט JS

• CSS חסר
   

---

סיכום קונספטואלי סופי
 

ניווט הכותרת הוא לא רק תפריט.
 

הוא:
 

• מנוע סינון בזמן אמת

• בורר זרימת עבודה ויזואלי

• כלי לפילוח לקוחות

• מאיץ ניווט
   

---

הבנה סופית בשורה אחת
 

ניווט הכותרת הוא שכבת הסינון בזמן אמת שהופכת נתוני כרטיסיות לפילוח לקוחות מיידי באמצעות כרטיסיות לחיצות בפס הניווט העליון.