website

أ. الواجهة الأمامية (Frontend):

· الإطار الأساسي: React.js مع Next.js (لضمان سرعة التنقل بين الصفحات والأداء العالي).

· إدارة الحالة (State Management): Zustand أو Redux Toolkit (للتحكم في حالة الفلاتر، التبويبات المفتوحة، وبيانات المستخدم).

· التنسيق (Styling): Tailwind CSS (لتصميم البطاقات، الأزرار، والتخطيط المتجاوب بسرعة ودقة) مع مكتبة مكونات جاهزة مثل Ant Design أو Shadcn/ui لتوحيد شكل الجداول والقوائم.

ب. الرسوم البيانية (Data Visualization):

· المكتبة: Recharts أو ApexCharts (لإنشاء الرسم البياني المساحي بسهولة وربطه ببيانات الـ API، مع دعم التفاعل عند تمرير الماوس).

ج. الأيقونات والخطوط:

· الأيقونات: Lucide React أو Heroicons (للأيقونات البسيطة والحديثة في القائمة الجانبية).

· الخطوط: Inter أو Roboto (خطوط مثالية للواجهات الرقمية وقراءة الأرقام بوضوح).

د. الخلفية والبرمجة الخلفية (Backend & APIs):

· الخادم: Node.js (NestJS) أو Python (FastAPI) لجلب بيانات العملاء المحتملين ومعالجتها.

· قاعدة البيانات: PostgreSQL (لأن بيانات الـ CRM علائقية وتحتاج لعلاقات دقيقة بين العملاء، المندوبين، والحالات).

· واجهة برمجة التطبيقات (API): RESTful API أو GraphQL لتزويد الواجهة بالبيانات المطلوبة للبطاقات والرسم البياني.

هـ. الأمان والأداء:

· المصادقة: JWT (JSON Web Tokens) لتأمين جلسات تسجيل الدخول.

· الاستضافة: Vercel للواجهة الأمامية، و AWS أو Render للخادم وقاعدة البيانات.