added a swicher on the properties

app/reservations/page.js

@@ -115,7 +115,7 @@ function ReservationCard({ r, onViewDetails, onPay, payingId }) {
   const isExpired = deadline ? Date.now() > deadline : false;
   const isPaying = payingId === r.id;
   const [showRating, setShowRating] = useState(false);
-  const [ratingValue, setRatingValue] = useState(0);
+  const [ratings, setRatings] = useState({ clean: 0, services: 0, ownerBehavior: 0, experience: 0 });
   const [ratingComment, setRatingComment] = useState('');
   const [submittingRating, setSubmittingRating] = useState(false);
 
@@ -167,26 +167,36 @@ function ReservationCard({ r, onViewDetails, onPay, payingId }) {
           <Star className="w-4 h-4"/> قيّم هذا العقار
         </button>}
         {canRate && showRating && <div className="mt-3 bg-amber-50 p-3 rounded-xl">
-          <div className="flex gap-1 justify-center mb-2">
+          <div className="space-y-2 mb-3">
-            {[1,2,3,4,5].map(n => (
+            {[
-              <button key={n} onClick={() => setRatingValue(n)}
+              { key: 'clean', label: 'النظافة' },
-                className={`p-1 rounded-full transition-colors ${n <= ratingValue ? 'text-amber-500' : 'text-gray-300'}`}>
+              { key: 'services', label: 'الخدمات' },
-                <Star className={`w-6 h-6 ${n <= ratingValue ? 'fill-amber-500' : ''}`} />
+              { key: 'ownerBehavior', label: 'تعامل المالك' },
-              </button>
+              { key: 'experience', label: 'التجربة العامة' },
-            ))}
+            ].map(cat => <div key={cat.key} className="flex items-center justify-between">
+              <span className="text-sm text-gray-700">{cat.label}</span>
+              <div className="flex gap-0.5">
+                {[1,2,3,4,5].map(n => (
+                  <button key={n} onClick={() => setRatings(p => ({...p, [cat.key]: n}))}
+                    className={`p-0.5 rounded-full transition-colors ${n <= ratings[cat.key] ? 'text-amber-500' : 'text-gray-300'}`}>
+                    <Star className={`w-4 h-4 ${n <= ratings[cat.key] ? 'fill-amber-500' : ''}`} />
+                  </button>
+                ))}
+              </div>
+            </div>)}
           </div>
           <textarea value={ratingComment} onChange={e => setRatingComment(e.target.value)}
             placeholder="أكتب تعليقك (اختياري)"
             className="w-full p-2 text-sm border border-amber-200 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-amber-500 mb-2" rows={2} />
           <div className="flex gap-2">
             <button onClick={async () => {
-              if (!ratingValue) return toast.error('اختر تقييماً');
+              if (!ratings.clean || !ratings.services || !ratings.ownerBehavior || !ratings.experience) return toast.error('قيّم جميع الفئات');
               setSubmittingRating(true);
               try {
-                await addPropertyRating({ reservationId: r.id, cleanRating: ratingValue, servicesRating: ratingValue, ownerBehaviorRating: ratingValue, experienceRating: ratingValue, comment: ratingComment || null });
+                await addPropertyRating({ reservationId: r.id, cleanRating: ratings.clean, servicesRating: ratings.services, ownerBehaviorRating: ratings.ownerBehavior, experienceRating: ratings.experience, comment: ratingComment || null });
                 toast.success('تم إرسال التقييم');
                 setShowRating(false);
-                setRatingValue(0);
+                setRatings({ clean: 0, services: 0, ownerBehavior: 0, experience: 0 });
                 setRatingComment('');
               } catch (e) { toast.error(e?.message || 'فشل إرسال التقييم'); }
               finally { setSubmittingRating(false); }
@@ -194,7 +204,7 @@ function ReservationCard({ r, onViewDetails, onPay, payingId }) {
               className="flex-1 bg-amber-500 text-white py-1.5 rounded-lg text-sm font-medium hover:bg-amber-600 transition-colors disabled:bg-gray-300">
               {submittingRating ? 'جاري الإرسال...' : 'إرسال التقييم'}
             </button>
-            <button onClick={() => { setShowRating(false); setRatingValue(0); setRatingComment(''); }}
+            <button onClick={() => { setShowRating(false); setRatings({ clean: 0, services: 0, ownerBehavior: 0, experience: 0 }); setRatingComment(''); }}
               className="px-4 py-1.5 bg-gray-200 text-gray-700 rounded-lg text-sm hover:bg-gray-300 transition-colors">إلغاء</button>
           </div>
         </div>}