Lakhasly

يهدف المشروع إلى تصميم صفحة ويب متكاملة وذات واجهة احترافية لإدارة مراجعات واستفسارات الطلاب في الكلية الجامعية للعلوم التطبيقية، عمادة الهندسة والنظم الذكية، قسمي هندسة الحاسوب والإلكترونيات. يتميز النظام بالتكامل مع Supabase وتطبيق تخصيصات محددة. الواجهة الرئيسية للنظام تتضمن أربعة أزرار رئيسية: لتقديم قضية طلابية جديدة، لمتابعة القضايا، لدخول المرشدين، ولوحة إدارة النظام.

يتيح نموذج إدخال القضية للطلاب تحديد تخصصاتهم من قائمة منسدلة تضم: "هندسة أمن المعلومات السيبراني" (5 سنوات)، "علم البيانات والذكاء الاصطناعي" (4 سنوات)، و"دبلوم أمن المعلومات"، "دبلوم شبكات الحاسوب والإنترنت"، "دبلوم تكنولوجيا الأجهزة الإلكترونية"، و"دبلوم صيانة الأجهزة الذكية" (جميع الدبلومات سنتين). يُظهر النظام حقول المستوى الدراسي ديناميكياً بناءً على التخصص المختار. يمكن للطلاب إدخال تفاصيل قضاياهم في حقل نصي متعدد الأسطر وإرفاق عدة مستندات وملفات (PDF، صور، مستندات أخرى) مع إمكانية حذفها قبل الإرسال.

عند إرسال النموذج، تُضاف جميع البيانات المدخلة والملفات المرفوعة فوراً ومباشرة إلى Supabase، مع تحديث البيانات في الوقت الفعلي. تظهر للطالب رسالة تأكيد بنجاح الإرسال، متضمنة اسم المرشد المتابع، وتوجيه بمتابعة القضية باستخدام الرقم الجامعي والتحقق من بريده الإلكتروني بشكل دوري.

لضمان تجربة مستخدم مريحة، سيُصمم النظام بتصميم متجاوب (Responsive) باستخدام CSS Grid أو Flexbox، مع استخدام ألوان جذابة ومتدرجة (الأزرق، الأخضر، والأبيض) وخط Cairo. تُضاف تعليمات توجيهية واضحة للمستخدمين لضمان سلاسة التعامل مع النموذج.

يتم تخصيص المرشد الأكاديمي تلقائياً بناءً على تخصص الطالب ومستواه، وحتى جنسه في بعض التخصصات. كما يوجد منطق برمجي لتحديد المرشد بناءً على كلمات مفتاحية في القضية؛ فمثلاً، تُحوَّل القضايا المتضمنة كلمات مثل "معادلات" أو "معادلة مساق" للمرشد محمد الشوربجي، بينما تُقدم استجابة آلية برقم الدعم الفني للقضايا المتعلقة بـ "كلمة مرور" أو "باسورد". قائمة المرشدين تشمل: سامح سالم (لأمن المعلومات والدبلوم)، محمد الشوربجي (للسيبراني والمعادلات)، سناء الصايغ (للطالبات في السيبراني)، محمد الطهراوي (لعلم البيانات)، عيد الأغا (لشبكات الحاسوب)، محمد عبيد (لصيانة الأجهزة الذكية)، وأحمد النحال (لتكنولوجيا الأجهزة الإلكترونية). يظهر اسم المرشد المخصص للطالب عند اختياره التخصص والمستوى.

شاشة المرشدين تتطلب اسم مستخدم وكلمة مرور، وتعرض فقط القضايا المرتبطة بتخصص المرشد، مستوردة من Supabase. عند النقر على أي قضية، تظهر نافذة منبثقة (modal) تحتوي على تفاصيل الطالب والقضية، وقسم مخصص للمرشد لإدخال ملاحظاته المتعددة لتتبع سير القضية، وتحديد نسبة الإنجاز بثلاث مراحل: "جديدة" (0%)، "تحت المتابعة" (50%)، و"تم حل القضية" (100%) مع وصف لكل حالة. يمكن للمرشد الاتصال بالطالب هاتفياً عبر زر مباشر، أو إرسال رسالة واتساب، أو بريد إلكتروني. كما تُعرض للطالب في هذه النافذة سجل بقضاياه السابقة دون تفاصيل، وعند النقر تظهر نافذة صغيرة بتفاصيل القضية القديمة.

