🏠 الشاشة الرئيسية
Home Screen – Dark Theme
❌ 7 مشاكل عالية
⚠️ 3 متوسطة
❌
إطار أبيض حول قسم الخدمات غير موجود في Figma
التطبيق يُظهر إطار (border) أبيض محيط بكل قسم من الخدمات (خدمات كوديا / خدمات المفتشين)، بينما في Figma لا يوجد أي إطار.
الفرق: border موجود في التطبيق، غير موجود في الفكما
❌
المسافة بين "خدمات كوديا" و"خدمات المفتشين" معدومة
المسافة العمودية بين القسمين شبه معدومة في التطبيق، بينما في Figma توجد مسافة واضحة (spacing) تفصل بين الكتلتين.
Spacing / Margin-bottom خاطئ
❌
لا يوجد padding من الأسفل + خط أبيض مرئي
قسم الخدمات لا يحتوي على padding من الأسفل ويظهر خط أبيض في نهاية القسم. هذا غير موجود في تصميم Figma.
Padding-bottom = 0 + border artifact
❌
عند تفعيل وضع المفتشين — ترتيب "خدمات كوديا" يجب أن يتغير
حسب Figma، عند تفعيل وضع المفتشين يتغير ترتيب ظهور الخدمات في قسم "خدمات كوديا". التطبيق لا ينفذ هذا السلوك.
Logic: Inspector mode → reorder services
❌
أيقونات "الإبلاغ عن آثار جانبية" و"دليل الفعاليات" مختلفة الألوان
لون أيقوني هذين الخيارين في التطبيق يختلف عن اللون المحدد في Figma. يجب مطابقة الألوان المحددة بالتصميم.
Icon color mismatch
❌
أحجام الأيقونات أكبر من التصميم في Figma
أحجام جميع الأيقونات في خدمات الرئيسية أكبر من المحدد في Figma. يجب تصغيرها لتطابق المقاسات الصحيحة.
Icon size > Figma spec
❌
حجم الـ subtitle صغير وسُمك الخط Regular بدل Semibold
أحجام النصوص الفرعية (subtitle) أصغر من التصميم، وسُمك الخط المستخدم هو Regular بينما Figma يحدد Semibold لجميع عناوين الخدمات.
Font-weight: Regular → Semibold | Font-size صغير
⚠️
الكارد الذي يحتوي صورة غير مفرَّغة — الصورة يجب أن تملأ الكارد كاملاً
إذا كانت صورة الدواء في كارد "أحدث الأدوية" صورة حقيقية (غير مفرَّغة/شفافة)، يجب أن تملأ مساحة الكارد كاملاً كما هو موضح في Figma وليس تظهر بحجم صغير.
Image fill: object-fit: cover على حجم الكارد كاملاً
⚠️
أسهم الأقسام بدون خلفية — يجب إضافة خلفية خلف كل سهم
أزرار الأسهم (مثل سهم قسم "الأخبار" وما يقابله) لا تحتوي على خلفية في التطبيق، بينما في Figma لكل سهم خلفية دائرية/مستطيلة واضحة.
Arrow button: missing background container
⚠️
لون خلفية الشاشة الرئيسية مختلف — يجب أن يكون تدرجاً أخضر من الأعلى ثم bg/secondary
Figma يحدد تدرجاً أخضر (green gradient) من الأعلى وينتهي بـ bg/secondary من الأسفل. التطبيق يستخدم لون مختلف لا يطابق هذه المواصفة.
Background: gradient(green-top → bg/secondary-bottom)
🔭 صفحة الاستكشف
Explore Screen
⚠️ 3 مشاكل
❌
نفس مشكلة الكارد — الصورة الحقيقية يجب أن تملأ الكارد كاملاً
نفس المشكلة الموجودة في الرئيسية: الكارد الذي يحتوي صورة غير مفرَّغة يجب أن تكون الصورة بحجم الكارد كاملاً (object-fit: cover) لا بحجم أصغر.
مشترك مع الرئيسية | Image fill = full card
⚠️
المسافة بين كارد البحث وحافة الصفحة خاطئة
الـ padding/margin بين شريط البحث وحواف الشاشة لا يطابق القيم المحددة في Figma.
Search bar margin/padding ≠ Figma
⚠️
نص الـ hint في كارد البحث — لونه وحجمه مختلفان
نص "ابحث عن دواء أو مستلزم صحي..." داخل شريط البحث يختلف في اللون والحجم عن مواصفات Figma.
Placeholder text: color + font-size ≠ Figma
❤️ صفحة المفضلة
Favorites Screen
⚠️ 2 مشاكل
⚠️
زر تبديل الـ Layout غير مطلوب
يوجد زر في الأسفل لتغيير طريقة عرض الـ layout (grid/list) وهذا الزر غير موجود في تصميم Figma وغير مطلوب.
Remove: layout toggle button
⚠️
زر الحذف في الأعلى مفقود
Figma يحدد زر حذف في الجزء العلوي من صفحة المفضلة، هذا الزر غير موجود في التطبيق.
Add: delete button in header
👤 صفحة الحساب
Account Screen
💡 بانتظار التفاصيل
📋 أضف ملاحظاتك على صفحة الحساب هنا...
💊 صفحة تفاصيل الدواء
Drug Detail Screen
❌ 5 مشاكل
❌
صورة الدواء غير المفرَّغة يجب أن تكون كما في Figma لا كما نُفِّذ
في حال كانت صورة الدواء صورة حقيقية (غير شفافة)، يجب أن تُعرض وفق مواصفات Figma (تملأ المساحة المخصصة كاملاً).
Image display: match Figma layout
❌
كاردات (تقديم بلاغ، إزالة من مفضلة، التقييم) — الحجم واللون والخط خاطئة
هذه الكاردات الثلاثة تختلف في الحجم وحجم الخط والألوان عن مواصفات Figma. يجب مراجعتها وإعادة ضبطها.
Cards: size + font-size + colors ≠ Figma
❌
مواصفات المنتج — لون اسم الخاصية يجب أن يكون أخف من الإجابة
في قسم مواصفات المنتج، اسم الخاصية (Label) يجب أن يكون بلون أفتح/أخف من قيمتها (Value) حتى يتمكن المستخدم من التركيز على المعلومة الأساسية.
Label color: lighter than value | hierarchy fix
⚠️
المسافة بين خصائص المنتج كبيرة جداً
الـ spacing العمودي بين كل خاصية وأخرى في قسم مواصفات المنتج أكبر من المحدد في Figma.
Row spacing: reduce to match Figma
⚠️
زر "أضف تعليقاً" — لون النص يجب أن يكون أبيض، وأزرار الرجوع/المشاركة ألوانها خاطئة
لون نص زر "أضف تعليقاً" خاطئ — يجب أن يكون أبيض. كذلك أزرار الرجوع والمشاركة في أعلى الصفحة ألوانها لا تطابق Figma.
Button text color + header buttons color fix
📰 صفحة الأخبار
News Screen
❌ 4 مشاكل
❌
صورة كارد الأخبار يجب أن تحتوي على border-radius
صورة الخبر داخل الكارد تظهر بحواف حادة في التطبيق، بينما Figma يحدد border-radius على الصورة ليتناسب مع شكل الكارد.
News card image: add border-radius
❌
لون الخط في كارد الأخبار مختلف
لون نصوص كارد الأخبار (العنوان والوصف) لا يطابق الألوان المحددة في Figma.
News card text color ≠ Figma
❌
المسافات الداخلية في كارد الأخبار غير صحيحة
الـ padding والـ spacing داخل كارد الأخبار لا يطابق مواصفات Figma — سواء بين الصورة والنص أو بين الكاردات نفسها.
News card: padding + spacing fix
❌
عند الضغط على كارد — شكل الـ hover مستطيل بدون حواف
عند الضغط على أي كارد أخبار، يظهر تأثير الضغط (hover/pressed state) بشكل مستطيل حاد بدون حواف دائرية، حتى وإن كان الكارد نفسه يحتوي على border-radius.
Ripple/Press effect: add border-radius to match card
⏰ صفحة منظم الدواء
Medical Reminder Screen
❌ 5 مشاكل
❌
شكل إطار حقل التاريخ خاطئ
شكل الـ border/container الخاص بحقل التاريخ في هذه الشاشة يختلف عن الشكل المحدد في Figma.
Date field border style ≠ Figma
❌
شاشة Bottom Sheet للدواء مفقودة كلياً
عند الضغط على كارد الدواء يجب أن تظهر Bottom Sheet تحتوي على: اسم الدواء، النوع، الجرعة، والوقت — مع إمكانية التعديل. هذه الشاشة غير موجودة في التطبيق.
Missing: Drug card → Bottom Sheet with (name, type, dose, time)
❌
Bottom Sheet تعرض الاسم والوقت فقط — يجب إضافة النوع والجرعة
ما نُفِّذ من الـ Bottom Sheet يعرض اسم الدواء ووقت الجرعة فقط، بينما Figma يحدد عرض: الاسم + النوع + الجرعة + الوقت.
Bottom Sheet: add drug type + dosage fields
❌
الزر يجب أن يكون "تم تناوله" لا "تأكيد" — واللون مختلف
اسم زر التأكيد في كارد الدواء يجب أن يكون "تم تناوله" وليس "تأكيد"، كما أن لون الزر لا يطابق ما هو في Figma.
Button label: "تأكيد" → "تم تناوله" | Color fix
⚠️
لون أيقونة توقيت الجرعة خاطئ — ألوان Nav Bar خاطئة
لون أيقونة "متى تتناول الدواء" (قبل / بعد / لا يهم) خاطئ. كذلك ألوان أزرار الـ Bottom Navigation Bar لا تطابق Figma.
Timing icon color + Nav bar colors ≠ Figma
🏢 البحث عن مؤسسة
Search Institution Screen
⚠️ 1 مشكلة
⚠️
ألوان بعض الكاردات منافية لألوان Figma
بعض كاردات نتائج البحث تظهر بألوان لا تتوافق مع نظام الألوان المحدد في Figma.
Institution cards: color values ≠ Figma
⚙️ مشاكل تقنية
Technical Bugs & Logic Issues
❌ 8 عالية
⚠️ 4 متوسطة
❌
مشاركة التطبيق تؤدي إلى 404 Error
عند مشاركة رابط التطبيق (Share) والضغط عليه، بدلاً من فتح التطبيق يظهر خطأ 404. الرابط المُولَّد غير صحيح أو الـ Deep Link غير مهيأ بشكل صحيح.
Bug: Share link → 404 | Fix: Deep Link / URL scheme
❌
إنشاء حساب يُرجع خطأ "No enough data available"
عند محاولة إنشاء حساب جديد يظهر خطأ "No enough data available". المشكلة إما في الـ Validation قبل الإرسال أو في الـ API Response handling.
Bug: Register API → "No enough data available" | Check: required fields + API error handling
❌
صفحة Permissions — زر Confirm عند Disabled شكله مختلف عن Figma
عندما يكون زر Confirm في حالة Disabled، شكله في التطبيق يختلف عن تصميم Figma. يجب مطابقة الـ Disabled State بالألوان والشكل المحدد في التصميم.
Permissions page: button disabled state ≠ Figma
❌
صفحة الاستكشف — نص البحث مقطوع ويجب أن يُصغَّر ليناسب المساحة
نص الـ placeholder في شريط البحث بصفحة الاستكشف يظهر مقطوعاً في المنتصف بدلاً من أن يتصغر (scale/ellipsis) أو يُختصر ليناسب عرض الحقل.
Explore search: placeholder text overflow → use ellipsis or font scaling
❌
عند إرسال المراجعة تظهر صفحة فارغة ولون نص الزر خاطئ
بعد الضغط على "إرسال" في صفحة المراجعة/التقييم، تظهر صفحة فارغة بدلاً من رسالة نجاح أو التوجيه الصحيح. كما أن لون نص زر الإرسال لا يطابق Figma.
Review submit → blank screen | Fix: success state + navigation | Button text color fix
❌
تسجيل الدخول — لوحة المفاتيح تغطي حقل كلمة المرور الثاني وبدون scroll
عند فتح لوحة المفاتيح في صفحة تسجيل الدخول، يُغطي الـ Keyboard حقل كلمة المرور الثاني ولا توجد إمكانية Scroll لرؤيته. الحل: إضافة KeyboardAvoidingView أو ScrollView.
Login: KeyboardAvoidingView missing | Add ScrollView to handle keyboard
❌
حقل رقم الهاتف يقبل أكثر من 11 خانة
المفروض أن يُقبل رقم الهاتف بـ 11 خانة فقط، لكن التطبيق يتيح إدخال 70+ رقم دون قيود. يجب تطبيق maxLength={11} على الحقل.
Phone field: maxLength=11 missing | Add input validation
❌
جميع الكاردات تعرض "22 تعليق" بينما العدد الحقيقي صفر
كل كاردات الأدوية في التطبيق تعرض رقم ثابت "22" لعدد التعليقات، بينما البيانات الحقيقية تُشير إلى صفر تعليقات. القيمة مُضمَّنة (hardcoded) ويجب ربطها بالـ API.
Comments count: hardcoded "22" → bind to API response
⚠️
صفحة الإشعارات — الإشعار يظهر فقط تحت "الكل" ولا يظهر في باقي الأقسام
الإشعار الموجود يظهر تحت خانة "الكل" فقط، وعند التبديل لأي قسم آخر (مثل الفعاليات أو غيره) لا يظهر رغم أنه يجب أن يكون مصنفاً تحت القسم المناسب.
Notifications: notification type/category not assigned correctly
⚠️
الـ Loading يطول ولا يظهر محتوى — غياب Skeleton أو Timeout handling
في بعض الشاشات يطول وقت التحميل دون ظهور أي محتوى أو مؤشر واضح. يجب إضافة Skeleton Loader أو Timeout مع رسالة خطأ مناسبة.
Add: Skeleton loader + API timeout + empty/error state
⚠️
زر Next بدون validation — ينقل للخطوة الأخيرة دون تنبيه المستخدم
عند الضغط على "Next" دون إدخال بيانات، يجب تنبيه المستخدم بالحقول المطلوبة وإبقاء الزر Disabled حتى الإدخال. حالياً ينتقل للخطوة الأخيرة مباشرةً.
Next button: add field validation + disable until required fields are filled
❌
منظم الدواء — 4 مشاكل في الدورة والحذف وتحديد الوقت
١. عند اختيار دورة الدواء (من → إلى) لا يظهر خيار "تحديد تاريخ انتهاء العلاج".
٢. الدورة تظهر بقيمة null بدلاً من القيمة المُدخلة.
٣. حذف الدواء لا يعمل — الدواء يبقى بعد الحذف.
٤. تحديد وقت معين للجرعة لا يُحفظ — يعود لقيمته الافتراضية.
Reminder: course end date missing | duration = null | delete not working | time picker not saving
٢. الدورة تظهر بقيمة null بدلاً من القيمة المُدخلة.
٣. حذف الدواء لا يعمل — الدواء يبقى بعد الحذف.
٤. تحديد وقت معين للجرعة لا يُحفظ — يعود لقيمته الافتراضية.
⚠️
تكبير خط الجهاز لا يُطبَّق على التطبيق
عند تكبير حجم الخط من إعدادات الجهاز (Accessibility → Font Size)، لا ينعكس التغيير على النصوص داخل التطبيق. السبب غالباً استخدام قيم ثابتة (px/dp) بدلاً من الوحدات القابلة للتكيف (sp) في Android أو Dynamic Type في iOS. الحل: استخدام وحدة sp لكل النصوص واحترام إعدادات إمكانية الوصول للمستخدم.
Accessibility: font scale ignored | Fix: use sp units (Android) / Dynamic Type (iOS) for all text