رحلات المستخدم

1. 1

   الوصول إلى الموقع

   /

   افتح هذه الخطوة

   الشاشة: الرئيسية

   ماذا يفعل المستخدم

   تفتح الصفحة الرئيسية وتقرأ ما تقدّمه الجمعية.

   ماذا يعرض النظام

   هيرو بصور المناجم وغبار ذهبي، وزر واضح «اكتشف العضوية المناسبة».

   المكوّنات المستخدمة

   • رأس الموقع العامتنقل الزائر

     لماذا هنا: شفاف فوق الهيرو ليبقى التركيز على الرسالة ثم يصبح صلباً عند التمرير.

     حالاته: شفاف فوق الهيرو · صلب عند التمرير

   • Buttonالإجراء الأساسي والثانوي

     لماذا هنا: زر رئيسي واحد يقود إلى الباحث.

     حالاته: افتراضي · تحويم · تحميل · معطّل

   حالات الواجهة المغطاة

   • تحميلهيكل Skeleton لبطاقات الفعاليات.

   المتطلبات:PUB-01

   
2. 2

   باحث العضوية

   /memberships/finder

   افتح هذه الخطوة

   الشاشة: اكتشف العضوية المناسبة

   ماذا يفعل المستخدم

   تجيب عن ٣ أسئلة قصيرة عن مؤهلها وخبرتها.

   ماذا يعرض النظام

   توصية فورية بفئة مع سبب الاختيار وما ينقصها إن وُجد.

   المكوّنات المستخدمة

   • Choices (Radio / Chip / Segmented)اختيار من خيارات قليلة

     لماذا هنا: اختيارات قليلة مرئية دفعة واحدة بدل قائمة منسدلة.

     حالاته: محدد · غير محدد · معطّل · تركيز

   • CategoryCardبطاقة فئة عضوية

     لماذا هنا: تعرض الفئة الموصى بها بصورتها وشروطها.

     حالاته: افتراضي · مقترحة · مختارة للمقارنة

   حالات الواجهة المغطاة

   • فارغقبل الإجابة: رسالة تشرح ما سيحدث.

   المتطلبات:PUB-04

   
3. 3

   تفاصيل الفئة

   /memberships/MP

   افتح هذه الخطوة

   الشاشة: تفاصيل فئة العضوية

   ماذا يفعل المستخدم

   تقرأ الشروط والرسوم والمزايا وتتأكد من المستندات المطلوبة.

   ماذا يعرض النظام

   شروط مختصرة، رسوم بالضريبة، وأسئلة شائعة.

   المكوّنات المستخدمة

   • CategoryCardبطاقة فئة عضوية

     لماذا هنا: ملخص الفئة المعتمد نفسه من الباحث لاتساق الرسالة.

     حالاته: افتراضي · مقترحة · مختارة للمقارنة

   • Accordionأسئلة وإجابات قابلة للطي

     لماذا هنا: الأسئلة الشائعة تُطوى فلا تطول الصفحة.

     حالاته: مطوي · مفتوح

   • Buttonالإجراء الأساسي والثانوي

     لماذا هنا: «ابدأ الطلب» يقود للتسجيل.

     حالاته: افتراضي · تحويم · تحميل · معطّل

   المتطلبات:PUB-05PUB-03

   
4. 4

   إنشاء الحساب والتحقق

   /register

   افتح هذه الخطوة

   الشاشة: إنشاء حساب

   ماذا يفعل المستخدم

   تدخل بياناتها وتُكمل رمز التحقق المرسل لجوالها.

   ماذا يعرض النظام

   نموذج قصير، ثم رمز من ٦ خانات مع عدّاد إعادة إرسال.

   المكوّنات المستخدمة

   • Field / Inputحقول نصية مع تسمية ومساعدة

     لماذا هنا: حقول بتسميات ومساعدة تمنع الأخطاء مبكراً.

     حالاته: افتراضي · تركيز · خطأ · معطّل · مقروء فقط

   • OtpInputرمز التحقق المكوّن من خانات

     لماذا هنا: لصق وتعبئة تلقائية من الرسالة.

     حالاته: إدخال · خطأ (اهتزاز) · عدّاد إعادة الإرسال · نجاح

   • ErrorSummary + AutosaveIndicatorملخص الأخطاء والحفظ التلقائي

     لماذا هنا: ملخص الأخطاء بروابط للحقول بعد محاولة الإرسال.

     حالاته: جارٍ الحفظ · تم الحفظ · دون اتصال · أخطاء بروابط

   حالات الواجهة المغطاة

   • خطأرمز خاطئ: اهتزاز خفيف ورسالة.
   • نجاحتفعيل الحساب ثم الانتقال للبوابة.

   المتطلبات:IAM-01IAM-03

   
5. 5

   تعبئة الطلب

   /portal/apply

   افتح هذه الخطوة

   الشاشة: طلب عضوية جديد

   ماذا يفعل المستخدم

   تتنقل بين خطوات النموذج وترفع مستنداتها أو ترفق الموثّقة من «مستنداتي».

   ماذا يعرض النظام

   خطوات واضحة، حفظ تلقائي، ومستندات مرفقة بحالتها.

   المكوّنات المستخدمة

   • Stepper / VerticalStepperموضع المستخدم من المسار

     لماذا هنا: تعرف أين هي وكم تبقى.

     حالاته: مكتملة · حالية · قادمة · بها مشكلة

   • Select / Combobox / DatePickerقيم مرجعية وتواريخ هجرية/ميلادية

     لماذا هنا: جهات وتخصصات بالبحث التلقائي بدل الإدخال الحر.

     حالاته: فارغ · بحث · نتائج · لا نتائج

   • FileUploadرفع مستند أو إرفاق موثّق

     لماذا هنا: سحب وإفلات أو كاميرا الجوال أو إرفاق موثّق بنقرة.

     حالاته: فارغ · سحب · جارٍ الرفع · تم · مرفوض

   • ErrorSummary + AutosaveIndicatorملخص الأخطاء والحفظ التلقائي

     لماذا هنا: الحفظ التلقائي يطمئنها أن شيئاً لن يضيع.

     حالاته: جارٍ الحفظ · تم الحفظ · دون اتصال · أخطاء بروابط

   حالات الواجهة المغطاة

   • دون اتصالانقطاع الشبكة: يُحفظ محلياً ويُزامن لاحقاً.
   • خطأملف كبير أو صيغة غير مقبولة.

   المتطلبات:APP-01APP-02APP-03APP-04

   
6. 6

   المراجعة والإرسال

   /portal/apply

   افتح هذه الخطوة

   الشاشة: طلب عضوية جديد

   ماذا يفعل المستخدم

   تراجع الملخص وتقرّ بصحة البيانات وترسل.

   ماذا يعرض النظام

   لحظة نجاح برقم الطلب وما سيحدث بعدها.

   المكوّنات المستخدمة

   • SuccessMomentلحظة نجاح كبيرة

     لماذا هنا: لحظة كبيرة تستحق تأكيداً مميزاً.

     حالاته: نجاح (غبار ذهبي) · يخمد مع تقليل الحركة

   • notify (Toast)تأكيد سريع مع تراجع

     لماذا هنا: تأكيد إرسال الإشعار بالبريد.

     حالاته: نجاح · خطأ · مع زر تراجع

   حالات الواجهة المغطاة

   • نجاحرقم الطلب + نسخة للتحميل.

   المتطلبات:APP-06

   
7. 7

   متابعة الطلب

   /portal/requests

   افتح هذه الخطوة

   الشاشة: طلباتي

   ماذا يفعل المستخدم

   تفتح «طلباتي» لتعرف الحالة.

   ماذا يعرض النظام

   حالة الطلب والمسؤول والموعد المتوقع للقرار.

   المكوّنات المستخدمة

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: حالة واحدة مفهومة بلون وأيقونة ونص.

     حالاته: كل حالات القاموس

   • NextStepPanelمن المسؤول؟ ماذا أفعل؟ متى القرار؟

     لماذا هنا: تجيب من المسؤول الآن وماذا عليها.

     حالاته: بانتظاري · بانتظار الجمعية · مكتمل

   حالات الواجهة المغطاة

   • فارغقبل أول طلب: دعوة لبدء الطلب.

   المتطلبات:APP-07HOM-07

   

1. 1

   وصول الإشعار

   /portal/notifications

   افتح هذه الخطوة

   الشاشة: الإشعارات

   ماذا يفعل المستخدم

   تفتح الإشعار «مطلوب استكمال».

   ماذا يعرض النظام

   نص يحدد المستند الناقص وزر «استكمل الآن».

   المكوّنات المستخدمة

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: شارة «بانتظار الاستكمال» تلخّص الوضع.

     حالاته: كل حالات القاموس

   • Buttonالإجراء الأساسي والثانوي

     لماذا هنا: زر مباشر للطلب لا للقائمة.

     حالاته: افتراضي · تحويم · تحميل · معطّل

   حالات الواجهة المغطاة

   • فارغلا إشعارات: رسالة هادئة.

   المتطلبات:NTF-06NTF-02

   
