# تخطيط واجهات المستخدم — UI/UX Planning - (بغض النظر عن انه هي شغلات بس شكليه)

## أسلوب التصميم العام

المطلوب من العميل: **بسيط، حديث، ألوان باستيلية دافئة، خطوط واضحة، أزرار كبيرة.**

| العنصر | التوصية |
|--------|---------|
| الخط | Inter (EN) / Inter + نص عثماني (TR) — sans-serif واضح |
| الألوان | ألوان باستيل دافئة: mint, peach, lavender — أزرار كبيرة بزوايا دائرية |
| أيقونات | Phosphor Icons أو Lucide — ناعمة، كثيرة الخيارات |
| الهيكل العام | تبويبات سفلية (Bottom Navigation Bar) + Drawer جانبي اختياري |

---

## التطبيق الجوال — هيكل التبويبات

### Bottom Navigation (4 تبويبات)

| التبويب | الأيقونة | المحتوى |
|---------|---------|---------|
| الرئيسية (Home) | 🏠 | الملخص اليومي للطفل |
| الأنشطة (Activities) | 🎨 | أنشطة اليوم + الصور |
| الإشعارات (Alerts) | 🔔 | الإعلانات + قائمة الإشعارات |
| الملف الشخصي (Profile) | 👤 | الإعدادات + معلومات الحساب |

---

## شاشات لوحة ولي الأمر

### 1. الشاشة الرئيسية — الملخص اليومي

```
┌─────────────────────────────────────┐
│  📅 يوم الأحد، 7 يونيو 2026         │
│  👦 دفنة — صف الفراشات               │
├─────────────────────────────────────┤
│  ┌──────────────┐  ┌──────────────┐ │
│  │  📋 الحضور   │  │  🍽  الوجبات  │ │
│  │  حضر 8:15    │  │  تناول كاملاً │ │
│  └──────────────┘  └──────────────┘ │
│  ┌──────────────┐  ┌──────────────┐ │
│  │  😴 القيلولة │  │  🎨 نشاط     │ │
│  │  نام 1:00     │  │  برمجة وروبوت │ │
│  └──────────────┘  └──────────────┘ │
│  ┌─────────────────────────────────┐ │
│  │  📷 صور اليوم (3 جديدة)        │ │
│  │  [صورة] [صورة] [صورة]          │ │
│  └─────────────────────────────────┘ │
│  ┌─────────────────────────────────┐ │
│  │  📝 ملاحظات المعلم              │ │
│  │  "كان متفاعلاً في نشاط البرمجة" │ │
│  └─────────────────────────────────┘ │
│  ┌─────────────────────────────────┐ │
│  │  🚗        أنا قادم             │ │
│  │  [اضغط واختر وقت الوصول]        │ │
│  └─────────────────────────────────┘ │
└─────────────────────────────────────┘
```

### 2. شاشة الوجبات التفصيلية

```
┌─────────────────────────────────────┐
│  🍽  وجبات اليوم                     │
├─────────────────────────────────────┤
│  ┌─ الإفطار ──────────────────────┐ │
│  │  🕐 9:30                       │ │
│  │  🍳 بيض + خبز + حليب           │ │
│  │  ✅ تناول الطعام بالكامل       │ │
│  └────────────────────────────────┘ │
│  ┌─ الغداء ──────────────────────┐ │
│  │  🕐 12:30                      │ │
│  │  🍲 شوربة عدس + دجاج + أرز     │ │
│  │  ⚠️  تناول كمية قليلة          │ │
│  └────────────────────────────────┘ │
│  ┌─ وجبة العصر ──────────────────┐ │
│  │  🕐 15:30                      │ │
│  │  🍎 تفاح + بسكويت              │ │
│  │  ✅ شهية جيدة                  │ │
│  └────────────────────────────────┘ │
└─────────────────────────────────────┘
```

### 3. شاشة الحضور والغياب

