sapphire-6

byMr Rm

شف عندي هاذا البرنامج ابغى تعمل لي مشروع كامل برنامج إدارة المكروتك بشكل عام إدارة اليوزرمانجر و الهوتسبوت بشكل كامل وابغى صفحة تسجيل الدخول في البرنامج تكون عنوان الايبي والبورت واسم المستخدم وكلمة المرور وابغى مربع تسجيل الدخول وابغى مربع اختبار الاتصال وزر حفظ البيانات وزر الراوتر المحفوظة وعند اضغط على زر الراوتر المحفوظة تضهر لي الراوترات المحفوظة وابغى تضيف حذف الراوتر او تعديل الراوتر وابغى زر الراوترات المحفوظة يكون منسدله افتهم لك وابغى البرنامج يتصل في المكروتك عبر إصدارات 6 و 7 افتهم لك ويكون مطور أكثر احترافيه افتهم تمام وارسل لي المشروع كامل في ملف مضغوط مشان احمله

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

Page 1 of 28

System Requirements Document for sapphire-6

1. Introduction

sapphire-6 هو برنامج سطح مكتب/ويب احترافي لإدارة أجهزة MikroTik RouterOS بشكل عام، مع إدارة كاملة لوحدة User Manager وخدمة Hotspot على الراوتر المتصل. البرنامج موجّه لمهندسي ومديري الشبكات العرب الذين يديرون شبكات WISP ومقاهي الإنترنت ومزودي خدمة الإنترنت الصغيرة، ويحتاجون إلى أداة واحدة تقرأ وتتحكم في الراوتر دون الرجوع إلى واجهة RouterOS الأصلية.

البرنامج يبدأ من صفحة Landing عامة تشرح وظيفته، ثم صفحة تسجيل الدخول التي تجمع بيانات الاتصال بالراوتر (عنوان IP، البورت، اسم المستخدم، كلمة المرور)، وتتيح اختبار الاتصال قبل الحفظ، وحفظ البيانات، وفتح قائمة الراوترات المحفوظة المنسدلة لاختيار راوتر أو تعديله أو حذفه. بعد نجاح الاتصال يصل المستخدم إلى صفحات الإدارة: Router Management، User Manager، Hotspot Users، Hotspot Profiles، Active Sessions.

البرنامج يدعم الاتصال بإصداري RouterOS 6 و RouterOS 7، ويُسلَّم كمشروع كامل في ملف مضغوط قابل للتحميل.

Page 2 of 28

2. System Overview

sapphire-6 هو تطبيق إدارة شبكة من طبقتين:

  • واجهة أمامية (Frontend): تطبيق ويب أحادي الصفحة (SPA) مبني بـ React، يعرض صفحة Landing العامة، وصفحة تسجيل الدخول، وصفحات الإدارة المحمية.
  • خلفية (Backend): خدمة FastAPI تتولى الاتصال الفعلي بالراوتر عبر بروتوكول MikroTik API، وتدعم إصداري RouterOS 6 و 7، وتخزين بيانات الراوترات المحفوظة.

الجهات الفاعلة البشرية (Personas):

  • مدير الشبكة (Network Administrator)
  • مشرف اليوزرمانجر (User Manager Operator)
  • مشرف الهوتسبوت (Hotspot Operator)

الجهات غير البشرية:

  • جهاز MikroTik RouterOS (نظام خارجي — مالك تنفيذ عمليات الراوتر)
  • خدمة FastAPI الخلفية (نظام داخلي — مالك تنفيذ الاتصال والتخزين)

السلوك المقبول الحالي:

  • الاتصال بالراوتر عبر RouterOS 6 و 7.
  • إدارة كاملة لليوزرمانجر (المستخدمون والبروفايلات).
  • إدارة كاملة للهوتسبوت (المستخدمون، البروفايلات، الجلسات النشطة).
  • إدارة قائمة الراوترات المحفوظة (إضافة، اختيار، تعديل، حذف).

الاستثناءات الضيقة:

  • لا يُطلب من البرنامج إدارة خدمات RouterOS الأخرى (Firewall، Routing، Queues، Interfaces) خارج نطاق User Manager و Hotspot.
  • لا يُطلب تكامل مع مزودي هوية خارجيين (OAuth، LDAP، Active Directory).
  • لا يُطلب تطبيق جوال أصلي (Native Mobile App).
Page 3 of 28

2a. Product Interpretation and Delivery Boundary

sapphire-6 يُسلَّم كتطبيق ويب كامل يعمل محلياً أو على خادم، ويتصل مباشرة بجهاز MikroTik عبر شبكة المستخدم. البرنامج لا يستضيف الراوتر ولا يدير الشبكة نيابةً عن المستخدم؛ هو أداة تحكم عن بُعد.

ملكية الوصول:

  • Landing و صفحة تسجيل الدخول متاحتان دون تسجيل دخول مسبق في البرنامج، لأن بيانات الدخول هي بيانات الراوتر نفسه وليست حساباً في البرنامج.
  • Router Management، User Manager، Hotspot Users، Hotspot Profiles، Active Sessions محمية وتتطلب جلسة اتصال ناجحة براوتر محدد.
  • لا يوجد نظام حسابات مستخدمين منفصل في البرنامج؛ الهوية هي هوية الراوتر المتصل، والجلسة مرتبطة بالراوتر المختار.

حدود الحالي والمستقبلي:

  • الحالي: الاتصال بـ RouterOS 6/7، إدارة User Manager، إدارة Hotspot، إدارة الراوترات المحفوظة، تسليم ملف مضغوط.
  • المستقبلي: غير محدد في المصدر؛ لا تُضاف قدرات مستقبلية إلى النطاق الحالي.

2b. Source Content Inventory

لا يوجد في توجيهات المرجع أي content_source صريح؛ لذلك لا يُدرج هذا القسم.

2c. Page Content and Component Coverage

Page 4 of 28

