```html

عرض 3: عرض العميل الفردي – إدخال بيانات التاب والاطلاع عليها
 

توثيق كامل على مستوى الوظائف، واجهة المستخدم والأداء
 

نظرة عامة
 

عرض العميل الفردي هو الأساس التشغيلي لنظام التابات.
 

هذا هو المكان اللي فيه:
 

• بيانات التاب يتم إنشاؤها فعلياً

• العمليات التجارية يتم تنفيذها

• حالات متقدمة

• أتمتة يتم تفعيلها

• السجلات يتم مراجعتها، تعديلها، نسخها أو حذفها
   

في حين إن الإعدادات تحدد الهيكل وتنقل العنوان يفلتر العملاء,
عرض العميل الفردي هو المكان اللي يتم فيه الشغل.
 

هدف عرض العميل الفردي
 

هالـ عرض موجود عشان:
 

• لإدارة سجلات التاب لكل عميل

• لتخزين بيانات عمل منظمة

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

• لتمكين عمليات جماعية وأتمتة

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

كل سجل ينشأ هنا هو:
 

• يتم تخزينه في جدول tabs

• مربوط بعميل واحد

• محكوم بتكوين التاب من الإعدادات
   

الموقع والتحكم بالوصول
 

• عنوان الموقع: صفحة ملف تعريف العميل الديناميكية (/customer/{id})
   

شروط الوصول
 

التاب يظهر للعميل بس لما كل الشروط التالية تتحقق:
 

1. المستخدم مسجل دخول

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

3. العميل يتبع لمجلد مخصص للتاب

4. المستخدم عنده صلاحية وصول للتاب (shard_with)
    

هذا يضمن عزل البيانات وسلامة الصلاحيات.
 

الهيكل المرئي للصفحة
 

عرض العميل الفردي مقسوم لثلاث مناطق منطقية:
 

1️⃣ الشريط الجانبي الأيسر
 

• تفاصيل العميل

• قائمة عمودية بالتابات

• التاب النشط مظلل

• قابل للتمرير لو فيه تابات واجد
   

2️⃣ منطقة المحتوى الرئيسية
 

• سجلات التاب المختار

• تخطيط جدول/شبكة

• عمليات وتحكمات
   

3️⃣ اللوحة اليمنى الاختيارية
 

• معلومات مرتبطة بالعميل

• ويدجتس أو تكاملات إضافية
   

  شريط تنقل التابات (يسار)
   

  الهدف
   

  يستخدم كمبدّل تابات في سياق العميل.
   

  السلوك
   

• التابات تظهر بشكل عمودي

• الأسماء تظهر باللغة الحالية

• تظهر التابات المخصصة لمجلد العميل بس

• الضغط على تاب يحمل بياناته بشكل ديناميكي
   

• الحالة النشطة
   

• خلفية مظللة
   

• ---

  هيكلة حاوية التاب
   

  كل تاب عنده حاوية DOM خاصة فيه.
  
   

  صيغة معرف HTML
   

  {tab_name_for_customer}{tab_id}

  
  مثال
   

  Test_123_En32
   

  ليش هذا مهم
   

• يضمن التفرد

• يسمح بالاستهداف السريع عن طريق جافا سكريبت

• يدعم سلوك العرض/الإخفاء الديناميكي
   

• ---

  المكونات الأساسية داخل التاب
   

  كل تاب يحتوي على ثلاث طبقات تحكم رئيسية:
   

  ---

  
  1️⃣ شريط تنقل الحقول (طبقة التحكم العليا)
   

  هذا الشريط يدير رؤية الحقول والتنقل فيها.
   

  المكونات
   

• ⬅ التمرير لليسار (حقول أفقية)

• ? محدد الحقول (عرض/إخفاء الأعمدة)

• ➕ زر إضافة سجل

• ➡ التمرير لليمين
   

• الهدف
   

• للتعامل مع التابات اللي فيها حقول كثيرة

• لتحسين سهولة الاستخدام

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

  2️⃣ شريط إجراءات التاب (طبقة العمليات الجماعية)
   

  هذي لوحة التحكم لـسير العمل.
   

  الإجراءات المتاحة
   

• نسخ لتاب ثاني

• نسخ ودمج سجلات

• تفعيل الأتمتات

• تصفية حسب الحالة

• حذف سجلات بكميات كبيرة
   

• مفهوم أساسي
   

  الإجراءات هنا تعمل على الصفوف المحددة — وهذا اللي يسمح بـسير عمل قوي وبكميات كبيرة.
   

• 3️⃣ جدول سجلات التاب (طبقة البيانات الرئيسية)
   

  الهيكل
   

• رأس الجدول (thead)

• الجسم (tbody)

• صف واحد = سجل تاب واحد
   

• الأعمدة
   

• خانة اختيار (للتحديد الجماعي)

• الحالة

• حالة فرعية (إذا كانت مفعلة)

• حقول مخصصة (ديناميكية)
   

• مصدر البيانات
   

• يتم تحميله عن طريق AJAX

• يسترجع من جدول tabs

• تتم تصفيته حسب cust_id + tab_id
   

• ---

  إضافة سجل تاب
   

  تسلسل الخطوات
   

• اضغط ➕ إضافة

• استمارة تنفتح (حقول ديناميكية)

• املأ الحقول المطلوبة

• اختر حالة/حالة فرعية

• حفظ

• الواجهة الخلفية

• نقطة النهاية: add_tab_for_cust

• يتحقق من صحة الحقول

• يدخل لـ tabs

• يحدث الجدول

• ---

  عرض السجلات
   

  تحميل البيانات
   

• يتم تفعيله عند الضغط على تاب

• يعتمد على AJAX

• سريع ومنفصل لكل تاب
   

• العرض
   

• خلايا قابلة للتعديل داخل الصف

• حالات مرمزة بالألوان

• تخطيط متجاوب

• اضغط على خلية → تعديل

• حفظ تلقائي أو تأكيد

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

• تعديل كامل
   

• أيقونة التعديل تفتح نافذة منبثقة

• كل الحقول قابلة للتعديل

• التحقق مطبق
   

• ---

  حذف السجلات
   

  حذف فردي
   

• أيقونة حذف الصف

• تأكيد

• إزالة فورية
   

• حذف جماعي
   

• حدد عدة صفوف

• اضغط على حذف

• تأكيد واحد

• مسح فعال
   

• ---

  إدارة الحالة والحالة الفرعية
   

  الميزات
   

• حالات مرمزة بالألوان

• اختيار من قائمة منسدلة

• حالة فرعية اختيارية لكل حالة

• سلوك الحفظ التلقائي
   

• تصفية الحالات
   

• تصفية الجدول حسب الحالة

• دمج مع فلاتر ثانية

• قابلة للمسح
   

• ---

  رؤية الحقول والتصفية
   

  محدد الحقول
   

• تشغيل/إيقاف الأعمدة

• حفظ التفضيلات

• إعادة تعيين الافتراضيات
   

• فلاتر الأعمدة
   

• بحث نصي

• نطاقات رقمية
   

• ---

  نسخ السجلات بين التابات
   

  نسخ فقط
   

• يدخل سجل جديد

• يحافظ على القيم

• ختم زمني جديد
   

• نسخ ودمج
   

• يطابق السجلات الموجودة

• يحدث وين ما كان الموضوع ذو صلة

• يمنع التكرارات
   

• ---

  دمج الأتمتة
   

  مشغلات الأتمتة
   

• عند إضافة سجل

• عند تغيير الحالة

• عند تحديث حقل

• تنفيذ يدوي
   

• هذا يحول التابات إلى محركات سير عمل، مو بس جداول بيانات.
   

  ---

  
  السلوك المتجاوب
   

  سطح المكتب

• جدول كامل

• كل عناصر التحكم مرئية
   

• جهاز لوحي
   

• تمرير أفقي
   

• جوال
   

• تخطيط بطاقات

• العمليات الأساسية بس

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

• ---

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

• تحميل كسول لكل تاب

• إعدادات مخبأة

• ترقيم صفحات لمجموعات البيانات الكبيرة

• تحديثات DOM محدودة
  
  
  فهم مفاهيمي نهائي
  
   

  عرض العميل الفردي هو المكان اللي فيه إعدادات التاب تتحول لبيانات عمل حية — يتم تعديلها، وتطويرها، وأتمتتها والتحكم فيها لكل عميل.

  ---

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

  عرض 3 هو بيئة العمل التشغيلية اللي فيها سجلات التاب يتم إنشاؤها، إدارتها وتحريكها عن طريق سير العمل التجاري لكل عميل على حدة.