صفحة التدفق – شرح مرئي كامل، الغرض، العملية والعمل الداخلي
 

هذي الوثيقة تشرح صفحة التدفق في biz1 بشكل كامل ومفصل:
وشو هو، وكيف شكل الشاشة، وشنو الإجراءات اللي يسوونها المستخدمين، وكيف تتحرك البيانات من ورا الكواليس، وكيف يرتبط بالوحدات الثانية.
 

---

1. وشو صفحة التدفق (منظور مفاهيمي)
 

صفحة التدفق هي لوحة رحلة العميل.
 

فكر فيها كذا:
 

• كل تدفق = عملية عمل وحدة
  (مثلاً: خط مبيعات، معالجة قروض، توظيف، ضم عملاء جدد)
   

• كل عمود = مرحلة وحدة بهذي العملية
  (مثلاً: TO DO → TEST → PATIDAR → FINAL)
   

• كل بطاقة = عميل واحد
  (من جدول contactus)
   

صفحة التدفق تمكنك من:
 

• تشوف وين كل عميل موجود حالياً

• تنقل العملاء بين المراحل عن طريق السحب والإفلات

• تفلتر العملاء حسب التاريخ أو الفريق أو الاسم

• تتابع التقدم بشكل مرئي بدال ما تقرا قوائم
   

---

2. كيف تدخل صفحة التدفق
 

توصل لصفحة التدفق لما:
 

• تضغط على "التدفق" في الشريط الجانبي الأيسر
   

• الرابط يصير:

  • dashboard/flow

  • أو dashboard/admin/#customer لما يكون التدفق فعال
     

الوصول يعتمد على:
 

• وحدة تنظيم: تدفق العملاء فعال

• صلاحية المستخدم: module_sidebarmenu_flow
   

إذا كانت الوحدة أو الصلاحية معطلة، قائمة التدفق تكون مخفية.
 

---

3. وصف مرئي كامل للشاشة
 

3.1 رأس الصفحة العلوي (عام)
 

في الجزء العلوي مرة، بتشوف رأس صفحة biz1 القياسي:
 

• التنقل الرئيسي (العملاء، المشاريع، المنتجات، المصاريف، المقالات، المستخدم، السلفة)

• ملف تعريف المستخدم والإشعارات

• ساعة الحضور / "بدء العمل"
   

هذا الرأس عام وما هو خاص بمنطق التدفق.
 

---

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

• التدفق يكون مظلل لما تكون هذي الصفحة فعالة

• عناصر الشريط الجانبي الثانية تظل ظاهرة:
  العملاء، المهام، التقويم، البطاقات، البريد الإلكتروني، الواتساب، الملفات، التقارير وغيرها.
   

الشريط الجانبي يحدد ببساطة أي وحدة فعالة.
 

---

3.3 اللوحة اليسارية – منطقة إدارة التدفق
 

هذي اللوحة تتحكم في أي تدفق قاعد تشوفه.
 

بتشوف:
 

• عنوان مثل "التدفقات"

• خانة بحث لفلترة أسماء التدفقات

• علامات تبويب مثل:
   

  • عملاء القروض

  • وظائف شاغرة

  • موظفين
    علامات التبويب هذي تبدل السياق/نوع التدفق، مو العملاء نفسهم.
     

• نص معلوماتي مثل:
  "أنشئ تدفقك وتابع تقدمك"

• زر إضافة تدفق
  هذا يفتح نافذة منبثقة تقدر تحدد فيها تدفق جديد.
   

هذي اللوحة تهتم بس بـ:
 

• إنشاء التدفقات

• اختيار التدفقات

• التنقل بين فئات التدفق
   

---

3.4 منطقة المحتوى الرئيسية – لوحة التدفق الفعلية
 

هنا أغلب الشغل يصير.

في الجزء العلوي من المنطقة الرئيسية، بتشوف:
 

• عنوان التدفق (مثلاً: "عملاء القروض")

• زر تصدير

• زر استيراد

• إضافة منتج / إضافة سجل

• أيقونة مساعدة

• خانة بحث (تبحث عن عملاء، مو تدفقات)

• زر الفلاتر

• محدد الحقول

• زر تحديث

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

• فلاتر تاريخ البدء / تاريخ الانتهاء

• فلتر أعضاء الفريق

• أيقونة معلومات
   

كل اللي يظهر هنا يتحكم في أي عملاء ينعرضون وكيف.
 

---

4. جوهر الصفحة: الأعمدة والبطاقات
 

4.1 الأعمدة
 

كل تدفق مقسم لـ أعمدة عمودية.
 

أمثلة على أسماء الأعمدة:
 

• TO DO

• 1

• PATIDAR

• TEST

• HELLO_TEST

• EMKKK

• CXSDFC
   

نقاط مهمة:
 

• الأعمدة محددة لكل تدفق

• كل عمود عنده:

  • اسم

  • خط سفلي ملون

  • ترتيب (من اليسار لليمين)

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

لما تبدل التدفقات، يتغير هيكل الأعمدة كله.
 

---

4.2 بطاقات العملاء
 

داخل كل عمود، بتشوف بطاقات العملاء.
 

كل بطاقة تمثل:
 

• صف واحد من contactus

• مرتبطة بـ:

  • تدفق معين

  • عمود معين
     

البطاقات تعرض عادةً:
 

• اسم العميل

• معرفات أساسية

• أيقونات إجراء (اتصال، رسالة، فتح الملف الشخصي)
   

---

4.3 سلوك السحب والإفلات
 

هذا هو أهم تفاعل.
 

لما تسوي كذا:
 

• تضغط على بطاقة عميل

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

• تفلتها
   

النظام على طول:
 

• يحفظ العمود الجديد