Landing

  • المعلومات والحالة: عنوان البرنامج sapphire-6 بخط Archivo 700 بحجم 88px على يسار الشاشة، وخط برتقالي بسماكة 4px يمتد تحت العنوان، وسطر واحد بخط Archivo 17px يشرح أن البرنامج يدير MikroTik RouterOS 6 و 7. خلف العمود الأيسر، رسم بياني مروري مسطّر بشفافية 12% يمتد خارج الحافة اليسرى.
  • الإجراءات الأساسية: زر الانتقال إلى صفحة تسجيل الدخول.
  • الإجراءات المساندة: لا يوجد.
  • كيانات المجال: لا يوجد (صفحة تعريفية).
  • مسؤوليات المكوّنات:
    • HeroPanel: يعرض الشعار والوصف والخط البرتقالي.
    • TrafficChartBackdrop: رسم بياني مسطّر بشفافية 12%.
    • EnterConsoleButton: زر الانتقال إلى صفحة تسجيل الدخول.
  • الحالات: تحميل (لا يوجد)، فارغ (لا يوجد)، نجاح (عرض الصفحة)، خطأ (لا يوجد)، استرجاع (لا يوجد).
Page 5 of 28

صفحة تسجيل الدخول

  • المعلومات والحالة: نموذج اتصال بالراوتر يحتوي على أربعة حقول بأسلوب label/value مسطّر:
    • IP ADDRESS (عنوان الـ IP)
    • PORT (البورت)
    • USERNAME (اسم المستخدم)
    • PASSWORD (كلمة المرور)
    • مؤشر حالة الاتصال: نقطة LED مسطحة 10px تتدرج idle → amber → orange.
  • الإجراءات الأساسية:
    • مربع/زر تسجيل الدخول (CONNECT): مفتاح rocker فيزيائي مع خط قبضة محزز.
    • مربع/زر اختبار الاتصال (TEST CONNECTION): زر منفصل بجانب مفتاح CONNECT.
    • زر حفظ البيانات (SAVE DATA): يحفظ بيانات الراوتر الحالية في قائمة الراوترات المحفوظة.
    • زر الراوترات المحفوظة (SAVED ROUTERS): زر منسدل يفتح جدولاً مسطراً بالراوترات المحفوظة.
  • الإجراءات المساندة: لا يوجد.
  • كيانات المجال: Router (name, host, port, username, password, version, status).
  • مسؤوليات المكوّنات:
    • ConnectionForm: الحقول الأربعة بأسلوب label/value.
    • ConnectRocker: مفتاح rocker لتسجيل الدخول.
    • TestConnectionButton: زر اختبار الاتصال.
    • SaveDataButton: زر حفظ البيانات.
    • SavedRoutersDropdown: زر منسدل يفتح جدول الراوترات المحفوظة بأعمدة NAME / HOST / PORT / VERSION / STATUS مع إجراءات نصية Edit و Delete في نهاية كل صف.
    • ConnectionStatusDot: نقطة LED مسطحة.
  • الحالات:
    • تحميل: تعطيل الأزرار أثناء اختبار الاتصال أو تسجيل الدخول.
    • فارغ: قائمة الراوترات المحفوظة فارغة → رسالة "لا توجد راوترات محفوظة".
    • نجاح: نقطة LED برتقالية + الانتقال إلى Router Management.
    • خطأ: نقطة LED حمراء + رسالة خطأ (فشل الاتصال، بيانات خاطئة، إصدار غير مدعوم).
    • استرجاع: إعادة المحاولة بعد تصحيح البيانات.
Page 6 of 28

Router Management

  • المعلومات والحالة: جدول مسطر بالراوترات المحفوظة بأعمدة NAME / HOST / PORT / VERSION / STATUS، مع إجراءات نصية Edit و Delete في نهاية كل صف.
  • الإجراءات الأساسية:
    • اختيار راوتر للاتصال.
    • تعديل بيانات راوتر محفوظ.
    • حذف راوتر محفوظ.
  • الإجراءات المساندة: إضافة راوتر جديد (بالانتقال إلى صفحة تسجيل الدخول).
  • كيانات المجال: Router.
  • مسؤوليات المكوّنات:
    • RouterTable: جدول الراوترات المحفوظة.
    • EditRouterAction: إجراء نصي لتعديل الراوتر.
    • DeleteRouterAction: إجراء نصي لحذف الراوتر.
    • ConnectRouterAction: إجراء نصي للاتصال بالراوتر المختار.
  • الحالات:
    • تحميل: تعطيل الجدول أثناء جلب البيانات.
    • فارغ: رسالة "لا توجد راوترات محفوظة".
    • نجاح: تحديث الجدول بعد التعديل أو الحذف.
    • خطأ: رسالة خطأ عند فشل الحذف أو التعديل.
    • استرجاع: إعادة المحاولة.
Page 7 of 28

User Manager

  • المعلومات والحالة: جدول مسطر بمستخدمي اليوزرمانجر على الراوتر المتصل، مع أعمدة USERNAME / PROFILE / LIMIT / STATUS.
  • الإجراءات الأساسية:
    • إنشاء مستخدم يوزرمانجر جديد.
    • تعديل مستخدم موجود.
    • حذف مستخدم.
    • تعيين بروفايل وحدود للمستخدم.
  • الإجراءات المساندة: لا يوجد.
  • كيانات المجال: UserManagerUser (username, password, profile, limit, status).
  • مسؤوليات المكوّنات:
    • UserManagerTable: جدول المستخدمين.
    • CreateUserAction: إجراء إنشاء مستخدم.
    • EditUserAction: إجراء تعديل مستخدم.
    • DeleteUserAction: إجراء حذف مستخدم.
  • الحالات:
    • تحميل: تعطيل الجدول أثناء جلب البيانات.
    • فارغ: رسالة "لا يوجد مستخدمون".
    • نجاح: تحديث الجدول بعد الإنشاء أو التعديل أو الحذف.
    • خطأ: رسالة خطأ عند فشل العملية.
    • استرجاع: إعادة المحاولة.
