بناء لوحات تحكم تسويقية: الدليل التقني الشامل لبناء Dashboard احترافي يعرض بياناتك في الوقت الفعلي في 2026

لماذا لوحات التحكم التسويقية ضرورية؟

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

المرحلة 1: البنية التقنية

🛠️ Stack التقني

💻 مثال كود: إعداد المشروع

# Create Next.js project
npx create-next-app@latest marketing-dashboard --typescript --tailwind --app

# Install dependencies
cd marketing-dashboard
npm install recharts @radix-ui/react-slot class-variance-authority clsx tailwind-merge
npm install @prisma/client
npm install -D prisma

# Initialize Prisma
npx prisma init

# Install additional packages
npm install date-fns lucide-react

المرحلة 2: بناء API للبيانات

🔗 قاعدة البيانات

// prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Campaign {
  id            String    @id @default(uuid())
  name          String
  platform      String
  status        String
  budget        Float
  spent         Float
  impressions   Int
  clicks        Int
  conversions   Int
  revenue       Float
  startDate     DateTime
  endDate       DateTime?
  createdAt     DateTime @default(now())
  
  metrics       DailyMetric[]
}

model DailyMetric {
  id            String    @id @default(uuid())
  campaignId    String
  campaign      Campaign @relation(fields: [campaignId], references: [id])
  date          DateTime
  impressions   Int
  clicks        Int
  conversions   Int
  revenue       Float
  spent         Float
  
  @@unique([campaignId, date])
}

model SocialMetric {
  id            String    @id @default(uuid())
  platform      String
  date          DateTime
  followers     Int
  engagement    Int
  reach         Int
  impressions   Int
  
  @@unique([platform, date])
}

💻 مثال كود: API Endpoints

// src/app/api/dashboard/route.ts

import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/prisma';
import { startOfMonth, endOfMonth, eachDayOfInterval } from 'date-fns';

export async function GET(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url);
    const startDate = searchParams.get('startDate') || startOfMonth(new Date()).toISOString();
    const endDate = searchParams.get('endDate') || endOfMonth(new Date()).toISOString();

    // Get campaigns
    const campaigns = await prisma.campaign.findMany({
      where: {
        startDate: { gte: new Date(startDate) },
        endDate: { lte: new Date(endDate) }
      },
      include: {
        metrics: true
      }
    });

    // Calculate totals
    const totals = campaigns.reduce((acc, campaign) => ({
      totalBudget: acc.totalBudget + campaign.budget,
      totalSpent: acc.totalSpent + campaign.spent,
      totalImpressions: acc.totalImpressions + campaign.impressions,
      totalClicks: acc.totalClicks + campaign.clicks,
      totalConversions: acc.totalConversions + campaign.conversions,
      totalRevenue: acc.totalRevenue + campaign.revenue
    }), {
      totalBudget: 0,
      totalSpent: 0,
      totalImpressions: 0,
      totalClicks: 0,
      totalConversions: 0,
      totalRevenue: 0
    });

    // Calculate daily metrics for charts
    const dates = eachDayOfInterval({
      start: new Date(startDate),
      end: new Date(endDate)
    });

    const dailyMetrics = dates.map(date => {
      const dayMetrics = campaigns.flatMap(c => 
        c.metrics.filter(m => m.date.toDateString() === date.toDateString())
      );

      return {
        date: date.toISOString().split('T')[0],
        impressions: dayMetrics.reduce((sum, m) => sum + m.impressions, 0),
        clicks: dayMetrics.reduce((sum, m) => sum + m.clicks, 0),
        conversions: dayMetrics.reduce((sum, m) => sum + m.conversions, 0),
        revenue: dayMetrics.reduce((sum, m) => sum + m.revenue, 0)
      };
    });

    return NextResponse.json({
      campaigns,
      totals,
      dailyMetrics,
      roi: totals.totalSpent > 0 
        ? ((totals.totalRevenue - totals.totalSpent) / totals.totalSpent) * 100 
        : 0
    });
  } catch (error) {
    console.error('Dashboard API error:', error);
    return NextResponse.json(
      { error: 'Failed to fetch dashboard data' },
      { status: 500 }
    );
  }
}

