بناء لوحة تحكم تفاعلية باستخدام Next.js و Recharts

في عالم تطوير تطبيقات الويب الحديثة، أصبحت لوحات التحكم (Dashboards) عنصراً أساسياً لا غنى عنه في أي نظام إداري أو تجاري. سواء كنت تبني نظام إدارة موارد بشرية، أو منصة تحليلات بيانات، أو حتى لوحة مراقبة أداء — فإن القدرة على عرض البيانات بشكل مرئي وتفاعلي هي ما يميز المنتج الاحترافي عن البسيط.

لماذا Next.js مع Recharts؟

يوفر Next.js بنية متينة لتطبيقات React مع ميزات مثل التوجيه التلقائي (App Router)، والعرض من جهة الخادم (SSR)، والتحسين التلقائي للأداء. أما Recharts فهي مكتبة رسوم بيانية مبنية على D3.js ومتوافقة تماماً مع React، وتوفر مكونات جاهزة وقابلة للتخصيص بسهولة.

الخطوة الأولى: إعداد بيئة المشروع

# إنشاء مشروع Next.js جديد
npx create-next-app@latest dashboard-app --typescript --tailwind --app
cd dashboard-app

# تثبيت Recharts
npm install recharts

بعد إعداد المشروع، سنقوم ببناء هيكلية المجلدات المناسبة. سنفصل بين المكونات (Components)، والبيانات (Data)، والخدمات (Services) لضمان قابلية الصيانة والتوسع.

الخطوة الثانية: إنشاء مكون الرسم البياني الأساسي

'use client';

import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { month: 'يناير', revenue: 4000, expenses: 2400 },
  { month: 'فبراير', revenue: 3000, expenses: 1398 },
  { month: 'مارس', revenue: 9800, expenses: 2000 },
  { month: 'أبريل', revenue: 3908, expenses: 2780 },
  { month: 'مايو', revenue: 4800, expenses: 1890 },
  { month: 'يونيو', revenue: 3800, expenses: 2390 },
];

export default function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={350}>
      <AreaChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="revenue" 
              stroke="#0D6B58" fill="#0A4D40" fillOpacity={0.3} />
        <Area type="monotone" dataKey="expenses" 
              stroke="#FFD700" fill="#DAA520" fillOpacity={0.3} />
      </AreaChart>
    </ResponsiveContainer>
  );
}

الخطوة الثالثة: تصميم بطاقات الإحصائيات (Stats Cards)

بطاقات الإحصائيات هي العناصر الأولى التي يراها المستخدم في لوحة التحكم. يجب أن تكون واضحة، مع أرقام كبيرة ونسب تغيير ملونة (أخضر للزيادة، أحمر للنقصان).

القاعدة الذهبية في تصميم لوحات التحكم: أعطِ المستخدم المعلومة الأهم في أقل من 3 ثوانٍ من فتح الصفحة.

أفضل الممارسات والنصائح

عند بناء لوحة تحكم عربية، تأكد من دعم اتجاه RTL بشكل صحيح في جميع المكونات، واستخدم خطوطاً عربية واضحة مثل Tajawal أو Cairo. كذلك، اختبر الاستجابة على شاشات الهواتف — فكثير من المديرين يتابعون البيانات من هواتفهم أثناء التنقل.