مشروع عملي: بناء Dashboard بسيط في React

لو دخلت أي تطبيق احترافي، ستجد لوحة تحكم تعرض أرقامًا ونشاطات بسرعة. هذا بالضبط ما سنبنيه هنا: Dashboard بسيط يعطيك شكلًا احترافيًا ويطبق أهم أفكار بناء الواجهات في React.

ماذا سنبني؟

• شريط علوي يحتوي عنوان المستخدم.
• بطاقات إحصائية (مبيعات، طلبات، مستخدمين).
• قائمة نشاطات أو آخر الطلبات.
• قسم مخطط بسيط (Placeholder).

الخطوة 1: بنية البيانات

const stats = [
  { id: 1, label: "المبيعات", value: "12,400" },
  { id: 2, label: "الطلبات", value: "320" },
  { id: 3, label: "المستخدمون", value: "1,240" },
];

const activities = [
  { id: 1, text: "طلب جديد من أحمد" },
  { id: 2, text: "تم شحن طلب #1024" },
  { id: 3, text: "مستخدم جديد سجّل" },
];

الخطوة 2: بطاقات الإحصاءات

function StatsCards() {
  return (
    <div className="stats-grid">
      {stats.map((s) => (
        <div key={s.id} className="card">
          <p>{s.label}</p>
          <h3>{s.value}</h3>
        </div>
      ))}
    </div>
  );
}

الخطوة 3: قائمة النشاطات

function ActivityList() {
  return (
    <ul>
      {activities.map((a) => (
        <li key={a.id}>{a.text}</li>
      ))}
    </ul>
  );
}

الخطوة 4: مخطط بسيط (Placeholder)

function ChartPlaceholder() {
  return (
    <div className="chart">
      <p>مخطط المبيعات (قريبًا)</p>
    </div>
  );
}

الخطوة 5: تجميع كل شيء

function Dashboard() {
  return (
    <div className="dashboard">
      <header>
        <h1>لوحة التحكم</h1>
        <span>مرحبًا، محمد</span>
      </header>

      <StatsCards />

      <section>
        <h2>النشاطات الأخيرة</h2>
        <ActivityList />
      </section>

      <section>
        <h2>المخطط</h2>
        <ChartPlaceholder />
      </section>
    </div>
  );
}

أفضل الممارسات

• قسم الواجهة إلى مكوّنات صغيرة قابلة لإعادة الاستخدام.
• استخدم Grid أو Flex لتنظيم البطاقات.
• ابدأ ببيانات ثابتة ثم اربط API لاحقًا.

الأسئلة الشائعة — FAQ

ما الهدف من مشروع Dashboard؟

بناء واجهة واقعية فيها إحصاءات وقائمة نشاطات لتطبيق مفاهيم React.

هل نحتاج مكتبة رسوم؟

لا، يمكنك البدء بمخطط بسيط ثم استخدام مكتبة مثل Recharts لاحقًا.

كيف ننظم الصفحة؟

نقسمها إلى أقسام واضحة: header، بطاقات، نشاطات، مخطط.

هل يمكن إضافة فلترة للبيانات؟

نعم، عبر state للفلتر وتحديث البيانات المعروضة.

كيف أطور المشروع لاحقًا؟

أضف تسجيل دخول، صفحات فرعية، وربط API للإحصاءات الحقيقية.