يمكن للمرشد أيضاً تحويل القضية إلى أقسام أخرى مثل القبول والتسجيل، الشؤون الأكاديمية، أو رئيس القسم. عند التحويل، يتم نسخ جميع بيانات القضية والمرفقات وتنسيقها في جدول ضمن رسالة بريد إلكتروني جديدة يختار المرشد المرسل إليه مع ظهور بياناته كمرسل. في حال تحويلها لرئيس القسم، تظهر القضية في تبويب خاص ضمن لوحة إدارة النظام، مع إمكانية رئيس القسم لإدخال الإجراء المطلوب ثم حفظه أو حل القضية، ويرسل تعديل للقضية في صفحة المرشد مع تنبيه (جرس) يظهر في شاشته.

لوحة إدارة النظام توفر تقريراً جدولياً شاملاً بحالة كل قضية طلابية، يتضمن اسم الطالب، رقمه الجامعي، رقم الهاتف، التخصص، المستوى الدراسي، تفاصيل القضية (بحد أقصى 500 حرف)، المرشد الأكاديمي، والحالة. يوفر التقرير خاصية التصفية (الفلترة) حسب الحالة، التخصص، أو المرشد. جميع القضايا المقدمة تظهر في تبويب خاص، وعند النقر على أي قضية، تفتح نافذة تفاصيل القضية للقراءة فقط، مع ظهور اسم المرشد وأيقونات التواصل معه. كما تظهر في لوحة المرشد إحصائيات بيانية لأنواع القضايا. يتم أرشفة القضايا المكتملة التي مر عليها أكثر من أسبوع تلقائياً مع تنبيه للمرشد عبر (جرس)، وتُعرض التقارير والإحصائيات الشاملة برسومات بيانية احترافية.

من متطلبات التحقق من البيانات، يجب أن يكون الرقم الجامعي تسعة أرقام فقط، ورقم الجوال يدعم اختيار كود دولي ثم إدخال الرقم، والبريد الإلكتروني يجب أن يكون حصراً بصيغة "@smail.ucas.edu.ps". يُشدد على تأمين البيانات وتشفيرها والحفاظ على سريتها. سيُستخدم HTML, CSS, JavaScript مع Vue.js أو React للواجهة الأمامية.

تصميم صفحة ويب لإدارة مراجعات واستفسارات الطلاب مع التكامل مع supabase وتطبيق التخصيصات التي ذكرتها يتطلب العديد من المكونات المتنوعة. سأعرض لك خطة تفصيلية لتصميم النظام وفقاً لمتطلبات:

الشاشه الرئيسيه تشمل 4 ازرار
تقديم قضية طلابية جديدة
متابعة القضية الطلابية
دخول المرشدين
لوحة ادارة النظام

1. نموذج إدخال المشكلة أو القضية الطلابية:
   المكونات:

اختيار التخصص:

أضف قائمة منسدلة تضم التخصصات التالية:

"هندسة أمن المعلومات السيبراني"

"علم البيانات والذكاء الاصطناعي"

"دبلوم أمن المعلومات"

" دبلوم شبكات الحاسوب و الانترنت "

" دبلوم تكنولوجيا الاجهزة الالكترونية "
" دبلوم صيانه الاجهزة الذكية "

بعد اختيار التخصص، أظهر باقي الحقول بشكل ديناميكي لتناسب التخصص المختار.

المستوى الدراسي:

قائمة منسدلة تشمل المستويات الدراسية:حسب اختيار التخصص (سنة أولى، ثانية، ثالثة، رابعة، خامسة).

الدبلوم سنتين
هندسه امن المعلومات السيبراني 5 سنوات
علم البيانات و الذكاء الاصطناعي 4 سنوات

ادخال تفاصيل القضيه في النموذج
حقل نصي متعدد الأسطر لإدخال تفاصيل القضية أو الاستفسار.

