From 085c60ec3327d1f49c842e85b9928176c601a4ad Mon Sep 17 00:00:00 2001
From: mouazkh <mouazalkhatib2013@gmail.com>
Date: Mon, 25 May 2026 23:55:02 +0300
Subject: [PATCH] editing the add rent property mouaz is the best in the west

---
 app/owner/properties/page.js        | 997 +++++++++++++++++++---------
 app/property/[id]/PropertyDetail.js |  11 +-
 2 files changed, 697 insertions(+), 311 deletions(-)

diff --git a/app/owner/properties/page.js b/app/owner/properties/page.js
index bf831be..ef6f41f 100644
--- a/app/owner/properties/page.js
+++ b/app/owner/properties/page.js
@@ -1,9 +1,9 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
 import {
   PlusCircle,
   Building,
@@ -45,13 +45,22 @@ import {
   X,
   Star,
   Ban,
-  Check
-} from 'lucide-react';
-import toast, { Toaster } from 'react-hot-toast';
-import AuthService from '../../services/AuthService';
-import { getMyRentListings, getMySaleListings, editRentProperty } from '../../utils/api';
+  Check,
+} from "lucide-react";
+import toast, { Toaster } from "react-hot-toast";
+import AuthService from "../../services/AuthService";
+import {
+  getMyRentListings,
+  getMySaleListings,
+  editRentProperty,
+} from "../../utils/api";
 
