انتقل إلى المقال
Aniq-UI

E-Commerceلوحة الإدارة

لوحة الإدارة

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

لحزمة الحزمة الكاملة

الصفحات

كل صفحة موجودة بالإنجليزية تحت /en وبالعربية تحت /ar. تُفتح لوحة الإدارة على /en/dashboard، بعد تسجيل الدخول على /en/auth/login.

عنصر الشريط الجانبيالمساروظيفته
نظرة عامة/en/dashboardنظرة سريعة على المتجر، مع أحدث الطلبات. تعرض بطاقات الإيرادات والمبيعات والهدف والزوار ومعدل التحويل والخريطة أرقامًا نموذجية إلى أن تربطها ببياناتك الخاصة.
المساعد الذكي/en/dashboard/ai-assistantمحادثة تجيب عن الأسئلة المتعلقة بالمتجر وتنفّذ إجراءات فيه ضمن صلاحيات المسؤول.
المنتجات/en/dashboard/products/allقائمة المنتجات، ونموذج المنتج مع استوديو الذكاء الاصطناعي، والمنتجات المحذوفة.
الفئات/en/dashboard/categories/allقائمة الفئات والفئات المحذوفة.
الطلبات/en/dashboard/ordersكل الطلبات، وصفحة تفاصيل كل طلب.
المستخدمين/en/dashboard/users/allعملاء المتجر، والعملاء المحذوفون.
الصفحة الرئيسية/en/dashboard/homepageما تعرضه الصفحة الرئيسية للمتجر، قسمًا قسمًا.
إدارة المسؤولين/en/dashboard/admins-managementحسابات الموظفين.
أدوار المسؤولين/en/dashboard/admins-rolesالأدوار وصلاحياتها.
الإعدادات/en/dashboard/settingsالملف الشخصي وكلمة المرور للمسؤول المسجَّل دخوله، وإعدادات التطبيق.

يحتوي الجرس في الشريط العلوي على الإشعارات، ويفتح رابط «الذهاب إلى المتجر» العنوان NEXT_PUBLIC_STOREFRONT_URL. لا تفهرس محركات البحث لوحة الإدارة أبدًا: تحمل كل صفحة الوسم noindex ويمنع robots.txt كل المسارات.

ما يستطيع كل مسؤول فعله

  • تتحقق واجهة API من الصلاحية في كل مسار إداري، فلا يستطيع المسؤول قراءة أو تغيير إلا ما تسمح به أدواره، أيًّا كان ما تعرضه الشاشة.
  • تُخفي لوحة الإدارة أو تعطّل كل زر لا يحق لمسؤولها استخدامه، مثل «إضافة منتج» من دون products.create، وتعرض صفحة المساعد الذكي «لا يوجد وصول» من دون ai_chat.use.
  • يبقى كل عنصر في الشريط الجانبي ظاهرًا لكل مسؤول. والصفحة التي لا يستطيع المسؤول قراءتها تعرض حالتها الفارغة أو حالة الخطأ.
  • تصل تغييرات الصلاحيات إلى المسؤول المسجَّل دخوله فورًا، دون أن يسجّل خروجه.

المنتجات

جزء النموذجالحقول
التفاصيلالاسم والوصفان القصير والطويل بالإنجليزية والعربية (الاسم الإنجليزي مطلوب)، والـ slug، ورمز المنتج SKU (مطلوب)، والفئة (مطلوبة)
السعر والمخزونالسعر (مطلوب)، والسعر قبل الخصم، وسعر التكلفة، وكمية المخزون
الوسائطحتى 12 صورة وفيديو (MP4 أو WebM أو MOV)، بأي ترتيب، أحدها رئيسي، ولكل منها نص بديل
المتغيراتنوع الخيار وقيمته (مثل المقاس وM، أو اللون مع رمزه السداسي)، ورمز SKU، وتعديل السعر، والمخزون، والتفعيل. رموز SKU للمتغيرات فريدة.
العلامات والوسومنشط، ومميز، والأكثر مبيعًا، ووسوم حرة
  • المنتج الذي سعره قبل الخصم أعلى من سعره يُعدّ معروضًا بتخفيض في فلاتر المتجر.
  • يحفظ النموذج مسودة تلقائيًا أثناء الكتابة. افتح المنتج مرة أخرى وستعرض عليك لوحة الإدارة استعادة المسودة؛ وحفظ المنتج يحذفها.
  • الحذف ينقل المنتج إلى المحذوفات، حيث يمكن استعادته. تحتاج الاستعادة إلى الصلاحية products.restore.
  • يمكن أيضًا تعيين المنتجات المميزة والأكثر مبيعًا من صفحتيهما الخاصتين، /en/dashboard/products/featured و/en/dashboard/products/best-sellers، وهما غير مرتبطتين في الشريط الجانبي.

