ليش هذا المكوّن موجود

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

قواعد التبنّي

• لا تستخدم no-data لما يفشل الطلب — بتقول للتاجر إن بياناته راحت. استخدم error.
• إجراء أساسي واحد فقط. الثانوي شفاف، وبيكون مخرج (دعم، توثيق، مسح فلتر).
• النصوص الافتراضية عربية وجاهزة — مرّر title فقط لما يكون عندك صياغة أدق للشاشة.
• illustration بتستبدل الميدالية كاملة لما تجهز رسمة حقيقية. لين ذلك، الميدالية بأيقونة واحدة هي الافتراضي.
• يستبدل ErrorState القديم — الثلاث حالات صارت مكوّن واحد بنفس التخطيط.

قواعد التبنّي

• البطاقة كلها منطقة ضغط — لأنها label حقيقية. لا تضيف onClick عليها.
• لما يكون المفتاح معطّل، مرّر disabledReason دائماً. مفتاح مطفي بدون سبب بيوقف التاجر بدون مخرج.
• سطر وصف واحد. إذا احتاج سطرين، الإعداد لازم ينقسم لإعدادين.
• الأيقونة 18 بكسل بسماكة 1.5 — نفس سماكة كل أيقونات اللوحة، بدون استثناء.

قواعد التبنّي

• kind="note" للي بيكتبه الفريق، event للي بيصير تلقائياً. لا تخلط الاثنين بنفس النوع.
• tone دلالي فقط — نجاح، تحذير، خطر، معلومة. ما في لون للتزيين على هذا المسار.
• الوقت نصّ جاهز من عندك، وdateTime بصيغة ISO للقراءة الآلية. المكوّن ما بينسّق تواريخ.
• الأحدث فوق. اللائحة ما بترتّب — رتّبها قبل ما تمرّرها.

قواعد التبنّي

• خزّن id اللاتيني، مش الاسم العربي. تغيير الاسم لازم ما يفقد أي منطقة محفوظة.
• لا تكتب لائحة محافظات بصفحتك — استورد GOVERNORATES من @/components/ui.
• مرّر مخرجات الاختيار كـzoneIds لشبكة الأسعار، حتى ما يسعّر التاجر منطقة مش بيوصّلها.
• السعر نصّ خام (string) لأن الحقل نصّي — حوّله لفلس عند الحفظ، لا تخزّنه كـfloat.

قواعد التبنّي

• id لازم يكون ثابت عبر إعادة الترتيب — لا تستعمل رقم الخانة بالمصفوفة، بتنكسر البلاطات أول ما تسحب وحدة.
• الرفع مسؤوليتك: onFiles بتعطيك الملفات، وإنت بترجّعها بـstatus من uploading لـready أو error. المكوّن ما بيلمس الشبكة.
• فشل رفع صورة بينحط على البلاطة نفسها (error جوّا العنصر)، مش على الحقل. error تبع الحقل للأخطاء اللي بتخص المعرض كله.
• السحب مش الطريقة الوحيدة — السهمين شغّالين بالكيبورد. لا تخفيهم.

قواعد التبنّي

• لا تبني الجدول بنفسك. buildVariantMatrix وvariantKey بينباعوا مع المكوّن — استعملهم لو احتجت نفس الحساب بالسيرفر.
• مفاتيح rowErrors هي variantKey(row.options)، مش رقم السطر.
• price: null معناها «خُذ سعر المنتج». صفر معناها مجاني — الفرق مهم، لا تحوّل الاثنين لصفر عند الحفظ.
• التركيبة المعطّلة بتضل محفوظة. استعملها للألوان اللي بتخلص وبترجع، بدل ما تحذفها وتفقد سعرها.

قواعد التبنّي

• نظّف الـHTML على السيرفر قبل التخزين. شريط الأدوات ما بيقدر يطلّع سكربت واللصق بينشال منه التنسيق، بس القيمة بتضل مدخلات مستخدم رايحة على dangerouslySetInnerHTML. هذا المكوّن مش حاجز أمني.
• زرّا اتجاه الفقرة بيشتغلوا على الفقرة اللي فيها المؤشّر فقط. الحقل نفسه بيضل rtl — لا تستعملهم كمفتاح عام.
• maxLength عدّاد، مش قصّ. المحرّر ما بيمنع الكتابة — امنع الحفظ إنت.
• لا تضيف أزرار. كل زرّ زيادة هو طريقة إضافية يطلع فيها المتجر غلط.

