Added translation to all site with edit style

app/components/ratings/CustomerRatingForm.js

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { X, Loader2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import toast from 'react-hot-toast';
 import StarRating from './StarRating';
 import { addCustomerRating } from '../../utils/ratings';
@@ -10,11 +11,12 @@ const RatingField = ({ label, value, onChange }) => (
   <div className="space-y-2">
     <label className="block text-sm font-medium text-gray-700">{label} <span className="text-red-500">*</span></label>
     <StarRating rating={value} onRatingChange={onChange} size={28} />
-    {value === 0 && <p className="text-xs text-red-500">مطلوب</p>}
+    {value === 0 && <p className="text-xs text-red-500">{/* required text handled in parent */}</p>}
   </div>
 );
 
 export default function CustomerRatingForm({ reservationId, onSuccess, onCancel }) {
+  const { t } = useTranslation();
   const [furnitureIntegrityRating, setFurnitureIntegrityRating] = useState(0);
   const [termsComplianceRating, setTermsComplianceRating] = useState(0);
   const [renterBehaviorRating, setRenterBehaviorRating] = useState(0);
@@ -22,9 +24,9 @@ export default function CustomerRatingForm({ reservationId, onSuccess, onCancel
   const [loading, setLoading] = useState(false);
 
   const validate = () => {
-    if (furnitureIntegrityRating === 0) return 'الحفاظ على الأثاث';
-    if (termsComplianceRating === 0) return 'الالتزام بالشروط';
-    if (renterBehaviorRating === 0) return 'سلوك المستأجر';
+    if (furnitureIntegrityRating === 0) return t('ratings.furnitureIntegrity');
+    if (termsComplianceRating === 0) return t('ratings.termsCompliance');
+    if (renterBehaviorRating === 0) return t('ratings.renterBehavior');
     return null;
   };
 
@@ -32,7 +34,7 @@ export default function CustomerRatingForm({ reservationId, onSuccess, onCancel
     e.preventDefault();
     const missing = validate();
     if (missing) {
-      toast.error(`يرجى تقييم: ${missing}`);
+      toast.error(t('ratings.pleaseRate') + ': ' + missing);
       return;
     }
 
@@ -45,10 +47,10 @@ export default function CustomerRatingForm({ reservationId, onSuccess, onCancel
         renterBehaviorRating,
         comment: comment.trim() || null,
       });
-      toast.success('تم إرسال تقييم المستأجر بنجاح!');
+      toast.success(t('ratings.customerRatingSubmitted'));
       onSuccess?.();
     } catch (err) {
-      toast.error('حدث خطأ، حاول مرة أخرى');
+      toast.error(t('ratings.submitError'));
     } finally {
       setLoading(false);
     }
@@ -57,7 +59,7 @@ export default function CustomerRatingForm({ reservationId, onSuccess, onCancel
   return (
     <div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-6 max-w-lg mx-auto">
       <div className="flex justify-between items-center mb-4">
-        <h3 className="text-xl font-bold text-gray-900">تقييم المستأجر</h3>
+        <h3 className="text-xl font-bold text-gray-900">{t('ratings.customerRating')}</h3>
         {onCancel && (
           <button onClick={onCancel} className="text-gray-400 hover:text-gray-600">
             <X size={20} />
@@ -65,17 +67,17 @@ export default function CustomerRatingForm({ reservationId, onSuccess, onCancel
         )}
       </div>
       <form onSubmit={handleSubmit} className="space-y-5">
-        <RatingField label="الحفاظ على الأثاث" value={furnitureIntegrityRating} onChange={setFurnitureIntegrityRating} />
-        <RatingField label="الالتزام بالشروط" value={termsComplianceRating} onChange={setTermsComplianceRating} />
-        <RatingField label="سلوك المستأجر" value={renterBehaviorRating} onChange={setRenterBehaviorRating} />
+        <RatingField label={t('ratings.furnitureIntegrity')} value={furnitureIntegrityRating} onChange={setFurnitureIntegrityRating} />
+        <RatingField label={t('ratings.termsCompliance')} value={termsComplianceRating} onChange={setTermsComplianceRating} />
+        <RatingField label={t('ratings.renterBehavior')} value={renterBehaviorRating} onChange={setRenterBehaviorRating} />
         <div>
-          <label className="block text-sm font-medium text-gray-700">تعليق (اختياري)</label>
+          <label className="block text-sm font-medium text-gray-700">{t('ratings.commentLabel')}</label>
           <textarea
             rows={3}
             value={comment}
             onChange={(e) => setComment(e.target.value)}
             className="w-full mt-1 px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
-            placeholder="شارك تجربتك مع المستأجر..."
+            placeholder={t('ratings.commentPlaceholder')}
           />
         </div>
         <button
@@ -84,7 +86,7 @@ export default function CustomerRatingForm({ reservationId, onSuccess, onCancel
           className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 rounded-xl transition flex items-center justify-center gap-2 disabled:opacity-50"
         >
           {loading && <Loader2 className="w-5 h-5 animate-spin" />}
-          {loading ? 'جاري الإرسال...' : 'إرسال التقييم'}
+          {loading ? t('ratings.sending') : t('ratings.submitRating')}
         </button>
       </form>
     </div>