┌───────────────┐
│     UI        │  (NotesPage)
└──────┬────────┘
       │
       ▼
┌───────────────┐
│    Cubit      │  (NotesCubit)
└──────┬────────┘
       │
       ▼
┌───────────────┐
│   UseCase     │  (GetNotesUseCase)
└──────┬────────┘
       │
       ▼
┌───────────────┐
│  Repository   │  (NotesRepository)
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ RepositoryImpl│  (NotesRepositoryImpl)
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ DataSource    │  (NotesRemoteDataSource)
└──────┬────────┘
       │
       ▼
┌───────────────┐
│  Supabase     │  (API / Database)
└───────────────┘

🔁 🔄 رجوع البيانات (العكس)

Supabase
   ↑
DataSource
   ↑
RepositoryImpl
   ↑
UseCase
   ↑
Cubit
   ↑
UI (تعرض البيانات)

🎯 مثال عملي: fetchNotes()

🟢 1. UI

فتح الصفحة
↓
BlocProvider ينشئ Cubit
↓
fetchNotes()

🔵 2. Cubit

getNotesUseCase()

👉 يقول: “هات الملاحظات”

🟣 3. UseCase

repo.getNotes()

👉 ينفذ العملية

🟡 4. Repository

remote.getNotes()

🔴 5. DataSource

client.from('notes').select()

👉 جلب من Supabase

🔁 6. الرجوع

JSON → Model → Entity → Cubit → UI

🧠 تبسيط ذهني جداً

UI يطلب
↓
Cubit يدير
↓
UseCase ينفذ
↓
Repository يمرر
↓
DataSource يجلب
↓
Supabase يعطي

💡 أهم فكرة لازم تثبت عندك

كل طبقة ما تعرف اللي بعدها إلا مباشرة

❌ UI لا يعرف Supabase

❌ Cubit لا يعرف API

❌ UseCase لا يعرف JSON

✅ كل واحد له شغله فقط

🔥 مخطط مبسط جداً (للحفظ)

UI
 ↓
Cubit
 ↓
UseCase
 ↓
Repository
 ↓
DataSource
 ↓
API

---

🧠 جملة تحفظها

Flow goes down (request)
Data goes up (response)