Page 8 of 28

Hotspot Users

  • المعلومات والحالة: جدول مسطر بمستخدمي الهوتسبوت على الراوتر المتصل، مع أعمدة USERNAME / PROFILE / UPTIME / STATUS.
  • الإجراءات الأساسية:
    • إنشاء مستخدم هوتسبوت جديد.
    • تعديل مستخدم موجود.
    • حذف مستخدم.
    • تعيين بروفايل للمستخدم.
  • الإجراءات المساندة: لا يوجد.
  • كيانات المجال: HotspotUser (username, password, profile, uptime, status).
  • مسؤوليات المكوّنات:
    • HotspotUsersTable: جدول مستخدمي الهوتسبوت.
    • CreateHotspotUserAction: إجراء إنشاء مستخدم.
    • EditHotspotUserAction: إجراء تعديل مستخدم.
    • DeleteHotspotUserAction: إجراء حذف مستخدم.
  • الحالات:
    • تحميل: تعطيل الجدول أثناء جلب البيانات.
    • فارغ: رسالة "لا يوجد مستخدمون".
    • نجاح: تحديث الجدول بعد الإنشاء أو التعديل أو الحذف.
    • خطأ: رسالة خطأ عند فشل العملية.
    • استرجاع: إعادة المحاولة.
Page 9 of 28

Hotspot Profiles

  • المعلومات والحالة: جدول مسطر ببروفايلات الهوتسبوت على الراوتر المتصل، مع أعمدة NAME / RATE LIMIT / SESSION TIMEOUT / STATUS.
  • الإجراءات الأساسية:
    • إنشاء بروفايل هوتسبوت جديد.
    • تعديل بروفايل موجود.
    • حذف بروفايل.
  • الإجراءات المساندة: لا يوجد.
  • كيانات المجال: HotspotProfile (name, rateLimit, sessionTimeout, status).
  • مسؤوليات المكوّنات:
    • HotspotProfilesTable: جدول البروفايلات.
    • CreateHotspotProfileAction: إجراء إنشاء بروفايل.
    • EditHotspotProfileAction: إجراء تعديل بروفايل.
    • DeleteHotspotProfileAction: إجراء حذف بروفايل.
  • الحالات:
    • تحميل: تعطيل الجدول أثناء جلب البيانات.
    • فارغ: رسالة "لا توجد بروفايلات".
    • نجاح: تحديث الجدول بعد الإنشاء أو التعديل أو الحذف.
    • خطأ: رسالة خطأ عند فشل العملية.
    • استرجاع: إعادة المحاولة.
Page 10 of 28

Active Sessions

  • المعلومات والحالة: جدول مسطر بالجلسات النشطة على الراوتر المتصل، مع أعمدة USERNAME / IP ADDRESS / UPTIME / BYTES IN / BYTES OUT.
  • الإجراءات الأساسية:
    • عرض الجلسات النشطة.
    • إنهاء جلسة نشطة.
  • الإجراءات المساندة: لا يوجد.
  • كيانات المجال: ActiveSession (username, ipAddress, uptime, bytesIn, bytesOut).
  • مسؤوليات المكوّنات:
    • ActiveSessionsTable: جدول الجلسات النشطة.
    • TerminateSessionAction: إجراء إنهاء جلسة.
    • LiveTrafficSparkline: رسم بياني مسطر بسماكة 1px يتحدث بمعدل 1Hz.
  • الحالات:
    • تحميل: تعطيل الجدول أثناء جلب البيانات.
    • فارغ: رسالة "لا توجد جلسات نشطة".
    • نجاح: تحديث الجدول تلقائياً.
    • خطأ: رسالة خطأ عند فشل جلب البيانات.
    • استرجاع: إعادة المحاولة.

3. Functional Requirements

Page 11 of 28

FR-01: الاتصال بالراوتر عبر RouterOS 6 و 7

As a مدير الشبكة I should إدخال عنوان IP والبورت واسم المستخدم وكلمة المرور في صفحة تسجيل الدخول والاتصال بالراوتر so that أتمكن من إدارة User Manager و Hotspot على الراوتر.

  • Provenance: explicit
  • Actor: مدير الشبكة
  • Trigger: إدخال بيانات الاتصال والضغط على مفتاح CONNECT
  • Observable result: نقطة LED تتحول من idle إلى amber إلى orange، والانتقال إلى Router Management
  • Access state: صفحة تسجيل الدخول متاحة دون تسجيل دخول مسبق
  • Material failure/recovery: فشل الاتصال → نقطة LED حمراء + رسالة خطأ + إمكانية إعادة المحاولة
  • Continuation: الانتقال إلى Router Management بعد نجاح الاتصال
  • Acceptance: الاتصال ينجح مع RouterOS 6 و RouterOS 7

FR-02: اختبار الاتصال قبل الحفظ

As a مدير الشبكة I should الضغط على زر TEST CONNECTION للتحقق من صحة بيانات الاتصال so that أتأكد من صحة البيانات قبل حفظها.

  • Provenance: explicit
  • Actor: مدير الشبكة
  • Trigger: الضغط على زر TEST CONNECTION
  • Observable result: رسالة نجاح أو فشل اختبار الاتصال
  • Access state: صفحة تسجيل الدخول متاحة دون تسجيل دخول مسبق
  • Material failure/recovery: فشل الاختبار → رسالة خطأ + إمكانية تصحيح البيانات وإعادة الاختبار
  • Continuation: حفظ البيانات بعد نجاح الاختبار
  • Acceptance: الاختبار يعيد نتيجة صحيحة دون حفظ البيانات
Page 12 of 28

FR-03: حفظ بيانات الراوتر