```
┌─────────────────────────────────────┐
│  📋 الحضور — دفنة                   │
├─────────────────────────────────────┤
│  ◀  يونيو 2026  ▶                   │
│  ┌─────────────────────────────────┐│
│  │ تقويم شهري مع أيقونات:          ││
│  │ ✅ حضر  ⚠️ متأخر  ❌ غائب       ││
│  │ 🟢←مبكر                          ││
│  └─────────────────────────────────┘│
│  ┌─ ملخص الشهر ───────────────────┐│
│  │  حضر: 20 يوم                    ││
│  │  غائب: 2 يوم                    ││
│  │  متأخر: 1 يوم                   ││
│  │  غادر مبكرًا: 1 يوم              ││
│  └────────────────────────────────┘│
└─────────────────────────────────────┘
```

### 4. شاشة الأنشطة

```
┌─────────────────────────────────────┐
│  🎨 الأنشطة                         │
├─────────────────────────────────────┤
│  ┌─ اليوم ────────────────────────┐│
│  │  🖼 [صورة النشاط]               ││
│  │  🤖 نشاط البرمجة والروبوتات     ││
│  │  📖 تعزيز مفهوم الاتجاهات        ││
│  │  🎯 الهدف: توجيه الروبوت للهدف   ││
│  └────────────────────────────────┘│
│  ┌─ أمس ─────────────────────────┐│
│  │  🖼 [صورة النشاط]               ││
│  │  🎨 نشاط الرسم بالألوان المائية ││
│  │  ...                           ││
│  └────────────────────────────────┘│
│                                     │
│  ⬇️ تصفح أقدم                        │
└─────────────────────────────────────┘
```

### 5. شاشة الصور والفيديو

```
┌─────────────────────────────────────┐
│  📷 ألبوم الصور — دفنة              │
├─────────────────────────────────────┤
│  ┌─ تصفية ────────────────────────┐│
│  │ [الكل] [صور] [فيديو] [الأنشطة] ││
│  └────────────────────────────────┘│
│  ┌──────┐ ┌──────┐ ┌──────┐       ││
│  │ صورة │ │ صورة │ │ فيديو│       ││
│  │1 يونيو│ │3 يونيو│ │5 يونيو│      ││
│  └──────┘ └──────┘ └──────┘       ││
│  ┌──────┐ ┌──────┐ ┌──────┐       ││
│  │ صورة │ │ صورة │ │ صورة │       ││
│  └──────┘ └──────┘ └──────┘       ││
└─────────────────────────────────────┘
```

### 6. شاشة الإعلانات + الإشعارات

```
┌─────────────────────────────────────┐
│  🔔 الإعلانات والإشعارات            │
├─────────────────────────────────────┤
│  📢 إعلانات                         │
│  ┌─────────────────────────────────┐│
│  │ جديد: اجتماع أولياء الأمور      ││
│  │ نود دعوتكم لحضور اجتماع...      ││
│  │ ⏱ 5 ساعات                       ││
│  │ [مقروء ✓]                       ││
│  └─────────────────────────────────┘│
│  ┌─────────────────────────────────┐│
│  │ جديد: فعالية اليوم الرياضي      ││
│  │ نود إعلامكم بموعد اليوم         ││
│  │ الرياضي للصفوف...               ││
│  │ ⏱ أمس                           ││
│  └─────────────────────────────────┘│
│                                     │
│  🔔 الإشعارات الأخيرة               │
│  ┌─────────────────────────────────┐│
│  │ 🚗 سجلت دفنة حضورها اليوم 8:15  ││
│  │ 🍽 تناولت فطورها بالكامل         ││
│  │ 📷 صورة جديدة مضافة              ││
│  └─────────────────────────────────┘│
└─────────────────────────────────────┘
```

### 7. ميزة "أنا قادم"

```
┌─────────────────────────────────────┐
│  🚗 أنا قادم، جهزوا طفلي            │
├─────────────────────────────────────┤
│                                     │
│  👦 الطالب: دفنة                    │
│  📚 الصف: صف الفراشات               │
│                                     │
│  ⏱ اختر وقت الوصول المتوقع:         │
│                                     │
│  ┌─────────────────────────────────┐│
│  │          ⏱ 5 دقائق              ││
│  └─────────────────────────────────┘│
│  ┌─────────────────────────────────┐│
│  │          ⏱ 10 دقائق             ││
│  └─────────────────────────────────┘│
│  ┌─────────────────────────────────┐│
│  │          ⏱ 15 دقيقة             ││
│  └─────────────────────────────────┘│
│  ┌─────────────────────────────────┐│
│  │       🚪 أنا عند البوابة        ││
│  └─────────────────────────────────┘│
│                                     │
│  ┌─────────────────────────────────┐│
│  │       إرسال الإشعار             ││
│  └─────────────────────────────────┘│
└─────────────────────────────────────┘
```

