"use client";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useRouter } from "next/navigation";
import Link from "next/link";
import {
PlusCircle,
Building,
Home,
DollarSign,
MapPin,
Bed,
Bath,
Square,
Edit,
Trash2,
Eye,
Calendar,
TrendingUp,
Users,
FileText,
Image as ImageIcon,
CheckCircle,
XCircle,
AlertCircle,
ChevronRight,
ChevronLeft,
Loader2,
Clock,
Wifi,
Zap,
Flame,
Droplets,
Cigarette,
Dog,
Music,
Warehouse,
Layers,
Sofa,
DoorOpen,
Wind,
Pencil,
Save,
X,
Star,
Ban,
Check,
School,
Hospital,
Store,
GraduationCap,
TreePine,
} from "lucide-react";
import toast, { Toaster } from "react-hot-toast";
import AuthService from "../../services/AuthService";
import {
getMyRentListings,
getMySaleListings,
editRentProperty,
editSaleProperty,
updateRentPropertyStatus,
updateSalePropertyStatus,
} from "../../utils/api";
const DeleteConfirmationModal = ({
isOpen,
onClose,
onConfirm,
propertyTitle,
}) => {
if (!isOpen) return null;
return (
e.stopPropagation()}
>
تأكيد الحذف
هل أنت متأكد من حذف العقار:{" "}
"{propertyTitle}"؟
هذا الإجراء لا يمكن التراجع عنه
);
};
const DeactivateConfirmationModal = ({
isOpen,
onClose,
onConfirm,
propertyTitle,
isActivating,
}) => {
if (!isOpen) return null;
return (
e.stopPropagation()}
>
{isActivating ? "تأكيد التنشيط" : "تأكيد إلغاء التنشيط"}
العقار:{" "}
"{propertyTitle}"
{!isActivating ? (
⚠️ تحذير
إذا قمت بإلغاء التنشيط، سيصبح هذا العقار غير متاح للحجز أو الشراء.
لا يمكن للعملاء رؤيته أو حجزه حتى تقوم بتنشيطه مرة أخرى.
) : (
✅ تنشيط العقار
سيصبح العقار متاحاً مرة أخرى للحجز أو الشراء.
)}
);
};
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: "منزل ذكي",
};
const termLabels = {
NoSmoking: "ممنوع التدخين",
NoAnimals: "ممنوع الحيوانات الأليفة",
NoParties: "ممنوع الحفلات",
NoAlcohol: "ممنوع الكحول",
SuitableForChildren: "مناسب للأطفال",
SuitableForFamilies: "مناسب للعائلات",
SuitableForStudents: "مناسب للطلاب",
SuitableForElderly: "مناسب لكبار السن",
OnlyFemales: "إناث فقط",
OnlyMales: "ذكور فقط",
};
const proximityLabels = {
School: "مدرسة",
Hospital: "مستشفى",
Restaurant: "مطعم",
University: "جامعة",
Park: "حديقة",
Mall: "مركز تسوق",
Supermarket: "سوبر ماركت",
Pharmacy: "صيدلية",
Mosque: "مسجد",
Bank: "بنك",
Airport: "مطار",
BusStation: "موقف باص",
};
const PropertyViewModal = ({ isOpen, onClose, property }) => {
if (!isOpen || !property) return null;
return (
e.stopPropagation()}
>
{property.title}
تم الإضافة:{" "}
{new Date(property.createdAt).toLocaleDateString("ar-SA")}
{property.images && property.images.length > 0 && (
صور العقار
{property.images.map((image, index) => (
))}
)}
معلومات أساسية
نوع العقار:
{property.propertyTypeLabel || "عقار"}
نوع العرض:
{property.displayType === "Daily rent"
? "إيجار يومي"
: property.displayType === "Monthly rent"
? "إيجار شهري"
: property.displayType === "Both"
? "يومي وشهري"
: property.displayType === "For sale"
? "للبيع"
: property.rentType === "daily"
? "إيجار يومي"
: property.rentType === "monthly"
? "إيجار شهري"
: (property.dailyPrice > 0 && property.monthlyPrice > 0)
? "يومي وشهري"
: property.monthlyPrice > 0
? "إيجار شهري"
: property.dailyPrice > 0
? "إيجار يومي"
: property.purpose === "sale" ? "للبيع" : "عرض"}
{property.purpose === "rent" && (
حالة التأثيث:
{property.furnished ? "مفروش" : "غير مفروش"}
)}
حالة العقار:
{property.status === "available" ? "متاح" : "مؤجر"}
{property.description && (
الوصف:
{property.description}
)}
التفاصيل
{property.bedrooms}
غرف
{property.bathrooms}
حمامات
{property.area}
م²
{property.floor > 0 && (
{property.floor}
طابق
)}
{property.salons > 0 && (
{property.salons}
صالونات
)}
{property.balconies > 0 && (
{property.balconies}
بلكونات
)}
{property.bookedCount > 0 && (
{property.bookedCount}
حجوزات
)}
الموقع
{property.address || "لم يتم تحديد العنوان"}
{property.city && `، ${property.city}`}
{property.district && `، ${property.district}`}
{property.services &&
(Array.isArray(property.services)
? property.services.length > 0
: Object.keys(property.services).length > 0) && (
الخدمات المتوفرة
{Array.isArray(property.services)
? property.services.map((svc, i) => (
{serviceLabels[svc] || svc}
))
: 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 (
{serviceLabels[key] || key}
{detail && (
· {detail}
)}
);
})}
)}
{property.proximity && Object.keys(property.proximity).length > 0 && (
القرب من الخدمات
{Object.entries(property.proximity).map(([key, val]) => {
if (!val) return null;
const dist = typeof val === "object" ? val.distance : val;
return (
{key === "School" &&
}
{key === "Hospital" &&
}
{key === "Restaurant" &&
}
{key === "University" &&
}
{key === "Park" &&
}
{key === "Mall" &&
}
{!["School","Hospital","Restaurant","University","Park","Mall"].includes(key) &&
}
{proximityLabels[key] || key}
{dist} {typeof dist === "number" ? "كم" : ""}
);
})}
)}
{property.terms && Object.keys(property.terms).length > 0 && (
شروط الاستخدام
{Object.entries(property.terms).map(([key, value]) => {
if (!value) return null;
return (
{key.startsWith("No") || key.startsWith("Only") ? (
) : (
)}
{termLabels[key] || key}
);
})}
)}
معلومات السعر
{property.purpose === "rent" ? (
{property.dailyPrice > 0 && (
السعر اليومي:
{Number(property.dailyPrice).toLocaleString()} ل.س
)}
{property.monthlyPrice > 0 && (
السعر الشهري:
{Number(property.monthlyPrice).toLocaleString()} ل.س
)}
{property.deposit > 0 && (
التأمين:
{Number(property.deposit).toLocaleString()} ل.س
)}
نوع الإيجار:{" "}
{property.rentType === "daily"
? "يومي"
: property.rentType === "monthly"
? "شهري"
: "يومي وشهري"}
{property.rating > 0 && (
التقييم:
{Number(property.rating).toFixed(1)}{" "}
)}
) : (
سعر البيع:
{Number(property.salePrice).toLocaleString()} ل.س
)}
);
};
const PropertyEditModal = ({ isOpen, onClose, property, onSave }) => {
const [formData, setFormData] = useState({});
const [newCustomTerm, setNewCustomTerm] = useState('');
const [isSaving, setIsSaving] = useState(false);
useEffect(() => {
if (!property || !isOpen) return;
const raw = property._raw || {};
const info = raw.propertyInformation || {};
let details = {};
try {
details =
typeof info.detailsJSON === 'object' && info.detailsJSON
? info.detailsJSON
: JSON.parse(info.detailsJSON || '{}');
} catch {
details = {};
}
const propServices = property.services || {};
const services = {};
const serviceDetails = {};
Object.keys(serviceLabels).forEach((key) => {
const val = propServices[key];
if (val && typeof val === 'string') {
services[key] = true;
serviceDetails[key] = val;
} else if (val && typeof val === 'object' && val.detail) {
services[key] = true;
serviceDetails[key] = val.detail;
} else {
services[key] = !!val;
serviceDetails[key] = details.serviceDetails?.[key] || '';
}
});
const propTerms = property.terms || {};
const terms = {};
Object.keys(termLabels).forEach((key) => {
terms[key] = !!propTerms[key];
});
const prox = property.proximity || details.nearbyDistances || {};
setFormData({
propertyType: property.propertyType || 'apartment',
furnished: property.furnished ?? false,
description: property.description || '',
bedrooms: property.bedrooms || 0,
bathrooms: property.bathrooms || 0,
floor: property.floor ?? details.floorNumber ?? details.floor ?? 0,
salons: property.salons ?? details.numberOfSalons ?? details.salons ?? 0,
balconies:
property.balconies ??
details.numberOfBalconies ??
details.balconies ??
0,
area: property.area || 0,
services,
serviceDetails,
terms,
customTerms: details.customTerms || [],
nearbySchool: prox.School ?? prox.school ?? '',
nearbyHospital: prox.Hospital ?? prox.hospital ?? '',
nearbyRestaurant: prox.Restaurant ?? prox.restaurant ?? '',
nearbyUniversity: prox.University ?? prox.university ?? '',
nearbyPark: prox.Park ?? prox.park ?? '',
nearbyMall: prox.Mall ?? prox.mall ?? '',
purpose: property.purpose || 'rent',
currencyId: property.currencyId || 1,
...(property.purpose === 'rent'
? {
dailyPrice: property.dailyPrice || 0,
monthlyPrice: property.monthlyPrice || 0,
deposit: property.deposit || 0,
rentType: property.rentType || 'monthly',
allowedPaymentPeriod:
property.allowedPaymentPeriod ||
details.allowedPaymentPeriod ||
'',
}
: { salePrice: property.salePrice || 0 }),
});
setNewCustomTerm('');
}, [property, isOpen]);
const handleChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const handleServiceToggle = (key, checked) => {
setFormData((prev) => ({
...prev,
services: { ...prev.services, [key]: checked },
}));
};
const handleServiceDetail = (key, value) => {
setFormData((prev) => ({
...prev,
serviceDetails: { ...prev.serviceDetails, [key]: value },
}));
};
const handleTermToggle = (key, checked) => {
setFormData((prev) => ({
...prev,
terms: { ...prev.terms, [key]: checked },
}));
};
const addCustomTerm = () => {
const term = newCustomTerm.trim();
if (!term) return;
setFormData((prev) => ({
...prev,
customTerms: [...(prev.customTerms || []), term],
}));
setNewCustomTerm('');
};
const removeCustomTerm = (index) => {
setFormData((prev) => ({
...prev,
customTerms: prev.customTerms.filter((_, i) => i !== index),
}));
};
const handleSave = async () => {
setIsSaving(true);
try {
await onSave(formData);
} catch {
setIsSaving(false);
}
};
if (!isOpen || !property) return null;
return (
e.stopPropagation()}
>
تعديل العقار
قم بتحديث معلومات العقار
{/* Basic Info */}
معلومات أساسية
{/* Details */}
التفاصيل
{[
{ id: 'bedrooms', label: 'عدد غرف النوم' },
{ id: 'bathrooms', label: 'عدد الحمامات' },
{ id: 'floor', label: 'الطابق' },
{ id: 'salons', label: 'عدد الصالونات' },
{ id: 'balconies', label: 'عدد البلكونات' },
{ id: 'area', label: 'المساحة (م²)' },
].map((field) => (
handleChange(field.id, Number(e.target.value))
}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
/>
))}
{/* Services */}
الخدمات
{Object.entries(serviceLabels).map(([key, label]) => (
))}
{/* Terms - rent only */}
{formData.purpose === 'rent' && (
)}
{/* Nearby Distances */}
القرب من الخدمات
{[
{ id: 'nearbySchool', label: 'المدرسة' },
{ id: 'nearbyHospital', label: 'المستشفى' },
{ id: 'nearbyRestaurant', label: 'المطعم' },
{ id: 'nearbyUniversity', label: 'الجامعة' },
{ id: 'nearbyPark', label: 'الحديقة' },
{ id: 'nearbyMall', label: 'مركز التسوق' },
].map((field) => (
handleChange(field.id, e.target.value)}
placeholder="المسافة (كم)"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
/>
))}
{/* Pricing */}
{formData.purpose === 'rent'
? 'معلومات السعر (إيجار)'
: 'سعر البيع'}
{formData.purpose === 'rent' ? (
handleChange('deposit', Number(e.target.value))
}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
/>
) : (
handleChange('salePrice', Number(e.target.value))
}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"
/>
)}
);
};
export default function OwnerPropertiesPage() {
const router = useRouter();
const [user, setUser] = useState(null);
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 [viewModal, setViewModal] = useState({ isOpen: false, property: null });
const [editModal, setEditModal] = useState({ isOpen: false, property: null });
const [deactivateModal, setDeactivateModal] = useState({
isOpen: false,
property: null,
isActivating: false,
});
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();
if (authUser && AuthService.isOwner()) {
setUser({
name: authUser.name || authUser.email,
email: authUser.email,
role: "owner",
});
loadProperties();
} else {
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");
setIsLoading(false);
return;
}
try {
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]
: []
: [];
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 serviceDetails = details.serviceDetails || {};
const services = {};
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 = typeof info.detailsJSON === 'object' && info.detailsJSON ? info.detailsJSON : (() => {
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",
dailyPrice: item.dailyRent || 0,
monthlyPrice: item.monthlyRent || 0,
salePrice: item.price || 0,
deposit: item.deposit || 0,
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,
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"],
createdAt: item.createdAt || new Date().toISOString(),
furnished: details.furnished || false,
displayType: details.displayType || (item.dailyRent && item.monthlyRent ? 'Both' : item.monthlyRent ? 'Monthly rent' : item.dailyRent ? 'Daily rent' : 'Both'),
description: info.description || "",
address: info.address || "",
city: "",
district: "",
services: normalizeServices(details),
terms: normalizeTerms(details.terms),
proximity: normalizeProximity(details.nearbyDistances),
rating: item.rating || 0,
currencyId: item.currencyId,
_raw: item,
};
});
const mappedSale = saleList.map((item) => {
const info = item.propertyInformation || {};
const details = typeof info.detailsJSON === 'object' && info.detailsJSON ? info.detailsJSON : (() => {
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",
dailyPrice: 0,
monthlyPrice: 0,
salePrice: item.price || 0,
deposit: 0,
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,
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"],
createdAt: item.createdAt || new Date().toISOString(),
furnished: details.furnished || false,
displayType: details.displayType || 'For sale',
description: info.description || "",
address: info.address || "",
city: "",
district: "",
services: normalizeServices(details),
terms: normalizeTerms(details.terms),
proximity: normalizeProximity(details.nearbyDistances),
rating: item.rating || 0,
currencyId: item.currencyId,
_raw: item,
};
});
setProperties([...mappedRent, ...mappedSale]);
} catch (err) {
console.error("[OwnerProperties] Failed to load properties:", err);
toast.error("فشل في تحميل العقارات");
} finally {
setIsLoading(false);
}
};
const updatePropertiesInStorage = (newProperties) => {
setProperties(newProperties);
localStorage.setItem("ownerProperties", JSON.stringify(newProperties));
};
const handleDelete = () => {
if (deleteModal.property) {
const newProperties = properties.filter(
(p) => p.id !== deleteModal.property.id,
);
updatePropertiesInStorage(newProperties);
setDeleteModal({ isOpen: false, property: null });
toast.success("تم حذف العقار بنجاح");
}
};
const handleSaveEdit = async (formData) => {
try {
const property = editModal.property;
const raw = property._raw || {};
const rawInfo = raw.propertyInformation || {};
const buildingTypeMap = {
apartment: 0,
villa: 1,
sweet: 2,
room: 3,
studio: 4,
office: 5,
farms: 6,
shop: 7,
warehouse: 8,
};
const activeServices = Object.entries(formData.services || {})
.filter(([, v]) => v)
.map(([k]) => k);
const activeTerms = Object.entries(formData.terms || {})
.filter(([, v]) => v)
.reduce((acc, [k]) => ({ ...acc, [k]: true }), {});
if (formData.customTerms?.length) {
formData.customTerms.forEach((t) => {
activeTerms[t] = true;
});
}
const details = {
description: formData.description || '',
services: activeServices,
serviceDetails: Object.fromEntries(
Object.entries(formData.serviceDetails || {}).filter(
([k, v]) => activeServices.includes(k) && v,
),
),
...(formData.purpose === 'rent' ? { terms: activeTerms } : {}),
displayType:
formData.purpose === 'rent'
? formData.rentType === 'both'
? 'Both'
: formData.rentType === 'daily'
? 'Daily rent'
: 'Monthly rent'
: 'For sale',
propertyCondition: formData.furnished
? 'WithFurniture'
: 'WithoutFurniture',
floorNumber: parseInt(formData.floor) || 0,
numberOfSalons: parseInt(formData.salons) || 0,
numberOfBalconies: parseInt(formData.balconies) || 0,
nearbyDistances: {
school: formData.nearbySchool || '',
hospital: formData.nearbyHospital || '',
restaurant: formData.nearbyRestaurant || '',
university: formData.nearbyUniversity || '',
park: formData.nearbyPark || '',
mall: formData.nearbyMall || '',
},
};
if (
formData.purpose === 'rent' &&
formData.propertyType === 'room'
) {
const roomDetails = rawInfo.detailsJSON || {};
let parsedDetails = {};
try {
parsedDetails =
typeof roomDetails === 'object'
? roomDetails
: JSON.parse(roomDetails);
} catch {
parsedDetails = {};
}
details.room = parsedDetails.room || {};
}
const detailsJSON = JSON.stringify(details);
const propInfo = {
cordsX: rawInfo.cordsX || '',
cordsY: rawInfo.cordsY || '',
images: rawInfo.images || [],
address: property.address || rawInfo.address || '',
description:
formData.description || rawInfo.description || '',
numberOfBathRooms: parseInt(formData.bathrooms) || 0,
numberOfRooms: parseInt(formData.bedrooms) || 0,
numberOfBedRooms: parseInt(formData.bedrooms) || 0,
space: parseFloat(formData.area) || 0,
detailsJSON,
buildingType: buildingTypeMap[formData.propertyType] ?? 0,
status: 0,
propertyType: formData.furnished ? 0 : 1,
};
if (formData.purpose === 'rent') {
const rentTypeMap = { daily: 1, monthly: 0, both: 0 };
const payload = {
propertyInformation: propInfo,
deposit: parseFloat(formData.deposit) || 0,
monthlyRent: parseFloat(formData.monthlyPrice) || 0,
dailyRent: parseFloat(formData.dailyPrice) || 0,
rating: 1,
currencyId:
formData.currencyId || property.currencyId || 1,
rentType: rentTypeMap[formData.rentType] ?? 0,
type: formData.furnished ? 0 : 1,
allowedPaymentPeriod: formData.allowedPaymentPeriod || '',
};
await editRentProperty(property.id, payload);
} else {
const payload = {
propInfo,
price: parseFloat(formData.salePrice) || 0,
currencyId:
formData.currencyId || property.currencyId || 1,
};
await editSaleProperty(property.id, payload);
}
const updatedProperty = { ...property, ...formData };
const newProperties = properties.map((p) =>
p.id === property.id ? updatedProperty : p,
);
updatePropertiesInStorage(newProperties);
setEditModal({ isOpen: false, property: null });
toast.success('تم تحديث العقار بنجاح');
} catch (err) {
console.error('[OwnerProperties] Edit failed:', err);
toast.error("فشل تحديث العقار");
throw err;
}
};
const handleToggleActivation = async () => {
const prop = deactivateModal.property;
if (!prop) return;
const willActivate = deactivateModal.isActivating;
const newStatus = willActivate ? "available" : "notAvailable";
const statusCode = willActivate ? 0 : 1;
setDeactivateModal({ isOpen: false, property: null, isActivating: false });
try {
if (prop.purpose === "rent") {
await updateRentPropertyStatus(prop.id, statusCode);
} else {
await updateSalePropertyStatus(prop.id, statusCode);
}
const newProperties = properties.map((p) =>
p.id === prop.id ? { ...p, status: newStatus } : p,
);
setProperties(newProperties);
localStorage.setItem("ownerProperties", JSON.stringify(newProperties));
toast.success(
willActivate
? "تم تنشيط العقار بنجاح"
: "تم إلغاء تنشيط العقار بنجاح",
);
} catch (err) {
console.error("[OwnerProperties] Toggle status failed:", err);
toast.error("فشل تحديث حالة العقار");
}
};
const fadeInUp = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
transition: { duration: 0.5 },
};
if (isLoading) {
return (
);
}
return (
setDeleteModal({ isOpen: false, property: null })}
onConfirm={handleDelete}
propertyTitle={deleteModal.property?.title}
/>
setViewModal({ isOpen: false, property: null })}
property={viewModal.property}
/>
setEditModal({ isOpen: false, property: null })}
property={editModal.property}
onSave={handleSaveEdit}
/>
setDeactivateModal({ isOpen: false, property: null, isActivating: false })
}
onConfirm={handleToggleActivation}
propertyTitle={deactivateModal.property?.title}
isActivating={deactivateModal.isActivating}
/>
عقاراتي
مرحباً {user?.name}، لديك {properties.length} عقار
setShowAddMenu(!showAddMenu)}
className="bg-gradient-to-r from-amber-500 to-amber-600 text-white px-6 py-3 rounded-xl font-medium flex items-center gap-2 shadow-lg hover:shadow-xl transition-all"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
إضافة عقار جديد
{showAddMenu && (
setShowAddMenu(false)}
>
عقار للإيجار
أضف عقار متاح للإيجار
setShowAddMenu(false)}
>
عقار للبيع
أضف عقار متاح للبيع
)}
{/* Tab Switcher */}
{filteredProperties.length === 0 ? (
{activeTab === "rent"
? "لا توجد عقارات للإيجار"
: "لا توجد عقارات للبيع"}
ابدأ بإضافة أول عقار {activeTab === "rent" ? "للإيجار" : "للبيع"}{" "}
الآن
إضافة عقار جديد
) : (
{filteredProperties.map((property, index) => (
{property.images && property.images.length > 0 ? (

) : (
)}
{property.status === "notAvailable"
? "غير متاح"
: property.status === "available"
? "متاح"
: "مؤجل"}
{property.purpose === "rent" &&
property.furnished !== undefined && (
{property.furnished ? "مفروش" : "غير مفروش"}
)}
{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.title}
{property.rating > 0 && (
{Number(property.rating).toFixed(1)}
)}
{property.address || property.location || "موقع غير محدد"}
{property.description && (
{property.description}
)}
{property.bedrooms > 0 && (
{property.bedrooms}
)}
{property.bathrooms > 0 && (
{property.bathrooms}
)}
{property.area > 0 && (
{property.area}م²
)}
{property.floor > 0 && (
ط {property.floor}
)}
{property.salons > 0 && (
{property.salons}
)}
{property.balconies > 0 && (
{property.balconies}
)}
{property.purpose === "rent" ? (
{property.monthlyPrice > 0 && (
{Number(property.monthlyPrice).toLocaleString()}
ل.س /شهر
)}
{property.dailyPrice > 0 &&
!property.monthlyPrice && (
{Number(property.dailyPrice).toLocaleString()}
ل.س /يوم
)}
{property.deposit > 0 && (
تأمين: {Number(property.deposit).toLocaleString()}{" "}
ل.س
)}
) : (
{Number(property.salePrice).toLocaleString()} ل.س
)}
{property.status === "notAvailable" ? (
) : (
)}
))}
)}
);
}