منصة B2B للمستلزمات والمنتجات الطبية Fast-Care

المشروع ده عبارة عن منصة B2B للمستلزمات والمنتجات الطبية اسمها Fast-Care، مبنية بـ React + Vite + TypeScript+Laravel، وبتخدم نوعين مستخدمين أساسيين: المشتري والمورّد. من App.tsx وملفات الـ routes واضح إن التطبيق مقسوم لمسارين رئيسيين مع صلاحيات منفصلة: مسار للمشتري ومسار للمورد، بالإضافة لصفحات عامة وتسجيل دخول/تسجيل حساب وصفحة هبوط.

فكرة المشروع

المنصة بتربط المشتري بالمورّد داخل نظام واحد فيه طلبات شراء، عروض أسعار، فواتير، لوجستيات، مخزون، دعم فني، وإشعارات. يعني بدل ما الشراء والإمداد والنقل والفوترة شغالين في أدوات منفصلة، المشروع بيجمعهم في Dashboard واحدة.

المميزات الرئيسية الموجودة فعليًا

Landing Page تعريفية فيها Hero, Features, FAQ, How it works, Categories من Home.tsx.

Authentication تسجيل حساب، تسجيل دخول، نسيان كلمة المرور، OTP، وإعادة تعيين كلمة المرور من AuthRoute.tsx وuseSignUpFormStore.ts.

Role-based access حماية حسب نوع الحساب buyer أو seller من ProtectedRoute.tsx.

مسار المشتري

من BuyerRoute.tsx وBuyerLayout.tsx نقدر نلخصه كده:

Dashboard فيها إحصائيات، حالات الطلبات، الإنفاق، النشاط الأخير، العروض الجديدة، والشراء الموحد من pages/Buyer/Home.tsx.

طلبات شراء إنشاء طلبات ومتابعتها وعرض تفاصيلها والعروض المرتبطة بها.

عروض الموردين استعراض عروض وإضافة للسلة.

Cart سلة شراء مع تحديد الكمية.

Invoices فواتير نقدية وآجلة.

Virtual Inventory مخزن افتراضي وإضافة منتجات جديدة.

Unified Purchase شراء جماعي/موحد للحصول على أسعار أفضل، مع الانضمام لطلبات قائمة أو إنشاء طلب جديد من UnifiedPurchase.tsx.

Sub Accounts إدارة حسابات فرعية وصلاحياتها من SubAccountsPage.tsx.

Subscriptions خطط اشتراك للمنصة من Subscriptions.tsx.

Logistics طلبات نقل وشحن ومتابعتها وتعديلها وحذفها من TransferRquests.tsx.

Support واتساب + إنشاء تذكرة دعم فني من Support.tsx.

Notifications إشعارات ديناميكية مع تعليم كمقروء والتنقل للصفحة المرتبطة من notificationsStore.ts.

مسار المورّد

من SupplierRoute.tsx وSupplierLayout.tsx:

Dashboard فيها طلبات متاحة للعرض، عروض مقبولة، عروض مرسلة، إيرادات الشهر، أفضل المنتجات، فواتير مستحقة، ورسوم بيانية للمبيعات من SupplierHome.tsx.

طلبات المشترين استلام الطلبات المفتوحة وتقديم عروض عليها.

Incoming Orders الطلبات الواردة ومتابعتها.

Create Discount / Pricing إنشاء تسعيرة أو عرض سعر.

My Offers إدارة عروض المورد.

My Products إدارة المنتجات وإضافة منتج جديد.

Sales متابعة المبيعات.

Invoices الفواتير الواردة والتفاصيل.

Logistics نقل وشحن خاص بالمورد.

Account Settings الإعدادات.

Support الدعم الفني.

اللوجستيات والنقل

دي من أقوى الأجزاء في المشروع حاليًا:

اختيار نقطتي الشحن والاستلام على خريطة تفاعلية باستخدام Leaflet.

جلب العنوان من الإحداثيات.

حساب المسافة والسعر.

اختيار نوع المركبة.

اختيار طريقة الدفع.

دعم تحويل بنكي ورفع إثبات الدفع.

إنشاء أو تعديل طلب النقل.

كل ده موجود في MapViewComponent.tsx.

الملف اللي فاتحه حاليًا

SupplierInfoComponent.tsx ده كومبوننت UI لعرض معلومات المورد داخل صفحة العرض، وبيظهر مزايا مثل:

شحن مجاني فوق حد معين

مدة تسليم

ضمان جودة

سياسة إرجاع واستبدال

التقنيات المستخدمة

من package.json:

Vite

Tailwind CSS

Zustand لإدارة الحالة

Axios للـ API

Chart.js / Recharts / ECharts للرسوم البيانية

Radix UI / shadcn-style components

Sonner للتنبيهات

Motion للأنيميشن

معماريًا المشروع ماشي إزاي

pages/ للصفحات الرئيسية

components/ للمكونات القابلة لإعادة الاستخدام

store/ وapi/ لإدارة الحالة والاتصال بالباك إند

routes/ لتنظيم التنقل والصلاحيات

assets/ للصور والأيقونات

الخلاصة

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