System Requirements Document for gamma-green

1. Introduction

gamma-green هو تطبيق لإدارة الأموال الشخصية، بواجهة عربية بالكامل، يتيح للمستخدم الفرد تسجيل دخله ومصروفاته ومتابعة رصيده الحالي في مكان واحد. المنتج موجّه لمستخدم عربي واحد يدير أمواله الشخصية اليومية، ويريد أن يرى صورة واضحة عن أمواله دون تعقيد.

الغرض من هذا المستند هو تحديد المتطلبات الوظيفية وغير الوظيفية، والهوية البصرية، وتدفقات الاستخدام، ونطاق التسليم الحالي، بما يكفي لبناء التطبيق وتقييمه.

الجمهور المستهدف: المستخدم الفرد الذي يسجّل حركاته المالية اليومية ويعود للاطلاع على رصيده. الواجهة عربية بالكامل وبتخطيط RTL أولًا.

2. System Overview

gamma-green تطبيق ويب بواجهة عربية بالكامل (RTL-first) لإدارة الأموال الشخصية. يقوم على ثلاث قدرات أساسية: تسجيل الدخل، تسجيل المصروفات، وحساب الرصيد الحالي وعرضه. المستخدم ينشئ حسابه بنفسه، ثم يسجّل حركاته المالية، ويعود لاحقًا للاطلاع على رصيده وقائمة حركاته.

الأدوار الفاعلة:

• مستخدم إدارة الأموال — المستخدم الفرد الوحيد في المنتج (شخص بشري).

نظام/خارجي:

• الخدمة الخلفية (Backend) — تحفظ الحركات المالية وتربطها بحساب المستخدم، وتحسب الرصيد الحالي، وتتيح استرجاعه عند العودة.

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

• عرض واجهة عربية بالكامل لتتبع الدخل والمصروفات والرصيد.
• إنشاء حساب ذاتيًا قبل تسجيل الحركات المالية.
• التحقق العائد عبر تسجيل الدخول للوصول إلى الحركات والرصيد المحفوظ.
• حفظ الحركات المالية في الخدمة الخلفية لحساب الرصيد الحالي وإتاحته عند العودة.

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

• لا تُضاف قدرات مجاورة غير مطلوبة (مثل الميزانيات، الأهداف المالية، التقارير المتقدمة، تعدد المستخدمين، مشاركة الحساب، أو الأدوار المتعددة).
• لا تُضاف صفحات أو وحدات من فئة المنتج أو من قوالب التطبيقات المألوفة.

2a. Product Interpretation and Delivery Boundary

ملكية التسليم: التطبيق مملوك بالكامل من الطرف الأول (first-party) بواجهة مخصّصة (custom UI) وخدمة خلفية مملوكة للتطبيق. لا يوجد مزوّد خارجي يملك أي جزء من تجربة المستخدم.

ملكية الهوية والوصول: التطبيق يملك هوية المستخدم. المستخدم ينشئ حسابه بنفسه (تسجيل ذاتي)، ثم يعود عبر تسجيل الدخول للوصول إلى حركاته المالية ورصيده المحفوظ. الصفحة الرئيسية متاحة قبل تسجيل الدخول كسطح تعريفي عام؛ أما لوحة التحكم والحركات المالية وإضافة حركة فتحتاج تسجيل دخول.

الحدود الحالية والمستقبلية: كل ما ورد في هذا المستند هو نطاق حالي. لا توجد متطلبات مستقبلية معتمدة في المصدر، ولا يُضاف أي شيء خارج النطاق الحالي.

2b. Source Content Inventory

لا يوجد توجيه مرجعي من نوع content_source في هذا المشروع، لذا لا يُدرج جرد محتوى.

2c. Page Content and Component Coverage

الصفحة الرئيسية

• المعلومات والحالة: شرح تطبيق إدارة الأموال باللغة العربية ووظائفه (تتبع الدخل والمصروفات والرصيد) قبل تسجيل الدخول. لا تعرض بيانات مالية خاصة بالمستخدم.
• الإجراءات الأساسية: الانتقال إلى إنشاء حساب (CTA أساسي «ابدأ الآن»)، والانتقال إلى تسجيل الدخول.
• الإجراءات المساندة: قراءة شرح الوظائف الثلاث (الدخل، المصروفات، الرصيد).
• كيانات المجال: لا كيانات مالية خاصة بالمستخدم على هذه الصفحة.
• مسؤوليات المكوّنات: عنوان عربي كبير (RTL) + كتلة teal تحتوي CTA؛ سطر دفتر حسابات موضّح يشرح شكل عرض الرصيد والدخل والمصروف بالألوان؛ صورة حياة صامتة دافئة؛ شريط علوي فيه wordmark ورابط «تسجيل الدخول».
• الحالات: تحميل (هيكل ثابت لا يحتاج بيانات)، فراغ (لا ينطبق)، نجاح (الصفحة معروضة كاملة)، خطأ (لا ينطبق — لا استدعاء بيانات)، استرجاع (لا ينطبق).