2. 2

   مركز المهام

   /portal

   افتح هذه الخطوة

   الشاشة: الرئيسية

   ماذا يفعل المستخدم

   تراه كأول مهمة عاجلة في الصفحة الرئيسية.

   ماذا يعرض النظام

   بطاقة مهمة مع موعد وزر يفتح الشاشة المطلوبة.

   المكوّنات المستخدمة

   • TaskCardمهمة تفتح شاشتها مباشرة

     لماذا هنا: كل ما ينتظرها في مكان واحد بترتيب الأولوية.

     حالاته: عاجلة · عادية · مكتملة · فارغ

   • هيكل البوابةشريط جانبي وعلوي وبحث ⌘K

     لماذا هنا: الجرس يعرض عدد الإشعارات الجديدة.

     حالاته: موسّع · مطوي · إشعارات جديدة

   حالات الواجهة المغطاة

   • تحميلهيكل للمهام عند التحميل.

   المتطلبات:HOM-02HOM-01

   
3. 3

   وضع الاستكمال

   /portal/requests/MEM-2026-004812

   افتح هذه الخطوة

   الشاشة: تفاصيل طلب + الاستكمال

   ماذا يفعل المستخدم

   ترى سبب الطلب بكلام المراجع وترفع المستند.

   ماذا يعرض النظام

   لوحة الخطوة التالية ومستند ناقص بإطار مميز وخط زمني للطلب.

   المكوّنات المستخدمة

   • NextStepPanelمن المسؤول؟ ماذا أفعل؟ متى القرار؟

     لماذا هنا: تقول «الدور عليك» وما المطلوب ومتى.

     حالاته: بانتظاري · بانتظار الجمعية · مكتمل

   • DocumentCardمستند مع حالته

     لماذا هنا: المستند المرفوض يظهر بسبب الرفض بجانبه.

     حالاته: موثّق · قيد المراجعة · مرفوض · منتهٍ

   • FileUploadرفع مستند أو إرفاق موثّق

     لماذا هنا: الرفع في نفس المكان دون مغادرة.

     حالاته: فارغ · سحب · جارٍ الرفع · تم · مرفوض

   • Timelineأحداث الطلب بتواريخها

     لماذا هنا: سجل ما جرى حتى الآن.

     حالاته: حدث ماضٍ · الحالي ينبض · قادم

   حالات الواجهة المغطاة

   • خطأفشل رفع: إعادة المحاولة بنقرة.
   • دون اتصاليُحفظ المرفق ويُرسل عند عودة الشبكة.

   المتطلبات:APP-07APP-08APP-04

   
4. 4

   إعادة الإرسال

   /portal/requests/MEM-2026-004812

   افتح هذه الخطوة

   الشاشة: تفاصيل طلب + الاستكمال

   ماذا يفعل المستخدم

   تضغط «أعد الإرسال» بعد إرفاق الناقص.

   ماذا يعرض النظام

   حالة تتحول إلى «قيد المراجعة» وحدث جديد في الخط الزمني.

   المكوّنات المستخدمة

   • notify (Toast)تأكيد سريع مع تراجع

     لماذا هنا: تأكيد سريع مع تراجع.

     حالاته: نجاح · خطأ · مع زر تراجع

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: الحالة الجديدة فوراً (تحديث متفائل).

     حالاته: كل حالات القاموس

   • Timelineأحداث الطلب بتواريخها

     لماذا هنا: الحدث الجديد ينبض كحالي.

     حالاته: حدث ماضٍ · الحالي ينبض · قادم

   حالات الواجهة المغطاة

   • نجاحتمت إعادة الإرسال والمراجع أُخطر.

   المتطلبات:APP-08APP-07

   

1. 1

   التذكير

   /portal/notifications

   افتح هذه الخطوة

   الشاشة: الإشعارات

   ماذا يفعل المستخدم

   يفتح تذكير التجديد.

   ماذا يعرض النظام

   رسالة بتاريخ الانتهاء وزر «جدّد الآن».

   المكوّنات المستخدمة

   • Alertتنبيه مضمّن في الصفحة

     لماذا هنا: تنبيه تحذيري هادئ لا مُقلق.

     حالاته: معلومة · نجاح · تحذير · خطأ

   • Buttonالإجراء الأساسي والثانوي

     لماذا هنا: وجهة واحدة واضحة.

     حالاته: افتراضي · تحويم · تحميل · معطّل

   المتطلبات:NTF-03LIF-05

   
2. 2

   عضويتي

   /portal/membership

   افتح هذه الخطوة

   الشاشة: عضويتي

   ماذا يفعل المستخدم

   يراجع حالة العضوية وتاريخ الانتهاء.

   ماذا يعرض النظام

   بطاقة رقمية بشارة «تنتهي قريباً» وزر تجديد.

   المكوّنات المستخدمة

   • MembershipCardالبطاقة الرقمية وQR

     لماذا هنا: تعرض البطاقة والـ QR وحالتها.

     حالاته: نشطة · تنتهي قريباً · منتهية · QR دون اتصال

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: «تنتهي قريباً» ظاهرة بالنص لا باللون فقط.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • دون اتصالالبطاقة وQR يعملان دون اتصال.

   المتطلبات:LIF-02LIF-03

   
3. 3

   جاهزية التجديد

   /portal/membership/renew

   افتح هذه الخطوة

   الشاشة: تجديد العضوية

   ماذا يفعل المستخدم

   يعالج العوائق: ساعات CPD، وثيقة منتهية.

   ماذا يعرض النظام

   قائمة عوائق لكل منها زر مباشر؛ تكتمل فيتفعّل «متابعة».

   المكوّنات المستخدمة

   • ReadinessChecklistعوائق كل منها زر مباشر

     لماذا هنا: تكشف العوائق قبل الدفع لا بعده.

     حالاته: عائق · جاهز · الكل مكتمل يفعّل الزر

   • CpdProgressساعات معتمدة مقابل المطلوب

     لماذا هنا: تُظهر الناقص من الساعات.

     حالاته: ضمن الهدف · معلّقة · ناقص · مكتمل

   • DocumentCardمستند مع حالته

     لماذا هنا: وثيقة منتهية بزر تجديد.

     حالاته: موثّق · قيد المراجعة · مرفوض · منتهٍ

   حالات الواجهة المغطاة

   • نجاحالكل جاهز: الزر يتفعّل بحركة هادئة.

   المتطلبات:LIF-05CRD-08CPD-06

   
4. 4

   اختيار الخطة

   /portal/membership/renew

   افتح هذه الخطوة

   الشاشة: تجديد العضوية

   ماذا يفعل المستخدم

   يختار سنة أو سنتين ويراجع الرسوم.

   ماذا يعرض النظام

   الرسوم والضريبة والإجمالي والتاريخ الجديد للانتهاء.

   المكوّنات المستخدمة

   • Choices (Radio / Chip / Segmented)اختيار من خيارات قليلة

     لماذا هنا: تبديل المدة بنقرة.

     حالاته: محدد · غير محدد · معطّل · تركيز

   • MoneySummary / AuditSummaryالمبلغ والضريبة والإجمالي

     لماذا هنا: المبلغ كاملاً قبل التحويل لبوابة الدفع.

     حالاته: قبل الدفع · مدفوع · مسترد

   المتطلبات:LIF-06PAY-02

   
5. 5

   الدفع

   /portal/payments/checkout

   افتح هذه الخطوة

   الشاشة: الدفع

   ماذا يفعل المستخدم

   يختار وسيلة الدفع ويؤكد.

   ماذا يعرض النظام

   ملخص الطلب وتحويل آمن للبوابة ثم عودة بنتيجة.

   المكوّنات المستخدمة

   • MoneySummary / AuditSummaryالمبلغ والضريبة والإجمالي

     لماذا هنا: نفس الملخص طوال المسار.

     حالاته: قبل الدفع · مدفوع · مسترد

   • Buttonالإجراء الأساسي والثانوي

     لماذا هنا: زر دفع بحالة تحميل يمنع النقر المزدوج.

     حالاته: افتراضي · تحويم · تحميل · معطّل

   • Skeleton / EmptyState / ErrorStateتحميل وفراغ وخطأ

     لماذا هنا: هيكل أثناء انتظار البوابة.

     حالاته: تحميل · فارغ · خطأ مع إعادة المحاولة

   حالات الواجهة المغطاة

   • تحميلجارٍ التحويل للبوابة.
   • خطأفشل الدفع: انظر رحلة «فشل الدفع».

   المتطلبات:PAY-02PAY-03

   
