From a0a78079c5122fd94b8314200b0e0e8cd485d487 Mon Sep 17 00:00:00 2001
From: mouazkh <mouazalkhatib2013@gmail.com>
Date: Tue, 26 May 2026 21:49:22 +0300
Subject: [PATCH] added the descption

---
 app/reservations/page.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/reservations/page.js b/app/reservations/page.js
index b6389ac..e90a27a 100644
--- a/app/reservations/page.js
+++ b/app/reservations/page.js
@@ -9,7 +9,7 @@ import {
 } from 'lucide-react';
 import toast, { Toaster } from 'react-hot-toast';
 import AuthService from '../services/AuthService';
-import { getUserReservations, payDeposit } from '../utils/api';
+import { getRentProperty, getUserReservations, payDeposit } from '../utils/api';
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api';
 
@@ -39,7 +39,10 @@ function StatusBadge({ code }) {
 
 async function enrich(reservation) {
   if (!reservation.propertyId) return reservation;
-  reservation._prop = reservation.property ?? null;
+  try {
+    const prop = await getRentProperty(reservation.propertyId);
+    reservation._prop = prop?.propertyInformation ?? prop ?? null;
+  } catch { /* skip */ }
   return reservation;
 }
 
@@ -112,9 +115,9 @@ function ReservationCard({ r, onViewDetails, onPay, payingId }) {
   const beds = propBeds(p, r);
   const baths = propBaths(p, r);
   const isOwnerConfirmed = STATUS_MAP[r.status] === 'ownerConfirmed';
-  const hasTimeWindow = r.ownerApprovalDate && r.allowedPaymentPeriod;
+  const hasTimeWindow = r.ownerApprovalDate && p?.allowedPaymentPeriod;
   const deadline = hasTimeWindow
-    ? new Date(r.ownerApprovalDate).getTime() + parseTimeSpan(r.allowedPaymentPeriod)
+    ? new Date(r.ownerApprovalDate).getTime() + parseTimeSpan(p.allowedPaymentPeriod)
     : null;
   const isExpired = deadline ? Date.now() > deadline : false;
   const isPaying = payingId === r.id;
@@ -150,7 +153,7 @@ function ReservationCard({ r, onViewDetails, onPay, payingId }) {
             <span className="text-sm text-blue-800 font-medium flex items-center gap-1"><Timer className="w-4 h-4"/> متبقي للدفع:</span>
             <CountdownTimer deadline={deadline} />
           </div>
-          <div className="text-xs text-blue-600">مدة الدفع: {formatWindowDuration(r.allowedPaymentPeriod)}</div>
+          <div className="text-xs text-blue-600">مدة الدفع: {formatWindowDuration(p.allowedPaymentPeriod)}</div>
         </div>}
         <div className="flex gap-3 pt-3 border-t border-gray-100">
           <button onClick={() => onViewDetails(r)}
@@ -171,9 +174,9 @@ function DetailsModal({ r, isOpen, onClose, onPay, payingId }) {
   if (!isOpen || !r) return null;
   const p = r._prop;
   const isOwnerConfirmed = STATUS_MAP[r.status] === 'ownerConfirmed';
-  const hasTimeWindow = r.ownerApprovalDate && r.allowedPaymentPeriod;
+  const hasTimeWindow = r.ownerApprovalDate && p?.allowedPaymentPeriod;
   const deadline = hasTimeWindow
-    ? new Date(r.ownerApprovalDate).getTime() + parseTimeSpan(r.allowedPaymentPeriod)
+    ? new Date(r.ownerApprovalDate).getTime() + parseTimeSpan(p.allowedPaymentPeriod)
     : null;
   const isExpired = deadline ? Date.now() > deadline : false;
   const isPaying = payingId === r.id;
@@ -217,7 +220,7 @@ function DetailsModal({ r, isOpen, onClose, onPay, payingId }) {
               <span className="text-blue-800 font-medium flex items-center gap-2"><Timer className="w-5 h-5"/> متبقي للدفع:</span>
               <CountdownTimer deadline={deadline} />
             </div>
-            <div className="text-xs text-blue-600 mb-3">مدة الدفع: {formatWindowDuration(r.allowedPaymentPeriod)}</div>
+            <div className="text-xs text-blue-600 mb-3">مدة الدفع: {formatWindowDuration(p.allowedPaymentPeriod)}</div>
             {!isExpired && <button onClick={() => { onPay(r); onClose(); }} disabled={isPaying}
               className={`w-full py-2 rounded-xl font-medium transition-colors flex items-center justify-center gap-2 ${isPaying ? 'bg-gray-300 text-gray-500 cursor-not-allowed' : 'bg-amber-500 text-white hover:bg-amber-600'}`}>
               {isPaying ? <Loader2 className="w-5 h-5 animate-spin"/> : <CreditCard className="w-5 h-5"/>} {isPaying ? 'جاري الدفع...' : 'ادفع الآن'}