Added map for home

app/components/property/BookingCalendar.js

@@ -4,10 +4,9 @@ import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from 'lucide-react';
 
-export default function BookingCalendar({ property, onDateSelect }) {
+export default function BookingCalendar({ property }) {
   const [currentMonth, setCurrentMonth] = useState(new Date());
   const [selectedRange, setSelectedRange] = useState({ start: null, end: null });
-  const [bookedDates, setBookedDates] = useState(property.bookings || []);
 
   const daysInMonth = new Date(
     currentMonth.getFullYear(),
@@ -27,8 +26,9 @@ export default function BookingCalendar({ property, onDateSelect }) {
   ];
 
   const isDateBooked = (date) => {
+    if (!property.bookings) return false;
     const dateStr = date.toISOString().split('T')[0];
-    return bookedDates.some(booking => {
+    return property.bookings.some(booking => {
       const start = new Date(booking.startDate);
       const end = new Date(booking.endDate);
       const current = new Date(date);
@@ -36,35 +36,8 @@ export default function BookingCalendar({ property, onDateSelect }) {
     });
   };
 
-  const isInSelectedRange = (date) => {
-    if (!selectedRange.start || !selectedRange.end) return false;
-    const dateStr = date.toISOString().split('T')[0];
-    return dateStr >= selectedRange.start && dateStr <= selectedRange.end;
-  };
-
   const handleDateClick = (date) => {
     if (isDateBooked(date)) return;
-
-    const dateStr = date.toISOString().split('T')[0];
-    
-    if (!selectedRange.start || (selectedRange.start && selectedRange.end)) {
-      setSelectedRange({ start: dateStr, end: null });
-    } else {
-      if (dateStr > selectedRange.start) {
-        setSelectedRange({ ...selectedRange, end: dateStr });
-        onDateSelect?.({ start: selectedRange.start, end: dateStr });
-      } else {
-        setSelectedRange({ start: dateStr, end: null });
-      }
-    }
-  };
-
-  const changeMonth = (direction) => {
-    setCurrentMonth(new Date(
-      currentMonth.getFullYear(),
-      currentMonth.getMonth() + direction,
-      1
-    ));
   };
 
   const renderDays = () => {
@@ -83,24 +56,19 @@ export default function BookingCalendar({ property, onDateSelect }) {
         );
         
         const isBooked = isDateBooked(date);
-        const isSelected = isInSelectedRange(date);
-        const isToday = date.toDateString() === new Date().toDateString();
 
         days.push(
-          <motion.button
+          <button
             key={dayNumber}
-            whileHover={!isBooked ? { scale: 1.1 } : {}}
             onClick={() => handleDateClick(date)}
             disabled={isBooked}
             className={`
-              p-2 rounded-lg text-center transition-all
+              p-2 rounded-lg text-center text-sm transition-all
               ${isBooked ? 'bg-gray-200 text-gray-400 cursor-not-allowed line-through' : 'hover:bg-amber-100 cursor-pointer'}
-              ${isSelected ? 'bg-amber-500 text-white hover:bg-amber-600' : ''}
-              ${isToday && !isSelected && !isBooked ? 'border-2 border-amber-500' : ''}
             `}
           >
             {dayNumber}
-          </motion.button>
+          </button>
         );
       }
     }
@@ -108,53 +76,47 @@ export default function BookingCalendar({ property, onDateSelect }) {
   };
 
   return (
-    <div className="bg-white rounded-xl p-6 shadow-lg">
-      <div className="flex items-center justify-between mb-6">
+    <div className="bg-white rounded-xl p-4 border border-gray-200">
+      <div className="flex items-center justify-between mb-4">
         <button
-          onClick={() => changeMonth(-1)}
-          className="p-2 hover:bg-gray-100 rounded-lg"
+          onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1))}
+          className="p-1 hover:bg-gray-100 rounded"
         >
-          <ChevronRight className="w-5 h-5" />
+          <ChevronRight className="w-4 h-4" />
         </button>
         
-        <h3 className="text-lg font-bold flex items-center gap-2">
-          <CalendarIcon className="w-5 h-5 text-amber-500" />
+        <h4 className="font-medium text-sm flex items-center gap-1">
+          <CalendarIcon className="w-4 h-4 text-amber-500" />
           {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
-        </h3>
+        </h4>
         
         <button
-          onClick={() => changeMonth(1)}
-          className="p-2 hover:bg-gray-100 rounded-lg"
+          onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1))}
+          className="p-1 hover:bg-gray-100 rounded"
         >
-          <ChevronLeft className="w-5 h-5" />
+          <ChevronLeft className="w-4 h-4" />
         </button>
       </div>
-
-      <div className="grid grid-cols-7 gap-1 mb-2 text-center text-sm font-semibold text-gray-600">
-        <div>جمعة</div>
-        <div>سبت</div>
+      <div className="grid grid-cols-7 gap-1 mb-2 text-center text-xs font-medium text-gray-500">
         <div>أحد</div>
         <div>إثنين</div>
         <div>ثلاثاء</div>
         <div>أربعاء</div>
         <div>خميس</div>
+        <div>جمعة</div>
+        <div>سبت</div>
       </div>
       <div className="grid grid-cols-7 gap-1">
         {renderDays()}
       </div>
-
-      <div className="flex gap-4 mt-6 pt-4 border-t text-sm">
-        <div className="flex items-center gap-2">
-          <div className="w-4 h-4 bg-amber-500 rounded" />
-          <span>محدد</span>
+      <div className="flex gap-3 mt-3 pt-3 border-t text-xs">
+        <div className="flex items-center gap-1">
+          <div className="w-3 h-3 bg-gray-200 rounded" />
+          <span className="text-gray-500">محجوز</span>
         </div>
-        <div className="flex items-center gap-2">
-          <div className="w-4 h-4 bg-gray-200 rounded line-through" />
-          <span>محجوز</span>
-        </div>
-        <div className="flex items-center gap-2">
-          <div className="w-4 h-4 border-2 border-amber-500 rounded" />
-          <span>اليوم</span>
+        <div className="flex items-center gap-1">
+          <div className="w-3 h-3 bg-white border border-gray-300 rounded" />
+          <span className="text-gray-500">متاح</span>
         </div>
       </div>
     </div>