إرفاق المستندات والملفات:

زر لرفع الملفات (PDF، صور، مستندات أخرى).

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

2. التكامل مع supabase

عند إرسال النموذج، يجب أن يتم إضافة جميع البيانات المدخلة بما فيها الملفات المرفوعه إلى supabase بشكل مباشر وفوري.

ويحب ان تظهر رساله تاكيد للطالب بنجاح ارسال القضيه الى المرشد يظهر اسمه و تتم متابعه القضيه من خلال الرقم الجامعي

تحديث البيانات بشكل فوري:

كل تغيير في النموذج (مثل إضافة قضية جديدة أو تعديل) يجب أن يُحدث في الجدول في الوقت الفعلي.

3. أزرار الاتصال والتواصل:

زر الاتصال الهاتفي:

عند الضغط على هذا الزر، يتم الاتصال تلقائياً برقم الهاتف المسجل في قاعدة البيانات .

يمكن استخدام tel: في HTML لإجراء الاتصال.

زر إرسال رسالة واتساب:

عند الضغط على الزر، يتم فتح تطبيق WhatsApp مباشرة مع رقم الطالب لإرسال رسالة.

يمكن استخدام الرابط https://wa.me/رقم_الهاتف لفتح WhatsApp مباشرة.

4. واجهة مستخدم احترافية (Responsive):

تصميم متوافق مع مختلف الأجهزة:

سيتم استخدام تصميم Responsive باستخدام CSS Grid أو Flexbox لضمان التوافق مع شاشات مختلفة (هواتف، أجهزة لوحية، وأجهزة الكمبيوتر).

استخدام ألوان وخطوط جذابة لضمان تجربة مستخدم مريحة.

توجيه واضح:

عند تعبئة النموذج، سيتم إضافة تعليمات توجيهية للمستخدم (مثل "اختر التخصص أولاً" أو "أدخل التفاصيل هنا") لضمان سلاسة التعامل مع النموذج.

5. تخصيص المرشدين الأكاديميين بناءً على التخصص والمستوى:

بناءً على مستوى الطالب والجنس، يتم تحديد المرشد الأكاديمي من خلال منطق البرمجة.

منطق تحديد المرشدين:
لو الطالب ذكر في قضيته كلمه "معادلات" او " معادله مساق " يتم تحديد المرشد محمد الشوربجي
لو ذكر كلمه " كلمه مرور " او "باسورد" او " باسوورد " او اي شيئ يتعلق بحسابه الشخصي يتم الرد عليه بشكل الي بضرورة مراجعه الدعم الفني على الرقم 201003891901+

تخصص "هندسة أمن المعلومات السيبراني": 5 سنوات

مستوى 1-5 (جنس ذكر): سامح سالم

مستوى 1-5 (جنس ذكر): محمد الشربجي

جنس أنثى: سناء الصايغ

تخصص "علم البيانات والذكاء الاصطناعي": 4 سنوات

جميع الطلاب: محمد الطهراوي

تخصص "دبلوم أمن المعلومات":

جميع الطلاب : سامح سالم

تخصص " دبلوم شبكات الحاسوب و الانترنت "
جميع الطلاب : عيد الاغا

تخصص " دبلوم ضيانه الاجهزة الذكية "
جميع الطلاب : محمد عبيد

تخصص " دبلوم تكنولوجيا الاجهزة الالكترونيه "
جميع الطلاب : احمد النحال

ملاحظه كل تخصصات الدبلوم سنتين فقط

يتم تحديد المرشد الأكاديمي عند إدخال البيانات وتظهر التوصية في جدول الحالات.

جميع الجداول يجب ان يتم ربطها مع قواعد البيانات

في شاشه المرشدين والتي يجب الدخول عليها باسم مستخدم و كلمه مرور تظهر القضايا التي مرتبطه فقط بتخصص المرشد و يجب استيراد القضايا من supabase

