Added API to map with markers in main page

app/page.js

@@ -26,15 +26,13 @@ import {
   MessageCircle
 } from 'lucide-react';
 import HeroSearch from './components/home/HeroSearch';
-import PropertyMap from './components/home/PropertyMap';
+import PropertyMapWithMarkers from './components/PropertyMapWithMarkers';
 import Link from 'next/link';
 import Image from 'next/image';
 import { getRentProperties, getSaleProperties } from './utils/api';
 import { BuildingTypeKeys, PropertyStatusKeys, extractCity } from './enums';
 import AuthService from './services/AuthService';
 
-// Map API property data to the format the UI expects
-// API returns { propertyInformationId, deposit, monthlyRent, dailyRent, rating, propertyInformation: {...}, ... }
 function mapApiProperty(item, index) {
   const info = item.propertyInformation || {};
 
@@ -56,7 +54,6 @@ function mapApiProperty(item, index) {
   if (info.numberOfBedRooms) features.push(`${info.numberOfBedRooms} غرف نوم`);
   if (info.numberOfBathRooms) features.push(`${info.numberOfBathRooms} حمامات`);
 
-  // Extract images from API and build full URLs
   const apiBase = typeof window !== 'undefined' ? (process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api') : '';
   const rawImages = Array.isArray(info.images) ? info.images : [];
   const images = rawImages.length > 0
@@ -105,10 +102,6 @@ function mapApiProperty(item, index) {
   };
 }
 
-// extractCity is now imported from @/app/enums
-
-// API-only — no fallback data
-
 export default function HomePage() {
   const mapSectionRef = useRef(null);
   const [searchFilters, setSearchFilters] = useState(null);
@@ -121,9 +114,10 @@ export default function HomePage() {
   const pathname = usePathname();
 
   const [allProperties, setAllProperties] = useState([]);
+  const [rentProperties, setRentProperties] = useState([]);
+  const [saleProperties, setSaleProperties] = useState([]);
   const [loading, setLoading] = useState(true);
 
-  // Re-read user from JWT on every route change
   useEffect(() => {
     const authUser = AuthService.getUser();
     if (authUser) {
@@ -137,7 +131,6 @@ export default function HomePage() {
     }
   }, [pathname]);
 
-  // Fetch properties from API on mount
   useEffect(() => {
 
     async function fetchProperties() {
@@ -150,15 +143,12 @@ export default function HomePage() {
         const rentList = Array.isArray(rentData) ? rentData : [];
         const saleList = Array.isArray(saleData) ? saleData : [];
 
-        const mapped = [
-          ...rentList.map((p, i) => mapApiProperty(p, i)),
-          ...saleList.map((p, i) => mapApiProperty(p, rentList.length + i)),
-        ];
+        const mappedRent = rentList.map((p, i) => mapApiProperty(p, i));
+        const mappedSale = saleList.map((p, i) => mapApiProperty(p, rentList.length + i));
 
-        if (mapped.length > 0) {
-          setAllProperties(mapped);
-        }
-        // If API returns empty, keep fallback
+        setRentProperties(mappedRent);
+        setSaleProperties(mappedSale);
+        setAllProperties([...mappedRent, ...mappedSale]);
       } catch (err) {
         console.error('[Home] Failed to fetch properties:', err);
       } finally {
@@ -170,14 +160,10 @@ export default function HomePage() {
   }, []);
 
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
-        setShowUserMenu(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
+    if (searchFilters) {
+      applyFilters(searchFilters);
+    }
+  }, [rentProperties, saleProperties, searchFilters]);
 
   const logout = () => {
     AuthService.deleteToken();
@@ -188,17 +174,16 @@ export default function HomePage() {
   const applyFilters = (filters) => {
     setSearchFilters(filters);
 
-    const filtered = allProperties.filter(property => {
-      if (filters.mode === 'rent' && property.listingType !== 'rent') {
-        return false;
-      }
-      if (filters.mode === 'sell' && property.listingType !== 'sale') {
-        return false;
-      }
-      if (filters.mode === 'buy' && property.listingType !== 'sale') {
-        return false;
-      }
+    let propertiesToFilter = [];
+    if (filters.mode === 'rent') {
+      propertiesToFilter = rentProperties;
+    } else if (filters.mode === 'buy' || filters.mode === 'sell') {
+      propertiesToFilter = saleProperties;
+    } else {
+      propertiesToFilter = allProperties;
+    }
 
+    const filtered = propertiesToFilter.filter(property => {
       if (filters.city && filters.city !== 'all' && property.location.city !== filters.city) {
         return false;
       }
@@ -467,9 +452,16 @@ export default function HomePage() {
                   transition={{ delay: 0.3, type: "spring" }}
                 >
                   {filteredProperties.length > 0 ? (
-                    <PropertyMap
-                      properties={filteredProperties}
-                      userIdentity={searchFilters?.identityType || 'syrian'}
+                    <PropertyMapWithMarkers
+                      properties={filteredProperties.map(p => ({
+                        ...p,
+                        lat: p.location.lat,
+                        lng: p.location.lng,
+                        address: p.location.address
+                      }))}
+                      onPropertyClick={(property) => {
+                        console.log('Property clicked:', property);
+                      }}
                     />
                   ) : (
                     <div className="h-[400px] flex flex-col items-center justify-center bg-gray-50">