fixd larg lines in HomePage , add cookies rather than localStorage,make canvas background Login page

app/hooks/UseFilterOfHeroSearch.js

@@ -0,0 +1,57 @@
+import { useTranslation } from "react-i18next";
+
+export const useFilterOptions = () => {
+  const { t } = useTranslation();
+
+  const cities = [
+    { id: "all", label: t("allCities") },
+    { id: "دمشق", label: t("damascus") },
+    { id: "حلب", label: t("aleppo") },
+    { id: "حمص", label: t("homs") },
+    { id: "اللاذقية", label: t("latakia") },
+    { id: "درعا", label: t("daraa") },
+  ];
+
+  const propertyTypes = [
+    { id: "all", label: t("all") },
+    { id: "apartment", label: t("residentialApartments") },
+    { id: "studio", label: t("studio") },
+    { id: "commercial", label: t("commercialProperty") },
+    { id: "villa", label: t("villaFarm") },
+  ];
+
+  const priceRanges = [
+    { id: "all", label: t("allPrices") },
+    { id: "0-500", label: t("priceRange1") },
+    { id: "500-1000", label: t("priceRange2") },
+    { id: "1000-2000", label: t("priceRange3") },
+    { id: "2000-3000", label: t("priceRange4") },
+    { id: "3000+", label: t("priceRange5") },
+  ];
+
+  const identityTypes = [
+    { id: "syrian", label: t("syrianId") },
+    { id: "passport", label: t("passport") },
+  ];
+
+  const ownerSources = [
+    { id: "all", label: t("all") },
+    { id: "owner", label: t("fromOwner") },
+    { id: "agency", label: t("fromAgency") },
+  ];
+
+  const rentPeriods = [
+    { id: "all", label: t("all") },
+    { id: "daily", label: t("dailyRent") },
+    { id: "monthly", label: t("monthlyRent") },
+  ];
+
+  return {
+    cities,
+    propertyTypes,
+    priceRanges,
+    identityTypes,
+    ownerSources,
+    rentPeriods,
+  };
+};

app/hooks/useApplyFilters.js

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+import { getRentProperties, getSaleProperties } from ".././utils/api";
+import { mapApiProperty } from "../HelperFunction/ApiProperty";
+import { useTranslation } from "react-i18next";
+export default function useApplyFilters() {
+  const [allProperties, setAllProperties] = useState([]);
+  const [rentProperties, setRentProperties] = useState([]);
+  const [saleProperties, setSaleProperties] = useState([]);
+  const [searchFilters, setSearchFilters] = useState(null);
+  const [filteredProperties, setFilteredProperties] = useState([]);
+  const { t } = useTranslation();
+  useEffect(() => {
+    async function fetchProperties() {
+      try {
+        const [rentData, saleData] = await Promise.all([getRentProperties().catch(() => []), getSaleProperties().catch(() => [])]);
+        const rentList = Array.isArray(rentData) ? rentData : [];
+        const saleList = Array.isArray(saleData) ? saleData : [];
+        const mappedRent = rentList.map((p, i) => mapApiProperty(t, p, i));
+        const mappedSale = saleList.map((p, i) => mapApiProperty(t, p, rentList.length + i));
+        setRentProperties(mappedRent);
+        setSaleProperties(mappedSale);
+        setAllProperties([...mappedRent, ...mappedSale]);
+      } catch (err) {
+        console.error("[Home] Failed to fetch properties:", err);
+      } finally {
+      }
+    }
+
+    fetchProperties();
+  }, []);
+
+  const applyFilters = (filters) => {
+    setSearchFilters(filters);
+    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;
+      }
+      if (filters.propertyType && filters.propertyType !== "all" && property.type !== filters.propertyType) {
+        return false;
+      }
+      if (filters.priceRange && filters.priceRange !== "all") {
+        const priceUSD = property.priceUSD;
+        switch (filters.priceRange) {
+          case "0-500":
+            if (priceUSD > 500) return false;
+            break;
+          case "500-1000":
+            if (priceUSD < 501 || priceUSD > 1000) return false;
+            break;
+          case "1000-2000":
+            if (priceUSD < 1001 || priceUSD > 2000) return false;
+            break;
+          case "2000-3000":
+            if (priceUSD < 2001 || priceUSD > 300) return false;
+            break;
+          case "3000+":
+            if (priceUSD < 3001) return false;
+            break;
+        }
+      }
+
+      if (filters.ownerSource && filters.ownerSource !== "all") {
+        if (filters.ownerSource === "owner" && property.ownerSource !== "owner") return false;
+        if (filters.ownerSource === "agency" && property.ownerSource !== "agency") return false;
+      }
+
+      if (filters.rentPeriod && filters.rentPeriod !== "all" && property.listingType === "rent") {
+        if (filters.rentPeriod === "daily" && !property.priceDisplay.daily) return false;
+        if (filters.rentPeriod === "monthly" && !property.priceDisplay.monthly) return false;
+      }
+
+      if (filters.availableToday) {
+        if (property.status !== "available") return false;
+      }
+
+      if (filters.identityType && property.allowedIdentities) {
+        if (!property.allowedIdentities.includes(filters.identityType)) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+    setFilteredProperties(filtered);
+  };
+  const resetFilters = () => {
+    setSearchFilters(null);
+    setFilteredProperties([]);
+  };
+  return { filteredProperties, searchFilters, applyFilters, resetFilters };
+}

app/hooks/useAuth.js

@@ -0,0 +1,18 @@
+// app/hooks/useAuth.js
+import AuthService from "../services/AuthService";
+
+export default function useAuth() {
+  const authUser = AuthService.getUser();
+  const role = authUser?.roles;
+  return {
+    user: authUser,
+    name: authUser?.name ?? "Not found",
+    email: authUser?.email ?? "Not found",
+    isOwner: role?.includes("Owner"),
+    isAgent: role?.includes("RealEstateAgent",""),
+    isCustomer: role?.includes("Customer"),
+    role: role,
+    isGuest: !authUser,
+    isAuthenticated: !!authUser,
+  };
+}