عند الضغط على اي قضيه طلابيه تظهر نافذه modal فيها تفاصيل الطالب و القضيه و قسم مخصص للمرشد لادخال ملاحظاته و قسم لتحديد نسبه الانجاز والمكونه من 3 مراحل " جديده" و " تحت المتابعة " و " تم حل القضية " واظهار وصف لكل حاله مع نسبه الانجاز 0% و 50% و 100%

يمكن للمرشد اما الاتصال على الطالب او ارسال رساله Whatsup او رساله بريد الكتروني له

نافذه تفاصيل القضية :
تظهر في شاشه المرشدين و شاشه ادارة النظام عند الضغط على اي قضيه موجوده يتم فتح نافذه فيها التفاصيل

6. تقرير بحالة كل قضية طلابية:

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

اسم الطالب

الرقم الجامعي

رقم الهاتف

التخصص

المستوى الدراسي

تفاصيل القضية لا تتجاوز ال 500 حرف

المرشد الأكاديمي

الحالة (جديده ، قيد المتابعة، تم الحل)

آلية عرض التقرير:

إضافة خاصية فلترة في الجدول لعرض القضايا حسب الحالة أو التخصص أو المرشد.

في شاشه الرئيسيه يجب ان تكون هناك 4 ازرار

تقديم قضيه جديده
متابعة قضيه طلابية
شاشه دخول المرشدين
لوحه متابعه و ادارة النظام

تطبيق التقنية (الأدوات):

Frontend (واجهة المستخدم):

HTML, CSS, JavaScript

Vue.js أو React لاستخدام مكونات ديناميكية.

