The Wild Oasis — نظام إدارة فندق مبنيّ بـ React وSupabase

قمت بتطوير The Wild Oasis كحل متكامل لإدارة عمليات الفندق اليومية. يتيح النظام إدارة الكبائن (السعة، الأسعار، الخصومات، الصور)، وإدارة الحجوزات مع تتبّع الحالات (غير مؤكد، مُسجّل دخول، مُسجّل خروج)، بالإضافة إلى تدفق Check‑in/Check‑out واضح وسريع. تتضمن الواجهة لوحة معلومات تعرض مؤشرات الأداء وبيانات المبيعات والإشغال، مع إعدادات مرنة لسياسات الفندق (مدة الإقامة، السعة القصوى، تكلفة الإفطار...). تم التركيز على الأداء وتجربة الاستخدام عبر React Query لإدارة الحالة البعيدة، تصميم متجاوب، وبناء سريع بواسطة Vite.

أهم الميزات (Features)

- إدارة الكبائن: إضافة/تعديل/حذف، صور، سعة، أسعار، خصومات، تصفية وفرز ذكي

- إدارة الحجوزات: عرض شامل، فرز وتصفية حسب الحالة والمدى الزمني، تتبّع المدفوعات وخيارات الإفطار

- تسجيل الدخول/الخروج: تدفّق مبسّط لتأكيد الدفع وتحديث الحالة لحظيًا

- مصادقة وحماية مسارات: تسجيل/تسجيل دخول/تسجيل خروج، صفحات محمية للمصرّح لهم فقط

- لوحة معلومات وتحليلات: KPIs، رسوم بيانية للمبيعات والإشغال والمدة

- الإعدادات: ضبط سياسات الفندق (مدة الحجز، السعة القصوى، سعر الإفطار...) من خلال واجهة سهلة

- إدارة المستخدم: تحديث البيانات الشخصية وكلمة المرور، صورة رمزية مخزّنة في Supabase Storage

التقنيات المستخدمة (Tech Stack)

- React 18 + Vite 4

- React Router 6

- Styled‑Components 6

- TanStack React Query 4

- Supabase (PostgreSQL + Auth + Storage)

- React Hook Form، React Hot Toast، React Icons، React Error Boundary

- date‑fns، Recharts