المرحلة 3: بناء لوحة التحكم

🎨 المكون الرئيسي

// src/app/dashboard/page.tsx

'use client';

import { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { TrendingUp, TrendingDown, DollarSign, Users, Eye, MousePointer } from 'lucide-react';

interface DashboardData {
  campaigns: any[];
  totals: {
    totalBudget: number;
    totalSpent: number;
    totalImpressions: number;
    totalClicks: number;
    totalConversions: number;
    totalRevenue: number;
  };
  dailyMetrics: {
    date: string;
    impressions: number;
    clicks: number;
    conversions: number;
    revenue: number;
  }[];
  roi: number;
}

export default function DashboardPage() {
  const [data, setData] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchDashboardData();
  }, []);

  const fetchDashboardData = async () => {
    try {
      const response = await fetch('/api/dashboard');
      if (!response.ok) throw new Error('Failed to fetch');
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-red-600">Error: {error || 'No data'}</div>
      </div>
    );
  }

  const { totals, dailyMetrics, campaigns } = data;

  return (
    <div className="p-8 space-y-6">
      <h1 className="text-3xl font-bold">لوحة التحكم التسويقية</h1>

      {/* KPI Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">الإيرادات</CardTitle>
            <DollarSign className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {totals.totalRevenue.toLocaleString()} ريال
            </div>
            <p className="text-xs text-muted-foreground">
              ROI: {data.roi.toFixed(0)}%
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">الانطباعات</CardTitle>
            <Eye className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {totals.totalImpressions.toLocaleString()}
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">النقرات</CardTitle>
            <MousePointer className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {totals.totalClicks.toLocaleString()}
            </div>
            <p className="text-xs text-muted-foreground">
              CTR: {((totals.totalClicks / totals.totalImpressions) * 100).toFixed(2)}%
            </p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">التحويلات</CardTitle>
            <Users className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">
              {totals.totalConversions}
            </div>
            <p className="text-xs text-muted-foreground">
              CR: {((totals.totalConversions / totals.totalClicks) * 100).toFixed(2)}%
            </p>
          </CardContent>
        </Card>
      </div>

      {/* Revenue Chart */}
      <Card>
        <CardHeader>
          <CardTitle>الإيرادات اليومية</CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={dailyMetrics}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Line 
                type="monotone" 
                dataKey="revenue" 
                stroke="#8b5cf6" 
                strokeWidth={2}
              />
            </LineChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>

      {/* Campaigns Performance */}
      <Card>
        <CardHeader>
          <CardTitle>أداء الحملات</CardTitle>
        </CardHeader>
        <CardContent>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={campaigns}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="revenue" fill="#10b981" />
            </BarChart>
          </ResponsiveContainer>
        </CardContent>
      </Card>
    </div>
  );
}

المرحلة 4: رسوم بيانية متقدمة

📊 مخططات مخصصة

// src/components/charts/AdvancedCharts.tsx

'use client';

import { ResponsiveContainer, PieChart, Pie, Cell, AreaChart, Area, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts';

interface PlatformData {
  name: string;
  value: number;
}

export function PlatformDistributionChart({ data }: { data: PlatformData[] }) {
  const COLORS = ['#8b5cf6', '#3b82f6', '#10b981', '#f59e0b', '#ec4899'];

  return (
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Pie
          data={data}
          cx="50%"
          cy="50%"
          labelLine={false}
          label={({ name, percent }) => `${name} ${((percent as number) * 100).toFixed(0)}%`}
          outerRadius={80}
          fill="#8884d8"
          dataKey="value"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
      </PieChart>
    </ResponsiveContainer>
  );
}

interface PerformanceData {
  date: string;
  impressions: number;
  clicks: number;
  conversions: number;
}

export function PerformanceAreaChart({ data }: { data: PerformanceData[] }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <AreaChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="date" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="impressions" stackId="1" stroke="#8884d8" fill="#8884d8" />
        <Area type="monotone" dataKey="clicks" stackId="2" stroke="#82ca9d" fill="#82ca9d" />
        <Area type="monotone" dataKey="conversions" stackId="3" stroke="#ffc658" fill="#ffc658" />
      </AreaChart>
    </ResponsiveContainer>
  );
}