Backend (التكامل مع قاعده بيانات

يجب ان يكون الموقع مصمم بشكل حترافي و متناسق في جميع الصفحات و الشاشات
الالوان المعتمده هي الازرق و الاخضر و الابيض بشكل متدرج
استخدم خط cairo

أسم الجامعه الكليه الجامعيه للعلوم التطبيقيه
عماده الهندسة و النظم الذكيه
قسمي هندسه الحاسوب و الالكترونيات

رفع الملفات: يمكن حفظها في قاعده بيانات

أفكار إضافية:

إشعارات (Notifications):

الأمان:

تأكد من تأمين البيانات (مثل تشفير البيانات أثناء إرسالها عبر الإنترنت) والحفاظ على سرية المستندات المرفقة.

ملاحظات هامه للمراجعه و التاكد من الخطوات

عند اضافه قضيه طلابيه يجب ان تظهر في شاشه المرشد التابع
لتخصص الطالب مثلا :
قضيه طلابيه لطالب في تخصص الشبكات يجب ان تظهر في شاشه المرشد عيد الاغا فقط وهكذا.

جميع القضايا الطلابيه التي يتم تقديمها يجب ان تظهر في تبويب القضايا الطلابيه في لوحه ادارة النظام اسفل تقرير القضايا

و عند الضغط على اي قضيه موجوده في الجدول يجب ان تفتح نافذه تفاصيل القضيه للقراءه فقط داخل شاشه اداره النظام مع ظهور اسم المرشد و يقونات التواصل معه

قم بتعديل الوان الازرار الخاصه بالاجراءات المتاحه في تفاصيل القضيه لتكون متدرجة الألوان و باهته

يسمح للمرشد بادخال الملاحظات اكثر من مره لتتبع سير حاله القضيه

و يجب تعديل وصف بيانات التقدم مثلا تم الحل وضع وصف اسفل شريط التقدم ليصبح الانتهاء من حل القضيه الطلابيه وهكذا

في مربع وصف القضيه تعديل لون الخلفيه ليصبح لون ازرق سماوي فاتح

في شاشه تفاصيل القضيه رقم القضيه هو الرقم الجامعي للطالب

في نافذه تفاصيل القضيه الطلابيه في القسم الخاص بمتابعه القضيه يلزم اضافه اختيار تحويل القضيه الى قسم القبول و التسجيل او الشئون الاكاديميه او رئيس القسم

يجب نسخ كل بيانات القضيه بما فيها المرفقات و تنسيقها في جدول مرتب و منسق في رساله بريد الكتروني جديد يقوم المرشد باختيار المرسل له في رساله البريد مع ظهور اسم المرشد و بياناته اسفل الرساله الحهازة للارسال

جميع القضايا الطلابيه التي يتم تقديمها يجب ان تظهر في جدول القضايا الطلابيه في لوحه ادارة النظام اسفل تقرير القضايا

و عند الضغط على اي قضيه موجوده في الجدول عند النقر عليها يجب ان تفتح نافذه تفاصيل القضيه للقراءه فقط داخل شاشه اداره النظام modal

قم بتعديل الوان الازرار الخاصه بالاجراءات المتاحه في تفاصيل القضيه لتكون متدرجة الألوان

يسمح للمرشد بادخال الملاحظات اكثر من مره لتتبع سير حاله القضيه

و يجب تعديل وصف بيانات التقدم مثلا تم الحل وضع وصف اسفل شريط التقدم ليصبح الانتهاء من حل القضيه الطلابيه وهكذا

في مربع وصف القضيه تعديل لون الخلفيه ليصبح لون ازرق سماوي فاتح

في شاشه تفاصيل القضيه اظهر قسم خاص بالقضايا السابقه التي قام الطالب بارسالها سابقا بدون اي تفاصيل و عند النقر عليها تظهر نافذه صغيره تظهر تفاصيل قضيته السابقه

في شاشه المرشد الاكاديمي عند النقر على اي مربع من مربعات احصائيات القضايا يجب ان يظهر الحالات الخاصه بهذه الاحصائيه في تبويب القضايا النشطه .

في القسم الخاص بمتابعه القضيه في نافذه تفاصيل القضيه الطلابيه يلزم اضافه اختيار تحويل القضيه الى قسم القبول و التسجيل او الشئون الاكاديميه او رئيس القسم

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

عند فتح الرساله الجديده يقوم المرشد باختيار المرسل له في رساله البريد مع ظهور اسم المرشد و بياناته اسفل الرساله الجاهزة للارسال

في حال اختيار رئيس القسم من القائمه المنسدله يجب تحويل القضيه له في شاشه اداره النظام في تبويب للقضايا المحوله من المرشدين الى رئيس القسم تظهر فيها كل القضايا المحوله له من طرف المرشدين عند النقر على اي قضيه تفتح نافذه modal وتظهر له قسم جديد خاص برئيس القسم في النافذه التفاصيل التي تصل له من المرشد يقوم بادخال الاجراء المطلوب ثم حفظ الرساله للمتابعه القادمه او حل القضيه وارسال تعديل للقضيه في صفحه المرشد تظهر في تبويب المحوله للرئيس مع ظهر رساله تنبيه تظهر كتنبيه جرس في اعلى شاشه المرشد على اليسار عند النقر عليه تظهر شاشه صغيره فيها التنبيهات .

في تبويب الارشيف المكتمله قم بأرشفه القضايا التي مر عليها اكثر من اسبوع مع تنبيه المرشد ان القضيه قد تم ارشفتها ويظهر تنبيه جرس في اعلاه شاشه المرشد

في تبويب التقارير و الاحصائيات اظهر الاحصائيات برسومات بيانيه متعدده لكل حاله بشكل احترافي و متناسق و جميل

في شاشه تقديم قضيه طلابية يجب ان يكون الرقم الجامعي رقم فقط وطوله 9 ارقام فقط

رقم جوال الطالب عند النقر على القائمه المنسدله يجب ان يظهر خانه لكود دولي لجميع الدول ثم ادخال الرقم الخاص به ( مثلا يختار مصر +20 ) ثم يكتب رقمه

البريد الالكتروني يجب ان يكون امتداد بصيغه @smail.ucas.edu.ps فقط و لا يقبل اي صيغه اخرى

عند اختيار اسم التخصص والمستوى اعرض اسم المرشد فوق تفاصيل القضيه

عند قيام الطالب بارسال القضيه والضغط على زر تقديم قضيه اظهر في نافذه رساله استعلام في منتصف الشاشه انه تم ارسال القضيه بنجاح و ان يستخدم رقمه الجامعي في مراجعه حاله القضيه ومتابعه بريده الالكتروني بشكل دوري وان المرشد المتابع للقضيه هِو يظهر اسم المرشد