تسجيل الدخول

• المعلومات والحالة: حقول التحقق العائد للوصول إلى الحركات والرصيد المحفوظ.
• الإجراءات الأساسية: إدخال بيانات الحساب والتحقق للدخول.
• الإجراءات المساندة: الانتقال إلى إنشاء حساب لمن لا يملك حسابًا.
• كيانات المجال: حساب المستخدم (هوية).
• مسؤوليات المكوّنات: نموذج تسجيل دخول بحقول واضحة، زر إرسال أساسي، رسائل خطأ عربية واضحة.
• الحالات: تحميل (تعطيل الزر أثناء التحقق)، فراغ (لا ينطبق)، نجاح (الانتقال إلى لوحة التحكم)، خطأ (بيانات غير صحيحة — رسالة عربية واضحة وإمكانية إعادة المحاولة)، استرجاع (إعادة إدخال البيانات والمحاولة مرة أخرى).

إنشاء حساب

• المعلومات والحالة: نموذج التسجيل الذاتي لإنشاء حساب جديد.
• الإجراءات الأساسية: إدخال بيانات الحساب وإنشائه.
• الإجراءات المساندة: الانتقال إلى تسجيل الدخول لمن يملك حسابًا.
• كيانات المجال: حساب المستخدم (هوية).
• مسؤوليات المكوّنات: نموذج إنشاء حساب بحقول واضحة، زر إرسال أساسي، رسائل خطأ عربية واضحة.
• الحالات: تحميل (تعطيل الزر أثناء الإنشاء)، فراغ (لا ينطبق)، نجاح (الدخول إلى التطبيق والانتقال إلى لوحة التحكم)، خطأ (بيانات غير مكتملة أو غير صالحة — رسالة عربية واضحة وإمكانية التصحيح)، استرجاع (تصحيح الحقول وإعادة الإرسال).

لوحة التحكم

• المعلومات والحالة: ملخص الرصيد الحالي بناءً على الحركات المالية المسجلة، مع ملخص الدخل وملخص المصروفات.
• الإجراءات الأساسية: الاطلاع على الرصيد والدخل والمصروفات.
• الإجراءات المساندة: الانتقال إلى الحركات المالية، والانتقال إلى إضافة حركة.
• كيانات المجال: الرصيد الحالي، إجمالي الدخل، إجمالي المصروفات، الحركات المالية.
• مسؤوليات المكوّنات: صف من ثلاث لوحات (الرصيد / الدخل / المصروفات)؛ رقم الرصيد بخط Jost بأرقام جدولية؛ شريط رصيد ثابت أعلى الشاشة؛ شريط تنقل جانبي يميني مرقّم (01–04) بمؤشر teal متحرك؛ قوس «shell» عريض يعلو لوحة الرصيد.
• الحالات: تحميل (هياكل عظمية للوحات أثناء جلب البيانات)، فراغ (لا حركات مالية بعد — عرض رصيد صفري ودعوة لإضافة أول حركة)، نجاح (عرض الرصيد والدخل والمصروفات)، خطأ (تعذّر جلب البيانات — رسالة عربية واضحة وزر إعادة المحاولة)، استرجاع (إعادة المحاولة بعد الخطأ).

الحركات المالية

• المعلومات والحالة: قائمة قابلة لإعادة الزيارة تعرض الحركات المالية المسجلة ومراجعتها.
• الإجراءات الأساسية: استعراض الحركات المالية المسجلة.
• الإجراءات المساندة: الانتقال إلى إضافة حركة، والانتقال إلى لوحة التحكم.
• كيانات المجال: الحركة المالية (النوع: دخل/مصروف، المبلغ، التاريخ، التصنيف).
• مسؤوليات المكوّنات: دفتر حسابات بصفوف مسطّرة (label يمينًا، المبلغ يسارًا بأرقام Jost جدولية)، شرائح ملوّنة حسب النوع (mustard للدخل، tomato للمصروف)، خطوط walnut رفيعة، تأثير hover يُدخل خط teal 3px من اليمين.
• الحالات: تحميل (هياكل عظمية للصفوف)، فراغ (لا حركات مالية — رسالة عربية واضحة ودعوة لإضافة أول حركة)، نجاح (عرض القائمة)، خطأ (تعذّر جلب الحركات — رسالة عربية واضحة وزر إعادة المحاولة)، استرجاع (إعادة المحاولة بعد الخطأ).