As a مدير الشبكة I should الضغط على زر SAVE DATA لحفظ بيانات الراوتر so that أتمكن من الاتصال به لاحقاً دون إعادة إدخال البيانات.

  • Provenance: explicit
  • Actor: مدير الشبكة
  • Trigger: الضغط على زر SAVE DATA
  • Observable result: إضافة الراوتر إلى قائمة الراوترات المحفوظة
  • Access state: صفحة تسجيل الدخول متاحة دون تسجيل دخول مسبق
  • Material failure/recovery: فشل الحفظ → رسالة خطأ + إمكانية إعادة المحاولة
  • Continuation: ظهور الراوتر في قائمة الراوترات المحفوظة
  • Acceptance: الراوتر يظهر في القائمة بعد الحفظ

FR-04: عرض قائمة الراوترات المحفوظة المنسدلة

As a مدير الشبكة I should الضغط على زر SAVED ROUTERS لفتح قائمة منسدلة بالراوترات المحفوظة so that أختار راوتراً للاتصال به.

  • Provenance: explicit
  • Actor: مدير الشبكة
  • Trigger: الضغط على زر SAVED ROUTERS
  • Observable result: فتح جدول مسطر بالراوترات المحفوظة بأعمدة NAME / HOST / PORT / VERSION / STATUS
  • Access state: صفحة تسجيل الدخول متاحة دون تسجيل دخول مسبق
  • Material failure/recovery: لا توجد راوترات محفوظة → رسالة "لا توجد راوترات محفوظة"
  • Continuation: اختيار راوتر للاتصال أو تعديله أو حذفه
  • Acceptance: القائمة تظهر كقائمة منسدلة وليس صفحة منفصلة
Page 13 of 28

FR-05: تعديل راوتر محفوظ

As a مدير الشبكة I should الضغط على إجراء EDIT في صف الراوتر لتعديل بياناته so that أصحح بيانات الاتصال عند تغيرها.

  • Provenance: explicit
  • Actor: مدير الشبكة
  • Trigger: الضغط على إجراء EDIT في صف الراوتر
  • Observable result: فتح نموذج تعديل بيانات الراوتر
  • Access state: صفحة تسجيل الدخول أو Router Management
  • Material failure/recovery: فشل التعديل → رسالة خطأ + إمكانية إعادة المحاولة
  • Continuation: تحديث بيانات الراوتر في القائمة
  • Acceptance: البيانات المحدثة تظهر في القائمة

FR-06: حذف راوتر محفوظ

As a مدير الشبكة I should الضغط على إجراء DELETE في صف الراوتر لحذفه so that أزيل الراوترات التي لم أعد أستخدمها.

  • Provenance: explicit
  • Actor: مدير الشبكة
  • Trigger: الضغط على إجراء DELETE في صف الراوتر
  • Observable result: حذف الراوتر من قائمة الراوترات المحفوظة
  • Access state: صفحة تسجيل الدخول أو Router Management
  • Material failure/recovery: فشل الحذف → رسالة خطأ + إمكانية إعادة المحاولة
  • Continuation: تحديث القائمة بعد الحذف
  • Acceptance: الراوتر يختفي من القائمة بعد الحذف
Page 14 of 28

FR-07: إدارة مستخدمي اليوزرمانجر

As a مشرف اليوزرمانجر I should إنشاء وتعديل وحذف مستخدمي اليوزرمانجر وتعيين بروفايلاتهم وحدودهم so that أدير اليوزرمانجر بالكامل من داخل البرنامج.

  • Provenance: explicit
  • Actor: مشرف اليوزرمانجر
  • Trigger: الدخول إلى صفحة User Manager
  • Observable result: جدول محدث بمستخدمي اليوزرمانجر
  • Access state: يتطلب جلسة اتصال ناجحة براوتر
  • Material failure/recovery: فشل العملية → رسالة خطأ + إمكانية إعادة المحاولة
  • Continuation: تحديث الجدول بعد كل عملية
  • Acceptance: العمليات تنجح على الراوتر المتصل

FR-08: إدارة مستخدمي الهوتسبوت

As a مشرف الهوتسبوت I should إنشاء وتعديل وحذف مستخدمي الهوتسبوت وتعيين بروفايلاتهم so that أدير خدمة الهوتسبوت بالكامل من داخل البرنامج.

  • Provenance: explicit
  • Actor: مشرف الهوتسبوت
  • Trigger: الدخول إلى صفحة Hotspot Users
  • Observable result: جدول محدث بمستخدمي الهوتسبوت
  • Access state: يتطلب جلسة اتصال ناجحة براوتر
  • Material failure/recovery: فشل العملية → رسالة خطأ + إمكانية إعادة المحاولة
  • Continuation: تحديث الجدول بعد كل عملية
  • Acceptance: العمليات تنجح على الراوتر المتصل
Page 15 of 28

FR-09: إدارة بروفايلات الهوتسبوت

As a مشرف الهوتسبوت I should إنشاء وتعديل وحذف بروفايلات الهوتسبوت so that أضبط حدود السرعة ومدة الجلسة لمستخدمي الهوتسبوت.

  • Provenance: explicit
  • Actor: مشرف الهوتسبوت
  • Trigger: الدخول إلى صفحة Hotspot Profiles
  • Observable result: جدول محدث ببروفايلات الهوتسبوت
  • Access state: يتطلب جلسة اتصال ناجحة براوتر
  • Material failure/recovery: فشل العملية → رسالة خطأ + إمكانية إعادة المحاولة
  • Continuation: تحديث الجدول بعد كل عملية
  • Acceptance: العمليات تنجح على الراوتر المتصل

FR-10: متابعة الجلسات النشطة