interface RadarData {
  metric: string;
  value: number;
  fullMark: number;
}

export function PerformanceRadarChart({ data }: { data: RadarData[] }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
        <PolarGrid />
        <PolarAngleAxis dataKey="metric" />
        <PolarRadiusAxis />
        <Radar name="Performance" dataKey="value" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
      </RadarChart>
    </ResponsiveContainer>
  );
}

المرحلة 5: تكامل مع APIs خارجية

🔗 Google Analytics API

// src/lib/google-analytics.ts

import { google } from 'googleapis';

const analytics = google.analytics({
  version: 'v3',
  auth: process.env.GOOGLE_ANALYTICS_KEY
});

export async function getAnalyticsData(
  viewId: string,
  startDate: string,
  endDate: string
) {
  const response = await analytics.reports.batchGet({
    requestBody: {
      reportRequests: [{
        viewId,
        dateRanges: [{ startDate, endDate }],
        metrics: [
          { expression: 'ga:sessions' },
          { expression: 'ga:pageviews' },
          { expression: 'ga:users' },
          { expression: 'ga:bounceRate' }
        ],
        dimensions: [
          { name: 'ga:date' }
        ]
      }]
    }
  });

  return response.data.reports[0].data.rows;
}

// src/lib/facebook-ads.ts

import FacebookAdsApi from 'facebook-nodejs-business-sdk';

const accessToken = process.env.FACEBOOK_ACCESS_TOKEN!;
FacebookAdsApi.init(accessToken);

export async function getFacebookAdsData(accountId: string) {
  const account = new FacebookAdsApi.AdAccount(accountId);
  
  const campaigns = await account.readCampaigns(['name', 'status', 'insights']);
  
  return campaigns;
}

دراسة حالة: شركة سعودية توفر 40% من وقت التحليل

أخطاء شائعة يجب تجنبها

• ❌ تشتت البيانات: بيانات مبعثرة في أماكن متعددة
• ❌ تحديث يدوي: تحديث البيانات يدوياً = أخطاء وضياع وقت
• ❌ رسوم بيانية معقدة: مخططات معقدة = صعوبة في الفهم
• ❌ عدم التخصيص: لوحة واحدة للجميع = عدم فعالية
• ❌ بيانات قديمة: بيانات غير محدثة = قرارات خاطئة
• ❌ عدم التكامل: عدم تكامل مع APIs = بيانات ناقصة
• ❌ أداء بطيء: لوحة بطيئة = إحباط المستخدمين
• ❌ عدم الأمان: عدم حماية البيانات = مخاطر أمنية

قائمة التحقق (Checklist)

الخلاصة

لوحات التحكم التسويقية هي النافذة التي ترى من خلالها أداء أعمالك. بدونها، أنت تعمل في الظلام. الشركات التي تستخدم لوحات تحكم متقدمة تتخذ قرارات أسرع بـ 5 مرات وتحقق نتائج أفضل بـ 300%.

القاعدة الذهبية: توحيد البيانات + تحديث تلقائي + رسوم بيانية تفاعلية + تكامل APIs = لوحة تحكم ناجحة. لا تترك بياناتك مبعثرة، وحّدها في مكان واحد.

تذكر: الوقت هو المال. لوحة التحكم توفر 40% من وقت التحليل وتزيد دقة القرارات 40%. الاستثمار في لوحة تحكم احترافية هو أفضل استثمار يمكنك القيام به.

الأسئلة الشائعة (FAQ)