From 722f92cb2fd7fe4468cc089e3f1cc8753e5c040e Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Mon, 25 May 2026 00:59:08 +0300
Subject: [PATCH] Deploy: 2026-05-25 00:59:08

---
 backend/public/index.html                     | 28 ++++++++++
 .../presentation/widgets/channels_view.dart   | 53 +++++++++++++++++++
 2 files changed, 81 insertions(+)

diff --git a/backend/public/index.html b/backend/public/index.html
index 42e9ffb..a6f63be 100644
--- a/backend/public/index.html
+++ b/backend/public/index.html
@@ -1150,6 +1150,34 @@
                                         <button class="modal-close" @click="showMetaConnectModal = false">&times;</button>
                                     </div>
                                     <div class="modal-body">
+                                        <!-- Instructions Section -->
+                                        <div style="background: rgba(255, 255, 255, 0.03); border: 1px solid var(--card-border); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; font-size: 0.8rem; line-height: 1.6; text-align: start;" :style="lang === 'ar' ? 'direction: rtl;' : ''">
+                                            <h4 style="margin-bottom: 0.5rem; color: var(--primary-accent); display: flex; align-items: center; gap: 0.25rem;" :style="lang === 'ar' ? 'flex-direction: row-reverse' : ''">
+                                                <span>ℹ️</span>
+                                                <span x-text="lang === 'ar' ? 'تعليمات الحصول على المعرف والرمز:' : 'How to get ID and Access Token:'"></span>
+                                            </h4>
+                                            
+                                            <!-- Messenger instructions -->
+                                            <div x-show="newMetaSession.channel_type === 'messenger'">
+                                                <ol style="margin-left: 1.25rem; padding-left: 0; margin-top: 0.25rem;" :style="lang === 'ar' ? 'margin-left: 0; margin-right: 1.25rem;' : ''">
+                                                    <li x-text="lang === 'ar' ? 'اذهب إلى developers.facebook.com وقم بإنشاء/تحديد تطبيقك.' : 'Go to developers.facebook.com and create/select your App.'"></li>
+                                                    <li x-text="lang === 'ar' ? 'أضف منتج Messenger للتطبيق.' : 'Add the Messenger product to your App.'"></li>
+                                                    <li x-text="lang === 'ar' ? 'من إعدادات Messenger API، قم بربط صفحتك وتوليد رمز الوصول (Token).' : 'Under Messenger API settings, link your Facebook Page and generate the Token.'"></li>
+                                                    <li x-text="lang === 'ar' ? 'انسخ معرّف الصفحة (Page ID) ورمز الوصول وضعهما في الحقول أدناه.' : 'Copy the Page ID and the generated Access Token into the fields below.'"></li>
+                                                </ol>
+                                            </div>
+                                            
+                                            <!-- Instagram instructions -->
+                                            <div x-show="newMetaSession.channel_type === 'instagram'">
+                                                <ol style="margin-left: 1.25rem; padding-left: 0; margin-top: 0.25rem;" :style="lang === 'ar' ? 'margin-left: 0; margin-right: 1.25rem;' : ''">
+                                                    <li x-text="lang === 'ar' ? 'تأكد من تحويل حساب إنستغرام لحساب أعمال (Business Account) وربطه بصفحة فيسبوك.' : 'Ensure your Instagram account is set as a Business/Professional account and linked to a Facebook Page.'"></li>
+                                                    <li x-text="lang === 'ar' ? 'اذهب إلى developers.facebook.com وأضف منتج Messenger للتطبيق.' : 'Go to developers.facebook.com and add the Messenger product to your App.'"></li>
+                                                    <li x-text="lang === 'ar' ? 'انسخ معرّف حساب إنستغرام للأعمال من إعدادات صفحة فيسبوك (الحسابات المرتبطة).' : 'Copy your Instagram Professional Account ID from your Facebook Page settings (Linked Accounts).'"></li>
+                                                    <li x-text="lang === 'ar' ? 'قم بتوليد رمز الوصول للصفحة المرتبطة واستخدمه في حقل الرمز أدناه.' : 'Generate the Access Token for the linked Page and use it in the Token field below.'"></li>
+                                                </ol>
+                                            </div>
+                                        </div>
+
                                         <div class="form-group">
                                             <label class="form-label" x-text="lang === 'ar' ? 'الاسم' : 'Name'"></label>
                                             <input type="text" x-model="newMetaSession.page_name" class="form-input" :placeholder="lang === 'ar' ? 'اسم الصفحة أو الحساب' : 'Page or Profile Name'">
diff --git a/mobile/lib/features/dashboard/presentation/widgets/channels_view.dart b/mobile/lib/features/dashboard/presentation/widgets/channels_view.dart
index 0fb3cec..31e8301 100644
--- a/mobile/lib/features/dashboard/presentation/widgets/channels_view.dart
+++ b/mobile/lib/features/dashboard/presentation/widgets/channels_view.dart
@@ -120,6 +120,49 @@ class _ChannelsViewState extends State<ChannelsView> with SingleTickerProviderSt
               child: Column(
                 mainAxisSize: MainAxisSize.min,
                 children: [
+                  Container(
+                    width: double.infinity,
+                    padding: const EdgeInsets.all(12),
+                    margin: const EdgeInsets.only(bottom: 16),
+                    decoration: BoxDecoration(
+                      color: Colors.white.withOpacity(0.03),
+                      borderRadius: BorderRadius.circular(8),
+                      border: Border.all(color: Colors.white10),
+                    ),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Row(
+                          children: [
+                            const Icon(Icons.info_outline, color: Colors.purpleAccent, size: 16),
+                            const SizedBox(width: 6),
+                            Text(
+                              type == 'messenger'
+                                  ? 'تعليمات ربط صفحة فيسبوك:'
+                                  : 'تعليمات ربط حساب إنستغرام:',
+                              style: const TextStyle(
+                                color: Colors.purpleAccent,
+                                fontSize: 13,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                          ],
+                        ),
+                        const SizedBox(height: 8),
+                        if (type == 'messenger') ...[
+                          _buildStep('1. اذهب إلى developers.facebook.com وأنشئ تطبيقاً.'),
+                          _buildStep('2. أضف منتج Messenger إلى لوحة تحكم تطبيقك.'),
+                          _buildStep('3. اربط صفحتك وولد رمز الوصول (Page Access Token).'),
+                          _buildStep('4. انسخ معرّف الصفحة والرمز وضعهما أدناه.'),
+                        ] else ...[
+                          _buildStep('1. حول حساب إنستغرام لحساب أعمال واربطه بصفحة فيسبوك.'),
+                          _buildStep('2. اذهب لـ developers.facebook.com وأضف Messenger.'),
+                          _buildStep('3. انسخ معرّف حساب الأعمال من إعدادات الصفحة المرتبطة.'),
+                          _buildStep('4. ولد رمز وصول الصفحة المرتبطة وضعه في الحقل أدناه.'),
+                        ],
+                      ],
+                    ),
+                  ),
                   TextFormField(
                     controller: pageNameController,
                     style: const TextStyle(color: Colors.white),
@@ -463,4 +506,14 @@ class _ChannelsViewState extends State<ChannelsView> with SingleTickerProviderSt
       child: Text(text, style: TextStyle(color: color, fontSize: 11, fontWeight: FontWeight.bold)),
     );
   }
+
+  Widget _buildStep(String text) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 2.0),
+      child: Text(
+        text,
+        style: const TextStyle(color: Colors.white70, fontSize: 11, height: 1.4),
+      ),
+    );
+  }
 }