As a مشرف الهوتسبوت I should عرض الجلسات النشطة على الراوتر المتصل وإنهاء أي جلسة so that أتابع استخدام الهوتسبوت وأتحكم فيه.

  • Provenance: explicit
  • Actor: مشرف الهوتسبوت
  • Trigger: الدخول إلى صفحة Active Sessions
  • Observable result: جدول محدث بالجلسات النشطة مع عدادات البايتات
  • Access state: يتطلب جلسة اتصال ناجحة براوتر
  • Material failure/recovery: فشل جلب البيانات → رسالة خطأ + إمكانية إعادة المحاولة
  • Continuation: تحديث الجدول تلقائياً
  • Acceptance: الجلسات تظهر وتُحدَّث بشكل صحيح
Page 16 of 28

FR-11: تسليم المشروع كملف مضغوط

As a مدير الشبكة I should تحميل المشروع كاملاً في ملف مضغوط so that أتمكن من تشغيله على جهازي.

  • Provenance: explicit
  • Actor: مدير الشبكة
  • Trigger: تحميل الملف المضغوط
  • Observable result: ملف مضغوط يحتوي على المشروع كاملاً
  • Access state: لا يوجد
  • Material failure/recovery: لا يوجد
  • Continuation: فك الضغط وتشغيل المشروع
  • Acceptance: الملف المضغوط يحتوي على جميع ملفات المشروع

4. User Personas

Page 17 of 28

مدير الشبكة (Network Administrator)

سياق المنتج: مهندس شبكات مسؤول عن إعداد وإدارة أجهزة MikroTik في شبكة WISP أو مقهى إنترنت. يعمل غالباً في غرفة تحكم خافتة الإضاءة ويحتاج إلى قراءة عناوين IP والبورتات وعدّادات البايتات بسرعة.

الهدف الأساسي: الاتصال بالراوتر عبر RouterOS 6 أو 7 وإدارة User Manager و Hotspot من داخل البرنامج.

المسؤوليات المقبولة:

  • إدخال بيانات الاتصال بالراوتر (IP، Port، Username، Password).
  • اختبار الاتصال قبل الحفظ.
  • حفظ بيانات الراوتر.
  • فتح قائمة الراوترات المحفوظة المنسدلة.
  • تعديل أو حذف راوتر محفوظ.
  • اختيار راوتر للاتصال به.

المدخلات والقرارات: عنوان IP، البورت، اسم المستخدم، كلمة المرور، قرار الحفظ أو التعديل أو الحذف.

التفاعل مع المشاركين الآخرين: يسلّم جلسة الاتصال الناجحة إلى مشرف اليوزرمانجر ومشرف الهوتسبوت للعمل عليها.

النجاح الملحوظ: نقطة LED برتقالية تشير إلى اتصال ناجح، وظهور الراوتر في قائمة الراوترات المحفوظة.

Page 18 of 28

مشرف اليوزرمانجر (User Manager Operator)

سياق المنتج: فني مسؤول عن إدارة مستخدمي اليوزرمانجر على الراوتر المتصل، ويعمل بعد أن ينجح مدير الشبكة في الاتصال.

الهدف الأساسي: إدارة كاملة لليوزرمانجر من داخل البرنامج دون الحاجة إلى واجهة الراوتر.

المسؤوليات المقبولة:

  • إنشاء مستخدم يوزرمانجر جديد.
  • تعديل مستخدم موجود.
  • حذف مستخدم.
  • تعيين بروفايل وحدود للمستخدم.
  • متابعة حالة المستخدمين.

المدخلات والقرارات: اسم المستخدم، كلمة المرور، البروفايل، الحدود، قرار الإنشاء أو التعديل أو الحذف.

التفاعل مع المشاركين الآخرين: يعتمد على جلسة الاتصال التي أنشأها مدير الشبكة.

النجاح الملحوظ: جدول محدث بمستخدمي اليوزرمانجر على الراوتر المتصل.

Page 19 of 28

مشرف الهوتسبوت (Hotspot Operator)

سياق المنتج: فني مسؤول عن تشغيل ومتابعة خدمة الهوتسبوت على الراوتر المتصل، ويعمل بعد أن ينجح مدير الشبكة في الاتصال.

الهدف الأساسي: تشغيل ومتابعة خدمة الهوتسبوت بالكامل من داخل البرنامج.

المسؤوليات المقبولة:

  • إنشاء وتعديل وحذف مستخدمي الهوتسبوت.
  • إنشاء وتعديل وحذف بروفايلات الهوتسبوت.
  • متابعة الجلسات النشطة.
  • إنهاء جلسة نشطة.

المدخلات والقرارات: اسم المستخدم، البروفايل، حدود السرعة، مدة الجلسة، قرار إنهاء الجلسة.

التفاعل مع المشاركين الآخرين: يعتمد على جلسة الاتصال التي أنشأها مدير الشبكة.

النجاح الملحوظ: جدول محدث بالجلسات النشطة وعدّادات البايتات.

5. Core User Flows

Page 20 of 28

Flow 1: الاتصال بالراوتر وحفظ بياناته (مدير الشبكة)

  1. يفتح مدير الشبكة صفحة Landing ويقرأ وصف البرنامج.
  2. يضغط على زر الانتقال إلى صفحة تسجيل الدخول.
  3. يُدخل عنوان IP والبورت واسم المستخدم وكلمة المرور في الحقول الأربعة.
  4. يضغط على زر TEST CONNECTION للتحقق من صحة البيانات.
  5. النتيجة الملحوظة: رسالة نجاح اختبار الاتصال.
  6. يضغط على مفتاح CONNECT.
  7. النتيجة الملحوظة: نقطة LED تتحول من idle إلى amber إلى orange، والانتقال إلى Router Management.
  8. الاسترجاع عند الفشل: إذا فشل الاتصال، تتحول نقطة LED إلى حمراء وتظهر رسالة خطأ، ويصحح مدير الشبكة البيانات ويعيد المحاولة.
  9. الاستمرار: يضغط على زر SAVE DATA لحفظ بيانات الراوتر في قائمة الراوترات المحفوظة.

