added the images

app/ClientLayout.js

@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import { usePathname } from 'next/navigation';
+import { usePathname } from "next/navigation";
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import Image from "next/image";
 import { NavLink, MobileNavLink } from "./components/NavLinks";
@@ -32,16 +32,16 @@ import {
   CalendarDays,
   Clock,
   Users,
-  DollarSign
+  DollarSign,
-} from 'lucide-react';
+} from "lucide-react";
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence } from "framer-motion";
-import './i18n/config';
+import "./i18n/config";
 
 export default function ClientLayout({ children }) {
   const { t, i18n } = useTranslation();
   const pathname = usePathname();
-  const [currentLanguage, setCurrentLanguage] = useState('en');
+  const [currentLanguage, setCurrentLanguage] = useState("en");
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [showUserMenu, setShowUserMenu] = useState(false);
   const [user, setUser] = useState(null);
@@ -51,23 +51,23 @@ export default function ClientLayout({ children }) {
 
   useEffect(() => {
     setIsMounted(true);
-    const savedLanguage = localStorage.getItem('language') || 'en';
+    const savedLanguage = localStorage.getItem("language") || "en";
     setCurrentLanguage(savedLanguage);
     i18n.changeLanguage(savedLanguage);
 
-    const storedUser = localStorage.getItem('user');
+    const storedUser = localStorage.getItem("user");
     if (storedUser) {
       const userData = JSON.parse(storedUser);
-      console.log('User data loaded:', userData); 
+      console.log("User data loaded:", userData);
       setUser(userData);
     }
 
-    if (savedLanguage === 'ar') {
+    if (savedLanguage === "ar") {
-      document.documentElement.dir = 'rtl';
+      document.documentElement.dir = "rtl";
-      document.documentElement.lang = 'ar';
+      document.documentElement.lang = "ar";
     } else {
-      document.documentElement.dir = 'ltr';
+      document.documentElement.dir = "ltr";
-      document.documentElement.lang = 'en';
+      document.documentElement.lang = "en";
     }
   }, [i18n]);
 
@@ -77,21 +77,21 @@ export default function ClientLayout({ children }) {
         setShowUserMenu(false);
       }
     };
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
   const changeLanguage = (lng) => {
     i18n.changeLanguage(lng);
     setCurrentLanguage(lng);
-    localStorage.setItem('language', lng);
+    localStorage.setItem("language", lng);
 
-    if (lng === 'ar') {
+    if (lng === "ar") {
-      document.documentElement.dir = 'rtl';
+      document.documentElement.dir = "rtl";
-      document.documentElement.lang = 'ar';
+      document.documentElement.lang = "ar";
     } else {
-      document.documentElement.dir = 'ltr';
+      document.documentElement.dir = "ltr";
-      document.documentElement.lang = 'en';
+      document.documentElement.lang = "en";
     }
   };
 
@@ -104,21 +104,26 @@ export default function ClientLayout({ children }) {
   };
 
   const logout = () => {
-    localStorage.removeItem('user');
+    localStorage.removeItem("user");
     setUser(null);
     setShowUserMenu(false);
-    window.location.href = '/';
+    window.location.href = "/";
   };
 
-  const isAuthPage = ['/login', '/register', '/forgot-password', '/auth/choose-role'].includes(pathname);
+  const isAuthPage = [
+    "/login",
+    "/register",
+    "/forgot-password",
+    "/auth/choose-role",
+  ].includes(pathname);
 
-  const isProfilePage = pathname === '/profile';
+  const isProfilePage = pathname === "/profile";
 
-  const isOwner = user?.role === 'owner';
+  const isOwner = user?.role === "owner";
-  const isAdmin = user?.role === 'admin';
+  const isAdmin = user?.role === "admin";
 
-  console.log('User role:', user?.role);
+  console.log("User role:", user?.role);
-  console.log('Is Admin:', isAdmin);
+  console.log("Is Admin:", isAdmin);
 
   const getUserInitial = () => {
     if (user?.name) {
@@ -143,34 +148,35 @@ export default function ClientLayout({ children }) {
       {!isAuthPage && (
         <nav className="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-b border-gray-200 z-50 transition-all duration-300 shadow-sm">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className={`flex justify-between items-center h-20 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
+            <div
-              
+              className={`flex justify-between items-center h-20 ${currentLanguage === "ar" ? "flex-row-reverse" : ""}`}
+            >
               <div className="flex items-center">
                 <Link href="/" className="flex items-center space-x-3 group">
-                  <div className="relative w-10 h-10">
+                  <div className="relative w-[150px] h-[60px]">
                     <Image
                       src="/logo.png"
                       alt={t("logoAlt")}
                       fill
-                      className="object-contain group-hover:scale-105 transition-transform duration-300"
+                      className="object-contain"
                       priority
-                      sizes="40px"
                     />
                   </div>
                   <span className="text-3xl font-bold text-gray-800 hidden md:block">
-                    {t("brandNamePart1")}<span className="text-amber-600">{t("brandNamePart2")}</span>
+                    {t("brandNamePart1")}
+                    <span className="text-amber-600">
+                      {t("brandNamePart2")}
+                    </span>
                   </span>
                 </Link>
               </div>
 
               <div className="hidden md:flex items-center space-x-4">
-                <div className={`flex items-center space-x-1 ${currentLanguage === 'ar' ? 'flex-row-reverse space-x-reverse' : ''}`}>
+                <div
-                  <NavLink href="/">
+                  className={`flex items-center space-x-1 ${currentLanguage === "ar" ? "flex-row-reverse space-x-reverse" : ""}`}
-                    {t("home")}
+                >
-                  </NavLink>
+                  <NavLink href="/">{t("home")}</NavLink>
-                  <NavLink href="/properties">
+                  <NavLink href="/properties">{t("ourProducts")}</NavLink>
-                    {t("ourProducts")}
-                  </NavLink>
 
                   {isAdmin && (
                     <NavLink href="/admin">
@@ -231,7 +237,9 @@ export default function ClientLayout({ children }) {
                 <motion.button
                   whileHover={{ scale: 1.1, rotate: 360 }}
                   whileTap={{ scale: 0.9 }}
-                  onClick={() => changeLanguage(currentLanguage === 'en' ? 'ar' : 'en')}
+                  onClick={() =>
+                    changeLanguage(currentLanguage === "en" ? "ar" : "en")
+                  }
                   className="flex items-center justify-center w-10 h-10 bg-gray-100 hover:bg-gray-200 rounded-full transition-all duration-200 ml-4"
                 >
                   <Globe className="w-5 h-5 text-gray-700" />
@@ -262,10 +270,18 @@ export default function ClientLayout({ children }) {
                                 {getUserInitial()}
                               </div>
                               <div>
-                                <p className="font-bold">{user?.name || 'مستخدم'}</p>
+                                <p className="font-bold">
-                                <p className="text-xs text-amber-100">{user?.email || ''}</p>
+                                  {user?.name || "مستخدم"}
+                                </p>
+                                <p className="text-xs text-amber-100">
+                                  {user?.email || ""}
+                                </p>
                                 <p className="text-xs text-amber-100 mt-1">
-                                  {isOwner ? 'مالك عقار' : isAdmin ? 'مدير النظام' : 'مستأجر'}
+                                  {isOwner
+                                    ? "مالك عقار"
+                                    : isAdmin
+                                      ? "مدير النظام"
+                                      : "مستأجر"}
                                 </p>
                               </div>
                             </div>
@@ -280,7 +296,9 @@ export default function ClientLayout({ children }) {
                               <UserCircle className="w-5 h-5 text-amber-500" />
                               <div>
                                 <p className="font-medium">الملف الشخصي</p>
-                                <p className="text-xs text-gray-500">عرض وتعديل معلوماتك</p>
+                                <p className="text-xs text-gray-500">
+                                  عرض وتعديل معلوماتك
+                                </p>
                               </div>
                             </Link>
 
@@ -292,7 +310,9 @@ export default function ClientLayout({ children }) {
                               <Heart className="w-5 h-5 text-amber-500" />
                               <div>
                                 <p className="font-medium">المفضلة</p>
-                                <p className="text-xs text-gray-500">العقارات المحفوظة</p>
+                                <p className="text-xs text-gray-500">
+                                  العقارات المحفوظة
+                                </p>
                               </div>
                             </Link>
 
@@ -308,7 +328,9 @@ export default function ClientLayout({ children }) {
                                   <Building className="w-5 h-5 text-amber-500" />
                                   <div>
                                     <p className="font-medium">عقاراتي</p>
-                                    <p className="text-xs text-gray-500">إدارة عقاراتك</p>
+                                    <p className="text-xs text-gray-500">
+                                      إدارة عقاراتك
+                                    </p>
                                   </div>
                                 </Link>
 
@@ -320,7 +342,9 @@ export default function ClientLayout({ children }) {
                                   <PlusCircle className="w-5 h-5 text-amber-500" />
                                   <div>
                                     <p className="font-medium">إضافة عقار</p>
-                                    <p className="text-xs text-gray-500">أضف عقاراً جديداً</p>
+                                    <p className="text-xs text-gray-500">
+                                      أضف عقاراً جديداً
+                                    </p>
                                   </div>
                                 </Link>
 
@@ -332,7 +356,9 @@ export default function ClientLayout({ children }) {
                                   <Calendar className="w-5 h-5 text-amber-500" />
                                   <div>
                                     <p className="font-medium">الحجوزات</p>
-                                    <p className="text-xs text-gray-500">إدارة حجوزاتك</p>
+                                    <p className="text-xs text-gray-500">
+                                      إدارة حجوزاتك
+                                    </p>
                                   </div>
                                 </Link>
 
@@ -344,7 +370,9 @@ export default function ClientLayout({ children }) {
                                   <CalendarDays className="w-5 h-5 text-amber-500" />
                                   <div>
                                     <p className="font-medium">التقويم</p>
-                                    <p className="text-xs text-gray-500">جدول توفر العقارات</p>
+                                    <p className="text-xs text-gray-500">
+                                      جدول توفر العقارات
+                                    </p>
                                   </div>
                                 </Link>
 
@@ -356,7 +384,9 @@ export default function ClientLayout({ children }) {
                                   <TrendingUp className="w-5 h-5 text-amber-500" />
                                   <div>
                                     <p className="font-medium">الأرباح</p>
-                                    <p className="text-xs text-gray-500">إحصائيات وأرباح</p>
+                                    <p className="text-xs text-gray-500">
+                                      إحصائيات وأرباح
+                                    </p>
                                   </div>
                                 </Link>
                               </>
@@ -374,7 +404,9 @@ export default function ClientLayout({ children }) {
                                   <Shield className="w-5 h-5 text-amber-500" />
                                   <div>
                                     <p className="font-medium">لوحة التحكم</p>
-                                    <p className="text-xs text-gray-500">إدارة المنصة</p>
+                                    <p className="text-xs text-gray-500">
+                                      إدارة المنصة
+                                    </p>
                                   </div>
                                 </Link>
 
@@ -386,7 +418,9 @@ export default function ClientLayout({ children }) {
                                   <Users className="w-5 h-5 text-amber-500" />
                                   <div>
                                     <p className="font-medium">المستخدمين</p>
-                                    <p className="text-xs text-gray-500">إدارة المستخدمين</p>
+                                    <p className="text-xs text-gray-500">
+                                      إدارة المستخدمين
+                                    </p>
                                   </div>
                                 </Link>
 
@@ -398,7 +432,9 @@ export default function ClientLayout({ children }) {
                                   <Building className="w-5 h-5 text-amber-500" />
                                   <div>
                                     <p className="font-medium">العقارات</p>
-                                    <p className="text-xs text-gray-500">إدارة جميع العقارات</p>
+                                    <p className="text-xs text-gray-500">
+                                      إدارة جميع العقارات
+                                    </p>
                                   </div>
                                 </Link>
 
@@ -410,7 +446,9 @@ export default function ClientLayout({ children }) {
                                   <Calendar className="w-5 h-5 text-amber-500" />
                                   <div>
                                     <p className="font-medium">الحجوزات</p>
-                                    <p className="text-xs text-gray-500">إدارة الحجوزات</p>
+                                    <p className="text-xs text-gray-500">
+                                      إدارة الحجوزات
+                                    </p>
                                   </div>
                                 </Link>
 
@@ -422,7 +460,9 @@ export default function ClientLayout({ children }) {
                                   <DollarSign className="w-5 h-5 text-amber-500" />
                                   <div>
                                     <p className="font-medium">دفتر الحسابات</p>
-                                    <p className="text-xs text-gray-500">إدارة المعاملات المالية</p>
+                                    <p className="text-xs text-gray-500">
+                                      إدارة المعاملات المالية
+                                    </p>
                                   </div>
                                 </Link>
                               </>
@@ -440,7 +480,9 @@ export default function ClientLayout({ children }) {
                                   <Calendar className="w-5 h-5 text-amber-500" />
                                   <div>
                                     <p className="font-medium">حجوزاتي</p>
-                                    <p className="text-xs text-gray-500">عرض حجوزاتك</p>
+                                    <p className="text-xs text-gray-500">
+                                      عرض حجوزاتك
+                                    </p>
                                   </div>
                                 </Link>
                               </>
@@ -455,7 +497,9 @@ export default function ClientLayout({ children }) {
                               <LogOut className="w-5 h-5" />
                               <div>
                                 <p className="font-medium">تسجيل الخروج</p>
-                                <p className="text-xs text-red-400">إنهاء الجلسة الحالية</p>
+                                <p className="text-xs text-red-400">
+                                  إنهاء الجلسة الحالية
+                                </p>
                               </div>
                             </button>
                           </div>
@@ -470,7 +514,9 @@ export default function ClientLayout({ children }) {
                 <motion.button
                   whileHover={{ scale: 1.1, rotate: 360 }}
                   whileTap={{ scale: 0.9 }}
-                  onClick={() => changeLanguage(currentLanguage === 'en' ? 'ar' : 'en')}
+                  onClick={() =>
+                    changeLanguage(currentLanguage === "en" ? "ar" : "en")
+                  }
                   className="flex items-center justify-center w-10 h-10 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors"
                 >
                   <Globe className="w-5 h-5 text-gray-700" />
@@ -527,25 +573,37 @@ export default function ClientLayout({ children }) {
 
                 {isOwner && (
                   <>
-                    <MobileNavLink href="/owner/properties" onClick={closeMobileMenu}>
+                    <MobileNavLink
+                      href="/owner/properties"
+                      onClick={closeMobileMenu}
+                    >
                       <span className="flex items-center gap-2">
                         <Building className="w-4 h-4" />
                         عقاراتي
                       </span>
                     </MobileNavLink>
-                    <MobileNavLink href="/owner/bookings" onClick={closeMobileMenu}>
+                    <MobileNavLink
+                      href="/owner/bookings"
+                      onClick={closeMobileMenu}
+                    >
                       <span className="flex items-center gap-2">
                         <Calendar className="w-4 h-4" />
                         الحجوزات
                       </span>
                     </MobileNavLink>
-                    <MobileNavLink href="/owner/calendar" onClick={closeMobileMenu}>
+                    <MobileNavLink
+                      href="/owner/calendar"
+                      onClick={closeMobileMenu}
+                    >
                       <span className="flex items-center gap-2">
                         <CalendarDays className="w-4 h-4" />
                         التقويم
                       </span>
                     </MobileNavLink>
-                    <MobileNavLink href="/owner/profits" onClick={closeMobileMenu}>
+                    <MobileNavLink
+                      href="/owner/profits"
+                      onClick={closeMobileMenu}
+                    >
                       <span className="flex items-center gap-2">
                         <TrendingUp className="w-4 h-4" />
                         الأرباح
@@ -563,7 +621,10 @@ export default function ClientLayout({ children }) {
                         تسجيل الدخول
                       </span>
                     </MobileNavLink>
-                    <MobileNavLink href="/auth/choose-role" onClick={closeMobileMenu}>
+                    <MobileNavLink
+                      href="/auth/choose-role"
+                      onClick={closeMobileMenu}
+                    >
                       <span className="flex items-center gap-2">
                         <UserPlus className="w-4 h-4" />
                         إنشاء حساب
@@ -577,16 +638,22 @@ export default function ClientLayout({ children }) {
         </nav>
       )}
 
-      <main className={`${!isAuthPage && !isProfilePage ? 'pt-20' : ''} min-h-screen bg-gradient-to-b from-gray-50 to-white ${currentLanguage === 'ar' ? 'text-right' : 'text-left'}`}>
+      <main
+        className={`${!isAuthPage && !isProfilePage ? "pt-20" : ""} min-h-screen bg-gradient-to-b from-gray-50 to-white ${currentLanguage === "ar" ? "text-right" : "text-left"}`}
+      >
         {children}
       </main>
 
       {!isAuthPage && !isProfilePage && (
         <footer className="bg-gray-900 text-white py-12">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className={`grid grid-cols-1 md:grid-cols-4 gap-8 ${currentLanguage === 'ar' ? 'text-right' : 'text-left'}`}>
+            <div
+              className={`grid grid-cols-1 md:grid-cols-4 gap-8 ${currentLanguage === "ar" ? "text-right" : "text-left"}`}
+            >
               <div className="space-y-4">
-                <div className={`flex items-center ${currentLanguage === 'ar' ? 'flex-row-reverse' : 'space-x-3'}`}>
+                <div
+                  className={`flex items-center ${currentLanguage === "ar" ? "flex-row-reverse" : "space-x-3"}`}
+                >
                   <div className="relative w-10 h-10">
                     <Image
                       src="/logo.png"
@@ -597,7 +664,10 @@ export default function ClientLayout({ children }) {
                     />
                   </div>
                   <span className="text-3xl font-bold">
-                    {t("brandNamePart1")}<span className="text-amber-400">{t("brandNamePart2")}</span>
+                    {t("brandNamePart1")}
+                    <span className="text-amber-400">
+                      {t("brandNamePart2")}
+                    </span>
                   </span>
                 </div>
                 <p className="text-gray-400 text-sm">
@@ -605,21 +675,32 @@ export default function ClientLayout({ children }) {
                 </p>
               </div>
               <div>
-                <h3 className="text-lg font-semibold mb-4">{t("quickLinks")}</h3>
+                <h3 className="text-lg font-semibold mb-4">
+                  {t("quickLinks")}
+                </h3>
                 <ul className="space-y-2">
                   <li>
-                    <Link href="/" className="text-gray-400 hover:text-white transition-colors block py-1">
+                    <Link
+                      href="/"
+                      className="text-gray-400 hover:text-white transition-colors block py-1"
+                    >
                       {t("home")}
                     </Link>
                   </li>
                   <li>
-                    <Link href="/properties" className="text-gray-400 hover:text-white transition-colors block py-1">
+                    <Link
+                      href="/properties"
+                      className="text-gray-400 hover:text-white transition-colors block py-1"
+                    >
                       {t("ourProducts")}
                     </Link>
                   </li>
                   {isAdmin && (
                     <li>
-                      <Link href="/admin" className="text-gray-400 hover:text-white transition-colors block py-1">
+                      <Link
+                        href="/admin"
+                        className="text-gray-400 hover:text-white transition-colors block py-1"
+                      >
                         الإدارة
                       </Link>
                     </li>
@@ -641,7 +722,9 @@ export default function ClientLayout({ children }) {
               </div>
             </div>
             <div className="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm">
-              <p>&copy; {currentYear} {t("copyright")}. {t("allRightsReserved")}</p>
+              <p>
+                &copy; {currentYear} {t("copyright")}. {t("allRightsReserved")}
+              </p>
             </div>
           </div>
         </footer>

app/contexts/PropertyContext.js

@@ -1,13 +1,13 @@
-'use client';
+"use client";
 
-import { createContext, useContext, useState, useCallback } from 'react';
+import { createContext, useContext, useState, useCallback } from "react";
 
 const PropertyContext = createContext();
 
 export const useProperties = () => {
   const context = useContext(PropertyContext);
   if (!context) {
-    throw new Error('useProperties must be used within PropertyProvider');
+    throw new Error("useProperties must be used within PropertyProvider");
   }
   return context;
 };
@@ -20,7 +20,7 @@ export const PropertyProvider = ({ children }) => {
   const addProperty = useCallback(async (propertyData) => {
     setLoading(true);
     try {
-      await new Promise(resolve => setTimeout(resolve, 500));
+      await new Promise((resolve) => setTimeout(resolve, 500));
 
       const newProperty = {
         id: Date.now().toString(),
@@ -28,10 +28,10 @@ export const PropertyProvider = ({ children }) => {
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
         bookings: [],
-        status: propertyData.status || 'available'
+        status: propertyData.status || "available",
       };
 
-      setProperties(prev => [...prev, newProperty]);
+      setProperties((prev) => [...prev, newProperty]);
       return newProperty;
     } catch (err) {
       setError(err.message);
@@ -44,13 +44,14 @@ export const PropertyProvider = ({ children }) => {
   const updateProperty = useCallback(async (id, updates) => {
     setLoading(true);
     try {
-      await new Promise(resolve => setTimeout(resolve, 500));
+      await new Promise((resolve) => setTimeout(resolve, 500));
 
-      setProperties(prev => 
+      setProperties((prev) =>
-        prev.map(p => p.id === id 
+        prev.map((p) =>
-          ? { ...p, ...updates, updatedAt: new Date().toISOString() } 
+          p.id === id
-          : p
+            ? { ...p, ...updates, updatedAt: new Date().toISOString() }
-        )
+            : p,
+        ),
       );
     } catch (err) {
       setError(err.message);
@@ -63,8 +64,8 @@ export const PropertyProvider = ({ children }) => {
   const deleteProperty = useCallback(async (id) => {
     setLoading(true);
     try {
-      await new Promise(resolve => setTimeout(resolve, 500));
+      await new Promise((resolve) => setTimeout(resolve, 500));
-      setProperties(prev => prev.filter(p => p.id !== id));
+      setProperties((prev) => prev.filter((p) => p.id !== id));
     } catch (err) {
       setError(err.message);
       throw err;
@@ -73,68 +74,85 @@ export const PropertyProvider = ({ children }) => {
     }
   }, []);
 
-  const getProperty = useCallback((id) => {
+  const getProperty = useCallback(
-    return properties.find(p => p.id === id);
+    (id) => {
-  }, [properties]);
+      return properties.find((p) => p.id === id);
+    },
+    [properties],
+  );
 
-  const checkAvailability = useCallback((propertyId, startDate, endDate) => {
+  const checkAvailability = useCallback(
-    const property = properties.find(p => p.id === propertyId);
+    (propertyId, startDate, endDate) => {
-    if (!property) return false;
+      const property = properties.find((p) => p.id === propertyId);
+      if (!property) return false;
 
-    const checkStart = new Date(startDate);
+      const checkStart = new Date(startDate);
-    const checkEnd = new Date(endDate);
+      const checkEnd = new Date(endDate);
 
-    return !property.bookings?.some(booking => {
+      return !property.bookings?.some((booking) => {
-      if (booking.status === 'cancelled' || booking.status === 'rejected') {
+        if (booking.status === "cancelled" || booking.status === "rejected") {
-        return false;
+          return false;
-      }
+        }
 
-      const bookingStart = new Date(booking.startDate);
+        const bookingStart = new Date(booking.startDate);
-      const bookingEnd = new Date(booking.endDate);
+        const bookingEnd = new Date(booking.endDate);
 
-      return (
+        return (
-        (checkStart >= bookingStart && checkStart <= bookingEnd) ||
+          (checkStart >= bookingStart && checkStart <= bookingEnd) ||
-        (checkEnd >= bookingStart && checkEnd <= bookingEnd) ||
+          (checkEnd >= bookingStart && checkEnd <= bookingEnd) ||
-        (checkStart <= bookingStart && checkEnd >= bookingEnd)
+          (checkStart <= bookingStart && checkEnd >= bookingEnd)
-      );
+        );
-    });
+      });
-  }, [properties]);
+    },
+    [properties],
+  );
 
-  const getPropertiesByOwner = useCallback((ownerId) => {
+  const getPropertiesByOwner = useCallback(
-    return properties.filter(p => p.ownerId === ownerId);
+    (ownerId) => {
-  }, [properties]);
+      return properties.filter((p) => p.ownerId === ownerId);
+    },
+    [properties],
+  );
 
   const getAvailableProperties = useCallback(() => {
-    return properties.filter(p => p.status === 'available');
+    return properties.filter((p) => p.status === "available");
   }, [properties]);
 
-  const updatePropertyStatus = useCallback(async (id, status) => {
+  const updatePropertyStatus = useCallback(
-    return updateProperty(id, { status });
+    async (id, status) => {
-  }, [updateProperty]);
+      return updateProperty(id, { status });
+    },
+    [updateProperty],
+  );
 
-  const addBookingToProperty = useCallback(async (propertyId, bookingData) => {
+  const addBookingToProperty = useCallback(
-    const property = getProperty(propertyId);
+    async (propertyId, bookingData) => {
-    if (!property) throw new Error('Property not found');
+      const property = getProperty(propertyId);
+      if (!property) throw new Error("Property not found");
 
-    const updatedBookings = [...(property.bookings || []), bookingData];
+      const updatedBookings = [...(property.bookings || []), bookingData];
-    return updateProperty(propertyId, { bookings: updatedBookings });
+      return updateProperty(propertyId, { bookings: updatedBookings });
-  }, [getProperty, updateProperty]);
+    },
+    [getProperty, updateProperty],
+  );
 
   return (
-    <PropertyContext.Provider value={{
+    <PropertyContext.Provider
-      properties,
+      value={{
-      loading,
+        properties,
-      error,
+        loading,
-      addProperty,
+        error,
-      updateProperty,
+        addProperty,
-      deleteProperty,
+        updateProperty,
-      getProperty,
+        deleteProperty,
-      checkAvailability,
+        getProperty,
-      getPropertiesByOwner,
+        checkAvailability,
-      getAvailableProperties,
+        getPropertiesByOwner,
-      updatePropertyStatus,
+        getAvailableProperties,
-      addBookingToProperty
+        updatePropertyStatus,
-    }}>
+        addBookingToProperty,
+      }}
+    >
       {children}
     </PropertyContext.Provider>
   );