6. 6

   البطاقة المحدّثة

   /portal/membership

   افتح هذه الخطوة

   الشاشة: عضويتي

   ماذا يفعل المستخدم

   يعود إلى «عضويتي».

   ماذا يعرض النظام

   بطاقة بتاريخ جديد، وإيصال، وتأكيد.

   المكوّنات المستخدمة

   • MembershipCardالبطاقة الرقمية وQR

     لماذا هنا: تتحدث فورياً ويظهر QR الجديد.

     حالاته: نشطة · تنتهي قريباً · منتهية · QR دون اتصال

   • SuccessMomentلحظة نجاح كبيرة

     لماذا هنا: لحظة تأكيد التفعيل.

     حالاته: نجاح (غبار ذهبي) · يخمد مع تقليل الحركة

   حالات الواجهة المغطاة

   • نجاحإيصال PDF وإشعار بريد.

   المتطلبات:LIF-01PAY-05

   

1. 1

   مخطط الفجوة

   /portal/cpd

   افتح هذه الخطوة

   الشاشة: التطوير المهني CPD

   ماذا يفعل المستخدم

   يرى ما أنجزه والمتبقي وأنشطة مقترحة.

   ماذا يعرض النظام

   حلقة تقدم، توزيع حسب النوع مع الحدود القصوى، وفعاليات تغطي الفجوة.

   المكوّنات المستخدمة

   • CpdProgressساعات معتمدة مقابل المطلوب

     لماذا هنا: المعتمد والمعلّق منفصلان فلا يُضلَّل.

     حالاته: ضمن الهدف · معلّقة · ناقص · مكتمل

   • Chartsرسوم بيانية ومؤشرات اتجاه

     لماذا هنا: التوزيع حسب النوع.

     حالاته: بيانات · تحميل · فارغ

   • EventCardفعالية أو دورة

     لماذا هنا: فعاليات مقترحة تسد الفجوة.

     حالاته: متاحة · ممتلئة · قائمة انتظار · مسجّل

   حالات الواجهة المغطاة

   • فارغلا أنشطة بعد: دعوة لإضافة أول نشاط.

   المتطلبات:CPD-03CPD-06CPD-07

   
2. 2

   شيت النشاط الخارجي

   /portal/cpd

   افتح هذه الخطوة

   الشاشة: التطوير المهني CPD

   ماذا يفعل المستخدم

   يضيف نشاطاً من جهة خارجية بشهادته.

   ماذا يعرض النظام

   شيت جانبي: نوع النشاط، التاريخ، الساعات، الإثبات.

   المكوّنات المستخدمة

   • Sheet / ConfirmDialogمهمة ثانوية بلا مغادرة الصفحة

     لماذا هنا: شيت يبقي سياق الصفحة ظاهراً.

     حالاته: مغلقة · مفتوحة · تأكيد لإجراء لا رجعة فيه

   • Select / Combobox / DatePickerقيم مرجعية وتواريخ هجرية/ميلادية

     لماذا هنا: نوع النشاط ومنح الساعات من قائمة مرجعية.

     حالاته: فارغ · بحث · نتائج · لا نتائج

   • FileUploadرفع مستند أو إرفاق موثّق

     لماذا هنا: رفع الإثبات.

     حالاته: فارغ · سحب · جارٍ الرفع · تم · مرفوض

   • Field / Inputحقول نصية مع تسمية ومساعدة

     لماذا هنا: ساعات بتحقق فوري من الحد الأقصى.

     حالاته: افتراضي · تركيز · خطأ · معطّل · مقروء فقط

   حالات الواجهة المغطاة

   • خطأتجاوز الحد الأقصى لنوع النشاط.

   المتطلبات:CPD-02CPD-03

   
3. 3

   مراجعة الموظف

   /admin/cpd

   افتح هذه الخطوة

   الشاشة: مراجعة CPD

   ماذا يفعل المستخدم

   يراجع الموظف الإثبات ويعتمد أو يرفض.

   ماذا يعرض النظام

   صف النشاط في الطابور وشيت مقارنة مع الإثبات.

   المكوّنات المستخدمة

   • DataTableجدول بعروض وفلاتر وشيت سجل

     لماذا هنا: طابور بعروض محفوظة وفلاتر.

     حالاته: تحميل · فارغ · تحديد متعدد · لوحة

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: قيد المراجعة ← معتمد/مرفوض.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • فارغالطابور فارغ: «لا شيء بانتظارك».

   المتطلبات:CPD-04CPD-09

   
4. 4

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

   /portal/cpd

   افتح هذه الخطوة

   الشاشة: التطوير المهني CPD

   ماذا يفعل المستخدم

   يرى النتيجة في سجل الساعات.

   ماذا يعرض النظام

   الساعات تنتقل من «معلّقة» إلى «معتمدة» وإشعار بالقرار.

   المكوّنات المستخدمة

   • CpdProgressساعات معتمدة مقابل المطلوب

     لماذا هنا: التقدم يتحدث بحركة.

     حالاته: ضمن الهدف · معلّقة · ناقص · مكتمل

   • Timelineأحداث الطلب بتواريخها

     لماذا هنا: سجل الأنشطة بتواريخها.

     حالاته: حدث ماضٍ · الحالي ينبض · قادم

   • notify (Toast)تأكيد سريع مع تراجع

     لماذا هنا: تأكيد قرار الاعتماد.

     حالاته: نجاح · خطأ · مع زر تراجع

   حالات الواجهة المغطاة

   • نجاحاكتملت الساعات وتفعّل التجديد.

   المتطلبات:CPD-06CPD-08

   

1. 1

   المسارات

   /portal/credentials

   افتح هذه الخطوة

   الشاشة: اعتماداتي وشهاداتي

   ماذا يفعل المستخدم

   تتصفح مسارات الاعتماد.

   ماذا يعرض النظام

   بطاقات مسارات بمتطلبات ومدة وحالة أهليتها.

   المكوّنات المستخدمة

   • CategoryCardبطاقة فئة عضوية

     لماذا هنا: نمط البطاقة المألوف للمسارات.

     حالاته: افتراضي · مقترحة · مختارة للمقارنة

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: أهلية: مؤهلة / غير مؤهلة بعد.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • فارغلا اعتمادات بعد.

   المتطلبات:CRD-02CRD-03

   
2. 2

   فحص الأهلية المسبق

   /portal/credentials

   افتح هذه الخطوة

   الشاشة: اعتماداتي وشهاداتي

   ماذا يفعل المستخدم

   تشغّل الفحص قبل أن تقدّم.

   ماذا يعرض النظام

   قائمة شروط مستوفاة وناقصة بزر لكل ناقص.

   المكوّنات المستخدمة

   • ReadinessChecklistعوائق كل منها زر مباشر

     لماذا هنا: نفس نمط جاهزية التجديد لسهولة الفهم.

     حالاته: عائق · جاهز · الكل مكتمل يفعّل الزر

   • CpdProgressساعات معتمدة مقابل المطلوب

     لماذا هنا: تقاطع مع ساعات CPD.

     حالاته: ضمن الهدف · معلّقة · ناقص · مكتمل

   المتطلبات:CRD-04

   
3. 3

   تقديم الطلب

   /portal/credentials

   افتح هذه الخطوة

   الشاشة: اعتماداتي وشهاداتي

   ماذا يفعل المستخدم

   تعبئ طلب الاعتماد وترفق الإثباتات.

   ماذا يعرض النظام

   نموذج مقسّم بحفظ تلقائي.

   المكوّنات المستخدمة

   • Stepper / VerticalStepperموضع المستخدم من المسار

     لماذا هنا: الخطوات واضحة.

     حالاته: مكتملة · حالية · قادمة · بها مشكلة

   • FileUploadرفع مستند أو إرفاق موثّق

     لماذا هنا: إثباتات متعددة.

     حالاته: فارغ · سحب · جارٍ الرفع · تم · مرفوض

   • ErrorSummary + AutosaveIndicatorملخص الأخطاء والحفظ التلقائي

     لماذا هنا: حفظ تلقائي وملخص أخطاء.

     حالاته: جارٍ الحفظ · تم الحفظ · دون اتصال · أخطاء بروابط

   حالات الواجهة المغطاة

   • دون اتصالحفظ محلي.

   المتطلبات:CRD-04APP-03

   
4. 4

   المقابلة واللجنة

   /portal/credentials

   افتح هذه الخطوة

   الشاشة: اعتماداتي وشهاداتي

   ماذا يفعل المستخدم

   تحجز موعد المقابلة وتتابع قرار اللجنة.

   ماذا يعرض النظام

   خط زمني بمراحل الاعتماد وموعد قادم.

   المكوّنات المستخدمة

   • Timelineأحداث الطلب بتواريخها

     لماذا هنا: كل مرحلة وتاريخها.

     حالاته: حدث ماضٍ · الحالي ينبض · قادم

   • NextStepPanelمن المسؤول؟ ماذا أفعل؟ متى القرار؟

     لماذا هنا: تبين من يملك الكرة الآن.

     حالاته: بانتظاري · بانتظار الجمعية · مكتمل

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: حالة المرحلة.

     حالاته: كل حالات القاموس

   المتطلبات:CRD-05CRD-09

   