Flow 2: عرض الراوترات المحفوظة وتعديلها أو حذفها (مدير الشبكة)

  1. يفتح مدير الشبكة صفحة تسجيل الدخول.
  2. يضغط على زر SAVED ROUTERS.
  3. النتيجة الملحوظة: تفتح قائمة منسدلة بجدول مسطر بالراوترات المحفوظة بأعمدة NAME / HOST / PORT / VERSION / STATUS.
  4. الاسترجاع عند الفشل: إذا كانت القائمة فارغة، تظهر رسالة "لا توجد راوترات محفوظة".
  5. يضغط على إجراء EDIT في صف راوتر لتعديل بياناته.
  6. النتيجة الملحوظة: فتح نموذج تعديل البيانات، وبعد الحفظ تظهر البيانات المحدثة في القائمة.
  7. يضغط على إجراء DELETE في صف راوتر لحذفه.
  8. النتيجة الملحوظة: يختفي الراوتر من القائمة.
  9. الاستمرار: يختار راوتراً من القائمة للاتصال به.
Page 21 of 28

Flow 3: إدارة مستخدمي اليوزرمانجر (مشرف اليوزرمانجر)

  1. يفتح مشرف اليوزرمانجر User Manager بعد نجاح اتصال مدير الشبكة.
  2. النتيجة الملحوظة: جدول مسطر بمستخدمي اليوزرمانجر بأعمدة USERNAME / PROFILE / LIMIT / STATUS.
  3. يضغط على إجراء Create User لإنشاء مستخدم جديد.
  4. يُدخل اسم المستخدم وكلمة المرور ويختار البروفايل والحدود.
  5. النتيجة الملحوظة: يظهر المستخدم الجديد في الجدول.
  6. يضغط على إجراء Edit في صف مستخدم لتعديل بياناته.
  7. النتيجة الملحوظة: تحديث بيانات المستخدم في الجدول.
  8. يضغط على إجراء Delete في صف مستخدم لحذفه.
  9. النتيجة الملحوظة: يختفي المستخدم من الجدول.
  10. الاسترجاع عند الفشل: إذا فشلت العملية، تظهر رسالة خطأ ويمكن إعادة المحاولة.

Flow 4: إدارة مستخدمي الهوتسبوت (مشرف الهوتسبوت)

  1. يفتح مشرف الهوتسبوت Hotspot Users بعد نجاح اتصال مدير الشبكة.
  2. النتيجة الملحوظة: جدول مسطر بمستخدمي الهوتسبوت بأعمدة USERNAME / PROFILE / UPTIME / STATUS.
  3. يضغط على إجراء Create User لإنشاء مستخدم جديد.
  4. يُدخل اسم المستخدم وكلمة المرور ويختار البروفايل.
  5. النتيجة الملحوظة: يظهر المستخدم الجديد في الجدول.
  6. يضغط على إجراء Edit في صف مستخدم لتعديل بياناته.
  7. النتيجة الملحوظة: تحديث بيانات المستخدم في الجدول.
  8. يضغط على إجراء Delete في صف مستخدم لحذفه.
  9. النتيجة الملحوظة: يختفي المستخدم من الجدول.
  10. الاسترجاع عند الفشل: إذا فشلت العملية، تظهر رسالة خطأ ويمكن إعادة المحاولة.
Page 22 of 28

Flow 5: إدارة بروفايلات الهوتسبوت (مشرف الهوتسبوت)

  1. يفتح مشرف الهوتسبوت Hotspot Profiles بعد نجاح اتصال مدير الشبكة.
  2. النتيجة الملحوظة: جدول مسطر ببروفايلات الهوتسبوت بأعمدة NAME / RATE LIMIT / SESSION TIMEOUT / STATUS.
  3. يضغط على إجراء Create Profile لإنشاء بروفايل جديد.
  4. يُدخل اسم البروفايل وحدود السرعة ومدة الجلسة.
  5. النتيجة الملحوظة: يظهر البروفايل الجديد في الجدول.
  6. يضغط على إجراء Edit في صف بروفايل لتعديل بياناته.
  7. النتيجة الملحوظة: تحديث بيانات البروفايل في الجدول.
  8. يضغط على إجراء Delete في صف بروفايل لحذفه.
  9. النتيجة الملحوظة: يختفي البروفايل من الجدول.
  10. الاسترجاع عند الفشل: إذا فشلت العملية، تظهر رسالة خطأ ويمكن إعادة المحاولة.

Flow 6: متابعة الجلسات النشطة (مشرف الهوتسبوت)

  1. يفتح مشرف الهوتسبوت Active Sessions بعد نجاح اتصال مدير الشبكة.
  2. النتيجة الملحوظة: جدول مسطر بالجلسات النشطة بأعمدة USERNAME / IP ADDRESS / UPTIME / BYTES IN / BYTES OUT، مع رسم بياني مسطر بسماكة 1px يتحدث بمعدل 1Hz.
  3. يضغط على إجراء Terminate في صف جلسة لإنهائها.
  4. النتيجة الملحوظة: تختفي الجلسة من الجدول.
  5. الاسترجاع عند الفشل: إذا فشل جلب البيانات، تظهر رسالة خطأ ويمكن إعادة المحاولة.
  6. الاستمرار: يتحدث الجدول تلقائياً.

6. Visuals Colors and Theme

المصدر الإبداعي: Dieter Rams — "Less, but better" — لوحة تحكم بلون برتقالي إشاري لـ RouterOS.

Page 23 of 28

الألوان (الوضع الفاتح)

الدورالقيمةالاستخدام
Background#EDEAE4أرضية الصفحة (ورق دافئ)
Surface#F7F5F1اللوحات والجداول
Text#1A1A18النصوص الأساسية
Primary#232320شريط الإجراءات الأساسي
Accent#E8590Cنقطة الاتصال، الخط النشط، حلقة التركيز، زر Connect، خط الرسم البياني
Muted#8A857Cالتسميات والوحدات والحالات المعطلة
Connected#E8590Cحالة الاتصال الناجح
Connecting#B8A03Aحالة الاتصال الجاري
Failed#A32020حالة الفشل
Idle#8A857Cحالة الخمول