الفئات

للفئة اسم ووصف بالإنجليزية والعربية، وصورة، وslug، وترتيب عرض، ومفتاح تفعيل. الحذف ينقلها إلى المحذوفات، حيث يمكن استعادتها بالصلاحية categories.restore.

تحفظ واجهة API فئة أم لكل فئة وتصفّي القائمة بحسبها، لكن النموذج لا يضبط أي فئة أم: الفئات المرفقة في مستوى واحد مسطّح.

الطلبات

تبحث القائمة وتصفّي حسب حالة الطلب وحالة الدفع، الأحدث أولًا. تعرض صفحة الطلب منتجاته، ومجاميعه، والعميل، والعناوين، والملاحظة، والخط الزمني، ورقم التتبّع، ويمكن تنزيلها كملف CSV.

الحالةالمعنى
pendingأُنشئ الطلب. يبقى طلب البطاقة هنا إلى أن يؤكد Stripe الدفع.
confirmedدُفع بالبطاقة، أو أُنشئ بالدفع عند الاستلام.
processingقيد التجهيز.
shippedفي الطريق. أضف رقم التتبّع الذي سيراه العميل.
deliveredاستُلم. الطلب مغلق.
cancelledأُوقف. الطلب مغلق.

تنقل صفحة الطلب الطلبَ خطوة واحدة إلى الأمام في كل مرة، أو تلغيه قبل إغلاقه. تُضبط حالة الدفع (غير مدفوع، مدفوع، فشل، مسترد) بواسطة عملية الدفع، لا يدويًا. يحتاج تغيير الطلب إلى orders.edit.

العملاء

  • تبحث قائمة المستخدمين في العملاء وتصفّيهم حسب الاسم، والبريد الإلكتروني، والهاتف، والدولة، واسم المستخدم، وتأكيد البريد الإلكتروني، والتواريخ.
  • يستطيع المسؤول إنشاء عميل، وتغيير كلمة مروره، وتعليم بريده الإلكتروني كمؤكَّد أو غير مؤكَّد، وحذفه أو استعادته.
  • يعدّل العملاء بياناتهم بأنفسهم من حساباتهم في المتجر؛ ولا يوجد في لوحة الإدارة نموذج لتعديلها.

الصفحة الرئيسية للمتجر

تختار صفحة «الصفحة الرئيسية» المنتجات والنصوص التي يعرضها كل قسم من الصفحة الرئيسية للمتجر. يحتاج تعديل القسم إلى products.edit.

القسمالعناصرفي المتجر
الفئاتالترتيب فقطصف الفئات، بالترتيب المضبوط هنا
ثلاثة هواجس هادئةحتى 3ثلاث لمحات عن الأسلوب
التحريري المقسمحتى 2كتلة تحريرية من لوحتين
أحدث الإصداراتحتى 6الوصول الجديد؛ وإذا كان فارغًا، يعرض أحدث المنتجات
الأكثر مبيعاًحتى 8صف الأكثر مبيعًا
معرض سبوتلايتحتى 6معرض المنتجات المختارة
السلايدر التحريريحتى 5السلايدر الختامي

محرر «الفرق الفاخر» ليس له قسم في الصفحة الرئيسية المرفقة للمتجر، لذا لا يظهر ما تضبطه هناك.

الموظفون والأدوار والصلاحيات

  • إدارة المسؤولين تعرض الموظفين وتنشئهم وتعدّلهم وتحذفهم. ويحدد «تعيين الأدوار» الأدوار التي يملكها المسؤول.
  • أدوار المسؤولين تنشئ الأدوار وتعيد تسميتها وتحذفها. ويفتح «عرض صلاحيات الدور» شبكة من خانات الاختيار، مجمّعة حسب الوحدة، لمنح كل صلاحية.
  • تُسمّى الصلاحيات بالشكل <module>.<action>، مثل products.edit أو orders.view، ويملك المسؤول كل صلاحيات كل دور لديه.
  • يحفظ تبويب الملف الشخصي في الإعدادات عبر admins.edit، لذا لا يستطيع المسؤول ذو الصلاحية للقراءة فقط تغيير بياناته. أما تبويب الأمان، لتغيير كلمة المرور، فلا يحتاج إلى أي صلاحية.
الدور التجريبييمنح
المدير العام (Super Admin)كل الصلاحيات
المشاهد (Viewer)كل صلاحية تنتهي بـ .view، وهذا يستثني المساعد الذكي
Admin و Manager و Editorلا شيء بعد: حدّد صلاحياتها في «أدوار المسؤولين» قبل منحها للموظفين

تسجّل البيانات التجريبية المدير العام باسم admin@example.com وتمنح حسابات الموظفين الأحد عشر الأخرى دور Viewer.