إضافة حركة

• المعلومات والحالة: مساحة مركزة لتسجيل حركة دخل أو مصروف مع المبلغ والتاريخ والتصنيف.
• الإجراءات الأساسية: إدخال نوع الحركة والمبلغ والتاريخ والتصنيف وحفظ الحركة.
• الإجراءات المساندة: الرجوع إلى الحركات المالية أو لوحة التحكم دون حفظ.
• كيانات المجال: الحركة المالية (النوع، المبلغ، التاريخ، التصنيف).
• مسؤوليات المكوّنات: بطاقة عمود واحد بعرض أقصى 560px، حقل المبلغ أولًا وأكبر حجمًا، حقول النوع والتاريخ والتصنيف، زر حفظ أساسي.
• الحالات: تحميل (تعطيل الزر أثناء الحفظ)، فراغ (لا ينطبق)، نجاح (حفظ الحركة وتحديث الرصيد والانتقال إلى الحركات المالية أو لوحة التحكم)، خطأ (بيانات غير مكتملة أو غير صالحة — رسالة عربية واضحة وإمكانية التصحيح)، استرجاع (تصحيح الحقول وإعادة الحفظ).

3. Functional Requirements

FR-01 — واجهة عربية بالكامل

As a مستخدم إدارة الأموال I should أرى كل واجهة التطبيق باللغة العربية وبتخطيط RTL so that أستخدم التطبيق بلغتي دون أي عناصر بلغة أخرى.

• Provenance: explicit
• Trigger/Input: فتح أي صفحة في التطبيق.
• Observable result: كل النصوص والتسميات والرسائل بالعربية، والتخطيط RTL (المحتوى يبدأ من اليمين).
• Access state: ينطبق على كل الصفحات بغض النظر عن حالة الدخول.
• Failure/recovery: لا ينطبق (قيد ثابت).
• Continuation: يبقى القيد ساريًا في كل الصفحات.

FR-02 — إنشاء حساب ذاتيًا

As a مستخدم إدارة الأموال I should أنشئ حسابي بنفسي قبل تسجيل الحركات المالية so that تكون حركاتي ورصيدي محفوظين ومرتبطين بي.

• Provenance: required_inference
• Trigger/Input: فتح صفحة إنشاء حساب وإدخال بيانات الحساب.
• Observable result: إنشاء الحساب والدخول إلى التطبيق.
• Access state: الصفحة متاحة قبل تسجيل الدخول.
• Failure/recovery: بيانات غير مكتملة أو غير صالحة → رسالة عربية واضحة وإمكانية التصحيح وإعادة الإرسال.
• Continuation: بعد النجاح ينتقل المستخدم إلى لوحة التحكم.

FR-03 — التحقق العائد عبر تسجيل الدخول

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

• Provenance: required_inference
• Trigger/Input: فتح صفحة تسجيل الدخول وإدخال بيانات الحساب.
• Observable result: الوصول إلى الحركات المالية والرصيد المحفوظ.
• Access state: الصفحة متاحة قبل تسجيل الدخول؛ الصفحات المحمية (لوحة التحكم، الحركات المالية، إضافة حركة) تتطلب تسجيل دخول.
• Failure/recovery: بيانات غير صحيحة → رسالة عربية واضحة وإمكانية إعادة المحاولة.
• Continuation: بعد النجاح ينتقل المستخدم إلى لوحة التحكم.

FR-04 — تسجيل حركة دخل

As a مستخدم إدارة الأموال I should أسجّل حركة دخل بالمبلغ والتاريخ والتصنيف so that ينعكس دخلي في رصيدي الحالي.

• Provenance: explicit (تتبع الدخل) + required_inference (الحقول)
• Trigger/Input: فتح صفحة إضافة حركة، اختيار النوع «دخل»، إدخال المبلغ والتاريخ والتصنيف، ثم الحفظ.
• Observable result: حفظ الحركة وتحديث الرصيد الحالي.
• Access state: يتطلب تسجيل دخول.
• Failure/recovery: بيانات غير مكتملة أو غير صالحة → رسالة عربية واضحة وإمكانية التصحيح وإعادة الحفظ.
• Continuation: تظهر الحركة في قائمة الحركات المالية ويُحدَّث الرصيد في لوحة التحكم.

