Rahaf/SweetHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed my propries page and fixed the sidebar again mouaz is the best in the west
All checks were successful
Build frontend / build (push) Successful in 44s
Details

Browse Source
This commit is contained in:
mouazkh
2026-05-25 22:42:53 +03:00
parent 7b333f9b53
commit 427dc74e7f
3 changed files with 190 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/components/FloatingSidebar.js
View File

@ -3,7 +3,7 @@
import { useState } from 'react'; import { useState } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import Link from 'next/link'; import Link from 'next/link';
import { Heart, Bell, CreditCard, Shield, UserPlus, Settings, CalendarDays, Star, FileText } from 'lucide-react'; import { Heart, Bell, CreditCard, Shield, UserPlus, Settings } from 'lucide-react';
import { useFavorites } from '@/app/contexts/FavoritesContext'; import { useFavorites } from '@/app/contexts/FavoritesContext';
import { useNotifications } from '@/app/contexts/NotificationsContext'; import { useNotifications } from '@/app/contexts/NotificationsContext';
import AuthService from '@/app/services/AuthService'; import AuthService from '@/app/services/AuthService';
@ -177,57 +177,6 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
</Link> </Link>
{renderTooltip('payments', 'المدفوعات')} {renderTooltip('payments', 'المدفوعات')}
</motion.div> </motion.div>
<motion.div
className="relative group"
variants={buttonVariants}
initial="rest"
whileHover="hover"
whileTap="tap"
onMouseEnter={() => showTooltip('booked')}
onMouseLeave={hideTooltip}
>
<Link
href="/booked-properties"
className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
>
<CalendarDays className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
</Link>
{renderTooltip('booked', 'حجوزاتي')}
</motion.div>
<motion.div
className="relative group"
variants={buttonVariants}
initial="rest"
whileHover="hover"
whileTap="tap"
onMouseEnter={() => showTooltip('myRates')}
onMouseLeave={hideTooltip}
>
<Link
href="/my-rates"
className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
>
<Star className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
</Link>
{renderTooltip('myRates', 'تقييماتي')}
</motion.div>
<motion.div
className="relative group"
variants={buttonVariants}
initial="rest"
whileHover="hover"
whileTap="tap"
onMouseEnter={() => showTooltip('reports')}
onMouseLeave={hideTooltip}
>
<Link
href="/reports"
className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
>
<FileText className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
</Link>
{renderTooltip('reports', 'البلاغات')}
</motion.div>
<motion.div <motion.div
className="relative group" className="relative group"
variants={buttonVariants} variants={buttonVariants}

164
app/owner/properties/page.js
View File

