# 📱 دليل عرض البيانات في الداشبورد

## 🎯 الخطوات السريعة

### الخطوة 1: إضافة البيانات
```
1. افتح test-dashboard.html
2. انقر "➕ إضافة بيانات شاملة لجميع الفورمات"
3. اضغط على "عرض البيانات" لتأكيد الإضافة
```

### الخطوة 2: الدخول إلى الداشبورد
```
1. انقر "🚀 الذهاب إلى الداشبورد"
2. أدخل كلمة المرور: admin123
3. اضغط "دخول" أو اضغط Enter
```

### الخطوة 3: عرض البيانات
```
جدول البيانات:
┌──┬──────────────┬──────────┬──────────────┬──────────┬────────┬──────┐
│# │ الاسم        │ الصفحة   │ وقت التسجيل │ معلومات │ بطاقة  │ حذف  │
├──┼──────────────┼──────────┼──────────────┼──────────┼────────┼──────┤
│1 │ علي محمد ناصر│ OTP2     │ ...          │   زر    │  زر    │ زر   │
│2 │ ليلى عبدال.. │ OTP      │ ...          │   زر    │  زر    │ زر   │
│3 │ عمر إبراهيم  │ watches  │ ...          │   زر    │  زر    │ زر   │
│4 │ سارة يحيى   │ login    │ ...          │   زر    │  زر    │ زر   │
│5 │ محمد سالم   │ card     │ ...          │   زر    │  زر    │ زر   │
│6 │ فاطمة خالد   │ address  │ ...          │   زر    │  زر    │ زر   │
│7 │ أحمد محمد    │ personal │ ...          │   زر    │  زر    │ زر   │
└──┴──────────────┴──────────┴──────────────┴──────────┴────────┴──────┘
```

---

## 📋 شرح الأعمدة

| العمود | الوصف |
|--------|--------|
| **#** | رقم تسلسلي للمستخدم |
| **الاسم** | الاسم الكامل للمستخدم |
| **الصفحة** | الصفحة التي تم إدخال البيانات منها |
| **وقت التسجيل** | التاريخ والوقت الذي تم تسجيل البيانات فيه |
| **معلومات** | زر لعرض تفاصيل كاملة |
| **بطاقة** | زر لعرض بيانات البطاقة |
| **حذف** | زر لحذف المستخدم |

---

## 🔍 عرض التفاصيل (مودال المعلومات)

عند النقر على زر **"معلومات"**، ستظهر نافذة منبثقة تحتوي على:

### 🔘 الجزء الأول: أزرار التنقل
```
تسجيل الدخول | المعلومات الشخصية | OTP | التحقق من OTP | العنوان | بيانات البطاقة | الساعة الذكية

الزر الأخضر = الصفحة الحالية للمستخدم
```

### 📝 الجزء الثاني: بيانات المستخدم

#### **قسم: بيانات تسجيل الدخول**
```
┌─────────────────────────────┐
│ بيانات تسجيل الدخول        │
├─────────────────────────────┤
│ اسم المستخدم: محمد علي     │
│ كلمة المرور: ••••••••      │
└─────────────────────────────┘
```

#### **قسم: بيانات المعلومات الشخصية**
```
┌──────────────────────────────────────┐
│ بيانات المعلومات الشخصية            │
├──────────────────────────────────────┤
│ الاسم: أحمد محمد علي               │
│ البريد الإلكتروني: ahmad.ali@...   │
│ رقم الهاتف: 01012345678            │
└──────────────────────────────────────┘
```

#### **قسم: بيانات العنوان** (إذا وجدت)
```
┌──────────────────────────────────────┐
│ بيانات العنوان                      │
├──────────────────────────────────────┤
│ العنوان: شارع النيل، حي النزهة     │
│ المدينة: القاهرة                   │
└──────────────────────────────────────┘
```

### 🎯 الأزرار في المودال
- **حذف المستخدم** ❌ - لحذف المستخدم (مع تأكيد)
- **إغلاق** - لإغلاق النافذة المنبثقة

---

## 💳 عرض بيانات البطاقة (مودال البطاقة)

عند النقر على زر **"بطاقة"**، ستظهر نافذة منبثقة بتصميم احترافي:

### 🎨 الجزء البصري
```
┌────────────────────────────────────┐
│ VISA                            💳  │  <- رقم النوع + الشريحة
├────────────────────────────────────┤
│                                    │
│ 4532  1234  5678  9010           │  <- رقم البطاقة (ظاهر بالكامل)
│                                    │
├────────────────────────────────────┤
│ صاحب البطاقة                      │
│ محمد سالم معروف                  │
│                                    │
│ صلاحية                            │
│ 12/26                             │
└────────────────────────────────────┘
```

