أريد منك بناء منصة احترافية كاملة من الصفر لإدارة وعرض قوائم الطعام للمطاعم عبر QR Code. لا أريد Landing Page أو Demo أو واجهات شكلية فقط. أريد Web Application حقيقية وقابلة للاستخدام التجاري، مع Frontend + Backend + Database + Authentication + Authorization + Admin Dashboard. اسم المنصة يمكن أن يكون مؤقتًا: MENU PRO المنصة يجب أن تكون قابلة للبيع لعشرات أو مئات المطاعم، بحيث يكون لكل مطعم حساب مستقل، ومنيو مستقل، ورابط مستقل، وQR Code مستقل. ======================================== 1. الفكرة الأساسية ======================================== المنصة عبارة عن نظام Digital Menu للمطاعم. كل مطعم يحصل على: - صفحة منيو عامة. - رابط خاص. - QR Code خاص. - لوحة تحكم خاصة. - حساب مدير للمطعم. - إمكانية إضافة وتعديل وحذف الأصناف. - إمكانية إدارة الأقسام. - إمكانية رفع الصور. - إمكانية تعديل معلومات المطعم. - إمكانية تخصيص شكل المنيو. - إحصائيات أساسية. الزبون لا يحتاج إلى تسجيل دخول. الزبون فقط: يمسح QR → تفتح صفحة المنيو → يتصفح الأقسام والأصناف والأسعار. ممنوع إضافة: - سلة مشتريات. - طلب أونلاين. - Checkout. - دفع إلكتروني. - توصيل. - كاشير. - مطبخ. - نظام موظفين للطلبات. المنصة مخصصة لعرض المنيو فقط. ======================================== 2. التصميم العام ======================================== أريد التصميم بمستوى احترافي تجاري حقيقي. الستايل: Luxury Premium Modern Elegant Minimal Restaurant SaaS يجب ألا يبدو الموقع كقالب AI عادي. أريد تصميمًا أصليًا وراقيًا. استخدم: - خلفيات داكنة فاخرة. - أسود / Charcoal. - ذهبي مطفي كـ Accent. - Dark Red كعنصر ثانوي. - أبيض دافئ للنصوص. - رمادي فاتح للنصوص الثانوية. تجنب: - الألوان الفاقعة. - كثرة الألوان. - التدرجات الرخيصة. - التصميم المزدحم. - المؤثرات المبالغ بها. - Glassmorphism الزائد. استخدم مساحات بيضاء/داكنة مريحة. استخدم Cards أنيقة. استخدم Shadows ناعمة. استخدم Borders رقيقة. استخدم Micro-interactions خفيفة. ======================================== 3. الخط العربي ======================================== الموقع عربي RTL بالكامل. اختر خطًا عربيًا حديثًا وفخمًا وواضحًا. يفضل استخدام Google Fonts أو Web Font موثوق. الخط يجب أن يكون: - جميلًا. - واضحًا. - Premium. - مناسبًا للمطاعم. - ممتازًا على iPhone وAndroid. - يدعم اللغة العربية بشكل كامل. استخدم Typography hierarchy واضحة: اسم المطعم: Bold / Premium عناوين الأقسام: Strong اسم الصنف: Medium/Semibold السعر: Bold وواضح الوصف: Regular / Secondary ======================================== 4. الشعار ======================================== يجب أن يدعم النظام رفع شعار المطعم. في إنشاء المطعم لأول مرة: Admin يستطيع رفع: - Logo PNG - Logo JPG - Logo WebP ويجب أن يظهر الشعار في: - الصفحة الرئيسية للمنيو. - Header. - لوحة التحكم. - QR page. - Footer عند الحاجة. يجب الحفاظ على أبعاد الشعار بدون تشويه. إذا لم يرفع المطعم شعارًا، استخدم Placeholder أنيق. يجب أن تكون هناك إمكانية استبدال الشعار لاحقًا. ======================================== 5. الصفحة العامة للمطعم ======================================== كل مطعم لديه صفحة عامة مثل: /menu/restaurant-slug مثال: /menu/mandi-al-hufra الصفحة العامة يجب أن تحتوي على: Hero Section: - Logo - اسم المطعم - وصف المطعم - العنوان - حالة المطعم - أوقات العمل - زر تصفح المنيو ثم: Category Navigation ثم: Menu Sections كل قسم يحتوي على Cards للأصناف. كل Card يحتوي على: - صورة الصنف. - اسم الصنف. - وصف مختصر. - السعر. - Badge اختياري مثل: جديد مميز الأكثر طلبًا لا تستخدم Add to Cart. ======================================== 6. تصميم الأصناف ======================================== اجعل Cards الطعام احترافية جدًا. الصورة: - Aspect Ratio ثابت. - Rounded corners. - جودة عالية. - Lazy loading. اسم الصنف واضح. السعر بارز. الوصف أصغر. يمكن وجود Badge. على الهاتف يجب أن تكون Cards سهلة القراءة واللمس. ======================================== 7. الأقسام ======================================== يجب أن تكون الأقسام ديناميكية. مثال: المندي المشاوي البركر الشاورما البيتزا المقبلات المشروبات لكن لا تجعلها ثابتة داخل الكود. يجب أن يستطيع صاحب المطعم: - إضافة قسم. - تعديل قسم. - حذف قسم. - تغيير اسم القسم. - تغيير صورة القسم. - تغيير ترتيب القسم. - إخفاء القسم. - إظهار القسم. ======================================== 8. إدارة الأصناف ======================================== من لوحة التحكم: Add Item الحقول: اسم الصنف السعر الوصف الصورة القسم خيارات: New Popular Featured Available / Unavailable يستطيع صاحب المطعم: - إضافة صنف. - تعديل صنف. - حذف صنف. - إخفاء صنف. - إظهار صنف. - تعديل السعر. - تعديل الاسم. - تعديل الوصف. - تغيير الصورة. - تغيير القسم. - إعادة ترتيب الأصناف. عند حذف صنف: اعرض Confirmation Dialog. ======================================== 9. إدارة الصور ======================================== يجب أن يستطيع المطعم رفع صور الطعام. دعم: PNG JPG JPEG WEBP قم بتحسين الصور وضغطها قدر الإمكان. استخدم: Lazy Loading Responsive Images Optimized Images حتى يكون الموقع سريعًا. ======================================== 10. معلومات المطعم ======================================== صاحب المطعم يستطيع تعديل: اسم المطعم الشعار الوصف العنوان رقم الهاتف رقم هاتف إضافي Google Maps Instagram Facebook TikTok WhatsApp أوقات العمل يستطيع أيضًا تحديد: 24 Hours إذا كان المطعم يعمل 24 ساعة. ======================================== 11. QR CODE ======================================== كل مطعم يجب أن يحصل تلقائيًا على QR Code خاص. QR يشير إلى: /menu/{restaurant-slug} مثال: /menu/mandi-al-hufra يجب أن يكون الرابط ثابتًا. إذا تغير: - السعر. - الاسم. - الصورة. - القسم. لا يتغير QR. من Dashboard: عرض QR تحميل QR PNG تحميل QR عالي الجودة طباعة QR ويجب أن يكون QR مناسبًا للطباعة على: - الطاولات. - الملصقات. - الكروت. - الباب. - الإعلانات. ======================================== 12. تسجيل الدخول ======================================== أنشئ Authentication حقيقي. صفحة: Login الحقول: Email Password مع: Forgot Password و: Logout ======================================== 13. أنواع الحسابات ======================================== هناك نوعان رئيسيان: SUPER ADMIN و RESTAURANT OWNER ======================================== 14. SUPER ADMIN ======================================== Super Admin هو مالك المنصة. يمكنه: - إضافة مطعم. - تعديل مطعم. - تعطيل مطعم. - حذف مطعم. - إنشاء حساب لصاحب المطعم. - مشاهدة جميع المطاعم. - الدخول إلى إعدادات المطاعم. - مشاهدة الإحصائيات العامة. - إدارة الاشتراكات مستقبلًا. Dashboard: Total Restaurants Active Restaurants Inactive Restaurants Total Menu Items Total Views ======================================== 15. RESTAURANT OWNER ======================================== صاحب المطعم يرى مطعمه فقط. يستطيع: Dashboard Menu Categories Restaurant Information Appearance QR Code Analytics Account Settings ممنوع عليه الوصول إلى مطاعم أخرى. ======================================== 16. الأمان ======================================== الأمان مهم جدًا. لا تعتمد فقط على إخفاء الصفحات. يجب تطبيق: Authentication Authorization Database Security Role Based Access Control إذا كان النظام يستخدم Supabase: استخدم Row Level Security. Restaurant Owner A: لا يستطيع: قراءة Restaurant B تعديل Restaurant B حذف Restaurant B قراءة Menu B حتى لو حاول تغيير ID أو إرسال API request يدويًا. ======================================== 17. قاعدة البيانات ======================================== استخدم Database حقيقية. لا تستخدم LocalStorage كقاعدة البيانات الأساسية. يفضل استخدام: Supabase إذا كان متوافقًا مع البيئة. الجداول المقترحة: users restaurants restaurant_users categories menu_items menu_images restaurant_settings theme_settings analytics subscriptions العلاقات يجب أن تكون منظمة. كل: Category مرتبطة بـ: restaurant_id وكل: Menu Item مرتبط بـ: restaurant_id و: category_id ======================================== 18. لوحة التحكم ======================================== Dashboard احترافية جدًا. Sidebar: Dashboard Menu Categories Restaurant Appearance QR Code Analytics Settings على الهاتف: Mobile Navigation. Dashboard يجب أن تكون: Fast Clean Responsive Modern Premium ======================================== 19. Dashboard الرئيسية ======================================== اعرض: عدد الأصناف عدد الأقسام عدد زيارات المنيو الأصناف المخفية آخر التعديلات Cards إحصائية. Charts بسيطة إذا كانت مفيدة. ======================================== 20. Appearance ======================================== صاحب المطعم يستطيع تخصيص: Primary Color Secondary Color Accent Color Background Logo Hero Image Card Style مع Preview مباشر. لكن: لا تسمح بتعديل CSS أو JavaScript. لا تسمح بكسر التصميم. التخصيص يجب أن يبقى ضمن حدود التصميم الاحترافي. ======================================== 21. Theme System ======================================== أنشئ Theme System منظم. يجب أن يستطيع كل مطعم امتلاك Theme خاص به. مثال: theme_settings: primaryColor secondaryColor accentColor backgroundColor textColor cardStyle fontStyle لكن استخدم قيم آمنة. ======================================== 22. Multi-Tenant Architecture ======================================== هذا أهم جزء. النظام يجب أن يكون Multi-Tenant. مثال: Restaurant A Restaurant B Restaurant C Restaurant D كل واحد لديه: Account Database Records Menu Categories Images Theme QR Analytics منفصل. لا يوجد أي تسريب بيانات بين المطاعم. ======================================== 23. URL SYSTEM ======================================== استخدم Slug لكل مطعم. مثال: /menu/mandi-al-hufra / menu / restaurant-name تأكد أن Slug: - Unique - SEO friendly - لا يتغير تلقائيًا. إذا أراد Super Admin تغيير Slug: اعرض تحذيرًا لأن تغيير الرابط قد يؤثر على QR. يفضل توفير Redirect من الرابط القديم إلى الجديد. ======================================== 24. ANALYTICS ======================================== أضف Analytics بسيطة. لكل مطعم: Total Views Today 7 Days 30 Days وسجل: وقت الزيارة الجهاز إن أمكن الصفحة لا تجمع بيانات شخصية غير ضرورية. ======================================== 25. SEO ======================================== لكل مطعم: Dynamic Title Dynamic Description Open Graph Favicon Canonical URL مثال: مندي الحفرة | المنيو الإلكتروني ======================================== 26. MOBILE FIRST ======================================== الموقع مصمم أولًا للموبايل. اختبر: iPhone Android Tablet Desktop يجب أن يكون: Fast Responsive Touch Friendly خصوصًا لأن الوصول سيكون عبر QR. ======================================== 27. Accessibility ======================================== استخدم: Semantic HTML ARIA عند الحاجة Alt text للصور Contrast مناسب Keyboard navigation Focus states ======================================== 28. Performance ======================================== أريد سرعة عالية. استخدم: Lazy Loading Image Optimization Code Splitting عند الحاجة Caching Optimized Assets لا تحمل كل صور المنيو دفعة واحدة إذا كان ذلك غير ضروري. ======================================== 29. PWA ======================================== إذا كان مناسبًا للمنصة، أضف دعم PWA. لكن لا تجعل PWA شرطًا لعمل المنيو. الموقع الأساسي يجب أن يعمل بشكل طبيعي من المتصفح. ======================================== 30. تجربة الزبون ======================================== الزبون يجب أن يمر بتجربة بسيطة: Scan QR ↓ Restaurant Menu ↓ Categories ↓ Food Item ↓ Price لا يوجد تسجيل دخول. لا يوجد طلب. لا يوجد دفع. ======================================== 31. الصفحة الرئيسية للمنصة ======================================== أنشئ Landing Page للمنصة نفسها. توضح: Digital Menu Platform QR Menus for Restaurants المميزات: QR Code Digital Menu Easy Management Custom Design Analytics Multi Restaurant زر: Get Started وزر: Login هذه الصفحة مخصصة للمنصة وليست للمطعم. ======================================== 32. صفحة إنشاء المطعم ======================================== Super Admin يستطيع إنشاء مطعم جديد. Form: Restaurant Name Slug Logo Description Address Phone Social Links Opening Hours Owner Email Owner Password بعد الإنشاء: يتم إنشاء: Restaurant Owner Account Default Theme Default Categories QR Code Menu URL ======================================== 33. Onboarding ======================================== بعد إنشاء مطعم جديد: اعرض خطوات بسيطة: 1. Upload Logo 2. Restaurant Information 3. Add Categories 4. Add Menu Items 5. Customize Design 6. Download QR Progress indicator. ======================================== 34. إدارة الحساب ======================================== صاحب المطعم يستطيع: تغيير الاسم تغيير البريد إذا كان النظام يسمح تغيير كلمة المرور تسجيل الخروج ======================================== 35. الاشتراكات ======================================== لا تنفذ الدفع الإلكتروني الآن. لكن صمم Database Architecture بحيث يمكن إضافة Subscription System مستقبلًا. حقول محتملة: plan status start_date end_date ولا تضف Payment Gateway حاليًا. ======================================== 36. Branding ======================================== اسم المنصة: MENU PRO يمكن تغييره لاحقًا. لكن لا تجعل اسم MENU PRO ظاهرًا داخل صفحة منيو المطعم إلا إذا كان ذلك مقصودًا. المطعم يجب أن يشعر أن لديه موقع منيو خاص به. ======================================== 37. بيانات تجريبية ======================================== أنشئ Restaurant تجريبي باسم: مندي الحفرة استخدم الشعار المرفق في المشروع كـ Logo. معلومات المطعم: الاسم: مندي الحفرة الوصف: للمأكولات الشرقية والغربية العنوان: ناصرية، سوق الشيوخ، قرب فلكة الدلة ساعات العمل: 24 ساعة الهاتف: 07869600400 الهاتف الثاني: 07766181789 Google Maps: https://maps.app.goo.gl/rD3SGjrM1sFsdqg6?g_st=iw Facebook: https://www.facebook.com/share/1DzXX3GsDu/?mibextid=wwXIfr Instagram: https://www.instagram.com/mandlal2024 TikTok: لا يوجد حاليًا. ======================================== 38. منيو مندي الحفرة ======================================== أضف البيانات التالية بدقة: قسم المندي: 1. مندي لحم كيلو — 32,000 2. مندي دجاج — 20,000 3. مندي دجاج سفري — 10,000 4. مندي نص دجاج سفري — 10,000 5. تمن لحم كيلو — 32,000 6. مندي لحم نص كيلو — 16,000 7. مدفون باجة على منسف كامل — 35,000 8. مدفون بط على منسف — 40,000 9. برمة دجاج — 10,000 قسم الشرقي: 1. تمن ومرق — 2,500 2. قوزي لحم — 16,000 3. مقلوبة لحم — 15,000 4. مقلوبة دجاج — 10,000 5. تشريب كص الحفرة — 7,000 6. كبسة لحم كص الحفرة — 7,000 قسم الغربي: 1. كنتاكي 3 قطع — 5,000 2. كنتاكي 6 قطع — 12,000 3. زنجر — 2,500 4. فلر — 2,500 5. كرسبي — 3,000 6. كرسبي 5 قطع — 5,000 قسم المشويات: 1. كباب لحم عراقي — 7,000 2. كباب دجاج — 7,000 3. تكة — 10,000 4. معلاق — 10,000 5. شيش طاوق — 8,000 6. وجبة عرائيس لحم + دجاج — 7,500 7. مسحب دجاج — 12,000 8. مسحب نص دجاج — 6,000 قسم البركر: 1. بركر لحم — 2,000 2. بركر لحم دبل — 3,000 3. بركر لحم جبن — 2,500 4. بركر دجاج جبن — 2,500 5. بركر دجاج عادي — 2,000 قسم الشاورما: 1. شاورما لحم — 2,000 2. شاورما دجاج — 1,500 3. وجبة شاورما لحم — 6,000 4. وجبة شاورما دجاج — 5,000 قسم الفنكر: 1. فنكر عادي صغير — 1,500 2. فنكر متبل كبير — 2,500 3. سندويش فاهيتا لحم — 3,000 4. سندويش فاهيتا دجاج — 3,000 5. طبق فاهيتا لحم + دجاج — 3,000 قسم الريزو: 1. ريزو كص لحم — 6,500 2. ريزو كص دجاج — 5,000 3. ريزو دجاج مفرمش — 5,000 4. ريزو مدخن — 5,000 5. ريزو جبن — 5,000 6. ريزو كلاسك — 5,000 قسم الصاج: 1. صاج عربي لحم — 2,500 2. صاج عربي دجاج — 2,500 3. صاج إيطالي — 4,000 4. صاج توبستر — 2,500 قسم المقبلات: 1. ماعون صغير — 2,000 2. ماعون وسط — 3,000 3. ماعون كبير — 5,000 4. بيبسي — 500 مهم: لا تضف "بن مكينة". قسم البيتزا: الأحجام: صغير / وسط / كبير بيتزا لحم: صغير 6,000 وسط 8,000 كبير 10,000 بيتزا دجاج: صغير 5,000 وسط 6,000 كبير 8,000 بيتزا خضار: صغير — وسط 5,000 كبير 7,000 بيتزا مارغريتا: صغير — وسط 5,000 كبير — بيتزا مشكل (لحم + دجاج): صغير — وسط 8,000 كبير 10,000 بيتزا باربوني: صغير — وسط 8,000 كبير 10,000 لحم بعجين: صغير — وسط 3,000 كبير 5,000 فطائر الزعتر: صغير — وسط — كبير 5,000 ======================================== 39. الصور ======================================== إذا لم توجد صور حقيقية للأطعمة، استخدم Placeholder أنيق أو صور طعام عامة عالية الجودة فقط إذا كانت مرخصة/مسموح استخدامها. لا تستخدم: - شعارات مطاعم أخرى. - أسماء مطاعم أخرى. - صور عليها نصوص أو علامات تجارية. - صور مضللة. يجب أن يكون واضحًا أن الصور قابلة للتغيير من لوحة التحكم. ======================================== 40. الشعار المرفق ======================================== هناك شعار مرفق للمطعم. استخدم الشعار المرفق كالشعار الأساسي لمطعم "مندي الحفرة". لا تعيد رسم الشعار بطريقة تغير هويته. حافظ على: - النسب. - الألوان. - الشكل. اجعل النظام يسمح باستبداله لاحقًا من Dashboard. ======================================== 41. عدم كسر البيانات ======================================== قبل أي Migration أو تغيير Database: تحقق من البيانات. لا تحذف Menu Items. لا تغير الأسعار. لا تغير أسماء الأصناف. لا تحذف الأقسام. ======================================== 42. Production Ready ======================================== أريد المشروع جاهزًا للنشر Production. قبل الانتهاء: اختبر كل شيء. اختبر Authentication. اختبر Database. اختبر Permissions. اختبر CRUD. اختبر Image Upload. اختبر QR. اختبر Mobile. اختبر Desktop. اختبر Routes. اختبر SEO. اختبر Console. أصلح الأخطاء. لا تترك TODOs أو Mock Functions في الوظائف الأساسية. ======================================== 43. إذا احتجت خدمات خارجية ======================================== إذا كانت هناك حاجة إلى: Supabase Storage Authentication Environment Variables استخدم الحل الأنسب. إذا احتاج الأمر إعدادًا يدويًا مني، لا تخمّن. اعرض لي بالضبط: 1. اسم الخدمة. 2. أين أفتحها. 3. ماذا أنشئ. 4. ماذا أنسخ. 5. أين ألصقه. 6. ما المتغيرات المطلوبة. ولا تعرض أي Secret Key في الواجهة. ======================================== 44. النتيجة النهائية ======================================== أريد في النهاية نظامًا حقيقيًا بهذا الشكل: Platform │ ├── Super Admin │ │ ├── Restaurants │ ├── Users │ ├── Analytics │ └── Settings │ ├── Restaurant A │ ├── Dashboard │ ├── Menu │ ├── Categories │ ├── Images │ ├── Appearance │ ├── QR │ └── Analytics │ ├── Restaurant B │ ├── Dashboard │ ├── Menu │ ├── Categories │ ├── Images │ ├── Appearance │ ├── QR │ └── Analytics │ └── Public Menus ├── Restaurant A ├── Restaurant B └── Restaurant C أريد أن يكون هذا النظام أساسًا حقيقيًا يمكنني بيعه للمطاعم. الأولوية القصوى: 1. الأمان. 2. Database حقيقية. 3. Authentication حقيقي. 4. Multi-Tenant Architecture. 5. لوحة تحكم حقيقية. 6. إدارة الأصناف. 7. QR ثابت. 8. تصميم فاخر. 9. سرعة ممتازة. 10. تجربة هاتف ممتازة. ابدأ من الصفر وابنِ النظام كاملًا باحترافية، ولا تكتفِ بإنشاء Prototype بصري.