@ -1076,12 +1076,12 @@ export default function OwnerPropertiesPage() {
transition={{ delay: index * 0.1 }} transition={{ delay: index * 0.1 }}
className="bg-white rounded-2xl shadow-sm hover:shadow-md transition-all overflow-hidden border border-gray-200" className="bg-white rounded-2xl shadow-sm hover:shadow-md transition-all overflow-hidden border border-gray-200"
> >
<div className="relative h-48 bg-gray-100"> <div className="relative aspect-[16/10] bg-gray-100 overflow-hidden">
{property.images && property.images.length > 0 ? ( {property.images && property.images.length > 0 ? (
<img <img
src={property.images[0]} src={property.images[0]}
alt={property.title} alt={property.title}
className="w-full h-full object-cover" className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
/> />
) : ( ) : (
<div className="w-full h-full flex items-center justify-center"> <div className="w-full h-full flex items-center justify-center">
@ -1089,133 +1089,123 @@ export default function OwnerPropertiesPage() {
</div> </div>
)} )}
<div className="absolute top-2 right-2 flex gap-1"> <div className="absolute top-2 right-2 flex gap-1">
<span className={`px-2 py-1 rounded-lg text-xs font-medium shadow-sm ${ <span className={`px-2 py-0.5 rounded-md text-xs font-medium shadow-sm backdrop-blur-sm ${
property.status === 'available' property.status === 'available'
? 'bg-green-100 text-green-800' ? 'bg-white/90 text-green-700'
: 'bg-yellow-100 text-yellow-800' : 'bg-white/90 text-yellow-700'
}`}> }`}>
{property.status === 'available' ? 'متاح' : 'مؤجر'} {property.status === 'available' ? 'متاح' : 'مؤجر'}
</span> </span>
{property.purpose === 'rent' && property.furnished && ( {property.purpose === 'rent' && property.furnished !== undefined && (
<span className="px-2 py-1 rounded-lg text-xs font-medium bg-amber-100 text-amber-800 shadow-sm"> <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'
</span> }`}>
)} {property.furnished ? 'مفروش' : 'غير مفروش'}
{property.purpose === 'rent' && !property.furnished && property.furnished !== undefined && (
<span className="px-2 py-1 rounded-lg text-xs font-medium bg-gray-100 text-gray-600 shadow-sm">
غير مفروش
</span> </span>
)} )}
</div> </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' ? 'مستودع' : 'عقار')}
</span>
</div>
</div> </div>
<div className="p-4"> <div className="p-3">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-start justify-between mb-1">
<span className="text-xs px-2 py-0.5 bg-amber-50 text-amber-700 rounded-full">{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> <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>
</div>
)}
</div> </div>
<h3 className="font-bold text-gray-900 mb-2">{property.title}</h3>
<div className="flex items-center gap-1 text-gray-500 text-sm mb-3"> <div className="flex items-center gap-1 text-gray-500 text-xs mb-2">
<MapPin className="w-4 h-4" /> <MapPin className="w-3 h-3" />
{property.address || property.location || 'موقع غير محدد'} <span className="truncate">{property.address || property.location || 'موقع غير محدد'}</span>
</div> </div>
<div className="flex flex-wrap items-center gap-3 text-sm text-gray-600 mb-3"> <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 mb-2">
<div className="flex items-center gap-1"> {property.bedrooms > 0 && (
<Bed className="w-4 h-4" /> <div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
<span>{property.bedrooms}</span> <Bed className="w-3 h-3" />
</div> <span>{property.bedrooms}</span>
<div className="flex items-center gap-1"> </div>
<Bath className="w-4 h-4" /> )}
<span>{property.bathrooms}</span> {property.bathrooms > 0 && (
</div> <div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
<div className="flex items-center gap-1"> <Bath className="w-3 h-3" />
<Square className="w-4 h-4" /> <span>{property.bathrooms}</span>
<span>{property.area}م²</span> </div>
</div> )}
{property.area > 0 && (
<div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
<Square className="w-3 h-3" />
<span>{property.area}م²</span>
</div>
)}
{property.floor > 0 && ( {property.floor > 0 && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
<Layers className="w-4 h-4" /> <Layers className="w-3 h-3" />
<span>ط {property.floor}</span> <span>ط {property.floor}</span>
</div> </div>
)} )}
{property.salons > 0 && ( {property.salons > 0 && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
<Sofa className="w-4 h-4" /> <Sofa className="w-3 h-3" />
<span>{property.salons}</span> <span>{property.salons}</span>
</div> </div>
)} )}
{property.balconies > 0 && ( {property.balconies > 0 && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-0.5 bg-gray-50 px-2 py-0.5 rounded-md">
<DoorOpen className="w-4 h-4" /> <DoorOpen className="w-3 h-3" />
<span>{property.balconies}</span> <span>{property.balconies}</span>
</div> </div>
)} )}
{property.rating > 0 && (
<div className="flex items-center gap-1 text-amber-600">
<Star className="w-3 h-3 fill-amber-500" />
<span>{Number(property.rating).toFixed(1)}</span>
</div>
)}
</div> </div>
<div className="flex justify-between items-center pt-3 border-t border-gray-100"> <div className="flex justify-between items-center pt-2 border-t border-gray-100">
<div> <div>
{property.purpose === 'rent' ? ( {property.purpose === 'rent' ? (
<div className="flex flex-wrap items-center gap-x-3"> <div>
{property.rentType === 'monthly' && property.monthlyPrice > 0 && ( {property.monthlyPrice > 0 && (
<span> <span className="text-base font-bold text-amber-600">
<span className="text-lg font-bold text-amber-600">{Number(property.monthlyPrice).toLocaleString()}</span> {Number(property.monthlyPrice).toLocaleString()}
<span className="text-xs text-gray-500 mr-1">ل.س /شهر</span> <span className="text-xs text-gray-500 font-normal mr-1">ل.س /شهر</span>
</span> </span>
)} )}
{property.rentType === 'daily' && property.dailyPrice > 0 && ( {property.dailyPrice > 0 && !property.monthlyPrice && (
<span> <span className="text-base font-bold text-amber-600">
<span className="text-lg font-bold text-amber-600">{Number(property.dailyPrice).toLocaleString()}</span> {Number(property.dailyPrice).toLocaleString()}
<span className="text-xs text-gray-500 mr-1">ل.س /يوم</span> <span className="text-xs text-gray-500 font-normal mr-1">ل.س /يوم</span>
</span>
)}
{property.rentType === 'daily' && property.monthlyPrice > 0 && (
<span>
<span className="text-lg font-bold text-amber-600">{Number(property.monthlyPrice).toLocaleString()}</span>
<span className="text-xs text-gray-500 mr-1">ل.س /شهر</span>
</span> </span>
)} )}
{property.deposit > 0 && ( {property.deposit > 0 && (
<span className="text-xs text-gray-400">تأمين: {Number(property.deposit).toLocaleString()}</span> <div className="text-[10px] text-gray-400">تأمين: {Number(property.deposit).toLocaleString()} ل.س</div>
)} )}
</div> </div>
) : ( ) : (
<div> <span className="text-base font-bold text-blue-600">
<span className="text-lg font-bold text-blue-600"> {Number(property.salePrice).toLocaleString()} ل.س
{Number(property.salePrice).toLocaleString()} ل.س </span>
</span>
<span className="text-xs text-gray-500 mr-1">للبيع</span>
</div>
)} )}
</div> </div>
<div className="flex gap-2"> <div className="flex gap-1">
<button <button onClick={() => setViewModal({ isOpen: true, property })}
onClick={() => setViewModal({ isOpen: true, property })} className="p-1.5 hover:bg-blue-50 rounded-lg transition-colors group" title="عرض التفاصيل">
className="p-2 hover:bg-blue-50 rounded-lg transition-colors group" <Eye className="w-3.5 h-3.5 text-gray-400 group-hover:text-blue-600" />
title="عرض التفاصيل"
>
<Eye className="w-4 h-4 text-gray-600 group-hover:text-blue-600" />
</button> </button>
<button <button onClick={() => setEditModal({ isOpen: true, property })}
onClick={() => setEditModal({ isOpen: true, property })} className="p-1.5 hover:bg-amber-50 rounded-lg transition-colors group" title="تعديل العقار">
className="p-2 hover:bg-amber-50 rounded-lg transition-colors group" <Edit className="w-3.5 h-3.5 text-gray-400 group-hover:text-amber-600" />
title="تعديل العقار"
>
<Edit className="w-4 h-4 text-gray-600 group-hover:text-amber-600" />
</button> </button>
<button <button onClick={() => setDeleteModal({ isOpen: true, property })}
onClick={() => setDeleteModal({ isOpen: true, property })} className="p-1.5 hover:bg-red-50 rounded-lg transition-colors group" title="حذف العقار">
className="p-2 hover:bg-red-50 rounded-lg transition-colors group" <Trash2 className="w-3.5 h-3.5 text-gray-400 group-hover:text-red-600" />
title="حذف العقار"
>
<Trash2 className="w-4 h-4 text-gray-600 group-hover:text-red-600" />
</button> </button>
</div> </div>
</div> </div>

226
app/property/[id]/PropertyDetail.js
View File

@ -302,15 +302,15 @@ export default function PropertyDetailsPage() {
</Link> </Link>
</motion.div> </motion.div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2 space-y-6"> <div className="lg:col-span-2 space-y-5">
{/* Image Gallery */} {/* Image Gallery */}
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-200"> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-200">
<div className="relative bg-gray-900" style={{ minHeight: '420px', maxHeight: '520px' }}> <div className="relative bg-gray-900" style={{ minHeight: '380px', maxHeight: '460px' }}>
{property.images.length > 0 ? ( {property.images.length > 0 ? (
<img src={property.images[currentImage]} alt={property.title} <img src={property.images[currentImage]} alt={property.title}
className="w-full h-full object-contain mx-auto" className="w-full h-full object-contain mx-auto"
style={{ minHeight: '420px', maxHeight: '520px' }} /> style={{ minHeight: '380px', maxHeight: '460px' }} />
) : ( ) : (
<div className="w-full h-full flex items-center justify-center" style={{ minHeight: '420px' }}> <div className="w-full h-full flex items-center justify-center" style={{ minHeight: '420px' }}>
<div className="text-center"> <div className="text-center">
@ -363,29 +363,27 @@ export default function PropertyDetailsPage() {
</motion.div> </motion.div>
{/* Property Info */} {/* Property Info */}
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="bg-white rounded-2xl p-6 shadow-sm border border-gray-200"> <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="bg-white rounded-2xl p-5 shadow-sm border border-gray-200">
<div className="flex justify-between items-start mb-4"> <div className="flex justify-between items-start mb-3">
<div> <div>
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-1">
<span className="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">{property.typeLabel}</span> <span className="px-2 py-0.5 bg-amber-100 text-amber-800 rounded-full text-xs">{property.typeLabel}</span>
<span className={`px-3 py-1 rounded-full text-sm ${property.status === 'available' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>{property.statusLabel}</span> <span className={`px-2 py-0.5 rounded-full text-xs ${property.status === 'available' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}`}>{property.statusLabel}</span>
</div> </div>
<h1 className="text-2xl font-bold text-gray-900">{property.title}</h1> <h1 className="text-xl font-bold text-gray-900">{property.title}</h1>
<div className="flex items-center gap-1 text-gray-500 mt-1"> <div className="flex items-center gap-1 text-gray-500 text-xs mt-0.5">
<MapPin className="w-4 h-4" /> <MapPin className="w-3 h-3" />
<span>{property.location.address || property.location.city}</span> <span>{property.location.address || property.location.city}</span>
</div> </div>
</div> </div>
<div className="flex gap-2"> <button onClick={handleFavorite} disabled={favLoading}
<button onClick={handleFavorite} disabled={favLoading} className="p-1.5 rounded-full hover:bg-gray-100 transition-colors">
className="p-2 rounded-full hover:bg-gray-100 transition-colors"> <Heart className={`w-5 h-5 ${isFav ? 'fill-red-500 text-red-500' : 'text-gray-400'}`} />
<Heart className={`w-6 h-6 ${isFav ? 'fill-red-500 text-red-500' : 'text-gray-400'}`} /> </button>
</button>
</div>
</div> </div>
{/* Price */} {/* Price */}
<div className="bg-amber-50 rounded-xl p-4 mb-6"> <div className="bg-amber-50 rounded-xl p-3 mb-4">
{property.isRent ? ( {property.isRent ? (
<div className="flex flex-wrap gap-6 items-end"> <div className="flex flex-wrap gap-6 items-end">
{property.priceDisplay.monthly > 0 && ( {property.priceDisplay.monthly > 0 && (
@ -416,79 +414,79 @@ export default function PropertyDetailsPage() {
</div> </div>
{/* Specs Tiles */} {/* Specs Tiles */}
<div className="grid grid-cols-3 md:grid-cols-6 gap-2 mb-6"> <div className="grid grid-cols-3 md:grid-cols-6 gap-1.5 mb-4">
{property.bedrooms > 0 && ( {property.bedrooms > 0 && (
<div className="bg-gray-50 rounded-xl p-3 text-center"> <div className="bg-gray-50 rounded-lg p-2 text-center">
<Bed className="w-5 h-5 text-amber-500 mx-auto mb-1" /> <Bed className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
<div className="font-bold text-gray-900">{property.bedrooms}</div> <div className="font-bold text-gray-900 text-sm">{property.bedrooms}</div>
<div className="text-xs text-gray-500">غرف نوم</div> <div className="text-[10px] text-gray-500">غرف نوم</div>
</div> </div>
)} )}
{property.bathrooms > 0 && ( {property.bathrooms > 0 && (
<div className="bg-gray-50 rounded-xl p-3 text-center"> <div className="bg-gray-50 rounded-lg p-2 text-center">
<Bath className="w-5 h-5 text-amber-500 mx-auto mb-1" /> <Bath className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
<div className="font-bold text-gray-900">{property.bathrooms}</div> <div className="font-bold text-gray-900 text-sm">{property.bathrooms}</div>
<div className="text-xs text-gray-500">حمامات</div> <div className="text-[10px] text-gray-500">حمامات</div>
</div> </div>
)} )}
{property.area > 0 && ( {property.area > 0 && (
<div className="bg-gray-50 rounded-xl p-3 text-center"> <div className="bg-gray-50 rounded-lg p-2 text-center">
<Square className="w-5 h-5 text-amber-500 mx-auto mb-1" /> <Square className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
<div className="font-bold text-gray-900">{property.area}</div> <div className="font-bold text-gray-900 text-sm">{property.area}</div>
<div className="text-xs text-gray-500">م²</div> <div className="text-[10px] text-gray-500">م²</div>
</div> </div>
)} )}
{property.floor > 0 && ( {property.floor > 0 && (
<div className="bg-gray-50 rounded-xl p-3 text-center"> <div className="bg-gray-50 rounded-lg p-2 text-center">
<Layers className="w-5 h-5 text-amber-500 mx-auto mb-1" /> <Layers className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
<div className="font-bold text-gray-900">{property.floor}</div> <div className="font-bold text-gray-900 text-sm">{property.floor}</div>
<div className="text-xs text-gray-500">طابق</div> <div className="text-[10px] text-gray-500">طابق</div>
</div> </div>
)} )}
{property.salons > 0 && ( {property.salons > 0 && (
<div className="bg-gray-50 rounded-xl p-3 text-center"> <div className="bg-gray-50 rounded-lg p-2 text-center">
<Sofa className="w-5 h-5 text-amber-500 mx-auto mb-1" /> <Sofa className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
<div className="font-bold text-gray-900">{property.salons}</div> <div className="font-bold text-gray-900 text-sm">{property.salons}</div>
<div className="text-xs text-gray-500">صالونات</div> <div className="text-[10px] text-gray-500">صالونات</div>
</div> </div>
)} )}
{property.balconies > 0 && ( {property.balconies > 0 && (
<div className="bg-gray-50 rounded-xl p-3 text-center"> <div className="bg-gray-50 rounded-lg p-2 text-center">
<DoorOpen className="w-5 h-5 text-amber-500 mx-auto mb-1" /> <DoorOpen className="w-4 h-4 text-amber-500 mx-auto mb-0.5" />
<div className="font-bold text-gray-900">{property.balconies}</div> <div className="font-bold text-gray-900 text-sm">{property.balconies}</div>
<div className="text-xs text-gray-500">بلكونات</div> <div className="text-[10px] text-gray-500">بلكونات</div>
</div> </div>
)} )}
{avgRating !== null && avgRating > 0 && ( {avgRating !== null && avgRating > 0 && (
<div className="bg-gray-50 rounded-xl p-3 text-center"> <div className="bg-gray-50 rounded-lg p-2 text-center">
<Star className="w-5 h-5 text-amber-500 mx-auto mb-1 fill-amber-500" /> <Star className="w-4 h-4 text-amber-500 mx-auto mb-0.5 fill-amber-500" />
<div className="font-bold text-gray-900">{avgRating.toFixed(1)}</div> <div className="font-bold text-gray-900 text-sm">{avgRating.toFixed(1)}</div>
<div className="text-xs text-gray-500">التقييم</div> <div className="text-[10px] text-gray-500">التقييم</div>
</div> </div>
)} )}
</div> </div>
{/* Description */} {/* Description */}
{property.description && ( {property.description && (
<div className="mb-6"> <div className="mb-4">
<h3 className="font-bold text-gray-900 mb-2">الوصف</h3> <h3 className="font-bold text-gray-900 mb-1 text-sm">الوصف</h3>
<p className="text-gray-600 leading-relaxed">{property.description}</p> <p className="text-gray-600 text-sm leading-relaxed">{property.description}</p>
</div> </div>
)} )}
{/* Features */} {/* Features */}
<div className="flex flex-wrap gap-2 mb-6"> <div className="flex flex-wrap gap-1.5 mb-4">
{property.isSmokeAllow && <span className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm border flex items-center gap-1"><Wind className="w-3 h-3" /> يسمح بالتدخين</span>} {property.isSmokeAllow && <span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded-full text-xs border flex items-center gap-1"><Wind className="w-3 h-3" /> يسمح بالتدخين</span>}
{!property.isSmokeAllow && <span className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm border flex items-center gap-1"><Ban className="w-3 h-3" /> ممنوع التدخين</span>} {!property.isSmokeAllow && <span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded-full text-xs border flex items-center gap-1"><Ban className="w-3 h-3" /> ممنوع التدخين</span>}
{property.isVisitorAllow && <span className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm border flex items-center gap-1"><Users className="w-3 h-3" /> يسمح بالزوار</span>} {property.isVisitorAllow && <span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded-full text-xs border flex items-center gap-1"><Users className="w-3 h-3" /> يسمح بالزوار</span>}
{property.specializedFor && <span className="px-3 py-1 bg-amber-50 text-amber-700 rounded-full text-sm border border-amber-200 flex items-center gap-1"><Users className="w-3 h-3" /> {property.specializedFor}</span>} {property.specializedFor && <span className="px-2 py-0.5 bg-amber-50 text-amber-700 rounded-full text-xs border border-amber-200 flex items-center gap-1"><Users className="w-3 h-3" /> {property.specializedFor}</span>}
</div> </div>
{/* Services with detail text */} {/* Services with detail text */}
{Object.keys(property.services).length > 0 && ( {Object.keys(property.services).length > 0 && (
<div className="mb-6"> <div className="mb-4">
<h3 className="font-bold text-gray-900 mb-3">الخدمات</h3> <h3 className="font-bold text-gray-900 mb-2 text-sm">الخدمات</h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-1.5">
{Object.entries(property.services).map(([key, val]) => { {Object.entries(property.services).map(([key, val]) => {
if (!val) return null; if (!val) return null;
const detail = typeof val === 'object' && val.detail ? val.detail : null; const detail = typeof val === 'object' && val.detail ? val.detail : null;
@ -505,12 +503,12 @@ export default function PropertyDetailsPage() {
{/* Room Details (only for room type) */} {/* Room Details (only for room type) */}
{isRoomType && Object.keys(property.roomDetails).length > 0 && ( {isRoomType && Object.keys(property.roomDetails).length > 0 && (
<div className="mb-6 bg-blue-50 rounded-xl p-4"> <div className="mb-4 bg-blue-50 rounded-xl p-3">
<h3 className="font-bold text-gray-900 mb-3 flex items-center gap-2"> <h3 className="font-bold text-gray-900 mb-2 text-sm flex items-center gap-2">
<Info className="w-5 h-5 text-blue-500" /> <Info className="w-4 h-4 text-blue-500" />
تفاصيل الغرفة تفاصيل الغرفة
</h3> </h3>
<div className="grid grid-cols-2 md:grid-cols-3 gap-3"> <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
{(() => { {(() => {
const rd = property.roomDetails; const rd = property.roomDetails;
const items = []; const items = [];
@ -542,24 +540,24 @@ export default function PropertyDetailsPage() {
{/* Proximity */} {/* Proximity */}
{Object.keys(property.proximity).length > 0 && ( {Object.keys(property.proximity).length > 0 && (
<div className="mb-6"> <div className="mb-4">
<h3 className="font-bold text-gray-900 mb-3">القرب من الخدمات</h3> <h3 className="font-bold text-gray-900 mb-2 text-sm">القرب من الخدمات</h3>
<div className="grid grid-cols-2 md:grid-cols-3 gap-2"> <div className="grid grid-cols-2 md:grid-cols-3 gap-1.5">
{Object.entries(property.proximity).map(([key, val]) => { {Object.entries(property.proximity).map(([key, val]) => {
if (!val) return null; if (!val) return null;
const dist = typeof val === 'object' ? val.distance : val; const dist = typeof val === 'object' ? val.distance : val;
return ( return (
<div key={key} className="bg-gray-50 rounded-lg p-3 flex items-center gap-2"> <div key={key} className="bg-gray-50 rounded-lg p-2 flex items-center gap-1.5">
{key === 'School' && <School className="w-4 h-4 text-amber-500 flex-shrink-0" />} {key === 'School' && <School className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
{key === 'Hospital' && <Hospital className="w-4 h-4 text-amber-500 flex-shrink-0" />} {key === 'Hospital' && <Hospital className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
{key === 'Restaurant' && <Store className="w-4 h-4 text-amber-500 flex-shrink-0" />} {key === 'Restaurant' && <Store className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
{key === 'University' && <GraduationCap className="w-4 h-4 text-amber-500 flex-shrink-0" />} {key === 'University' && <GraduationCap className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
{key === 'Park' && <TreePine className="w-4 h-4 text-amber-500 flex-shrink-0" />} {key === 'Park' && <TreePine className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
{key === 'Mall' && <Building className="w-4 h-4 text-amber-500 flex-shrink-0" />} {key === 'Mall' && <Building className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
{!['School','Hospital','Restaurant','University','Park','Mall'].includes(key) && <MapPin className="w-4 h-4 text-amber-500 flex-shrink-0" />} {!['School','Hospital','Restaurant','University','Park','Mall'].includes(key) && <MapPin className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />}
<div> <div>
<div className="text-sm font-medium text-gray-900">{proximityLabels[key] || key}</div> <div className="text-xs font-medium text-gray-900">{proximityLabels[key] || key}</div>
<div className="text-xs text-gray-500">{dist} {typeof dist === 'number' ? 'كم' : ''}</div> <div className="text-[10px] text-gray-500">{dist} {typeof dist === 'number' ? 'كم' : ''}</div>
</div> </div>
</div> </div>
); );
@ -570,19 +568,19 @@ export default function PropertyDetailsPage() {
{/* Terms as checklist */} {/* Terms as checklist */}
{Object.keys(property.terms).length > 0 && ( {Object.keys(property.terms).length > 0 && (
<div className="mb-6"> <div className="mb-4">
<h3 className="font-bold text-gray-900 mb-3">الشروط</h3> <h3 className="font-bold text-gray-900 mb-2 text-sm">الشروط</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-2"> <div className="grid grid-cols-1 md:grid-cols-2 gap-1.5">
{Object.entries(property.terms).map(([key, val]) => { {Object.entries(property.terms).map(([key, val]) => {
if (!val) return null; if (!val) return null;
return ( return (
<div key={key} className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg"> <div key={key} className="flex items-center gap-1.5 p-1.5 bg-gray-50 rounded-lg">
{key.startsWith('No') || key.startsWith('Only') ? ( {key.startsWith('No') || key.startsWith('Only') ? (
<Ban className="w-4 h-4 text-red-500 flex-shrink-0" /> <Ban className="w-3.5 h-3.5 text-red-500 flex-shrink-0" />
) : ( ) : (
<Check className="w-4 h-4 text-green-500 flex-shrink-0" /> <Check className="w-3.5 h-3.5 text-green-500 flex-shrink-0" />
)} )}
<span className="text-sm text-gray-700">{termLabels[key] || key}</span> <span className="text-xs text-gray-700">{termLabels[key] || key}</span>
</div> </div>
); );
})} })}
@ -641,45 +639,45 @@ export default function PropertyDetailsPage() {
</div> </div>
{/* Sidebar */} {/* Sidebar */}
<div className="space-y-6"> <div className="space-y-4">
{/* Booking Card */} {/* Booking Card */}
{property.isRent && ( {property.isRent && (
<motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="bg-white rounded-2xl p-6 shadow-sm border border-gray-200 sticky top-6"> <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="bg-white rounded-2xl p-5 shadow-sm border border-gray-200 sticky top-6">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-3">
<Calendar className="w-5 h-5 text-amber-500" /> <Calendar className="w-4 h-4 text-amber-500" />
<h3 className="text-lg font-bold text-gray-900">حجز العقار</h3> <h3 className="font-bold text-gray-900">حجز العقار</h3>
</div> </div>
{bookingSuccess ? ( {bookingSuccess ? (
<div className="text-center py-4"> <div className="text-center py-3">
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"> <div className="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
<Check className="w-8 h-8 text-green-600" /> <Check className="w-7 h-7 text-green-600" />
</div> </div>
<h4 className="font-bold text-green-700 mb-1">تم إرسال طلب الحجز</h4> <h4 className="font-bold text-green-700 text-sm mb-1">تم إرسال طلب الحجز</h4>
<p className="text-sm text-gray-500">سيتم مراجعة طلبك من قبل المالك</p> <p className="text-xs text-gray-500">سيتم مراجعة طلبك من قبل المالك</p>
</div> </div>
) : ( ) : (
<> <>
<div className="space-y-3 mb-4"> <div className="space-y-2 mb-3">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">من تاريخ</label> <label className="block text-xs font-medium text-gray-700 mb-1">من تاريخ</label>
<input type="date" value={bookingDates.start} onChange={e => setBookingDates(prev => ({ ...prev, start: e.target.value }))} <input type="date" value={bookingDates.start} onChange={e => setBookingDates(prev => ({ ...prev, start: e.target.value }))}
className="w-full px-3 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500" /> className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500" />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">إلى تاريخ</label> <label className="block text-xs font-medium text-gray-700 mb-1">إلى تاريخ</label>
<input type="date" value={bookingDates.end} onChange={e => setBookingDates(prev => ({ ...prev, end: e.target.value }))} <input type="date" value={bookingDates.end} onChange={e => setBookingDates(prev => ({ ...prev, end: e.target.value }))}
className="w-full px-3 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500" /> className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500" />
</div> </div>
</div> </div>
{bookingError && ( {bookingError && (
<div className="bg-red-50 text-red-600 p-3 rounded-xl text-sm mb-4">{bookingError}</div> <div className="bg-red-50 text-red-600 p-2.5 rounded-xl text-xs mb-3">{bookingError}</div>
)} )}
<button onClick={handleBookNow} disabled={bookingLoading} <button onClick={handleBookNow} disabled={bookingLoading}
className="w-full bg-amber-500 hover:bg-amber-600 text-white py-3 rounded-xl font-bold transition-all disabled:opacity-50 flex items-center justify-center gap-2"> className="w-full bg-amber-500 hover:bg-amber-600 text-white py-2.5 rounded-xl font-bold text-sm transition-all disabled:opacity-50 flex items-center justify-center gap-2">
{bookingLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : <Calendar className="w-5 h-5" />} {bookingLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Calendar className="w-4 h-4" />}
{bookingLoading ? 'جاري الحجز...' : 'حجز الآن'} {bookingLoading ? 'جاري الحجز...' : 'حجز الآن'}
</button> </button>
</> </>
@ -688,30 +686,30 @@ export default function PropertyDetailsPage() {
)} )}
{/* Contact Card */} {/* Contact Card */}
<motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="bg-white rounded-2xl p-6 shadow-sm border border-gray-200"> <motion.div initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} className="bg-white rounded-2xl p-5 shadow-sm border border-gray-200">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-3">
<Phone className="w-5 h-5 text-amber-500" /> <Phone className="w-4 h-4 text-amber-500" />
<h3 className="text-lg font-bold text-gray-900">معلومات المالك</h3> <h3 className="font-bold text-gray-900">معلومات المالك</h3>
</div> </div>
{showContact && contactInfo ? ( {showContact && contactInfo ? (
<div className="space-y-3"> <div className="space-y-2">
<div className="flex items-center gap-3 p-3 bg-gray-50 rounded-xl"> <div className="flex items-center gap-2.5 p-2.5 bg-gray-50 rounded-xl">
<Phone className="w-5 h-5 text-gray-600 flex-shrink-0" /> <Phone className="w-4 h-4 text-gray-600 flex-shrink-0" />
<span className="font-medium text-gray-900" dir="ltr">{contactInfo.phone || contactInfo.phoneNumber || '—'}</span> <span className="font-medium text-gray-900 text-sm" dir="ltr">{contactInfo.phone || contactInfo.phoneNumber || '—'}</span>
</div> </div>
{contactInfo.whatsAppNumber && ( {contactInfo.whatsAppNumber && (
<a href={`https://wa.me/${contactInfo.whatsAppNumber.replace(/[^0-9]/g, '')}`} target="_blank" rel="noopener noreferrer" <a href={`https://wa.me/${contactInfo.whatsAppNumber.replace(/[^0-9]/g, '')}`} target="_blank" rel="noopener noreferrer"
className="flex items-center gap-3 p-3 bg-green-50 rounded-xl hover:bg-green-100 transition-colors"> className="flex items-center gap-2.5 p-2.5 bg-green-50 rounded-xl hover:bg-green-100 transition-colors">
<MessageCircle className="w-5 h-5 text-green-600 flex-shrink-0" /> <MessageCircle className="w-4 h-4 text-green-600 flex-shrink-0" />
<span className="font-medium text-gray-900" dir="ltr">{contactInfo.whatsAppNumber}</span> <span className="font-medium text-gray-900 text-sm" dir="ltr">{contactInfo.whatsAppNumber}</span>
</a> </a>
)} )}
</div> </div>
) : ( ) : (
<button onClick={fetchContactInfo} <button onClick={fetchContactInfo}
className="w-full bg-gray-800 hover:bg-gray-900 text-white py-3 rounded-xl font-medium transition-colors flex items-center justify-center gap-2"> className="w-full bg-gray-800 hover:bg-gray-900 text-white py-2.5 rounded-xl font-medium text-sm transition-colors flex items-center justify-center gap-2">
<Phone className="w-5 h-5" /> <Phone className="w-4 h-4" />
عرض معلومات الاتصال عرض معلومات الاتصال
</button> </button>
)} )}