FR-05 — تسجيل حركة مصروف

As a مستخدم إدارة الأموال I should أسجّل حركة مصروف بالمبلغ والتاريخ والتصنيف so that ينعكس مصروفي في رصيدي الحالي.

• Provenance: explicit (تتبع المصروفات) + required_inference (الحقول)
• Trigger/Input: فتح صفحة إضافة حركة، اختيار النوع «مصروف»، إدخال المبلغ والتاريخ والتصنيف، ثم الحفظ.
• Observable result: حفظ الحركة وتحديث الرصيد الحالي.
• Access state: يتطلب تسجيل دخول.
• Failure/recovery: بيانات غير مكتملة أو غير صالحة → رسالة عربية واضحة وإمكانية التصحيح وإعادة الحفظ.
• Continuation: تظهر الحركة في قائمة الحركات المالية ويُحدَّث الرصيد في لوحة التحكم.

FR-06 — عرض الرصيد الحالي

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

• Provenance: explicit (تتبع الرصيد) + required_inference (الحساب في الخدمة الخلفية)
• Trigger/Input: فتح لوحة التحكم.
• Observable result: عرض الرصيد الحالي مع ملخص الدخل وملخص المصروفات.
• Access state: يتطلب تسجيل دخول.
• Failure/recovery: تعذّر جلب البيانات → رسالة عربية واضحة وزر إعادة المحاولة.
• Continuation: يبقى الرصيد محدَّثًا بعد كل حركة جديدة.

FR-07 — استعراض الحركات المالية

As a مستخدم إدارة الأموال I should أستعرض قائمة حركاتي المالية المسجلة so that أراجع ما سجّلته من دخل ومصروفات.

• Provenance: explicit (تتبع الدخل والمصروفات) + required_inference (قائمة قابلة لإعادة الزيارة)
• Trigger/Input: فتح صفحة الحركات المالية.
• Observable result: عرض الحركات المسجلة مع النوع والمبلغ والتاريخ والتصنيف.
• Access state: يتطلب تسجيل دخول.
• Failure/recovery: تعذّر جلب الحركات → رسالة عربية واضحة وزر إعادة المحاولة.
• Continuation: يمكن الانتقال إلى إضافة حركة جديدة أو العودة إلى لوحة التحكم.

FR-08 — حفظ الحركات المالية في الخدمة الخلفية

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

• Provenance: required_inference
• Trigger/Input: حفظ أي حركة مالية.
• Observable result: الحركة محفوظة ومتاحة عند تسجيل الدخول لاحقًا، والرصيد محسوب منها.
• Access state: يتطلب تسجيل دخول.
• Failure/recovery: تعذّر الحفظ → رسالة عربية واضحة وإمكانية إعادة المحاولة.
• Continuation: تبقى الحركات متاحة في كل زيارة لاحقة.

4. User Personas

مستخدم إدارة الأموال

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

الهدف الأساسي: أن يرى صورة واضحة عن أمواله داخل التطبيق — كم دخل، كم صرف، وكم تبقّى — دون تعقيد.

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

• إنشاء حسابه بنفسه (تسجيل ذاتي) قبل تسجيل أي حركة مالية.
• تسجيل حركات الدخل بالمبلغ والتاريخ والتصنيف.
• تسجيل حركات المصروف بالمبلغ والتاريخ والتصنيف.
• متابعة الرصيد الحالي المحسوب من حركاته.
• استعراض قائمة حركاته المالية لمراجعتها.
• العودة لاحقًا عبر تسجيل الدخول لاستئناف استخدام التطبيق ورؤية بياناته المحفوظة.

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

التفاعل مع المشاركين الآخرين: لا يوجد مشارك بشري آخر في المنتج. الطرف الآخر الوحيد هو الخدمة الخلفية التي تحفظ حركاته وتحسب رصيده وتتيحه عند العودة.

النجاح الملحوظ: يرى رصيده الحالي محدَّثًا بعد كل حركة، ويجد حركاته ورصيده محفوظين عند عودته.

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

5. Core User Flows

التدفق 1 — أول استخدام: إنشاء حساب وتسجيل أول حركة

