Merge branch 'main' of http://45.93.137.91:3000/Rahaf/SweetHome

.gitea/workflows/deployer.yaml

@@ -0,0 +1,40 @@
+name: Build frontend
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps: 
+      - name: Clone repository
+        uses: actions/checkout@v2
+        with:
+          repository: Rahaf/SweetHome
+          github-server-url: http://45.93.137.91:3000
+
+      - name: Stopping server
+        run: sudo systemctl stop sweetHome
+
+      - name: Copy repository to output file
+        run: |
+          sudo cp -r $GITHUB_WORKSPACE/* /opt/sweetHome/
+          sudo chown -R $(whoami) /opt/sweetHome
+
+      - name: Setup Node.js 22.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 22.x
+
+      - name: Install dependencies
+        working-directory: /opt/sweetHome
+        run: npm install
+
+      - name: Build next project
+        working-directory: /opt/sweetHome
+        run: npm run build
+
+      - name: Starting the server
+        run: |
+          sudo systemctl daemon-reload
+          sudo systemctl start sweetHome

app/ClientLayout.js

@@ -1,17 +1,17 @@
-'use client';
+"use client";
 
-import { usePathname } from 'next/navigation';
-import { useTranslation } from 'react-i18next';
+import { usePathname } from "next/navigation";
+import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import Image from "next/image";
 import { NavLink, MobileNavLink } from "./components/NavLinks";
-import { 
-  Globe, 
-  LogIn, 
-  UserPlus, 
-  UserCircle, 
-  LogOut, 
-  Calendar, 
+import {
+  Globe,
+  LogIn,
+  UserPlus,
+  UserCircle,
+  LogOut,
+  Calendar,
   Building,
   PlusCircle,
   Heart,
@@ -32,16 +32,16 @@ import {
   CalendarDays,
   Clock,
   Users,
-  DollarSign
-} from 'lucide-react';
-import { useState, useEffect, useRef } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import './i18n/config';
+  DollarSign,
+} from "lucide-react";
+import { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+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') {
-      document.documentElement.dir = 'rtl';
-      document.documentElement.lang = 'ar';
+
+    if (savedLanguage === "ar") {
+      document.documentElement.dir = "rtl";
+      document.documentElement.lang = "ar";
     } else {
-      document.documentElement.dir = 'ltr';
-      document.documentElement.lang = 'en';
+      document.documentElement.dir = "ltr";
+      document.documentElement.lang = "en";
     }
   }, [i18n]);
 
@@ -77,21 +77,21 @@ export default function ClientLayout({ children }) {
         setShowUserMenu(false);
       }
     };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
   const changeLanguage = (lng) => {
     i18n.changeLanguage(lng);
     setCurrentLanguage(lng);
-    localStorage.setItem('language', lng);
-    
-    if (lng === 'ar') {
-      document.documentElement.dir = 'rtl';
-      document.documentElement.lang = 'ar';
+    localStorage.setItem("language", lng);
+
+    if (lng === "ar") {
+      document.documentElement.dir = "rtl";
+      document.documentElement.lang = "ar";
     } else {
-      document.documentElement.dir = 'ltr';
-      document.documentElement.lang = 'en';
+      document.documentElement.dir = "ltr";
+      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 isProfilePage = pathname === '/profile';
+  const isAuthPage = [
+    "/login",
+    "/register",
+    "/forgot-password",
+    "/auth/choose-role",
+  ].includes(pathname);
 
-  const isOwner = user?.role === 'owner';
-  const isAdmin = user?.role === 'admin';
+  const isProfilePage = pathname === "/profile";
 
-  console.log('User role:', user?.role);
-  console.log('Is Admin:', isAdmin);
+  const isOwner = user?.role === "owner";
+  const isAdmin = user?.role === "admin";
+
+  console.log("User role:", user?.role);
+  console.log("Is Admin:", isAdmin);
 
   const getUserInitial = () => {
     if (user?.name) {
@@ -143,35 +148,36 @@ 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' : ''}`}>
-                  <NavLink href="/">
-                    {t("home")}
-                  </NavLink>
-                  <NavLink href="/properties">
-                    {t("ourProducts")}
-                  </NavLink>
-                  
+                <div
+                  className={`flex items-center space-x-1 ${currentLanguage === "ar" ? "flex-row-reverse space-x-reverse" : ""}`}
+                >
+                  <NavLink href="/">{t("home")}</NavLink>
+                  <NavLink href="/properties">{t("ourProducts")}</NavLink>
+
                   {isAdmin && (
                     <NavLink href="/admin">
                       <span className="flex items-center gap-2">
@@ -180,7 +186,7 @@ export default function ClientLayout({ children }) {
                       </span>
                     </NavLink>
                   )}
-                  
+
                   {isOwner && (
                     <>
                       <NavLink href="/owner/properties">
@@ -209,7 +215,7 @@ export default function ClientLayout({ children }) {
                       </NavLink>
                     </>
                   )}
-                  
+
                   {!user && !isAuthPage && (
                     <>
                       <NavLink href="/login">
@@ -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,15 +270,23 @@ export default function ClientLayout({ children }) {
                                 {getUserInitial()}
                               </div>
                               <div>
-                                <p className="font-bold">{user?.name || 'مستخدم'}</p>
-                                <p className="text-xs text-amber-100">{user?.email || ''}</p>
+                                <p className="font-bold">
+                                  {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>
                           </div>
-                          
+
                           <div className="p-2">
                             <Link
                               href="/profile"
@@ -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,14 +310,16 @@ 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>
 
                             {isOwner && (
                               <>
                                 <div className="border-t border-gray-100 my-2"></div>
-                                
+
                                 <Link
                                   href="/owner/properties"
                                   className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
@@ -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>
                               </>
@@ -365,7 +395,7 @@ export default function ClientLayout({ children }) {
                             {isAdmin && (
                               <>
                                 <div className="border-t border-gray-100 my-2"></div>
-                                
+
                                 <Link
                                   href="/admin"
                                   className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
@@ -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>
                               </>
@@ -431,7 +471,7 @@ export default function ClientLayout({ children }) {
                             {!isOwner && !isAdmin && user && (
                               <>
                                 <div className="border-t border-gray-100 my-2"></div>
-                                
+
                                 <Link
                                   href="/tenant/bookings"
                                   className="flex items-center gap-3 px-4 py-3 text-gray-700 hover:bg-amber-50 rounded-lg transition-colors"
@@ -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" />
@@ -515,7 +561,7 @@ export default function ClientLayout({ children }) {
                 <MobileNavLink href="/properties" onClick={closeMobileMenu}>
                   {t("ourProducts")}
                 </MobileNavLink>
-                
+
                 {isAdmin && (
                   <MobileNavLink href="/admin" onClick={closeMobileMenu}>
                     <span className="flex items-center gap-2">
@@ -524,28 +570,40 @@ export default function ClientLayout({ children }) {
                     </span>
                   </MobileNavLink>
                 )}
-                
+
                 {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" />
                         الأرباح
@@ -553,7 +611,7 @@ export default function ClientLayout({ children }) {
                     </MobileNavLink>
                   </>
                 )}
-                
+
                 {!user && (
                   <>
                     <div className="border-t border-gray-200 my-2"></div>
@@ -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,11 +722,13 @@ 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,18 +20,18 @@ 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(),
         ...propertyData,
         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));
-      
-      setProperties(prev => 
-        prev.map(p => p.id === id 
-          ? { ...p, ...updates, updatedAt: new Date().toISOString() } 
-          : p
-        )
+      await new Promise((resolve) => setTimeout(resolve, 500));
+
+      setProperties((prev) =>
+        prev.map((p) =>
+          p.id === id
+            ? { ...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));
-      setProperties(prev => prev.filter(p => p.id !== id));
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      setProperties((prev) => prev.filter((p) => p.id !== id));
     } catch (err) {
       setError(err.message);
       throw err;
@@ -73,69 +74,86 @@ export const PropertyProvider = ({ children }) => {
     }
   }, []);
 
-  const getProperty = useCallback((id) => {
-    return properties.find(p => p.id === id);
-  }, [properties]);
+  const getProperty = useCallback(
+    (id) => {
+      return properties.find((p) => p.id === id);
+    },
+    [properties],
+  );
 
-  const checkAvailability = useCallback((propertyId, startDate, endDate) => {
-    const property = properties.find(p => p.id === propertyId);
-    if (!property) return false;
-    
-    const checkStart = new Date(startDate);
-    const checkEnd = new Date(endDate);
-    
-    return !property.bookings?.some(booking => {
-      if (booking.status === 'cancelled' || booking.status === 'rejected') {
-        return false;
-      }
-      
-      const bookingStart = new Date(booking.startDate);
-      const bookingEnd = new Date(booking.endDate);
-      
-      return (
-        (checkStart >= bookingStart && checkStart <= bookingEnd) ||
-        (checkEnd >= bookingStart && checkEnd <= bookingEnd) ||
-        (checkStart <= bookingStart && checkEnd >= bookingEnd)
-      );
-    });
-  }, [properties]);
+  const checkAvailability = useCallback(
+    (propertyId, startDate, endDate) => {
+      const property = properties.find((p) => p.id === propertyId);
+      if (!property) return false;
 
-  const getPropertiesByOwner = useCallback((ownerId) => {
-    return properties.filter(p => p.ownerId === ownerId);
-  }, [properties]);
+      const checkStart = new Date(startDate);
+      const checkEnd = new Date(endDate);
+
+      return !property.bookings?.some((booking) => {
+        if (booking.status === "cancelled" || booking.status === "rejected") {
+          return false;
+        }
+
+        const bookingStart = new Date(booking.startDate);
+        const bookingEnd = new Date(booking.endDate);
+
+        return (
+          (checkStart >= bookingStart && checkStart <= bookingEnd) ||
+          (checkEnd >= bookingStart && checkEnd <= bookingEnd) ||
+          (checkStart <= bookingStart && checkEnd >= bookingEnd)
+        );
+      });
+    },
+    [properties],
+  );
+
+  const getPropertiesByOwner = useCallback(
+    (ownerId) => {
+      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) => {
-    return updateProperty(id, { status });
-  }, [updateProperty]);
+  const updatePropertyStatus = useCallback(
+    async (id, status) => {
+      return updateProperty(id, { status });
+    },
+    [updateProperty],
+  );
 
-  const addBookingToProperty = useCallback(async (propertyId, bookingData) => {
-    const property = getProperty(propertyId);
-    if (!property) throw new Error('Property not found');
+  const addBookingToProperty = useCallback(
+    async (propertyId, bookingData) => {
+      const property = getProperty(propertyId);
+      if (!property) throw new Error("Property not found");
 
-    const updatedBookings = [...(property.bookings || []), bookingData];
-    return updateProperty(propertyId, { bookings: updatedBookings });
-  }, [getProperty, updateProperty]);
+      const updatedBookings = [...(property.bookings || []), bookingData];
+      return updateProperty(propertyId, { bookings: updatedBookings });
+    },
+    [getProperty, updateProperty],
+  );
 
   return (
-    <PropertyContext.Provider value={{
-      properties,
-      loading,
-      error,
-      addProperty,
-      updateProperty,
-      deleteProperty,
-      getProperty,
-      checkAvailability,
-      getPropertiesByOwner,
-      getAvailableProperties,
-      updatePropertyStatus,
-      addBookingToProperty
-    }}>
+    <PropertyContext.Provider
+      value={{
+        properties,
+        loading,
+        error,
+        addProperty,
+        updateProperty,
+        deleteProperty,
+        getProperty,
+        checkAvailability,
+        getPropertiesByOwner,
+        getAvailableProperties,
+        updatePropertyStatus,
+        addBookingToProperty,
+      }}
+    >
       {children}
     </PropertyContext.Provider>
   );
-};
+};

next.config.mjs

@@ -2,6 +2,8 @@
 const nextConfig = {
   /* config options here */
   reactCompiler: true,
