أريد منك تصميم وتنفيذ واجهة **لوحة تحكم تفاعلية (Dashboard)** لنظام صالون قمر سمايا، تكون مرتبطة بقاعدة البيانات وتعرض إحصائيات حقيقية بشكل واضح وسهل.

########################################
# 1) الهدف من لوحة التحكم
########################################

لوحة التحكم هي الشاشة الرئيسية عند دخول المستخدم للنظام.

يجب أن تعرض أهم الأرقام والإحصائيات التالية:

1) **مبيعات اليوم**:
   - إجمالي قيمة الطلبات المكتملة اليوم (طلبات الصالون + طلبات التطبيق).
   - عدد الطلبات المكتملة اليوم.
   - متوسط قيمة الطلب اليوم.

2) **حجوزات اليوم**:
   - عدد الحجوزات اليوم.
   - عدد الحجوزات الملغاة اليوم.
   - عدد الحجوزات القادمة (المجدولة لوقت لاحق اليوم).

3) **الطلبات**:
   - عدد الطلبات حسب الحالة:
     - قيد التنفيذ
     - مكتملة
     - ملغاة
     - مؤجلة / مجدولة
   - إجمالي المبالغ للطلبات الملغاة (المبلغ المفقود).

4) **المبيعات والإيرادات** (خلال فترة محددة):
   - إجمالي المبيعات (خدمات + منتجات).
   - إجمالي ضريبة القيمة المضافة المحصلة.
   - إجمالي الخصومات.
   - أفضل 5 خدمات مبيعاً.
   - أفضل 5 موظفات من حيث المبيعات أو عدد الخدمات المنفذة.

5) **العملاء**:
   - عدد العملاء المسجلين.
   - عدد العملاء الجدد خلال آخر 30 يوم.
   - أكثر العملاء إنفاقاً (Top customers).

6) **المخزون (باختصار)**:
   - عدد الأصناف التي اقتربت من النفاذ (الكمية أقل من حد معين).
   - عدد الأصناف التي اقترب تاريخ انتهائها.
   - قيمة المخزون الإجمالية تقريبياً.

########################################
# 2) عوامل التصفية (Filters)
########################################

أريد إضافة شريط أعلى لوحة التحكم يحتوي على عوامل تصفية عامة:

- من تاريخ / إلى تاريخ (Date range)
- الفرع (إن وجد أكثر من فرع)
- مصدر الطلب:
  - "كل المصادر"
  - "طلبات الصالون"
  - "طلبات التطبيق"
- نوع المستخدم (اختياري لاحقاً)

عند تغيير الفلاتر والضغط على زر "تطبيق"، يجب إعادة حساب كل الإحصائيات والبطاقات والرسوم البيانية بناءً على الفلاتر المحددة.

########################################
# 3) تصميم الواجهة (UI/UX)
########################################

استخدم React + Tailwind (أو التصميم الحالي للنظام) لبناء الواجهة، مع مراعاة التالي:

1) **بطاقات إحصائية في الأعلى (Cards)**:
   - بطاقة "مبيعات اليوم" (إجمالي + عدد الطلبات).
   - بطاقة "حجوزات اليوم".
   - بطاقة "الطلبات الملغاة" مع إجمالي المبلغ المفقود.
   - بطاقة "عدد العملاء الجدد".
   كل بطاقة تحتوي على:
   - العنوان بالعربي
   - الرقم بشكل واضح ومميز
   - أيقونة مناسبة (اختياري)
   - لون يعبر عن نوع المعلومة (مثلاً الأحمر للملغاة، الأخضر للمبيعات…).

2) **رسوم بيانية (Charts)**:
   - مخطط خطي (Line chart) أو عمودي (Bar chart) لمبيعات آخر 7 أيام أو آخر 30 يوم.
   - مخطط يوضح توزيع الحالات للطلبات (Pie / Doughnut): مكتملة، قيد التنفيذ، ملغاة، مجدولة.
   - مخطط أفضل 5 خدمات مبيعاً (Bar chart).

يمكن استخدام مكتبة مثل Recharts أو أي مكتبة مناسبة مع React.

3) **جداول مختصرة (Tables)**:
   - جدول صغير لأحدث 10 طلبات:
     - رقم الطلب
     - التاريخ
     - العميل
     - الحالة
     - الإجمالي
   - جدول لأفضل الموظفات (Top employees) حسب الفترة المختارة:
     - اسم الموظفة
     - عدد الخدمات
     - إجمالي مبيعاتها

4) **دعم اللغة العربية واتجاه RTL**:
   - كل النصوص بالعربي.
   - اتجاه الصفحة من اليمين لليسار.
   - تنسيق الأرقام بالريال السعودي "ر.س".

########################################
# 4) API & Backend Requirements
########################################

أنشئ Endpoint واحد مركزي يرجع كل البيانات المطلوبة للوحة التحكم بناء على الفلاتر:

مثال:
GET /dashboard/summary?from=2025-01-01&to=2025-01-31&branch_id=...&source=...

الـ Response يكون JSON منظم، مثلاً:

{
  "sales_today": {
    "total_amount": 12345.67,
    "orders_count": 25,
    "avg_order_value": 493.82
  },
  "bookings_today": {
    "total": 12,
    "cancelled": 3,
    "upcoming": 5
  },
  "cancelled_orders": {
    "count": 5,
    "lost_amount": 600.00
  },
  "customers": {
    "total_customers": 850,
    "new_last_30_days": 35
  },
  "top_services": [
    { "name_ar": "تنظيف البشرة", "count": 40, "total_amount": 12000 },
    ...
  ],
  "top_employees": [
    { "name": "فاطمة علي", "services_count": 30, "total_sales": 9000 },
    ...
  ],
  "inventory": {
    "low_stock_count": 12,
    "near_expiry_count": 5,
    "estimated_value": 35000.00
  },
  "sales_over_time": [
    { "date": "2025-01-01", "amount": 1000 },
    { "date": "2025-01-02", "amount": 2300 },
    ...
  ],
  "orders_status_distribution": {
    "completed": 40,
    "in_progress": 10,
    "cancelled": 5,
    "scheduled": 8
  },
  "latest_orders": [
    { "order_number": "SO-0123", "date": "...", "customer": "زائر", "status": "مكتمل", "total": 220.00 },
    ...
  ]
}

مهم:
- الحسابات تكون من قاعدة البيانات الحقيقية (Order, Appointment, Customer, Employee, Inventory tables).
- احترام فلاتر التاريخ، المصدر، الفرع.
- كتابة الكود بشكل منظم داخل service ممتاز (dashboardService).

########################################
# 5) التفاعل (Interactivity)
########################################

- عند تغيير الفلاتر والضغط على "تطبيق" يتم:
  - إظهار حالة تحميل (Loading spinner) لحين جلب البيانات.
  - تحديث جميع البطاقات والرسوم البيانية والجداول بدون إعادة تحميل الصفحة.

- يمكن إضافة زر "تحديث" يعيد تحميل البيانات.

- لاحقاً يمكن إضافة "الحفظ التلقائي للفلاتر" لكل مستخدم، لكن الآن ليس ضرورياً.

########################################
# 6) الجودة والآداء
########################################

- تأكد من أن الاستعلامات على قاعدة البيانات فعّالة (استخدام التجميع GROUP BY، الفهارس Indexes).
- تجنب احتساب الإحصائيات في الواجهة الأمامية (React) قدر الإمكان، اجعل معظم الحساب في الـ backend.
- إضافة تعليقات داخل الكود لشرح أهم أجزاء لو أردنا تطويرها لاحقاً.

########################################
# END
########################################