قواعد: لا تدرجات لونية، كل لون تعبئة مسطحة. لا أزرق أو نيلي أو بنفسجي.

الخطوط

  • العناوين: Archivo بأوزان 500/600/700، تباعد ضيق (-0.02em)، حالة الجملة، محاذاة يسار.
  • التسميات: Archivo 600 بحجم 11px، تباعد 0.14em، أحرف كبيرة (IP ADDRESS، PORT، USERNAME، PASSWORD).
  • الأرقام: Archivo بأرقام جدولية (tabular-figures) لعناوين IP والبورتات وعدّادات البايتات.
  • النصوص: Archivo.
  • المقياس: 1.25 modular على شبكة 4/8pt: display 44px موبايل → 88px سطح مكتب (clamp)، section head 28→40px، panel title 20→24px، body 16→17px، label 11px caps، data 15px tabular.
  • ارتفاع السطر: 1.06 للعناوين، 1.55 للنصوص.
Page 24 of 28

الشكل

  • مستطيلات بحواف دائرية 8px، حدود 1px بلون #C9C4BA.
  • لا حبوب (pills)، لا فقاعات، لا ظلال ناعمة.
  • العمق من حد 1px + إزاحة 2px من السطح الأغمق خلف اللوحة.
  • مفتاح rocker فيزيائي مع مسار مرئي وخط قبضة محزز.
  • نقطة إشارة مسطحة 10px، لا توهج.
  • الحواف الصلبة على لوحة التحكم وصفوف قائمة الراوترات؛ المنحنيات الوحيدة هي حواف 8px وقوس المقياس.

التخطيط

  • شبكة 12 عموداً مرئية مع شريط أدوات جانبي أيسر (72px مطوي / 240px موسع) يحتوي على اختيار الراوتر وحالة الاتصال وتبديل الأقسام: Overview، Router Management، User Manager، Hotspot Users، Hotspot Profiles.
  • كل شاشة مبنية من أزواج label/value محاذاة: التسمية بأحرف كبيرة على اليسار، القيمة بأرقام جدولية على اليمين، مفصولة بخط رفيع.
  • زر الراوترات المحفوظة قائمة منسدلة تحت العمود الأيمن من نموذج تسجيل الدخول، تفتح جدولاً مسطراً بأعمدة NAME / HOST / PORT / VERSION / STATUS مع إجراءات نصية Edit و Delete في نهاية كل صف.
  • كثيف لكن منظم — 24px gutters عند 1280px، ينهار إلى عمود واحد مكدس عند 375px مع تحول الشريط الجانبي إلى شريط تبويب سفلي.
Page 25 of 28

7. Signature Design Concept

الخط البرتقالي الإشاري (The Signal Line):

خط برتقالي بسماكة 4px يمتد بعرض الشاشة الكامل تحت شعار sapphire-6 في صفحة Landing، ويعود كخط تبويب نشط في الشريط الجانبي، وكحد علوي للوحة التحكم في حالة الاتصال. هذا الخط هو الإشارة البصرية الوحيدة المتكررة في المنتج، ويربط بين صفحة الدخول وصفحات الإدارة.

لوحة الأدوات المنقسمة (Split Instrument Panel):

الشاشة الأولى ليست بطاقة مركزية، بل لوحة أدوات منقسمة:

  • العمود الأيسر (7 أعمدة): شعار sapphire-6 بخط Archivo 700 بحجم 88px محاذى يساراً على الأرضية الدافئة، مع خط برتقالي 4px تحته، وسطر واحد بخط Archivo 17px يشرح أن البرنامج يدير MikroTik RouterOS 6 و 7. خلف العمود، رسم بياني مروري مسطر بشفافية 12% يمتد خارج الحافة اليسرى.
  • العمود الأيمن (5 أعمدة): نموذج الاتصال نفسه على لوحة #F7F5F1 بحد 1px يمتد إلى حافة الشاشة اليمنى — حقول IP ADDRESS و PORT و USERNAME و PASSWORD كصفوف label/value مسطرة، مع مفتاح rocker لـ CONNECT، وزر TEST CONNECTION منفصل بجانبه، وزر SAVE DATA، وزر SAVED ROUTERS المنسدل مثبت في أسفل اللوحة.

لا شيء مركزي، لا شيء عائم، لا فقاعة تدرج.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction)

Motion Tempo: restrained

Hero Dimensionality: flat

Landing Hero Motion Brief

  • الموضوع البؤري: شعار sapphire-6 بخط Archivo 700 بحجم 88px مع الخط البرتقالي 4px تحته، والرسم البياني المروري المسطر بشفافية 12% خلف العمود الأيسر.
  • أطروحة الإدخال → التحويل → النتيجة: إدخال بيانات الاتصال في العمود الأيمن → تحويل نقطة LED من idle إلى amber إلى orange → الانتقال إلى Router Management.
  • مفردات الحركة: تغييرات حالة خطية 120ms، لا مسرّعات. نقطة الاتصال تتدرج في إطارات منفصلة مثل LED. عدّادات البايتات تتدحرج بأرقام متقطعة. صفوف الراوترات المحفوظة تتبدل عند التمرير بخط 1px، لا رفع أو تكبير. الحركة المستمرة الوحيدة هي الرسم البياني المروري الحي، الذي يرسم خطاً مسطراً 1px من اليسار إلى اليمين بمعدل 1Hz ثابت — مسجل رسم بياني، ليس رسماً متحركاً.
  • الإطار الأول المركب: العمود الأيسر بالشعار والخط البرتقالي والرسم البياني الخلفي، والعمود الأيمن بنموذج الاتصال الكامل.
  • حالة تقليل الحركة: تتوقف الحركة المستمرة للرسم البياني المروري، وتظهر القيم كأرقام ثابتة.
Page 26 of 28

9. Non-Functional Requirements

