سبير

سبير هو تطبيق معياري وقابل للتوسعة باستخدام Angular v20 ومدعوم بـ PrimeNG. يوفّر ما يلي:

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

كل قسم يُحمَّل بشكل كسول (Lazy Load) ومفصول في وحدة ميزات مستقلة. مكونات الواجهة والأدوات والخدمات الأساسية تقع ضمن وحدات Shared وCore العامة.

---

الميزات الرئيسية

• وحدات تحميل كسول: عام، مدير، مورّد، مدير
• PrimeNG + PrimeFlex لواجهة متجانسة ومتجاوبة
• حمايات تعتمد على الأدوار (AuthGuard، RoleGuard)
• محترقات HTTP لرمز JWT، معالجة الأخطاء، وتسجيل الطلبات
• مكونات مشتركة: شريط تنقل، شريط جانبي، تذييل، نوافذ منبثقة، مؤشرات تحميل
• إدارة حالة عبر الخدمات باستخدام RxJS BehaviorSubject
• تصميم SCSS: دعم للوضعين الفاتح والداكن، متغيرات، خلطات
• إمكانية الوصول: معالم ARIA، تنقل عبر لوحة المفاتيح، تباين الألوان
• اختبار وتنقيح: إعداد جاهز لاختبارات الوحدة (موصى بها)

---

المكدس التقني

• Angular v20
• PrimeNG (مكونات الواجهة)
• PrimeFlex (أدوات التخطيط)
• PrimeIcons
• TypeScript (نمط صارم)
• RxJS
• SCSS (تصميم وسمات)
• Angular CLI

---

الأوامر المتاحة

من جذر المشروع:

• ng serve - بدء خادم التطوير على http://localhost:4200/
• ng build - بناء التطبيق للإنتاج في dist/
• ng test - تنفيذ اختبارات الوحدة باستخدام Karma
• ng lint - تدقيق TypeScript و SCSS
• ng e2e - اختبارات شاملة من طرف إلى طرف

---

التوجيه والتخطيطات

• المسارات الأربعة العليا:
  • /public ← PublicLayoutComponent ← تحميل كسول لـ PublicModule
  • /admin ← AdminLayoutComponent ← تحميل كسول لـ AdminModule، محمي بـ AuthGuard وRoleGuard
  • /supplier ← SupplierLayoutComponent ← تحميل كسول لـ SupplierModule، محمي بـ AuthGuard وRoleGuard
  • /manager ← ManagerLayoutComponent ← تحميل كسول لـ ManagerModule (وحدة مؤقتة)

---

التصميم والسمات

• ملفات SCSS الجزئية في src/app/shared/styles/:
  • _variables.scss — ألوان وخطوط ومسافات عامة
  • _mixins.scss — خلطات قابلة لإعادة الاستخدام
  • themes/ — سمات الوضعين الفاتح والداكن
• استيراد عام في src/styles.scss
• تصميم متجاوب: تستخدم لوحات المدير والمورد CSS Grid، ويتحول الشريط الجانبي إلى تراكب عند عرض ≤768px

---

المصادقة والحمايات

• AuthService - تسجيل الدخول/الخروج، تخزين JWT، currentUser$
• AuthGuard - حماية المسارات، إعادة توجيه المستخدمين غير المصادقين
• RoleGuard - التحقق من الأدوار المصرح بها
• محترقات HTTP - إرفاق JWT، معالجة الأخطاء العامة، تسجيل الطلبات