-const DeleteConfirmationModal = ({ isOpen, onClose, onConfirm, propertyTitle }) => {
+const DeleteConfirmationModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  propertyTitle,
+}) => {
   if (!isOpen) return null;
 
   return (
@@ -75,9 +84,12 @@ const DeleteConfirmationModal = ({ isOpen, onClose, onConfirm, propertyTitle })
           </div>
           <h3 className="text-xl font-bold text-gray-900">تأكيد الحذف</h3>
           <p className="text-sm text-gray-500 mt-2">
-            هل أنت متأكد من حذف العقار: <span className="font-bold text-gray-700">"{propertyTitle}"</span>؟
+            هل أنت متأكد من حذف العقار:{" "}
+            <span className="font-bold text-gray-700">"{propertyTitle}"</span>؟
+          </p>
+          <p className="text-xs text-red-500 mt-1">
+            هذا الإجراء لا يمكن التراجع عنه
           </p>
-          <p className="text-xs text-red-500 mt-1">هذا الإجراء لا يمكن التراجع عنه</p>
         </div>
 
         <div className="flex gap-3 pt-3">
@@ -100,23 +112,45 @@ const DeleteConfirmationModal = ({ isOpen, onClose, onConfirm, propertyTitle })
 };
 
 const serviceLabels = {
-  Electricity: 'كهرباء', Internet: 'إنترنت', Heating: 'تدفئة', Water: 'ماء',
-  Pool: 'مسبح', PrivateGarden: 'حديقة خاصة', Parking: 'موقف سيارات',
-  Security247: 'حراسة 24 س', CentralHeating: 'تدفئة مركزية',
-  CentralAirConditioning: 'تكييف مركزي', EquippedKitchen: 'مطبخ مجهز',
-  MaidsRoom: 'غرفة خادمة', Elevator: 'مصعد', Gym: 'نادي رياضي',
-  Sauna: 'ساونا', Jacuzzi: 'جاكوزي', Balcony: 'بلكونة',
-  Rooftop: 'سطح', Furnished: 'مفروش', AirConditioning: 'تكييف',
-  SatelliteTV: 'تلفاز', Fireplace: 'مدفأة', StudyRoom: 'غرفة دراسة',
-  Storage: 'مستودع', Laundry: 'غرفة غسيل', SmartHome: 'منزل ذكي',
+  Electricity: "كهرباء",
+  Internet: "إنترنت",
+  Heating: "تدفئة",
+  Water: "ماء",
+  Pool: "مسبح",
+  PrivateGarden: "حديقة خاصة",
+  Parking: "موقف سيارات",
+  Security247: "حراسة 24 س",
+  CentralHeating: "تدفئة مركزية",
+  CentralAirConditioning: "تكييف مركزي",
+  EquippedKitchen: "مطبخ مجهز",
+  MaidsRoom: "غرفة خادمة",
+  Elevator: "مصعد",
+  Gym: "نادي رياضي",
+  Sauna: "ساونا",
+  Jacuzzi: "جاكوزي",
+  Balcony: "بلكونة",
+  Rooftop: "سطح",
+  Furnished: "مفروش",
+  AirConditioning: "تكييف",
+  SatelliteTV: "تلفاز",
+  Fireplace: "مدفأة",
+  StudyRoom: "غرفة دراسة",
+  Storage: "مستودع",
+  Laundry: "غرفة غسيل",
+  SmartHome: "منزل ذكي",
 };
 
 const termLabels = {
-  NoSmoking: 'ممنوع التدخين', NoAnimals: 'ممنوع الحيوانات الأليفة',
-  NoParties: 'ممنوع الحفلات', NoAlcohol: 'ممنوع الكحول',
-  SuitableForChildren: 'مناسب للأطفال', SuitableForFamilies: 'مناسب للعائلات',
-  SuitableForStudents: 'مناسب للطلاب', SuitableForElderly: 'مناسب لكبار السن',
-  OnlyFemales: 'إناث فقط', OnlyMales: 'ذكور فقط',
+  NoSmoking: "ممنوع التدخين",
+  NoAnimals: "ممنوع الحيوانات الأليفة",
+  NoParties: "ممنوع الحفلات",
+  NoAlcohol: "ممنوع الكحول",
+  SuitableForChildren: "مناسب للأطفال",
+  SuitableForFamilies: "مناسب للعائلات",
+  SuitableForStudents: "مناسب للطلاب",
+  SuitableForElderly: "مناسب لكبار السن",
+  OnlyFemales: "إناث فقط",
+  OnlyMales: "ذكور فقط",
 };
 
 const PropertyViewModal = ({ isOpen, onClose, property }) => {
@@ -140,7 +174,10 @@ const PropertyViewModal = ({ isOpen, onClose, property }) => {
         <div className="sticky top-0 z-10 bg-gradient-to-r from-amber-500 to-amber-600 p-6 text-white flex justify-between items-center">
           <div>
             <h2 className="text-2xl font-bold">{property.title}</h2>
-            <p className="text-amber-100 text-sm mt-1">تم الإضافة: {new Date(property.createdAt).toLocaleDateString('ar-SA')}</p>
+            <p className="text-amber-100 text-sm mt-1">
+              تم الإضافة:{" "}
+              {new Date(property.createdAt).toLocaleDateString("ar-SA")}
+            </p>
           </div>
           <button
             onClick={onClose}
@@ -153,10 +190,15 @@ const PropertyViewModal = ({ isOpen, onClose, property }) => {
         <div className="p-6">
           {property.images && property.images.length > 0 && (
             <div className="mb-6">
-              <h3 className="text-lg font-bold text-gray-900 mb-3">صور العقار</h3>
+              <h3 className="text-lg font-bold text-gray-900 mb-3">
+                صور العقار
+              </h3>
               <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                 {property.images.map((image, index) => (
-                  <div key={index} className="relative aspect-square rounded-lg overflow-hidden border border-gray-200">
+                  <div
+                    key={index}
+                    className="relative aspect-square rounded-lg overflow-hidden border border-gray-200"
+                  >
                     <img
                       src={image}
                       alt={`${property.title} - صورة ${index + 1}`}
@@ -174,26 +216,34 @@ const PropertyViewModal = ({ isOpen, onClose, property }) => {
               <div className="space-y-2">
                 <p className="text-sm">
                   <span className="text-gray-500">نوع العقار:</span>
-                  <span className="font-medium text-gray-900 mr-2">{property.propertyTypeLabel || 'عقار'}</span>
+                  <span className="font-medium text-gray-900 mr-2">
+                    {property.propertyTypeLabel || "عقار"}
+                  </span>
                 </p>
-                {property.purpose === 'rent' && (
+                {property.purpose === "rent" && (
                   <p className="text-sm">
                     <span className="text-gray-500">حالة التأثيث:</span>
-                    <span className={`font-medium mr-2 ${property.furnished ? 'text-green-600' : 'text-gray-600'}`}>
-                      {property.furnished ? 'مفروش' : 'غير مفروش'}
+                    <span
+                      className={`font-medium mr-2 ${property.furnished ? "text-green-600" : "text-gray-600"}`}
+                    >
+                      {property.furnished ? "مفروش" : "غير مفروش"}
                     </span>
                   </p>
                 )}
                 <p className="text-sm">
                   <span className="text-gray-500">حالة العقار:</span>
-                  <span className={`font-medium mr-2 ${property.status === 'available' ? 'text-green-600' : 'text-yellow-600'}`}>
-                    {property.status === 'available' ? 'متاح' : 'مؤجر'}
+                  <span
+                    className={`font-medium mr-2 ${property.status === "available" ? "text-green-600" : "text-yellow-600"}`}
+                  >
+                    {property.status === "available" ? "متاح" : "مؤجر"}
                   </span>
                 </p>
                 {property.description && (
                   <p className="text-sm mt-2">
                     <span className="text-gray-500">الوصف:</span>
-                    <span className="text-gray-700 mr-2">{property.description}</span>
+                    <span className="text-gray-700 mr-2">
+                      {property.description}
+                    </span>
                   </p>
                 )}
               </div>
@@ -209,7 +259,9 @@ const PropertyViewModal = ({ isOpen, onClose, property }) => {
                 </div>
                 <div className="text-center">
                   <Bath className="w-5 h-5 text-amber-500 mx-auto mb-1" />
-                  <span className="text-sm font-bold">{property.bathrooms}</span>
+                  <span className="text-sm font-bold">
+                    {property.bathrooms}
+                  </span>
                   <span className="text-xs text-gray-500 block">حمامات</span>
                 </div>
                 <div className="text-center">
@@ -234,14 +286,18 @@ const PropertyViewModal = ({ isOpen, onClose, property }) => {
                 {property.balconies > 0 && (
                   <div className="text-center">
                     <DoorOpen className="w-5 h-5 text-amber-500 mx-auto mb-1" />
-                    <span className="text-sm font-bold">{property.balconies}</span>
+                    <span className="text-sm font-bold">
+                      {property.balconies}
+                    </span>
                     <span className="text-xs text-gray-500 block">بلكونات</span>
                   </div>
                 )}
                 {property.bookedCount > 0 && (
                   <div className="text-center">
                     <Calendar className="w-5 h-5 text-amber-500 mx-auto mb-1" />
-                    <span className="text-sm font-bold">{property.bookedCount}</span>
+                    <span className="text-sm font-bold">
+                      {property.bookedCount}
+                    </span>
                     <span className="text-xs text-gray-500 block">حجوزات</span>
                   </div>
                 )}
@@ -255,37 +311,53 @@ const PropertyViewModal = ({ isOpen, onClose, property }) => {
               الموقع
             </h4>
             <p className="text-gray-700">
-              {property.address || 'لم يتم تحديد العنوان'}
+              {property.address || "لم يتم تحديد العنوان"}
               {property.city && `، ${property.city}`}
               {property.district && `، ${property.district}`}
             </p>
           </div>
 
-          {property.services && (Array.isArray(property.services) ? property.services.length > 0 : Object.keys(property.services).length > 0) && (
-            <div className="bg-gray-50 p-4 rounded-xl mb-6">
-              <h4 className="font-bold text-gray-700 mb-3">الخدمات المتوفرة</h4>
-              <div className="flex flex-wrap gap-2">
-                {Array.isArray(property.services) ? (
-                  property.services.map((svc, i) => (
-                    <span key={i} className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
-                      {serviceLabels[svc] || svc}
-                    </span>
-                  ))
-                ) : (
-                  Object.entries(property.services).map(([key, value]) => {
-                    if (!value) return null;
-                    const detail = typeof value === 'object' && value.detail ? value.detail : (typeof value === 'string' ? value : null);
-                    return (
-                      <span key={key} className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
-                        {serviceLabels[key] || key}
-                        {detail && <span className="text-green-400">· {detail}</span>}
-                      </span>
-                    );
-                  })
-                )}
+          {property.services &&
+            (Array.isArray(property.services)
+              ? property.services.length > 0
+              : Object.keys(property.services).length > 0) && (
+              <div className="bg-gray-50 p-4 rounded-xl mb-6">
+                <h4 className="font-bold text-gray-700 mb-3">
+                  الخدمات المتوفرة
+                </h4>
+                <div className="flex flex-wrap gap-2">
+                  {Array.isArray(property.services)
+                    ? property.services.map((svc, i) => (
+                        <span
+                          key={i}
+                          className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm"
+                        >
+                          {serviceLabels[svc] || svc}
+                        </span>
+                      ))
+                    : Object.entries(property.services).map(([key, value]) => {
+                        if (!value) return null;
+                        const detail =
+                          typeof value === "object" && value.detail
+                            ? value.detail
+                            : typeof value === "string"
+                              ? value
+                              : null;
+                        return (
+                          <span
+                            key={key}
+                            className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm"
+                          >
+                            {serviceLabels[key] || key}
+                            {detail && (
+                              <span className="text-green-400">· {detail}</span>
+                            )}
+                          </span>
+                        );
+                      })}
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
           {property.terms && Object.keys(property.terms).length > 0 && (
             <div className="bg-gray-50 p-4 rounded-xl mb-6">
@@ -294,13 +366,18 @@ const PropertyViewModal = ({ isOpen, onClose, property }) => {
                 {Object.entries(property.terms).map(([key, value]) => {
                   if (!value) return null;
                   return (
-                    <div key={key} className="flex items-center gap-2 p-2 bg-white rounded-lg">
-                      {key.startsWith('No') || key.startsWith('Only') ? (
+                    <div
+                      key={key}
+                      className="flex items-center gap-2 p-2 bg-white rounded-lg"
+                    >
+                      {key.startsWith("No") || key.startsWith("Only") ? (
                         <Ban className="w-4 h-4 text-red-500 flex-shrink-0" />
                       ) : (
                         <Check className="w-4 h-4 text-green-500 flex-shrink-0" />
                       )}
-                      <span className="text-sm text-gray-700">{termLabels[key] || key}</span>
+                      <span className="text-sm text-gray-700">
+                        {termLabels[key] || key}
+                      </span>
                     </div>
                   );
                 })}
@@ -310,43 +387,56 @@ const PropertyViewModal = ({ isOpen, onClose, property }) => {
 
           <div className="bg-amber-50 p-4 rounded-xl">
             <h4 className="font-bold text-amber-700 mb-3">معلومات السعر</h4>
-            {property.purpose === 'rent' ? (
+            {property.purpose === "rent" ? (
               <div className="space-y-2">
                 {property.dailyPrice > 0 && (
                   <p className="flex justify-between">
                     <span className="text-gray-600">السعر اليومي:</span>
-                    <span className="font-bold text-amber-600">{Number(property.dailyPrice).toLocaleString()} ل.س</span>
+                    <span className="font-bold text-amber-600">
+                      {Number(property.dailyPrice).toLocaleString()} ل.س
+                    </span>
                   </p>
                 )}
                 {property.monthlyPrice > 0 && (
                   <p className="flex justify-between">
                     <span className="text-gray-600">السعر الشهري:</span>
-                    <span className="font-bold text-amber-600">{Number(property.monthlyPrice).toLocaleString()} ل.س</span>
+                    <span className="font-bold text-amber-600">
+                      {Number(property.monthlyPrice).toLocaleString()} ل.س
+                    </span>
                   </p>
                 )}
                 {property.deposit > 0 && (
                   <p className="flex justify-between">
                     <span className="text-gray-600">التأمين:</span>
-                    <span className="font-bold text-gray-700">{Number(property.deposit).toLocaleString()} ل.س</span>
+                    <span className="font-bold text-gray-700">
+                      {Number(property.deposit).toLocaleString()} ل.س
+                    </span>
                   </p>
                 )}
                 <p className="text-sm text-gray-500 mt-1">
-                  نوع الإيجار: {
-                    property.rentType === 'daily' ? 'يومي' :
-                    property.rentType === 'monthly' ? 'شهري' : 'يومي وشهري'
-                  }
+                  نوع الإيجار:{" "}
+                  {property.rentType === "daily"
+                    ? "يومي"
+                    : property.rentType === "monthly"
+                      ? "شهري"
+                      : "يومي وشهري"}
                 </p>
                 {property.rating > 0 && (
                   <p className="flex justify-between mt-2 pt-2 border-t border-amber-200">
                     <span className="text-gray-600">التقييم:</span>
-                    <span className="font-bold text-amber-600 flex items-center gap-1">{Number(property.rating).toFixed(1)} <Star className="w-4 h-4 fill-amber-500" /></span>
+                    <span className="font-bold text-amber-600 flex items-center gap-1">
+                      {Number(property.rating).toFixed(1)}{" "}
+                      <Star className="w-4 h-4 fill-amber-500" />
+                    </span>
                   </p>
                 )}
               </div>
             ) : (
               <p className="flex justify-between">
                 <span className="text-gray-600">سعر البيع:</span>
-                <span className="font-bold text-blue-600">{Number(property.salePrice).toLocaleString()} ل.س</span>
+                <span className="font-bold text-blue-600">
+                  {Number(property.salePrice).toLocaleString()} ل.س
+                </span>
               </p>
             )}
           </div>
@@ -364,70 +454,69 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
 
   const sections = [
     {
-      title: 'معلومات أساسية',
+      title: "معلومات أساسية",
       fields: [
-        { id: 'title', label: 'عنوان العقار', type: 'text' },
-        { id: 'description', label: 'الوصف', type: 'textarea' },
-        { 
-          id: 'propertyType', 
-          label: 'نوع العقار', 
-          type: 'select', 
+        { id: "title", label: "عنوان العقار", type: "text" },
+        { id: "description", label: "الوصف", type: "textarea" },
+        {
+          id: "propertyType",
+          label: "نوع العقار",
+          type: "select",
           options: [
-            { value: 'apartment', label: 'شقة' },
-            { value: 'villa', label: 'فيلا' },
-            { value: 'suite', label: 'سويت' },
-            { value: 'room', label: 'غرفة ضمن شقة' }
-          ], 
-          
+            { value: "apartment", label: "شقة" },
+            { value: "villa", label: "فيلا" },
+            { value: "suite", label: "سويت" },
+            { value: "room", label: "غرفة ضمن شقة" },
+          ],
         },
-        { 
-          id: 'furnished', 
-          label: 'حالة العقار', 
-          type: 'radio', 
+        {
+          id: "furnished",
+          label: "حالة العقار",
+          type: "radio",
           options: [
-            { value: true, label: 'مفروش' },
-            { value: false, label: 'غير مفروش' }
-          ], 
-           
-        }
-      ]
+            { value: true, label: "مفروش" },
+            { value: false, label: "غير مفروش" },
+          ],
+        },
+      ],
     },
     {
-      title: 'التفاصيل',
+      title: "التفاصيل",
       fields: [
-        { id: 'bedrooms', label: 'عدد الغرف', type: 'number' },
-        { id: 'bathrooms', label: 'عدد الحمامات', type: 'number' },
-        { id: 'livingRooms', label: 'عدد الصالونات', type: 'number' },
-        { id: 'area', label: 'المساحة (م²)', type: 'number' }
-      ]
+        { id: "bedrooms", label: "عدد الغرف", type: "number" },
+        { id: "bathrooms", label: "عدد الحمامات", type: "number" },
+        { id: "livingRooms", label: "عدد الصالونات", type: "number" },
+        { id: "area", label: "المساحة (م²)", type: "number" },
+      ],
     },
     {
-      title: 'الموقع',
+      title: "الموقع",
       fields: [
-        { id: 'address', label: 'العنوان الكامل', type: 'text' },
-        { id: 'city', label: 'المدينة', type: 'text' },
-        { id: 'district', label: 'الحي', type: 'text' }
-      ]
+        { id: "address", label: "العنوان الكامل", type: "text" },
+        { id: "city", label: "المدينة", type: "text" },
+        { id: "district", label: "الحي", type: "text" },
+      ],
     },
     {
-      title: 'السعر',
-      fields: formData?.purpose === 'rent' ? [
-        { id: 'dailyPrice', label: 'السعر اليومي', type: 'number' },
-        { id: 'monthlyPrice', label: 'السعر الشهري', type: 'number' },
-        { 
-          id: 'rentType', 
-          label: 'نوع الإيجار', 
-          type: 'select', 
-          options: [
-            { value: 'daily', label: 'يومي' },
-            { value: 'monthly', label: 'شهري' },
-            { value: 'both', label: 'يومي وشهري' }
-          ], 
-        }
-      ] : [
-        { id: 'salePrice', label: 'سعر البيع', type: 'number' }
-      ]
-    }
+      title: "السعر",
+      fields:
+        formData?.purpose === "rent"
+          ? [
+              { id: "dailyPrice", label: "السعر اليومي", type: "number" },
+              { id: "monthlyPrice", label: "السعر الشهري", type: "number" },
+              {
+                id: "rentType",
+                label: "نوع الإيجار",
+                type: "select",
+                options: [
+                  { value: "daily", label: "يومي" },
+                  { value: "monthly", label: "شهري" },
+                  { value: "both", label: "يومي وشهري" },
+                ],
+              },
+            ]
+          : [{ id: "salePrice", label: "سعر البيع", type: "number" }],
+    },
   ];
 
   const startEditing = (fieldId) => {
@@ -443,11 +532,13 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
   const saveField = (fieldId) => {
     setFormData({
       ...formData,
-      [fieldId]: tempValues[fieldId]
+      [fieldId]: tempValues[fieldId],
     });
     setEditingField(null);
     setTempValues({});
-    const fieldLabel = sections.flatMap(s => s.fields).find(f => f.id === fieldId)?.label;
+    const fieldLabel = sections
+      .flatMap((s) => s.fields)
+      .find((f) => f.id === fieldId)?.label;
     toast.success(`تم تحديث ${fieldLabel}`);
   };
 
@@ -457,12 +548,12 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
 
   const handleSave = () => {
     setIsSaving(true);
-    
+
     setTimeout(() => {
       onSave(formData);
       setIsSaving(false);
       onClose();
-      toast.success('تم تحديث العقار بنجاح');
+      toast.success("تم تحديث العقار بنجاح");
     }, 1000);
   };
 
@@ -486,7 +577,9 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
         <div className="sticky top-0 z-10 bg-gradient-to-r from-amber-500 to-amber-600 p-6 text-white flex justify-between items-center">
           <div>
             <h2 className="text-2xl font-bold">تعديل العقار</h2>
-            <p className="text-amber-100 text-sm mt-1">قم بتحديث معلومات العقار</p>
+            <p className="text-amber-100 text-sm mt-1">
+              قم بتحديث معلومات العقار
+            </p>
           </div>
           <button
             onClick={onClose}
@@ -524,10 +617,15 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
 
           {sections.map((section, sectionIndex) => (
             <div key={sectionIndex} className="bg-gray-50 p-4 rounded-xl">
-              <h3 className="text-lg font-bold text-gray-900 mb-4">{section.title}</h3>
+              <h3 className="text-lg font-bold text-gray-900 mb-4">
+                {section.title}
+              </h3>
               <div className="space-y-4">
                 {section.fields.map((field) => (
-                  <div key={field.id} className="bg-white p-3 rounded-lg group hover:shadow-sm transition-shadow">
+                  <div
+                    key={field.id}
+                    className="bg-white p-3 rounded-lg group hover:shadow-sm transition-shadow"
+                  >
                     <div className="flex justify-between items-start mb-2">
                       <label className="text-sm font-medium text-gray-600 flex items-center gap-1">
                         <span>{field.icon}</span>
@@ -545,17 +643,21 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
 
                     {editingField === field.id ? (
                       <div className="space-y-2">
-                        {field.type === 'textarea' ? (
+                        {field.type === "textarea" ? (
                           <textarea
-                            value={tempValues[field.id] || ''}
-                            onChange={(e) => handleTempChange(field.id, e.target.value)}
+                            value={tempValues[field.id] || ""}
+                            onChange={(e) =>
+                              handleTempChange(field.id, e.target.value)
+                            }
                             className="w-full px-3 py-2 border border-amber-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                             rows="3"
                           />
-                        ) : field.type === 'select' ? (
+                        ) : field.type === "select" ? (
                           <select
-                            value={tempValues[field.id] || ''}
-                            onChange={(e) => handleTempChange(field.id, e.target.value)}
+                            value={tempValues[field.id] || ""}
+                            onChange={(e) =>
+                              handleTempChange(field.id, e.target.value)
+                            }
                             className="w-full px-3 py-2 border border-amber-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                           >
                             {field.options.map((opt) => (
@@ -564,16 +666,24 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
                               </option>
                             ))}
                           </select>
-                        ) : field.type === 'radio' ? (
+                        ) : field.type === "radio" ? (
                           <div className="flex gap-4">
                             {field.options.map((opt) => (
-                              <label key={opt.value} className="flex items-center gap-2">
+                              <label
+                                key={opt.value}
+                                className="flex items-center gap-2"
+                              >
                                 <input
                                   type="radio"
                                   name={field.id}
                                   value={opt.value}
                                   checked={tempValues[field.id] === opt.value}
-                                  onChange={(e) => handleTempChange(field.id, e.target.value === 'true')}
+                                  onChange={(e) =>
+                                    handleTempChange(
+                                      field.id,
+                                      e.target.value === "true",
+                                    )
+                                  }
                                   className="w-4 h-4 text-amber-500"
                                 />
                                 <span>{opt.label}</span>
@@ -583,8 +693,10 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
                         ) : (
                           <input
                             type={field.type}
-                            value={tempValues[field.id] || ''}
-                            onChange={(e) => handleTempChange(field.id, e.target.value)}
+                            value={tempValues[field.id] || ""}
+                            onChange={(e) =>
+                              handleTempChange(field.id, e.target.value)
+                            }
                             className="w-full px-3 py-2 border border-amber-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
                           />
                         )}
@@ -606,15 +718,19 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
                       </div>
                     ) : (
                       <div className="text-gray-900">
-                        {field.type === 'select' ? (
-                          field.options.find(opt => opt.value === formData[field.id])?.label || formData[field.id]
-                        ) : field.type === 'radio' ? (
-                          formData[field.id] ? 'مفروش' : 'غير مفروش'
-                        ) : field.id.includes('Price') ? (
-                          formData[field.id] ? `${Number(formData[field.id]).toLocaleString()} ل.س` : '—'
-                        ) : (
-                          formData[field.id] || '—'
-                        )}
+                        {field.type === "select"
+                          ? field.options.find(
+                              (opt) => opt.value === formData[field.id],
+                            )?.label || formData[field.id]
+                          : field.type === "radio"
+                            ? formData[field.id]
+                              ? "مفروش"
+                              : "غير مفروش"
+                            : field.id.includes("Price")
+                              ? formData[field.id]
+                                ? `${Number(formData[field.id]).toLocaleString()} ل.س`
+                                : "—"
+                              : formData[field.id] || "—"}
                       </div>
                     )}
                   </div>
@@ -628,16 +744,19 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
             <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
               {Object.entries(formData.services || {}).map(([key, value]) => {
                 const serviceLabels = {
-                  electricity: 'كهرباء',
-                  internet: 'انترنت',
-                  heating: 'تدفئة',
-                  water: 'ماء',
-                  airConditioning: 'تكييف',
-                  parking: 'موقف سيارات',
-                  elevator: 'مصعد'
+                  electricity: "كهرباء",
+                  internet: "انترنت",
+                  heating: "تدفئة",
+                  water: "ماء",
+                  airConditioning: "تكييف",
+                  parking: "موقف سيارات",
+                  elevator: "مصعد",
                 };
                 return (
-                  <label key={key} className="flex items-center gap-2 p-2 border rounded-lg cursor-pointer hover:bg-amber-50">
+                  <label
+                    key={key}
+                    className="flex items-center gap-2 p-2 border rounded-lg cursor-pointer hover:bg-amber-50"
+                  >
                     <input
                       type="checkbox"
                       checked={value}
@@ -646,8 +765,8 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
                           ...formData,
                           services: {
                             ...formData.services,
-                            [key]: e.target.checked
-                          }
+                            [key]: e.target.checked,
+                          },
                         });
                       }}
                       className="w-4 h-4 text-amber-500"
@@ -660,19 +779,24 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
           </div>
 
           <div className="bg-gray-50 p-4 rounded-xl">
-            <h3 className="text-lg font-bold text-gray-900 mb-4">شروط الاستخدام</h3>
+            <h3 className="text-lg font-bold text-gray-900 mb-4">
+              شروط الاستخدام
+            </h3>
             <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
               {Object.entries(formData.terms || {}).map(([key, value]) => {
                 const termLabels = {
-                  noSmoking: ' ممنوع التدخين',
-                  noPets: ' ممنوع الحيوانات',
-                  noParties: ' ممنوع الحفلات',
-                  noAlcohol: ' ممنوع الكحول',
-                  suitableForChildren: ' مناسب للأطفال',
-                  suitableForElderly: ' مناسب لكبار السن'
+                  noSmoking: " ممنوع التدخين",
+                  noPets: " ممنوع الحيوانات",
+                  noParties: " ممنوع الحفلات",
+                  noAlcohol: " ممنوع الكحول",
+                  suitableForChildren: " مناسب للأطفال",
+                  suitableForElderly: " مناسب لكبار السن",
                 };
                 return (
-                  <label key={key} className="flex items-center gap-2 p-2 border rounded-lg cursor-pointer hover:bg-amber-50">
+                  <label
+                    key={key}
+                    className="flex items-center gap-2 p-2 border rounded-lg cursor-pointer hover:bg-amber-50"
+                  >
                     <input
                       type="checkbox"
                       checked={value}
@@ -681,8 +805,8 @@ const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
                           ...formData,
                           terms: {
                             ...formData.terms,
-                            [key]: e.target.checked
-                          }
+                            [key]: e.target.checked,
+                          },
                         });
                       }}
                       className="w-4 h-4 text-amber-500"
@@ -731,15 +855,18 @@ export default function OwnerPropertiesPage() {
   const [properties, setProperties] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [showAddMenu, setShowAddMenu] = useState(false);
-  const [activeTab, setActiveTab] = useState('rent');
-  
-  const [deleteModal, setDeleteModal] = useState({ isOpen: false, property: null });
+  const [activeTab, setActiveTab] = useState("rent");
+
+  const [deleteModal, setDeleteModal] = useState({
+    isOpen: false,
+    property: null,
+  });
   const [viewModal, setViewModal] = useState({ isOpen: false, property: null });
   const [editModal, setEditModal] = useState({ isOpen: false, property: null });
 
-  const filteredProperties = properties.filter(p => p.purpose === activeTab);
-  const rentCount = properties.filter(p => p.purpose === 'rent').length;
-  const saleCount = properties.filter(p => p.purpose === 'sale').length;
+  const filteredProperties = properties.filter((p) => p.purpose === activeTab);
+  const rentCount = properties.filter((p) => p.purpose === "rent").length;
+  const saleCount = properties.filter((p) => p.purpose === "sale").length;
 
   useEffect(() => {
     const authUser = AuthService.getUser();
@@ -747,83 +874,176 @@ export default function OwnerPropertiesPage() {
       setUser({
         name: authUser.name || authUser.email,
         email: authUser.email,
-        role: 'owner',
+        role: "owner",
       });
       loadProperties();
     } else {
-      router.push('/auth/choose-role');
+      router.push("/auth/choose-role");
     }
   }, [router]);
 
-
-
   const loadProperties = async () => {
     const authUser = AuthService.getUser();
     const userId = authUser?.id;
 
     if (!userId) {
-      console.warn('[OwnerProperties] No user ID found');
+      console.warn("[OwnerProperties] No user ID found");
       setIsLoading(false);
       return;
     }
 
     try {
-      console.log('[OwnerProperties] Fetching listings for user:', userId);
+      console.log("[OwnerProperties] Fetching listings for user:", userId);
 
       const [rentData, saleData] = await Promise.allSettled([
         getMyRentListings(),
         getMySaleListings(),
       ]);
 
-      const rentList = rentData.status === 'fulfilled' ? (Array.isArray(rentData.value) ? rentData.value.filter(Boolean) : (rentData.value ? [rentData.value] : [])) : [];
-      const saleList = saleData.status === 'fulfilled' ? (Array.isArray(saleData.value) ? saleData.value.filter(Boolean) : (saleData.value ? [saleData.value] : [])) : [];
+      const rentList =
+        rentData.status === "fulfilled"
+          ? Array.isArray(rentData.value)
+            ? rentData.value.filter(Boolean)
+            : rentData.value
+              ? [rentData.value]
+              : []
+          : [];
+      const saleList =
+        saleData.status === "fulfilled"
+          ? Array.isArray(saleData.value)
+            ? saleData.value.filter(Boolean)
+            : saleData.value
+              ? [saleData.value]
+              : []
+          : [];
 
-      console.log('[OwnerProperties] Rent:', rentList.length, 'Sale:', saleList.length);
+      console.log(
+        "[OwnerProperties] Rent:",
+        rentList.length,
+        "Sale:",
+        saleList.length,
+      );
 
       const normalizeServices = (details) => {
         const rawServices = details.services || {};
-        const serviceList = Array.isArray(rawServices) ? rawServices : Object.keys(rawServices).filter(k => rawServices[k]);
+        const serviceList = Array.isArray(rawServices)
+          ? rawServices
+          : Object.keys(rawServices).filter((k) => rawServices[k]);
         const serviceDetails = details.serviceDetails || {};
         const services = {};
-        serviceList.forEach(s => { services[s] = serviceDetails[s] || true; });
+        serviceList.forEach((s) => {
+          services[s] = serviceDetails[s] || true;
+        });
         return services;
       };
 
+      const normalizeTerms = (terms) => {
+        if (!terms) return {};
+        return Array.isArray(terms)
+          ? terms.reduce((acc, t) => ({ ...acc, [t]: true }), {})
+          : terms;
+      };
+
+      const normalizeProximity = (prox) => {
+        if (!prox) return {};
+        const result = {};
+        Object.entries(prox).forEach(([k, v]) => {
+          if (!v) return;
+          result[k.charAt(0).toUpperCase() + k.slice(1)] = v;
+        });
+        return result;
+      };
+
       const mappedRent = rentList.map((item) => {
         const info = item.propertyInformation || {};
-        const details = (() => { try { return JSON.parse(info.detailsJSON || '{}'); } catch { return {}; } })();
-        const apiBase = typeof window !== 'undefined' ? (process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api') : '';
+        const details = (() => {
+          try {
+            return JSON.parse(info.detailsJSON || "{}");
+          } catch {
+            return {};
+          }
+        })();
+        const apiBase =
+          typeof window !== "undefined"
+            ? process.env.NEXT_PUBLIC_API_URL ||
+              "https://45.93.137.91.nip.io/api"
+            : "";
         const raw = Array.isArray(info.images) ? info.images : [];
         return {
           id: item.id,
           title: info.address || `عقار #${item.id}`,
-          propertyType: { 0: 'apartment', 1: 'villa', 2: 'sweet', 3: 'room', 4: 'studio', 5: 'office', 6: 'farms', 7: 'shop', 8: 'warehouse' }[info.buildingType] || 'apartment',
-          propertyTypeLabel: { 0: 'شقة', 1: 'فيلا', 2: 'سويت', 3: 'غرفة', 4: 'استوديو', 5: 'مكتب', 6: 'مزرعة', 7: 'متجر', 8: 'مستودع' }[info.buildingType] || 'عقار',
-          purpose: 'rent',
-          rentType: item.rentType === 0 ? 'monthly' : item.rentType === 1 ? 'daily' : 'daily',
+          propertyType:
+            {
+              0: "apartment",
+              1: "villa",
+              2: "sweet",
+              3: "room",
+              4: "studio",
+              5: "office",
+              6: "farms",
+              7: "shop",
+              8: "warehouse",
+            }[info.buildingType] || "apartment",
+          propertyTypeLabel:
+            {
+              0: "شقة",
+              1: "فيلا",
+              2: "سويت",
+              3: "غرفة",
+              4: "استوديو",
+              5: "مكتب",
+              6: "مزرعة",
+              7: "متجر",
+              8: "مستودع",
+            }[info.buildingType] || "عقار",
+          purpose: "rent",
+          rentType:
+            item.rentType === 0
+              ? "monthly"
+              : item.rentType === 1
+                ? "daily"
+                : "daily",
           dailyPrice: item.dailyRent || 0,
           monthlyPrice: item.monthlyRent || 0,
           salePrice: item.price || 0,
           deposit: item.deposit || 0,
-          location: info.address || '',
+          location: info.address || "",
           bedrooms: info.numberOfBedRooms || 0,
           bathrooms: info.numberOfBathRooms || 0,
           area: info.space || 0,
           livingRooms: details.livingRooms || 0,
           floor: details.floorNumber ?? details.floor ?? 0,
-          salons: details.numberOfSalons ?? details.salonsCount ?? details.salons ?? 0,
-          balconies: details.numberOfBalconies ?? details.balconiesCount ?? details.balconies ?? 0,
+          salons:
+            details.numberOfSalons ??
+            details.salonsCount ??
+            details.salons ??
+            0,
+          balconies:
+            details.numberOfBalconies ??
+            details.balconiesCount ??
+            details.balconies ??
+            0,
           bookedCount: details.bookedCount || 0,
-          status: { 0: 'available', 1: 'booked', 2: 'maintenance' }[info.status] || 'available',
-          images: raw.length > 0 ? raw.map(img => img.startsWith('http') ? img : `${apiBase}${img.startsWith('/') ? '' : '/Pictures/'}${img}`) : ['/property-placeholder.jpg'],
+          status:
+            { 0: "available", 1: "booked", 2: "maintenance" }[info.status] ||
+            "available",
+          images:
+            raw.length > 0
+              ? raw.map((img) =>
+                  img.startsWith("http")
+                    ? img
+                    : `${apiBase}${img.startsWith("/") ? "" : "/Pictures/"}${img}`,
+                )
+              : ["/property-placeholder.jpg"],
           createdAt: item.createdAt || new Date().toISOString(),
           furnished: details.furnished || false,
-          description: info.description || '',
-          address: info.address || '',
-          city: '',
-          district: '',
+          description: info.description || "",
+          address: info.address || "",
+          city: "",
+          district: "",
           services: normalizeServices(details),
-          terms: details.terms || {},
+          terms: normalizeTerms(details.terms),
+          proximity: normalizeProximity(details.nearbyDistances),
           rating: item.rating || 0,
           currencyId: item.currencyId,
           _raw: item,
@@ -832,38 +1052,86 @@ export default function OwnerPropertiesPage() {
 
       const mappedSale = saleList.map((item) => {
         const info = item.propertyInformation || {};
-        const details = (() => { try { return JSON.parse(info.detailsJSON || '{}'); } catch { return {}; } })();
-        const apiBase = typeof window !== 'undefined' ? (process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api') : '';
+        const details = (() => {
+          try {
+            return JSON.parse(info.detailsJSON || "{}");
+          } catch {
+            return {};
+          }
+        })();
+        const apiBase =
+          typeof window !== "undefined"
+            ? process.env.NEXT_PUBLIC_API_URL ||
+              "https://45.93.137.91.nip.io/api"
+            : "";
         const raw = Array.isArray(info.images) ? info.images : [];
         return {
           id: item.id,
           title: info.address || `عقار للبيع #${item.id}`,
-          propertyType: { 0: 'apartment', 1: 'villa', 2: 'sweet', 3: 'room', 4: 'studio', 5: 'office', 6: 'farms', 7: 'shop', 8: 'warehouse' }[info.buildingType] || 'apartment',
-          propertyTypeLabel: { 0: 'شقة', 1: 'فيلا', 2: 'سويت', 3: 'غرفة', 4: 'استوديو', 5: 'مكتب', 6: 'مزرعة', 7: 'متجر', 8: 'مستودع' }[info.buildingType] || 'عقار',
-          purpose: 'sale',
+          propertyType:
+            {
+              0: "apartment",
+              1: "villa",
+              2: "sweet",
+              3: "room",
+              4: "studio",
+              5: "office",
+              6: "farms",
+              7: "shop",
+              8: "warehouse",
+            }[info.buildingType] || "apartment",
+          propertyTypeLabel:
+            {
+              0: "شقة",
+              1: "فيلا",
+              2: "سويت",
+              3: "غرفة",
+              4: "استوديو",
+              5: "مكتب",
+              6: "مزرعة",
+              7: "متجر",
+              8: "مستودع",
+            }[info.buildingType] || "عقار",
+          purpose: "sale",
           dailyPrice: 0,
           monthlyPrice: 0,
           salePrice: item.price || 0,
           deposit: 0,
-          location: info.address || '',
+          location: info.address || "",
           bedrooms: info.numberOfBedRooms || 0,
           bathrooms: info.numberOfBathRooms || 0,
           area: info.space || 0,
           livingRooms: details.livingRooms || 0,
           floor: details.floorNumber ?? details.floor ?? 0,
-          salons: details.numberOfSalons ?? details.salonsCount ?? details.salons ?? 0,
-          balconies: details.numberOfBalconies ?? details.balconiesCount ?? details.balconies ?? 0,
+          salons:
+            details.numberOfSalons ??
+            details.salonsCount ??
+            details.salons ??
+            0,
+          balconies:
+            details.numberOfBalconies ??
+            details.balconiesCount ??
+            details.balconies ??
+            0,
           bookedCount: details.bookedCount || 0,
-          status: 'available',
-          images: raw.length > 0 ? raw.map(img => img.startsWith('http') ? img : `${apiBase}${img.startsWith('/') ? '' : '/Pictures/'}${img}`) : ['/property-placeholder.jpg'],
+          status: "available",
+          images:
+            raw.length > 0
+              ? raw.map((img) =>
+                  img.startsWith("http")
+                    ? img
+                    : `${apiBase}${img.startsWith("/") ? "" : "/Pictures/"}${img}`,
+                )
+              : ["/property-placeholder.jpg"],
           createdAt: item.createdAt || new Date().toISOString(),
           furnished: details.furnished || false,
-          description: info.description || '',
-          address: info.address || '',
-          city: '',
-          district: '',
+          description: info.description || "",
+          address: info.address || "",
+          city: "",
+          district: "",
           services: normalizeServices(details),
-          terms: details.terms || {},
+          terms: normalizeTerms(details.terms),
+          proximity: normalizeProximity(details.nearbyDistances),
           rating: item.rating || 0,
           currencyId: item.currencyId,
           _raw: item,
@@ -872,8 +1140,8 @@ export default function OwnerPropertiesPage() {
 
       setProperties([...mappedRent, ...mappedSale]);
     } catch (err) {
-      console.error('[OwnerProperties] Failed to load properties:', err);
-      toast.error('فشل في تحميل العقارات');
+      console.error("[OwnerProperties] Failed to load properties:", err);
+      toast.error("فشل في تحميل العقارات");
     } finally {
       setIsLoading(false);
     }
@@ -881,76 +1149,111 @@ export default function OwnerPropertiesPage() {
 
   const updatePropertiesInStorage = (newProperties) => {
     setProperties(newProperties);
-    localStorage.setItem('ownerProperties', JSON.stringify(newProperties));
+    localStorage.setItem("ownerProperties", JSON.stringify(newProperties));
   };
 
   const handleDelete = () => {
     if (deleteModal.property) {
-      const newProperties = properties.filter(p => p.id !== deleteModal.property.id);
+      const newProperties = properties.filter(
+        (p) => p.id !== deleteModal.property.id,
+      );
       updatePropertiesInStorage(newProperties);
       setDeleteModal({ isOpen: false, property: null });
-      toast.success('تم حذف العقار بنجاح');
+      toast.success("تم حذف العقار بنجاح");
     }
   };
 
   const handleSaveEdit = async (updatedProperty) => {
     try {
-      if (updatedProperty.purpose === 'rent' && updatedProperty._raw) {
-        const buildingTypeMap = { apartment: 0, villa: 1, sweet: 2, room: 3, studio: 4, office: 5, farms: 6, shop: 7, warehouse: 8 };
+      if (updatedProperty.purpose === "rent" && updatedProperty._raw) {
+        const buildingTypeMap = {
+          apartment: 0,
+          villa: 1,
+          sweet: 2,
+          room: 3,
+          studio: 4,
+          office: 5,
+          farms: 6,
+          shop: 7,
+          warehouse: 8,
+        };
         const raw = updatedProperty._raw;
         const rentTypeMap = { daily: 1, monthly: 0, both: 0 };
-        const detailsJSON = JSON.stringify({
-          services: updatedProperty.services || {},
-          terms: updatedProperty.terms || {},
-          furnished: updatedProperty.furnished,
-        });
+        const rawServices = updatedProperty.services || {};
+        const serviceList = Array.isArray(rawServices)
+          ? rawServices
+          : Object.keys(rawServices).filter((k) => rawServices[k]);
+        const details = {
+          services: serviceList,
+          serviceDetails: updatedProperty.serviceDetails || {},
+          terms: normalizeTerms(updatedProperty.terms),
+          displayType: "Both",
+          propertyCondition: updatedProperty.furnished
+            ? "WithFurniture"
+            : "WithoutFurniture",
+        };
+        const detailsJSON = JSON.stringify(details);
 
         const payload = {
           propertyInformation: {
-            cordsX: raw.propertyInformation?.cordsX || '',
-            cordsY: raw.propertyInformation?.cordsY || '',
-            address: updatedProperty.address || raw.propertyInformation?.address || '',
-            description: updatedProperty.description || raw.propertyInformation?.description || '',
-            numberOfBathRooms: updatedProperty.bathrooms || raw.propertyInformation?.numberOfBathRooms || 0,
-            numberOfRooms: (updatedProperty.bedrooms || 0) + (updatedProperty.livingRooms || 0),
-            numberOfBedRooms: updatedProperty.bedrooms || raw.propertyInformation?.numberOfBedRooms || 0,
-            space: parseFloat(updatedProperty.area) || raw.propertyInformation?.space || 0,
+            cordsX: raw.propertyInformation?.cordsX || "",
+            cordsY: raw.propertyInformation?.cordsY || "",
+            address:
+              updatedProperty.address || raw.propertyInformation?.address || "",
+            description:
+              updatedProperty.description ||
+              raw.propertyInformation?.description ||
+              "",
+            numberOfBathRooms:
+              updatedProperty.bathrooms ||
+              raw.propertyInformation?.numberOfBathRooms ||
+              0,
+            numberOfRooms: updatedProperty.bedrooms || 0,
+            numberOfBedRooms:
+              updatedProperty.bedrooms ||
+              raw.propertyInformation?.numberOfBedRooms ||
+              0,
+            space:
+              parseFloat(updatedProperty.area) ||
+              raw.propertyInformation?.space ||
+              0,
             detailsJSON,
             buildingType: buildingTypeMap[updatedProperty.propertyType] ?? 0,
-            status: updatedProperty.status === 'available' ? 0 : 1,
+            status: updatedProperty.status === "available" ? 0 : 1,
             propertyType: updatedProperty.furnished ? 0 : 1,
             images: raw.propertyInformation?.images || [],
           },
           deposit: parseFloat(updatedProperty.deposit) || raw.deposit || 0,
-          monthlyRent: parseFloat(updatedProperty.monthlyPrice) || raw.monthlyRent || 0,
-          dailyRent: parseFloat(updatedProperty.dailyPrice) || raw.dailyRent || 0,
-          rating: updatedProperty.rating || 0,
+          monthlyRent:
+            parseFloat(updatedProperty.monthlyPrice) || raw.monthlyRent || 0,
+          dailyRent:
+            parseFloat(updatedProperty.dailyPrice) || raw.dailyRent || 0,
+          rating: 1,
           currencyId: updatedProperty.currencyId || raw.currencyId || 1,
           rentType: rentTypeMap[updatedProperty.rentType] ?? 0,
-          isSmokeAllow: !updatedProperty.terms?.NoSmoking,
-          isVisitorAllow: !updatedProperty.terms?.NoParties,
           type: updatedProperty.furnished ? 0 : 1,
+          allowedPaymentPeriod: "01:00:00:00",
         };
 
         await editRentProperty(updatedProperty.id, payload);
       }
 
-      const newProperties = properties.map(p => 
-        p.id === updatedProperty.id ? updatedProperty : p
+      const newProperties = properties.map((p) =>
+        p.id === updatedProperty.id ? updatedProperty : p,
       );
       updatePropertiesInStorage(newProperties);
       setEditModal({ isOpen: false, property: null });
-      toast.success('تم تحديث العقار بنجاح');
+      toast.success("تم تحديث العقار بنجاح");
     } catch (err) {
-      console.error('[OwnerProperties] Edit failed:', err);
-      toast.error('فشل تحديث العقار');
+      console.error("[OwnerProperties] Edit failed:", err);
+      toast.error("فشل تحديث العقار");
     }
   };
 
   const fadeInUp = {
     initial: { opacity: 0, y: 20 },
     animate: { opacity: 1, y: 0 },
-    transition: { duration: 0.5 }
+    transition: { duration: 0.5 },
   };
 
   if (isLoading) {
@@ -967,7 +1270,7 @@ export default function OwnerPropertiesPage() {
   return (
     <div className="min-h-screen bg-gray-50 py-8 relative">
       <Toaster position="top-center" reverseOrder={false} />
-      
+
       <DeleteConfirmationModal
         isOpen={deleteModal.isOpen}
         onClose={() => setDeleteModal({ isOpen: false, property: null })}
@@ -987,7 +1290,7 @@ export default function OwnerPropertiesPage() {
         property={editModal.property}
         onSave={handleSaveEdit}
       />
-      
+
       <div className="container mx-auto px-4">
         <motion.div
           initial={{ opacity: 0, y: -20 }}
@@ -996,9 +1299,11 @@ export default function OwnerPropertiesPage() {
         >
           <div>
             <h1 className="text-3xl font-bold text-gray-900 mb-2">عقاراتي</h1>
-            <p className="text-gray-600">مرحباً {user?.name}، لديك {properties.length} عقار</p>
+            <p className="text-gray-600">
+              مرحباً {user?.name}، لديك {properties.length} عقار
+            </p>
           </div>
-          
+
           <div className="relative">
             <motion.button
               onClick={() => setShowAddMenu(!showAddMenu)}
@@ -1029,10 +1334,12 @@ export default function OwnerPropertiesPage() {
                       </div>
                       <div>
                         <p className="font-medium">عقار للإيجار</p>
-                        <p className="text-xs text-gray-500">أضف عقار متاح للإيجار</p>
+                        <p className="text-xs text-gray-500">
+                          أضف عقار متاح للإيجار
+                        </p>
                       </div>
                     </Link>
-                    
+
                     <Link
                       href="/owner/properties/add?purpose=sale"
                       className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
@@ -1043,7 +1350,9 @@ export default function OwnerPropertiesPage() {
                       </div>
                       <div>
                         <p className="font-medium">عقار للبيع</p>
-                        <p className="text-xs text-gray-500">أضف عقار متاح للبيع</p>
+                        <p className="text-xs text-gray-500">
+                          أضف عقار متاح للبيع
+                        </p>
                       </div>
                     </Link>
                   </div>
@@ -1055,20 +1364,32 @@ export default function OwnerPropertiesPage() {
 
         {/* Tab Switcher */}
         <div className="flex gap-1 mb-6 bg-gray-100 rounded-xl p-1 w-fit">
-          <button onClick={() => setActiveTab('rent')}
-            className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === 'rent' ? 'bg-white text-amber-600 shadow-sm' : 'text-gray-600 hover:text-gray-800'}`}>
+          <button
+            onClick={() => setActiveTab("rent")}
+            className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === "rent" ? "bg-white text-amber-600 shadow-sm" : "text-gray-600 hover:text-gray-800"}`}
+          >
             <span className="flex items-center gap-2">
               <Home className="w-4 h-4" />
               للإيجار
-              {rentCount > 0 && <span className="bg-amber-100 text-amber-800 text-xs px-2 py-0.5 rounded-full">{rentCount}</span>}
+              {rentCount > 0 && (
+                <span className="bg-amber-100 text-amber-800 text-xs px-2 py-0.5 rounded-full">
+                  {rentCount}
+                </span>
+              )}
             </span>
           </button>
-          <button onClick={() => setActiveTab('sale')}
-            className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === 'sale' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-800'}`}>
+          <button
+            onClick={() => setActiveTab("sale")}
+            className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === "sale" ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-800"}`}
+          >
             <span className="flex items-center gap-2">
               <DollarSign className="w-4 h-4" />
               للبيع
-              {saleCount > 0 && <span className="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full">{saleCount}</span>}
+              {saleCount > 0 && (
+                <span className="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full">
+                  {saleCount}
+                </span>
+              )}
             </span>
           </button>
         </div>
@@ -1083,9 +1404,14 @@ export default function OwnerPropertiesPage() {
               <Building className="w-12 h-12 text-amber-600" />
             </div>
             <h3 className="text-xl font-bold text-gray-900 mb-2">
-              {activeTab === 'rent' ? 'لا توجد عقارات للإيجار' : 'لا توجد عقارات للبيع'}
+              {activeTab === "rent"
+                ? "لا توجد عقارات للإيجار"
+                : "لا توجد عقارات للبيع"}
             </h3>
-            <p className="text-gray-600 mb-6">ابدأ بإضافة أول عقار {activeTab === 'rent' ? 'للإيجار' : 'للبيع'} الآن</p>
+            <p className="text-gray-600 mb-6">
+              ابدأ بإضافة أول عقار {activeTab === "rent" ? "للإيجار" : "للبيع"}{" "}
+              الآن
+            </p>
             <Link
               href={`/owner/properties/add?purpose=${activeTab}`}
               className="inline-flex items-center gap-2 bg-amber-500 text-white px-6 py-3 rounded-xl font-medium hover:bg-amber-600 transition-colors"
@@ -1105,7 +1431,7 @@ export default function OwnerPropertiesPage() {
                 transition={{ delay: index * 0.1 }}
                 className="bg-white rounded-2xl shadow-sm hover:shadow-md transition-all overflow-hidden border border-gray-200"
               >
-                  <div className="relative aspect-[16/10] bg-gray-100 overflow-hidden">
+                <div className="relative aspect-[16/10] bg-gray-100 overflow-hidden">
                   {property.images && property.images.length > 0 ? (
                     <img
                       src={property.images[0]}
@@ -1118,43 +1444,75 @@ export default function OwnerPropertiesPage() {
                     </div>
                   )}
                   <div className="absolute top-2 right-2 flex gap-1">
-                    <span className={`px-2 py-0.5 rounded-md text-xs font-medium shadow-sm backdrop-blur-sm ${
-                      property.status === 'available' 
-                        ? 'bg-white/90 text-green-700' 
-                        : 'bg-white/90 text-yellow-700'
-                    }`}>
-                      {property.status === 'available' ? 'متاح' : 'مؤجر'}
+                    <span
+                      className={`px-2 py-0.5 rounded-md text-xs font-medium shadow-sm backdrop-blur-sm ${
+                        property.status === "available"
+                          ? "bg-white/90 text-green-700"
+                          : "bg-white/90 text-yellow-700"
+                      }`}
+                    >
+                      {property.status === "available" ? "متاح" : "مؤجر"}
                     </span>
-                    {property.purpose === 'rent' && property.furnished !== undefined && (
-                      <span className={`px-2 py-0.5 rounded-md text-xs font-medium shadow-sm backdrop-blur-sm ${
-                        property.furnished ? 'bg-white/90 text-amber-700' : 'bg-white/90 text-gray-600'
-                      }`}>
-                        {property.furnished ? 'مفروش' : 'غير مفروش'}
-                      </span>
-                    )}
+                    {property.purpose === "rent" &&
+                      property.furnished !== undefined && (
+                        <span
+                          className={`px-2 py-0.5 rounded-md text-xs font-medium shadow-sm backdrop-blur-sm ${
+                            property.furnished
+                              ? "bg-white/90 text-amber-700"
+                              : "bg-white/90 text-gray-600"
+                          }`}
+                        >
+                          {property.furnished ? "مفروش" : "غير مفروش"}
+                        </span>
+                      )}
                   </div>
 
                   <div className="absolute top-2 left-2">
                     <span className="px-2 py-0.5 rounded-md text-xs font-medium bg-white/90 text-amber-700 shadow-sm backdrop-blur-sm">
-                      {property.propertyTypeLabel || (property.propertyType === 'apartment' ? 'شقة' : property.propertyType === 'villa' ? 'فيلا' : property.propertyType === 'sweet' ? 'سويت' : property.propertyType === 'room' ? 'غرفة' : property.propertyType === 'studio' ? 'استوديو' : property.propertyType === 'office' ? 'مكتب' : property.propertyType === 'farms' ? 'مزرعة' : property.propertyType === 'shop' ? 'متجر' : property.propertyType === 'warehouse' ? 'مستودع' : 'عقار')}
+                      {property.propertyTypeLabel ||
+                        (property.propertyType === "apartment"
+                          ? "شقة"
+                          : property.propertyType === "villa"
+                            ? "فيلا"
+                            : property.propertyType === "sweet"
+                              ? "سويت"
+                              : property.propertyType === "room"
+                                ? "غرفة"
+                                : property.propertyType === "studio"
+                                  ? "استوديو"
+                                  : property.propertyType === "office"
+                                    ? "مكتب"
+                                    : property.propertyType === "farms"
+                                      ? "مزرعة"
+                                      : property.propertyType === "shop"
+                                        ? "متجر"
+                                        : property.propertyType === "warehouse"
+                                          ? "مستودع"
+                                          : "عقار")}
                     </span>
                   </div>
                 </div>
 
                 <div className="p-3">
                   <div className="flex items-start justify-between mb-1">
-                    <h3 className="font-bold text-gray-900 truncate flex-1 ml-2">{property.title}</h3>
+                    <h3 className="font-bold text-gray-900 truncate flex-1 ml-2">
+                      {property.title}
+                    </h3>
                     {property.rating > 0 && (
                       <div className="flex items-center gap-0.5 text-amber-600 shrink-0">
                         <Star className="w-3 h-3 fill-amber-500" />
-                        <span className="text-xs font-medium">{Number(property.rating).toFixed(1)}</span>
+                        <span className="text-xs font-medium">
+                          {Number(property.rating).toFixed(1)}
+                        </span>
                       </div>
                     )}
                   </div>
-                  
+
                   <div className="flex items-center gap-1 text-gray-500 text-xs mb-2">
                     <MapPin className="w-3 h-3" />
-                    <span className="truncate">{property.address || property.location || 'موقع غير محدد'}</span>
+                    <span className="truncate">
+                      {property.address || property.location || "موقع غير محدد"}
+                    </span>
                   </div>
 
                   <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 mb-2">
@@ -1198,22 +1556,30 @@ export default function OwnerPropertiesPage() {
 
                   <div className="flex justify-between items-center pt-2 border-t border-gray-100">
                     <div>
-                      {property.purpose === 'rent' ? (
+                      {property.purpose === "rent" ? (
                         <div>
                           {property.monthlyPrice > 0 && (
                             <span className="text-base font-bold text-amber-600">
                               {Number(property.monthlyPrice).toLocaleString()}
-                              <span className="text-xs text-gray-500 font-normal mr-1">ل.س /شهر</span>
-                            </span>
-                          )}
-                          {property.dailyPrice > 0 && !property.monthlyPrice && (
-                            <span className="text-base font-bold text-amber-600">
-                              {Number(property.dailyPrice).toLocaleString()}
-                              <span className="text-xs text-gray-500 font-normal mr-1">ل.س /يوم</span>
+                              <span className="text-xs text-gray-500 font-normal mr-1">
+                                ل.س /شهر
+                              </span>
                             </span>
                           )}
+                          {property.dailyPrice > 0 &&
+                            !property.monthlyPrice && (
+                              <span className="text-base font-bold text-amber-600">
+                                {Number(property.dailyPrice).toLocaleString()}
+                                <span className="text-xs text-gray-500 font-normal mr-1">
+                                  ل.س /يوم
+                                </span>
+                              </span>
+                            )}
                           {property.deposit > 0 && (
-                            <div className="text-[10px] text-gray-400">تأمين: {Number(property.deposit).toLocaleString()} ل.س</div>
+                            <div className="text-[10px] text-gray-400">
+                              تأمين: {Number(property.deposit).toLocaleString()}{" "}
+                              ل.س
+                            </div>
                           )}
                         </div>
                       ) : (
@@ -1222,19 +1588,32 @@ export default function OwnerPropertiesPage() {
                         </span>
                       )}
                     </div>
-                    
+
                     <div className="flex gap-1">
-                      <button onClick={() => setViewModal({ isOpen: true, property })}
-                        className="px-3 py-1.5 bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-200 rounded-lg transition-all group flex items-center gap-1.5" title="عرض التفاصيل">
+                      <button
+                        onClick={() => setViewModal({ isOpen: true, property })}
+                        className="px-3 py-1.5 bg-gray-50 hover:bg-blue-50 border border-gray-200 hover:border-blue-200 rounded-lg transition-all group flex items-center gap-1.5"
+                        title="عرض التفاصيل"
+                      >
                         <Eye className="w-3.5 h-3.5 text-gray-400 group-hover:text-blue-600" />
-                        <span className="text-xs text-gray-500 group-hover:text-blue-600 font-medium">عرض</span>
+                        <span className="text-xs text-gray-500 group-hover:text-blue-600 font-medium">
+                          عرض
+                        </span>
                       </button>
-                      <button onClick={() => setEditModal({ isOpen: true, property })}
-                        className="p-1.5 hover:bg-amber-50 rounded-lg transition-colors group" title="تعديل العقار">
+                      <button
+                        onClick={() => setEditModal({ isOpen: true, property })}
+                        className="p-1.5 hover:bg-amber-50 rounded-lg transition-colors group"
+                        title="تعديل العقار"
+                      >
                         <Edit className="w-3.5 h-3.5 text-gray-400 group-hover:text-amber-600" />
                       </button>
-                      <button onClick={() => setDeleteModal({ isOpen: true, property })}
-                        className="p-1.5 hover:bg-red-50 rounded-lg transition-colors group" title="حذف العقار">
+                      <button
+                        onClick={() =>
+                          setDeleteModal({ isOpen: true, property })
+                        }
+                        className="p-1.5 hover:bg-red-50 rounded-lg transition-colors group"
+                        title="حذف العقار"
+                      >
                         <Trash2 className="w-3.5 h-3.5 text-gray-400 group-hover:text-red-600" />
                       </button>
                     </div>
@@ -1247,4 +1626,4 @@ export default function OwnerPropertiesPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/property/[id]/PropertyDetail.js b/app/property/[id]/PropertyDetail.js
index 4f12c91..6c6bf3a 100644
--- a/app/property/[id]/PropertyDetail.js
+++ b/app/property/[id]/PropertyDetail.js
@@ -101,13 +101,20 @@ function mapApiDetail(item) {
   const services = {};
   serviceList.forEach(s => { services[s] = serviceDetails[s] || true; });
 
-  const terms = details.terms || {};
+  const rawTerms = details.terms || {};
+  const terms = Array.isArray(rawTerms) ? rawTerms.reduce((acc, t) => ({ ...acc, [t]: true }), {}) : rawTerms;
 
   // Try multiple key aliases like Flutter does
   const floor = details.floorNumber ?? details.floor ?? 0;
   const salons = details.numberOfSalons ?? details.salonsCount ?? details.salons ?? 0;
   const balconies = details.numberOfBalconies ?? details.balconiesCount ?? details.balconies ?? 0;
-  const proximity = details.nearbyDistances || details.proximity || {};
+  const rawProximity = details.nearbyDistances || details.proximity || {};
+  const proximity = {};
+  Object.entries(rawProximity).forEach(([k, v]) => {
+    if (!v) return;
+    const normalizedKey = k.charAt(0).toUpperCase() + k.slice(1);
+    proximity[normalizedKey] = v;
+  });
   const roomDetails = details.room || details.roomDetails || {};
 
   return {