5. 5

   صدور الشهادة

   /portal/credentials

   افتح هذه الخطوة

   الشاشة: اعتماداتي وشهاداتي

   ماذا يفعل المستخدم

   تستلم الشهادة وتشاركها.

   ماذا يعرض النظام

   شهادة بهوية الجمعية، رقم فريد، وQR.

   المكوّنات المستخدمة

   • CertificatePreviewالشهادة الإلكترونية

     لماذا هنا: جاهزة للطباعة A4 أفقي.

     حالاته: صالحة · ملغاة · منتهية

   • SuccessMomentلحظة نجاح كبيرة

     لماذا هنا: لحظة إصدار.

     حالاته: نجاح (غبار ذهبي) · يخمد مع تقليل الحركة

   حالات الواجهة المغطاة

   • نجاحرابط تحقق قابل للمشاركة.

   المتطلبات:CRD-06CRD-10

   
6. 6

   التحقق العام

   /verify

   افتح هذه الخطوة

   الشاشة: التحقق من عضوية أو شهادة

   ماذا يفعل المستخدم

   جهة العمل تتحقق من الشهادة.

   ماذا يعرض النظام

   نتيجة مختصرة دون هوية أو جوال.

   المكوّنات المستخدمة

   • VerificationSealنتيجة التحقق العامة

     لماذا هنا: الملغاة تظهر «ملغاة» لا «غير موجودة».

     حالاته: صالح · ملغى · منتهٍ · غير موجود

   حالات الواجهة المغطاة

   • خطأرقم غير صحيح: رسالة ودودة.

   المتطلبات:PUB-09PUB-10CRD-07

   

1. 1

   كتالوج الفعاليات

   /events

   افتح هذه الخطوة

   الشاشة: الفعاليات والتدريب

   ماذا يفعل المستخدم

   يتصفح ويفلتر حسب النوع والتاريخ.

   ماذا يعرض النظام

   بطاقات فعاليات بحالة التوفر.

   المكوّنات المستخدمة

   • EventCardفعالية أو دورة

     لماذا هنا: حالة المقاعد ظاهرة بالبطاقة.

     حالاته: متاحة · ممتلئة · قائمة انتظار · مسجّل

   • Choices (Radio / Chip / Segmented)اختيار من خيارات قليلة

     لماذا هنا: فلاتر النوع والنمط.

     حالاته: محدد · غير محدد · معطّل · تركيز

   • Breadcrumbs / Pagination / Tabsمسار التنقل والصفحات

     لماذا هنا: ترقيم الصفحات.

     حالاته: نشط · معطّل · أول/آخر صفحة

   حالات الواجهة المغطاة

   • فارغلا نتائج: اقتراح تخفيف الفلاتر.
   • تحميلهياكل البطاقات.

   المتطلبات:PUB-07TRN-02

   
2. 2

   تفاصيل الفعالية

   /events/future-mining-forum

   افتح هذه الخطوة

   الشاشة: تفاصيل فعالية

   ماذا يفعل المستخدم

   يقرأ البرنامج والرسوم والساعات المعتمدة.

   ماذا يعرض النظام

   برنامج، متحدثون، وسعر العضو مقابل غير العضو.

   المكوّنات المستخدمة

   • Buttonالإجراء الأساسي والثانوي

     لماذا هنا: «سجّل الآن» إجراء واحد.

     حالاته: افتراضي · تحويم · تحميل · معطّل

   • Alertتنبيه مضمّن في الصفحة

     لماذا هنا: تنبيه المقاعد المتبقية.

     حالاته: معلومة · نجاح · تحذير · خطأ

   حالات الواجهة المغطاة

   • خطأفعالية ممتلئة: قائمة انتظار.

   المتطلبات:PUB-08TRN-02

   
3. 3

   شيت التسجيل

   /events/future-mining-forum

   افتح هذه الخطوة

   الشاشة: تفاصيل فعالية

   ماذا يفعل المستخدم

   يؤكد بياناته ويدفع إن لزم.

   ماذا يعرض النظام

   شيت بملخص ومبلغ وزر تأكيد.

   المكوّنات المستخدمة

   • Sheet / ConfirmDialogمهمة ثانوية بلا مغادرة الصفحة

     لماذا هنا: شيت يحفظ سياق الفعالية.

     حالاته: مغلقة · مفتوحة · تأكيد لإجراء لا رجعة فيه

   • MoneySummary / AuditSummaryالمبلغ والضريبة والإجمالي

     لماذا هنا: الرسوم والضريبة واضحة.

     حالاته: قبل الدفع · مدفوع · مسترد

   • notify (Toast)تأكيد سريع مع تراجع

     لماذا هنا: تأكيد التسجيل.

     حالاته: نجاح · خطأ · مع زر تراجع

   حالات الواجهة المغطاة

   • نجاحمسجّل مع إرسال التذكرة.

   المتطلبات:TRN-03TRN-04

   
4. 4

   تذكرة QR

   /portal/events

   افتح هذه الخطوة

   الشاشة: فعالياتي والتدريب

   ماذا يفعل المستخدم

   يفتح التذكرة يوم الفعالية.

   ماذا يعرض النظام

   تذكرة بـ QR تعمل دون اتصال.

   المكوّنات المستخدمة

   • MembershipCardالبطاقة الرقمية وQR

     لماذا هنا: نفس مبدأ البطاقة بـ QR موقّع.

     حالاته: نشطة · تنتهي قريباً · منتهية · QR دون اتصال

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: «مسجّل» ثم «حضر».

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • دون اتصالالتذكرة محفوظة دون إنترنت.

   المتطلبات:TRN-03TRN-13

   
5. 5

   تسجيل الحضور

   /admin/events

   افتح هذه الخطوة

   الشاشة: الفعاليات والتدريب

   ماذا يفعل المستخدم

   موظف الاستقبال يمسح QR.

   ماذا يعرض النظام

   نتيجة فورية: مرحباً باسم الحاضر.

   المكوّنات المستخدمة

   • StatCardمؤشر رقمي مع اتجاه

     لماذا هنا: عدّاد الحضور الحي.

     حالاته: ارتفاع · انخفاض · ثابت · تحميل

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: حاضر / مكرر / غير مسجّل.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • دون اتصالوضع دون اتصال يزامن لاحقاً.

   المتطلبات:TRN-07TRN-09

   
6. 6

   التقييم

   /portal/events

   افتح هذه الخطوة

   الشاشة: فعالياتي والتدريب

   ماذا يفعل المستخدم

   يقيّم الفعالية بنقرات.

   ماذا يعرض النظام

   نموذج تقييم قصير.

   المكوّنات المستخدمة

   • Choices (Radio / Chip / Segmented)اختيار من خيارات قليلة

     لماذا هنا: تقييم بخيارات مرئية.

     حالاته: محدد · غير محدد · معطّل · تركيز

   • Field / Inputحقول نصية مع تسمية ومساعدة

     لماذا هنا: ملاحظات اختيارية.

     حالاته: افتراضي · تركيز · خطأ · معطّل · مقروء فقط

   حالات الواجهة المغطاة

   • نجاحشكر وإتاحة الشهادة.

   المتطلبات:TRN-11

   
7. 7

   احتساب CPD

   /portal/cpd

   افتح هذه الخطوة

   الشاشة: التطوير المهني CPD

   ماذا يفعل المستخدم

   يجد الساعات مضافة.

   ماذا يعرض النظام

   ساعات الفعالية في السجل «معتمدة».

   المكوّنات المستخدمة

   • CpdProgressساعات معتمدة مقابل المطلوب

     لماذا هنا: التقدم يرتفع.

     حالاته: ضمن الهدف · معلّقة · ناقص · مكتمل

   • notify (Toast)تأكيد سريع مع تراجع

     لماذا هنا: إشعار بالإضافة.

     حالاته: نجاح · خطأ · مع زر تراجع

   حالات الواجهة المغطاة

   • نجاحإضافة تلقائية دون طلب.

   المتطلبات:TRN-12CPD-05

   

1. 1

   الدفع

   /portal/payments/checkout

   افتح هذه الخطوة

   الشاشة: الدفع

   ماذا يفعل المستخدم

   يؤكد الدفع.

   ماذا يعرض النظام

   ملخص المبلغ ثم تحويل للبوابة.

   المكوّنات المستخدمة

   • MoneySummary / AuditSummaryالمبلغ والضريبة والإجمالي

     لماذا هنا: المبلغ لا يتغير بين الشاشات.

     حالاته: قبل الدفع · مدفوع · مسترد

   • Buttonالإجراء الأساسي والثانوي

     لماذا هنا: حالة تحميل تمنع النقر المزدوج.

     حالاته: افتراضي · تحويم · تحميل · معطّل

   حالات الواجهة المغطاة

   • تحميلجارٍ المعالجة.

   المتطلبات:PAY-02PAY-03

   
