the best in the west is mouaz

2026-05-25 21:27:39 +03:00
parent a5577765ed
commit 00ccf5f262
35 changed files with 4876 additions and 2433 deletions
--- a/app/booked-properties/page.js
+++ b/app/booked-properties/page.js
@ -0,0 +1,222 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  Home, Star, MapPin, Calendar, Clock, Check, X, Loader2,
+  User, MessageCircle, ChevronDown, Image as ImageIcon,
+} from 'lucide-react';
+import toast, { Toaster } from 'react-hot-toast';
+import { getUserReservations } from '../utils/api';
+import AuthService from '../services/AuthService';
+import PropertyRatingForm from '../components/ratings/PropertyRatingForm';
+
+const STATUS_MAP = ['pending', 'ownerConfirmed', 'depositPaid', 'depositConfirmed', 'completed', 'cancelled'];
+
+const STATUS_CONFIG = {
+  pending:          { label: 'قيد الانتظار',      color: 'bg-yellow-100 text-yellow-800 border-yellow-300' },
+  ownerConfirmed:   { label: 'مؤكد من المالك',    color: 'bg-blue-100 text-blue-800 border-blue-300' },
+  depositPaid:      { label: 'تم دفع السلفة',     color: 'bg-orange-100 text-orange-800 border-orange-300' },
+  depositConfirmed: { label: 'مؤكد',              color: 'bg-green-100 text-green-800 border-green-300' },
+  completed:        { label: 'منتهي',             color: 'bg-teal-100 text-teal-800 border-teal-300' },
+  cancelled:        { label: 'ملغي',              color: 'bg-red-100 text-red-800 border-red-300' },
+};
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api';
+
+function StatusBadge({ code }) {
+  const key = STATUS_MAP[code] || 'pending';
+  const cfg = STATUS_CONFIG[key];
+  return (
+    <span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium border ${cfg.color}`}>
+      <Clock className="w-3 h-3" /> {cfg.label}
+    </span>
+  );
+}
+
+function ReservationCard({ reservation: r, onRate }) {
+  const isCompleted = STATUS_MAP[r.status] === 'completed';
+  const imgSrc = r.propertyImage || r._prop?.images?.[0] || (r.propertyInfo?.images?.[0]);
+  const imageUrl = imgSrc ? `${API_BASE}${imgSrc}` : null;
+  const address = r.propertyAddress || r._prop?.address || '';
+  const beds = r._prop?.numberOfBedRooms ?? r.numberOfBedRooms ?? 0;
+  const baths = r._prop?.numberOfBathRooms ?? r.numberOfBathRooms ?? 0;
+
+  return (
+    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
+      className="bg-white rounded-2xl shadow-sm hover:shadow-md transition-all border border-gray-200 overflow-hidden">
+      <div className="p-5 space-y-4">
+        <div className="flex justify-between items-start">
+          <div className="flex items-center gap-2">
+            <Home className="w-5 h-5 text-amber-500" />
+            <span className="font-semibold text-gray-900">عقار #{r.propertyId || r.id}</span>
+          </div>
+          <StatusBadge code={r.status} />
+        </div>
+
+        {imageUrl ? (
+          <div className="w-full h-44 rounded-xl overflow-hidden bg-gray-100">
+            <img src={imageUrl} alt="" className="w-full h-full object-cover" />
+          </div>
+        ) : (
+          <div className="w-full h-44 rounded-xl bg-gray-100 flex items-center justify-center">
+            <ImageIcon className="w-12 h-12 text-gray-300" />
+          </div>
+        )}
+
+        {address && (
+          <div className="flex items-center gap-1 text-gray-500 text-sm">
+            <MapPin className="w-4 h-4 flex-shrink-0" />
+            {address}
+          </div>
+        )}
+
+        {(beds > 0 || baths > 0) && (
+          <div className="flex gap-3 text-sm text-gray-600">
+            {beds > 0 && <span>{beds} غرف</span>}
+            {baths > 0 && <span>{baths} حمامات</span>}
+          </div>
+        )}
+
+        <div className="grid grid-cols-2 gap-3">
+          <div className="bg-gray-50 p-3 rounded-xl text-center">
+            <Calendar className="w-4 h-4 text-amber-500 mx-auto mb-1" />
+            <div className="text-xs text-gray-500">من</div>
+            <div className="text-sm font-medium">{new Date(r.startDate).toLocaleDateString('ar')}</div>
+          </div>
+          <div className="bg-gray-50 p-3 rounded-xl text-center">
+            <Calendar className="w-4 h-4 text-amber-500 mx-auto mb-1" />
+            <div className="text-xs text-gray-500">إلى</div>
+            <div className="text-sm font-medium">{new Date(r.endDate).toLocaleDateString('ar')}</div>
+          </div>
+        </div>
+
+        <div className="bg-amber-50 p-3 rounded-xl text-center">
+          <div className="text-lg font-bold text-amber-600">{r.totalPrice?.toLocaleString() ?? '—'}</div>
+          <div className="text-xs text-gray-500">السعر الإجمالي</div>
+        </div>
+
+        <div className="flex items-center gap-2 text-xs text-gray-400">
+          <User className="w-3 h-3" />
+          <span>رقم الحجز: #{r.id}</span>
+        </div>
+
+        {isCompleted && (
+          <button onClick={onRate}
+            className="w-full bg-amber-500 hover:bg-amber-600 text-white py-2.5 rounded-xl text-sm font-medium transition flex items-center justify-center gap-2">
+            <Star className="w-4 h-4" /> تقييم العقار
+          </button>
+        )}
+      </div>
+    </motion.div>
+  );
+}
+
+export default function BookedPropertiesPage() {
+  const [reservations, setReservations] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [ratingReservation, setRatingReservation] = useState(null);
+  const [expandedId, setExpandedId] = useState(null);
+
+  useEffect(() => {
+    if (!AuthService.getToken()) {
+      toast.error('يرجى تسجيل الدخول أولاً');
+      setLoading(false);
+      return;
+    }
+    loadReservations();
+  }, []);
+
+  const loadReservations = useCallback(async () => {
+    try {
+      const data = await getUserReservations();
+      setReservations(Array.isArray(data) ? data : []);
+    } catch (err) {
+      console.error(err);
+      toast.error('فشل تحميل الحجوزات');
+      setReservations([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center" dir="rtl">
+        <Loader2 className="w-12 h-12 text-amber-500 animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
+      <Toaster position="top-center" reverseOrder={false} />
+      <div className="container mx-auto px-4">
+        <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900 mb-2">العقارات المحجوزة</h1>
+              <p className="text-gray-600">لديك {reservations.length} حجز</p>
+            </div>
+            {reservations.length > 0 && (
+              <button onClick={() => setExpandedId(expandedId ? null : 'all')}
+                className="flex items-center gap-1 text-sm text-amber-600 hover:text-amber-700 transition">
+                <ChevronDown className={`w-4 h-4 transition-transform ${expandedId ? 'rotate-180' : ''}`} />
+                {expandedId ? 'طي الكل' : 'عرض الكل'}
+              </button>
+            )}
+          </div>
+        </motion.div>
+
+        {reservations.length === 0 ? (
+          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
+            className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300">
+            <Home className="w-16 h-16 text-amber-500 mx-auto mb-4" />
+            <h3 className="text-xl font-bold text-gray-900 mb-2">لا توجد حجوزات</h3>
+            <p className="text-gray-500">لم تقم بحجز أي عقار حتى الآن</p>
+          </motion.div>
+        ) : (
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {reservations.map((r, i) => (
+              <ReservationCard key={r.id || i} reservation={r} onRate={() => setRatingReservation(r)} />
+            ))}
+          </div>
+        )}
+
+        {reservations.filter(r => STATUS_MAP[r.status] === 'completed').length > 0 && (
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}
+            className="mt-8 bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-start gap-3">
+            <MessageCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
+            <div>
+              <p className="text-amber-800 font-medium">تقييم العقارات</p>
+              <p className="text-amber-600 text-sm">يمكنك تقييم العقارات المنتهية حجزها لمساعدة المستأجرين الآخرين</p>
+            </div>
+          </motion.div>
+        )}
+      </div>
+
+      <AnimatePresence>
+        {ratingReservation && (
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
+            onClick={() => setRatingReservation(null)}>
+            <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }}
+              className="w-full max-w-lg" onClick={e => e.stopPropagation()}>
+              <div className="relative">
+                <button onClick={() => setRatingReservation(null)}
+                  className="absolute left-2 top-2 z-10 bg-white/80 rounded-full p-1 hover:bg-white transition shadow">
+                  <X className="w-5 h-5 text-gray-600" />
+                </button>
+                <PropertyRatingForm
+                  reservationId={ratingReservation.id}
+                  onSuccess={() => { setRatingReservation(null); toast.success('تم إرسال التقييم بنجاح!'); }}
+                  onCancel={() => setRatingReservation(null)}
+                />
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}