Added translation to all site with edit style

app/owner/calendar/page.js

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
+import { useTranslation } from 'react-i18next';
 import {
   Calendar,
   ChevronLeft,
@@ -39,13 +40,14 @@ import toast, { Toaster } from 'react-hot-toast';
 import AuthService from '../../services/AuthService';
 
 const MonthlyCalendar = ({ properties, selectedPropertyId, onDateClick, onPropertySelect }) => {
+  const { t } = useTranslation();
   const [currentMonth, setCurrentMonth] = useState(new Date());
   const [selectedDate, setSelectedDate] = useState(null);
   const [viewType, setViewType] = useState('grid');
 
   const monthNames = [
-    'يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو',
-    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    t('calendar.month1'), t('calendar.month2'), t('calendar.month3'), t('calendar.month4'), t('calendar.month5'), t('calendar.month6'),
+    t('calendar.month7'), t('calendar.month8'), t('calendar.month9'), t('calendar.month10'), t('calendar.month11'), t('calendar.month12')
   ];
 
   const daysInMonth = new Date(
@@ -76,17 +78,17 @@ const MonthlyCalendar = ({ properties, selectedPropertyId, onDateClick, onProper
       const totalProperties = properties.length;
       const bookedCount = properties.filter(p => isDateBookedForProperty(date, p)).length;
       
-      if (bookedCount === 0) return { status: 'all_available', label: 'جميع العقارات متاحة', color: 'bg-green-100 text-green-800' };
-      if (bookedCount === totalProperties) return { status: 'all_booked', label: 'جميع العقارات محجوزة', color: 'bg-red-100 text-red-800' };
-      return { status: 'partial', label: `${bookedCount}/${totalProperties} محجوز`, color: 'bg-yellow-100 text-yellow-800' };
+      if (bookedCount === 0) return { status: 'all_available', label: t('calendar.allAvailable'), color: 'bg-green-100 text-green-800' };
+      if (bookedCount === totalProperties) return { status: 'all_booked', label: t('calendar.allBooked'), color: 'bg-red-100 text-red-800' };
+      return { status: 'partial', label: t('calendar.bookedCount', { count: bookedCount, total: totalProperties }), color: 'bg-yellow-100 text-yellow-800' };
     } else {
       const property = properties.find(p => p.id === selectedPropertyId);
-      if (!property) return { status: 'no_property', label: 'غير متاح', color: 'bg-gray-100 text-gray-500' };
+      if (!property) return { status: 'no_property', label: t('calendar.notAvailable'), color: 'bg-gray-100 text-gray-500' };
       
       const isBooked = isDateBookedForProperty(date, property);
       return {
         status: isBooked ? 'booked' : 'available',
-        label: isBooked ? 'محجوز' : 'متاح',
+        label: isBooked ? t('calendar.booked') : t('calendar.available'),
         color: isBooked ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'
       };
     }
@@ -171,7 +173,7 @@ const MonthlyCalendar = ({ properties, selectedPropertyId, onDateClick, onProper
               onClick={() => setCurrentMonth(new Date())}
               className="px-4 py-2 bg-amber-500 text-white rounded-xl text-sm hover:bg-amber-600 transition-colors"
             >
-              اليوم
+              {t('calendar.today')}
             </button>
             <div className="flex border border-gray-200 rounded-xl overflow-hidden">
               <button
@@ -192,7 +194,7 @@ const MonthlyCalendar = ({ properties, selectedPropertyId, onDateClick, onProper
       </div>
 
       <div className="grid grid-cols-7 gap-1 p-4 bg-gray-50 border-b border-gray-200">
-        {['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت'].map((day, index) => (
+        {[t('calendar.day1'), t('calendar.day2'), t('calendar.day3'), t('calendar.day4'), t('calendar.day5'), t('calendar.day6'), t('calendar.day7')].map((day, index) => (
           <div key={index} className="text-center text-sm font-medium text-gray-600 py-2">
             {day}
           </div>
@@ -209,23 +211,23 @@ const MonthlyCalendar = ({ properties, selectedPropertyId, onDateClick, onProper
         <div className="flex flex-wrap gap-4 justify-center text-xs">
           <div className="flex items-center gap-2">
             <div className="w-3 h-3 bg-green-100 rounded" />
-            <span className="text-gray-600">متاح</span>
+            <span className="text-gray-600">{t('calendar.available')}</span>
           </div>
           <div className="flex items-center gap-2">
             <div className="w-3 h-3 bg-red-100 rounded" />
-            <span className="text-gray-600">محجوز</span>
+            <span className="text-gray-600">{t('calendar.booked')}</span>
           </div>
           <div className="flex items-center gap-2">
             <div className="w-3 h-3 bg-yellow-100 rounded" />
-            <span className="text-gray-600">محجوز جزئياً</span>
+            <span className="text-gray-600">{t('calendar.partiallyBooked')}</span>
           </div>
           <div className="flex items-center gap-2">
             <div className="w-3 h-3 ring-2 ring-amber-500 rounded" />
-            <span className="text-gray-600">اليوم</span>
+            <span className="text-gray-600">{t('calendar.today')}</span>
           </div>
           <div className="flex items-center gap-2">
             <div className="w-3 h-3 ring-2 ring-blue-500 rounded" />
-            <span className="text-gray-600">محدد</span>
+            <span className="text-gray-600">{t('calendar.selected')}</span>
           </div>
         </div>
       </div>
@@ -234,8 +236,9 @@ const MonthlyCalendar = ({ properties, selectedPropertyId, onDateClick, onProper
 };
 
 const PropertyCalendarList = ({ properties, selectedDate, onPropertyClick }) => {
+  const { t } = useTranslation();
   const formatCurrency = (amount) => {
-    return amount?.toLocaleString() + ' ل.س';
+    return amount?.toLocaleString() + ' ' + t('calendar.syp');
   };
 
   const isDateBooked = (property, date) => {
@@ -264,8 +267,8 @@ const PropertyCalendarList = ({ properties, selectedDate, onPropertyClick }) =>
     return (
       <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-12 text-center">
         <CalendarDays className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-        <h3 className="text-lg font-bold text-gray-700 mb-2">اختر تاريخاً</h3>
-        <p className="text-gray-500">اضغط على أي يوم في التقويم لعرض حالة العقارات في ذلك التاريخ</p>
+        <h3 className="text-lg font-bold text-gray-700 mb-2">{t('calendar.selectDate')}</h3>
+        <p className="text-gray-500">{t('calendar.clickDayHint')}</p>
       </div>
     );
   }
@@ -282,7 +285,7 @@ const PropertyCalendarList = ({ properties, selectedDate, onPropertyClick }) =>
       <div className="p-4 md:p-6 border-b border-gray-200 bg-gradient-to-r from-amber-50 to-amber-100">
         <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
           <CalendarDays className="w-5 h-5 text-amber-500" />
-          حالة العقارات في تاريخ: {formattedDate}
+          {t('calendar.statusForDate')} {formattedDate}
         </h3>
       </div>
 
@@ -306,7 +309,7 @@ const PropertyCalendarList = ({ properties, selectedDate, onPropertyClick }) =>
                     <span className={`px-2 py-1 rounded-lg text-xs font-medium ${
                       isBooked ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'
                     }`}>
-                      {isBooked ? 'محجوز' : 'متاح'}
+                      {isBooked ? t('calendar.booked') : t('calendar.available')}
                     </span>
                   </div>
                   <div className="flex items-center gap-1 text-gray-500 text-sm mb-2">
@@ -316,26 +319,26 @@ const PropertyCalendarList = ({ properties, selectedDate, onPropertyClick }) =>
                   <div className="flex flex-wrap gap-3 text-sm text-gray-600">
                     <div className="flex items-center gap-1">
                       <Bed className="w-4 h-4" />
-                      <span>{property.bedrooms} غرف</span>
+                      <span>{property.bedrooms} {t('calendar.rooms')}</span>
                     </div>
                     <div className="flex items-center gap-1">
                       <Bath className="w-4 h-4" />
-                      <span>{property.bathrooms} حمامات</span>
+                      <span>{property.bathrooms} {t('calendar.bathrooms')}</span>
                     </div>
                     <div className="flex items-center gap-1">
                       <Square className="w-4 h-4" />
-                      <span>{property.area} م²</span>
+                      <span>{property.area} {t('calendar.sqm')}</span>
                     </div>
                   </div>
                 </div>
 
                 <div className="text-right">
                   <div className="text-lg font-bold text-amber-600">{formatCurrency(property.price)}</div>
-                  <div className="text-xs text-gray-500">/يوم</div>
+                  <div className="text-xs text-gray-500">{t('calendar.perDay')}</div>
                   {isBooked && booking && (
                     <div className="mt-2 text-xs text-gray-500">
-                      <div>مستأجر: {booking.tenantName || 'غير معروف'}</div>
-                      <div>من: {booking.startDate} إلى {booking.endDate}</div>
+                      <div>{t('calendar.tenant')}: {booking.tenantName || t('calendar.unknown')}</div>
+                      <div>{t('calendar.from')} {booking.startDate} {t('calendar.to')} {booking.endDate}</div>
                     </div>
                   )}
                 </div>
@@ -349,10 +352,11 @@ const PropertyCalendarList = ({ properties, selectedDate, onPropertyClick }) =>
 };
 
 const PropertyDetailsModal = ({ property, isOpen, onClose }) => {
+  const { t } = useTranslation();
   if (!isOpen || !property) return null;
 
   const formatCurrency = (amount) => {
-    return amount?.toLocaleString() + ' ل.س';
+    return amount?.toLocaleString() + ' ' + t('calendar.syp');
   };
 
   return (
@@ -385,7 +389,7 @@ const PropertyDetailsModal = ({ property, isOpen, onClose }) => {
         <div className="p-6 space-y-6">
           {property.images && property.images.length > 0 && (
             <div>
-              <h3 className="font-bold text-gray-900 mb-3">صور العقار</h3>
+              <h3 className="font-bold text-gray-900 mb-3">{t('calendar.propertyImages')}</h3>
               <div className="grid grid-cols-2 gap-3">
                 {property.images.slice(0, 4).map((image, index) => (
                   <div key={index} className="relative h-32 rounded-lg overflow-hidden bg-gray-100">
@@ -400,28 +404,28 @@ const PropertyDetailsModal = ({ property, isOpen, onClose }) => {
             <div className="bg-gray-50 p-3 rounded-xl text-center">
               <Bed className="w-5 h-5 text-amber-500 mx-auto mb-1" />
               <div className="text-sm font-bold">{property.bedrooms}</div>
-              <div className="text-xs text-gray-500">غرف نوم</div>
+              <div className="text-xs text-gray-500">{t('calendar.bedrooms')}</div>
             </div>
             <div className="bg-gray-50 p-3 rounded-xl text-center">
               <Bath className="w-5 h-5 text-amber-500 mx-auto mb-1" />
               <div className="text-sm font-bold">{property.bathrooms}</div>
-              <div className="text-xs text-gray-500">حمامات</div>
+              <div className="text-xs text-gray-500">{t('calendar.bathrooms')}</div>
             </div>
             <div className="bg-gray-50 p-3 rounded-xl text-center">
               <Square className="w-5 h-5 text-amber-500 mx-auto mb-1" />
               <div className="text-sm font-bold">{property.area}</div>
-              <div className="text-xs text-gray-500">م²</div>
+              <div className="text-xs text-gray-500">{t('calendar.sqm')}</div>
             </div>
             <div className="bg-gray-50 p-3 rounded-xl text-center">
               <DollarSign className="w-5 h-5 text-amber-500 mx-auto mb-1" />
               <div className="text-sm font-bold">{formatCurrency(property.price)}</div>
-              <div className="text-xs text-gray-500">/يوم</div>
+              <div className="text-xs text-gray-500">{t('calendar.perDay')}</div>
             </div>
           </div>
 
           {property.features && property.features.length > 0 && (
             <div>
-              <h3 className="font-bold text-gray-900 mb-3">المميزات</h3>
+              <h3 className="font-bold text-gray-900 mb-3">{t('calendar.features')}</h3>
               <div className="flex flex-wrap gap-2">
                 {property.features.map((feature, index) => (
                   <span key={index} className="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">
@@ -436,14 +440,14 @@ const PropertyDetailsModal = ({ property, isOpen, onClose }) => {
             <div>
               <h3 className="font-bold text-gray-900 mb-3 flex items-center gap-2">
                 <Clock className="w-4 h-4 text-amber-500" />
-                الحجوزات القادمة
+                {t('calendar.upcomingBookings')}
               </h3>
               <div className="space-y-2">
                 {property.bookings.slice(0, 3).map((booking, index) => (
                   <div key={index} className="bg-gray-50 p-3 rounded-lg flex justify-between items-center">
                     <div>
                       <p className="font-medium text-gray-900">{booking.startDate} - {booking.endDate}</p>
-                      <p className="text-xs text-gray-500">مستأجر: {booking.tenantName || 'غير معروف'}</p>
+                      <p className="text-xs text-gray-500">{t('calendar.tenant')}: {booking.tenantName || t('calendar.unknown')}</p>
                     </div>
                     <span className="text-sm font-bold text-amber-600">{formatCurrency(booking.totalAmount)}</span>
                   </div>
@@ -458,13 +462,13 @@ const PropertyDetailsModal = ({ property, isOpen, onClose }) => {
             href={`/owner/properties/edit?id=${property.id}`}
             className="flex-1 bg-amber-500 text-white py-3 rounded-xl text-center font-medium hover:bg-amber-600 transition-colors"
           >
-            تعديل العقار
+            {t('calendar.editProperty')}
           </Link>
           <button
             onClick={() => window.location.href = `/owner/bookings?property=${property.id}`}
             className="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl text-center font-medium hover:bg-gray-200 transition-colors"
           >
-            عرض الحجوزات
+            {t('calendar.viewBookings')}
           </button>
         </div>
       </motion.div>
@@ -473,6 +477,7 @@ const PropertyDetailsModal = ({ property, isOpen, onClose }) => {
 };
 
 export default function OwnerCalendarPage() {
+  const { t, i18n } = useTranslation();
   const router = useRouter();
   const [user, setUser] = useState(null);
   const [properties, setProperties] = useState([]);
@@ -509,44 +514,44 @@ export default function OwnerCalendarPage() {
       const mockProperties = [
         {
           id: 1,
-          title: 'فيلا فاخرة في المزة',
-          location: 'دمشق، المزة',
+          title: t('calendar.mockVillaTitle'),
+          location: t('calendar.mockVillaLocation'),
           bedrooms: 5,
           bathrooms: 4,
           area: 450,
           price: 500000,
-          features: ['مسبح', 'حديقة خاصة', 'موقف سيارات', 'أمن 24/7'],
+          features: [t('swimmingPool'), t('privateGarden'), t('parking'), t('propertyService.security247')],
           images: ['/villa1.jpg'],
           status: 'available',
           bookings: [
-            { startDate: '2024-03-10', endDate: '2024-03-15', totalAmount: 2500000, tenantName: 'أحمد محمد' },
-            { startDate: '2024-03-20', endDate: '2024-03-25', totalAmount: 2500000, tenantName: 'سارة أحمد' }
+            { startDate: '2024-03-10', endDate: '2024-03-15', totalAmount: 2500000, tenantName: t('calendar.mockTenant1') },
+            { startDate: '2024-03-20', endDate: '2024-03-25', totalAmount: 2500000, tenantName: t('calendar.mockTenant2') }
           ]
         },
         {
           id: 2,
-          title: 'شقة حديثة في الشهباء',
-          location: 'حلب، الشهباء',
+          title: t('calendar.mockApartmentTitle'),
+          location: t('calendar.mockApartmentLocation'),
           bedrooms: 3,
           bathrooms: 2,
           area: 180,
           price: 250000,
-          features: ['مطبخ مجهز', 'بلكونة', 'موقف سيارات', 'مصعد'],
+          features: [t('equippedKitchen'), t('balcony'), t('parking'), t('propertyService.elevator')],
           images: ['/apartment1.jpg'],
           status: 'available',
           bookings: [
-            { startDate: '2024-03-05', endDate: '2024-03-08', totalAmount: 750000, tenantName: 'محمد علي' }
+            { startDate: '2024-03-05', endDate: '2024-03-08', totalAmount: 750000, tenantName: t('calendar.mockTenant3') }
           ]
         },
         {
           id: 3,
-          title: 'بيت عائلي في بابا عمرو',
-          location: 'حمص، بابا عمرو',
+          title: t('calendar.mockHouseTitle'),
+          location: t('calendar.mockHouseLocation'),
           bedrooms: 4,
           bathrooms: 3,
           area: 300,
           price: 350000,
-          features: ['حديقة كبيرة', 'موقف سيارات', 'مدفأة', 'كراج'],
+          features: [t('largeGarden'), t('parking'), t('fireplace'), t('garage')],
           images: ['/house1.jpg'],
           status: 'booked',
           bookings: []
@@ -586,14 +591,14 @@ export default function OwnerCalendarPage() {
       <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('calendar.loading')}</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 py-8">
+    <div className="min-h-screen bg-gray-50 py-8" dir={i18n.language === 'ar' ? 'rtl' : 'ltr'}>
       <Toaster position="top-center" reverseOrder={false} />
       
       <PropertyDetailsModal
@@ -609,8 +614,8 @@ export default function OwnerCalendarPage() {
           className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4"
         >
           <div>
-            <h1 className="text-3xl font-bold text-gray-900 mb-2">تقويم العقارات</h1>
-            <p className="text-gray-600">مرحباً {user?.name}، تتبع حالة عقاراتك عبر التقويم</p>
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">{t('calendar.pageTitle')}</h1>
+            <p className="text-gray-600">{t('calendar.welcomeMessage', { name: user?.name })}</p>
           </div>
           
           <div className="flex gap-3">
@@ -619,7 +624,7 @@ export default function OwnerCalendarPage() {
               className="px-4 py-2 bg-white border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors flex items-center gap-2"
             >
               <Filter className="w-5 h-5" />
-              فلترة العقارات
+              {t('calendar.filterProperties')}
               <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
             </button>
             {/* <button className="px-4 py-2 bg-green-600 text-white rounded-xl hover:bg-green-700 transition-colors flex items-center gap-2">
@@ -638,7 +643,7 @@ export default function OwnerCalendarPage() {
           >
             <Building className="w-6 h-6 text-amber-500 mx-auto mb-2" />
             <div className="text-2xl font-bold text-gray-900">{calendarStats.totalProperties}</div>
-            <div className="text-sm text-gray-600">إجمالي العقارات</div>
+            <div className="text-sm text-gray-600">{t('calendar.totalProperties')}</div>
           </motion.div>
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -648,7 +653,7 @@ export default function OwnerCalendarPage() {
           >
             <CheckCircle className="w-6 h-6 text-green-500 mx-auto mb-2" />
             <div className="text-2xl font-bold text-green-600">{calendarStats.availableToday}</div>
-            <div className="text-sm text-gray-600">متاح اليوم</div>
+            <div className="text-sm text-gray-600">{t('calendar.availableToday')}</div>
           </motion.div>
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -658,7 +663,7 @@ export default function OwnerCalendarPage() {
           >
             <XCircle className="w-6 h-6 text-red-500 mx-auto mb-2" />
             <div className="text-2xl font-bold text-red-600">{calendarStats.bookedToday}</div>
-            <div className="text-sm text-gray-600">محجوز اليوم</div>
+            <div className="text-sm text-gray-600">{t('calendar.bookedToday')}</div>
           </motion.div>
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -668,7 +673,7 @@ export default function OwnerCalendarPage() {
           >
             <CalendarDays className="w-6 h-6 text-blue-500 mx-auto mb-2" />
             <div className="text-2xl font-bold text-blue-600">{calendarStats.upcomingBookings}</div>
-            <div className="text-sm text-gray-600">حجوزات قادمة</div>
+            <div className="text-sm text-gray-600">{t('calendar.upcomingBookings')}</div>
           </motion.div>
         </div>
 
@@ -682,13 +687,13 @@ export default function OwnerCalendarPage() {
             >
               <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-4">
                 <div className="flex flex-wrap gap-3 items-center">
-                  <label className="text-sm font-medium text-gray-700">اختر عقاراً:</label>
+                  <label className="text-sm font-medium text-gray-700">{t('calendar.selectProperty')}</label>
                   <select
                     value={selectedPropertyId}
                     onChange={(e) => setSelectedPropertyId(e.target.value)}
                     className="px-4 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
                   >
-                    <option value="all">جميع العقارات</option>
+                    <option value="all">{t('calendar.allProperties')}</option>
                     {properties.map((property) => (
                       <option key={property.id} value={property.id}>{property.title}</option>
                     ))}
@@ -697,7 +702,7 @@ export default function OwnerCalendarPage() {
                     onClick={() => setSelectedPropertyId('all')}
                     className="px-3 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
                   >
-                    إعادة تعيين
+                    {t('calendar.reset')}
                   </button>
                 </div>
               </div>
@@ -729,7 +734,7 @@ export default function OwnerCalendarPage() {
             className="mt-6 text-center text-sm text-gray-500"
           >
             <AlertCircle className="w-4 h-4 inline ml-1" />
-            اضغط على أي عقار لعرض التفاصيل الكاملة
+            {t('calendar.clickPropertyHint')}
           </motion.div>
         )}
       </div>