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 49s

This commit is contained in:
mouazkh
2026-05-25 22:14:37 +03:00
parent aff9912ac2
commit 7a3248aec5
3 changed files with 126 additions and 110 deletions

View File

@ -27,14 +27,14 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
if (!AuthService.isAuthenticated()) return null; if (!AuthService.isAuthenticated()) return null;
const positionStyle = { const positionStyle = {
left: '24px', left: '16px',
top: '50%', top: '50%',
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
}; };
const cardVariants = { const cardVariants = {
initial: { opacity: 0, x: isRTL ? -20 : 20 }, initial: { opacity: 0, x: 20 },
animate: { opacity: 1, x: 0, transition: { duration: 0.4, ease: 'easeOut' } }, animate: { opacity: 1, x: 0, transition: { duration: 0.4, ease: 'easeOut' } },
}; };
@ -47,17 +47,8 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
const renderTooltip = (id, label) => { const renderTooltip = (id, label) => {
if (tooltip !== id) return null; if (tooltip !== id) return null;
return ( return (
<div <div className="absolute left-full mr-3 top-1/2 -translate-y-1/2 px-3 py-2 bg-gray-800 text-white text-sm rounded-lg whitespace-nowrap z-20 shadow-lg">
className={`absolute ${isRTL ? 'right-full mr-2' : 'left-full ml-2'} top-1/2 -translate-y-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded-lg whitespace-nowrap z-20 shadow-lg flex items-center`} {label}
>
<span className="relative">
{label}
<span
className={`absolute ${isRTL ? 'right-full -mr-1' : 'left-full -ml-1'} top-1/2 -translate-y-1/2 w-0 h-0 border-t-4 border-b-4 border-transparent ${
isRTL ? 'border-r-4 border-r-gray-800' : 'border-l-4 border-l-gray-800'
}`}
></span>
</span>
</div> </div>
); );
}; };
@ -70,7 +61,7 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
initial="initial" initial="initial"
animate="animate" animate="animate"
> >
<div className="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg border border-gray-200/60 py-3 px-2 flex flex-col gap-3 transition-all duration-300 hover:shadow-xl hover:bg-white/95"> <div className="bg-white/90 backdrop-blur-md rounded-2xl shadow-lg border border-gray-200/60 py-4 px-3 flex flex-col gap-4 transition-all duration-300 hover:shadow-xl hover:bg-white/95">
{isAdmin ? ( {isAdmin ? (
<> <>
<motion.div <motion.div
@ -84,9 +75,9 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
> >
<Link <Link
href="/admin/add-admin" href="/admin/add-admin"
className="flex items-center justify-center w-12 h-12 rounded-xl bg-amber-50 border border-amber-200 text-amber-600 hover:bg-amber-100 transition-colors" className="flex items-center justify-center w-14 h-14 rounded-xl bg-amber-50 border border-amber-200 text-amber-600 hover:bg-amber-100 transition-colors"
> >
<UserPlus className="w-6 h-6" /> <UserPlus className="w-7 h-7" />
</Link> </Link>
{renderTooltip('addAdmin', 'إضافة أدمن')} {renderTooltip('addAdmin', 'إضافة أدمن')}
</motion.div> </motion.div>
@ -102,9 +93,9 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
> >
<Link <Link
href="/admin/privacy" href="/admin/privacy"
className="flex items-center justify-center w-12 h-12 rounded-xl bg-slate-50 border border-slate-200 text-slate-700 hover:bg-slate-100 transition-colors" className="flex items-center justify-center w-14 h-14 rounded-xl bg-slate-50 border border-slate-200 text-slate-700 hover:bg-slate-100 transition-colors"
> >
<Shield className="w-6 h-6" /> <Shield className="w-7 h-7" />
</Link> </Link>
{renderTooltip('editPrivacy', 'تعديل سياسة الخصوصية')} {renderTooltip('editPrivacy', 'تعديل سياسة الخصوصية')}
</motion.div> </motion.div>
@ -122,15 +113,15 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
> >
<Link <Link
href="/favorites" href="/favorites"
className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors" className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
> >
<div className="relative"> <div className="relative">
<Heart className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" /> <Heart className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
{favorites.length > 0 && ( {favorites.length > 0 && (
<motion.span <motion.span
initial={{ scale: 0 }} initial={{ scale: 0 }}
animate={{ scale: 1 }} animate={{ scale: 1 }}
className="absolute -right-1 -top-1 w-5 h-5 bg-linear-to-r from-amber-500 to-amber-600 text-white text-xs rounded-full flex items-center justify-center shadow-md" className="absolute -right-1 -top-1 w-6 h-6 bg-linear-to-r from-amber-500 to-amber-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
> >
{favorites.length} {favorites.length}
</motion.span> </motion.span>
@ -150,15 +141,15 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
> >
<Link <Link
href="/notifications" href="/notifications"
className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors" className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
> >
<div className="relative"> <div className="relative">
<Bell className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" /> <Bell className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
{unreadCount > 0 && ( {unreadCount > 0 && (
<motion.span <motion.span
initial={{ scale: 0 }} initial={{ scale: 0 }}
animate={{ scale: 1 }} animate={{ scale: 1 }}
className="absolute -right-1 -top-1 w-5 h-5 bg-linear-to-r from-red-500 to-red-600 text-white text-xs rounded-full flex items-center justify-center shadow-md" className="absolute -right-1 -top-1 w-6 h-6 bg-linear-to-r from-red-500 to-red-600 text-white text-xs rounded-full flex items-center justify-center shadow-md"
> >
{unreadCount} {unreadCount}
</motion.span> </motion.span>
@ -178,9 +169,9 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
> >
<Link <Link
href="/payments" href="/payments"
className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors" className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
> >
<CreditCard className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" /> <CreditCard className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
</Link> </Link>
{renderTooltip('payments', 'المدفوعات')} {renderTooltip('payments', 'المدفوعات')}
</motion.div> </motion.div>
@ -195,9 +186,9 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
> >
<Link <Link
href="/booked-properties" href="/booked-properties"
className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors" className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
> >
<CalendarDays className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" /> <CalendarDays className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
</Link> </Link>
{renderTooltip('booked', 'حجوزاتي')} {renderTooltip('booked', 'حجوزاتي')}
</motion.div> </motion.div>
@ -212,9 +203,9 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
> >
<Link <Link
href="/my-rates" href="/my-rates"
className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors" className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
> >
<Star className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" /> <Star className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
</Link> </Link>
{renderTooltip('myRates', 'تقييماتي')} {renderTooltip('myRates', 'تقييماتي')}
</motion.div> </motion.div>
@ -229,9 +220,9 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
> >
<Link <Link
href="/reports" href="/reports"
className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors" className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
> >
<FileText className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" /> <FileText className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
</Link> </Link>
{renderTooltip('reports', 'البلاغات')} {renderTooltip('reports', 'البلاغات')}
</motion.div> </motion.div>
@ -246,9 +237,9 @@ export default function FloatingSidebar({ isRTL, isAdmin }) {
> >
<Link <Link
href="/settings" href="/settings"
className="flex items-center justify-center w-12 h-12 rounded-xl transition-colors" className="flex items-center justify-center w-14 h-14 rounded-xl transition-colors"
> >
<Settings className="w-6 h-6 text-gray-600 transition-colors group-hover:text-amber-600" /> <Settings className="w-7 h-7 text-gray-600 transition-colors group-hover:text-amber-600" />
</Link> </Link>
{renderTooltip('settings', 'الإعدادات')} {renderTooltip('settings', 'الإعدادات')}
</motion.div> </motion.div>

View File

@ -688,11 +688,16 @@ export default function OwnerPropertiesPage() {
const [properties, setProperties] = useState([]); const [properties, setProperties] = useState([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [showAddMenu, setShowAddMenu] = useState(false); const [showAddMenu, setShowAddMenu] = useState(false);
const [activeTab, setActiveTab] = useState('rent');
const [deleteModal, setDeleteModal] = useState({ isOpen: false, property: null }); const [deleteModal, setDeleteModal] = useState({ isOpen: false, property: null });
const [viewModal, setViewModal] = useState({ isOpen: false, property: null }); const [viewModal, setViewModal] = useState({ isOpen: false, property: null });
const [editModal, setEditModal] = 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;
useEffect(() => { useEffect(() => {
const authUser = AuthService.getUser(); const authUser = AuthService.getUser();
if (authUser && AuthService.isOwner()) { if (authUser && AuthService.isOwner()) {
@ -740,7 +745,8 @@ export default function OwnerPropertiesPage() {
return { return {
id: item.id, id: item.id,
title: info.address || `عقار #${item.id}`, title: info.address || `عقار #${item.id}`,
propertyType: { 0: 'apartment', 1: 'villa', 2: 'house' }[info.buildingType] || 'apartment', 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', purpose: 'rent',
rentType: { 0: 'daily', 1: 'monthly' }[item.rentType] || 'daily', rentType: { 0: 'daily', 1: 'monthly' }[item.rentType] || 'daily',
dailyPrice: item.dailyRent || 0, dailyPrice: item.dailyRent || 0,
@ -776,7 +782,8 @@ export default function OwnerPropertiesPage() {
return { return {
id: item.id, id: item.id,
title: info.address || `عقار للبيع #${item.id}`, title: info.address || `عقار للبيع #${item.id}`,
propertyType: { 0: 'apartment', 1: 'villa', 2: 'house' }[info.buildingType] || 'apartment', 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', purpose: 'sale',
dailyPrice: 0, dailyPrice: 0,
monthlyPrice: 0, monthlyPrice: 0,
@ -986,7 +993,27 @@ export default function OwnerPropertiesPage() {
</div> </div>
</motion.div> </motion.div>
{properties.length === 0 ? ( {/* 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'}`}>
<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>}
</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'}`}>
<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>}
</span>
</button>
</div>
{filteredProperties.length === 0 ? (
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
@ -995,10 +1022,12 @@ export default function OwnerPropertiesPage() {
<div className="w-24 h-24 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4"> <div className="w-24 h-24 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
<Building className="w-12 h-12 text-amber-600" /> <Building className="w-12 h-12 text-amber-600" />
</div> </div>
<h3 className="text-xl font-bold text-gray-900 mb-2">لا توجد عقارات بعد</h3> <h3 className="text-xl font-bold text-gray-900 mb-2">
<p className="text-gray-600 mb-6">ابدأ بإضافة أول عقار لك الآن</p> {activeTab === 'rent' ? 'لا توجد عقارات للإيجار' : 'لا توجد عقارات للبيع'}
</h3>
<p className="text-gray-600 mb-6">ابدأ بإضافة أول عقار {activeTab === 'rent' ? 'للإيجار' : 'للبيع'} الآن</p>
<Link <Link
href="/owner/properties/add" 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" 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"
> >
<PlusCircle className="w-5 h-5" /> <PlusCircle className="w-5 h-5" />
@ -1007,7 +1036,7 @@ export default function OwnerPropertiesPage() {
</motion.div> </motion.div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{properties.map((property, index) => ( {filteredProperties.map((property, index) => (
<motion.div <motion.div
key={property.id} key={property.id}
variants={fadeInUp} variants={fadeInUp}
@ -1028,18 +1057,31 @@ export default function OwnerPropertiesPage() {
<ImageIcon className="w-12 h-12 text-gray-400" /> <ImageIcon className="w-12 h-12 text-gray-400" />
</div> </div>
)} )}
<div className="absolute top-2 right-2"> <div className="absolute top-2 right-2 flex gap-1">
<span className={`px-2 py-1 rounded-lg text-xs font-medium ${ <span className={`px-2 py-1 rounded-lg text-xs font-medium shadow-sm ${
property.status === 'available' property.status === 'available'
? 'bg-green-100 text-green-800' ? 'bg-green-100 text-green-800'
: 'bg-yellow-100 text-yellow-800' : 'bg-yellow-100 text-yellow-800'
}`}> }`}>
{property.status === 'available' ? 'متاح' : 'مؤجر'} {property.status === 'available' ? 'متاح' : 'مؤجر'}
</span> </span>
{property.purpose === 'rent' && property.furnished && (
<span className="px-2 py-1 rounded-lg text-xs font-medium bg-amber-100 text-amber-800 shadow-sm">
مفروش
</span>
)}
{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>
)}
</div> </div>
</div> </div>
<div className="p-4"> <div className="p-4">
<div className="flex items-center gap-2 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>
</div>
<h3 className="font-bold text-gray-900 mb-2">{property.title}</h3> <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-sm mb-3">
@ -1060,6 +1102,12 @@ export default function OwnerPropertiesPage() {
<Square className="w-4 h-4" /> <Square className="w-4 h-4" />
<span>{property.area}م²</span> <span>{property.area}م²</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>{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-3 border-t border-gray-100">

View File

@ -94,13 +94,25 @@ function mapApiDetail(item) {
const allRaw = rawImages.length > 0 ? rawImages : photosFallback; const allRaw = rawImages.length > 0 ? rawImages : photosFallback;
const images = allRaw.length > 0 ? allRaw.map(buildImageUrl) : []; const images = allRaw.length > 0 ? allRaw.map(buildImageUrl) : [];
const services = details.services || {}; // Normalize services: Flutter sends list of strings or object with boolean values
const rawServices = details.services || {};
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; });
const terms = details.terms || {}; const terms = details.terms || {};
const proximity = details.proximity || {};
const roomDetails = details.roomDetails || {}; // 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 roomDetails = details.room || details.roomDetails || {};
return { return {
id: item.id, id: item.id,
propertyInformationId: info.id,
title: details.description || info.address || `عقار #${item.id}`, title: details.description || info.address || `عقار #${item.id}`,
description: details.description || info.description || '', description: details.description || info.description || '',
type: propType, type: propType,
@ -118,9 +130,9 @@ function mapApiDetail(item) {
bedrooms: info.numberOfBedRooms || 0, bedrooms: info.numberOfBedRooms || 0,
bathrooms: info.numberOfBathRooms || 0, bathrooms: info.numberOfBathRooms || 0,
area: info.space || 0, area: info.space || 0,
floor: details.floor || 0, floor,
salons: details.salons || 0, salons,
balconies: details.balconies || 0, balconies,
images, images,
status, status,
statusLabel, statusLabel,
@ -499,66 +511,31 @@ export default function PropertyDetailsPage() {
تفاصيل الغرفة تفاصيل الغرفة
</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-3">
{property.roomDetails.areaType && ( {(() => {
<div className="bg-white rounded-lg p-2 text-center"> const rd = property.roomDetails;
<div className="text-xs text-gray-500">نوع المساحة</div> const items = [];
<div className="font-medium text-sm">{property.roomDetails.areaType}</div> if (rd.areaType) items.push({ label: 'نوع المساحة', value: rd.areaType === 'private room' ? 'غرفة خاصة' : rd.areaType === 'shared room' ? 'غرفة مشتركة' : rd.areaType });
</div> if (rd.peopleAllowed) items.push({ label: 'عدد الأشخاص', value: rd.peopleAllowed });
)} if (rd.furnitureDetails || rd.furniture) items.push({ label: 'الأثاث', value: rd.furnitureDetails || rd.furniture });
{property.roomDetails.peopleAllowed && ( if (rd.entranceType) items.push({ label: 'نوع المدخل', value: rd.entranceType === 'shared entrance' ? 'مدخل مشترك' : rd.entranceType === 'independent entrance' ? 'مدخل مستقل' : rd.entranceType });
<div className="bg-white rounded-lg p-2 text-center"> if (rd.bathroomType) items.push({ label: 'الحمام', value: rd.bathroomType === 'room specific' ? 'خاص بالغرفة' : rd.bathroomType === 'shared' ? 'مشترك' : rd.bathroomType });
<div className="text-xs text-gray-500">عدد الأشخاص</div> if (rd.kitchenType) items.push({ label: 'المطبخ', value: rd.kitchenType === 'shared' ? 'مشترك' : rd.kitchenType === 'not available' ? 'غير متوفر' : rd.kitchenType });
<div className="font-medium text-sm">{property.roomDetails.peopleAllowed}</div> if (rd.homeResidentsCount ?? rd.residents) items.push({ label: 'عدد السكان', value: rd.homeResidentsCount ?? rd.residents });
</div> if (rd.currentPopulationGender) items.push({ label: 'جنس السكان', value: rd.currentPopulationGender === 'men' ? 'رجال' : rd.currentPopulationGender === 'women' ? 'نساء' : rd.currentPopulationGender === 'family' ? 'عائلة' : rd.currentPopulationGender });
)} if (rd.dedicatedTo) items.push({ label: 'مخصص لـ', value: rd.dedicatedTo === 'men only' ? 'رجال فقط' : rd.dedicatedTo === 'women only' ? 'نساء فقط' : rd.dedicatedTo === 'families only' ? 'عائلات فقط' : rd.dedicatedTo === 'everyone' ? 'الجميع' : rd.dedicatedTo });
{property.roomDetails.furniture && ( if (rd.hasRestrictedOwnerAreas !== undefined) items.push({ label: 'مناطق ممنوعة', value: rd.hasRestrictedOwnerAreas ? 'نعم' : 'لا' });
<div className="bg-white rounded-lg p-2 text-center"> if (rd.hasChildren !== undefined) items.push({ label: 'أطفال', value: rd.hasChildren ? 'مسموح' : 'غير مسموح' });
<div className="text-xs text-gray-500">الأثاث</div> if (rd.hasPets !== undefined) items.push({ label: 'حيوانات أليفة', value: rd.hasPets ? 'مسموح' : 'غير مسموح' });
<div className="font-medium text-sm">{property.roomDetails.furniture}</div> if (rd.languageDialect) items.push({ label: 'اللغة', value: rd.languageDialect });
</div> if (rd.visitorsAllowed !== undefined) items.push({ label: 'الزوار', value: rd.visitorsAllowed ? 'مسموح' : 'ممنوع' });
)} if (rd.quietTimesEnabled ?? rd.quietTimes) items.push({ label: 'أوقات الهدوء', value: rd.quietTimesDetails || rd.quietTimes || (rd.quietTimesEnabled ? 'مفعلة' : '') });
{property.roomDetails.entranceType && ( return items.map((item, i) => (
<div className="bg-white rounded-lg p-2 text-center"> <div key={i} className="bg-white rounded-lg p-2 text-center">
<div className="text-xs text-gray-500">نوع المدخل</div> <div className="text-xs text-gray-500">{item.label}</div>
<div className="font-medium text-sm">{property.roomDetails.entranceType}</div> <div className="font-medium text-sm">{item.value}</div>
</div> </div>
)} ));
{property.roomDetails.bathroomType && ( })()}
<div className="bg-white rounded-lg p-2 text-center">
<div className="text-xs text-gray-500">الحمام</div>
<div className="font-medium text-sm">{property.roomDetails.bathroomType}</div>
</div>
)}
{property.roomDetails.kitchenType && (
<div className="bg-white rounded-lg p-2 text-center">
<div className="text-xs text-gray-500">المطبخ</div>
<div className="font-medium text-sm">{property.roomDetails.kitchenType}</div>
</div>
)}
{property.roomDetails.residents && (
<div className="bg-white rounded-lg p-2 text-center">
<div className="text-xs text-gray-500">عدد السكان</div>
<div className="font-medium text-sm">{property.roomDetails.residents}</div>
</div>
)}
{property.roomDetails.dedicatedTo && (
<div className="bg-white rounded-lg p-2 text-center">
<div className="text-xs text-gray-500">مخصص لـ</div>
<div className="font-medium text-sm">{property.roomDetails.dedicatedTo}</div>
</div>
)}
{property.roomDetails.visitors && (
<div className="bg-white rounded-lg p-2 text-center">
<div className="text-xs text-gray-500">الزوار</div>
<div className="font-medium text-sm">{property.roomDetails.visitors ? 'مسموح' : 'ممنوع'}</div>
</div>
)}
{property.roomDetails.quietTimes && (
<div className="bg-white rounded-lg p-2 text-center">
<div className="text-xs text-gray-500">أوقات الهدوء</div>
<div className="font-medium text-sm">{property.roomDetails.quietTimes}</div>
</div>
)}
</div> </div>
</div> </div>
)} )}