+  // basePath: "/sweetHome",
+  // assetPrefix: "/sweetHome/",
 };
 
 export default nextConfig;

package-lock.json

@@ -17,12 +17,12 @@
         "leaflet": "^1.9.4",
         "lucide-react": "^0.563.0",
         "next": "16.1.6",
-        "react": "19.2.3",
-        "react-dom": "19.2.3",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-hot-toast": "^2.6.0",
         "react-i18next": "^16.5.4",
         "react-intersection-observer": "^10.0.3",
-        "react-leaflet": "^5.0.0"
+        "react-leaflet": "^4.2.1"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -49,7 +49,7 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -59,7 +59,7 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -78,7 +78,7 @@
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.6.tgz",
       "integrity": "sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -108,22 +108,22 @@
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.5.tgz",
-      "integrity": "sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==",
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "^1.7.4",
-        "@floating-ui/utils": "^0.2.10"
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
       }
     },
     "node_modules/@floating-ui/dom/node_modules/@floating-ui/core": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.4.tgz",
-      "integrity": "sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==",
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.10"
+        "@floating-ui/utils": "^0.2.11"
       }
     },
     "node_modules/@floating-ui/react": {
@@ -142,12 +142,12 @@
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.7.tgz",
-      "integrity": "sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==",
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.7.5"
+        "@floating-ui/dom": "^1.7.6"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -155,9 +155,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
-      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
     "node_modules/@iarna/toml": {
@@ -872,14 +872,14 @@
       }
     },
     "node_modules/@react-leaflet/core": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