2. 2

   الفشل

   /portal/payments/checkout

   افتح هذه الخطوة

   الشاشة: الدفع

   ماذا يفعل المستخدم

   يعود من البوابة برفض.

   ماذا يعرض النظام

   رسالة سبب مفهوم، وتأكيد أنه لم يُخصم شيء.

   المكوّنات المستخدمة

   • Alertتنبيه مضمّن في الصفحة

     لماذا هنا: تنبيه خطأ بلغة بشرية.

     حالاته: معلومة · نجاح · تحذير · خطأ

   • Skeleton / EmptyState / ErrorStateتحميل وفراغ وخطأ

     لماذا هنا: ErrorState بزر إعادة محاولة.

     حالاته: تحميل · فارغ · خطأ مع إعادة المحاولة

   حالات الواجهة المغطاة

   • خطأرفض البنك / انتهاء الجلسة / رصيد غير كافٍ.

   المتطلبات:PAY-04

   
3. 3

   التعافي

   /portal/payments/checkout

   افتح هذه الخطوة

   الشاشة: الدفع

   ماذا يفعل المستخدم

   يغيّر الوسيلة أو يعيد المحاولة.

   ماذا يعرض النظام

   السلة محفوظة كما هي مع وسائل بديلة.

   المكوّنات المستخدمة

   • Choices (Radio / Chip / Segmented)اختيار من خيارات قليلة

     لماذا هنا: وسائل الدفع كخيارات.

     حالاته: محدد · غير محدد · معطّل · تركيز

   • Buttonالإجراء الأساسي والثانوي

     لماذا هنا: إعادة المحاولة بنقرة.

     حالاته: افتراضي · تحويم · تحميل · معطّل

   • notify (Toast)تأكيد سريع مع تراجع

     لماذا هنا: تأكيد النجاح.

     حالاته: نجاح · خطأ · مع زر تراجع

   حالات الواجهة المغطاة

   • نجاحتم الدفع وصدر الإيصال.

   المتطلبات:PAY-04PAY-05

   
4. 4

   السجل والإيصال

   /portal/payments

   افتح هذه الخطوة

   الشاشة: المدفوعات والفواتير

   ماذا يفعل المستخدم

   يراجع المحاولات والإيصال.

   ماذا يعرض النظام

   محاولة فاشلة ومحاولة ناجحة بحالتيهما.

   المكوّنات المستخدمة

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: فشل / مدفوع.

     حالاته: كل حالات القاموس

   • DataTableجدول بعروض وفلاتر وشيت سجل

     لماذا هنا: قائمة الفواتير.

     حالاته: تحميل · فارغ · تحديد متعدد · لوحة

   حالات الواجهة المغطاة

   • فارغلا مدفوعات بعد.

   المتطلبات:PAY-08PAY-05

   

1. 1

   البحث في المساعدة

   /help

   افتح هذه الخطوة

   الشاشة: مركز المساعدة

   ماذا يفعل المستخدم

   تكتب سؤالها في البحث.

   ماذا يعرض النظام

   مقالات مقترحة وأسئلة شائعة.

   المكوّنات المستخدمة

   • Field / Inputحقول نصية مع تسمية ومساعدة

     لماذا هنا: SearchInput بنتائج فورية.

     حالاته: افتراضي · تركيز · خطأ · معطّل · مقروء فقط

   • Accordionأسئلة وإجابات قابلة للطي

     لماذا هنا: الأسئلة الشائعة.

     حالاته: مطوي · مفتوح

   حالات الواجهة المغطاة

   • فارغلا نتائج: زر «افتح تذكرة».

   المتطلبات:PUB-12SUP-06

   
2. 2

   تذكرة جديدة بمقترحات

   /portal/support

   افتح هذه الخطوة

   الشاشة: الدعم

   ماذا يفعل المستخدم

   تكتب العنوان فتظهر مقالات مشابهة.

   ماذا يعرض النظام

   شيت تذكرة مع مقترحات حية أسفل العنوان.

   المكوّنات المستخدمة

   • Sheet / ConfirmDialogمهمة ثانوية بلا مغادرة الصفحة

     لماذا هنا: شيت يحفظ سياق قائمة تذاكرها.

     حالاته: مغلقة · مفتوحة · تأكيد لإجراء لا رجعة فيه

   • Select / Combobox / DatePickerقيم مرجعية وتواريخ هجرية/ميلادية

     لماذا هنا: فئة وأولوية من القوائم المرجعية.

     حالاته: فارغ · بحث · نتائج · لا نتائج

   • FileUploadرفع مستند أو إرفاق موثّق

     لماذا هنا: لقطة شاشة.

     حالاته: فارغ · سحب · جارٍ الرفع · تم · مرفوض

   • ErrorSummary + AutosaveIndicatorملخص الأخطاء والحفظ التلقائي

     لماذا هنا: ملخص أخطاء.

     حالاته: جارٍ الحفظ · تم الحفظ · دون اتصال · أخطاء بروابط

   حالات الواجهة المغطاة

   • نجاحرقم التذكرة وموعد الرد.

   المتطلبات:SUP-01SUP-02

   
3. 3

   المحادثة

   /portal/support

   افتح هذه الخطوة

   الشاشة: الدعم

   ماذا يفعل المستخدم

   تتبادل الردود مع الموظف.

   ماذا يعرض النظام

   محادثة بحالة «بانتظار ردك» أو «قيد المعالجة».

   المكوّنات المستخدمة

   • Timelineأحداث الطلب بتواريخها

     لماذا هنا: ترتيب زمني للرسائل.

     حالاته: حدث ماضٍ · الحالي ينبض · قادم

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: الحالة ظاهرة دائماً.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • دون اتصالالرد يُرسل عند عودة الشبكة.

   المتطلبات:SUP-03SUP-04

   
4. 4

   تقييم الرضا

   /portal/support

   افتح هذه الخطوة

   الشاشة: الدعم

   ماذا يفعل المستخدم

   تقيّم بعد الحل.

   ماذا يعرض النظام

   تقييم نجوم وملاحظة اختيارية.

   المكوّنات المستخدمة

   • Choices (Radio / Chip / Segmented)اختيار من خيارات قليلة

     لماذا هنا: تقييم بنقرة.

     حالاته: محدد · غير محدد · معطّل · تركيز

   • notify (Toast)تأكيد سريع مع تراجع

     لماذا هنا: شكر على التقييم.

     حالاته: نجاح · خطأ · مع زر تراجع

   حالات الواجهة المغطاة

   • نجاحإغلاق التذكرة.

   المتطلبات:SUP-05

   

1. 1

   غرفة التحكم

   /admin

   افتح هذه الخطوة

   الشاشة: غرفة التحكم

   ماذا يفعل المستخدم

   تبدأ يومها من الأرقام.

   ماذا يعرض النظام

   بانر ترحيب، مؤشرات اليوم، وطلبات قاربت مهلة الخدمة.

   المكوّنات المستخدمة

   • AdminBanner / غرفة التحكمترحيب وأرقام اليوم

     لماذا هنا: ترحيب وصحة الخدمات.

     حالاته: صحة الخدمات · أرقام اليوم

   • StatCardمؤشر رقمي مع اتجاه

     لماذا هنا: أرقام مع اتجاه.

     حالاته: ارتفاع · انخفاض · ثابت · تحميل

   • شريط الموظفتنقل مفلتر بالصلاحيات

     لماذا هنا: تنقل حسب صلاحياتها.

     حالاته: موسّع · مطوي

   حالات الواجهة المغطاة

   • تحميلهياكل المؤشرات.

   المتطلبات:STF-01STF-02

   
2. 2

   صندوق الطلبات

   /admin/requests

   افتح هذه الخطوة

   الشاشة: صندوق الطلبات

   ماذا يفعل المستخدم

   تطبّق عرضاً محفوظاً وفلاتر.

   ماذا يعرض النظام

   جدول بعروض (مخصّصة لي، متأخرة…) ولوحة.

   المكوّنات المستخدمة

   • DataTableجدول بعروض وفلاتر وشيت سجل

     لماذا هنا: عروض وفلاتر وتحديد متعدد.

     حالاته: تحميل · فارغ · تحديد متعدد · لوحة

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: حالات موحدة.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • فارغلا طلبات مطابقة.
   • تحميلهيكل الجدول.

   المتطلبات:REV-02STF-04

   
3. 3

   شيت السجل

   /admin/requests

   افتح هذه الخطوة

   الشاشة: صندوق الطلبات

   ماذا يفعل المستخدم

   تفتح الطلب سريعاً دون مغادرة القائمة.

   ماذا يعرض النظام

   ملخص مقدّم الطلب وحالته.

   المكوّنات المستخدمة

   • Sheet / ConfirmDialogمهمة ثانوية بلا مغادرة الصفحة

     لماذا هنا: معاينة سريعة وتنقل بين السجلات.

     حالاته: مغلقة · مفتوحة · تأكيد لإجراء لا رجعة فيه

   • DataTableجدول بعروض وفلاتر وشيت سجل

     لماذا هنا: الشيت جزء من الجدول.

     حالاته: تحميل · فارغ · تحديد متعدد · لوحة

   المتطلبات:REV-03

   
