منصة روزال

نظام متكامل لإدارة الأعمال وحجز الخدمات (SaaS Marketplace)

React 18 TypeScript Supabase PWA Production Ready

📋 ملخص المشروع

روزال هي منصة ويب تقدمية (PWA) تعمل كسوق متعدد التجار (Multi-Tenant Marketplace) يربط بين مقدمي الخدمات والزبائن في الجزائر.

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

  • النوع: منصة SaaS / Marketplace
  • السوق المستهدف: الجزائر (دعم العملة المحلية وطرق الدفع DZD)
  • الحالة: جاهز للإنتاج (Production-Ready)

💡 التحدي

تعاني الشركات الخدمية الصغيرة والمتوسطة في الجزائر من غياب أدوات رقمية محلية وبأسعار معقولة لتنظيم أعمالها. يعتمد الغالبية على الورق والقلم، مما يؤدي إلى:

  • تضارب في المواعيد وصعوبة في إدارة الوقت
  • غياب البيانات والتحليلات حول الأداء المالي
  • صعوبة الوصول لعملاء جدد عبر الإنترنت

🛠 الحل التقني

بناء منصة مركزية قوية تعتمد على أحدث تقنيات الويب، توفر حلاً شاملاً:

  • للشركات: لوحة تحكم (Dashboard) لإدارة المواعيد، الموظفين، والمالية (Cash Register)
  • للزبائن: تجربة حجز سلسة بنقرة واحدة (One-Click Booking) مع دعم الخرائط لتحديد أقرب الخدمات

🏗 البنية التقنية

تم اختيار التقنيات لضمان السرعة، الأمان، وقابلية التوسع (Scalability):

المجال التقنيات المستخدمة
Frontend React 18, TypeScript, Tailwind CSS, Shadcn/ui
State Management TanStack Query (React Query), Context API
Backend & DB Supabase (PostgreSQL), Edge Functions
Security Row Level Security (RLS), Supabase Auth
Maps Leaflet, OpenStreetMap (بديل مجاني لـ Google Maps)
PWA Vite PWA Plugin (Offline Support)

⚙️ أبرز المميزات التقنية

1. نظام الحجز الذكي

واحدة من أعقد المشكلات كانت حساب الوقت المتاح بناءً على خدمات متعددة بمدد زمنية مختلفة. الخوارزمية تحسب "وقت الخدمة + وقت التنظيف" وتقوم بإنشاء Slots ديناميكية مع منع التضارب في الوقت الفعلي.

2. إدارة قواعد البيانات والأمان

بما أن النظام "Multi-Tenant"، كان الأمان أولوية قصوى. استخدمت PostgreSQL Row Level Security (RLS) لضمان أن كل صاحب عمل يرى بياناته فقط، مع عزل البيانات تماماً على مستوى قاعدة البيانات.

3. نظام الكاشير والمدفوعات

نظام مالي مخصص للسوق الجزائري يدعم تسجيل المدفوعات النقدية (Cash) وإدارة طرق الدفع المحلية (CCP, Baridimob) مع توليد إيصالات PDF تلقائياً باستخدام مكتبة jsPDF.

4. تجربة المستخدم والأداء

تطبيق ويب تقدمي (PWA) يعمل كبرنامج أصلي على الهاتف مع Optimistic Updates باستخدام React Query وتقسيم الكود (Code Splitting) لتقليل حجم التحميل الأولي.

💻 نظرة على الكود

مقتطف يوضح كيفية التعامل مع تعارض المواعيد (Conflict Detection) في قاعدة البيانات:

-- وظيفة SQL للتحقق من توفر الوقت قبل الحجز CREATE OR REPLACE FUNCTION check_slot_availability( business_id uuid, check_date date, check_time time, duration_minutes integer ) RETURNS boolean AS $$ DECLARE conflict_count integer; BEGIN -- التحقق من وجود أي حجز مؤكد يتقاطع مع الوقت المطلوب SELECT COUNT(*) INTO conflict_count FROM pro_bookings WHERE pro_business_id = business_id AND booking_date = check_date AND status = 'confirmed' AND ( (booking_time <= check_time AND booking_time + (duration_minutes || ' minutes')::interval > check_time) ); RETURN conflict_count = 0; END; $$ LANGUAGE plpgsql;

📊 النتائج والأرقام

95+
Google Lighthouse Score
7→3
تقليل خطوات الحجز
1000s
عمليات يومياً
  • أداء عالٍ: تحقيق نتيجة 95+ في تقييم Google Lighthouse للأداء
  • تقليل وقت الحجز: اختصار عملية الحجز من 7 خطوات إلى 3 خطوات فقط
  • بنية تحتية مرنة: النظام جاهز لاستيعاب آلاف العمليات يومياً بفضل اعتماد Supabase كخدمة سحابية
زيارة المشروع