1. البداية: يفتح المستخدم الصفحة الرئيسية (متاحة قبل تسجيل الدخول) ويقرأ شرح التطبيق بالعربية: تتبع الدخل والمصروفات والرصيد.
2. القرار: يضغط CTA الأساسي «ابدأ الآن» للانتقال إلى إنشاء حساب.
3. الإدخال: يُدخل بيانات حسابه في نموذج إنشاء الحساب.
4. الالتزام: يضغط زر الإنشاء.
5. النتيجة الملحوظة: يُنشأ الحساب ويدخل المستخدم إلى التطبيق، وينتقل إلى لوحة التحكم.
6. الحالة الفارغة: لا توجد حركات مالية بعد، فتعرض لوحة التحكم رصيدًا صفريًا ودعوة لإضافة أول حركة.
7. الاستمرار: ينتقل إلى إضافة حركة، يختار النوع (دخل أو مصروف)، يُدخل المبلغ (الحقل الأول والأكبر) والتاريخ والتصنيف، ثم يحفظ.
8. النتيجة الملحوظة: تُحفظ الحركة، ويُحدَّث الرصيد، وتظهر الحركة في الحركات المالية.
9. الفشل والاسترجاع: إذا كانت البيانات غير مكتملة أو غير صالحة، تظهر رسالة عربية واضحة ويصحّح المستخدم الحقول ويعيد الإرسال.

التدفق 2 — تسجيل حركة دخل أو مصروف في استخدام لاحق

1. البداية: المستخدم مسجّل الدخول ويفتح لوحة التحكم ليرى رصيده الحالي وملخص الدخل والمصروفات.
2. القرار: ينتقل إلى إضافة حركة عبر الشريط الجانبي المرقّم (04 إضافة حركة).
3. الإدخال: يختار النوع (دخل أو مصروف)، يُدخل المبلغ والتاريخ والتصنيف.
4. الالتزام: يضغط زر الحفظ.
5. النتيجة الملحوظة: تُحفظ الحركة في الخدمة الخلفية، ويُحدَّث الرصيد الحالي.
6. الاستمرار: ينتقل إلى الحركات المالية ليرى الحركة الجديدة ضمن القائمة، أو يعود إلى لوحة التحكم ليرى الرصيد المحدَّث.
7. الفشل والاسترجاع: إذا تعذّر الحفظ، تظهر رسالة عربية واضحة ويمكنه إعادة المحاولة دون فقدان ما أدخله.

التدفق 3 — العودة والتحقق العائد

1. البداية: المستخدم يعود لاحقًا ويفتح الصفحة الرئيسية أو تسجيل الدخول مباشرة.
2. الإدخال: يُدخل بيانات حسابه في تسجيل الدخول.
3. الالتزام: يضغط زر الدخول.
4. النتيجة الملحوظة: يصل إلى لوحة التحكم ويرى رصيده الحالي المحسوب من حركاته المحفوظة.
5. الاستمرار: ينتقل إلى الحركات المالية لمراجعة حركاته المسجلة.
6. الفشل والاسترجاع: إذا كانت البيانات غير صحيحة، تظهر رسالة عربية واضحة ويمكنه إعادة المحاولة، أو الانتقال إلى إنشاء حساب إذا لم يكن يملك حسابًا.

التدفق 4 — مراجعة الحركات المالية

1. البداية: المستخدم مسجّل الدخول ويفتح الحركات المالية.
2. الاطلاع: يستعرض القائمة بصفوف مسطّرة: التسمية يمينًا والمبلغ يسارًا بأرقام جدولية، مع شرائح ملوّنة حسب النوع (mustard للدخل، tomato للمصروف).
3. النتيجة الملحوظة: يرى كل حركاته المسجلة مع النوع والمبلغ والتاريخ والتصنيف.
4. الاستمرار: ينتقل إلى إضافة حركة لتسجيل حركة جديدة، أو يعود إلى لوحة التحكم.
5. الفشل والاسترجاع: إذا تعذّر جلب الحركات، تظهر رسالة عربية واضحة وزر إعادة المحاولة.

6. Visuals Colors and Theme

المصدر الإلهامي: Charles & Ray Eames — الحداثة الدافئة في منتصف القرن. العنوان: «دفتر حسابات منزلي على طاولة مطبخ دافئة» — موثوق، إنساني، منظّم، ومتفائل بهدوء، لا بارد ولا مبالغ فيه.

الوضع الفاتح (light mode):

توزيع اللون: 70% أرضية كريمية، 20% بنية حبر/teal، 10% إبرازات ساخنة. اللون معلومة لا زخرفة: mustard للدخل، tomato للمصروف، forest للفروق الموجبة، walnut للقواعد، teal للبنية والـ CTA.