NFR-01: دعم إصداري RouterOS 6 و 7

  • Provenance: explicit
  • الوصف: يجب أن يدعم الاتصال بالميكروتك إصداري RouterOS 6 و 7.
  • المبرر: قيد صريح في متطلبات المستخدم.

NFR-02: تسليم المشروع كملف مضغوط

  • Provenance: explicit
  • الوصف: يجب تسليم المشروع كاملاً في ملف مضغوط ليقوم المستخدم بتحميله.
  • المبرر: قيد صريح في متطلبات المستخدم.

NFR-03: مستوى احترافي للتطوير

  • Provenance: explicit
  • الوصف: يجب أن يكون البرنامج مطوّراً بمستوى أكثر احترافية.
  • المبرر: قيد صريح في متطلبات المستخدم.

NFR-04: قابلية القراءة في كل المقاسات

  • Provenance: required_inference
  • الوصف: تبقى النصوص والعناصر كاملة داخل الشاشة عند 375px و 768px و 1280px.
  • المبرر: مطلوب لضمان قابلية الاستخدام على الأجهزة المختلفة.
Page 27 of 28

NFR-05: دعم تقليل الحركة

  • Provenance: required_inference
  • الوصف: عند تفعيل prefers-reduced-motion، تتوقف الحركة المستمرة وتظهر القيم كأرقام ثابتة.
  • المبرر: مطلوب لضمان إمكانية الوصول.

10. Tech Stack

  • Frontend: React (SPA) — لبناء واجهة المستخدم التفاعلية.
  • Backend: Python / FastAPI — للاتصال ببروتوكول MikroTik API ودعم RouterOS 6 و 7.
  • Storage: قاعدة بيانات محلية لتخزين بيانات الراوترات المحفوظة.
  • Containerization: Docker / docker-compose — لتسهيل تشغيل المشروع وتسليمه كملف مضغوط.
  • Deployment: لا يتطلب Kubernetes؛ التشغيل المحلي أو على خادم واحد كافٍ.

11. Assumptions and Constraints

Assumptions

  • A-01: المستخدم لديه جهاز MikroTik RouterOS 6 أو 7 متاح على الشبكة. [Default — not specified by user]
  • A-02: بيانات الاتصال بالراوتر (IP، Port، Username، Password) صحيحة ومتاحة للمستخدم. [Default — not specified by user]
  • A-03: البرنامج يعمل على متصفح حديث يدعم JavaScript. [Default — not specified by user]
Page 28 of 28

Constraints

  • C-01: يجب أن يدعم الاتصال بالميكروتك إصداري RouterOS 6 و 7. (explicit)
  • C-02: يجب تسليم المشروع كاملاً في ملف مضغوط ليقوم المستخدم بتحميله. (explicit)
  • C-03: يجب أن يكون البرنامج مطوّراً بمستوى أكثر احترافية. (explicit)
  • C-04: لا يُطلب من البرنامج إدارة خدمات RouterOS الأخرى خارج نطاق User Manager و Hotspot. (explicit)
  • C-05: لا يُطلب تكامل مع مزودي هوية خارجيين. (explicit)
  • C-06: لا يُطلب تطبيق جوال أصلي. (explicit)

12. Glossary

  • MikroTik: شركة تصنع أجهزة توجيه الشبكات وأنظمة RouterOS.
  • RouterOS: نظام التشغيل الذي يعمل على أجهزة MikroTik.
  • RouterOS 6 / RouterOS 7: إصداري نظام RouterOS المدعومان في البرنامج.
  • User Manager: وحدة في RouterOS لإدارة مستخدمي الشبكة وبروفايلاتهم وحدودهم.
  • Hotspot: خدمة في RouterOS توفر بوابة دخول لمستخدمي الشبكة اللاسلكية.
  • Hotspot User: مستخدم مسجل في خدمة الهوتسبوت.
  • Hotspot Profile: بروفايل يحدد حدود السرعة ومدة الجلسة لمستخدمي الهوتسبوت.
  • Active Session: جلسة هوتسبوت نشطة حالياً على الراوتر.
  • Router: جهاز MikroTik الذي يتصل به البرنامج.
  • Saved Router: راوتر محفوظ في قائمة الراوترات المحفوظة داخل البرنامج.
  • LED Dot: نقطة إشارة مسطحة 10px تشير إلى حالة الاتصال.
  • Rocker Switch: مفتاح فيزيائي منزلق يُستخدم لتسجيل الدخول (CONNECT).
  • Sparkline: رسم بياني مسطر بسماكة 1px يعرض حركة المرور الحية بمعدل 1Hz.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Read product description
صفحة تسجيل الدخول: 1. Enter connection data
صفحة تسجيل الدخول: 2. Test connection
صفحة تسجيل الدخول: 3. Correct data and retest
صفحة تسجيل الدخول: 4. Connect to router
صفحة تسجيل الدخول: Save router data
صفحة تسجيل الدخول: 5. Open saved routers
صفحة تسجيل الدخول: 6. Select router and connect
Router Management: 7. Handle connection failure
Router Management: 8. View saved routers table
Router Management: 9. Edit saved router
Router Management: 10. Delete saved router
صفحة تسجيل الدخول: 11. Add new router
Router Management: Hand off session to operators

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Read product description
صفحة تسجيل الدخول: 1. Enter connection data
صفحة تسجيل الدخول: 2. Test connection
صفحة تسجيل الدخول: 3. Correct data and retest
صفحة تسجيل الدخول: 4. Connect to router
صفحة تسجيل الدخول: Save router data
صفحة تسجيل الدخول: 5. Open saved routers
صفحة تسجيل الدخول: 6. Select router and connect
Router Management: 7. Handle connection failure
Router Management: 8. View saved routers table
Router Management: 9. Edit saved router
Router Management: 10. Delete saved router
صفحة تسجيل الدخول: 11. Add new router
Router Management: Hand off session to operators