4. 4

   المراجعة الكاملة

   /admin/requests/MEM-2026-004812

   افتح هذه الخطوة

   الشاشة: مراجعة طلب

   ماذا يفعل المستخدم

   تراجع البيانات والتحققات والتدقيق.

   ماذا يعرض النظام

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

   المكوّنات المستخدمة

   • Timelineأحداث الطلب بتواريخها

     لماذا هنا: كل ما جرى على الطلب.

     حالاته: حدث ماضٍ · الحالي ينبض · قادم

   • DocumentCardمستند مع حالته

     لماذا هنا: مستندات بحالاتها.

     حالاته: موثّق · قيد المراجعة · مرفوض · منتهٍ

   • MoneySummary / AuditSummaryالمبلغ والضريبة والإجمالي

     لماذا هنا: AuditSummary قبل/بعد.

     حالاته: قبل الدفع · مدفوع · مسترد

   المتطلبات:REV-04REV-05

   
5. 5

   وضع مراجعة المستند

   /admin/requests/MEM-2026-004812

   افتح هذه الخطوة

   الشاشة: مراجعة طلب

   ماذا يفعل المستخدم

   تعاين مستنداً وتقبله أو ترفضه بسبب.

   ماذا يعرض النظام

   معاين بحجم كبير مع أزرار قبول/رفض وسبب.

   المكوّنات المستخدمة

   • Sheet / ConfirmDialogمهمة ثانوية بلا مغادرة الصفحة

     لماذا هنا: شيت المعاينة.

     حالاته: مغلقة · مفتوحة · تأكيد لإجراء لا رجعة فيه

   • DocumentCardمستند مع حالته

     لماذا هنا: حالة المستند تتحدث.

     حالاته: موثّق · قيد المراجعة · مرفوض · منتهٍ

   • Field / Inputحقول نصية مع تسمية ومساعدة

     لماذا هنا: سبب الرفض مطلوب.

     حالاته: افتراضي · تركيز · خطأ · معطّل · مقروء فقط

   حالات الواجهة المغطاة

   • خطألا يُرفض مستند دون سبب.

   المتطلبات:REV-06REV-08

   
6. 6

   القرار

   /admin/requests/MEM-2026-004812

   افتح هذه الخطوة

   الشاشة: مراجعة طلب

   ماذا يفعل المستخدم

   تطلب استكمالاً أو توصي أو تعتمد.

   ماذا يعرض النظام

   تأكيد القرار وتسجيله بالتدقيق وإشعار العضو.

   المكوّنات المستخدمة

   • Sheet / ConfirmDialogمهمة ثانوية بلا مغادرة الصفحة

     لماذا هنا: ConfirmDialog للرفض فقط.

     حالاته: مغلقة · مفتوحة · تأكيد لإجراء لا رجعة فيه

   • notify (Toast)تأكيد سريع مع تراجع

     لماذا هنا: تأكيد مع تراجع.

     حالاته: نجاح · خطأ · مع زر تراجع

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: الحالة الجديدة.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • نجاحتم القرار.

   المتطلبات:REV-07REV-09SEC-05

   

1. 1

   الطابور

   /admin/cpd

   افتح هذه الخطوة

   الشاشة: مراجعة CPD

   ماذا يفعل المستخدم

   يفرز حسب النوع والمصدر.

   ماذا يعرض النظام

   أنشطة بانتظار القرار مع الساعات المطلوبة.

   المكوّنات المستخدمة

   • DataTableجدول بعروض وفلاتر وشيت سجل

     لماذا هنا: فلاتر وعروض.

     حالاته: تحميل · فارغ · تحديد متعدد · لوحة

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: حالة كل نشاط.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • فارغلا شيء بانتظارك.

   المتطلبات:CPD-04

   
2. 2

   شيت الإثبات

   /admin/cpd

   افتح هذه الخطوة

   الشاشة: مراجعة CPD

   ماذا يفعل المستخدم

   يفتح الإثبات ويقارنه بالمدخلات.

   ماذا يعرض النظام

   إثبات بجانب البيانات المدخلة.

   المكوّنات المستخدمة

   • Sheet / ConfirmDialogمهمة ثانوية بلا مغادرة الصفحة

     لماذا هنا: إثبات وبيانات جنباً إلى جنب.

     حالاته: مغلقة · مفتوحة · تأكيد لإجراء لا رجعة فيه

   • DocumentCardمستند مع حالته

     لماذا هنا: عرض المستند.

     حالاته: موثّق · قيد المراجعة · مرفوض · منتهٍ

   المتطلبات:CPD-04

   
3. 3

   القرار

   /admin/cpd

   افتح هذه الخطوة

   الشاشة: مراجعة CPD

   ماذا يفعل المستخدم

   يعتمد، يعدّل الساعات، أو يرفض بسبب.

   ماذا يعرض النظام

   الحالة تتغير والعضو يُخطر.

   المكوّنات المستخدمة

   • notify (Toast)تأكيد سريع مع تراجع

     لماذا هنا: تأكيد مع تراجع.

     حالاته: نجاح · خطأ · مع زر تراجع

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: معتمد / مرفوض.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • نجاحاعتماد وإشعار.

   المتطلبات:CPD-09CPD-08

   

1. 1

   المدفوعات

   /admin/finance

   افتح هذه الخطوة

   الشاشة: المالية

   ماذا يفعل المستخدم

   تراجع مدفوعات اليوم.

   ماذا يعرض النظام

   مؤشرات مالية وجدول عمليات.

   المكوّنات المستخدمة

   • StatCardمؤشر رقمي مع اتجاه

     لماذا هنا: إجماليات اليوم.

     حالاته: ارتفاع · انخفاض · ثابت · تحميل

   • DataTableجدول بعروض وفلاتر وشيت سجل

     لماذا هنا: عمليات قابلة للتصفية.

     حالاته: تحميل · فارغ · تحديد متعدد · لوحة

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: مدفوع / فشل / مسترد.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • تحميلهياكل.

   المتطلبات:PAY-09

   
2. 2

   المطابقة

   /admin/finance

   افتح هذه الخطوة

   الشاشة: المالية

   ماذا يفعل المستخدم

   تطابق مع كشف البوابة.

   ماذا يعرض النظام

   فروقات مميزة وأسباب مقترحة.

   المكوّنات المستخدمة

   • Chartsرسوم بيانية ومؤشرات اتجاه

     لماذا هنا: اتجاه الفروقات.

     حالاته: بيانات · تحميل · فارغ

   • Alertتنبيه مضمّن في الصفحة

     لماذا هنا: تنبيه فروقات.

     حالاته: معلومة · نجاح · تحذير · خطأ

   حالات الواجهة المغطاة

   • نجاحمطابقة كاملة.

   المتطلبات:PAY-10

   
3. 3

   الاسترداد (مُنشئ ومعتمد)

   /admin/finance

   افتح هذه الخطوة

   الشاشة: المالية

   ماذا يفعل المستخدم

   المُنشئ يطلب والمعتمد يوافق.

   ماذا يعرض النظام

   شيت استرداد وتأكيد نهائي.

   المكوّنات المستخدمة

   • Sheet / ConfirmDialogمهمة ثانوية بلا مغادرة الصفحة

     لماذا هنا: ConfirmDialog لإجراء لا رجعة فيه.

     حالاته: مغلقة · مفتوحة · تأكيد لإجراء لا رجعة فيه

   • MoneySummary / AuditSummaryالمبلغ والضريبة والإجمالي

     لماذا هنا: المبلغ والتدقيق.

     حالاته: قبل الدفع · مدفوع · مسترد

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: بانتظار الاعتماد.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • خطألا يعتمد المُنشئ طلبه.

   المتطلبات:PAY-11SEC-05

   
4. 4

   إغلاق اليوم

   /admin/finance

   افتح هذه الخطوة

   الشاشة: المالية

   ماذا يفعل المستخدم

   تغلق اليوم بعد المطابقة.

   ماذا يعرض النظام

   ملخص وتأكيد.

   المكوّنات المستخدمة

   • SuccessMomentلحظة نجاح كبيرة

     لماذا هنا: تأكيد الإغلاق.

     حالاته: نجاح (غبار ذهبي) · يخمد مع تقليل الحركة

   • MoneySummary / AuditSummaryالمبلغ والضريبة والإجمالي

     لماذا هنا: ملخص اليوم.

     حالاته: قبل الدفع · مدفوع · مسترد

   حالات الواجهة المغطاة

   • نجاحتم الإغلاق وتقرير للتحميل.

   المتطلبات:PAY-10RPT-01

   

1. 1

   اختيار الفعالية

   /admin/events

   افتح هذه الخطوة

   الشاشة: الفعاليات والتدريب

   ماذا يفعل المستخدم

   يختار فعالية اليوم.

   ماذا يعرض النظام

   فعاليات مع عدد المسجلين.

   المكوّنات المستخدمة

   • EventCardفعالية أو دورة

     لماذا هنا: بطاقة الفعالية.

     حالاته: متاحة · ممتلئة · قائمة انتظار · مسجّل

   • DataTableجدول بعروض وفلاتر وشيت سجل

     لماذا هنا: قائمة الفعاليات.

     حالاته: تحميل · فارغ · تحديد متعدد · لوحة

   المتطلبات:TRN-09

   