الخطوط:

• العناوين: Jost (شبيه Futura) للأرقام اللاتينية وتسميات الأقسام، بوزن medium، leading ضيق (0.95–1.05)، وتباعد حروف واسع في العناوين الصغيرة بأحرف كبيرة.
• العناوين العربية: Noto Kufi Arabic بوزن 700–800 مع line-height سخي، محاذاة يمين (RTL)، كبيرة ومكدّسة، غير ممركزة.
• النص: Noto Kufi Arabic.
• الأرقام: Jost بأرقام جدولية (tabular figures) وبحجم عرض — الرصيد والمبالغ هي الأعلى صوتًا في كل شاشة.

المقياس الطباعي: 1.333 modular — 56/40/28/18/16/14 على الجوال، وترتفع إلى 128/72/40/24/18/16 عند 1280px. رقم الرصيد: clamp(48px, 9vw, 104px) بأرقام جدولية، دائمًا في سطر واحد داخل حاويته.

لغة الشكل: حداثة عضوية منتصف القرن — أنصاف أقطار ناعمة 14–20px للبطاقات والحقول، حبوب كبسولية (capsule pills) للفلاتر وزر إضافة حركة، خطوط walnut رفيعة 1px بدل الحدود الثقيلة، ومنحنى «shell» عريض وضحل متكرر كفاصل أقسام وكحافة علوية للوحة الرصيد. لا زجاج، لا توهّج، لا أشكال blob — المنحنيات مرسومة لا مموّهة.

التخطيط: شبكة RTL-first معيارية على 12 عمودًا وقاعدة 8-pt. الصفحة الرئيسية: تقسيم تحريري غير متماثل — كتلة طباعة عربية ورقمية ضخمة على الأعمدة السبعة اليمنى، ولوحة صورة دافئة تخرج من الحافة اليسرى. هيكل التطبيق: شريط تنقل عمودي يميني (RTL) بعناصر مرقّمة 01–04، وشريط رصيد ثابت أعلى الشاشة، والمحتوى في لوحات متتابعة كالمعرض. لوحة التحكم: صف من ثلاث لوحات (الرصيد / الدخل / المصروفات) فوق دفتر حركات بصفوف مسطّرة وأزواج label–value متحاذية ككشف مطبوع. إضافة حركة: بطاقة عمود واحد بعرض أقصى 560px، حقل المبلغ أولًا وأكبر.

الصور: تصوير ضوء طبيعي دافئ لأشياء يومية على أرضيات كريمية بسيطة — مكتب walnut، وعاء سيراميك فيه عملات، إيصالات ورقية مطوية، نبتة منزلية — مع لمسات mid-century مرسومة يدويًا: أقواس رفيعة ونقاط وعلامات هندسية صغيرة بلون mustard وteal. أيقونات التصنيفات: pictograms بخط 2px داخل مربعات ناعمة الزوايا، لون واحد لكل تصنيف. لا صور لأشخاص، لا renders ثلاثية الأبعاد، لا gradient blobs.

ممنوع: الأساسي الأزرق/النيلي على الأبيض (قالب fintech العام) — ممنوع صراحة لهذا المشروع؛ Glassmorphism واللوحات المصنفرة وgradient blobs والحواف المتوهجة؛ شبكات بطاقات متطابقة بـ hover-lift؛ خطوط Inter أو Roboto أو Arial أو Helvetica أو Poppins أو Lato أو system-ui كخطوط عناوين أو نص؛ تركيبة hero ممركزة (عنوان + نص فرعي + زر)؛ اللون الزخرفي؛ التفاعلات النابضة أو الربيعية وتأثيرات confetti؛ صور أشخاص أو renders ثلاثية الأبعاد.

7. Signature Design Concept

الفكرة: الشاشة الأولى تُقرأ كملصق mid-century لا كـ SaaS hero — «دفتر حسابات» مبني من طباعة عربية ضخمة وكتلة لون صلبة.

التركيب (RTL):