-      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
       "license": "Hippocratic-2.1",
       "peerDependencies": {
         "leaflet": "^1.9.0",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
@@ -1365,7 +1365,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz",
       "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.26.0"
@@ -1929,6 +1929,12 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
     "node_modules/klona": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
@@ -2193,6 +2199,18 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lucide-react": {
       "version": "0.563.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.563.0.tgz",
@@ -2482,24 +2500,28 @@
       "license": "MIT"
     },
     "node_modules/react": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
-      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
-      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
       "dependencies": {
-        "scheduler": "^0.27.0"
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^19.2.3"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-hot-toast": {
@@ -2562,17 +2584,17 @@
       }
     },
     "node_modules/react-leaflet": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
-      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
       "license": "Hippocratic-2.1",
       "dependencies": {
-        "@react-leaflet/core": "^3.0.0"
+        "@react-leaflet/core": "^2.1.0"
       },
       "peerDependencies": {
         "leaflet": "^1.9.0",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
       }
     },
     "node_modules/readdirp": {
@@ -2658,10 +2680,13 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
-      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
-      "license": "MIT"
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
     },
     "node_modules/semver": {
       "version": "7.7.3",
@@ -2856,6 +2881,20 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start -p 5900"
   },
   "dependencies": {
     "@pbe/react-yandex-maps": "^1.2.5",
@@ -17,12 +17,12 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.563.0",
     "next": "16.1.6",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hot-toast": "^2.6.0",
     "react-i18next": "^16.5.4",
     "react-intersection-observer": "^10.0.3",
-    "react-leaflet": "^5.0.0"
+    "react-leaflet": "^4.2.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",