Edit admin page

Edit home image
Added properties page

app/components/property/BookingCalendar.js

@@ -0,0 +1,162 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from 'lucide-react';
+
+export default function BookingCalendar({ property, onDateSelect }) {
+  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(),
+    currentMonth.getMonth() + 1,
+    0
+  ).getDate();
+
+  const firstDayOfMonth = new Date(
+    currentMonth.getFullYear(),
+    currentMonth.getMonth(),
+    1
+  ).getDay();
+
+  const monthNames = [
+    'يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو',
+    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+  ];
+
+  const isDateBooked = (date) => {
+    const dateStr = date.toISOString().split('T')[0];
+    return bookedDates.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 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 = () => {
+    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" />);
+      } else {
+        const dayNumber = i - firstDayOfMonth + 1;
+        const date = new Date(
+          currentMonth.getFullYear(),
+          currentMonth.getMonth(),
+          dayNumber
+        );
+        
+        const isBooked = isDateBooked(date);
+        const isSelected = isInSelectedRange(date);
+        const isToday = date.toDateString() === new Date().toDateString();
+
+        days.push(
+          <motion.button
+            key={dayNumber}
+            whileHover={!isBooked ? { scale: 1.1 } : {}}
+            onClick={() => handleDateClick(date)}
+            disabled={isBooked}
+            className={`
+              p-2 rounded-lg text-center 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>
+        );
+      }
+    }
+    return days;
+  };
+
+  return (
+    <div className="bg-white rounded-xl p-6 shadow-lg">
+      <div className="flex items-center justify-between mb-6">
+        <button
+          onClick={() => changeMonth(-1)}
+          className="p-2 hover:bg-gray-100 rounded-lg"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </button>
+        
+        <h3 className="text-lg font-bold flex items-center gap-2">
+          <CalendarIcon className="w-5 h-5 text-amber-500" />
+          {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
+        </h3>
+        
+        <button
+          onClick={() => changeMonth(1)}
+          className="p-2 hover:bg-gray-100 rounded-lg"
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </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>أحد</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>
+        <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>
+      </div>
+    </div>
+  );
+}