Added translation to all site with edit style

app/my-rates/page.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { motion } from 'framer-motion';
 import { Star, User, Calendar, MessageSquare, ThumbsUp, Loader2 } from 'lucide-react';
 import toast, { Toaster } from 'react-hot-toast';
@@ -9,10 +9,10 @@ import AuthService from '../services/AuthService';
 import StarRating from '../components/ratings/StarRating';
 
 const RATING_FIELDS = [
-  { key: 'cleanRating', label: 'النظافة' },
-  { key: 'servicesRating', label: 'الخدمات' },
-  { key: 'ownerBehaviorRating', label: 'سلوك المالك' },
-  { key: 'experienceRating', label: 'التجربة العامة' },
+  { key: 'cleanRating', label: 'ratings.cleanliness' },
+  { key: 'servicesRating', label: 'ratings.services' },
+  { key: 'ownerBehaviorRating', label: 'ratings.ownerBehavior' },
+  { key: 'experienceRating', label: 'ratings.experience' },
 ];
 
 function calcOverall(ratings) {
@@ -24,7 +24,7 @@ function calcOverall(ratings) {
   return total / ratings.length;
 }
 
-function RatingCard({ rating }) {
+function RatingCard({ rating, t }) {
   const dateStr = rating.createdAt
     ? new Date(rating.createdAt).toLocaleDateString('ar')
     : null;
@@ -49,7 +49,7 @@ function RatingCard({ rating }) {
       <div className="space-y-3 mb-4">
         {RATING_FIELDS.map(({ key, label }) => (
           <div key={key} className="flex items-center justify-between">
-            <span className="text-sm text-gray-600">{label}</span>
+            <span className="text-sm text-gray-600">{t(label)}</span>
             <div className="flex items-center gap-2">
               <StarRating rating={Number(rating[key]) || 0} size={18} readOnly />
               <span className="text-sm font-medium text-gray-700 w-6 text-left">
@@ -71,18 +71,19 @@ function RatingCard({ rating }) {
 }
 
 export default function MyRatesPage() {
+  const { t } = useTranslation();
   const [ratings, setRatings] = useState([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const user = AuthService.getUser();
     if (!user || !user.id) {
-      toast.error('يرجى تسجيل الدخول أولاً');
+      toast.error(t('auth.loginRequired'));
       setLoading(false);
       return;
     }
     loadRatings(user.id);
-  }, []);
+  }, [t]);
 
   async function loadRatings(userId) {
     try {
@@ -91,7 +92,7 @@ export default function MyRatesPage() {
       setRatings(list);
     } catch (err) {
       console.error(err);
-      toast.error('فشل تحميل التقييمات');
+      toast.error(t('ratings.loadError'));
       setRatings([]);
     } finally {
       setLoading(false);
@@ -113,8 +114,8 @@ export default function MyRatesPage() {
       <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">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">تقييماتي</h1>
-          <p className="text-gray-600">التقييمات التي تلقيتها من مالكي العقارات</p>
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">{t('ratings.myRatings')}</h1>
+          <p className="text-gray-600">{t('ratings.receivedFromOwners')}</p>
         </motion.div>
 
         {ratings.length > 0 && (
@@ -125,9 +126,9 @@ export default function MyRatesPage() {
               <StarRating rating={Math.round(overall)} size={24} readOnly />
             </div>
             <div className="text-4xl font-bold">{overall.toFixed(1)}</div>
-            <div className="text-amber-100 text-sm mt-1">المعدل العام</div>
+            <div className="text-amber-100 text-sm mt-1">{t('ratings.overallAverage')}</div>
             <div className="text-amber-100 text-xs mt-2">
-              بناءً على {ratings.length} {ratings.length === 1 ? 'تقييم' : 'تقييمات'}
+              {t('ratings.basedOn')} {ratings.length} {ratings.length === 1 ? t('ratings.review') : t('ratings.reviews')}
             </div>
           </motion.div>
         )}
@@ -136,13 +137,13 @@ export default function MyRatesPage() {
           <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">
             <Star className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-            <h3 className="text-xl font-bold text-gray-900 mb-2">لا توجد تقييمات</h3>
-            <p className="text-gray-500">لم تقم باستئجار أي عقار بعد لتتلقى تقييمات</p>
+            <h3 className="text-xl font-bold text-gray-900 mb-2">{t('ratings.noRatings')}</h3>
+            <p className="text-gray-500">{t('ratings.noRatingsDescription')}</p>
           </motion.div>
         ) : (
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
             {ratings.map((r, i) => (
-              <RatingCard key={r.id || i} rating={r} />
+              <RatingCard key={r.id || i} rating={r} t={t} />
             ))}
           </div>
         )}