قواعد التبنّي

• to بترجع على آخر لحظة باليوم (23:59:59.999). لا تقصّها لمنتصف الليل وإلا بتفقد طلبات اليوم الأخير.
• استعمل DEFAULT_PRESETS زي ما هي. كل شاشة بتكتب فتراتها بتخلق «آخر 30 يوم» ثانية بمعنى مختلف.
• maxDate بتساوي اليوم تلقائياً. مرّر null بس إذا الشاشة فعلاً بتسمح بالمستقبل (جدولة عروض).
• للعرض استعمل formatArabicRange — بتلمّ الشهر والسنة لما يتكرروا، فما بتطلع «9 آب 2026 — 15 آب 2026».

قواعد التبنّي

• لا تمرّر لون. سلسلة وحدة بتاخد --brand-600، والسلاسل اللي بتحمل هويّة بتاخد خانات --chart-N بترتيب ثابت. خامس سلسلة معناها المخطط غلط، مش إنّ اللوحة قصيرة.
• الألوان الدلالية ممنوعة بالمخططات. الأخضر معناه نجاح، مش «الطلبات الموصّلة 40٪».
• مرّر البيانات بترتيبها الزمني الطبيعي — الأقدم أول — زي ما بترجع من الـAPI. المحور هو اللي بيعكسها، مش إنت: أول نقطة بتطلع على اليمين والسلسلة بتمشي لليسار.
• formatValue للمحور (مختصر) وformatTooltip للتلميح (دقيق). للأعداد مرّر arNum بدل الافتراضي بالدينار.
• لقائمة فئات بأسماء عربية طويلة استعمل BarList — الأفقي بيخلّي الاسم على سطر واحد بدل ما يندار تحت عمود.

قواعد التبنّي

• المكوّن ما بيحسب ضريبة. vat رقم بتحسبه إنت — مكوّن مشترك بيضرب 16٪ على كل شي هو خطأ محاسبي جاي.
• حطّ <PrintDocument /> بالصفحة ونادِ printDocument(). ما بدك تعلّم عناصر الصفحة الثانية بإشي — قواعد الطباعة بتتكفّل.
• التواريخ والأرقام نصّ جاهز من عندك، بنفس دوال @/lib/format اللي بتستعملها على الشاشة. لازم المطبوع يطابق المعروض حرف بحرف.
• الإيصال 80 مم بيشيل الشعار والعناوين. لا تحاول تحشرهم فيه — الورقة ضيّقة لأنها ضيّقة.

قواعد التبنّي

• أي صفحة عامة جديدة بتلفّها بـ<div className="shop" dir=…> ومرّر storeThemeStyle(store.theme) عليها — الأسهل إنّك تستعمل <StoreShell/> وهي بتعملها عنك. بدون هيك بتاخد ألوان المنصّة مش ألوان التاجر.
• لا تقرأ primary_color بنفسك. المُساعد بيتحقّق إنّها هيكس صالح قبل ما توصل لخاصية style — القيمة جايّة من التاجر وبتنزل بالـCSS.
• font_family صار مقروء وبيتطبّق. الخطوط المسموحة محدّدة بـSTORE_FONT_LIST، وهي نفس القائمة اللي بيحمّلها layout.tsx — فما بيصير خط ينعرض بالمحرّر والمتصفّح ما حمّله. border_radius لسا مش مقروء.
• القواعد بهالملف بتقرأ --s-* — سُلّم رمادي خاص بالمتجر مشتقّ من ألوان التاجر — مش --n-*. لو أضفت قاعدة جديدة للواجهة العامة استعمل --s-*، وإلا بتطلع بلون المنصّة جنب ألوان التاجر.
• مكوّنات @/components/ui بتشتغل جوّا .tj، مش .shop. الاثنين على نفس الـtokens، بس الأصناف مختلفة — استعمل أصناف shop-* بالواجهة العامة.
• نصّ فوق لون التاجر هو --n-0 دايماً. إذا التاجر اختار لون فاتح بيصير أبيض على فاتح — الحارس مكانه محرّر الثيم، مش هون.