Fix build errors: corrected import paths, added missing RatingList component, fixed syntax errors in rating components

app/components/ratings/RatingForm.js

@@ -0,0 +1,216 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Star, Edit2, X, Check, Clock } from 'lucide-react';
+import StarRating from './StarRating.js';
+import toast, { Toaster } from 'react-hot-toast';
+import { rateProperty, rateCustomer, getUserPropertyRating, canRateProperty } from '../../utils/ratings.js';
+
+const RatingForm = ({ 
+  propertyId, 
+  userId, 
+  propertyOwner = false,
+  initialRating = 0,
+  initialComment = '',
+  onSubmitSuccess
+}) => {
+  const [rating, setRating] = useState(initialRating);
+  const [comment, setComment] = useState(initialComment);
+  const [loading, setLoading] = useState(false);
+  const [showForm, setShowForm] = useState(false);
+  const [userRating, setUserRating] = useState(null);
+
+  // Check if user has already rated
+  useState(() => {
+    async function fetchUserRating() {
+      try {
+        const rating = await getUserPropertyRating(propertyId, userId);
+        if (rating) {
+          setUserRating(rating);
+          setRating(rating.rating);
+          setComment(rating.comment || '');
+        }
+      } catch (error) {
+        console.error('[RatingForm] Failed to fetch user rating:', error);
+      }
+    }
+    
+    if (propertyId && userId) {
+      fetchUserRating();
+    }
+  }, [propertyId, userId]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!rating) {
+      toast.error('يرجى إعطاء تقييم من 1 إلى 5 نجوم');
+      return;
+    }
+
+    setLoading(true);
+    
+    try {
+      const ratingData = {
+        propertyId,
+        customerId: userId,
+        rating,
+        comment: comment.trim() || null
+      };
+
+      await rateProperty(ratingData);
+      
+      toast.success('تم إرسال التقييم بنجاح!');
+      
+      // Reset form
+      setRating(0);
+      setComment('');
+      setShowForm(false);
+      
+      if (onSubmitSuccess) {
+        onSubmitSuccess();
+      }
+    } catch (error) {
+      console.error('[RatingForm] Failed to submit rating:', error);
+      toast.error('حدث خطأ أثناء إرسال التقييم. يرجى المحاولة مرة أخرى.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleEdit = () => {
+    setShowForm(true);
+    setRating(userRating?.rating || 0);
+    setComment(userRating?.comment || '');
+  };
+
+  const handleCancel = () => {
+    setShowForm(false);
+    setRating(userRating?.rating || 0);
+    setComment(userRating?.comment || '');
+  };
+
+  if (!propertyId || !userId) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-4">
+      <Toaster position="top-center" reverseOrder={false} />
+      
+      {/* Display existing rating */}
+      {userRating && !showForm && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-gray-50 rounded-xl p-4 border border-gray-200"
+        >
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <Star className="w-5 h-5 text-amber-500" />
+              <span className="font-medium text-gray-900">{userRating.rating}</span>
+              <span className="text-sm text-gray-500">من 5</span>
+            </div>
+            <button
+              onClick={handleEdit}
+              className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 transition-colors flex items-center gap-1"
+            >
+              <Edit2 className="w-4 h-4" />
+              تعديل
+            </button>
+          </div>
+          
+          {userRating.comment && (
+            <div className="text-gray-600 text-sm mb-3 line-clamp-3">
+              "{userRating.comment}"
+            </div>
+          )}
+          
+          <div className="flex items-center gap-2 text-xs text-gray-400">
+            <Clock className="w-3 h-3" />
+            <span>{userRating.createdAt ? new Date(userRating.createdAt).toLocaleDateString('ar-SA') : ''}</span>
+          </div>
+        </motion.div>
+      )}
+
+      {/* Rating form */}
+      {showForm && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-white rounded-xl p-6 border border-gray-200 shadow-sm"
+        >
+          <form onSubmit={handleSubmit}>
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                تقييمك للعقار
+              </label>
+              <div className="flex items-center gap-2">
+                <StarRating
+                  rating={rating}
+                  onRatingChange={setRating}
+                  readOnly={false}
+                  size={28}
+                  color="#ffc107"
+                />
+                <span className="text-lg font-bold text-gray-900">{rating || '1'}</span>
+                <span className="text-sm text-gray-400">/5</span>
+              </div>
+            </div>
+
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                تعليق (اختياري)
+              </label>
+              <textarea
+                rows="3"
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                placeholder="شارك تجربتك مع العقار..."
+                className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all resize-none"
+              />
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                type="button"
+                onClick={handleCancel}
+                disabled={loading}
+                className="flex-1 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                إلغاء
+              </button>
+              <button
+                type="submit"
+                disabled={loading || !rating}
+                className="flex-1 px-4 py-2 bg-amber-500 text-white rounded-lg font-medium hover:bg-amber-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-1"
+              >
+                {loading ? (
+                  <div className="w-4 h-4 border-2 border-white/50 border-t-white rounded-full animate-spin" />
+                ) : (
+                  <Check className="w-5 h-5" />
+                )}
+                {loading ? 'إرسال' : 'إرسال التقييم'}
+              </button>
+            </div>
+          </form>
+        </motion.div>
+      )}
+
+      {/* Add rating button */}
+      {!userRating && !showForm && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-amber-50 border-2 border-amber-200 rounded-xl p-4 text-center cursor-pointer hover:border-amber-300 transition-all"
+          onClick={() => setShowForm(true)}
+        >
+          <Star className="w-8 h-8 text-amber-500 mx-auto mb-2" />
+          <h3 className="font-bold text-amber-700 mb-2">قيّم هذا العقار</h3>
+          <p className="text-sm text-amber-600">شارك تجربتك مع المستأجرين الآخرين</p>
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
+export default RatingForm;