Added translation to all site with edit style

app/profile/page.js

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import { useTranslation } from "react-i18next";
 import {
   User,
   Mail,
@@ -24,6 +25,7 @@ import AuthService from "../services/AuthService";
 import { getCustomerByUserId, getOwnerByUserId } from "../utils/api";
 
 export default function ProfilePage() {
+  const { t, i18n } = useTranslation();
   const router = useRouter();
   const [user, setUser] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -76,11 +78,11 @@ export default function ProfilePage() {
               bio: profile.bio || "",
               location: profile.address || profile.location || "",
               joinedDate: profile.createdAt
-                ? new Date(profile.createdAt).toLocaleDateString("ar-SA", {
+                ? new Date(profile.createdAt).toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
                     month: "long",
                     year: "numeric",
                   })
-                : new Date().toLocaleDateString("ar-SA", {
+                : new Date().toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
                     month: "long",
                     year: "numeric",
                   }),
@@ -107,7 +109,7 @@ export default function ProfilePage() {
             whatsapp: "",
             bio: "",
             location: "",
-            joinedDate: new Date().toLocaleDateString("ar-SA", {
+            joinedDate: new Date().toLocaleDateString(i18n.language === 'ar' ? 'ar-SA' : 'en-US', {
               month: "long",
               year: "numeric",
             }),
@@ -144,7 +146,7 @@ export default function ProfilePage() {
     setFormData(updatedData);
     localStorage.setItem("userProfile", JSON.stringify(updatedData));
     setEditingBio(false);
-    toast.success("تم تحديث نبذة عني بنجاح");
+    toast.success(t('bio-updated-success'));
   };
 
   const fadeInUp = {
@@ -158,14 +160,14 @@ export default function ProfilePage() {
       <div className="min-h-screen bg-gray-50 flex items-center justify-center">
         <div className="text-center">
           <Loader2 className="w-12 h-12 text-amber-500 animate-spin mx-auto mb-4" />
-          <p className="text-gray-600">جاري تحميل الملف الشخصي...</p>
+          <p className="text-gray-600">{t('loading-profile')}</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
+    <div dir={i18n.language === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen bg-gray-50 py-8">
       <Toaster position="top-center" reverseOrder={false} />
 
       <div className="container mx-auto px-4 max-w-4xl">
@@ -179,7 +181,7 @@ export default function ProfilePage() {
             className="flex items-center gap-2 text-gray-600 hover:text-amber-600 transition-colors"
           >
             <ArrowLeft className="w-5 h-5" />
-            <span>العودة للرئيسية</span>
+            <span>{t('backToHome')}</span>
           </Link>
         </motion.div>
 
@@ -229,12 +231,12 @@ export default function ProfilePage() {
 
               <div className="flex items-center justify-center gap-2 text-gray-500 mt-2">
                 <MapPin className="w-4 h-4" />
-                <span>{formData.location || "الموقع غير محدد"}</span>
+                <span>{formData.location || t('addressNotSpecified')}</span>
               </div>
 
               <div className="flex items-center justify-center gap-2 text-gray-500 mt-1">
                 <Calendar className="w-4 h-4" />
-                <span>عضو منذ {formData.joinedDate}</span>
+                <span>                {t('member-since')} {formData.joinedDate}</span>
               </div>
             </div>
 
@@ -242,7 +244,7 @@ export default function ProfilePage() {
               <div className="bg-gray-50 p-4 rounded-xl group">
                 <div className="flex justify-between items-start mb-2">
                   <label className="text-sm font-medium text-gray-600">
-                    البريد الإلكتروني
+                    {t('emailLabel')}
                   </label>
                 </div>
                 <div className="flex items-center gap-2 text-gray-900">
@@ -254,41 +256,41 @@ export default function ProfilePage() {
               <div className="bg-gray-50 p-4 rounded-xl group">
                 <div className="flex justify-between items-start mb-2">
                   <label className="text-sm font-medium text-gray-600">
-                    رقم الهاتف
+                    {t('phoneLabel')}
                   </label>
                 </div>
                 <div className="flex items-center gap-2 text-gray-900">
                   <Phone className="w-5 h-5 text-gray-400" />
-                  <span>{formData.phone || "غير محدد"}</span>
+                  <span>{formData.phone || t('not-specified')}</span>
                 </div>
               </div>
 
               <div className="bg-gray-50 p-4 rounded-xl group">
                 <div className="flex justify-between items-start mb-2">
                   <label className="text-sm font-medium text-gray-600">
-                    رقم الواتساب
+                    {t('whatsapp-label')}
                   </label>
                 </div>
                 <div className="flex items-center gap-2 text-gray-900">
                   <MessageCircle className="w-5 h-5 text-gray-400" />
-                  <span>{formData.whatsapp || "غير محدد"}</span>
+                  <span>{formData.whatsapp || t('not-specified')}</span>
                 </div>
               </div>
 
               <div className="bg-gray-50 p-4 rounded-xl">
-                <label className="block text-sm font-medium text-gray-600 mb-2">
-                  نوع الحساب
-                </label>
+                  <label className="block text-sm font-medium text-gray-600 mb-2">
+                    {t('account-type')}
+                  </label>
                 <div className="flex items-center gap-2">
                   {user?.role === "owner" ? (
                     <>
                       <Building className="w-5 h-5 text-amber-500" />
-                      <span className="text-gray-900">مالك عقار</span>
+                      <span className="text-gray-900">{t('property-owner')}</span>
                     </>
                   ) : (
                     <>
                       <Home className="w-5 h-5 text-blue-500" />
-                      <span className="text-gray-900">مستأجر</span>
+                      <span className="text-gray-900">{t('customer')}</span>
                     </>
                   )}
                 </div>
@@ -348,15 +350,15 @@ export default function ProfilePage() {
               <div className="grid grid-cols-3 gap-4 mt-6">
                 <div className="bg-amber-50 p-4 rounded-xl text-center">
                   <div className="text-2xl font-bold text-amber-600">12</div>
-                  <div className="text-xs text-gray-600">عقارات</div>
+                  <div className="text-xs text-gray-600">{t('propertiesListed')}</div>
                 </div>
                 <div className="bg-blue-50 p-4 rounded-xl text-center">
                   <div className="text-2xl font-bold text-blue-600">8</div>
-                  <div className="text-xs text-gray-600">حجوزات نشطة</div>
+                  <div className="text-xs text-gray-600">{t('citiesCovered')}</div>
                 </div>
                 <div className="bg-green-50 p-4 rounded-xl text-center">
                   <div className="text-2xl font-bold text-green-600">4.8</div>
-                  <div className="text-xs text-gray-600">تقييم</div>
+                  <div className="text-xs text-gray-600">{t('customerSatisfaction')}</div>
                 </div>
               </div>
             )}