2. 2

   وضع الكشك

   /admin/events

   افتح هذه الخطوة

   الشاشة: الفعاليات والتدريب

   ماذا يفعل المستخدم

   يفعّل شاشة كبيرة للمسح.

   ماذا يعرض النظام

   شاشة بسيطة بعدّاد الحضور.

   المكوّنات المستخدمة

   • StatCardمؤشر رقمي مع اتجاه

     لماذا هنا: عدّاد حي.

     حالاته: ارتفاع · انخفاض · ثابت · تحميل

   • Buttonالإجراء الأساسي والثانوي

     لماذا هنا: أزرار كبيرة للمس.

     حالاته: افتراضي · تحويم · تحميل · معطّل

   حالات الواجهة المغطاة

   • دون اتصاليعمل دون اتصال ويزامن لاحقاً.

   المتطلبات:TRN-07

   
3. 3

   نتيجة المسح

   /admin/events

   افتح هذه الخطوة

   الشاشة: الفعاليات والتدريب

   ماذا يفعل المستخدم

   يمسح QR كل حاضر.

   ماذا يعرض النظام

   لون ونص ونتيجة: مرحباً / مكرر / غير مسجّل.

   المكوّنات المستخدمة

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: النتيجة بنص وأيقونة.

     حالاته: كل حالات القاموس

   • notify (Toast)تأكيد سريع مع تراجع

     لماذا هنا: تغذية راجعة فورية.

     حالاته: نجاح · خطأ · مع زر تراجع

   حالات الواجهة المغطاة

   • نجاححضور مسجّل.
   • خطأرمز غير صالح.

   المتطلبات:TRN-07TRN-08

   

1. 1

   الفئات

   /admin/settings

   افتح هذه الخطوة

   الشاشة: الإعدادات

   ماذا يفعل المستخدم

   يضيف فئة ويحدد رسومها.

   ماذا يعرض النظام

   قائمة فئات وإعدادات كل منها.

   المكوّنات المستخدمة

   • CategoryCardبطاقة فئة عضوية

     لماذا هنا: معاينة بطاقة الفئة كما يراها الزائر.

     حالاته: افتراضي · مقترحة · مختارة للمقارنة

   • Field / Inputحقول نصية مع تسمية ومساعدة

     لماذا هنا: حقول الإعداد.

     حالاته: افتراضي · تركيز · خطأ · معطّل · مقروء فقط

   • Choices (Radio / Chip / Segmented)اختيار من خيارات قليلة

     لماذا هنا: مفاتيح التفعيل.

     حالاته: محدد · غير محدد · معطّل · تركيز

   المتطلبات:ADM-01ADM-02

   
2. 2

   مصمم النماذج

   /admin/settings/forms

   افتح هذه الخطوة

   الشاشة: مصمم النماذج

   ماذا يفعل المستخدم

   يسحب الحقول ويضبط الشروط.

   ماذا يعرض النظام

   لوحة بناء بمعاينة حيّة.

   المكوّنات المستخدمة

   • Field / Inputحقول نصية مع تسمية ومساعدة

     لماذا هنا: نماذج الحقول.

     حالاته: افتراضي · تركيز · خطأ · معطّل · مقروء فقط

   • Select / Combobox / DatePickerقيم مرجعية وتواريخ هجرية/ميلادية

     لماذا هنا: مصادر قيم مرجعية.

     حالاته: فارغ · بحث · نتائج · لا نتائج

   • Sheet / ConfirmDialogمهمة ثانوية بلا مغادرة الصفحة

     لماذا هنا: شيت خصائص الحقل.

     حالاته: مغلقة · مفتوحة · تأكيد لإجراء لا رجعة فيه

   حالات الواجهة المغطاة

   • نجاححفظ مسودة ونسخة.

   المتطلبات:ADM-03

   
3. 3

   مصمم سير العمل

   /admin/settings/workflows

   افتح هذه الخطوة

   الشاشة: مصمم سير العمل

   ماذا يفعل المستخدم

   يرسم مراحل المراجعة والمسؤولين.

   ماذا يعرض النظام

   مراحل بمهل خدمة وتصعيد.

   المكوّنات المستخدمة

   • Stepper / VerticalStepperموضع المستخدم من المسار

     لماذا هنا: تمثيل المراحل.

     حالاته: مكتملة · حالية · قادمة · بها مشكلة

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: حالات المراحل.

     حالاته: كل حالات القاموس

   • Alertتنبيه مضمّن في الصفحة

     لماذا هنا: تحذير عند تأثر طلبات قائمة.

     حالاته: معلومة · نجاح · تحذير · خطأ

   المتطلبات:ADM-04

   
4. 4

   الأدوار والصلاحيات

   /admin/settings/roles

   افتح هذه الخطوة

   الشاشة: الأدوار والصلاحيات

   ماذا يفعل المستخدم

   يمنح الأدوار صلاحيات دقيقة.

   ماذا يعرض النظام

   مصفوفة صلاحيات وأثرها على القائمة.

   المكوّنات المستخدمة

   • DataTableجدول بعروض وفلاتر وشيت سجل

     لماذا هنا: مصفوفة الأدوار.

     حالاته: تحميل · فارغ · تحديد متعدد · لوحة

   • Choices (Radio / Chip / Segmented)اختيار من خيارات قليلة

     لماذا هنا: خانات الصلاحية.

     حالاته: محدد · غير محدد · معطّل · تركيز

   • شريط الموظفتنقل مفلتر بالصلاحيات

     لماذا هنا: القائمة تتفلتر بالصلاحيات.

     حالاته: موسّع · مطوي

   حالات الواجهة المغطاة

   • نجاححفظ مع سجل تدقيق.

   المتطلبات:ADM-05ADM-06SEC-05

   

1. 1

   الإدخال أو المسح

   /verify

   افتح هذه الخطوة

   الشاشة: التحقق من عضوية أو شهادة

   ماذا يفعل المستخدم

   يدخل الرقم أو يمسح QR.

   ماذا يعرض النظام

   حقل واحد وزر تحقق.

   المكوّنات المستخدمة

   • Field / Inputحقول نصية مع تسمية ومساعدة

     لماذا هنا: حقل برقم الشهادة.

     حالاته: افتراضي · تركيز · خطأ · معطّل · مقروء فقط

   • Buttonالإجراء الأساسي والثانوي

     لماذا هنا: زر تحقق.

     حالاته: افتراضي · تحويم · تحميل · معطّل

   حالات الواجهة المغطاة

   • تحميلجارٍ التحقق.

   المتطلبات:PUB-09

   
2. 2

   النتيجة

   /verify

   افتح هذه الخطوة

   الشاشة: التحقق من عضوية أو شهادة

   ماذا يفعل المستخدم

   يقرأ النتيجة.

   ماذا يعرض النظام

   اسم وفئة وتاريخ صلاحية فقط؛ لا هوية ولا جوال.

   المكوّنات المستخدمة

   • VerificationSealنتيجة التحقق العامة

     لماذا هنا: نتيجة بأقل بيانات.

     حالاته: صالح · ملغى · منتهٍ · غير موجود

   • StatusBadgeالحالة بلون وأيقونة ونص

     لماذا هنا: صالحة / منتهية.

     حالاته: كل حالات القاموس

   حالات الواجهة المغطاة

   • نجاحصالحة.
   • خطأغير موجودة.

   المتطلبات:PUB-09PUB-10

   
3. 3

   حالة الإلغاء

   /verify

   افتح هذه الخطوة

   الشاشة: التحقق من عضوية أو شهادة

   ماذا يفعل المستخدم

   يجرب شهادة ملغاة.

   ماذا يعرض النظام

   «ملغاة» بوضوح وسبب عام.

   المكوّنات المستخدمة

   • VerificationSealنتيجة التحقق العامة

     لماذا هنا: الملغاة ≠ غير موجودة.

     حالاته: صالح · ملغى · منتهٍ · غير موجود

   • Alertتنبيه مضمّن في الصفحة

     لماذا هنا: تنبيه للجهة المدقّقة.

     حالاته: معلومة · نجاح · تحذير · خطأ

   حالات الواجهة المغطاة

   • خطأملغاة.

   المتطلبات:CRD-07

   

فهرس المكوّنات

كل مكوّن والرحلات والخطوات التي يظهر فيها — مرتبة بالأكثر استخداماً.

• StatusBadge20 استخدام

  الحالة بلون وأيقونة ونص

  • الانضمام للجمعية · 7
  • استكمال نواقص الطلب · 1
  • استكمال نواقص الطلب · 4
  • تجديد العضوية · 2
  • التطوير المهني CPD · 3
  • الحصول على اعتماد مهني · 1
  • الحصول على اعتماد مهني · 4
  • حضور فعالية · 4
  • حضور فعالية · 5
  • فشل الدفع والتعافي · 4
  • الحصول على الدعم · 3
  • مراجعة طلب عضوية · 2
  • مراجعة طلب عضوية · 6
  • مراجعة أنشطة CPD · 1
  • مراجعة أنشطة CPD · 3
  • إغلاق اليوم المالي · 1
  • إغلاق اليوم المالي · 3
  • تسجيل الحضور (وضع الكشك) · 3
  • تهيئة المنصة · 3
  • التحقق من بطاقة أو شهادة · 2
