Added calendar, profits and booking for owner

app/owner/calendar/page.js

@@ -0,0 +1,736 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import {
+  Calendar,
+  ChevronLeft,
+  ChevronRight,
+  Home,
+  Building,
+  MapPin,
+  Bed,
+  Bath,
+  Square,
+  DollarSign,
+  Eye,
+  ArrowLeft,
+  Loader2,
+  Filter,
+  Download,
+  Printer,
+  ChevronDown,
+  X,
+  CheckCircle,
+  XCircle,
+  Clock,
+  Users,
+  TrendingUp,
+  CalendarDays,
+  LayoutGrid,
+  List,
+  AlertCircle,
+  XCircle as XCircleIcon,
+  Calendar as CalendarIcon
+} from 'lucide-react';
+import toast, { Toaster } from 'react-hot-toast';
+
+const MonthlyCalendar = ({ properties, selectedPropertyId, onDateClick, onPropertySelect }) => {
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(null);
+  const [viewType, setViewType] = useState('grid');
+
+  const monthNames = [
+    'يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو',
+    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+  ];
+
+  const daysInMonth = new Date(
+    currentMonth.getFullYear(),
+    currentMonth.getMonth() + 1,
+    0
+  ).getDate();
+
+  const firstDayOfMonth = new Date(
+    currentMonth.getFullYear(),
+    currentMonth.getMonth(),
+    1
+  ).getDay();
+
+  const isDateBookedForProperty = (date, property) => {
+    if (!property?.bookings) return false;
+    const dateStr = date.toISOString().split('T')[0];
+    return property.bookings.some(booking => {
+      const start = new Date(booking.startDate);
+      const end = new Date(booking.endDate);
+      const current = new Date(date);
+      return current >= start && current <= end;
+    });
+  };
+
+  const getDayStatus = (date) => {
+    if (selectedPropertyId === 'all') {
+      const totalProperties = properties.length;
+      const bookedCount = properties.filter(p => isDateBookedForProperty(date, p)).length;
+      
+      if (bookedCount === 0) return { status: 'all_available', label: 'جميع العقارات متاحة', color: 'bg-green-100 text-green-800' };
+      if (bookedCount === totalProperties) return { status: 'all_booked', label: 'جميع العقارات محجوزة', color: 'bg-red-100 text-red-800' };
+      return { status: 'partial', label: `${bookedCount}/${totalProperties} محجوز`, color: 'bg-yellow-100 text-yellow-800' };
+    } else {
+      const property = properties.find(p => p.id === selectedPropertyId);
+      if (!property) return { status: 'no_property', label: 'غير متاح', color: 'bg-gray-100 text-gray-500' };
+      
+      const isBooked = isDateBookedForProperty(date, property);
+      return {
+        status: isBooked ? 'booked' : 'available',
+        label: isBooked ? 'محجوز' : 'متاح',
+        color: isBooked ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'
+      };
+    }
+  };
+
+  const handleDateClick = (date) => {
+    setSelectedDate(date);
+    onDateClick?.(date);
+  };
+
+  const changeMonth = (direction) => {
+    setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + direction, 1));
+  };
+
+  const renderDays = () => {
+    const days = [];
+    const totalDays = daysInMonth + firstDayOfMonth;
+
+    for (let i = 0; i < totalDays; i++) {
+      if (i < firstDayOfMonth) {
+        days.push(<div key={`empty-${i}`} className="p-2 md:p-3" />);
+      } else {
+        const dayNumber = i - firstDayOfMonth + 1;
+        const date = new Date(
+          currentMonth.getFullYear(),
+          currentMonth.getMonth(),
+          dayNumber
+        );
+        
+        const isToday = date.toDateString() === new Date().toDateString();
+        const status = getDayStatus(date);
+        const isSelected = selectedDate?.toDateString() === date.toDateString();
+
+        days.push(
+          <button
+            key={dayNumber}
+            onClick={() => handleDateClick(date)}
+            className={`
+              p-2 md:p-3 rounded-xl text-center transition-all relative group
+              ${status.color}
+              ${isToday ? 'ring-2 ring-amber-500 ring-offset-2' : ''}
+              ${isSelected ? 'ring-2 ring-blue-500 ring-offset-2' : ''}
+              hover:scale-105 hover:shadow-md
+            `}
+          >
+            <div className="text-sm md:text-base font-medium">{dayNumber}</div>
+            <div className="text-xs mt-1 hidden md:block">{status.label}</div>
+            {status.status === 'partial' && (
+              <div className="absolute -top-1 -right-1 w-2 h-2 bg-yellow-500 rounded-full animate-pulse" />
+            )}
+          </button>
+        );
+      }
+    }
+    return days;
+  };
+
+  return (
+    <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
+      <div className="p-4 md:p-6 border-b border-gray-200">
+        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => changeMonth(-1)}
+              className="p-2 hover:bg-gray-100 rounded-xl transition-colors"
+            >
+              <ChevronRight className="w-5 h-5" />
+            </button>
+            <h2 className="text-xl md:text-2xl font-bold text-gray-900">
+              {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
+            </h2>
+            <button
+              onClick={() => changeMonth(1)}
+              className="p-2 hover:bg-gray-100 rounded-xl transition-colors"
+            >
+              <ChevronLeft className="w-5 h-5" />
+            </button>
+          </div>
+          
+          <div className="flex gap-2">
+            <button
+              onClick={() => setCurrentMonth(new Date())}
+              className="px-4 py-2 bg-amber-500 text-white rounded-xl text-sm hover:bg-amber-600 transition-colors"
+            >
+              اليوم
+            </button>
+            <div className="flex border border-gray-200 rounded-xl overflow-hidden">
+              <button
+                onClick={() => setViewType('grid')}
+                className={`p-2 transition-colors ${viewType === 'grid' ? 'bg-amber-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-100'}`}
+              >
+                <LayoutGrid className="w-4 h-4" />
+              </button>
+              <button
+                onClick={() => setViewType('list')}
+                className={`p-2 transition-colors ${viewType === 'list' ? 'bg-amber-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-100'}`}
+              >
+                <List className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-7 gap-1 p-4 bg-gray-50 border-b border-gray-200">
+        {['أحد', 'إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت'].map((day, index) => (
+          <div key={index} className="text-center text-sm font-medium text-gray-600 py-2">
+            {day}
+          </div>
+        ))}
+      </div>
+
+      <div className="p-4">
+        <div className="grid grid-cols-7 gap-1 md:gap-2">
+          {renderDays()}
+        </div>
+      </div>
+
+      <div className="p-4 border-t border-gray-200 bg-gray-50">
+        <div className="flex flex-wrap gap-4 justify-center text-xs">
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 bg-green-100 rounded" />
+            <span className="text-gray-600">متاح</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 bg-red-100 rounded" />
+            <span className="text-gray-600">محجوز</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 bg-yellow-100 rounded" />
+            <span className="text-gray-600">محجوز جزئياً</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 ring-2 ring-amber-500 rounded" />
+            <span className="text-gray-600">اليوم</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="w-3 h-3 ring-2 ring-blue-500 rounded" />
+            <span className="text-gray-600">محدد</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const PropertyCalendarList = ({ properties, selectedDate, onPropertyClick }) => {
+  const formatCurrency = (amount) => {
+    return amount?.toLocaleString() + ' ل.س';
+  };
+
+  const isDateBooked = (property, date) => {
+    if (!property?.bookings || !date) return false;
+    const dateStr = date.toISOString().split('T')[0];
+    return property.bookings.some(booking => {
+      const start = new Date(booking.startDate);
+      const end = new Date(booking.endDate);
+      const current = new Date(date);
+      return current >= start && current <= end;
+    });
+  };
+
+  const getBookingForDate = (property, date) => {
+    if (!property?.bookings || !date) return null;
+    const dateStr = date.toISOString().split('T')[0];
+    return property.bookings.find(booking => {
+      const start = new Date(booking.startDate);
+      const end = new Date(booking.endDate);
+      const current = new Date(date);
+      return current >= start && current <= end;
+    });
+  };
+
+  if (!selectedDate) {
+    return (
+      <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-12 text-center">
+        <CalendarDays className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+        <h3 className="text-lg font-bold text-gray-700 mb-2">اختر تاريخاً</h3>
+        <p className="text-gray-500">اضغط على أي يوم في التقويم لعرض حالة العقارات في ذلك التاريخ</p>
+      </div>
+    );
+  }
+
+  const formattedDate = selectedDate.toLocaleDateString('ar-SA', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+
+  return (
+    <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
+      <div className="p-4 md:p-6 border-b border-gray-200 bg-gradient-to-r from-amber-50 to-amber-100">
+        <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
+          <CalendarDays className="w-5 h-5 text-amber-500" />
+          حالة العقارات في تاريخ: {formattedDate}
+        </h3>
+      </div>
+
+      <div className="divide-y divide-gray-200">
+        {properties.map((property) => {
+          const isBooked = isDateBooked(property, selectedDate);
+          const booking = getBookingForDate(property, selectedDate);
+          
+          return (
+            <motion.div
+              key={property.id}
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              className={`p-4 md:p-6 hover:bg-gray-50 transition-colors cursor-pointer ${isBooked ? 'bg-red-50/30' : 'bg-green-50/30'}`}
+              onClick={() => onPropertyClick(property)}
+            >
+              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-2">
+                    <h4 className="font-bold text-gray-900 text-lg">{property.title}</h4>
+                    <span className={`px-2 py-1 rounded-lg text-xs font-medium ${
+                      isBooked ? 'bg-red-100 text-red-800' : 'bg-green-100 text-green-800'
+                    }`}>
+                      {isBooked ? 'محجوز' : 'متاح'}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1 text-gray-500 text-sm mb-2">
+                    <MapPin className="w-4 h-4" />
+                    {property.location}
+                  </div>
+                  <div className="flex flex-wrap gap-3 text-sm text-gray-600">
+                    <div className="flex items-center gap-1">
+                      <Bed className="w-4 h-4" />
+                      <span>{property.bedrooms} غرف</span>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <Bath className="w-4 h-4" />
+                      <span>{property.bathrooms} حمامات</span>
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <Square className="w-4 h-4" />
+                      <span>{property.area} م²</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="text-right">
+                  <div className="text-lg font-bold text-amber-600">{formatCurrency(property.price)}</div>
+                  <div className="text-xs text-gray-500">/يوم</div>
+                  {isBooked && booking && (
+                    <div className="mt-2 text-xs text-gray-500">
+                      <div>مستأجر: {booking.tenantName || 'غير معروف'}</div>
+                      <div>من: {booking.startDate} إلى {booking.endDate}</div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </motion.div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+const PropertyDetailsModal = ({ property, isOpen, onClose }) => {
+  if (!isOpen || !property) return null;
+
+  const formatCurrency = (amount) => {
+    return amount?.toLocaleString() + ' ل.س';
+  };
+
+  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">
+              <XCircleIcon className="w-6 h-6" />
+            </button>
+          </div>
+        </div>
+
+        <div className="p-6 space-y-6">
+          {property.images && property.images.length > 0 && (
+            <div>
+              <h3 className="font-bold text-gray-900 mb-3">صور العقار</h3>
+              <div className="grid grid-cols-2 gap-3">
+                {property.images.slice(0, 4).map((image, index) => (
+                  <div key={index} className="relative h-32 rounded-lg overflow-hidden bg-gray-100">
+                    <img src={image} alt={`${property.title} ${index + 1}`} className="w-full h-full object-cover" />
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="bg-gray-50 p-3 rounded-xl text-center">
+              <Bed className="w-5 h-5 text-amber-500 mx-auto mb-1" />
+              <div className="text-sm font-bold">{property.bedrooms}</div>
+              <div className="text-xs text-gray-500">غرف نوم</div>
+            </div>
+            <div className="bg-gray-50 p-3 rounded-xl text-center">
+              <Bath className="w-5 h-5 text-amber-500 mx-auto mb-1" />
+              <div className="text-sm font-bold">{property.bathrooms}</div>
+              <div className="text-xs text-gray-500">حمامات</div>
+            </div>
+            <div className="bg-gray-50 p-3 rounded-xl text-center">
+              <Square className="w-5 h-5 text-amber-500 mx-auto mb-1" />
+              <div className="text-sm font-bold">{property.area}</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>
+
+          {property.features && property.features.length > 0 && (
+            <div>
+              <h3 className="font-bold text-gray-900 mb-3">المميزات</h3>
+              <div className="flex flex-wrap gap-2">
+                {property.features.map((feature, index) => (
+                  <span key={index} className="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs">
+                    {feature}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {property.bookings && property.bookings.length > 0 && (
+            <div>
+              <h3 className="font-bold text-gray-900 mb-3 flex items-center gap-2">
+                <Clock className="w-4 h-4 text-amber-500" />
+                الحجوزات القادمة
+              </h3>
+              <div className="space-y-2">
+                {property.bookings.slice(0, 3).map((booking, index) => (
+                  <div key={index} className="bg-gray-50 p-3 rounded-lg flex justify-between items-center">
+                    <div>
+                      <p className="font-medium text-gray-900">{booking.startDate} - {booking.endDate}</p>
+                      <p className="text-xs text-gray-500">مستأجر: {booking.tenantName || 'غير معروف'}</p>
+                    </div>
+                    <span className="text-sm font-bold text-amber-600">{formatCurrency(booking.totalAmount)}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="p-6 pt-0 flex gap-3">
+          <Link
+            href={`/owner/properties/edit?id=${property.id}`}
+            className="flex-1 bg-amber-500 text-white py-3 rounded-xl text-center font-medium hover:bg-amber-600 transition-colors"
+          >
+            تعديل العقار
+          </Link>
+          <button
+            onClick={() => window.location.href = `/owner/bookings?property=${property.id}`}
+            className="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl text-center font-medium hover:bg-gray-200 transition-colors"
+          >
+            عرض الحجوزات
+          </button>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+};
+
+export default function OwnerCalendarPage() {
+  const router = useRouter();
+  const [user, setUser] = useState(null);
+  const [properties, setProperties] = useState([]);
+  const [filteredProperties, setFilteredProperties] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedPropertyId, setSelectedPropertyId] = useState('all');
+  const [selectedDate, setSelectedDate] = useState(null);
+  const [selectedProperty, setSelectedProperty] = useState(null);
+  const [showFilters, setShowFilters] = useState(false);
+
+  useEffect(() => {
+    const storedUser = localStorage.getItem('user');
+    if (storedUser) {
+      const userData = JSON.parse(storedUser);
+      if (userData.role !== 'owner') {
+        router.push('/');
+      } else {
+        setUser(userData);
+        loadProperties();
+      }
+    } else {
+      router.push('/auth/choose-role');
+    }
+  }, [router]);
+
+  const loadProperties = () => {
+    const storedProperties = localStorage.getItem('ownerProperties');
+    if (storedProperties) {
+      const props = JSON.parse(storedProperties);
+      setProperties(props);
+      setFilteredProperties(props);
+    } else {
+      const mockProperties = [
+        {
+          id: 1,
+          title: 'فيلا فاخرة في المزة',
+          location: 'دمشق، المزة',
+          bedrooms: 5,
+          bathrooms: 4,
+          area: 450,
+          price: 500000,
+          features: ['مسبح', 'حديقة خاصة', 'موقف سيارات', 'أمن 24/7'],
+          images: ['/villa1.jpg'],
+          status: 'available',
+          bookings: [
+            { startDate: '2024-03-10', endDate: '2024-03-15', totalAmount: 2500000, tenantName: 'أحمد محمد' },
+            { startDate: '2024-03-20', endDate: '2024-03-25', totalAmount: 2500000, tenantName: 'سارة أحمد' }
+          ]
+        },
+        {
+          id: 2,
+          title: 'شقة حديثة في الشهباء',
+          location: 'حلب، الشهباء',
+          bedrooms: 3,
+          bathrooms: 2,
+          area: 180,
+          price: 250000,
+          features: ['مطبخ مجهز', 'بلكونة', 'موقف سيارات', 'مصعد'],
+          images: ['/apartment1.jpg'],
+          status: 'available',
+          bookings: [
+            { startDate: '2024-03-05', endDate: '2024-03-08', totalAmount: 750000, tenantName: 'محمد علي' }
+          ]
+        },
+        {
+          id: 3,
+          title: 'بيت عائلي في بابا عمرو',
+          location: 'حمص، بابا عمرو',
+          bedrooms: 4,
+          bathrooms: 3,
+          area: 300,
+          price: 350000,
+          features: ['حديقة كبيرة', 'موقف سيارات', 'مدفأة', 'كراج'],
+          images: ['/house1.jpg'],
+          status: 'booked',
+          bookings: []
+        }
+      ];
+      setProperties(mockProperties);
+      setFilteredProperties(mockProperties);
+      localStorage.setItem('ownerProperties', JSON.stringify(mockProperties));
+    }
+    setIsLoading(false);
+  };
+
+  const calendarStats = {
+    totalProperties: properties.length,
+    availableToday: properties.filter(p => {
+      const today = new Date();
+      const isBooked = p.bookings?.some(b => {
+        const start = new Date(b.startDate);
+        const end = new Date(b.endDate);
+        return today >= start && today <= end;
+      });
+      return !isBooked;
+    }).length,
+    bookedToday: properties.filter(p => {
+      const today = new Date();
+      return p.bookings?.some(b => {
+        const start = new Date(b.startDate);
+        const end = new Date(b.endDate);
+        return today >= start && today <= end;
+      });
+    }).length,
+    upcomingBookings: properties.reduce((sum, p) => sum + (p.bookings?.length || 0), 0)
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <Loader2 className="w-12 h-12 text-amber-500 animate-spin mx-auto mb-4" />
+          <p className="text-gray-600">جاري تحميل التقويم...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <Toaster position="top-center" reverseOrder={false} />
+      
+      <PropertyDetailsModal
+        property={selectedProperty}
+        isOpen={!!selectedProperty}
+        onClose={() => setSelectedProperty(null)}
+      />
+
+      <div className="container mx-auto px-4">
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4"
+        >
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 mb-2">تقويم العقارات</h1>
+            <p className="text-gray-600">مرحباً {user?.name}، تتبع حالة عقاراتك عبر التقويم</p>
+          </div>
+          
+          <div className="flex gap-3">
+            <button
+              onClick={() => setShowFilters(!showFilters)}
+              className="px-4 py-2 bg-white border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors flex items-center gap-2"
+            >
+              <Filter className="w-5 h-5" />
+              فلترة العقارات
+              <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
+            </button>
+            {/* <button className="px-4 py-2 bg-green-600 text-white rounded-xl hover:bg-green-700 transition-colors flex items-center gap-2">
+              <Printer className="w-5 h-5" />
+              طباعة التقويم
+            </button> */}
+          </div>
+        </motion.div>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1 }}
+            className="bg-white rounded-xl shadow-sm p-4 text-center border border-gray-200"
+          >
+            <Building className="w-6 h-6 text-amber-500 mx-auto mb-2" />
+            <div className="text-2xl font-bold text-gray-900">{calendarStats.totalProperties}</div>
+            <div className="text-sm text-gray-600">إجمالي العقارات</div>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+            className="bg-white rounded-xl shadow-sm p-4 text-center border border-gray-200"
+          >
+            <CheckCircle className="w-6 h-6 text-green-500 mx-auto mb-2" />
+            <div className="text-2xl font-bold text-green-600">{calendarStats.availableToday}</div>
+            <div className="text-sm text-gray-600">متاح اليوم</div>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.3 }}
+            className="bg-white rounded-xl shadow-sm p-4 text-center border border-gray-200"
+          >
+            <XCircle className="w-6 h-6 text-red-500 mx-auto mb-2" />
+            <div className="text-2xl font-bold text-red-600">{calendarStats.bookedToday}</div>
+            <div className="text-sm text-gray-600">محجوز اليوم</div>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4 }}
+            className="bg-white rounded-xl shadow-sm p-4 text-center border border-gray-200"
+          >
+            <CalendarDays className="w-6 h-6 text-blue-500 mx-auto mb-2" />
+            <div className="text-2xl font-bold text-blue-600">{calendarStats.upcomingBookings}</div>
+            <div className="text-sm text-gray-600">حجوزات قادمة</div>
+          </motion.div>
+        </div>
+
+        <AnimatePresence>
+          {showFilters && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              className="mb-6 overflow-hidden"
+            >
+              <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-4">
+                <div className="flex flex-wrap gap-3 items-center">
+                  <label className="text-sm font-medium text-gray-700">اختر عقاراً:</label>
+                  <select
+                    value={selectedPropertyId}
+                    onChange={(e) => setSelectedPropertyId(e.target.value)}
+                    className="px-4 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
+                  >
+                    <option value="all">جميع العقارات</option>
+                    {properties.map((property) => (
+                      <option key={property.id} value={property.id}>{property.title}</option>
+                    ))}
+                  </select>
+                  <button
+                    onClick={() => setSelectedPropertyId('all')}
+                    className="px-3 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
+                  >
+                    إعادة تعيين
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <div className="mb-8">
+          <MonthlyCalendar
+            properties={filteredProperties}
+            selectedPropertyId={selectedPropertyId}
+            onDateClick={setSelectedDate}
+            onPropertySelect={setSelectedProperty}
+          />
+        </div>
+
+        <div>
+          <PropertyCalendarList
+            properties={filteredProperties}
+            selectedDate={selectedDate}
+            onPropertyClick={setSelectedProperty}
+          />
+        </div>
+
+        {selectedDate && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            className="mt-6 text-center text-sm text-gray-500"
+          >
+            <AlertCircle className="w-4 h-4 inline ml-1" />
+            اضغط على أي عقار لعرض التفاصيل الكاملة
+          </motion.div>
+        )}
+      </div>
+    </div>
+  );
+}