### 📊 معلومات إضافية
```
رقم البطاقة: 4532 1234 5678 9010
اسم صاحب البطاقة: محمد سالم معروف
تاريخ الانتهاء: 12/26
```

### ✨ المميزات
- ✅ تصميم احترافي يشبه البطاقة الحقيقية
- ✅ تدرج الألوان الجميل
- ✅ ظلال ناعمة عند التمرير
- ✅ رقم البطاقة **ظاهر بشكل كامل** (غير مشفر)

---

## 🔎 ميزات إضافية في الداشبورد

### 🔍 البحث
```
- شريط البحث في الأعلى
- ابحث عن اسم استخدم
- انقر البحث أو اضغط Enter
```

### 🔄 التحديث
```
- يتحدث تلقائياً كل ثانيتين
- أو انقر "تحديث" يدويًا
```

### 🗑️ الحذف
```
- حذف فردي: انقر على "حذف" بجانب كل مستخدم
- حذف الكل: انقر على "حذف الكل" في الأعلى
- تأكيد مزدوج للحماية
```

### 🚪 تسجيل الخروج
```
- انقر "تسجيل خروج" في الزاوية العلوية اليسرى
- ستعود إلى صفحة تسجيل الدخول
```

---

## 📊 مثال عملي كامل

### 1. البيانات المضافة
```json
{
  "id": "168604800000",
  "name": "محمد سالم معروف",
  "page": "card",
  "email": "salem.karaof@example.com",
  "phone": "01098765432",
  "card_number": "4532 1234 5678 9010",
  "card_holder": "محمد سالم معروف",
  "expiry_date": "12/26",
  "cvv": "123",
  "registrationTime": "30/3/2026، 3:30:00 م"
}
```

### 2. في الجدول ستظهر كـ:
```
| 3 | محمد سالم معروف | بيانات البطاقة | 30/3/2026، 3:30:00 م | معلومات | بطاقة | حذف |
```

### 3. عند النقر على "معلومات":
```
🔘 [تسجيل الدخول] [المعلومات الشخصية] [OTP] [التحقق من OTP] [العنوان] [✅ بيانات البطاقة] [الساعة الذكية]

┌─────────────────────────────────────┐
│ بيانات تسجيل الدخول                │
├─────────────────────────────────────┤
│ اسم المستخدم: محمد سالم معروف     │
│ كلمة المرور: ••••••••              │
└─────────────────────────────────────┘

┌──────────────────────────────────────┐
│ بيانات المعلومات الشخصية            │
├──────────────────────────────────────┤
│ الاسم: محمد سالم معروف             │
│ البريد الإلكتروني: salem.karaof@... │
│ رقم الهاتف: 01098765432            │
└──────────────────────────────────────┘

[حذف المستخدم] [إغلاق]
```

### 4. عند النقر على "بطاقة":
```
🔘 [تسجيل الدخول] [المعلومات الشخصية] [OTP] [التحقق من OTP] [العنوان] [✅ بيانات البطاقة] [الساعة الذكية]

┌────────────────────────────────────┐
│ VISA                            💳  │
├────────────────────────────────────┤
│                                    │
│ 4532  1234  5678  9010           │  ← رقم البطاقة (ظاهر!)
│                                    │
├────────────────────────────────────┤
│ صاحب البطاقة                      │
│ محمد سالم معروف                  │
│                                    │
│ صلاحية                            │
│ 12/26                             │
└────────────────────────────────────┘

بيانات البطاقة:
رقم البطاقة: 4532 1234 5678 9010
اسم صاحب البطاقة: محمد سالم معروف
تاريخ الانتهاء: 12/26

[إغلاق]
```

---

## 🎓 نصائح للاختبار

1. ✅ تحقق من أن جميع البيانات **ظاهرة بوضوح**
2. ✅ جرب البحث عن كل مستخدم بالاسم
3. ✅ افتح مودال المعلومات لكل مستخدم
4. ✅ تحقق من أن الأزرار الملونة صحيحة
5. ✅ في مودال البطاقة، تأكد أن **الرقم ظاهر بشكل كامل**
6. ✅ جرب حذف مستخدم واحد
7. ✅ تحقق من التحديث التلقائي

---

**آخر تحديث:** 30 مارس 2026