• Button10 استخدام

  الإجراء الأساسي والثانوي

  • الانضمام للجمعية · 1
  • الانضمام للجمعية · 3
  • استكمال نواقص الطلب · 1
  • تجديد العضوية · 1
  • تجديد العضوية · 5
  • حضور فعالية · 2
  • فشل الدفع والتعافي · 1
  • فشل الدفع والتعافي · 3
  • تسجيل الحضور (وضع الكشك) · 2
  • التحقق من بطاقة أو شهادة · 1
• notify (Toast)10 استخدام

  تأكيد سريع مع تراجع

  • الانضمام للجمعية · 6
  • استكمال نواقص الطلب · 4
  • التطوير المهني CPD · 4
  • حضور فعالية · 3
  • حضور فعالية · 7
  • فشل الدفع والتعافي · 3
  • الحصول على الدعم · 4
  • مراجعة طلب عضوية · 6
  • مراجعة أنشطة CPD · 3
  • تسجيل الحضور (وضع الكشك) · 3
• Sheet / ConfirmDialog9 استخدام

  مهمة ثانوية بلا مغادرة الصفحة

  • التطوير المهني CPD · 2
  • حضور فعالية · 3
  • الحصول على الدعم · 2
  • مراجعة طلب عضوية · 3
  • مراجعة طلب عضوية · 5
  • مراجعة طلب عضوية · 6
  • مراجعة أنشطة CPD · 2
  • إغلاق اليوم المالي · 3
  • تهيئة المنصة · 2
• Choices (Radio / Chip / Segmented)8 استخدام

  اختيار من خيارات قليلة

  • الانضمام للجمعية · 2
  • تجديد العضوية · 4
  • حضور فعالية · 1
  • حضور فعالية · 6
  • فشل الدفع والتعافي · 3
  • الحصول على الدعم · 4
  • تهيئة المنصة · 1
  • تهيئة المنصة · 4
• Field / Input8 استخدام

  حقول نصية مع تسمية ومساعدة

  • الانضمام للجمعية · 4
  • التطوير المهني CPD · 2
  • حضور فعالية · 6
  • الحصول على الدعم · 1
  • مراجعة طلب عضوية · 5
  • تهيئة المنصة · 1
  • تهيئة المنصة · 2
  • التحقق من بطاقة أو شهادة · 1
• DataTable8 استخدام

  جدول بعروض وفلاتر وشيت سجل

  • التطوير المهني CPD · 3
  • فشل الدفع والتعافي · 4
  • مراجعة طلب عضوية · 2
  • مراجعة طلب عضوية · 3
  • مراجعة أنشطة CPD · 1
  • إغلاق اليوم المالي · 1
  • تسجيل الحضور (وضع الكشك) · 1
  • تهيئة المنصة · 4
• MoneySummary / AuditSummary7 استخدام

  المبلغ والضريبة والإجمالي

  • تجديد العضوية · 4
  • تجديد العضوية · 5
  • حضور فعالية · 3
  • فشل الدفع والتعافي · 1
  • مراجعة طلب عضوية · 4
  • إغلاق اليوم المالي · 3
  • إغلاق اليوم المالي · 4
• Timeline6 استخدام

  أحداث الطلب بتواريخها

  • استكمال نواقص الطلب · 3
  • استكمال نواقص الطلب · 4
  • التطوير المهني CPD · 4
  • الحصول على اعتماد مهني · 4
  • الحصول على الدعم · 3
  • مراجعة طلب عضوية · 4
• Alert6 استخدام

  تنبيه مضمّن في الصفحة

  • تجديد العضوية · 1
  • حضور فعالية · 2
  • فشل الدفع والتعافي · 2
  • إغلاق اليوم المالي · 2
  • تهيئة المنصة · 3
  • التحقق من بطاقة أو شهادة · 3
• FileUpload5 استخدام

  رفع مستند أو إرفاق موثّق

  • الانضمام للجمعية · 5
  • استكمال نواقص الطلب · 3
  • التطوير المهني CPD · 2
  • الحصول على اعتماد مهني · 3
  • الحصول على الدعم · 2
• DocumentCard5 استخدام

  مستند مع حالته

  • استكمال نواقص الطلب · 3
  • تجديد العضوية · 3
  • مراجعة طلب عضوية · 4
  • مراجعة طلب عضوية · 5
  • مراجعة أنشطة CPD · 2
• CpdProgress5 استخدام

  ساعات معتمدة مقابل المطلوب

  • تجديد العضوية · 3
  • التطوير المهني CPD · 1
  • التطوير المهني CPD · 4
  • الحصول على اعتماد مهني · 2
  • حضور فعالية · 7
• CategoryCard4 استخدام

  بطاقة فئة عضوية

  • الانضمام للجمعية · 2
  • الانضمام للجمعية · 3
  • الحصول على اعتماد مهني · 1
  • تهيئة المنصة · 1
• ErrorSummary + AutosaveIndicator4 استخدام

  ملخص الأخطاء والحفظ التلقائي

  • الانضمام للجمعية · 4
  • الانضمام للجمعية · 5
  • الحصول على اعتماد مهني · 3
  • الحصول على الدعم · 2
• Select / Combobox / DatePicker4 استخدام

  قيم مرجعية وتواريخ هجرية/ميلادية

  • الانضمام للجمعية · 5
  • التطوير المهني CPD · 2
  • الحصول على الدعم · 2
  • تهيئة المنصة · 2
• SuccessMoment4 استخدام

  لحظة نجاح كبيرة

  • الانضمام للجمعية · 6
  • تجديد العضوية · 6
  • الحصول على اعتماد مهني · 5
  • إغلاق اليوم المالي · 4
• StatCard4 استخدام

  مؤشر رقمي مع اتجاه

  • حضور فعالية · 5
  • مراجعة طلب عضوية · 1
  • إغلاق اليوم المالي · 1
  • تسجيل الحضور (وضع الكشك) · 2
• Stepper / VerticalStepper3 استخدام

  موضع المستخدم من المسار

  • الانضمام للجمعية · 5
  • الحصول على اعتماد مهني · 3
  • تهيئة المنصة · 3
• NextStepPanel3 استخدام

  من المسؤول؟ ماذا أفعل؟ متى القرار؟

  • الانضمام للجمعية · 7
  • استكمال نواقص الطلب · 3
  • الحصول على اعتماد مهني · 4
• MembershipCard3 استخدام

  البطاقة الرقمية وQR

  • تجديد العضوية · 2
  • تجديد العضوية · 6
  • حضور فعالية · 4
• EventCard3 استخدام

  فعالية أو دورة

  • التطوير المهني CPD · 1
  • حضور فعالية · 1
  • تسجيل الحضور (وضع الكشك) · 1
• VerificationSeal3 استخدام

  نتيجة التحقق العامة

  • الحصول على اعتماد مهني · 6
  • التحقق من بطاقة أو شهادة · 2
  • التحقق من بطاقة أو شهادة · 3
• Accordion2 استخدام

  أسئلة وإجابات قابلة للطي

  • الانضمام للجمعية · 3
  • الحصول على الدعم · 1
• ReadinessChecklist2 استخدام

  عوائق كل منها زر مباشر

  • تجديد العضوية · 3
  • الحصول على اعتماد مهني · 2
• Skeleton / EmptyState / ErrorState2 استخدام

  تحميل وفراغ وخطأ

  • تجديد العضوية · 5
  • فشل الدفع والتعافي · 2
• Charts2 استخدام

  رسوم بيانية ومؤشرات اتجاه

  • التطوير المهني CPD · 1
  • إغلاق اليوم المالي · 2
• شريط الموظف2 استخدام

  تنقل مفلتر بالصلاحيات

  • مراجعة طلب عضوية · 1
  • تهيئة المنصة · 4
• رأس الموقع العام1 استخدام

  تنقل الزائر

  • الانضمام للجمعية · 1
• OtpInput1 استخدام

  رمز التحقق المكوّن من خانات

  • الانضمام للجمعية · 4
• TaskCard1 استخدام

  مهمة تفتح شاشتها مباشرة

  • استكمال نواقص الطلب · 2
• هيكل البوابة1 استخدام

  شريط جانبي وعلوي وبحث ⌘K

  • استكمال نواقص الطلب · 2
• CertificatePreview1 استخدام

  الشهادة الإلكترونية

  • الحصول على اعتماد مهني · 5
• Breadcrumbs / Pagination / Tabs1 استخدام

  مسار التنقل والصفحات

  • حضور فعالية · 1
• AdminBanner / غرفة التحكم1 استخدام

  ترحيب وأرقام اليوم

  • مراجعة طلب عضوية · 1