636 lines
24 KiB
JavaScript
636 lines
24 KiB
JavaScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import {
|
|
Edit,
|
|
Trash2,
|
|
Eye,
|
|
MapPin,
|
|
Bed,
|
|
Bath,
|
|
Square,
|
|
DollarSign,
|
|
Percent,
|
|
MoreVertical,
|
|
X,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Calendar,
|
|
User,
|
|
Home,
|
|
Building,
|
|
Clock
|
|
} from 'lucide-react';
|
|
import toast, { Toaster } from 'react-hot-toast';
|
|
|
|
const DeleteConfirmationModal = ({ isOpen, onClose, onConfirm, propertyTitle }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.9, y: 20 }}
|
|
animate={{ scale: 1, y: 0 }}
|
|
exit={{ scale: 0.9, y: 20 }}
|
|
className="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="text-center mb-4">
|
|
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<AlertCircle className="w-8 h-8 text-red-600" />
|
|
</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>؟
|
|
</p>
|
|
<p className="text-xs text-red-500 mt-1">هذا الإجراء لا يمكن التراجع عنه</p>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-200 transition-colors"
|
|
>
|
|
إلغاء
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
className="flex-1 bg-red-600 text-white py-3 rounded-xl font-medium hover:bg-red-700 transition-colors"
|
|
>
|
|
نعم، احذف
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
const PropertyViewModal = ({ property, isOpen, onClose }) => {
|
|
if (!isOpen || !property) return null;
|
|
|
|
const formatCurrency = (amount) => {
|
|
return amount?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' ل.س';
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.9, y: 20 }}
|
|
animate={{ scale: 1, y: 0 }}
|
|
exit={{ scale: 0.9, y: 20 }}
|
|
className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="sticky top-0 bg-gradient-to-r from-amber-500 to-amber-600 p-6 text-white">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h2 className="text-xl font-bold">{property.title}</h2>
|
|
<p className="text-amber-100 text-sm mt-1">{property.location}</p>
|
|
</div>
|
|
<button onClick={onClose} className="p-1 hover:bg-white/20 rounded-full">
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-6">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div className="bg-gray-50 p-3 rounded-xl text-center">
|
|
<Home className="w-5 h-5 text-amber-500 mx-auto mb-1" />
|
|
<div className="text-sm font-bold">{property.type === 'villa' ? 'فيلا' : property.type === 'apartment' ? 'شقة' : 'بيت'}</div>
|
|
<div className="text-xs text-gray-500">نوع العقار</div>
|
|
</div>
|
|
<div className="bg-gray-50 p-3 rounded-xl text-center">
|
|
<DollarSign className="w-5 h-5 text-amber-500 mx-auto mb-1" />
|
|
<div className="text-sm font-bold">{formatCurrency(property.price)}</div>
|
|
<div className="text-xs text-gray-500">السعر اليومي</div>
|
|
</div>
|
|
<div className="bg-gray-50 p-3 rounded-xl text-center">
|
|
<Percent className="w-5 h-5 text-amber-500 mx-auto mb-1" />
|
|
<div className="text-sm font-bold">{property.commission}%</div>
|
|
<div className="text-xs text-gray-500">نسبة العمولة</div>
|
|
</div>
|
|
<div className="bg-gray-50 p-3 rounded-xl text-center">
|
|
<Calendar className="w-5 h-5 text-amber-500 mx-auto mb-1" />
|
|
<div className="text-sm font-bold">{property.bookings || 0}</div>
|
|
<div className="text-xs text-gray-500">عدد الحجوزات</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-4 rounded-xl">
|
|
<h3 className="font-bold text-gray-900 mb-3 flex items-center gap-2">
|
|
<MapPin className="w-5 h-5 text-amber-500" />
|
|
الموقع
|
|
</h3>
|
|
<p className="text-gray-700">{property.location}</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-4 rounded-xl">
|
|
<h3 className="font-bold text-gray-900 mb-3">المواصفات</h3>
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="text-center">
|
|
<Bed className="w-5 h-5 text-amber-500 mx-auto mb-1" />
|
|
<div className="text-lg font-bold">{property.bedrooms}</div>
|
|
<div className="text-xs text-gray-500">غرف نوم</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<Bath className="w-5 h-5 text-amber-500 mx-auto mb-1" />
|
|
<div className="text-lg font-bold">{property.bathrooms}</div>
|
|
<div className="text-xs text-gray-500">حمامات</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<Square className="w-5 h-5 text-amber-500 mx-auto mb-1" />
|
|
<div className="text-lg font-bold">{property.area}</div>
|
|
<div className="text-xs text-gray-500">م²</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-amber-50 p-4 rounded-xl">
|
|
<h3 className="font-bold text-amber-700 mb-3 flex items-center gap-2">
|
|
<Percent className="w-5 h-5" />
|
|
معلومات العمولة
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-xs text-gray-500">نسبة العمولة</label>
|
|
<div className="font-bold text-amber-600">{property.commission}%</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-500">مصدر العمولة</label>
|
|
<div className="font-bold text-amber-600">{property.commissionType}</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-500">قيمة العمولة</label>
|
|
<div className="font-bold text-amber-600">
|
|
{formatCurrency((property.price * property.commission) / 100)}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-gray-500">حالة العقار</label>
|
|
<div className={`inline-block px-2 py-1 rounded-lg text-xs font-medium ${
|
|
property.status === 'available'
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-red-100 text-red-800'
|
|
}`}>
|
|
{property.status === 'available' ? 'متاح' : 'محجوز'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
const PropertyEditModal = ({ property, isOpen, onClose, onSave }) => {
|
|
const [formData, setFormData] = useState({ ...property });
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
const formatCurrency = (amount) => {
|
|
return amount?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
};
|
|
|
|
const handleSave = () => {
|
|
setIsSaving(true);
|
|
setTimeout(() => {
|
|
onSave(formData);
|
|
setIsSaving(false);
|
|
onClose();
|
|
toast.success('تم تحديث العقار بنجاح');
|
|
}, 1000);
|
|
};
|
|
|
|
if (!isOpen || !property) return null;
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
|
|
onClick={onClose}
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.9, y: 20 }}
|
|
animate={{ scale: 1, y: 0 }}
|
|
exit={{ scale: 0.9, y: 20 }}
|
|
className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="sticky top-0 bg-gradient-to-r from-amber-500 to-amber-600 p-6 text-white">
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-xl font-bold">تعديل العقار</h2>
|
|
<button onClick={onClose} className="p-1 hover:bg-white/20 rounded-full">
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
<p className="text-amber-100 text-sm mt-1">يمكنك تعديل معلومات العقار</p>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
اسم العقار
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.title}
|
|
onChange={(e) => setFormData({...formData, title: e.target.value})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
نوع العقار
|
|
</label>
|
|
<select
|
|
value={formData.type}
|
|
onChange={(e) => setFormData({...formData, type: e.target.value})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
|
|
>
|
|
<option value="villa">فيلا</option>
|
|
<option value="apartment">شقة</option>
|
|
<option value="house">بيت</option>
|
|
<option value="studio">استوديو</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
الموقع
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.location}
|
|
onChange={(e) => setFormData({...formData, location: e.target.value})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
السعر اليومي (ل.س)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.price}
|
|
onChange={(e) => setFormData({...formData, price: parseInt(e.target.value)})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
نسبة العمولة (%)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
step="0.1"
|
|
value={formData.commission}
|
|
onChange={(e) => setFormData({...formData, commission: parseFloat(e.target.value)})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
مصدر العمولة
|
|
</label>
|
|
<select
|
|
value={formData.commissionType}
|
|
onChange={(e) => setFormData({...formData, commissionType: e.target.value})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
|
|
>
|
|
<option value="من المالك">من المالك</option>
|
|
<option value="من المستأجر">من المستأجر</option>
|
|
<option value="من الاثنين">من الاثنين</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
عدد الغرف
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.bedrooms}
|
|
onChange={(e) => setFormData({...formData, bedrooms: parseInt(e.target.value)})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
عدد الحمامات
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.bathrooms}
|
|
onChange={(e) => setFormData({...formData, bathrooms: parseInt(e.target.value)})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
المساحة (م²)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.area}
|
|
onChange={(e) => setFormData({...formData, area: parseInt(e.target.value)})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
حالة العقار
|
|
</label>
|
|
<select
|
|
value={formData.status}
|
|
onChange={(e) => setFormData({...formData, status: e.target.value})}
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
|
|
>
|
|
<option value="available">متاح</option>
|
|
<option value="booked">محجوز</option>
|
|
<option value="maintenance">صيانة</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="sticky bottom-0 bg-gray-50 border-t p-4 flex gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-200 transition-colors"
|
|
>
|
|
إلغاء
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={isSaving}
|
|
className="flex-1 bg-amber-500 text-white py-3 rounded-xl font-medium hover:bg-amber-600 transition-colors disabled:opacity-50"
|
|
>
|
|
{isSaving ? 'جاري الحفظ...' : 'حفظ التغييرات'}
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
const MoreActionsMenu = ({ property, isOpen, onClose, onViewBookings, onViewReports }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<>
|
|
<div className="fixed inset-0 z-40" onClick={onClose} />
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.9 }}
|
|
className="absolute left-0 mt-2 w-56 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden z-50"
|
|
>
|
|
</motion.div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default function PropertiesTable() {
|
|
const [properties, setProperties] = useState([
|
|
{
|
|
id: 1,
|
|
title: 'فيلا فاخرة في المزة',
|
|
type: 'villa',
|
|
location: 'دمشق, المزة',
|
|
price: 500000,
|
|
commission: 5,
|
|
commissionType: 'من المالك',
|
|
bedrooms: 5,
|
|
bathrooms: 4,
|
|
area: 450,
|
|
status: 'available',
|
|
bookings: 3
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'شقة حديثة في الشهباء',
|
|
type: 'apartment',
|
|
location: 'حلب, الشهباء',
|
|
price: 250000,
|
|
commission: 7,
|
|
commissionType: 'من المستأجر',
|
|
bedrooms: 3,
|
|
bathrooms: 2,
|
|
area: 180,
|
|
status: 'booked',
|
|
bookings: 1
|
|
}
|
|
]);
|
|
|
|
const [viewModal, setViewModal] = useState({ isOpen: false, property: null });
|
|
const [editModal, setEditModal] = useState({ isOpen: false, property: null });
|
|
const [deleteModal, setDeleteModal] = useState({ isOpen: false, property: null });
|
|
const [moreMenu, setMoreMenu] = useState({ isOpen: false, property: null, anchorEl: null });
|
|
|
|
const formatCurrency = (amount) => {
|
|
return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' ل.س';
|
|
};
|
|
|
|
const getStatusBadge = (status) => {
|
|
const styles = {
|
|
available: 'bg-green-100 text-green-800',
|
|
booked: 'bg-red-100 text-red-800',
|
|
maintenance: 'bg-yellow-100 text-yellow-800'
|
|
};
|
|
|
|
const labels = {
|
|
available: 'متاح',
|
|
booked: 'محجوز',
|
|
maintenance: 'صيانة'
|
|
};
|
|
|
|
return (
|
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${styles[status]}`}>
|
|
{labels[status]}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const handleView = (property) => {
|
|
setViewModal({ isOpen: true, property });
|
|
};
|
|
|
|
const handleEdit = (property) => {
|
|
setEditModal({ isOpen: true, property });
|
|
};
|
|
|
|
const handleDelete = (property) => {
|
|
setDeleteModal({ isOpen: true, property });
|
|
};
|
|
|
|
const confirmDelete = () => {
|
|
if (deleteModal.property) {
|
|
setProperties(prev => prev.filter(p => p.id !== deleteModal.property.id));
|
|
setDeleteModal({ isOpen: false, property: null });
|
|
toast.success('تم حذف العقار بنجاح');
|
|
}
|
|
};
|
|
|
|
const handleSaveEdit = (updatedProperty) => {
|
|
setProperties(prev => prev.map(p =>
|
|
p.id === updatedProperty.id ? updatedProperty : p
|
|
));
|
|
toast.success('تم تحديث العقار بنجاح');
|
|
};
|
|
|
|
const handleMoreClick = (event, property) => {
|
|
event.stopPropagation();
|
|
setMoreMenu({ isOpen: true, property, anchorEl: event.currentTarget });
|
|
};
|
|
|
|
const handleViewBookings = (property) => {
|
|
toast.success(`جاري عرض حجوزات ${property.title}`);
|
|
};
|
|
|
|
const handleViewReports = (property) => {
|
|
toast.success(`جاري عرض تقرير أرباح ${property.title}`);
|
|
};
|
|
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<Toaster position="top-center" reverseOrder={false} />
|
|
|
|
<table className="w-full">
|
|
<thead className="bg-gray-50 border-b">
|
|
<tr>
|
|
<th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">العقار</th>
|
|
<th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">الموقع</th>
|
|
<th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">السعر/يوم</th>
|
|
<th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">العمولة</th>
|
|
<th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">المصدر</th>
|
|
<th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">التفاصيل</th>
|
|
<th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">الحالة</th>
|
|
<th className="px-4 py-3 text-center text-sm font-semibold text-gray-900">الإجراءات</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{properties.map((property, index) => (
|
|
<motion.tr
|
|
key={property.id}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
className="hover:bg-gray-50"
|
|
>
|
|
<td className="px-4 py-3">
|
|
<div className="font-medium">{property.title}</div>
|
|
<div className="text-xs text-gray-500">
|
|
{property.type === 'villa' ? 'فيلا' :
|
|
property.type === 'apartment' ? 'شقة' :
|
|
property.type === 'house' ? 'بيت' : 'استوديو'}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-1 text-sm">
|
|
<MapPin className="w-3 h-3 text-gray-400" />
|
|
{property.location}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 font-bold text-blue-600">
|
|
{formatCurrency(property.price)}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-1">
|
|
<Percent className="w-3 h-3 text-amber-500" />
|
|
{property.commission}%
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm">{property.commissionType}</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<Bed className="w-3 h-3" /> {property.bedrooms}
|
|
<Bath className="w-3 h-3 mr-2" /> {property.bathrooms}
|
|
<Square className="w-3 h-3 mr-2" /> {property.area}m²
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
{getStatusBadge(property.status)}
|
|
</td>
|
|
<td className="px-4 py-3 relative">
|
|
<div className="flex items-center justify-center gap-2">
|
|
<button
|
|
onClick={() => handleView(property)}
|
|
className="p-1 hover:bg-blue-100 rounded text-blue-600 transition-colors"
|
|
title="عرض التفاصيل"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleEdit(property)}
|
|
className="p-1 hover:bg-amber-100 rounded text-amber-600 transition-colors"
|
|
title="تعديل العقار"
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(property)}
|
|
className="p-1 hover:bg-red-100 rounded text-red-600 transition-colors"
|
|
title="حذف العقار"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
{moreMenu.isOpen && moreMenu.property?.id === property.id && (
|
|
<MoreActionsMenu
|
|
property={property}
|
|
isOpen={moreMenu.isOpen}
|
|
onClose={() => setMoreMenu({ isOpen: false, property: null, anchorEl: null })}
|
|
onViewBookings={handleViewBookings}
|
|
onViewReports={handleViewReports}
|
|
/>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</motion.tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
{properties.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<Home className="w-12 h-12 text-gray-300 mx-auto mb-3" />
|
|
<p className="text-gray-500">لا توجد عقارات مضافة بعد</p>
|
|
</div>
|
|
)}
|
|
|
|
<PropertyViewModal
|
|
property={viewModal.property}
|
|
isOpen={viewModal.isOpen}
|
|
onClose={() => setViewModal({ isOpen: false, property: null })}
|
|
/>
|
|
|
|
<PropertyEditModal
|
|
property={editModal.property}
|
|
isOpen={editModal.isOpen}
|
|
onClose={() => setEditModal({ isOpen: false, property: null })}
|
|
onSave={handleSaveEdit}
|
|
/>
|
|
|
|
<DeleteConfirmationModal
|
|
isOpen={deleteModal.isOpen}
|
|
onClose={() => setDeleteModal({ isOpen: false, property: null })}
|
|
onConfirm={confirmDelete}
|
|
propertyTitle={deleteModal.property?.title}
|
|
/>
|
|
</div>
|
|
);
|
|
} |