• الأعمدة السبعة اليمنى: عنوان عربي ضخم «أموالك، بوضوح» بخط Noto Kufi Arabic 800 بحجم clamp(56px, 10vw, 128px)، محاذاة يمين، مكدّس فوق كتلة teal صلبة (#1F5E5A) تمتد بعرض العمود كاملًا وتحمل CTA الأساسي «ابدأ الآن» مثبّتًا أسفل العنوان داخل الكتلة بلون كريمي.
• أسفل الكتلة مباشرة: سطر دفتر حسابات مسطّر واحد يعرض رقم رصيد توضيحي بأرقام Jost الجدولية، مع شريحة دخل بلون mustard وشريحة مصروف بلون tomato — يشرح بصريًا نظام الترميز اللوني الثلاثي.
• الأعمدة الخمسة اليسرى: صورة دافئة لمكتب walnut مع إيصالات ووعاء سيراميك، مقصوصة بقوة عند حافة الشاشة اليسرى ومتراكبة 24px مع كتلة teal، فيجلس النص على اللون وتنزف الصورة خارج الحافة.
• أعلى التركيب: خط walnut رفيع يمتد بعرض الشاشة كاملًا يحمل الـ wordmark ورابط نصي واحد «تسجيل الدخول» عند طرفه الأيمن.

الالتزام بالقراءة: العنوان والـ CTA والرابط النصي وأرقام السطر تبقى كاملة داخل الشاشة وحاوياتها عند 375px و768px و1280px، وتلتف أو تتقلّص (عبر clamp(...)) لتناسب. الصورة والزخرفة هما ما يُقص ويُنزف خارج الحافة، لا النص ولا الأزرار.

الحركات المميزة المعاد استخدامها: عنوان RTL ضخم مكدّس على كتلة teal صلبة والـ CTA داخلها؛ دفتر حسابات مسطّر كمكوّن أساسي في كل مكان؛ ترميز لوني ثلاثي الأدوار كمعلومة؛ شريط تنقل عمودي يميني مرقّم بمؤشر teal متحرك؛ منحنى «shell» العريض الضحل كفاصل ولتتويج لوحة الرصيد.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief:

• الموضوع البؤري: العنوان العربي الضخم «أموالك، بوضوح» على كتلة teal الصلبة، مع سطر الدفتر المسطّر أسفله الذي يحمل رقم الرصيد وشرائح الدخل والمصروف.
• أطروحة الإدخال ← التحويل ← النتيجة: عند تحميل الصفحة الرئيسية، تدخل الكتلة والطباعة بحركة صعود 12px وتلاشٍ خلال 320–420ms بمنحنى cubic-bezier(0.22, 0.61, 0.36, 1)، وتتبعها اللوحات بتتابع 60ms؛ ثم يُعدّ رقم الرصيد التوضيحي تصاعديًا مرة واحدة عند التحميل — فيقرأ الزائر فكرة التطبيق (دخل، مصروف، رصيد) قبل أي ضغطة.
• مفردات الحركة: دخول هادئ شبيه بالفيلم، صعود 12px وتلاشٍ، تتابع 60ms، عدّ تصاعدي واحد لرقم الرصيد، انتقال خط teal 3px من اليمين عند hover على صف الدفتر مع تدفئة الصف إلى #FDF8EF. لا ارتداد، لا parallax مسرحي، لا جزيئات.
• الإطار الأول المركّب: كتلة teal والعنوان في موضعهما النهائي، سطر الدفتر أسفله، الصورة تنزف من الحافة اليسرى متراكبة مع الكتلة، والخط الرفيع أعلى الشاشة يحمل الـ wordmark ورابط «تسجيل الدخول».
• حالة prefers-reduced-motion: تتجمّد كل الحركات عند حالتها النهائية فورًا — لا صعود، لا تلاشٍ، لا عدّ تصاعدي، ورقم الرصيد يظهر بقيمته النهائية مباشرة.

9. Non-Functional Requirements

• NFR-01 — اللغة والتخطيط: واجهة التطبيق باللغة العربية بالكامل وبتخطيط RTL-first. (Provenance: explicit — قيد صريح من المستخدم. Rationale: التطبيق مطلوب بالعربية.)
• NFR-02 — قابلية القراءة عند كل المقاسات: العناوين والـ wordmarks والتسميات والأرقام ونصوص البطاقات وعناصر التحكم تبقى كاملة داخل الشاشة وحاوياتها عند 375px و768px و1280px، وتلتف أو تتقلّص لتناسب، ولا يغطيها أي عنصر آخر. الصور والزخرفة والحركة يجوز قصّها ونزفها خارج الحواف. (Provenance: explicit — قيد من التوجيه الإبداعي. Rationale: ضمان قابلية القراءة.)
• NFR-03 — احترام تقليل الحركة: مع prefers-reduced-motion تتوقف كل الحركات وتُعرض العناصر كاملة في حالتها النهائية. (Provenance: explicit — من التوجيه الإبداعي. Rationale: إتاحة الوصول.)
• NFR-04 — حفظ البيانات واستمراريتها: الحركات المالية تُحفظ في الخدمة الخلفية ومرتبطة بحساب المستخدم، ويُحسب الرصيد الحالي منها ويُتاح عند العودة. (Provenance: required_inference. Rationale: لازم لجعل رحلة «العودة ورؤية الرصيد المحفوظ» قابلة للتنفيذ.)
• NFR-05 — حماية الصفحات المحمية: لوحة التحكم والحركات المالية وإضافة حركة تتطلب تسجيل دخول؛ الصفحة الرئيسية وتسجيل الدخول وإنشاء حساب متاحة قبل تسجيل الدخول. (Provenance: required_inference. Rationale: استمرارية الهوية وربط البيانات بالمستخدم الصحيح.)
• NFR-06 — رسائل الخطأ بالعربية: كل حالات الفشل (بيانات غير صالحة، تعذّر الجلب، تعذّر الحفظ) تُعرض برسالة عربية واضحة مع إمكانية الاسترجاع. (Provenance: required_inference. Rationale: إكمال دورة الحياة القابلة للاستخدام.)

10. Tech Stack

• الواجهة الأمامية: React (تطبيق ويب بواجهة عربية RTL-first).
• الخدمة الخلفية: Python / FastAPI.
• التخزين: قاعدة بيانات مناسبة لحفظ المستخدمين والحركات المالية وربطها بالحساب.
• التغليف والتشغيل: Docker / docker-compose.
• الخطوط: Jost (عناوين لاتينية وأرقام) و Noto Kufi Arabic (العناوين والنصوص العربية) — من التوجيه الإبداعي.

(لم يحدد المستخدم تقنيات بعينها؛ هذه اختيارات افتراضية متسقة مع نطاق التسليم الحالي.)

11. Assumptions and Constraints

• A-01: المستخدم فرد واحد يدير أمواله الشخصية؛ لا توجد أدوار متعددة ولا صلاحيات متمايزة على حالة مشتركة. (Assumption — narrow)
• A-02: الهوية مملوكة للتطبيق، والتسجيل ذاتي (self-service)؛ لا يوجد دعوة أو provisioning في المصدر. (Assumption — narrow، مبني على نطاق التخطيط)
• A-03: حقول الحركة المالية هي: النوع (دخل/مصروف)، المبلغ، التاريخ، التصنيف. (Assumption — narrow، مطلوب لجعل التسجيل قابلًا للتنفيذ)
• A-04: الرصيد الحالي = إجمالي الدخل − إجمالي المصروفات. (Assumption — narrow، مطلوب لجعل عرض الرصيد قابلًا للتنفيذ)
• C-01: واجهة التطبيق باللغة العربية بالكامل — قيد صريح غير قابل للتفاوض.
• C-02: قالب indigo/blue-on-white العام ممنوع لهذا المشروع — قيد صريح من التوجيه الإبداعي.
• C-03: لا تُضاف قدرات مجاورة (ميزانيات، أهداف، تقارير متقدمة، تعدد مستخدمين، مشاركة حساب) — خارج النطاق الحالي.
• C-04: لا توجد متطلبات مستقبلية معتمدة في المصدر؛ كل ما ورد في هذا المستند نطاق حالي.

12. Glossary

• الحركة المالية: قيد واحد يسجّله المستخدم، إما دخل أو مصروف، وله مبلغ وتاريخ وتصنيف.
• الدخل: حركة مالية موجبة تزيد الرصيد، وتُعرض بلون mustard.
• المصروف: حركة مالية سالبة تنقص الرصيد، وتُعرض بلون tomato.
• الرصيد الحالي: إجمالي الدخل ناقص إجمالي المصروفات، محسوب من الحركات المسجلة.
• التصنيف: وسم يُلحق بالحركة المالية لتصنيفها، وله أيقونة pictogram بلون واحد.
• الدفتر المسطّر (ledger): مكوّن العرض الأساسي — صفوف بخطوط رفيعة، التسمية يمينًا والمبلغ يسارًا بأرقام جدولية.
• RTL: اتجاه الكتابة من اليمين إلى اليسار، وهو الاتجاه الأساسي للتخطيط.
• shell curve: منحنى عريض ضحل متكرر يُستخدم كفاصل أقسام وكحافة علوية للوحة الرصيد.
• الخدمة الخلفية (Backend): النظام الذي يحفظ الحركات المالية ويربطها بالحساب ويحسب الرصيد.