بطاقة الطلبية

نظرة عامة

بطاقة الطلبية هي وحدة العرض في قوائم الطلبات: تقرأ الإجمالي والحالة والرقم في سطر، والعميل والوقت والمندوب في الثاني، وعدد المواد في الأسفل. الحالة تحمل لونا ونصا معا.

الحالات

الحالة تظهر بمكوّن الشارة نفسه من النظام: محايدة للمعالَجة، وملوّنة حين تحمل الحالة معنى.

التركيب

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

السلوك

بطاقة الطلبية قابلة للنقر لفتح تفاصيل الطلبية، وقابلة للتركيز بلوحة المفاتيح وتُفعّل بمفتاحي Enter وSpace. عند التحويم أو الضغط ترتفع تغذية بصرية خفيفة عبر رموز الحركة، ويظهر مخطط تركيز واضح حول البطاقة عند التنقّل بلوحة المفاتيح. البطاقة كلها هي هدف النقر، وشارة الحالة داخلها قراءةٌ فقط لا زر مستقل.

افعل ولا تفعل

إمكانية الوصول

• الحالة تحمل نصا دائما، لا لونا وحده.
• الإجمالي ورقم الطلبية يحقّقان تباين النص على تعبئة البطاقة.

الشيفرة

بطاقة الطلبية تُستورد من حزمة المكوّنات، وتُنسّق بالكامل من الرموز الدلالية. الاستخدام في React أولا، ثم الجزء الجوهري من تنفيذها: الغلاف المبني من الرموز وشارة الحالة التي تعيد استخدام مكوّن الشارة المشترك.

import { OrderCard } from "@mercato/components";

<OrderCard
  total="IRD 7,890,300"
  status="processing"
  orderNo="#22112457"
  customer="ليلى عبد الرحمن"
  time="9:05 PM"
  agent="خالد الغامدي"
  items="5 مواد"
/>

// The status maps onto the shared Badge: one component, one status
// vocabulary. Never re-implement the pill.
function StatusPill({ status }) {
  const s = STATUS[status]; // { label, tone }
  return <Badge status={s.tone} content={s.label} />;
}

// The card tile: a stadium pill authored from foundation tokens only.
<div
  style={{
    backgroundColor: "var(--color-bg-base-section)",
    borderRadius: "var(--shape-rounded)",
    padding: "var(--spacing-inset-sm)",
  }}
>
  <span style={{ color: "var(--color-fg-base-primary)" }}>{total}</span>
  <StatusPill status={status} />
  <span style={{ color: "var(--color-fg-base-tertiary)" }}>{customer}</span>
</div>

لا تحمل البطاقة قيمة لون أو استدارة أو مسافة مباشرة: تبديل الوضع الداكن أو إعادة العلامة يسري تلقائيا لأن كل شيء يمرّ عبر الرموز.

مكوّنات ذات صلة