• يحفظ مين اللي نقله

• يحفظ التاريخ والوقت
   

مرئياً:
 

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

• ما فيه داعي لإعادة تحميل الصفحة
   

مفاهيمياً:
 

"هذا العميل انتقل للمرحلة الجاية"

---

5. عرض بديل: وضع الجدول
 

بعض التدفقات تدعم أو تعرض تخطيط جدول .
 

في هذا الوضع:
 

• العملاء ينعرضون في صفوف
   

• الأعمدة تكون حقول ثابتة مثل:
   

  • اسم العميل

  • معرف

  • فريق

  • جمع البيانات

  • بيانات البنك

  • بيانات شخصية

  • بيانات الأصل

  • وثائق

  • معاملة

  • المرحلة النهائية

  • أيقونات إجراء
     

هذا العرض مفيد لـ:
 

• العمليات اللي فيها بيانات كثيرة

• سير عمل متوافق

• سيناريوهات إعداد التقارير
   

نفس البيانات الأساسية تستخدم لكلا العرضين.
 

---

6. خطوة بخطوة: وش يصير لما الصفحة تحمل
 

1. المستخدم يضغط على التدفق في الشريط الجانبي.

2. يتم تشغيل Flow::index().

3. يتم التحقق من صلاحية module_sidebarmenu_flow.

4. يتم تحميل عرض flow_page.php.

5. جافاسكريبت يشغل مكالمات AJAX لتحميل:

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

   • التدفق الافتراضي (إذا كان محدد)

6. يتم تحميل الأعمدة للتدفق المختار.

7. يتم جلب العملاء وتجميعهم حسب العمود.

8. لوحة كانبان يتم تصميمها.
    

في هذي النقطة، المستخدم يقدر يتفاعل.
 

---

7. خطوة بخطوة: تحميل التدفق وعملائه
 

لما يتم اختيار تدفق:
 

1. الباك إند يحمل إعدادات التدفق من customer_flow_setting.

2. يتم تحميل الأعمدة من customer_flow_column، مرتبة حسب column_order.

3. يتم تحميل مواقع العملاء من customer_flow.

4. تفاصيل العملاء تجي من contactus.

5. يتم تطبيق الفلاتر:

   • نص البحث

   • نطاق التاريخ

   • عضو الفريق

6. يتم إنشاء HTML وإرجاعه.

7. الفرونت إند يرسم الأعمدة والبطاقات.
    

---

8. خطوة بخطوة: سحب عميل
 

لما يتم سحب عميل:
 

1. الفرونت إند يستلم:
    

   • معرف العميل

   • معرف التدفق

   • معرف العمود المستهدف
      

2. يتم إرسال طلب AJAX.
    

3. الباك إند يدخل أو يحدث customer_flow.
    

4. حقول مثل moved_by وdate_changed يتم تحديثها.
    

5. الفرونت إند يحدث واجهة المستخدم على طول.
    

هذي العملية ما تنسخ العملاء.
هي بس تحدث موقعهم في التدفق.
 

---

9. وش تسوي صفحة التدفق
 

صفحة التدفق تمكنك من:
 

• تنشئ عدة سير عمل تجارية

• تحدد مراحل لكل سير عمل

• تحط العملاء في هذي المراحل

• تنقل العملاء كل ما تقدم الشغل

• تشوف التقدم بشكل مرئي بدال ما تقرا قوائم

• تفلتر العملاء بشكل ديناميكي

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

هذي نظام تحكم مرئي في العمليات.
 

---

10. كيف يشتغل داخلياً (نظرة عامة منطقية)
 

• التدفقات تحدد أي عملاء ينتمون

• الأعمدة تحدد وين العملاء موجودين

• customer_flow يحدد الموقع الحالي

• contactus يخزن هوية العميل

• السحب يحدث بس العلاقات، مو بيانات العملاء
   

ما ينمسح شيء تلقائي.
كل شيء ممكن تتابعه.
 

---

11. الارتباط بالوحدات الثانية
 

• صفحة العملاء
  تستخدم نفس بيانات contactus.
   

• المجلدات، الوسوم، الحالة
  إعدادات التدفق ممكن تفلتر العملاء عن طريقها.
   

• أعضاء الفريق
  صفحة التدفق تقدر تفلتر أو تتابع مين اللي حرك العملاء.
   

• الحملات والأتمتة
  أحداث بدء/إيقاف التدفق ممكن تشغل أتمتة.
   

• البوتات
  البوتات ممكن تنشئ أو تحدث عملاء، لكنها ما تتحكم في التدفق مباشرة.
   

---

12. الإعدادات اللي تأثر على صفحة التدفق
 

• وحدة تدفق العملاء مفعلة/معطلة

• إعدادات التدفق (الاسم، الفلاتر)

• إعدادات الأعمدة (الاسم، اللون، الترتيب)

• تدفق افتراضي لكل مستخدم

• صلاحيات المستخدم
   

كل الإعدادات تصير في الإعدادات → تدفق العملاء.
 

---

13. نموذج ذهني (سهل التذكر)
 

ممكن تفكر في صفحة التدفق كذا:
 

• تدفق = عملية وحدة

•  عمود = مرحلة وحدة

•  بطاقة = عميل واحد

•  سحب = تقدم

•  فلاتر = تركيز

•  فريق = مسؤولية

14. ملخص نهائي
 

صفحة التدفق هي:
 

• نظام إدارة عملاء مرئي

• مصمم لـ تتبع العمليات

• يعمل بواسطة منطق كانبان

• مرتبط بشكل كامل ببيانات العملاء

• مصمم للوضوح والسرعة
   

يساعد الفرق على رؤية الشغل، وتحريك الشغل، وإنهاء الشغل.