### 8. الإعدادات والملف الشخصي

```
┌─────────────────────────────────────┐
│  👤 الملف الشخصي                    │
├─────────────────────────────────────┤
│  [صورة شخصية]                       │
│  الاسم: أحمد محمد                    │
│  الإيميل: ahmed@email.com           │
│  الهاتف: +90 555 123 4567           │
├─────────────────────────────────────┤
│  ⚙️  الإعدادات                      │
│  🌐  اللغة: English / Türkçe        │
│  🔔  تخصيص الإشعارات                │
│  🔒  تغيير كلمة المرور               │
│  🚪  تسجيل الخروج                    │
└─────────────────────────────────────┘
```

---

## شاشات لوحة المعلم

### الواجهة الرئيسية للمعلم (قائمة سريعة)

```
┌─────────────────────────────────────┐
│  👩‍🏫 صباح الخير، آسيا هانم            │
│  📚 صف الفراشات (18 طالب)           │
├─────────────────────────────────────┤
│  ┌──────────────┐  ┌──────────────┐ │
│  │  📋 تسجيل     │  │  🍽  إدخال   │ │
│  │  الحضور       │  │  الوجبات     │ │
│  │  [اضغط هنا]   │  │  [اضغط هنا]  │ │
│  └──────────────┘  └──────────────┘ │
│  ┌──────────────┐  ┌──────────────┐ │
│  │  😴 إدخال    │  │  🎨 نشر      │ │
│  │  النوم        │  │  نشاط        │ │
│  │  [اضغط هنا]   │  │  [اضغط هنا]  │ │
│  └──────────────┘  └──────────────┘ │
│  ┌──────────────┐  ┌──────────────┐ │
│  │  📷 رفع       │  │  📝 إضافة    │ │
│  │  صور/فيديو    │  │  ملاحظات     │ │
│  │  [اضغط هنا]   │  │  [اضغط هنا]  │ │
│  └──────────────┘  └──────────────┘ │
├─────────────────────────────────────┤
│  🚨 تنبيهات "أنا قادم" النشطة       │
│  ┌─────────────────────────────────┐│
│  │ 🚗 دفنة — ولي أمرها سيصل خلال   ││
│  │    10 دقائق                      ││
│  │ [تم التجهيز]                     ││
│  └─────────────────────────────────┘│
└─────────────────────────────────────┘
```

### شاشة تسجيل الحضور (المعلم)

```
┌─────────────────────────────────────┐
│  📋 الحضور — صف الفراشات             │
│  📅 الأحد 7 يونيو 2026              │
├─────────────────────────────────────┤
│  [تحديد الكل كحاضر]                 │
│  ┌─────────────────────────────────┐│
│  │ 👦 أحمد      ○حضر ○غائب ○متأخر  ││
│  │ 👧 دفنة      ○حضر ○غائب ○متأخر  ││
│  │ 👦 محمد      ○حضر ○غائب ○متأخر  ││
│  │ ...                             ││
│  └─────────────────────────────────┘│
│                                     │
│  ┌─────────────────────────────────┐│
│  │       💾 حفظ الحضور              ││
│  └─────────────────────────────────┘│
└─────────────────────────────────────┘
```

### شاشة إدخال الوجبات (المعلم)

```
┌─────────────────────────────────────┐
│  🍽 حالة الإفطار — صف الفراشات      │
├─────────────────────────────────────┤
│  🍳 الإفطار: بيض + خبز + حليب       │
│  [تحديد الكل كـ"تناول بالكامل"]     │
│  ┌─────────────────────────────────┐│
│  │ 👦 أحمد   ○كامل ○قليل ○لم يأكل ││
│  │            ○شهية ○بمساعدة       ││
│  │ 👧 دفنة   ○كامل ○قليل ○لم يأكل ││
│  │            ○شهية ○بمساعدة       ││
│  └─────────────────────────────────┘│
│                                     │
│  ┌─────────────────────────────────┐│
│  │       💾 حفظ                     ││
│  └─────────────────────────────────┘│
└─────────────────────────────────────┘
```

