Added translation to all site with edit style

app/payments/page.js

@@ -1,8 +1,9 @@
-'use client';
+"use client";
 
 import { useEffect, useState, useCallback } from 'react';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import {
   Home,
   MapPin,
@@ -66,7 +67,7 @@ const PAYMENT_METHODS = [
     desc: 'سيتم تفعيل الدفع الإلكتروني والتحويل لاحقاً',
     icon: CreditCard,
     active: false,
-  },
+  }
 ];
 
 function formatCurrency(v, sign = 'ل.س') {
@@ -81,6 +82,7 @@ function formatDate(date) {
 }
 
 export default function PaymentsPage() {
+  const { t } = useTranslation();
   const [reservations, setReservations] = useState([]);
   const [loading, setLoading] = useState(true);
   const [payingId, setPayingId] = useState(null);
@@ -121,7 +123,7 @@ export default function PaymentsPage() {
       setReservations(mapped);
     } catch (err) {
       console.error(err);
-      toast.error('فشل تحميل المدفوعات');
+      toast.error(t('payments.loadingTransactions'));
     } finally {
       setLoading(false);
     }
@@ -141,10 +143,10 @@ export default function PaymentsPage() {
     setPayingId(reservation.id);
     try {
       await payDeposit({ reservationId: reservation.id });
-      toast.success('تم دفع السلفة بنجاح!');
+      toast.success(t('payments.depositPaidSuccess'));
       loadReservations();
     } catch (err) {
-      toast.error(err?.message || 'فشل عملية الدفع');
+      toast.error(err?.message || t('payments.paymentFailed'));
     } finally {
       setPayingId(null);
     }
@@ -171,16 +173,16 @@ export default function PaymentsPage() {
           <div className="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6">
             <Lock className="w-10 h-10 text-amber-600" />
           </div>
-          <h2 className="text-2xl font-bold text-gray-900 mb-3">المدفوعات</h2>
+          <h2 className="text-2xl font-bold text-gray-900 mb-3">{t('payments.title')}</h2>
           <p className="text-gray-600 leading-relaxed mb-8">
-            دفعاتك مرتبطة بحاسبك لذلك يرجى تسجيل الدخول أولاً
+            {t('payments.loginRequiredDesc')}
           </p>
           <Link
             href="/login"
             className="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-8 py-3 rounded-2xl text-lg font-semibold transition shadow-lg shadow-amber-200"
           >
             <LogIn className="w-5 h-5" />
-            تسجيل الدخول
+            {t('login')}
           </Link>
         </motion.div>
       </div>
@@ -199,15 +201,15 @@ export default function PaymentsPage() {
           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('payments.title')}</h1>
+          <p className="text-gray-600">{t('payments.description')}</p>
         </motion.div>
 
         {payables.length > 0 && (
           <div className="space-y-6 mb-10">
             <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
               <Wallet className="w-5 h-5 text-amber-500" />
-              المدفوعات المطلوبة
+              {t('payments.payablesTitle')}
             </h2>
             {payables.map((r, i) => (
               <PaymentCard
@@ -226,7 +228,7 @@ export default function PaymentsPage() {
           <div className="space-y-4">
             <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
               <Clock className="w-5 h-5 text-gray-500" />
-              الحجوزات السابقة
+              {t('payments.previousReservationsTitle')}
             </h2>
             {others.map((r, i) => {
               const statusKey = STATUS_MAP[r.status] || 'pending';
@@ -263,137 +265,138 @@ export default function PaymentsPage() {
           </div>
         )}
 
-        {reservations.length === 0 && (
-          <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"
-          >
-            <CreditCard className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-            <h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد معاملات مالية</h3>
-            <p className="text-gray-500">ستظهر هنا مدفوعاتك للحجوزات</p>
-          </motion.div>
-        )}
+{reservations.length === 0 && (
+           <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"
+           >
+             <CreditCard className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+             <h3 className="text-xl font-bold text-gray-700 mb-2">{t('payments.noTransactions')}</h3>
+             <p className="text-gray-500">{t('payments.noTransactionsDesc')}</p>
+           </motion.div>
+         )}
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  }
 
-function PaymentCard({ reservation, payingId, selectedPayment, onSelectPayment, onPay }) {
-  const r = reservation;
-  const amount = r.depositAmount || r.totalPrice || 0;
-  const [showCashDialog, setShowCashDialog] = useState(false);
+  // eslint-disable-next-line react/prop-types
+  function PaymentCard({ reservation, payingId, selectedPayment, onSelectPayment, onPay }) {
+    const r = reservation;
+    const amount = r.depositAmount || r.totalPrice || 0;
+    const [showCashDialog, setShowCashDialog] = useState(false);
 
-  return (
-    <>
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="bg-white rounded-3xl shadow-md border border-gray-200 overflow-hidden"
-      >
-      {/* Property details */}
-      <div className="p-6 border-b border-gray-100">
-        <div className="flex items-start gap-4 mb-4">
-          <div className="w-14 h-14 bg-amber-100 rounded-2xl flex items-center justify-center shrink-0">
-            <Home className="w-7 h-7 text-amber-600" />
+    return (
+      <>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-white rounded-3xl shadow-md border border-gray-200 overflow-hidden"
+        >
+        {/* Property details */}
+        <div className="p-6 border-b border-gray-100">
+          <div className="flex items-start gap-4 mb-4">
+            <div className="w-14 h-14 bg-amber-100 rounded-2xl flex items-center justify-center shrink-0">
+              <Home className="w-7 h-7 text-amber-600" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <h3 className="text-xl font-bold text-gray-900 mb-1">
+                {r.propertyName}
+              </h3>
+              {(r.propertyAddress || r.propertyCity) && (
+                <p className="text-sm text-gray-500 flex items-center gap-1">
+                  <MapPin className="w-3.5 h-3.5" />
+                  {[r.propertyCity, r.propertyAddress].filter(Boolean).join(' - ')}
+                </p>
+              )}
+            </div>
           </div>
-          <div className="min-w-0 flex-1">
-            <h3 className="text-xl font-bold text-gray-900 mb-1">
-              {r.propertyName}
-            </h3>
-            {(r.propertyAddress || r.propertyCity) && (
-              <p className="text-sm text-gray-500 flex items-center gap-1">
-                <MapPin className="w-3.5 h-3.5" />
-                {[r.propertyCity, r.propertyAddress].filter(Boolean).join(' - ')}
-              </p>
-            )}
+
+          <div className="flex items-center gap-4 text-sm text-gray-600">
+            <span className="flex items-center gap-1.5">
+              <Calendar className="w-4 h-4 text-gray-400" />
+              {formatDate(r.startDate)} - {formatDate(r.endDate)}
+            </span>
+            <span className="flex items-center gap-1.5">
+              <Clock className="w-4 h-4 text-gray-400" />
+              #{r.reservationId || r.id}
+            </span>
           </div>
         </div>
 
-        <div className="flex items-center gap-4 text-sm text-gray-600">
-          <span className="flex items-center gap-1.5">
-            <Calendar className="w-4 h-4 text-gray-400" />
-            {formatDate(r.startDate)} - {formatDate(r.endDate)}
-          </span>
-          <span className="flex items-center gap-1.5">
-            <Clock className="w-4 h-4 text-gray-400" />
-            #{r.reservationId || r.id}
-          </span>
+        {/* Deposit amount */}
+        <div className="px-6 py-5 border-b border-gray-100">
+          <div className="text-center">
+            <p className="text-sm text-gray-500 mb-1">{t('payments.depositAmount')}</p>
+            <p className="text-4xl font-bold text-amber-600">
+              {formatCurrency(amount, r.currencySign)}
+            </p>
+            <p className="text-xs text-gray-400 mt-2">
+              {t('payments.depositPaidToPlatform')}
+            </p>
+          </div>
         </div>
-      </div>
 
-      {/* Deposit amount */}
-      <div className="px-6 py-5 border-b border-gray-100">
-        <div className="text-center">
-          <p className="text-sm text-gray-500 mb-1">مبلغ التأمين (الرعبون)</p>
-          <p className="text-4xl font-bold text-amber-600">
-            {formatCurrency(amount, r.currencySign)}
-          </p>
-          <p className="text-xs text-gray-400 mt-2">
-            يتم دفع التأمين إلى المنصة وليس إلى المالك
-          </p>
+        {/* Payment methods note */}
+        <div className="px-6 py-4 bg-amber-50 border-b border-amber-100">
+          <div className="flex items-start gap-3">
+            <Info className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
+            <p className="text-sm text-amber-800 leading-relaxed">
+              {t('payments.cashOnlyNotice')}
+            </p>
+          </div>
         </div>
-      </div>
 
-      {/* Payment methods note */}
-      <div className="px-6 py-4 bg-amber-50 border-b border-amber-100">
-        <div className="flex items-start gap-3">
-          <Info className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
-          <p className="text-sm text-amber-800 leading-relaxed">
-            الدفع النقدي فقط هو المتاح. سيتم تفعيل الدفع الإلكتروني والتحويل لاحقاً.
-          </p>
-        </div>
-      </div>
-
-      {/* Payment method options */}
-      <div className="px-6 py-5 border-b border-gray-100">
-        <p className="text-sm font-bold text-gray-700 mb-3">طريقة الدفع</p>
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          {PAYMENT_METHODS.map((method) => {
-            const isSelected = selectedPayment === method.id;
-            const Icon = method.icon;
-            return (
-              <button
-                key={method.id}
-                type="button"
-                disabled={!method.active}
-                onClick={() => method.active && onSelectPayment(method.id)}
-                className={`relative flex items-start gap-3 p-4 rounded-2xl border-2 text-right transition-all ${
-                  !method.active
-                    ? 'border-gray-100 bg-gray-50 opacity-50 cursor-not-allowed'
-                    : isSelected
-                      ? 'border-amber-500 bg-amber-50 shadow-sm'
-                      : 'border-gray-200 bg-white hover:border-amber-300 cursor-pointer'
-                }`}
-              >
-                <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${
-                  isSelected ? 'bg-amber-500 text-white' : 'bg-gray-100 text-gray-500'
-                }`}>
-                  <Icon className="w-5 h-5" />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <p className={`text-sm font-bold ${isSelected ? 'text-amber-900' : 'text-gray-800'}`}>
-                    {method.label}
-                  </p>
-                  <p className="text-xs text-gray-500 mt-0.5 leading-relaxed">
-                    {method.desc}
-                  </p>
-                  {!method.active && (
-                    <span className="inline-block mt-1 text-[10px] font-medium text-gray-400 bg-gray-200 px-2 py-0.5 rounded-full">
-                      غير متاح
-                    </span>
-                  )}
-                </div>
-                {isSelected && (
-                  <div className="absolute top-2 left-2 w-5 h-5 bg-amber-500 rounded-full flex items-center justify-center">
-                    <Check className="w-3 h-3 text-white" />
+        {/* Payment method options */}
+        <div className="px-6 py-5 border-b border-gray-100">
+          <p className="text-sm font-bold text-gray-700 mb-3">{t('payments.paymentMethodLabel')}</p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {PAYMENT_METHODS.map((method) => {
+              const isSelected = selectedPayment === method.id;
+              const Icon = method.icon;
+              return (
+                <button
+                  key={method.id}
+                  type="button"
+                  disabled={!method.active}
+                  onClick={() => method.active && onSelectPayment(method.id)}
+                  className={`relative flex items-start gap-3 p-4 rounded-2xl border-2 text-right transition-all ${
+                    !method.active
+                      ? 'border-gray-100 bg-gray-50 opacity-50 cursor-not-allowed'
+                      : isSelected
+                        ? 'border-amber-500 bg-amber-50 shadow-sm'
+                        : 'border-gray-200 bg-white hover:border-amber-300 cursor-pointer'
+                  }`}
+                >
+                  <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${
+                    isSelected ? 'bg-amber-500 text-white' : 'bg-gray-100 text-gray-500'
+                  }`}>
+                    <Icon className="w-5 h-5" />
                   </div>
-                )}
-              </button>
-            );
-          })}
+                  <div className="min-w-0 flex-1">
+                    <p className={`text-sm font-bold ${isSelected ? 'text-amber-900' : 'text-gray-800'}`}>
+                      {method.label}
+                    </p>
+                    <p className="text-xs text-gray-500 mt-0.5 leading-relaxed">
+                      {method.desc}
+                    </p>
+                    {!method.active && (
+                      <span className="inline-block mt-1 text-[10px] font-medium text-gray-400 bg-gray-200 px-2 py-0.5 rounded-full">
+                        {t('validation.notAvailable', { defaultValue: 'غير متاح' })}
+                      </span>
+                    )}
+                  </div>
+                  {isSelected && (
+                    <div className="absolute top-2 left-2 w-5 h-5 bg-amber-500 rounded-full flex items-center justify-center">
+                      <Check className="w-3 h-3 text-white" />
+                    </div>
+                  )}
+                </button>
+              );
+            })}
+          </div>
         </div>
-      </div>
 
       {/* Pay button */}
       <div className="px-6 py-5 border-b border-gray-100">
@@ -408,12 +411,12 @@ function PaymentCard({ reservation, payingId, selectedPayment, onSelectPayment,
           {payingId === r.id ? (
             <>
               <Loader2 className="w-5 h-5 animate-spin" />
-              جاري الدفع...
+              {t('payments.processingPayment')}
             </>
           ) : (
             <>
               <Banknote className="w-5 h-5" />
-              دفع التأمين ({formatCurrency(amount, r.currencySign)})
+              {t('payments.payButton', { amount: formatCurrency(amount, r.currencySign) })}
             </>
           )}
         </motion.button>
@@ -421,14 +424,14 @@ function PaymentCard({ reservation, payingId, selectedPayment, onSelectPayment,
 
       {/* Cash pay button */}
       <div className="px-6 py-4 border-b border-gray-100">
-        <button
-          type="button"
-          onClick={() => setShowCashDialog(true)}
-          className="w-full bg-white border-2 border-amber-200 hover:border-amber-400 text-amber-700 font-bold py-3 px-6 rounded-2xl text-base transition-all flex items-center justify-center gap-2"
-        >
-          <Building className="w-5 h-5" />
-          سأدفع نقداً
-        </button>
+<button
+           type="button"
+           onClick={() => setShowCashDialog(true)}
+           className="w-full bg-white border-2 border-amber-200 hover:border-amber-400 text-amber-700 font-bold py-3 px-6 rounded-2xl text-base transition-all flex items-center justify-center gap-2"
+         >
+           <Building className="w-5 h-5" />
+           {t('payments.payCashButton')}
+         </button>
       </div>
 
       {/* Cash payment dialog */}
@@ -442,15 +445,15 @@ function PaymentCard({ reservation, payingId, selectedPayment, onSelectPayment,
             <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-5">
               <Clock className="w-8 h-8 text-amber-600" />
             </div>
-            <h3 className="text-xl font-bold text-gray-900 mb-3">الدفع النقدي قيد الانتظار</h3>
+            <h3 className="text-xl font-bold text-gray-900 mb-3">{t('payments.cashPendingDialogTitle')}</h3>
             <p className="text-gray-600 leading-relaxed mb-6">
-              اذهب إلى موقع المنصة وادفع العربون.
+              {t('payments.cashPendingDialogDesc1')}
               <br />
-              ستقوم المنصة بتأكيد الدفع بعد استلام المبلغ.
+              {t('payments.cashPendingDialogDesc2')}
             </p>
             <div className="bg-gray-50 rounded-2xl p-4 mb-6 text-right">
-              <p className="text-sm font-bold text-gray-800 mb-1">موقع المنصة</p>
-              <p className="text-sm text-gray-600">مكتب المنصة: أبو رمانة، شارع المالكي، دمشق</p>
+              <p className="text-sm font-bold text-gray-800 mb-1">{t('payments.platformOfficeLabel')}</p>
+              <p className="text-sm text-gray-600">{t('payments.platformOfficeFullAddress')}</p>
               <p className="text-sm text-gray-600 flex items-center gap-1 mt-1" dir="ltr">
                 <Phone className="w-3.5 h-3.5" />
                 +963567823411
@@ -462,13 +465,13 @@ function PaymentCard({ reservation, payingId, selectedPayment, onSelectPayment,
                 onClick={() => setShowCashDialog(false)}
                 className="w-full px-5 py-3 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors font-medium"
               >
-                إغلاق
+                {t('payments.closeButton')}
               </button>
               <Link
                 href="/reservations"
                 className="w-full px-5 py-3 rounded-xl bg-amber-500 text-white font-semibold text-center hover:bg-amber-600 transition-colors"
               >
-                حجوزاتي
+                {t('payments.myReservationsLink')}
               </Link>
             </div>
           </motion.div>
@@ -480,9 +483,9 @@ function PaymentCard({ reservation, payingId, selectedPayment, onSelectPayment,
         <div className="flex items-start gap-3">
           <Landmark className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
           <div>
-            <p className="text-sm font-bold text-gray-800 mb-1">موقع الدفع النقدي</p>
+            <p className="text-sm font-bold text-gray-800 mb-1">{t('payments.cashPaymentLocationLabel')}</p>
             <p className="text-sm text-gray-600 leading-relaxed">
-              مكتب المنصة: أبو رمانة، شارع المالكي، دمشق
+              {t('payments.platformOfficeFullAddress')}
             </p>
             <p className="text-sm text-gray-600 flex items-center gap-1 mt-1">
               <Phone className="w-3.5 h-3.5" />