الإعدادات

في الإعدادات ثلاثة تبويبات: الملف الشخصي، والأمان، وإعدادات التطبيق. إعدادات التطبيق جدول من أزواج المفاتيح والقيم، مجمّعة حسب الفئة، يستطيع المسؤول الذي يملك settings.edit تغييرها أو حذفها.

الفئةالمفاتيح التجريبية
الدفعstripe_fees_percentage, stripe_fixed_fee, platform_commission_percentage
السحبminimum_withdrawal_amount, maximum_withdrawal_amount, withdrawal_processing_days
البريد الإلكترونيsupport_email, notification_email
عامsite_name, site_tagline, maintenance_mode
الميزاتreferral_program_enabled, referral_bonus_percentage

هذه قيم محفوظة ليقرأها الكود الخاص بك. لا شيء في المتجر أو واجهة API المرفقين يقرؤها بعد، لذا فتغيير أي منها، بما في ذلك maintenance_mode، لا يغيّر أي سلوك بحد ذاته.

الإشعارات

  • الطلب الجديد يُرسل إشعارًا إلى كل مسؤول يستطيع عرض الطلبات، والإنشاء المكتمل أو الفاشل في استوديو الذكاء الاصطناعي يُرسل إشعارًا إلى المسؤول الذي بدأه.
  • تصل الإشعارات مباشرة، مع رسالة قصيرة على الشاشة، وتبقى في قائمة الجرس حتى تُعلَّم كمقروءة أو تُحذف.
  • يستخدم الاتصال المباشر NEXT_PUBLIC_WEBSOCKET_BASE_URL، وهو عنوان واجهة API من دون /api، ولا تقبله واجهة API إلا من FRONTEND_URL. على نطاقاتك الخاصة، اضبط الاثنين.
  • على المتجر النموذجي لا يوجد اتصال مباشر.

المساعد الذكي واستوديو الذكاء الاصطناعي

  • المساعد الذكي صفحة مستقلة في الشريط الجانبي. من دون مفتاح Gemini في واجهة API تعرض «لا يوجد نموذج ذكاء اصطناعي متصل».
  • استوديو الذكاء الاصطناعي هو نموذج المنتج نفسه، ويُفتح من «إضافة منتج» أو من صف المنتج. له وضعان، «المساعد» و«تحريك»، وزر «إزالة الخلفية». تعمل حقوله وتُحفظ دون أي مفتاح؛ وحتى تُضبط مفاتيحه يعرض «كاتب التفاصيل غير متصل» أو «استوديو الذكاء الاصطناعي غير متصل».

المتجر النموذجي

من دون NEXT_PUBLIC_API_BASE_URL، تجيب لوحة الإدارة عن كل طلب من متجر نموذجي داخل المتصفح وتعرض تنبيه «بيانات تجريبية»، ويمكن إغلاقه حتى إعادة التحميل التالية.

  • نموذج تسجيل الدخول معبّأ مسبقًا بـ admin@example.com وAdmin@123. يسجّل دخولك كمدير عام أي بريد إلكتروني صالح مع كلمة مرور من 6 أحرف على الأقل.
  • عمليات الكتابة حقيقية: إنشاء منتج، وتعديل فئة، وتحريك طلب، ومنح صلاحية، كلها تُحفظ في المتصفح وتبقى بعد إعادة التحميل.
  • المساعد الذكي وأدوات استوديو الذكاء الاصطناعي غير متاحة، ولا توجد إشعارات مباشرة.
  • يحذف yarn remove:mock المتجر النموذجي بعد ربط واجهة API الخاصة بك، ويُبقي public/mock-media/.

وضع العرض التجريبي

مُضمَّن مع مشترياتك. سجّل الدخول لقراءته، أو افتحه في ملف التنزيل.

تشغيل عرض تجريبي عام: حسابات منفصلة لكل زائر، وما يستطيع الزوار تغييره، واستخدام الزائر لمفتاحه الخاص.

كيف تترابط أجزاء كود لوحة الإدارة

مُضمَّن مع مشترياتك. سجّل الدخول لقراءته، أو افتحه في ملف التنزيل.

بنية الكود، وطريقة إضافة صفحة وترجمة وخدمة API.

توقفت عند خطوة؟

ابحث عن الحل قبل أن تبدأ من جديد.

حل المشكلات

تفضيلات ملفات تعريف الارتباط

نستخدم ملفات تعريف الارتباط لتعزيز تجربة التصفح الخاصة بك وتحليل حركة المرور على الموقع وتخصيص المحتوى. بالنقر على "قبول الكل"، فإنك توافق على استخدامنا لملفات تعريف الارتباط للتحليلات والإعلانات المخصصة.