← كل المشاريع

منصة إدارة اللوجستيات والاستيراد

AlSalam International

منصة لعمليات الاستيراد تتابع الشحنات والموردين والشركات وتسجيل المنتجات في نظام واحد، مع صلاحيات حسب الدور وتقارير وصفحة تحقق عامة عبر QR ودعم كامل للعربية والإنجليزية بنظام RTL.

لوحة تحكم منصة السلام الدولية تعرض ملخصات الشحنات والمنتجات والشركات وجدولًا بأحدث الشحنات.

نظرة عامة

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

العميل: شركة السلام الدولية، شركة لوجستيات واستيراد تعمل في مصر والسعودية.

دوري

مطوّر Frontend في AI Cloud. صمّمت معمارية التطبيق وطبقة البيانات، وبنيت وحدات العمل، ونفّذت الواجهة ثنائية اللغة.

أبرز الميزات

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

الشاشات

المعمارية

الوصول إلى البيانات مقسّم إلى طبقات، فلا تتعامل الواجهة مع الـ API مباشرة.

  1. مكوّنات الواجهةالصفحات والمكوّنات المشتركة.
  2. الخدمات (Services)ما تستدعيه الواجهة لتنفيذ العمليات.
  3. المستودعات (Repositories)تتولى الوصول إلى البيانات خلف واجهة موحّدة.
  4. API تجريبية أو حقيقيةمفتاح واحد في الإعدادات يحدد أيهما تستخدم الخدمة.

لماذا بُني بهذه الطريقة

  • يمكن بناء الشاشات واختبارها على بيانات تجريبية ثم التحويل إلى الـ API الحقيقية دون تغيير كود الواجهة.
  • فصل واضح بين الواجهة ومنطق العمل والوصول إلى البيانات.

تفاصيل تقنية

طبقات Repository وService وMock

كل خدمة تختار Repository تجريبيًا أو حقيقيًا من مفتاح في الإعدادات، فيمكن تطوير الميزات وعرضها ببيانات واقعية ثم ربطها بالـ Backend الحقيقي.

توجيه قائم على الصلاحيات

تحمل المسارات الصلاحية المطلوبة (13 صلاحية مختلفة في التطبيق) ويفحصها Guard قبل فتح الصفحة.

تحقق عام من المنتج

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

ثنائية اللغة RTL/LTR

العربية والإنجليزية تتشاركان الشاشات نفسها بمفاتيح ترجمة متطابقة في اللغتين، باستخدام ngx-translate.

الاختبار

يضم المشروع 78 ملف اختبار وحدة، تعمل بـ Vitest.

التقنيات

  • Angular 21
  • PrimeNG
  • ngx-translate
  • Vitest

لديك مشروع مشابه في بالك؟

لنتحدث عمّا تحتاجه.