---

## لوحة الإدارة (Admin Panel — Web)

### الهيكل العام للوحة (مقترح: Filament)

```
┌──────────────────────────────────────────────────────────┐
│  📊 Bilgi Ağacı Anaokulu — لوحة الإدارة                 │
├──────────┬───────────────────────────────────────────────┤
│ 📋 الطلاب │  ┌─────────┐ ┌─────────┐ ┌──────────┐      │
│ 👥 أولياء │  │ 120     │ │ 45      │ │ 8        │      │
│    الأمور │  │ طالب     │ │ غائب    │ │ صفوف      │      │
│ 👩‍🏫 معلمون │  └─────────┘ └─────────┘ └──────────┘      │
│ 🏫 الصفوف  │                                           │
│ 🍽 الوجبات │  📊 رسم بياني: الحضور اليومي              │
│ 🎨 الأنشطة │  ┌─────────────────────────────────────┐  │
│ 📢 إعلانات │  │ ████████████████░░░░ (80% حضور)     │  │
│ 📊 تقارير  │  └─────────────────────────────────────┘  │
│    الحضور  │                                           │
│ ⚙️ إعدادات │  🔔 تنبيهات عاجلة                        │
│ 🔐 الأدوار │  • 3 صور بانتظار الموافقة               │
│   والصلاحيات│  • 2 إعلان بحاجة للمراجعة               │
└──────────┴──────────────────────────────────────────────┘
```

### شاشات الإدارة الفرعية

| الشاشة | الوظيفة |
|--------|---------|
| قائمة الطلاب | إضافة/تعديل/حذف طالب، ربطه بولي أمر، تعيين صفه |
| قائمة أولياء الأمور | إدارة حسابات أولياء الأمور |
| قائمة المعلمين | تعيين المعلمين للصفوف |
| الصفوف | إعدادات الصف (تفعيل القيلولة، الأوقات) |
| قوائم الطعام | إنشاء وجبات، جدولتها مسبقًا |
| الأنشطة المجدولة | جدولة الأنشطة المتكررة أسبوعيًا |
| مراجعة الصور | الموافقة/رفض الصور المرفوعة |
| تقارير الحضور | تقارير حضور الطلاب اليومية والشهرية |
| الإعدادات | تفعيل/تعطيل موافقة الصور، إعدادات عامة |
| الأدوار والصلاحيات | إنشاء أدوار جديدة، تعيين صلاحيات |

---

## تدفق الشاشات (User Flow)

### Parent Flow
```
تسجيل الدخول → الشاشة الرئيسية → اختيار الطفل (إذا أكثر من طفل)
  ├─ تبويب الوجبات
  ├─ تبويب الأنشطة
  ├─ تبويب الإشعارات والإعلانات
  └─ زر "أنا قادم" (ظاهر دائمًا)
```

### Teacher Flow
```
تسجيل الدخول → قائمة المهام السريعة
  ├─ تسجيل الحضور
  ├─ إدخال الوجبات
  ├─ إدخال النوم
  ├─ نشر نشاط
  ├─ رفع صور
  └─ إضافة ملاحظات
  + قسم تنبيهات "أنا قادم" بشكل منفصل
```

### Admin Flow
```
تسجيل الدخول → Dashboard
  ├─ الشريط الجانبي ← القوائم الإدارية
  ├─ إدارة المستخدمين
  ├─ مراجعة الصور
  ├─ تقارير الحضور
  └─ الإعدادات
```

---

## إرشادات التصميم

- **أزرار كبيرة وألوان متباينة** — مناسبة لسرعة استخدام المعلم.
- **أدنى عدد من النقرات** — المعلم يصل للمهمة في نقرتين كحد أقصى.
- **Confirmation dialogs** — عند حفظ بيانات الطلاب (تأكيد قبل الإرسال).
- **Offline mode consideration** — المعلم قد يحتاج لتسجيل بيانات بدون إنترنت (cache محلي).
- **Dark mode اختياري** — ليس أولوية حاليًا.
- **Accessibility** — حجم خط مناسب لكبار السن من أولياء الأمور.
- **RTL support** — غير مطلوب حاليًا (التركية والإنجليزية LTR).